refactor: use release version of devtools

gulpfile.js

@@ -2,11 +2,19 @@ const { src, dest } = require('gulp');
 const clean = require('gulp-clean');
 const map = require('licia/map');
 const startWith = require('licia/startWith');
+const xml2js = require('xml2js');
+const fs = require('licia/fs');
 
-exports.copy = function () {
+exports['copy:dev'] = function () {
   return src(transSrc(['**/*.{js,html,json,svg,png}', '!legacy_test_runner/**/*'])).pipe(dest('public/front_end'));
 };
 
+exports['copy:release'] = async function () {
+  return src(transSrc(await readReleaseFiles()), {
+    base: 'devtools/devtools-frontend/out/Default/gen/front_end/',
+  }).pipe(dest('public/front_end'));
+};
+
 exports.clean = function () {
   return src('public', { read: false, allowEmpty: true }).pipe(clean());
 };
@@ -21,3 +29,12 @@ function transSrc(paths) {
     return prefix + val;
   });
 }
+
+async function readReleaseFiles() {
+  const xml = await fs.readFile(transSrc(['devtools_resources.grd'])[0], 'utf8');
+  const result = await xml2js.parseStringPromise(xml);
+  const includes = result.grit.release[0].includes[0].include;
+  return map(includes, function (include) {
+    return include.$.file.replace('.compressed', '');
+  }).slice(1);
+}

package.json

@@ -17,14 +17,14 @@
     "format": "npm run format:server && lsla prettier 'src/**/*.ts' '*.{js,json}' 'bin/*.js' 'test/*.{html,json,js,css}' --write",
     "format:server": "lsla prettier 'server/**/*.js' --write",
     "build": "gulp clean && webpack --mode=production && npm run build:front_end",
-    "build:front_end": "cd devtools/devtools-frontend && gn gen out/Default --args='is_debug=false' && autoninja -C out/Default && gulp copy",
+    "build:front_end": "cd devtools/devtools-frontend && gn gen out/Default --args=\"is_debug=false\" && autoninja -C out/Default && gulp copy:release",
     "dev": "webpack --mode=development -w",
-    "dev:front_end": "cd devtools/devtools-frontend && gn gen out/Default --args='is_debug=true' && autoninja -C out/Default && gulp copy",
+    "dev:front_end": "cd devtools/devtools-frontend && gn gen out/Default --args=\"is_debug=true\" && autoninja -C out/Default && gulp copy:dev",
     "lint": "npm run lint:server && npm run lint:target",
     "lint:server": "eslint \"server/**/*.js\" \"bin/*.js\"",
     "lint:target": "eslint \"src/**/*.ts\"",
     "init:front_end": "cd devtools && rm -rf devtools-frontend && gclient sync --with_branch_heads --verbose && cd ../ && python3 script/apply_all_patches.py patches/config.json",
-    "es5": "es-check es5 public/target.js"
+    "es5": "es-check es5 public/target.js test/demo.js"
   },
   "repository": {
     "type": "git",
@@ -54,7 +54,8 @@
     "ts-loader": "^9.3.1",
     "typescript": "^3.8.3",
     "webpack": "^5.73.0",
-    "webpack-cli": "^4.10.0"
+    "webpack-cli": "^4.10.0",
+    "xml2js": "^0.4.23"
   },
   "dependencies": {
     "commander": "^5.0.0",

patches/devtools-frontend/chii_app.patch

@@ -29,7 +29,7 @@ index 00cf41d5785622de8f3e94f1ded4086e3b6bfcdf..855599eb6bfddb691f354aae58b5f36c
    "front_end/entrypoints/js_app/js_app.js",
    "front_end/entrypoints/ndb_app/ndb_app.js",
 diff --git a/config/gni/devtools_grd_files.gni b/config/gni/devtools_grd_files.gni
-index a0a80afb7c46836442dc5d7cb21b928aa9b66949..0904e4227c5f0786a7db225b438e2b9966843c03 100644
+index a0a80afb7c46836442dc5d7cb21b928aa9b66949..06740c240d29f44a690716547f7d8b8120c170fa 100644
 --- a/config/gni/devtools_grd_files.gni
 +++ b/config/gni/devtools_grd_files.gni
 @@ -162,6 +162,7 @@ grd_files_release_sources = [
@@ -40,15 +40,24 @@ index a0a80afb7c46836442dc5d7cb21b928aa9b66949..0904e4227c5f0786a7db225b438e2b99
    "front_end/devtools_compatibility.js",
    "front_end/emulated_devices/optimized/MotoG4-landscape.avif",
    "front_end/emulated_devices/optimized/MotoG4-portrait.avif",
-@@ -206,6 +207,8 @@ grd_files_release_sources = [
+@@ -206,6 +207,9 @@ grd_files_release_sources = [
    "front_end/entrypoints/device_mode_emulation_frame/device_mode_emulation_frame.js",
    "front_end/entrypoints/devtools_app/devtools_app-meta-files.js",
    "front_end/entrypoints/devtools_app/devtools_app.js",
 +  "front_end/entrypoints/chii_app/chii_app-meta-files.js",
 +  "front_end/entrypoints/chii_app/chii_app.js",
++  "front_end/entrypoints/chii_app/main.js",
    "front_end/entrypoints/formatter_worker/FormatterActions.js",
    "front_end/entrypoints/formatter_worker/formatter_worker-entrypoint.js",
    "front_end/entrypoints/formatter_worker/formatter_worker.js",
+@@ -625,6 +629,7 @@ grd_files_debug_sources = [
+   "front_end/core/sdk/TracingManager.js",
+   "front_end/core/sdk/TracingModel.js",
+   "front_end/core/sdk/WebAuthnModel.js",
++  "front_end/entrypoints/chii_app/global.js",
+   "front_end/entrypoints/formatter_worker/AcornTokenizer.js",
+   "front_end/entrypoints/formatter_worker/CSSFormatter.js",
+   "front_end/entrypoints/formatter_worker/CSSRuleParser.js",
 diff --git a/front_end/BUILD.gn b/front_end/BUILD.gn
 index 49cac86317ec6c86a9c88e149c7f15d1321fcfe5..0efc2604b9c0606cedf6a0644b8abca19e570a52 100644
 --- a/front_end/BUILD.gn
@@ -71,10 +80,10 @@ index 49cac86317ec6c86a9c88e149c7f15d1321fcfe5..0efc2604b9c0606cedf6a0644b8abca1
      "ndb_app",
 diff --git a/front_end/entrypoints/chii_app/BUILD.gn b/front_end/entrypoints/chii_app/BUILD.gn
 new file mode 100644
-index 0000000000000000000000000000000000000000..f9dc7c1f84e345aaa66d895330d3710f6b5d9d2a
+index 0000000000000000000000000000000000000000..bd9a8693fe2cf7276c8d4b1157f598b7b0ebc328
 --- /dev/null
 +++ b/front_end/entrypoints/chii_app/BUILD.gn
-@@ -0,0 +1,69 @@
+@@ -0,0 +1,77 @@
 +# Copyright 2021 The Chromium Authors. All rights reserved.
 +# Use of this source code is governed by a BSD-style license that can be
 +# found in the LICENSE file.
@@ -129,8 +138,16 @@ index 0000000000000000000000000000000000000000..f9dc7c1f84e345aaa66d895330d3710f
 +  visibility += devtools_entrypoints_visibility
 +}
 +
-+devtools_module("chii_main") {
-+  sources = [ "chii_global.ts" ]
++devtools_module("main") {
++  sources = [ "global.ts" ]
++}
++
++devtools_entrypoint("chii_main") {
++  entrypoint = "main.ts"
++
++  deps = [
++    ":main"
++  ]
 +}
 +
 +ts_library("chii_app") {
@@ -191,14 +208,14 @@ index 0000000000000000000000000000000000000000..053d2a435656b42b961017e5184dc4af
 +import '../../panels/layer_viewer/layer_viewer-meta.js';
 diff --git a/front_end/entrypoints/chii_app/chii_app.js b/front_end/entrypoints/chii_app/chii_app.js
 new file mode 100644
-index 0000000000000000000000000000000000000000..c673328d0c5d737f40a6e3e241ea7a205d5c28fc
+index 0000000000000000000000000000000000000000..f6cb60a65e962db584f2a0974669bdce868a9780
 --- /dev/null
 +++ b/front_end/entrypoints/chii_app/chii_app.js
 @@ -0,0 +1,12 @@
 +// Copyright 2018 The Chromium Authors. All rights reserved.
 +// Use of this source code is governed by a BSD-style license that can be
 +// found in the LICENSE file.
-+import './chii_global.js';
++import './main.js';
 +import './chii_app-meta-files.js';
 +
 +import * as Main from '../main/main.js';
@@ -217,13 +234,21 @@ index 0000000000000000000000000000000000000000..58cfd4fb2212dfc8618d8a72ee3649d1
 +  "modules" : [
 +  ]
 +}
-diff --git a/front_end/entrypoints/chii_app/chii_global.ts b/front_end/entrypoints/chii_app/chii_global.ts
+diff --git a/front_end/entrypoints/chii_app/global.ts b/front_end/entrypoints/chii_app/global.ts
 new file mode 100644
 index 0000000000000000000000000000000000000000..a690a79c55ef7eb25b440440c98e8032d49ec483
 --- /dev/null
-+++ b/front_end/entrypoints/chii_app/chii_global.ts
++++ b/front_end/entrypoints/chii_app/global.ts
 @@ -0,0 +1 @@
 +(globalThis as any).chii = true;
+diff --git a/front_end/entrypoints/chii_app/main.ts b/front_end/entrypoints/chii_app/main.ts
+new file mode 100644
+index 0000000000000000000000000000000000000000..bda50237bdd42c260793d72f8464dfc0f0f6c12e
+--- /dev/null
++++ b/front_end/entrypoints/chii_app/main.ts
+@@ -0,0 +1 @@
++import './global.js';
+\ No newline at end of file
 diff --git a/front_end/entrypoints/inspector_main/BUILD.gn b/front_end/entrypoints/inspector_main/BUILD.gn
 index bcfd805139b43ead7f70fef9a002dbbaf8b046ab..b45549de3f1e13dd4ee60b431e740cf83071f38a 100644
 --- a/front_end/entrypoints/inspector_main/BUILD.gn

test/demo.js

@@ -159,8 +159,8 @@ function logXhr(xhr) {
 }
 
 function injectTarget() {
-  const script = document.createElement('script');
-  script.src = `//${location.host}${location.pathname.replace('test/demo.html', '')}target.js`;
+  var script = document.createElement('script');
+  script.src = '//' + location.host + location.pathname.replace('test/demo.html', '') + 'target.js';
   if (location.href.indexOf('embedded=true') > -1) {
     script.setAttribute('embedded', 'true');
   }

webpack.config.js

@@ -2,6 +2,7 @@ const path = require('path');
 
 module.exports = (env, argv) => {
   const config = {
+    target: ['web', 'es5'],
     entry: {
       index: './src/index.ts',
       target: './src/target.ts',