Bug 145985 – Web Inspector: Styles Top Options Use Too Much Vertical Real Estate

• Component: Web Inspector
• Status: NEW

[Chris Chiera]

Created attachment 254889 [details]
Comparing top of Chrome and Safari's style inspector

On Safari 8.1 on 10.11.

As Front End developers work away typically on their Macbook Pro's or other laptops, the Style sidebar is very small, thus conservative padding, font sizes, line-heights, and elements are very important. In the new Safari an enormous portion of real estate is now taken up by default as seen in the screen. That is compared to Chrome which uses just a sliver, and allows the user to show the same options by clicking buttons when needed, but not clog the sidebar when not needed. Once again, visually Safari's looks great, just not very functional compared to Chrome's implementation. I do prefer Safari's single row of state radio buttons (compared to Google's two rows), if it were just hidden by default. Having Computed, Rules, Metrics shown by default on one rule makes sense. I think The Node, Styles, Layers should however be on the same row left aligned and only show one at a time such as "Styles" with a dropdown arrow that allows you to toggle between Styles, Node, Layers, etc. Or whichever similar implantation would follow an existing safari UI experience. 

To note, Firefox I believe allows you have Styles docked to the right of the window but leaving html docked to the bottom which is absolutely amazing, and surprised Safari nor Chrome ever did the same since there is extra space to the right of most all web pages when working on a typical 15in laptop. Which then would make the space saving issues less of an issue. Though I imagine Chrome/Safari choose not to implement this for some reason.

[Radar WebKit Bug Importer]

<rdar://problem/21388697>

[Timothy Hatcher]

We do scroll away the checkboxes if there are enough rules to scroll down. We should consider one navigation bar though.

[Chris Chiera]

In regards to the "scroll away the checkboxes", could have sworn that wasn't happening before, but just tested on several different sites now and it is. Very elegant solution.