tor-browser

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

RulePreviewTooltip.js (2112B)

      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 const { LocalizationHelper } = require("resource://devtools/shared/l10n.js");
      8 const {
      9  HTMLTooltip,
     10 } = require("resource://devtools/client/shared/widgets/tooltip/HTMLTooltip.js");
     11 
     12 const XHTML_NS = "http://www.w3.org/1999/xhtml";
     13 const L10N = new LocalizationHelper(
     14  "devtools/client/locales/inspector.properties"
     15 );
     16 
     17 /**
     18 * Tooltip displayed for when a CSS property is selected/highlighted.
     19 * TODO: For now, the tooltip content only shows "No Associated Rule". In Bug 1528288,
     20 * we will be implementing content for showing the source CSS rule.
     21 */
     22 class RulePreviewTooltip {
     23  constructor(doc) {
     24    this.show = this.show.bind(this);
     25    this.destroy = this.destroy.bind(this);
     26 
     27    // Initialize tooltip structure.
     28    this._tooltip = new HTMLTooltip(doc, {
     29      type: "arrow",
     30      consumeOutsideClicks: true,
     31      useXulWrapper: true,
     32    });
     33 
     34    this.container = doc.createElementNS(XHTML_NS, "div");
     35    this.container.className = "rule-preview-tooltip-container";
     36 
     37    this.message = doc.createElementNS(XHTML_NS, "span");
     38    this.message.className = "rule-preview-tooltip-message";
     39    this.message.textContent = L10N.getStr(
     40      "rulePreviewTooltip.noAssociatedRule"
     41    );
     42    this.container.appendChild(this.message);
     43 
     44    // TODO: Implement structure for showing the source CSS rule.
     45 
     46    this._tooltip.panel.innerHTML = "";
     47    this._tooltip.panel.appendChild(this.container);
     48    this._tooltip.setContentSize({ width: "auto", height: "auto" });
     49  }
     50 
     51  /**
     52   * Shows the tooltip on a given element.
     53   *
     54   * @param  {Element} element
     55   *         The target element to show the tooltip with.
     56   */
     57  show(element) {
     58    element.addEventListener("mouseout", () => this._tooltip.hide());
     59    this._tooltip.show(element);
     60  }
     61 
     62  destroy() {
     63    this._tooltip.destroy();
     64    this.container = null;
     65    this.message = null;
     66  }
     67 }
     68 
     69 module.exports = RulePreviewTooltip;