ember-inspector 4.13.1-alpha.2025.6.19 → 4.13.1-alpha.2025.6.20

package/ember_debug/utils/ember.js

@@ -56,11 +56,21 @@ let captureRenderTree = Ember._captureRenderTree;
 let getEnv = () => Ember.ENV;
 
 let Debug = emberSafeRequire('@ember/debug');
+let InternalsMetal = emberSafeRequire('@ember/-internals/metal');
+let InternalsRuntime = emberSafeRequire('@ember/-internals/runtime');
 let InternalsUtils = emberSafeRequire('@ember/-internals/utils');
+let InternalsViews = emberSafeRequire('@ember/-internals/views');
+let EmberDestroyable = emberSafeRequire('@ember/destroyable');
 let ObjectInternals = emberSafeRequire('@ember/object/internals');
 let Instrumentation = emberSafeRequire('@ember/instrumentation');
 let Runloop = emberSafeRequire('@ember/runloop');
 let RSVP = emberSafeRequire('rsvp');
+let GlimmerComponent = emberSafeRequire('@glimmer/component');
+let GlimmerManager = emberSafeRequire('@glimmer/manager');
+let GlimmerReference = emberSafeRequire('@glimmer/reference');
+let GlimmerRuntime = emberSafeRequire('@glimmer/runtime');
+let GlimmerUtil = emberSafeRequire('@glimmer/util');
+let GlimmerValidator = emberSafeRequire('@glimmer/validator');
 
 if (!Ember) {
   captureRenderTree = emberSafeRequire('@ember/debug')?.captureRenderTree;
@@ -94,7 +104,10 @@ if (!Ember) {
 export {
   Runloop,
   Debug,
+  InternalsMetal,
+  InternalsRuntime,
   InternalsUtils,
+  InternalsViews,
   ObjectInternals,
   Instrumentation,
   RSVP,
@@ -113,6 +126,7 @@ export {
   Evented,
   Service,
   PromiseProxyMixin,
+  EmberDestroyable,
   EmberObject,
   VERSION,
   ComputedProperty,
@@ -122,6 +136,12 @@ export {
   set,
   captureRenderTree,
   getEnv,
+  GlimmerComponent,
+  GlimmerManager,
+  GlimmerReference,
+  GlimmerRuntime,
+  GlimmerUtil,
+  GlimmerValidator,
 };
 
 export default Ember;

package/ember_debug/utils/type-check.js

@@ -3,7 +3,7 @@ import {
   ComputedProperty,
   EmberObject,
   meta as emberMeta,
-  emberSafeRequire,
+  InternalsMetal,
 } from 'ember-debug/utils/ember';
 
 /**
@@ -41,7 +41,7 @@ export function getDescriptorFor(object, key) {
   // exists longer than ember 3.10
   if (Debug.isComputed) {
     const { descriptorForDecorator, descriptorForProperty } =
-      emberSafeRequire('@ember/-internals/metal') || {};
+      InternalsMetal || {};
     return (
       descriptorForDecorator?.(object[key]) ||
       descriptorForProperty?.(object, key)

package/ember_debug/view-debug.js

@@ -103,6 +103,11 @@ export default class extends DebugPort {
   onRightClick(event) {
     if (event.button === 2) {
       this.lastRightClicked = event.target;
+      if (event.target.shadowRoot) {
+        this.lastRightClicked =
+          event.target.shadowRoot.elementFromPoint(event.x, event.y) ||
+          event.target;
+      }
     }
   }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ember-inspector",
-  "version": "4.13.1-alpha.2025.6.19+42198be",
+  "version": "4.13.1-alpha.2025.6.20+c8550c0",
   "description": "Extends developer tools to allow you to better inspect your Ember.js apps.",
   "repository": "https://github.com/emberjs/ember-inspector",
   "license": "MIT",

package/skeletons/web-extension/manifest.json

@@ -2,7 +2,7 @@
   "manifest_version": 3,
   "name": "Ember Inspector (Nightly)",
   "description": "Tool for debugging Ember applications.",
-  "version": "2025.6.19",
+  "version": "2025.6.20",
   "icons": {
     "16": "{{PANE_ROOT}}/assets/images/icon16.png",
     "38": "{{PANE_ROOT}}/assets/images/icon38.png",
@@ -74,5 +74,5 @@
       ]
     }
   ],
-  "version_name": "4.13.1 (nightly build 2025.6.19 / 42198be)"
+  "version_name": "4.13.1 (nightly build 2025.6.20 / c8550c0)"
 }

package/tests/ember_debug/view-debug-test.js

@@ -22,6 +22,8 @@ import EmberDebug from 'ember-debug/main';
 import setupEmberDebugTest from '../helpers/setup-ember-debug-test';
 import { isInVersionSpecifier } from 'ember-debug/version';
 import { VERSION } from 'ember-debug/ember';
+import GlimmerComponent from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
 
 let templateOnlyComponent = null;
 try {
@@ -373,6 +375,7 @@ module('Ember Debug - View', function (hooks) {
       this.route('test-component-in-in-element');
       this.route('wormhole');
       this.route('inputs');
+      this.route('component-in-shadow-dom');
       this.route('comments', { resetNamespace: true }, function () {});
       this.route('posts', { resetNamespace: true });
     },
@@ -499,6 +502,31 @@ module('Ember Debug - View', function (hooks) {
       }),
     );
 
+    this.owner.register(
+      'component:shadow-dom',
+      setComponentTemplate(
+        hbs(
+          `<div {{did-insert this.setupRoot}} />
+    {{#if this.shadow}}
+      {{#in-element this.shadow}}
+        {{yield}}
+      {{/in-element}}
+    {{/if}}
+        `,
+          {
+            moduleName: 'my-app/components/shadow-dom.hbs',
+          },
+        ),
+        class extends GlimmerComponent {
+          @tracked shadow;
+          setupRoot = (element) => {
+            this.shadow = element.attachShadow({ mode: 'open' });
+            window.testShadow = this.shadow;
+          };
+        },
+      ),
+    );
+
     this.owner.register(
       'component:test-foo',
       setComponentTemplate(
@@ -635,6 +663,13 @@ module('Ember Debug - View', function (hooks) {
       }),
     );
 
+    this.owner.register(
+      'template:component-in-shadow-dom',
+      hbs('<ShadowDom><TestFoo /></ShadowDom>', {
+        moduleName: 'my-app/templates/component-in-shadow-dom.hbs',
+      }),
+    );
+
     this.owner.register(
       'template:comments/index',
       hbs('{{#each this.comments as |comment|}}{{comment}}{{/each}}', {
@@ -1200,5 +1235,45 @@ module('Ember Debug - View', function (hooks) {
         .dom('.ember-inspector-tooltip-detail-instance', tooltip)
         .hasText(/ember-wormhole/);
     });
+
+    test('component inside shadow dom', async function (assert) {
+      if (isInVersionSpecifier('^5.8.0', VERSION)) {
+        assert.expect(2);
+        return;
+      }
+      await visit('component-in-shadow-dom');
+      await rerender();
+      await getRenderTree();
+
+      const inShadow = window.testShadow.querySelector('.simple-component');
+
+      await click(window.testShadow.host, {
+        clientX: inShadow.getBoundingClientRect().x,
+        clientY: inShadow.getBoundingClientRect().y,
+      });
+
+      assert
+        .dom('.ember-inspector-tooltip-header', tooltip)
+        .hasText('<TestFoo>');
+
+      let actual = highlight.getBoundingClientRect();
+      let expected = inShadow.getBoundingClientRect();
+
+      assert.ok(isVisible(tooltip), 'tooltip is visible');
+      assert.ok(isVisible(highlight), 'highlight is visible');
+
+      assert.deepEqual(actual.x, expected.x, 'same x as component');
+      assert.deepEqual(actual.y, expected.y, 'same y as component');
+      assert.deepEqual(actual.width, expected.width, 'same width as component');
+      assert.deepEqual(
+        actual.height,
+        expected.height,
+        'same height as component',
+      );
+
+      assert
+        .dom('.ember-inspector-tooltip-detail-instance', tooltip)
+        .hasText('App.TestFooComponent');
+    });
   });
 });