зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1572652 - [devtools] Destroy grid highlighters when nodes stop being grid containers. r=ochameau
Depends on D99591 Differential Revision: https://phabricator.services.mozilla.com/D99609
This commit is contained in:
Родитель
2110082a7c
Коммит
017bbccb6b
|
@ -7,6 +7,7 @@
|
|||
const Services = require("Services");
|
||||
const { safeAsyncMethod } = require("devtools/shared/async-utils");
|
||||
const EventEmitter = require("devtools/shared/event-emitter");
|
||||
const WalkerEventListener = require("devtools/client/inspector/shared/walker-event-listener");
|
||||
const {
|
||||
VIEW_NODE_VALUE_TYPE,
|
||||
VIEW_NODE_SHAPE_POINT_TYPE,
|
||||
|
@ -100,7 +101,6 @@ class HighlightersOverlay {
|
|||
this.store = this.inspector.store;
|
||||
this.target = this.inspector.currentTarget;
|
||||
this.telemetry = this.inspector.telemetry;
|
||||
this.walker = this.inspector.walker;
|
||||
this.maxGridHighlighters = Services.prefs.getIntPref(
|
||||
"devtools.gridinspector.maxHighlighters"
|
||||
);
|
||||
|
@ -200,7 +200,9 @@ class HighlightersOverlay {
|
|||
);
|
||||
|
||||
this.target.on("will-navigate", this.onWillNavigate);
|
||||
this.walker.on("display-change", this.onDisplayChange);
|
||||
this.walkerEventListener = new WalkerEventListener(this.inspector, {
|
||||
"display-change": this.onDisplayChange,
|
||||
});
|
||||
|
||||
EventEmitter.decorate(this);
|
||||
}
|
||||
|
@ -885,6 +887,15 @@ class HighlightersOverlay {
|
|||
return Object.assign({}, highlighterSettings, { color, zIndex });
|
||||
}
|
||||
|
||||
/**
|
||||
* Return a list of all node fronts that are highlighted with a Grid highlighter.
|
||||
*
|
||||
* @return {Array}
|
||||
*/
|
||||
getHighlightedGridNodes() {
|
||||
return [...Array.from(this.gridHighlighters.keys())];
|
||||
}
|
||||
|
||||
/**
|
||||
* Toggle the grid highlighter for the given grid container element.
|
||||
*
|
||||
|
@ -1648,7 +1659,7 @@ class HighlightersOverlay {
|
|||
}
|
||||
|
||||
/**
|
||||
* Handler for "display-change" events from the walker. Hides the flexbox or
|
||||
* Handler for "display-change" events from walker fronts. Hides the flexbox or
|
||||
* grid highlighter if their respective node is no longer a flex container or
|
||||
* grid container.
|
||||
*
|
||||
|
@ -1656,11 +1667,12 @@ class HighlightersOverlay {
|
|||
* An array of nodeFronts
|
||||
*/
|
||||
async onDisplayChange(nodes) {
|
||||
const highlightedGridNodes = this.getHighlightedGridNodes();
|
||||
|
||||
for (const node of nodes) {
|
||||
const display = node.displayType;
|
||||
|
||||
// Hide the flexbox highlighter if the node is no longer a flexbox
|
||||
// container.
|
||||
// Hide the flexbox highlighter if the node is no longer a flexbox container.
|
||||
if (
|
||||
display !== "flex" &&
|
||||
display !== "inline-flex" &&
|
||||
|
@ -1674,18 +1686,12 @@ class HighlightersOverlay {
|
|||
if (
|
||||
display !== "grid" &&
|
||||
display !== "inline-grid" &&
|
||||
(this.gridHighlighters.has(node) ||
|
||||
this.parentGridHighlighters.has(node))
|
||||
display !== "subgrid" &&
|
||||
highlightedGridNodes.includes(node)
|
||||
) {
|
||||
await this.hideGridHighlighter(node);
|
||||
return;
|
||||
}
|
||||
|
||||
// Hide the grid highlighter if the node is no longer a subgrid.
|
||||
if (display !== "subgrid" && this.subgridToParentMap.has(node)) {
|
||||
await this.hideGridHighlighter(node);
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -1812,14 +1818,6 @@ class HighlightersOverlay {
|
|||
* @return {Promise}
|
||||
*/
|
||||
async _hideOrphanedHighlighters() {
|
||||
for (const node of this.gridHighlighters.keys()) {
|
||||
await this._hideHighlighterIfDeadNode(node, this.hideGridHighlighter);
|
||||
}
|
||||
|
||||
for (const node of this.parentGridHighlighters.keys()) {
|
||||
await this._hideHighlighterIfDeadNode(node, this.hideGridHighlighter);
|
||||
}
|
||||
|
||||
await this._hideHighlighterIfDeadNode(
|
||||
this.shapesHighlighterShown,
|
||||
this.hideShapesHighlighter
|
||||
|
@ -1835,6 +1833,13 @@ class HighlightersOverlay {
|
|||
);
|
||||
}
|
||||
|
||||
const highlightedGridNodes = this.getHighlightedGridNodes();
|
||||
for (const node of highlightedGridNodes) {
|
||||
promises.push(
|
||||
this._hideHighlighterIfDeadNode(node, this.hideGridHighlighter)
|
||||
);
|
||||
}
|
||||
|
||||
return Promise.all(promises);
|
||||
}
|
||||
|
||||
|
@ -1919,7 +1924,8 @@ class HighlightersOverlay {
|
|||
);
|
||||
|
||||
this.target.off("will-navigate", this.onWillNavigate);
|
||||
this.walker.off("display-change", this.onDisplayChange);
|
||||
this.walkerEventListener.destroy();
|
||||
this.walkerEventListener = null;
|
||||
|
||||
this.destroyEditors();
|
||||
this.destroyHighlighters();
|
||||
|
@ -1932,7 +1938,6 @@ class HighlightersOverlay {
|
|||
this.store = null;
|
||||
this.target = null;
|
||||
this.telemetry = null;
|
||||
this.walker = null;
|
||||
|
||||
this.geometryEditorHighlighterShown = null;
|
||||
this.hoveredHighlighterShown = null;
|
||||
|
|
Загрузка…
Ссылка в новой задаче