The Selenium IDE with the new improved look 🙂
Styles are awesome! What started as an exploration to add some style for a menu for one of my Selenium IDE Plugins turned into a small redesign of the panes header of Selenium IDE.
What I refer to as panes is the lower section of the Selenium IDE. The one that shows the log, the reference, the UI-Element and the Rollup. It also holds the Stored-Vars if you have my Stored Variables Viewer Selenium IDE plugin installed. Internally, Selenium uses a toolbar as the pane header and each of the pane selector is a toolbar button. These toolbar buttons are styled to show the title of the active pane in black colour and the titles of the other panes in grey colour. I decided to give it a little facelift and here are the results.
In my opinion it looks much better. The old grey buttons used to tell me that the these panes are not available (i.e. disabled). Changing the pane selectors to tabs is much more visually appropriate. Changing the toolbar buttons to real tabs has the danger that some plugins that expect these to be real toolbar buttons will stop functioning. Considering that the only widely known plugins that utilise these panes are all mine 😉, it is not too bad. I would still prefer to avoid this kind of change. Won’t it be really cool if we can somehow just change the appearance of the toolbar buttons to tabs? That’s exactly what I did by using the almost magical Firefox only CSS property -moz-appearance! The change is a simple one line addition.
-moz-appearance: tab !important;
Of course, I could not resist cleaning up the now unneeded style rules used earlier and while at it, I also fixed another minor style issue. You can find the complete changes in the patch I provided with issue 816 on the Selenium Google code site.