tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

inactive-css-tooltip-helper.js (3686B)

      1 /* This Source Code Form is subject to the terms of the Mozilla Public
      2 * License, v. 2.0. If a copy of the MPL was not distributed with this
      3 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
      4 
      5 "use strict";
      6 
      7 loader.lazyRequireGetter(
      8  this,
      9  "openDocLink",
     10  "resource://devtools/client/shared/link.js",
     11  true
     12 );
     13 const { getMdnLinkParams } = ChromeUtils.importESModule(
     14  "resource://devtools/shared/mdn.mjs"
     15 );
     16 
     17 class InactiveCssTooltipHelper {
     18  constructor() {
     19    this.addTab = this.addTab.bind(this);
     20  }
     21 
     22  /**
     23   * Fill the tooltip with inactive CSS information.
     24   */
     25  async setContent(data, tooltip) {
     26    const fragment = this.getTemplate(data, tooltip);
     27 
     28    tooltip.panel.addEventListener("click", this.addTab);
     29    tooltip.once("hidden", () => {
     30      tooltip.panel.removeEventListener("click", this.addTab);
     31    });
     32 
     33    await tooltip.setLocalizedFragment(fragment, { width: 267 });
     34  }
     35 
     36  /**
     37   * Get the template that the Fluent string will be merged with. This template
     38   * looks something like this but there is a variable amount of properties in the
     39   * fix section:
     40   *
     41   * <div class="devtools-tooltip-inactive-css">
     42   *   <p data-l10n-id="inactive-css-not-grid-or-flex-container"
     43   *      data-l10n-args="{&quot;property&quot;:&quot;align-content&quot;}">
     44   *   </p>
     45   *   <p data-l10n-id="inactive-css-not-grid-or-flex-container-fix">
     46   *     <span data-l10n-name="link" class="link"></span>
     47   *   </p>
     48   * </div>
     49   *
     50   * @param {object} data
     51   *        An object in the following format: {
     52   *          fixId: "inactive-css-not-grid-item-fix-2", // Fluent id containing the
     53   *                                                     // Inactive CSS fix.
     54   *          msgId: "inactive-css-not-grid-item", // Fluent id containing the
     55   *                                               // Inactive CSS message.
     56   *          property: "color", // Property name
     57   *        }
     58   * @param {HTMLTooltip} tooltip
     59   *        The tooltip we are targetting.
     60   */
     61  getTemplate(data, tooltip) {
     62    const XHTML_NS = "http://www.w3.org/1999/xhtml";
     63    const { fixId, msgId, property, display, lineCount, learnMoreURL } = data;
     64    const { doc } = tooltip;
     65 
     66    const documentUrl = new URL(
     67      (learnMoreURL ||
     68        `https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/${property}`) +
     69        "?" +
     70        getMdnLinkParams("inspector-inactive-css")
     71    );
     72    this._currentTooltip = tooltip;
     73    this._currentUrl = documentUrl.toString();
     74 
     75    const templateNode = doc.createElementNS(XHTML_NS, "template");
     76 
     77    // eslint-disable-next-line
     78    templateNode.innerHTML = `
     79    <div class="devtools-tooltip-inactive-css">
     80      <p data-l10n-id="${msgId}"
     81         data-l10n-args='${JSON.stringify({ property, display, lineCount })}'>
     82      </p>
     83      <p data-l10n-id="${fixId}">
     84        <span data-l10n-name="link" class="link"></span>
     85      </p>
     86    </div>`;
     87 
     88    return doc.importNode(templateNode.content, true);
     89  }
     90 
     91  /**
     92   * Hide the tooltip, open `this._currentUrl` in a new tab and focus it.
     93   *
     94   * @param {DOMEvent} event
     95   *        The click event originating from the tooltip.
     96   */
     97  addTab(event) {
     98    // The XUL panel swallows click events so handlers can't be added directly
     99    // to the link span. As a workaround we listen to all click events in the
    100    // panel and if a link span is clicked we proceed.
    101    if (event.target.className !== "link") {
    102      return;
    103    }
    104 
    105    const tooltip = this._currentTooltip;
    106    tooltip.hide();
    107    openDocLink(this._currentUrl);
    108  }
    109 
    110  destroy() {
    111    this._currentTooltip = null;
    112    this._currentUrl = null;
    113  }
    114 }
    115 
    116 module.exports = InactiveCssTooltipHelper;