[DevTools] Make toolbar counters declarative.

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 206 matching lines @@
     opacity: 0.8;
     padding-top: 1px;
 }
 
 .toolbar-controls-right {
     flex: none;
     margin-right: 2px;
     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;
 }
 
 .scrollable-content {
     position: static;
     height: 100%;
     overflow-y: auto;
     width: 100%;
     margin-right: 12px;
@@ skipping 526 matching lines @@
 }
 
 .green-ball {
     background-position: -235px -96px;
 }
 
 .orange-ball {
     background-position: -246px -96px;
 }
 
-#error-warning-count, #remote-device-count {
+.status-bar-counter {
     display: inline-block;
     padding: 4px 6px 6px 0;
     font-size: 11px;
     height: 19px;
     cursor: pointer;
     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{
+.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;
 }
 
-#error-warning-count .warning-icon-small {
-    margin-left: 6px;
-}
-
 #drawer-tabbed-pane > .tabbed-pane-header {
     background-color: rgb(236, 236, 236);
 }
 
 #drawer-contents .tabbed-pane-header .tabbed-pane-header-tab {
     cursor: default;
 }
 
 body.platform-mac .monospace,
 body.platform-mac .source-code {
@@ skipping 2114 matching lines @@
 }
 
 .viewport-control-gap-element {
     color: transparent;
 }
 
 label.checkbox-with-label {
     display: flex;
     -webkit-user-select: none;
 }