From 43c042a6e54778df9a27da97a3b57bfdbf8aee6e Mon Sep 17 00:00:00 2001
From: Tim Nguyen <ntim.bugs@gmail.com>
Date: Wed, 10 Jun 2015 11:42:00 +0200
Subject: [PATCH] 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  | 12 +++++
 .../devtools/styleinspector/test/browser.ini  |  1 +
 .../test/browser_ruleview_add-rule_04.js      | 54 +++++++++++++++++++
 .../themes/shared/devtools/toolbars.inc.css   |  6 +++
 4 files changed, 73 insertions(+)
 create mode 100644 browser/devtools/styleinspector/test/browser_ruleview_add-rule_04.js

diff --git a/browser/devtools/styleinspector/rule-view.js b/browser/devtools/styleinspector/rule-view.js
index d5ca03aa2395..234e0cb2d463 100644
--- a/browser/devtools/styleinspector/rule-view.js
+++ b/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();
diff --git a/browser/devtools/styleinspector/test/browser.ini b/browser/devtools/styleinspector/test/browser.ini
index eb27f1f8cb5c..f505ce7f86f8 100644
--- a/browser/devtools/styleinspector/test/browser.ini
+++ b/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]
diff --git a/browser/devtools/styleinspector/test/browser_ruleview_add-rule_04.js b/browser/devtools/styleinspector/test/browser_ruleview_add-rule_04.js
new file mode 100644
index 000000000000..479a572a9c52
--- /dev/null
+++ b/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");
+}
diff --git a/browser/themes/shared/devtools/toolbars.inc.css b/browser/themes/shared/devtools/toolbars.inc.css
index f38e5ac94d8a..8284d1c7f5ca 100644
--- a/browser/themes/shared/devtools/toolbars.inc.css
+++ b/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;