Bug 1221545 - Allow for the Style Editor to be disabled. r=jdescottes

devtools/client/definitions.js

@@ -188,6 +188,7 @@ Tools.styleEditor = {
   id: "styleeditor",
   key: l10n("open.commandkey", styleEditorStrings),
   ordinal: 4,
+  visibilityswitch: "devtools.styleeditor.enabled",
   accesskey: l10n("open.accesskey", styleEditorStrings),
   modifiers: "shift",
   icon: "chrome://devtools/skin/images/tool-styleeditor.svg",

devtools/client/inspector/rules/test/browser_rules_style-editor-link.js

@@ -61,6 +61,7 @@ add_task(function* () {
   yield testFirstInlineStyleSheet(view, toolbox, testActor);
   yield testSecondInlineStyleSheet(view, toolbox, testActor);
   yield testExternalStyleSheet(view, toolbox, testActor);
+  yield testDisabledStyleEditor(view, toolbox);
 });
 
 function* testInlineStyle(view) {
@@ -147,6 +148,35 @@ function* validateStyleEditorSheet(editor, expectedSheetIndex, testActor) {
   is(href, expectedHref, "loaded stylesheet href matches document stylesheet");
 }
 
+function* testDisabledStyleEditor(view, toolbox) {
+  info("Testing with the style editor disabled");
+
+  info("Switching to the inspector panel in the toolbox");
+  yield toolbox.selectTool("inspector");
+
+  info("Disabling the style editor");
+  Services.prefs.setBoolPref("devtools.styleeditor.enabled", false);
+  gDevTools.emit("tool-unregistered", "styleeditor");
+
+  info("Clicking on a link");
+  testUnselectableRuleViewLink(view, 1);
+  clickLinkByIndex(view, 1);
+
+  is(toolbox.currentToolId, "inspector", "The click should have no effect");
+
+  info("Enabling the style editor");
+  Services.prefs.setBoolPref("devtools.styleeditor.enabled", true);
+  gDevTools.emit("tool-registered", "styleeditor");
+
+  info("Clicking on a link");
+  let onStyleEditorSelected = toolbox.once("styleeditor-selected");
+  clickLinkByIndex(view, 1);
+  yield onStyleEditorSelected;
+  is(toolbox.currentToolId, "styleeditor", "Style Editor should be selected");
+
+  Services.prefs.clearUserPref("devtools.styleeditor.enabled");
+}
+
 function testRuleViewLinkLabel(view) {
   let link = getRuleViewLinkByIndex(view, 2);
   let labelElem = link.querySelector(".ruleview-rule-source-label");
@@ -159,6 +189,13 @@ function testRuleViewLinkLabel(view) {
     "rule view stylesheet tooltip text matches the full URI path");
 }
 
+function testUnselectableRuleViewLink(view, index) {
+  let link = getRuleViewLinkByIndex(view, index);
+  let unselectable = link.hasAttribute("unselectable");
+
+  ok(unselectable, "Rule view is unselectable");
+}
+
 function clickLinkByIndex(view, index) {
   let link = getRuleViewLinkByIndex(view, index);
   link.scrollIntoView();

devtools/client/inspector/rules/views/rule-editor.js

@@ -60,6 +60,7 @@ function RuleEditor(ruleView, rule) {
 
   this.ruleView = ruleView;
   this.doc = this.ruleView.styleDocument;
+  this.toolbox = this.ruleView.inspector.toolbox;
   this.rule = rule;
 
   this.isEditable = !rule.isSystem;
@@ -71,8 +72,11 @@ function RuleEditor(ruleView, rule) {
   this._newPropertyDestroy = this._newPropertyDestroy.bind(this);
   this._onSelectorDone = this._onSelectorDone.bind(this);
   this._locationChanged = this._locationChanged.bind(this);
+  this.updateSourceLink = this.updateSourceLink.bind(this);
 
   this.rule.domRule.on("location-changed", this._locationChanged);
+  this.toolbox.on("tool-registered", this.updateSourceLink);
+  this.toolbox.on("tool-unregistered", this.updateSourceLink);
 
   this._create();
 }
@@ -80,12 +84,13 @@ function RuleEditor(ruleView, rule) {
 RuleEditor.prototype = {
   destroy: function () {
     this.rule.domRule.off("location-changed");
+    this.toolbox.off("tool-registered", this.updateSourceLink);
+    this.toolbox.off("tool-unregistered", this.updateSourceLink);
   },
 
   get isSelectorEditable() {
-    let toolbox = this.ruleView.inspector.toolbox;
     let trait = this.isEditable &&
-      toolbox.target.client.traits.selectorEditable &&
+      this.toolbox.target.client.traits.selectorEditable &&
       this.rule.domRule.type !== ELEMENT_STYLE &&
       this.rule.domRule.type !== CSSRule.KEYFRAME_RULE;
 
@@ -225,6 +230,12 @@ RuleEditor.prototype = {
 
     sourceLabel.setAttribute("tooltiptext", sourceHref + sourceLine);
 
+    if (this.toolbox.isToolRegistered("styleeditor")) {
+      this.source.removeAttribute("unselectable");
+    } else {
+      this.source.setAttribute("unselectable", true);
+    }
+
     if (this.rule.isSystem) {
       let uaLabel = _strings.GetStringFromName("rule.userAgentStyles");
       sourceLabel.setAttribute("value", uaLabel + " " + title);
@@ -233,14 +244,14 @@ RuleEditor.prototype = {
       // fly and the URI is not registered with the about: handler.
       // https://bugzilla.mozilla.org/show_bug.cgi?id=935803#c37
       if (sourceHref === "about:PreferenceStyleSheet") {
-        sourceLabel.parentNode.setAttribute("unselectable", "true");
+        this.source.setAttribute("unselectable", "true");
         sourceLabel.setAttribute("value", uaLabel);
         sourceLabel.removeAttribute("tooltiptext");
       }
     } else {
       sourceLabel.setAttribute("value", title);
       if (this.rule.ruleLine === -1 && this.rule.domRule.parentStyleSheet) {
-        sourceLabel.parentNode.setAttribute("unselectable", "true");
+        this.source.setAttribute("unselectable", "true");
       }
     }