michael@0: /*
michael@0:  * Any copyright is dedicated to the Public Domain.
michael@0:  * http://creativecommons.org/publicdomain/zero/1.0/
michael@0:  */
michael@0: 
michael@0: // Check that variables view is linked to the inspector for highlighting and
michael@0: // selecting DOM nodes
michael@0: 
michael@0: const TEST_URI = "http://example.com/browser/browser/devtools/webconsole/test/test-bug-952277-highlight-nodes-in-vview.html";
michael@0: 
michael@0: let gWebConsole, gJSTerm, gVariablesView, gToolbox;
michael@0: 
michael@0: function test()
michael@0: {
michael@0:   addTab(TEST_URI);
michael@0:   browser.addEventListener("load", function onLoad() {
michael@0:     browser.removeEventListener("load", onLoad, true);
michael@0:     openConsole(null, consoleOpened);
michael@0:   }, true);
michael@0: }
michael@0: 
michael@0: function consoleOpened(hud)
michael@0: {
michael@0:   gWebConsole = hud;
michael@0:   gJSTerm = hud.jsterm;
michael@0:   gToolbox = gDevTools.getToolbox(hud.target);
michael@0:   gJSTerm.execute("document.querySelectorAll('p')", onQSAexecuted);
michael@0: }
michael@0: 
michael@0: function onQSAexecuted(msg)
michael@0: {
michael@0:   ok(msg, "output message found");
michael@0:   let anchor = msg.querySelector("a");
michael@0:   ok(anchor, "object link found");
michael@0: 
michael@0:   gJSTerm.once("variablesview-fetched", onNodeListVviewFetched);
michael@0: 
michael@0:   executeSoon(() =>
michael@0:     EventUtils.synthesizeMouse(anchor, 2, 2, {}, gWebConsole.iframeWindow)
michael@0:   );
michael@0: }
michael@0: 
michael@0: function onNodeListVviewFetched(aEvent, aVar)
michael@0: {
michael@0:   gVariablesView = aVar._variablesView;
michael@0:   ok(gVariablesView, "variables view object");
michael@0: 
michael@0:   // Transform the vview into an array we can filter properties from
michael@0:   let props = [[id, prop] for([id, prop] of aVar)];
michael@0:   // These properties are the DOM nodes ones
michael@0:   props = props.filter(v => v[0].match(/[0-9]+/));
michael@0: 
michael@0:   function hoverOverDomNodeVariableAndAssertHighlighter(index) {
michael@0:     if (props[index]) {
michael@0:       let prop = props[index][1];
michael@0:       let valueEl = prop._valueLabel;
michael@0: 
michael@0:       gToolbox.once("node-highlight", () => {
michael@0:         ok(true, "The highlighter was shown on hover of the DOMNode");
michael@0:         gToolbox.highlighterUtils.unhighlight().then(() => {
michael@0:           clickOnDomNodeVariableAndAssertInspectorSelected(index);
michael@0:         });
michael@0:       });
michael@0: 
michael@0:       // Rather than trying to emulate a mouseenter event, let's call the
michael@0:       // variable's highlightDomNode and see if it has the desired effect
michael@0:       prop.highlightDomNode();
michael@0:     } else {
michael@0:       finishUp();
michael@0:     }
michael@0:   }
michael@0: 
michael@0:   function clickOnDomNodeVariableAndAssertInspectorSelected(index) {
michael@0:     let prop = props[index][1];
michael@0: 
michael@0:     // Make sure the inspector is initialized so we can listen to its events
michael@0:     gToolbox.initInspector().then(() => {
michael@0:       // Rather than trying to click on the value here, let's just call the
michael@0:       // variable's openNodeInInspector function and see if it has the
michael@0:       // desired effect
michael@0:       prop.openNodeInInspector().then(() => {
michael@0:         is(gToolbox.currentToolId, "inspector", "The toolbox switched over the inspector on DOMNode click");
michael@0:         gToolbox.selectTool("webconsole").then(() => {
michael@0:           hoverOverDomNodeVariableAndAssertHighlighter(index + 1);
michael@0:         });
michael@0:       });
michael@0:     });
michael@0:   }
michael@0: 
michael@0:   hoverOverDomNodeVariableAndAssertHighlighter(0);
michael@0: }
michael@0: 
michael@0: function finishUp() {
michael@0:   gWebConsole = gJSTerm = gVariablesView = gToolbox = null;
michael@0: 
michael@0:   finishTest();
michael@0: }