commit 2c578dae0a6589854c12bbbf8898c901a7facbea
parent 80a7dec80cdc2a65e9e7de0befc4ad2a25d56632
Author: Hubert Boma Manilla <hmanilla@mozilla.com>
Date: Mon, 20 Oct 2025 08:21:47 +0000
Bug 1991431 - [devtools] Migrate the Html Editor to classes r=devtools-reviewers,nchevobbe
Differential Revision: https://phabricator.services.mozilla.com/D268899
Diffstat:
3 files changed, 89 insertions(+), 85 deletions(-)
diff --git a/devtools/client/inspector/markup/test/browser_markup_html_edit_03.js b/devtools/client/inspector/markup/test/browser_markup_html_edit_03.js
@@ -50,7 +50,7 @@ async function testEscapeCancels(inspector) {
const onHtmlEditorCreated = once(inspector.markup, "begin-editing");
EventUtils.sendKey("F2", inspector.markup._frame.contentWindow);
await onHtmlEditorCreated;
- ok(inspector.markup.htmlEditor._visible, "HTML Editor is visible");
+ ok(inspector.markup.htmlEditor.isVisible, "HTML Editor is visible");
is(
await getContentPageElementProperty(SELECTOR, "outerHTML"),
@@ -63,7 +63,7 @@ async function testEscapeCancels(inspector) {
const onEditorHiddem = once(inspector.markup.htmlEditor, "popuphidden");
EventUtils.sendKey("ESCAPE", inspector.markup.htmlEditor.doc.defaultView);
await onEditorHiddem;
- ok(!inspector.markup.htmlEditor._visible, "HTML Editor is not visible");
+ ok(!inspector.markup.htmlEditor.isVisible, "HTML Editor is not visible");
is(
await getContentPageElementProperty(SELECTOR, "outerHTML"),
@@ -77,7 +77,7 @@ async function testF2Commits(inspector) {
inspector.markup._frame.contentDocument.documentElement.focus();
EventUtils.sendKey("F2", inspector.markup._frame.contentWindow);
await onEditorShown;
- ok(inspector.markup.htmlEditor._visible, "HTML Editor is visible");
+ ok(inspector.markup.htmlEditor.isVisible, "HTML Editor is visible");
is(
await getContentPageElementProperty(SELECTOR, "outerHTML"),
@@ -90,7 +90,7 @@ async function testF2Commits(inspector) {
EventUtils.sendKey("F2", inspector.markup._frame.contentWindow);
await onMutations;
- ok(!inspector.markup.htmlEditor._visible, "HTML Editor is not visible");
+ ok(!inspector.markup.htmlEditor.isVisible, "HTML Editor is not visible");
is(
await getContentPageElementProperty(SELECTOR, "outerHTML"),
diff --git a/devtools/client/inspector/markup/test/browser_markup_html_edit_undo-redo.js b/devtools/client/inspector/markup/test/browser_markup_html_edit_undo-redo.js
@@ -32,7 +32,7 @@ add_task(async function () {
EventUtils.sendKey("F2", inspector.markup._frame.contentWindow);
await onHtmlEditorCreated;
- ok(inspector.markup.htmlEditor._visible, "HTML Editor is visible");
+ ok(inspector.markup.htmlEditor.isVisible, "HTML Editor is visible");
is(
inspector.markup.htmlEditor.editor.getText(),
DIV1_HTML,
@@ -43,7 +43,7 @@ add_task(async function () {
let onEditorHidden = once(inspector.markup.htmlEditor, "popuphidden");
EventUtils.sendKey("ESCAPE", inspector.markup.htmlEditor.doc.defaultView);
await onEditorHidden;
- ok(!inspector.markup.htmlEditor._visible, "HTML Editor is not visible");
+ ok(!inspector.markup.htmlEditor.isVisible, "HTML Editor is not visible");
await selectNode("#d2", inspector);
@@ -52,7 +52,7 @@ add_task(async function () {
EventUtils.sendKey("F2", inspector.markup._frame.contentWindow);
await onHtmlEditorCreated;
- ok(inspector.markup.htmlEditor._visible, "HTML Editor is visible");
+ ok(inspector.markup.htmlEditor.isVisible, "HTML Editor is visible");
is(
inspector.markup.htmlEditor.editor.getText(),
DIV2_HTML,
@@ -84,5 +84,5 @@ add_task(async function () {
onEditorHidden = once(inspector.markup.htmlEditor, "popuphidden");
EventUtils.sendKey("ESCAPE", inspector.markup.htmlEditor.doc.defaultView);
await onEditorHidden;
- ok(!inspector.markup.htmlEditor._visible, "HTML Editor is not visible");
+ ok(!inspector.markup.htmlEditor.isVisible, "HTML Editor is not visible");
});
diff --git a/devtools/client/inspector/markup/views/html-editor.js b/devtools/client/inspector/markup/views/html-editor.js
@@ -17,64 +17,76 @@ const EventEmitter = require("resource://devtools/shared/event-emitter.js");
* causes it to reload.
*
* Meant to be embedded inside of an HTML page, as in markup.xhtml.
- *
- * @param {HTMLDocument} htmlDocument
- * The document to attach the editor to. Will also use this
- * document as a basis for listening resize events.
*/
-function HTMLEditor(htmlDocument) {
- this.doc = htmlDocument;
- this.container = this.doc.createElement("div");
- this.container.className = "html-editor theme-body";
- this.container.style.display = "none";
- this.editorInner = this.doc.createElement("div");
- this.editorInner.className = "html-editor-inner";
- this.container.appendChild(this.editorInner);
-
- this.doc.body.appendChild(this.container);
- this.hide = this.hide.bind(this);
- this.refresh = this.refresh.bind(this);
-
- EventEmitter.decorate(this);
-
- this.doc.defaultView.addEventListener("resize", this.refresh, true);
-
- const config = {
- mode: Editor.modes.html,
- lineWrapping: true,
- styleActiveLine: false,
- extraKeys: {},
- theme: "mozilla markup-view",
- };
+class HTMLEditor extends EventEmitter {
+ /**
+ * @param {HTMLDocument} htmlDocument
+ * The document to attach the editor to. Will also use this
+ * document as a basis for listening resize events.
+ */
+ constructor(htmlDocument) {
+ super();
+
+ this.doc = htmlDocument;
+ this.#container = this.doc.createElement("div");
+ this.#container.className = "html-editor theme-body";
+ this.#container.style.display = "none";
+ this.#editorInner = this.doc.createElement("div");
+ this.#editorInner.className = "html-editor-inner";
+ this.#container.appendChild(this.#editorInner);
+ this.doc.body.appendChild(this.#container);
+ this.doc.defaultView.addEventListener("resize", this.refresh, true);
+
+ const config = {
+ mode: Editor.modes.html,
+ lineWrapping: true,
+ styleActiveLine: false,
+ extraKeys: {},
+ theme: "mozilla markup-view",
+ };
+ config.extraKeys[HTMLEditor.#ctrl("Enter")] = this.hide;
+ config.extraKeys.F2 = this.hide;
+ config.extraKeys.Esc = this.hide.bind(this, false);
+
+ this.#container.addEventListener("click", this.hide);
+ this.#editorInner.addEventListener("click", HTMLEditor.#stopPropagation);
+
+ this.editor = new Editor(config);
+ this.editor.appendToLocalElement(this.#editorInner);
- config.extraKeys[ctrl("Enter")] = this.hide;
- config.extraKeys.F2 = this.hide;
- config.extraKeys.Esc = this.hide.bind(this, false);
+ this.hide(false);
+ }
- this.container.addEventListener("click", this.hide);
- this.editorInner.addEventListener("click", stopPropagation);
- this.editor = new Editor(config);
+ editor = null;
+ doc = null;
- this.editor.appendToLocalElement(this.editorInner);
- this.hide(false);
-}
+ #container = null;
+ #editorInner = null;
+ #attachedElement = null;
+
+ static #ctrl(k) {
+ return (Services.appinfo.OS == "Darwin" ? "Cmd-" : "Ctrl-") + k;
+ }
+
+ static #stopPropagation(e) {
+ e.stopPropagation();
+ }
-HTMLEditor.prototype = {
/**
* Need to refresh position by manually setting CSS values, so this will
* need to be called on resizes and other sizing changes.
*/
refresh() {
- const element = this._attachedElement;
+ const element = this.#attachedElement;
if (element) {
- this.container.style.top = element.offsetTop + "px";
- this.container.style.left = element.offsetLeft + "px";
- this.container.style.width = element.offsetWidth + "px";
- this.container.style.height = element.parentNode.offsetHeight + "px";
+ this.#container.style.top = element.offsetTop + "px";
+ this.#container.style.left = element.offsetLeft + "px";
+ this.#container.style.width = element.offsetWidth + "px";
+ this.#container.style.height = element.parentNode.offsetHeight + "px";
this.editor.refresh();
}
- },
+ }
/**
* Anchor the editor to a particular element.
@@ -83,22 +95,22 @@ HTMLEditor.prototype = {
* The element that the editor will be anchored to.
* Should belong to the HTMLDocument passed into the constructor.
*/
- _attach(element) {
- this._detach();
- this._attachedElement = element;
+ #attach(element) {
+ this.#detach();
+ this.#attachedElement = element;
element.classList.add("html-editor-container");
this.refresh();
- },
+ }
/**
* Unanchor the editor from an element.
*/
- _detach() {
- if (this._attachedElement) {
- this._attachedElement.classList.remove("html-editor-container");
- this._attachedElement = undefined;
+ #detach() {
+ if (this.#attachedElement) {
+ this.#attachedElement.classList.remove("html-editor-container");
+ this.#attachedElement = undefined;
}
- },
+ }
/**
* Anchor the editor to a particular element, and show the editor.
@@ -111,23 +123,23 @@ HTMLEditor.prototype = {
* @param {Function} cb
* The function to call when hiding
*/
- show(element, text) {
- if (this._visible) {
+ show = (element, text) => {
+ if (this.isVisible) {
return;
}
this._originalValue = text;
this.editor.setText(text);
- this._attach(element);
- this.container.style.display = "flex";
- this._visible = true;
+ this.#attach(element);
+ this.#container.style.display = "flex";
+ this.isVisible = true;
this.editor.refresh();
this.editor.focus();
this.editor.clearHistory();
this.emit("popupshown");
- },
+ };
/**
* Hide the editor, optionally committing the changes
@@ -136,42 +148,34 @@ HTMLEditor.prototype = {
* A change will be committed by default. If this param
* strictly equals false, no change will occur.
*/
- hide(shouldCommit) {
- if (!this._visible) {
+ hide = shouldCommit => {
+ if (!this.isVisible) {
return;
}
- this.container.style.display = "none";
- this._detach();
+ this.#container.style.display = "none";
+ this.#detach();
const newValue = this.editor.getText();
const valueHasChanged = this._originalValue !== newValue;
const preventCommit = shouldCommit === false || !valueHasChanged;
this._originalValue = undefined;
- this._visible = undefined;
+ this.isVisible = undefined;
this.emit("popuphidden", !preventCommit, newValue);
- },
+ };
/**
* Destroy this object and unbind all event handlers
*/
destroy() {
this.doc.defaultView.removeEventListener("resize", this.refresh, true);
- this.container.removeEventListener("click", this.hide);
- this.editorInner.removeEventListener("click", stopPropagation);
+ this.#container.removeEventListener("click", this.hide);
+ this.#editorInner.removeEventListener("click", HTMLEditor.#stopPropagation);
this.hide(false);
- this.container.remove();
+ this.#container.remove();
this.editor.destroy();
- },
-};
-
-function ctrl(k) {
- return (Services.appinfo.OS == "Darwin" ? "Cmd-" : "Ctrl-") + k;
-}
-
-function stopPropagation(e) {
- e.stopPropagation();
+ }
}
module.exports = HTMLEditor;
