My main project for the last few weeks has been doing some Firebug UI work that I’ve been thinking about for a while. Since I’ve just been moving UI elements around (to make the layout more logical), I’ve been referring to this effort as “UI refactoring”.
So here’s the deal. It’s not enough that I think this redesign is an improvement, or even that the Firebug working group has been supportive. We need to know what you, the Firebug user, think.
Before I get started, I should let you know that I’ve been working on the Firebug 1.4 branch, which is still undergoing active development. The changes I’m proposing are fairly simple in the sense that they are really only a reorganization of existing UI elements. However, if you have not yet seen 1.4, be aware that there are other significant UI changes, notably John J. Barton’s work on the activation UI, kpdecker’s multi-file search capability, and Hans Hillen’s work on accessibility.What’s wrong with the current Firebug UI?
The basic UI layout for Firebug today consists of a toolbar across the top, a main “panel bar” underneath, and an optional “side panel bar” to the right. Each panel bar consists of a set of tabbed panels, only one of which is visible at a time.
This is a simple design, and seems pretty logical. There’s a problem, however. The contents of the toolbar can change substantially depending on which panel is selected in the main panel bar. For some panels this is maybe not such a big deal. At the other extreme, consider the Net panel. When the Net Panel is selected, it adds seven buttons to the toolbar which control what information is displayed inside the Net panel’s content area.
For me, using these buttons, with this placement, feels even weirder than the screenshot looks. They would feel much more natural if they were adjacent to the content area that they affect.
Furthermore, the side panel bar is only visible when either the HTML tab or the Script tab is selected. And, of course, it’s a different set of panels that show up in the side panel bar depending on whether it’s the HTML panel, or the Script panel. Logically, you could think of the HTML panel as having a smaller panel bar embedded inside it which in turn contains several sub-panels specific to the HTML view. You can think of the Script panel similarly. The other panels simply don’t have any sub-panels they need to display.
Basically, the problem is that clicking a tab changes not only the main panel below the tab strip, but also the toolbar above it, and oftentimes the side panel bar to the right as well. You click on a tab, and the whole UI mutates around it. Even though the current UI layout makes superficial sense, I contend that the toolbar – or at least a big chunk of it – belongs inside the main panel bar. I also think you can make an argument that the side panel bar, when it appears, should look like it’s inside the currently selected panel.
Another way to think of it: The tabs – Console, HTML, CSS, Script, DOM, and Net – should appear at the top of the Firebug UI where the panel-specific toolbar elements appear now. Since these main panels are the major organizing principle of the Firebug UI, it makes sense that they should be more prominent.
I’m clearly not the first person to come to this conclusion since Firebug Issue 222 makes a similar argument.
This is the layout I have working now. I’ve been referring to this as the “tabs-on-top” layout.
In this design, not all of the toolbar has been relocated. The main Firebug menu that hangs off the Firebug button is in the top-left just as it always has, and the search elements and Firebug window control elements are still at the top right. Although the side panel bar doesn’t really appear to be inside the main panel, it does at least appear subservient.
There are some smaller changes as well. Notably the tabs are now “stand-up” style –
The handling of the main panel Options button and the Inspect button still leave something to be desired. Nevertheless, I think this is a more logical layout, although you probably have to use it to really appreciate the improvement.What now?
As I mentioned above, you really need to try the out the new layout to see if it’s really does work better. To that end, I’ve attached an experimental version of the Firebug extension to the post, so you can download it and try it out. I’ve tested it fairly thoroughly on Windows and to a lesser extent on Mac and Linux. Also, since it’s built on top of the 1.4 branch, which is still under active development, you probably won’t want to leave it installed for too long. However, it should be good enough for you to take it for a test drive.