One of my biggest complaints about Firebug is the way its tabbed UI
works. Firebug organizes its features into six major functional units:
Console, HTML, CSS, Script, DOM,
and Net. Each unit gets a "panel" and these panels are
organized in a tabbed display called a "panel bar". There's also a
smaller panel bar that sometimes appears to the right of the main panel
bar depending on which primary panel is selected. The main Firebug
toolbar appears just above the panel bars. Below is a screenshot from
Firebug and an annotated version of the same screenshot.
A screenshot from Firebug 1.2.1. The Script panel is currently selected.
The same screenshot as above with the major UI components labeled.
One of the things I don't like about the current UI is just how busy it looks. The toolbar is already pretty complex, and it's stacked right on top of the tabs for the two panel bars. That's not the biggest problem however. Take a look at this next screenshot.
A screenshot from Firebug 1.2.1. The HTML panel is currently selected.
In this screenshot, the HTML panel has been selected. Look carefully at the toolbar, and compare it with the first screenshot above where the Script panel was selected. The Inspect button and the find textbox are the same, but everything in between has changed. Now look at the side panel bar. That's right, it's completely different. Changing panels in the main panel bar essentially causes the whole Firebug UI to change, not just the main panel.
I think you can make a case that the toolbar and the side panel bar belong inside the current panel since they are so dependent on which panel that is. The argument is stronger for the side panel bar since it is completely dependent on the main panel bar. The argument is weaker for the toolbar since the toolbar doesn't completely change, but I think you can still make a case there.
Tabs on the bottom
So I have two problems that I'd like to solve. I'd like to make the user interface less "busy", especially with regard to the toolbar. I'd also like to promote the illusion that both the toolbar and the side panel bar are inside the currently selected main panel, since both those UI elements are so dependent on which panel that is.
I've built an experimental variant of Firebug to test out an alternative UI that I think addresses these issues.
To address the busyness issue I've moved the main panel tabs from the top of the panel bar to the bottom. This also helps differentiate the main panel bar from the side panel bar, where I've retained the tabs on the top. I think this helps a little bit with the illusion that the side panel bar is actually inside the main panel since the two panel bars now look different. Then I've tweaked the UI so that the main panel bar tabs appear to extend all the way across the window and all the way around both panels and the toolbar. This effect is perhaps more subtle than I'd like, but it still feels like an improvement.
Below is a screenshot of this alternative UI.
A screenshot from an experimental version of Firebug with the main panel bar tabs on the bottom.
It might also be useful to evaluate the design where the main panel bar tabs are moved above the toolbar. This won't do anything for the busyness issue but it might make a stronger statement that the toolbar is dependent upon the currently selected panel. (Firebug issue 222 suggests making exactly this change.)
Take it for a spin
I've attached the XPI file for my experimental Firebug build so you can try it out yourself. That will give you a much better feel for the proposed change than just looking at static screenshots. The experimental build is probably a little bit buggy, both due to my changes and the fact that it's built on Firebug 1.3 pre-release code. It should be OK to take for a test-drive, but you probably don't want to leave it installed for a prolonged period of time.
A screenshot from Firebug 1.2.1. The Script panel is currently selected.
The same screenshot as above with the major UI components labeled.
One of the things I don't like about the current UI is just how busy it looks. The toolbar is already pretty complex, and it's stacked right on top of the tabs for the two panel bars. That's not the biggest problem however. Take a look at this next screenshot.
A screenshot from Firebug 1.2.1. The HTML panel is currently selected.
In this screenshot, the HTML panel has been selected. Look carefully at the toolbar, and compare it with the first screenshot above where the Script panel was selected. The Inspect button and the find textbox are the same, but everything in between has changed. Now look at the side panel bar. That's right, it's completely different. Changing panels in the main panel bar essentially causes the whole Firebug UI to change, not just the main panel.
I think you can make a case that the toolbar and the side panel bar belong inside the current panel since they are so dependent on which panel that is. The argument is stronger for the side panel bar since it is completely dependent on the main panel bar. The argument is weaker for the toolbar since the toolbar doesn't completely change, but I think you can still make a case there.
Tabs on the bottom
So I have two problems that I'd like to solve. I'd like to make the user interface less "busy", especially with regard to the toolbar. I'd also like to promote the illusion that both the toolbar and the side panel bar are inside the currently selected main panel, since both those UI elements are so dependent on which panel that is.
I've built an experimental variant of Firebug to test out an alternative UI that I think addresses these issues.
To address the busyness issue I've moved the main panel tabs from the top of the panel bar to the bottom. This also helps differentiate the main panel bar from the side panel bar, where I've retained the tabs on the top. I think this helps a little bit with the illusion that the side panel bar is actually inside the main panel since the two panel bars now look different. Then I've tweaked the UI so that the main panel bar tabs appear to extend all the way across the window and all the way around both panels and the toolbar. This effect is perhaps more subtle than I'd like, but it still feels like an improvement.
Below is a screenshot of this alternative UI.
A screenshot from an experimental version of Firebug with the main panel bar tabs on the bottom.
It might also be useful to evaluate the design where the main panel bar tabs are moved above the toolbar. This won't do anything for the busyness issue but it might make a stronger statement that the toolbar is dependent upon the currently selected panel. (Firebug issue 222 suggests making exactly this change.)
Take it for a spin
I've attached the XPI file for my experimental Firebug build so you can try it out yourself. That will give you a much better feel for the proposed change than just looking at static screenshots. The experimental build is probably a little bit buggy, both due to my changes and the fact that it's built on Firebug 1.3 pre-release code. It should be OK to take for a test-drive, but you probably don't want to leave it installed for a prolonged period of time.