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
|
/* 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/ */
/* eslint no-unused-vars: [2, {"vars": "local"}] */
/* import-globals-from ../../../framework/test/shared-head.js */
/* import-globals-from ../../test/head.js */
"use strict";
// Import the inspector's head.js first (which itself imports shared-head.js).
Services.scriptloader.loadSubScript(
"chrome://mochitests/content/browser/devtools/client/inspector/test/head.js",
this);
Services.prefs.setIntPref("devtools.toolbox.footer.height", 350);
registerCleanupFunction(() => {
Services.prefs.clearUserPref("devtools.toolbox.footer.height");
});
/**
* Highlight a node and set the inspector's current selection to the node or
* the first match of the given css selector.
* @param {String|NodeFront} selectorOrNodeFront
* The selector for the node to be set, or the nodeFront
* @param {InspectorPanel} inspector
* The instance of InspectorPanel currently loaded in the toolbox
* @return a promise that resolves when the inspector is updated with the new
* node
*/
function* selectAndHighlightNode(selectorOrNodeFront, inspector) {
info("Highlighting and selecting the node " + selectorOrNodeFront);
let nodeFront = yield getNodeFront(selectorOrNodeFront, inspector);
let updated = inspector.toolbox.once("highlighter-ready");
inspector.selection.setNodeFront(nodeFront, "test-highlight");
yield updated;
}
/**
* Open the toolbox, with the inspector tool visible, and the computed view
* sidebar tab selected to display the box model view.
* @return a promise that resolves when the inspector is ready and the box model
* view is visible and ready
*/
function openBoxModelView() {
return openInspectorSidebarTab("computedview").then(data => {
// The actual highligher show/hide methods are mocked in box model tests.
// The highlighter is tested in devtools/inspector/test.
function mockHighlighter({highlighter}) {
highlighter.showBoxModel = function () {
return promise.resolve();
};
highlighter.hideBoxModel = function () {
return promise.resolve();
};
}
mockHighlighter(data.toolbox);
return {
toolbox: data.toolbox,
inspector: data.inspector,
view: data.inspector.computedview.boxModelView,
testActor: data.testActor
};
});
}
/**
* Wait for the boxmodel-view-updated event.
* @return a promise
*/
function waitForUpdate(inspector) {
return inspector.once("boxmodel-view-updated");
}
function getStyle(testActor, selector, propertyName) {
return testActor.eval(`
content.document.querySelector("${selector}")
.style.getPropertyValue("${propertyName}");
`);
}
function setStyle(testActor, selector, propertyName, value) {
return testActor.eval(`
content.document.querySelector("${selector}")
.style.${propertyName} = "${value}";
`);
}
|
