Bug 1382171 - Remove MDN Docs widget. r=jdescottes
authorTowkir Ahmed <towkir17@gmail.com>
Tue, 03 Oct 2017 09:13:00 -0400
changeset 426783 acaf22b66faf11a99001f4e4c1774691c859e419
parent 426782 bfde202ada8a039e81566ca0ca66a94b9de03684
child 426784 1693c7ab7478ffb5c081fd795f759319f130c8b0
push id97
push userfmarier@mozilla.com
push dateSat, 14 Oct 2017 01:12:59 +0000
reviewersjdescottes
bugs1382171
milestone58.0a1
Bug 1382171 - Remove MDN Docs widget. r=jdescottes
devtools/client/inspector/rules/rules.js
devtools/client/inspector/rules/test/browser.ini
devtools/client/inspector/rules/test/browser_rules_context-menu-show-mdn-docs-01.js
devtools/client/inspector/rules/test/browser_rules_context-menu-show-mdn-docs-02.js
devtools/client/inspector/rules/test/browser_rules_context-menu-show-mdn-docs-03.js
devtools/client/inspector/shared/style-inspector-menu.js
devtools/client/inspector/shared/tooltips-overlay.js
devtools/client/jar.mn
devtools/client/locales/en-US/inspector.properties
devtools/client/preferences/devtools.js
devtools/client/shared/test/browser.ini
devtools/client/shared/test/browser_mdn-docs-01.js
devtools/client/shared/test/browser_mdn-docs-02.js
devtools/client/shared/test/browser_mdn-docs-03.js
devtools/client/shared/test/doc_mdn-css-basic-testing.html
devtools/client/shared/test/doc_mdn-css-no-summary-or-syntax.html
devtools/client/shared/test/doc_mdn-css-no-summary.html
devtools/client/shared/test/doc_mdn-css-no-syntax.html
devtools/client/shared/test/doc_mdn-css-syntax-old-style.html
devtools/client/shared/test/doc_mdn-docs-01.html
devtools/client/shared/test/head.js
devtools/client/shared/widgets/MdnDocsWidget.js
devtools/client/shared/widgets/mdn-docs.css
devtools/client/shared/widgets/moz.build
devtools/client/shared/widgets/tooltip/CssDocsTooltip.js
devtools/client/shared/widgets/tooltip/moz.build
devtools/client/themes/commandline.css
devtools/client/themes/tooltips.css
devtools/shared/gcli/commands/index.js
devtools/shared/gcli/commands/mdn.js
devtools/shared/gcli/commands/moz.build
devtools/shared/locales/en-US/gclicommands.properties
devtools/shared/locales/en-US/styleinspector.properties
--- a/devtools/client/inspector/rules/rules.js
+++ b/devtools/client/inspector/rules/rules.js
@@ -34,18 +34,16 @@ const {createChild, promiseWarn, debounc
 const EventEmitter = require("devtools/shared/old-event-emitter");
 const KeyShortcuts = require("devtools/client/shared/key-shortcuts");
 const clipboardHelper = require("devtools/shared/platform/clipboard");
 const AutocompletePopup = require("devtools/client/shared/autocomplete-popup");
 
 const HTML_NS = "http://www.w3.org/1999/xhtml";
 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 FILTER_CHANGED_TIMEOUT = 150;
 const PREF_ORIG_SOURCES = "devtools.source-map.client-service.enabled";
 
 // This is used to parse user input when filtering.
 const FILTER_PROP_RE = /\s*([^:\s]*)\s*:\s*(.*?)\s*;?$/;
 // This is used to parse the filter search value to see if the filter
 // should be strict or not
 const FILTER_STRICT_RE = /\s*`(.*?)`\s*$/;
@@ -159,21 +157,18 @@ function CssRuleView(inspector, document
 
   this._handlePrefChange = this._handlePrefChange.bind(this);
   this._onSourcePrefChanged = this._onSourcePrefChanged.bind(this);
 
   this._prefObserver = new PrefObserver("devtools.");
   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);
 
   // The popup will be attached to the toolbox document.
   this.popup = new AutocompletePopup(inspector._toolbox.doc, {
     autoSelect: true,
     theme: "auto"
   });
 
   this._showEmpty();
--- a/devtools/client/inspector/rules/test/browser.ini
+++ b/devtools/client/inspector/rules/test/browser.ini
@@ -96,19 +96,16 @@ support-files =
 [browser_rules_computed-lists_01.js]
 [browser_rules_computed-lists_02.js]
 [browser_rules_completion-popup-hidden-after-navigation.js]
 [browser_rules_content_01.js]
 [browser_rules_content_02.js]
 [browser_rules_variables_01.js]
 [browser_rules_variables_02.js]
 skip-if = e10s && debug # Bug 1250058 - Docshell leak on debug e10s
-[browser_rules_context-menu-show-mdn-docs-01.js]
-[browser_rules_context-menu-show-mdn-docs-02.js]
-[browser_rules_context-menu-show-mdn-docs-03.js]
 [browser_rules_copy_styles.js]
 subsuite = clipboard
 skip-if = (os == 'linux' && bits == 32 && debug) # bug 1328915, disable linux32 debug devtools for timeouts
 [browser_rules_cssom.js]
 [browser_rules_cubicbezier-appears-on-swatch-click.js]
 [browser_rules_cubicbezier-commit-on-ENTER.js]
 [browser_rules_cubicbezier-revert-on-ESC.js]
 [browser_rules_custom.js]
deleted file mode 100644
--- a/devtools/client/inspector/rules/test/browser_rules_context-menu-show-mdn-docs-01.js
+++ /dev/null
@@ -1,144 +0,0 @@
-/* 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 code that integrates the Style Inspector's rule view
- * with the MDN docs tooltip.
- *
- * If you display the context click on a property name in the rule view, you
- * should see a menu item "Show MDN Docs". If you click that item, the MDN
- * docs tooltip should be shown, containing docs from MDN for that property.
- *
- * This file tests that the context menu item is shown when it should be
- * shown and hidden when it should be hidden.
- */
-
-"use strict";
-
-/**
- * The test document tries to confuse the context menu
- * code by having a tag called "padding" and a property
- * value called "margin".
- */
-
-const { PrefObserver } = require("devtools/client/shared/prefs");
-const PREF_ENABLE_MDN_DOCS_TOOLTIP =
-  "devtools.inspector.mdnDocsTooltip.enabled";
-
-const TEST_URI = `
-  <html>
-    <head>
-      <style>
-        padding {font-family: margin;}
-      </style>
-    </head>
-
-    <body>
-      <padding>MDN tooltip testing</padding>
-    </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) {
-    yield setBooleanPref(PREF_ENABLE_MDN_DOCS_TOOLTIP, true);
-  }
-
-  yield addTab("data:text/html;charset=utf8," + encodeURIComponent(TEST_URI));
-  let {inspector, view} = yield openRuleView();
-  yield selectNode("padding", inspector);
-  yield testMdnContextMenuItemVisibility(view);
-
-  info("Ensure the pref is reset to its initial value");
-  let eventual = Services.prefs.getBoolPref(PREF_ENABLE_MDN_DOCS_TOOLTIP);
-  if (eventual != initial) {
-    yield 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 prefObserver = new PrefObserver("devtools.");
-  let oncePrefChanged = new Promise(resolve => {
-    prefObserver.on(pref, onPrefChanged);
-
-    function onPrefChanged() {
-      prefObserver.off(pref, onPrefChanged);
-      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;
-}
-
-/**
- * Tests that the MDN context menu item is shown when it should be,
- * and hidden when it should be.
- *   - iterate through every node in the rule view
- *   - set that node as popupNode (the node that the context menu
- *   is shown for)
- *   - update the context menu's state
- *   - test that the MDN context menu item is hidden, or not,
- *   depending on popupNode
- */
-function* testMdnContextMenuItemVisibility(view) {
-  info("Test that MDN context menu item is shown only when it should be.");
-
-  let root = rootElement(view);
-  for (let node of iterateNodes(root)) {
-    info("Setting " + node + " as popupNode");
-    info("Creating context menu with " + node + " as popupNode");
-    let allMenuItems = openStyleContextMenuAndGetAllItems(view, node);
-    let menuitemShowMdnDocs = allMenuItems.find(item => item.label ===
-      STYLE_INSPECTOR_L10N.getStr("styleinspector.contextmenu.showMdnDocs"));
-
-    let isVisible = menuitemShowMdnDocs.visible;
-    let shouldBeVisible = isPropertyNameNode(node);
-    let message = shouldBeVisible ? "shown" : "hidden";
-    is(isVisible, shouldBeVisible,
-       "The MDN context menu item is " + message + " ; content : " +
-       node.textContent + " ; type : " + node.nodeType);
-  }
-}
-
-/**
- * Check if a node is a property name.
- */
-function isPropertyNameNode(node) {
-  return node.textContent === "font-family";
-}
-
-/**
- * A generator that iterates recursively through all child nodes of baseNode.
- */
-function* iterateNodes(baseNode) {
-  yield baseNode;
-
-  for (let child of baseNode.childNodes) {
-    yield* iterateNodes(child);
-  }
-}
-
-/**
- * Returns the root element for the rule view.
- */
-var rootElement = view => (view.element) ? view.element : view.styleDocument;
deleted file mode 100644
--- a/devtools/client/inspector/rules/test/browser_rules_context-menu-show-mdn-docs-02.js
+++ /dev/null
@@ -1,61 +0,0 @@
-/* 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 code that integrates the Style Inspector's rule view
- * with the MDN docs tooltip.
- *
- * If you display the context click on a property name in the rule view, you
- * should see a menu item "Show MDN Docs". If you click that item, the MDN
- * docs tooltip should be shown, containing docs from MDN for that property.
- *
- * This file tests that:
- * - clicking the context menu item shows the tooltip
- * - the tooltip content matches the property name for which the context menu was opened
- */
-
-"use strict";
-
-const {setBaseCssDocsUrl} =
-  require("devtools/client/shared/widgets/MdnDocsWidget");
-
-const PROPERTYNAME = "color";
-
-const TEST_DOC = `
-  <html>
-    <body>
-      <div style="color: red">
-        Test "Show MDN Docs" context menu option
-      </div>
-    </body>
-  </html>
-`;
-
-add_task(function* () {
-  yield addTab("data:text/html;charset=utf8," + encodeURIComponent(TEST_DOC));
-  let {inspector, view} = yield openRuleView();
-  yield selectNode("div", inspector);
-
-  setBaseCssDocsUrl(URL_ROOT);
-
-  info("Setting the popupNode for the MDN docs tooltip");
-
-  let {nameSpan} = getRuleViewProperty(view, "element", PROPERTYNAME);
-
-  let allMenuItems = openStyleContextMenuAndGetAllItems(view, nameSpan.firstChild);
-  let menuitemShowMdnDocs = allMenuItems.find(item => item.label ===
-    STYLE_INSPECTOR_L10N.getStr("styleinspector.contextmenu.showMdnDocs"));
-
-  let cssDocs = view.tooltips.getTooltip("cssDocs");
-
-  info("Showing the MDN docs tooltip");
-  let onShown = cssDocs.tooltip.once("shown");
-  menuitemShowMdnDocs.click();
-  yield onShown;
-  ok(true, "The MDN docs tooltip was shown");
-
-  info("Quick check that the tooltip contents are set");
-  let h1 = cssDocs.tooltip.container.querySelector(".mdn-property-name");
-  is(h1.textContent, PROPERTYNAME, "The MDN docs tooltip h1 is correct");
-});
deleted file mode 100644
--- a/devtools/client/inspector/rules/test/browser_rules_context-menu-show-mdn-docs-03.js
+++ /dev/null
@@ -1,123 +0,0 @@
-/* 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 } = require("devtools/client/shared/prefs");
-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) {
-    yield 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) {
-    yield 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 prefObserver = new PrefObserver("devtools.");
-  let oncePrefChanged = new Promise(resolve => {
-    prefObserver.on(pref, onPrefChanged);
-
-    function onPrefChanged() {
-      prefObserver.off(pref, onPrefChanged);
-      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;
-}
-
-/**
- * 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;
-  let allMenuItems = openStyleContextMenuAndGetAllItems(view, node);
-  let menuitemShowMdnDocs = allMenuItems.find(item => item.label ===
-    STYLE_INSPECTOR_L10N.getStr("styleinspector.contextmenu.showMdnDocs"));
-
-  let isVisible = menuitemShowMdnDocs.visible;
-  is(isVisible, shouldBeVisible,
-     "The MDN context menu item is " + message);
-}
-
-/**
- * Returns the root element for the rule view.
- */
-var rootElement = view => (view.element) ? view.element : view.styleDocument;
--- a/devtools/client/inspector/shared/style-inspector-menu.js
+++ b/devtools/client/inspector/shared/style-inspector-menu.js
@@ -20,18 +20,16 @@ const {
   VIEW_NODE_LOCATION_TYPE,
 } = require("devtools/client/inspector/shared/node-types");
 const clipboardHelper = require("devtools/shared/platform/clipboard");
 
 const STYLE_INSPECTOR_PROPERTIES = "devtools/shared/locales/styleinspector.properties";
 const {LocalizationHelper} = require("devtools/shared/l10n");
 const STYLE_INSPECTOR_L10N = new LocalizationHelper(STYLE_INSPECTOR_PROPERTIES);
 
-const PREF_ENABLE_MDN_DOCS_TOOLTIP =
-  "devtools.inspector.mdnDocsTooltip.enabled";
 const PREF_ORIG_SOURCES = "devtools.source-map.client-service.enabled";
 
 /**
  * Style inspector context menu
  *
  * @param {RuleView|ComputedView} view
  *        RuleView or ComputedView instance controlling this menu
  * @param {Object} options
@@ -52,17 +50,16 @@ function StyleInspectorMenu(view, option
   this._onCopyLocation = this._onCopyLocation.bind(this);
   this._onCopyPropertyDeclaration = this._onCopyPropertyDeclaration.bind(this);
   this._onCopyPropertyName = this._onCopyPropertyName.bind(this);
   this._onCopyPropertyValue = this._onCopyPropertyValue.bind(this);
   this._onCopyRule = this._onCopyRule.bind(this);
   this._onCopySelector = this._onCopySelector.bind(this);
   this._onCopyUrl = this._onCopyUrl.bind(this);
   this._onSelectAll = this._onSelectAll.bind(this);
-  this._onShowMdnDocs = this._onShowMdnDocs.bind(this);
   this._onToggleOrigSources = this._onToggleOrigSources.bind(this);
 }
 
 module.exports = StyleInspectorMenu;
 
 StyleInspectorMenu.prototype = {
   /**
    * Display the style inspector context menu
@@ -225,29 +222,16 @@ StyleInspectorMenu.prototype = {
         this._onAddNewRule();
       },
       visible: this.isRuleView,
       disabled: !this.isRuleView ||
                 this.inspector.selection.isAnonymousNode(),
     });
     menu.append(menuitemAddRule);
 
-    // Show MDN Docs
-    let mdnDocsAccessKey = "styleinspector.contextmenu.showMdnDocs.accessKey";
-    let menuitemShowMdnDocs = new MenuItem({
-      label: STYLE_INSPECTOR_L10N.getStr("styleinspector.contextmenu.showMdnDocs"),
-      accesskey: STYLE_INSPECTOR_L10N.getStr(mdnDocsAccessKey),
-      click: () => {
-        this._onShowMdnDocs();
-      },
-      visible: (Services.prefs.getBoolPref(PREF_ENABLE_MDN_DOCS_TOOLTIP) &&
-                                                    this._isPropertyName()),
-    });
-    menu.append(menuitemShowMdnDocs);
-
     // Show Original Sources
     let sourcesAccessKey = "styleinspector.contextmenu.toggleOrigSources.accessKey";
     let menuitemSources = new MenuItem({
       label: STYLE_INSPECTOR_L10N.getStr("styleinspector.contextmenu.toggleOrigSources"),
       accesskey: STYLE_INSPECTOR_L10N.getStr(sourcesAccessKey),
       click: () => {
         this._onToggleOrigSources();
       },
@@ -404,26 +388,16 @@ StyleInspectorMenu.prototype = {
       message =
         STYLE_INSPECTOR_L10N.getStr("styleinspector.copyImageDataUrlError");
     }
 
     clipboardHelper.copyString(message);
   }),
 
   /**
-   *  Show docs from MDN for a CSS property.
-   */
-  _onShowMdnDocs: function () {
-    let cssPropertyName = this.styleDocument.popupNode.textContent;
-    let anchor = this.styleDocument.popupNode.parentNode;
-    let cssDocsTooltip = this.view.tooltips.getTooltip("cssDocs");
-    cssDocsTooltip.show(anchor, cssPropertyName);
-  },
-
-  /**
    * Add a new rule to the current element.
    */
   _onAddNewRule: function () {
     this.view._onAddRule();
   },
 
   /**
    * Copy the rule source location of the current clicked node.
--- a/devtools/client/inspector/shared/tooltips-overlay.js
+++ b/devtools/client/inspector/shared/tooltips-overlay.js
@@ -113,21 +113,16 @@ TooltipsOverlay.prototype = {
         tooltip = new SwatchCubicBezierTooltip(doc);
         break;
       case "filterEditor":
         const SwatchFilterTooltip =
           require("devtools/client/shared/widgets/tooltip/SwatchFilterTooltip");
         tooltip = new SwatchFilterTooltip(doc,
           this._cssProperties.getValidityChecker(this.view.inspector.panelDoc));
         break;
-      case "cssDocs":
-        const CssDocsTooltip =
-          require("devtools/client/shared/widgets/tooltip/CssDocsTooltip");
-        tooltip = new CssDocsTooltip(doc);
-        break;
       case "previewTooltip":
         tooltip = new HTMLTooltip(doc, {
           type: "arrow",
           useXulWrapper: true
         });
         tooltip.startTogglingOnHover(this.view.element,
           this._onPreviewTooltipTargetHover.bind(this));
         break;
--- a/devtools/client/jar.mn
+++ b/devtools/client/jar.mn
@@ -90,17 +90,16 @@ devtools.jar:
 *   content/framework/dev-edition-promo/dev-edition-promo.css (framework/dev-edition-promo/dev-edition-promo.css)
     content/framework/dev-edition-promo/dev-edition-logo.png (framework/dev-edition-promo/dev-edition-logo.png)
     content/inspector/inspector.xhtml (inspector/inspector.xhtml)
     content/framework/connect/connect.xhtml (framework/connect/connect.xhtml)
     content/framework/connect/connect.css (framework/connect/connect.css)
     content/framework/connect/connect.js (framework/connect/connect.js)
     content/shared/widgets/graphs-frame.xhtml (shared/widgets/graphs-frame.xhtml)
     content/shared/widgets/cubic-bezier.css (shared/widgets/cubic-bezier.css)
-    content/shared/widgets/mdn-docs.css (shared/widgets/mdn-docs.css)
     content/shared/widgets/filter-widget.css (shared/widgets/filter-widget.css)
     content/shared/widgets/color-widget.css (shared/widgets/color-widget.css)
     content/shared/widgets/spectrum.css (shared/widgets/spectrum.css)
     content/aboutdebugging/aboutdebugging.xhtml (aboutdebugging/aboutdebugging.xhtml)
     content/aboutdebugging/aboutdebugging.css (aboutdebugging/aboutdebugging.css)
     content/aboutdebugging/initializer.js (aboutdebugging/initializer.js)
     content/responsive.html/index.xhtml (responsive.html/index.xhtml)
     content/responsive.html/index.js (responsive.html/index.js)
--- a/devtools/client/locales/en-US/inspector.properties
+++ b/devtools/client/locales/en-US/inspector.properties
@@ -60,24 +60,16 @@ eventsTooltip.unknownLocation=Unknown lo
 eventsTooltip.unknownLocationExplanation=The original location of this listener cannot be detected. Maybe the code is transpiled by a utility such as Babel.
 
 #LOCALIZATION NOTE: Used in the tooltip for Bubbling
 eventsTooltip.Bubbling=Bubbling
 
 #LOCALIZATION NOTE: Used in the tooltip for Capturing
 eventsTooltip.Capturing=Capturing
 
-# LOCALIZATION NOTE (docsTooltip.visitMDN): Shown in the tooltip that displays
-# help from MDN. This is a link to the complete MDN documentation page.
-docsTooltip.visitMDN=Visit MDN page
-
-# LOCALIZATION NOTE (docsTooltip.visitMDN): Shown in the docs tooltip when the MDN page
-# could not be loaded (for example, because of a connectivity problem).
-docsTooltip.loadDocsError=Could not load docs page.
-
 # LOCALIZATION NOTE (inspector.searchResultsCount): This is the label that
 # will show up next to the inspector search box. %1$S is the current result
 # index and %2$S is the total number of search results. For example: "3 of 9".
 # This won't be visible until the search box is updated in Bug 835896.
 inspector.searchResultsCount2=%1$S of %2$S
 
 # LOCALIZATION NOTE (inspector.searchResultsNone): This is the label that
 # will show up next to the inspector search box when no matches were found
--- a/devtools/client/preferences/devtools.js
+++ b/devtools/client/preferences/devtools.js
@@ -51,18 +51,16 @@ pref("devtools.inspector.remote", false)
 // Collapse pseudo-elements by default in the rule-view
 pref("devtools.inspector.show_pseudo_elements", false);
 // The default size for image preview tooltips in the rule-view/computed-view/markup-view
 pref("devtools.inspector.imagePreviewTooltipSize", 300);
 // Enable user agent style inspection in rule-view
 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", false);
 // Enable the new color widget
 pref("devtools.inspector.colorWidget.enabled", false);
 // Enable the CSS shapes highlighter
 pref("devtools.inspector.shapesHighlighter.enabled", false);
 
 // Enable the Font Inspector
 pref("devtools.fontinspector.enabled", true);
 
--- a/devtools/client/shared/test/browser.ini
+++ b/devtools/client/shared/test/browser.ini
@@ -13,22 +13,16 @@ support-files =
   doc_html_tooltip.xul
   doc_html_tooltip_arrow-01.xul
   doc_html_tooltip_arrow-02.xul
   doc_html_tooltip_hover.xul
   doc_html_tooltip_rtl.xul
   doc_inplace-editor_autocomplete_offset.xul
   doc_layoutHelpers-getBoxQuads.html
   doc_layoutHelpers.html
-  doc_mdn-css-basic-testing.html
-  doc_mdn-css-no-summary-or-syntax.html
-  doc_mdn-css-no-summary.html
-  doc_mdn-css-no-syntax.html
-  doc_mdn-css-syntax-old-style.html
-  doc_mdn-docs-01.html
   doc_options-view.xul
   doc_spectrum.html
   doc_tableWidget_basic.html
   doc_tableWidget_keyboard_interaction.xul
   doc_tableWidget_mouse_interaction.xul
   doc_templater_basic.html
   doc_toolbar_basic.html
   doc_toolbar_webconsole_errors_count.html
@@ -156,19 +150,16 @@ skip-if = e10s # Bug 1221911, bug 122228
 [browser_inplace-editor_autocomplete_offset.js]
 [browser_inplace-editor_maxwidth.js]
 [browser_keycodes.js]
 [browser_key_shortcuts.js]
 [browser_layoutHelpers.js]
 skip-if = e10s # Layouthelpers test should not run in a content page.
 [browser_layoutHelpers-getBoxQuads.js]
 skip-if = e10s # Layouthelpers test should not run in a content page.
-[browser_mdn-docs-01.js]
-[browser_mdn-docs-02.js]
-[browser_mdn-docs-03.js]
 [browser_num-l10n.js]
 [browser_options-view-01.js]
 [browser_outputparser.js]
 skip-if = e10s # Test intermittently fails with e10s. Bug 1124162.
 [browser_poller.js]
 [browser_prefs-01.js]
 [browser_prefs-02.js]
 [browser_require_raw.js]
deleted file mode 100644
--- a/devtools/client/shared/test/browser_mdn-docs-01.js
+++ /dev/null
@@ -1,168 +0,0 @@
-/* vim: set 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 MdnDocsWidget object, and specifically its
- * loadCssDocs() function.
- *
- * The MdnDocsWidget is initialized with a document which has a specific
- * structure. You then call loadCssDocs(), passing in a CSS property name.
- * MdnDocsWidget then fetches docs for that property by making an XHR to
- * a docs page, and loads the results into the document. While the XHR is
- * still not resolved the document is put into an "initializing" state in
- * which the devtools throbber is displayed.
- *
- * In this file we test:
- * - the initial state of the document before the docs have loaded
- * - the state of the document after the docs have loaded
- */
-
-"use strict";
-
-const {setBaseCssDocsUrl, MdnDocsWidget} = require("devtools/client/shared/widgets/MdnDocsWidget");
-
-/**
- * Test properties
- *
- * In the real tooltip, a CSS property name is used to look up an MDN page
- * for that property.
- * In the test code, the names defined here is used to look up a page
- * served by the test server.
- */
-const BASIC_TESTING_PROPERTY = "doc_mdn-css-basic-testing.html";
-
-const BASIC_EXPECTED_SUMMARY = "A summary of the property.";
-const BASIC_EXPECTED_SYNTAX = [{type: "comment", text: "/* The part we want   */"},
-                               {type: "text", text: "\n"},
-                               {type: "property-name", text: "this"},
-                               {type: "text", text: ":"},
-                               {type: "text", text: " "},
-                               {type: "property-value", text: "is-the-part-we-want"},
-                               {type: "text", text: ";"}];
-
-const URI_PARAMS =
-  "?utm_source=mozilla&utm_medium=firefox-inspector&utm_campaign=default";
-
-add_task(function* () {
-  setBaseCssDocsUrl(TEST_URI_ROOT);
-
-  yield addTab("about:blank");
-  let [host, win] = yield createHost("bottom",
-                                     CHROME_URL_ROOT + "doc_mdn-docs-01.html");
-  let widget = new MdnDocsWidget(win.document.querySelector("div"));
-
-  yield testTheBasics(widget);
-
-  host.destroy();
-  gBrowser.removeCurrentTab();
-});
-
-/**
- * Test all the basics
- * - initial content, before docs have loaded, is as expected
- * - throbber is set before docs have loaded
- * - contents are as expected after docs have loaded
- * - throbber is gone after docs have loaded
- * - mdn link text is correct and onclick behavior is correct
- */
-function* testTheBasics(widget) {
-  info("Test all the basic functionality in the widget");
-
-  info("Get the widget state before docs have loaded");
-  let promise = widget.loadCssDocs(BASIC_TESTING_PROPERTY);
-
-  info("Check initial contents before docs have loaded");
-  checkTooltipContents(widget.elements, {
-    propertyName: BASIC_TESTING_PROPERTY,
-    summary: "",
-    syntax: ""
-  });
-
-  // throbber is set
-  ok(widget.elements.info.classList.contains("devtools-throbber"),
-     "Throbber is set");
-
-  info("Now let the widget finish loading");
-  yield promise;
-
-  info("Check contents after docs have loaded");
-  checkTooltipContents(widget.elements, {
-    propertyName: BASIC_TESTING_PROPERTY,
-    summary: BASIC_EXPECTED_SUMMARY,
-    syntax: BASIC_EXPECTED_SYNTAX
-  });
-
-  // throbber is gone
-  ok(!widget.elements.info.classList.contains("devtools-throbber"),
-     "Throbber is not set");
-
-  info("Check that MDN link text is correct and onclick behavior is correct");
-
-  let mdnLink = widget.elements.linkToMdn;
-  let expectedHref = TEST_URI_ROOT + BASIC_TESTING_PROPERTY + URI_PARAMS;
-  is(mdnLink.href, expectedHref, "MDN link href is correct");
-
-  let uri = yield checkLinkClick(mdnLink);
-  is(uri, expectedHref, "New tab opened with the expected URI");
-}
-
- /**
-  * Clicking the "Visit MDN Page" in the tooltip panel
-  * should open a new browser tab with the page loaded.
-  *
-  * To test this we'll listen for a new tab opening, and
-  * when it does, add a listener to that new tab to tell
-  * us when it has loaded.
-  *
-  * Then we click the link.
-  *
-  * In the tab's load listener, we'll resolve the promise
-  * with the URI, which is expected to match the href
-  * in the orginal link.
-  *
-  * One complexity is that when you open a new tab,
-  * "about:blank" is first loaded into the tab before the
-  * actual page. So we ignore that first load event, and keep
-  * listening until "load" is triggered for a different URI.
-  */
-function checkLinkClick(link) {
-  function loadListener(tab) {
-    let browser = getBrowser().getBrowserForTab(tab);
-    let uri = browser.currentURI.spec;
-
-    info("New browser tab has loaded");
-    gBrowser.removeTab(tab);
-    info("Resolve promise with new tab URI");
-    deferred.resolve(uri);
-  }
-
-  function newTabListener(e) {
-    gBrowser.tabContainer.removeEventListener("TabOpen", newTabListener);
-    let tab = e.target;
-    BrowserTestUtils.browserLoaded(tab.linkedBrowser, false, url => url != "about:blank")
-      .then(url => loadListener(tab));
-  }
-
-  let deferred = defer();
-  info("Check that clicking the link opens a new tab with the correct URI");
-  gBrowser.tabContainer.addEventListener("TabOpen", newTabListener);
-  info("Click the link to MDN");
-  link.click();
-  return deferred.promise;
-}
-
-/**
- * Utility function to check content of the tooltip.
- */
-function checkTooltipContents(doc, expected) {
-  is(doc.heading.textContent,
-     expected.propertyName,
-     "Property name is correct");
-
-  is(doc.summary.textContent,
-     expected.summary,
-     "Summary is correct");
-
-  checkCssSyntaxHighlighterOutput(expected.syntax, doc.syntax);
-}
deleted file mode 100644
--- a/devtools/client/shared/test/browser_mdn-docs-02.js
+++ /dev/null
@@ -1,128 +0,0 @@
-/* vim: set 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 MdnDocsWidget object, and specifically its
- * loadCssDocs() function.
- *
- * The MdnDocsWidget is initialized with a document which has a specific
- * structure. You then call loadCssDocs(), passing in a CSS property name.
- * MdnDocsWidget then fetches docs for that property by making an XHR to
- * a docs page, and loads the results into the document.
- *
- * In this file we test that the tooltip can properly handle the different
- * structures that the docs page might have, including variant structures and
- * error conditions like parts of the document being missing.
- *
- * We also test that the tooltip properly handles the case where the page
- * doesn't exist at all.
- */
-
-"use strict";
-
-const {
-  setBaseCssDocsUrl,
-  MdnDocsWidget
-} = require("devtools/client/shared/widgets/MdnDocsWidget");
-
-const BASIC_EXPECTED_SUMMARY = "A summary of the property.";
-const BASIC_EXPECTED_SYNTAX = [{type: "comment", text: "/* The part we want   */"},
-                               {type: "text", text: "\n"},
-                               {type: "property-name", text: "this"},
-                               {type: "text", text: ":"},
-                               {type: "text", text: " "},
-                               {type: "property-value", text: "is-the-part-we-want"},
-                               {type: "text", text: ";"}];
-
-const ERROR_MESSAGE = "Could not load docs page.";
-
-/**
- * Test properties
- *
- * In the real tooltip, a CSS property name is used to look up an MDN page
- * for that property.
- * In the test code, the names defined here are used to look up a page
- * served by the test server. We have different properties to test
- * different ways that the docs pages might be constructed, including errors
- * like pages that don't include docs where we expect.
- */
-const SYNTAX_OLD_STYLE = "doc_mdn-css-syntax-old-style.html";
-const NO_SUMMARY = "doc_mdn-css-no-summary.html";
-const NO_SYNTAX = "doc_mdn-css-no-syntax.html";
-const NO_SUMMARY_OR_SYNTAX = "doc_mdn-css-no-summary-or-syntax.html";
-
-const TEST_DATA = [{
-  desc: "Test a property for which we don't have a page",
-  docsPageUrl: "i-dont-exist.html",
-  expectedContents: {
-    propertyName: "i-dont-exist.html",
-    summary: ERROR_MESSAGE,
-    syntax: []
-  }
-}, {
-  desc: "Test a property whose syntax section is specified using an old-style page",
-  docsPageUrl: SYNTAX_OLD_STYLE,
-  expectedContents: {
-    propertyName: SYNTAX_OLD_STYLE,
-    summary: BASIC_EXPECTED_SUMMARY,
-    syntax: BASIC_EXPECTED_SYNTAX
-  }
-}, {
-  desc: "Test a property whose page doesn't have a summary",
-  docsPageUrl: NO_SUMMARY,
-  expectedContents: {
-    propertyName: NO_SUMMARY,
-    summary: "",
-    syntax: BASIC_EXPECTED_SYNTAX
-  }
-}, {
-  desc: "Test a property whose page doesn't have a syntax",
-  docsPageUrl: NO_SYNTAX,
-  expectedContents: {
-    propertyName: NO_SYNTAX,
-    summary: BASIC_EXPECTED_SUMMARY,
-    syntax: []
-  }
-}, {
-  desc: "Test a property whose page doesn't have a summary or a syntax",
-  docsPageUrl: NO_SUMMARY_OR_SYNTAX,
-  expectedContents: {
-    propertyName: NO_SUMMARY_OR_SYNTAX,
-    summary: ERROR_MESSAGE,
-    syntax: []
-  }
-}
-];
-
-add_task(function* () {
-  setBaseCssDocsUrl(TEST_URI_ROOT);
-
-  yield addTab("about:blank");
-  let [host, win] = yield createHost("bottom", "data:text/html," +
-    "<div class='mdn-container'></div>");
-  let widget = new MdnDocsWidget(win.document.querySelector("div"));
-
-  for (let {desc, docsPageUrl, expectedContents} of TEST_DATA) {
-    info(desc);
-    yield widget.loadCssDocs(docsPageUrl);
-    checkTooltipContents(widget.elements, expectedContents);
-  }
-  host.destroy();
-  gBrowser.removeCurrentTab();
-});
-
-/*
- * Utility function to check content of the tooltip.
- */
-function checkTooltipContents(doc, expected) {
-  is(doc.heading.textContent,
-     expected.propertyName,
-     "Property name is correct");
-
-  is(doc.summary.textContent,
-     expected.summary,
-     "Summary is correct");
-
-  checkCssSyntaxHighlighterOutput(expected.syntax, doc.syntax);
-}
deleted file mode 100644
--- a/devtools/client/shared/test/browser_mdn-docs-03.js
+++ /dev/null
@@ -1,277 +0,0 @@
-/* vim: set 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 CSS syntax highlighter in the MdnDocsWidget object.
- *
- * The CSS syntax highlighter accepts:
- * - a string containing CSS
- * - a DOM node
- *
- * It parses the string and creates a collection of DOM nodes for different
- * CSS token types. These DOM nodes have CSS classes applied to them,
- * to apply the right style for that particular token type. The DOM nodes
- * are returned as children of the node that was passed to the function.
- *
- * This test code defines a number of different strings containing valid and
- * invalid CSS in various forms. For each string it defines the DOM nodes
- * that it expects to get from the syntax highlighter.
- *
- * It then calls the syntax highlighter, and checks that the resulting
- * collection of DOM nodes is what we expected.
- */
-
-"use strict";
-
-const {appendSyntaxHighlightedCSS} = require("devtools/client/shared/widgets/MdnDocsWidget");
-
-/**
- * An array containing the actual test cases.
- *
- * The test code tests every case in the array. If you want to add more
- * test cases, just add more items to the array.
- *
- * Each test case consists of:
- * - description: string describing the salient features of this test case
- * - example: the string to test
- * - expected: an array of objects, one for each DOM node we expect, that
- * captures the information about the node that we expect to test.
- */
-const TEST_DATA = [{
-  description: "Valid syntax, string value.",
-  example: "name: stringValue;",
-  expected: [{type: "property-name", text: "name"},
-             {type: "text", text: ":"},
-             {type: "text", text: " "},
-             {type: "property-value", text: "stringValue"},
-             {type: "text", text: ";"}
-  ]}, {
-  description: "Valid syntax, numeric value.",
-  example: "name: 1;",
-  expected: [{type: "property-name", text: "name"},
-             {type: "text", text: ":"},
-             {type: "text", text: " "},
-             {type: "property-value", text: "1"},
-             {type: "text", text: ";"}
-  ]}, {
-  description: "Valid syntax, url value.",
-  example: "name: url(./name);",
-  expected: [{type: "property-name", text: "name"},
-             {type: "text", text: ":"},
-             {type: "text", text: " "},
-             {type: "property-value", text: "url(./name)"},
-             {type: "text", text: ";"}
-  ]}, {
-  description: "Valid syntax, space before ':'.",
-  example: "name : stringValue;",
-  expected: [{type: "property-name", text: "name"},
-             {type: "text", text: " "},
-             {type: "text", text: ":"},
-             {type: "text", text: " "},
-             {type: "property-value", text: "stringValue"},
-             {type: "text", text: ";"}
-  ]}, {
-  description: "Valid syntax, space before ';'.",
-  example: "name: stringValue ;",
-  expected: [{type: "property-name", text: "name"},
-             {type: "text", text: ":"},
-             {type: "text", text: " "},
-             {type: "property-value", text: "stringValue"},
-             {type: "text", text: " "},
-             {type: "text", text: ";"}
-  ]}, {
-  description: "Valid syntax, trailing space.",
-  example: "name: stringValue; ",
-  expected: [{type: "property-name", text: "name"},
-             {type: "text", text: ":"},
-             {type: "text", text: " "},
-             {type: "property-value", text: "stringValue"},
-             {type: "text", text: ";"},
-             {type: "text", text: " "}
-  ]}, {
-  description: "Valid syntax, leading space.",
-  example: " name: stringValue;",
-  expected: [{type: "text", text: " "},
-             {type: "property-name", text: "name"},
-             {type: "text", text: ":"},
-             {type: "text", text: " "},
-             {type: "property-value", text: "stringValue"},
-             {type: "text", text: ";"}
-  ]}, {
-  description: "Valid syntax, two spaces.",
-  example: "name:  stringValue;",
-  expected: [{type: "property-name", text: "name"},
-             {type: "text", text: ":"},
-             {type: "text", text: "  "},
-             {type: "property-value", text: "stringValue"},
-             {type: "text", text: ";"}
-  ]}, {
-  description: "Valid syntax, no spaces.",
-  example: "name:stringValue;",
-  expected: [{type: "property-name", text: "name"},
-             {type: "text", text: ":"},
-             {type: "property-value", text: "stringValue"},
-             {type: "text", text: ";"}
-  ]}, {
-  description: "Valid syntax, two-part value.",
-  example: "name: stringValue 1;",
-  expected: [{type: "property-name", text: "name"},
-             {type: "text", text: ":"},
-             {type: "text", text: " "},
-             {type: "property-value", text: "stringValue"},
-             {type: "text", text: " "},
-             {type: "property-value", text: "1"},
-             {type: "text", text: ";"}
-  ]}, {
-  description: "Valid syntax, two declarations.",
-  example: "name: stringValue;\n" +
-         "name: 1;",
-  expected: [{type: "property-name", text: "name"},
-             {type: "text", text: ":"},
-             {type: "text", text: " "},
-             {type: "property-value", text: "stringValue"},
-             {type: "text", text: ";"},
-             {type: "text", text: "\n"},
-             {type: "property-name", text: "name"},
-             {type: "text", text: ":"},
-             {type: "text", text: " "},
-             {type: "property-value", text: "1"},
-             {type: "text", text: ";"}
-  ]}, {
-  description: "Valid syntax, commented, numeric value.",
-  example: "/* comment */\n" +
-         "name: 1;",
-  expected: [{type: "comment", text: "/* comment */"},
-             {type: "text", text: "\n"},
-             {type: "property-name", text: "name"},
-             {type: "text", text: ":"},
-             {type: "text", text: " "},
-             {type: "property-value", text: "1"},
-             {type: "text", text: ";"}
-  ]}, {
-  description: "Valid syntax, multiline commented, string value.",
-  example: "/* multiline \n" +
-           "comment */\n" +
-           "name: stringValue;",
-  expected: [{type: "comment", text: "/* multiline \ncomment */"},
-             {type: "text", text: "\n"},
-             {type: "property-name", text: "name"},
-             {type: "text", text: ":"},
-             {type: "text", text: " "},
-             {type: "property-value", text: "stringValue"},
-             {type: "text", text: ";"}
-  ]}, {
-  description: "Valid syntax, commented, two declarations.",
-  example: "/* comment 1 */\n" +
-           "name: 1;\n" +
-           "/* comment 2 */\n" +
-           "name: stringValue;",
-  expected: [{type: "comment", text: "/* comment 1 */"},
-             {type: "text", text: "\n"},
-             {type: "property-name", text: "name"},
-             {type: "text", text: ":"},
-             {type: "text", text: " "},
-             {type: "property-value", text: "1"},
-             {type: "text", text: ";"},
-             {type: "text", text: "\n"},
-             {type: "comment", text: "/* comment 2 */"},
-             {type: "text", text: "\n"},
-             {type: "property-name", text: "name"},
-             {type: "text", text: ":"},
-             {type: "text", text: " "},
-             {type: "property-value", text: "stringValue"},
-             {type: "text", text: ";"}
-  ]}, {
-  description: "Valid syntax, multiline.",
-  example: "name: \n" +
-           "stringValue;",
-  expected: [{type: "property-name", text: "name"},
-             {type: "text", text: ":"},
-             {type: "text", text: " \n"},
-             {type: "property-value", text: "stringValue"},
-             {type: "text", text: ";"}
-  ]}, {
-  description: "Valid syntax, multiline, two declarations.",
-  example: "name: \n" +
-           "stringValue \n" +
-           "stringValue2;",
-  expected: [{type: "property-name", text: "name"},
-             {type: "text", text: ":"},
-             {type: "text", text: " \n"},
-             {type: "property-value", text: "stringValue"},
-             {type: "text", text: " \n"},
-             {type: "property-value", text: "stringValue2"},
-             {type: "text", text: ";"}
-  ]}, {
-  description: "Invalid: not CSS at all.",
-  example: "not CSS at all",
-  expected: [{type: "property-name", text: "not"},
-             {type: "text", text: " "},
-             {type: "property-name", text: "CSS"},
-             {type: "text", text: " "},
-             {type: "property-name", text: "at"},
-             {type: "text", text: " "},
-             {type: "property-name", text: "all"}
-  ]}, {
-  description: "Invalid: switched ':' and ';'.",
-  example: "name; stringValue:",
-  expected: [{type: "property-name", text: "name"},
-             {type: "text", text: ";"},
-             {type: "text", text: " "},
-             {type: "property-name", text: "stringValue"},
-             {type: "text", text: ":"}
-  ]}, {
-  description: "Invalid: unterminated comment.",
-  example: "/* unterminated comment\n" +
-           "name: stringValue;",
-  expected: [{type: "comment", text: "/* unterminated comment\nname: stringValue;"}
-  ]}, {
-  description: "Invalid: bad comment syntax.",
-  example: "// invalid comment\n" +
-           "name: stringValue;",
-  expected: [{type: "text", text: "/"},
-             {type: "text", text: "/"},
-             {type: "text", text: " "},
-             {type: "property-name", text: "invalid"},
-             {type: "text", text: " "},
-             {type: "property-name", text: "comment"},
-             {type: "text", text: "\n"},
-             {type: "property-name", text: "name"},
-             {type: "text", text: ":"},
-             {type: "text", text: " "},
-             {type: "property-value", text: "stringValue"},
-             {type: "text", text: ";"}
-  ]}, {
-  description: "Invalid: no trailing ';'.",
-  example: "name: stringValue\n" +
-           "name: stringValue2",
-  expected: [{type: "property-name", text: "name"},
-             {type: "text", text: ":"},
-             {type: "text", text: " "},
-             {type: "property-value", text: "stringValue"},
-             {type: "text", text: "\n"},
-             {type: "property-value", text: "name"},
-             {type: "text", text: ":"},
-             {type: "text", text: " "},
-             {type: "property-value", text: "stringValue2"},
-  ]}
-];
-
-/**
- * Iterate through every test case, calling the syntax highlighter,
- * then calling a helper function to check the output.
- */
-add_task(function* () {
-  let doc = gBrowser.selectedTab.ownerDocument;
-  let parent = doc.createElement("div");
-  info("Testing all CSS syntax highlighter test cases");
-  for (let {description, example, expected} of TEST_DATA) {
-    info("Testing: " + description);
-    appendSyntaxHighlightedCSS(example, parent);
-    checkCssSyntaxHighlighterOutput(expected, parent);
-    while (parent.firstChild) {
-      parent.firstChild.remove();
-    }
-  }
-});
deleted file mode 100644
--- a/devtools/client/shared/test/doc_mdn-css-basic-testing.html
+++ /dev/null
@@ -1,21 +0,0 @@
-<!doctype html>
-<html>
-<head>
-  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
-</head>
-
-<body>
-
-  <h2 id="Summary">Summary</h2>
-
-  <p>A summary of the property.</p>
-
-  <h2 id="Syntax">Syntax</h2>
-
-  <pre>/* The part we want   */
-this: is-the-part-we-want;</pre>
-
-
-
-</body>
-</html>
deleted file mode 100644
--- a/devtools/client/shared/test/doc_mdn-css-no-summary-or-syntax.html
+++ /dev/null
@@ -1,12 +0,0 @@
-<!doctype html>
-<html>
-<head>
-  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
-</head>
-
-<body>
-
-<p>This is not the summary or the syntax.</p>
-
-</body>
-</html>
deleted file mode 100644
--- a/devtools/client/shared/test/doc_mdn-css-no-summary.html
+++ /dev/null
@@ -1,21 +0,0 @@
-<!doctype html>
-<html>
-<head>
-  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
-</head>
-
-<body>
-
-  <p>This is not the summary.</p>
-
-  <h2 id="Syntax">Syntax</h2>
-
-  <pre>To be ignored.</pre>
-
-  <pre>/* The part we want   */
-this: is-the-part-we-want;</pre>
-
-
-
-</body>
-</html>
deleted file mode 100644
--- a/devtools/client/shared/test/doc_mdn-css-no-syntax.html
+++ /dev/null
@@ -1,17 +0,0 @@
-<!doctype html>
-<html>
-<head>
-  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
-</head>
-
-<body>
-
-  <h2 id="Summary">Summary</h2>
-
-  <p>A summary of the property.</p>
-
-  <p>This is not the syntax.</p>
-
-
-</body>
-</html>
deleted file mode 100644
--- a/devtools/client/shared/test/doc_mdn-css-syntax-old-style.html
+++ /dev/null
@@ -1,23 +0,0 @@
-<!doctype html>
-<html>
-<head>
-  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
-</head>
-
-<body>
-
-  <h2 id="Summary">Summary</h2>
-
-  <p>A summary of the property.</p>
-
-  <h2 id="Syntax">Syntax</h2>
-
-  <pre>The part we should ignore</pre>
-
-  <pre>/* The part we want   */
-this: is-the-part-we-want;</pre>
-
-
-
-</body>
-</html>
deleted file mode 100644
--- a/devtools/client/shared/test/doc_mdn-docs-01.html
+++ /dev/null
@@ -1,1 +0,0 @@
-<div class='mdn-container'></div>
--- a/devtools/client/shared/test/head.js
+++ b/devtools/client/shared/test/head.js
@@ -237,110 +237,8 @@ Task.async(function* (widget, name, valu
 
   onRender = widget.once("render");
   widget._savePreset({
     preventDefault: () => {}
   });
 
   yield onRender;
 });
-
-/**
- * Utility function for testing CSS code samples that have been
- * syntax-highlighted.
- *
- * The CSS syntax highlighter emits a collection of DOM nodes that have
- * CSS classes applied to them. This function checks that those nodes
- * are what we expect.
- *
- * @param {array} expectedNodes
- * A representation of the nodes we expect to see.
- * Each node is an object containing two properties:
- * - type: a string which can be one of:
- *   - text, comment, property-name, property-value
- * - text: the textContent of the node
- *
- * For example, given a string like this:
- * "<comment> The part we want   </comment>\n this: is-the-part-we-want;"
- *
- * we would represent the expected output like this:
- * [{type: "comment",        text: "<comment> The part we want   </comment>"},
- *  {type: "text",           text: "\n"},
- *  {type: "property-name",  text: "this"},
- *  {type: "text",           text: ":"},
- *  {type: "text",           text: " "},
- *  {type: "property-value", text: "is-the-part-we-want"},
- *  {type: "text",           text: ";"}];
- *
- * @param {Node} parent
- * The DOM node whose children are the output of the syntax highlighter.
- */
-function checkCssSyntaxHighlighterOutput(expectedNodes, parent) {
-  /**
-   * The classes applied to the output nodes by the syntax highlighter.
-   * These must be same as the definitions in MdnDocsWidget.js.
-   */
-  const PROPERTY_NAME_COLOR = "theme-fg-color5";
-  const PROPERTY_VALUE_COLOR = "theme-fg-color1";
-  const COMMENT_COLOR = "theme-comment";
-
-  /**
-   * Check the type and content of a single node.
-   */
-  function checkNode(expected, actual) {
-    ok(actual.textContent == expected.text,
-       "Check that node has the expected textContent");
-    info("Expected text content: [" + expected.text + "]");
-    info("Actual text content: [" + actual.textContent + "]");
-
-    info("Check that node has the expected type");
-    if (expected.type == "text") {
-      ok(actual.nodeType == 3, "Check that node is a text node");
-    } else {
-      ok(actual.tagName.toUpperCase() == "SPAN", "Check that node is a SPAN");
-    }
-
-    info("Check that node has the expected className");
-
-    let expectedClassName = null;
-    let actualClassName = null;
-
-    switch (expected.type) {
-      case "property-name":
-        expectedClassName = PROPERTY_NAME_COLOR;
-        break;
-      case "property-value":
-        expectedClassName = PROPERTY_VALUE_COLOR;
-        break;
-      case "comment":
-        expectedClassName = COMMENT_COLOR;
-        break;
-      default:
-        ok(!actual.classList, "No className expected");
-        return;
-    }
-
-    ok(actual.classList.length == 1, "One className expected");
-    actualClassName = actual.classList[0];
-
-    ok(expectedClassName == actualClassName, "Check className value");
-    info("Expected className: " + expectedClassName);
-    info("Actual className: " + actualClassName);
-  }
-
-  info("Logging the actual nodes we have:");
-  for (let j = 0; j < parent.childNodes.length; j++) {
-    let n = parent.childNodes[j];
-    info(j + " / " +
-         "nodeType: " + n.nodeType + " / " +
-         "textContent: " + n.textContent);
-  }
-
-  ok(parent.childNodes.length == parent.childNodes.length,
-    "Check we have the expected number of nodes");
-  info("Expected node count " + expectedNodes.length);
-  info("Actual node count " + expectedNodes.length);
-
-  for (let i = 0; i < expectedNodes.length; i++) {
-    info("Check node " + i);
-    checkNode(expectedNodes[i], parent.childNodes[i]);
-  }
-}
deleted file mode 100644
--- a/devtools/client/shared/widgets/MdnDocsWidget.js
+++ /dev/null
@@ -1,513 +0,0 @@
-/* This Source Code Form is subject to the terms of the Mozilla Public
- * License, v. 2.0. If a copy of the MPL was not distributed with this
- * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
-
-/**
- * This file contains functions to retrieve docs content from
- * MDN (developer.mozilla.org) for particular items, and to display
- * the content in a tooltip.
- *
- * At the moment it only supports fetching content for CSS properties,
- * but it might support other types of content in the future
- * (Web APIs, for example).
- *
- * It's split into two parts:
- *
- * - functions like getCssDocs that just fetch content from MDN,
- * without any constraints on what to do with the content. If you
- * want to embed the content in some custom way, use this.
- *
- * - the MdnDocsWidget class, that manages and updates a tooltip
- * document whose content is taken from MDN. If you want to embed
- * the content in a tooltip, use this in conjunction with Tooltip.js.
- */
-
-"use strict";
-
-const Services = require("Services");
-const defer = require("devtools/shared/defer");
-const {getCSSLexer} = require("devtools/shared/css/lexer");
-const EventEmitter = require("devtools/shared/old-event-emitter");
-const {gDevTools} = require("devtools/client/framework/devtools");
-
-const {LocalizationHelper} = require("devtools/shared/l10n");
-const L10N = new LocalizationHelper("devtools/client/locales/inspector.properties");
-
-const XHTML_NS = "http://www.w3.org/1999/xhtml";
-
-// Parameters for the XHR request
-// see https://developer.mozilla.org/en-US/docs/MDN/Kuma/API#Document_parameters
-const XHR_PARAMS = "?raw&macros";
-// URL for the XHR request
-var XHR_CSS_URL = "https://developer.mozilla.org/en-US/docs/Web/CSS/";
-
-// Parameters for the link to MDN in the tooltip, so
-// so we know which MDN visits come from this feature
-const PAGE_LINK_PARAMS =
-  "?utm_source=mozilla&utm_medium=firefox-inspector&utm_campaign=default";
-// URL for the page link omits locale, so a locale-specific page will be loaded
-var PAGE_LINK_URL = "https://developer.mozilla.org/docs/Web/CSS/";
-exports.PAGE_LINK_URL = PAGE_LINK_URL;
-
-const PROPERTY_NAME_COLOR = "theme-fg-color5";
-const PROPERTY_VALUE_COLOR = "theme-fg-color1";
-const COMMENT_COLOR = "theme-comment";
-
-/**
- * Turns a string containing a series of CSS declarations into
- * a series of DOM nodes, with classes applied to provide syntax
- * highlighting.
- *
- * It uses the CSS tokenizer to generate a stream of CSS tokens.
- * https://dxr.mozilla.org/mozilla-central/source/dom/webidl/CSSLexer.webidl
- * lists all the token types.
- *
- * - "whitespace", "comment", and "symbol" tokens are appended as TEXT nodes,
- * and will inherit the default style for text.
- *
- * - "ident" tokens that we think are property names are considered to be
- * a property name, and are appended as SPAN nodes with a distinct color class.
- *
- * - "ident" nodes which we do not think are property names, and nodes
- * of all other types ("number", "url", "percentage", ...) are considered
- * to be part of a property value, and are appended as SPAN nodes with
- * a different color class.
- *
- * @param {Document} doc
- * Used to create nodes.
- *
- * @param {String} syntaxText
- * The CSS input. This is assumed to consist of a series of
- * CSS declarations, with trailing semicolons.
- *
- * @param {DOM node} syntaxSection
- * This is the parent for the output nodes. Generated nodes
- * are appended to this as children.
- */
-function appendSyntaxHighlightedCSS(cssText, parentElement) {
-  let doc = parentElement.ownerDocument;
-  let identClass = PROPERTY_NAME_COLOR;
-  let lexer = getCSSLexer(cssText);
-
-  /**
-   * Create a SPAN node with the given text content and class.
-   */
-  function createStyledNode(textContent, className) {
-    let newNode = doc.createElementNS(XHTML_NS, "span");
-    newNode.classList.add(className);
-    newNode.textContent = textContent;
-    return newNode;
-  }
-
-  /**
-   * If the symbol is ":", we will expect the next
-   * "ident" token to be part of a property value.
-   *
-   * If the symbol is ";", we will expect the next
-   * "ident" token to be a property name.
-   */
-  function updateIdentClass(tokenText) {
-    if (tokenText === ":") {
-      identClass = PROPERTY_VALUE_COLOR;
-    } else if (tokenText === ";") {
-      identClass = PROPERTY_NAME_COLOR;
-    }
-  }
-
-  /**
-   * Create the appropriate node for this token type.
-   *
-   * If this token is a symbol, also update our expectations
-   * for what the next "ident" token represents.
-   */
-  function tokenToNode(token, tokenText) {
-    switch (token.tokenType) {
-      case "ident":
-        return createStyledNode(tokenText, identClass);
-      case "symbol":
-        updateIdentClass(tokenText);
-        return doc.createTextNode(tokenText);
-      case "whitespace":
-        return doc.createTextNode(tokenText);
-      case "comment":
-        return createStyledNode(tokenText, COMMENT_COLOR);
-      default:
-        return createStyledNode(tokenText, PROPERTY_VALUE_COLOR);
-    }
-  }
-
-  let token = lexer.nextToken();
-  while (token) {
-    let tokenText = cssText.slice(token.startOffset, token.endOffset);
-    let newNode = tokenToNode(token, tokenText);
-    parentElement.appendChild(newNode);
-    token = lexer.nextToken();
-  }
-}
-
-exports.appendSyntaxHighlightedCSS = appendSyntaxHighlightedCSS;
-
-/**
- * Fetch an MDN page.
- *
- * @param {string} pageUrl
- * URL of the page to fetch.
- *
- * @return {promise}
- * The promise is resolved with the page as an XML document.
- *
- * The promise is rejected with an error message if
- * we could not load the page.
- */
-function getMdnPage(pageUrl) {
-  let deferred = defer();
-
-  let xhr = new XMLHttpRequest();
-
-  xhr.addEventListener("load", onLoaded);
-  xhr.addEventListener("error", onError);
-
-  xhr.open("GET", pageUrl);
-  xhr.responseType = "document";
-  xhr.send();
-
-  function onLoaded(e) {
-    if (xhr.status != 200) {
-      deferred.reject({page: pageUrl, status: xhr.status});
-    } else {
-      deferred.resolve(xhr.responseXML);
-    }
-  }
-
-  function onError(e) {
-    deferred.reject({page: pageUrl, status: xhr.status});
-  }
-
-  return deferred.promise;
-}
-
-/**
- * Gets some docs for the given CSS property.
- * Loads an MDN page for the property and gets some
- * information about the property.
- *
- * @param {string} cssProperty
- * The property for which we want docs.
- *
- * @return {promise}
- * The promise is resolved with an object containing:
- * - summary: a short summary of the property
- * - syntax: some example syntax
- *
- * The promise is rejected with an error message if
- * we could not load the page.
- */
-function getCssDocs(cssProperty) {
-  let deferred = defer();
-  let pageUrl = XHR_CSS_URL + cssProperty + XHR_PARAMS;
-
-  getMdnPage(pageUrl).then(parseDocsFromResponse, handleRejection);
-
-  function parseDocsFromResponse(responseDocument) {
-    let theDocs = {};
-    theDocs.summary = getSummary(responseDocument);
-    theDocs.syntax = getSyntax(responseDocument);
-    if (theDocs.summary || theDocs.syntax) {
-      deferred.resolve(theDocs);
-    } else {
-      deferred.reject("Couldn't find the docs in the page.");
-    }
-  }
-
-  function handleRejection(e) {
-    deferred.reject(e.status);
-  }
-
-  return deferred.promise;
-}
-
-exports.getCssDocs = getCssDocs;
-
-/**
- * The MdnDocsWidget is used by tooltip code that needs to display docs
- * from MDN in a tooltip.
- *
- * In the constructor, the widget does some general setup that's not
- * dependent on the particular item we need docs for.
- *
- * After that, when the tooltip code needs to display docs for an item, it
- * asks the widget to retrieve the docs and update the document with them.
- *
- * @param {Element} tooltipContainer
- * A DOM element where the MdnDocs widget markup should be created.
- */
-function MdnDocsWidget(tooltipContainer) {
-  EventEmitter.decorate(this);
-
-  tooltipContainer.innerHTML =
-    `<header>
-       <h1 class="mdn-property-name theme-fg-color5"></h1>
-     </header>
-     <div class="mdn-property-info">
-       <div class="mdn-summary"></div>
-       <pre class="mdn-syntax devtools-monospace"></pre>
-     </div>
-     <footer>
-       <a class="mdn-visit-page theme-link" href="#">Visit MDN (placeholder)</a>
-     </footer>`;
-
-  // fetch all the bits of the document that we will manipulate later
-  this.elements = {
-    heading: tooltipContainer.querySelector(".mdn-property-name"),
-    summary: tooltipContainer.querySelector(".mdn-summary"),
-    syntax: tooltipContainer.querySelector(".mdn-syntax"),
-    info: tooltipContainer.querySelector(".mdn-property-info"),
-    linkToMdn: tooltipContainer.querySelector(".mdn-visit-page")
-  };
-
-  // get the localized string for the link text
-  this.elements.linkToMdn.textContent = L10N.getStr("docsTooltip.visitMDN");
-
-  // force using LTR because we use the en-US version of MDN
-  tooltipContainer.setAttribute("dir", "ltr");
-
-  // listen for clicks and open in the browser window instead
-  let mainWindow = Services.wm.getMostRecentWindow(gDevTools.chromeWindowType);
-  this.elements.linkToMdn.addEventListener("click", (e) => {
-    e.stopPropagation();
-    e.preventDefault();
-    mainWindow.openUILinkIn(e.target.href, "tab");
-    this.emit("visitlink");
-  });
-}
-
-exports.MdnDocsWidget = MdnDocsWidget;
-
-MdnDocsWidget.prototype = {
-  /**
-   * This is called just before the tooltip is displayed, and is
-   * passed the CSS property for which we want to display help.
-   *
-   * Its job is to make sure the document contains the docs
-   * content for that CSS property.
-   *
-   * First, it initializes the document, setting the things it can
-   * set synchronously, resetting the things it needs to get
-   * asynchronously, and making sure the throbber is throbbing.
-   *
-   * Then it tries to get the content asynchronously, updating
-   * the document with the content or with an error message.
-   *
-   * It returns immediately, so the caller can display the tooltip
-   * without waiting for the asynch operation to complete.
-   *
-   * @param {string} propertyName
-   * The name of the CSS property for which we need to display help.
-   */
-  loadCssDocs: function (propertyName) {
-    /**
-     * Do all the setup we can do synchronously, and get the document in
-     * a state where it can be displayed while we are waiting for the
-     * MDN docs content to be retrieved.
-     */
-    function initializeDocument(propName) {
-      // set property name heading
-      elements.heading.textContent = propName;
-
-      // set link target
-      elements.linkToMdn.setAttribute("href",
-        PAGE_LINK_URL + propName + PAGE_LINK_PARAMS);
-
-      // clear docs summary and syntax
-      elements.summary.textContent = "";
-      while (elements.syntax.firstChild) {
-        elements.syntax.firstChild.remove();
-      }
-
-      // reset the scroll position
-      elements.info.scrollTop = 0;
-      elements.info.scrollLeft = 0;
-
-      // show the throbber
-      elements.info.classList.add("devtools-throbber");
-    }
-
-    /**
-     * This is called if we successfully got the docs content.
-     * Finishes setting up the tooltip content, and disables the throbber.
-     */
-    function finalizeDocument({summary, syntax}) {
-      // set docs summary and syntax
-      elements.summary.textContent = summary;
-      appendSyntaxHighlightedCSS(syntax, elements.syntax);
-
-      // hide the throbber
-      elements.info.classList.remove("devtools-throbber");
-
-      deferred.resolve(this);
-    }
-
-    /**
-     * This is called if we failed to get the docs content.
-     * Sets the content to contain an error message, and disables the throbber.
-     */
-    function gotError(error) {
-      // show error message
-      elements.summary.textContent = L10N.getStr("docsTooltip.loadDocsError");
-
-      // hide the throbber
-      elements.info.classList.remove("devtools-throbber");
-
-      // although gotError is called when there's an error, we have handled
-      // the error, so call resolve not reject.
-      deferred.resolve(this);
-    }
-
-    let deferred = defer();
-    let elements = this.elements;
-
-    initializeDocument(propertyName);
-    getCssDocs(propertyName).then(finalizeDocument, gotError);
-
-    return deferred.promise;
-  },
-
-  destroy: function () {
-    this.elements = null;
-  }
-};
-
-/**
- * Test whether a node is all whitespace.
- *
- * @return {boolean}
- * True if the node all whitespace, otherwise false.
- */
-function isAllWhitespace(node) {
-  return !(/[^\t\n\r ]/.test(node.textContent));
-}
-
-/**
- * Test whether a node is a comment or whitespace node.
- *
- * @return {boolean}
- * True if the node is a comment node or is all whitespace, otherwise false.
- */
-function isIgnorable(node) {
-  // Comment nodes (8), text nodes (3) or whitespace
-  return (node.nodeType == 8) ||
-         ((node.nodeType == 3) && isAllWhitespace(node));
-}
-
-/**
- * Get the next node, skipping comments and whitespace.
- *
- * @return {node}
- * The next sibling node that is not a comment or whitespace, or null if
- * there isn't one.
- */
-function nodeAfter(sib) {
-  while ((sib = sib.nextSibling)) {
-    if (!isIgnorable(sib)) {
-      return sib;
-    }
-  }
-  return null;
-}
-
-/**
- * Test whether the argument `node` is a node whose tag is `tagName`.
- *
- * @param {node} node
- * The code to test. May be null.
- *
- * @param {string} tagName
- * The tag name to test against.
- *
- * @return {boolean}
- * True if the node is not null and has the tag name `tagName`,
- * otherwise false.
- */
-function hasTagName(node, tagName) {
-  return node && node.tagName &&
-         node.tagName.toLowerCase() == tagName.toLowerCase();
-}
-
-/**
- * Given an MDN page, get the "summary" portion.
- *
- * This is the textContent of the first non-whitespace
- * element in the #Summary section of the document.
- *
- * It's expected to be a <P> element.
- *
- * @param {Document} mdnDocument
- * The document in which to look for the "summary" section.
- *
- * @return {string}
- * The summary section as a string, or null if it could not be found.
- */
-function getSummary(mdnDocument) {
-  let summary = mdnDocument.getElementById("Summary");
-  if (!hasTagName(summary, "H2")) {
-    return null;
-  }
-
-  let firstParagraph = nodeAfter(summary);
-  if (!hasTagName(firstParagraph, "P")) {
-    return null;
-  }
-
-  return firstParagraph.textContent;
-}
-
-/**
- * Given an MDN page, get the "syntax" portion.
- *
- * First we get the #Syntax section of the document. The syntax
- * section we want is somewhere inside there.
- *
- * If the page is in the old structure, then the *first two*
- * non-whitespace elements in the #Syntax section will be <PRE>
- * nodes, and the second of these will be the syntax section.
- *
- * If the page is in the new structure, then the only the *first*
- * non-whitespace element in the #Syntax section will be a <PRE>
- * node, and it will be the syntax section.
- *
- * @param {Document} mdnDocument
- * The document in which to look for the "syntax" section.
- *
- * @return {string}
- * The syntax section as a string, or null if it could not be found.
- */
-function getSyntax(mdnDocument) {
-  let syntax = mdnDocument.getElementById("Syntax");
-  if (!hasTagName(syntax, "H2")) {
-    return null;
-  }
-
-  let firstParagraph = nodeAfter(syntax);
-  if (!hasTagName(firstParagraph, "PRE")) {
-    return null;
-  }
-
-  let secondParagraph = nodeAfter(firstParagraph);
-  if (hasTagName(secondParagraph, "PRE")) {
-    return secondParagraph.textContent;
-  }
-  return firstParagraph.textContent;
-}
-
-/**
- * Use a different URL for CSS docs pages. Used only for testing.
- *
- * @param {string} baseUrl
- * The baseURL to use.
- */
-function setBaseCssDocsUrl(baseUrl) {
-  PAGE_LINK_URL = baseUrl;
-  XHR_CSS_URL = baseUrl;
-}
-
-exports.setBaseCssDocsUrl = setBaseCssDocsUrl;
deleted file mode 100644
--- a/devtools/client/shared/widgets/mdn-docs.css
+++ /dev/null
@@ -1,39 +0,0 @@
-/* This Source Code Form is subject to the terms of the Mozilla Public
- * License, v. 2.0. If a copy of the MPL was not distributed with this
- * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
-
-.mdn-container {
-  height: 300px;
-  margin: 4px;
-  overflow: auto;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-}
-
-.mdn-container header,
-.mdn-container footer {
-  flex: 1;
-  padding: 0 1em;
-}
-
-.mdn-property-info {
-  flex: 10;
-  padding: 0 1em;
-  overflow: auto;
-  transition: opacity 400ms ease-in;
-}
-
-.mdn-syntax {
-  margin-top: 1em;
-}
-
-.mdn-container .devtools-throbber {
-  align-self: center;
-  opacity: 0;
-}
-
-.mdn-visit-page {
-  display: inline-block;
-  padding: 1em 0;
-}
--- a/devtools/client/shared/widgets/moz.build
+++ b/devtools/client/shared/widgets/moz.build
@@ -17,17 +17,16 @@ DevToolsModules(
     'CubicBezierPresets.js',
     'CubicBezierWidget.js',
     'FastListWidget.js',
     'FilterWidget.js',
     'FlameGraph.js',
     'Graphs.js',
     'GraphsWorker.js',
     'LineGraphWidget.js',
-    'MdnDocsWidget.js',
     'MountainGraphWidget.js',
     'SideMenuWidget.jsm',
     'SimpleListWidget.jsm',
     'Spectrum.js',
     'TableWidget.js',
     'TreeWidget.js',
     'VariablesView.jsm',
     'VariablesViewController.jsm',
deleted file mode 100644
--- a/devtools/client/shared/widgets/tooltip/CssDocsTooltip.js
+++ /dev/null
@@ -1,103 +0,0 @@
-/* This Source Code Form is subject to the terms of the Mozilla Public
- * License, v. 2.0. If a copy of the MPL was not distributed with this
- * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
-
-"use strict";
-
-const {HTMLTooltip} = require("devtools/client/shared/widgets/tooltip/HTMLTooltip");
-const {MdnDocsWidget} = require("devtools/client/shared/widgets/MdnDocsWidget");
-const KeyShortcuts = require("devtools/client/shared/key-shortcuts");
-const XHTML_NS = "http://www.w3.org/1999/xhtml";
-
-const TOOLTIP_WIDTH = 418;
-const TOOLTIP_HEIGHT = 308;
-
-/**
- * Tooltip for displaying docs for CSS properties from MDN.
- *
- * @param {Document} toolboxDoc
- *        The toolbox document to attach the CSS docs tooltip.
- */
-function CssDocsTooltip(toolboxDoc) {
-  this.tooltip = new HTMLTooltip(toolboxDoc, {
-    type: "arrow",
-    consumeOutsideClicks: true,
-    autofocus: true,
-    useXulWrapper: true
-  });
-  this.widget = this.setMdnDocsContent();
-  this._onVisitLink = this._onVisitLink.bind(this);
-  this.widget.on("visitlink", this._onVisitLink);
-
-  // Initialize keyboard shortcuts
-  this.shortcuts = new KeyShortcuts({ window: this.tooltip.topWindow });
-  this._onShortcut = this._onShortcut.bind(this);
-
-  this.shortcuts.on("Escape", this._onShortcut);
-}
-
-CssDocsTooltip.prototype = {
-  /**
-   * Reports if the tooltip is currently shown
-   *
-   * @return {Boolean} True if the tooltip is displayed.
-   */
-  isVisible: function () {
-    return this.tooltip.isVisible();
-  },
-
-  /**
-   * Load CSS docs for the given property,
-   * then display the tooltip.
-   */
-  show: function (anchor, propertyName) {
-    this.tooltip.once("shown", () => {
-      this.widget.loadCssDocs(propertyName);
-    });
-    this.tooltip.show(anchor);
-  },
-
-  hide: function () {
-    this.tooltip.hide();
-  },
-
-  revert: function () {},
-
-  _onShortcut: function (shortcut, event) {
-    if (!this.tooltip.isVisible()) {
-      return;
-    }
-    event.stopPropagation();
-    event.preventDefault();
-    this.hide();
-  },
-
-  _onVisitLink: function () {
-    this.hide();
-  },
-
-  /**
-   * Set the content of this tooltip to the MDN docs widget. This is called when the
-   * tooltip is first constructed.
-   * The caller can use the MdnDocsWidget to update the tooltip's  UI with new content
-   * each time the tooltip is shown.
-   *
-   * @return {MdnDocsWidget} the created MdnDocsWidget instance.
-   */
-  setMdnDocsContent: function () {
-    let container = this.tooltip.doc.createElementNS(XHTML_NS, "div");
-    container.setAttribute("class", "mdn-container theme-body");
-    this.tooltip.setContent(container, {width: TOOLTIP_WIDTH, height: TOOLTIP_HEIGHT});
-    return new MdnDocsWidget(container);
-  },
-
-  destroy: function () {
-    this.widget.off("visitlink", this._onVisitLink);
-    this.widget.destroy();
-
-    this.shortcuts.destroy();
-    this.tooltip.destroy();
-  }
-};
-
-module.exports = CssDocsTooltip;
--- a/devtools/client/shared/widgets/tooltip/moz.build
+++ b/devtools/client/shared/widgets/tooltip/moz.build
@@ -1,16 +1,15 @@
 # -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*-
 # vim: set filetype=python:
 # This Source Code Form is subject to the terms of the Mozilla Public
 # License, v. 2.0. If a copy of the MPL was not distributed with this
 # file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
 DevToolsModules(
-    'CssDocsTooltip.js',
     'EventTooltipHelper.js',
     'HTMLTooltip.js',
     'ImageTooltipHelper.js',
     'InlineTooltip.js',
     'SwatchBasedEditorTooltip.js',
     'SwatchColorPickerTooltip.js',
     'SwatchCubicBezierTooltip.js',
     'SwatchFilterTooltip.js',
--- a/devtools/client/themes/commandline.css
+++ b/devtools/client/themes/commandline.css
@@ -238,13 +238,8 @@
   list-style-type: none;
   padding-left: 0;
 }
 
 .gcli-appcache-detail {
   padding-left: 20px;
   padding-bottom: 10px;
 }
-
-.gcli-mdn-url {
-  text-decoration: underline;
-  cursor: pointer;
-}
--- a/devtools/client/themes/tooltips.css
+++ b/devtools/client/themes/tooltips.css
@@ -2,17 +2,16 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 /* Import stylesheets for specific tooltip widgets */
 @import url(chrome://devtools/content/shared/widgets/color-widget.css);
 @import url(chrome://devtools/content/shared/widgets/cubic-bezier.css);
 @import url(chrome://devtools/content/shared/widgets/filter-widget.css);
-@import url(chrome://devtools/content/shared/widgets/mdn-docs.css);
 @import url(chrome://devtools/content/shared/widgets/spectrum.css);
 
 /* Tooltip specific theme variables */
 
 .theme-dark {
   --bezier-diagonal-color: #eee;
   --bezier-grid-color: rgba(0, 0, 0, 0.2);
 }
--- a/devtools/shared/gcli/commands/index.js
+++ b/devtools/shared/gcli/commands/index.js
@@ -60,17 +60,16 @@ exports.devtoolsModules = [
   "devtools/shared/gcli/commands/cmd",
   "devtools/shared/gcli/commands/cookie",
   "devtools/shared/gcli/commands/csscoverage",
   "devtools/shared/gcli/commands/folder",
   "devtools/shared/gcli/commands/highlight",
   "devtools/shared/gcli/commands/inject",
   "devtools/shared/gcli/commands/jsb",
   "devtools/shared/gcli/commands/listen",
-  "devtools/shared/gcli/commands/mdn",
   "devtools/shared/gcli/commands/measure",
   "devtools/shared/gcli/commands/media",
   "devtools/shared/gcli/commands/pagemod",
   "devtools/shared/gcli/commands/paintflashing",
   "devtools/shared/gcli/commands/qsa",
   "devtools/shared/gcli/commands/restart",
   "devtools/shared/gcli/commands/rulers",
   "devtools/shared/gcli/commands/screenshot",
deleted file mode 100644
--- a/devtools/shared/gcli/commands/mdn.js
+++ /dev/null
@@ -1,83 +0,0 @@
-/* This Source Code Form is subject to the terms of the Mozilla Public
- * License, v. 2.0. If a copy of the MPL was not distributed with this
- * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
-
-"use strict";
-
-const l10n = require("gcli/l10n");
-
-var MdnDocsWidget;
-try {
-  MdnDocsWidget = require("devtools/client/shared/widgets/MdnDocsWidget");
-} catch (e) {
-  // DevTools MdnDocsWidget only available in Firefox Desktop
-}
-
-exports.items = [{
-  name: "mdn",
-  description: l10n.lookup("mdnDesc")
-}, {
-  item: "command",
-  runAt: "client",
-  name: "mdn css",
-  description: l10n.lookup("mdnCssDesc"),
-  returnType: "cssPropertyOutput",
-  params: [{
-    name: "property",
-    type: { name: "string" },
-    defaultValue: null,
-    description: l10n.lookup("mdnCssProp")
-  }],
-  exec: function (args) {
-    if (!MdnDocsWidget) {
-      return null;
-    }
-
-    return MdnDocsWidget.getCssDocs(args.property).then(result => {
-      return {
-        data: result,
-        url: MdnDocsWidget.PAGE_LINK_URL + args.property,
-        property: args.property
-      };
-    }, error => {
-      return { error, property: args.property };
-    });
-  }
-}, {
-  item: "converter",
-  from: "cssPropertyOutput",
-  to: "dom",
-  exec: function (result, context) {
-    let propertyName = result.property;
-
-    let document = context.document;
-    let root = document.createElement("div");
-
-    if (result.error) {
-      // The css property specified doesn't exist.
-      root.appendChild(document.createTextNode(
-        l10n.lookupFormat("mdnCssPropertyNotFound", [ propertyName ]) +
-        " (" + result.error + ")"));
-    } else {
-      let title = document.createElement("h2");
-      title.textContent = propertyName;
-      root.appendChild(title);
-
-      let link = document.createElement("p");
-      link.classList.add("gcli-mdn-url");
-      link.textContent = l10n.lookup("mdnCssVisitPage");
-      root.appendChild(link);
-
-      link.addEventListener("click", () => {
-        let mainWindow = context.environment.chromeWindow;
-        mainWindow.openUILinkIn(result.url, "tab");
-      });
-
-      let summary = document.createElement("p");
-      summary.textContent = result.data.summary;
-      root.appendChild(summary);
-    }
-
-    return root;
-  }
-}];
--- a/devtools/shared/gcli/commands/moz.build
+++ b/devtools/shared/gcli/commands/moz.build
@@ -12,17 +12,16 @@ DevToolsModules(
     'cookie.js',
     'csscoverage.js',
     'folder.js',
     'highlight.js',
     'index.js',
     'inject.js',
     'jsb.js',
     'listen.js',
-    'mdn.js',
     'measure.js',
     'media.js',
     'pagemod.js',
     'paintflashing.js',
     'qsa.js',
     'restart.js',
     'rulers.js',
     'screenshot.js',
--- a/devtools/shared/locales/en-US/gclicommands.properties
+++ b/devtools/shared/locales/en-US/gclicommands.properties
@@ -1464,34 +1464,16 @@ folderOpenProfileDesc=Open profile direc
 # of the 'folder open' command with an invalid folder path.
 folderInvalidPath=Please enter a valid path
 
 # LOCALIZATION NOTE (folderOpenDirResult) A very short string used to
 # describe the result of the 'folder open' command.
 # The argument (%1$S) is the folder path.
 folderOpenDirResult=Opened %1$S
 
-# LOCALIZATION NOTE (mdnDesc) A very short string used to describe the
-# use of 'mdn' command.
-mdnDesc=Retrieve documentation from MDN
-# LOCALIZATION NOTE (mdnCssDesc) A very short string used to describe the
-# result of the 'mdn css' command.
-mdnCssDesc=Retrieve documentation about a given CSS property name from MDN
-# LOCALIZATION NOTE (mdnCssProp) String used to describe the 'property name'
-# parameter used in the 'mdn css' command.
-mdnCssProp=Property name
-# LOCALIZATION NOTE (mdnCssPropertyNotFound) String used to display an error in
-# the result of the 'mdn css' command. Errors occur when a given CSS property
-# wasn't found on MDN. The %1$S parameter will be replaced with the name of the
-# CSS property.
-mdnCssPropertyNotFound=MDN documentation for the CSS property ā€˜%1$Sā€™ was not found.
-# LOCALIZATION NOTE (mdnCssVisitPage) String used as the label of a link to the
-# MDN page for a given CSS property.
-mdnCssVisitPage=Visit MDN page
-
 # LOCALIZATION NOTE (security)
 securityPrivacyDesc=Display supported security and privacy features
 securityManual=Commands to list and get suggestions about security features for the current domain.
 securityListDesc=Display security features
 securityListManual=Display a list of all relevant security features of the current page.
 # CSP specific
 securityCSPDesc=Display CSP specific security features
 securityCSPManual=Display feedback about the CSP applied to the current page.
--- a/devtools/shared/locales/en-US/styleinspector.properties
+++ b/devtools/shared/locales/en-US/styleinspector.properties
@@ -137,24 +137,16 @@ styleinspector.copyImageDataUrlError=Fai
 # LOCALIZATION NOTE (styleinspector.contextmenu.toggleOrigSources): Text displayed in the rule view
 # context menu.
 styleinspector.contextmenu.toggleOrigSources=Show Original Sources
 
 # LOCALIZATION NOTE (styleinspector.contextmenu.toggleOrigSources.accessKey): Access key for
 # the rule view context menu "Show original sources" entry.
 styleinspector.contextmenu.toggleOrigSources.accessKey=O
 
-# LOCALIZATION NOTE (styleinspector.contextmenu.showMdnDocs): Text displayed in the rule view
-# context menu to display docs from MDN for an item.
-styleinspector.contextmenu.showMdnDocs=Show MDN Docs
-
-# LOCALIZATION NOTE (styleinspector.contextmenu.showMdnDocs.accessKey): Access key for
-# the rule view context menu "Show MDN docs" entry.
-styleinspector.contextmenu.showMdnDocs.accessKey=D
-
 # LOCALIZATION NOTE (styleinspector.contextmenu.addNewRule): Text displayed in the
 # rule view context menu for adding a new rule to the element.
 # This should match inspector.addRule.tooltip in inspector.properties
 styleinspector.contextmenu.addNewRule=Add New Rule
 
 # LOCALIZATION NOTE (styleinspector.contextmenu.addRule.accessKey): Access key for
 # the rule view context menu "Add rule" entry.
 styleinspector.contextmenu.addNewRule.accessKey=R