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 550 matching lines @@
    * @param {number} lineNumber
    */
   constructor(sourceFrame, textEditor, lineNumber) {
     this._sourceFrame = sourceFrame;
     this.textEditor = textEditor;
     this._lineHandle = textEditor.textEditorPositionHandle(lineNumber, 0);
     this._decoration = createElementWithClass('div', 'text-editor-line-decoration');
     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>} */
     this._messages = [];
 
     this._level = null;
   }
 
   /**
    * @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);
     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;
+    }
   }
 
   /**
    * @return {!Element}
    */
   messagesDescription() {
     this._messagesDescriptionElement.removeChildren();
     UI.appendStyle(this._messagesDescriptionElement, 'source_frame/messagesPopover.css');
     for (var i = 0; i < this._messages.length; ++i)
       this._messagesDescriptionElement.appendChild(this._messages[i].element);
 
     return this._messagesDescriptionElement;
   }
 
   detachFromEditor() {
     var position = this._lineHandle.resolve();
     if (!position)
       return;
     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;
+    }
   }
 
   /**
    * @return {number}
    */
   uniqueMessagesCount() {
     return this._messages.length;
   }
 
   /**
@@ skipping 42 matching lines @@
     var columnNumber = Number.MAX_VALUE;
     var maxMessage = null;
     for (var i = 0; i < this._messages.length; ++i) {
       var message = this._messages[i].message();
       columnNumber = Math.min(columnNumber, message.columnNumber());
       if (!maxMessage || Workspace.UISourceCode.Message.messageLevelComparator(maxMessage, message) < 0)
         maxMessage = message;
     }
     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];
   }
 };
 
 Workspace.UISourceCode.Message._messageLevelPriority = {
   'Warning': 3,
   'Error': 4
 };
 
 /**
  * @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()];
 };