Bug 1851973 - [devtools] Use CustomEvent instead of EventEmitter for unit-change event on color/angle swatch. r=ochameau,devtools-reviewers.

Differential Revision: https://phabricator.services.mozilla.com/D187653
This commit is contained in:
Nicolas Chevobbe 2023-09-08 06:22:29 +00:00
parent e7ba138c88
commit 66187129be
5 changed files with 11 additions and 12 deletions

View File

@ -72,7 +72,7 @@ async function checkSwatchShiftClick(container, win, expectedValue, comment) {
const valueNode = container.querySelector(".computed-color");
swatch.scrollIntoView();
const onUnitChange = swatch.once("unit-change");
const onUnitChange = once(swatch, "unit-change");
EventUtils.synthesizeMouseAtCenter(
swatch,
{

View File

@ -108,7 +108,7 @@ async function checkSwatchShiftClick(container, win, expectedValue, comment) {
const swatch = container.querySelector(".ruleview-angleswatch");
const valueNode = container.querySelector(".ruleview-angle");
const onUnitChange = swatch.once("unit-change");
const onUnitChange = once(swatch, "unit-change");
EventUtils.synthesizeMouseAtCenter(
swatch,
{

View File

@ -203,7 +203,7 @@ async function checkSwatchShiftClick(view, valueSpan, expectedValue, comment) {
info(
"Shift-click the color swatch and wait for the color type and ruleview to update"
);
const onUnitChange = swatchNode.once("unit-change");
const onUnitChange = once(swatchNode, "unit-change");
EventUtils.synthesizeMouseAtCenter(
swatchNode,

View File

@ -732,7 +732,7 @@ TextPropertyEditor.prototype = {
);
if (this.ruleEditor.isEditable) {
for (const angleSpan of this.angleSwatchSpans) {
angleSpan.on("unit-change", this._onSwatchCommit);
angleSpan.addEventListener("unit-change", this._onSwatchCommit);
const title = l10n("rule.angleSwatch.tooltip");
angleSpan.setAttribute("title", title);
}
@ -1174,13 +1174,12 @@ TextPropertyEditor.prototype = {
if (this._colorSwatchSpans && this._colorSwatchSpans.length) {
for (const span of this._colorSwatchSpans) {
this.ruleView.tooltips.getTooltip("colorPicker").removeSwatch(span);
span.off("unit-change", this._onSwatchCommit);
}
}
if (this.angleSwatchSpans && this.angleSwatchSpans.length) {
for (const span of this.angleSwatchSpans) {
span.off("unit-change", this._onSwatchCommit);
span.removeEventListener("unit-change", this._onSwatchCommit);
}
}

View File

@ -9,7 +9,6 @@ const {
} = require("resource://devtools/client/shared/css-angle.js");
const { colorUtils } = require("resource://devtools/shared/css/color.js");
const { getCSSLexer } = require("resource://devtools/shared/css/lexer.js");
const EventEmitter = require("resource://devtools/shared/event-emitter.js");
const {
appendText,
} = require("resource://devtools/client/inspector/shared/utils.js");
@ -1489,7 +1488,6 @@ class OutputParser {
event.stopPropagation();
}
});
EventEmitter.decorate(swatch);
container.appendChild(swatch);
}
@ -1569,8 +1567,6 @@ class OutputParser {
swatch.dataset.colorFunction = options.colorFunction;
}
swatch.addEventListener("mousedown", this.#onColorSwatchMouseDown);
EventEmitter.decorate(swatch);
container.appendChild(swatch);
}
@ -1661,7 +1657,9 @@ class OutputParser {
swatch.nextElementSibling.textContent = val;
swatch.parentNode.dataset.color = val;
swatch.emit("unit-change", val);
const unitChangeEvent = new swatch.ownerGlobal.CustomEvent("unit-change");
swatch.dispatchEvent(unitChangeEvent);
};
#onAngleSwatchMouseDown = event => {
@ -1676,7 +1674,9 @@ class OutputParser {
const val = angle.nextAngleUnit();
swatch.nextElementSibling.textContent = val;
swatch.emit("unit-change", val);
const unitChangeEvent = new swatch.ownerGlobal.CustomEvent("unit-change");
swatch.dispatchEvent(unitChangeEvent);
};
/**