1360196 - Allow loading network monitor in a tab

Status: RESOLVED FIXED

(DevTools :: Netmonitor, enhancement)

Description

[Alexandre Poirot [:ochameau]]

Like bug 1297758 for the inspector or bug 1307765 for the console, we can allow loading the network monitor in a tab by using the following url:
  chrome://devtools/content/netmonitor/index.html?type=tab&id=${Tab.Id}

It could help working on network monitor. Its code get refreshed from sources if you reload the tab. And it may help figuring out perf issue Ricky mentioned to me about Netmon being faster when run in a tab from launchpad.

Comment 1

[Alexandre Poirot [:ochameau]]

https://treeherder.mozilla.org/#/jobs?repo=try&revision=4ff3a4ce8b14450360aee1d362222018839d739a

Comment 2

[Alexandre Poirot [:ochameau]]

Attachment: Bug 1360196 - Implement about:devtools-toolbox URL parameter in the network monitor.

Review commit: https://reviewboard.mozilla.org/r/134350/diff/#index_header
See other reviews: https://reviewboard.mozilla.org/r/134350/

Comment 3

[Ricky Chien [:rickychien] (inactive)]

Comment on attachment 8862512 [details]
Bug 1360196 - Implement about:devtools-toolbox URL parameter in the network monitor.

https://reviewboard.mozilla.org/r/134350/#review137562

Almost looks good to me! Thanks for helping me profiling netmonitor panel. This about:devtools-toolbox can also help us identify how other panels impact on perf when running on chrome process. There are a few nits please fix them. :)

::: devtools/client/netmonitor/index.html:54
(Diff revision 1)
>          destroy() {
>            unmountComponentAtNode(this.mount);
>            return NetMonitorController.shutdownNetMonitor();
>          }
>        };
> +

nit: 

I'd suggest commenting more details about this step to override Netmonitor.bootstrap is in order to support loading netmonitor panel via about:devtools-toolbox.

Futhermore, do we have MDN docs provides STR for opening devtools panel via about:devtools-toolbox? If there is, we can also comment the link here.

::: devtools/client/netmonitor/index.html:62
(Diff revision 1)
> +      let url = new window.URL(href);
> +
> +      // If query parameters are given in a chrome tab, the inspector is running in standalone.
> +      if (window.location.protocol === "chrome:" && url.search.length > 1) {
> +        const { targetFromURL } = require("devtools/client/framework/target-from-url");
> +        const {Task} = require("devtools/shared/task");

nit: netmonitor has converted all Task.js into async await or promise instead after refactoring.

I'd suggest using Promise here or it's fine if you prefer to use async await.

Comment 4

[Alexandre Poirot [:ochameau]]

Comment on attachment 8862512 [details]
Bug 1360196 - Implement about:devtools-toolbox URL parameter in the network monitor.

Review request updated; see interdiff: https://reviewboard.mozilla.org/r/134350/diff/1-2/

Comment 5

[Alexandre Poirot [:ochameau]]

(In reply to Ricky Chien [:rickychien] from comment #3)
> I'd suggest commenting more details about this step to override
> Netmonitor.bootstrap is in order to support loading netmonitor panel via
> about:devtools-toolbox.

Added a comment.

> Futhermore, do we have MDN docs provides STR for opening devtools panel via
> about:devtools-toolbox? If there is, we can also comment the link here.

No, the only online reference of that is bugzilla and this thread:
https://groups.google.com/forum/#!msg/mozilla.dev.developer-tools/kkWSvqxgkFg/4m_DiBNiBwAJ
For now, this feature is just for core contributors.
I never received feedback from anyone about this, so I'm hesitent to start communicating about it widely.

Note the existence of bug 1307860 which would significantly reduce the complexity of this...

> nit: netmonitor has converted all Task.js into async await or promise
> instead after refactoring.
> 
> I'd suggest using Promise here or it's fine if you prefer to use async await.

Switched to async/await.

Comment 6

[Alexandre Poirot [:ochameau]]

Comment on attachment 8862512 [details]
Bug 1360196 - Implement about:devtools-toolbox URL parameter in the network monitor.

Review request updated; see interdiff: https://reviewboard.mozilla.org/r/134350/diff/2-3/

Comment 7

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/44468104c31e
Implement about:devtools-toolbox URL parameter in the network monitor. r=rickychien

Comment 8

[Wes Kocher (:KWierso) (Not reading bugmail; email directly if needed)]

https://hg.mozilla.org/mozilla-central/rev/44468104c31e