DevTools: insert console message decorations in order

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

Index: third_party/WebKit/Source/devtools/front_end/console/ConsoleViewMessage.js
diff --git a/third_party/WebKit/Source/devtools/front_end/console/ConsoleViewMessage.js b/third_party/WebKit/Source/devtools/front_end/console/ConsoleViewMessage.js
index 7a1dbf3ddd8bc7f952694e72c8729d494ab91f7c..73fb3c3f16abf5fd71791940bb7ae5d01f33d6c3 100644
--- a/third_party/WebKit/Source/devtools/front_end/console/ConsoleViewMessage.js
+++ b/third_party/WebKit/Source/devtools/front_end/console/ConsoleViewMessage.js
@@ -48,8 +48,10 @@ Console.ConsoleViewMessage = class {
     this._dataGrid = null;
     this._previewFormatter = new Components.RemoteObjectPreviewFormatter();
     this._searchRegex = null;
-    /** @type {?UI.Icon} */
-    this._messageLevelIcon = null;
+    /** @type {?Element} */
+    this._decorationWrapper = null;
+    /** @type {?Element} */
+    this._repeatCountElement = null;
   }
 
   /**
@@ -73,6 +75,7 @@ Console.ConsoleViewMessage = class {
   wasShown() {
     if (this._dataGrid)
       this._dataGrid.updateWidths();
+    this._rebuildDecorations();
     this._isVisible = true;
   }
 
@@ -91,6 +94,62 @@ Console.ConsoleViewMessage = class {
     this._cachedHeight = this.contentElement().offsetHeight;
   }
 
+  _rebuildDecorations() {
+    if (!this._decorationWrapper)
+      return;
+    this._decorationWrapper.removeChildren();
+
+    // Console viewport text selection logic requires every element that can be
+    // the start/end of a selection to have a text node.
+    this._decorationWrapper.createTextChild('');
+
+    // Build timestamp.
+    if (Common.moduleSetting('consoleTimestampsEnabled').get()) {
+      var timestampElement = this._decorationWrapper.createChild('span', 'message-timestamp');
+      timestampElement.textContent = formatTimestamp(this._message.timestamp, false) + ' ';
+      timestampElement.title = formatTimestamp(this._message.timestamp, true);
+    }
+
+    // Build level icon.
+    var iconType = '';
+    if (this._message.level === SDK.ConsoleMessage.MessageLevel.Warning)
+      iconType = 'smallicon-warning';
+    else if (this._message.level === SDK.ConsoleMessage.MessageLevel.Error)
+      iconType = 'smallicon-error';
+    else if (this._message.type === SDK.ConsoleMessage.MessageType.Command)
+      iconType = 'smallicon-user-command';
+    else if (this._message.type === SDK.ConsoleMessage.MessageType.Result)
+      iconType = 'smallicon-command-result';
+    this._decorationWrapper.appendChild(UI.Icon.create(iconType, 'message-level-icon'));
+
+    // Timestamps may affect repeat counter.
+    this._updateRepeatCountElement();
+
+    /**
+     * @param {number} timestamp
+     * @param {boolean} full
+     * @return {string}
+     */
+    function formatTimestamp(timestamp, full) {
+      var date = new Date(timestamp);
+      var yymmdd = date.getFullYear() + '-' + leadZero(date.getMonth() + 1, 2) + '-' + leadZero(date.getDate(), 2);
+      var hhmmssfff = leadZero(date.getHours(), 2) + ':' + leadZero(date.getMinutes(), 2) + ':' +
+          leadZero(date.getSeconds(), 2) + '.' + leadZero(date.getMilliseconds(), 3);
+      return full ? (yymmdd + ' ' + hhmmssfff) : hhmmssfff;
+
+      /**
+       * @param {number} value
+       * @param {number} length
+       * @return {string}
+       */
+      function leadZero(value, length) {
+        var valueString = value.toString();
+        var padding = length - valueString.length;
+        return padding <= 0 ? valueString : '0'.repeat(padding) + valueString;
+      }
+    }
+  }
+
   /**
    * @return {number}
    */
@@ -830,46 +889,6 @@ Console.ConsoleViewMessage = class {
     return text.toLowerCase().includes(filter.toLowerCase());
   }
 
-  updateTimestamp() {
-    if (!this._contentElement)
-      return;
-
-    if (Common.moduleSetting('consoleTimestampsEnabled').get()) {
-      if (!this._timestampElement)
-        this._timestampElement = createElementWithClass('span', 'console-timestamp');
-      this._timestampElement.textContent = formatTimestamp(this._message.timestamp, false) + ' ';
-      this._timestampElement.title = formatTimestamp(this._message.timestamp, true);
-      this._contentElement.insertBefore(this._timestampElement, this._contentElement.firstChild);
-    } else if (this._timestampElement) {
-      this._timestampElement.remove();
-      delete this._timestampElement;
-    }
-
-    /**
-     * @param {number} timestamp
-     * @param {boolean} full
-     * @return {string}
-     */
-    function formatTimestamp(timestamp, full) {
-      var date = new Date(timestamp);
-      var yymmdd = date.getFullYear() + '-' + leadZero(date.getMonth() + 1, 2) + '-' + leadZero(date.getDate(), 2);
-      var hhmmssfff = leadZero(date.getHours(), 2) + ':' + leadZero(date.getMinutes(), 2) + ':' +
-          leadZero(date.getSeconds(), 2) + '.' + leadZero(date.getMilliseconds(), 3);
-      return full ? (yymmdd + ' ' + hhmmssfff) : hhmmssfff;
-
-      /**
-       * @param {number} value
-       * @param {number} length
-       * @return {string}
-       */
-      function leadZero(value, length) {
-        var valueString = value.toString();
-        var padding = length - valueString.length;
-        return padding <= 0 ? valueString : '0'.repeat(padding) + valueString;
-      }
-    }
-  }
-
   /**
    * @return {number}
    */
@@ -906,12 +925,12 @@ 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)
       contentElement.classList.add('console-group-title');
+    else if (this._message.type === SDK.ConsoleMessage.MessageType.Result)
+      contentElement.classList.add('console-user-command-result');
 
     var formattedMessage;
     var consoleMessage = this._message;
@@ -929,7 +948,6 @@ Console.ConsoleViewMessage = class {
       formattedMessage = this._buildMessage(consoleMessage);
     contentElement.appendChild(formattedMessage);
 
-    this.updateTimestamp();
     return this._contentElement;
   }
 
@@ -951,28 +969,20 @@ Console.ConsoleViewMessage = class {
 
     this._element.className = 'console-message-wrapper';
     this._element.removeChildren();
-
-    this._nestingLevelMarkers = [];
-    for (var i = 0; i < this._nestingLevel; ++i)
-      this._nestingLevelMarkers.push(this._element.createChild('div', 'nesting-level-marker'));
-    this._updateCloseGroupDecorations();
     this._element.message = this;
 
     switch (this._message.level) {
       case SDK.ConsoleMessage.MessageLevel.Verbose:
         this._element.classList.add('console-verbose-level');
-        this._updateMessageLevelIcon('');
         break;
       case SDK.ConsoleMessage.MessageLevel.Info:
         this._element.classList.add('console-info-level');
         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;
     }
 
@@ -988,23 +998,27 @@ Console.ConsoleViewMessage = class {
       }
     }
 
-    this._element.appendChild(this.contentElement());
-    if (this._repeatCount > 1)
-      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._decorationWrapper = this._element.createChild('span', 'message-decoration-wrapper');
+    this._nestingLevelMarkers = [];
+    for (var i = 0; i < this._nestingLevel; ++i)
+      this._nestingLevelMarkers.push(this._element.createChild('div', 'message-nesting-level-marker'));
+    this._updateCloseGroupDecorations();
+    this._repeatCountElement = this._element.createChild('label', 'message-repeat-count', 'dt-small-bubble');
+    switch (this._message.level) {
+      case SDK.ConsoleMessage.MessageLevel.Warning:

[pfeldman, 2017/02/22 00:10:45]

How come it is in a different location from updating the decorations?

+        this._repeatCountElement.type = 'warning';
+        break;
+      case SDK.ConsoleMessage.MessageLevel.Error:
+        this._repeatCountElement.type = 'error';
+        break;
+      case SDK.ConsoleMessage.MessageLevel.Verbose:
+        this._repeatCountElement.type = 'verbose';
+        break;
+      default:
+        this._repeatCountElement.type = 'info';
     }
-    this._messageLevelIcon.setIconType(iconType);
+    this._rebuildDecorations();
+    this._element.appendChild(this.contentElement());
   }
 
   /**
@@ -1016,43 +1030,22 @@ Console.ConsoleViewMessage = class {
 
   resetIncrementRepeatCount() {
     this._repeatCount = 1;
-    if (!this._repeatCountElement)
-      return;
-
-    this._repeatCountElement.remove();
-    if (this._contentElement)
-      this._contentElement.classList.remove('repeated-message');
-    delete this._repeatCountElement;
+    this._updateRepeatCountElement();
   }
 
   incrementRepeatCount() {
     this._repeatCount++;
-    this._showRepeatCountElement();
+    this._updateRepeatCountElement();
   }
 
-  _showRepeatCountElement() {
-    if (!this._element)
+  _updateRepeatCountElement() {
+    if (!this._repeatCountElement)
       return;
-
-    if (!this._repeatCountElement) {
-      this._repeatCountElement = createElementWithClass('label', 'console-message-repeat-count', 'dt-small-bubble');
-      switch (this._message.level) {
-        case SDK.ConsoleMessage.MessageLevel.Warning:
-          this._repeatCountElement.type = 'warning';
-          break;
-        case SDK.ConsoleMessage.MessageLevel.Error:
-          this._repeatCountElement.type = 'error';
-          break;
-        case SDK.ConsoleMessage.MessageLevel.Verbose:
-          this._repeatCountElement.type = 'verbose';
-          break;
-        default:
-          this._repeatCountElement.type = 'info';
-      }
-      this._element.insertBefore(this._repeatCountElement, this._contentElement);
-      this._contentElement.classList.add('repeated-message');
-    }
-    this._repeatCountElement.textContent = this._repeatCount;
+    var show = this._repeatCount > 1;
+    this._repeatCountElement.textContent = show ? this._repeatCount : '';
+    this._repeatCountElement.classList.toggle('hidden', !show);
+    if (this._element)
+      this._element.classList.toggle('repeated-message', show);
   }
 
   get text() {