# Publish Angular DevTools

Publishing Angular DevTools is achieved through the following steps:

## 0. Check if there's anything to release

On the `main` branch, run:

```shell
git checkout main
git pull upstream main
git log "HEAD...$(git log HEAD~1 --grep="release:.*Angular DevTools" --format=format:%H | head -n 1)~1" --format=format:%s |
    grep -E "(fix|feat|perf)\(devtools\):|release:.*Angular DevTools" -i --color=never
```

If this displays any commits since the most recent release commit, then there's something to publish.
If it only shows the most recent release commit, then the DevTools release can be skipped.

## 1. Update extension version numbers

Bump the version numbers listed in
[`manifest.chrome.json`](/devtools/projects/shell-browser/src/manifest/manifest.chrome.json)
and [`manifest.firefox.json`](/devtools/projects/shell-browser/src/manifest/manifest.firefox.json).

While technically optional, it's recommended to clean up potential artifacts from previous releases:

```shell
rm -f ~/devtools-chrome.zip ~/devtools-firefox.zip ~/angular-source.zip
git branch -D devtools-release
```

## 2. Commit and merge

Commit the version bump:

```shell
git checkout -b devtools-release
git add . && git commit -m "release: bump Angular DevTools version to ${VERSION}"
git push -u origin devtools-release
# Alternatively, if there might be a pre-existing branch from a previous release:
git push -u origin devtools-release --force-with-lease
```

Then create and merge a PR targeting `minor` with this change. Merging this PR does not
have any automation associated with it and can be merged at any time.

## 3. Sync to merged commit

Once the PR is merged, pull and check out that specific commit hash on `main` and install
dependencies as they might have changed since your last install.

```shell
git fetch upstream main
git checkout "${MERGED_RELEASE_COMMIT}"

nvm install
pnpm --immutable
```

Note that while the steps below can technically be done without merging the release PR
or checking out the merged commit, doing so is useful for release stability (actually
releasing what the commit history says we are) and is _necessary_ for accurate changelog
generation.

## 4. Publish to Chrome Chrome

First, make sure you have access to publish the extension by ensuring you are part of
[the relevant Google Group](http://g/angular-chrome-web-store-publisher).

Next, build and package the extension:

```shell
# Build the Chrome version.
pnpm devtools:build:chrome:release

# Package the extension.
(cd dist/bin/devtools/projects/shell-browser/src/prodapp && zip -r ~/devtools-chrome.zip *)
```

Then, go to the
[Angular DevTools Chrome Web Store page](https://chrome.google.com/webstore/devconsole/19161719-4eee-48dc-959e-8d18cea83699/ienfalfjdbdpebioblfackkekamfmbnh/edit/package)
and upload `~/devtools-chrome.zip`.

You can choose to either publish immediately or only get approval but hold to publish at a later time.
Note that even publishing immediately still requires approval from Chrome Web Store before it is
available to users. Historically this has been pretty quick (< 30 minutes), but there is no hard upper
limit on how long a review might take: https://developer.chrome.com/docs/webstore/review-process#review-time.

## 5. Publish to Firefox

To publish Angular DevTools as a Firefox Add-on, first build and package the extension:

```shell
# Build the Firefox version.
pnpm devtools:build:firefox:release

# Package the extension.
(cd dist/bin/devtools/projects/shell-browser/src/prodapp && zip -r ~/devtools-firefox.zip *)
```

Then, go to the
[Angular DevTools Firefox Addons page](https://addons.mozilla.org/en-US/developers/addon/angular-devtools/edit)
and log in using the email and password [from Valentine](http://valentine/#/show/1651707871496288).
This will require a two-factor code, which you can generate by installing
[Google Authenticator](https://play.google.com/store/apps/details?id=com.google.android.apps.authenticator2)
and scanning the QR code linked [from Valentine](http://valentine/#/show/1651792043556329).

Upload `~/devtools-firefox.zip` as a new version. The Firefox publishing process is slightly more
involved than Chrome.

### Source Code

Mozilla requires extension source code with instructions to build and run it. Since DevTools
exists in a monorepo with critical build tooling existing outside the `devtools/` directory, we
need to upload the entire monorepo. Package it without dependencies and generated files with the
following command and upload it.

```shell
git archive HEAD -o ~/angular-source.zip
```

### Changelog

Mozilla asks for a changelog, which needs to be authored manually. You can generate the changelog
with the following command:

```shell
git log "HEAD~1...$(git log HEAD~1 --grep="release:.*Angular DevTools" --format=format:%H | head -n 1)" --format=format:%s |
    grep -E "(fix|feat|perf)\(devtools\):|release:.*Angular DevTools" -i --color=never |
    sed "s,^,* ,g" |
    sed -E "s,\(#([0-9]+)\),([#\1](https://github.com/angular/angular/pull/\1/)),g"
```

### Reviewer Note

There is a field to provide a note to the reviewer, copy this template and make sure to replace
`${RELEASE_COMMIT}` with the SHA of the release commit to create a valid link.

> This is a monorepo and includes much more code than just the DevTools extension. The relevant
> code is under \`devtools/...\` and \`devtools/README.md\` contains instructions for compiling
> release builds locally.
>
> The uploaded source is equivalent to
> https://github.com/angular/angular/tree/${RELEASE_COMMIT}/.

Similar to Chrome, we need to wait for approval from Mozilla before the extension is released.
There's no hard upper-bound on this, but historically it typically takes at least a week.

Once the new DevTools version is in-review for both Chrome and Firefox, the release process is
complete.