commit ee7eab3b007e587341724887c026947660b17825
parent 895057d7354258d872332bd79f497917b2810b91
Author: Cristina Horotan <chorotan@mozilla.com>
Date: Fri, 12 Dec 2025 20:42:03 +0200
Revert "Bug 2004285 - [devtools] Turn devtools/client/inspector/markup/views/markup-container.js into an ES class. r=devtools-reviewers,jdescottes" for causing dt failures on browser_markup_accessibility_semantics.js
This reverts commit 6bd7ec8f4e8c167124ecdb6c91dd4a580241c202.
Diffstat:
1 file changed, 62 insertions(+), 60 deletions(-)
diff --git a/devtools/client/inspector/markup/views/markup-container.js b/devtools/client/inspector/markup/views/markup-container.js
@@ -23,13 +23,6 @@ const TYPES = {
};
/**
- * Unique identifier used to set markup container node id.
- *
- * @type {number}
- */
-let markupContainerID = 0;
-
-/**
* The main structure for storing a document node in the markup
* tree. Manages creation of the editor for the node and
* a <ul> for placing child elements, and expansion/collapsing
@@ -40,12 +33,21 @@ let markupContainerID = 0;
* MarkupTextContainer
* MarkupElementContainer
*/
-class MarkupContainer {
+function MarkupContainer() {}
+
+/**
+ * Unique identifier used to set markup container node id.
+ *
+ * @type {number}
+ */
+let markupContainerID = 0;
+
+MarkupContainer.prototype = {
// Get the UndoStack from the MarkupView.
get undo() {
// undo is a lazy getter in the MarkupView.
return this.markup.undo;
- }
+ },
/**
* Initialize the MarkupContainer. Should be called while one
@@ -92,7 +94,7 @@ class MarkupContainer {
if (node.isShadowRoot) {
Glean.devtoolsShadowdom.shadowRootDisplayed.set(true);
}
- }
+ },
buildMarkup() {
this.elt = this.win.document.createElement("li");
@@ -128,11 +130,11 @@ class MarkupContainer {
this.children.classList.add("children");
this.children.setAttribute("role", "group");
this.elt.appendChild(this.children);
- }
+ },
toString() {
return "[MarkupContainer for " + this.node + "]";
- }
+ },
isPreviewable() {
if (this.node.tagName && !this.node.isPseudoElement) {
@@ -145,7 +147,7 @@ class MarkupContainer {
}
return false;
- }
+ },
/**
* Show whether the element is displayed or not
@@ -158,36 +160,36 @@ class MarkupContainer {
if (!this.node.isDisplayed || this.node.hidden) {
this.elt.classList.add("not-displayed");
}
- }
+ },
/**
* True if the current node has children. The MarkupView
* will set this attribute for the MarkupContainer.
*/
- _hasChildren = false;
+ _hasChildren: false,
get hasChildren() {
return this._hasChildren;
- }
+ },
set hasChildren(value) {
this._hasChildren = value;
this.updateExpander();
- }
+ },
/**
* A list of all elements with tabindex that are not in container's children.
*/
get focusableElms() {
return [...this.tagLine.querySelectorAll("[tabindex]")];
- }
+ },
/**
* An indicator that the container internals are focusable.
*/
get canFocus() {
return this._canFocus;
- }
+ },
/**
* Toggle focusable state for container internals.
@@ -207,7 +209,7 @@ class MarkupContainer {
// Exclude from tab order.
this.focusableElms.forEach(elm => elm.setAttribute("tabindex", "-1"));
}
- }
+ },
/**
* If conatiner and its contents are focusable, exclude them from tab order,
@@ -234,28 +236,28 @@ class MarkupContainer {
if (parent) {
doc.activeElement.blur();
}
- }
+ },
/**
* True if the current node can be expanded.
*/
get canExpand() {
return this._hasChildren && !this.node.inlineTextChild;
- }
+ },
/**
* True if this is the root <html> element and can't be collapsed.
*/
get mustExpand() {
return this.node._parent === this.markup.walker.rootNode;
- }
+ },
/**
* True if current node can be expanded and collapsed.
*/
get showExpander() {
return this.canExpand && !this.mustExpand;
- }
+ },
updateExpander() {
if (!this.expander) {
@@ -274,7 +276,7 @@ class MarkupContainer {
// shown.
this.tagLine.removeAttribute("aria-expanded");
}
- }
+ },
/**
* If current node has no children, ignore them. Otherwise, consider them a
@@ -285,7 +287,7 @@ class MarkupContainer {
"role",
this.hasChildren ? "group" : "presentation"
);
- }
+ },
/**
* Set an appropriate DOM tree depth level for a node and its subtree.
@@ -304,7 +306,7 @@ class MarkupContainer {
if (childContainers) {
childContainers.forEach(container => container.updateLevel());
}
- }
+ },
/**
* If the node has children, return the list of containers for all these
@@ -318,14 +320,14 @@ class MarkupContainer {
return [...this.children.children]
.filter(node => node.container)
.map(node => node.container);
- }
+ },
/**
* True if the node has been visually expanded in the tree.
*/
get expanded() {
return !this.elt.classList.contains("collapsed");
- }
+ },
setExpanded(value) {
if (!this.expander) {
@@ -362,7 +364,7 @@ class MarkupContainer {
if (this.node.isShadowRoot) {
Glean.devtoolsShadowdom.shadowRootExpanded.set(true);
}
- }
+ },
/**
* Expanding a node means cloning its "inline" closing tag into a new
@@ -397,7 +399,7 @@ class MarkupContainer {
this.closeTagLine = line;
}
this.elt.appendChild(this.closeTagLine);
- }
+ },
/**
* Hide the closing tag-line element which should only be displayed when the container
@@ -410,11 +412,11 @@ class MarkupContainer {
this.elt.removeChild(this.closeTagLine);
this.closeTagLine = undefined;
- }
+ },
parentContainer() {
return this.elt.parentNode ? this.elt.parentNode.container : null;
- }
+ },
/**
* Determine tree depth level of a given node. This is used to specify ARIA
@@ -428,10 +430,10 @@ class MarkupContainer {
parent = parent.parentNode();
}
return level;
- }
+ },
- _isDragging = false;
- _dragStartY = 0;
+ _isDragging: false,
+ _dragStartY: 0,
set isDragging(isDragging) {
const rootElt = this.markup.getContainer(this.markup._rootNode).elt;
@@ -450,11 +452,11 @@ class MarkupContainer {
this.markup.doc.body.classList.remove("dragging");
rootElt.setAttribute("aria-dropeffect", "none");
}
- }
+ },
get isDragging() {
return this._isDragging;
- }
+ },
/**
* Check if element is draggable.
@@ -472,11 +474,11 @@ class MarkupContainer {
this.node.parentNode() &&
this.node.parentNode().tagName !== null
);
- }
+ },
isSlotted() {
return false;
- }
+ },
_onKeyDown(event) {
const { target, keyCode, shiftKey } = event;
@@ -527,7 +529,7 @@ class MarkupContainer {
return;
}
event.stopPropagation();
- }
+ },
_onMouseDown(event) {
const { target, button, metaKey, ctrlKey } = event;
@@ -583,7 +585,7 @@ class MarkupContainer {
this._dragStartY = event.pageY;
this.markup._draggedContainer = this;
}
- }
+ },
_onClick(event) {
const { target } = event;
@@ -603,7 +605,7 @@ class MarkupContainer {
closestLinkEl.dataset.link
);
event.stopPropagation();
- }
+ },
/**
* Open a "link" found in a node's attribute in the markup-view
@@ -617,7 +619,7 @@ class MarkupContainer {
// Make container tabbable descendants not tabbable (by default).
this.canFocus = false;
this.markup.followAttributeLink(type, link);
- }
+ },
/**
* On mouse up, stop dragging.
@@ -639,7 +641,7 @@ class MarkupContainer {
await walkerFront.insertBefore(this.node, parent, nextSibling);
this.markup.emit("drop-completed");
}
- }
+ },
/**
* On mouse move, move the dragged element and indicate the drop target.
@@ -678,7 +680,7 @@ class MarkupContainer {
const el = this.markup.doc.elementFromPoint(x, y);
this.markup.indicateDropTarget(el);
}
- }
+ },
cancelDragging() {
if (!this.isDragging) {
@@ -688,7 +690,7 @@ class MarkupContainer {
this._isPreDragging = false;
this.isDragging = false;
this.elt.style.removeProperty("top");
- }
+ },
/**
* Temporarily flash the container to attract attention.
@@ -711,9 +713,9 @@ class MarkupContainer {
});
}, this.markup.CONTAINER_FLASHING_DURATION);
}
- }
+ },
- _hovered = false;
+ _hovered: false,
/**
* Highlight the currently hovered tag + its closing tag if necessary
@@ -739,23 +741,23 @@ class MarkupContainer {
.classList.remove("tag-hover");
}
}
- }
+ },
/**
* True if the container is visible in the markup tree.
*/
get visible() {
return this.elt.getBoundingClientRect().height > 0;
- }
+ },
/**
* True if the container is currently selected.
*/
- _selected = false;
+ _selected: false,
get selected() {
return this._selected;
- }
+ },
set selected(value) {
this.tagState.classList.remove("flash-out");
@@ -774,7 +776,7 @@ class MarkupContainer {
this.tagLine.removeAttribute("selected");
this.tagState.classList.remove("theme-selected");
}
- }
+ },
/**
* Update the container's editor to the current state of the
@@ -808,7 +810,7 @@ class MarkupContainer {
if (this.editor.update) {
this.editor.update();
}
- }
+ },
/**
* Try to put keyboard focus on the current editor.
@@ -829,7 +831,7 @@ class MarkupContainer {
focusVisible: !fromMouseEvent,
});
}
- }
+ },
_onToggle(event) {
event.stopPropagation();
@@ -845,7 +847,7 @@ class MarkupContainer {
}
this.expandContainer(event.altKey);
- }
+ },
/**
* Expands the markup container if it has children.
@@ -861,7 +863,7 @@ class MarkupContainer {
applyToDescendants
);
}
- }
+ },
/**
* Get rid of event listeners and references, when the container is no longer
@@ -895,7 +897,7 @@ class MarkupContainer {
}
this.editor.destroy();
- }
-}
+ },
+};
module.exports = MarkupContainer;
