DevTools: Improve performance of the element breadcrumbs.

Source/devtools/front_end/ElementsTreeOutline.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 38 matching lines @@
     this.element.addEventListener("dragleave", this._ondragleave.bind(this), false);
     this.element.addEventListener("drop", this._ondrop.bind(this), false);
     this.element.addEventListener("dragend", this._ondragend.bind(this), false);
     this.element.addEventListener("keydown", this._onkeydown.bind(this), false);
 
     TreeOutline.call(this, this.element);
 
     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;
 
     this.element.addEventListener("contextmenu", this._contextMenuEventFired.bind(this), true);
     this._contextMenuCallback = contextMenuCallback;
     this._setPseudoClassCallback = setPseudoClassCallback;
     this._createNodeDecorators();
 }
 
+/**
+ * @enum {string}
+ */
 WebInspector.ElementsTreeOutline.Events = {
-    SelectedNodeChanged: "SelectedNodeChanged"
+    SelectedNodeChanged: "SelectedNodeChanged",
+    DOMNodesUpdated: "DOMNodesUpdated"

[pfeldman, 2013/08/21 17:16:32]

ElementsTreeUpdated

[aandrey, 2013/08/21 17:30:02]

Done.

 }
 
+/**
+ * @const
+ * @type {!Object.<string, string>}
+ */
 WebInspector.ElementsTreeOutline.MappedCharToEntity = {
     "\u00a0": "nbsp",
     "\u2002": "ensp",
     "\u2003": "emsp",
     "\u2009": "thinsp",
     "\u200a": "#8202", // Hairspace
     "\u200b": "#8203", // ZWSP
     "\u200c": "zwnj",
     "\u200d": "zwj",
     "\u200e": "lrm",
@@ skipping 20 matching lines @@
     {
         this._nodeDecorators = [];
         this._nodeDecorators.push(new WebInspector.ElementsTreeOutline.PseudoStateDecorator());
     },
 
     wireToDomAgent: function()
     {
         this._elementsTreeUpdater = new WebInspector.ElementsTreeUpdater(this);
     },
 
+    /**
+     * @param {boolean} visible
+     */
     setVisible: function(visible)
     {
         this._visible = visible;
         if (!this._visible)
             return;
 
         this._updateModifiedNodes();
         if (this._selectedDOMNode)
             this._revealAndSelectNode(this._selectedDOMNode, false);
     },
@@ skipping 23 matching lines @@
         this._isXMLMimeType = x && x.isXMLNode();
 
         this.update();
     },
 
     get isXMLMimeType()
     {
         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) {
             this._revealAndSelectNode(node, !focus);
             return;
         }
 
         this._selectedDOMNode = node;
         this._revealAndSelectNode(node, !focus);
 
@@ skipping 50 matching lines @@
 
     updateSelection: function()
     {
         if (!this.selectedTreeElement)
             return;
         var element = this.treeOutline.selectedTreeElement;
         element.updateSelection();
     },
 
     /**
-     * @param {WebInspector.DOMNode} node
+     * @param {!WebInspector.DOMNode} node
      */
     updateOpenCloseTags: function(node)
     {
         var treeElement = this.findTreeElement(node);
         if (treeElement)
             treeElement.updateTitle();
         var children = treeElement.children;
         var closingTagElement = children[children.length - 1];
         if (closingTagElement && closingTagElement._elementCloseTag)
             closingTagElement.updateTitle();
     },
 
     _selectedNodeChanged: function()
     {
         this._eventSupport.dispatchEventToListeners(WebInspector.ElementsTreeOutline.Events.SelectedNodeChanged, this._selectedDOMNode);
     },
 
     /**
-     * @param {WebInspector.DOMNode} node
+     * @param {!Array.<!WebInspector.DOMNode>} nodes
+     */
+    _domNodesUpdated: function(nodes)

[pfeldman, 2013/08/21 17:16:32]

_fireElementsTreeUpdated

[aandrey, 2013/08/21 17:30:02]

Done.

+    {
+        this._eventSupport.dispatchEventToListeners(WebInspector.ElementsTreeOutline.Events.DOMNodesUpdated, nodes);
+    },
+
+    /**
+     * @param {!WebInspector.DOMNode} node
+     * @return {TreeElement}
      */
     findTreeElement: function(node)
     {
         function isAncestorNode(ancestor, node)
         {
             return ancestor.isAncestor(node);
         }
 
         function parentNode(node)
         {
             return node.parentNode;
         }
 
         var treeElement = TreeOutline.prototype.findTreeElement.call(this, node, isAncestorNode, parentNode);
         if (!treeElement && node.nodeType() === Node.TEXT_NODE) {
             // The text node might have been inlined if it was short, so try to find the parent element.
             treeElement = TreeOutline.prototype.findTreeElement.call(this, node.parentNode, isAncestorNode, parentNode);
         }
 
         return treeElement;
     },
 
     /**
-     * @param {WebInspector.DOMNode} node
+     * @param {!WebInspector.DOMNode} node
+     * @return {TreeElement}
      */
     createTreeElementFor: function(node)
     {
         var treeElement = this.findTreeElement(node);
         if (treeElement)
             return treeElement;
         if (!node.parentNode)
             return null;
 
         treeElement = this.createTreeElementFor(node.parentNode);
         return treeElement ? treeElement._showChild(node) : null;
     },
 
     set suppressRevealAndSelect(x)
     {
         if (this._suppressRevealAndSelect === x)
             return;
         this._suppressRevealAndSelect = x;
     },
 
+    /**
+     * @param {WebInspector.DOMNode} node
+     * @param {boolean} omitFocus
+     */
     _revealAndSelectNode: function(node, omitFocus)
     {
         if (this._suppressRevealAndSelect)
             return;
 
         if (!this._includeRootDOMNode && node === this.rootDOMNode && this.rootDOMNode)
             node = this.rootDOMNode.firstChild;
         if (!node)
             return;
         var treeElement = this.createTreeElementFor(node);
         if (!treeElement)
             return;
 
         treeElement.revealAndSelect(omitFocus);
     },
 
+    /**
+     * @return {TreeElement}
+     */
     _treeElementFromEvent: function(event)
     {
         var scrollContainer = this.element.parentElement;
 
         // We choose this X coordinate based on the knowledge that our list
         // items extend at least to the right edge of the outer <ol> container.
         // In the no-word-wrap mode the outer <ol> may be wider than the tree container
         // (and partially hidden), in which case we are left to use only its right boundary.
         var x = scrollContainer.totalOffsetLeft() + scrollContainer.offsetWidth - 36;
 
@@ skipping 106 matching lines @@
         return false;
     },
 
     _ondragleave: function(event)
     {
         this._clearDragOverTreeElementMarker();
         event.preventDefault();
         return false;
     },
 
+    /**
+     * @param {TreeElement} treeElement
+     * @return {boolean}
+     */
     _isValidDragSourceOrTarget: function(treeElement)
     {
         if (!treeElement)
             return false;
 
         var node = treeElement.representedObject;
         if (!(node instanceof WebInspector.DOMNode))
             return false;
 
         if (!node.parentNode || node.parentNode.nodeType() !== Node.ELEMENT_NODE)
             return false;
 
         return true;
     },
 
     _ondrop: function(event)
     {
         event.preventDefault();
         var treeElement = this._treeElementFromEvent(event);
         if (treeElement)
             this._doMove(treeElement);
     },
 
+    /**
+     * @param {TreeElement} treeElement
+     */
     _doMove: function(treeElement)
     {
         if (!this._treeElementBeingDragged)
             return;
 
         var parentNode;
         var anchorNode;
 
         if (treeElement._elementCloseTag) {
             // Drop onto closing tag -> insert as last child.
             parentNode = treeElement._node;
         } else {
             var dragTargetNode = treeElement._node;
             parentNode = dragTargetNode.parentNode;
             anchorNode = dragTargetNode;
         }
 
         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;
     },
 
     _ondragend: function(event)
     {
         event.preventDefault();
         this._clearDragOverTreeElementMarker();
         delete this._treeElementBeingDragged;
     },
@@ skipping 89 matching lines @@
             return;
 
         if (event.keyIdentifier === "F2") {
             this._toggleEditAsHTML(node);
             event.handled = true;
             return;
         }
 
         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);
         if (!treeElement)
             return;
 
         if (treeElement._editing && treeElement._htmlEditElement && WebInspector.isBeingEdited(treeElement._htmlEditElement))
             treeElement._editing.commit();
         else
             treeElement._editAsHTML();
     },
 
-    _selectNodeAfterEdit: function(fallbackNode, wasExpanded, error, nodeId)
+    /**
+     * @param {boolean} wasExpanded
+     * @param {?Protocol.Error} error
+     * @param {DOMAgent.NodeId=} nodeId
+     */
+    _selectNodeAfterEdit: function(wasExpanded, error, nodeId)

[pfeldman, 2013/08/21 17:16:32]

Thanks.

     {
         if (error)
             return;
 
         // 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;
 
         this.selectDOMNode(newNode, true);
 
         var newTreeItem = this.findTreeElement(newNode);
         if (wasExpanded) {
             if (newTreeItem)
                 newTreeItem.expand();
         }
@@ skipping 1059 matching lines @@
 
         var treeOutline = this.treeOutline;
         var wasExpanded = this.expanded;
 
         function changeTagNameCallback(error, nodeId)
         {
             if (error || !nodeId) {
                 cancel();
                 return;
             }
-            var newTreeItem = treeOutline._selectNodeAfterEdit(null, wasExpanded, error, nodeId);
+            var newTreeItem = treeOutline._selectNodeAfterEdit(wasExpanded, error, nodeId);
             moveToNextAttributeIfNeeded.call(newTreeItem);
         }
 
         this._node.setNodeName(newText, changeTagNameCallback);
     },
 
     /**
      * @param {WebInspector.DOMNode} textNode
      * @param {Element} element
      * @param {string} newText
@@ skipping 466 matching lines @@
     _updateHasChildren: function()
     {
         this.hasChildren = !this._elementCloseTag && !this._showInlineText() && this._visibleChildCount() > 0;
     },
 
     __proto__: TreeElement.prototype
 }
 
 /**
  * @constructor
+ * @param {!WebInspector.ElementsTreeOutline} treeOutline
  */
 WebInspector.ElementsTreeUpdater = function(treeOutline)
 {
     WebInspector.domAgent.addEventListener(WebInspector.DOMAgent.Events.NodeInserted, this._nodeInserted, this);
     WebInspector.domAgent.addEventListener(WebInspector.DOMAgent.Events.NodeRemoved, this._nodeRemoved, this);
     WebInspector.domAgent.addEventListener(WebInspector.DOMAgent.Events.AttrModified, this._attributesUpdated, this);
     WebInspector.domAgent.addEventListener(WebInspector.DOMAgent.Events.AttrRemoved, this._attributesUpdated, this);
     WebInspector.domAgent.addEventListener(WebInspector.DOMAgent.Events.CharacterDataModified, this._characterDataModified, this);
     WebInspector.domAgent.addEventListener(WebInspector.DOMAgent.Events.DocumentUpdated, this._documentUpdated, this);
     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
      * @param {WebInspector.DOMNode=} parentNode
      */
     _nodeModified: function(node, isUpdated, parentNode)
     {
         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);
             return;
         }
 
         entry.isUpdated |= isUpdated;
         if (parentNode)
             entry.parent = parentNode;
     },
@@ skipping 53 matching lines @@
 
         var updatedParentTreeElements = [];
 
         var hidePanelWhileUpdating = this._recentlyModifiedNodes.size() > 10;
         if (hidePanelWhileUpdating) {
             var treeOutlineContainerElement = this._treeOutline.element.parentNode;
             this._treeOutline.element.addStyleClass("hidden");
             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;
 
             if (parent === this._treeOutline._rootDOMNode) {
                 // Document's children have changed, perform total update.
                 this._treeOutline.update();
                 this._treeOutline.element.removeStyleClass("hidden");
                 return;
             }
 
             if (entry.isUpdated) {
                 var nodeItem = this._treeOutline.findTreeElement(node);
                 if (nodeItem)
                     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;
                 updatedParentTreeElements.push(parentNodeItem);
             }
         }
 
         for (var i = 0; i < updatedParentTreeElements.length; ++i)
             delete updatedParentTreeElements[i].alreadyUpdatedChildren;
 
         if (hidePanelWhileUpdating) {
             this._treeOutline.element.removeStyleClass("hidden");
             if (originalScrollTop)
                 treeOutlineContainerElement.scrollTop = originalScrollTop;
             this._treeOutline.updateSelection();
         }
         this._recentlyModifiedNodes.clear();
+
+        this._treeOutline._domNodesUpdated(nodes);
     },
 
     _reset: function()
     {
         this._treeOutline.rootDOMNode = null;
         this._treeOutline.selectDOMNode(null, false);
         WebInspector.domAgent.hideDOMNodeHighlight();
         this._recentlyModifiedNodes.clear();
     }
 }
 
 /**
  * @constructor
  * @param {boolean} isUpdated
  * @param {WebInspector.DOMNode=} parent
  */
 WebInspector.ElementsTreeUpdater.UpdateEntry = function(isUpdated, parent)
 {
     this.isUpdated = isUpdated;
     if (parent)
         this.parent = parent;
 }