Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(50)

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: third_party/WebKit/LayoutTests/inspector/sources/debugger-breakpoints/dom-breakpoints.html

Issue 2191183003: DevTools: extract model from DOMBreakpointsSidebarPane (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Address CL feedback from PS6 Created 4 years, 4 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
« no previous file with comments | « third_party/WebKit/LayoutTests/http/tests/inspector/debugger-test.js ('k') | third_party/WebKit/LayoutTests/inspector/sources/debugger-breakpoints/dom-breakpoints-editing-dom-from-inspector.html » ('j') | third_party/WebKit/Source/devtools/front_end/elements/module.json » ('J')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 <html> 1 <html>
2 <head> 2 <head>
3 <script src="../../../http/tests/inspector/inspector-test.js"></script> 3 <script src="../../../http/tests/inspector/inspector-test.js"></script>
4 <script src="../../../http/tests/inspector/elements-test.js"></script> 4 <script src="../../../http/tests/inspector/elements-test.js"></script>
5 <script src="../../../http/tests/inspector/debugger-test.js"></script> 5 <script src="../../../http/tests/inspector/debugger-test.js"></script>
6 <script> 6 <script>
7 7
8 function appendElement(parentId, childId) 8 function appendElement(parentId, childId)
9 { 9 {
10 var child = document.createElement("div"); 10 var child = document.createElement("div");
(...skipping 63 matching lines...) Expand 10 before | Expand all | Expand 10 after
74 74
75 function appendElementToOpenShadowRoot(childId) 75 function appendElementToOpenShadowRoot(childId)
76 { 76 {
77 var child = document.createElement("div"); 77 var child = document.createElement("div");
78 child.id = childId; 78 child.id = childId;
79 authorShadowRoot().appendChild(child); 79 authorShadowRoot().appendChild(child);
80 } 80 }
81 81
82 function test() 82 function test()
83 { 83 {
84
85 var pane = WebInspector.domBreakpointsSidebarPane;
86 var rootElement; 84 var rootElement;
87 var outerElement; 85 var outerElement;
88 var authorShadowRoot; 86 var authorShadowRoot;
89 InspectorTest.runDebuggerTestSuite([ 87 InspectorTest.runDebuggerTestSuite([
90 function testInsertChild(next) 88 function testInsertChild(next)
91 { 89 {
92 InspectorTest.addResult("Test that 'Subtree Modified' breakpoint is hit when appending a child."); 90 InspectorTest.addResult("Test that 'Subtree Modified' breakpoint is hit when appending a child.");
93 InspectorTest.nodeWithId("rootElement", step2); 91 InspectorTest.nodeWithId("rootElement", step2);
94 92
95 function step2(node) 93 function step2(node)
96 { 94 {
97 rootElement = node; 95 rootElement = node;
98 pane._setBreakpoint(node, pane._breakpointTypes.SubtreeModified, true); 96 WebInspector.domBreakpointManager.setBreakpoint(node, WebInspect or.DOMBreakpointsSidebarPane.BreakpointTypes.SubtreeModified, true);
99 InspectorTest.addResult("Set 'Subtree Modified' DOM breakpoint o n rootElement."); 97 InspectorTest.addResult("Set 'Subtree Modified' DOM breakpoint o n rootElement.");
100 InspectorTest.evaluateInPageWithTimeout("appendElement('rootElem ent', 'childElement')"); 98 InspectorTest.evaluateInPageWithTimeout("appendElement('rootElem ent', 'childElement')");
101 InspectorTest.addResult("Append childElement to rootElement."); 99 InspectorTest.addResult("Append childElement to rootElement.");
102 InspectorTest.waitUntilPausedAndDumpStackAndResume(next); 100 InspectorTest.waitUntilPausedAndDumpStackAndResume(next);
103 } 101 }
104 }, 102 },
105 103
104 function testBreakpointToggle(next)
105 {
106 InspectorTest.addResult("Test that 'Attribute Modified' breakpoint t oggles properly");
107 InspectorTest.nodeWithId("rootElement", step2);
108 var element;
109
110 function step2(node)
111 {
112 rootElement = node;
113 InspectorTest.addResult("Set 'Attribute Modified' DOM breakpoint on rootElement.");
114 WebInspector.domBreakpointManager.setBreakpoint(node, WebInspect or.DOMBreakpointsSidebarPane.BreakpointTypes.AttributeModified, true);
115 var pane = InspectorTest.domBreakpointsSidebarPane();
116 var elementId = pane._createBreakpointId(node.id, WebInspector.D OMBreakpointsSidebarPane.BreakpointTypes.AttributeModified);
117 element = pane._breakpointElements.get(elementId);
118 InspectorTest.addResult("Uncheck 'Attribute Modified' DOM breakp oint on rootElement.");
119 element._checkboxElement.click();
120 InspectorTest.evaluateInPagePromise("modifyAttribute('rootElemen t', 'data-test-breakpoint-disabled', 'foo')").then(step3);
121 InspectorTest.addResult("Modify attribute for rootElement.");
122 }
123
124 function step3()
125 {
126 InspectorTest.addResult("Test that 'Attribute Modified' breakpoi nt is not hit when disabled");
127 InspectorTest.assertNotPaused();
128 InspectorTest.addResult("Check 'Attribute Modified' DOM breakpoi nt on rootElement.");
129 element._checkboxElement.click();
130 InspectorTest.evaluateInPageWithTimeout("modifyAttribute('rootEl ement', 'data-test-breakpoint-disabled', 'bar')");
131 InspectorTest.addResult("Modify attribute for rootElement.");
132 InspectorTest.addResult("Test that 'Attribute Modified' breakpoi nt is hit when re-enabled");
133 InspectorTest.waitUntilPausedAndDumpStackAndResume(next);
134 }
135 },
136
106 function testInsertGrandchild(next) 137 function testInsertGrandchild(next)
107 { 138 {
108 InspectorTest.addResult("Test that 'Subtree Modified' breakpoint is hit when appending a grandchild."); 139 InspectorTest.addResult("Test that 'Subtree Modified' breakpoint is hit when appending a grandchild.");
109 InspectorTest.evaluateInPageWithTimeout("appendElement('childElement ', 'grandchildElement')"); 140 InspectorTest.evaluateInPageWithTimeout("appendElement('childElement ', 'grandchildElement')");
110 InspectorTest.addResult("Append grandchildElement to childElement.") ; 141 InspectorTest.addResult("Append grandchildElement to childElement.") ;
111 InspectorTest.waitUntilPausedAndDumpStackAndResume(next); 142 InspectorTest.waitUntilPausedAndDumpStackAndResume(next);
112 }, 143 },
113 144
114 function testRemoveChild(next) 145 function testRemoveChild(next)
115 { 146 {
(...skipping 13 matching lines...) Expand all
129 function step2() 160 function step2()
130 { 161 {
131 InspectorTest.waitUntilPaused(step3); 162 InspectorTest.waitUntilPaused(step3);
132 InspectorTest.evaluateInPageWithTimeout("breakDebugger()"); 163 InspectorTest.evaluateInPageWithTimeout("breakDebugger()");
133 InspectorTest.addResult("Call breakDebugger, expect it to show u p in next stack trace."); 164 InspectorTest.addResult("Call breakDebugger, expect it to show u p in next stack trace.");
134 } 165 }
135 166
136 function step3(frames) 167 function step3(frames)
137 { 168 {
138 InspectorTest.captureStackTrace(frames); 169 InspectorTest.captureStackTrace(frames);
139 pane._removeBreakpoint(rootElement, pane._breakpointTypes.Subtre eModified); 170 WebInspector.domBreakpointManager.removeBreakpoint(rootElement, WebInspector.DOMBreakpointsSidebarPane.BreakpointTypes.SubtreeModified);
140 InspectorTest.resumeExecution(next); 171 InspectorTest.resumeExecution(next);
141 } 172 }
142 }, 173 },
143 174
144 function testModifyAttribute(next) 175 function testModifyAttribute(next)
145 { 176 {
146 InspectorTest.addResult("Test that 'Attribute Modified' breakpoint i s hit when modifying attribute."); 177 InspectorTest.addResult("Test that 'Attribute Modified' breakpoint i s hit when modifying attribute.");
147 pane._setBreakpoint(rootElement, pane._breakpointTypes.AttributeModi fied, true); 178 WebInspector.domBreakpointManager.setBreakpoint(rootElement, WebInsp ector.DOMBreakpointsSidebarPane.BreakpointTypes.AttributeModified, true);
148 InspectorTest.addResult("Set 'Attribute Modified' DOM breakpoint on rootElement."); 179 InspectorTest.addResult("Set 'Attribute Modified' DOM breakpoint on rootElement.");
149 InspectorTest.evaluateInPageWithTimeout("modifyAttribute('rootElemen t', 'data-test', 'foo')"); 180 InspectorTest.evaluateInPageWithTimeout("modifyAttribute('rootElemen t', 'data-test', 'foo')");
150 InspectorTest.addResult("Modify rootElement data-test attribute."); 181 InspectorTest.addResult("Modify rootElement data-test attribute.");
151 InspectorTest.waitUntilPausedAndDumpStackAndResume(step2); 182 InspectorTest.waitUntilPausedAndDumpStackAndResume(step2);
152 183
153 function step2(callFrames) 184 function step2(callFrames)
154 { 185 {
155 pane._removeBreakpoint(rootElement, pane._breakpointTypes.Attrib uteModified); 186 WebInspector.domBreakpointManager.removeBreakpoint(rootElement, WebInspector.DOMBreakpointsSidebarPane.BreakpointTypes.AttributeModified);
156 next(); 187 InspectorTest.addResult("Ensure the breakpoint is actually remov ed.");
188 InspectorTest.evaluateInPagePromise("modifyAttribute('rootElemen t', 'data-test', 'foo')").then(step3);
189 InspectorTest.addResult("Modify rootElement data-test attribute. ");
190 }
191
192 function step3()
193 {
194 InspectorTest.waitUntilResumed(next);
157 } 195 }
158 }, 196 },
159 197
160 function testModifyAttrNode(next) 198 function testModifyAttrNode(next)
161 { 199 {
162 InspectorTest.addResult("Test that 'Attribute Modified' breakpoint i s hit when modifying Attr node."); 200 InspectorTest.addResult("Test that 'Attribute Modified' breakpoint i s hit when modifying Attr node.");
163 pane._setBreakpoint(rootElement, pane._breakpointTypes.AttributeModi fied, true); 201 WebInspector.domBreakpointManager.setBreakpoint(rootElement, WebInsp ector.DOMBreakpointsSidebarPane.BreakpointTypes.AttributeModified, true);
164 InspectorTest.addResult("Set 'Attribute Modified' DOM breakpoint on rootElement."); 202 InspectorTest.addResult("Set 'Attribute Modified' DOM breakpoint on rootElement.");
165 InspectorTest.evaluateInPageWithTimeout("modifyAttrNode('rootElement ', 'data-test', 'bar')"); 203 InspectorTest.evaluateInPageWithTimeout("modifyAttrNode('rootElement ', 'data-test', 'bar')");
166 InspectorTest.addResult("Modify rootElement data-test attribute."); 204 InspectorTest.addResult("Modify rootElement data-test attribute.");
167 InspectorTest.waitUntilPausedAndDumpStackAndResume(step2); 205 InspectorTest.waitUntilPausedAndDumpStackAndResume(step2);
168 206
169 function step2(callFrames) 207 function step2(callFrames)
170 { 208 {
171 pane._removeBreakpoint(rootElement, pane._breakpointTypes.Attrib uteModified); 209 WebInspector.domBreakpointManager.removeBreakpoint(rootElement, WebInspector.DOMBreakpointsSidebarPane.BreakpointTypes.AttributeModified);
172 next(); 210 next();
173 } 211 }
174 }, 212 },
175 213
176 function testSetAttrNode(next) 214 function testSetAttrNode(next)
177 { 215 {
178 InspectorTest.addResult("Test that 'Attribute Modified' breakpoint i s hit when adding a new Attr node."); 216 InspectorTest.addResult("Test that 'Attribute Modified' breakpoint i s hit when adding a new Attr node.");
179 pane._setBreakpoint(rootElement, pane._breakpointTypes.AttributeModi fied, true); 217 WebInspector.domBreakpointManager.setBreakpoint(rootElement, WebInsp ector.DOMBreakpointsSidebarPane.BreakpointTypes.AttributeModified, true);
180 InspectorTest.addResult("Set 'Attribute Modified' DOM breakpoint on rootElement."); 218 InspectorTest.addResult("Set 'Attribute Modified' DOM breakpoint on rootElement.");
181 InspectorTest.evaluateInPageWithTimeout("setAttrNode('rootElement', 'data-foo', 'bar')"); 219 InspectorTest.evaluateInPageWithTimeout("setAttrNode('rootElement', 'data-foo', 'bar')");
182 InspectorTest.addResult("Modify rootElement data-foo attribute."); 220 InspectorTest.addResult("Modify rootElement data-foo attribute.");
183 InspectorTest.waitUntilPausedAndDumpStackAndResume(step2); 221 InspectorTest.waitUntilPausedAndDumpStackAndResume(step2);
184 222
185 function step2(callFrames) 223 function step2(callFrames)
186 { 224 {
187 pane._removeBreakpoint(rootElement, pane._breakpointTypes.Attrib uteModified); 225 WebInspector.domBreakpointManager.removeBreakpoint(rootElement, WebInspector.DOMBreakpointsSidebarPane.BreakpointTypes.AttributeModified);
188 next(); 226 next();
189 } 227 }
190 }, 228 },
191 229
192 function testModifyStyleAttribute(next) 230 function testModifyStyleAttribute(next)
193 { 231 {
194 InspectorTest.addResult("Test that 'Attribute Modified' breakpoint i s hit when modifying style attribute."); 232 InspectorTest.addResult("Test that 'Attribute Modified' breakpoint i s hit when modifying style attribute.");
195 pane._setBreakpoint(rootElement, pane._breakpointTypes.AttributeModi fied, true); 233 WebInspector.domBreakpointManager.setBreakpoint(rootElement, WebInsp ector.DOMBreakpointsSidebarPane.BreakpointTypes.AttributeModified, true);
196 InspectorTest.addResult("Set 'Attribute Modified' DOM breakpoint on rootElement."); 234 InspectorTest.addResult("Set 'Attribute Modified' DOM breakpoint on rootElement.");
197 InspectorTest.evaluateInPageWithTimeout("modifyStyleAttribute('rootE lement', 'color', 'green')"); 235 InspectorTest.evaluateInPageWithTimeout("modifyStyleAttribute('rootE lement', 'color', 'green')");
198 InspectorTest.addResult("Modify rootElement style.color attribute.") ; 236 InspectorTest.addResult("Modify rootElement style.color attribute.") ;
199 InspectorTest.waitUntilPausedAndDumpStackAndResume(step2); 237 InspectorTest.waitUntilPausedAndDumpStackAndResume(step2);
200 238
201 function step2(callFrames) 239 function step2(callFrames)
202 { 240 {
203 pane._removeBreakpoint(rootElement, pane._breakpointTypes.Attrib uteModified); 241 WebInspector.domBreakpointManager.removeBreakpoint(rootElement, WebInspector.DOMBreakpointsSidebarPane.BreakpointTypes.AttributeModified);
204 next(); 242 next();
205 } 243 }
206 }, 244 },
207 245
208 function testRemoveNode(next) 246 function testRemoveNode(next)
209 { 247 {
210 InspectorTest.addResult("Test that 'Node Removed' breakpoint is hit when removing a node."); 248 InspectorTest.addResult("Test that 'Node Removed' breakpoint is hit when removing a node.");
211 InspectorTest.nodeWithId("elementToRemove", step2); 249 InspectorTest.nodeWithId("elementToRemove", step2);
212 250
213 function step2(node) 251 function step2(node)
214 { 252 {
215 pane._setBreakpoint(node, pane._breakpointTypes.NodeRemoved, tru e); 253 WebInspector.domBreakpointManager.setBreakpoint(node, WebInspect or.DOMBreakpointsSidebarPane.BreakpointTypes.NodeRemoved, true);
216 InspectorTest.addResult("Set 'Node Removed' DOM breakpoint on el ementToRemove."); 254 InspectorTest.addResult("Set 'Node Removed' DOM breakpoint on el ementToRemove.");
217 InspectorTest.evaluateInPageWithTimeout("removeElement('elementT oRemove')"); 255 InspectorTest.evaluateInPageWithTimeout("removeElement('elementT oRemove')");
218 InspectorTest.addResult("Remove elementToRemove."); 256 InspectorTest.addResult("Remove elementToRemove.");
219 InspectorTest.waitUntilPausedAndDumpStackAndResume(next); 257 InspectorTest.waitUntilPausedAndDumpStackAndResume(next);
220 } 258 }
221 }, 259 },
222 260
223 function testReload(next) 261 function testReload(next)
224 { 262 {
225 InspectorTest.addResult("Test that DOM breakpoints are persisted bet ween page reloads."); 263 InspectorTest.addResult("Test that DOM breakpoints are persisted bet ween page reloads.");
226 InspectorTest.nodeWithId("rootElement", step2); 264 InspectorTest.nodeWithId("rootElement", step2);
227 265
228 function step2(node) 266 function step2(node)
229 { 267 {
230 pane._setBreakpoint(node, pane._breakpointTypes.SubtreeModified, true); 268 WebInspector.domBreakpointManager.setBreakpoint(node, WebInspect or.DOMBreakpointsSidebarPane.BreakpointTypes.SubtreeModified, true);
231 pane._saveBreakpoints();
232 InspectorTest.addResult("Set 'Subtree Modified' DOM breakpoint o n rootElement."); 269 InspectorTest.addResult("Set 'Subtree Modified' DOM breakpoint o n rootElement.");
233 InspectorTest.reloadPage(step3); 270 InspectorTest.reloadPage(step3);
234 } 271 }
235 272
236 function step3() 273 function step3()
237 { 274 {
238 InspectorTest.expandElementsTree(step4); 275 InspectorTest.expandElementsTree(step4);
239 } 276 }
240 277
241 function step4() 278 function step4()
242 { 279 {
243 InspectorTest.evaluateInPageWithTimeout("appendElement('rootElem ent', 'childElement')"); 280 InspectorTest.evaluateInPageWithTimeout("appendElement('rootElem ent', 'childElement')");
244 InspectorTest.addResult("Append childElement to rootElement."); 281 InspectorTest.addResult("Append childElement to rootElement.");
245 InspectorTest.waitUntilPausedAndDumpStackAndResume(next); 282 InspectorTest.waitUntilPausedAndDumpStackAndResume(next);
246 } 283 }
247 }, 284 },
248 285
249 function testInsertChildIntoAuthorShadowTree(next) 286 function testInsertChildIntoAuthorShadowTree(next)
250 { 287 {
251 InspectorTest.shadowRootByHostId("hostElement", callback); 288 InspectorTest.shadowRootByHostId("hostElement", callback);
252 289
253 function callback(node) 290 function callback(node)
254 { 291 {
255 authorShadowRoot = node; 292 authorShadowRoot = node;
256 InspectorTest.addResult("Test that 'Subtree Modified' breakpoint on author shadow root is hit when appending a child."); 293 InspectorTest.addResult("Test that 'Subtree Modified' breakpoint on author shadow root is hit when appending a child.");
257 pane._setBreakpoint(authorShadowRoot, pane._breakpointTypes.Subt reeModified, true); 294 WebInspector.domBreakpointManager.setBreakpoint(authorShadowRoot , WebInspector.DOMBreakpointsSidebarPane.BreakpointTypes.SubtreeModified, true);
258 InspectorTest.addResult("Set 'Subtree Modified' DOM breakpoint o n author shadow root."); 295 InspectorTest.addResult("Set 'Subtree Modified' DOM breakpoint o n author shadow root.");
259 InspectorTest.evaluateInPageWithTimeout("appendElementToOpenShad owRoot('childElement')"); 296 InspectorTest.evaluateInPageWithTimeout("appendElementToOpenShad owRoot('childElement')");
260 InspectorTest.addResult("Append childElement to author shadow ro ot."); 297 InspectorTest.addResult("Append childElement to author shadow ro ot.");
261 InspectorTest.waitUntilPausedAndDumpStackAndResume(next); 298 InspectorTest.waitUntilPausedAndDumpStackAndResume(next);
262 } 299 }
263 }, 300 },
264 301
265 function testReloadWithShadowElementBreakpoint(next) 302 function testReloadWithShadowElementBreakpoint(next)
266 { 303 {
267 InspectorTest.nodeWithId("outerElement", step1); 304 InspectorTest.nodeWithId("outerElement", step1);
268 305
269 function step1(node) 306 function step1(node)
270 { 307 {
271 outerElement = node; 308 outerElement = node;
272 309
273 InspectorTest.addResult("Test that shadow DOM breakpoints are pe rsisted between page reloads."); 310 InspectorTest.addResult("Test that shadow DOM breakpoints are pe rsisted between page reloads.");
274 pane._setBreakpoint(outerElement, pane._breakpointTypes.SubtreeM odified, true); 311 WebInspector.domBreakpointManager.setBreakpoint(outerElement, We bInspector.DOMBreakpointsSidebarPane.BreakpointTypes.SubtreeModified, true);
275 pane._saveBreakpoints();
276 InspectorTest.addResult("Set 'Subtree Modified' DOM breakpoint o n outerElement."); 312 InspectorTest.addResult("Set 'Subtree Modified' DOM breakpoint o n outerElement.");
277 InspectorTest.reloadPage(step2); 313 InspectorTest.reloadPage(step2);
278 } 314 }
279 315
280 function step2() 316 function step2()
281 { 317 {
282 InspectorTest.expandElementsTree(step3); 318 InspectorTest.expandElementsTree(step3);
283 } 319 }
284 320
285 function step3() 321 function step3()
(...skipping 20 matching lines...) Expand all
306 </div> 342 </div>
307 343
308 <div id="hostElement"></div> 344 <div id="hostElement"></div>
309 <script> 345 <script>
310 var root = document.getElementById("hostElement").createShadowRoot(); 346 var root = document.getElementById("hostElement").createShadowRoot();
311 root.innerHTML = "<div id='outerElement' style='red'><input id='input'/></div>"; 347 root.innerHTML = "<div id='outerElement' style='red'><input id='input'/></div>";
312 </script> 348 </script>
313 349
314 </body> 350 </body>
315 </html> 351 </html>
OLDNEW
« no previous file with comments | « third_party/WebKit/LayoutTests/http/tests/inspector/debugger-test.js ('k') | third_party/WebKit/LayoutTests/inspector/sources/debugger-breakpoints/dom-breakpoints-editing-dom-from-inspector.html » ('j') | third_party/WebKit/Source/devtools/front_end/elements/module.json » ('J')

Powered by Google App Engine
This is Rietveld 408576698