browser_allocations_inspector_selections.js (3527B)
1 /* Any copyright is dedicated to the Public Domain. 2 http://creativecommons.org/publicdomain/zero/1.0/ */ 3 4 "use strict"; 5 6 // Record allocations while opening and closing DevTools 7 8 const TEST_URL = 9 "data:text/html;charset=UTF-8," + 10 encodeURIComponent( 11 `<!doctype html> 12 <html> 13 <head> 14 <title>Test page</title> 15 <style type="text/css"> 16 body { 17 background-color: #f0f0f2; 18 margin: 0; 19 padding: 0; 20 font-family: Arial; 21 } 22 div { 23 width: 600px; 24 margin: 5em auto; 25 padding: 2em; 26 background-color: #fdfdff; 27 border-radius: 0.5em; 28 box-shadow: 2px 3px 7px 2px rgba(0,0,0,0.02); 29 } 30 </style> 31 </head> 32 33 <body> 34 <div>element</div> 35 </body> 36 </html>` 37 ); 38 39 const { require } = ChromeUtils.importESModule( 40 "resource://devtools/shared/loader/Loader.sys.mjs" 41 ); 42 const { 43 gDevTools, 44 } = require("resource://devtools/client/framework/devtools.js"); 45 46 async function testScript( 47 toolbox, 48 inspector, 49 nodeFrontA, 50 nodeFrontB, 51 nodeFrontC 52 ) { 53 let onSelectionChanged = toolbox.once("selection-changed"); 54 let updated = inspector.once("inspector-updated"); 55 let onBoxModelUpdated = inspector.once("boxmodel-view-updated"); 56 inspector.selection.setNodeFront(nodeFrontA, { 57 reason: "browser-context-menu", 58 }); 59 await onSelectionChanged; 60 await updated; 61 await onBoxModelUpdated; 62 63 onSelectionChanged = toolbox.once("selection-changed"); 64 updated = inspector.once("inspector-updated"); 65 inspector.selection.setNodeFront(nodeFrontB, { 66 reason: "browser-context-menu", 67 }); 68 await onSelectionChanged; 69 await updated; 70 71 onSelectionChanged = toolbox.once("selection-changed"); 72 updated = inspector.once("inspector-updated"); 73 onBoxModelUpdated = inspector.once("boxmodel-view-updated"); 74 inspector.selection.setNodeFront(nodeFrontC, { 75 reason: "browser-context-menu", 76 }); 77 await onSelectionChanged; 78 await updated; 79 await onBoxModelUpdated; 80 } 81 82 add_task(async function () { 83 const tab = await addTab(TEST_URL); 84 85 const toolbox = await gDevTools.showToolboxForTab(tab, { 86 toolId: "inspector", 87 }); 88 const inspector = toolbox.getPanel("inspector"); 89 const root = await inspector.walker.getRootNode(); 90 const body = await inspector.walker.querySelector(root, "body"); 91 const style = await inspector.walker.querySelector(root, "style"); 92 const { nodes } = await inspector.walker.children(style); 93 const styleText = nodes[0]; 94 const div = await inspector.walker.querySelector(root, "div"); 95 96 // Run the test scenario first before recording in order to load all the 97 // modules. Otherwise they get reported as "still allocated" objects, 98 // whereas we do expect them to be kept in memory as they are loaded via 99 // the main DevTools loader, which keeps the module loaded until the 100 // shutdown of Firefox 101 await testScript(toolbox, inspector, body, styleText, div); 102 103 // Now, run the test script. This time, we record this run. 104 await startRecordingAllocations(); 105 for (let i = 0; i < 10; i++) { 106 await testScript(toolbox, inspector, body, styleText, div); 107 } 108 109 // Text property editor updates async and doesn't emit reliable event 110 // to wait for all async operations. 111 // This can be really slow and require >1s to wait for all the accumulated async calls. 112 // eslint-disable-next-line mozilla/no-arbitrary-setTimeout 113 await new Promise(r => setTimeout(r, 2000)); 114 115 await stopRecordingAllocations("inspector-selections"); 116 117 await toolbox.destroy(); 118 gBrowser.removeTab(tab); 119 });