Firefox/Projects/Multiple Tab Selection/Design

[DRAFT v.3]

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 an existing built-in tab grouping mechanism, using multiple windows is the currently preferred method of separating groups of tabs. (TabCandy 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 of them, multiple tab selection enables the user to select that subset and then select 'Close other tabs' from the context menu of a selected tab. With the trend of increasing information overload, this feature helps make it easy for users to remain in control of their browsing experience.

Terminology

• The "SELECTED tab" refers to the selected tab of a window that has its content displayed in the browser viewport. (To SELECT a tab is to set that tab as the SELECTED tab.)
• A "selected tab" refers a tab to which a "multiple tab action" would be applied.

Visual Design

• While only the SELECTED tab is selected, there are no multiple selection indicators.
• While more than one tab is selected, all selected tabs including the SELECTED 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 SELECTED tab is, by default, selected and cannot be deselected.
  • In other words, deselecting all tabs will still keep the SELECTED tab selected.
• By default, the anchor tab is the SELECTED tab.
• If the anchor tab is removed, the anchor tab is reset to the default.
• There will no keyboard (non-mouse) shortcuts to handle multiple tab selection.
• While the SELECTED tab is an app tab, multiple tab selection is disabled.
• Tab duplication is only allowed when only one tab (the SELECTED tab) is selected.
  • It would be fantastic if we could remap tab duplication from ctrl+drag to alt+drag on Windows and Linux, solving both "mode within a mode" and cross-platform inconsistency problems, but the drag-and-drop code is deep down in C++, and it seems (to attempt) to adhere closely to the OS's mappings.

Tab mousedown:

• SELECT tab
• if this tab had been not already SELECTED:
  • deselect all other tabs
• set tab as anchor tab

Tab alt+mousedown (opt+mousedown on OS X):

• SELECT tab
• deselect all other tabs
• set tab as anchor tab

Tab ctrl+mousedown (cmd+mousedown on OS X):

• toggle selection of tab
• set tab as anchor tab

Tab shift+mousedown:

• deselect all tabs
• select all tabs from anchor 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 anchor tab to this tab

SELECTED tab drag or selected tab shift/ctrl+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
  • move selected tabs to that window at that location in the tab container
• if dropped downward to the viewport or out of the window
  • detach selected tabs to new window; selected tabs will not be selected in new window
• if dropped on the bookmarks toolbar or sidebar
  • bookmark the selected tabs
• notes:
  • these actions maintain the SELECTED tab, the relative position, and the selection state of the selected tabs
  • unmodified drags on non-SELECTED tabs will not work, because unmodified mousedown on a non-SELECTED tab SELECTS that tab already

Tab context menu:

• 'Close other tabs' closes all the non-selected tabs in the window
• 'Open in a New Window' detaches selected tabs to a new window
• 'Close Selected Tabs' closes the selected tabs in the current window

More usage examples

Pre-condition	Actions	Post-condition
window 1 = 20 tabs.	click tab 11; shift+drag tab 20 downward.	tabs 11 - 20 detached to new window.
window 1 = 20 tabs, tab 11 is selected.	shift+drag tab 20 downward.	tabs 11 - 20 detached to new window.
window 1 = 10 tabs; window 2 = 10 tabs.	focus window 2; click tab 1; shift+drag tab 10 to window 1's tab bar.	all of window 2's tabs moved to window 1; window 2 closed.
OS = Windows; window 1 = 5 tabs, tab 3 is selected; window 2 = 5 tabs.	focus window 1; ctrl+click tab 5 to window 2's tab bar.	tabs 3, 5 moved to window 2.
OS = OS X; window 1 = 5 tabs, tab 3 is selected.	shift+click tab 5; cmd+click tab 1; drag tag 3 downward.	tabs 1, 3, 4, 5 detached to new window.
OS = OS X; window 1 = 5 tabs, tab 3 is selected.	shift+click tab 5; cmd+click tab 1; shift+drag tab 2 downward.	tabs 1, 2, 3 detached to new window.