The Tor Browser / file comparison
comparison: browser/devtools/webconsole/test/browser_console_variables_view_highlighter.js
browser/devtools/webconsole/test/browser_console_variables_view_highlighter.js
- changeset 0
- 6474c204b198
equal
deleted
inserted
replaced
| -1:000000000000 | 0:439a491cab2a |
|---|---|
| 1 /* | |
| 2 * Any copyright is dedicated to the Public Domain. | |
| 3 * http://creativecommons.org/publicdomain/zero/1.0/ | |
| 4 */ | |
| 5 | |
| 6 // Check that variables view is linked to the inspector for highlighting and | |
| 7 // selecting DOM nodes | |
| 8 | |
| 9 const TEST_URI = "http://example.com/browser/browser/devtools/webconsole/test/test-bug-952277-highlight-nodes-in-vview.html"; | |
| 10 | |
| 11 let gWebConsole, gJSTerm, gVariablesView, gToolbox; | |
| 12 | |
| 13 function test() | |
| 14 { | |
| 15 addTab(TEST_URI); | |
| 16 browser.addEventListener("load", function onLoad() { | |
| 17 browser.removeEventListener("load", onLoad, true); | |
| 18 openConsole(null, consoleOpened); | |
| 19 }, true); | |
| 20 } | |
| 21 | |
| 22 function consoleOpened(hud) | |
| 23 { | |
| 24 gWebConsole = hud; | |
| 25 gJSTerm = hud.jsterm; | |
| 26 gToolbox = gDevTools.getToolbox(hud.target); | |
| 27 gJSTerm.execute("document.querySelectorAll('p')", onQSAexecuted); | |
| 28 } | |
| 29 | |
| 30 function onQSAexecuted(msg) | |
| 31 { | |
| 32 ok(msg, "output message found"); | |
| 33 let anchor = msg.querySelector("a"); | |
| 34 ok(anchor, "object link found"); | |
| 35 | |
| 36 gJSTerm.once("variablesview-fetched", onNodeListVviewFetched); | |
| 37 | |
| 38 executeSoon(() => | |
| 39 EventUtils.synthesizeMouse(anchor, 2, 2, {}, gWebConsole.iframeWindow) | |
| 40 ); | |
| 41 } | |
| 42 | |
| 43 function onNodeListVviewFetched(aEvent, aVar) | |
| 44 { | |
| 45 gVariablesView = aVar._variablesView; | |
| 46 ok(gVariablesView, "variables view object"); | |
| 47 | |
| 48 // Transform the vview into an array we can filter properties from | |
| 49 let props = [[id, prop] for([id, prop] of aVar)]; | |
| 50 // These properties are the DOM nodes ones | |
| 51 props = props.filter(v => v[0].match(/[0-9]+/)); | |
| 52 | |
| 53 function hoverOverDomNodeVariableAndAssertHighlighter(index) { | |
| 54 if (props[index]) { | |
| 55 let prop = props[index][1]; | |
| 56 let valueEl = prop._valueLabel; | |
| 57 | |
| 58 gToolbox.once("node-highlight", () => { | |
| 59 ok(true, "The highlighter was shown on hover of the DOMNode"); | |
| 60 gToolbox.highlighterUtils.unhighlight().then(() => { | |
| 61 clickOnDomNodeVariableAndAssertInspectorSelected(index); | |
| 62 }); | |
| 63 }); | |
| 64 | |
| 65 // Rather than trying to emulate a mouseenter event, let's call the | |
| 66 // variable's highlightDomNode and see if it has the desired effect | |
| 67 prop.highlightDomNode(); | |
| 68 } else { | |
| 69 finishUp(); | |
| 70 } | |
| 71 } | |
| 72 | |
| 73 function clickOnDomNodeVariableAndAssertInspectorSelected(index) { | |
| 74 let prop = props[index][1]; | |
| 75 | |
| 76 // Make sure the inspector is initialized so we can listen to its events | |
| 77 gToolbox.initInspector().then(() => { | |
| 78 // Rather than trying to click on the value here, let's just call the | |
| 79 // variable's openNodeInInspector function and see if it has the | |
| 80 // desired effect | |
| 81 prop.openNodeInInspector().then(() => { | |
| 82 is(gToolbox.currentToolId, "inspector", "The toolbox switched over the inspector on DOMNode click"); | |
| 83 gToolbox.selectTool("webconsole").then(() => { | |
| 84 hoverOverDomNodeVariableAndAssertHighlighter(index + 1); | |
| 85 }); | |
| 86 }); | |
| 87 }); | |
| 88 } | |
| 89 | |
| 90 hoverOverDomNodeVariableAndAssertHighlighter(0); | |
| 91 } | |
| 92 | |
| 93 function finishUp() { | |
| 94 gWebConsole = gJSTerm = gVariablesView = gToolbox = null; | |
| 95 | |
| 96 finishTest(); | |
| 97 } |
