Bug 1224121 - fall back to non-authored editing for CSSOM-created rules; r=pbrosset

2015-11-17 11:00:25 -07:00 · 2015-11-17 11:00:25 -07:00 · c543f1ba1f
--- a/devtools/client/styleinspector/rule-view.js
+++ b/devtools/client/styleinspector/rule-view.js
@ -569,11 +569,12 @@ Rule.prototype = {
  getOriginalSourceStrings: function() {
    return this.domRule.getOriginalLocation().then(({href, line, mediaText}) => {
      let mediaString = mediaText ? " @" + mediaText : "";
+      let linePart = line > 0 ? (":" + line) : "";

      let sourceStrings = {
-        full: (href || CssLogic.l10n("rule.sourceInline")) + ":" +
-          line + mediaString,
-        short: CssLogic.shortSource({href: href}) + ":" + line + mediaString
+        full: (href || CssLogic.l10n("rule.sourceInline")) + linePart +
+          mediaString,
+        short: CssLogic.shortSource({href: href}) + linePart + mediaString
      };

      return sourceStrings;
--- a/devtools/client/styleinspector/test/browser.ini
+++ b/devtools/client/styleinspector/test/browser.ini
@ -11,6 +11,7 @@ support-files =
  doc_content_stylesheet_xul.css
  doc_copystyles.css
  doc_copystyles.html
+  doc_cssom.html
  doc_custom.html
  doc_filter.html
  doc_frame_script.js
@ -89,6 +90,7 @@ skip-if = e10s # Bug 1039528: "inspect element" contextual-menu doesn't work wit
 [browser_ruleview_context-menu-show-mdn-docs-02.js]
 [browser_ruleview_context-menu-show-mdn-docs-03.js]
 [browser_ruleview_copy_styles.js]
+[browser_ruleview_cssom.js]
 [browser_ruleview_cubicbezier-appears-on-swatch-click.js]
 [browser_ruleview_cubicbezier-commit-on-ENTER.js]
 [browser_ruleview_cubicbezier-revert-on-ESC.js]
--- a/devtools/client/styleinspector/test/browser_ruleview_cssom.js
+++ b/devtools/client/styleinspector/test/browser_ruleview_cssom.js
@ -0,0 +1,22 @@
+/* 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 to ensure that CSSOM doesn't make the rule view blow up.
+// https://bugzilla.mozilla.org/show_bug.cgi?id=1224121
+
+const TEST_URI = TEST_URL_ROOT + "doc_cssom.html";
+
+add_task(function*() {
+  yield addTab(TEST_URI);
+  let {inspector, view} = yield openRuleView();
+  yield selectNode("#target", inspector);
+
+  let elementStyle = view._elementStyle;
+  let rule = elementStyle.rules[1];
+
+  is(rule.textProps.length, 1, "rule should have one property");
+  is(rule.textProps[0].name, "color", "the property should be 'color'");
+});
--- a/devtools/client/styleinspector/test/doc_cssom.html
+++ b/devtools/client/styleinspector/test/doc_cssom.html
@ -0,0 +1,21 @@
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+<head>
+  <title>CSSOM test</title>
+
+  <script>
+    window.onload = function() {
+      let x = document.styleSheets[0];
+      x.insertRule("div { color: seagreen; }", 1);
+    };
+  </script>
+
+  <style>
+    span { }
+  </style>
+</head>
+<body>
+  <div id="target"> the ocean </div>
+</body>
+</html>
--- a/devtools/server/actors/styles.js
+++ b/devtools/server/actors/styles.js
@ -1154,6 +1154,11 @@ var StyleRuleActor = protocol.ActorClass({
    // about: handler.
    // https://bugzilla.mozilla.org/show_bug.cgi?id=935803#c37
    return !!(this._parentSheet &&
+              // If a rule does not have source, then it has been
+              // modified via CSSOM; and we should fall back to
+              // non-authored editing.
+              // https://bugzilla.mozilla.org/show_bug.cgi?id=1224121
+              this.sheetActor.allRulesHaveSource() &&
              this._parentSheet.href !== "about:PreferenceStyleSheet");
  },

--- a/devtools/server/actors/stylesheets.js
+++ b/devtools/server/actors/stylesheets.js
@ -482,6 +482,30 @@ var StyleSheetActor = protocol.ActorClass({
    this._transitionRefCount = 0;
  },

+  /**
+   * Test whether all the rules in this sheet have associated source.
+   * @return {Boolean} true if all the rules have source; false if
+   *         some rule was created via CSSOM.
+   */
+  allRulesHaveSource: function() {
+    let rules;
+    try {
+      rules = this.rawSheet.cssRules;
+    } catch (e) {
+      // sheet isn't loaded yet
+      return true;
+    }
+
+    for (let i = 0; i < rules.length; i++) {
+      let rule = rules[i];
+      if (DOMUtils.getRelativeRuleLine(rule) === 0) {
+        return false;
+      }
+    }
+
+    return true;
+  },
+
  /**
   * Get the raw stylesheet's cssRules once the sheet has been loaded.
   *