Bug 1512956 - Ensure empty string is considered valid CSS authoredText; r=pbro

When removing all declarations from a rule via the Rule view, the authoredText value ends up as an empty string.
This patch ensures that the fallback cssText is not used in that case because that accidentally restores the whole declaration block when re-parsing the text of the rule.

Differential Revision: https://phabricator.services.mozilla.com/D14753

--HG--
extra : moz-landing-system : lando

devtools/client/inspector/rules/test/browser.ini

@@ -126,6 +126,7 @@ skip-if = (os == "linux") # Bug 1356214
 skip-if = (verify && debug && os == 'win')
 [browser_rules_edit-property-remove_02.js]
 [browser_rules_edit-property-remove_03.js]
+[browser_rules_edit-property-remove_04.js]
 [browser_rules_edit-property_01.js]
 [browser_rules_edit-property_02.js]
 [browser_rules_edit-property_03.js]

devtools/client/inspector/rules/test/browser_rules_edit-property-remove_04.js

@@ -0,0 +1,46 @@
+/* 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";
+
+// Tests that removing the only declaration from a rule and unselecting then re-selecting
+// the element will not restore the removed declaration. Bug 1512956
+
+const TEST_URI = `
+  <style type='text/css'>
+  #testid {
+    color: #00F;
+  }
+  </style>
+  <div id='testid'>Styled Node</div>
+  <div id='empty'></div>
+`;
+
+add_task(async function() {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const {inspector, view} = await openRuleView();
+
+  info("Select original node");
+  await selectNode("#testid", inspector);
+
+  info("Get the first property in the #testid rule");
+  const rule = getRuleViewRuleEditor(view, 1).rule;
+  const prop = rule.textProps[0];
+
+  info("Delete the property name to remove the declaration");
+  const onRuleViewChanged = view.once("ruleview-changed");
+  await removeProperty(view, prop, false);
+  info("Wait for Rule view to update");
+  await onRuleViewChanged;
+
+  is(rule.textProps.length, 0, "No CSS properties left on the rule");
+
+  info("Select another node");
+  await selectNode("#empty", inspector);
+
+  info("Select original node again");
+  await selectNode("#testid", inspector);
+
+  is(rule.textProps.length, 0, "Still no CSS properties on the rule");
+});

devtools/server/actors/styles.js

@@ -1265,9 +1265,11 @@ var StyleRuleActor = protocol.ActorClassWithSpec(styleRuleSpec, {
     // and so that we can safely determine if a declaration is valid rather than
     // have the client guess it.
     if (form.authoredText || form.cssText) {
-      const declarations = parseNamedDeclarations(isCssPropertyKnown,
-                                                form.authoredText || form.cssText,
-                                                true);
+      // authoredText may be an empty string when deleting all properties; it's ok to use.
+      const cssText = (typeof form.authoredText === "string")
+        ? form.authoredText
+        : form.cssText;
+      const declarations = parseNamedDeclarations(isCssPropertyKnown, cssText, true);
 
       // We need to grab CSS from the window, since calling supports() on the
       // one from the current global will fail due to not being an HTML global.

devtools/shared/fronts/styles.js

@@ -133,7 +133,9 @@ class StyleRuleFront extends FrontClassWithSpec(styleRuleSpec) {
     return this._form.cssText;
   }
   get authoredText() {
-    return this._form.authoredText || this._form.cssText;
+    return (typeof this._form.authoredText === "string")
+      ? this._form.authoredText
+      : this._form.cssText;
   }
   get declarations() {
     return this._form.declarations || [];