DevTools: insert console message decorations in order

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

 /*
  * 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
  *     notice, this list of conditions and the following disclaimer.
@@ skipping 103 matching lines @@
     this._viewport.setStickToBottom(true);
     this._viewport.contentElement().classList.add('console-group', 'console-group-messages');
     this._contentsElement.appendChild(this._viewport.element);
     this._messagesElement = this._viewport.element;
     this._messagesElement.id = 'console-messages';
     this._messagesElement.classList.add('monospace');
     this._messagesElement.addEventListener('click', this._messagesClicked.bind(this), true);
 
     this._viewportThrottler = new Common.Throttler(50);
 
-    this._filterStatusMessageElement = createElementWithClass('div', 'console-message');
+    this._filterStatusMessageElement = createElementWithClass('div', 'console-message-wrapper');
     this._messagesElement.insertBefore(this._filterStatusMessageElement, this._messagesElement.firstChild);
     this._filterStatusTextElement = this._filterStatusMessageElement.createChild('span', 'console-info');
     this._filterStatusMessageElement.createTextChild(' ');
 
     this._topGroup = Console.ConsoleGroup.createTopGroup();
     this._currentGroup = this._topGroup;
 
     this._promptElement = this._messagesElement.createChild('div', 'source-code');
     var promptIcon = UI.Icon.create('smallicon-text-prompt', 'console-prompt-icon');
     this._promptElement.appendChild(promptIcon);
@@ skipping 21 matching lines @@
     this._prompt.show(this._promptElement);
     this._prompt.element.addEventListener('keydown', this._promptKeyDown.bind(this), true);
 
     this._consoleHistoryAutocompleteSetting.addChangeListener(this._consoleHistoryAutocompleteChanged, this);
 
     var historyData = this._consoleHistorySetting.get();
     this._prompt.history().setHistoryData(historyData);
     this._consoleHistoryAutocompleteChanged();
 
     this._updateFilterStatus();
-    this._timestampsSetting.addChangeListener(this._consoleTimestampsSettingChanged, this);
+    this._timestampsSetting.addChangeListener(this._updateMessageList, this);
 
     this._registerWithMessageSink();
     SDK.targetManager.observeTargets(this);
 
     this._initConsoleMessages();
 
     UI.context.addFlavorChangeListener(SDK.ExecutionContext, this._executionContextChanged, this);
 
     this._messagesElement.addEventListener('mousedown', this._updateStickToBottomOnMouseDown.bind(this), false);
     this._messagesElement.addEventListener('mouseup', this._updateStickToBottomOnMouseUp.bind(this), false);
@@ skipping 149 matching lines @@
         level = SDK.ConsoleMessage.MessageLevel.Warning;
         break;
     }
 
     var consoleMessage = new SDK.ConsoleMessage(
         null, SDK.ConsoleMessage.MessageSource.Other, level, message.text, undefined, undefined, undefined, undefined,
         undefined, undefined, undefined, message.timestamp);
     this._addConsoleMessage(consoleMessage);
   }
 
-  _consoleTimestampsSettingChanged() {
-    this._updateMessageList();
-    this._consoleMessages.forEach(viewMessage => viewMessage.updateTimestamp());
-  }
-
   _executionContextChanged() {
     this._prompt.clearAutocomplete();
     if (this._filter._showTargetMessagesCheckbox.checked())
       this._updateMessageList();
   }
 
   /**
    * @override
    */
   willHide() {
@@ skipping 201 matching lines @@
 
   /**
    * @param {!SDK.ConsoleMessage} message
    * @return {!Console.ConsoleViewMessage}
    */
   _createViewMessage(message) {
     var nestingLevel = this._currentGroup.nestingLevel();
     switch (message.type) {
       case SDK.ConsoleMessage.MessageType.Command:
         return new Console.ConsoleCommand(message, this._linkifier, nestingLevel);
-      case SDK.ConsoleMessage.MessageType.Result:
-        return new Console.ConsoleCommandResult(message, this._linkifier, nestingLevel);
       case SDK.ConsoleMessage.MessageType.StartGroupCollapsed:
       case SDK.ConsoleMessage.MessageType.StartGroup:
         return new Console.ConsoleGroupViewMessage(message, this._linkifier, nestingLevel);
       default:
         return new Console.ConsoleViewMessage(message, this._linkifier, nestingLevel);
     }
   }
 
   _consoleCleared() {
     this._currentMatchRangeIndex = -1;
@@ skipping 133 matching lines @@
     for (var i = 0; i < this._visibleViewMessages.length; ++i) {
       this._visibleViewMessages[i].resetCloseGroupDecorationCount();
       this._visibleViewMessages[i].resetIncrementRepeatCount();
     }
     this._visibleViewMessages = [];
     for (var i = 0; i < this._consoleMessages.length; ++i)
       this._appendMessageToEnd(this._consoleMessages[i]);
     this._updateFilterStatus();
     this._searchableView.updateSearchMatchesCount(this._regexMatchRanges.length);
     this._viewport.invalidate();
+    this._visibleViewMessages.forEach(message => message.updateMessageElement());

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

This still does not make much sense to me! Why do we invalidate and also rebuild
all the messages in one call?

   }
 
   /**
    * @param {!Common.Event} event
    */
   _monitoringXHREnabledSettingChanged(event) {
     var enabled = /** @type {boolean} */ (event.data);
     SDK.targetManager.targets().forEach(function(target) {
       target.networkAgent().setMonitoringXHREnabled(enabled);
     });
@@ skipping 463 matching lines @@
     super(message, linkifier, nestingLevel);
   }
 
   /**
    * @override
    * @return {!Element}
    */
   contentElement() {
     if (!this._contentElement) {
       this._contentElement = createElementWithClass('div', 'console-user-command');
-      var icon = UI.Icon.create('smallicon-user-command', 'command-result-icon');
-      this._contentElement.appendChild(icon);
-
       this._contentElement.message = this;
 
       this._formattedCommand = createElementWithClass('span', 'source-code');
       this._formattedCommand.textContent = this.text.replaceControlCharacters();
       this._contentElement.appendChild(this._formattedCommand);
 
       if (this._formattedCommand.textContent.length < Console.ConsoleCommand.MaxLengthToIgnoreHighlighter) {
         var javascriptSyntaxHighlighter = new UI.SyntaxHighlighter('text/javascript', true);
         javascriptSyntaxHighlighter.syntaxHighlightNode(this._formattedCommand).then(this._updateSearch.bind(this));
       } else {
         this._updateSearch();
       }
-
-      this.updateTimestamp();
     }
     return this._contentElement;
   }
 
   _updateSearch() {
     this.setSearchRegex(this.searchRegex());
   }
 };
 
 /**
  * The maximum length before strings are considered too long for syntax highlighting.
  * @const
  * @type {number}
  */
 Console.ConsoleCommand.MaxLengthToIgnoreHighlighter = 10000;
 
 /**
  * @unrestricted
  */
-Console.ConsoleCommandResult = class extends Console.ConsoleViewMessage {
-  /**
-   * @param {!SDK.ConsoleMessage} message
-   * @param {!Components.Linkifier} linkifier
-   * @param {number} nestingLevel
-   */
-  constructor(message, linkifier, nestingLevel) {
-    super(message, linkifier, nestingLevel);
-  }
-
-  /**
-   * @override
-   * @return {!Element}
-   */
-  contentElement() {
-    var element = super.contentElement();
-    if (!element.classList.contains('console-user-command-result')) {
-      element.classList.add('console-user-command-result');
-      if (this.consoleMessage().level === SDK.ConsoleMessage.MessageLevel.Info) {
-        var icon = UI.Icon.create('smallicon-command-result', 'command-result-icon');
-        element.insertBefore(icon, element.firstChild);
-      }
-    }
-    return element;
-  }
-};
-
-/**
- * @unrestricted
- */
 Console.ConsoleGroup = class {
   /**
    * @param {?Console.ConsoleGroup} parentGroup
    * @param {?Console.ConsoleViewMessage} groupMessage
    */
   constructor(parentGroup, groupMessage) {
     this._parentGroup = parentGroup;
     this._nestingLevel = parentGroup ? parentGroup.nestingLevel() + 1 : 0;
     this._messagesHidden =
         groupMessage && groupMessage.collapsed() || this._parentGroup && this._parentGroup.messagesHidden();
@@ skipping 53 matching lines @@
         return true;
     }
     return false;
   }
 };
 
 /**
  * @typedef {{messageIndex: number, matchIndex: number}}
  */
 Console.ConsoleView.RegexMatchRange;