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

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 13 matching lines @@
  * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
  * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
  * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
  * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
  * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
 
 /**
  * @constructor
  * @extends {TreeOutline}
+ * @param {!WebInspector.Target} target
  * @param {boolean=} omitRootDOMNode
  * @param {boolean=} selectEnabled
  * @param {function(!WebInspector.ContextMenu, !WebInspector.DOMNode)=} contextMenuCallback
- * @param {function(!DOMAgent.NodeId, string, boolean)=} setPseudoClassCallback
+ * @param {function(!WebInspector.DOMNode, string, boolean)=} setPseudoClassCallback
  */
-WebInspector.ElementsTreeOutline = function(omitRootDOMNode, selectEnabled, contextMenuCallback, setPseudoClassCallback)
+WebInspector.ElementsTreeOutline = function(target, omitRootDOMNode, selectEnabled, contextMenuCallback, setPseudoClassCallback)
 {
+    this._target = target;
+    this._domModel = target.domModel;
     this.element = document.createElement("ol");
     this.element.className = "elements-tree-outline";
     this.element.addEventListener("mousedown", this._onmousedown.bind(this), false);
     this.element.addEventListener("mousemove", this._onmousemove.bind(this), false);
     this.element.addEventListener("mouseout", this._onmouseout.bind(this), false);
     this.element.addEventListener("dragstart", this._ondragstart.bind(this), false);
     this.element.addEventListener("dragover", this._ondragover.bind(this), false);
     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);
@@ skipping 42 matching lines @@
     "\u200f": "rlm",
     "\u202a": "#8234", // LRE
     "\u202b": "#8235", // RLE
     "\u202c": "#8236", // PDF
     "\u202d": "#8237", // LRO
     "\u202e": "#8238" // RLO
 }
 
 WebInspector.ElementsTreeOutline.prototype = {
     /**
+     * @return {!WebInspector.Target}
+     */
+    target: function()
+    {
+        return this._target;
+    },
+
+    /**
+     * @return {!WebInspector.DOMModel}
+     */
+    domModel: function()
+    {
+        return this._domModel;
+    },
+
+    /**
      * @param {number} width
      */
     setVisibleWidth: function(width)
     {
         this._visibleWidth = width;
         if (this._multilineEditing)
             this._multilineEditing.setWidth(this._visibleWidth);
     },
 
     _createNodeDecorators: function()
     {
         this._nodeDecorators = [];
         this._nodeDecorators.push(new WebInspector.ElementsTreeOutline.PseudoStateDecorator());
     },
 
-    wireToDomAgent: function()
+    wireToDOMModel: function()
     {
-        this._elementsTreeUpdater = new WebInspector.ElementsTreeUpdater(this);
+        this._elementsTreeUpdater = new WebInspector.ElementsTreeUpdater(this._target.domModel, this);
     },
 
     /**
      * @param {boolean} visible
      */
     setVisible: function(visible)
     {
         this._visible = visible;
         if (!this._visible)
             return;
@@ skipping 259 matching lines @@
         if (this._previousHoveredElement) {
             this._previousHoveredElement.hovered = false;
             delete this._previousHoveredElement;
         }
 
         if (element) {
             element.hovered = true;
             this._previousHoveredElement = element;
         }
 
-        WebInspector.domModel.highlightDOMNode(element && element._node ? element._node.id : 0);
+        this._domModel.highlightDOMNode(element && element._node ? element._node.id : 0);
     },
 
     _onmouseout: function(event)
     {
         var nodeUnderMouse = document.elementFromPoint(event.pageX, event.pageY);
         if (nodeUnderMouse && nodeUnderMouse.isDescendant(this.element))
             return;
 
         if (this._previousHoveredElement) {
             this._previousHoveredElement.hovered = false;
             delete this._previousHoveredElement;
         }
 
-        WebInspector.domModel.hideDOMNodeHighlight();
+        this._domModel.hideDOMNodeHighlight();
     },
 
     _ondragstart: function(event)
     {
         if (!window.getSelection().isCollapsed)
             return false;
         if (event.target.nodeName === "A")
             return false;
 
         var treeElement = this._treeElementFromEvent(event);
         if (!treeElement)
             return false;
 
         if (!this._isValidDragSourceOrTarget(treeElement))
             return false;
 
         if (treeElement._node.nodeName() === "BODY" || treeElement._node.nodeName() === "HEAD")
             return false;
 
         event.dataTransfer.setData("text/plain", treeElement.listItemElement.textContent);
         event.dataTransfer.effectAllowed = "copyMove";
         this._treeElementBeingDragged = treeElement;
 
-        WebInspector.domModel.hideDOMNodeHighlight();
+        this._domModel.hideDOMNodeHighlight();
 
         return true;
     },
 
     _ondragover: function(event)
     {
         if (!this._treeElementBeingDragged)
             return false;
 
         var treeElement = this._treeElementFromEvent(event);
@@ skipping 210 matching lines @@
      * @param {!DOMAgent.NodeId=} nodeId
      */
     _selectNodeAfterEdit: function(wasExpanded, error, nodeId)
     {
         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 = nodeId ? WebInspector.domModel.nodeForId(nodeId) : null;
+        var newNode = nodeId ? this._domModel.nodeForId(nodeId) : null;
         if (!newNode)
             return;
 
         this.selectDOMNode(newNode, true);
 
         var newTreeItem = this.findTreeElement(newNode);
         if (wasExpanded) {
             if (newTreeItem)
                 newTreeItem.expand();
         }
@@ skipping 84 matching lines @@
 
 /**
  * @constructor
  * @implements {WebInspector.ElementsTreeOutline.ElementDecorator}
  */
 WebInspector.ElementsTreeOutline.PseudoStateDecorator = function()
 {
     WebInspector.ElementsTreeOutline.ElementDecorator.call(this);
 }
 
-WebInspector.ElementsTreeOutline.PseudoStateDecorator.PropertyName = "pseudoState";
-
 WebInspector.ElementsTreeOutline.PseudoStateDecorator.prototype = {
     /**
      * @param {!WebInspector.DOMNode} node
      * @return {?string}
      */
     decorate: function(node)
     {
         if (node.nodeType() !== Node.ELEMENT_NODE)
             return null;
-        var propertyValue = node.getUserProperty(WebInspector.ElementsTreeOutline.PseudoStateDecorator.PropertyName);
+        var propertyValue = node.getUserProperty(WebInspector.CSSStyleModel.PseudoStatePropertyName);
         if (!propertyValue)
             return null;
         return WebInspector.UIString("Element state: %s", ":" + propertyValue.join(", :"));
     },
 
     /**
      * @param {!WebInspector.DOMNode} node
      * @return {?string}
      */
     decorateAncestor: function(node)
     {
         if (node.nodeType() !== Node.ELEMENT_NODE)
             return null;
 
-        var descendantCount = node.descendantUserPropertyCount(WebInspector.ElementsTreeOutline.PseudoStateDecorator.PropertyName);
+        var descendantCount = node.descendantUserPropertyCount(WebInspector.CSSStyleModel.PseudoStatePropertyName);
         if (!descendantCount)
             return null;
         if (descendantCount === 1)
             return WebInspector.UIString("%d descendant with forced state", descendantCount);
         return WebInspector.UIString("%d descendants with forced state", descendantCount);
     }
 }
 
 /**
  * @constructor
@@ skipping 434 matching lines @@
     /**
      * @override
      * @param {boolean=} selectedByUser
      * @return {boolean}
      */
     onselect: function(selectedByUser)
     {
         this.treeOutline.suppressRevealAndSelect = true;
         this.treeOutline.selectDOMNode(this._node, selectedByUser);
         if (selectedByUser)
-            WebInspector.domModel.highlightDOMNode(this._node.id);
+            this.treeOutline._domModel.highlightDOMNode(this._node.id);
         this.updateSelection();
         this.treeOutline.suppressRevealAndSelect = false;
         return true;
     },
 
     /**
      * @override
      * @return {boolean}
      */
     ondelete: function()
@@ skipping 138 matching lines @@
         contextMenu.appendItem(WebInspector.UIString(WebInspector.useLowerCaseMenuTitles() ? "Scroll into view" : "Scroll into View"), this._scrollIntoView.bind(this)); 
     },
 
     _populateForcedPseudoStateItems: function(subMenu)
     {
         const pseudoClasses = ["active", "hover", "focus", "visited"];
         var node = this._node;
         var forcedPseudoState = (node ? node.getUserProperty("pseudoState") : null) || [];
         for (var i = 0; i < pseudoClasses.length; ++i) {
             var pseudoClassForced = forcedPseudoState.indexOf(pseudoClasses[i]) >= 0;
-            subMenu.appendCheckboxItem(":" + pseudoClasses[i], this.treeOutline._setPseudoClassCallback.bind(null, node.id, pseudoClasses[i], !pseudoClassForced), pseudoClassForced, false);
+            subMenu.appendCheckboxItem(":" + pseudoClasses[i], this.treeOutline._setPseudoClassCallback.bind(null, node, pseudoClasses[i], !pseudoClassForced), pseudoClassForced, false);
         }
     },
 
     _populateTextContextMenu: function(contextMenu, textNode)
     {
         contextMenu.appendItem(WebInspector.UIString(WebInspector.useLowerCaseMenuTitles() ? "Edit text" : "Edit Text"), this._startEditingTextNode.bind(this, textNode));
         this._populateNodeContextMenu(contextMenu);
     },
 
     _populateNodeContextMenu: function(contextMenu)
@@ skipping 1006 matching lines @@
     _updateHasChildren: function()
     {
         this.hasChildren = !this._elementCloseTag && !this._showInlineText() && this._visibleChildCount() > 0;
     },
 
     __proto__: TreeElement.prototype
 }
 
 /**
  * @constructor
+ * @param {!WebInspector.DOMModel} domModel
  * @param {!WebInspector.ElementsTreeOutline} treeOutline
  */
-WebInspector.ElementsTreeUpdater = function(treeOutline)
+WebInspector.ElementsTreeUpdater = function(domModel, treeOutline)
 {
-    WebInspector.domModel.addEventListener(WebInspector.DOMModel.Events.NodeInserted, this._nodeInserted, this);
-    WebInspector.domModel.addEventListener(WebInspector.DOMModel.Events.NodeRemoved, this._nodeRemoved, this);
-    WebInspector.domModel.addEventListener(WebInspector.DOMModel.Events.AttrModified, this._attributesUpdated, this);
-    WebInspector.domModel.addEventListener(WebInspector.DOMModel.Events.AttrRemoved, this._attributesUpdated, this);
-    WebInspector.domModel.addEventListener(WebInspector.DOMModel.Events.CharacterDataModified, this._characterDataModified, this);
-    WebInspector.domModel.addEventListener(WebInspector.DOMModel.Events.DocumentUpdated, this._documentUpdated, this);
-    WebInspector.domModel.addEventListener(WebInspector.DOMModel.Events.ChildNodeCountUpdated, this._childNodeCountUpdated, this);
+    domModel.addEventListener(WebInspector.DOMModel.Events.NodeInserted, this._nodeInserted, this);
+    domModel.addEventListener(WebInspector.DOMModel.Events.NodeRemoved, this._nodeRemoved, this);
+    domModel.addEventListener(WebInspector.DOMModel.Events.AttrModified, this._attributesUpdated, this);
+    domModel.addEventListener(WebInspector.DOMModel.Events.AttrRemoved, this._attributesUpdated, this);
+    domModel.addEventListener(WebInspector.DOMModel.Events.CharacterDataModified, this._characterDataModified, this);
+    domModel.addEventListener(WebInspector.DOMModel.Events.DocumentUpdated, this._documentUpdated, this);
+    domModel.addEventListener(WebInspector.DOMModel.Events.ChildNodeCountUpdated, this._childNodeCountUpdated, this);
 
+    this._domModel = domModel;
     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
@@ skipping 119 matching lines @@
         }
         this._recentlyModifiedNodes.clear();
 
         this._treeOutline._fireElementsTreeUpdated(nodes);
     },
 
     _reset: function()
     {
         this._treeOutline.rootDOMNode = null;
         this._treeOutline.selectDOMNode(null, false);
-        WebInspector.domModel.hideDOMNodeHighlight();
+        this._domModel.hideDOMNodeHighlight();
         this._recentlyModifiedNodes.clear();
     }
 }
 
 /**
  * @constructor
  * @param {boolean} isUpdated
  * @param {!WebInspector.DOMNode=} parent
  */
 WebInspector.ElementsTreeUpdater.UpdateEntry = function(isUpdated, parent)
@@ skipping 13 matching lines @@
 
 WebInspector.ElementsTreeOutline.Renderer.prototype = {
     /**
      * @param {!Object} object
      * @return {?Element}
      */
     render: function(object)
     {
         if (!(object instanceof WebInspector.DOMNode))
             return null;
-        var treeOutline = new WebInspector.ElementsTreeOutline(false, false);
-        treeOutline.rootDOMNode = /** @type {!WebInspector.DOMNode} */ (object);
+        var node = /** @type {!WebInspector.DOMNode} */ (object);
+        var treeOutline = new WebInspector.ElementsTreeOutline(node.target(), false, false);
+        treeOutline.rootDOMNode = node;
         treeOutline.element.classList.add("outline-disclosure");
         if (!treeOutline.children[0].hasChildren)
             treeOutline.element.classList.add("single-node");
         treeOutline.setVisible(true);
         treeOutline.element.treeElementForTest = treeOutline.children[0];
         return treeOutline.element;
     }
 }