[webkit-changes] [132790] trunk/Source/WebCore

Mon, 29 Oct 2012 05:46:44 -0700

Title: [132790] trunk/Source/WebCore
Revision
132790
Author
[email protected]
Date
2012-10-29 05:48:06 -0700 (Mon, 29 Oct 2012)

Log Message

Web Inspector: Fix vertical alignment in toolbar backgrounds and overflow button.
https://bugs.webkit.org/show_bug.cgi?id=100373

Patch by Patrick Dubroy <[email protected]> on 2012-10-29
Reviewed by Pavel Feldman.

Fix the background image for the selected toolbar item to be vertically centered.
Make close button and toolbar overflow button vertically centered for any toolbar
height.

* inspector/front-end/Toolbar.js: Remove unused variable.
* inspector/front-end/inspector.css:
(.toolbar-item.toggleable):
(body.compact .toolbar-item.toggleable):
(.toolbar-item.toggleable.toggled-on):
(body.compact .toolbar-label):
(#toolbar-dropdown-arrow):
(#close-button-left, #close-button-right):
(.toolbar-item.close-left):
* inspector/front-end/inspector.html:

Modified Paths

Diff

Modified: trunk/Source/WebCore/ChangeLog (132789 => 132790)


--- trunk/Source/WebCore/ChangeLog	2012-10-29 12:43:02 UTC (rev 132789)
+++ trunk/Source/WebCore/ChangeLog	2012-10-29 12:48:06 UTC (rev 132790)
@@ -1,3 +1,25 @@
+2012-10-29  Patrick Dubroy  <[email protected]>
+
+        Web Inspector: Fix vertical alignment in toolbar backgrounds and overflow button.
+        https://bugs.webkit.org/show_bug.cgi?id=100373
+
+        Reviewed by Pavel Feldman.
+
+        Fix the background image for the selected toolbar item to be vertically centered.
+        Make close button and toolbar overflow button vertically centered for any toolbar
+        height.
+
+        * inspector/front-end/Toolbar.js: Remove unused variable.
+        * inspector/front-end/inspector.css:
+        (.toolbar-item.toggleable):
+        (body.compact .toolbar-item.toggleable):
+        (.toolbar-item.toggleable.toggled-on):
+        (body.compact .toolbar-label):
+        (#toolbar-dropdown-arrow):
+        (#close-button-left, #close-button-right):
+        (.toolbar-item.close-left):
+        * inspector/front-end/inspector.html:
+
 2012-10-29  Eugene Klyuchnikov  <[email protected]>
 
         Web Inspector: Timeline: Overview bars do not correspond to timeline bars

Modified: trunk/Source/WebCore/inspector/front-end/Toolbar.js (132789 => 132790)


--- trunk/Source/WebCore/inspector/front-end/Toolbar.js	2012-10-29 12:43:02 UTC (rev 132789)
+++ trunk/Source/WebCore/inspector/front-end/Toolbar.js	2012-10-29 12:48:06 UTC (rev 132790)
@@ -183,7 +183,6 @@
     {
         this._setDropdownVisible(false);
 
-        var toolbar = document.getElementById("toolbar");
         if (this.element.scrollHeight > this.element.clientHeight)
             this._dropdownButton.removeStyleClass("hidden");
         else

Modified: trunk/Source/WebCore/inspector/front-end/inspector.css (132789 => 132790)


--- trunk/Source/WebCore/inspector/front-end/inspector.css	2012-10-29 12:43:02 UTC (rev 132789)
+++ trunk/Source/WebCore/inspector/front-end/inspector.css	2012-10-29 12:48:06 UTC (rev 132790)
@@ -96,11 +96,18 @@
 
 .toolbar-item.toggleable {
     padding-top: 4px;
+    padding-bottom: 4px;
 }
 
+body.compact .toolbar-item.toggleable {
+  margin: 1px 0;
+  padding-bottom: 2px;
+}
+
 .toolbar-item.toggleable.toggled-on {
     border-width: 0 2px 0 2px;
-    padding: 4px 4px 0 4px;
+    padding-left: 4px;
+    padding-right: 4px;
     -webkit-border-image: url(Images/toolbarItemSelected.png) 0 2 0 2;
 }
 
@@ -109,6 +116,7 @@
     width: 32px;
     height: 32px;
     background-image: url(Images/toolbarIcons.png);
+    vertical-align: top;
 }
 
 body.compact .toolbar-icon {
@@ -131,9 +139,12 @@
 }
 
 .toolbar-label {
+    line-height: 15px;
     font-size: 11px;
     font-family: Lucida Grande, sans-serif;
     text-shadow: rgba(255, 255, 255, 0.5) 0 1px 0;
+    position: relative;
+    top: 1px;
 }
 
 .toolbar-item.toggleable:active .toolbar-label {
@@ -143,8 +154,7 @@
 body.compact .toolbar-label {
     display: inline-block;
     margin-left: 3px;
-    position: relative;
-    top: 2px;
+    top: 0;
 }
 
 body.compact #search-toolbar-label {
@@ -159,17 +169,19 @@
 }
 
 #toolbar-dropdown-arrow {
-    font-size: 16px;
+    font-size: 14px;
     font-weight: bold;
     border: 0;
     background-color: transparent;
     -webkit-border-radius: 5px;
     text-shadow: none;
-}
+    margin: 0;
+    position: relative;
+    top: 1px;
 
-body.compact #toolbar-dropdown-arrow {
-    font-size: 14px;
-    padding-bottom: 4px;
+    /* A line height of 0 allows precise text positioning using padding. */
+    line-height: 0;
+    padding: 9px 6px 11px;
 }
 
 #toolbar-dropdown-arrow.dropdown-visible {
@@ -454,7 +466,7 @@
     background-position: 0 0;
     background-color: transparent;
     border: 0 none transparent;
-    margin-top: 4px;
+    padding: 0;
 }
 
 #close-button-left:hover, #close-button-right:hover {
@@ -490,7 +502,9 @@
 }
 
 .toolbar-item.close-left {
-    margin-top: 5px;
+  display: -webkit-box;
+  -webkit-box-align: center;
+  height: 100%;
 }
 
 #main {

Modified: trunk/Source/WebCore/inspector/front-end/inspector.html (132789 => 132790)


--- trunk/Source/WebCore/inspector/front-end/inspector.html	2012-10-29 12:43:02 UTC (rev 132789)
+++ trunk/Source/WebCore/inspector/front-end/inspector.html	2012-10-29 12:48:06 UTC (rev 132790)
@@ -173,7 +173,7 @@
     <div id="toolbar">
         <div class="toolbar-item close-left"><button id="close-button-left"></button></div>
         <div id="toolbar-controls">
-            <div class="toolbar-item"><button id="toolbar-dropdown-arrow" class="toolbar-label">&raquo;</button></div>
+            <div class="toolbar-item"><button id="toolbar-dropdown-arrow">&raquo;</button></div>
             <div class="toolbar-item close-right"><button id="close-button-right"></button></div>
         </div>
     </div>

_______________________________________________
webkit-changes mailing list
[email protected]
http://lists.webkit.org/mailman/listinfo/webkit-changes

Reply via email to