Firefox/Projects/Tab Multi-Selection/Design
Frank Yan
Introduction
Firefox does not provide a method to select multiple tabs simultaneously. The primary obstacle to shipping this feature has been the difficulty of enumerating edge cases. An implementation of this feature is in progress and can be found at bug 566510 and the project page. This design document seeks to provide examples of compelling use cases and to describe the intended behavior of this feature, covering all known edge cases as precisely and concisely as possible.
Motivation
It has been over a decade since tabs were introduced. Today, tabbed browsing has seen mainstream adoption, and having more than 20 or even 50 tabs open at once is a common occurrence. However, users rarely are working on that many separate tasks. Instead, tabs can be naturally grouped into their related tasks or categories.
Without a built-in tab grouping mechanism as of Firefox 3.6, using multiple windows is still the primary method of separating groups of tabs. (Firefox Panorama aims to solve this problem.) With multiple tab selection, we leverage the windowing system to provide useful functionality without breaking existing interactions. We also follow each operating system's selection paradigms when they make sense in the tab container context.
Firefox 3.5 shipped with a "tab tearing" feature that enables users to detach a tab to a new window or drag individual tabs between windows. However, there are many cases in which a user may have already opened multiple tabs that the user wants to move to a different window. Currently, this requires one click-and-drag per tab. As specified in this document, multiple tab selection would achieve this result with at most n clicks and 1 drag motion. The common case of selecting and dragging a range of tabs can be completed in at most 2 clicks and 1 drag.
In the case where a user has opened many tabs but only wishes to keep a small number of them open, multiple tab selection enables the user to select that subset and then select 'Close Other Tabs' from the context menu of a selected tab. Given the trend of increasing information overload, this feature helps make it easy for users to remain in control of their browsing experience.
Terminology
- The "active tab" refers to the tab of a window that has its content displayed in the browser viewport.
- A "selected tab" refers a tab to which a "multiple tab action" would be applied.
Visual Design
- While only the active tab is selected, there are no multiple selection indicators.
- While more than one tab is selected, all selected tabs including the active tab have some indication of being part of the multiple selection.
- In Firefox 4, the visual indicator will be a glow that appears along the inside edge of the tab.
- In the future, indicators could include functional elements, such as a group close button.
Interaction Design
Notes:
- The active tab is, by default, selected and cannot be deselected.
- In other words, deselecting all tabs will still keep the active tab selected.
- Activating or selecting a tab slides it into view if it wasn't already fully visible.
- Tab duplication is only allowed when only the active tab is selected.
- When either the active tab or the target tab is an app tab, no tab multi-selection shortcuts will function (besides setting the active tab).
- There are no (non-mouse) keyboard shortcuts planned to handle multiple tab selection.
Tab mousedown:
- Activate tab
- if this tab was not part of a multi-selection:
- deselect all tabs
Tab ctrl+mousedown (cmd+mousedown on OS X):
- toggle selection of tab
Tab shift+mousedown:
- deselect all tabs
- select all tabs from active tab to this tab
Tab shift+ctrl+mousedown (shift+cmd+mousedown on OS X):
- if this tab is currently selected:
- deselect all tabs
- otherwise:
- deselect all tabs
- then select all tabs from active tab to this tab
Tab drag (shift/cmd+drag on OS X):
- if dropped in tab container
- move selected tabs to that location in the tab container
- if dropped in another window's tab container
- deselect all tabs in that window
- move selected tabs to that window at that location in the tab container
- if dropped downward more than 2 tab heights away or outside of the window
- detach selected tabs to new window
- if dropped on the bookmarks toolbar or sidebar
- bookmark the selected tabs
- notes:
- these actions maintain the active tab, the relative position, and the selection state of the selected tabs
- multiple tabs cannot be "dropped" into text fields, etc.
The following actions deselect all tabs:
- Mousedown on a tab close button
- Mousedown outside of the tab bar
- Activate a non-selected tab
- Open a new tab
- Close a selected tab
- Change the state of a tab between app and normal
Tab context menu:
- 'Close Selected Tabs' closes the selected tabs
- This is hidden when only the active tab is selected.
- 'Close Other Tabs' closes the non-selected tabs
- This is hidden when an app tab is selected (to avoid mode confusion)
- This is disabled when all non-app tabs are selected.
- 'Open in a New Window' detaches the selected tabs to a new window
- This is disabled when all tabs are selected.