commit c322e57e94dc27679773e5bee6a1f0a032903d62
parent 9d41d9cc417063de73e5ccdbe45443c8bbb7b301
Author: Nicolas Chevobbe <nchevobbe@mozilla.com>
Date: Thu, 23 Oct 2025 08:44:17 +0000
Bug 1995761 - [devtools] Turn MarkupView into an ES class. r=devtools-reviewers,ochameau
Differential Revision: https://phabricator.services.mozilla.com/D269586
Diffstat:
1 file changed, 267 insertions(+), 259 deletions(-)
diff --git a/devtools/client/inspector/markup/markup.js b/devtools/client/inspector/markup/markup.js
@@ -237,169 +237,177 @@ const shortcutHandlers = {
/**
* The markup tree. Manages the mapping of nodes to MarkupContainers,
* updating based on mutations, and the undo/redo bindings.
- *
- * @param {Inspector} inspector
- * The inspector we're watching.
- * @param {iframe} frame
- * An iframe in which the caller has kindly loaded markup.xhtml.
- * @param {XULWindow} controllerWindow
- * Will enable the undo/redo feature from devtools/client/shared/undo.
- * Should be a XUL window, will typically point to the toolbox window.
*/
-function MarkupView(inspector, frame, controllerWindow) {
- EventEmitter.decorate(this);
-
- this.controllerWindow = controllerWindow;
- this.inspector = inspector;
- this.highlighters = inspector.highlighters;
- this.walker = this.inspector.walker;
- this._frame = frame;
- this.win = this._frame.contentWindow;
- this.doc = this._frame.contentDocument;
- this._elt = this.doc.getElementById("root");
- this.telemetry = this.inspector.telemetry;
- this._breakpointIDsInLocalState = new Map();
- this._containersToUpdate = new Map();
-
- this.maxChildren = Services.prefs.getIntPref(
- "devtools.markup.pagesize",
- DEFAULT_MAX_CHILDREN
- );
-
- this.collapseAttributes = Services.prefs.getBoolPref(
- ATTR_COLLAPSE_ENABLED_PREF
- );
- this.collapseAttributeLength = Services.prefs.getIntPref(
- ATTR_COLLAPSE_LENGTH_PREF
- );
-
- // Creating the popup to be used to show CSS suggestions.
- // The popup will be attached to the toolbox document.
- this.popup = new AutocompletePopup(inspector.toolbox.doc, {
- autoSelect: true,
- });
-
- this._containers = new Map();
- // This weakmap will hold keys used with the _containers map, in order to retrieve the
- // slotted container for a given node front.
- this._slottedContainerKeys = new WeakMap();
-
- // Binding functions that need to be called in scope.
- this._handleRejectionIfNotDestroyed =
- this._handleRejectionIfNotDestroyed.bind(this);
- this._isImagePreviewTarget = this._isImagePreviewTarget.bind(this);
- this._onWalkerMutations = this._onWalkerMutations.bind(this);
- this._onBlur = this._onBlur.bind(this);
- this._onContextMenu = this._onContextMenu.bind(this);
- this._onCopy = this._onCopy.bind(this);
- this._onCollapseAttributesPrefChange =
- this._onCollapseAttributesPrefChange.bind(this);
- this._onWalkerNodeStatesChanged = this._onWalkerNodeStatesChanged.bind(this);
- this._onFocus = this._onFocus.bind(this);
- this._onResourceAvailable = this._onResourceAvailable.bind(this);
- this._onTargetAvailable = this._onTargetAvailable.bind(this);
- this._onTargetDestroyed = this._onTargetDestroyed.bind(this);
- this._onMouseClick = this._onMouseClick.bind(this);
- this._onMouseMove = this._onMouseMove.bind(this);
- this._onMouseOut = this._onMouseOut.bind(this);
- this._onMouseUp = this._onMouseUp.bind(this);
- this._onNewSelection = this._onNewSelection.bind(this);
- this._onToolboxPickerCanceled = this._onToolboxPickerCanceled.bind(this);
- this._onToolboxPickerHover = this._onToolboxPickerHover.bind(this);
- this._onDomMutation = this._onDomMutation.bind(this);
- this._updateSearchResultsHighlightingInSelectedNode =
- this._updateSearchResultsHighlightingInSelectedNode.bind(this);
- this._onToolboxSelect = this._onToolboxSelect.bind(this);
-
- // Listening to various events.
- this._elt.addEventListener("blur", this._onBlur, true);
- this._elt.addEventListener("click", this._onMouseClick);
- this._elt.addEventListener("contextmenu", this._onContextMenu);
- this._elt.addEventListener("mousemove", this._onMouseMove);
- this._elt.addEventListener("mouseout", this._onMouseOut);
- this._frame.addEventListener("focus", this._onFocus);
- this.inspector.selection.on("new-node-front", this._onNewSelection);
- this.inspector.on(
- "search-cleared",
- this._updateSearchResultsHighlightingInSelectedNode
- );
- this._unsubscribeFromToolboxStore = this.inspector.toolbox.store.subscribe(
- this._onDomMutation
- );
-
- if (flags.testing) {
- // In tests, we start listening immediately to avoid having to simulate a mousemove.
- this._initTooltips();
- }
+class MarkupView extends EventEmitter {
+ /**
+ * @param {Inspector} inspector
+ * The inspector we're watching.
+ * @param {iframe} frame
+ * An iframe in which the caller has kindly loaded markup.xhtml.
+ * @param {XULWindow} controllerWindow
+ * Will enable the undo/redo feature from devtools/client/shared/undo.
+ * Should be a XUL window, will typically point to the toolbox window.
+ */
+ constructor(inspector, frame, controllerWindow) {
+ super();
+
+ this.controllerWindow = controllerWindow;
+ this.inspector = inspector;
+ this.highlighters = inspector.highlighters;
+ this.walker = this.inspector.walker;
+ this._frame = frame;
+ this.win = this._frame.contentWindow;
+ this.doc = this._frame.contentDocument;
+ this._elt = this.doc.getElementById("root");
+ this.telemetry = this.inspector.telemetry;
+ this._breakpointIDsInLocalState = new Map();
+ this._containersToUpdate = new Map();
+
+ this.maxChildren = Services.prefs.getIntPref(
+ "devtools.markup.pagesize",
+ DEFAULT_MAX_CHILDREN
+ );
- this.win.addEventListener("copy", this._onCopy);
- this.win.addEventListener("mouseup", this._onMouseUp);
- this.inspector.toolbox.nodePicker.on(
- "picker-node-canceled",
- this._onToolboxPickerCanceled
- );
- this.inspector.toolbox.nodePicker.on(
- "picker-node-hovered",
- this._onToolboxPickerHover
- );
-
- // Event listeners for highlighter events
- this.onHighlighterShown = data =>
- this.handleHighlighterEvent("highlighter-shown", data);
- this.onHighlighterHidden = data =>
- this.handleHighlighterEvent("highlighter-hidden", data);
- this.inspector.highlighters.on("highlighter-shown", this.onHighlighterShown);
- this.inspector.highlighters.on(
- "highlighter-hidden",
- this.onHighlighterHidden
- );
- this.inspector.toolbox.once("select", this._onToolboxSelect);
-
- this._onNewSelection(this.inspector.selection.nodeFront);
- if (this.inspector.selection.nodeFront) {
- this.expandNode(this.inspector.selection.nodeFront);
- }
-
- this._prefObserver = new PrefObserver("devtools.markup");
- this._prefObserver.on(
- ATTR_COLLAPSE_ENABLED_PREF,
- this._onCollapseAttributesPrefChange
- );
- this._prefObserver.on(
- ATTR_COLLAPSE_LENGTH_PREF,
- this._onCollapseAttributesPrefChange
- );
-
- this._initShortcuts();
-
- this._walkerEventListener = new WalkerEventListener(this.inspector, {
- "container-type-change": this._onWalkerNodeStatesChanged,
- "display-change": this._onWalkerNodeStatesChanged,
- "scrollable-change": this._onWalkerNodeStatesChanged,
- "overflow-change": this._onWalkerNodeStatesChanged,
- mutations: this._onWalkerMutations,
- });
-
- this.resourceCommand = this.inspector.toolbox.resourceCommand;
- this.resourceCommand.watchResources([this.resourceCommand.TYPES.ROOT_NODE], {
- onAvailable: this._onResourceAvailable,
- });
-
- this.targetCommand = this.inspector.commands.targetCommand;
- this.targetCommand.watchTargets({
- types: [this.targetCommand.TYPES.FRAME],
- onAvailable: this._onTargetAvailable,
- onDestroyed: this._onTargetDestroyed,
- });
-}
+ this.collapseAttributes = Services.prefs.getBoolPref(
+ ATTR_COLLAPSE_ENABLED_PREF
+ );
+ this.collapseAttributeLength = Services.prefs.getIntPref(
+ ATTR_COLLAPSE_LENGTH_PREF
+ );
+
+ // Creating the popup to be used to show CSS suggestions.
+ // The popup will be attached to the toolbox document.
+ this.popup = new AutocompletePopup(inspector.toolbox.doc, {
+ autoSelect: true,
+ });
+
+ this._containers = new Map();
+ // This weakmap will hold keys used with the _containers map, in order to retrieve the
+ // slotted container for a given node front.
+ this._slottedContainerKeys = new WeakMap();
+
+ // Binding functions that need to be called in scope.
+ this._handleRejectionIfNotDestroyed =
+ this._handleRejectionIfNotDestroyed.bind(this);
+ this._isImagePreviewTarget = this._isImagePreviewTarget.bind(this);
+ this._onWalkerMutations = this._onWalkerMutations.bind(this);
+ this._onBlur = this._onBlur.bind(this);
+ this._onContextMenu = this._onContextMenu.bind(this);
+ this._onCopy = this._onCopy.bind(this);
+ this._onCollapseAttributesPrefChange =
+ this._onCollapseAttributesPrefChange.bind(this);
+ this._onWalkerNodeStatesChanged =
+ this._onWalkerNodeStatesChanged.bind(this);
+ this._onFocus = this._onFocus.bind(this);
+ this._onResourceAvailable = this._onResourceAvailable.bind(this);
+ this._onTargetAvailable = this._onTargetAvailable.bind(this);
+ this._onTargetDestroyed = this._onTargetDestroyed.bind(this);
+ this._onMouseClick = this._onMouseClick.bind(this);
+ this._onMouseMove = this._onMouseMove.bind(this);
+ this._onMouseOut = this._onMouseOut.bind(this);
+ this._onMouseUp = this._onMouseUp.bind(this);
+ this._onNewSelection = this._onNewSelection.bind(this);
+ this._onToolboxPickerCanceled = this._onToolboxPickerCanceled.bind(this);
+ this._onToolboxPickerHover = this._onToolboxPickerHover.bind(this);
+ this._onDomMutation = this._onDomMutation.bind(this);
+ this._updateSearchResultsHighlightingInSelectedNode =
+ this._updateSearchResultsHighlightingInSelectedNode.bind(this);
+ this._onToolboxSelect = this._onToolboxSelect.bind(this);
+
+ // Listening to various events.
+ this._elt.addEventListener("blur", this._onBlur, true);
+ this._elt.addEventListener("click", this._onMouseClick);
+ this._elt.addEventListener("contextmenu", this._onContextMenu);
+ this._elt.addEventListener("mousemove", this._onMouseMove);
+ this._elt.addEventListener("mouseout", this._onMouseOut);
+ this._frame.addEventListener("focus", this._onFocus);
+ this.inspector.selection.on("new-node-front", this._onNewSelection);
+ this.inspector.on(
+ "search-cleared",
+ this._updateSearchResultsHighlightingInSelectedNode
+ );
+ this._unsubscribeFromToolboxStore = this.inspector.toolbox.store.subscribe(
+ this._onDomMutation
+ );
+
+ if (flags.testing) {
+ // In tests, we start listening immediately to avoid having to simulate a mousemove.
+ this._initTooltips();
+ }
+
+ this.win.addEventListener("copy", this._onCopy);
+ this.win.addEventListener("mouseup", this._onMouseUp);
+ this.inspector.toolbox.nodePicker.on(
+ "picker-node-canceled",
+ this._onToolboxPickerCanceled
+ );
+ this.inspector.toolbox.nodePicker.on(
+ "picker-node-hovered",
+ this._onToolboxPickerHover
+ );
+
+ // Event listeners for highlighter events
+ this.onHighlighterShown = data =>
+ this.handleHighlighterEvent("highlighter-shown", data);
+ this.onHighlighterHidden = data =>
+ this.handleHighlighterEvent("highlighter-hidden", data);
+ this.inspector.highlighters.on(
+ "highlighter-shown",
+ this.onHighlighterShown
+ );
+ this.inspector.highlighters.on(
+ "highlighter-hidden",
+ this.onHighlighterHidden
+ );
+ this.inspector.toolbox.once("select", this._onToolboxSelect);
+
+ this._onNewSelection(this.inspector.selection.nodeFront);
+ if (this.inspector.selection.nodeFront) {
+ this.expandNode(this.inspector.selection.nodeFront);
+ }
+
+ this._prefObserver = new PrefObserver("devtools.markup");
+ this._prefObserver.on(
+ ATTR_COLLAPSE_ENABLED_PREF,
+ this._onCollapseAttributesPrefChange
+ );
+ this._prefObserver.on(
+ ATTR_COLLAPSE_LENGTH_PREF,
+ this._onCollapseAttributesPrefChange
+ );
+
+ this._initShortcuts();
+
+ this._walkerEventListener = new WalkerEventListener(this.inspector, {
+ "container-type-change": this._onWalkerNodeStatesChanged,
+ "display-change": this._onWalkerNodeStatesChanged,
+ "scrollable-change": this._onWalkerNodeStatesChanged,
+ "overflow-change": this._onWalkerNodeStatesChanged,
+ mutations: this._onWalkerMutations,
+ });
+
+ this.resourceCommand = this.inspector.toolbox.resourceCommand;
+ this.resourceCommand.watchResources(
+ [this.resourceCommand.TYPES.ROOT_NODE],
+ {
+ onAvailable: this._onResourceAvailable,
+ }
+ );
+
+ this.targetCommand = this.inspector.commands.targetCommand;
+ this.targetCommand.watchTargets({
+ types: [this.targetCommand.TYPES.FRAME],
+ onAvailable: this._onTargetAvailable,
+ onDestroyed: this._onTargetDestroyed,
+ });
+ }
-MarkupView.prototype = {
/**
* How long does a node flash when it mutates (in ms).
*/
- CONTAINER_FLASHING_DURATION: 500,
+ CONTAINER_FLASHING_DURATION = 500;
- _selectedContainer: null,
+ _selectedContainer = null;
get contextMenu() {
if (!this._contextMenu) {
@@ -407,11 +415,11 @@ MarkupView.prototype = {
}
return this._contextMenu;
- },
+ }
hasEventDetailsTooltip() {
return !!this._eventDetailsTooltip;
- },
+ }
get eventDetailsTooltip() {
if (!this._eventDetailsTooltip) {
@@ -423,11 +431,11 @@ MarkupView.prototype = {
}
return this._eventDetailsTooltip;
- },
+ }
get toolbox() {
return this.inspector.toolbox;
- },
+ }
get undo() {
if (!this._undo) {
@@ -436,7 +444,7 @@ MarkupView.prototype = {
}
return this._undo;
- },
+ }
_onDomMutation() {
const domMutationBreakpoints =
@@ -477,7 +485,7 @@ MarkupView.prototype = {
this._containersToUpdate.delete(nodeFront);
}
}
- },
+ }
/**
* Handle promise rejections for various asynchronous actions, and only log errors if
@@ -489,7 +497,7 @@ MarkupView.prototype = {
if (!this._destroyed) {
console.error(e);
}
- },
+ }
_initTooltips() {
if (this.imagePreviewTooltip) {
@@ -501,7 +509,7 @@ MarkupView.prototype = {
useXulWrapper: true,
});
this._enableImagePreviewTooltip();
- },
+ }
_enableImagePreviewTooltip() {
if (!this.imagePreviewTooltip) {
@@ -511,20 +519,20 @@ MarkupView.prototype = {
this._elt,
this._isImagePreviewTarget
);
- },
+ }
_disableImagePreviewTooltip() {
if (!this.imagePreviewTooltip) {
return;
}
this.imagePreviewTooltip.stopTogglingOnHover();
- },
+ }
_onToolboxPickerHover(nodeFront) {
this.showNode(nodeFront).then(() => {
this._showNodeAsHovered(nodeFront);
}, console.error);
- },
+ }
/**
* If the element picker gets canceled, make sure and re-center the view on the
@@ -534,7 +542,7 @@ MarkupView.prototype = {
if (this._selectedContainer) {
scrollIntoViewIfNeeded(this._selectedContainer.editor.elt);
}
- },
+ }
_onToolboxSelect(id) {
if (id !== "inspector") {
@@ -548,10 +556,10 @@ MarkupView.prototype = {
if (this.inspector.selection?.reason === "browser-context-menu") {
this.maybeNavigateToNewSelection();
}
- },
+ }
- isDragging: false,
- _draggedContainer: null,
+ isDragging = false;
+ _draggedContainer = null;
_onMouseMove(event) {
// Note that in tests, we start listening immediately from the constructor to avoid having to simulate a mousemove.
@@ -587,7 +595,7 @@ MarkupView.prototype = {
this._showContainerAsHovered(container);
this.emit("node-hover");
- },
+ }
/**
* If focus is moved outside of the markup view document and there is a
@@ -606,11 +614,11 @@ MarkupView.prototype = {
if (this._selectedContainer) {
this._selectedContainer.clearFocus();
}
- },
+ }
_onContextMenu(event) {
this.contextMenu.show(event);
- },
+ }
/**
* Executed on each mouse-move while a node is being dragged in the view.
@@ -672,7 +680,7 @@ MarkupView.prototype = {
heightToSpeedRatio * (speed - DRAG_DROP_MAX_AUTOSCROLL_SPEED);
});
}
- },
+ }
/**
* Run a loop on the requestAnimationFrame.
@@ -683,7 +691,7 @@ MarkupView.prototype = {
this._autoScrollAnimationFrame = this.win.requestAnimationFrame(loop);
};
loop();
- },
+ }
_onMouseClick(event) {
// From the target passed here, let's find the parent MarkupContainer
@@ -702,7 +710,7 @@ MarkupView.prototype = {
// Forward the event to the container if it implements onContainerClick.
container.onContainerClick(event);
}
- },
+ }
_onMouseUp(event) {
if (this._draggedContainer) {
@@ -714,7 +722,7 @@ MarkupView.prototype = {
if (this._autoScrollAnimationFrame) {
this.win.cancelAnimationFrame(this._autoScrollAnimationFrame);
}
- },
+ }
_onCollapseAttributesPrefChange() {
this.collapseAttributes = Services.prefs.getBoolPref(
@@ -724,7 +732,7 @@ MarkupView.prototype = {
ATTR_COLLAPSE_LENGTH_PREF
);
this.update();
- },
+ }
cancelDragging() {
if (!this.isDragging) {
@@ -743,9 +751,9 @@ MarkupView.prototype = {
if (this._autoScrollAnimationFrame) {
this.win.cancelAnimationFrame(this._autoScrollAnimationFrame);
}
- },
+ }
- _hoveredContainer: null,
+ _hoveredContainer = null;
/**
* Show a NodeFront's container as being hovered
@@ -756,7 +764,7 @@ MarkupView.prototype = {
_showNodeAsHovered(nodeFront) {
const container = this.getContainer(nodeFront);
this._showContainerAsHovered(container);
- },
+ }
_showContainerAsHovered(container) {
if (this._hoveredContainer === container) {
@@ -769,7 +777,7 @@ MarkupView.prototype = {
container.hovered = true;
this._hoveredContainer = container;
- },
+ }
async _onMouseOut(event) {
// Emulate mouseleave by skipping any relatedTarget inside the markup-view.
@@ -791,7 +799,7 @@ MarkupView.prototype = {
this._hoveredContainer = null;
this.emit("leave");
- },
+ }
/**
* Show the Box Model Highlighter on a given node front
@@ -808,7 +816,7 @@ MarkupView.prototype = {
nodeFront,
options
);
- },
+ }
/**
* Hide the Box Model Highlighter for any node that may be highlighted.
@@ -819,7 +827,7 @@ MarkupView.prototype = {
return this.inspector.highlighters.hideHighlighterType(
this.inspector.highlighters.TYPES.BOXMODEL
);
- },
+ }
/**
* Delegate handler for highlighter events.
@@ -876,14 +884,14 @@ MarkupView.prototype = {
break;
}
}
- },
+ }
/**
* Used by tests
*/
getSelectedContainer() {
return this._selectedContainer;
- },
+ }
/**
* Get the MarkupContainer object for a given node, or undefined if
@@ -898,7 +906,7 @@ MarkupView.prototype = {
getContainer(node, slotted) {
const key = this._getContainerKey(node, slotted);
return this._containers.get(key);
- },
+ }
/**
* Register a given container for a given node/slotted node.
@@ -911,7 +919,7 @@ MarkupView.prototype = {
setContainer(node, container, slotted) {
const key = this._getContainerKey(node, slotted);
return this._containers.set(key, container);
- },
+ }
/**
* Check if a MarkupContainer object exists for a given node/slotted node
@@ -925,7 +933,7 @@ MarkupView.prototype = {
hasContainer(node, slotted) {
const key = this._getContainerKey(node, slotted);
return this._containers.has(key);
- },
+ }
_getContainerKey(node, slotted) {
if (!slotted) {
@@ -936,7 +944,7 @@ MarkupView.prototype = {
this._slottedContainerKeys.set(node, { node });
}
return this._slottedContainerKeys.get(node);
- },
+ }
_isContainerSelected(container) {
if (!container) {
@@ -948,7 +956,7 @@ MarkupView.prototype = {
container.node == selection.nodeFront &&
container.isSlotted() == selection.isSlotted()
);
- },
+ }
update() {
const updateChildren = node => {
@@ -969,7 +977,7 @@ MarkupView.prototype = {
// Recursively update each node starting with documentElement.
updateChildren(documentElement);
- },
+ }
/**
* Executed when the mouse hovers over a target in the markup-view and is used
@@ -1003,7 +1011,7 @@ MarkupView.prototype = {
}
return false;
- },
+ }
/**
* Given the known reason, should the current selection be briefly highlighted
@@ -1033,7 +1041,7 @@ MarkupView.prototype = {
const isHighlight = this._isContainerSelected(this._hoveredContainer);
return !isHighlight && reason && !unwantedReasons.includes(reason);
- },
+ }
/**
* React to new-node-front selection events.
@@ -1126,7 +1134,7 @@ MarkupView.prototype = {
.catch(this._handleRejectionIfNotDestroyed);
Promise.all([onShowBoxModel, onShow]).then(done);
- },
+ }
_getSearchResultsHighlight() {
const highlightName = "devtools-search";
@@ -1137,7 +1145,7 @@ MarkupView.prototype = {
}
return highlights.get(highlightName);
- },
+ }
/**
* @returns {nsISelectionController}
@@ -1151,7 +1159,7 @@ MarkupView.prototype = {
.QueryInterface(Ci.nsISelectionController);
}
return this._selectionController;
- },
+ }
/**
* Highlight search results in the markup view.
@@ -1237,7 +1245,7 @@ MarkupView.prototype = {
false
);
}
- },
+ }
/**
* Maybe make selected the current node selection's MarkupContainer depending
@@ -1270,7 +1278,7 @@ MarkupView.prototype = {
this.getContainer(root).elt.focus();
this.navigate(this.getContainer(nodeFront));
}
- },
+ }
/**
* Create a TreeWalker to find the next/previous
@@ -1293,7 +1301,7 @@ MarkupView.prototype = {
);
walker.currentNode = this._selectedContainer.elt;
return walker;
- },
+ }
_onCopy(evt) {
// Ignore copy events from editors
@@ -1307,7 +1315,7 @@ MarkupView.prototype = {
}
evt.stopPropagation();
evt.preventDefault();
- },
+ }
/**
* Copy the outerHTML of the selected Node to the clipboard.
@@ -1331,7 +1339,7 @@ MarkupView.prototype = {
clipboardHelper.copyString(node.doctypeString);
break;
}
- },
+ }
/**
* Copy the innerHTML of the selected Node to the clipboard.
@@ -1343,7 +1351,7 @@ MarkupView.prototype = {
}
copyLongHTMLString(nodeFront.walkerFront.innerHTML(nodeFront));
- },
+ }
/**
* Given a type and link found in a node's attribute in the markup-view,
@@ -1390,7 +1398,7 @@ MarkupView.prototype = {
})
.catch(console.error);
}
- },
+ }
/**
* Register all key shortcuts.
@@ -1433,7 +1441,7 @@ MarkupView.prototype = {
].forEach(key => {
shortcuts.on(key, event => this._onShortcut(key, event));
});
- },
+ }
/**
* Key shortcut listener.
@@ -1460,7 +1468,7 @@ MarkupView.prototype = {
event.stopPropagation();
event.preventDefault();
- },
+ }
/**
* Check if a node is an input or textarea
@@ -1468,7 +1476,7 @@ MarkupView.prototype = {
_isInputOrTextarea(element) {
const name = element.tagName.toLowerCase();
return name === "input" || name === "textarea";
- },
+ }
/**
* If there's an attribute on the current node that's currently focused, then
@@ -1489,7 +1497,7 @@ MarkupView.prototype = {
} else {
this.deleteNode(this._selectedContainer.node, moveBackward);
}
- },
+ }
/**
* Returns a value indicating whether a node can be deleted.
@@ -1505,7 +1513,7 @@ MarkupView.prototype = {
nodeFront.nodeType == nodeConstants.DOCUMENT_FRAGMENT_NODE ||
nodeFront.isAnonymous
);
- },
+ }
/**
* Delete a node from the DOM.
@@ -1572,7 +1580,7 @@ MarkupView.prototype = {
);
})
.catch(console.error);
- },
+ }
/**
* Scroll the node into view.
@@ -1585,7 +1593,7 @@ MarkupView.prototype = {
this.inspector.selection.nodeFront
.scrollIntoView()
.then(() => this.emitForTests("node-scrolled-into-view"));
- },
+ }
async toggleMutationBreakpoint(name) {
if (!this.inspector.selection.isElementNode()) {
@@ -1600,7 +1608,7 @@ MarkupView.prototype = {
} else {
toolboxStore.dispatch(createDOMMutationBreakpoint(nodeFront, name));
}
- },
+ }
/**
* If an editable item is focused, select its container.
@@ -1613,7 +1621,7 @@ MarkupView.prototype = {
if (parent) {
this.navigate(parent.container);
}
- },
+ }
/**
* Handle a user-requested navigation to a given MarkupContainer,
@@ -1628,7 +1636,7 @@ MarkupView.prototype = {
}
this._markContainerAsSelected(container, "treepanel");
- },
+ }
/**
* Make sure a node is included in the markup tool.
@@ -1681,7 +1689,7 @@ MarkupView.prototype = {
this.inspector.emit("container-created", container);
return container;
- },
+ }
async _onResourceAvailable(resources) {
for (const resource of resources) {
@@ -1711,9 +1719,9 @@ MarkupView.prototype = {
});
}
}
- },
+ }
- _onTargetAvailable() {},
+ _onTargetAvailable() {}
_onTargetDestroyed({ targetFront, isModeSwitching }) {
// Bug 1776250: We only watch targets in order to update containers which
@@ -1727,7 +1735,7 @@ MarkupView.prototype = {
});
}
}
- },
+ }
/**
* Mutation observer used for included nodes.
@@ -1782,7 +1790,7 @@ MarkupView.prototype = {
this.htmlEditor.refresh();
}
});
- },
+ }
/**
* React to display-change and scrollable-change events from the walker. These are
@@ -1799,7 +1807,7 @@ MarkupView.prototype = {
container.update();
}
}
- },
+ }
/**
* Given a list of mutations returned by the mutation observer, flash the
@@ -1850,7 +1858,7 @@ MarkupView.prototype = {
for (const container of addedOrEditedContainers) {
container.flashMutation();
}
- },
+ }
/**
* Make sure the given node's parents are expanded and the
@@ -1889,7 +1897,7 @@ MarkupView.prototype = {
const container = this.getContainer(nodeFront, slotted);
scrollIntoViewIfNeeded(container.editor.elt, centered, smoothScroll);
}, this._handleRejectionIfNotDestroyed);
- },
+ }
_ensureNodeImported(node) {
let parent = node;
@@ -1900,7 +1908,7 @@ MarkupView.prototype = {
this.importNode(parent);
this.expandNode(parent);
}
- },
+ }
/**
* Expand the container's children.
@@ -1914,7 +1922,7 @@ MarkupView.prototype = {
}
container.setExpanded(true);
});
- },
+ }
/**
* Expand the node's children.
@@ -1922,7 +1930,7 @@ MarkupView.prototype = {
expandNode(node) {
const container = this.getContainer(node);
return this._expandContainer(container);
- },
+ }
/**
* Expand the entire tree beneath a container.
@@ -1942,7 +1950,7 @@ MarkupView.prototype = {
return Promise.all(promises);
})
.catch(console.error);
- },
+ }
/**
* Expand the entire tree beneath a node.
@@ -1954,7 +1962,7 @@ MarkupView.prototype = {
expandAll(node) {
node = node || this._rootNode;
return this._expandAll(this.getContainer(node));
- },
+ }
/**
* Collapse the node's children.
@@ -1962,13 +1970,13 @@ MarkupView.prototype = {
collapseNode(node) {
const container = this.getContainer(node);
container.setExpanded(false);
- },
+ }
_collapseAll(container) {
container.setExpanded(false);
const children = container.getChildContainers() || [];
children.forEach(child => this._collapseAll(child));
- },
+ }
/**
* Collapse the entire tree beneath a node.
@@ -1982,7 +1990,7 @@ MarkupView.prototype = {
// collapseAll is synchronous, return a promise for consistency with expandAll.
return Promise.resolve();
- },
+ }
/**
* Returns either the innerHTML or the outerHTML for a remote node.
@@ -2004,7 +2012,7 @@ MarkupView.prototype = {
}
return getLongString(walkerPromise);
- },
+ }
/**
* Retrieve the outerHTML for a remote node.
@@ -2015,7 +2023,7 @@ MarkupView.prototype = {
*/
getNodeOuterHTML(node) {
return this._getNodeHTML(node, true);
- },
+ }
/**
* Retrieve the innerHTML for a remote node.
@@ -2026,7 +2034,7 @@ MarkupView.prototype = {
*/
getNodeInnerHTML(node) {
return this._getNodeHTML(node);
- },
+ }
/**
* Listen to mutations, expect a given node to be removed and try and select
@@ -2090,7 +2098,7 @@ MarkupView.prototype = {
// Start listening for mutations until we find a childList change that has
// removedNode removed.
this.inspector.on("markupmutation", onMutations);
- },
+ }
/**
* Make sure to stop listening for node removal markupmutations and not
@@ -2103,7 +2111,7 @@ MarkupView.prototype = {
this._removedNodeObserver = null;
this.emit("canceledreselectonremoved");
}
- },
+ }
/**
* Replace the outerHTML of any node displayed in the inspector with
@@ -2129,7 +2137,7 @@ MarkupView.prototype = {
return node.walkerFront.setOuterHTML(node, newValue).catch(() => {
this.cancelReselectOnRemoved();
});
- },
+ }
/**
* Replace the innerHTML of any node displayed in the inspector with
@@ -2158,7 +2166,7 @@ MarkupView.prototype = {
}
);
});
- },
+ }
/**
* Insert adjacent HTML to any node displayed in the inspector.
@@ -2198,7 +2206,7 @@ MarkupView.prototype = {
}
);
});
- },
+ }
/**
* Open an editor in the UI to allow editing of a node's html.
@@ -2246,7 +2254,7 @@ MarkupView.prototype = {
this.emit("begin-editing");
});
- },
+ }
/**
* Expand or collapse the given node.
@@ -2270,7 +2278,7 @@ MarkupView.prototype = {
} else {
this.collapseNode(node);
}
- },
+ }
/**
* Mark the given node selected, and update the inspector.selection
@@ -2284,7 +2292,7 @@ MarkupView.prototype = {
markNodeAsSelected(node) {
const container = this.getContainer(node);
return this._markContainerAsSelected(container);
- },
+ }
_markContainerAsSelected(container, reason) {
if (!container || this._selectedContainer === container) {
@@ -2312,7 +2320,7 @@ MarkupView.prototype = {
}
return true;
- },
+ }
/**
* Make sure that every ancestor of the selection are updated
@@ -2332,7 +2340,7 @@ MarkupView.prototype = {
node = parent;
}
return this._waitForChildren();
- },
+ }
/**
* Unmark selected node (no node selected).
@@ -2342,7 +2350,7 @@ MarkupView.prototype = {
this._selectedContainer.selected = false;
this._selectedContainer = null;
}
- },
+ }
/**
* Check if the current selection is a descendent of the container.
@@ -2363,7 +2371,7 @@ MarkupView.prototype = {
}
return centered;
- },
+ }
async _forceUpdateChildren(container, options = {}) {
const { flash, updateLevel, expand } = options;
@@ -2384,7 +2392,7 @@ MarkupView.prototype = {
// accessibility where necessary.
container.updateLevel();
}
- },
+ }
/**
* Make sure all children of the given container's node are
@@ -2544,7 +2552,7 @@ MarkupView.prototype = {
.catch(this._handleRejectionIfNotDestroyed);
this._queuedChildUpdates.set(container, updatePromise);
return updatePromise;
- },
+ }
buildMoreNodesButtonMarkup(container) {
const elt = this.doc.createElement("li");
@@ -2572,7 +2580,7 @@ MarkupView.prototype = {
});
return elt;
- },
+ }
_waitForChildren() {
if (!this._queuedChildUpdates) {
@@ -2580,7 +2588,7 @@ MarkupView.prototype = {
}
return Promise.all([...this._queuedChildUpdates.values()]);
- },
+ }
/**
* Return a list of the children to display for this container.
@@ -2599,7 +2607,7 @@ MarkupView.prototype = {
maxNodes: maxChildren,
center: centered,
});
- },
+ }
/**
* The parent of a given node as rendered in the markup view is not necessarily
@@ -2626,7 +2634,7 @@ MarkupView.prototype = {
}
return parent;
- },
+ }
/**
* Tear down the markup panel.
@@ -2746,7 +2754,7 @@ MarkupView.prototype = {
this._lastDropTarget = null;
this._lastDragTarget = null;
- },
+ }
/**
* Find the closest element with class tag-line. These are used to indicate
@@ -2759,7 +2767,7 @@ MarkupView.prototype = {
return el.classList.contains("tag-line")
? el
: el.querySelector(".tag-line") || el.closest(".tag-line");
- },
+ }
/**
* Takes an element as it's only argument and marks the element
@@ -2779,7 +2787,7 @@ MarkupView.prototype = {
target.classList.add("drop-target");
this._lastDropTarget = target;
}
- },
+ }
/**
* Takes an element to mark it as indicator of dragging target's initial place
@@ -2798,7 +2806,7 @@ MarkupView.prototype = {
target.classList.add("drag-target");
this._lastDragTarget = target;
}
- },
+ }
/**
* Used to get the nodes required to modify the markup after dragging the
@@ -2843,8 +2851,8 @@ MarkupView.prototype = {
}
return { parent, nextSibling };
- },
-};
+ }
+}
/**
* Copy the content of a longString containing HTML code to the clipboard.
