DevTools: avoid slowdown from unnecessary DOM, style mutations on CodeMirrorTextEditor

third_party/WebKit/Source/devtools/front_end/source_frame/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 557 matching lines @@
     this._decoration._messageBucket = this;
     this._wave = this._decoration.createChild('div', 'text-editor-line-decoration-wave');
     this._icon = this._wave.createChild('label', 'text-editor-line-decoration-icon', 'dt-icon-label');
     this._hasDecoration = false;
 
     this._messagesDescriptionElement = createElementWithClass('div', 'text-editor-messages-description-container');
     /** @type {!Array.<!SourceFrame.UISourceCodeFrame.RowMessage>} */
     this._messages = [];
 
     this._level = null;
+    this._throttler = new Common.Throttler(50);
   }
 
   /**
    * @param {number} lineNumber
    * @param {number} columnNumber
    */
   _updateWavePosition(lineNumber, columnNumber) {
     lineNumber = Math.min(lineNumber, this.textEditor.linesCount - 1);
     var lineText = this.textEditor.line(lineNumber);
     columnNumber = Math.min(columnNumber, lineText.length);
@@ skipping 32 matching lines @@
    * @return {number}
    */
   uniqueMessagesCount() {
     return this._messages.length;
   }
 
   /**
    * @param {!Workspace.UISourceCode.Message} message
    */
   addMessage(message) {
     for (var i = 0; i < this._messages.length; ++i) {

[lushnikov, 2017/04/19 20:41:28]

isn't this part the one which hurts us most? This makes adding a message O(N^2)

[luoe, 2017/04/20 23:43:59]

Unfortunately we cannot take advantage of something like Set.has() because we
need to use message.isEqual() to check equality.

Good news is, it's not the major cause of slowness!  The real slowdown is due to
us adding/removing decorations and toggling classes on CodeMirrorTextEditor when
we do not need to.

       var rowMessage = this._messages[i];
       if (rowMessage.message().isEqual(message)) {
         rowMessage.setRepeatCount(rowMessage.repeatCount() + 1);
         return;
       }
     }
 
     var rowMessage = new SourceFrame.UISourceCodeFrame.RowMessage(message);
     this._messages.push(rowMessage);
-    this._updateDecoration();
+    this._throttler.schedule(() => {
+      this._updateDecoration();
+      return Promise.resolve();
+    });
   }
 
   /**
    * @param {!Workspace.UISourceCode.Message} message
    */
   removeMessage(message) {
     for (var i = 0; i < this._messages.length; ++i) {
       var rowMessage = this._messages[i];
       if (!rowMessage.message().isEqual(message))
         continue;
       rowMessage.setRepeatCount(rowMessage.repeatCount() - 1);
       if (!rowMessage.repeatCount())
         this._messages.splice(i, 1);
-      this._updateDecoration();
+      this._throttler.schedule(() => {
+        this._updateDecoration();
+        return Promise.resolve();
+      });
       return;
     }
   }
 
   _updateDecoration() {
     if (!this._sourceFrame.isEditorShowing())
       return;
     if (!this._messages.length)
       return;
     var position = this._lineHandle.resolve();
@@ skipping 30 matching lines @@
 
 /**
  * @param {!Workspace.UISourceCode.Message} a
  * @param {!Workspace.UISourceCode.Message} b
  * @return {number}
  */
 Workspace.UISourceCode.Message.messageLevelComparator = function(a, b) {
   return Workspace.UISourceCode.Message._messageLevelPriority[a.level()] -
       Workspace.UISourceCode.Message._messageLevelPriority[b.level()];
 };