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
98
99
100
101
102
103
104
105
106
107
108
109
110
111
|
/*
* Any copyright is dedicated to the Public Domain.
* http://creativecommons.org/publicdomain/zero/1.0/
*/
// Test the inspector links in the webconsole output for DOM Nodes actually
// open the inspector and select the right node
const TEST_URI = "http://example.com/browser/browser/devtools/webconsole/test/test-console-output-dom-elements.html";
const TEST_DATA = [
{
// The first test shouldn't be returning the body element as this is the
// default selected node, so re-selecting it won't fire the inspector-updated
// event
input: "testNode()",
output: '<p some-attribute="some-value">',
tagName: 'P',
attrs: [{name: "some-attribute", value: "some-value"}]
},
{
input: "testBodyNode()",
output: '<body id="body-id" class="body-class">',
tagName: 'BODY',
attrs: [{name: "id", value: "body-id"}, {name: "class", value: "body-class"}]
},
{
input: "testNodeInIframe()",
output: '<p>',
tagName: 'P',
attrs: []
},
{
input: "testDocumentElement()",
output: '<html lang="en-US" dir="ltr">',
tagName: 'HTML',
attrs: [{name: "lang", value: "en-US"}, {name: "dir", value: "ltr"}]
}
];
function test() {
Task.spawn(function*() {
let {tab} = yield loadTab(TEST_URI);
let hud = yield openConsole(tab);
let toolbox = gDevTools.getToolbox(hud.target);
// Loading the inspector panel at first, to make it possible to listen for
// new node selections
yield toolbox.selectTool("inspector");
let inspector = toolbox.getCurrentPanel();
yield toolbox.selectTool("webconsole");
info("Iterating over the test data");
for (let data of TEST_DATA) {
let [result] = yield jsEval(data.input, hud, {text: data.output});
let {widget, msg} = yield getWidgetAndMessage(result);
let inspectorIcon = msg.querySelector(".open-inspector");
ok(inspectorIcon, "Inspector icon found in the ElementNode widget");
info("Clicking on the inspector icon and waiting for the inspector to be selected");
let onInspectorSelected = toolbox.once("inspector-selected");
let onInspectorUpdated = inspector.once("inspector-updated");
let onNewNode = toolbox.selection.once("new-node-front");
EventUtils.synthesizeMouseAtCenter(inspectorIcon, {},
inspectorIcon.ownerDocument.defaultView);
yield onInspectorSelected;
yield onInspectorUpdated;
let nodeFront = yield onNewNode;
ok(true, "Inspector selected and new node got selected");
is(nodeFront.tagName, data.tagName, "The correct node was highlighted");
let attrs = nodeFront.attributes;
for (let i in data.attrs) {
is(attrs[i].name, data.attrs[i].name, "The correct node was highlighted");
is(attrs[i].value, data.attrs[i].value, "The correct node was highlighted");
}
info("Switching back to the console");
yield toolbox.selectTool("webconsole");
}
}).then(finishTest);
}
function jsEval(input, hud, message) {
info("Executing '" + input + "' in the web console");
hud.jsterm.clearOutput();
hud.jsterm.execute(input);
return waitForMessages({
webconsole: hud,
messages: [message]
});
}
function* getWidgetAndMessage(result) {
info("Getting the output ElementNode widget");
let msg = [...result.matched][0];
let widget = [...msg._messageObject.widgets][0];
ok(widget, "ElementNode widget found in the output");
info("Waiting for the ElementNode widget to be linked to the inspector");
yield widget.linkToInspector();
return {widget: widget, msg: msg};
}
|
