DevTools: Improve performance of the element breadcrumbs.

Source/devtools/front_end/ElementsPanel.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 53 matching lines @@
         this.contentElement.classList.add("nowrap");
     WebInspector.settings.domWordWrap.addChangeListener(this._domWordWrapSettingChanged.bind(this));
 
     this.contentElement.addEventListener("contextmenu", this._contextMenuEventFired.bind(this), true);
     this.splitView.sidebarElement.addEventListener("contextmenu", this._sidebarContextMenuEventFired.bind(this), false);
 
     this.treeOutline = new WebInspector.ElementsTreeOutline(true, true, false, this._populateContextMenu.bind(this), this._setPseudoClassForNodeId.bind(this));
     this.treeOutline.wireToDomAgent();
 
     this.treeOutline.addEventListener(WebInspector.ElementsTreeOutline.Events.SelectedNodeChanged, this._selectedNodeChanged, this);
+    this.treeOutline.addEventListener(WebInspector.ElementsTreeOutline.Events.DOMNodesUpdated, this._updateBreadcrumbIfNeeded, this);
 
     this.crumbsElement = document.createElement("div");
     this.crumbsElement.className = "crumbs";
     this.crumbsElement.addEventListener("mousemove", this._mouseMovedInCrumbs.bind(this), false);
     this.crumbsElement.addEventListener("mouseout", this._mouseMovedOutOfCrumbs.bind(this), false);
 
     this.sidebarPanes = {};
     this.sidebarPanes.computedStyle = new WebInspector.ComputedStyleSidebarPane();
     this.sidebarPanes.styles = new WebInspector.StylesSidebarPane(this.sidebarPanes.computedStyle, this._setPseudoClassForNodeId.bind(this));
     this.sidebarPanes.metrics = new WebInspector.MetricsSidebarPane();
@@ skipping 10 matching lines @@
     this.sidebarPanes.styles.addEventListener("style property toggled", this._stylesPaneEdited, this);
     this.sidebarPanes.metrics.addEventListener("metrics edited", this._metricsPaneEdited, this);
 
     WebInspector.dockController.addEventListener(WebInspector.DockController.Events.DockSideChanged, this._dockSideChanged.bind(this));
     WebInspector.settings.splitVerticallyWhenDockedToRight.addChangeListener(this._dockSideChanged.bind(this));
     this._dockSideChanged();
 
     this._popoverHelper = new WebInspector.PopoverHelper(this.element, this._getPopoverAnchor.bind(this), this._showPopover.bind(this));
     this._popoverHelper.setTimeout(0);
 
-    WebInspector.domAgent.addEventListener(WebInspector.DOMAgent.Events.AttrModified, this._updateBreadcrumbIfNeeded, this);
-    WebInspector.domAgent.addEventListener(WebInspector.DOMAgent.Events.AttrRemoved, this._updateBreadcrumbIfNeeded, this);
-    WebInspector.domAgent.addEventListener(WebInspector.DOMAgent.Events.NodeRemoved, this._nodeRemoved, this);
     WebInspector.domAgent.addEventListener(WebInspector.DOMAgent.Events.DocumentUpdated, this._documentUpdatedEvent, this);
     WebInspector.settings.showShadowDOM.addChangeListener(this._showShadowDOMChanged.bind(this));
 
     if (WebInspector.domAgent.existingDocument())
         this._documentUpdated(WebInspector.domAgent.existingDocument());
 }
 
 WebInspector.ElementsPanel.prototype = {
     _updateTreeOutlineVisibleWidth: function()
     {
@@ skipping 425 matching lines @@
         if (!this._searchResults)
             return;
         var searchResult = this._searchResults[this._currentSearchResultIndex];
         if (!searchResult)
             return;
         var treeElement = this.treeOutline.findTreeElement(searchResult);
         if (treeElement)
             treeElement.hideSearchHighlights();
     },
 
+    /**
+     * @return {WebInspector.DOMNode}
+     */
     selectedDOMNode: function()
     {
         return this.treeOutline.selectedDOMNode();
     },
 
     /**
      * @param {boolean=} focus
      */
     selectDOMNode: function(node, focus)
     {
         this.treeOutline.selectDOMNode(node, focus);
     },
 
-    _nodeRemoved: function(event)
+    /**
+     * @param {WebInspector.Event} event
+     */
+    _updateBreadcrumbIfNeeded: function(event)
     {
-        if (!this.isShowing())
+        var nodes = /** @type {!Array.<!WebInspector.DOMNode>} */ (event.data || []);
+        if (!nodes.length)
             return;
 
         var crumbs = this.crumbsElement;
         for (var crumb = crumbs.firstChild; crumb; crumb = crumb.nextSibling) {
-            if (crumb.representedObject === event.data.node) {
+            if (nodes.indexOf(crumb.representedObject) !== -1) {
                 this.updateBreadcrumb(true);
                 return;
             }
         }
     },
 
     _stylesPaneEdited: function()
     {
         // Once styles are edited, the Metrics pane should be updated.
         this.sidebarPanes.metrics.needsUpdate = true;
@@ skipping 24 matching lines @@
     {
         var nodeUnderMouse = document.elementFromPoint(event.pageX, event.pageY);
         if (nodeUnderMouse && nodeUnderMouse.isDescendant(this.crumbsElement))
             return;
 
         WebInspector.domAgent.hideDOMNodeHighlight();
 
         this._mouseOutOfCrumbsTimeout = setTimeout(this.updateBreadcrumbSizes.bind(this), 1000);
     },
 
-    _updateBreadcrumbIfNeeded: function(event)
-    {
-        var name = event.data.name;
-        if (name !== "class" && name !== "id")
-            return;
-
-        var node = /** @type {WebInspector.DOMNode} */ (event.data.node);
-        var crumbs = this.crumbsElement;
-        var crumb = crumbs.firstChild;
-        while (crumb) {
-            if (crumb.representedObject === node) {
-                this.updateBreadcrumb(true);
-                break;
-            }
-            crumb = crumb.nextSibling;
-        }
-    },
-
     /**
      * @param {boolean=} forceUpdate
      */
     updateBreadcrumb: function(forceUpdate)
     {
         if (!this.isShowing())
             return;
 
         var crumbs = this.crumbsElement;
 
@@ skipping 49 matching lines @@
 
         for (var current = this.selectedDOMNode(); current; current = current.parentNode) {
             if (current.nodeType() === Node.DOCUMENT_NODE)
                 continue;
 
             crumb = document.createElement("span");
             crumb.className = "crumb";
             crumb.representedObject = current;
             crumb.addEventListener("mousedown", selectCrumbFunction, false);
 
-            var crumbTitle;
+            var crumbTitle = "";
             switch (current.nodeType()) {
                 case Node.ELEMENT_NODE:
                     WebInspector.DOMPresentationUtils.decorateNodeLabel(current, crumb);
                     break;
 
                 case Node.TEXT_NODE:
                     crumbTitle = WebInspector.UIString("(text)");
-                    break
+                    break;
 
                 case Node.COMMENT_NODE:
                     crumbTitle = "<!-->";
                     break;
 
                 case Node.DOCUMENT_TYPE_NODE:
                     crumbTitle = "<!DOCTYPE>";
                     break;
 
                 default:
@@ skipping 479 matching lines @@
      * @param {WebInspector.SidebarPane} pane
      */
     addExtensionSidebarPane: function(id, pane)
     {
         this.sidebarPanes[id] = pane;
         this.sidebarPaneView.addPane(pane);
     },
 
     __proto__: WebInspector.Panel.prototype
 }