145 lines
4.8 KiB
JavaScript
145 lines
4.8 KiB
JavaScript
/* 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;
|