ember-inspector 4.13.1 → 4.15.0

package/CHANGELOG.md

@@ -1,5 +1,142 @@
 # Changelog
 
+## Release (2025-11-19)
+
+* ember-inspector 4.15.0 (minor)
+
+#### :rocket: Enhancement
+* `ember-inspector`
+  * [#2694](https://github.com/emberjs/ember-inspector/pull/2694) link to legacy inspector support docs ([@patricklx](https://github.com/patricklx))
+
+#### :bug: Bug Fix
+* `ember-inspector`
+  * [#2691](https://github.com/emberjs/ember-inspector/pull/2691) fix data tab not showing models ([@patricklx](https://github.com/patricklx))
+  * [#2703](https://github.com/emberjs/ember-inspector/pull/2703) regression: fix _backburner access ([@patricklx](https://github.com/patricklx))
+  * [#2705](https://github.com/emberjs/ember-inspector/pull/2705) fix whats new for nightly ([@patricklx](https://github.com/patricklx))
+  * [#2689](https://github.com/emberjs/ember-inspector/pull/2689) fix loading race condition ([@patricklx](https://github.com/patricklx))
+  * [#2700](https://github.com/emberjs/ember-inspector/pull/2700) add a optional chaining operator for accessing getOwner on application ([@mansona](https://github.com/mansona))
+  * [#2702](https://github.com/emberjs/ember-inspector/pull/2702) add back iframe (without src) support ([@patricklx](https://github.com/patricklx))
+  * [#2692](https://github.com/emberjs/ember-inspector/pull/2692) fix whats new ([@patricklx](https://github.com/patricklx))
+
+#### :house: Internal
+* `ember-inspector`
+  * [#2708](https://github.com/emberjs/ember-inspector/pull/2708) update release-plan workflows to new format ([@mansona](https://github.com/mansona))
+
+#### Committers: 2
+- Chris Manson ([@mansona](https://github.com/mansona))
+- Patrick Pircher ([@patricklx](https://github.com/patricklx))
+
+## Release (2025-11-05)
+
+* ember-inspector 4.14.2 (patch)
+
+#### :bug: Bug Fix
+* `ember-inspector`
+  * [#2705](https://github.com/emberjs/ember-inspector/pull/2705) fix whats new for nightly ([@patricklx](https://github.com/patricklx))
+  * [#2689](https://github.com/emberjs/ember-inspector/pull/2689) fix loading race condition ([@patricklx](https://github.com/patricklx))
+  * [#2700](https://github.com/emberjs/ember-inspector/pull/2700) add a optional chaining operator for accessing getOwner on application ([@mansona](https://github.com/mansona))
+  * [#2702](https://github.com/emberjs/ember-inspector/pull/2702) add back iframe (without src) support ([@patricklx](https://github.com/patricklx))
+  * [#2692](https://github.com/emberjs/ember-inspector/pull/2692) fix whats new ([@patricklx](https://github.com/patricklx))
+
+#### :house: Internal
+* `ember-inspector`
+  * [#2704](https://github.com/emberjs/ember-inspector/pull/2704) Prepare Release ([@github-actions[bot]](https://github.com/apps/github-actions))
+  * [#2698](https://github.com/emberjs/ember-inspector/pull/2698) Prepare Release v4.14.1 ([@github-actions[bot]](https://github.com/apps/github-actions))
+
+#### Committers: 3
+- Chris Manson ([@mansona](https://github.com/mansona))
+- Patrick Pircher ([@patricklx](https://github.com/patricklx))
+- [@github-actions[bot]](https://github.com/apps/github-actions)
+
+## Release (2025-10-28)
+
+* ember-inspector 4.14.1 (patch)
+
+#### :bug: Bug Fix
+* `ember-inspector`
+  * [#2700](https://github.com/emberjs/ember-inspector/pull/2700) add a optional chaining operator for accessing getOwner on application ([@mansona](https://github.com/mansona))
+  * [#2702](https://github.com/emberjs/ember-inspector/pull/2702) add back iframe (without src) support ([@patricklx](https://github.com/patricklx))
+  * [#2692](https://github.com/emberjs/ember-inspector/pull/2692) fix whats new ([@patricklx](https://github.com/patricklx))
+
+#### Committers: 2
+- Chris Manson ([@mansona](https://github.com/mansona))
+- Patrick Pircher ([@patricklx](https://github.com/patricklx))
+
+## Release (2025-10-02)
+
+* ember-inspector 4.14.0 (minor)
+
+#### :rocket: Enhancement
+* `ember-inspector`
+  * [#2625](https://github.com/emberjs/ember-inspector/pull/2625) Add support for Vite ([@mansona](https://github.com/mansona))
+  * [#2676](https://github.com/emberjs/ember-inspector/pull/2676) Replace Inter font with `system-ui` keyword ([@pichfl](https://github.com/pichfl))
+  * [#2680](https://github.com/emberjs/ember-inspector/pull/2680) Add owner to the list of properties of an object ([@pichfl](https://github.com/pichfl))
+  * [#2667](https://github.com/emberjs/ember-inspector/pull/2667) show parents in sidebar ([@patricklx](https://github.com/patricklx))
+  * [#2672](https://github.com/emberjs/ember-inspector/pull/2672) Convert ember-debug to ESM and simplify wrapper ([@mansona](https://github.com/mansona))
+  * [#2655](https://github.com/emberjs/ember-inspector/pull/2655) implement show parents only (focus mode) ([@patricklx](https://github.com/patricklx))
+  * [#2658](https://github.com/emberjs/ember-inspector/pull/2658) perf: do not re-render positionals ([@patricklx](https://github.com/patricklx))
+  * [#2659](https://github.com/emberjs/ember-inspector/pull/2659) support shadow dom for click to select & inspect component ([@patricklx](https://github.com/patricklx))
+
+#### :bug: Bug Fix
+* `ember-inspector`
+  * [#2678](https://github.com/emberjs/ember-inspector/pull/2678) Move Object Inspector toggle so it remains visible in edge cases ([@pichfl](https://github.com/pichfl))
+  * [#2677](https://github.com/emberjs/ember-inspector/pull/2677) Enable CORS for locally served bookmarklet ([@pichfl](https://github.com/pichfl))
+  * [#2664](https://github.com/emberjs/ember-inspector/pull/2664) fix service detection ([@patricklx](https://github.com/patricklx))
+  * [#2657](https://github.com/emberjs/ember-inspector/pull/2657) fix html element tree when not a direct child ([@patricklx](https://github.com/patricklx))
+  * [#2639](https://github.com/emberjs/ember-inspector/pull/2639) fix `whats new` not showing latest changes ([@patricklx](https://github.com/patricklx))
+  * [#2640](https://github.com/emberjs/ember-inspector/pull/2640) fix for chrome bfcache ([@patricklx](https://github.com/patricklx))
+  * [#2646](https://github.com/emberjs/ember-inspector/pull/2646) Fix ember 6 ([@mansona](https://github.com/mansona))
+  * [#2627](https://github.com/emberjs/ember-inspector/pull/2627) fix: Cannot convert a Symbol value to a string ([@lifeart](https://github.com/lifeart))
+
+#### :memo: Documentation
+* `ember-inspector`
+  * [#2626](https://github.com/emberjs/ember-inspector/pull/2626) docs: add precisions about running for development with bookmarklet ([@BlueCutOfficial](https://github.com/BlueCutOfficial))
+
+#### :house: Internal
+* `ember-inspector`
+  * [#2685](https://github.com/emberjs/ember-inspector/pull/2685) Fix release ([@mansona](https://github.com/mansona))
+  * [#2684](https://github.com/emberjs/ember-inspector/pull/2684) add client secret to the build and upload script ([@mansona](https://github.com/mansona))
+  * [#2683](https://github.com/emberjs/ember-inspector/pull/2683) Create PRIVACY.md ([@mansona](https://github.com/mansona))
+  * [#2675](https://github.com/emberjs/ember-inspector/pull/2675) Fix theme colors no rendering in tests and bookmarklet ([@pichfl](https://github.com/pichfl))
+  * [#2674](https://github.com/emberjs/ember-inspector/pull/2674) Remove the "ui" in-repo-addon ([@pichfl](https://github.com/pichfl))
+  * [#2671](https://github.com/emberjs/ember-inspector/pull/2671) use relative imports inside ember-debug ([@mansona](https://github.com/mansona))
+  * [#2670](https://github.com/emberjs/ember-inspector/pull/2670) remove overkill use of env to simplify new build process ([@mansona](https://github.com/mansona))
+  * [#2669](https://github.com/emberjs/ember-inspector/pull/2669) Achieve centralizing imports from Ember ([@BlueCutOfficial](https://github.com/BlueCutOfficial))
+  * [#2668](https://github.com/emberjs/ember-inspector/pull/2668) Cleanup import ember ([@BlueCutOfficial](https://github.com/BlueCutOfficial))
+  * [#2662](https://github.com/emberjs/ember-inspector/pull/2662) fix watch test script ([@patricklx](https://github.com/patricklx))
+  * [#2656](https://github.com/emberjs/ember-inspector/pull/2656) fix local dev ([@patricklx](https://github.com/patricklx))
+  * [#2660](https://github.com/emberjs/ember-inspector/pull/2660) Centralize interactions with ember-source: wormhole ([@BlueCutOfficial](https://github.com/BlueCutOfficial))
+  * [#2653](https://github.com/emberjs/ember-inspector/pull/2653) Refactor: Centralize calls to `emberSafeRequire` ([@BlueCutOfficial](https://github.com/BlueCutOfficial))
+  * [#2654](https://github.com/emberjs/ember-inspector/pull/2654) Remove loader ([@BlueCutOfficial](https://github.com/BlueCutOfficial))
+  * [#2645](https://github.com/emberjs/ember-inspector/pull/2645) move build of ember-debug to rollup ([@mansona](https://github.com/mansona))
+  * [#2628](https://github.com/emberjs/ember-inspector/pull/2628) require all ember modules in one place ([@mansona](https://github.com/mansona))
+  * [#2648](https://github.com/emberjs/ember-inspector/pull/2648) fix ember 3.x-lts ([@patricklx](https://github.com/patricklx))
+  * [#2652](https://github.com/emberjs/ember-inspector/pull/2652) prepare profile manager tests for ember 6 ([@patricklx](https://github.com/patricklx))
+  * [#2650](https://github.com/emberjs/ember-inspector/pull/2650) Prepare ember 6+ support/ view-debug ([@BlueCutOfficial](https://github.com/BlueCutOfficial))
+  * [#2649](https://github.com/emberjs/ember-inspector/pull/2649) update release-plan ([@mansona](https://github.com/mansona))
+  * [#2647](https://github.com/emberjs/ember-inspector/pull/2647) Remove unused file `trigger-port.js` ([@BlueCutOfficial](https://github.com/BlueCutOfficial))
+  * [#2644](https://github.com/emberjs/ember-inspector/pull/2644) add packageManager for people not using volta ([@mansona](https://github.com/mansona))
+  * [#2643](https://github.com/emberjs/ember-inspector/pull/2643) test ember 5.8 and 5.12 ([@mansona](https://github.com/mansona))
+  * [#2624](https://github.com/emberjs/ember-inspector/pull/2624) ember-cli-update to latest blueprints ([@RobbieTheWagner](https://github.com/RobbieTheWagner))
+  * [#2623](https://github.com/emberjs/ember-inspector/pull/2623) Remove gets and access props directly ([@RobbieTheWagner](https://github.com/RobbieTheWagner))
+  * [#2620](https://github.com/emberjs/ember-inspector/pull/2620) Remove pushObjects from RenderTree ([@RobbieTheWagner](https://github.com/RobbieTheWagner))
+  * [#2621](https://github.com/emberjs/ember-inspector/pull/2621) Remove unused evented from ListContent ([@RobbieTheWagner](https://github.com/RobbieTheWagner))
+  * [#2619](https://github.com/emberjs/ember-inspector/pull/2619) Remove Evented from ListContent ([@RobbieTheWagner](https://github.com/RobbieTheWagner))
+  * [#2618](https://github.com/emberjs/ember-inspector/pull/2618) Remove Evented from PromiseAssembler ([@RobbieTheWagner](https://github.com/RobbieTheWagner))
+  * [#2617](https://github.com/emberjs/ember-inspector/pull/2617) Convert adapters and port to TS, remove Evented from port ([@RobbieTheWagner](https://github.com/RobbieTheWagner))
+  * [#2601](https://github.com/emberjs/ember-inspector/pull/2601) More progress removing prototype extensions ([@RobbieTheWagner](https://github.com/RobbieTheWagner))
+  * [#2602](https://github.com/emberjs/ember-inspector/pull/2602) cleanup filterBy & mapBy prototype extensions ([@patricklx](https://github.com/patricklx))
+  * [#2600](https://github.com/emberjs/ember-inspector/pull/2600) Remove mapBy and filterBy ([@RobbieTheWagner](https://github.com/RobbieTheWagner))
+  * [#2598](https://github.com/emberjs/ember-inspector/pull/2598) Update to Ember 5.12 ([@RobbieTheWagner](https://github.com/RobbieTheWagner))
+
+#### Committers: 6
+- Alex Kanunnikov ([@lifeart](https://github.com/lifeart))
+- Chris Manson ([@mansona](https://github.com/mansona))
+- Florian Pichler ([@pichfl](https://github.com/pichfl))
+- Marine Dunstetter ([@BlueCutOfficial](https://github.com/BlueCutOfficial))
+- Patrick Pircher ([@patricklx](https://github.com/patricklx))
+- Robbie Wagner ([@RobbieTheWagner](https://github.com/RobbieTheWagner))
+
 ## Release (2024-07-30)
 
 ember-inspector 4.13.1 (patch)

package/DEVELOPMENT.md

@@ -0,0 +1,50 @@
+## Building and Testing:
+
+Run `pnpm install && pnpm add -g ember-cli` to install the required modules.
+
+- `pnpm build` to build the files in the `dist` directory
+- `pnpm watch` To watch the files and re-build in `dist` when anything changes (useful during development).
+- `pnpm test` To run the tests in the terminal
+- `pnpm start` To start the test server at `localhost:4200/testing/tests`
+
+## Deploy new version:
+
+See [RELEASE.md](./RELEASE.md)
+
+### Locking a version
+
+We can take a snapshot of the current inspector version to support a specific Ember version range. This allows us to stop supporting old Ember versions in main without breaking the published inspector for old Ember apps. It works by serving a different inspector version based on the current app's Ember version.
+
+The Ember versions supported by the current inspector are indicated in the `emberVersionsSupported` array in `package.json`.
+
+Here are the steps to lock an inspector version:
+
+- Release a new version (See "Minor and major versions") if there are unreleased commits in `main`. Skip this step if there are not new commits after the last release.
+- Makes sure you have a `config/secrets.json` file with the correct AWS credentials to push to S3. You can use `config/secrets.json.sample` as a starting point.
+- Create a new branch (from `main`) named after the Ember version range that will be supported by this branch. The min version in the range is the first element in the `emberVersionsSupported` array in `package.json`. The max version in the range is the first version that will *not* be supported. For example, a branch named `ember-0.0.0-2.7.0` means it supports Ember 0.0.0 -> 2.6.0, and a branch named `ember-2.7.0-3.4.0` means it supports Ember 2.7.0 -> Ember 3.3.2.
+- Update `package.json`'s `emberVersionsSupported`: add a second element that indicates the minimum Ember version the `main` branch *will not* support.
+- Commit the branch.
+- Run `pnpm lock-version`. This will build, and compress the panes.
+- To upload the panes to GitHub:
+  - Create a folder locally with the naming convention `panes-x-x-x`
+  - Copy the 3 zip files (chrome.zip, firefox.zip, and bookmarklet.zip) into the folder you just created.
+  - Go to https://github.com/emberjs/ember-inspector/upload/panes and drag the folder in to upload it.
+- Checkout the `main` branch.
+- Update `package.json`'s `previousEmberVersionsSupported`: add the first Ember version supported by the recently locked snapshot (the first element in the `emberVersionsSupported` array).
+- Update `package.json`'s `emberVersionsSupported`: Take the last element from `previousEmberVersionsSupported` and set it as the first element in this array. Set an empty string as the second element to indicate there's currently no maximum Ember version supported yet. `emberVersionsSupported` array length should always be `2` indicating a [min, max] range.
+- Commit.
+
+##### Example scenario
+
+Below is an example scenario that assumes the current `main` branch supports Ember version 2.7.0+ and we want to lock the version such that `main` will support 3.4.0+. It also assumes the last Ember Inspector version released was 3.9.0.
+
+- Release a new inspector version `3.10.0` if there are unreleased commits in `main`.
+- Create a new branch from `main` called `ember-2.7.0-3.4.0`.
+- Update `package.json`'s `emberVersionsSupported` from `["2.7.0", ""]` to `["2.7.0", "3.4.0"]`.
+- Commit with message "Lock Ember version at 2.7.0-3.4.0" and push the branch.
+- Run `pnpm lock-version`.
+- Checkout the `main` branch.
+- Create a new branch *from main* called `lock-3.4.0` (branch name here is not important).
+- Update `package.json`'s `previousEmberVersionsSupported` from `["0.0.0"]` to `["0.0.0", "2.7.0"]`.
+- Update `package.json`'s `emberVersionsSupported` from `["2.7.0", ""]` to `["3.4.0", ""]`.
+- Commit and open a PR against `main`.

package/PRIVACY.md

@@ -0,0 +1,3 @@
+# Privacy Policy
+
+The Ember Inspector collects no data from any of its users and has no analytics. As we don't collect any data it is impossilbe for us to store any data about our users.

package/README.md

@@ -60,66 +60,30 @@ Internet explorer will open an iframe instead of a popup due to the lack of supp
 
 For development:
 
-- run `pnpm serve:bookmarklet`
-- create a bookmark (make sure you unblock the popup when you run the bookmarklet):
+- In a terminal:
+  - run `pnpm serve:bookmarklet`
+- In your browser:
+  - If Ember Inspector is installed as an active extension, deactivate it
+  - Visit the Ember app you want to inspect
+  - Open the developer tool console and execute the following (make sure you unblock the popup when you run the bookmarklet):
 
 ```javascript
 javascript: (function() { var s = document.createElement('script'); s.src = 'http://localhost:9191/bookmarklet/load_inspector.js'; document.body.appendChild(s); }());
 ```
 
-## Building and Testing:
+Or to do this more easily in the future, create a new bookmark in your browser, and copy the above script as the URL.
 
-Run `pnpm install && pnpm add -g ember-cli` to install the required modules.
+The expected behavior is a new window opening with the URL `http://localhost:9191/bookmarklet/<pane-root>/index.html?inspectedWindowURL=<inspected-app-url>`, running your local ember-inspector. The content should be the same as the one you see when using the published extension, but not properly styled.
 
-- `pnpm build` to build the files in the `dist` directory
-- `pnpm watch` To watch the files and re-build in `dist` when anything changes (useful during development).
-- `pnpm test` To run the tests in the terminal
-- `pnpm start` To start the test server at `localhost:4200/testing/tests`
+### Vite Support
 
+If your Ember app is running on Vite, you may need [@embroider/legacy-inspector-support](https://github.com/embroider-build/embroider/tree/main/packages/legacy-inspector-support) to get things working in your app.
 
-## Deploy new version:
-
-See [RELEASE.md](./RELEASE.md)
-
-
-### Locking a version
-
-We can take a snapshot of the current inspector version to support a specific Ember version range. This allows us to stop supporting old Ember versions in main without breaking the published inspector for old Ember apps. It works by serving a different inspector version based on the current app's Ember version.
-
-The Ember versions supported by the current inspector are indicated in the `emberVersionsSupported` array in `package.json`.
-
-Here are the steps to lock an inspector version:
-
-- Release a new version (See "Minor and major versions") if there are unreleased commits in `main`. Skip this step if there are not new commits after the last release.
-- Makes sure you have a `config/secrets.json` file with the correct AWS credentials to push to S3. You can use `config/secrets.json.sample` as a starting point.
-- Create a new branch (from `main`) named after the Ember version range that will be supported by this branch. The min version in the range is the first element in the `emberVersionsSupported` array in `package.json`. The max version in the range is the first version that will *not* be supported. For example, a branch named `ember-0.0.0-2.7.0` means it supports Ember 0.0.0 -> 2.6.0, and a branch named `ember-2.7.0-3.4.0` means it supports Ember 2.7.0 -> Ember 3.3.2.
-- Update `package.json`'s `emberVersionsSupported`: add a second element that indicates the minimum Ember version the `main` branch *will not* support.
-- Commit the branch.
-- Run `pnpm lock-version`. This will build, and compress the panes.
-- To upload the panes to GitHub:
-  - Create a folder locally with the naming convention `panes-x-x-x`
-  - Copy the 3 zip files (chrome.zip, firefox.zip, and bookmarklet.zip) into the folder you just created.
-  - Go to https://github.com/emberjs/ember-inspector/upload/panes and drag the folder in to upload it.
-- Checkout the `main` branch.
-- Update `package.json`'s `previousEmberVersionsSupported`: add the first Ember version supported by the recently locked snapshot (the first element in the `emberVersionsSupported` array).
-- Update `package.json`'s `emberVersionsSupported`: Take the last element from `previousEmberVersionsSupported` and set it as the first element in this array. Set an empty string as the second element to indicate there's currently no maximum Ember version supported yet. `emberVersionsSupported` array length should always be `2` indicating a [min, max] range.
-- Commit.
-
-##### Example scenario
+### Window Messages
 
-Below is an example scenario that assumes the current `main` branch supports Ember version 2.7.0+ and we want to lock the version such that `main` will support 3.4.0+. It also assumes the last Ember Inspector version released was 3.9.0.
+The Ember Inspector uses window messages, so if you are using window messages in your application code, make sure you [verify the sender](https://developer.mozilla.org/en-US/docs/Web/API/window.postMessage#Security_concerns) and add checks to your event listener so as not to conflict with the inspector's messages.
 
-- Release a new inspector version `3.10.0` if there are unreleased commits in `main`.
-- Create a new branch from `main` called `ember-2.7.0-3.4.0`.
-- Update `package.json`'s `emberVersionsSupported` from `["2.7.0", ""]` to `["2.7.0", "3.4.0"]`.
-- Commit with message "Lock Ember version at 2.7.0-3.4.0" and push the branch.
-- Run `pnpm lock-version`.
-- Checkout the `main` branch.
-- Create a new branch *from main* called `lock-3.4.0` (branch name here is not important).
-- Update `package.json`'s `previousEmberVersionsSupported` from `["0.0.0"]` to `["0.0.0", "2.7.0"]`.
-- Update `package.json`'s `emberVersionsSupported` from `["2.7.0", ""]` to `["3.4.0", ""]`.
-- Commit and open a PR against `main`.
 
-### Window Messages
+## Development
 
-The Ember Inspector uses window messages, so if you are using window messages in your application code, make sure you [verify the sender](https://developer.mozilla.org/en-US/docs/Web/API/window.postMessage#Security_concerns) and add checks to your event listener so as not to conflict with the inspector's messages.
+Want to work on inspector? See [DEVELOPMENT.md](./DEVELOPMENT.md)

package/RELEASE.md

@@ -1,62 +1,27 @@
-# Release
-
-Releases are mostly automated using
-[release-it](https://github.com/release-it/release-it/) and
-[lerna-changelog](https://github.com/lerna/lerna-changelog/).
+# Release Process
 
+Releases in this repo are mostly automated using [release-plan](https://github.com/embroider-build/release-plan/). Once you label all your PRs correctly (see below) you will have an automatically generated PR that updates your CHANGELOG.md file and a `.release-plan.json` that is used to prepare the release once the PR is merged.
 
 ## Preparation
 
-Since the majority of the actual release process is automated, the primary
-remaining task prior to releasing is confirming that all pull requests that
-have been merged since the last release have been labeled with the appropriate
-`lerna-changelog` labels and the titles have been updated to ensure they
-represent something that would make sense to our users. Some great information
-on why this is important can be found at
-[keepachangelog.com](https://keepachangelog.com/en/1.0.0/), but the overall
+Since the majority of the actual release process is automated, the remaining tasks before releasing are:
+
+- correctly labeling **all** pull requests that have been merged since the last release
+- updating pull request titles so they make sense to our users
+
+Some great information on why this is important can be found at [keepachangelog.com](https://keepachangelog.com/en/1.1.0/), but the overall
 guiding principle here is that changelogs are for humans, not machines.
 
 When reviewing merged PR's the labels to be used are:
 
-* breaking - Used when the PR is considered a breaking change.
-* enhancement - Used when the PR adds a new feature or enhancement.
-* bug - Used when the PR fixes a bug included in a previous release.
-* documentation - Used when the PR adds or updates documentation.
-* internal - Used for internal changes that still require a mention in the
-  changelog/release notes.
+- breaking - Used when the PR is considered a breaking change.
+- enhancement - Used when the PR adds a new feature or enhancement.
+- bug - Used when the PR fixes a bug included in a previous release.
+- documentation - Used when the PR adds or updates documentation.
+- internal - Internal changes or things that don't fit in any other category.
 
+**Note:** `release-plan` requires that **all** PRs are labeled. If a PR doesn't fit in a category it's fine to label it as `internal`
 
 ## Release
 
-Once the prep work is completed, the actual release is straight forward:
-
-* First, ensure that you have installed your projects dependencies:
-
-```
-pnpm install
-```
-
-* Second, ensure that you have obtained a
-  [GitHub personal access token][generate-token] with the `repo` scope (no
-  other permissions are needed). Make sure the token is available as the
-  `GITHUB_AUTH` environment variable.
-
-  For instance:
-
-  ```bash
-  export GITHUB_AUTH=abc123def456
-  ```
-
-[generate-token]: https://github.com/settings/tokens/new?scopes=repo&description=GITHUB_AUTH+env+variable
-
-* And last (but not least 😁) do your release.
-
-```
-npx release-it
-```
-
-[release-it](https://github.com/release-it/release-it/) manages the actual
-release process. It will prompt you to to choose the version number after which
-you will have the chance to hand tweak the changelog to be used (for the
-`CHANGELOG.md` and GitHub release), then `release-it` continues on to tagging,
-pushing the tag and commits, etc.
+Once the prep work is completed, the actual release is straight forward: you just need to merge the open [Plan Release](https://github.com/emberjs/ember-inspector/pulls?q=is%3Apr+is%3Aopen+%22Prepare+Release%22+in%3Atitle) PR

package/app/components/app-picker.hbs

@@ -16,9 +16,9 @@
     </select>
 
     {{#if @collapsed}}
-      {{svg-jar "e-logo" width="15" height="13" class="dropdown__collapsed-icon fill-current absolute pointer-events-none"}}
+      {{svg-jar "e-logo" width="15" height="13" class="dropdown-collapsed-icon fill-current absolute pointer-events-none"}}
     {{/if}}
 
-    {{svg-jar "dropdown-arrow" class="dropdown__arrow fill-current absolute opacity-75 pointer-events-none"}}
+    {{svg-jar "dropdown-arrow" class="dropdown-arrow fill-current absolute opacity-75 pointer-events-none"}}
   </div>
 </div>

package/app/components/component-tree-item.hbs

@@ -4,9 +4,9 @@
   class="
     component-tree-item relative flex items-center mx-1 rounded
     {{if @item.hasInstance "cursor-pointer" "cursor-default"}}
-    {{if @item.isComponent "component-tree-item--component"}}
-    {{if @item.isPinned "component-tree-item--pinned"}}
-    {{if @item.isHighlighted "component-tree-item--highlighted"}}"
+    {{if @item.isComponent "component-tree-item-component"}}
+    {{if @item.isPinned "component-tree-item-pinned"}}
+    {{if @item.isHighlighted "component-tree-item-highlighted"}}"
   {{on "click" @item.toggleInspection}}
   {{on "mouseenter" @item.showPreview}}
   {{on "mouseleave" @item.hidePreview}}
@@ -14,7 +14,7 @@
   <div class="component-tree-item-background flex items-center pr-2 rounded">
     {{#if @item.hasChildren}}
       <Ui::DisclosureTriangle
-        class="component-tree-item__expand self-stretch px-1 cursor-pointer"
+        class="component-tree-item-expand self-stretch px-1 cursor-pointer"
         title="Click to toggle (alt/option click to toggle with children)"
         @toggle={{@item.toggleExpansion}}
         @expanded={{@item.isExpanded}}
@@ -22,18 +22,18 @@
     {{/if}}
 
     <code
-      class="component-tree-item__tag flex whitespace-no-wrap
-        {{if @item.isClosingTag 'component-tree-item__closing'}}
-        {{if @item.hasModifiers 'component-tree-item__has_modifier'}}
+      class="component-tree-item-tag flex whitespace-no-wrap
+        {{if @item.isClosingTag 'component-tree-item-closing'}}
+        {{if @item.hasModifiers 'component-tree-item-has-modifier'}}
         {{if
         (or @item.isComponent @item.isModifier @item.isHtmlTag)
           (if
             @item.isCurlyInvocation
-            "component-tree-item-classic__bracket"
+            "component-tree-item-classic-bracket"
             (if
               @item.hasChildren
-              "component-tree-item__bracket"
-              "component-tree-item__bracket component-tree-item__bracket--self-closing"
+              "component-tree-item-bracket"
+              "component-tree-item-bracket component-tree-item-bracket-self-closing"
             )
           )
         }}"
@@ -45,7 +45,7 @@
             {{@item.name}}
           </span>
 
-          {{#each @item.args.positional as |value|}}
+          {{#each @item.args.positional key="@index" as |value|}}
             <div class="arg-token flex ml-2">
               {{if (is-string value) "\""}}
               <ComponentTreeArg @value={{value}} />
@@ -104,9 +104,9 @@
   </div>
 
   {{#if @item.hasBounds}}
-    <div class="component-tree-item__actions sticky flex items-center pr-1 whitespace-no-wrap">
+    <div class="component-tree-item-actions sticky flex items-center pr-1 whitespace-no-wrap">
       <button
-        class="component-tree-item__action inline-flex items-center h-full p-0 border-0 cursor-pointer bg-transparent z-10"
+        class="component-tree-item-action inline-flex items-center h-full p-0 border-0 cursor-pointer bg-transparent z-10"
         title="Scroll into view"
         data-test-scroll-into-view
         {{on "click" @item.scrollIntoView}}
@@ -116,7 +116,7 @@
       </button>
 
       <button
-        class="component-tree-item__action inline-flex items-center h-full ml-2 p-0 border-0 cursor-pointer bg-transparent z-10"
+        class="component-tree-item-action inline-flex items-center h-full ml-2 p-0 border-0 cursor-pointer bg-transparent z-10"
         title="View in Elements panel"
         data-test="view-dom-element"
         {{on "click" @item.inspectElement}}

package/app/components/component-tree-toolbar.hbs

@@ -1,6 +1,6 @@
 <div class="toolbar">
   <button
-    class="{{if @isInspecting "active"}} toolbar__icon-button"
+    class="{{if @isInspecting "active"}} toolbar-icon-button"
     type="button"
     {{on "click" @toggleInspect}}
   >
@@ -10,7 +10,7 @@
   <Ui::ToolbarDivider />
 
   <button
-    class="toolbar__icon-button"
+    class="toolbar-icon-button"
     title="expand all"
     type="button"
     {{on "click" @expandAll}}
@@ -19,7 +19,7 @@
   </button>
 
   <button
-    class="toolbar__icon-button"
+    class="toolbar-icon-button"
     title="collapse all"
     type="button"
     {{on "click" @collapseAll}}
@@ -34,4 +34,18 @@
     @value={{@query}}
     data-test-filter-views
   />
+
+  <Ui::ToolbarDivider />
+
+  {{#if @pinned}}
+    <button
+      class="{{if @showParentsOnly "active"}} toolbar-icon-button"
+      type="button"
+      title="toggle focus mode"
+      data-test-toggle-focus
+      {{on "click" @toggleParentsOnly}}
+    >
+      {{svg-jar "focus-point-round" width="16px" height="16px"}}
+    </button>
+  {{/if}}
 </div>

package/app/components/{date-property-field.js → date-property-field.ts}

@@ -1,16 +1,17 @@
 import { scheduleOnce } from '@ember/runloop';
 import { action } from '@ember/object';
-import DatePicker from 'ember-inspector/components/ember-flatpickr';
+import DatePicker from 'ember-flatpickr/components/ember-flatpickr';
 
 export default class DatePropertyFieldComponent extends DatePicker {
   @action
-  onInsert(element) {
+  onInsert(element: HTMLInputElement) {
     super.onInsert(element);
 
+    // eslint-disable-next-line ember/no-runloop
     scheduleOnce('afterRender', this, this._openFlatpickr);
   }
 
-  _openFlatpickr() {
-    this.flatpickrRef.open();
-  }
+  _openFlatpickr = () => {
+    this.flatpickrRef?.open();
+  };
 }

package/app/components/deprecation-item-source.hbs

@@ -1,6 +1,6 @@
 <div class="deprecation-source pb-2" data-test-deprecation-source>
   <button
-    class="send-to-console send-to-console--chevron-only mr-3"
+    class="send-to-console send-to-console-chevron-only mr-3"
     title="Trace deprecations in console"
     data-test-trace-deprecations-btn
     {{on "click" this.handleClick}}

package/app/components/deprecation-item.hbs

@@ -26,7 +26,7 @@
 
       {{#if (not @model.hasSourceMap)}}
         <button
-          class="send-to-console send-to-console--chevron-only mr-2"
+          class="send-to-console send-to-console-chevron-only mr-2"
           title="Trace deprecations in console"
           data-test-full-trace-deprecations-btn
           type="button"

package/app/components/deprecations-toolbar.hbs

@@ -3,7 +3,7 @@
 
   <Ui::ToolbarDivider />
 
-  <div class="toolbar__checkbox">
+  <div class="toolbar-checkbox">
     <label title="Deprecation workflow">
       <Input
         @type="checkbox"

package/app/components/item-types.hbs

@@ -1,11 +1,11 @@
 <div class="split">
   <Ui::DraggableColumn
-    @classes="split__panel split__panel--sidebar-2 nav"
+    @classes="split-panel split-panel-sidebar-2 nav"
     @side="left"
     @width={{@width}}
   >
-    <div class="split__panel__bd">
-      <h1 class="nav__title">{{@header}}</h1>
+    <div class="split-panel-bd">
+      <h1 class="nav-title">{{@header}}</h1>
 
       <ul>
         {{#each @sorted as |itemType|}}
@@ -13,9 +13,9 @@
             <LinkTo
               @route={{if (eq @type "model") "records" "container-type"}}
               @model={{escape-url itemType.name}}
-              class="nav__item"
+              class="nav-item"
             >
-              <span class={{concat this.typeClass "-name" " nav__item-label"}}>
+              <span class={{concat this.typeClass "-name" " nav-item-label"}}>
                 {{itemType.name}}
               </span>
 
@@ -27,8 +27,8 @@
     </div>
   </Ui::DraggableColumn>
 
-  <div class="split__panel">
-    <div class="split__panel__bd">
+  <div class="split-panel">
+    <div class="split-panel-bd">
       {{yield}}
     </div>
   </div>

package/app/components/list-cell.hbs

@@ -1,7 +1,7 @@
 <td
-  class="list__cell
-    {{if this.clickable 'list__cell_clickable'}}
-    {{if this.highlight 'list__cell_highlight'}}"
+  class="list-cell
+    {{if this.clickable 'list-cell-clickable'}}
+    {{if this.highlight 'list-cell-highlight'}}"
   role="button"
   style={{this.safeStyle}}
   title={{this.title}}

package/app/components/list-content.hbs

@@ -1,12 +1,13 @@
 <div
-  class="list__content js-list-content"
+  class="list-content js-list-content"
   style={{this.style}}
   {{did-insert this.elementInserted}}
+  ...attributes
 >
-  <div class="list__table-container">
+  <div class="list-table-container">
     <table>
       <colgroup>
-        {{#each this.columns as |column|}}
+        {{#each @columns as |column|}}
           <col style={{build-style width=(concat column.width "px")}} />
         {{/each}}
       </colgroup>