diff options
Diffstat (limited to 'devtools/client/shared/widgets/tooltip/css-selector-warnings-tooltip-helper.js')
-rw-r--r-- | devtools/client/shared/widgets/tooltip/css-selector-warnings-tooltip-helper.js | 64 |
1 files changed, 64 insertions, 0 deletions
diff --git a/devtools/client/shared/widgets/tooltip/css-selector-warnings-tooltip-helper.js b/devtools/client/shared/widgets/tooltip/css-selector-warnings-tooltip-helper.js new file mode 100644 index 0000000000..9150a2e6a9 --- /dev/null +++ b/devtools/client/shared/widgets/tooltip/css-selector-warnings-tooltip-helper.js @@ -0,0 +1,64 @@ +/* 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 XHTML_NS = "http://www.w3.org/1999/xhtml"; + +const SELECTOR_WARNINGS = { + UnconstrainedHas: { + l10nId: "css-selector-warning-unconstrained-has", + // There could be a specific section on the MDN :has page for this: https://github.com/mdn/mdn/issues/469 + learnMoreUrl: null, + }, +}; + +class CssSelectorWarningsTooltipHelper { + /** + * Fill the tooltip with selector warnings. + */ + async setContent(data, tooltip) { + const fragment = this.#getTemplate(data, tooltip); + tooltip.panel.innerHTML = ""; + tooltip.panel.append(fragment); + + // Size the content. + tooltip.setContentSize({ width: 267, height: Infinity }); + } + + /** + * Get the template of the tooltip. + * + * @param {Array<String>} data: Array of selector warning kind returned by + * CSSRule#getSelectorWarnings + * @param {HTMLTooltip} tooltip + * The tooltip we are targetting. + */ + #getTemplate(data, tooltip) { + const { doc } = tooltip; + + const templateNode = doc.createElementNS(XHTML_NS, "template"); + + const tooltipContainer = doc.createElementNS(XHTML_NS, "ul"); + tooltipContainer.classList.add("devtools-tooltip-selector-warnings"); + templateNode.content.appendChild(tooltipContainer); + + for (const selectorWarningKind of data) { + if (!SELECTOR_WARNINGS[selectorWarningKind]) { + console.error("Unknown selector warning kind", data); + continue; + } + + const { l10nId } = SELECTOR_WARNINGS[selectorWarningKind]; + + const li = doc.createElementNS(XHTML_NS, "li"); + li.setAttribute("data-l10n-id", l10nId); + tooltipContainer.append(li); + } + + return doc.importNode(templateNode.content, true); + } +} + +module.exports = CssSelectorWarningsTooltipHelper; |