ember-inspector 4.13.1 → 4.15.0

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) {

package/ember_debug/object-inspector.js

@@ -1,13 +1,13 @@
 /* eslint-disable ember/no-private-routing-service */
-import DebugPort from './debug-port';
-import bound from 'ember-debug/utils/bound-method';
+import DebugPort from './debug-port.js';
+import bound from './utils/bound-method';
 import {
   isComputed,
   getDescriptorFor,
   typeOf,
   inspect,
-} from 'ember-debug/utils/type-check';
-import { compareVersion } from 'ember-debug/utils/version';
+} from './utils/type-check';
+import { compareVersion } from './utils/version';
 import {
   EmberObject,
   meta as emberMeta,
@@ -16,28 +16,30 @@ import {
   ObjectProxy,
   ArrayProxy,
   Service,
+  InternalsMetal,
   Component,
-} from 'ember-debug/utils/ember';
-import { cacheFor, guidFor } from 'ember-debug/utils/ember/object/internals';
-import { _backburner, join } from 'ember-debug/utils/ember/runloop';
-import emberNames from './utils/ember-object-names';
-import getObjectName from './utils/get-object-name';
-import { EmberLoader } from 'ember-debug/utils/ember/loader';
-
-const GlimmerComponent = (() => {
-  try {
-    return EmberLoader.require('@glimmer/component').default;
-  } catch (e) {
-    // ignore, return undefined
-  }
-})();
+  GlimmerComponent,
+  GlimmerReference,
+  GlimmerValidator,
+  getOwner,
+} from './utils/ember';
+import { cacheFor, guidFor } from './utils/ember/object/internals';
+import { _backburner, join } from './utils/ember/runloop';
+import emberNames from './utils/ember-object-names.js';
+import getObjectName from './utils/get-object-name.js';
 
 let tagValue, tagValidate, track, tagForProperty;
 
-try {
-  // Try to load the most recent library
-  let GlimmerValidator = EmberLoader.require('@glimmer/validator');
+const GlimmerDebugComponent = (() => GlimmerComponent?.default)();
+
+const OWNER_SYMBOL = '__owner__'; // can't use actual symbol because it can't be cloned
 
+// Try to use the most recent library (GlimmerValidator), else
+// fallback on the previous implementation (GlimmerReference).
+// The global checks if the inspected app is Vite, in that case
+// we can't execute that block because the properties it tries to
+// assign are readonly.
+if (GlimmerValidator && !globalThis.emberInspectorApps) {
   tagValue = GlimmerValidator.value || GlimmerValidator.valueForTag;
   tagValidate = GlimmerValidator.validate || GlimmerValidator.validateTag;
   track = GlimmerValidator.track;
@@ -70,26 +72,15 @@ try {
     }
     return r;
   };
-} catch (e) {
-  try {
-    // Fallback to the previous implementation
-    let GlimmerReference = EmberLoader.require('@glimmer/reference');
-
-    tagValue = GlimmerReference.value;
-    tagValidate = GlimmerReference.validate;
-  } catch (e) {
-    // ignore
-  }
+} else if (GlimmerReference) {
+  tagValue = GlimmerReference.value;
+  tagValidate = GlimmerReference.validate;
 }
 
-try {
-  let metal = EmberLoader.require('@ember/-internals/metal');
-
-  tagForProperty = metal.tagForProperty;
+if (InternalsMetal) {
+  tagForProperty = InternalsMetal.tagForProperty;
   // If track was not already loaded, use metal's version (the previous version)
-  track = track || metal.track;
-} catch (e) {
-  // ignore
+  track = track || InternalsMetal.track;
 }
 
 const HAS_GLIMMER_TRACKING = tagValue && tagValidate && track && tagForProperty;
@@ -178,7 +169,7 @@ function getTrackedDependencies(object, property, tagInfo) {
   const dependentKeys = [];
   if (cpDesc) {
     dependentKeys.push(
-      ...(cpDesc._dependentKeys || []).map((k) => ({ name: k }))
+      ...(cpDesc._dependentKeys || []).map((k) => ({ name: k })),
     );
   }
   if (HAS_GLIMMER_TRACKING) {
@@ -309,7 +300,7 @@ export default class extends DebugPort {
                 dependentKeys = getTrackedDependencies(
                   object,
                   item.name,
-                  tracked[item.name]
+                  tracked[item.name],
                 );
                 tracked[item.name].revision = tagValue(tracked[item.name].tag);
               }
@@ -324,7 +315,7 @@ export default class extends DebugPort {
                 dependentKeys,
               });
             }
-          } catch (e) {
+          } catch {
             // dont do anything
           }
         });
@@ -332,6 +323,7 @@ export default class extends DebugPort {
     }
   }
 
+  // eslint-disable-next-line ember/classic-decorator-hooks
   init() {
     super.init();
     this.sentObjects = {};
@@ -370,7 +362,7 @@ export default class extends DebugPort {
         value = this.valueForObjectProperty(
           message.objectId,
           message.property,
-          message.mixinIndex
+          message.mixinIndex,
         );
         if (value) {
           this.sendMessage('updateProperty', value);
@@ -451,7 +443,7 @@ export default class extends DebugPort {
           }
           this.adapter.log(
             `Object Inspector error for ${error.property}`,
-            stack
+            stack,
           );
         });
       },
@@ -505,6 +497,8 @@ export default class extends DebugPort {
 
     if (prop === null || prop === undefined) {
       value = this.sentObjects[objectId];
+    } else if (prop === OWNER_SYMBOL) {
+      value = getOwner(this.sentObjects[objectId]);
     } else {
       value = calculateCP(object, { name: prop }, {});
     }
@@ -546,7 +540,7 @@ export default class extends DebugPort {
   sendObject(object) {
     if (!this.canSend(object)) {
       throw new Error(
-        `Can't inspect ${object}. Only Ember objects and arrays are supported.`
+        `Can't inspect ${object}. Only Ember objects and arrays are supported.`,
       );
     }
     let details = this.mixinsForObject(object);
@@ -629,6 +623,7 @@ export default class extends DebugPort {
    * - Bar
    * - Foo
    * - EmberObject
+   * - Owner (Container)
    * ```
    *
    * The "mixins" returned by this function directly represent these things too.
@@ -670,7 +665,7 @@ export default class extends DebugPort {
           if (name === '(unknown)') {
             name = '(unknown mixin)';
           }
-        } catch (e) {
+        } catch {
           name = '(Unable to convert Object to string)';
         }
       }
@@ -745,9 +740,30 @@ export default class extends DebugPort {
       mixinDetails,
       errorsForObject,
       expensiveProperties,
-      tracked
+      tracked,
     );
 
+    const owner = getOwner(object);
+    const ownerId = guidFor(owner);
+
+    if (owner && !mixinDetails.find((mixin) => mixin.id === ownerId)) {
+      mixinDetails.push({
+        name: 'Container',
+        id: ownerId,
+        expand: false,
+        properties: [
+          {
+            name: OWNER_SYMBOL,
+            value: {
+              inspect: `<Owner:${ownerId}>`,
+              type: 'type-owner',
+              objectId: ownerId,
+            },
+          },
+        ],
+      });
+    }
+
     this.currentObject = { object, mixinDetails, objectId };
 
     let errors = errorsToSend(errorsForObject);
@@ -764,7 +780,7 @@ export default class extends DebugPort {
       value = calculateCP(
         object,
         { name: property },
-        this._errorsFor[objectId]
+        this._errorsFor[objectId],
       );
     }
 
@@ -913,18 +929,7 @@ function addProperties(properties, hash) {
     let options = { isMandatorySetter: isMandatorySetter(desc) };
 
     if (typeof hash[prop] === 'object' && hash[prop] !== null) {
-      options.isService =
-        !('type' in hash[prop]) && hash[prop].type === 'service';
-
-      if (!options.isService) {
-        if (hash[prop].constructor) {
-          options.isService = hash[prop].constructor.isServiceFactory;
-        }
-      }
-
-      if (!options.isService) {
-        options.isService = desc.value instanceof Service;
-      }
+      options.isService = desc.value instanceof Service;
     }
     if (options.isService) {
       replaceProperty(properties, prop, inspectValue(hash, prop), options);
@@ -934,7 +939,7 @@ function addProperties(properties, hash) {
     if (isComputed(hash, prop)) {
       options.isComputed = true;
       options.dependentKeys = (desc._dependentKeys || []).map((key) =>
-        key.toString()
+        key.toString(),
       );
 
       if (typeof desc.get === 'function') {
@@ -1085,7 +1090,7 @@ function calculateCPs(
   mixinDetails,
   errorsForObject,
   expensiveProperties,
-  tracked
+  tracked,
 ) {
   expensiveProperties = expensiveProperties || [];
   mixinDetails.forEach((mixin) => {
@@ -1113,7 +1118,7 @@ function calculateCPs(
             item.dependentKeys = getTrackedDependencies(
               object,
               item.name,
-              tagInfo
+              tagInfo,
             );
             tagInfo.revision = tagValue(tagInfo.tag);
           } else {
@@ -1126,6 +1131,9 @@ function calculateCPs(
               item.code = '';
             }
           }
+          if (value instanceof Service) {
+            item.isService = true;
+          }
         }
       }
     });
@@ -1282,9 +1290,9 @@ function getDebugInfo(object) {
       'domManager',
       'states',
       'element',
-      'targetObject'
+      'targetObject',
     );
-  } else if (GlimmerComponent && object instanceof GlimmerComponent) {
+  } else if (GlimmerDebugComponent && object instanceof GlimmerDebugComponent) {
     // These properties don't really exist on Glimmer Components, but
     // reading their values trigger a development mode assertion. The
     // more correct long term fix is to make getters lazy (shows "..."
@@ -1304,8 +1312,9 @@ function calculateCP(object, item, errorsForObject) {
   delete errorsForObject[property];
   try {
     if (object instanceof ArrayProxy && property == parseInt(property)) {
-      return object.objectAt(property);
+      return object.at(property);
     }
+
     return item.isGetter || property.includes?.('.')
       ? object[property]
       : object.get?.(property) || object[property]; // need to use `get` to be able to detect tracked props

package/ember_debug/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "ember-debug",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "watch": "pnpm build --watch",
+    "build": "rollup --config",
+    "prepare": "pnpm build"
+  },
+  "devDependencies": {
+    "@babel/plugin-proposal-decorators": "^7.25.9",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
+    "@rollup/plugin-babel": "^6.0.4",
+    "@rollup/plugin-commonjs": "^28.0.3",
+    "@rollup/plugin-node-resolve": "^16.0.1",
+    "backburner.js": "^2.8.0",
+    "glob": "^11.0.2",
+    "rollup": "^4.39.0",
+    "rollup-plugin-delete": "^3.0.1",
+    "source-map-js": "^1.2.1"
+  },
+  "exports": {
+    "./*": "./dist/*.js"
+  }
+}

package/ember_debug/port.js

@@ -1,7 +1,7 @@
-import { guidFor } from 'ember-debug/utils/ember/object/internals';
-import { run } from 'ember-debug/utils/ember/runloop';
-import BaseObject from 'ember-debug/utils/base-object';
-import Evented from 'ember-debug/utils/evented';
+import { guidFor } from './utils/ember/object/internals';
+import { run } from './utils/ember/runloop';
+import BaseObject from './utils/base-object';
+import Evented from './utils/evented';
 
 export default class extends BaseObject {
   constructor(data) {
@@ -35,6 +35,7 @@ export default class extends BaseObject {
     return guidFor(this.namespace?._application, 'ember');
   }
 
+  // eslint-disable-next-line ember/classic-decorator-hooks
   init() {
     /**
      * Stores the timestamp when it was first accessed.

package/ember_debug/promise-debug.js

@@ -1,7 +1,7 @@
-import DebugPort from './debug-port';
-import PromiseAssembler from 'ember-debug/libs/promise-assembler';
-import { debounce } from 'ember-debug/utils/ember/runloop';
-import RSVP from 'ember-debug/utils/rsvp';
+import DebugPort from './debug-port.js';
+import PromiseAssembler from './libs/promise-assembler';
+import { debounce } from './utils/ember/runloop';
+import { RSVP } from './utils/ember';
 
 export default class extends DebugPort {
   get objectInspector() {
@@ -134,7 +134,7 @@ export default class extends DebugPort {
     }
     // Remove inspector-created promises
     uniquePromises = uniquePromises.filter(
-      (promise) => promise.label !== 'ember-inspector'
+      (promise) => promise.label !== 'ember-inspector',
     );
     const serialized = this.serializeArray(uniquePromises);
     this.sendMessage('promisesUpdated', {

package/ember_debug/render-debug.js

@@ -1,9 +1,9 @@
-import DebugPort from './debug-port';
-import ProfileManager from './models/profile-manager';
+import DebugPort from './debug-port.js';
+import ProfileManager from './models/profile-manager.js';
 
-import { subscribe } from 'ember-debug/utils/ember/instrumentation';
-import { _backburner } from 'ember-debug/utils/ember/runloop';
-import bound from 'ember-debug/utils/bound-method';
+import { subscribe } from './utils/ember';
+import { _backburner } from './utils/ember/runloop';
+import bound from './utils/bound-method';
 
 // Initial setup, that has to occur before the EmberObject init for some reason
 let profileManager = new ProfileManager();

package/ember_debug/rollup.config.js

@@ -0,0 +1,24 @@
+import { nodeResolve } from '@rollup/plugin-node-resolve';
+import commonjs from '@rollup/plugin-commonjs';
+import { babel } from '@rollup/plugin-babel';
+import { globSync } from 'glob';
+import del from 'rollup-plugin-delete';
+
+export default {
+  input: [
+    'main.js',
+    'utils/version.js',
+    'utils/type-check.js',
+    'port.js',
+    'utils/ember.js',
+    'models/profile-node.js',
+    'libs/promise-assembler.js',
+    'lib/versions.js',
+    ...globSync('entrypoints/*.js'),
+  ],
+  output: {
+    dir: 'dist',
+  },
+
+  plugins: [babel(), nodeResolve(), commonjs(), del({ targets: 'dist' })],
+};