DevTools: align more status bar button usages.

Source/devtools/front_end/inspectorStyle.css

 /*
  * Copyright (C) 2006, 2007, 2008 Apple Inc.  All rights reserved.
  * Copyright (C) 2009 Anthony Ricaud <rik@webkit.org>
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions
  * are met:
  *
  * 1.  Redistributions of source code must retain the above copyright
  *     notice, this list of conditions and the following disclaimer.
@@ skipping 183 matching lines @@
 }
 
 .toolbar > .tabbed-pane-header {
     flex: auto;
 }
 
 .tabbed-pane-header.locked .tabbed-pane-header-tab:not(.selected) {
     opacity: 0.6;
 }
 
-.toolbar-controls-left {
+.toolbar-controls-left,
+.toolbar-controls-right,
+ {
     flex: none;
     opacity: 0.8;
-    padding-top: 1px;
-}
-
-.toolbar-controls-right {
-    flex: none;
-    margin-right: 2px;
-    padding-top: 1px;
-}
-
-.toolbar-controls-right .status-bar-item
-{
-    opacity: 0.8;
 }
 
 .search-replace {
     -webkit-appearance: none;
     border: 0;
     padding: 0 3px;
     margin: 0;
     flex: 1;
 }
 
@@ skipping 156 matching lines @@
     background-position: -143px -96px;
 }
 
 .close-button-gray:active {
     background-position: -160px -96px;
 }
 
 .status-bar {
     position: relative;
     white-space: nowrap;
-    height: 23px;
+    height: 24px;
     overflow: hidden;
     z-index: 12;
     display: flex;
     flex: none;
 }
 
 .status-bar > div {
     display: inline-flex;
     overflow: visible;
 }
 
 .status-bar-item {
-    display: inline-block;
-    height: 22px;
-    padding: 0;
-    margin-left: -1px;
-    margin-right: 0;
-    vertical-align: top;
+    position: relative;
+    display: flex;
     border: 0 transparent none;
     background-color: transparent;
     flex: none;
+    font-size: 12px;
+    align-items: center;
+    padding: 0;
+    height: 24px;
 }
 
 .status-bar-text {
     padding-left: 5px;
     padding-right: 15px;
     height: auto;
     margin: auto 0;
     white-space: nowrap;
     overflow: hidden;
 }
 
 #drawer-view-anchor {
     display: inline-block;
 }
 
 .status-bar-item:active {
     position: relative;
     z-index: 200;
 }
 
-.glyph {
-    position: absolute;
-    top: -1px;
-    bottom: 1px;
-    left: 0;
-    right: 0;
-    background-color: rgba(0, 0, 0, 0.75);
-    z-index: 1;
-}
-
 .status-bar-item .status-bar-button-text {
     font-weight: bold;
     color: rgba(97, 97, 97, 1);
 }
 
 .long-click-glyph {
     background-color: rgba(0, 0, 0, 0.75);
     -webkit-mask-image: url(Images/statusbarButtonGlyphs.png);
     -webkit-mask-position: -288px -48px;
     -webkit-mask-size: 320px 144px;
     z-index: 1;
 }
 
 @media (-webkit-min-device-pixel-ratio: 1.5) {
 .long-click-glyph {
     -webkit-mask-image: url(Images/statusbarButtonGlyphs_2x.png);
 }
 } /* media */
 
-.long-click-glyph.shadow {
-    top: 1px;
-    background-color: white !important;
-    z-index: 0;
-}
-
 button.status-bar-item {
     position: relative;
     width: 32px;
+    height: 23px;
 }
 
-.status-bar button.status-bar-item .glyph {
-    margin: 0 -1px;
-}
-
-button.status-bar-item .glyph.shadow {
-    background-color: rgba(255, 255, 255, 0.33);
-}
-
-button.status-bar-item.toggled-on .glyph:not(.shadow) {
+button.status-bar-item.toggled-on .glyph {
     background-color: rgb(66, 129, 235) !important;
 }
 
 button.status-bar-item:hover .glyph {
     opacity: 1;
 }
 
 button.status-bar-item:active .glyph {
     opacity: 0.8;
 }
@@ skipping 63 matching lines @@
 
 .status-bar-item.checkbox {
     margin: auto 6px auto 0;
     height: auto;
     display: flex;
 }
 
 .status-bar-item > .glyph {
     -webkit-mask-image: url(Images/statusbarButtonGlyphs.png);
     -webkit-mask-size: 320px 144px;
+    background-color: rgba(0, 0, 0, 0.75);
     opacity: 0.8;
+    flex: auto;
+    z-index: 1;
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
 }
 
 @media (-webkit-min-device-pixel-ratio: 1.5) {
 .status-bar-item > .glyph {
     -webkit-mask-image: url(Images/statusbarButtonGlyphs_2x.png);
 }
 } /* media */
 
 button.status-bar-item.dock-status-bar-item.toggled-undocked .glyph {
     -webkit-mask-position: 0 -48px;
@@ skipping 124 matching lines @@
 
 .green-ball {
     background-position: -235px -96px;
 }
 
 .orange-ball {
     background-position: -246px -96px;
 }
 
 .status-bar-counter {
-    display: inline-block;
-    padding: 4px 6px 6px 0;
-    font-size: 11px;
-    height: 19px;
     cursor: pointer;
-    line-height: 14px;
 }
 
-.status-bar-counter:hover {
+.status-bar-counter:hover .status-bar-counter-item {
     border-bottom: 1px solid rgb(96, 96, 96);
+    margin-bottom: -1px;
 }
 
 .status-bar-counter-item {
     margin-left: 6px;
 }
 
 .status-bar-counter-item.status-bar-counter-item-first {
     margin-left: 0;
 }
 
 .status-bar-counter-item > div {
-    vertical-align: -1px;
     margin-right: 2px;
 }
 
 #drawer-tabbed-pane > .tabbed-pane-header {
     background-color: #eee;
 }
 
 #drawer-contents .tabbed-pane-header .tabbed-pane-header-tab {
     cursor: default;
 }
@@ skipping 1296 matching lines @@
 }
 
 .node-search-status-bar-item .glyph {
     -webkit-mask-position: -224px -24px;
 }
 
 .emulation-status-bar-item .glyph {
     -webkit-mask-position: -164px 0px;
 }
 
-.emulation-status-bar-item.warning::before {
+.emulation-status-bar-item.warning::after {
     background-image: url(Images/statusbarButtonGlyphs.png);
     background-size: 320px 144px;
     width: 10px;
     height: 10px;
     content: "";
     position: relative;
     top: 4px;
-    left: -7px;
+    left: 13px;
     background-position: -202px -107px;
-    float: right;
+    z-index: 1;
 }
 
 @media (-webkit-min-device-pixel-ratio: 1.5) {
     .emulation-status-bar-item.warning::before {
         background-image: url(Images/statusbarButtonGlyphs_2x.png);
     }
 } /* media */
 
 .delete-storage-status-bar-item .glyph {
     -webkit-mask-position: -128px 0;
@@ skipping 343 matching lines @@
 }
 
 #search-results-pane-file-based .search-match .search-match-content {
     color: #000;
 }
 
 .record-profile-status-bar-item .glyph {
     -webkit-mask-position: -288px 0;
 }
 
-button.record-profile-status-bar-item.toggled-on .glyph:not(.shadow) {
+button.record-profile-status-bar-item.toggled-on .glyph {
     -webkit-mask-position: -288px -24px;
     background-color: rgb(216, 0, 0) !important;
 }
 
 .empty-view,
 .storage-view .storage-table-error {
     position: absolute;
     top: 0;
     bottom: 25%;
     left: 0;
@@ skipping 164 matching lines @@
     border-left: 1px solid gray;
 }
 
 #drawer-editor-view {
     flex: auto;
 }
 
 .toolbar-close-button-item {
     display: inline-block;
     float: right;
-    padding-right: 4px;
+    padding-right: 8px;
     padding-top: 4px;
     padding-left: 2px;
 }
 
 body.undocked .toolbar-close-button-item {
     display: none;
 }
 
 .root-view > .split-view > .split-view-sidebar {
     position: relative;
@@ skipping 155 matching lines @@
     font-size: 80%;
     white-space: nowrap;
     pointer-events: none;
 }
 
 .link {
     cursor: pointer;
     text-decoration: underline;
     color: rgb(17, 85, 204);
 }