<html>
<head>
<base href="https://bugs.webkit.org/" />
</head>
<body><table border="1" cellspacing="0" cellpadding="8">
<tr>
<th>Bug ID</th>
<td><a class="bz_bug_link
bz_status_NEW "
title="NEW - Web Inspector: Styles Top Options Use Too Much Vertical Real Estate"
href="https://bugs.webkit.org/show_bug.cgi?id=145985">145985</a>
</td>
</tr>
<tr>
<th>Summary</th>
<td>Web Inspector: Styles Top Options Use Too Much Vertical Real Estate
</td>
</tr>
<tr>
<th>Classification</th>
<td>Unclassified
</td>
</tr>
<tr>
<th>Product</th>
<td>WebKit
</td>
</tr>
<tr>
<th>Version</th>
<td>528+ (Nightly build)
</td>
</tr>
<tr>
<th>Hardware</th>
<td>Macintosh
</td>
</tr>
<tr>
<th>OS</th>
<td>Mac OS X 10.10
</td>
</tr>
<tr>
<th>Status</th>
<td>NEW
</td>
</tr>
<tr>
<th>Severity</th>
<td>Normal
</td>
</tr>
<tr>
<th>Priority</th>
<td>P2
</td>
</tr>
<tr>
<th>Component</th>
<td>Web Inspector
</td>
</tr>
<tr>
<th>Assignee</th>
<td>webkit-unassigned@lists.webkit.org
</td>
</tr>
<tr>
<th>Reporter</th>
<td>chris@heavymark.com
</td>
</tr>
<tr>
<th>CC</th>
<td>graouts@webkit.org, joepeck@webkit.org, jonowells@apple.com, mattbaker@apple.com, nvasilyev@apple.com, timothy@apple.com, webkit-bug-importer@group.apple.com
</td>
</tr></table>
<p>
<div>
<pre>Created <span class=""><a href="attachment.cgi?id=254889" name="attach_254889" title="Comparing top of Chrome and Safari's style inspector">attachment 254889</a> <a href="attachment.cgi?id=254889&action=edit" title="Comparing top of Chrome and Safari's style inspector">[details]</a></span>
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
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.</pre>
</div>
</p>
<hr>
<span>You are receiving this mail because:</span>
<ul>
<li>You are the assignee for the bug.</li>
</ul>
</body>
</html>