Web Inspector: Fix vertical alignment in toolbar backgrounds and overflow button.

https://bugs.webkit.org/show_bug.cgi?id=100373

Patch by Patrick Dubroy <dubroy@chromium.org> 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:

git-svn-id: http://svn.webkit.org/repository/webkit/trunk@132790 268f45cc-cd09-0410-ab3c-d52691b4dbfc
parent d4e879c5
2012-10-29 Patrick Dubroy <dubroy@chromium.org>
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 <eustas.bug@gmail.com>
Web Inspector: Timeline: Overview bars do not correspond to timeline bars
......@@ -183,7 +183,6 @@ WebInspector.Toolbar.prototype = {
{
this._setDropdownVisible(false);
var toolbar = document.getElementById("toolbar");
if (this.element.scrollHeight > this.element.clientHeight)
this._dropdownButton.removeStyleClass("hidden");
else
......
......@@ -96,11 +96,18 @@ body.compact.inactive #toolbar {
.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 @@ body.compact.inactive #toolbar {
width: 32px;
height: 32px;
background-image: url(Images/toolbarIcons.png);
vertical-align: top;
}
body.compact .toolbar-icon {
......@@ -131,9 +139,12 @@ body.compact .toolbar-item:active .toolbar-icon {
}
.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-item:active .toolbar-icon {
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 @@ body.compact #search-toolbar-label {
}
#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 @@ body.compact .toolbar-item.console .toolbar-icon {
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 @@ body:not(.platform-mac) .toolbar-item.close-left {
}
.toolbar-item.close-left {
margin-top: 5px;
display: -webkit-box;
-webkit-box-align: center;
height: 100%;
}
#main {
......
......@@ -173,7 +173,7 @@ THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
<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>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment