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
|
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
// Tests that the computed view refreshes when the rule view is updated in 3 pane mode.
const TEST_URI = "<div id='target' style='color: rgb(255, 0, 0);'>test</div>";
add_task(async function () {
info(
"Check whether the color as well in computed view is updated " +
"when the rule in rule view is changed in case of 3 pane mode"
);
await pushPref("devtools.inspector.three-pane-enabled", true);
await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
const { inspector, view } = await openComputedView();
await selectNode("#target", inspector);
is(
getComputedViewPropertyValue(view, "color"),
"rgb(255, 0, 0)",
"The computed view shows the right color"
);
info("Change the value in the ruleview");
const ruleView = inspector.getPanel("ruleview").view;
const editor = await getValueEditor(ruleView);
const onRuleViewChanged = ruleView.once("ruleview-changed");
const onComputedViewRefreshed = inspector.once("computed-view-refreshed");
editor.input.value = "rgb(0, 255, 0)";
EventUtils.synthesizeKey("VK_RETURN", {}, ruleView.styleWindow);
await Promise.all([onRuleViewChanged, onComputedViewRefreshed]);
info("Check the value in the computed view");
is(
getComputedViewPropertyValue(view, "color"),
"rgb(0, 255, 0)",
"The computed value is updated when the rule in ruleview is changed"
);
});
add_task(async function () {
info(
"Check that the computed view is not updated " +
"if the rule view is changed in 2 pane mode."
);
await pushPref("devtools.inspector.three-pane-enabled", false);
await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
const { inspector } = await openComputedView();
await selectNode("#target", inspector);
info("Select the rule view");
const ruleView = inspector.getPanel("ruleview").view;
const onRuleViewReady = ruleView.once("ruleview-refreshed");
const onSidebarSelect = inspector.sidebar.once("select");
inspector.sidebar.select("ruleview");
await Promise.all([onSidebarSelect, onRuleViewReady]);
info(
"Prepare the counter which counts how many times computed view is refreshed"
);
let computedViewRefreshCount = 0;
const computedViewRefreshListener = () => {
computedViewRefreshCount += 1;
};
inspector.on("computed-view-refreshed", computedViewRefreshListener);
info("Change the value in the rule view");
const editor = await getValueEditor(ruleView);
const onRuleViewChanged = ruleView.once("ruleview-changed");
editor.input.value = "rgb(0, 255, 0)";
EventUtils.synthesizeKey("VK_RETURN", {}, ruleView.styleWindow);
await onRuleViewChanged;
info(
"Wait for time enough to check whether the computed value is updated or not"
);
await wait(1000);
info("Check the counter");
is(computedViewRefreshCount, 0, "The computed view is not updated");
inspector.off("computed-view-refreshed", computedViewRefreshListener);
});
async function getValueEditor(ruleView) {
const ruleEditor = ruleView.element.children[0]._ruleEditor;
const propEditor = ruleEditor.rule.textProps[0].editor;
return focusEditableField(ruleView, propEditor.valueSpan);
}
|
