[DevTools] Throttle node decorations update in UI

third_party/WebKit/Source/devtools/front_end/elements/ElementsTreeElement.js

 /*
  * Copyright (C) 2007, 2008 Apple Inc.  All rights reserved.
  * Copyright (C) 2008 Matt Lilek <webkit@mattlilek.com>
  * 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 35 matching lines @@
     var gutterMenuIcon = UI.Icon.create('largeicon-menu', 'gutter-menu-icon');
     this._gutterContainer.appendChild(gutterMenuIcon);
     this._decorationsElement = this._gutterContainer.createChild('div', 'hidden');
 
     this._elementCloseTag = elementCloseTag;
 
     if (this._node.nodeType() === Node.ELEMENT_NODE && !elementCloseTag)
       this._canAddAttributes = true;
     this._searchQuery = null;
     this._expandedChildrenLimit = Elements.ElementsTreeElement.InitialChildrenLimit;
+    this._decorationsThrottler = new Common.Throttler(100);
   }
 
   /**
    * @param {!Elements.ElementsTreeElement} treeElement
    */
   static animateOnDOMUpdate(treeElement) {
     var tagName = treeElement.listItemElement.querySelector('.webkit-html-tag-name');
     UI.runCSSAnimationOnce(tagName || treeElement.listItemElement, 'dom-update-highlight');
   }
 
@@ skipping 1013 matching lines @@
     /** Keep it in sync with elementsTreeOutline.css **/
     return 12 * (depth - 2) + (this.isExpandable() ? 1 : 12);
   }
 
   updateDecorations() {
     this._gutterContainer.style.left = (-this._computeLeftIndent()) + 'px';
 
     if (this.isClosingTag())
       return;
 
+    if (this._node.nodeType() !== Node.ELEMENT_NODE)
+      return;
+
+    this._decorationsThrottler.schedule(this._updateDecorationsInternal.bind(this));
+  }
+
+  /**
+   * @return {!Promise}
+   */
+  _updateDecorationsInternal() {
+    if (!this.treeOutline)
+      return Promise.resolve();
+
     var node = this._node;
-    if (node.nodeType() !== Node.ELEMENT_NODE)
-      return;
 
     if (!this.treeOutline._decoratorExtensions)
       /** @type {!Array.<!Runtime.Extension>} */
       this.treeOutline._decoratorExtensions = runtime.extensions(Components.DOMPresentationUtils.MarkerDecorator);
 
     var markerToExtension = new Map();
     for (var i = 0; i < this.treeOutline._decoratorExtensions.length; ++i) {
       markerToExtension.set(
           this.treeOutline._decoratorExtensions[i].descriptor()['marker'], this.treeOutline._decoratorExtensions[i]);
     }
@@ skipping 18 matching lines @@
      * @param {!SDK.DOMNode} n
      * @param {!Components.DOMPresentationUtils.MarkerDecorator} decorator
      */
     function collectDecoration(n, decorator) {
       var decoration = decorator.decorate(n);
       if (!decoration)
         return;
       (n === node ? decorations : descendantDecorations).push(decoration);
     }
 
-    Promise.all(promises).then(updateDecorationsUI.bind(this));
+    return Promise.all(promises).then(updateDecorationsUI.bind(this));
 
     /**
      * @this {Elements.ElementsTreeElement}
      */
     function updateDecorationsUI() {
       this._decorationsElement.removeChildren();
       this._decorationsElement.classList.add('hidden');
       this._gutterContainer.classList.toggle('has-decorations', decorations.length || descendantDecorations.length);
 
       if (!decorations.length && !descendantDecorations.length)
@@ skipping 477 matching lines @@
 Elements.ElementsTreeElement.ForbiddenClosingTagElements = new Set([
   'area', 'base',  'basefont', 'br',   'canvas',   'col',  'command', 'embed',  'frame', 'hr',
   'img',  'input', 'keygen',   'link', 'menuitem', 'meta', 'param',   'source', 'track', 'wbr'
 ]);
 
 // These tags we do not allow editing their tag name.
 Elements.ElementsTreeElement.EditTagBlacklist = new Set(['html', 'head', 'body']);
 
 /** @typedef {{cancel: function(), commit: function(), resize: function(), editor:!UI.TextEditor}} */
 Elements.MultilineEditorController;