DevTools: make toolbar button click targets square

Source/devtools/front_end/ui/toolbar.css

 /*
  * Copyright (c) 2014 The Chromium Authors. All rights reserved.
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file.
  */
 
 :host {
     flex: none;
+    padding: 0 2px;

[dgozman, 2015/06/11 16:14:12]

This may strike when two toolbars are near each other.

[pfeldman, 2015/06/11 16:38:07]

That's probably fine for now?

 }
 
 .toolbar-shadow {
     position: relative;
     white-space: nowrap;
-    height: 24px;
+    height: 26px;
     overflow: hidden;
     z-index: 12;
     display: flex;
     flex: none;
     align-items: center;
 }
 
-:host-context(.material) .toolbar-shadow {
-    height: 28px;
-}
-
 .toolbar-shadow.vertical {
     flex-direction: column;
     height: auto;
-    width: 32px;
+    width: 26px;
 }
 
 .toolbar-shadow.floating {
     flex-direction: column;
     height: auto;
     background-color: white;
     border: 1px solid #ccc;
     margin-top: -1px;
-    width: 32px;
-}
-
-.toolbar-shadow > div {
-    display: inline-flex;
-    overflow: visible;
-    margin: 0 2px;
+    width: 26px;
+    left: -2px;
 }
 
 .toolbar-item {
     position: relative;
     display: flex;
-    border: 0 transparent none;
+    border: 1px solid white;
     background-color: transparent;
     flex: none;
     align-items: center;
     justify-content: center;
     padding: 0;
-    height: 24px;
-}
-
-:host-context(.material) .toolbar-item {
-    height: 28px;
+    height: 26px;
+    border: none;

[dgozman, 2015/06/11 16:14:12]

Two "border" declarations in the same rule.

[pfeldman, 2015/06/11 16:38:07]

Done.

 }
 
 .toolbar-text {
     white-space: nowrap;
     overflow: hidden;
     margin-left: 6px;
     -webkit-user-select: text;
 }
 
 .toolbar-item:active {
     position: relative;
     z-index: 200;
 }
 
 .toolbar-item:hover .toolbar-button-text {
     opacity: 1;
 }
 
 .toolbar-item .toolbar-button-text {
     font-weight: bold;
     color: rgba(0, 0, 0, 0.75);
     opacity: 0.8;
 }
 
 .long-click-glyph {
-    background-color: rgba(0, 0, 0, 0.75);
+    background-color: #595959;
     -webkit-mask-image: url(Images/toolbarButtonGlyphs.png);
     -webkit-mask-position: -288px -48px;
     -webkit-mask-size: 352px 144px;
     z-index: 1;
     width: 32px;
-    height: 24px;
-}
-
-.narrow .long-click-glyph {

[dgozman, 2015/06/11 16:14:12]

Remove makeNarrow.

-    top: -2px;
-    left: -7px;
-}
-
-:host-context(.material) .long-click-glyph {
-    top: 2px;
+    height: 26px;
 }
 
 @media (-webkit-min-device-pixel-ratio: 1.5) {
 .long-click-glyph {
     -webkit-mask-image: url(Images/toolbarButtonGlyphs_2x.png);
 }
 } /* media */
 
-.narrow button.toolbar-item {
+button.toolbar-item {
     width: 26px;
 }
 
-.narrow button.toolbar-item .glyph {
-    margin: 0 -3px;
-}
-
-button.toolbar-item {
-    width: 30px;
-}
-
-:host-context(.material) button.toolbar-item {
-    width: 32px;
-}
-
-button.toolbar-item:hover,
+button.toolbar-item:enabled:hover,
 .toolbar-item.checkbox:hover,

[dgozman, 2015/06/11 16:14:12]

Should this be checkbox:enabled?

[pfeldman, 2015/06/11 16:38:07]

Input is even deeper there + we don't disable them (yet?!)

 .toolbar-counter:hover {
     background-color: rgba(110, 110, 110, 0.1);
+    transition: background-color 150ms cubic-bezier(0, 0, 0.2, 1);
 }
 
 button.toolbar-item.toggled-on .glyph {
     background-color: rgb(66, 129, 235) !important;
 }
 
 button.toolbar-item:hover .glyph {
     opacity: 1;
 }
 
@@ skipping 58 matching lines @@
     -webkit-appearance: none;
     border: 0;
     border-radius: 0;
     padding: 0 15px 0 5px;
     margin-right: -10px;
     position: relative;
     line-height: 22px;
 }
 
 .toolbar-item.checkbox {
-    padding-right: 5px;
+    padding: 0 5px 0 2px;
 }
 
 .toolbar-item > .glyph {
     -webkit-mask-image: url(Images/toolbarButtonGlyphs.png);
     -webkit-mask-size: 352px 144px;
     opacity: 0.9;
     background-color: #595959;
     z-index: 1;
     width: 32px;
     height: 24px;
 }
 
-:host-context(:not(.material)) .toolbar-item > .glyph {
+.toolbar-item > .glyph {
     position: relative;
-    left: -1px;
+    left: -3px;
 }
 
+.toolbar-item > .long-click-glyph {
+    left: -5px;
+} 
 
 @media (-webkit-min-device-pixel-ratio: 1.5) {
 .toolbar-item > .glyph {
     -webkit-mask-image: url(Images/toolbarButtonGlyphs_2x.png);
 }
 } /* media */
 
 .toolbar-item.emulate-active {
     background-color: rgb(163,163,163);
 }
 
 .toolbar-counter {
     cursor: pointer;
     padding: 0 2px;
-    min-width: 30px;
+    min-width: 26px;
 }
 
 .toolbar-counter-item {
     margin-left: 6px;
 }
 
 .toolbar-counter-item label {
     cursor: inherit;
 }
 
 .toolbar-counter-item.toolbar-counter-item-first {
     margin-left: 0;
 }
 
 .toolbar-counter-item > div {
     margin-right: 2px;
 }
 
 .toolbar-divider {
-    margin-left: 7px;
-    border-right: 1px solid hsla(0, 0%, 0%, 0.1);
-}
-
-:host-context(.material) .toolbar-divider {
-    height: 18px;
+    background-color: #ccc;
+    width: 1px;
+    margin: 2px 2px;
+    height: 17px;
 }
 
 .toolbar-group-label {
-    margin-left: 6px;
+    margin-left: 5px;
     margin-right: 3px;
     color: #888;
 }
 
-
 /* Predefined items */
 
 .dock-toolbar-item.toggled-undocked .glyph {
     -webkit-mask-position: 0 -48px;
 }
 
 .dock-toolbar-item.toggled-bottom .glyph {
     -webkit-mask-position: -32px -24px;
 }
 
@@ skipping 13 matching lines @@
     -webkit-mask-position: -224px -24px;
 }
 
 .emulation-toolbar-item .glyph {
     -webkit-mask-position: -160px 0;
 }
 
 .emulation-toolbar-item.warning::after {
     background-image: url(Images/toolbarButtonGlyphs.png);
     background-size: 352px 144px;
-    width: 15px;
-    height: 11px;
+    width: 10px;
+    height: 12px;
     content: "";
-    position: relative;
-    top: 4px;
+    position: absolute;
+    right: 3px;
+    bottom: 2px;
     background-position: -202px -107px;
     z-index: 1;
 }
 
 @media (-webkit-min-device-pixel-ratio: 1.5) {
 .emulation-toolbar-item.warning::before {
     background-image: url(Images/toolbarButtonGlyphs_2x.png);
 }
 } /* media */
 
@@ skipping 197 matching lines @@
 }
 
 .playback-rate-button.toggled-on > .toolbar-button-text {
     color: rgb(66, 129, 235);
 }
 
 button.playback-rate-button {
     width: auto;
     margin-right: 10px;
 }