css-query-container-tooltip-helper.js

Enable keyboard shortcuts

/* 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";

class CssQueryContainerTooltipHelper {

/**

   * Fill the tooltip with container information.

*/

  async setContent(data, tooltip) {

    const res = await data.rule.domRule.getQueryContainerForNode(

      data.ancestorIndex,

      data.rule.inherited ||

        data.rule.elementStyle.ruleView.inspector.selection.nodeFront

);

    const fragment = this.#getTemplate(res, tooltip);

    tooltip.panel.innerHTML = "";

    tooltip.panel.appendChild(fragment);

    // Size the content.

    tooltip.setContentSize({ width: 267, height: Infinity });

/**

   * Get the template of the tooltip.

   * @param {Object} data

   * @param {NodeFront} data.node

   * @param {string} data.containerType

   * @param {string} data.inlineSize

   * @param {string} data.blockSize

   * @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, "div");

    tooltipContainer.classList.add("devtools-tooltip-query-container");

    templateNode.content.appendChild(tooltipContainer);

    const nodeContainer = doc.createElementNS(XHTML_NS, "header");

    tooltipContainer.append(nodeContainer);

    const containerQueryLabel = doc.createElementNS(XHTML_NS, "span");

    containerQueryLabel.classList.add("property-name");

    containerQueryLabel.appendChild(doc.createTextNode(`query container`));

    const nodeEl = doc.createElementNS(XHTML_NS, "span");

    nodeEl.classList.add("objectBox-node");

    nodeContainer.append(doc.createTextNode("<"), nodeEl);

    const nodeNameEl = doc.createElementNS(XHTML_NS, "span");

    nodeNameEl.classList.add("tag-name");

    nodeNameEl.appendChild(

      doc.createTextNode(data.node.nodeName.toLowerCase())

);

    nodeEl.appendChild(nodeNameEl);

    if (data.node.id) {

      const idEl = doc.createElementNS(XHTML_NS, "span");

      idEl.classList.add("attribute-name");

      idEl.appendChild(doc.createTextNode(`#${data.node.id}`));

      nodeEl.appendChild(idEl);

    for (const attr of data.node.attributes) {

      if (attr.name !== "class") {

        continue;

      for (const cls of attr.value.split(/\s/)) {

        const el = doc.createElementNS(XHTML_NS, "span");

        el.classList.add("attribute-name");

        el.appendChild(doc.createTextNode(`.${cls}`));

        nodeEl.appendChild(el);

    nodeContainer.append(doc.createTextNode(">"));

    const ul = doc.createElementNS(XHTML_NS, "ul");

    tooltipContainer.appendChild(ul);

    const containerTypeEl = doc.createElementNS(XHTML_NS, "li");

    const containerTypeLabel = doc.createElementNS(XHTML_NS, "span");

    containerTypeLabel.classList.add("property-name");

    containerTypeLabel.appendChild(doc.createTextNode(`container-type`));

    const containerTypeValue = doc.createElementNS(XHTML_NS, "span");

    containerTypeValue.classList.add("property-value");

    containerTypeValue.appendChild(doc.createTextNode(data.containerType));

    containerTypeEl.append(

      containerTypeLabel,

      doc.createTextNode(": "),

      containerTypeValue

);

    ul.appendChild(containerTypeEl);

    const inlineSizeEl = doc.createElementNS(XHTML_NS, "li");

    const inlineSizeLabel = doc.createElementNS(XHTML_NS, "span");

    inlineSizeLabel.classList.add("property-name");

    inlineSizeLabel.appendChild(doc.createTextNode(`inline-size`));

    const inlineSizeValue = doc.createElementNS(XHTML_NS, "span");

    inlineSizeValue.classList.add("property-value");

    inlineSizeValue.appendChild(doc.createTextNode(data.inlineSize));

    inlineSizeEl.append(

      inlineSizeLabel,

      doc.createTextNode(": "),

      inlineSizeValue

);

    ul.appendChild(inlineSizeEl);

    if (data.containerType != "inline-size") {

      const blockSizeEl = doc.createElementNS(XHTML_NS, "li");

      const blockSizeLabel = doc.createElementNS(XHTML_NS, "span");

      blockSizeLabel.classList.add("property-name");

      blockSizeLabel.appendChild(doc.createTextNode(`block-size`));

      const blockSizeValue = doc.createElementNS(XHTML_NS, "span");

      blockSizeValue.classList.add("property-value");

      blockSizeValue.appendChild(doc.createTextNode(data.blockSize));

      blockSizeEl.append(

        blockSizeLabel,

        doc.createTextNode(": "),

        blockSizeValue

);

      ul.appendChild(blockSizeEl);

    return doc.importNode(templateNode.content, true);

module.exports = CssQueryContainerTooltipHelper;