Bug 1456779: Add test for the computed view updating. r=gl
authorDaisuke Akatsuka <daisuke@birchill.co.jp>
Tue, 24 Sep 2019 04:07:20 +0000
changeset 495864 3918541135bdc97d78387088c08d331363422b4d
parent 495863 5ad3cfbe42f65ff59c245418d05feca58a580d47
child 495865 949bff3964d90b2e0aba876b538a86d3e8b84856
push id96914
push userdakatsuka.birchill@mozilla.com
push dateWed, 02 Oct 2019 04:17:20 +0000
treeherderautoland@3918541135bd [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersgl
bugs1456779
milestone71.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1456779: Add test for the computed view updating. r=gl Depends on D46119 Differential Revision: https://phabricator.services.mozilla.com/D46120
devtools/client/inspector/computed/test/browser.ini
devtools/client/inspector/computed/test/browser_computed_refresh-on-ruleview-change.js
--- a/devtools/client/inspector/computed/test/browser.ini
+++ b/devtools/client/inspector/computed/test/browser.ini
@@ -26,16 +26,17 @@ support-files =
 [browser_computed_matched-selectors-toggle.js]
 [browser_computed_matched-selectors_01.js]
 [browser_computed_matched-selectors_02.js]
 [browser_computed_media-queries.js]
 [browser_computed_no-results-placeholder.js]
 [browser_computed_original-source-link.js]
 [browser_computed_pseudo-element_01.js]
 [browser_computed_refresh-on-style-change_01.js]
+[browser_computed_refresh-on-ruleview-change.js]
 [browser_computed_search-filter.js]
 [browser_computed_search-filter_clear.js]
 [browser_computed_search-filter_context-menu.js]
 tags = clipboard
 skip-if = (os == 'linux' && bits == 32 && debug) # bug 1328915, disable linux32 debug devtools for timeouts
 [browser_computed_search-filter_escape-keypress.js]
 [browser_computed_search-filter_noproperties.js]
 [browser_computed_select-and-copy-styles-01.js]
new file mode 100644
--- /dev/null
+++ b/devtools/client/inspector/computed/test/browser_computed_refresh-on-ruleview-change.js
@@ -0,0 +1,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);
+}