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