Bug 988314 - Inspector test clean-up - Moved browser_inspector_changes.js to styleinspector; r=jwalker

browser/devtools/inspector/test/browser.ini

@@ -28,7 +28,6 @@ support-files =
 # [browser_inspector_bug_831693_searchbox_panel_navigation.js]
 # Disabled for too many intermittent failures (bug 851349)
 [browser_inspector_bug_840156_destroy_after_navigation.js]
-[browser_inspector_changes.js]
 [browser_inspector_cmd_inspect.js]
 [browser_inspector_dead_node_exception.js]
 [browser_inspector_destroyselection.js]

browser/devtools/inspector/test/browser_inspector_changes.js

@@ -1,156 +0,0 @@
-/* -*- Mode: Javascript; tab-width: 2; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
-/* vim: set ts=2 et sw=2 tw=80: */
-/* This Source Code Form is subject to the terms of the Mozilla Public
- * License, v. 2.0. If a copy of the MPL was not distributed with this
- * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
-let doc;
-let testDiv;
-
-function test() {
-  let inspector;
-
-  function createDocument()
-  {
-    doc.body.innerHTML = '<div id="testdiv">Test div!</div>';
-    doc.title = "Inspector Change Test";
-    openInspector(runInspectorTests);
-  }
-
-  function getInspectorRuleProp(aName)
-  {
-    let ruleview = inspector.sidebar.getWindowForTab("ruleview").ruleview.view;
-    let inlineStyles = ruleview._elementStyle.rules[0];
-
-    for (let key in inlineStyles.textProps) {
-      let prop = inlineStyles.textProps[key];
-      if (prop.name == aName) {
-        return prop;
-      }
-    }
-    return null;
-  }
-
-  function runInspectorTests(aInspector)
-  {
-    inspector = aInspector;
-
-    waitForView("computedview", () => {
-      info("Computed View ready");
-      inspector.sidebar.select("computedview");
-
-      testDiv = doc.getElementById("testdiv");
-
-      testDiv.style.fontSize = "10px";
-
-      // Start up the style inspector panel...
-      inspector.once("computed-view-refreshed", () => {
-        executeSoon(computedStylePanelTests);
-      });
-      inspector.selection.setNode(testDiv);
-    });
-  }
-
-  function computedStylePanelTests()
-  {
-    let computedview = inspector.sidebar.getWindowForTab("computedview").computedview;
-    ok(computedview, "Style Panel has a cssHtmlTree");
-
-    let fontSize = getComputedPropertyValue("font-size");
-    is(fontSize, "10px", "Style inspector should be showing the correct font size.");
-
-    testDiv.style.cssText = "font-size: 15px; color: red;";
-
-    // Wait until layout-change fires from mutation to skip earlier refresh event
-    inspector.once("layout-change", () => {
-      inspector.once("computed-view-refreshed", () => {
-        executeSoon(computedStylePanelAfterChange);
-      });
-    });
-  }
-
-  function computedStylePanelAfterChange()
-  {
-    let fontSize = getComputedPropertyValue("font-size");
-    is(fontSize, "15px", "Style inspector should be showing the new font size.");
-
-    let color = getComputedPropertyValue("color");
-    is(color, "#F00", "Style inspector should be showing the new color.");
-
-    computedStylePanelNotActive();
-  }
-
-  function computedStylePanelNotActive()
-  {
-    // Tests changes made while the style panel is not active.
-    inspector.sidebar.select("ruleview");
-
-    testDiv.style.cssText = "font-size: 20px; color: blue; text-align: center";
-
-    inspector.once("computed-view-refreshed", () => {
-      executeSoon(computedStylePanelAfterSwitch);
-    });
-  }
-
-  function computedStylePanelAfterSwitch()
-  {
-    let fontSize = getComputedPropertyValue("font-size");
-    is(fontSize, "20px", "Style inspector should be showing the new font size.");
-
-    let color = getComputedPropertyValue("color");
-    is(color, "#00F", "Style inspector should be showing the new color.");
-
-    let textAlign = getComputedPropertyValue("text-align");
-    is(textAlign, "center", "Style inspector should be showing the new text align.");
-
-    rulePanelTests();
-  }
-
-  function rulePanelTests()
-  {
-    inspector.sidebar.select("ruleview");
-    let ruleview = inspector.sidebar.getWindowForTab("ruleview").ruleview;
-    ok(ruleview, "Style Panel has a ruleview");
-
-    let propView = getInspectorRuleProp("text-align");
-    is(propView.value, "center", "Style inspector should be showing the new text align.");
-
-    testDiv.style.cssText = "font-size: 3em; color: lightgoldenrodyellow; text-align: right; text-transform: uppercase";
-
-    inspector.once("rule-view-refreshed", () => {
-      executeSoon(rulePanelAfterChange);
-    });
-  }
-
-  function rulePanelAfterChange()
-  {
-    let propView = getInspectorRuleProp("text-align");
-    is(propView.value, "right", "Style inspector should be showing the new text align.");
-
-    let propView = getInspectorRuleProp("color");
-    is(propView.value, "lightgoldenrodyellow", "Style inspector should be showing the new color.")
-
-    let propView = getInspectorRuleProp("font-size");
-    is(propView.value, "3em", "Style inspector should be showing the new font size.");
-
-    let propView = getInspectorRuleProp("text-transform");
-    is(propView.value, "uppercase", "Style inspector should be showing the new text transform.");
-
-    finishTest();
-  }
-
-  function finishTest()
-  {
-    gBrowser.removeCurrentTab();
-    finish();
-  }
-
-  waitForExplicitFinish();
-  gBrowser.selectedTab = gBrowser.addTab();
-  gBrowser.selectedBrowser.addEventListener("load", function() {
-    gBrowser.selectedBrowser.removeEventListener("load", arguments.callee, true);
-    doc = content.document;
-    waitForFocus(createDocument, content);
-  }, true);
-
-  content.location = "data:text/html;charset=utf-8,browser_inspector_changes.js";
-}

browser/devtools/styleinspector/test/browser.ini

@@ -31,6 +31,8 @@ support-files =
 [browser_computedview_media-queries.js]
 [browser_computedview_no-results-placeholder.js]
 [browser_computedview_original-source-link.js]
+[browser_computedview_refresh-on-style-change_01.js]
+[browser_computedview_refresh-on-style-change_02.js]
 [browser_computedview_search-filter.js]
 [browser_computedview_select-and-copy-styles.js]
 [browser_computedview_style-editor-link.js]
@@ -77,6 +79,7 @@ skip-if = os == "win" && debug # bug 963492
 [browser_ruleview_pseudo-element.js]
 [browser_ruleview_refresh-on-attribute-change_01.js]
 [browser_ruleview_refresh-on-attribute-change_02.js]
+[browser_ruleview_refresh-on-style-change.js]
 [browser_ruleview_select-and-copy-styles.js]
 [browser_ruleview_style-editor-link.js]
 [browser_ruleview_urls-clickable.js]

browser/devtools/styleinspector/test/browser_computedview_refresh-on-style-change_01.js

@@ -0,0 +1,35 @@
+/* vim: set ft=javascript ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the computed view refreshes when the current node has its style
+// changed
+
+const TESTCASE_URI = 'data:text/html;charset=utf-8,' +
+                     '<div id="testdiv" style="font-size:10px;">Test div!</div>';
+
+let test = asyncTest(function*() {
+  yield addTab(TESTCASE_URI);
+
+  info("Getting the test node");
+  let div = getNode("#testdiv");
+
+  info("Opening the computed view and selecting the test node");
+  let {toolbox, inspector, view} = yield openComputedView();
+  yield selectNode(div, inspector);
+
+  let fontSize = getComputedViewPropertyValue(view, "font-size");
+  is(fontSize, "10px", "The computed view shows the right font-size");
+
+  info("Changing the node's style and waiting for the update");
+  let onUpdated = inspector.once("computed-view-refreshed");
+  div.style.cssText = "font-size: 15px; color: red;";
+  yield onUpdated;
+
+  fontSize = getComputedViewPropertyValue(view, "font-size");
+  is(fontSize, "15px", "The computed view shows the updated font-size");
+  let color = getComputedViewPropertyValue(view, "color");
+  is(color, "#F00", "The computed view also shows the color now");
+});

browser/devtools/styleinspector/test/browser_computedview_refresh-on-style-change_02.js

@@ -0,0 +1,40 @@
+/* vim: set ft=javascript ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the computed view refreshes when the current node has its style
+// changed, even if the view is not the active one
+
+const TESTCASE_URI = 'data:text/html;charset=utf-8,' +
+                     '<div id="testdiv" style="font-size:10px;">Test div!</div>';
+
+let test = asyncTest(function*() {
+  yield addTab(TESTCASE_URI);
+
+  info("Getting the test node");
+  let div = getNode("#testdiv");
+
+  info("Opening the computed view and selecting the test node");
+  let {toolbox, inspector, view} = yield openComputedView();
+  yield selectNode(div, inspector);
+
+  let fontSize = getComputedViewPropertyValue(view, "font-size");
+  is(fontSize, "10px", "The computed view shows the right font-size");
+
+  info("Now switching to the rule view");
+  yield openRuleView();
+
+  info("Changing the node's style and waiting for the update");
+  let onUpdated = inspector.once("computed-view-refreshed");
+  div.style.cssText = "font-size: 20px; color: blue; text-align: center";
+  yield onUpdated;
+
+  fontSize = getComputedViewPropertyValue(view, "font-size");
+  is(fontSize, "20px", "The computed view shows the updated font-size");
+  let color = getComputedViewPropertyValue(view, "color");
+  is(color, "#00F", "The computed view also shows the color now");
+  let textAlign = getComputedViewPropertyValue(view, "text-align");
+  is(textAlign, "center", "The computed view also shows the text-align now");
+});

browser/devtools/styleinspector/test/browser_ruleview_refresh-on-style-change.js

@@ -0,0 +1,41 @@
+/* vim: set ft=javascript ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the rule view refreshes when the current node has its style
+// changed
+
+const TESTCASE_URI = 'data:text/html;charset=utf-8,' +
+                     '<div id="testdiv" style="font-size:10px;">Test div!</div>';
+
+let test = asyncTest(function*() {
+  yield addTab(TESTCASE_URI);
+
+  Services.prefs.setCharPref("devtools.defaultColorUnit", "name");
+
+  info("Getting the test node");
+  let div = getNode("#testdiv");
+
+  info("Opening the rule view and selecting the test node");
+  let {toolbox, inspector, view} = yield openRuleView();
+  yield selectNode(div, inspector);
+
+  let fontSize = getRuleViewPropertyValue(view, "element", "font-size");
+  is(fontSize, "10px", "The rule view shows the right font-size");
+
+  info("Changing the node's style and waiting for the update");
+  let onUpdated = inspector.once("rule-view-refreshed");
+  div.style.cssText = "font-size: 3em; color: lightgoldenrodyellow; text-align: right; text-transform: uppercase";
+  yield onUpdated;
+
+  let textAlign = getRuleViewPropertyValue(view, "element", "text-align");
+  is(textAlign, "right", "The rule view shows the new text align.");
+  let color = getRuleViewPropertyValue(view, "element", "color");
+  is(color, "lightgoldenrodyellow", "The rule view shows the new color.")
+  let fontSize = getRuleViewPropertyValue(view, "element", "font-size");
+  is(fontSize, "3em", "The rule view shows the new font size.");
+  let textTransform = getRuleViewPropertyValue(view, "element", "text-transform");
+  is(textTransform, "uppercase", "The rule view shows the new text transform.");
+});

browser/devtools/styleinspector/test/head.js

@@ -34,9 +34,14 @@ registerCleanupFunction(() => {
   }
 });
 
+// Uncomment to log events
 // Services.prefs.setBoolPref("devtools.dump.emit", true);
+
+// Clean-up all prefs that might have been changed during a test run
+// (safer here because if the test fails, then the pref is never reverted)
 registerCleanupFunction(() => {
   Services.prefs.clearUserPref("devtools.dump.emit");
+  Services.prefs.clearUserPref("devtools.defaultColorUnit");
 });
 
 /**
@@ -477,7 +482,7 @@ function hasSideBarTab(inspector, id) {
 function getRuleViewRule(view, selectorText) {
   let rule;
   for (let r of view.doc.querySelectorAll(".ruleview-rule")) {
-    let selector = r.querySelector(".ruleview-selector-matched");
+    let selector = r.querySelector(".ruleview-selector, .ruleview-selector-matched");
     if (selector && selector.textContent === selectorText) {
       rule = r;
       break;
@@ -515,6 +520,20 @@ function getRuleViewProperty(view, selectorText, propertyName) {
   return prop;
 }
 
+/**
+ * Get the text value of the property corresponding to a given selector and name
+ * in the rule-view
+ * @param {CssRuleView} view The instance of the rule-view panel
+ * @param {String} selectorText The selector in the rule-view to look for the
+ * property in
+ * @param {String} propertyName The name of the property
+ * @return {String} The property value
+ */
+function getRuleViewPropertyValue(view, selectorText, propertyName) {
+  return getRuleViewProperty(view, selectorText, propertyName)
+    .valueSpan.textContent;
+}
+
 /**
  * Simulate a color change in a given color picker tooltip, and optionally wait
  * for a given element in the page to have its style changed as a result
@@ -655,6 +674,18 @@ function getComputedViewProperty(view, name) {
   return prop;
 }
 
+/**
+ * Get the text value of the property corresponding to a given name in the
+ * computed-view
+ * @param {CssHtmlTree} view The instance of the computed view panel
+ * @param {String} name The name of the property to retrieve
+ * @return {String} The property value
+ */
+function getComputedViewPropertyValue(view, selectorText, propertyName) {
+  return getComputedViewProperty(view, selectorText, propertyName)
+    .valueSpan.textContent;
+}
+
 /**
  * Expand a given property, given its index in the current property list of
  * the computed view