DevTools: move functionality away from ElementsPanel for better DOM tree control reuse.

third_party/WebKit/Source/devtools/front_end/elements/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 71 matching lines @@
     this.sidebarPanes.eventListeners = WebInspector.EventListenersWidget.createSidebarWrapper();
 
     this._stylesSidebarToolbar = this._createStylesSidebarToolbar(this.sidebarPanes.styles);
 
     WebInspector.moduleSetting("sidebarPosition").addChangeListener(this._updateSidebarPosition.bind(this));
     this._updateSidebarPosition();
     this._loadSidebarViews();
 
     /** @type {!Array.<!WebInspector.ElementsTreeOutline>} */
     this._treeOutlines = [];
-    /** @type {!Map.<!WebInspector.DOMModel, !WebInspector.ElementsTreeOutline>} */
-    this._modelToTreeOutline = new Map();
     WebInspector.targetManager.observeTargets(this);
     WebInspector.moduleSetting("showUAShadowDOM").addChangeListener(this._showUAShadowDOMChanged.bind(this));
     WebInspector.targetManager.addModelListener(WebInspector.DOMModel, WebInspector.DOMModel.Events.DocumentUpdated, this._documentUpdatedEvent, this);
     WebInspector.extensionServer.addEventListener(WebInspector.ExtensionServer.Events.SidebarPaneAdded, this._extensionSidebarPaneAdded, this);
 }
 
 WebInspector.ElementsPanel._elementsSidebarViewTitleSymbol = Symbol("title");
 
 WebInspector.ElementsPanel.prototype = {
     /**
@@ skipping 12 matching lines @@
      * @return {!Element}
      */
     _createStylesSidebarToolbar: function(ssp)
     {
         var container = createElementWithClass("div", "styles-sidebar-pane-toolbar-container");
         var hbox = container.createChild("div", "hbox styles-sidebar-pane-toolbar");
         var filterContainerElement = hbox.createChild("div", "styles-sidebar-pane-filter-box");
         var filterInput = WebInspector.StylesSidebarPane.createPropertyFilterElement(WebInspector.UIString("Filter"), hbox, ssp.onFilterChanged.bind(ssp));
         filterContainerElement.appendChild(filterInput);
         var toolbar = new WebInspector.ExtensibleToolbar("styles-sidebarpane-toolbar", hbox);
-        toolbar.onLoad().then(() => toolbar.appendToolbarItem(WebInspector.StylesSidebarPane.createAddNewRuleButton(ssp)));
         toolbar.element.classList.add("styles-pane-toolbar");
         toolbar.makeToggledGray();
         var toolbarPaneContainer = container.createChild("div", "styles-sidebar-toolbar-pane-container");
         this._toolbarPaneElement = createElementWithClass("div", "styles-sidebar-toolbar-pane");
         toolbarPaneContainer.appendChild(this._toolbarPaneElement);
         return container;
     },
 
     /**
      * @param {?WebInspector.Widget} widget
@@ skipping 59 matching lines @@
                 this._currentToolbarPane.focus();
             delete this._animatedToolbarPane;
 
             if (this._pendingWidget !== undefined) {
                 this._startToolbarPaneAnimation(this._pendingWidget);
                 delete this._pendingWidget;
             }
         }
     },
 
-    _toggleHideElement: function()
-    {
-        var node = this.selectedDOMNode();
-        var treeOutline = this._treeOutlineForNode(node);
-        if (!node || !treeOutline)
-            return;
-        treeOutline.toggleHideElement(node);
-    },
-
-    _toggleEditAsHTML: function()
-    {
-        var node = this.selectedDOMNode();
-        var treeOutline = this._treeOutlineForNode(node);
-        if (!node || !treeOutline)
-            return;
-        treeOutline.toggleEditAsHTML(node);
-    },
-
     _loadSidebarViews: function()
     {
         var extensions = self.runtime.extensions("@WebInspector.Widget");
 
         for (var i = 0; i < extensions.length; ++i) {
             var descriptor = extensions[i].descriptor();
             if (descriptor["location"] !== "elements-panel")
                 continue;
 
             var title = WebInspector.UIString(descriptor["title"]);
@@ skipping 25 matching lines @@
         var domModel = WebInspector.DOMModel.fromTarget(target);
         if (!domModel)
             return;
         var treeOutline = new WebInspector.ElementsTreeOutline(domModel, true, true);
         treeOutline.setWordWrap(WebInspector.moduleSetting("domWordWrap").get());
         treeOutline.wireToDOMModel();
         treeOutline.addEventListener(WebInspector.ElementsTreeOutline.Events.SelectedNodeChanged, this._selectedNodeChanged, this);
         treeOutline.addEventListener(WebInspector.ElementsTreeOutline.Events.ElementsTreeUpdated, this._updateBreadcrumbIfNeeded, this);
         new WebInspector.ElementsTreeElementHighlighter(treeOutline);
         this._treeOutlines.push(treeOutline);
-        this._modelToTreeOutline.set(domModel, treeOutline);
 
         // Perform attach if necessary.
         if (this.isShowing())
             this.wasShown();
 
     },
 
     /**
      * @override
      * @param {!WebInspector.Target} target
      */
     targetRemoved: function(target)
     {
         var domModel = WebInspector.DOMModel.fromTarget(target);
         if (!domModel)
             return;
-        var treeOutline = this._modelToTreeOutline.remove(domModel);
+        var treeOutline = WebInspector.ElementsTreeOutline.forDOMModel(domModel);
         treeOutline.unwireFromDOMModel();
         this._treeOutlines.remove(treeOutline);
         treeOutline.element.remove();
     },
 
     _updateTreeOutlineVisibleWidth: function()
     {
         if (!this._treeOutlines.length)
             return;
 
@@ skipping 127 matching lines @@
 
     /**
      * @param {!WebInspector.DOMModel} domModel
      * @param {?WebInspector.DOMDocument} inspectedRootDocument
      */
     _documentUpdated: function(domModel, inspectedRootDocument)
     {
         this._reset();
         this.searchCanceled();
 
-        var treeOutline = this._modelToTreeOutline.get(domModel);
+        var treeOutline = WebInspector.ElementsTreeOutline.forDOMModel(domModel);
         treeOutline.rootDOMNode = inspectedRootDocument;
 
         if (!inspectedRootDocument) {
             if (this.isShowing())
                 domModel.requestDocument();
             return;
         }
 
         WebInspector.domBreakpointsSidebarPane.restoreBreakpoints(domModel);
 
@@ skipping 252 matching lines @@
         }
     },
 
     _hideSearchHighlights: function()
     {
         if (!this._searchResults || !this._searchResults.length || this._currentSearchResultIndex < 0)
             return;
         var searchResult = this._searchResults[this._currentSearchResultIndex];
         if (!searchResult.node)
             return;
-        var treeOutline = this._modelToTreeOutline.get(searchResult.node.domModel());
+        var treeOutline = WebInspector.ElementsTreeOutline.forDOMModel(searchResult.node.domModel());
         var treeElement = treeOutline.findTreeElement(searchResult.node);
         if (treeElement)
             treeElement.hideSearchHighlights();
     },
 
     /**
      * @return {?WebInspector.DOMNode}
      */
     selectedDOMNode: function()
     {
@@ skipping 90 matching lines @@
     },
 
     /**
      * @param {?WebInspector.DOMNode} node
      * @return {?WebInspector.ElementsTreeOutline}
      */
     _treeOutlineForNode: function(node)
     {
         if (!node)
             return null;
-        return this._modelToTreeOutline.get(node.domModel()) || null;
+        return WebInspector.ElementsTreeOutline.forDOMModel(node.domModel());
     },
 
     /**
      * @return {?WebInspector.ElementsTreeOutline}
      */
     _focusedTreeOutline: function()
     {
         for (var i = 0; i < this._treeOutlines.length; ++i) {
             if (this._treeOutlines[i].hasFocus())
                 return this._treeOutlines[i];
@@ skipping 70 matching lines @@
             node.highlightForTwoSeconds();
 
         this.selectDOMNode(node, true);
         delete this._omitDefaultSelection;
 
         if (!this._notFirstInspectElement)
             InspectorFrontendHost.inspectElementCompleted();
         this._notFirstInspectElement = true;
     },
 
-    /**
-     * @param {!Event} event
-     * @param {!WebInspector.ContextMenu} contextMenu
-     * @param {!Object} object
-     */
-    appendApplicableItems: function(event, contextMenu, object)
-    {
-        if (!(object instanceof WebInspector.RemoteObject && (/** @type {!WebInspector.RemoteObject} */ (object)).isNode())
-            && !(object instanceof WebInspector.DOMNode)
-            && !(object instanceof WebInspector.DeferredDOMNode)) {
-            return;
-        }
-
-        // Add debbuging-related actions
-        if (object instanceof WebInspector.DOMNode) {
-            contextMenu.appendSeparator();
-            WebInspector.domBreakpointsSidebarPane.populateNodeContextMenu(object, contextMenu, true);
-        }
-
-        // Skip adding "Reveal..." menu item for our own tree outline.
-        if (this.element.isAncestor(/** @type {!Node} */ (event.target)))
-            return;
-        var commandCallback = WebInspector.Revealer.reveal.bind(WebInspector.Revealer, object);
-
-        contextMenu.appendItem(WebInspector.UIString.capitalize("Reveal in Elements ^panel"), commandCallback);
-    },
-
     _sidebarContextMenuEventFired: function(event)
     {
         var contextMenu = new WebInspector.ContextMenu(event);
         contextMenu.appendApplicableItems(/** @type {!Object} */ (event.deepElementFromPoint()));
         contextMenu.show();
     },
 
     _showUAShadowDOMChanged: function()
     {
         for (var i = 0; i < this._treeOutlines.length; ++i)
@@ skipping 151 matching lines @@
  */
 WebInspector.ElementsPanel.ContextMenuProvider = function()
 {
 }
 
 WebInspector.ElementsPanel.ContextMenuProvider.prototype = {
     /**
      * @override
      * @param {!Event} event
      * @param {!WebInspector.ContextMenu} contextMenu
-     * @param {!Object} target
+     * @param {!Object} object
      */
-    appendApplicableItems: function(event, contextMenu, target)
+    appendApplicableItems: function(event, contextMenu, object)
     {
-        WebInspector.ElementsPanel.instance().appendApplicableItems(event, contextMenu, target);
+        if (!(object instanceof WebInspector.RemoteObject && (/** @type {!WebInspector.RemoteObject} */ (object)).isNode())
+            && !(object instanceof WebInspector.DOMNode)
+            && !(object instanceof WebInspector.DeferredDOMNode)) {
+            return;
+        }
+
+        // Add debbuging-related actions
+        if (object instanceof WebInspector.DOMNode) {
+            contextMenu.appendSeparator();
+            WebInspector.domBreakpointsSidebarPane.populateNodeContextMenu(object, contextMenu, true);
+        }
+
+        // Skip adding "Reveal..." menu item for our own tree outline.
+        if (WebInspector.ElementsPanel.instance().element.isAncestor(/** @type {!Node} */ (event.target)))
+            return;
+        var commandCallback = WebInspector.Revealer.reveal.bind(WebInspector.Revealer, object);
+        contextMenu.appendItem(WebInspector.UIString.capitalize("Reveal in Elements ^panel"), commandCallback);
     }
 }
 
 /**
  * @constructor
  * @implements {WebInspector.Revealer}
  */
 WebInspector.ElementsPanel.DOMNodeRevealer = function()
 {
 }
@@ skipping 92 matching lines @@
 
 WebInspector.ElementsActionDelegate.prototype = {
     /**
      * @override
      * @param {!WebInspector.Context} context
      * @param {string} actionId
      * @return {boolean}
      */
     handleAction: function(context, actionId)
     {
+        var node = WebInspector.context.flavor(WebInspector.DOMNode);
+        if (!node)
+            return true;
+        var treeOutline = WebInspector.ElementsTreeOutline.forDOMModel(node.domModel());
+        if (!treeOutline)
+            return true;
+
         switch (actionId) {
         case "elements.hide-element":
-            WebInspector.ElementsPanel.instance()._toggleHideElement();
+            treeOutline.toggleHideElement(node);
             return true;
         case "elements.edit-as-html":
-            WebInspector.ElementsPanel.instance()._toggleEditAsHTML();
+            treeOutline.toggleEditAsHTML(node);
             return true;
         }
         return false;
     }
 }
 
 /**
  * @constructor
  * @implements {WebInspector.DOMPresentationUtils.MarkerDecorator}
  */
 WebInspector.ElementsPanel.PseudoStateMarkerDecorator = function()
 {
 }
 
 WebInspector.ElementsPanel.PseudoStateMarkerDecorator.prototype = {
     /**
      * @override
      * @param {!WebInspector.DOMNode} node
      * @return {?{title: string, color: string}}
      */
     decorate: function(node)
     {
         return { color: "orange", title: WebInspector.UIString("Element state: %s", ":" + WebInspector.CSSModel.fromNode(node).pseudoState(node).join(", :")) };
     }
 }