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
|
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
/* eslint no-unused-vars: [2, {"vars": "local"}] */
"use strict";
// Load the Rule view's test/head.js to make use of its helpers.
// It loads inspector/test/head.js which itself loads inspector/test/shared-head.js
Services.scriptloader.loadSubScript(
"chrome://mochitests/content/browser/devtools/client/inspector/rules/test/head.js",
this
);
// Ensure the three-pane mode is enabled before running the tests.
Services.prefs.setBoolPref("devtools.inspector.three-pane-enabled", true);
registerCleanupFunction(() => {
Services.prefs.clearUserPref("devtools.inspector.three-pane-enabled");
});
/**
* Get an array of objects with property/value pairs of the CSS declarations rendered
* in the Changes panel.
*
* @param {Document} panelDoc
* Host document of the Changes panel.
* @param {String} selector
* Optional selector to filter rendered declaration DOM elements.
* One of ".diff-remove" or ".diff-add".
* If omitted, all declarations will be returned.
* @param {DOMNode} containerNode
* Optional element to restrict results to declaration DOM elements which are
* descendants of this container node.
* If omitted, all declarations will be returned
* @return {Array}
*/
function getDeclarations(panelDoc, selector = "", containerNode = null) {
const els = panelDoc.querySelectorAll(`.changes__declaration${selector}`);
return [...els]
.filter(el => {
return containerNode ? containerNode.contains(el) : true;
})
.map(el => {
return {
property: el.querySelector(".changes__declaration-name").textContent,
value: el.querySelector(".changes__declaration-value").textContent,
element: el,
};
});
}
function getAddedDeclarations(panelDoc, containerNode) {
return getDeclarations(panelDoc, ".diff-add", containerNode);
}
function getRemovedDeclarations(panelDoc, containerNode) {
return getDeclarations(panelDoc, ".diff-remove", containerNode);
}
/**
* Get an array of DOM elements for the CSS selectors rendered in the Changes panel.
*
* @param {Document} panelDoc
* Host document of the Changes panel.
* @param {String} selector
* Optional selector to filter rendered selector DOM elements.
* One of ".diff-remove" or ".diff-add".
* If omitted, all selectors will be returned.
* @return {Array}
*/
function getSelectors(panelDoc, selector = "") {
return panelDoc.querySelectorAll(`.changes__selector${selector}`);
}
function getAddedSelectors(panelDoc) {
return getSelectors(panelDoc, ".diff-add");
}
function getRemovedSelectors(panelDoc) {
return getSelectors(panelDoc, ".diff-remove");
}
async function getChangesContextMenu(changesView, element) {
const onContextMenu = changesView.contextMenu.once("open");
info(`Trigger context menu for element: ${element}`);
synthesizeContextMenuEvent(element);
info(`Wait for context menu to show`);
await onContextMenu;
return changesView.contextMenu;
}
|
