Update builder logic for the Dart Debug Extension (#1717)

Author: elliette

dwds/debug_extension/.gitignore

@@ -1 +1,4 @@
 build/
+prod_build/
+dev_build/
+extension_key.txt

dwds/debug_extension/CONTRIBUTING.md

@@ -1,47 +1,39 @@
 ## Building
 
-- With dart2js:
+> Note: First make the script executable: `chmod +x tool/build_extension.sh`
+
+### With DDC (for development):
 
 ```
-dart run build_runner build web -o build -r
+./tool/build_extension.sh
 ```
 
-This will build to the `/web` directory.
+- The DDC-compiled extension will be located in the `/dev_build/web` directory.
 
-- With DDC:
+### With dart2js (for release):
 
 ```
-dart run build_runner build web -o build
+./tool/build_extension.sh prod
 ```
 
-This will build to the `/build/web` directory.
+- The dart2js-compiled extension will be located in the `/prod_build` directory.
 
 ## Local Development
 
-### Update `manifest.json`:
-
-- Change the `default_icon` in `manifest.json` to `dart_dev.png` (Note: this is
-  not strictly necessary, but will help you to distinguish your local version of
-  the extension from the published version)
-- \[For Googlers\] The developer key is needed for local development and
-  testing. Add one of the whitelisted keys to `web/manifest.json`. IMPORTANT: DO
-  NOT COMMIT THE KEY.
+### \[For Googlers\] Create an `extension_key.txt` file:
 
-```
-{
-    "name": "Dart Debug Extension",
-    "key": "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
-    ...
-}
-```
+- Create a `extension_key.txt` file at the root of `/debug_extension`. Paste in
+  the value of one of the whitelisted developer keys into this txt file.
+  IMPORTANT: DO NOT COMMIT THE KEY. It will be copied into the `manifest.json`
+  when you build the extension.
 
 ### Build and upload your local extension
 
 - Build the extension following the instructions above
 - Visit chrome://extensions
 - Toggle "Developer mode" on
 - Click the "Load unpacked" button
-- Select the extension directory: `/dwds/debug_extension/web`
+- Select the extension directory: `dev_build/web`
 
 ### Debug your local extension
 
@@ -58,14 +50,18 @@ This will build to the `/build/web` directory.
 
 1. Update the version in `web/manifest.json`, `pubspec.yaml`, and in the
    `CHANGELOG`.
-1. Build dart2js: `pub run build_runner build web -o build -r`
+1. Follow the instructions above to build the dart2js-compiled release version
+   of the extension.
 
-> *At this point, you should manually verify that everything is working by
-> following the steps in [Local Development](#local-development).*
+> \*At this point, you should manually verify that everything is working by
+> following the steps in [Local Development](#local-development), except load
+> the extension from the `prod_build` directory. You will need to add an
+> extension key to the `manifest.json` file in `prod_build` to test locally.
 
-3. Open a PR to submit the version and build changes.
+3. Open a PR to submit the version change.
 1. Once submitted, pull the changes down to your local branch, and create a zip
-   of the `debug_extension/web` directory (NOT `debug_extension/build/web`).
+   of the `prod_build` directory (NOT `dev_build/web`). **Remove the Googler
+   extension key that was added by the builder to the `manifest.json` file.**
 1. Rename the zip `version_XX.XX.XX.zip` (eg, `version_1.24.0.zip`) and add it
    to the go/dart-debug-extension-zips folder
 

dwds/debug_extension/build.yaml

@@ -7,7 +7,7 @@ targets:
             - -O4 
             - --csp
         generate_for:
-          - web/background.dart
+          - web/**.dart
       extension|client_js_copy_builder:
         enabled: true
 
@@ -17,7 +17,15 @@ builders:
     builder_factories:
         - copyBuilder
     build_extensions:
-      web/background.dart.js:
-        - web/background.js
+      {
+        "web/{{}}.dart.js": ["prod_build/{{}}.js"],
+        "web/{{}}.png": ["prod_build/{{}}.png"],
+        "web/{{}}.html": ["prod_build/{{}}.html"],
+        "web/{{}}.css": ["prod_build/{{}}.css"],
+        "web/manifest.json": ["prod_build/manifest.json"],
+        "web/panel.js": ["prod_build/panel.js"],
+        "web/detector.js": ["prod_build/detector.js"],
+        "web/devtools.js": ["prod_build/devtools.js"],
+      }
     auto_apply: none
     build_to: source

dwds/debug_extension/tool/build_extension.sh

@@ -0,0 +1,38 @@
+#!/bin/bash
+
+# Copyright 2022 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.
+
+# INSTRUCTIONS:
+
+# Building DDC-compiled app (for development work):
+# ./tool/build_extension.sh
+
+# Building dart2js-compiled app (for release):
+# ./tool/build_extension.sh prod
+
+prod="false"
+
+case "$1" in
+    prod)
+        prod="true"
+        shift;;
+esac
+
+if [ $prod == true ]; then
+    echo "~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~"
+    echo "Building dart2js-compiled extension to /prod_build directory."
+    echo "~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~"
+    dart run build_runner build web --delete-conflicting-outputs --output build --release
+    exit 1
+fi
+
+echo "~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~"
+echo "Building DDC-compiled extension to dev_build/web directory."
+echo "~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~"
+dart run build_runner build web --delete-conflicting-outputs --output dev_build
+echo "~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~"
+ "Updating the manifest.json file in dev_build/web directory."
+echo "~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~"
+dart tool/update_dev_manifest.dart

dwds/debug_extension/tool/copy_builder.dart

@@ -7,25 +7,39 @@ import 'package:build/build.dart';
 /// Factory for the build script.
 Builder copyBuilder(_) => _CopyBuilder();
 
-/// Copies the [_backgroundJsId] file to [_backgroundJsCopyId].
 class _CopyBuilder extends Builder {
   @override
   Map<String, List<String>> get buildExtensions => {
-        _backgroundJsId.path: [_backgroundJsCopyId.path]
+        "web/{{}}.dart.js": ["prod_build/{{}}.js"],
+        "web/{{}}.png": ["prod_build/{{}}.png"],
+        "web/{{}}.html": ["prod_build/{{}}.html"],
+        "web/{{}}.css": ["prod_build/{{}}.css"],
+        "web/manifest.json": ["prod_build/manifest.json"],
+        "web/panel.js": ["prod_build/panel.js"],
+        "web/detector.js": ["prod_build/detector.js"],
+        "web/devtools.js": ["prod_build/devtools.js"],
       };
 
   @override
-  void build(BuildStep buildStep) {
-    if (buildStep.inputId == _backgroundJsId) {
-      buildStep.writeAsString(
-          _backgroundJsCopyId, buildStep.readAsString(_backgroundJsId));
+  void build(BuildStep buildStep) async {
+    final inputAsset = buildStep.inputId;
+    final allowedOutputs = buildStep.allowedOutputs;
+
+    if (allowedOutputs.length != 1) {
       return;
-    } else {
-      throw StateError(
-          'Unexpected input for `CopyBuilder` expected only $_backgroundJsId');
     }
+
+    final outputAsset = allowedOutputs.first;
+    await _copyBinaryFile(buildStep,
+        inputAsset: inputAsset, outputAsset: outputAsset);
   }
-}
 
-final _backgroundJsId = AssetId('extension', 'web/background.dart.js');
-final _backgroundJsCopyId = AssetId('extension', 'web/background.js');
+  Future<void> _copyBinaryFile(
+    BuildStep buildStep, {
+    required AssetId inputAsset,
+    required AssetId outputAsset,
+  }) {
+    return buildStep.writeAsBytes(
+        outputAsset, buildStep.readAsBytes(inputAsset));
+  }
+}

dwds/debug_extension/tool/update_dev_manifest.dart

@@ -0,0 +1,50 @@
+// Copyright (c) 2022, the Dart project authors.  Please see the AUTHORS file
+// for details. All rights reserved. Use of this source code is governed by a
+// BSD-style license that can be found in the LICENSE file.
+
+import 'dart:io';
+
+/// Adds the extension key and updates the icon in the manifest.json.
+void main() async {
+  final manifestJson = File('dev_build/web/manifest.json');
+  final extensionKey = File('extension_key.txt');
+  final keyValue =
+      await extensionKey.exists() ? await extensionKey.readAsString() : null;
+  _updateManifest(manifestJson, extensionKey: keyValue);
+}
+
+Future<void> _updateManifest(File manifestJson, {String? extensionKey}) async {
+  final lines = manifestJson.readAsLinesSync();
+  final newLines = <String>[];
+  for (final line in lines) {
+    final trimmedLine = line.trimLeft();
+    if (trimmedLine.startsWith('"name":') && extensionKey != null) {
+      newLines.add(line);
+      newLines.add('${line.leftPadding()}"key": "$extensionKey",');
+    } else if (trimmedLine.startsWith('"default_icon":')) {
+      newLines.add('${line.leftPadding()}"default_icon": "dart_dev.png"');
+    } else {
+      newLines.add(line);
+    }
+  }
+  final content = newLines.joinWithNewLine();
+  return manifestJson.writeAsStringSync(content);
+}
+
+extension LeftPaddingExtension on String {
+  String leftPadding() {
+    String padding = '';
+    int idx = 0;
+    while (idx < length && this[idx] == ' ') {
+      padding += ' ';
+      idx++;
+    }
+    return padding;
+  }
+}
+
+extension JoinExtension on List<String> {
+  String joinWithNewLine() {
+    return '${join('\n')}\n';
+  }
+}