DevTools: Improve performance of the element breadcrumbs.

Source/devtools/front_end/ElementsTreeOutline.js

Index: Source/devtools/front_end/ElementsTreeOutline.js
diff --git a/Source/devtools/front_end/ElementsTreeOutline.js b/Source/devtools/front_end/ElementsTreeOutline.js
index fef01b075d1e13d19fd3889a9e089246cd670ee8..fcb89ab20bc9dc7b4f60bf951f04c9e2f099aa26 100644
--- a/Source/devtools/front_end/ElementsTreeOutline.js
+++ b/Source/devtools/front_end/ElementsTreeOutline.js
@@ -56,8 +56,10 @@ WebInspector.ElementsTreeOutline = function(omitRootDOMNode, selectEnabled, show
     this._includeRootDOMNode = !omitRootDOMNode;
     this._selectEnabled = selectEnabled;
     this._showInElementsPanelEnabled = showInElementsPanelEnabled;
+    /** @type {WebInspector.DOMNode} */
     this._rootDOMNode = null;
-    this._selectDOMNode = null;
+    /** @type {WebInspector.DOMNode} */
+    this._selectedDOMNode = null;
     this._eventSupport = new WebInspector.Object();
 
     this._visible = false;
@@ -68,10 +70,18 @@ WebInspector.ElementsTreeOutline = function(omitRootDOMNode, selectEnabled, show
     this._createNodeDecorators();
 }
 
+/**
+ * @enum {string}
+ */
 WebInspector.ElementsTreeOutline.Events = {
-    SelectedNodeChanged: "SelectedNodeChanged"
+    SelectedNodeChanged: "SelectedNodeChanged",
+    ElementsTreeUpdated: "ElementsTreeUpdated"
 }
 
+/**
+ * @const
+ * @type {!Object.<string, string>}
+ */
 WebInspector.ElementsTreeOutline.MappedCharToEntity = {
     "\u00a0": "nbsp",
     "\u2002": "ensp",
@@ -112,6 +122,9 @@ WebInspector.ElementsTreeOutline.prototype = {
         this._elementsTreeUpdater = new WebInspector.ElementsTreeUpdater(this);
     },
 
+    /**
+     * @param {boolean} visible
+     */
     setVisible: function(visible)
     {
         this._visible = visible;
@@ -155,11 +168,18 @@ WebInspector.ElementsTreeOutline.prototype = {
         return this._isXMLMimeType;
     },
 
+    /**
+     * @return {WebInspector.DOMNode}
+     */
     selectedDOMNode: function()
     {
         return this._selectedDOMNode;
     },
 
+    /**
+     * @param {WebInspector.DOMNode} node
+     * @param {boolean=} focus
+     */
     selectDOMNode: function(node, focus)
     {
         if (this._selectedDOMNode === node) {
@@ -230,7 +250,7 @@ WebInspector.ElementsTreeOutline.prototype = {
     },
 
     /**
-     * @param {WebInspector.DOMNode} node
+     * @param {!WebInspector.DOMNode} node
      */
     updateOpenCloseTags: function(node)
     {
@@ -249,7 +269,16 @@ WebInspector.ElementsTreeOutline.prototype = {
     },
 
     /**
-     * @param {WebInspector.DOMNode} node
+     * @param {!Array.<!WebInspector.DOMNode>} nodes
+     */
+    _fireElementsTreeUpdated: function(nodes)
+    {
+        this._eventSupport.dispatchEventToListeners(WebInspector.ElementsTreeOutline.Events.ElementsTreeUpdated, nodes);
+    },
+
+    /**
+     * @param {!WebInspector.DOMNode} node
+     * @return {TreeElement}
      */
     findTreeElement: function(node)
     {
@@ -273,7 +302,8 @@ WebInspector.ElementsTreeOutline.prototype = {
     },
 
     /**
-     * @param {WebInspector.DOMNode} node
+     * @param {!WebInspector.DOMNode} node
+     * @return {TreeElement}
      */
     createTreeElementFor: function(node)
     {
@@ -294,6 +324,10 @@ WebInspector.ElementsTreeOutline.prototype = {
         this._suppressRevealAndSelect = x;
     },
 
+    /**
+     * @param {WebInspector.DOMNode} node
+     * @param {boolean} omitFocus
+     */
     _revealAndSelectNode: function(node, omitFocus)
     {
         if (this._suppressRevealAndSelect)
@@ -310,6 +344,9 @@ WebInspector.ElementsTreeOutline.prototype = {
         treeElement.revealAndSelect(omitFocus);
     },
 
+    /**
+     * @return {TreeElement}
+     */
     _treeElementFromEvent: function(event)
     {
         var scrollContainer = this.element.parentElement;
@@ -436,6 +473,10 @@ WebInspector.ElementsTreeOutline.prototype = {
         return false;
     },
 
+    /**
+     * @param {TreeElement} treeElement
+     * @return {boolean}
+     */
     _isValidDragSourceOrTarget: function(treeElement)
     {
         if (!treeElement)
@@ -459,6 +500,9 @@ WebInspector.ElementsTreeOutline.prototype = {
             this._doMove(treeElement);
     },
 
+    /**
+     * @param {TreeElement} treeElement
+     */
     _doMove: function(treeElement)
     {
         if (!this._treeElementBeingDragged)
@@ -477,7 +521,7 @@ WebInspector.ElementsTreeOutline.prototype = {
         }
 
         var wasExpanded = this._treeElementBeingDragged.expanded;
-        this._treeElementBeingDragged._node.moveTo(parentNode, anchorNode, this._selectNodeAfterEdit.bind(this, null, wasExpanded));
+        this._treeElementBeingDragged._node.moveTo(parentNode, anchorNode, this._selectNodeAfterEdit.bind(this, wasExpanded));
 
         delete this._treeElementBeingDragged;
     },
@@ -587,18 +631,21 @@ WebInspector.ElementsTreeOutline.prototype = {
 
         if (WebInspector.KeyboardShortcut.eventHasCtrlOrMeta(event) && node.parentNode) {
             if (event.keyIdentifier === "Up" && node.previousSibling) {
-                node.moveTo(node.parentNode, node.previousSibling, this._selectNodeAfterEdit.bind(this, null, treeElement.expanded));
+                node.moveTo(node.parentNode, node.previousSibling, this._selectNodeAfterEdit.bind(this, treeElement.expanded));
                 event.handled = true;
                 return;
             }
             if (event.keyIdentifier === "Down" && node.nextSibling) {
-                node.moveTo(node.parentNode, node.nextSibling.nextSibling, this._selectNodeAfterEdit.bind(this, null, treeElement.expanded));
+                node.moveTo(node.parentNode, node.nextSibling.nextSibling, this._selectNodeAfterEdit.bind(this, treeElement.expanded));
                 event.handled = true;
                 return;
             }
         }
     },
 
+    /**
+     * @param {WebInspector.DOMNode} node
+     */
     _toggleEditAsHTML: function(node)
     {
         var treeElement = this.getCachedTreeElement(node);
@@ -611,7 +658,12 @@ WebInspector.ElementsTreeOutline.prototype = {
             treeElement._editAsHTML();
     },
 
-    _selectNodeAfterEdit: function(fallbackNode, wasExpanded, error, nodeId)
+    /**
+     * @param {boolean} wasExpanded
+     * @param {?Protocol.Error} error
+     * @param {DOMAgent.NodeId=} nodeId
+     */
+    _selectNodeAfterEdit: function(wasExpanded, error, nodeId)
     {
         if (error)
             return;
@@ -619,7 +671,7 @@ WebInspector.ElementsTreeOutline.prototype = {
         // Select it and expand if necessary. We force tree update so that it processes dom events and is up to date.
         this._updateModifiedNodes();
 
-        var newNode = WebInspector.domAgent.nodeForId(nodeId) || fallbackNode;
+        var newNode = nodeId ? WebInspector.domAgent.nodeForId(nodeId) : null;
         if (!newNode)
             return;
 
@@ -1699,7 +1751,7 @@ WebInspector.ElementsTreeElement.prototype = {
                 cancel();
                 return;
             }
-            var newTreeItem = treeOutline._selectNodeAfterEdit(null, wasExpanded, error, nodeId);
+            var newTreeItem = treeOutline._selectNodeAfterEdit(wasExpanded, error, nodeId);
             moveToNextAttributeIfNeeded.call(newTreeItem);
         }
 
@@ -2186,6 +2238,7 @@ WebInspector.ElementsTreeElement.prototype = {
 
 /**
  * @constructor
+ * @param {!WebInspector.ElementsTreeOutline} treeOutline
  */
 WebInspector.ElementsTreeUpdater = function(treeOutline)
 {
@@ -2198,11 +2251,11 @@ WebInspector.ElementsTreeUpdater = function(treeOutline)
     WebInspector.domAgent.addEventListener(WebInspector.DOMAgent.Events.ChildNodeCountUpdated, this._childNodeCountUpdated, this);
 
     this._treeOutline = treeOutline;
+    /** @type {!Map.<!WebInspector.DOMNode, !WebInspector.ElementsTreeUpdater.UpdateEntry>} */
     this._recentlyModifiedNodes = new Map();
 }
 
 WebInspector.ElementsTreeUpdater.prototype = {
-
     /**
      * @param {!WebInspector.DOMNode} node
      * @param {boolean} isUpdated
@@ -2213,7 +2266,7 @@ WebInspector.ElementsTreeUpdater.prototype = {
         if (this._treeOutline._visible)
             this._updateModifiedNodesSoon();
 
-        var entry = /** @type {WebInspector.ElementsTreeUpdater.UpdateEntry} */ (this._recentlyModifiedNodes.get(node));
+        var entry = this._recentlyModifiedNodes.get(node);
         if (!entry) {
             entry = new WebInspector.ElementsTreeUpdater.UpdateEntry(isUpdated, parentNode);
             this._recentlyModifiedNodes.put(node, entry);
@@ -2287,9 +2340,9 @@ WebInspector.ElementsTreeUpdater.prototype = {
             var originalScrollTop = treeOutlineContainerElement ? treeOutlineContainerElement.scrollTop : 0;
         }
 
-        var keys = this._recentlyModifiedNodes.keys();
-        for (var i = 0, size = keys.length; i < size; ++i) {
-            var node = keys[i];
+        var nodes = this._recentlyModifiedNodes.keys();
+        for (var i = 0, size = nodes.length; i < size; ++i) {
+            var node = nodes[i];
             var entry = this._recentlyModifiedNodes.get(node);
             var parent = entry.parent;
 
@@ -2306,10 +2359,7 @@ WebInspector.ElementsTreeUpdater.prototype = {
                     nodeItem.updateTitle();
             }
 
-            if (!parent)
-                continue;
-
-            var parentNodeItem = this._treeOutline.findTreeElement(parent);
+            var parentNodeItem = parent ? this._treeOutline.findTreeElement(parent) : null;
             if (parentNodeItem && !parentNodeItem.alreadyUpdatedChildren) {
                 parentNodeItem.updateChildren();
                 parentNodeItem.alreadyUpdatedChildren = true;
@@ -2327,6 +2377,8 @@ WebInspector.ElementsTreeUpdater.prototype = {
             this._treeOutline.updateSelection();
         }
         this._recentlyModifiedNodes.clear();
+
+        this._treeOutline._fireElementsTreeUpdated(nodes);
     },
 
     _reset: function()