devtools/client/netmonitor/initializer.js

   1 /* This Source Code Form is subject to the terms of the Mozilla Public
   2  * License, v. 2.0. If a copy of the MPL was not distributed with this
   3  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
   4 /* exported initialize */
   5
   6 "use strict";
   7
   8 /**
   9  * This script is the entry point of Network monitor panel.
  10  * See README.md for more information.
  11  */
  12 const { BrowserLoader } = ChromeUtils.importESModule(
  13   "resource://devtools/shared/loader/browser-loader.sys.mjs"
  14 );
  15
  16 const require = (window.windowRequire = BrowserLoader({
  17   baseURI: "resource://devtools/client/netmonitor/",
  18   window,
  19 }).require);
  20
  21 const {
  22   NetMonitorApp,
  23 } = require("resource://devtools/client/netmonitor/src/app.js");
  24 const EventEmitter = require("resource://devtools/shared/event-emitter.js");
  25
  26 // Inject EventEmitter into global window.
  27 EventEmitter.decorate(window);
  28
  29 /**
  30  * This is the initialization point for the Network monitor.
  31  *
  32  * @param {Object} api Allows reusing existing API object.
  33  */
  34 function initialize(api) {
  35   const app = new NetMonitorApp(api);
  36
  37   // Inject to global window for testing
  38   window.Netmonitor = app;
  39   window.api = api;
  40   window.store = app.api.store;
  41   window.connector = app.api.connector;
  42   window.actions = app.api.actions;
  43
  44   return app;
  45 }
  46
  47 /**
  48  * The following code is used to open Network monitor in a tab.
  49  * Like the Launchpad, but without Launchpad.
  50  *
  51  * For example:
  52  * chrome://devtools/content/netmonitor/index.html?type=process
  53  * loads the netmonitor for the parent process, exactly like the
  54  * one in the browser toolbox
  55  *
  56  * It's also possible to connect to a tab.
  57  * 1) go in about:debugging
  58  * 2) In menu Tabs, click on a Debug button for particular tab
  59  *
  60  * This  will open an about:devtools-toolbox url, from which you can
  61  * take type and id query parameters and reuse them for the chrome url
  62  * of the netmonitor
  63  *
  64  * chrome://devtools/content/netmonitor/index.html?type=tab&id=1234 URLs
  65  * where 1234 is the tab id, you can retrieve from about:debugging#tabs links.
  66  * Simply copy the id from about:devtools-toolbox?type=tab&id=1234 URLs.
  67  */
  68
  69 // URL constructor doesn't support chrome: scheme
  70 const href = window.location.href.replace(/chrome:/, "http://");
  71 const url = new window.URL(href);
  72
  73 // If query parameters are given in a chrome tab, the inspector
  74 // is running in standalone.
  75 if (window.location.protocol === "chrome:" && url.search.length > 1) {
  76   const {
  77     commandsFromURL,
  78   } = require("resource://devtools/client/framework/commands-from-url.js");
  79
  80   (async function () {
  81     try {
  82       const commands = await commandsFromURL(url);
  83       const target = await commands.descriptorFront.getTarget();
  84       // Create a fake toolbox object
  85       const toolbox = {
  86         target,
  87         viewSourceInDebugger() {
  88           throw new Error(
  89             "toolbox.viewSourceInDebugger is not implement from a tab"
  90           );
  91         },
  92         commands,
  93       };
  94
  95       const {
  96         NetMonitorAPI,
  97       } = require("resource://devtools/client/netmonitor/src/api.js");
  98       const api = new NetMonitorAPI();
  99       await api.connect(toolbox);
 100       const app = window.initialize(api);
 101       app.bootstrap({
 102         toolbox,
 103         document: window.document,
 104       });
 105     } catch (err) {
 106       window.alert("Unable to start the network monitor:" + err);
 107     }
 108   })();
 109 }