ember-inspector 4.13.1-alpha.2024.8.9 → 4.13.1-alpha.2025.10.1

package/ember_debug/libs/render-tree.js

@@ -1,41 +1,37 @@
-import captureRenderTree from './capture-render-tree';
-import { guidFor } from 'ember-debug/utils/ember/object/internals';
-import { EmberLoader, emberSafeRequire } from 'ember-debug/utils/ember/loader';
-import { inspect } from 'ember-debug/utils/type-check';
-import { isInVersionSpecifier } from 'ember-debug/utils/version';
-import { VERSION } from 'ember-debug/utils/ember';
+import captureRenderTree from './capture-render-tree.js';
+import { guidFor } from '../utils/ember/object/internals';
+import { inspect } from '../utils/type-check';
+import { isInVersionSpecifier } from '../utils/version';
+import {
+  VERSION,
+  EmberDestroyable,
+  GlimmerManager,
+  GlimmerReference,
+  GlimmerRuntime,
+  GlimmerUtil,
+} from '../utils/ember';
 
 class InElementSupportProvider {
   constructor(owner) {
     this.nodeMap = new Map();
     this.remoteRoots = [];
-    this.runtime = this.require('@glimmer/runtime');
-    this.reference = this.require('@glimmer/reference');
-    try {
-      this.Wormhole = requireModule('ember-wormhole/components/ember-wormhole');
-    } catch (e) {
-      // nope
-    }
+    this.runtime = GlimmerRuntime;
+    this.reference = GlimmerReference;
 
-    try {
-      requireModule(
-        '@glimmer/manager'
-      ).CustomModifierManager.prototype.getDebugInstance = (args) =>
-        args.modifier || args.delegate;
-    } catch (e) {
-      // nope
+    if (GlimmerManager) {
+      GlimmerManager.CustomModifierManager.prototype.getDebugInstance = (
+        args,
+      ) => args.modifier || args.delegate;
     }
 
-    this.DESTROY = emberSafeRequire('@glimmer/util')?.DESTROY;
-    this.registerDestructor =
-      emberSafeRequire('@glimmer/destroyable')?.registerDestructor ||
-      emberSafeRequire('@ember/destroyable')?.registerDestructor ||
-      emberSafeRequire('@ember/runtime')?.registerDestructor;
+    this.DESTROY = GlimmerUtil?.DESTROY;
+    this.registerDestructor = EmberDestroyable?.registerDestructor;
 
     this.debugRenderTree =
       owner.lookup('renderer:-dom')?.debugRenderTree ||
       owner.lookup('service:-glimmer-environment')._debugRenderTree;
-    this.NewElementBuilder = this.runtime.NewElementBuilder;
+    this.NewElementBuilder =
+      this.runtime.NewElementBuilder || this.runtime.NewTreeBuilder;
 
     this.patch();
   }
@@ -56,7 +52,7 @@ class InElementSupportProvider {
       !isInVersionSpecifier('>5.9.0', VERSION);
     const hasModifierAndInElementSupport = isInVersionSpecifier(
       '>5.9.0',
-      VERSION
+      VERSION,
     );
 
     function createRef(value) {
@@ -151,7 +147,7 @@ class InElementSupportProvider {
             if (!name) {
               try {
                 name = modifier.manager?.getDebugName?.();
-              } catch (e) {
+              } catch {
                 // failed
               }
               name = name || 'unknown-modifier';
@@ -175,12 +171,12 @@ class InElementSupportProvider {
             if (!self.reference.createUnboundRef) {
               try {
                 named = modifierState?.args?.named?.constructor;
-              } catch (e) {
+              } catch {
                 //
               }
               try {
                 named = named || modifierState?.args?.named?.map;
-              } catch (e) {
+              } catch {
                 //
               }
             }
@@ -213,7 +209,7 @@ class InElementSupportProvider {
       NewElementBuilder.prototype.pushRemoteElement = function (
         element,
         guid,
-        insertBefore
+        insertBefore,
       ) {
         const ref = createRef(element);
         const capturedArgs = {
@@ -285,16 +281,10 @@ class InElementSupportProvider {
     Object.assign(this.debugRenderTree, this.debugRenderTreeFunctions);
     Object.assign(
       this.NewElementBuilder.prototype,
-      this.NewElementBuilderFunctions
+      this.NewElementBuilderFunctions,
     );
     this.NewElementBuilderFunctions = null;
   }
-
-  require(req) {
-    return requireModule.has(req)
-      ? requireModule(req)
-      : EmberLoader.require(req);
-  }
 }
 
 export default class RenderTree {
@@ -412,7 +402,7 @@ export default class RenderTree {
 
     renderNode = this._matchRenderNodes(
       [...hints, ...remoteRoots, ...this.tree],
-      node
+      node,
     );
 
     if (renderNode) {
@@ -612,9 +602,11 @@ export default class RenderTree {
         this.inElementSupport?.remoteRoots.push(node);
       }
 
+      // EmberWormhole component from ember-wormhole was used to provide
+      // rendering into a given DOM element prior to built-in in-element.
       if (
-        this.inElementSupport?.Wormhole &&
-        node.instance instanceof this.inElementSupport.Wormhole.default
+        node.template ===
+        'ember-wormhole/templates/components/ember-wormhole.hbs'
       ) {
         this.inElementSupport?.remoteRoots.push(node);
         const bounds = node.bounds;
@@ -642,10 +634,11 @@ export default class RenderTree {
           node.args.named[attr.nodeName] = attr.nodeValue;
         });
         // move modifiers and components into the element children
+
         parentNode.children.forEach((child) => {
           if (
-            child.bounds.parentElement === node.instance ||
-            child.meta?.parentElement === node.instance ||
+            node.instance.contains(child.bounds.parentElement) ||
+            node.instance.contains(child.meta?.parentElement) ||
             (child.type === 'modifier' &&
               child.bounds.firstNode === node.instance)
           ) {
@@ -672,7 +665,7 @@ export default class RenderTree {
         }
         node.instance = this._createSimpleInstance(
           'TemplateOnlyComponent',
-          node.args.named
+          node.args.named,
         );
       }
 

package/ember_debug/libs/source-map.js

@@ -1,8 +1,9 @@
-import BaseObject from 'ember-debug/utils/base-object';
-import * as SourceMap from 'ember-debug/deps/source-map';
+import BaseObject from '../utils/base-object';
+import * as SourceMap from 'source-map-js';
 const notFoundError = new Error('Source map url not found');
 
 export default class extends BaseObject {
+  // eslint-disable-next-line ember/classic-decorator-hooks
   init() {
     super.init();
     this._lastPromise = Promise.resolve(undefined);
@@ -62,7 +63,7 @@ export default class extends BaseObject {
       function () {
         sourceMaps[url] = null;
       },
-      'ember-inspector'
+      'ember-inspector',
     );
   }
 }
@@ -81,7 +82,7 @@ function retrieveSourceMap(source) {
         return mapURL;
       },
       null,
-      'ember-inspector'
+      'ember-inspector',
     )
     .then(retrieveFile, null, 'ember-inspector')
     .then(
@@ -95,7 +96,7 @@ function retrieveSourceMap(source) {
         };
       },
       null,
-      'ember-inspector'
+      'ember-inspector',
     );
 }
 
@@ -142,7 +143,7 @@ function retrieveSourceMapURL(source) {
       return url;
     },
     null,
-    'ember-inspector'
+    'ember-inspector',
   );
 }
 

package/ember_debug/libs/view-inspection.js

@@ -1,6 +1,6 @@
-import classify from 'ember-debug/utils/classify';
-import bound from 'ember-debug/utils/bound-method';
-import getObjectName from '../utils/get-object-name';
+import classify from '../utils/classify';
+import bound from '../utils/bound-method';
+import getObjectName from '../utils/get-object-name.js';
 
 function makeHighlight(id) {
   return `<div id="ember-inspector-highlight-${id}" role="presentation"></div>`;
@@ -308,7 +308,7 @@ export default class ViewInspection {
     document.body.removeEventListener(
       'mousemove',
       bound(this, this.onMouseMove),
-      { capture: true }
+      { capture: true },
     );
 
     this.didStopInspecting();
@@ -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);
     }
   }
@@ -480,7 +488,7 @@ export default class ViewInspection {
 
   _renderTooltipCategory(node) {
     let category = this.tooltip.querySelector(
-      '.ember-inspector-tooltip-category'
+      '.ember-inspector-tooltip-category',
     );
 
     switch (node.type) {
@@ -498,7 +506,7 @@ export default class ViewInspection {
 
   _renderTooltipDetails(node) {
     let tbody = this.tooltip.querySelector(
-      '.ember-inspector-tooltip-details tbody'
+      '.ember-inspector-tooltip-details tbody',
     );
 
     tbody.innerHTML = '';
@@ -512,21 +520,21 @@ export default class ViewInspection {
         this._renderTooltipDetail(
           tbody,
           'Controller',
-          this._tokenizeItem(node.instance)
+          this._tokenizeItem(node.instance),
         );
       } else {
         this._renderTooltipDetail(
           tbody,
           'Instance',
-          this._tokenizeItem(node.instance)
+          this._tokenizeItem(node.instance),
         );
       }
       const detail =
         tbody.querySelector(
-          '.ember-inspector-tooltip-detail-instance > .ember-inspector-tooltip-token-tag'
+          '.ember-inspector-tooltip-detail-instance > .ember-inspector-tooltip-token-tag',
         ) ||
         tbody.querySelector(
-          '.ember-inspector-tooltip-detail-controller > .ember-inspector-tooltip-token-tag'
+          '.ember-inspector-tooltip-detail-controller > .ember-inspector-tooltip-token-tag',
         );
       if (detail) {
         detail.onclick = () => {
@@ -635,7 +643,7 @@ export default class ViewInspection {
     {
       // <my-app@component:foo-bar::ember123>
       let match = stringified.match(
-        /<([a-z0-9-_]+)@([a-z0-9-_]+):([a-z0-9-_]+)::([a-z0-9-_]+)>/i
+        /<([a-z0-9-_]+)@([a-z0-9-_]+):([a-z0-9-_]+)::([a-z0-9-_]+)>/i,
       );
 
       if (match) {
@@ -691,12 +699,12 @@ export default class ViewInspection {
       attachmentTop = top;
       this.tooltip.setAttribute(
         'class',
-        `ember-inspector-tooltip-attach-above`
+        `ember-inspector-tooltip-attach-above`,
       );
     } else {
       this.tooltip.setAttribute(
         'class',
-        `ember-inspector-tooltip-attach-below`
+        `ember-inspector-tooltip-attach-below`,
       );
     }
 
@@ -709,7 +717,7 @@ export default class ViewInspection {
       // within the viewport, but not so much that it will become detached.
       leftOffset = Math.max(
         highlightRect.left - safetyMargin,
-        safetyMargin - highlightRect.width
+        safetyMargin - highlightRect.width,
       );
     } else if (tooltipRect.right > viewportWidth) {
       // If the tooltip is partially offscreen to the right (because the tooltip
@@ -717,7 +725,7 @@ export default class ViewInspection {
       // not so much that it will become detached.
       leftOffset = Math.min(
         tooltipRect.right - viewportWidth,
-        tooltipRect.width - safetyMargin * 2
+        tooltipRect.width - safetyMargin * 2,
       );
       tooltipStyle.left = `${scrollX + attachmentLeft - leftOffset}px`;
     }

package/ember_debug/main.js

@@ -1,23 +1,20 @@
-import BasicAdapter from 'ember-debug/adapters/basic';
-import Port from 'ember-debug/port';
-import ObjectInspector from 'ember-debug/object-inspector';
-import GeneralDebug from 'ember-debug/general-debug';
-import RenderDebug from 'ember-debug/render-debug';
-import ViewDebug from 'ember-debug/view-debug';
-import RouteDebug from 'ember-debug/route-debug';
-import DataDebug from 'ember-debug/data-debug';
-import PromiseDebug from 'ember-debug/promise-debug';
-import ContainerDebug from 'ember-debug/container-debug';
-import DeprecationDebug from 'ember-debug/deprecation-debug';
-import Session from 'ember-debug/services/session';
-
-import { Application, Namespace } from 'ember-debug/utils/ember';
-import {
-  guidFor,
-  setGuidPrefix,
-} from 'ember-debug/utils/ember/object/internals';
-import { run } from 'ember-debug/utils/ember/runloop';
-import BaseObject from 'ember-debug/utils/base-object';
+import BasicAdapter from './adapters/basic';
+import Port from './port';
+import ObjectInspector from './object-inspector';
+import GeneralDebug from './general-debug';
+import RenderDebug from './render-debug';
+import ViewDebug from './view-debug';
+import RouteDebug from './route-debug';
+import DataDebug from './data-debug';
+import PromiseDebug from './promise-debug';
+import ContainerDebug from './container-debug';
+import DeprecationDebug from './deprecation-debug';
+import Session from './services/session';
+
+import { Application, Namespace } from './utils/ember';
+import { guidFor, setGuidPrefix } from './utils/ember/object/internals';
+import { run } from './utils/ember/runloop';
+import BaseObject from './utils/base-object';
 
 class EmberDebug extends BaseObject {
   /**
@@ -47,7 +44,7 @@ class EmberDebug extends BaseObject {
   }
 
   // Using object shorthand syntax here is somehow having strange side effects.
-  // eslint-disable-next-line object-shorthand
+
   Port = Port;
   Adapter = BasicAdapter;
 

package/ember_debug/models/profile-manager.js

@@ -1,8 +1,8 @@
-import ProfileNode from './profile-node';
-import Ember from 'ember-debug/utils/ember';
-import { compareVersion } from 'ember-debug/utils/version';
+import ProfileNode from './profile-node.js';
+import { VERSION } from '../utils/ember';
+import { compareVersion } from '../utils/version';
 
-import { later, scheduleOnce, cancel } from 'ember-debug/utils/ember/runloop';
+import { later, scheduleOnce, cancel } from '../utils/ember/runloop';
 
 function getEdges(first, last, closest) {
   let start = null;
@@ -75,7 +75,7 @@ export default class ProfileManager {
     this.stylesheet = insertStylesheet();
     // keep track of all the active highlights
     this.highlights = [];
-    this.isHighlightEnabled = compareVersion(Ember?.VERSION, '3.20.0') !== -1;
+    this.isHighlightEnabled = compareVersion(VERSION, '3.20.0') !== -1;
   }
 
   began(timestamp, payload, now) {
@@ -222,7 +222,7 @@ export default class ProfileManager {
           this.queue[entry.endedIndex].profileNode = this.began(
             entry.timestamp,
             entry.payload,
-            entry.now
+            entry.now,
           );
         }
       } else {

package/ember_debug/models/profile-node.js

@@ -3,7 +3,7 @@
 
   @class ProfileNode
 **/
-import { guidFor } from 'ember-debug/utils/ember/object/internals';
+import { guidFor } from '../utils/ember/object/internals';
 
 function get(obj, key) {
   return obj.get ? obj.get(key) : obj[key];

package/ember_debug/models/promise.js

@@ -1,5 +1,5 @@
-import { typeOf } from 'ember-debug/utils/type-check';
-import BaseObject from 'ember-debug/utils/base-object';
+import { typeOf } from '../utils/type-check';
+import BaseObject from '../utils/base-object';
 
 const dateComputed = function () {
   return function (target, propertyKey) {