Joey's Bookmarklet (Development) Page

Note: You can use this bookmarklet on any web page. Just drag or copy it into your browser's Bookmarks, then run it any time when you are surfing.

Makes parts of the page collapsable and expandable, for easier navigation through large (tree-structured) pages.

Currently collapses BLOCKQUOTEs, ULs and TABLEs. Are there other tags it could collapse? (Check the code, it's easy to add extra tags.)

Shouldn' it be collapsing all the text after each bookmarklet on this page? (They are in blockquotes.) Is it missing them because they contain so little, or because we have done the parent and lost track of the child?

Bug: At the moment this tool only works well if the element we fold up has a short text-heading appearing just before it. Not all pages are like this, so we need to adapt the algorithm to work over a wider range of pages.

Todo: We could even create blocks to compress where there was no structure. E.g. create a block between two HR tags, provided the text content in between is large. Or in fact squash any blocks containing text, if the text is >=15% of the parent's text.

Note: Loads external script.

Lets you select a part of the page, and throws away the rest! But has undo. :)

Todo: Oh dear I just tried it on this page, and the restore brought everything back in reverse order!

Note: Loads external script.

Stolen from squarefree.

No globals

Adds a search filter bar at the top of the page. Hides all parts of the page except those matching your search expression.

Pretty damn slow in Mozilla. Not too bad in Konqueror though. The reason is that I set all child nodes to display:none, in case we don't set the parent node. But if we do, all those sets on the children were a wasted effort. Improve the algorithm!

Added a nice unpleasant green style, and Close and Clear buttons.

Bug: Sometimes we are wanting to select certain rows from a table, but this implementation hides the other cells in the row, even if one cell matches.

Todo: The search expression is too simple, at the moment we perform an exact case-sensitive match. We should allow multi-word search, and exclusion with '-'.

Todo: Add options: case-sensitive, search HTML (rather than text), keep neighbours to depth/distance N.

This idea was moved to XPath Tester: Allow trimming by XPath expression. This can be very useful to extract precise elements of the page (e.g. Headings), or just to test an XPath. If we display results in a small window (not the doc itself), user can click on each to jump to that part of the page! So user just needs to find an XPath matching the headings, then he has built an index/contents navigation-assisting sidebar.

Note: Loads external script.

Here is a Tiny XPath Tester I found on stackoverflow (homepage.

Waits for user click, and hides whatever element they clicked on from the page.

Todo: Actually destroy the element! This is more like a Zap script, setting style.display='none'.

Todo: Add two icons to the page, one to turn off the bookmarklet, another to undo deletes (restore deleted elements from the Trash).

Todo: Add info about what was destroyed (e.g. display its XPath in the statusbar, or in Trash list).

Todo: The element we want to destroy might not have any exposed surface to click on, e.g. a FORM. Maybe we can fatten out invisible/zero-size elements. (E.g. mark each with a '.'s and give info on mouseover?)

Displays a list of all the links in the page.

(This works badly on this page because the hrefs are poorly formatted, but on most pages it works fine!)

Displays a list of all the images in the page.

Adds the favicon of the host server next to every external link on the page.

I was recommended to consider also host/favicon.png but I saw none of these so stuck with .ico.

Removes all HTML and CSS font settings from the DOM, so your browser will use its default font set.

Bug: Sometimes it fails to clear all of the styles. I think these might be css files included by script tags whos rules do not appear in document.styleSheets.

Todo: Convert known faces to sensible choice. E.g. if the document specifies a fixed-width font we recognise, then convert the font to our favourite fixed-width font, and not a serif font. (TT and PRE tags should work fine already.)

Allows you to move parts of the page around.

Re-run the bookmarklet to stop it. Elements made moveable will remain moveable, and un-clickable.

When testing from this page, the script cannot be easily disabled if you have not first Bookmarkleted it!

Done: Made moved elements sit relative to the page, not floating relative to the window.

Todo: Reset border properly when done.

Todo: To make selection of the correct container easier for the user, we should highlight or change the border of the element about to be selected, like Highlight Structure does. We should reset the changed style property afterwards.

Isn't there some sort of "nowrap" or "float" option that will stop things overlapping?

Note: Loads external script.

Splits the page, placing the current page on the left, and a preview window on the right. The user can hover over a link to see its preview. Great for quickly browsing search results.

I have found myself often using the Focus bookmarklet to select the block of interesting links before using SplitPreview, but Focus could use some work.

Note: This Bookmarklet does not work well on this page, because the links on this page are mostly bookmarklets, so do not point at pages we could preview. At least the first and last links on the page should work for you.

There are now two close buttons available to the user, one for each frame.

Todo:

Open the first link automatically. I tried this and realised it's not always desirable. Google results' first link is GoogleMaps with a big flash-app.

Thin frame across the top of the two panes, containing all the buttons+options, including Next/Previous buttons.

Maybe also a squish/unsquish button for the sidebar (temporarily almost-maximize preview frame)?

Also might be nice to have 'MoveRightFrameToLeft' and also a back button for that feature. This would describe a sort of history-tree-browsing way or surfing, somewhat similar to the early Gnome2 file-chooser.

Consider an alternative approach: forget the left frame, just have a thin top frame with all the links from the page presented as tabs, which open in the mainframe below. We could even do this without frames, just a table and an IFrame (or a hidden stack/cache of IFrames).

Bug/Feature: By quickly clicking on a link then moving away, it is possible to leave the highlight behind on an earlier link.

Bug: If you click e.g. a "Next" link in the side-pane, that frame will navigate but you will lose the bookmarklet's functionality. We might require a userscript to overcome this.

Some pages break out of frames. I don't know how to prevent this.

Remove the hover? Fix the sticky-hover bug?

Use this if you want the browser to open a new window when you click on a link or button. (E.g. you want to use the search form, but you don't want to leave the current page.)
Some browsers now do this automatically if you Ctrl-click on the submit button.

Use this if you want the browser to stay in the current window when you click on a link or button.

Finds other pages on the web which link to this page.

Uses Google to search this site for the currently selected text (or all pages if you haven't selected anything).

Stay safe online! Use this bookmarklet to check whether the current website is good or bad! It will open the myWOT service in a new tab/window.

I think of these ones as toolbar buttons. (You can even give them a monochrome "icon" in Firefox if you copy a Unicode character from somewhere.)

Some browsers no longer provide this as a default button!

When we run out of path, we could reduce the domain.

Magic Back button. If you have opened a link in a new tab or window, the tab will not have a Back button, but sometimes the document.referrer is set to the page you clicked from, so you can use this button just once, to go 'back' to the page which we were linked from.

Actually causes a forward navigation action. Works only once. To avoid confusion, we could use document.location.replace() which would prevent creating confusing history.

Navigates to the current page. Acts like the normal browser Refresh/Reload button but less likely to reload cached files.

When the location contains an anchor (# char) browsers interpret this as a scroll request, not a load request. So in the presence of # the bookmarklet fall back to document.location.reload().

In recent versions of Firefox, Reload will retain form input values, whilst Revisit will reset them.

Sometimes the page will not have been bookmarked by anyone, in which case you could lookup the website homepage with...

My own dodgy console. With handy inspect() function. Now auto-loads JQuery.

Closes on Escape key.

Added user convenience functions inspect(obj) (shortcut i:obj), loadScript(url) and addStyle(cssString).

Beware: Inspection now runs automatically when you type a . at the end of any expression.

Added runtime option QuickConsole.showKeyEvents.

Done: Close button is in the right place now.

Done: Lots of expansion and bloat, including command-line history (still a couple of bugs to iron out there).

Added shortcuts c: to evaluate CoffeeScript and C: to show just the JS translation.

Testing: It would be groovy if both boxes worked the same, on the other. So you can choose which box to edit in depending if you have big code producing little output, or little code producing big output.

The Javascript Shell on SquareFree provides Tab-completion!

Todo: Improve looks. Move towards an IDE style (e.g. Firebug Lite) by integrate with XPathTester, JSInspector and HighlightStructure. Steal good bits from SquareFree's Console.

Intercept console.log()?

I somewhat regret having made the CS script lazy-loading, since it forced me to replace lots of nice return r;s with callback(r);s, increasing the complexity of the code. (We could have returned, but squeezed in a callback also, in the case where it is needed.)

The . shortcut occasionally activates when we don't want it to (e.g. in document.location = myObj.somePro oh damn). To avoid this, do not fire until user pauses typing.

In the case of document.body.appendChild(document.createElement('div')). then style. we often want to re-use the result from the first evaluation (although it may occasionally be undesirable - we could possibly break an object's state although it appears we are making a fresh one). Doing this properly may be beyond the scope of a bookmarklet; really we would need need an expression/statement parser and evaluator in order to re-use sub-expressions.

Loads a little XPath testing tool which will show you the results of your xpath query.

Note: Loads external script xpath_tester.js

That script may also loads xpath.js XPathResult shim if required, needed by Konqueror 3.5.

See also: ajaxslt

Quick and easy DOM inspectors.

Early scripts, need improvement.

Colours the background of every element in the document according to its path.

Displays the XPath of the focused element as a popup (sets title attribute).

Useful when using Nuke, to find the element you really need to kill. Todo: Include Highlight Structure in Nuke automatically.

More useful for developers: as well as showing the XPath, we now also show the attributes of the element in its title/popup.

Added tag and attributes to title. Too bad the newlines don't work in the fox.

Added limited CSS info to title.

Issue: Cannot toggle off!

The current "webdeveloper" version is psychedelic but informative. We might want to make a friendlier few-colour version, for common browsing usage. Example usage: The structure of this page (and some others on the web), whilst tree-like, is not immediately intuitive. However if we were to set the background of all level 1 DIVs to green, and level 2 DIVs to blue, and level 3 BLOCKQUOTES to orange, etc., the page might be easier to navigate.

Can be sluggish to run on the heavier DOMs, due to poor event capturing.

It acts on every element you move the mouse over, which can be a lot. It could take a break while you move, if it doesn't highlight newly entered elements, it won't have to unhighlight them on the way out.

Part of the problem is that a mouselistener is added to every element in the DOM, when we should just capture using the body element.

Adapt the colour generator to produce pastels only.

Todo: Colouring all things of the same depth/path with the same colour is informative, but sometimes two neighbouring elements merge together and cannot be distinguished. Recommend slightly altering brightness/saturation (not hue) for neighbouring elements.

Depth: number of parent-nodes with non-zero clientWidth x Height, and larger area than children. Depth should rotate around the hues in e.g. 6 or 9 steps.

Rather than use the browser"s default popup for title tag when hovering over elements, we could use our own custom popup. This could give 2 advantages: 1) we could make newlines work in Mozilla; 2) By keeping the popup ever-present, the user can easily see when the XPath switches by a little or a lot. The XPath in Konqueror's statusbar almost does this, but when hovering over a link it gets hidden.

A modified version which does all the colouring in one go.

Fewer colours (same tags have the same colour, no matter the depth), but still too much contrast.

Splits the page, placing the current page on the left, and a preview window on the right. The user can hover over a link to see its preview.

This version provides a 'Togglebar' to flatten/unflatten the sidebar.

It's working quite OK in Firefox, but a bit messily in Konqueror.

The ToggleBar should change height if the user resizes the window.

Releases some CSS and HTML width constraints, so fixed-width pages will expand horizontally to fill your screen.

It is quite hard to construct an algorithm that will work on a wide range of pages. It is easy to destroy CSS that was preventing overlapping for example. I don't know enough about the different ways CSS is used to really attempt this properly. My primitive attempt remains here until I find a better one!

Done: Apart from tables, there are divs with fixed width, controlled by their css style. e.g. <div style="width: 710px;">

Seems we must check all the CSS styles, not only those associated with elements.

Current implementation only works on widths which have been given specified width between 500 and 1024px.

We don't yet detect width="90%" - we see that as 90px and skip it.

Set css widths to "auto" rather than "100%".

Deal with elements that are too thin because they have a large margin or padding css setting.

Bah CSS smells. Some pages I just can't fix without manual tweaking. Setting all widths to 'auto' will sometimes cause things to not fit well together.

Consider: Maybe better to set table/cell/row widths to "" (aka auto) rather than "100%".

Todo: Fine if you have a big browser. But the Bookmarklet should also make an effort to help, if your screen size is small.

My monstrous old web test environment, almost working through a bookmarklet!

Note: Loads external script.

Adds a 'preview' to each link, to open it 'inline' in an IFrame.

Alternatively to clicking, show popup preview on hover.

Very initial implementation (PoC).

Generates a Bookmarklet which when invoked later offers a drop down menu of:

Opening the original page.

All the links on the original page. (Maybe those links were bookmarklets ^^. Optional: generate menu in tree, according to page.)

In other words, I intend to run this script on my Minitools (collected bookmarklets) page, to generate a bookmarklet which contains all of them in a menu. :)

Maybe it isn't an immediate drop-down menu, but it sits as an icon until clicked.

If the user wants to keep it alive, we will need to keep our functions safe in a different frame. But in that case all the bookmarks will need to be retargetted at the relevant frame.

...

...

Now highlighting the link which is being previewed.

Added loading page (nice for feedback, annoying afterwards).

I set links to open in the right frame when clicked, rather than leaving the frameset or opening a new window, although hover is usually sufficient anyway.

In this version only, links from the left pane open in a new tab/window when clicked.

In this version, clicking on a link causes it to open in the current tab, leaving the frameset.

The only good thing about the initial IFrame implementations, is that we don't have to rebuild the DOM, we can successfully move the existing page inside the table. The disadvantage is they they suck. The sidebar needs a scrollbar too, but I couldn't successfully add the document into an IFrame.

The TABLE methods might not suck so terribly if we used CSS 'overflow: scroll;'.

Split Preview Prototype 0.4 - Poor

Instead of a floating IFrame, we split the view left/right and put the two panes inside a table.

Done: Using only onmouseover for hover detection is too sensitive. We should also check: 1) user has hovered over the link for some time, and 2) the link being hovered on is not already loading!

Done: Add Close button, to remove the floatingframe, and remove all the onmouseover events we added.

Popup Preview Prototype 0.3 - Poor

Pops up a floating IFrame, where target pages are displayed when we hover over links on the current page.

Bug: When invoked on Google result pages, the IFrame's floating style does not work properly - it sits at the bottom of the page.

Bug: It frequently covers up the links we want to hover over!