Bug 1159109 - The MDN tooltip should be controlled by a pref. r=pbrosset

--HG--
extra : rebase_source : 2a13baf09fd96856b87343b3e8c616e70a8979f7

browser/app/profile/firefox.js

@@ -1396,6 +1396,8 @@ pref("devtools.inspector.imagePreviewTooltipSize", 300);
 pref("devtools.inspector.showUserAgentStyles", false);
 // Show all native anonymous content (like controls in <video> tags)
 pref("devtools.inspector.showAllAnonymousContent", false);
+// Enable the MDN docs tooltip
+pref("devtools.inspector.mdnDocsTooltip.enabled", true);
 
 // DevTools default color unit
 pref("devtools.defaultColorUnit", "hex");

browser/devtools/styleinspector/rule-view.js

@@ -25,6 +25,7 @@ const HTML_NS = "http://www.w3.org/1999/xhtml";
 const XUL_NS = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
 const PREF_UA_STYLES = "devtools.inspector.showUserAgentStyles";
 const PREF_DEFAULT_COLOR_UNIT = "devtools.defaultColorUnit";
+const PREF_ENABLE_MDN_DOCS_TOOLTIP = "devtools.inspector.mdnDocsTooltip.enabled";
 const PROPERTY_NAME_CLASS = "ruleview-propertyname";
 const FILTER_CHANGED_TIMEOUT = 150;
 
@@ -1153,8 +1154,10 @@ function CssRuleView(aInspector, aDoc, aStore, aPageStyle) {
   this._prefObserver.on(PREF_ORIG_SOURCES, this._onSourcePrefChanged);
   this._prefObserver.on(PREF_UA_STYLES, this._handlePrefChange);
   this._prefObserver.on(PREF_DEFAULT_COLOR_UNIT, this._handlePrefChange);
+  this._prefObserver.on(PREF_ENABLE_MDN_DOCS_TOOLTIP, this._handlePrefChange);
 
   this.showUserAgentStyles = Services.prefs.getBoolPref(PREF_UA_STYLES);
+  this.enableMdnDocsTooltip = Services.prefs.getBoolPref(PREF_ENABLE_MDN_DOCS_TOOLTIP);
 
   let options = {
     autoSelect: true,
@@ -1352,7 +1355,8 @@ CssRuleView.prototype = {
     var showOrig = Services.prefs.getBoolPref(PREF_ORIG_SOURCES);
     this.menuitemSources.setAttribute("checked", showOrig);
 
-    this.menuitemShowMdnDocs.hidden = !this.doc.popupNode.parentNode
+    this.menuitemShowMdnDocs.hidden = !this.enableMdnDocsTooltip ||
+                                      !this.doc.popupNode.parentNode
                                       .classList.contains(PROPERTY_NAME_CLASS);
 
     this.menuitemAddRule.disabled = this.inspector.selection.isAnonymousNode();
@@ -1595,6 +1599,10 @@ CssRuleView.prototype = {
       this.showUserAgentStyles = Services.prefs.getBoolPref(pref);
     }
 
+    if (pref === PREF_ENABLE_MDN_DOCS_TOOLTIP) {
+      this.enableMdnDocsTooltip = Services.prefs.getBoolPref(pref);
+    }
+
     // Reselect the currently selected element
     let refreshOnPrefs = [PREF_UA_STYLES, PREF_DEFAULT_COLOR_UNIT];
     if (refreshOnPrefs.indexOf(pref) > -1) {
@@ -1699,6 +1707,7 @@ CssRuleView.prototype = {
     this._prefObserver.off(PREF_ORIG_SOURCES, this._onSourcePrefChanged);
     this._prefObserver.off(PREF_UA_STYLES, this._handlePrefChange);
     this._prefObserver.off(PREF_DEFAULT_COLOR_UNIT, this._handlePrefChange);
+    this._prefObserver.off(PREF_ENABLE_MDN_DOCS_TOOLTIP, this._handlePrefChange);
     this._prefObserver.destroy();
 
     this._outputParser = null;

browser/devtools/styleinspector/test/browser.ini

@@ -74,6 +74,7 @@ support-files =
 skip-if = e10s # Bug 1039528: "inspect element" contextual-menu doesn't work with e10s
 [browser_ruleview_context-menu-show-mdn-docs-01.js]
 [browser_ruleview_context-menu-show-mdn-docs-02.js]
+[browser_ruleview_context-menu-show-mdn-docs-03.js]
 [browser_ruleview_cubicbezier-appears-on-swatch-click.js]
 [browser_ruleview_cubicbezier-commit-on-ENTER.js]
 [browser_ruleview_cubicbezier-revert-on-ESC.js]

browser/devtools/styleinspector/test/browser_ruleview_context-menu-show-mdn-docs-03.js

@@ -0,0 +1,116 @@
+/* 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/ */
+
+/**
+ * This file tests the "devtools.inspector.mdnDocsTooltip.enabled" preference,
+ * that we use to enable/disable the MDN tooltip in the Inspector.
+ *
+ * The desired behavior is:
+ * - if the preference is true, show the "Show MDN Docs" context menu item
+ * - if the preference is false, don't show the item
+ * - listen for changes to the pref, so we can show/hide the item dynamically
+ */
+
+"use strict";
+
+const { PrefObserver } = devtools.require("devtools/styleeditor/utils");
+const PREF_ENABLE_MDN_DOCS_TOOLTIP = "devtools.inspector.mdnDocsTooltip.enabled";
+const PROPERTY_NAME_CLASS = "ruleview-propertyname";
+
+const TEST_DOC = `
+<html>
+  <body>
+    <div style="color: red">
+      Test the pref to enable/disable the "Show MDN Docs" context menu option
+    </div>
+  </body>
+</html>`;
+
+add_task(function* () {
+  info("Ensure the pref is true to begin with");
+  let initial = Services.prefs.getBoolPref(PREF_ENABLE_MDN_DOCS_TOOLTIP);
+  if (initial != true) {
+    setBooleanPref(PREF_ENABLE_MDN_DOCS_TOOLTIP, true);
+  }
+
+  yield addTab("data:text/html;charset=utf8," + encodeURIComponent(TEST_DOC));
+
+  let {inspector, view} = yield openRuleView();
+  yield selectNode("div", inspector);
+  yield testMdnContextMenuItemVisibility(view, true);
+
+  yield setBooleanPref(PREF_ENABLE_MDN_DOCS_TOOLTIP, false);
+  yield testMdnContextMenuItemVisibility(view, false);
+
+  info("Close the Inspector");
+  let target = TargetFactory.forTab(gBrowser.selectedTab);
+  yield gDevTools.closeToolbox(target);
+
+  ({inspector, view} = yield openRuleView());
+  yield selectNode("div", inspector);
+  yield testMdnContextMenuItemVisibility(view, false);
+
+  yield setBooleanPref(PREF_ENABLE_MDN_DOCS_TOOLTIP, true);
+  yield testMdnContextMenuItemVisibility(view, true);
+
+  info("Ensure the pref is reset to its initial value");
+  let eventual = Services.prefs.getBoolPref(PREF_ENABLE_MDN_DOCS_TOOLTIP);
+  if (eventual != initial) {
+    setBooleanPref(PREF_ENABLE_MDN_DOCS_TOOLTIP, initial);
+  }
+});
+
+/**
+ * Set a boolean pref, and wait for the pref observer to
+ * trigger, so that code listening for the pref change
+ * has had a chance to update itself.
+ *
+ * @param pref {string} Name of the pref to change
+ * @param state {boolean} Desired value of the pref.
+ *
+ * Note that if the pref already has the value in `state`,
+ * then the prefObserver will not trigger. So you should only
+ * call this function if you know the pref's current value is
+ * not `state`.
+ */
+function* setBooleanPref(pref, state) {
+  let oncePrefChanged = promise.defer();
+  let prefObserver = new PrefObserver("devtools.");
+  prefObserver.on(pref, oncePrefChanged.resolve);
+
+  info("Set the pref " + pref + " to: " + state);
+  Services.prefs.setBoolPref(pref, state);
+
+  info("Wait for prefObserver to call back so the UI can update");
+  yield oncePrefChanged.promise;
+  prefObserver.off(pref, oncePrefChanged.resolve);
+}
+
+/**
+ * Test whether the MDN tooltip context menu item is visible when it should be.
+ *
+ * @param view The rule view
+ * @param shouldBeVisible {boolean} Whether we expect the context
+ * menu item to be visible or not.
+ */
+function* testMdnContextMenuItemVisibility(view, shouldBeVisible) {
+  let message = shouldBeVisible? "shown": "hidden";
+  info("Test that MDN context menu item is " + message);
+
+  info("Set a CSS property name as popupNode");
+  let root = rootElement(view);
+  let node = root.querySelector("." + PROPERTY_NAME_CLASS).firstChild;
+  view.doc.popupNode = node;
+
+  info("Update context menu state");
+  view._contextMenuUpdate();
+  let isVisible = !view.menuitemShowMdnDocs.hidden;
+  is(isVisible, shouldBeVisible,
+     "The MDN context menu item is " + message);
+}
+
+/**
+ * Returns the root element for the rule view.
+ */
+let rootElement = view => (view.element) ? view.element : view.styleDocument;