DevTools: make ElementsTreeOutline shadow dom-based.

Source/devtools/front_end/elements/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 22 matching lines @@
  * @extends {TreeOutline}
  * @param {!WebInspector.Target} target
  * @param {boolean=} omitRootDOMNode
  * @param {boolean=} selectEnabled
  * @param {function(!WebInspector.DOMNode, string, boolean)=} setPseudoClassCallback
  */
 WebInspector.ElementsTreeOutline = function(target, omitRootDOMNode, selectEnabled, 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);
-    this.element.addEventListener("keydown", this._onkeydown.bind(this), false);
-    this.element.addEventListener("webkitAnimationEnd", this._onAnimationEnd.bind(this), false);
-    this.element.addEventListener("contextmenu", this._contextMenuEventFired.bind(this), false);
+    var element = document.createElement("div");
 
-    TreeOutline.call(this, this.element);
+    this._shadowRoot = element.createShadowRoot();
+    this._shadowRoot.appendChild(WebInspector.View.createStyleElement("elementsTreeOutline.css"));
+
+    var outlineDisclosureElement = this._shadowRoot.createChild("div", "component-root outline-disclosure source-code");
+    this._element = outlineDisclosureElement.createChild("ol", "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);
+    this._element.addEventListener("keydown", this._onkeydown.bind(this), false);
+    this._element.addEventListener("webkitAnimationEnd", this._onAnimationEnd.bind(this), false);
+    this._element.addEventListener("contextmenu", this._contextMenuEventFired.bind(this), false);
+
+    TreeOutline.call(this, this._element);
+    this.element = element;
 
     this._includeRootDOMNode = !omitRootDOMNode;
     this._selectEnabled = selectEnabled;
     /** @type {?WebInspector.DOMNode} */
     this._rootDOMNode = null;
     /** @type {?WebInspector.DOMNode} */
     this._selectedDOMNode = null;
     this._eventSupport = new WebInspector.Object();
 
     this._visible = false;
@@ skipping 46 matching lines @@
         event.target.classList.remove("elements-tree-element-pick-node-1");
         event.target.classList.remove("elements-tree-element-pick-node-2");
     },
 
     /**
      * @param {boolean} value
      */
     setPickNodeMode: function(value)
     {
         this._pickNodeMode = value;
-        this.element.classList.toggle("pick-node-mode", value);
+        this._element.classList.toggle("pick-node-mode", value);
     },
 
     /**
      * @param {!Element} element
      * @param {?WebInspector.DOMNode} node
      */
     _handlePickNode: function(element, node)
     {
         if (!this._pickNodeMode)
             return false;
@@ skipping 409 matching lines @@
             return;
 
         treeElement.revealAndSelect(omitFocus);
     },
 
     /**
      * @return {?TreeElement}
      */
     _treeElementFromEvent: function(event)
     {
-        var scrollContainer = this.element.parentElement;
+        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;
 
         var y = event.pageY;
 
         // Our list items have 1-pixel cracks between them vertically. We avoid
@@ skipping 37 matching lines @@
         }
 
         if (element && element._node)
             this._domModel.highlightDOMNodeWithConfig(element._node.id, { mode: "all", showInfo: !WebInspector.KeyboardShortcut.eventHasCtrlOrMeta(event) });
         else
             this._domModel.hideDOMNodeHighlight();
     },
 
     _onmouseout: function(event)
     {
-        var nodeUnderMouse = document.elementFromPoint(event.pageX, event.pageY);
-        if (nodeUnderMouse && nodeUnderMouse.isDescendant(this.element))
+        var nodeUnderMouse = event.elementFromPoint();
+        if (nodeUnderMouse && nodeUnderMouse.isDescendant(this._element))
             return;
 
         if (this._previousHoveredElement) {
             this._previousHoveredElement.hovered = false;
             delete this._previousHoveredElement;
         }
 
         this._domModel.hideDOMNodeHighlight();
     },
 
@@ skipping 142 matching lines @@
         }
     },
 
     _contextMenuEventFired: function(event)
     {
         var treeElement = this._treeElementFromEvent(event);
         if (!treeElement)
             return;
 
         var contextMenu = new WebInspector.ContextMenu(event);
-
         var isPseudoElement = !!treeElement._node.pseudoType();
         var isTag = treeElement._node.nodeType() === Node.ELEMENT_NODE && !isPseudoElement;
         var textNode = event.target.enclosingNodeOrSelfWithClass("webkit-html-text-node");
         if (textNode && textNode.classList.contains("bogus"))
             textNode = null;
         var commentNode = event.target.enclosingNodeOrSelfWithClass("webkit-html-comment");
         contextMenu.appendApplicableItems(event.target);
         if (textNode) {
             contextMenu.appendSeparator();
             treeElement._populateTextContextMenu(contextMenu, textNode);
@@ skipping 1153 matching lines @@
                 this._childrenListNode.style.removeProperty("display");
             // Unhide header items.
             var child = this.listItemElement.firstChild;
             while (child) {
                 child.style.removeProperty("display");
                 child = child.nextSibling;
             }
 
             this.treeOutline.childrenListElement.parentElement.removeEventListener("mousedown", consume, false);
             this.updateSelection();
-            this.treeOutline.element.focus();
+            this.treeOutline._element.focus();
         }
 
         var config = new WebInspector.InplaceEditor.Config(commit.bind(this), dispose.bind(this));
         config.setMultilineOptions(initialValue, { name: "xml", htmlMode: true }, "web-inspector-html", WebInspector.settings.domWordWrap.get(), true);
         self.runtime.instancePromise(WebInspector.InplaceEditor).then(markAsBeingEdited.bind(this)).done();
 
         /**
          * @param {!WebInspector.InplaceEditor} inplaceEditor
          * @this {WebInspector.ElementsTreeElement}
          */
@@ skipping 886 matching lines @@
         if (this._updateModifiedNodesTimeout) {
             clearTimeout(this._updateModifiedNodesTimeout);
             delete this._updateModifiedNodesTimeout;
         }
 
         var updatedNodes = this._recentlyModifiedNodes.values().concat(this._recentlyModifiedParentNodes.values());
         var hidePanelWhileUpdating = updatedNodes.length > 10;
         if (hidePanelWhileUpdating) {
             var treeOutlineContainerElement = this._treeOutline.element.parentNode;
             var originalScrollTop = treeOutlineContainerElement ? treeOutlineContainerElement.scrollTop : 0;
-            this._treeOutline.element.classList.add("hidden");
+            this._treeOutline._element.classList.add("hidden");
         }
 
         if (this._treeOutline._rootDOMNode && this._recentlyModifiedParentNodes.contains(this._treeOutline._rootDOMNode)) {
             // Document's children have changed, perform total update.
             this._treeOutline.update();
         } else {
             var nodes = this._recentlyModifiedNodes.values();
             for (var i = 0, size = nodes.length; i < size; ++i) {
                 var nodeItem = this._treeOutline.findTreeElement(nodes[i]);
                 if (nodeItem)
                     nodeItem.updateTitle();
             }
 
             var parentNodes = this._recentlyModifiedParentNodes.values();
             for (var i = 0, size = parentNodes.length; i < size; ++i) {
                 var parentNodeItem = this._treeOutline.findTreeElement(parentNodes[i]);
                 if (parentNodeItem && parentNodeItem.populated)
                     parentNodeItem.updateChildren();
             }
         }
 
         if (hidePanelWhileUpdating) {
-            this._treeOutline.element.classList.remove("hidden");
+            this._treeOutline._element.classList.remove("hidden");
             if (originalScrollTop)
                 treeOutlineContainerElement.scrollTop = originalScrollTop;
             this._treeOutline.updateSelection();
         }
         this._recentlyModifiedNodes.clear();
         this._recentlyModifiedParentNodes.clear();
         this._treeOutline._fireElementsTreeUpdated(updatedNodes);
     },
 
     _reset: function()
@@ skipping 43 matching lines @@
              * @param {?WebInspector.DOMNode} node
              */
             function onNodeResolved(node)
             {
                 if (!node) {
                     reject(new Error("Could not resolve node."));
                     return;
                 }
                 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._element.classList.add("single-node");
                 treeOutline.setVisible(true);
                 treeOutline.element.treeElementForTest = treeOutline.children[0];
                 resolve(treeOutline.element);
             }
         }
     }
 }