DevTools: [Console] migrate message level icons to UI.Icon

BUG=669323
R=dgozman

Review-Url: https://codereview.chromium.org/2536073002
Cr-Commit-Position: refs/heads/master@{#434878}

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

@@ -48,6 +48,8 @@ Console.ConsoleViewMessage = class {
     this._dataGrid = null;
     this._previewFormatter = new Components.RemoteObjectPreviewFormatter();
     this._searchRegex = null;
+    /** @type {?UI.Icon} */
+    this._messageLevelIcon = null;
   }
 
   /**
@@ -937,6 +939,8 @@ Console.ConsoleViewMessage = class {
       return this._contentElement;
 
     var contentElement = createElementWithClass('div', 'console-message');
+    if (this._messageLevelIcon)
+      contentElement.appendChild(this._messageLevelIcon);
     this._contentElement = contentElement;
     if (this._message.type === SDK.ConsoleMessage.MessageType.StartGroup ||
         this._message.type === SDK.ConsoleMessage.MessageType.StartGroupCollapsed)
@@ -991,21 +995,27 @@ Console.ConsoleViewMessage = class {
     switch (this._message.level) {
       case SDK.ConsoleMessage.MessageLevel.Log:
         this._element.classList.add('console-log-level');
+        this._updateMessageLevelIcon('');
         break;
       case SDK.ConsoleMessage.MessageLevel.Debug:
         this._element.classList.add('console-debug-level');
+        this._updateMessageLevelIcon('');
         break;
       case SDK.ConsoleMessage.MessageLevel.Warning:
         this._element.classList.add('console-warning-level');
+        this._updateMessageLevelIcon('smallicon-warning');
         break;
       case SDK.ConsoleMessage.MessageLevel.Error:
         this._element.classList.add('console-error-level');
+        this._updateMessageLevelIcon('smallicon-error');
         break;
       case SDK.ConsoleMessage.MessageLevel.RevokedError:
         this._element.classList.add('console-revokedError-level');
+        this._updateMessageLevelIcon('smallicon-revoked-error');
         break;
       case SDK.ConsoleMessage.MessageLevel.Info:
         this._element.classList.add('console-info-level');
+        this._updateMessageLevelIcon('smallicon-info');
         break;
     }
 
@@ -1014,6 +1024,20 @@ Console.ConsoleViewMessage = class {
       this._showRepeatCountElement();
   }
 
+  /**
+   * @param {string} iconType
+   */
+  _updateMessageLevelIcon(iconType) {
+    if (!iconType && !this._messageLevelIcon)
+      return;
+    if (iconType && !this._messageLevelIcon) {
+      this._messageLevelIcon = UI.Icon.create('', 'message-level-icon');
+      if (this._contentElement)
+        this._contentElement.insertBefore(this._messageLevelIcon, this._contentElement.firstChild);
+    }
+    this._messageLevelIcon.setIconType(iconType);
+  }
+
   /**
    * @return {number}
    */

third_party/WebKit/Source/devtools/front_end/console/consoleView.css

@@ -125,6 +125,13 @@
     background-size: 190px 30px;
 }
 
+.message-level-icon {
+    position: absolute;
+    left: -17px;
+    top: 5px;
+    -webkit-user-select: none;
+}
+
 @media (-webkit-min-device-pixel-ratio: 1.1) {
 .console-message::before,
 .console-user-command::before,
@@ -143,12 +150,8 @@
     margin-left: 4px;
 }
 
-.console-error-level .repeated-message::before,
-.console-revokedError-level .repeated-message::before,
-.console-warning-level .repeated-message::before,
-.console-debug-level .repeated-message::before,
-.console-info-level .repeated-message::before {
-    visibility: hidden;
+.repeated-message .message-level-icon {
+    display: none;
 }
 
 .repeated-message .console-message-stack-trace-toggle,
@@ -297,43 +300,6 @@
     background-color: rgb(255, 250, 224);
 }
 
-.console-error-level .console-message::before,
-.console-revokedError-level .console-message::before,
-.console-warning-level .console-message::before,
-.console-debug-level .console-message::before,
-.console-info-level .console-message::before {
-    background-image: url(Images/smallIcons.png);
-    background-size: 190px 30px;
-    width: 10px;
-    height: 10px;
-}
-
-@media (-webkit-min-device-pixel-ratio: 1.1) {
-.console-error-level .console-message::before,
-.console-revokedError-level .console-message::before,
-.console-warning-level .console-message::before,
-.console-debug-level .console-message::before,
-.console-info-level .console-message::before {
-    background-image: url(Images/smallIcons_2x.png);
-}
-} /* media */
-
-.console-warning-level .console-message::before {
-    background-position: -60px 0;
-}
-
-.console-error-level .console-message::before {
-    background-position: -20px 0;
-}
-
-.console-revokedError-level .console-message::before {
-    background-position: -40px 0;
-}
-
-.console-info-level .console-message::before {
-    background-position: -80px 0;
-}
-
 .console-user-command .console-message {
     margin-left: -24px;
     padding-right: 0;