commit 2b762e255a21fd61b9f3f82189de83185df86397
parent 9b785f7f3108a733b471e2d59b35f523ac361318
Author: Lorenz A <me@lorenzackermann.xyz>
Date: Mon, 15 Dec 2025 09:38:41 +0000
Bug 2004276 - [devtools] Turn devtools/client/inspector/rules/views/rule-editor.js into an ES class. r=devtools-reviewers,nchevobbe
Differential Revision: https://phabricator.services.mozilla.com/D276219
Diffstat:
1 file changed, 71 insertions(+), 73 deletions(-)
diff --git a/devtools/client/inspector/rules/views/rule-editor.js b/devtools/client/inspector/rules/views/rule-editor.js
@@ -67,50 +67,50 @@ const INDENT_STR = " ".repeat(INDENT_SIZE);
* Owns a Rule object and creates a list of TextPropertyEditors
* for its TextProperties.
* Manages creation of new text properties.
- *
- * @param {CssRuleView} ruleView
- * The CssRuleView containg the document holding this rule editor.
- * @param {Rule} rule
- * The Rule object we're editing.
- * @param {object} options
- * @param {Set} options.elementsWithPendingClicks
- * @param {Function} options.onShowUnusedCustomCssProperties
- * @param {boolean} options.shouldHideUnusedCustomCssProperties
*/
-function RuleEditor(ruleView, rule, options = {}) {
- EventEmitter.decorate(this);
-
- this.ruleView = ruleView;
- this.doc = this.ruleView.styleDocument;
- this.toolbox = this.ruleView.inspector.toolbox;
- this.telemetry = this.toolbox.telemetry;
- this.rule = rule;
- this.options = options;
-
- this.isEditable = rule.isEditable();
- // Flag that blocks updates of the selector and properties when it is
- // being edited
- this.isEditing = false;
-
- this._onNewProperty = this._onNewProperty.bind(this);
- this._newPropertyDestroy = this._newPropertyDestroy.bind(this);
- this._onSelectorDone = this._onSelectorDone.bind(this);
- this._locationChanged = this._locationChanged.bind(this);
- this.updateSourceLink = this.updateSourceLink.bind(this);
- this._onToolChanged = this._onToolChanged.bind(this);
- this._updateLocation = this._updateLocation.bind(this);
- this._onSourceClick = this._onSourceClick.bind(this);
- this._onShowUnusedCustomCssPropertiesButtonClick =
- this._onShowUnusedCustomCssPropertiesButtonClick.bind(this);
-
- this.rule.domRule.on("location-changed", this._locationChanged);
- this.toolbox.on("tool-registered", this._onToolChanged);
- this.toolbox.on("tool-unregistered", this._onToolChanged);
-
- this._create();
-}
-
-RuleEditor.prototype = {
+class RuleEditor extends EventEmitter {
+ /**
+ * @param {CssRuleView} ruleView
+ * The CssRuleView containg the document holding this rule editor.
+ * @param {Rule} rule
+ * The Rule object we're editing.
+ * @param {object} options
+ * @param {Set} options.elementsWithPendingClicks
+ * @param {Function} options.onShowUnusedCustomCssProperties
+ * @param {boolean} options.shouldHideUnusedCustomCssProperties
+ */
+ constructor(ruleView, rule, options = {}) {
+ super();
+
+ this.ruleView = ruleView;
+ this.doc = this.ruleView.styleDocument;
+ this.toolbox = this.ruleView.inspector.toolbox;
+ this.telemetry = this.toolbox.telemetry;
+ this.rule = rule;
+ this.options = options;
+
+ this.isEditable = rule.isEditable();
+ // Flag that blocks updates of the selector and properties when it is
+ // being edited
+ this.isEditing = false;
+
+ this._onNewProperty = this._onNewProperty.bind(this);
+ this._newPropertyDestroy = this._newPropertyDestroy.bind(this);
+ this._onSelectorDone = this._onSelectorDone.bind(this);
+ this._locationChanged = this._locationChanged.bind(this);
+ this.updateSourceLink = this.updateSourceLink.bind(this);
+ this._onToolChanged = this._onToolChanged.bind(this);
+ this._updateLocation = this._updateLocation.bind(this);
+ this._onSourceClick = this._onSourceClick.bind(this);
+ this._onShowUnusedCustomCssPropertiesButtonClick =
+ this._onShowUnusedCustomCssPropertiesButtonClick.bind(this);
+
+ this.rule.domRule.on("location-changed", this._locationChanged);
+ this.toolbox.on("tool-registered", this._onToolChanged);
+ this.toolbox.on("tool-unregistered", this._onToolChanged);
+
+ this._create();
+ }
destroy() {
for (const prop of this.rule.textProps) {
prop.editor?.destroy();
@@ -129,7 +129,7 @@ RuleEditor.prototype = {
if (this._unsubscribeSourceMap) {
this._unsubscribeSourceMap();
}
- },
+ }
get sourceMapURLService() {
if (!this._sourceMapURLService) {
@@ -138,7 +138,7 @@ RuleEditor.prototype = {
}
return this._sourceMapURLService;
- },
+ }
get isSelectorEditable() {
return (
@@ -147,14 +147,14 @@ RuleEditor.prototype = {
this.rule.domRule.type !== CSSRule.KEYFRAME_RULE &&
this.rule.domRule.className !== "CSSPositionTryRule"
);
- },
+ }
get showSelectorHighlighterButton() {
return (
this.rule.domRule.type !== CSSRule.KEYFRAME_RULE &&
this.rule.domRule.className !== "CSSPositionTryRule"
);
- },
+ }
_create() {
this.element = this.doc.createElement("div");
@@ -216,9 +216,7 @@ RuleEditor.prototype = {
createChild(selectorContainer, "span", {
class: "container-query-declaration",
- textContent: `@container${
- ancestorData.containerName ? " " + ancestorData.containerName : ""
- }`,
+ textContent: `@container${ancestorData.containerName ? " " + ancestorData.containerName : ""}`,
});
const jumpToNodeButton = createChild(selectorContainer, "button", {
@@ -487,7 +485,7 @@ RuleEditor.prototype = {
this.newProperty();
});
}
- },
+ }
/**
* Returns the selector warnings element, or null if selector at selectorIndex
@@ -533,7 +531,7 @@ RuleEditor.prototype = {
}
return warningsContainer;
- },
+ }
/**
* Called when a tool is registered or unregistered.
@@ -551,7 +549,7 @@ RuleEditor.prototype = {
} else {
this.source.setAttribute("unselectable", "true");
}
- },
+ }
/**
* Event handler called when a property changes on the
@@ -559,7 +557,7 @@ RuleEditor.prototype = {
*/
_locationChanged() {
this.updateSourceLink();
- },
+ }
_onSourceClick(e) {
e.preventDefault();
@@ -575,7 +573,7 @@ RuleEditor.prototype = {
this.rule.ruleColumn
);
}
- },
+ }
/**
* Update the text of the source link to reflect whether we're showing
@@ -615,7 +613,7 @@ RuleEditor.prototype = {
sourceLabel.setAttribute("title", title);
sourceLabel.setAttribute("href", displayURL);
sourceLabel.textContent = sourceTextContent;
- },
+ }
updateSourceLink() {
if (this.source) {
@@ -650,7 +648,7 @@ RuleEditor.prototype = {
Promise.resolve().then(() => {
this.emit("source-link-updated");
});
- },
+ }
/**
* Update the rule editor with the contents of the rule.
@@ -760,7 +758,7 @@ RuleEditor.prototype = {
}, 0);
}
}
- },
+ }
updateUnusedCssVariables() {
if (
@@ -788,7 +786,7 @@ RuleEditor.prototype = {
}
this._updateShowUnusedCustomCssPropertiesButtonText();
- },
+ }
/**
* Create a TextPropertyEditor for TextProperty representing an unused CSS variable.
@@ -829,7 +827,7 @@ RuleEditor.prototype = {
}
return editor;
- },
+ }
/**
* Returns a Set containing the list of unused CSS variable TextProperty which shouldn't
@@ -854,7 +852,7 @@ RuleEditor.prototype = {
}
return unusedCssVariableDeclarations;
- },
+ }
/**
* Handle click on "Show X unused custom CSS properties" button
@@ -882,7 +880,7 @@ RuleEditor.prototype = {
if (typeof this.options.onShowUnusedCustomCssProperties === "function") {
this.options.onShowUnusedCustomCssProperties();
}
- },
+ }
/**
* Update the text for the "Show X unused custom CSS properties" button, or remove it
@@ -905,7 +903,7 @@ RuleEditor.prototype = {
).replace("#1", unusedVariablesCount);
this._showUnusedCustomCssPropertiesButton.replaceChildren(label);
- },
+ }
/**
* Nullify this._showUnusedCustomCssPropertiesButton, remove its click event handler
@@ -929,7 +927,7 @@ RuleEditor.prototype = {
this._showUnusedCustomCssPropertiesButton.remove();
}
this._showUnusedCustomCssPropertiesButton = null;
- },
+ }
/**
* Render a given rule selector in this.selectorText element
@@ -1009,7 +1007,7 @@ RuleEditor.prototype = {
if (warningsContainer) {
selectorContainer.append(warningsContainer);
}
- },
+ }
/**
* Programatically add a new property to the rule.
@@ -1051,7 +1049,7 @@ RuleEditor.prototype = {
);
return prop;
- },
+ }
/**
* Programatically add a list of new properties to the rule. Focus the UI
@@ -1092,7 +1090,7 @@ RuleEditor.prototype = {
} else {
this.newProperty();
}
- },
+ }
/**
* Create a text input for a property name. If a non-empty property
@@ -1148,7 +1146,7 @@ RuleEditor.prototype = {
"paste",
blurOnMultipleProperties(this.rule.cssProperties)
);
- },
+ }
/**
* Called when the new property input has been dismissed.
@@ -1177,7 +1175,7 @@ RuleEditor.prototype = {
this.editor.input.blur();
this.telemetry.recordEvent("edit_rule", "ruleview");
- },
+ }
/**
* Called when the new property editor is destroyed.
@@ -1202,7 +1200,7 @@ RuleEditor.prototype = {
if (this.multipleAddedProperties && this.multipleAddedProperties.length) {
this.addProperties(this.multipleAddedProperties);
}
- },
+ }
/**
* Called when the selector's inplace editor is closed.
@@ -1308,7 +1306,7 @@ RuleEditor.prototype = {
this.isEditing = false;
promiseWarn(err);
}
- },
+ }
/**
* Handle moving the focus change after a Tab keypress in the selector inplace editor.
@@ -1326,7 +1324,7 @@ RuleEditor.prototype = {
} else {
this.propertyList.click();
}
- },
-};
+ }
+}
module.exports = RuleEditor;
