Scrolling Panel Tab Bar - Design Analysis

From FirebugWiki

See some design proposals for new Firebug tab bar (the one showing list of all panel tabs). The design is done using existing Firefox scroll-buttons that are used to scroll Firefox tabs.

Notice that using the same/existing styling could help to avoid cross OS problems.

I have used tabbrowser-arrowscrollbox, scrollbutton-up, scrollbutton-up and tabs-alltabs-button classes that are already defined by Firefox and modified them to fit Firebug's UI (mainly margings, border and radius).

The XUL code looks roughly as follows (inline styles depend on the actual screenshot):

<hbox class="tabbrowser-arrowscrollbox" flex="1">
    <toolbarbutton class="scrollbutton-up"
        style="width: 17px; margin-bottom: 0px; margin-top: 4px;"/>
 
    <hbox id="fbPanelBar1-panelTabs" class="panelTabs" role="tablist"
        aria-label="firebug panels"/>
 
    <toolbarbutton class="scrollbutton-down"
        style="width: 17px; margin-bottom: 0px; margin-top: 4px;"/>
    <toolbarbutton class="tabs-alltabs-button" type="menu"
        style="width: 17px; margin-bottom: 0px; margin-top: 4px;"/>
</hbox>

[edit] Inline Tab Bar

This is done with minimal changes to the existing UI desing. The scroll arrows are displayed only if necessary (this is true for any case) and the right arrow is displayed in the state when mouse is hovering of it.

This is just slightly different version of the above.

[edit] Separate Tab Bar

In this case, the tab bar is moved to a separate horizontal row. The right arrow shows the state when the user click on it. My feeling is that this is better from the design point of view (and almost identical UX with Firefox), but is less practical since Firebug needs more vertical space. To safe the space we would be probably forced to move buttons from the panel's toolbar (displayed within the panel content) back to the main Firebug toolbar.

Slightly different version with the all-tabs button.

[edit] Tab Bar for side panels

In case of side panels, the situation is easier. I think the solution is straightforward. Here is how it would look with the inline tab bar.

And together with the separate tab bar.

[edit] Inline Tab Bar, Iteration II.

Another screenshots with scroll and all-tabs buttons.

Only the all-tabs buttons is available

Another option to avoid scrolling could be to use the same approach as Chrome does

Every tab can just shrink if there is no enough place. So following situation

... would look like as follows