DevTools: [wip] move Elements panel off WebInspector.domModel and single tree outline.

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 23 matching lines @@
 importScript("MetricsSidebarPane.js");
 importScript("OverridesView.js");
 importScript("PlatformFontsSidebarPane.js");
 importScript("PropertiesSidebarPane.js");
 importScript("RenderingOptionsView.js");
 importScript("StylesSidebarPane.js");
 
 /**
  * @constructor
  * @implements {WebInspector.Searchable}
+ * @implements {WebInspector.TargetManager.Observer}
  * @extends {WebInspector.Panel}
  */
 WebInspector.ElementsPanel = function()
 {
     WebInspector.Panel.call(this, "elements");
     this.registerRequiredCSS("breadcrumbList.css");
     this.registerRequiredCSS("elementsPanel.css");
     this.registerRequiredCSS("textPrompt.css");
     this.setHideOnDetach();
 
@@ skipping 10 matching lines @@
     this.contentElement.id = "elements-content";
     this.contentElement.classList.add("outline-disclosure");
     this.contentElement.classList.add("source-code");
     if (!WebInspector.settings.domWordWrap.get())
         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, 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.ElementsTreeUpdated, this._updateBreadcrumbIfNeeded, this);
-
     var crumbsContainer = stackElement.createChild("div");
     crumbsContainer.id = "elements-crumbs";
     this.crumbsElement = crumbsContainer.createChild("div", "crumbs");
     this.crumbsElement.addEventListener("mousemove", this._mouseMovedInCrumbs.bind(this), false);
     this.crumbsElement.addEventListener("mouseout", this._mouseMovedOutOfCrumbs.bind(this), false);
 
     this.sidebarPanes = {};
     this.sidebarPanes.platformFonts = new WebInspector.PlatformFontsSidebarPane();
     this.sidebarPanes.computedStyle = new WebInspector.ComputedStyleSidebarPane();
-    this.sidebarPanes.styles = new WebInspector.StylesSidebarPane(this.sidebarPanes.computedStyle, this._setPseudoClassForNodeId.bind(this));
+    this.sidebarPanes.styles = new WebInspector.StylesSidebarPane(this.sidebarPanes.computedStyle, this._setPseudoClassForNode.bind(this));
 
     this._matchedStylesFilterBoxContainer = document.createElement("div");
     this._matchedStylesFilterBoxContainer.className = "sidebar-pane-filter-box";
     this._computedStylesFilterBoxContainer = document.createElement("div");
     this._computedStylesFilterBoxContainer.className = "sidebar-pane-filter-box";
     this.sidebarPanes.styles.setFilterBoxContainers(this._matchedStylesFilterBoxContainer, this._computedStylesFilterBoxContainer);
 
     this.sidebarPanes.metrics = new WebInspector.MetricsSidebarPane();
     this.sidebarPanes.properties = new WebInspector.PropertiesSidebarPane();
     this.sidebarPanes.domBreakpoints = WebInspector.domBreakpointsSidebarPane.createProxy(this);
@@ skipping 10 matching lines @@
     this.sidebarPanes.metrics.addEventListener("metrics edited", this._metricsPaneEdited, this);
     this._extensionSidebarPanes = [];
 
     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.domModel.addEventListener(WebInspector.DOMModel.Events.DocumentUpdated, this._documentUpdatedEvent, this);
+    /** @type {!Array.<!WebInspector.ElementsTreeOutline>} */
+    this._treeOutlines = [];
+    /** @type {!Map.<!WebInspector.Target, !WebInspector.ElementsTreeOutline>} */
+    this._targetToTreeOutline = new Map();
+    WebInspector.targetManager.observeTargets(this);
     WebInspector.settings.showUAShadowDOM.addChangeListener(this._showUAShadowDOMChanged.bind(this));
-
-    WebInspector.cssModel.addEventListener(WebInspector.CSSStyleModel.Events.ModelWasEnabled, this._updateSidebars, this);
 }
 
 WebInspector.ElementsPanel.prototype = {
+    /**
+     * @param {!WebInspector.Target} target
+     */
+    targetAdded: function(target)
+    {
+        var treeOutline = new WebInspector.ElementsTreeOutline(target, true, true, this._populateContextMenu.bind(this), this._setPseudoClassForNode.bind(this));
+        treeOutline.wireToDOMModel();
+        treeOutline.addEventListener(WebInspector.ElementsTreeOutline.Events.SelectedNodeChanged, this._selectedNodeChanged, this);
+        treeOutline.addEventListener(WebInspector.ElementsTreeOutline.Events.ElementsTreeUpdated, this._updateBreadcrumbIfNeeded, this);
+        this._treeOutlines.push(treeOutline);
+        this._targetToTreeOutline.put(target, treeOutline);
+
+        target.domModel.addEventListener(WebInspector.DOMModel.Events.DocumentUpdated, this._documentUpdatedEvent.bind(this, target));
+        target.cssModel.addEventListener(WebInspector.CSSStyleModel.Events.ModelWasEnabled, this._updateSidebars, this);
+
+        // Perform attach if necessary.
+        if (this.isShowing())
+            this.wasShown();
+    },
+
+    /**
+     * @param {!WebInspector.Target} target
+     */
+    targetRemoved: function(target) { },
+
+    /**
+     * @param {?WebInspector.Target} target
+     */
+    activeTargetChanged: function(target) { },
+
+    /**
+     * @return {?WebInspector.ElementsTreeOutline}
+     */
+    _firstTreeOutlineDeprecated: function()
+    {
+        return this._treeOutlines[0] || null;
+    },
+
     _updateTreeOutlineVisibleWidth: function()
     {
-        if (!this.treeOutline)
+        if (!this._treeOutlines.length)
             return;
 
         var width = this._splitView.element.offsetWidth;
         if (this._splitView.isVertical())
             width -= this._splitView.sidebarSize();
-        this.treeOutline.setVisibleWidth(width);
-        this.treeOutline.updateSelection();
+        for (var i = 0; i > this._treeOutlines.length; ++i) {
+            this._treeOutlines[i].setVisibleWidth(width);
+            this._treeOutlines[i].updateSelection();
+        }
         this.updateBreadcrumbSizes();
     },
 
     /**
      * @return {!Element}
      */
     defaultFocusedElement: function()
     {
-        return this.treeOutline.element;
+        return this._treeOutlines.length ? this._treeOutlines[0].element : this.element;
     },
 
     /**
      * @return {!WebInspector.SearchableView}
      */
     searchableView: function()
     {
         return this._searchableView;
     },
 
     wasShown: function()
     {
-        // Attach heavy component lazily
-        if (this.treeOutline.element.parentElement !== this.contentElement)
-            this.contentElement.appendChild(this.treeOutline.element);
+        for (var i = 0; i < this._treeOutlines.length; ++i) {
+            var treeOutline = this._treeOutlines[i];
+            // Attach heavy component lazily
+            if (treeOutline.element.parentElement !== this.contentElement)
+                this.contentElement.appendChild(treeOutline.element);
+        }
+        WebInspector.Panel.prototype.wasShown.call(this);
+        this.updateBreadcrumb();
 
-        WebInspector.Panel.prototype.wasShown.call(this);
+        for (var i = 0; i < this._treeOutlines.length; ++i) {
+            var treeOutline = this._treeOutlines[i];
+            treeOutline.updateSelection();
+            treeOutline.setVisible(true);
 
-        this.updateBreadcrumb();
-        this.treeOutline.updateSelection();
-        this.treeOutline.setVisible(true);
+            if (!treeOutline.rootDOMNode)
+                if (treeOutline.domModel().existingDocument())
+                    this._documentUpdated(treeOutline.target(), treeOutline.domModel().existingDocument());
+                else
+                    treeOutline.domModel().requestDocument();
+        }
 
-        if (!this.treeOutline.rootDOMNode)
-            if (WebInspector.domModel.existingDocument())
-                this._documentUpdated(WebInspector.domModel.existingDocument());
-            else
-                WebInspector.domModel.requestDocument();
     },
 
     willHide: function()
     {
-        WebInspector.domModel.hideDOMNodeHighlight();
-        this.treeOutline.setVisible(false);
+        for (var i = 0; i < this._treeOutlines.length; ++i) {
+            var treeOutline = this._treeOutlines[i];
+            treeOutline.domModel().hideDOMNodeHighlight();
+            treeOutline.setVisible(false);
+            // Detach heavy component on hide
+            this.contentElement.removeChild(treeOutline.element);
+        }
         this._popoverHelper.hidePopover();
-
-        // Detach heavy component on hide
-        this.contentElement.removeChild(this.treeOutline.element);
-
         WebInspector.Panel.prototype.willHide.call(this);
     },
 
     onResize: function()
     {
         this._updateTreeOutlineVisibleWidth();
     },
 
     omitDefaultSelection: function()
     {
         this._omitDefaultSelection = true;
     },
 
     stopOmittingDefaultSelection: function()
     {
         delete this._omitDefaultSelection;
     },
 
     /**
-     * @param {!DOMAgent.NodeId} nodeId
+     * @param {!WebInspector.DOMNode} node
      * @param {string} pseudoClass
      * @param {boolean} enable
      */
-    _setPseudoClassForNodeId: function(nodeId, pseudoClass, enable)
+    _setPseudoClassForNode: function(node, pseudoClass, enable)
     {
-        var node = WebInspector.domModel.nodeForId(nodeId);
-        if (!node)
+        if (!node || !node.target().cssModel.forcePseudoState(node, pseudoClass, enable))
             return;
 
-        var pseudoClasses = node.getUserProperty(WebInspector.ElementsTreeOutline.PseudoStateDecorator.PropertyName);
-        if (enable) {
-            pseudoClasses = pseudoClasses || [];
-            if (pseudoClasses.indexOf(pseudoClass) >= 0)
-                return;
-            pseudoClasses.push(pseudoClass);
-            node.setUserProperty(WebInspector.ElementsTreeOutline.PseudoStateDecorator.PropertyName, pseudoClasses);
-        } else {
-            if (!pseudoClasses || pseudoClasses.indexOf(pseudoClass) < 0)
-                return;
-            pseudoClasses.remove(pseudoClass);
-            if (!pseudoClasses.length)
-                node.removeUserProperty(WebInspector.ElementsTreeOutline.PseudoStateDecorator.PropertyName);
-        }
-
-        this.treeOutline.updateOpenCloseTags(node);
-        WebInspector.cssModel.forcePseudoState(node.id, node.getUserProperty(WebInspector.ElementsTreeOutline.PseudoStateDecorator.PropertyName));
+        this._targetToTreeOutline.get(node.target()).updateOpenCloseTags(node);
         this._metricsPaneEdited();
         this._stylesPaneEdited();
 
         WebInspector.notifications.dispatchEventToListeners(WebInspector.UserMetrics.UserAction, {
             action: WebInspector.UserMetrics.UserActionNames.ForcedElementState,
             selector: WebInspector.DOMPresentationUtils.fullQualifiedSelector(node, false),
             enabled: enable,
             state: pseudoClass
         });
     },
@@ skipping 25 matching lines @@
         this.updatePlatformFonts();
         this.updateProperties();
         this.updateEventListeners();
     },
 
     _reset: function()
     {
         delete this.currentQuery;
     },
 
-    _documentUpdatedEvent: function(event)
+    /**
+     * @param {!WebInspector.Target} target
+     * @param {!WebInspector.Event} event
+     */
+    _documentUpdatedEvent: function(target, event)
     {
-        this._documentUpdated(event.data);
+        this._documentUpdated(target, /** @type {?WebInspector.DOMDocument} */ (event.data));
     },
 
-    _documentUpdated: function(inspectedRootDocument)
+    /**
+     * @param {!WebInspector.Target} target
+     * @param {?WebInspector.DOMDocument} inspectedRootDocument
+     */
+    _documentUpdated: function(target, inspectedRootDocument)
     {
         this._reset();
         this.searchCanceled();
 
-        this.treeOutline.rootDOMNode = inspectedRootDocument;
+        var treeOutline = this._targetToTreeOutline.get(target);
+        treeOutline.rootDOMNode = inspectedRootDocument;
 
         if (!inspectedRootDocument) {
             if (this.isShowing())
-                WebInspector.domModel.requestDocument();
+                target.domModel.requestDocument();
             return;
         }
 
         WebInspector.domBreakpointsSidebarPane.restoreBreakpoints();
 
         /**
          * @this {WebInspector.ElementsPanel}
          * @param {?WebInspector.DOMNode} candidateFocusNode
          */
         function selectNode(candidateFocusNode)
         {
             if (!candidateFocusNode)
                 candidateFocusNode = inspectedRootDocument.body || inspectedRootDocument.documentElement;
 
             if (!candidateFocusNode)
                 return;
 
             this.selectDOMNode(candidateFocusNode);
-            if (this.treeOutline.selectedTreeElement)
-                this.treeOutline.selectedTreeElement.expand();
+            if (treeOutline.selectedTreeElement)
+                treeOutline.selectedTreeElement.expand();
         }
 
         /**
          * @param {?DOMAgent.NodeId} nodeId
          * @this {WebInspector.ElementsPanel}
          */
         function selectLastSelectedNode(nodeId)
         {
             if (this.selectedDOMNode()) {
                 // Focused node has been explicitly set while reaching out for the last selected node.
                 return;
             }
-            var node = nodeId ? WebInspector.domModel.nodeForId(nodeId) : null;
+            var node = nodeId ? target.domModel.nodeForId(nodeId) : null;
             selectNode.call(this, node);
         }
 
         if (this._omitDefaultSelection)
             return;
 
         if (this._selectedPathOnReset)
-            WebInspector.domModel.pushNodeByPathToFrontend(this._selectedPathOnReset, selectLastSelectedNode.bind(this));
+            target.domModel.pushNodeByPathToFrontend(this._selectedPathOnReset, selectLastSelectedNode.bind(this));
         else
             selectNode.call(this, null);
         delete this._selectedPathOnReset;
     },
 
     searchCanceled: function()
     {
         delete this._searchQuery;
         this._hideSearchHighlights();
 
@@ skipping 33 matching lines @@
             this._currentSearchResultIndex = -1;
             if (shouldJump)
                 this.jumpToNextSearchResult();
         }
         WebInspector.domModel.performSearch(whitespaceTrimmedQuery, resultCountCallback.bind(this));
     },
 
     _contextMenuEventFired: function(event)
     {
         var contextMenu = new WebInspector.ContextMenu(event);
-        this.treeOutline.populateContextMenu(contextMenu, event);
+        for (var i = 0; i < this._treeOutlines.length; ++i)
+            this._treeOutlines[i].populateContextMenu(contextMenu, event);
         contextMenu.show();
     },
 
     _domWordWrapSettingChanged: function(event)
     {
         if (event.data)
             this.contentElement.classList.remove("nowrap");
         else
             this.contentElement.classList.add("nowrap");
 
         var selectedNode = this.selectedDOMNode();
         if (!selectedNode)
             return;
 
-        var treeElement = this.treeOutline.findTreeElement(selectedNode);
+        var treeOutline = this._targetToTreeOutline.get(selectedNode.target());
+        var treeElement = treeOutline.findTreeElement(selectedNode);
         if (treeElement)
             treeElement.updateSelection(); // Recalculate selection highlight dimensions.
     },
 
     switchToAndFocus: function(node)
     {
         // Reset search restore.
         this._searchableView.cancelSearch();
         WebInspector.inspectorView.setCurrentPanel(this);
         this.selectDOMNode(node, true);
@@ skipping 19 matching lines @@
                 return null;
 
             anchor.removeAttribute("title");
         }
         return anchor;
     },
 
     _loadDimensionsForNode: function(treeElement, callback)
     {
         // We get here for CSS properties, too, so bail out early for non-DOM treeElements.
-        if (treeElement.treeOutline !== this.treeOutline) {
+        if (!(treeElement.treeOutline instanceof WebInspector.ElementsTreeOutline)) {
             callback();
             return;
         }
 
         var node = /** @type {!WebInspector.DOMNode} */ (treeElement.representedObject);
 
         if (!node.nodeName() || node.nodeName().toLowerCase() !== "img") {
             callback();
             return;
         }
 
-        WebInspector.RemoteObject.resolveNode(node, "", resolvedNode);
+        node.resolveToObject("", resolvedNode);
 
         function resolvedNode(object)
         {
             if (!object) {
                 callback();
                 return;
             }
 
             object.callFunctionJSON(dimensions, undefined, callback);
             object.release();
@@ skipping 53 matching lines @@
 
         this._hideSearchHighlights();
         if (--this._currentSearchResultIndex < 0)
             this._currentSearchResultIndex = (this._searchResults.length - 1);
 
         this._highlightCurrentSearchResult();
     },
 
     _highlightCurrentSearchResult: function()
     {
+        var treeOutline = this._firstTreeOutlineDeprecated();
+        if (!treeOutline)
+            return;
+
         var index = this._currentSearchResultIndex;
         var searchResults = this._searchResults;
         var searchResult = searchResults[index];
 
         if (searchResult === null) {
             this._searchableView.updateCurrentMatchIndex(index);
             return;
         }
 
         /**
          * @param {?WebInspector.DOMNode} node
          * @this {WebInspector.ElementsPanel}
          */
         function searchCallback(node)
         {
             searchResults[index] = node;
             this._highlightCurrentSearchResult();
         }
 
         if (typeof searchResult === "undefined") {
             // No data for slot, request it.
             WebInspector.domModel.searchResult(index, searchCallback.bind(this));
             return;
         }
 
         this._searchableView.updateCurrentMatchIndex(index);
 
-        var treeElement = this.treeOutline.findTreeElement(searchResult);
+        var treeElement = treeOutline.findTreeElement(searchResult);
         if (treeElement) {
             treeElement.highlightSearchResults(this._searchQuery);
             treeElement.reveal();
             var matches = treeElement.listItemElement.getElementsByClassName("highlighted-search-result");
             if (matches.length)
                 matches[0].scrollIntoViewIfNeeded();
         }
     },
 
     _hideSearchHighlights: function()
     {
         if (!this._searchResults)
             return;
         var searchResult = this._searchResults[this._currentSearchResultIndex];
         if (!searchResult)
             return;
-        var treeElement = this.treeOutline.findTreeElement(searchResult);
+        var treeOutline = this._targetToTreeOutline.get(searchResult.target());
+        var treeElement = treeOutline.findTreeElement(searchResult);
         if (treeElement)
             treeElement.hideSearchHighlights();
     },
 
     /**
      * @return {?WebInspector.DOMNode}
      */
     selectedDOMNode: function()
     {
-        return this.treeOutline.selectedDOMNode();
+        for (var i = 0; i < this._treeOutlines.length; ++i) {
+            var treeOutline = this._treeOutlines[i];
+            if (treeOutline.selectedDOMNode())
+                return treeOutline.selectedDOMNode();
+        }
+        return null;
     },
 
     /**
      * @param {boolean=} focus
      */
     selectDOMNode: function(node, focus)
     {
-        this.treeOutline.selectDOMNode(node, focus);
+        for (var i = 0; i < this._treeOutlines.length; ++i) {
+            var treeOutline = this._treeOutlines[i];
+            if (treeOutline.target() === node.target())
+                treeOutline.selectDOMNode(node, focus);
+            else
+                treeOutline.selectDOMNode(null);
+        }
     },
 
     /**
      * @param {!WebInspector.Event} event
      */
     _updateBreadcrumbIfNeeded: function(event)
     {
         var nodes = /** @type {!Array.<!WebInspector.DOMNode>} */ (event.data || []);
         if (!nodes.length)
             return;
@@ skipping 20 matching lines @@
     {
         // Once metrics are edited, the Styles pane should be updated.
         this.sidebarPanes.styles.needsUpdate = true;
         this.updateStyles(true);
     },
 
     _mouseMovedInCrumbs: function(event)
     {
         var nodeUnderMouse = document.elementFromPoint(event.pageX, event.pageY);
         var crumbElement = nodeUnderMouse.enclosingNodeOrSelfWithClass("crumb");
-
-        WebInspector.domModel.highlightDOMNode(crumbElement ? crumbElement.representedObject.id : 0);
-
-        if ("_mouseOutOfCrumbsTimeout" in this) {
-            clearTimeout(this._mouseOutOfCrumbsTimeout);
-            delete this._mouseOutOfCrumbsTimeout;
-        }
+        var node = /** @type {?WebInspector.DOMNode} */ (crumbElement ? crumbElement.representedObject : null);
+        if (node)
+            node.highlight();
     },
 
     _mouseMovedOutOfCrumbs: function(event)
     {
         var nodeUnderMouse = document.elementFromPoint(event.pageX, event.pageY);
         if (nodeUnderMouse && nodeUnderMouse.isDescendant(this.crumbsElement))
             return;
 
-        WebInspector.domModel.hideDOMNodeHighlight();
-
-        this._mouseOutOfCrumbsTimeout = setTimeout(this.updateBreadcrumbSizes.bind(this), 1000);
+        for (var i = 0; i < this._treeOutlines.length; ++i)
+            this._treeOutlines[i].domModel().hideDOMNodeHighlight();
     },
 
     /**
      * @param {boolean=} forceUpdate
      */
     updateBreadcrumb: function(forceUpdate)
     {
         if (!this.isShowing())
             return;
 
@@ skipping 417 matching lines @@
         {
             if (WebInspector.KeyboardShortcut.eventHasCtrlOrMeta(event) && !event.shiftKey && event.keyIdentifier === "U+005A") { // Z key
                 WebInspector.domModel.undo(this._updateSidebars.bind(this));
                 event.handled = true;
                 return;
             }
 
             var isRedoKey = WebInspector.isMac() ? event.metaKey && event.shiftKey && event.keyIdentifier === "U+005A" : // Z key
                                                    event.ctrlKey && event.keyIdentifier === "U+0059"; // Y key
             if (isRedoKey) {
-                DOMAgent.redo(this._updateSidebars.bind(this));
+                WebInspector.domModel.redo(this._updateSidebars.bind(this));
                 event.handled = true;
             }
         }
 
-        if (!this.treeOutline.editing()) {
+        var treeOutline = this._firstTreeOutlineDeprecated();
+        if (!treeOutline)
+            return;
+
+        if (!treeOutline.editing()) {
             handleUndoRedo.call(this);
             if (event.handled)
                 return;
         }
 
-        this.treeOutline.handleShortcut(event);
+        treeOutline.handleShortcut(event);
     },
 
     handleCopyEvent: function(event)
     {
         var currentFocusElement = WebInspector.currentFocusElement();
         if (currentFocusElement && WebInspector.isBeingEdited(currentFocusElement))
             return;
 
         // Don't prevent the normal copy if the user has a selection.
         if (!window.getSelection().isCollapsed)
             return;
         event.clipboardData.clearData();
         event.preventDefault();
         this.selectedDOMNode().copyNode();
     },
 
     /**
      * @param {!WebInspector.DOMNode} node
      * @return {!WebInspector.DOMNode}
      */
     _leaveUserAgentShadowDOM: function(node)
     {
         var userAgentShadowRoot = node.ancestorUserAgentShadowRoot();
         return userAgentShadowRoot ? /** @type {!WebInspector.DOMNode} */ (userAgentShadowRoot.parentNode) : node;
     },
 
     /**
-     * @param {!DOMAgent.NodeId} nodeId
+     * @param {!WebInspector.DOMNode} node
      */
-    revealAndSelectNode: function(nodeId)
+    revealAndSelectNode: function(node)
     {
         WebInspector.inspectorView.setCurrentPanel(this);
-
-        var node = WebInspector.domModel.nodeForId(nodeId);
-        if (!node)
-            return;
-
         node = WebInspector.settings.showUAShadowDOM.get() ? node : this._leaveUserAgentShadowDOM(node);
-        WebInspector.domModel.highlightDOMNodeForTwoSeconds(nodeId);
+        node.highlightForTwoSeconds();
         this.selectDOMNode(node, true);
     },
 
     /** 
      * @param {!WebInspector.ContextMenu} contextMenu
-     * @param {!Object} target
+     * @param {!Object} object
      */
-    appendApplicableItems: function(event, contextMenu, target)
+    appendApplicableItems: function(event, contextMenu, object)
     {
         /**
+         * @param {!WebInspector.Target} target
          * @param {?DOMAgent.NodeId} nodeId
          */
-        function selectNode(nodeId)
+        function selectNode(target, nodeId)
         {
             if (nodeId)
-                WebInspector.domModel.inspectElement(nodeId);
+                target.domModel.inspectElement(nodeId);
         }
 
         /**
          * @param {!WebInspector.RemoteObject} remoteObject
          */
         function revealElement(remoteObject)
         {
-            remoteObject.pushNodeToFrontend(selectNode);
+            remoteObject.pushNodeToFrontend(selectNode.bind(null, /** @type {!WebInspector.Target} */ (remoteObject.target())));
         }
 
         var commandCallback;
-        if (target instanceof WebInspector.RemoteObject) {
-            var remoteObject = /** @type {!WebInspector.RemoteObject} */ (target);
+        if (object instanceof WebInspector.RemoteObject) {
+            var remoteObject = /** @type {!WebInspector.RemoteObject} */ (object);
             if (remoteObject.subtype === "node")
                 commandCallback = revealElement.bind(null, remoteObject);
-        } else if (target instanceof WebInspector.DOMNode) {
-            var domNode = /** @type {!WebInspector.DOMNode} */ (target);
-            if (domNode.id)
-                commandCallback = WebInspector.domModel.inspectElement.bind(WebInspector.domModel, domNode.id);
+        } else if (object instanceof WebInspector.DOMNode) {
+            var domNode = /** @type {!WebInspector.DOMNode} */ (object);
+            commandCallback = domNode.reveal.bind(domNode);
         }
         if (!commandCallback)
             return;
         // Skip adding "Reveal..." menu item for our own tree outline.
-        if (this.treeOutline.element.isAncestor(event.target))
+        if (this.element.isAncestor(event.target))
             return;
         contextMenu.appendItem(WebInspector.useLowerCaseMenuTitles() ? "Reveal in Elements panel" : "Reveal in Elements Panel", commandCallback);
     },
 
     _sidebarContextMenuEventFired: function(event)
     {
         var contextMenu = new WebInspector.ContextMenu(event);
         contextMenu.show();
     },
 
     _dockSideChanged: function()
     {
         var vertically = WebInspector.dockController.isVertical() && WebInspector.settings.splitVerticallyWhenDockedToRight.get();
         this._splitVertically(vertically);
     },
 
     _showUAShadowDOMChanged: function()
     {
-        this.treeOutline.update();
+        for (var i = 0; i < this._treeOutlines.length; ++i)
+            this._treeOutlines[i].update();
     },
 
     /**
      * @param {boolean} vertically
      */
     _splitVertically: function(vertically)
     {
         if (this.sidebarPaneView && vertically === !this._splitView.isVertical())
             return;
 
@@ skipping 156 matching lines @@
     reveal: function(node)
     {
         if (!(node instanceof WebInspector.DOMNode))
             return;
 
         if (WebInspector.inspectElementModeController && WebInspector.inspectElementModeController.enabled()) {
             InspectorFrontendHost.bringToFront();
             WebInspector.inspectElementModeController.disable();
         }
 
-        /** @type {!WebInspector.ElementsPanel} */ (WebInspector.inspectorView.panel("elements")).revealAndSelectNode(node.id);
+        /** @type {!WebInspector.ElementsPanel} */ (WebInspector.inspectorView.panel("elements")).revealAndSelectNode(node);
     }
 }