Skip to content

Update builder logic for the Dart Debug Extension #1717

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 22 commits into from
Aug 19, 2022
Merged
Show file tree
Hide file tree
Changes from 16 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions dwds/debug_extension/.gitignore
Original file line number Diff line number Diff line change
@@ -1 +1,2 @@
build/
extension_key.txt
54 changes: 27 additions & 27 deletions dwds/debug_extension/CONTRIBUTING.md
Original file line number Diff line number Diff line change
@@ -1,47 +1,43 @@
## 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.
- This will build to the `/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.
- This will build to the `/build/web_prod` directory.

## Local Development
> Note: Building the dart2js-compiled extension will also overwrite any previous
> builds of the DDC-compiled extension in the `build/web` directory. You will
> need to run the build step for DDC again to continue development work.

### Update `manifest.json`:
## Local Development

- 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: `build/web`

### Debug your local extension

Expand All @@ -58,14 +54,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 `build/web_prod` directory. You will need to add an
> extension key to the `manifest.json` file in `build/web_prod` 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 `build/web_prod` directory (NOT `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

Expand Down
14 changes: 11 additions & 3 deletions dwds/debug_extension/build.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ targets:
- -O4
- --csp
generate_for:
- web/background.dart
- web/**.dart
extension|client_js_copy_builder:
enabled: true

Expand All @@ -17,7 +17,15 @@ builders:
builder_factories:
- copyBuilder
build_extensions:
web/background.dart.js:
- web/background.js
{
"web/{{}}.dart.js": ["build/web_prod/{{}}.js"],
"web/{{}}.png": ["build/web_prod/{{}}.png"],
"web/{{}}.html": ["build/web_prod/{{}}.html"],
"web/{{}}.css": ["build/web_prod/{{}}.css"],
"web/manifest.json": ["build/web_prod/manifest.json"],
"web/panel.js": ["build/web_prod/panel.js"],
"web/detector.js": ["build/web_prod/detector.js"],
"web/devtools.js": ["build/web_prod/devtools.js"],
}
auto_apply: none
build_to: source
41 changes: 41 additions & 0 deletions dwds/debug_extension/tool/build_extension.sh
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
#!/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

# Clean existing build directory to avoid merge conflicts.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

How often did you find this was necessary? We don't expect a clean to be necessary for every build in typical workflows.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah, solved the problem with --delete-conflicting-outputs flag. Was trying to prevent the prompt about conflicts from showing up when running the continuous integration tests

dart run build_runner clean

if [ $prod == true ]; then
echo "~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~"
echo "Building dart2js-compiled extension to build/web_prod directory."
echo "~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~"
dart run build_runner build web -o build -r
exit 1
fi

echo "~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~"
echo "Building DDC-compiled extension to build/web directory."
echo "~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~"
dart run build_runner build web -o build
echo "~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~"
echo "Updating the manifest.json file in build/web directory."
echo "~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~"
dart tool/update_dev_manifest.dart
38 changes: 26 additions & 12 deletions dwds/debug_extension/tool/copy_builder.dart
Original file line number Diff line number Diff line change
Expand Up @@ -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": ["build/web_prod/{{}}.js"],
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do I understand correctly that you are outputting into <package root>/build here, but that also you run the build with -o build?

Do you get a mix of "to source" written output, and then the merged output all in the same directory?

Would it work to change this builder to be to-cache instead of to-source, and make the directory move into a subdirectory of web/?

Suggested change
"web/{{}}.dart.js": ["build/web_prod/{{}}.js"],
"web/{{}}.dart.js": ["web/web_prod/{{}}.js"],

I think that should result in the -o build copying these files into where you expect them.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah thank you! Updated so now:

  • building with DDC builds to a dev_build directory
  • building with dart2js builds to the build directory, but then copies just the build/web directory over to prod_build

"web/{{}}.png": ["build/web_prod/{{}}.png"],
"web/{{}}.html": ["build/web_prod/{{}}.html"],
"web/{{}}.css": ["build/web_prod/{{}}.css"],
"web/manifest.json": ["build/web_prod/manifest.json"],
"web/panel.js": ["build/web_prod/panel.js"],
"web/detector.js": ["build/web_prod/detector.js"],
"web/devtools.js": ["build/web_prod/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));
}
}
50 changes: 50 additions & 0 deletions dwds/debug_extension/tool/update_dev_manifest.dart
Original file line number Diff line number Diff line change
@@ -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('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';
}
}
Loading