Keyboard interface

To toggle reveal open/closed, hit F2 or Alt-` (alt-backtick). The second key assignment is useful if you're used to hitting Alt-Tab - the backtick key is right above the tab key on most keyboards.

An additional key is available for closing Reveal - Esc.

While Reveal is open, you can use the up and down keys to switch between adjacent thumbnails. The selection will wrap around, so if you're at the very first thumbnail and you hit up, it will jump to the last thumbnail.

Page up and page down will show the next/previous screen full of thumbnails.

Shift-delete will remove a thumbnail's corresponding tab. Be careful - the shift-delete will also delete characters in the text box. I have no fix for this yet.

Hitting insert will switch to history mode, with the currently selected thumbnail's history shown. If already in history mode, it will switch to tab mode. Hitting ctrl-insert will switch to all mode. If already in all mode, it will switch to tab mode.

Typing in the find box will cause the current thumbnails to be filtered as you type, according to the current find mode. Note that the find box is automatically focused when Reveal is opened. If the find box is not focused, all keys except for those opening and closing Reveal will not work. Changing the find mode, thumbnail mode, match case checkbox, or regex checkbox will automatically focus the find box.

Point and click interface

A toolbar button for toggling Reveal is available in the usual place if you want it.

Triple clicking on a blank area in a page will enable a magnifying glass. When viewing an image, double clicking will suffice (to avoid selecting the picture). Use your scroll wheel to change the zoom level. Hold the right mouse button while using the scroll wheel to adjust the magnifying glass size. Click to disable the magnifying glass. Sorry, no provisions are currently made for systems without a scroll wheel.

Clicking on a thumbnail will open it. Right clicking on a thumbnail in tab mode will bring up its tab context menu. Middle clicking on a thumbnail in tab mode will close the tab. Middle clicking on a thumbnail in any other mode will open the thumbnail in a new tab.

The horizontal bar behind the thumbnails may be dragged to scroll the thumbnails left and right if you have more than a screenful of thumbnails. Individual thumbnails may be dragged in tab mode to rearrange tabs in your tab bar.

The tooltips for the back and forward buttons will show the appropriate thumbnail if the thumbnail is available.

Javascript Interface

If you want to use Reveal with extensions like mouse gestures, you can use some Javascript:

Design rationale

The beginning

This extension was one of the two ideas that I conceived with the aim of winning the extend firefox competition. It originally started small as a way to put thumbnails into the tooltips of the back and forward buttons. As I finished an early, buggy version of it (then named PreviewTip), I realized that the session history tracker/thumbnail generator code could be used for a greater purpose.

The essence of Reveal

At the time, most "Tab Expose" type extensions utilized a grid to arrange their thumbnails. I opted for a "timeline" (as one user put it) style arrangement of thumbnails because of technical and style issues. The session tracking code takes thumbnails as one browses the web, not when the user wants to see thumbnails, so the thumbnails cannot easily be dynamically sized. (This behavior also lets Reveal scale to large numbers of tabs) Besides that, grids do not handle large numbers of thumbnails well because thumbnails will become too small to be usable. Just look at your tab bar for an example. Also, I felt that packing the screen full of thumbnails was a bit overkill and uncreative.

One could argue that there could be an upper limit to the number of thumbnails packed in a grid, and allow overflow. I still believed that it was overkill and visually noisy, so I created a solution to compensate for lighter packing of thumbnails: the find bar. If the user knows exactly what he or she wants, the find bar allows significantly more efficient access than scanning a screenful of thumbnails. URL was set as the default find mode because the same keystrokes that a user uses to find an address in the location bar can also be used to find pages in Reveal.

The border colors of the thumbnails have a specific purpose - thumbnails representing pages from the same host get the same color, thumbnails representing pages from different hosts get different colors.

The thumbnail logic

Making a thumbnail is fairly quick on most systems, but the time it takes to make them quickly adds up when you're trying to take thumbnails of all tabs. It appears that many "Tab Expose" type extensions suffer from this problem, from the comments on the addons.mozilla.org site about how fast Reveal opens.

Reveal has to take thumbnails of all tabs too, but it generally avoids taking more than one thumbnail at a time. The logic of the code follows a simple goal: show the user a thumbnail of the page as they last saw it. Thus, Reveal takes thumbnails when these things happen:

The cost of making thumbnails is spread out evenly this way. The time it takes to open Reveal is simply the time it takes to make a single thumbnail of the current page, even though Reveal handles more thumbnails than other extensions. Neat, eh?

The downside of this algorithm is that when the user resizes the window, the thumbnails become somewhat inaccurate and the user may get confused. This is still the correct behavior, because the user is still seeing the page as he or she last saw them. The only exceptions to this are sites like gmail, which update/refresh themselves and cause Reveal to thumbnail the page again.

The thumbnail code includes a special case for when the user is viewing a single image. In this case, it omits the usual thumbnail of the viewport and simply thumbnails the image itself.