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
|
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
/* eslint no-unused-vars: [2, {"vars": "local"}] */
"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
);
const FLEXBOX_OPENED_PREF = "devtools.layout.flexbox.opened";
const FLEX_CONTAINER_OPENED_PREF = "devtools.layout.flex-container.opened";
const FLEX_ITEM_OPENED_PREF = "devtools.layout.flex-item.opened";
const GRID_OPENED_PREF = "devtools.layout.grid.opened";
const BOXMODEL_OPENED_PREF = "devtools.layout.boxmodel.opened";
// Make sure only the flexbox layout accordions are opened, and the others are closed.
Services.prefs.setBoolPref(FLEXBOX_OPENED_PREF, true);
Services.prefs.setBoolPref(FLEX_CONTAINER_OPENED_PREF, true);
Services.prefs.setBoolPref(FLEX_ITEM_OPENED_PREF, true);
Services.prefs.setBoolPref(BOXMODEL_OPENED_PREF, false);
Services.prefs.setBoolPref(GRID_OPENED_PREF, false);
// Clear all set prefs.
registerCleanupFunction(() => {
Services.prefs.clearUserPref(FLEXBOX_OPENED_PREF);
Services.prefs.clearUserPref(FLEX_CONTAINER_OPENED_PREF);
Services.prefs.clearUserPref(FLEX_ITEM_OPENED_PREF);
Services.prefs.clearUserPref(BOXMODEL_OPENED_PREF);
Services.prefs.clearUserPref(GRID_OPENED_PREF);
});
/**
* Toggles ON the flexbox highlighter given the flexbox highlighter button from the
* layout panel.
*
* @param {DOMNode} button
* The flexbox highlighter toggle button in the flex container panel.
* @param {Inspector} inspector
* Inspector panel instance.
*/
async function toggleHighlighterON(button, inspector) {
info("Toggling ON the flexbox highlighter from the layout panel.");
const { waitForHighlighterTypeShown } = getHighlighterTestHelpers(inspector);
const onHighlighterShown = waitForHighlighterTypeShown(
inspector.highlighters.TYPES.FLEXBOX
);
const { store } = inspector;
const onToggleChange = waitUntilState(
store,
state => state.flexbox.highlighted
);
button.click();
await Promise.all([onHighlighterShown, onToggleChange]);
}
/**
* Toggles OFF the flexbox highlighter given the flexbox highlighter button from the
* layout panel.
*
* @param {DOMNode} button
* The flexbox highlighter toggle button in the flex container panel.
* @param {Inspector} inspector
* Inspector panel instance.
*/
async function toggleHighlighterOFF(button, inspector) {
info("Toggling OFF the flexbox highlighter from the layout panel.");
const { waitForHighlighterTypeHidden } = getHighlighterTestHelpers(inspector);
const onHighlighterHidden = waitForHighlighterTypeHidden(
inspector.highlighters.TYPES.FLEXBOX
);
const { store } = inspector;
const onToggleChange = waitUntilState(
store,
state => !state.flexbox.highlighted
);
button.click();
await Promise.all([onHighlighterHidden, onToggleChange]);
}
|
