3 files changed, 389 insertions, 0 deletions
diff --git a/devtools/client/inspector/rules/utils/l10n.js b/devtools/client/inspector/rules/utils/l10n.js
new file mode 100644
index 0000000000..b90748ae22
--- /dev/null
+++ b/devtools/client/inspector/rules/utils/l10n.js
@@ -0,0 +1,15 @@
+/* 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 { LocalizationHelper } = require("resource://devtools/shared/l10n.js");
+const L10N = new LocalizationHelper(
+  "devtools/shared/locales/styleinspector.properties"
+);
+
+module.exports = {
+  getStr: (...args) => L10N.getStr(...args),
+  getFormatStr: (...args) => L10N.getFormatStr(...args),
+};
diff --git a/devtools/client/inspector/rules/utils/moz.build b/devtools/client/inspector/rules/utils/moz.build
new file mode 100644
index 0000000000..cc3fa4dfbd
--- /dev/null
+++ b/devtools/client/inspector/rules/utils/moz.build
@@ -0,0 +1,10 @@
+# -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*-
+# vim: set filetype=python:
+# 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/.
+
+DevToolsModules(
+    "l10n.js",
+    "utils.js",
+)
diff --git a/devtools/client/inspector/rules/utils/utils.js b/devtools/client/inspector/rules/utils/utils.js
new file mode 100644
index 0000000000..fc352d9df7
--- /dev/null
+++ b/devtools/client/inspector/rules/utils/utils.js
@@ -0,0 +1,364 @@
+/* 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 {
+  VIEW_NODE_CSS_QUERY_CONTAINER,
+  VIEW_NODE_CSS_SELECTOR_WARNINGS,
+  VIEW_NODE_FONT_TYPE,
+  VIEW_NODE_IMAGE_URL_TYPE,
+  VIEW_NODE_INACTIVE_CSS,
+  VIEW_NODE_LOCATION_TYPE,
+  VIEW_NODE_PROPERTY_TYPE,
+  VIEW_NODE_SELECTOR_TYPE,
+  VIEW_NODE_SHAPE_POINT_TYPE,
+  VIEW_NODE_SHAPE_SWATCH,
+  VIEW_NODE_VALUE_TYPE,
+  VIEW_NODE_VARIABLE_TYPE,
+} = require("resource://devtools/client/inspector/shared/node-types.js");
+const INSET_POINT_TYPES = ["top", "right", "bottom", "left"];
+
+/**
+ * Returns the [Rule] object associated with the given node.
+ *
+ * @param {DOMNode} node
+ *        The node which we want to find the [Rule] object for
+ * @param {ElementStyle} elementStyle
+ *        The [ElementStyle] associated with the selected element
+ * @return {Rule|null} associated with the given node
+ */
+function getRuleFromNode(node, elementStyle) {
+  const ruleEl = node.closest(".ruleview-rule[data-rule-id]");
+  const ruleId = ruleEl ? ruleEl.dataset.ruleId : null;
+  return ruleId ? elementStyle.getRule(ruleId) : null;
+}
+
+/**
+ * Returns the [TextProperty] object associated with the given node.
+ *
+ * @param {DOMNode} node
+ *        The node which we want to find the [TextProperty] object for
+ * @param {Rule|null} rule
+ *        The [Rule] associated with the given node
+ * @return {TextProperty|null} associated with the given node
+ */
+function getDeclarationFromNode(node, rule) {
+  if (!rule) {
+    return null;
+  }
+
+  const declarationEl = node.closest(".ruleview-property[data-declaration-id]");
+  const declarationId = declarationEl
+    ? declarationEl.dataset.declarationId
+    : null;
+  return rule ? rule.getDeclaration(declarationId) : null;
+}
+
+/**
+ * Get the type of a given node in the Rules view.
+ *
+ * @param {DOMNode} node
+ *        The node which we want information about
+ * @param {ElementStyle} elementStyle
+ *        The ElementStyle to which this rule belongs
+ * @return {Object|null} containing the following props:
+ * - rule {Rule} The Rule object.
+ * - type {String} One of the VIEW_NODE_XXX_TYPE const in
+ *   client/inspector/shared/node-types.
+ * - value {Object} Depends on the type of the node.
+ * - view {String} Always "rule" to indicate the rule view.
+ * Otherwise, returns null if the node isn't anything we care about.
+ */
+// eslint-disable-next-line complexity
+function getNodeInfo(node, elementStyle) {
+  if (!node) {
+    return null;
+  }
+
+  const rule = getRuleFromNode(node, elementStyle);
+  const declaration = getDeclarationFromNode(node, rule);
+  const classList = node.classList;
+
+  let type, value;
+
+  if (declaration && classList.contains("ruleview-propertyname")) {
+    type = VIEW_NODE_PROPERTY_TYPE;
+    value = {
+      property: node.textContent,
+      value: getPropertyNameAndValue(node).value,
+      enabled: declaration.enabled,
+      overridden: declaration.overridden,
+      pseudoElement: rule.pseudoElement,
+      sheetHref: rule.domRule.href,
+      textProperty: declaration,
+    };
+  } else if (declaration && classList.contains("ruleview-propertyvalue")) {
+    type = VIEW_NODE_VALUE_TYPE;
+    value = {
+      property: getPropertyNameAndValue(node).name,
+      value: node.textContent,
+      enabled: declaration.enabled,
+      overridden: declaration.overridden,
+      pseudoElement: rule.pseudoElement,
+      sheetHref: rule.domRule.href,
+      textProperty: declaration,
+    };
+  } else if (declaration && classList.contains("ruleview-font-family")) {
+    const { name: propertyName, value: propertyValue } =
+      getPropertyNameAndValue(node);
+    type = VIEW_NODE_FONT_TYPE;
+    value = {
+      property: propertyName,
+      value: propertyValue,
+      enabled: declaration.enabled,
+      overridden: declaration.overridden,
+      pseudoElement: rule.pseudoElement,
+      sheetHref: rule.domRule.href,
+      textProperty: declaration,
+    };
+  } else if (declaration && classList.contains("ruleview-shape-point")) {
+    type = VIEW_NODE_SHAPE_POINT_TYPE;
+    value = {
+      property: getPropertyNameAndValue(node).name,
+      value: node.textContent,
+      enabled: declaration.enabled,
+      overridden: declaration.overridden,
+      pseudoElement: rule.pseudoElement,
+      sheetHref: rule.domRule.href,
+      textProperty: declaration,
+      toggleActive: getShapeToggleActive(node),
+      point: getShapePoint(node),
+    };
+  } else if (declaration && classList.contains("ruleview-unused-warning")) {
+    type = VIEW_NODE_INACTIVE_CSS;
+    value = declaration.isUsed();
+  } else if (node.closest(".container-query-declaration")) {
+    type = VIEW_NODE_CSS_QUERY_CONTAINER;
+    const containerQueryEl = node.closest(".container-query");
+    value = {
+      ancestorIndex: containerQueryEl.getAttribute("data-ancestor-index"),
+      rule,
+    };
+  } else if (node.classList.contains("ruleview-selector-warnings")) {
+    type = VIEW_NODE_CSS_SELECTOR_WARNINGS;
+    value = node.getAttribute("data-selector-warning-kind").split(",");
+  } else if (declaration && classList.contains("ruleview-shapeswatch")) {
+    type = VIEW_NODE_SHAPE_SWATCH;
+    value = {
+      enabled: declaration.enabled,
+      overridden: declaration.overridden,
+      textProperty: declaration,
+    };
+  } else if (
+    declaration &&
+    (classList.contains("ruleview-variable") ||
+      classList.contains("ruleview-unmatched-variable"))
+  ) {
+    type = VIEW_NODE_VARIABLE_TYPE;
+    value = {
+      property: getPropertyNameAndValue(node).name,
+      value: node.textContent.trim(),
+      enabled: declaration.enabled,
+      overridden: declaration.overridden,
+      pseudoElement: rule.pseudoElement,
+      sheetHref: rule.domRule.href,
+      textProperty: declaration,
+      variable: node.dataset.variable,
+    };
+  } else if (
+    declaration &&
+    classList.contains("theme-link") &&
+    !classList.contains("ruleview-rule-source")
+  ) {
+    type = VIEW_NODE_IMAGE_URL_TYPE;
+    value = {
+      property: getPropertyNameAndValue(node).name,
+      value: node.parentNode.textContent,
+      url: node.href,
+      enabled: declaration.enabled,
+      overridden: declaration.overridden,
+      pseudoElement: rule.pseudoElement,
+      sheetHref: rule.domRule.href,
+      textProperty: declaration,
+    };
+  } else if (
+    classList.contains("ruleview-selectors-container") ||
+    classList.contains("ruleview-selector") ||
+    classList.contains("ruleview-selector-element") ||
+    classList.contains("ruleview-selector-attribute") ||
+    classList.contains("ruleview-selector-pseudo-class") ||
+    classList.contains("ruleview-selector-pseudo-class-lock")
+  ) {
+    type = VIEW_NODE_SELECTOR_TYPE;
+    value = rule.selectorText;
+  } else if (
+    classList.contains("ruleview-rule-source") ||
+    classList.contains("ruleview-rule-source-label")
+  ) {
+    type = VIEW_NODE_LOCATION_TYPE;
+    const sourceLabelEl = classList.contains("ruleview-rule-source-label")
+      ? node
+      : node.querySelector(".ruleview-rule-source-label");
+    value =
+      sourceLabelEl.getAttribute("data-url") || rule.sheet?.href || rule.title;
+  } else {
+    return null;
+  }
+
+  return {
+    rule,
+    type,
+    value,
+    view: "rule",
+  };
+}
+
+/**
+ * Walk up the DOM from a given node until a parent property holder is found,
+ * and return the textContent for the name and value nodes.
+ * Stops at the first property found, so if node is inside the computed property
+ * list, the computed property will be returned
+ *
+ * @param {DOMNode} node
+ *        The node to start from
+ * @return {Object} {name, value}
+ */
+function getPropertyNameAndValue(node) {
+  while (node?.classList) {
+    // Check first for ruleview-computed since it's the deepest
+    if (
+      node.classList.contains("ruleview-computed") ||
+      node.classList.contains("ruleview-property")
+    ) {
+      return {
+        name: node.querySelector(".ruleview-propertyname").textContent,
+        value: node.querySelector(".ruleview-propertyvalue").textContent,
+      };
+    }
+
+    node = node.parentNode;
+  }
+
+  return null;
+}
+
+/**
+ * Walk up the DOM from a given node until a parent property holder is found,
+ * and return an active shape toggle if one exists.
+ *
+ * @param {DOMNode} node
+ *        The node to start from
+ * @returns {DOMNode} The active shape toggle node, if one exists.
+ */
+function getShapeToggleActive(node) {
+  while (node?.classList) {
+    // Check first for ruleview-computed since it's the deepest
+    if (
+      node.classList.contains("ruleview-computed") ||
+      node.classList.contains("ruleview-property")
+    ) {
+      return node.querySelector(".ruleview-shapeswatch.active");
+    }
+
+    node = node.parentNode;
+  }
+
+  return null;
+}
+
+/**
+ * Get the point associated with a shape point node.
+ *
+ * @param {DOMNode} node
+ *        A shape point node
+ * @returns {String} The point associated with the given node.
+ */
+function getShapePoint(node) {
+  const classList = node.classList;
+  let point = node.dataset.point;
+  // Inset points use classes instead of data because a single span can represent
+  // multiple points.
+  const insetClasses = [];
+  classList.forEach(className => {
+    if (INSET_POINT_TYPES.includes(className)) {
+      insetClasses.push(className);
+    }
+  });
+  if (insetClasses.length) {
+    point = insetClasses.join(",");
+  }
+  return point;
+}
+
+/**
+ * Returns an array of CSS variables used in a CSS property value.
+ * If no CSS variables are used, returns an empty array.
+ *
+ * @param {String} propertyValue
+ *        CSS property value (e.g. "1px solid var(--color, blue)")
+ * @return {Array}
+ *         List of variable names (e.g. ["--color"])
+ *
+ */
+function getCSSVariables(propertyValue = "") {
+  const variables = [];
+  const parts = propertyValue.split(/var\(\s*--/);
+
+  if (parts.length) {
+    // Skip first part. It is the substring before the first occurence of "var(--"
+    for (let i = 1; i < parts.length; i++) {
+      // Split the part by any of the following characters expected after a variable name:
+      // comma, closing parenthesis or whitespace.
+      // Take just the first match. Anything else is either:
+      // - the fallback value, ex: ", blue" from "var(--color, blue)"
+      // - the closing parenthesis, ex: ")" from "var(--color)"
+      const variable = parts[i].split(/[,)\s+]/).shift();
+
+      if (variable) {
+        // Add back the double-dash. The initial string was split by "var(--"
+        variables.push(`--${variable}`);
+      }
+    }
+  }
+
+  return variables;
+}
+
+/**
+ * Get the CSS compatibility issue information for a given node.
+ *
+ * @param {DOMNode} node
+ *        The node which we want compatibility information about
+ * @param {ElementStyle} elementStyle
+ *        The ElementStyle to which this rule belongs
+ */
+async function getNodeCompatibilityInfo(node, elementStyle) {
+  const rule = getRuleFromNode(node, elementStyle);
+  const declaration = getDeclarationFromNode(node, rule);
+  const issue = await declaration.isCompatible();
+
+  return issue;
+}
+
+/**
+ * Returns true if the given CSS property value contains the given variable name.
+ *
+ * @param {String} propertyValue
+ *        CSS property value (e.g. "var(--color)")
+ * @param {String} variableName
+ *        CSS variable name (e.g. "--color")
+ * @return {Boolean}
+ */
+function hasCSSVariable(propertyValue, variableName) {
+  return getCSSVariables(propertyValue).includes(variableName);
+}
+
+module.exports = {
+  getCSSVariables,
+  getNodeInfo,
+  getRuleFromNode,
+  hasCSSVariable,
+  getNodeCompatibilityInfo,
+};