| OLD | NEW |
|---|
| 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/timeline-test.js"></script> | 5 <script src="../../../http/tests/inspector/timeline-test.js"></script> |
| 6 <style> | 6 <style> |
| 7 .relayout-boundary { | 7 .relayout-boundary { |
| 8 overflow: hidden; | 8 overflow: hidden; |
| 9 width: 100px; | 9 width: 100px; |
| 10 height: 100px; | 10 height: 100px; |
| 11 } | 11 } |
| 12 </style> | 12 </style> |
| 13 <script> | 13 <script> |
| 14 | 14 |
| 15 function performActions() | 15 function performActions() |
| 16 { | 16 { |
| 17 var element = document.getElementById("invalidate1"); | 17 var element = document.getElementById("invalidate1"); |
| 18 element.style.marginTop = "10px"; | 18 element.style.marginTop = "10px"; |
| 19 var unused = element.offsetHeight; | 19 var unused = element.offsetHeight; |
| 20 } | 20 } |
| 21 | 21 |
| 22 function test() | 22 function test() |
| 23 { | 23 { |
| 24 InspectorTest.evaluateInPage("var unused = document.body.offsetWidth;", func
tion() { | 24 InspectorTest.evaluateInPage("var unused = document.body.offsetWidth;", func
tion() { |
| 25 InspectorTest.evaluateWithTimeline("performActions()", onTimelineRecord
ed); | 25 InspectorTest.evaluateWithTimeline("performActions()", onTimelineRecord
ed); |
| 26 }); | 26 }); |
| 27 | 27 |
| 28 function clickValueLink(event, row) | 28 async function clickValueLink(event, row) |
| 29 { | 29 { |
| 30 var model = UI.panels.timeline._performanceModel.timelineModel(); | 30 var model = UI.panels.timeline._performanceModel.timelineModel(); |
| 31 Timeline.TimelineUIUtils.buildTraceEventDetails(event, model, new Compon
ents.Linkifier(), true, onDetailsContentReady); | 31 var element = await Timeline.TimelineUIUtils.buildTraceEventDetails(even
t, model, new Components.Linkifier(), true); |
| 32 | 32 var rows = element.querySelectorAll(".timeline-details-view-row"); |
| 33 function onDetailsContentReady(element) | 33 for (var i = 0; i < rows.length; ++i) { |
| 34 { | 34 if (rows[i].firstChild.textContent.indexOf(row) !== -1) { |
| 35 var rows = element.querySelectorAll(".timeline-details-view-row"); | 35 » rows[i].lastChild.firstChild.shadowRoot.lastChild.click(); |
| 36 for (var i = 0; i < rows.length; ++i) { | 36 » return; |
| 37 if (rows[i].firstChild.textContent.indexOf(row) !== -1) { | 37 » } |
| 38 rows[i].lastChild.firstChild.shadowRoot.lastChild.click(); | |
| 39 return; | |
| 40 } | |
| 41 } | |
| 42 } | 38 } |
| 43 } | 39 } |
| 44 | 40 |
| 45 function onTimelineRecorded(records) | 41 function onTimelineRecorded(records) |
| 46 { | 42 { |
| 47 var layoutEvent = InspectorTest.findTimelineEvent(TimelineModel.Timeline
Model.RecordType.Layout); | 43 var layoutEvent = InspectorTest.findTimelineEvent(TimelineModel.Timeline
Model.RecordType.Layout); |
| 48 UI.context.addFlavorChangeListener(SDK.DOMNode, onSelectedNodeChanged); | 44 UI.context.addFlavorChangeListener(SDK.DOMNode, onSelectedNodeChanged); |
| 49 clickValueLink(layoutEvent, "Layout root"); | 45 clickValueLink(layoutEvent, "Layout root"); |
| 50 } | 46 } |
| 51 | 47 |
| (...skipping 17 matching lines...) Expand all Loading... |
| 69 Tests the Timeline API instrumentation of a Layout event | 65 Tests the Timeline API instrumentation of a Layout event |
| 70 </p> | 66 </p> |
| 71 <div id="boundary" class="relayout-boundary"> | 67 <div id="boundary" class="relayout-boundary"> |
| 72 <div> | 68 <div> |
| 73 <div id="invalidate1"><div>text</div></div> | 69 <div id="invalidate1"><div>text</div></div> |
| 74 </div> | 70 </div> |
| 75 </div> | 71 </div> |
| 76 | 72 |
| 77 </body> | 73 </body> |
| 78 </html> | 74 </html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2713363002:
DevTools: Highlight DOM node on hover in flamechart. (Closed)
