Bug 1173298 - Disable add rule button for non-element nodes and anonymous elements. r=bgrins

--HG--
extra : rebase_source : f623f72d4258fd41339241072ab70ce76f3a1abd

browser/devtools/styleinspector/rule-view.js

@@ -1859,6 +1859,16 @@ CssRuleView.prototype = {
     });
   },
 
+  /**
+   * Disables add rule button when needed
+   */
+  refreshAddRuleButtonState: function() {
+    let shouldBeDisabled = !this._viewedElement ||
+                           !this.inspector.selection.isElementNode() ||
+                           this.inspector.selection.isAnonymousNode();
+    this.addRuleButton.disabled = shouldBeDisabled;
+  },
+
   setPageStyle: function(aPageStyle) {
     this.pageStyle = aPageStyle;
   },
@@ -2106,6 +2116,8 @@ CssRuleView.prototype = {
     this.clearPseudoClassPanel();
 
     this._viewedElement = aElement;
+    this.refreshAddRuleButtonState();
+
     if (!this._viewedElement) {
       this._showEmpty();
       this.refreshPseudoClassPanel();

browser/devtools/styleinspector/test/browser.ini

@@ -57,6 +57,7 @@ support-files =
 [browser_ruleview_add-rule_01.js]
 [browser_ruleview_add-rule_02.js]
 [browser_ruleview_add-rule_03.js]
+[browser_ruleview_add-rule_04.js]
 [browser_ruleview_add-rule_pseudo_class.js]
 [browser_ruleview_colorpicker-and-image-tooltip_01.js]
 [browser_ruleview_colorpicker-and-image-tooltip_02.js]

browser/devtools/styleinspector/test/browser_ruleview_add-rule_04.js

@@ -0,0 +1,54 @@
+/* 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 if the `Add rule` button disables itself properly for non-element nodes
+// and anonymous element
+
+let PAGE_CONTENT = `
+  <style type="text/css">
+    #pseudo::before {
+      content: "before";
+    }
+  </style>
+  <div id="pseudo"></div>
+  <div id="testid">Test Node</div>`;
+
+add_task(function*() {
+  yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(PAGE_CONTENT));
+
+  info("Opening the rule-view");
+  let {toolbox, inspector, view} = yield openRuleView();
+
+  info("Running test");
+  yield testDisabledButton(inspector, view);
+});
+
+function* testDisabledButton(inspector, view) {
+  let node = "#testid";
+
+  info("Selecting a real element");
+  yield selectNode(node, inspector);
+  ok(!view.addRuleButton.disabled, "Add rule button should be enabled");
+
+  info("Select a null element");
+  yield view.selectElement(null);
+  ok(view.addRuleButton.disabled, "Add rule button should be disabled");
+
+  info("Selecting a real element");
+  yield selectNode(node, inspector);
+  ok(!view.addRuleButton.disabled, "Add rule button should be enabled");
+
+  info("Selecting a pseudo element");
+  let pseudo = yield getNodeFront("#pseudo", inspector);
+  let children = yield inspector.walker.children(pseudo);
+  let before = children.nodes[0];
+  yield selectNode(before, inspector);
+  ok(view.addRuleButton.disabled, "Add rule button should be disabled");
+
+  info("Selecting a real element");
+  yield selectNode(node, inspector);
+  ok(!view.addRuleButton.disabled, "Add rule button should be enabled");
+}

browser/themes/shared/devtools/toolbars.inc.css

@@ -266,6 +266,7 @@
 .devtools-button {
   border: 0 solid var(--theme-splitter-color);
   background: var(--theme-toolbar-background);
+  color: var(--theme-body-color);
   margin: 0;
   padding: 0;
   min-width: 32px;
@@ -316,6 +317,11 @@
   background-repeat: no-repeat;
 }
 
+.devtools-button[disabled]::before,
+.devtools-button:disabled::before {
+  opacity: 0.5;
+}
+
 @media (min-resolution: 1.25dppx) {
   .devtools-button::before {
     background-size: 32px;