[DevTools] Make toolbar counters declarative.

Source/devtools/front_end/inspectorStyle.css

Index: Source/devtools/front_end/inspectorStyle.css
diff --git a/Source/devtools/front_end/inspectorStyle.css b/Source/devtools/front_end/inspectorStyle.css
index 744f73f7743a8ab50be710560872fb7ff514de45..cd071496f4ab4b8319c2f45b7fe78d825b48ec73 100644
--- a/Source/devtools/front_end/inspectorStyle.css
+++ b/Source/devtools/front_end/inspectorStyle.css
@@ -224,11 +224,7 @@ body.undocked.platform-mac.inactive .toolbar-colors {
     padding-top: 1px;
 }
 
-.toolbar-controls-right #remote-device-count,
-.toolbar-controls-right #error-warning-count,
-.toolbar-controls-right .console-status-bar-item,
-.toolbar-controls-right .settings-status-bar-item,
-.toolbar-controls-right .dock-status-bar-item
+.toolbar-controls-right .status-bar-item
 {
     opacity: 0.8;
 }
@@ -775,7 +771,7 @@ div.resizer-widget {
     background-position: -246px -96px;
 }
 
-#error-warning-count, #remote-device-count {
+.status-bar-counter {
     display: inline-block;
     padding: 4px 6px 6px 0;
     font-size: 11px;
@@ -784,19 +780,21 @@ div.resizer-widget {
     line-height: 14px;
 }
 
-#error-warning-count:hover, #remote-device-count:hover {
+.status-bar-counter:hover {
     border-bottom: 1px solid rgb(96, 96, 96);
 }
 
-#error-warning-count .error-icon-small,
-#error-warning-count .warning-icon-small,
-#remote-device-count .device-icon-small{
-    vertical-align: -1px;
-    margin-right: 2px;
+.status-bar-counter-item {
+    margin-left: 6px;
 }
 
-#error-warning-count .warning-icon-small {
-    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 {