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

Issues Search
    My Issues | Starred     Open | Closed | All

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

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

Powered by Google App Engine
This is Rietveld 408576698