commit 6618651b9919d280614642b886db337f3d2f48bb
parent 6172ee900e49ffd4d0cee9645bbcd6bbc789fbc9
Author: Nicolas Chevobbe <nchevobbe@mozilla.com>
Date: Sat, 18 Oct 2025 14:17:38 +0000
Bug 1719461 - [devtools] Refactor Rule highlighting functions. r=devtools-reviewers,ochameau.
Extract code to highlight a registered css property into its own function (`_maybeHighlightCssRegisteredProperty`),
to reduce the complexity of `highlightProperty`.
Change `_highlightMatches` signature so it takes an object to make callsites easier
to understand
Change `_highlightRuleProperty` and `_highlightComputedProperty` to take a `TextProperty`
instead of a `TextPropertyEditor`.
Differential Revision: https://phabricator.services.mozilla.com/D268556
Diffstat:
1 file changed, 75 insertions(+), 56 deletions(-)
diff --git a/devtools/client/inspector/rules/rules.js b/devtools/client/inspector/rules/rules.js
@@ -1656,7 +1656,7 @@ CssRuleView.prototype = {
// Highlight search matches in the rule properties
for (const textProp of rule.textProps) {
- if (!textProp.invisible && this._highlightProperty(textProp.editor)) {
+ if (!textProp.invisible && this._highlightProperty(textProp)) {
isHighlighted = true;
}
}
@@ -1757,23 +1757,23 @@ CssRuleView.prototype = {
* filter search value and returns a boolean indicating whether or not the
* property or computed property was highlighted.
*
- * @param {TextPropertyEditor} editor
- * The rule property TextPropertyEditor object.
- * @return {Boolean} true if the property or computed property was
+ * @param {TextProperty} textProperty
+ * The rule property.
+ * @returns {boolean} true if the property or computed property was
* highlighted, false otherwise.
*/
- _highlightProperty(editor) {
- const isPropertyHighlighted = this._highlightRuleProperty(editor);
- const isComputedHighlighted = this._highlightComputedProperty(editor);
+ _highlightProperty(textProperty) {
+ const isPropertyHighlighted = this._highlightRuleProperty(textProperty);
+ const isComputedHighlighted = this._highlightComputedProperty(textProperty);
// Expand the computed list if a computed property is highlighted and the
// property rule is not highlighted
if (
!isPropertyHighlighted &&
isComputedHighlighted &&
- !editor.computed.hasAttribute("user-open")
+ !textProperty.editor.computed.hasAttribute("user-open")
) {
- editor.expandForFilter();
+ textProperty.editor.expandForFilter();
}
return isPropertyHighlighted || isComputedHighlighted;
@@ -1793,7 +1793,7 @@ CssRuleView.prototype = {
this._clearHighlight(editor.element);
- if (this._highlightProperty(editor)) {
+ if (this._highlightProperty(editor.prop)) {
this.searchField.classList.remove("devtools-style-searchbox-no-match");
}
},
@@ -1803,21 +1803,22 @@ CssRuleView.prototype = {
* and returns a boolean indicating whether or not the property was
* highlighted.
*
- * @param {TextPropertyEditor} editor
- * The rule property TextPropertyEditor object.
- * @return {Boolean} true if the rule property was highlighted,
+ * @param {TextProperty} textProperty
+ * The rule property object.
+ * @returns {boolean} true if the rule property was highlighted,
* false otherwise.
*/
- _highlightRuleProperty(editor) {
+ _highlightRuleProperty(textProperty) {
// Get the actual property value displayed in the rule view
- const propertyName = editor.prop.name.toLowerCase();
- const propertyValue = editor.valueSpan.textContent.toLowerCase();
+ const propertyName = textProperty.editor.prop.name.toLowerCase();
+ const propertyValue =
+ textProperty.editor.valueSpan.textContent.toLowerCase();
- return this._highlightMatches(
- editor.container,
+ return this._highlightMatches({
+ element: textProperty.editor.container,
propertyName,
- propertyValue
- );
+ propertyValue,
+ });
},
/**
@@ -1825,27 +1826,27 @@ CssRuleView.prototype = {
* returns a boolean indicating whether or not the computed property was
* highlighted.
*
- * @param {TextPropertyEditor} editor
- * The rule property TextPropertyEditor object.
- * @return {Boolean} true if the computed property was highlighted, false
+ * @param {TextProperty} textProperty
+ * The rule property object.
+ * @returns {boolean} true if the computed property was highlighted, false
* otherwise.
*/
- _highlightComputedProperty(editor) {
+ _highlightComputedProperty(textProperty) {
let isComputedHighlighted = false;
// Highlight search matches in the computed list of properties
- editor.populateComputed();
- for (const computed of editor.prop.computed) {
+ textProperty.editor.populateComputed();
+ for (const computed of textProperty.computed) {
if (computed.element) {
// Get the actual property value displayed in the computed list
const computedName = computed.name.toLowerCase();
const computedValue = computed.parsedValue.toLowerCase();
- isComputedHighlighted = this._highlightMatches(
- computed.element,
- computedName,
- computedValue
- )
+ isComputedHighlighted = this._highlightMatches({
+ element: computed.element,
+ propertyName: computedName,
+ propertyValue: computedValue,
+ })
? true
: isComputedHighlighted;
}
@@ -1859,16 +1860,17 @@ CssRuleView.prototype = {
* element if the search terms match the property, and returns a boolean
* indicating whether or not the search terms match.
*
- * @param {DOMNode} element
+ * @param {Object} options
+ * @param {DOMNode} options.element
* The node to highlight if search terms match
- * @param {String} propertyName
+ * @param {String} options.propertyName
* The property name of a rule
- * @param {String} propertyValue
+ * @param {String} options.propertyValue
* The property value of a rule
* @return {Boolean} true if the given search terms match the property, false
* otherwise.
*/
- _highlightMatches(element, propertyName, propertyValue) {
+ _highlightMatches({ element, propertyName, propertyValue }) {
const {
searchPropertyName,
searchPropertyValue,
@@ -2241,33 +2243,50 @@ CssRuleView.prototype = {
}
// If the property is a CSS variable and we didn't find its declaration, it might
// be a registered property
- if (name.startsWith("--")) {
- // Get a potential @property section
- const propertyContainer = this.styleDocument.getElementById(
- REGISTERED_PROPERTIES_CONTAINER_ID
- );
- if (propertyContainer) {
- const propertyEl = propertyContainer.querySelector(
- `[data-name="${name}"]`
- );
- if (propertyEl) {
- const toggle = this.styleDocument.querySelector(
- `[aria-controls="${REGISTERED_PROPERTIES_CONTAINER_ID}"]`
- );
- if (toggle.ariaExpanded === "false") {
- this._toggleContainerVisibility(toggle, propertyContainer);
- }
-
- this._highlightElementInRule(null, propertyEl, scrollBehavior);
- }
- return true;
- }
+ if (this._maybeHighlightCssRegisteredProperty(name)) {
+ return true;
}
return false;
},
/**
+ * If the passed name matches a registered CSS property highlight it
+ *
+ * @param {string} name - The name of the registered property to highlight
+ * @param {string} scrollBehavior
+ * @returns {boolean} Returns true if `name` matched a registered property
+ */
+ _maybeHighlightCssRegisteredProperty(name, scrollBehavior) {
+ if (!name.startsWith("--")) {
+ return false;
+ }
+
+ // Get a potential @property section
+ const propertyContainer = this.styleDocument.getElementById(
+ REGISTERED_PROPERTIES_CONTAINER_ID
+ );
+ if (!propertyContainer) {
+ return false;
+ }
+
+ const propertyEl = propertyContainer.querySelector(`[data-name="${name}"]`);
+ if (!propertyEl) {
+ return false;
+ }
+
+ const toggle = this.styleDocument.querySelector(
+ `[aria-controls="${REGISTERED_PROPERTIES_CONTAINER_ID}"]`
+ );
+ if (toggle.ariaExpanded === "false") {
+ this._toggleContainerVisibility(toggle, propertyContainer);
+ }
+
+ this._highlightElementInRule(null, propertyEl, scrollBehavior);
+ return true;
+ },
+
+ /**
* Highlight a given element in a rule editor
*
* @param {Rule} rule
