Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
/* Any copyright is dedicated to the Public Domain.
"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);
}