Note: Since I was getting lots of comment spam I've closed comments here. If you have any comments or suggestions, feel free to file them on the Firebug Issues page or drop us a line in the Firebug discussion group in the Tabs on Top thread.
The Firebug tabs-on-top UI refactoring has finally landed in Firebug 1.4 alpha. You can download it as firebug-1.4.0a17.xpi (or later) from http://getfirebug.com/releases/firebug/1.4. This change is pretty close to the one I described and prototyped in February (see Improving the Firebug UI) and which in turn follows my original proposal from late last year (see Firebug UI: Tabs on the Top). These blog posts describe the reasoning behind the change so I won't rehash it in full.
The old layout had a toolbar at the top of the Firebug UI, and a tabbed "panel bar" below it. Sometimes a tabbed "side panel bar" would show up to the right of the main panel bar. This change essentially takes the toolbar and the side panel bar (when it appears) and puts them inside the active panel. This puts the panel tabs at the top of the Firebug UI (hence the name "tabs-on-top") and panel specific controls underneath. Several controls that are not panel-specific (the main Firebug menu, the search box, and the detach window and close window buttons) have been moved to the tab strip, so they are effectively in the same location as before the change. The idea is that UI elements that are specific to a panel look like they are inside that panel. This description probably makes the change sound more complicated that it really is. A screenshot will better communicate how it looks.
Firebug UI with the tabs-on-top layout. The Net panel is selected.
Even the screenshot is a poor substitute for actually downloading the extension and trying it out, so let me encourage you to do that. There are still some outstanding issues, before this change can really be called complete.
- The location of the main panel Options menu is less than ideal. I think the right thing to do here is to merge the panel options with the menus on the panel tabs, but I haven't had time to prototype it yet.
- The Inspect button really belongs on the top toolbar. I've held off on relocating it because I think it will look too much like the label of a panel tab. There are a couple of options here. We could change the styling to make it look more like a button. We could replace the label with an icon, or we could change the tab styling so even unselected tabs show a tab outline. Probably any of these solutions would work, we just need to figure out what the best one is.
- The position of the debugger buttons can jump drastically under
some conditions. Normally the debugger buttons only appear when the
Script panel is active. However, if JavaScript execution is paused,
the debugger buttons always appear, regardless of the tab. With the
new layout this means their position can jump if you switch to another
tab which doesn't have a side panel bar. I think it might make sense
to move them to the left side of the toolbar, which will eliminate this
problem. This seems like it might be a fairly controversial change, so
we really need to explore it separately.