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
|
/* -*- 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/ */
// Test that inspector links in webconsole outputs for DOM Nodes highlight
// the actual DOM Nodes on hover
"use strict";
const TEST_URI = "http://example.com/browser/devtools/client/webconsole/" +
"test/test-console-output-dom-elements.html";
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.loadTool("inspector");
toolbox.getPanel("inspector");
info("Executing 'testNode()' in the web console to output a DOM Node");
let [result] = yield jsEval("testNode()", hud, {
text: '<p some-attribute="some-value">'
});
let elementNodeWidget = yield getWidget(result);
let nodeFront = yield hoverOverWidget(elementNodeWidget, toolbox);
let attrs = nodeFront.attributes;
is(nodeFront.tagName, "P", "The correct node was highlighted");
is(attrs[0].name, "some-attribute", "The correct node was highlighted");
is(attrs[0].value, "some-value", "The correct node was highlighted");
}).then(finishTest);
}
function jsEval(input, hud, message) {
hud.jsterm.execute(input);
return waitForMessages({
webconsole: hud,
messages: [message]
});
}
function* getWidget(result) {
info("Getting the output ElementNode widget");
let msg = [...result.matched][0];
let elementNodeWidget = [...msg._messageObject.widgets][0];
ok(elementNodeWidget, "ElementNode widget found in the output");
info("Waiting for the ElementNode widget to be linked to the inspector");
yield elementNodeWidget.linkToInspector();
return elementNodeWidget;
}
function* hoverOverWidget(widget, toolbox) {
info("Hovering over the output to highlight the node");
let onHighlight = toolbox.once("node-highlight");
EventUtils.sendMouseEvent({type: "mouseover"}, widget.element,
widget.element.ownerDocument.defaultView);
let nodeFront = yield onHighlight;
ok(true, "The highlighter was shown on a node");
return nodeFront;
}
|
