Bug 1428777 - Rename index files; r=gasolin
MozReview-Commit-ID: EI18B77FKJL
--- 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]",
},