Devtools: make DOM traversal utilities climb shadow tree.

Source/devtools/front_end/elements/ElementsPanel.js

Index: Source/devtools/front_end/elements/ElementsPanel.js
diff --git a/Source/devtools/front_end/elements/ElementsPanel.js b/Source/devtools/front_end/elements/ElementsPanel.js
index dfd905c2bc7977c367c3e5e8cfe457915e83985d..c5dc5804d5645150a498d4a93483d29ed291315f 100644
--- a/Source/devtools/front_end/elements/ElementsPanel.js
+++ b/Source/devtools/front_end/elements/ElementsPanel.js
@@ -51,8 +51,7 @@ WebInspector.ElementsPanel = function()
 
     this.contentElement = stackElement.createChild("div");
     this.contentElement.id = "elements-content";
-    this.contentElement.classList.add("outline-disclosure");
-    this.contentElement.classList.add("source-code");
+    this.contentElement.classList.add("outline-disclosure", "source-code");

[apavlov, 2014/10/13 15:10:09]

We could add these in the createChild() call just above

     if (!WebInspector.settings.domWordWrap.get())
         this.contentElement.classList.add("nowrap");
     WebInspector.settings.domWordWrap.addChangeListener(this._domWordWrapSettingChanged.bind(this));
@@ -692,7 +691,7 @@ WebInspector.ElementsPanel.prototype = {
 
     _mouseMovedInCrumbs: function(event)
     {
-        var nodeUnderMouse = document.elementFromPoint(event.pageX, event.pageY);
+        var nodeUnderMouse = event.elementFromPoint();
         var crumbElement = nodeUnderMouse.enclosingNodeOrSelfWithClass("crumb");
         var node = /** @type {?WebInspector.DOMNode} */ (crumbElement ? crumbElement.representedObject : null);
         if (node)
@@ -701,7 +700,7 @@ WebInspector.ElementsPanel.prototype = {
 
     _mouseMovedOutOfCrumbs: function(event)
     {
-        var nodeUnderMouse = document.elementFromPoint(event.pageX, event.pageY);
+        var nodeUnderMouse = event.elementFromPoint();
         if (nodeUnderMouse && nodeUnderMouse.isDescendant(this.crumbsElement))
             return;