Bug 1352699 - Make netmonitor run on devtools-launchpad r=Honza

MozReview-Commit-ID: 4khCXm2lfzG

--HG--
extra : rebase_source : d50dd14c0532df7b0cb30c432af3de1dd55953a1

devtools/client/netmonitor/bin/dev-server.js

@@ -6,11 +6,8 @@
 
 "use strict";
 
-const path = require("path");
-
 const toolbox = require("devtools-launchpad/index");
 const feature = require("devtools-config");
-const express = require("express");
 const { getConfig } = require("./configure");
 
 const envConfig = getConfig();
@@ -19,13 +16,4 @@ feature.setConfig(envConfig);
 
 let webpackConfig = require("../webpack.config");
 
-let { app } = toolbox.startDevServer(envConfig, webpackConfig, __dirname);
-
-app.use(
-  "/integration/examples",
-  express.static("src/test/mochitest/examples")
-);
-
-app.get("/integration", function (req, res) {
-  res.sendFile(path.join(__dirname, "../src/test/integration/index.html"));
-});
+toolbox.startDevServer(envConfig, webpackConfig, __dirname);

devtools/client/netmonitor/index.html

@@ -37,8 +37,8 @@
           const App = createFactory(require("./src/components/app"));
           render(Provider({ store }, App()), this.mount);
           return NetMonitorController.startupNetMonitor({
-            client: {
-              getTabTarget: () => toolbox.target,
+            tabConnection: {
+              tabTarget: toolbox.target,
             },
             toolbox,
           });

devtools/client/netmonitor/index.js

@@ -11,7 +11,7 @@
  */
 const React = require("react");
 const ReactDOM = require("react-dom");
-const { bootstrap } = require("devtools-launchpad");
+const { bootstrap, renderRoot } = require("devtools-launchpad");
 const { EventEmitter } = require("devtools-modules");
 const { Services: { appinfo, pref }} = require("devtools-modules");
 const { configureStore } = require("./src/utils/create-store");
@@ -40,7 +40,21 @@ const App = require("./src/components/app");
 const store = window.gStore = configureStore();
 const { NetMonitorController } = require("./src/netmonitor-controller");
 
+/**
+ * Stylesheet links in devtools xhtml files are using chrome or resource URLs.
+ * Rewrite the href attribute to remove the protocol. web-server.js contains redirects
+ * to map CSS urls to the proper file. Supports urls using:
+ *   - devtools/client/
+ *   - devtools/content/
+ *   - skin/
+ * Will also add mandatory classnames and attributes to be compatible with devtools theme
+ * stylesheet.
+ */
 window.addEventListener("DOMContentLoaded", () => {
+  for (let link of document.head.querySelectorAll("link")) {
+    link.href = link.href.replace(/(resource|chrome)\:\/\//, "/");
+  }
+
   if (appinfo.OS === "Darwin") {
     document.documentElement.setAttribute("platform", "mac");
   } else if (appinfo.OS === "Linux") {
@@ -50,9 +64,10 @@ window.addEventListener("DOMContentLoaded", () => {
   }
 });
 
-bootstrap(React, ReactDOM, App, null, store).then(connection => {
-  if (!connection || !connection.tab) {
+bootstrap(React, ReactDOM).then(connection => {
+  if (!connection) {
     return;
   }
+  renderRoot(React, ReactDOM, App, store);
   NetMonitorController.startupNetMonitor(connection);
 });

devtools/client/netmonitor/package.json

@@ -7,7 +7,8 @@
   "description": "Network monitor in developer tools",
   "dependencies": {
     "codemirror": "^5.24.2",
-    "devtools-launchpad": "^0.0.59",
+    "devtools-config": "^0.0.12",
+    "devtools-launchpad": "^0.0.65",
     "devtools-modules": "^0.0.18",
     "devtools-reps": "^0.4.0",
     "devtools-splitter": "^0.0.2",
@@ -18,7 +19,8 @@
     "react-dom": "=15.3.2",
     "react-redux": "=5.0.3",
     "redux": "^3.6.0",
-    "reselect": "^2.5.4"
+    "reselect": "^2.5.4",
+    "webpack": "^2.3.2"
   },
   "devDependencies": {
     "babel-preset-es2015": "^6.6.0",

devtools/client/netmonitor/src/assets/styles/netmonitor.css

@@ -49,10 +49,11 @@
 
 html,
 body,
-.root,
 #mount,
+.launchpad-root,
 .network-monitor,
 .monitor-panel {
+  flex: initial;
   display: flex;
   flex-direction: column;
   height: 100%;

devtools/client/netmonitor/src/components/editor.js

@@ -2,8 +2,6 @@
  * 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/. */
 
-/* eslint-disable react/prop-types */
-
 "use strict";
 
 const {
@@ -103,5 +101,3 @@ const Editor = createClass({
 });
 
 module.exports = Editor;
-
-/* eslint-enable react/prop-types */

devtools/client/netmonitor/src/components/tabbox-panel.js

@@ -83,7 +83,7 @@ function TabboxPanel({
       },
         TimingsPanel({ request }),
       ),
-      request.cause.stacktrace && request.cause.stacktrace.length > 0 &&
+      request.cause && request.cause.stacktrace && request.cause.stacktrace.length > 0 &&
       TabPanel({
         id: "stack-trace",
         title: STACK_TRACE_TITLE,

devtools/client/netmonitor/src/har/test/browser_net_har_throttle_upload.js

@@ -16,8 +16,10 @@ function* throttleUploadTest(actuallyThrottle) {
 
   info("Starting test... (actuallyThrottle = " + actuallyThrottle + ")");
 
-  let { gStore, windowRequire, NetMonitorController } = monitor.panelWin;
+  let { gStore, windowRequire } = monitor.panelWin;
   let Actions = windowRequire("devtools/client/netmonitor/src/actions/index");
+  let { NetMonitorController } =
+    windowRequire("devtools/client/netmonitor/src/netmonitor-controller");
   let RequestListContextMenu = windowRequire(
     "devtools/client/netmonitor/src/request-list-context-menu");
 

devtools/client/netmonitor/src/middleware/moz.build

@@ -5,4 +5,5 @@
 DevToolsModules(
     'batching.js',
     'prefs.js',
+    'thunk.js',
 )

devtools/client/netmonitor/src/middleware/prefs.js

@@ -21,7 +21,6 @@ const { getRequestFilterTypes } = require("../selectors/index");
 function prefsMiddleware(store) {
   return next => action => {
     const res = next(action);
-
     switch (action.type) {
       case ENABLE_REQUEST_FILTER_TYPE_ONLY:
       case TOGGLE_REQUEST_FILTER_TYPE:

devtools/client/netmonitor/src/middleware/thunk.js

@@ -0,0 +1,20 @@
+/* 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";
+
+/**
+ * A middleware that allows thunks (functions) to be dispatched.
+ * If it's a thunk, it is called with `dispatch` and `getState`,
+ * allowing the action to create multiple actions (most likely
+ * asynchronously).
+ */
+function thunk({ dispatch, getState }) {
+  return next => action => {
+    return (typeof action === "function")
+      ? action(dispatch, getState)
+      : next(action);
+  };
+}
+
+module.exports = thunk;

devtools/client/netmonitor/src/netmonitor-controller.js

@@ -85,7 +85,7 @@ var NetMonitorController = {
       // Some actors like AddonActor or RootActor for chrome debugging
       // aren't actual tabs.
       this.toolbox = connection.toolbox;
-      this._target = connection.client.getTabTarget();
+      this._target = connection.tabConnection.tabTarget;
       this.tabClient = this._target.isTabActor ? this._target.activeTab : null;
 
       let connectTimeline = () => {
@@ -235,12 +235,12 @@ var NetMonitorController = {
    * @return object
    *         A promise resolved once the task finishes.
    */
-  inspectRequest: function (requestId) {
+  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 = function () {
+      let inspector = () => {
         request = getDisplayedRequestById(window.gStore.getState(), requestId);
         if (!request) {
           // Reset filters so that the request is visible.

devtools/client/netmonitor/src/utils/create-store.js

@@ -8,6 +8,7 @@ const Services = require("Services");
 const { createStore, applyMiddleware } = require("devtools/client/shared/vendor/redux");
 const batching = require("../middleware/batching");
 const prefs = require("../middleware/prefs");
+const thunk = require("../middleware/thunk");
 const rootReducer = require("../reducers/index");
 const { FilterTypes, Filters } = require("../reducers/filters");
 const { Requests } = require("../reducers/requests");
@@ -22,7 +23,8 @@ function configureStore() {
     activeFilters[filter] = true;
   });
 
-  let inactiveColumns = Prefs.hiddenColumns.reduce((acc, col) => {
+  let hiddenColumns = Services.prefs.getCharPref("devtools.netmonitor.hiddenColumns");
+  let inactiveColumns = JSON.parse(hiddenColumns).reduce((acc, col) => {
     acc[col] = false;
     return acc;
   }, {});
@@ -39,7 +41,7 @@ function configureStore() {
     }),
   };
 
-  return createStore(rootReducer, initialState, applyMiddleware(prefs, batching));
+  return createStore(rootReducer, initialState, applyMiddleware(thunk, prefs, batching));
 }
 
 exports.configureStore = configureStore;

devtools/client/netmonitor/webpack.config.js

@@ -50,12 +50,12 @@ let webpackConfig = {
     alias: {
       "react": path.join(__dirname, "node_modules/react"),
       "devtools/client/framework/devtools": "devtools-modules",
-      "devtools/client/framework/menu": "devtools-modules",
-      "devtools/client/framework/menu-item": "devtools-modules",
+      "devtools/client/framework/menu": "devtools-modules/client/framework/menu",
+      "devtools/client/framework/menu-item": "devtools-modules/client/framework/menu-item",
       "devtools/client/locales": path.join(__dirname, "../locales/en-US"),
       "devtools/client/shared/components/reps/reps": "devtools-reps",
       "devtools/client/shared/components/search-box": "devtools-modules/client/shared/components/search-box",
-      "devtools/client/shared/components/splitter/split-box": "devtools-modules/client/shared/components/splitter/SplitBox",
+      "devtools/client/shared/components/splitter/split-box": "devtools-splitter",
       "devtools/client/shared/components/stack-trace": "devtools-modules/client/shared/components/stack-trace",
       "devtools/client/shared/components/tabs/tabbar": "devtools-modules/client/shared/components/tabs/tabbar",
       "devtools/client/shared/components/tabs/tabs": "devtools-modules/client/shared/components/tabs/tabs",
@@ -64,7 +64,6 @@ let webpackConfig = {
       "devtools/client/shared/curl": "devtools-modules",
       "devtools/client/shared/file-saver": "devtools-modules",
       "devtools/client/shared/prefs": "devtools-modules",
-      "devtools/client/shared/redux/middleware/thunk": "devtools-launchpad/src/utils/redux/middleware/thunk",
       "devtools/client/shared/vendor/immutable": "immutable",
       "devtools/client/shared/vendor/react": "react",
       "devtools/client/shared/vendor/react-dom": "react-dom",
@@ -73,11 +72,11 @@ let webpackConfig = {
       "devtools/client/shared/vendor/reselect": "reselect",
       "devtools/client/shared/vendor/jszip": "jszip",
       "devtools/client/shared/widgets/tooltip/HTMLTooltip": "devtools-modules",
-      "devtools/client/shared/widgets/tooltip/ImageTooltipHelper": "devtools-modules",
+      "devtools/client/shared/widgets/tooltip/ImageTooltipHelper": "devtools-modules/client/shared/widgets/tooltip/ImageTooltipHelper",
       "devtools/client/shared/widgets/Chart": "devtools-modules",
       "devtools/client/sourceeditor/editor": "devtools-modules",
       "devtools/shared/fronts/timeline": "devtools-modules",
-      "devtools/shared/l10n": "devtools-modules",
+      "devtools/shared/l10n": "devtools-modules/shared/l10n",
       "devtools/shared/locales": path.join(__dirname, "../../shared/locales/en-US"),
       "devtools/shared/platform/clipboard": "devtools-modules",
       "devtools/shared/plural-form": "devtools-modules",

devtools/client/themes/dark-theme.css

@@ -5,8 +5,8 @@
 
 @import url(resource://devtools/client/themes/variables.css);
 @import url(resource://devtools/client/themes/common.css);
-@import url(toolbars.css);
-@import url(tooltips.css);
+@import url(chrome://devtools/skin/toolbars.css);
+@import url(chrome://devtools/skin/tooltips.css);
 
 body {
   margin: 0;

devtools/client/themes/firebug-theme.css

@@ -5,7 +5,7 @@
 
 @import url(resource://devtools/client/themes/variables.css);
 @import url(resource://devtools/client/themes/common.css);
-@import url(light-theme.css);
+@import url(chrome://devtools/skin/light-theme.css);
 
 :root {
   font-size: 11px;

devtools/client/themes/light-theme.css

@@ -5,8 +5,8 @@
 
 @import url(resource://devtools/client/themes/variables.css);
 @import url(resource://devtools/client/themes/common.css);
-@import url(toolbars.css);
-@import url(tooltips.css);
+@import url(chrome://devtools/skin/toolbars.css);
+@import url(chrome://devtools/skin/tooltips.css);
 
 body {
   margin: 0;

devtools/client/webconsole/test/browser_webconsole_netlogging_panel.js

@@ -25,6 +25,8 @@ add_task(function* () {
 
   let { gStore, windowRequire } = panel.panelWin;
   let Actions = windowRequire("devtools/client/netmonitor/src/actions/index");
+  let { NetMonitorController } =
+    windowRequire("devtools/client/netmonitor/src/netmonitor-controller");
   let { getSelectedRequest } = windowRequire("devtools/client/netmonitor/src/selectors/index");
 
   let selected = getSelectedRequest(gStore.getState());

devtools/client/webconsole/webconsole.js

@@ -1937,7 +1937,9 @@ WebConsoleFrame.prototype = {
       return;
     }
     return toolbox.selectTool("netmonitor").then(panel => {
-      return panel.panelWin.NetMonitorController.inspectRequest(requestId);
+      let { NetMonitorController } = panel.panelWin
+        .windowRequire("devtools/client/netmonitor/src/netmonitor-controller");
+      return NetMonitorController.inspectRequest(requestId);
     });
   },