DevTools: separate style for error message bubble.

This patch separates style used for error message repeat count bubble
in console. The style is already used in Resources panel, and will be
used later for editor errors.

BUG=397217
R=vsevik, apavlov
NOTRY=true

Review URL: https://codereview.chromium.org/428563002

git-svn-id: svn://svn.chromium.org/blink/trunk@179108 bbb929c8-8fbe-4397-9dbb-9b2b20218538

third_party/WebKit/Source/devtools/front_end/console/ConsoleViewMessage.js

@@ -1110,7 +1110,7 @@ WebInspector.ConsoleViewMessage.prototype = {
 
         if (!this._repeatCountElement) {
             this._repeatCountElement = document.createElement("span");
-            this._repeatCountElement.className = "bubble";
+            this._repeatCountElement.className = "bubble-repeat-count";
 
             this._element.insertBefore(this._repeatCountElement, this._element.firstChild);
             this._element.classList.add("repeated-message");

third_party/WebKit/Source/devtools/front_end/inspectorStyle.css

@@ -938,25 +938,28 @@ body.platform-linux .source-code {
     background-color: rgba(0, 0, 0, 0.05);
 }
 
-.console-message .bubble {
+.bubble-repeat-count {
     display: inline-block;
     height: 14px;
     background-color: rgb(128, 151, 189);
     vertical-align: middle;
     white-space: nowrap;
     padding: 1px 4px;
-    margin-top: -1px;
-    margin-right: 4px;
-    margin-left: -18px;
     text-align: left;
     font-size: 11px;
     line-height: normal;
     font-weight: bold;
     text-shadow: none;
     color: white;
+    margin-top: -1px;
     border-radius: 7px;
 }
 
+.console-message .bubble-repeat-count {
+    margin-right: 4px;
+    margin-left: -18px;
+}
+
 .console-message-text {
     white-space: pre-wrap;
 }
@@ -2142,38 +2145,20 @@ li .status:empty {
     display: none;
 }
 
-li .status .bubble {
-    display: inline-block;
-    height: 14px;
-    min-width: 16px;
-    margin-top: 1px;
-    background-color: rgb(128, 151, 189);
-    vertical-align: middle;
-    white-space: nowrap;
-    padding: 1px 4px;
-    text-align: center;
-    font-size: 11px;
-    line-height: normal;
-    font-weight: bold;
-    text-shadow: none;
-    color: white;
-    border-radius: 7px;
-}
-
-li .status .bubble:empty {
+li .status .bubble-repeat-count:empty {
     display: none;
 }
 
-li.selected .status .bubble {
+li.selected .status .bubble-repeat-count {
     background-color: white !important;
     color: rgb(132, 154, 190) !important;
 }
 
-:focus li.selected .status .bubble {
+:focus li.selected .status .bubble-repeat-count {
     color: rgb(36, 98, 172) !important;
 }
 
-body.inactive li.selected .status .bubble {
+body.inactive li.selected .status .bubble-repeat-count {
     color: rgb(159, 159, 159) !important;
 }
 
@@ -2260,18 +2245,18 @@ body.inactive .sidebar-tree-item.selected {
     color: white;
 }
 
-.bubble.debug,
-.console-debug-level .bubble {
+.bubble-repeat-count.debug,
+.console-debug-level .bubble-repeat-count {
     background-color: rgb(0, 0, 255) !important;
 }
 
-.bubble.warning,
-.console-warning-level .bubble {
+.bubble-repeat-count.warning,
+.console-warning-level .bubble-repeat-count {
     background-color: rgb(232, 164, 0) !important;
 }
 
-.bubble.error,
-.console-error-level .bubble {
+.bubble-repeat-count.error,
+.console-error-level .bubble-repeat-count {
     background-color: rgb(216, 35, 35) !important;
 }
 

third_party/WebKit/Source/devtools/front_end/resources/ResourcesPanel.js

@@ -1213,7 +1213,7 @@ WebInspector.FrameResourceTreeElement.prototype = {
     _setBubbleText: function(x)
     {
         if (!this._bubbleElement)
-            this._bubbleElement = this._statusElement.createChild("div", "bubble");
+            this._bubbleElement = this._statusElement.createChild("div", "bubble-repeat-count");
         this._bubbleElement.textContent = x;
     },
 

third_party/WebKit/Source/devtools/front_end/resourcesPanel.css

@@ -113,7 +113,7 @@ li.selected .base-storage-tree-element-subtitle {
     line-height: 1em;
 }
 
-.resources.panel li .status .bubble {
+.resources.panel li .status .bubble-repeat-count {
     height: 13px;
     padding-top: 0;
 }