Add network tab

Author: khanghoang

front_end/ndb.json

@@ -1,15 +1,21 @@
 {
-  "modules" : [
-     { "name": "ndb_sdk", "type": "autostart" },
-     { "name": "ndb", "type": "autostart" },
-     { "name": "layer_viewer" },
-     { "name": "timeline_model" },
-     { "name": "timeline" },
-     { "name": "product_registry" },
-     { "name": "mobile_throttling" },
-     { "name": "ndb_ui" },
-     { "name": "xterm" }
- ],
+  "modules": [
+    { "name": "ndb_sdk", "type": "autostart" },
+    { "name": "ndb", "type": "autostart" },
+    { "name": "layer_viewer" },
+    { "name": "timeline_model" },
+    { "name": "timeline" },
+    { "name": "product_registry" },
+    { "name": "mobile_throttling" },
+    { "name": "ndb_ui" },
+    { "name": "xterm" },
+    { "name": "emulation", "type": "autostart" },
+    { "name": "inspector_main", "type": "autostart" },
+    { "name": "mobile_throttling", "type": "autostart" },
+    { "name": "cookie_table" },
+    { "name": "har_importer" },
+    { "name": "network" }
+  ],
   "extends": "shell",
   "has_html": true
 }

front_end/ndb/NdbMain.js

@@ -5,14 +5,20 @@
  */
 
 Ndb.nodeExecPath = function() {
-  if (!Ndb._nodeExecPathPromise)
-    Ndb._nodeExecPathPromise = Ndb.backend.which('node').then(result => result.resolvedPath);
+  if (!Ndb._nodeExecPathPromise) {
+    Ndb._nodeExecPathPromise = Ndb.backend
+        .which('node')
+        .then(result => result.resolvedPath);
+  }
   return Ndb._nodeExecPathPromise;
 };
 
 Ndb.npmExecPath = function() {
-  if (!Ndb._npmExecPathPromise)
-    Ndb._npmExecPathPromise = Ndb.backend.which('npm').then(result => result.resolvedPath);
+  if (!Ndb._npmExecPathPromise) {
+    Ndb._npmExecPathPromise = Ndb.backend
+        .which('npm')
+        .then(result => result.resolvedPath);
+  }
   return Ndb._npmExecPathPromise;
 };
 
@@ -27,39 +33,60 @@ Ndb.processInfo = function() {
  */
 Ndb.NdbMain = class extends Common.Object {
   /**
-   * @override
-   */
+     * @override
+     */
   async run() {
     InspectorFrontendAPI.setUseSoftMenu(true);
     document.title = 'ndb';
-    Common.moduleSetting('blackboxInternalScripts').addChangeListener(Ndb.NdbMain._calculateBlackboxState);
+    Common.moduleSetting('blackboxInternalScripts').addChangeListener(
+        Ndb.NdbMain._calculateBlackboxState
+    );
     Ndb.NdbMain._calculateBlackboxState();
 
     const setting = Persistence.isolatedFileSystemManager.workspaceFolderExcludePatternSetting();
     setting.set(Ndb.NdbMain._defaultExcludePattern().join('|'));
-    Ndb.nodeProcessManager = await Ndb.NodeProcessManager.create(SDK.targetManager);
+    Ndb.nodeProcessManager = await Ndb.NodeProcessManager.create(
+        SDK.targetManager
+    );
 
-    const {cwd} = await Ndb.processInfo();
+    const { cwd } = await Ndb.processInfo();
     await Ndb.nodeProcessManager.addFileSystem(cwd);
 
     // TODO(ak239): we do not want to create this model for workers, so we need a way to add custom capabilities.
-    SDK.SDKModel.register(NdbSdk.NodeWorkerModel, SDK.Target.Capability.JS, true);
-    SDK.SDKModel.register(NdbSdk.NodeRuntimeModel, SDK.Target.Capability.JS, true);
+    SDK.SDKModel.register(
+        NdbSdk.NodeWorkerModel,
+        SDK.Target.Capability.JS,
+        true
+    );
+    SDK.SDKModel.register(
+        NdbSdk.NodeRuntimeModel,
+        SDK.Target.Capability.JS,
+        true
+    );
 
     await new Promise(resolve => SDK.initMainConnection(resolve));
-    SDK.targetManager.createTarget('<root>', ls`Root`, SDK.Target.Type.Browser, null);
+    SDK.targetManager.createTarget(
+        '<root>',
+        ls`Root`,
+        SDK.Target.Type.Browser,
+        null
+    );
+
     if (Common.moduleSetting('autoStartMain').get()) {
       const main = await Ndb.mainConfiguration();
       if (main) {
-        if (main.prof)
-          await Ndb.nodeProcessManager.profile(main.execPath, main.args);
-        else
-          Ndb.nodeProcessManager.debug(main.execPath, main.args);
+        if (main.prof) {
+          await Ndb.nodeProcessManager.profile(
+              main.execPath,
+              main.args
+          );
+        } else {Ndb.nodeProcessManager.debug(main.execPath, main.args);}
       }
     }
     Ndb.nodeProcessManager.startRepl();
   }
 
+
   static _defaultExcludePattern() {
     const defaultCommonExcludedFolders = [
       '/bower_components/', '/\\.devtools', '/\\.git/', '/\\.sass-cache/', '/\\.hg/', '/\\.idea/',
@@ -125,7 +152,6 @@ Ndb.mainConfiguration = async() => {
     prof
   };
 };
-
 /**
  * @implements {UI.ContextMenu.Provider}
  * @unrestricted
@@ -172,9 +198,21 @@ Ndb.NodeProcessManager = class extends Common.Object {
   static async create(targetManager) {
     const manager = new Ndb.NodeProcessManager(targetManager);
     manager._service = await Ndb.backend.createService('ndd_service.js', rpc.handle(manager));
+    InspectorFrontendHost.sendMessageToBackend = manager.sendMessageToBackend.bind(manager);
+
     return manager;
   }
 
+  /**
+   * @param {object} message
+   *
+   * @return {Promise} void
+   */
+  async sendMessageToBackend(message) {
+    if (this._service && this._service.sendMessage)
+      return this._service.sendMessage(message);
+  }
+
   env() {
     return this._service.env();
   }
@@ -246,6 +284,30 @@ Ndb.NodeProcessManager = class extends Common.Object {
     }
   }
 
+  sendLoadingFinished({ type, payload }) {
+    SDK._mainConnection._onMessage(JSON.stringify({
+      method: 'Network.loadingFinished',
+      params: payload
+    }));
+  }
+
+  responseToFrontEnd(id, result) {
+    InspectorFrontendHost.events.dispatchEventToListeners(
+        InspectorFrontendHostAPI.Events.DispatchMessage,
+        {
+          id,
+          result
+        }
+    );
+  }
+
+  sendNetworkData({ type, payload }) {
+    SDK._mainConnection._onMessage(JSON.stringify({
+      method: type,
+      params: payload
+    }));
+  }
+
   async terminalData(stream, data) {
     const content = await(await fetch(`data:application/octet-stream;base64,${data}`)).text();
     if (content.startsWith('Debugger listening on') || content.startsWith('Debugger attached.') || content.startsWith('Waiting for the debugger to disconnect...'))

front_end/ndb/module.json

@@ -52,7 +52,14 @@
             "className": "Ndb.ContextMenuProvider"
         }
     ],
-    "dependencies": ["common", "sdk", "ndb_sdk", "bindings", "persistence", "components"],
+    "dependencies": [
+        "common",
+        "sdk",
+        "ndb_sdk",
+        "bindings",
+        "persistence",
+        "components"
+    ],
     "scripts": [
         "InspectorFrontendHostOverrides.js",
         "Connection.js",

services/ndd_service.js

@@ -23,6 +23,8 @@ function silentRpcErrors(error) {
 process.on('uncaughtException', silentRpcErrors);
 process.on('unhandledRejection', silentRpcErrors);
 
+const catchedRequests = {};
+
 const DebugState = {
   WS_OPEN: 1,
   WS_ERROR: 2,
@@ -134,24 +136,41 @@ class NddService {
   }
 
   env() {
+    const pathToHttpPatch = path.resolve(__dirname, '..', './lib/preload/ndb/httpMonkeyPatching.js');
+
     return {
-      NODE_OPTIONS: `--require ndb/preload.js`,
+      NODE_OPTIONS: `--require ndb/preload.js --require ${pathToHttpPatch}`,
+      // NODE_OPTIONS: `--require ndb/preload.js`,
       NODE_PATH: `${process.env.NODE_PATH || ''}${path.delimiter}${path.join(__dirname, '..', 'lib', 'preload')}`,
       NDD_IPC: this._pipe
     };
   }
 
+  sendMessage(rawMessage) {
+    const message = JSON.parse(rawMessage);
+    // send message to frontend directly
+    // (eg: getResponseBody)
+    const { base64Encoded, data } = catchedRequests[message.params.requestId];
+    this._frontend.responseToFrontEnd(message.id, { base64Encoded, body: data });
+  }
+
   async debug(execPath, args, options) {
     const env = this.env();
     if (options.data)
       env.NDD_DATA = options.data;
+
     const p = spawn(execPath, args, {
       cwd: options.cwd,
       env: { ...process.env, ...env },
-      stdio: options.ignoreOutput ? 'ignore' : ['inherit', 'pipe', 'pipe'],
+      stdio: options.ignoreOutput ? ['ignore', 'ignore', 'ignore', 'ipc'] : ['pipe', 'pipe', 'pipe', 'ipc'],
       windowsHide: true
     });
     if (!options.ignoreOutput) {
+      p.on('message', ({ type, payload }) => {
+        if (!(type && payload)) return;
+        catchedRequests[payload.id] = payload;
+        this._frontend.sendNetworkData({ type, payload });
+      });
       p.stderr.on('data', data => {
         if (process.connected)
           this._frontend.terminalData('stderr', data.toString('base64'));