Bug 1428777 - Rename index files; r=gasolin
authorJan Odvarko <odvarko@gmail.com>
Wed, 10 Jan 2018 17:16:37 +0100
changeset 450346 606f0a73700999d1eab9124a2b9d9f6cb8eeefa1
parent 450345 c50305b32c5e7f68d39fc29b8f871677f5ca18ff
child 450347 59a75c1808ec67d20fd1eade0d3b4fc0e930454f
push id8527
push userCallek@gmail.com
push dateThu, 11 Jan 2018 21:05:50 +0000
treeherdermozilla-beta@95342d212a7a [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersgasolin
bugs1428777
milestone59.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1428777 - Rename index files; r=gasolin MozReview-Commit-ID: EI18B77FKJL
devtools/client/jar.mn
devtools/client/netmonitor/README.md
devtools/client/netmonitor/index.html
devtools/client/netmonitor/index.js
devtools/client/netmonitor/initializer.js
devtools/client/netmonitor/launchpad.js
devtools/client/netmonitor/webpack.config.js
--- a/devtools/client/jar.mn
+++ b/devtools/client/jar.mn
@@ -323,8 +323,9 @@ devtools.jar:
     content/netmonitor/src/assets/styles/NetworkDetailsPanel.css (netmonitor/src/assets/styles/NetworkDetailsPanel.css)
     content/netmonitor/src/assets/styles/RequestList.css (netmonitor/src/assets/styles/RequestList.css)
     content/netmonitor/src/assets/styles/StatisticsPanel.css (netmonitor/src/assets/styles/StatisticsPanel.css)
     content/netmonitor/src/assets/styles/StatusBar.css (netmonitor/src/assets/styles/StatusBar.css)
     content/netmonitor/src/assets/styles/Toolbar.css (netmonitor/src/assets/styles/Toolbar.css)
     content/netmonitor/src/assets/styles/variables.css (netmonitor/src/assets/styles/variables.css)
     content/netmonitor/src/assets/icons/play.svg (netmonitor/src/assets/icons/play.svg)
     content/netmonitor/index.html (netmonitor/index.html)
+    content/netmonitor/initializer.js (netmonitor/initializer.js)
--- a/devtools/client/netmonitor/README.md
+++ b/devtools/client/netmonitor/README.md
@@ -90,17 +90,17 @@ Files used to run the Network Monitor in
 * `src/connector/` wrap function call for Browser specific API. Current support Firefox and Chrome(experimental).
 
 ### Run in the browser tab (experimental)
 
 Files used to run the Network Monitor in the browser tab
 
 * `bin/` files to launch test server.
 * `configs/` dev configs.
-* `index.js` the entry point, equivalent to `index.html`.
+* `launchpad.js` the entry point, equivalent to `index.html`.
 * `webpack.config.js` the webpack config file, including plenty of module alias map to shims and polyfills.
 * `package.json` declare every required packages and available commands.
 
 To run in the browser tab, the Network Monitor needs to get some dependencies from npm module. Check `package.json` to see all dependencies. Check `webpack.config.js` to find the module alias, and check [devtools-core](https://github.com/devtools-html/devtools-core) packages to dive into actual modules used by the Network Monitor and other Devtools.
 
 ### UI
 
 The Network Monitor UI is built using [React](http://searchfox.org/mozilla-central/source/devtools/docs/frontend/react.md) components (in `src/components/`).
--- a/devtools/client/netmonitor/index.html
+++ b/devtools/client/netmonitor/index.html
@@ -4,149 +4,11 @@
 <!DOCTYPE html>
 <html dir="">
   <head>
     <link rel="stylesheet" href="chrome://devtools/content/netmonitor/src/assets/styles/netmonitor.css"/>
     <script src="chrome://devtools/content/shared/theme-switching.js"></script>
   </head>
   <body class="theme-body" role="application">
     <div id="mount"></div>
-    <script>
-      "use strict";
-
-      const { BrowserLoader } = Components.utils.import(
-        "resource://devtools/client/shared/browser-loader.js", {});
-      const require = window.windowRequire = BrowserLoader({
-        baseURI: "resource://devtools/client/netmonitor/",
-        window,
-      }).require;
-
-      const EventEmitter = require("devtools/shared/old-event-emitter");
-      const { createFactory } = require("devtools/client/shared/vendor/react");
-      const { render, unmountComponentAtNode } = require("devtools/client/shared/vendor/react-dom");
-      const Provider = createFactory(require("devtools/client/shared/vendor/react-redux").Provider);
-      const { bindActionCreators } = require("devtools/client/shared/vendor/redux");
-      const { Connector } = require("./src/connector/index");
-      const { configureStore } = require("./src/utils/create-store");
-      const App = createFactory(require("./src/components/App"));
-      const { getDisplayedRequestById } = require("./src/selectors/index");
-      const { EVENTS } = require("./src/constants");
-
-      // Inject EventEmitter into global window.
-      EventEmitter.decorate(window);
-
-      // Configure store/state object.
-      let connector = new Connector();
-      const store = configureStore(connector);
-      const actions = bindActionCreators(require("./src/actions/index"), store.dispatch);
-
-      // Inject to global window for testing
-      window.store = store;
-      window.connector = connector;
-
-      window.Netmonitor = {
-        bootstrap({ toolbox, panel }) {
-          this.mount = document.querySelector("#mount");
-
-          const connection = {
-            tabConnection: {
-              tabTarget: toolbox.target,
-            },
-            toolbox,
-            panel,
-          };
-
-          const openLink = (link) => {
-            let parentDoc = toolbox.doc;
-            let iframe = parentDoc.getElementById("toolbox-panel-iframe-netmonitor");
-            let top = iframe.ownerDocument.defaultView.top;
-            top.openUILinkIn(link, "tab");
-          };
-
-          // Render the root Application component.
-          const sourceMapService = toolbox.sourceMapURLService;
-          const app = App({ connector, openLink, sourceMapService });
-          render(Provider({ store }, app), this.mount);
-
-          // Connect to the Firefox backend by default.
-          return connector.connectFirefox(connection, actions, store.getState);
-        },
-
-        destroy() {
-          unmountComponentAtNode(this.mount);
-          return connector.disconnect();
-        },
-
-        /**
-         * Selects the specified request in the waterfall and opens the details view.
-         * This is a firefox toolbox specific API, which providing an ability to inspect
-         * a network request directly from other internal toolbox panel.
-         *
-         * @param {string} requestId The actor ID of the request to inspect.
-         * @return {object} A promise resolved once the task finishes.
-         */
-        inspectRequest(requestId) {
-          // Look for the request in the existing ones or wait for it to appear, if
-          // the network monitor is still loading.
-          return new Promise((resolve) => {
-            let request = null;
-            let inspector = () => {
-              request = getDisplayedRequestById(store.getState(), requestId);
-              if (!request) {
-                // Reset filters so that the request is visible.
-                actions.toggleRequestFilterType("all");
-                request = getDisplayedRequestById(store.getState(), requestId);
-              }
-
-              // If the request was found, select it. Otherwise this function will be
-              // called again once new requests arrive.
-              if (request) {
-                window.off(EVENTS.REQUEST_ADDED, inspector);
-                actions.selectRequest(request.id);
-                resolve();
-              }
-            };
-
-            inspector();
-
-            if (!request) {
-              window.on(EVENTS.REQUEST_ADDED, inspector);
-            }
-          });
-        }
-      };
-
-      // Implement support for:
-      // 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
-      let href = window.location.href.replace(/chrome:/, "http://");
-      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");
-
-        (async function () {
-          let target = await targetFromURL(url);
-          // Start the network event listening as it is done in the toolbox code
-          await target.activeConsole.startListeners([
-            "NetworkActivity",
-          ]);
-          // Create a fake toolbox object
-          let toolbox = {
-            target,
-            viewSourceInDebugger() {
-              throw new Error("toolbox.viewSourceInDebugger is not implement from a tab");
-            }
-          };
-          window.Netmonitor.bootstrap({ toolbox });
-        })().catch(e => {
-          window.alert("Unable to start the network monitor:" +
-            e.message + "\n" + e.stack);
-        });
-      }
-    </script>
+    <script src="initializer.js"></script>
   </body>
 </html>
new file mode 100644
--- /dev/null
+++ b/devtools/client/netmonitor/initializer.js
@@ -0,0 +1,155 @@
+/* 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/. */
+
+"use strict";
+
+/**
+ * This script is the entry point of Network monitor panel.
+ * See README.md for more information.
+ */
+const { BrowserLoader } = Components.utils.import(
+  "resource://devtools/client/shared/browser-loader.js", {});
+
+const require = window.windowRequire = BrowserLoader({
+  baseURI: "resource://devtools/client/netmonitor/",
+  window,
+}).require;
+
+const EventEmitter = require("devtools/shared/old-event-emitter");
+const { createFactory } = require("devtools/client/shared/vendor/react");
+const { render, unmountComponentAtNode } = require("devtools/client/shared/vendor/react-dom");
+const Provider = createFactory(require("devtools/client/shared/vendor/react-redux").Provider);
+const { bindActionCreators } = require("devtools/client/shared/vendor/redux");
+const { Connector } = require("./src/connector/index");
+const { configureStore } = require("./src/utils/create-store");
+const App = createFactory(require("./src/components/App"));
+const { getDisplayedRequestById } = require("./src/selectors/index");
+const { EVENTS } = require("./src/constants");
+
+// Inject EventEmitter into global window.
+EventEmitter.decorate(window);
+
+// Configure store/state object.
+let connector = new Connector();
+const store = configureStore(connector);
+const actions = bindActionCreators(require("./src/actions/index"), store.dispatch);
+
+// Inject to global window for testing
+window.store = store;
+window.connector = connector;
+
+/**
+ * Global Netmonitor object in this panel. This object can be consumed
+ * by other panels (e.g. Console is using inspectRequest), by the
+ * Launchpad (bootstrap), etc.
+ */
+window.Netmonitor = {
+  bootstrap({ toolbox, panel }) {
+    this.mount = document.querySelector("#mount");
+
+    const connection = {
+      tabConnection: {
+        tabTarget: toolbox.target,
+      },
+      toolbox,
+      panel,
+    };
+
+    const openLink = (link) => {
+      let parentDoc = toolbox.doc;
+      let iframe = parentDoc.getElementById("toolbox-panel-iframe-netmonitor");
+      let top = iframe.ownerDocument.defaultView.top;
+      top.openUILinkIn(link, "tab");
+    };
+
+    // Render the root Application component.
+    const sourceMapService = toolbox.sourceMapURLService;
+    const app = App({ connector, openLink, sourceMapService });
+    render(Provider({ store }, app), this.mount);
+
+    // Connect to the Firefox backend by default.
+    return connector.connectFirefox(connection, actions, store.getState);
+  },
+
+  destroy() {
+    unmountComponentAtNode(this.mount);
+    return connector.disconnect();
+  },
+
+  /**
+   * Selects the specified request in the waterfall and opens the details view.
+   * This is a firefox toolbox specific API, which providing an ability to inspect
+   * a network request directly from other internal toolbox panel.
+   *
+   * @param {string} requestId The actor ID of the request to inspect.
+   * @return {object} A promise resolved once the task finishes.
+   */
+  inspectRequest(requestId) {
+    // Look for the request in the existing ones or wait for it to appear, if
+    // the network monitor is still loading.
+    return new Promise((resolve) => {
+      let request = null;
+      let inspector = () => {
+        request = getDisplayedRequestById(store.getState(), requestId);
+        if (!request) {
+          // Reset filters so that the request is visible.
+          actions.toggleRequestFilterType("all");
+          request = getDisplayedRequestById(store.getState(), requestId);
+        }
+
+        // If the request was found, select it. Otherwise this function will be
+        // called again once new requests arrive.
+        if (request) {
+          window.off(EVENTS.REQUEST_ADDED, inspector);
+          actions.selectRequest(request.id);
+          resolve();
+        }
+      };
+
+      inspector();
+
+      if (!request) {
+        window.on(EVENTS.REQUEST_ADDED, inspector);
+      }
+    });
+  }
+};
+
+// Implement support for:
+// 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
+let href = window.location.href.replace(/chrome:/, "http://");
+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");
+
+  (async function () {
+    try {
+      let target = await targetFromURL(url);
+
+      // Start the network event listening as it is done in the toolbox code
+      await target.activeConsole.startListeners([
+        "NetworkActivity",
+      ]);
+
+      // Create a fake toolbox object
+      let toolbox = {
+        target,
+        viewSourceInDebugger() {
+          throw new Error("toolbox.viewSourceInDebugger is not implement from a tab");
+        }
+      };
+
+      window.Netmonitor.bootstrap({ toolbox });
+    } catch (err) {
+      window.alert("Unable to start the network monitor:" + err);
+    }
+  })();
+}
rename from devtools/client/netmonitor/index.js
rename to devtools/client/netmonitor/launchpad.js
--- a/devtools/client/netmonitor/webpack.config.js
+++ b/devtools/client/netmonitor/webpack.config.js
@@ -9,17 +9,17 @@
 
 const path = require("path");
 const { NormalModuleReplacementPlugin } = require("webpack");
 const { toolboxConfig } = require("./node_modules/devtools-launchpad/index");
 const { getConfig } = require("./bin/configure");
 
 let webpackConfig = {
   entry: {
-    netmonitor: [path.join(__dirname, "index.js")]
+    netmonitor: [path.join(__dirname, "launchpad.js")]
   },
 
   module: {
     rules: [
       {
         test: /\.(png|svg)$/,
         loader: "file-loader?name=[path][name].[ext]",
       },