Dynamic Notebook Widget
Now that we have a nice Static Notebook Widget, we need a nice Dynamic one. This is what we usually call the "tab bar". And here's what we know about it:
* Appearance:
* Tabs should contain a close button that follows the window border's close button placement. (done)
* Tabs should have a sane maximum and minimum size, but dynamically resize to fit inside the tab bar. (done)
* Tabs contain a spinner on the opposite side of the close button when there is an action in progress (such as loading a web page). (done)
* Tab labels should ellipsize if they do not fit in the tab. (done)
* If ellipsized, you should be able to view a tab's full label in a tooltip. (done)
* There should be a new tab button using the icon "list-add-symbolic" on the left-most side of the tab bar. (done)
* The min width should be 64px and the max width 176px. (done)
* Tabs should always want to be the max width and only shrink when there is no room. (done)
* Tab bar layout should be inverted in RTL environment.
* Interacting with the tab:
* Tabs should contain a context menu with items such as "Close Tab" "Close Other Tabs" "Open Tab in New Window" "Duplicate Tab" etc (done)
* Tabs should be "pinnable". This is especially useful for web apps, style guides, etc. (done)
* Pinned tabs don't show the close button or label, only an icon (done)
* Pinned tabs are grouped to the leftmost side of the tab bar, after the new tab button. (done)
* Tabs should be drag-and-drop reorder-able. (done)
* Scrolling over the tab bar should switch tabs. (done)
* Middle clicking the tab should close it. (done)
* Double clicking on a tab should duplicate it. (done)
* Tearing a tab out of a window should create a new window. (done)
* Dragging a tab from window foo into window bar (of the same app) should be possible. (done)
* If this is the last tab in window foo, the window should be closed. (done)
* Interacting with blank space in the bar:
* Double clicking on blank space in the tab bar should produce a new tab. (done)
* Secondary clicking on blank space in the tab bar should produce a menu with items such as "Undo Close Tab" and "New Tab" (done)
* Empty space in tabbar should act as a window move handle, like titlebar and empty space in menubar (done)
Mockup: http://
Blueprint information
- Status:
- Complete
- Approver:
- None
- Priority:
- Undefined
- Drafter:
- None
- Direction:
- Approved
- Assignee:
- None
- Definition:
- Approved
- Series goal:
- None
- Implementation:
-
Implemented
- Milestone target:
- None
- Started by
- Danielle Foré
- Completed by
- David Gomes
Related branches
Related bugs
Sprints
Whiteboard
here's a nice piece talking about how dynamic width and closing tabs should work. This is a definite must-have. http://
I chose the left side of the tab bar for the new tab button for a few reasons: I don't want it at the end of the tab list because this presents a moving target. I don't want it on the right side because this is where Safari has it and it's far away from everything. I tried a preview of a Firefox Nightly that had it on the left side and it was really nice to use, especially if the new tab is created right next to the button and we can have a slick animation. And finally because we usually put the "new object" button on the left-most position in the toolbar. --DanRabbit
I'd suggest two additional actions as captured in
https:/
- double clicking on a tab duplicates it (great to have)
- preview tab when hovering (nice to have)
Also tabbar should always leave some space on margins, so a new tab can be created with a double click regardless of how many tabs are open. If a new tab button is displayed in the tabbar by default, there should be a global setting to remove it.
Last I noticed the specs above don't specify any behavior when a large number of tabs are open (will a multi-line tabbar be displayed? Would tabs scroll across one-line tabbar? I personally favor the former.) --ttosttos
Again taking some inspiration from Chrome, maybe the tab labels should fade out if they are too long, allowing us to keep as much information as possible but making it obvious there is more. -samtate
I agree with Samtate. Also if you have close button on the right side of the window border, new tab button should go to the right side of the tabs (like in current Chrome or Firefox). Additionally (IDK if it's currently implemented) tabs shouldn't expand if cursor hovers them. --Grzesiek1e5
I'm not sure it really makes sense to move the new tab button based on window close button placement. Having it on the left is largely based on the typical "new item" button placement in toolbars. --DanRabbit
For opening links from your current tab, where would they best appear? I think to be consistent with the new tab behaviour they would appear to the left of your current tab. ~HarvKitty
Work Items
Dependency tree
* Blueprints in grey have been implemented.
