summaryrefslogtreecommitdiffstats
path: root/devtools/client/netmonitor/initializer.js
blob: 24afadf434b2e044cb40a58565d0a1900d461d48 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
/* exported initialize */

"use strict";

/**
 * This script is the entry point of Network monitor panel.
 * See README.md for more information.
 */
const { BrowserLoader } = ChromeUtils.importESModule(
  "resource://devtools/shared/loader/browser-loader.sys.mjs"
);

const require = (window.windowRequire = BrowserLoader({
  baseURI: "resource://devtools/client/netmonitor/",
  window,
}).require);

const {
  NetMonitorAPI,
} = require("resource://devtools/client/netmonitor/src/api.js");
const {
  NetMonitorApp,
} = require("resource://devtools/client/netmonitor/src/app.js");
const EventEmitter = require("resource://devtools/shared/event-emitter.js");

// Inject EventEmitter into global window.
EventEmitter.decorate(window);

/**
 * This is the initialization point for the Network monitor.
 *
 * @param {Object} api Allows reusing existing API object.
 */
function initialize(api) {
  const app = new NetMonitorApp(api);

  // Inject to global window for testing
  window.Netmonitor = app;
  window.api = api;
  window.store = app.api.store;
  window.connector = app.api.connector;
  window.actions = app.api.actions;

  return app;
}

/**
 * The following code is used to open Network monitor in a tab.
 * Like the Launchpad, but without Launchpad.
 *
 * For example:
 * chrome://devtools/content/netmonitor/index.html?type=process
 * loads the netmonitor for the parent process, exactly like the
 * one in the browser toolbox
 *
 * It's also possible to connect to a tab.
 * 1) go in about:debugging
 * 2) In menu Tabs, click on a Debug button for particular tab
 *
 * This  will open an about:devtools-toolbox url, from which you can
 * take type and id query parameters and reuse them for the chrome url
 * of the netmonitor
 *
 * chrome://devtools/content/netmonitor/index.html?type=tab&id=1234 URLs
 * where 1234 is the tab id, you can retrieve from about:debugging#tabs links.
 * Simply copy the id from about:devtools-toolbox?type=tab&id=1234 URLs.
 */

// URL constructor doesn't support chrome: scheme
const href = window.location.href.replace(/chrome:/, "http://");
const 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 {
    commandsFromURL,
  } = require("resource://devtools/client/framework/commands-from-url.js");

  (async function () {
    try {
      const commands = await commandsFromURL(url);
      const target = await commands.descriptorFront.getTarget();
      // Create a fake toolbox object
      const toolbox = {
        target,
        viewSourceInDebugger() {
          throw new Error(
            "toolbox.viewSourceInDebugger is not implement from a tab"
          );
        },
        commands,
      };

      const api = new NetMonitorAPI();
      await api.connect(toolbox);
      const app = window.initialize(api);
      app.bootstrap({
        toolbox,
        document: window.document,
      });
    } catch (err) {
      window.alert("Unable to start the network monitor:" + err);
    }
  })();
}