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

third_party/WebKit/Source/devtools/front_end/source_frame/UISourceCodeFrame.js

Index: third_party/WebKit/Source/devtools/front_end/source_frame/UISourceCodeFrame.js
diff --git a/third_party/WebKit/Source/devtools/front_end/source_frame/UISourceCodeFrame.js b/third_party/WebKit/Source/devtools/front_end/source_frame/UISourceCodeFrame.js
index 6e013ce940864d0072e5d656289fc7d6db19f0cd..7e450f2ac310e4535cdc8ae5e32f8bcef907e578 100644
--- a/third_party/WebKit/Source/devtools/front_end/source_frame/UISourceCodeFrame.js
+++ b/third_party/WebKit/Source/devtools/front_end/source_frame/UISourceCodeFrame.js
@@ -568,7 +568,8 @@ SourceFrame.UISourceCodeFrame.RowMessageBucket = class {
     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;
+    /** @type {?number} */
+    this._decorationStartColumn = null;
 
     this._messagesDescriptionElement = createElementWithClass('div', 'text-editor-messages-description-container');
     /** @type {!Array.<!SourceFrame.UISourceCodeFrame.RowMessage>} */
@@ -586,10 +587,14 @@ SourceFrame.UISourceCodeFrame.RowMessageBucket = class {
     var lineText = this.textEditor.line(lineNumber);
     columnNumber = Math.min(columnNumber, lineText.length);
     var lineIndent = TextUtils.TextUtils.lineIndent(lineText).length;
-    if (this._hasDecoration)
-      this.textEditor.removeDecoration(this._decoration, lineNumber);
-    this._hasDecoration = true;
-    this.textEditor.addDecoration(this._decoration, lineNumber, Math.max(columnNumber - 1, lineIndent));
+    var startColumn = Math.max(columnNumber - 1, lineIndent);
+    var columnChanged = this._decorationStartColumn !== startColumn;
+    if (columnChanged) {

[dgozman, 2017/04/26 00:03:55]

if (this._decorationStartColumn === startColumn)
  return;

[luoe, 2017/04/26 00:12:38]

Done.

+      if (this._decorationStartColumn !== null)
+        this.textEditor.removeDecoration(this._decoration, lineNumber);
+      this.textEditor.addDecoration(this._decoration, lineNumber, startColumn);
+      this._decorationStartColumn = startColumn;
+    }
   }
 
   /**
@@ -611,9 +616,10 @@ SourceFrame.UISourceCodeFrame.RowMessageBucket = class {
     var lineNumber = position.lineNumber;
     if (this._level)
       this.textEditor.toggleLineClass(lineNumber, SourceFrame.UISourceCodeFrame._lineClassPerLevel[this._level], false);
-    if (this._hasDecoration)
+    if (this._decorationStartColumn !== null) {
       this.textEditor.removeDecoration(this._decoration, lineNumber);
-    this._hasDecoration = false;
+      this._decorationStartColumn = null;
+    }
   }
 
   /**
@@ -676,15 +682,22 @@ SourceFrame.UISourceCodeFrame.RowMessageBucket = class {
     }
     this._updateWavePosition(lineNumber, columnNumber);
 
-    if (this._level) {
-      this.textEditor.toggleLineClass(lineNumber, SourceFrame.UISourceCodeFrame._lineClassPerLevel[this._level], false);
-      this._icon.type = '';
+    var newLevel = maxMessage.level();
+    var wasLevelChanged = newLevel !== this._level;
+    if (wasLevelChanged) {

[dgozman, 2017/04/26 00:03:55]

I think we can leave previous code intact and just add an early return:

if (this._level === maxMessage.level())
  return;

[luoe, 2017/04/26 00:12:38]

Done.

+      if (this._level) {
+        var oldLineClass = SourceFrame.UISourceCodeFrame._lineClassPerLevel[this._level];
+        this.textEditor.toggleLineClass(lineNumber, oldLineClass, false);
+      }
+      if (newLevel) {
+        var newLineClass = SourceFrame.UISourceCodeFrame._lineClassPerLevel[newLevel];
+        this.textEditor.toggleLineClass(lineNumber, newLineClass, true);
+        this._icon.type = SourceFrame.UISourceCodeFrame._iconClassPerLevel[newLevel];
+      } else {
+        this._icon.type = '';
+      }
+      this._level = newLevel;
     }
-    this._level = maxMessage.level();
-    if (!this._level)
-      return;
-    this.textEditor.toggleLineClass(lineNumber, SourceFrame.UISourceCodeFrame._lineClassPerLevel[this._level], true);
-    this._icon.type = SourceFrame.UISourceCodeFrame._iconClassPerLevel[this._level];
   }
 };