browser_computed_refresh-on-ruleview-change.js (3318B)
1 /* Any copyright is dedicated to the Public Domain. 2 http://creativecommons.org/publicdomain/zero/1.0/ */ 3 4 "use strict"; 5 6 // Tests that the computed view refreshes when the rule view is updated in 3 pane mode. 7 8 const TEST_URI = "<div id='target' style='color: rgb(255, 0, 0);'>test</div>"; 9 10 add_task(async function () { 11 info( 12 "Check whether the color as well in computed view is updated " + 13 "when the rule in rule view is changed in case of 3 pane mode" 14 ); 15 await pushPref("devtools.inspector.three-pane-enabled", true); 16 17 await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI)); 18 const { inspector, view } = await openComputedView(); 19 await selectNode("#target", inspector); 20 21 is( 22 getComputedViewPropertyValue(view, "color"), 23 "rgb(255, 0, 0)", 24 "The computed view shows the right color" 25 ); 26 27 info("Change the value in the ruleview"); 28 const ruleView = inspector.getPanel("ruleview").view; 29 const editor = await getValueEditor(ruleView); 30 const onRuleViewChanged = ruleView.once("ruleview-changed"); 31 const onComputedViewRefreshed = inspector.once("computed-view-refreshed"); 32 editor.input.value = "rgb(0, 255, 0)"; 33 EventUtils.synthesizeKey("VK_RETURN", {}, ruleView.styleWindow); 34 await Promise.all([onRuleViewChanged, onComputedViewRefreshed]); 35 36 info("Check the value in the computed view"); 37 is( 38 getComputedViewPropertyValue(view, "color"), 39 "rgb(0, 255, 0)", 40 "The computed value is updated when the rule in ruleview is changed" 41 ); 42 }); 43 44 add_task(async function () { 45 info( 46 "Check that the computed view is not updated " + 47 "if the rule view is changed in 2 pane mode." 48 ); 49 await pushPref("devtools.inspector.three-pane-enabled", false); 50 51 await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI)); 52 const { inspector } = await openComputedView(); 53 await selectNode("#target", inspector); 54 55 info("Select the rule view"); 56 const ruleView = inspector.getPanel("ruleview").view; 57 const onRuleViewReady = ruleView.once("ruleview-refreshed"); 58 const onSidebarSelect = inspector.sidebar.once("select"); 59 inspector.sidebar.select("ruleview"); 60 await Promise.all([onSidebarSelect, onRuleViewReady]); 61 62 info( 63 "Prepare the counter which counts how many times computed view is refreshed" 64 ); 65 let computedViewRefreshCount = 0; 66 const computedViewRefreshListener = () => { 67 computedViewRefreshCount += 1; 68 }; 69 inspector.on("computed-view-refreshed", computedViewRefreshListener); 70 71 info("Change the value in the rule view"); 72 const editor = await getValueEditor(ruleView); 73 const onRuleViewChanged = ruleView.once("ruleview-changed"); 74 editor.input.value = "rgb(0, 255, 0)"; 75 EventUtils.synthesizeKey("VK_RETURN", {}, ruleView.styleWindow); 76 await onRuleViewChanged; 77 78 info( 79 "Wait for time enough to check whether the computed value is updated or not" 80 ); 81 await wait(1000); 82 83 info("Check the counter"); 84 is(computedViewRefreshCount, 0, "The computed view is not updated"); 85 86 inspector.off("computed-view-refreshed", computedViewRefreshListener); 87 }); 88 89 async function getValueEditor(ruleView) { 90 const ruleEditor = ruleView.element.children[0]._ruleEditor; 91 const propEditor = ruleEditor.rule.textProps[0].editor; 92 return focusEditableField(ruleView, propEditor.valueSpan); 93 }