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

Bug 1715911 - [devtools] Use DOCUMENT_EVENT's dom-complete event in the DOM panel r=nchevobbe

Browse Source 
This slightly changes panel initialization,
instead of updating the UI on opening as soon as the first top level target is available,
it will only update once the navigate resource fires.

So if we open the toolbox on a still loading document, it will update later, but only once
instead of twice.

Differential Revision: https://phabricator.services.mozilla.com/D117515
This commit is contained in:
Alexandre Poirot 2021-06-15 08:54:40 +00:00
parent bd1afe2a59
commit b10f35c671
1 changed files with 23 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
devtools/client/dom/panel.js
View File

@ -22,8 +22,6 @@ function DomPanel(iframeWindow, toolbox, commands) {
this._toolbox = toolbox;
this._commands = commands;
this.onTabNavigated = this.onTabNavigated.bind(this);
this.onTargetAvailable = this.onTargetAvailable.bind(this);
this.onContentMessage = this.onContentMessage.bind(this);
this.onPanelVisibilityChange = this.onPanelVisibilityChange.bind(this);
@ -45,7 +43,7 @@ DomPanel.prototype = {
this._resolveOpen = resolve;
});
this.initialize();
await this.initialize();
await onGetProperties;
@ -54,7 +52,7 @@ DomPanel.prototype = {
// Initialization
initialize: function() {
async initialize() {
this.panelWin.addEventListener(
"devtools/content/message",
this.onContentMessage,
@ -63,9 +61,12 @@ DomPanel.prototype = {
this._toolbox.on("select", this.onPanelVisibilityChange);
this._commands.targetCommand.watchTargets(
[this._commands.targetCommand.TYPES.FRAME],
this.onTargetAvailable
this.onResourceAvailable = this.onResourceAvailable.bind(this);
await this._commands.resourceCommand.watchResources(
[this._commands.resourceCommand.TYPES.DOCUMENT_EVENT],
{
onAvailable: this.onResourceAvailable,
}
);
// Export provider object with useful API for DOM panel.
@ -91,7 +92,10 @@ DomPanel.prototype = {
}
this._destroyed = true;
this.currentTarget.off("navigate", this.onTabNavigated);
this._commands.resourceCommand.unwatchResources(
[this._commands.resourceCommand.TYPES.DOCUMENT_EVENT],
{ onAvailable: this.onResourceAvailable }
);
this._toolbox.off("select", this.onPanelVisibilityChange);
this.emit("destroyed");
@ -128,18 +132,18 @@ DomPanel.prototype = {
this.refresh();
},
onTargetAvailable: function({ targetFront }) {
// Only care about top-level targets.
if (!targetFront.isTopLevel) {
return;
onResourceAvailable: function(resources) {
for (const resource of resources) {
// Only consider top level document, and ignore remote iframes top document
if (
resource.resourceType ===
this._commands.resourceCommand.TYPES.DOCUMENT_EVENT &&
resource.name === "dom-complete" &&
resource.targetFront.isTopLevel
) {
this.onTabNavigated();
}
}
this.shouldRefresh = true;
this.refresh();
// Whenever a new target is available, listen to navigate events on it so we can
// refresh the panel when we navigate within the same process.
this.currentTarget.on("navigate", this.onTabNavigated);
},
/**