Dashboard Inspect traffic tab + devtools (#170)

* Explicitly link version changelog in TOC

* Separate out app header body builder

* Ensure unsubscribe when disabling inspection.  Fixes #164

* Avoid creation of new manager per dashboard instance.

* Add UI header for all plugins (tabs)

* Ensure app body for all plugin skeleton

* Move app-header and app-body within core for consistent dashboard look and feel

* Consistent UI header body for plugins

* autopep8

* make devtools

* convert to es6

* Add inspect_traffic plugin devtools app

* trigger re-build, github UI is stuck

* Dynamically load devtools within inspect traffic view

* Just copy devtools into public/dashboard folder

* Works but not how we wanted, devtools takes over entire body and doesnt contain itself within a div

Makefile

@@ -13,7 +13,7 @@ CA_KEY_FILE_PATH := ca-key.pem
 CA_CERT_FILE_PATH := ca-cert.pem
 CA_SIGNING_KEY_FILE_PATH := ca-signing-key.pem
 
-.PHONY: all https-certificates ca-certificates autopep8
+.PHONY: all https-certificates ca-certificates autopep8 devtools
 .PHONY: lib-clean lib-test lib-package lib-release-test lib-release lib-coverage lib-lint lib-profile
 .PHONY: container container-run container-release
 .PHONY: dashboard dashboard-clean dashboard-package
@@ -21,6 +21,9 @@ CA_SIGNING_KEY_FILE_PATH := ca-signing-key.pem
 
 all: lib-clean lib-test
 
+devtools:
+	pushd dashboard && npm run devtools && popd
+
 autopep8:
 	autopep8 --recursive --in-place --aggressive proxy/*.py
 	autopep8 --recursive --in-place --aggressive proxy/*/*.py

dashboard/package.json

@@ -10,7 +10,9 @@
     "test": "jasmine tsbuild/test/test.js",
     "build": "npm test && rollup -c",
     "start": "pushd ../public && http-server -g true -i false -d false -c-1 --no-dotfiles . && popd",
-    "watch": "rollup -c -w"
+    "watch": "rollup -c -w",
+    "build-devtools": "tsc --target es5 --outDir tsbuild src/core/devtools.ts",
+    "devtools": "npm run build-devtools && node tsbuild/devtools.js"
   },
   "repository": {
     "type": "git",

dashboard/rollup.config.js

@@ -1,39 +1,40 @@
-const typescript = require('rollup-plugin-typescript');
-const copy = require('rollup-plugin-copy');
-const obfuscatorPlugin = require('rollup-plugin-javascript-obfuscator');
+import typescript from 'rollup-plugin-typescript';
+import copy from 'rollup-plugin-copy';
+// import obfuscatorPlugin from 'rollup-plugin-javascript-obfuscator';
 
-module.exports = {
-    input: 'src/proxy.ts',
-    output: {
-        file: '../public/dashboard/proxy.js',
-        format: 'umd',
-        name: 'projectbundle',
-        sourcemap: true
-    },
-    plugins: [
-        typescript(),
-        copy({
-            targets: [{
-                src: 'static/**/*',
-                dest: '../public/dashboard',
-            }, {
-                src: 'src/proxy.html',
-                dest: '../public/dashboard',
-            }, {
-                src: 'src/proxy.css',
-                dest: '../public/dashboard',
-            }],
-        }),
-        obfuscatorPlugin({
-            log: false,
-            sourceMap: true,
-            compact: true,
-            stringArray: true,
-            rotateStringArray: true,
-            transformObjectKeys: true,
-            stringArrayThreshold: 1,
-            stringArrayEncoding: 'rc4',
-            identifierNamesGenerator: 'mangled',
-        })
-    ]
+export const input = 'src/proxy.ts';
+export const output = {
+    file: '../public/dashboard/proxy.js',
+    format: 'umd',
+    name: 'projectbundle',
+    sourcemap: true
 };
+export const plugins = [
+    typescript(),
+    copy({
+        targets: [{
+            src: 'static/**/*',
+            dest: '../public/dashboard',
+        }, {
+            src: 'src/proxy.html',
+            dest: '../public/dashboard',
+        }, {
+            src: 'src/proxy.css',
+            dest: '../public/dashboard',
+        }, {
+            src: 'src/core/plugins/inspect_traffic.json',
+            dest: '../public/dashboard'
+        }],
+    }),
+    /* obfuscatorPlugin({
+        log: false,
+        sourceMap: true,
+        compact: true,
+        stringArray: true,
+        rotateStringArray: true,
+        transformObjectKeys: true,
+        stringArrayThreshold: 1,
+        stringArrayEncoding: 'rc4',
+        identifierNamesGenerator: 'mangled',
+    }) */
+];

dashboard/src/core/devtools.ts

@@ -7,32 +7,30 @@
     :copyright: (c) 2013-present by Abhinav Singh and contributors.
     :license: BSD, see LICENSE for more details.
 */
-const path = require('path')
-const fs = require('fs')
+import path = require('path')
+import fs = require('fs')
 const ncp = require('ncp').ncp
+
 ncp.limit = 16
 
-const publicFolderPath = path.join(__dirname, 'public')
-const destinationFolderPath = path.join(publicFolderPath, 'devtools')
+function setUpDevTools () {
+  const destinationFolderPath = path.join(path.dirname(path.dirname(__dirname)), 'public', 'dashboard')
 
-const publicFolderExists = fs.existsSync(publicFolderPath)
-if (!publicFolderExists) {
-  console.error(publicFolderPath + ' folder doesn\'t exist, make sure you are in the right directory.')
-  process.exit(1)
-}
-
-const destinationFolderExists = fs.existsSync(destinationFolderPath)
-if (!destinationFolderExists) {
-  console.error(destinationFolderPath + ' folder doesn\'t exist, make sure you are in the right directory.')
-  process.exit(1)
-}
-
-const chromeDevTools = path.dirname(require.resolve('chrome-devtools-frontend/front_end/inspector.html'))
-
-console.log(chromeDevTools + ' ---> ' + destinationFolderPath)
-ncp(chromeDevTools, destinationFolderPath, (err: any) => {
-  if (err) {
-    return console.error(err)
+  const destinationFolderExists = fs.existsSync(destinationFolderPath)
+  if (!destinationFolderExists) {
+    console.error(destinationFolderPath + ' folder doesn\'t exist, make sure you are in the right directory.')
+    process.exit(1)
   }
-  console.log('Copy successful!!!')
-})
+
+  const chromeDevTools = path.dirname(require.resolve('chrome-devtools-frontend/front_end/inspector.html'))
+
+  console.log(chromeDevTools + ' ---> ' + destinationFolderPath)
+  ncp(chromeDevTools, destinationFolderPath, (err: any) => {
+    if (err) {
+      return console.error(err)
+    }
+    console.log('Copy successful!!!')
+  })
+}
+
+setUpDevTools()

dashboard/src/core/plugins/home.ts

@@ -10,7 +10,7 @@
 import { DashboardPlugin } from '../plugin'
 
 export class HomePlugin extends DashboardPlugin {
-  public name: string = 'home'
+  public name: string = 'home';
   public title: string = 'Home'
 
   public initializeTab () : JQuery<HTMLElement> {

dashboard/src/core/plugins/inspect_traffic.json

@@ -0,0 +1,13 @@
+{
+    "modules" : [
+      { "name": "inspector_main", "type": "autostart" },
+      { "name": "emulation" },
+      { "name": "mobile_throttling" },
+      { "name": "cookie_table" },
+      { "name": "har_importer" },
+      { "name": "network" }
+    ],
+    "extends": "shell",
+    "has_html": true
+  }
+  

dashboard/src/core/plugins/inspect_traffic.ts

@@ -9,6 +9,8 @@
 */
 import { DashboardPlugin } from '../plugin'
 
+declare const Root: any
+
 export class InspectTrafficPlugin extends DashboardPlugin {
   public name: string = 'inspect_traffic'
   public title: string = 'Inspect Traffic'
@@ -23,10 +25,18 @@ export class InspectTrafficPlugin extends DashboardPlugin {
 
   public initializeBody (): JQuery<HTMLElement> {
     return $('<div></div>')
+      .attr('id', '-blink-dev-tools')
+      .addClass('undocked')
+      .add(
+        $('<script></script>')
+          .attr('type', 'module')
+          .attr('src', 'root.js')
+      )
   }
 
   public activated (): void {
     this.websocketApi.enableInspection(this.handleEvents.bind(this))
+    Root.Runtime.startApplication('inspect_traffic')
   }
 
   public deactivated (): void {

dashboard/src/proxy.html

@@ -10,6 +10,7 @@
 <html lang="en">
 <head>
     <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
+    <meta name="referrer" content="no-referrer">
     <link rel="stylesheet" href="proxy.css">
     <link rel="stylesheet" href="bootstrap-4.3.1.min.css">
     <link rel="stylesheet" href="font-awesome-4.7.0.min.css">
@@ -47,7 +48,7 @@
         </a>
     </div>
 </nav>
-<script src="jquery-3.3.1.slim.min.js"></script>
+<script src="jquery-3.4.1.min.js"></script>
 <script src="popper-1.14.7.min.js"></script>
 <script src="bootstrap-4.3.1.min.js"></script>
 <script src="js.cookie-v3.0.0-beta.0.min.js"></script>