Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-10-19 00:05:36 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 1572654 - [devtools] Hide flexbox highlighter when its nodeFront is dead r=ochameau

Browse Source 
Depends on D97660

Hide highlighters when the node they highlight is removed from the DOM tree as a result of a mutation.

There is already a test covering this behavior for flexbox highlighters in: https://searchfox.org/mozilla-central/source/devtools/client/inspector/rules/test/browser_rules_flexbox-highlighter-on-mutation.js

Differential Revision: https://phabricator.services.mozilla.com/D98019
This commit is contained in:
Razvan Caliman 2020-12-13 16:38:51 +00:00
parent 195a4f97bd
commit bd1ef62248
1 changed files with 23 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
devtools/client/inspector/shared/highlighters-overlay.js
View File

@ -1430,7 +1430,7 @@ class HighlightersOverlay {
const isInTree =
node.walkerFront && (await node.walkerFront.isInDOMTree(node));
if (!isInTree) {
hideHighlighter(node);
await hideHighlighter(node);
}
} catch (e) {
this._handleRejection(e);
@ -1564,7 +1564,7 @@ class HighlightersOverlay {
if (
display !== "flex" &&
display !== "inline-flex" &&
node == this.flexboxHighlighterShown
node == this.getNodeForActiveHighlighter(TYPES.FLEXBOX)
) {
await this.hideFlexboxHighlighter(node);
return;
@ -1684,7 +1684,7 @@ class HighlightersOverlay {
continue;
}
await this._updateHighlighters();
await this._hideOrphanedHighlighters();
}
}
@ -1702,10 +1702,16 @@ class HighlightersOverlay {
return;
}
await this._updateHighlighters();
await this._hideOrphanedHighlighters();
}
async _updateHighlighters() {
/**
* Hide every active highlighter whose nodeFront is no longer present in the DOM.
* Returns a promise that resolves when all orphaned highlighters are hidden.
*
* @return {Promise}
*/
async _hideOrphanedHighlighters() {
for (const node of this.gridHighlighters.keys()) {
await this._hideHighlighterIfDeadNode(node, this.hideGridHighlighter);
}
@ -1714,14 +1720,22 @@ class HighlightersOverlay {
await this._hideHighlighterIfDeadNode(node, this.hideGridHighlighter);
}
await this._hideHighlighterIfDeadNode(
this.flexboxHighlighterShown,
this.hideFlexboxHighlighter
);
await this._hideHighlighterIfDeadNode(
this.shapesHighlighterShown,
this.hideShapesHighlighter
);
// Hide all active highlighters whose nodeFront is no longer attached.
const promises = [];
for (const [type, data] of this._activeHighlighters) {
promises.push(
this._hideHighlighterIfDeadNode(data.nodeFront, () => {
return this.hideHighlighterType(type);
})
);
}
return Promise.all(promises);
}
/**