support shadow dom for click to select & inspect component (#2659)

Author: patricklx

ember_debug/libs/view-inspection.js

@@ -317,7 +317,11 @@ export default class ViewInspection {
   onMouseMove(event) {
     event.preventDefault();
     event.stopPropagation();
-    this.inspectNearest(event.target, false);
+    let target = event.target;
+    if (target.shadowRoot) {
+      target = target.shadowRoot.elementFromPoint(event.x, event.y) || target;
+    }
+    this.inspectNearest(target, false);
   }
 
   onKeyDown(event) {
@@ -342,7 +346,11 @@ export default class ViewInspection {
     } else if (this.isInspecting && event.button === 0) {
       event.preventDefault();
       event.stopPropagation();
-      this.inspectNearest(event.target, true);
+      let target = event.target;
+      if (target.shadowRoot) {
+        target = target.shadowRoot.elementFromPoint(event.x, event.y) || target;
+      }
+      this.inspectNearest(target, true);
       this.stop(false);
     }
   }

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;
+      }
     }
   }
 

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');
+    });
   });
 });