Add owner to the list of properties of an object (#2680)

Author: mansona

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

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

app/components/object-inspector/property.hbs

@@ -30,34 +30,36 @@
     <span class="mixin-property-icon mixin-property-icon-{{this.iconInfo.type}} inline-block rounded font-mono text-md text-white text-center select-none"></span>
   </span>
 
-  {{!-- Property Name --}}
-  <span
-    class="mixin-property-name text-base14 truncate"
-    data-test-object-property-name
-  >
-    {{#if this.isService}}
-      <span
-        title="service"
-        class="mixin-property--group"
-        data-test-property-name-service
-      >
-        {{@model.name}}
-      </span>
-    {{else}}
-      {{#if this.hasDependentKeys}}
+  {{#unless this.isOwner}}
+    {{!-- Property Name --}}
+    <span
+      class="mixin-property-name text-base14 truncate"
+      data-test-object-property-name
+    >
+      {{#if this.isService}}
         <span
-          title="computed"
+          title="service"
           class="mixin-property--group"
+          data-test-property-name-service
         >
           {{@model.name}}
         </span>
       {{else}}
-        {{@model.name}}
+        {{#if this.hasDependentKeys}}
+          <span
+            title="computed"
+            class="mixin-property--group"
+          >
+            {{@model.name}}
+          </span>
+        {{else}}
+          {{@model.name}}
+        {{/if}}
       {{/if}}
-    {{/if}}
-  </span>
+    </span>
 
-  <span class="mr-1">: </span>
+    <span class="mr-1">: </span>
+  {{/unless}}
 
   {{#if this.isEdit}}
     {{#if this.isDate}}

app/components/object-inspector/property.ts

@@ -47,6 +47,10 @@ export default class ObjectInspectorProperty extends Component<ObjectInspectorPr
   @equal('args.model.value.type', 'type-string')
   isString!: boolean;
 
+  get isOwner() {
+    return this.args.model?.value?.type === 'type-owner';
+  }
+
   get isService() {
     return this.args.model?.isService;
   }
@@ -116,6 +120,10 @@ export default class ObjectInspectorProperty extends Component<ObjectInspectorPr
       return { type: 'getter', title: 'Getter' };
     }
 
+    if (this.isOwner) {
+      return { type: 'owner', title: 'Owner' };
+    }
+
     return { type: 'n/a', title: 'N/A' };
   }
 

app/styles/object_inspector.scss

@@ -120,3 +120,11 @@
     content: "T";
   }
 }
+
+.mixin-property-icon-owner {
+  background-color: var(--spec02);
+
+  &::before {
+    content: "O";
+  }
+}

ember_debug/object-inspector.js

@@ -21,6 +21,7 @@ import {
   GlimmerComponent,
   GlimmerReference,
   GlimmerValidator,
+  getOwner,
 } from './utils/ember';
 import { cacheFor, guidFor } from './utils/ember/object/internals';
 import { _backburner, join } from './utils/ember/runloop';
@@ -31,6 +32,8 @@ let tagValue, tagValidate, track, tagForProperty;
 
 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).
 if (GlimmerValidator) {
@@ -491,6 +494,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 }, {});
     }
@@ -615,6 +620,7 @@ export default class extends DebugPort {
    * - Bar
    * - Foo
    * - EmberObject
+   * - Owner (Container)
    * ```
    *
    * The "mixins" returned by this function directly represent these things too.
@@ -734,6 +740,27 @@ export default class extends DebugPort {
       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);
@@ -1284,6 +1311,7 @@ function calculateCP(object, item, errorsForObject) {
     if (object instanceof ArrayProxy && property == parseInt(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

ember_debug/utils/ember.js

@@ -52,7 +52,8 @@ let ArrayProxy,
   computed,
   EmberObject,
   captureRenderTree,
-  getEnv;
+  getEnv,
+  getOwner;
 
 let Debug = emberSafeRequire('@ember/debug');
 let InternalsMetal = emberSafeRequire('@ember/-internals/metal');
@@ -72,6 +73,8 @@ let GlimmerReference = emberSafeRequire('@glimmer/reference');
 let GlimmerRuntime = emberSafeRequire('@glimmer/runtime');
 let GlimmerUtil = emberSafeRequire('@glimmer/util');
 let GlimmerValidator = emberSafeRequire('@glimmer/validator');
+let EmberOwner = emberSafeRequire('@ember/owner');
+let EmberApplication = emberSafeRequire('@ember/application');
 
 let inspect = Debug?.inspect || InternalsUtils?.inspect;
 let subscribe = Instrumentation?.subscribe;
@@ -142,6 +145,12 @@ if (Ember) {
   get = emberSafeRequire('@ember/object')?.get;
 }
 
+if (EmberOwner) {
+  getOwner = EmberOwner.getOwner;
+} else {
+  getOwner = EmberApplication.getOwner;
+}
+
 export {
   Runloop,
   Debug,
@@ -188,4 +197,5 @@ export {
   GlimmerRuntime,
   GlimmerUtil,
   GlimmerValidator,
+  getOwner,
 };

tests/ember_debug/object-inspector-test.js

@@ -23,6 +23,7 @@ import EmberDebug from 'ember-debug/main';
 import setupEmberDebugTest from '../helpers/setup-ember-debug-test';
 import EmberRoute from '@ember/routing/route';
 import Controller from '@ember/controller';
+import { setOwner } from '@ember/application';
 
 const GlimmerComponent = (function () {
   try {
@@ -1224,6 +1225,59 @@ module('Ember Debug - Object Inspector', function (hooks) {
         'inspector: updateProperty',
       ]);
     });
+
+    test('Inspected objects pass along their owner they have one', async function (assert) {
+      class Owner {}
+      class Foo {
+        bar = 'baz';
+      }
+
+      let owner = new Owner();
+      let inspected = new Foo();
+      let message = await inspectObject(inspected);
+      let ownerId = guidFor(owner);
+
+      assert.false(
+        message.details.some(({ name }) => name === 'Container'),
+        "Objects without an owner don't report an undefined owner in their last details object",
+      );
+      assert.strictEqual(message.details.length, 2);
+
+      setOwner(inspected, owner);
+
+      message = await inspectObject(inspected);
+
+      assert.strictEqual(
+        message.details.length,
+        3,
+        'Object with owner have an additional details object',
+      );
+
+      assert.strictEqual(
+        message.details.filter(({ name }) => name === 'Container').length,
+        1,
+        'Objects with an owner have exactly one container item in their details',
+      );
+      assert.deepEqual(
+        message.details.at(-1),
+        {
+          id: ownerId,
+          name: 'Container',
+          expand: false,
+          properties: [
+            {
+              name: '__owner__',
+              value: {
+                inspect: `<Owner:${ownerId}>`,
+                objectId: ownerId,
+                type: 'type-owner',
+              },
+            },
+          ],
+        },
+        'the container is the last mixin in the list',
+      );
+    });
   }
 
   // @glimmer/component 1.0 doesn't seem to support 3.4, even though it has the manager API