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

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: Nit 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/components/DOMBreakpointsSidebarPane.js » ('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 65 matching lines...) Expand 10 before | Expand all | Expand 10 after
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 84
85 var pane = WebInspector.domBreakpointsSidebarPane; 85 var pane = WebInspector.domBreakpointsSidebarPane;
86 var domDebuggerModel = WebInspector.domBreakpointsSidebarPane.domDebuggerMod el();
86 var rootElement; 87 var rootElement;
87 var outerElement; 88 var outerElement;
88 var authorShadowRoot; 89 var authorShadowRoot;
89 InspectorTest.runDebuggerTestSuite([ 90 InspectorTest.runDebuggerTestSuite([
90 function testInsertChild(next) 91 function testInsertChild(next)
91 { 92 {
92 InspectorTest.addResult("Test that 'Subtree Modified' breakpoint is hit when appending a child."); 93 InspectorTest.addResult("Test that 'Subtree Modified' breakpoint is hit when appending a child.");
93 InspectorTest.nodeWithId("rootElement", step2); 94 InspectorTest.nodeWithId("rootElement", step2);
94 95
95 function step2(node) 96 function step2(node)
96 { 97 {
97 rootElement = node; 98 rootElement = node;
98 pane._setBreakpoint(node, pane._breakpointTypes.SubtreeModified, true); 99 domDebuggerModel.setBreakpoint(node, pane._breakpointTypes.Subtr eeModified, true);
99 InspectorTest.addResult("Set 'Subtree Modified' DOM breakpoint o n rootElement."); 100 InspectorTest.addResult("Set 'Subtree Modified' DOM breakpoint o n rootElement.");
100 InspectorTest.evaluateInPageWithTimeout("appendElement('rootElem ent', 'childElement')"); 101 InspectorTest.evaluateInPageWithTimeout("appendElement('rootElem ent', 'childElement')");
101 InspectorTest.addResult("Append childElement to rootElement."); 102 InspectorTest.addResult("Append childElement to rootElement.");
102 InspectorTest.waitUntilPausedAndDumpStackAndResume(next); 103 InspectorTest.waitUntilPausedAndDumpStackAndResume(next);
103 } 104 }
104 }, 105 },
105 106
107 function testBreakpointToggle(next)
108 {
109 InspectorTest.addResult("Test that 'Attribute Modified' breakpoint t oggles properly");
110 InspectorTest.nodeWithId("rootElement", step2);
111 var element;
112
113 function step2(node)
114 {
115 rootElement = node;
116 InspectorTest.addResult("Set 'Attribute Modified' DOM breakpoint on rootElement.");
117 domDebuggerModel.setBreakpoint(node, pane._breakpointTypes.Attri buteModified, true);
118 var elementId = domDebuggerModel.createBreakpointId(node.id, pan e._breakpointTypes.AttributeModified);
119 element = pane._breakpointElements[elementId];
120 InspectorTest.addResult("Uncheck 'Attribute Modified' DOM breakp oint on rootElement.");
121 element._checkboxElement.click();
122 InspectorTest.evaluateInPagePromise("modifyAttribute('rootElemen t', 'data-test-breakpoint-disabled', 'foo')").then(step3);
123 InspectorTest.addResult("Modify attribute for rootElement.");
124 }
125
126 function step3()
127 {
128 InspectorTest.addResult("Test that 'Attribute Modified' breakpoi nt is not hit when disabled");
129 InspectorTest.assertNotPaused();
130 InspectorTest.addResult("Check 'Attribute Modified' DOM breakpoi nt on rootElement.");
131 element._checkboxElement.click();
132 InspectorTest.evaluateInPageWithTimeout("modifyAttribute('rootEl ement', 'data-test-breakpoint-disabled', 'bar')");
133 InspectorTest.addResult("Modify attribute for rootElement.");
134 InspectorTest.addResult("Test that 'Attribute Modified' breakpoi nt is hit when re-enabled");
135 InspectorTest.waitUntilPausedAndDumpStackAndResume(next);
136 }
137 },
138
106 function testInsertGrandchild(next) 139 function testInsertGrandchild(next)
107 { 140 {
108 InspectorTest.addResult("Test that 'Subtree Modified' breakpoint is hit when appending a grandchild."); 141 InspectorTest.addResult("Test that 'Subtree Modified' breakpoint is hit when appending a grandchild.");
109 InspectorTest.evaluateInPageWithTimeout("appendElement('childElement ', 'grandchildElement')"); 142 InspectorTest.evaluateInPageWithTimeout("appendElement('childElement ', 'grandchildElement')");
110 InspectorTest.addResult("Append grandchildElement to childElement.") ; 143 InspectorTest.addResult("Append grandchildElement to childElement.") ;
111 InspectorTest.waitUntilPausedAndDumpStackAndResume(next); 144 InspectorTest.waitUntilPausedAndDumpStackAndResume(next);
112 }, 145 },
113 146
114 function testRemoveChild(next) 147 function testRemoveChild(next)
115 { 148 {
(...skipping 13 matching lines...) Expand all
129 function step2() 162 function step2()
130 { 163 {
131 InspectorTest.waitUntilPaused(step3); 164 InspectorTest.waitUntilPaused(step3);
132 InspectorTest.evaluateInPageWithTimeout("breakDebugger()"); 165 InspectorTest.evaluateInPageWithTimeout("breakDebugger()");
133 InspectorTest.addResult("Call breakDebugger, expect it to show u p in next stack trace."); 166 InspectorTest.addResult("Call breakDebugger, expect it to show u p in next stack trace.");
134 } 167 }
135 168
136 function step3(frames) 169 function step3(frames)
137 { 170 {
138 InspectorTest.captureStackTrace(frames); 171 InspectorTest.captureStackTrace(frames);
139 pane._removeBreakpoint(rootElement, pane._breakpointTypes.Subtre eModified); 172 domDebuggerModel.removeBreakpoint(rootElement, pane._breakpointT ypes.SubtreeModified);
140 InspectorTest.resumeExecution(next); 173 InspectorTest.resumeExecution(next);
141 } 174 }
142 }, 175 },
143 176
144 function testModifyAttribute(next) 177 function testModifyAttribute(next)
145 { 178 {
146 InspectorTest.addResult("Test that 'Attribute Modified' breakpoint i s hit when modifying attribute."); 179 InspectorTest.addResult("Test that 'Attribute Modified' breakpoint i s hit when modifying attribute.");
147 pane._setBreakpoint(rootElement, pane._breakpointTypes.AttributeModi fied, true); 180 domDebuggerModel.setBreakpoint(rootElement, pane._breakpointTypes.At tributeModified, true);
148 InspectorTest.addResult("Set 'Attribute Modified' DOM breakpoint on rootElement."); 181 InspectorTest.addResult("Set 'Attribute Modified' DOM breakpoint on rootElement.");
149 InspectorTest.evaluateInPageWithTimeout("modifyAttribute('rootElemen t', 'data-test', 'foo')"); 182 InspectorTest.evaluateInPageWithTimeout("modifyAttribute('rootElemen t', 'data-test', 'foo')");
150 InspectorTest.addResult("Modify rootElement data-test attribute."); 183 InspectorTest.addResult("Modify rootElement data-test attribute.");
151 InspectorTest.waitUntilPausedAndDumpStackAndResume(step2); 184 InspectorTest.waitUntilPausedAndDumpStackAndResume(step2);
152 185
153 function step2(callFrames) 186 function step2(callFrames)
154 { 187 {
155 pane._removeBreakpoint(rootElement, pane._breakpointTypes.Attrib uteModified); 188 domDebuggerModel.removeBreakpoint(rootElement, pane._breakpointT ypes.AttributeModified);
156 next(); 189 InspectorTest.addResult("Ensure the breakpoint is actually remov ed.");
190 InspectorTest.evaluateInPagePromise("modifyAttribute('rootElemen t', 'data-test', 'foo')").then(step3);
191 InspectorTest.addResult("Modify rootElement data-test attribute. ");
192 }
193
194 function step3()
195 {
196 InspectorTest.waitUntilResumed(next);
157 } 197 }
158 }, 198 },
159 199
160 function testModifyAttrNode(next) 200 function testModifyAttrNode(next)
161 { 201 {
162 InspectorTest.addResult("Test that 'Attribute Modified' breakpoint i s hit when modifying Attr node."); 202 InspectorTest.addResult("Test that 'Attribute Modified' breakpoint i s hit when modifying Attr node.");
163 pane._setBreakpoint(rootElement, pane._breakpointTypes.AttributeModi fied, true); 203 domDebuggerModel.setBreakpoint(rootElement, pane._breakpointTypes.At tributeModified, true);
164 InspectorTest.addResult("Set 'Attribute Modified' DOM breakpoint on rootElement."); 204 InspectorTest.addResult("Set 'Attribute Modified' DOM breakpoint on rootElement.");
165 InspectorTest.evaluateInPageWithTimeout("modifyAttrNode('rootElement ', 'data-test', 'bar')"); 205 InspectorTest.evaluateInPageWithTimeout("modifyAttrNode('rootElement ', 'data-test', 'bar')");
166 InspectorTest.addResult("Modify rootElement data-test attribute."); 206 InspectorTest.addResult("Modify rootElement data-test attribute.");
167 InspectorTest.waitUntilPausedAndDumpStackAndResume(step2); 207 InspectorTest.waitUntilPausedAndDumpStackAndResume(step2);
168 208
169 function step2(callFrames) 209 function step2(callFrames)
170 { 210 {
171 pane._removeBreakpoint(rootElement, pane._breakpointTypes.Attrib uteModified); 211 domDebuggerModel.removeBreakpoint(rootElement, pane._breakpointT ypes.AttributeModified);
172 next(); 212 next();
173 } 213 }
174 }, 214 },
175 215
176 function testSetAttrNode(next) 216 function testSetAttrNode(next)
177 { 217 {
178 InspectorTest.addResult("Test that 'Attribute Modified' breakpoint i s hit when adding a new Attr node."); 218 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); 219 domDebuggerModel.setBreakpoint(rootElement, pane._breakpointTypes.At tributeModified, true);
180 InspectorTest.addResult("Set 'Attribute Modified' DOM breakpoint on rootElement."); 220 InspectorTest.addResult("Set 'Attribute Modified' DOM breakpoint on rootElement.");
181 InspectorTest.evaluateInPageWithTimeout("setAttrNode('rootElement', 'data-foo', 'bar')"); 221 InspectorTest.evaluateInPageWithTimeout("setAttrNode('rootElement', 'data-foo', 'bar')");
182 InspectorTest.addResult("Modify rootElement data-foo attribute."); 222 InspectorTest.addResult("Modify rootElement data-foo attribute.");
183 InspectorTest.waitUntilPausedAndDumpStackAndResume(step2); 223 InspectorTest.waitUntilPausedAndDumpStackAndResume(step2);
184 224
185 function step2(callFrames) 225 function step2(callFrames)
186 { 226 {
187 pane._removeBreakpoint(rootElement, pane._breakpointTypes.Attrib uteModified); 227 domDebuggerModel.removeBreakpoint(rootElement, pane._breakpointT ypes.AttributeModified);
188 next(); 228 next();
189 } 229 }
190 }, 230 },
191 231
192 function testModifyStyleAttribute(next) 232 function testModifyStyleAttribute(next)
193 { 233 {
194 InspectorTest.addResult("Test that 'Attribute Modified' breakpoint i s hit when modifying style attribute."); 234 InspectorTest.addResult("Test that 'Attribute Modified' breakpoint i s hit when modifying style attribute.");
195 pane._setBreakpoint(rootElement, pane._breakpointTypes.AttributeModi fied, true); 235 domDebuggerModel.setBreakpoint(rootElement, pane._breakpointTypes.At tributeModified, true);
196 InspectorTest.addResult("Set 'Attribute Modified' DOM breakpoint on rootElement."); 236 InspectorTest.addResult("Set 'Attribute Modified' DOM breakpoint on rootElement.");
197 InspectorTest.evaluateInPageWithTimeout("modifyStyleAttribute('rootE lement', 'color', 'green')"); 237 InspectorTest.evaluateInPageWithTimeout("modifyStyleAttribute('rootE lement', 'color', 'green')");
198 InspectorTest.addResult("Modify rootElement style.color attribute.") ; 238 InspectorTest.addResult("Modify rootElement style.color attribute.") ;
199 InspectorTest.waitUntilPausedAndDumpStackAndResume(step2); 239 InspectorTest.waitUntilPausedAndDumpStackAndResume(step2);
200 240
201 function step2(callFrames) 241 function step2(callFrames)
202 { 242 {
203 pane._removeBreakpoint(rootElement, pane._breakpointTypes.Attrib uteModified); 243 domDebuggerModel.removeBreakpoint(rootElement, pane._breakpointT ypes.AttributeModified);
204 next(); 244 next();
205 } 245 }
206 }, 246 },
207 247
208 function testRemoveNode(next) 248 function testRemoveNode(next)
209 { 249 {
210 InspectorTest.addResult("Test that 'Node Removed' breakpoint is hit when removing a node."); 250 InspectorTest.addResult("Test that 'Node Removed' breakpoint is hit when removing a node.");
211 InspectorTest.nodeWithId("elementToRemove", step2); 251 InspectorTest.nodeWithId("elementToRemove", step2);
212 252
213 function step2(node) 253 function step2(node)
214 { 254 {
215 pane._setBreakpoint(node, pane._breakpointTypes.NodeRemoved, tru e); 255 domDebuggerModel.setBreakpoint(node, pane._breakpointTypes.NodeR emoved, true);
216 InspectorTest.addResult("Set 'Node Removed' DOM breakpoint on el ementToRemove."); 256 InspectorTest.addResult("Set 'Node Removed' DOM breakpoint on el ementToRemove.");
217 InspectorTest.evaluateInPageWithTimeout("removeElement('elementT oRemove')"); 257 InspectorTest.evaluateInPageWithTimeout("removeElement('elementT oRemove')");
218 InspectorTest.addResult("Remove elementToRemove."); 258 InspectorTest.addResult("Remove elementToRemove.");
219 InspectorTest.waitUntilPausedAndDumpStackAndResume(next); 259 InspectorTest.waitUntilPausedAndDumpStackAndResume(next);
220 } 260 }
221 }, 261 },
222 262
223 function testReload(next) 263 function testReload(next)
224 { 264 {
225 InspectorTest.addResult("Test that DOM breakpoints are persisted bet ween page reloads."); 265 InspectorTest.addResult("Test that DOM breakpoints are persisted bet ween page reloads.");
226 InspectorTest.nodeWithId("rootElement", step2); 266 InspectorTest.nodeWithId("rootElement", step2);
227 267
228 function step2(node) 268 function step2(node)
229 { 269 {
230 pane._setBreakpoint(node, pane._breakpointTypes.SubtreeModified, true); 270 domDebuggerModel.setBreakpoint(node, pane._breakpointTypes.Subtr eeModified, true);
231 pane._saveBreakpoints();
232 InspectorTest.addResult("Set 'Subtree Modified' DOM breakpoint o n rootElement."); 271 InspectorTest.addResult("Set 'Subtree Modified' DOM breakpoint o n rootElement.");
233 InspectorTest.reloadPage(step3); 272 InspectorTest.reloadPage(step3);
234 } 273 }
235 274
236 function step3() 275 function step3()
237 { 276 {
238 InspectorTest.expandElementsTree(step4); 277 InspectorTest.expandElementsTree(step4);
239 } 278 }
240 279
241 function step4() 280 function step4()
242 { 281 {
243 InspectorTest.evaluateInPageWithTimeout("appendElement('rootElem ent', 'childElement')"); 282 InspectorTest.evaluateInPageWithTimeout("appendElement('rootElem ent', 'childElement')");
244 InspectorTest.addResult("Append childElement to rootElement."); 283 InspectorTest.addResult("Append childElement to rootElement.");
245 InspectorTest.waitUntilPausedAndDumpStackAndResume(next); 284 InspectorTest.waitUntilPausedAndDumpStackAndResume(next);
246 } 285 }
247 }, 286 },
248 287
249 function testInsertChildIntoAuthorShadowTree(next) 288 function testInsertChildIntoAuthorShadowTree(next)
250 { 289 {
251 InspectorTest.shadowRootByHostId("hostElement", callback); 290 InspectorTest.shadowRootByHostId("hostElement", callback);
252 291
253 function callback(node) 292 function callback(node)
254 { 293 {
255 authorShadowRoot = node; 294 authorShadowRoot = node;
256 InspectorTest.addResult("Test that 'Subtree Modified' breakpoint on author shadow root is hit when appending a child."); 295 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); 296 domDebuggerModel.setBreakpoint(authorShadowRoot, pane._breakpoin tTypes.SubtreeModified, true);
258 InspectorTest.addResult("Set 'Subtree Modified' DOM breakpoint o n author shadow root."); 297 InspectorTest.addResult("Set 'Subtree Modified' DOM breakpoint o n author shadow root.");
259 InspectorTest.evaluateInPageWithTimeout("appendElementToOpenShad owRoot('childElement')"); 298 InspectorTest.evaluateInPageWithTimeout("appendElementToOpenShad owRoot('childElement')");
260 InspectorTest.addResult("Append childElement to author shadow ro ot."); 299 InspectorTest.addResult("Append childElement to author shadow ro ot.");
261 InspectorTest.waitUntilPausedAndDumpStackAndResume(next); 300 InspectorTest.waitUntilPausedAndDumpStackAndResume(next);
262 } 301 }
263 }, 302 },
264 303
265 function testReloadWithShadowElementBreakpoint(next) 304 function testReloadWithShadowElementBreakpoint(next)
266 { 305 {
267 InspectorTest.nodeWithId("outerElement", step1); 306 InspectorTest.nodeWithId("outerElement", step1);
268 307
269 function step1(node) 308 function step1(node)
270 { 309 {
271 outerElement = node; 310 outerElement = node;
272 311
273 InspectorTest.addResult("Test that shadow DOM breakpoints are pe rsisted between page reloads."); 312 InspectorTest.addResult("Test that shadow DOM breakpoints are pe rsisted between page reloads.");
274 pane._setBreakpoint(outerElement, pane._breakpointTypes.SubtreeM odified, true); 313 domDebuggerModel.setBreakpoint(outerElement, pane._breakpointTyp es.SubtreeModified, true);
275 pane._saveBreakpoints();
276 InspectorTest.addResult("Set 'Subtree Modified' DOM breakpoint o n outerElement."); 314 InspectorTest.addResult("Set 'Subtree Modified' DOM breakpoint o n outerElement.");
277 InspectorTest.reloadPage(step2); 315 InspectorTest.reloadPage(step2);
278 } 316 }
279 317
280 function step2() 318 function step2()
281 { 319 {
282 InspectorTest.expandElementsTree(step3); 320 InspectorTest.expandElementsTree(step3);
283 } 321 }
284 322
285 function step3() 323 function step3()
(...skipping 20 matching lines...) Expand all
306 </div> 344 </div>
307 345
308 <div id="hostElement"></div> 346 <div id="hostElement"></div>
309 <script> 347 <script>
310 var root = document.getElementById("hostElement").createShadowRoot(); 348 var root = document.getElementById("hostElement").createShadowRoot();
311 root.innerHTML = "<div id='outerElement' style='red'><input id='input'/></div>"; 349 root.innerHTML = "<div id='outerElement' style='red'><input id='input'/></div>";
312 </script> 350 </script>
313 351
314 </body> 352 </body>
315 </html> 353 </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/components/DOMBreakpointsSidebarPane.js » ('J')

Powered by Google App Engine
This is Rietveld 408576698