DevTools: insert console message decorations in order

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

 /*
  * Copyright (C) 2011 Google Inc.  All rights reserved.
  * Copyright (C) 2007, 2008 Apple Inc.  All rights reserved.
  * Copyright (C) 2009 Joseph Pecoraro
  *
  * 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
@@ skipping 30 matching lines @@
     this._message = consoleMessage;
     this._linkifier = linkifier;
     this._repeatCount = 1;
     this._closeGroupDecorationCount = 0;
     this._nestingLevel = nestingLevel;
 
     /** @type {?DataGrid.DataGrid} */
     this._dataGrid = null;
     this._previewFormatter = new Components.RemoteObjectPreviewFormatter();
     this._searchRegex = null;
-    /** @type {?UI.Icon} */
-    this._messageLevelIcon = null;
+    /** @type {!UI.Icon|undefined} */
+    this._messageLevelIcon;
+    /** @type {!Element|undefined} */
+    this._nestingLevelMarkersElement;
+    /** @type {!Element|undefined} */
+    this._repeatCountElement;
+    /** @type {!Element|undefined} */
+    this._timestampElement;
   }
 
   /**
    * @return {?SDK.Target}
    */
   _target() {
     return this.consoleMessage().target();
   }
 
   /**
@@ skipping 757 matching lines @@
   /**
    * @param {string} filter
    * @return {boolean}
    */
   matchesFilterText(filter) {
     var text = this.contentElement().deepTextContent();
     return text.toLowerCase().includes(filter.toLowerCase());
   }
 
   updateTimestamp() {
-    if (!this._contentElement)
-      return;
-
     var format = Common.moduleSetting('consoleTimestampFormat').get();
     if (format !== Console.ConsoleViewMessage.TimestampFormat.None) {
       var timestampText = formatTimestamp(this._message.timestamp, format);
       if (!this._timestampElement)
         this._timestampElement = createElementWithClass('span', 'console-timestamp');
       this._timestampElement.textContent = timestampText + ' ';
       this._timestampElement.title = timestampText;
-      this._contentElement.insertBefore(this._timestampElement, this._contentElement.firstChild);
     } else if (this._timestampElement) {
       this._timestampElement.remove();
       delete this._timestampElement;
     }
+    this._insertDecorationsInOrder();
+
 
     /**
      * @param {number} timestamp
      * @param {!Console.ConsoleViewMessage.TimestampFormat} format
      * @return {string}
      */
     function formatTimestamp(timestamp, format) {
       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) + ':' +
@@ skipping 27 matching lines @@
       return;
     this._closeGroupDecorationCount = 0;
     this._updateCloseGroupDecorations();
   }
 
   incrementCloseGroupDecorationCount() {
     ++this._closeGroupDecorationCount;
     this._updateCloseGroupDecorations();
   }
 
+  _updateNestingLevelMarkers() {
+    if (!this._nestingLevelMarkersElement && this._nestingLevel > 0) {
+      this._nestingLevelMarkersElement = createElementWithClass('span', 'nesting-level-markers-wrapper');
+      this._nestingLevelMarkers = [];
+      for (var i = 0; i < this._nestingLevel; ++i)
+        this._nestingLevelMarkers.push(this._nestingLevelMarkersElement.createChild('div', 'nesting-level-marker'));
+      this._updateCloseGroupDecorations();
+    }
+    this._insertDecorationsInOrder();
+  }
+
   _updateCloseGroupDecorations() {
     if (!this._nestingLevelMarkers)
       return;
     for (var i = 0, n = this._nestingLevelMarkers.length; i < n; ++i) {
       var marker = this._nestingLevelMarkers[i];
       marker.classList.toggle('group-closed', n - i <= this._closeGroupDecorationCount);
     }
   }
 
   /**
    * @return {!Element}
    */
   contentElement() {
     if (this._contentElement)
       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;
     var target = consoleMessage.target();
     var shouldIncludeTrace =
         !!consoleMessage.stackTrace && (consoleMessage.source === SDK.ConsoleMessage.MessageSource.Network ||
                                         consoleMessage.level === SDK.ConsoleMessage.MessageLevel.Error ||
                                         consoleMessage.type === SDK.ConsoleMessage.MessageType.Trace ||
                                         consoleMessage.level === SDK.ConsoleMessage.MessageLevel.Warning);
     if (target && shouldIncludeTrace)
       formattedMessage = this._buildMessageWithStackTrace(consoleMessage, target, this._linkifier);
     else if (this._message.type === SDK.ConsoleMessage.MessageType.Table)
       formattedMessage = this._buildTableMessage(this._message);
     else
       formattedMessage = this._buildMessage(consoleMessage);
     contentElement.appendChild(formattedMessage);
 
-    this.updateTimestamp();
     return this._contentElement;
   }
 
   /**
    * @return {!Element}
    */
   toMessageElement() {
     if (this._element)
       return this._element;
 
     this._element = createElement('div');
     this.updateMessageElement();
     return this._element;
   }
 
   updateMessageElement() {
     if (!this._element)
       return;
 
     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;
     }
 
     // Render verbose and info deprecations, interventions and violations with warning background.
     if (this._message.level === SDK.ConsoleMessage.MessageLevel.Verbose ||
         this._message.level === SDK.ConsoleMessage.MessageLevel.Info) {
       switch (this._message.source) {
         case SDK.ConsoleMessage.MessageSource.Violation:
         case SDK.ConsoleMessage.MessageSource.Deprecation:
         case SDK.ConsoleMessage.MessageSource.Intervention:
           this._element.classList.add('console-warning-level');
           break;
       }
     }
 
     this._element.appendChild(this.contentElement());
-    if (this._repeatCount > 1)
-      this._showRepeatCountElement();
+    this.updateMessageLevelIcon();
+    this.updateTimestamp();
+    this._updateNestingLevelMarkers();
+    this._updateRepeatCountElement();
+  }
+
+  _insertDecorationsInOrder() {
+    if (!this._contentElement || this._contentElement.parentElement !== this._element)
+      return;
+    var leftMostElement = this._contentElement;
+    var addElementIfNeededBound = addElementIfNeeded.bind(this);
+    addElementIfNeededBound(this._repeatCountElement);
+    addElementIfNeededBound(this._nestingLevelMarkersElement);
+    addElementIfNeededBound(this._messageLevelIcon);
+    addElementIfNeededBound(this._timestampElement);
+
+    /**
+     * @this {!Console.ConsoleViewMessage}
+     * @param {!Element|undefined} elementToAdd
+     */
+    function addElementIfNeeded(elementToAdd) {
+      if (!elementToAdd)
+        return;
+      if (elementToAdd.parentElement !== this._element)
+        this._element.insertBefore(elementToAdd, leftMostElement);
+      leftMostElement = elementToAdd;
+    }
+  }
+
+  updateMessageLevelIcon() {

[dgozman, 2017/02/03 21:16:42]

Make it private?

[luoe, 2017/02/03 22:45:04]

Done.

+    if (!this._messageLevelIcon)
+      this._messageLevelIcon = UI.Icon.create('', 'message-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._messageLevelIcon.setIconType(iconType);
+    this._insertDecorationsInOrder();
   }
 
   /**
-   * @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}
    */
   repeatCount() {
     return this._repeatCount || 1;
   }
 
   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._contentElement)
-      return;
-
-    if (!this._repeatCountElement) {
-      this._repeatCountElement = createElementWithClass('label', 'console-message-repeat-count', 'dt-small-bubble');
+  _updateRepeatCountElement() {
+    if (this._repeatCount > 1) {
+      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;
+    } else if (this._repeatCountElement) {
+      this._repeatCountElement.remove();
+      delete this._repeatCountElement;
     }
-    this._repeatCountElement.textContent = this._repeatCount;
+    if (this._element)
+      this._element.classList.toggle('repeated-message', this._repeatCount > 1);
+    this._insertDecorationsInOrder();
   }
 
   get text() {
     return this._message.messageText;
   }
 
   /**
    * @return {string}
    */
   toExportString() {
@@ skipping 190 matching lines @@
   toMessageElement() {
     if (!this._element) {
       super.toMessageElement();
       this._expandGroupIcon = UI.Icon.create('', 'expand-group-icon');
       this._contentElement.insertBefore(this._expandGroupIcon, this._contentElement.firstChild);
       this.setCollapsed(this._collapsed);
     }
     return this._element;
   }
 };