From 842cc6070777eef219b585f5992ab0d871e8fcc2 Mon Sep 17 00:00:00 2001 From: Moonchild Date: Sat, 9 Aug 2025 22:16:17 +0200 Subject: [PATCH] Issue #1899 - Remove MDN docs tooltip and link code from devtools. Resolves #1899 --- devtools/client/inspector/rules/rules.js | 5 - .../client/inspector/rules/test/browser.ini | 3 - ...ser_rules_context-menu-show-mdn-docs-01.js | 138 ----- ...ser_rules_context-menu-show-mdn-docs-02.js | 60 --- ...ser_rules_context-menu-show-mdn-docs-03.js | 117 ---- .../inspector/shared/style-inspector-menu.js | 27 - .../inspector/shared/tooltips-overlay.js | 16 - devtools/client/jar.mn | 1 - .../client/locales/en-US/inspector.properties | 8 - devtools/client/preferences/devtools.js | 2 - devtools/client/shared/test/browser.ini | 8 - .../client/shared/test/browser_mdn-docs-01.js | 167 ------ .../client/shared/test/browser_mdn-docs-02.js | 127 ----- .../client/shared/test/browser_mdn-docs-03.js | 276 ---------- devtools/client/shared/test/head.js | 102 ---- .../test/html-mdn-css-basic-testing.html | 21 - .../html-mdn-css-no-summary-or-syntax.html | 12 - .../shared/test/html-mdn-css-no-summary.html | 21 - .../shared/test/html-mdn-css-no-syntax.html | 17 - .../test/html-mdn-css-syntax-old-style.html | 23 - .../client/shared/widgets/MdnDocsWidget.js | 510 ------------------ devtools/client/shared/widgets/mdn-docs.css | 39 -- devtools/client/shared/widgets/moz.build | 1 - .../shared/widgets/tooltip/CssDocsTooltip.js | 93 ---- .../client/shared/widgets/tooltip/moz.build | 1 - devtools/shared/gcli/commands/index.js | 1 - devtools/shared/gcli/commands/mdn.js | 83 --- devtools/shared/gcli/commands/moz.build | 1 - .../locales/en-US/gclicommands.properties | 18 - .../locales/en-US/styleinspector.properties | 8 - 30 files changed, 1906 deletions(-) delete mode 100644 devtools/client/inspector/rules/test/browser_rules_context-menu-show-mdn-docs-01.js delete mode 100644 devtools/client/inspector/rules/test/browser_rules_context-menu-show-mdn-docs-02.js delete mode 100644 devtools/client/inspector/rules/test/browser_rules_context-menu-show-mdn-docs-03.js delete mode 100644 devtools/client/shared/test/browser_mdn-docs-01.js delete mode 100644 devtools/client/shared/test/browser_mdn-docs-02.js delete mode 100644 devtools/client/shared/test/browser_mdn-docs-03.js delete mode 100644 devtools/client/shared/test/html-mdn-css-basic-testing.html delete mode 100644 devtools/client/shared/test/html-mdn-css-no-summary-or-syntax.html delete mode 100644 devtools/client/shared/test/html-mdn-css-no-summary.html delete mode 100644 devtools/client/shared/test/html-mdn-css-no-syntax.html delete mode 100644 devtools/client/shared/test/html-mdn-css-syntax-old-style.html delete mode 100644 devtools/client/shared/widgets/MdnDocsWidget.js delete mode 100644 devtools/client/shared/widgets/mdn-docs.css delete mode 100644 devtools/client/shared/widgets/tooltip/CssDocsTooltip.js delete mode 100644 devtools/shared/gcli/commands/mdn.js diff --git a/devtools/client/inspector/rules/rules.js b/devtools/client/inspector/rules/rules.js index a33ba67cd7..ea7fd93d82 100644 --- a/devtools/client/inspector/rules/rules.js +++ b/devtools/client/inspector/rules/rules.js @@ -37,8 +37,6 @@ 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; // This is used to parse user input when filtering. @@ -157,11 +155,8 @@ function CssRuleView(inspector, document, store, pageStyle) { 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, { diff --git a/devtools/client/inspector/rules/test/browser.ini b/devtools/client/inspector/rules/test/browser.ini index 2c11219fbb..160c83f3de 100644 --- a/devtools/client/inspector/rules/test/browser.ini +++ b/devtools/client/inspector/rules/test/browser.ini @@ -85,9 +85,6 @@ support-files = [browser_rules_content_01.js] [browser_rules_content_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 [browser_rules_cssom.js] diff --git a/devtools/client/inspector/rules/test/browser_rules_context-menu-show-mdn-docs-01.js b/devtools/client/inspector/rules/test/browser_rules_context-menu-show-mdn-docs-01.js deleted file mode 100644 index 00582bbe1d..0000000000 --- a/devtools/client/inspector/rules/test/browser_rules_context-menu-show-mdn-docs-01.js +++ /dev/null @@ -1,138 +0,0 @@ -/* 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 = ` - - - - - - - MDN tooltip testing - - -`; - -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 oncePrefChanged = 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); -} - -/** - * 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; diff --git a/devtools/client/inspector/rules/test/browser_rules_context-menu-show-mdn-docs-02.js b/devtools/client/inspector/rules/test/browser_rules_context-menu-show-mdn-docs-02.js deleted file mode 100644 index f3fa776894..0000000000 --- a/devtools/client/inspector/rules/test/browser_rules_context-menu-show-mdn-docs-02.js +++ /dev/null @@ -1,60 +0,0 @@ -/* 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 = ` - - -
- Test "Show MDN Docs" context menu option -
- - -`; - -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.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"); -}); diff --git a/devtools/client/inspector/rules/test/browser_rules_context-menu-show-mdn-docs-03.js b/devtools/client/inspector/rules/test/browser_rules_context-menu-show-mdn-docs-03.js deleted file mode 100644 index eb1527d7b9..0000000000 --- a/devtools/client/inspector/rules/test/browser_rules_context-menu-show-mdn-docs-03.js +++ /dev/null @@ -1,117 +0,0 @@ -/* 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/styleeditor/utils"); -const PREF_ENABLE_MDN_DOCS_TOOLTIP = - "devtools.inspector.mdnDocsTooltip.enabled"; -const PROPERTY_NAME_CLASS = "ruleview-propertyname"; - -const TEST_DOC = ` - - -
- Test the pref to enable/disable the "Show MDN Docs" context menu option -
- - -`; - -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 oncePrefChanged = 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; - 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; diff --git a/devtools/client/inspector/shared/style-inspector-menu.js b/devtools/client/inspector/shared/style-inspector-menu.js index 7dcb609916..d6b9708e32 100644 --- a/devtools/client/inspector/shared/style-inspector-menu.js +++ b/devtools/client/inspector/shared/style-inspector-menu.js @@ -25,9 +25,6 @@ const STYLE_INSPECTOR_PROPERTIES = "devtools/shared/locales/styleinspector.prope 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"; - /** * Style inspector context menu * @@ -56,7 +53,6 @@ function StyleInspectorMenu(view, options) { 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); } @@ -229,19 +225,6 @@ StyleInspectorMenu.prototype = { }); 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({ @@ -407,16 +390,6 @@ StyleInspectorMenu.prototype = { 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.cssDocs; - cssDocsTooltip.show(anchor, cssPropertyName); - }, - /** * Add a new rule to the current element. */ diff --git a/devtools/client/inspector/shared/tooltips-overlay.js b/devtools/client/inspector/shared/tooltips-overlay.js index 1860587ddd..6718a52057 100644 --- a/devtools/client/inspector/shared/tooltips-overlay.js +++ b/devtools/client/inspector/shared/tooltips-overlay.js @@ -18,7 +18,6 @@ const { } = require("devtools/client/inspector/shared/node-types"); const { getColor } = require("devtools/client/shared/theme"); const { getCssProperties } = require("devtools/shared/fronts/css-properties"); -const CssDocsTooltip = require("devtools/client/shared/widgets/tooltip/CssDocsTooltip"); const { HTMLTooltip } = require("devtools/client/shared/widgets/tooltip/HTMLTooltip"); const { getImageDimensions, @@ -82,9 +81,6 @@ TooltipsOverlay.prototype = { this.previewTooltip.startTogglingOnHover(this.view.element, this._onPreviewTooltipTargetHover.bind(this)); - // MDN CSS help tooltip - this.cssDocs = new CssDocsTooltip(toolbox.doc); - if (this.isRuleView) { // Color picker tooltip this.colorPicker = new SwatchColorPickerTooltip(toolbox.doc, @@ -120,10 +116,6 @@ TooltipsOverlay.prototype = { this.cubicBezier.destroy(); } - if (this.cssDocs) { - this.cssDocs.destroy(); - } - if (this.filterEditor) { this.filterEditor.destroy(); } @@ -191,10 +183,6 @@ TooltipsOverlay.prototype = { this.cubicBezier.hide(); } - if (this.isRuleView && this.cssDocs.tooltip.isVisible()) { - this.cssDocs.hide(); - } - if (this.isRuleView && this.filterEditor.tooltip.isVisible()) { this.filterEditor.revert(); this.filterEdtior.hide(); @@ -295,10 +283,6 @@ TooltipsOverlay.prototype = { this.cubicBezier.hide(); } - if (this.cssDocs) { - this.cssDocs.hide(); - } - if (this.filterEditor) { this.filterEditor.hide(); } diff --git a/devtools/client/jar.mn b/devtools/client/jar.mn index a6334057e3..abedab2914 100644 --- a/devtools/client/jar.mn +++ b/devtools/client/jar.mn @@ -117,7 +117,6 @@ devtools.jar: 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/spectrum.css (shared/widgets/spectrum.css) content/aboutdebugging/aboutdebugging.xhtml (aboutdebugging/aboutdebugging.xhtml) diff --git a/devtools/client/locales/en-US/inspector.properties b/devtools/client/locales/en-US/inspector.properties index 252d72bfa4..01064fd183 100644 --- a/devtools/client/locales/en-US/inspector.properties +++ b/devtools/client/locales/en-US/inspector.properties @@ -48,14 +48,6 @@ eyedropper.disabled.title=Unavailable in non-HTML documents #LOCALIZATION NOTE: Used in the image preview tooltip when the image could not be loaded eventsTooltip.openInDebugger=Open in Debugger -# 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.collapsePane): This is the tooltip for the button # that collapses the right panel (rules, computed, box-model, etc...) in the # inspector UI. diff --git a/devtools/client/preferences/devtools.js b/devtools/client/preferences/devtools.js index fb018d81ab..34fa9b8836 100644 --- a/devtools/client/preferences/devtools.js +++ b/devtools/client/preferences/devtools.js @@ -47,8 +47,6 @@ pref("devtools.inspector.imagePreviewTooltipSize", 300); pref("devtools.inspector.showUserAgentStyles", false); // Show all native anonymous content (like controls in