DevTools: Allow DOM breakpoints on shadow DOM elements

R=pfeldman, vsevik
BUG=353916

Review URL: https://codereview.chromium.org/198713006

git-svn-id: svn://svn.chromium.org/blink/trunk@169851 bbb929c8-8fbe-4397-9dbb-9b2b20218538

third_party/WebKit/LayoutTests/http/tests/inspector/elements-test.js

@@ -52,6 +52,15 @@ InspectorTest.nodeWithId = function(idValue, callback)
     InspectorTest.findNode(nodeIdMatches, callback);
 }
 
+InspectorTest.shadowRootByHostId = function(idValue, callback)
+{
+    function shadowRootMatches(node)
+    {
+        return node.isShadowRoot() && node.parentNode.getAttribute("id") === idValue;
+    }
+    InspectorTest.findNode(shadowRootMatches, callback);
+}
+
 InspectorTest.nodeWithClass = function(classValue, callback)
 {
     function nodeClassMatches(node)

third_party/WebKit/LayoutTests/inspector/sources/debugger/dom-breakpoints-expected.txt

@@ -115,5 +115,28 @@ Call stack:
     1)  (:1)
 Paused on a "Subtree Modified" breakpoint set on div#rootElement, because a new child was added to that node.
 Script execution resumed.
+
+Running: testInsertChildIntoAuthorShadowTree
+Test that 'Subtree Modified' breakpoint on author shadow root is hit when appending a child.
+Set 'Subtree Modified' DOM breakpoint on author shadow root.
+Append childElement to author shadow root.
+Script execution paused.
+Call stack:
+    0) appendElementToAuthorShadowRoot (dom-breakpoints.html:79)
+    1)  (:1)
+Paused on a "Subtree Modified" breakpoint set on #shadow-root, because a new child was added to that node.
+Script execution resumed.
+
+Running: testReloadWithShadowElementBreakpoint
+Test that shadow DOM breakpoints are persisted between page reloads.
+Set 'Subtree Modified' DOM breakpoint on outerElement.
+Page reloaded.
+Append childElement to outerElement.
+Script execution paused.
+Call stack:
+    0) appendElementToAuthorShadowTree (dom-breakpoints.html:72)
+    1)  (:1)
+Paused on a "Subtree Modified" breakpoint set on div#outerElement, because a new child was added to that node.
+Script execution resumed.
 Debugger was disabled.
 

third_party/WebKit/LayoutTests/inspector/sources/debugger/dom-breakpoints.html

@@ -55,12 +55,38 @@ function breakDebugger()
     debugger;
 }
 
+function authorShadowRoot()
+{
+    return document.getElementById("hostElement").shadowRoot;
+}
+
+function authorShadowElement(id)
+{
+    return authorShadowRoot().getElementById(id);
+}
+
+function appendElementToAuthorShadowTree(parentId, childId)
+{
+    var child = document.createElement("div");
+    child.id = childId;
+    authorShadowElement(parentId).appendChild(child);
+}
+
+function appendElementToAuthorShadowRoot(childId)
+{
+    var child = document.createElement("div");
+    child.id = childId;
+    authorShadowRoot().appendChild(child);
+}
+
 function test()
 {
     WebInspector.inspectorView.showPanel("elements");
 
     var pane = WebInspector.domBreakpointsSidebarPane;
     var rootElement;
+    var outerElement;
+    var authorShadowRoot;
     InspectorTest.runDebuggerTestSuite([
         function testInsertChild(next)
         {
@@ -219,7 +245,52 @@ function test()
                 InspectorTest.addResult("Append childElement to rootElement.");
                 waitUntilPausedAndDumpStack(next);
             }
+        },
+
+        function testInsertChildIntoAuthorShadowTree(next)
+        {
+            InspectorTest.shadowRootByHostId("hostElement", callback);
+
+            function callback(node)
+            {
+                authorShadowRoot = node;
+                InspectorTest.addResult("Test that 'Subtree Modified' breakpoint on author shadow root is hit when appending a child.");
+                pane._setBreakpoint(authorShadowRoot, pane._breakpointTypes.SubtreeModified, true);
+                InspectorTest.addResult("Set 'Subtree Modified' DOM breakpoint on author shadow root.");
+                InspectorTest.evaluateInPageWithTimeout("appendElementToAuthorShadowRoot('childElement')");
+                InspectorTest.addResult("Append childElement to author shadow root.");
+                waitUntilPausedAndDumpStack(next);
+            }
+        },
+
+        function testReloadWithShadowElementBreakpoint(next)
+        {
+            InspectorTest.nodeWithId("outerElement", step1);
+
+            function step1(node)
+            {
+                outerElement = node;
+
+                InspectorTest.addResult("Test that shadow DOM breakpoints are persisted between page reloads.");
+                pane._setBreakpoint(outerElement, pane._breakpointTypes.SubtreeModified, true);
+                pane._saveBreakpoints();
+                InspectorTest.addResult("Set 'Subtree Modified' DOM breakpoint on outerElement.");
+                InspectorTest.reloadPage(step2);
+            }
+
+            function step2()
+            {
+                InspectorTest.expandElementsTree(step3);
+            }
+
+            function step3()
+            {
+                InspectorTest.evaluateInPageWithTimeout("appendElementToAuthorShadowTree('outerElement', 'childElement')");
+                InspectorTest.addResult("Append childElement to outerElement.");
+                waitUntilPausedAndDumpStack(next);
+            }
         }
+
     ]);
 
     function waitUntilPausedAndDumpStack(callback)
@@ -273,5 +344,11 @@ Tests DOM breakpoints. <a href="https://bugs.webkit.org/show_bug.cgi?id=42886">B
 <div id="elementToRemove"></div>
 </div>
 
+<div id="hostElement"></div>
+<script>
+var root = document.getElementById("hostElement").createShadowRoot();
+root.innerHTML = "<div id='outerElement' style='red'><input id='input'/></div>";
+</script>
+
 </body>
 </html>

third_party/WebKit/Source/devtools/front_end/ElementsTreeOutline.js

@@ -594,6 +594,8 @@ WebInspector.ElementsTreeOutline.prototype = {
             treeElement._populateNodeContextMenu(contextMenu, textNode);
         } else if (isPseudoElement) {
             treeElement._populateScrollIntoView(contextMenu);
+        } else if (treeElement._node.isShadowRoot()) {
+            this.treeOutline._populateContextMenu(contextMenu, treeElement._node);
         }
     },