tor-browser

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

css-query-container-tooltip-helper.js (4862B)

      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 XHTML_NS = "http://www.w3.org/1999/xhtml";
      8 
      9 class CssQueryContainerTooltipHelper {
     10  /**
     11   * Fill the tooltip with container information.
     12   */
     13  async setContent(data, tooltip) {
     14    const res = await data.rule.domRule.getQueryContainerForNode(
     15      data.ancestorIndex,
     16      data.rule.inherited ||
     17        data.rule.elementStyle.ruleView.inspector.selection.nodeFront
     18    );
     19 
     20    const fragment = this.#getTemplate(res, tooltip);
     21    tooltip.panel.innerHTML = "";
     22    tooltip.panel.appendChild(fragment);
     23 
     24    // Size the content.
     25    tooltip.setContentSize({ width: 267 });
     26  }
     27 
     28  /**
     29   * Get the template of the tooltip.
     30   *
     31   * @param {object} data
     32   * @param {NodeFront} data.node
     33   * @param {string} data.containerType
     34   * @param {string} data.inlineSize
     35   * @param {string} data.blockSize
     36   * @param {HTMLTooltip} tooltip
     37   *        The tooltip we are targetting.
     38   */
     39  #getTemplate(data, tooltip) {
     40    const { doc } = tooltip;
     41 
     42    const templateNode = doc.createElementNS(XHTML_NS, "template");
     43 
     44    const tooltipContainer = doc.createElementNS(XHTML_NS, "div");
     45    tooltipContainer.classList.add("devtools-tooltip-query-container");
     46    templateNode.content.appendChild(tooltipContainer);
     47 
     48    const nodeContainer = doc.createElementNS(XHTML_NS, "header");
     49    tooltipContainer.append(nodeContainer);
     50 
     51    const containerQueryLabel = doc.createElementNS(XHTML_NS, "span");
     52    containerQueryLabel.classList.add("property-name");
     53    containerQueryLabel.appendChild(doc.createTextNode(`query container`));
     54 
     55    const nodeEl = doc.createElementNS(XHTML_NS, "span");
     56    nodeEl.classList.add("objectBox-node");
     57    nodeContainer.append(doc.createTextNode("<"), nodeEl);
     58 
     59    const nodeNameEl = doc.createElementNS(XHTML_NS, "span");
     60    nodeNameEl.classList.add("tag-name");
     61    nodeNameEl.appendChild(
     62      doc.createTextNode(data.node.nodeName.toLowerCase())
     63    );
     64 
     65    nodeEl.appendChild(nodeNameEl);
     66 
     67    if (data.node.id) {
     68      const idEl = doc.createElementNS(XHTML_NS, "span");
     69      idEl.classList.add("attribute-name");
     70      idEl.appendChild(doc.createTextNode(`#${data.node.id}`));
     71      nodeEl.appendChild(idEl);
     72    }
     73 
     74    for (const attr of data.node.attributes) {
     75      if (attr.name !== "class") {
     76        continue;
     77      }
     78      for (const cls of attr.value.split(/\s/)) {
     79        const el = doc.createElementNS(XHTML_NS, "span");
     80        el.classList.add("attribute-name");
     81        el.appendChild(doc.createTextNode(`.${cls}`));
     82        nodeEl.appendChild(el);
     83      }
     84    }
     85    nodeContainer.append(doc.createTextNode(">"));
     86 
     87    const ul = doc.createElementNS(XHTML_NS, "ul");
     88    tooltipContainer.appendChild(ul);
     89 
     90    const containerTypeEl = doc.createElementNS(XHTML_NS, "li");
     91    const containerTypeLabel = doc.createElementNS(XHTML_NS, "span");
     92    containerTypeLabel.classList.add("property-name");
     93    containerTypeLabel.appendChild(doc.createTextNode(`container-type`));
     94 
     95    const containerTypeValue = doc.createElementNS(XHTML_NS, "span");
     96    containerTypeValue.classList.add("property-value");
     97    containerTypeValue.appendChild(doc.createTextNode(data.containerType));
     98 
     99    containerTypeEl.append(
    100      containerTypeLabel,
    101      doc.createTextNode(": "),
    102      containerTypeValue
    103    );
    104    ul.appendChild(containerTypeEl);
    105 
    106    const inlineSizeEl = doc.createElementNS(XHTML_NS, "li");
    107 
    108    const inlineSizeLabel = doc.createElementNS(XHTML_NS, "span");
    109    inlineSizeLabel.classList.add("property-name");
    110    inlineSizeLabel.appendChild(doc.createTextNode(`inline-size`));
    111 
    112    const inlineSizeValue = doc.createElementNS(XHTML_NS, "span");
    113    inlineSizeValue.classList.add("property-value");
    114    inlineSizeValue.appendChild(doc.createTextNode(data.inlineSize));
    115 
    116    inlineSizeEl.append(
    117      inlineSizeLabel,
    118      doc.createTextNode(": "),
    119      inlineSizeValue
    120    );
    121    ul.appendChild(inlineSizeEl);
    122 
    123    if (data.containerType != "inline-size") {
    124      const blockSizeEl = doc.createElementNS(XHTML_NS, "li");
    125      const blockSizeLabel = doc.createElementNS(XHTML_NS, "span");
    126      blockSizeLabel.classList.add("property-name");
    127      blockSizeLabel.appendChild(doc.createTextNode(`block-size`));
    128 
    129      const blockSizeValue = doc.createElementNS(XHTML_NS, "span");
    130      blockSizeValue.classList.add("property-value");
    131      blockSizeValue.appendChild(doc.createTextNode(data.blockSize));
    132 
    133      blockSizeEl.append(
    134        blockSizeLabel,
    135        doc.createTextNode(": "),
    136        blockSizeValue
    137      );
    138      ul.appendChild(blockSizeEl);
    139    }
    140 
    141    return doc.importNode(templateNode.content, true);
    142  }
    143 }
    144 
    145 module.exports = CssQueryContainerTooltipHelper;