ember-inspector 4.11.0-alpha.2024.3.9 → 4.11.0-alpha.2024.4.10

package/.github/dependabot.yml

@@ -7,6 +7,7 @@ updates:
   open-pull-requests-limit: 10
   labels:
   - dependencies
+  - internal
   ignore:
   - dependency-name: ember-cli
     versions:

package/.github/workflows/build.yml

@@ -252,7 +252,7 @@ jobs:
     needs:
       - test
       - ember-try
-      - build    
+      - build
     runs-on: ubuntu-latest
     steps:
       - name: Set up node
@@ -272,8 +272,8 @@ jobs:
             echo "REFRESH_TOKEN=${{ secrets.GOOGLE_NIGHTLY_REFRESH_TOKEN }}" >> $GITHUB_ENV
           else
             echo "EXTENSION_ID=bmdblncegkenkacieihfhpjfppoconhi" >> $GITHUB_ENV
-            echo "CLIENT_ID=${{ secrets.GOOGLE_STABLE_CLIENT_ID }}" >> $GITHUB_ENV
-            echo "REFRESH_TOKEN=${{ secrets.GOOGLE_STABLE_REFRESH_TOKEN }}" >> $GITHUB_ENV
+            echo "CLIENT_ID=${{ secrets.GOOGLE_NIGHTLY_CLIENT_ID }}" >> $GITHUB_ENV
+            echo "REFRESH_TOKEN=${{ secrets.GOOGLE_NIGHTLY_REFRESH_TOKEN }}" >> $GITHUB_ENV
           fi
       - name: Upload to Chrome Web Store
         if: >-
@@ -286,7 +286,7 @@ jobs:
     needs:
       - test
       - ember-try
-      - build    
+      - build
     runs-on: ubuntu-latest
     steps:
       - name: Set up nod
@@ -314,7 +314,7 @@ jobs:
     needs:
       - test
       - ember-try
-      - build    
+      - build
     runs-on: ubuntu-latest
     steps:
       - name: Set up node
@@ -336,25 +336,4 @@ jobs:
           npm whoami
           if [[ "$GITHUB_EVENT_NAME" == "schedule" ]]; then
             npm publish --tag alpha
-          else
-            npm publish
           fi
-
-  publish-github:
-    name: Publish GitHub release
-    needs:
-      - test
-      - ember-try
-      - build
-    if: github.event_name == 'push' && startsWith(github.ref, 'refs/tags/v')
-    runs-on: ubuntu-latest
-    steps:
-      - name: Create release
-        uses: actions/create-release@v1
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-        with:
-          tag_name: ${{ github.ref }}
-          release_name: ${{ github.ref }}
-          draft: false
-          prerelease: false

package/.github/workflows/plan-release.yml

@@ -0,0 +1,83 @@
+name: Release Plan Review
+on:
+  push:
+    branches:
+      - main
+      - master
+  pull_request:
+    types:
+      - labeled
+
+concurrency:
+  group: plan-release # only the latest one of these should ever be running
+  cancel-in-progress: true
+
+jobs:
+  check-plan:
+    name: "Check Release Plan"
+    runs-on: ubuntu-latest
+    outputs:
+      command: ${{ steps.check-release.outputs.command }}
+
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+          ref: 'main'
+      # This will only cause the `check-plan` job to have a "command" of `release`
+      # when the .release-plan.json file was changed on the last commit.
+      - id: check-release
+        run: if git diff --name-only HEAD HEAD~1 | grep -w -q ".release-plan.json"; then echo "command=release"; fi >> $GITHUB_OUTPUT
+
+  prepare_release_notes:
+    name: Prepare Release Notes
+    runs-on: ubuntu-latest
+    timeout-minutes: 5
+    needs: check-plan
+    outputs:
+      explanation: ${{ steps.explanation.outputs.text }}
+    # only run on push event if plan wasn't updated (don't create a release plan when we're releasing)
+    # only run on labeled event if the PR has already been merged
+    if: (github.event_name == 'push' && needs.check-plan.outputs.command != 'release') || (github.event_name == 'pull_request' && github.event.pull_request.merged == true)
+
+    steps:
+      - uses: actions/checkout@v4
+        # We need to download lots of history so that
+        # lerna-changelog can discover what's changed since the last release
+        with:
+          fetch-depth: 0
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 18
+
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 8
+      - run: pnpm install --frozen-lockfile
+
+      - name: "Generate Explanation and Prep Changelogs"
+        id: explanation
+        run: |
+          set -x
+
+          pnpm release-plan prepare --singlePackage=ember-inspector
+
+          echo 'text<<EOF' >> $GITHUB_OUTPUT
+          jq .description .release-plan.json -r >> $GITHUB_OUTPUT
+          echo 'EOF' >> $GITHUB_OUTPUT
+        env:
+          GITHUB_AUTH: ${{ secrets.GITHUB_TOKEN }}
+
+      - uses: peter-evans/create-pull-request@v5
+        with:
+          commit-message: "Prepare Release using 'release-plan'"
+          author: "github-actions[bot] <github-actions-bot@users.noreply.github.com>"
+          labels: "internal"
+          branch: release-preview
+          title: Prepare Release
+          body: |
+            This PR is a preview of the release that [release-plan](https://github.com/embroider-build/release-plan) has prepared. To release you should just merge this PR 👍
+
+            -----------------------------------------
+
+            ${{ steps.explanation.outputs.text }}

package/.github/workflows/publish.yml

@@ -0,0 +1,58 @@
+# For every push to the master branch, this checks if the release-plan was
+# updated and if it was it will publish stable npm packages based on the
+# release plan
+
+name: Publish Stable
+
+on:
+  workflow_dispatch:
+  push:
+    branches:
+      - main
+      - master
+
+concurrency:
+  group: publish-${{ github.head_ref || github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  check-plan:
+    name: "Check Release Plan"
+    runs-on: ubuntu-latest
+    outputs:
+      command: ${{ steps.check-release.outputs.command }}
+
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+          ref: 'main'
+      # This will only cause the `check-plan` job to have a result of `success`
+      # when the .release-plan.json file was changed on the last commit. This
+      # plus the fact that this action only runs on main will be enough of a guard
+      - id: check-release
+        run: if git diff --name-only HEAD HEAD~1 | grep -w -q ".release-plan.json"; then echo "command=release"; fi >> $GITHUB_OUTPUT
+
+  publish:
+    name: "NPM Publish"
+    runs-on: ubuntu-latest
+    needs: check-plan
+    if: needs.check-plan.outputs.command == 'release'
+
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 18
+          # This creates an .npmrc that reads the NODE_AUTH_TOKEN environment variable
+          registry-url: 'https://registry.npmjs.org'
+
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 8
+      - run: pnpm install --frozen-lockfile
+      - name: npm publish
+        run: pnpm release-plan publish --singlePackage=ember-inspector
+        env:
+          GITHUB_AUTH: ${{ secrets.GITHUB_TOKEN }}
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }}

package/app/components/component-tree-arg.js

@@ -12,6 +12,15 @@ export default class ComponentTreeArg extends Component {
 
   get displayValue() {
     if (this.isObject) {
+      if (this.args.value.inspect) {
+        if (this.args.value.type === 'function') {
+          return this.args.value.inspect
+            .replace(/"/g, '\\"')
+            .replace('bound ', '')
+            .replace('{ ... }', '');
+        }
+        return truncate(this.args.value.inspect.replace(/"/g, '\\"'));
+      }
       return '...';
     } else if (typeof this.args.value === 'string') {
       // Escape any interior quotes – we will add the surrounding quotes in the template

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

@@ -23,8 +23,10 @@
 
     <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'}}
         {{if
-          @item.isComponent
+        (or @item.isComponent @item.isModifier @item.isHtmlTag)
           (if
             @item.isCurlyInvocation
             "component-tree-item-classic__bracket"
@@ -37,7 +39,7 @@
         }}"
     >
       {{!-- template-lint-disable no-unbalanced-curlies --}}
-      {{#if @item.isComponent}}
+      {{#if (or @item.isComponent @item.isModifier)}}
         {{#if @item.isCurlyInvocation}}
           <span class="component-name">
             {{@item.name}}
@@ -83,6 +85,20 @@
         \{{mount "{{@item.name}}"}}
       {{else if @item.isRouteTemplate}}
         {{@item.name}} route
+      {{else if @item.isHtmlTag}}
+        <span class="component-name">
+          {{@item.name}}
+        </span>
+        {{#each-in @item.args.named as |name value|}}
+          <div class="arg-token flex ml-2">
+              <span class="key-token">
+                {{name}}
+              </span>
+            ={{if (is-string value) "\""}}
+            <ComponentTreeArg @value={{value}} />
+            {{if (is-string value) "\""}}
+          </div>
+        {{/each-in}}
       {{/if}}
     </code>
   </div>

package/app/components/object-inspector/dependent-keys.hbs

@@ -1,14 +1,17 @@
 <li class="mixin__property-dependency-list relative">
   {{svg-jar "dependent-key-connection" width="20px" height="10px"}}
   <ul class="m-0 p-0 list-none">
-    {{#each @keys as |depKey|}}
-      <li class="mixin__property-dependency-item relative text-base12 text-sm">
-      {{#if (match depKey "•")}}
+    {{#each @keys as |dep|}}
+      <li
+        class="mixin__property-dependency-item relative text-base12 text-sm {{if dep.changed 'text-spec01'}}"
+        title={{if dep.changed 'this property changed'}}
+      >
+      {{#if dep.child}}
         <span
           class="mixin__property-dependency-name subkey"
           data-label="object-property-name"
         >
-          {{depKey}}
+          • -- {{dep.child}}
         </span>
       {{else}}
         {{svg-jar
@@ -20,9 +23,10 @@
           class="mixin__property-dependency-name"
           data-label="object-property-name"
         >
-          {{depKey}}
+          {{dep.name}}
         </span>
       {{/if}}
+      {{#if dep.changed}}🔸{{/if}}
       </li>
     {{/each}}
   </ul>

package/app/components/object-inspector/properties-all.hbs

@@ -11,6 +11,7 @@
           @model={{prop}}
           @saveProperty={{this.saveProperty}}
           @sendToConsole={{fn this.sendToConsole prop}}
+          @gotoSource={{fn this.gotoSource prop}}
         />
       {{/each}}
     </ObjectInspector::SortProperties>

package/app/components/object-inspector/properties-base.js

@@ -15,6 +15,16 @@ export default class PropertiesBase extends Component {
     this.port.send('objectInspector:sendToConsole', data);
   }
 
+  @action gotoSource({ name }) {
+    const data = {
+      objectId: this.args.model.objectId,
+    };
+    if (name !== '...') {
+      data.property = name;
+    }
+    this.port.send('objectInspector:gotoSource', data);
+  }
+
   @action digDeeper({ name }) {
     this.port.send('objectInspector:digDeeper', {
       objectId: this.args.model.objectId,

package/app/components/object-inspector/properties-grouped.hbs

@@ -33,6 +33,7 @@
                 @digDeeper={{fn this.digDeeper prop}}
                 @saveProperty={{this.saveProperty}}
                 @sendToConsole={{fn this.sendToConsole prop}}
+                @gotoSource={{fn this.gotoSource prop}}
               />
             {{else}}
               <li class="mixin__property flex relative flex-row items-center truncate">No Properties</li>

package/app/components/object-inspector/property.hbs

@@ -119,12 +119,23 @@
   <button
     data-test-send-to-console-btn
     class="mixin__send-btn flex-shrink-0 send-to-console"
-    title="Send to console"
+    title="Send To Console"
     type="button"
     {{on "click" @sendToConsole}}
   >
     {{svg-jar "send-with-text" width="20px" height="10px"}}
   </button>
+  {{#if this.isFunction}}
+    <button
+      data-test-goto-source-btn
+      class="mixin__send-btn flex-shrink-0 goto-source"
+      title="Goto Source"
+      type="button"
+      {{on "click" @gotoSource}}
+    >
+      {{svg-jar "code-source" width="20px" height="10px"}}
+    </button>
+  {{/if}}
 </li>
 
 {{#if this.showDependentKeys}}

package/app/components/object-inspector/property.ts

@@ -8,6 +8,8 @@ import parseText from 'ember-inspector/utils/parse-text';
 interface ObjectInspectorPropertyArgs {
   model: any;
   digDeeper: () => unknown;
+  gotoSource: () => void;
+  sendToConsole: () => void;
   saveProperty: (
     property: unknown,
     value: unknown,
@@ -119,8 +121,8 @@ export default class ObjectInspectorProperty extends Component<ObjectInspectorPr
   }
 
   get cannotEdit() {
-    if (this.args.model.name === '...' || !this.isCalculated) return true;
-    return this.isFunction || this.isOverridden || this.readOnly;
+    if (this.args.model.name === '...' || !this.isCalculated || this.readOnly) return true;
+    return this.args.model?.value?.type !== 'type-string' && this.args.model?.value?.type !== 'type-number';
   }
 
   @action

package/app/components/object-inspector.hbs

@@ -21,11 +21,25 @@
         type="button"
         {{on
           "click"
-          (fn this.sendObjectToConsole (get @model (sub @model.length 1)))
+          (fn this.sendObjectToConsole this.current)
         }}
       >
         {{svg-jar "send-with-text" width="20px" height="10px"}}
       </button>
+      {{#if this.isClass}}
+        <button
+          data-test-goto-class-source-btn
+          class="goto-source"
+          title="Goto Source"
+          type="button"
+          {{on
+            "click"
+            (fn this.gotoSource this.current)
+          }}
+        >
+          {{svg-jar "code-source" width="20px" height="10px"}}
+        </button>
+      {{/if}}
     </div>
 
     {{#if this.trail}}
@@ -103,4 +117,4 @@
       No object selected
     </Ui::EmptyMessage>
   </div>
-{{/if}}
+{{/if}}

package/app/components/object-inspector.js

@@ -14,6 +14,13 @@ export default class ObjectInspector extends Component {
     this.searchInputId = 'custom-filter-input';
   }
 
+  get isClass() {
+    return this.current.mixins.length > 1;
+  }
+
+  get current() {
+    return this.args.model[this.args.model.length - 1];
+  }
   get trail() {
     let nested = this.args.model.slice(1);
     if (nested.length === 0) {
@@ -55,6 +62,13 @@ export default class ObjectInspector extends Component {
     });
   }
 
+  @action gotoSource(obj) {
+    let objectId = obj.objectId;
+    this.port.send('objectInspector:gotoSource', {
+      objectId,
+    });
+  }
+
   @action popStack() {
     if (this.isNested) {
       this.args.popMixinDetails();

package/app/controllers/component-tree.js

@@ -48,6 +48,21 @@ export default class ComponentTreeController extends Controller {
 
         renderItems.push(item);
 
+        if (
+          item.isHtmlTag &&
+          renderNode.children.some((c) => c.type === 'modifier')
+        ) {
+          const idx = renderNode.children.findLastIndex(
+            (c) => c.type === 'modifier'
+          );
+          renderNode.children.splice(idx + 1, 0, {
+            type: 'placeholder-closing-tag',
+            id: renderNode.id + '-closing-tag',
+            name: '',
+            children: [],
+          });
+        }
+
         renderNode.children.forEach((node) => flatten(item, node));
       }
     };
@@ -301,7 +316,32 @@ class RenderItem {
   }
 
   get isComponent() {
-    return this.renderNode.type === 'component';
+    return (
+      this.renderNode.type === 'component' ||
+      this.renderNode.type === 'remote-element'
+    );
+  }
+
+  get isModifier() {
+    return this.renderNode.type === 'modifier';
+  }
+
+  get hasModifiers() {
+    return this.childItems.some((item) => item.isModifier);
+  }
+
+  get isLastModifier() {
+    return (
+      this.parentItem.childItems.findLast((item) => item.isModifier) === this
+    );
+  }
+
+  get isHtmlTag() {
+    return this.renderNode.type === 'html-element';
+  }
+
+  get isClosingTag() {
+    return this.renderNode.type === 'placeholder-closing-tag';
   }
 
   get name() {
@@ -313,12 +353,15 @@ class RenderItem {
   }
 
   get isCurlyInvocation() {
+    if (this.isModifier) {
+      return true;
+    }
     return this.renderNode.args && this.renderNode.args.positional;
   }
 
   get hasInstance() {
     let { instance } = this.renderNode;
-    return typeof instance === 'object' && instance !== null;
+    return typeof instance === 'object' && instance;
   }
 
   get instance() {
@@ -330,7 +373,7 @@ class RenderItem {
   }
 
   get hasBounds() {
-    return this.renderNode.bounds !== null;
+    return this.renderNode.bounds;
   }
 
   get isRoot() {
@@ -400,6 +443,7 @@ class RenderItem {
   }
 
   @action showPreview() {
+    if (this.isClosingTag) return;
     this.controller.previewing = this.id;
   }
 
@@ -410,6 +454,7 @@ class RenderItem {
   }
 
   @action toggleInspection() {
+    if (this.isClosingTag) return;
     if (this.isPinned) {
       this.controller.pinned = undefined;
     } else {
@@ -439,6 +484,12 @@ class RenderItem {
     this.send('view:inspectElement', { id: this.id });
   }
 
+  @action inspectValue(event) {
+    event.stopPropagation();
+
+    this.send('view:inspectValue', { id: this.id });
+  }
+
   show() {
     let item = this.parentItem;
 

package/app/routes/component-tree.js

@@ -31,7 +31,6 @@ export default class ComponentTreeRoute extends TabRoute {
     this.port.on('view:cancelSelection', this, this.cancelSelection);
     this.port.on('view:startInspecting', this, this.startInspecting);
     this.port.on('view:stopInspecting', this, this.stopInspecting);
-    this.port.on('view:inspectDOMNode', this, this.inspectDOMNode);
   }
 
   deactivate() {
@@ -41,7 +40,6 @@ export default class ComponentTreeRoute extends TabRoute {
     this.port.off('view:cancelSelection', this, this.cancelSelection);
     this.port.off('view:startInspecting', this, this.startInspecting);
     this.port.off('view:stopInspecting', this, this.stopInspecting);
-    this.port.off('view:inspectDOMNode', this, this.inspectDOMNode);
   }
 
   setRenderTree({ tree }) {
@@ -59,8 +57,4 @@ export default class ComponentTreeRoute extends TabRoute {
   stopInspecting() {
     this.controller.isInspecting = false;
   }
-
-  inspectDOMNode({ name }) {
-    this.port.adapter.inspectDOMNode(name);
-  }
 }

package/app/services/adapters/web-extension.js

@@ -107,12 +107,12 @@ export default class WebExtension extends BasicAdapter {
   }
 
   /**
-   * Open the devtools "Elements" tab and select a specific DOM node.
+   * Open the devtools "Elements" or "Sources" tab and select a specific DOM node or function.
    *
-   * @method inspectDOMNode
+   * @method inspectJSValue
    * @param {String} name
    */
-  inspectDOMNode(name) {
+  inspectJSValue(name) {
     chrome.devtools.inspectedWindow.eval(`
       inspect(window[${JSON.stringify(name)}]);
       delete window[${JSON.stringify(name)}];

package/app/services/port.js

@@ -49,6 +49,10 @@ export default class PortService extends Service.extend(Evented) {
         this.trigger(message.type, message, applicationId);
       }
     });
+
+    this.on('view:inspectJSValue', this, ({ name }) =>
+      this.adapter.inspectJSValue(name)
+    );
   }
 
   selectApplication(applicationId) {

package/app/styles/component_tree.scss

@@ -141,6 +141,19 @@
   color: var(--base09);
 }
 
+.component-tree-item__has_modifier:after {
+  content: '' !important;
+}
+
+.component-tree-item__closing:before {
+  content: '>';
+  margin-left: -13px;
+}
+
+.component-tree-item__self-closing:before {
+  content: '/>';
+}
+
 .component-tree-item__bracket:before {
   content: '<';
 }

package/app/utils/parse-text.ts

@@ -18,3 +18,4 @@ export default function parseText(value: string): string {
   }
   return parsedValue;
 }
+