[DevTools] Extract small-bubble component.

third_party/WebKit/Source/devtools/front_end/sources/UISourceCodeFrame.js

 /*
  * Copyright (C) 2012 Google Inc. All rights reserved.
  *
  * 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 404 matching lines @@
         extensions.forEach(extension => this._decorateTypeThrottled(extension.descriptor()["decoratorType"]));
     },
 
     __proto__: WebInspector.SourceFrame.prototype
 }
 
 WebInspector.UISourceCodeFrame._iconClassPerLevel = {};
 WebInspector.UISourceCodeFrame._iconClassPerLevel[WebInspector.UISourceCode.Message.Level.Error] = "error-icon";
 WebInspector.UISourceCodeFrame._iconClassPerLevel[WebInspector.UISourceCode.Message.Level.Warning] = "warning-icon";
 
+WebInspector.UISourceCodeFrame._bubbleTypePerLevel = {};
+WebInspector.UISourceCodeFrame._bubbleTypePerLevel[WebInspector.UISourceCode.Message.Level.Error] = "error";
+WebInspector.UISourceCodeFrame._bubbleTypePerLevel[WebInspector.UISourceCode.Message.Level.Warning] = "warning";
+
 WebInspector.UISourceCodeFrame._lineClassPerLevel = {};
 WebInspector.UISourceCodeFrame._lineClassPerLevel[WebInspector.UISourceCode.Message.Level.Error] = "text-editor-line-with-error";
 WebInspector.UISourceCodeFrame._lineClassPerLevel[WebInspector.UISourceCode.Message.Level.Warning] = "text-editor-line-with-warning";
 
 /**
  * @interface
  */
 WebInspector.UISourceCodeFrame.LineDecorator = function() { }
 
 WebInspector.UISourceCodeFrame.LineDecorator.prototype = {
     /**
      * @param {!WebInspector.UISourceCode} uiSourceCode
      * @param {!WebInspector.CodeMirrorTextEditor} textEditor
      */
     decorate: function(uiSourceCode, textEditor) { }
 }
 
 /**
  * @constructor
  * @param {!WebInspector.UISourceCode.Message} message
  */
 WebInspector.UISourceCodeFrame.RowMessage = function(message)
 {
     this._message = message;
     this._repeatCount = 1;
     this.element = createElementWithClass("div", "text-editor-row-message");
     this._icon = this.element.createChild("label", "", "dt-icon-label");
     this._icon.type = WebInspector.UISourceCodeFrame._iconClassPerLevel[message.level()];
-    this._repeatCountElement = this.element.createChild("span", "bubble-repeat-count hidden error");
+    this._repeatCountElement = this.element.createChild("label", "message-repeat-count hidden", "dt-small-bubble");
+    this._repeatCountElement.type = WebInspector.UISourceCodeFrame._bubbleTypePerLevel[message.level()];
     var linesContainer = this.element.createChild("div", "text-editor-row-message-lines");
     var lines = this._message.text().split("\n");
     for (var i = 0; i < lines.length; ++i) {
         var messageLine = linesContainer.createChild("div");
         messageLine.textContent = lines[i];
     }
 }
 
 WebInspector.UISourceCodeFrame.RowMessage.prototype = {
     /**
@@ skipping 178 matching lines @@
 
 /**
  * @param {!WebInspector.UISourceCode.Message} a
  * @param {!WebInspector.UISourceCode.Message} b
  * @return {number}
  */
 WebInspector.UISourceCode.Message.messageLevelComparator = function(a, b)
 {
     return WebInspector.UISourceCode.Message._messageLevelPriority[a.level()] - WebInspector.UISourceCode.Message._messageLevelPriority[b.level()];
 }