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

package/app/components/object-inspector/properties-grouped.hbs

@@ -1,13 +1,13 @@
 {{#each @model.mixins as |mixin|}}
   <ObjectInspector::Accordion @mixin={{mixin}} as |accordion|>
     <div
-      class="mixin {{mixin.type}} {{if accordion.isExpanded "mixin_state_expanded"}} {{if mixin.properties.length "mixin_props_yes" "mixin_props_no"}}"
+      class="mixin {{mixin.type}} {{if accordion.isExpanded "mixin-state-expanded"}} {{if mixin.properties.length "mixin-props-yes" "mixin-props-no"}}"
       data-test-object-detail
     >
       {{#if mixin.properties.length}}
         <h2
           data-test-object-detail-name
-          class="mixin__name sticky top-0 truncate select-none cursor-default text-base15 bg-base01"
+          class="mixin-name sticky top-0 truncate select-none cursor-default text-base15 bg-base01"
           role="button"
           {{on "click" accordion.toggle}}
         >
@@ -15,14 +15,14 @@
         </h2>
       {{else}}
         <h2
-          class="mixin__name mixin__name--no-props sticky top-0 truncate select-none text-base09 cursor-default bg-base01"
+          class="mixin-name mixin-name--no-props sticky top-0 truncate select-none text-base09 cursor-default bg-base01"
           data-test-object-detail-name
         >
           {{mixin.name}}
         </h2>
       {{/if}}
       {{#if accordion.isExpanded}}
-        <ul class="mixin__properties m-0 text-base font-mono list-none">
+        <ul class="mixin-properties m-0 text-base font-mono list-none">
           <ObjectInspector::SortProperties
             @properties={{mixin.properties}} as |sortedProperties|
           >
@@ -36,7 +36,7 @@
                 @gotoSource={{fn this.gotoSource prop}}
               />
             {{else}}
-              <li class="mixin__property flex relative flex-row items-center truncate">No Properties</li>
+              <li class="mixin-property flex relative flex-row items-center truncate">No Properties</li>
             {{/each}}
           </ObjectInspector::SortProperties>
         </ul>

package/app/components/object-inspector/property.hbs

@@ -1,11 +1,11 @@
 <li
-  class="{{if this.isOverridden "mixin__property-state-overridden line-through"}} mixin__property flex flex-row relative items-center truncate"
+  class="{{if this.isOverridden "mixin-property-state-overridden line-through"}} mixin-property flex flex-row relative items-center truncate"
   data-test-object-property
 >
   {{!-- Disclosure Triangle --}}
   {{#if this.hasDependentKeys}}
     <button
-      class="mixin__cp-toggle {{if this.showDependentKeys "mixin__cp-toggle--expanded"}}"
+      class="mixin-cp-toggle {{if this.showDependentKeys "mixin-cp-toggle-expanded"}}"
       {{on "click" this.toggleDeps}}
       type="button"
     >
@@ -22,47 +22,49 @@
 
   {{!-- Property Icon --}}
   <span
-    class="mixin__property-icon-container flex-shrink-0"
+    class="mixin-property-icon-container flex-shrink-0"
     role="button"
     title={{if @model.code @model.code this.iconInfo.title}}
     {{on "click" this.toggleDeps}}
   >
-    <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 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"
-          class="mixin__property--group"
+          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}}
       <DatePropertyField
-        class="mixin__property-value-txt flex-1 text-base14 outline-none text-base bg-base01 js-object-property-value-date"
+        class="mixin-property-value-txt flex-1 text-base14 outline-none text-base bg-base01 js-object-property-value-date"
         @allowInput={{true}}
         @date={{readonly this.dateValue}}
         @dateFormat="Y-m-d"
@@ -71,7 +73,7 @@
       />
     {{else}}
       <ObjectInspector::PropertyField
-        class="mixin__property-value-txt flex-1 text-base14 text-base bg-base01 outline-none"
+        class="mixin-property-value-txt flex-1 text-base14 text-base bg-base01 outline-none"
         @value={{this.txtValue}}
         @insert-newline={{this.save}}
         @escape-press={{this.finishedEditing}}
@@ -83,17 +85,17 @@
     {{#if this.canCalculate}}
       <button
         data-test-calculate
-        class="mixin__calc-btn"
+        class="mixin-calc-btn"
         title="compute property"
         type="button"
-        {{on "click" @calculate bubbles=false}}
+        {{on "click" (stop-propagation @calculate)}}
       >
         {{svg-jar "calculate" width="16px" height="16px"}}
       </button>
     {{/if}}
     {{#if this.isDate}}
       <span
-        class="{{@model.value.type}} mixin__property-value truncate"
+        class="{{@model.value.type}} mixin-property-value truncate"
         role="button"
         {{on "click" this.dateClick}}
         data-test-object-property-value
@@ -102,7 +104,7 @@
       </span>
     {{else}}
       <span
-        class="{{@model.value.type}} {{if this.isService "type-service"}} mixin__property-value truncate"
+        class="{{@model.value.type}} {{if this.isService "type-service"}} mixin-property-value truncate"
         role="button"
         {{on "click" this.valueClick}}
         data-test-object-property-value
@@ -112,13 +114,13 @@
     {{/if}}
   {{/if}}
 
-  <span class="mixin__property-overridden-by absolute right-0 no-underline bg-spec00">
+  <span class="mixin-property-overridden-by absolute right-0 no-underline bg-spec00">
     (Overridden by {{@model.overridden}})
   </span>
 
   <button
     data-test-send-to-console-btn
-    class="mixin__send-btn flex-shrink-0 send-to-console"
+    class="mixin-send-btn flex-shrink-0 send-to-console"
     title="Send To Console"
     type="button"
     {{on "click" @sendToConsole}}
@@ -128,7 +130,7 @@
   {{#if this.isFunction}}
     <button
       data-test-goto-source-btn
-      class="mixin__send-btn flex-shrink-0 goto-source"
+      class="mixin-send-btn flex-shrink-0 goto-source"
       title="Goto Source"
       type="button"
       {{on "click" @gotoSource}}

package/app/components/object-inspector/property.ts

@@ -1,23 +1,29 @@
+/* eslint-disable @typescript-eslint/no-unsafe-argument, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-return */
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
+// eslint-disable-next-line ember/no-computed-properties-in-native-classes
 import { action, computed } from '@ember/object';
+// eslint-disable-next-line ember/no-computed-properties-in-native-classes
 import { alias, equal } from '@ember/object/computed';
 import { next } from '@ember/runloop';
 import parseText from 'ember-inspector/utils/parse-text';
 
-interface ObjectInspectorPropertyArgs {
-  model: any;
-  digDeeper: () => unknown;
-  gotoSource: () => void;
-  sendToConsole: () => void;
-  saveProperty: (
-    property: unknown,
-    value: unknown,
-    dataType: unknown
-  ) => unknown;
+interface ObjectInspectorPropertySignature {
+  Args: {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    model: any;
+    digDeeper: () => unknown;
+    gotoSource: () => void;
+    sendToConsole: () => void;
+    saveProperty: (
+      property: unknown,
+      value: unknown,
+      dataType: unknown,
+    ) => unknown;
+  };
 }
 
-export default class ObjectInspectorProperty extends Component<ObjectInspectorPropertyArgs> {
+export default class ObjectInspectorProperty extends Component<ObjectInspectorPropertySignature> {
   @tracked dateValue: Date | null = null;
   @tracked isDepsExpanded = false;
   @tracked isEdit = false;
@@ -41,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;
   }
@@ -66,10 +76,7 @@ export default class ObjectInspectorProperty extends Component<ObjectInspectorPr
 
   @computed('args.model.dependentKeys.[]', 'isCalculated')
   get hasDependentKeys() {
-    return (
-      this.args.model?.dependentKeys?.length &&
-      this.isCalculated
-    );
+    return this.args.model?.dependentKeys?.length && this.isCalculated;
   }
 
   get showDependentKeys() {
@@ -113,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' };
   }
 
@@ -121,8 +132,11 @@ export default class ObjectInspectorProperty extends Component<ObjectInspectorPr
   }
 
   get cannotEdit() {
-    if (this.args.model.name === '...' || !this.isCalculated || this.readOnly) return true;
-    return !['type-string', 'type-number', 'type-boolean'].includes(this.args.model?.value?.type);
+    if (this.args.model.name === '...' || !this.isCalculated || this.readOnly)
+      return true;
+    return !['type-string', 'type-number', 'type-boolean'].includes(
+      this.args.model?.value?.type,
+    );
   }
 
   @action
@@ -143,12 +157,14 @@ export default class ObjectInspectorProperty extends Component<ObjectInspectorPr
       return;
     }
 
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
     let value = this.args.model.value.inspect;
 
     if (this.isString) {
       value = this._quotedString(value);
     }
 
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
     this.txtValue = value;
     this.isEdit = true;
   }
@@ -168,6 +184,7 @@ export default class ObjectInspectorProperty extends Component<ObjectInspectorPr
 
   @action
   finishedEditing() {
+    // eslint-disable-next-line ember/no-runloop
     next(() => {
       this.isEdit = false;
     });

package/app/components/object-inspector/sort-properties.js

@@ -1,5 +1,7 @@
+// eslint-disable-next-line ember/no-computed-properties-in-native-classes
 import { map, sort } from '@ember/object/computed';
 import Component from '@glimmer/component';
+// eslint-disable-next-line ember/no-computed-properties-in-native-classes
 import { set, computed } from '@ember/object';
 import { A } from '@ember/array';
 
@@ -7,7 +9,10 @@ export default class SortProperties extends Component {
   @computed('args.properties')
   get isArray() {
     const props = A(this.args.properties || []);
-    return props.findBy('name', 'length') && props.findBy('name', '0');
+    return (
+      props.find((x) => x.name === 'length') &&
+      props.find((x) => x.name === '0')
+    );
   }
 
   /**
@@ -21,8 +26,11 @@ export default class SortProperties extends Component {
     // limit arrays
     let props = A(this.sorted);
     if (this.isArray) {
-      const item = props.findBy('name', 'length');
-      props.removeObject(item);
+      const item = props.find((x) => x.name === 'length');
+      const index = props.indexOf(item);
+      if (index !== -1) {
+        props.splice(index, 1);
+      }
       props.splice(0, 0, item);
     }
     if (this.isArray && this.sorted.length > 100) {
@@ -46,7 +54,7 @@ export default class SortProperties extends Component {
     set(
       p,
       'isFunction',
-      p.value.type === 'type-function' || p.value.type === 'type-asyncfunction'
+      p.value.type === 'type-function' || p.value.type === 'type-asyncfunction',
     );
     if (p.name == parseInt(p.name)) {
       set(p, 'name', parseInt(p.name));

package/app/components/object-inspector/toggle.hbs

@@ -0,0 +1,9 @@
+<button
+  class="object-inspector-toggle toolbar-icon-button"
+  type="button"
+  title="{{if this.layout.inspectorExpanded "hide" "show"}} object inspector"
+  ...attributes
+  {{on "click" this.layout.toggleInspector}}
+>
+  {{svg-jar "sidebar-toggle-trailing" width="16" height="16"}}
+</button>

package/app/components/object-inspector/toggle.js

@@ -0,0 +1,6 @@
+import Component from '@glimmer/component';
+import { inject as service } from '@ember/service';
+
+export default class PropertiesGrouped extends Component {
+  @service layout;
+}

package/app/components/object-inspector.hbs

@@ -1,9 +1,9 @@
 {{#if @model.length}}
-  <div class="split__panel__hd">
+  <div class="split-panel-hd">
     <div class="toolbar">
       <button
         data-test-object-inspector-back
-        class="toolbar__icon-button {{if this.isNested "enabled" "disabled"}}"
+        class="toolbar-icon-button {{if this.isNested "enabled" "disabled"}}"
         type="button"
         {{on "click" this.popStack}}
       >
@@ -49,11 +49,11 @@
     {{/if}}
   </div>
 
-  <div class="split__panel__bd">
+  <div class="split-panel-bd">
     <div class="toolbar object-inspector-toolbar">
       <button
         data-test-object-display-type-grouped
-        class="toolbar__radio toolbar__radio--first {{
+        class="toolbar-radio toolbar-radio-first {{
           if (eq this.propDisplayType "grouped") "active"
         }}"
         type="button"
@@ -63,7 +63,7 @@
       </button>
       <button
         data-test-object-display-type-all
-        class="toolbar__radio {{if (eq this.propDisplayType "all") "active"}}"
+        class="toolbar-radio {{if (eq this.propDisplayType "all") "active"}}"
         type="button"
         {{on "click" (fn this.setPropDisplay "all")}}
       >
@@ -72,7 +72,7 @@
 
       <Ui::ToolbarDivider />
 
-      <div class="toolbar__search relative mx-1">
+      <div class="toolbar-search relative mx-1">
         <Input
           id={{this.searchInputId}}
           @type="text"
@@ -83,7 +83,7 @@
         />
         {{#if this.customFilter}}
           <button
-            class="toolbar__icon-button toolbar__search-clear-button absolute right-0 w-auto h-auto"
+            class="toolbar-icon-button toolbar-search-clear-button absolute right-0 w-auto h-auto"
             title="clear"
             data-test-object-inspector-custom-search-clear
             type="button"
@@ -110,11 +110,13 @@
     {{else if (eq this.propDisplayType "grouped")}}
       <ObjectInspector::PropertiesGrouped @model={{@mixinDetails}} />
     {{/if}}
+    <Ui::ToolbarDivider />
+    <ObjectInspector::ComponentParents @select={{@selectComponent}} @item={{@item}}/>
   </div>
 {{else}}
-  <div class="split__panel__bd">
+  <div class="split-panel-bd">
     <Ui::EmptyMessage>
       No object selected
     </Ui::EmptyMessage>
   </div>
-{{/if}}
+{{/if}}

package/app/components/object-inspector.js

@@ -26,7 +26,7 @@ export default class ObjectInspector extends Component {
     if (nested.length === 0) {
       return '';
     }
-    return `.${nested.mapBy('property').join('.')}`;
+    return `.${nested.map((item) => item.property).join('.')}`;
   }
 
   get isNested() {

package/app/components/promise-item.hbs

@@ -1,20 +1,20 @@
 <@list.cell
-  class={{concat "list__cell_main " this.expandedClass}}
+  class={{concat "list-cell-main " this.expandedClass}}
   style={{this.labelStyle}}
   @on-click={{fn @toggleExpand @model}}
 >
-  <div class="list__cell-partial list__cell-partial_size_medium">
+  <div class="list-cell-partial list-cell-partial-size-medium">
     <span
       title={{this.label}}
       class="js-promise-label"
     >
-      <span class="list__cell-arrow"></span> {{this.label}}
+      <span class="list-cell-arrow"></span> {{this.label}}
     </span>
   </div>
-  <div class="list__cell-helper">
+  <div class="list-cell-helper">
     {{#if @model.hasStack}}
       <button
-        class="send-to-console send-to-console--chevron-only js-trace-promise-btn"
+        class="send-to-console send-to-console-chevron-only js-trace-promise-btn"
         title="Trace promise in console"
         {{on "click" (fn @tracePromise @model)}}
         type="button"
@@ -28,7 +28,7 @@
 
 <@list.cell>
   <div
-    class="pill pill--text font-bold js-promise-state"
+    class="pill pill-text font-bold js-promise-state"
     style={{this.style}}
   >
     {{this.state}}
@@ -38,12 +38,12 @@
 <@list.cell class="js-promise-value">
   {{#if this.hasValue}}
     <div
-      class="list__cell-partial list__cell-partial_size_medium"
+      class="list-cell-partial list-cell-partial-size-medium"
       title={{this.settledValue.inspect}}
     >
       {{#if this.isValueInspectable}}
         <span
-          class="list__link js-promise-object-value"
+          class="list-link js-promise-object-value"
           role="button"
           {{on "click" (fn @inspectObject this.settledValue.objectId)}}
         >
@@ -54,11 +54,11 @@
       {{/if}}
     </div>
 
-    <div class="list__cell-helper">
+    <div class="list-cell-helper">
       {{#if this.isError}}
         <button
           data-test-send-to-console-btn
-          class="send-to-console send-to-console--chevron-only"
+          class="send-to-console send-to-console-chevron-only"
           title="Send stack trace to the console"
           type="button"
           {{on "click" (fn @sendValueToConsole @model)}}
@@ -75,6 +75,6 @@
   {{/if}}
 </@list.cell>
 
-<@list.cell class="list__cell list__cell_value_numeric js-promise-time">
+<@list.cell class="list-cell list-cell-value_numeric js-promise-time">
   {{ms-to-time this.timeToSettle}}
 </@list.cell>

package/app/components/promise-item.js

@@ -1,4 +1,7 @@
+/* eslint-disable ember/no-get */
+// eslint-disable-next-line ember/no-computed-properties-in-native-classes
 import { computed, get } from '@ember/object';
+// eslint-disable-next-line ember/no-computed-properties-in-native-classes
 import { equal, gt, notEmpty } from '@ember/object/computed';
 import Component from '@glimmer/component';
 import { htmlSafe } from '@ember/template';
@@ -29,7 +32,7 @@ export default class PromiseItem extends Component {
 
   @computed(
     'args.{effectiveSearch,filter}',
-    'args.model.{isFulfilled,isPending,isRejected,state}'
+    'args.model.{isFulfilled,isPending,isRejected,state}',
   )
   get nodeStyle() {
     let relevant;
@@ -61,7 +64,7 @@ export default class PromiseItem extends Component {
     return htmlSafe(
       `padding-left: ${+get(this, 'args.model.level') * 20 + 5}px;${
         this.nodeStyle
-      }`
+      }`,
     );
   }
 
@@ -72,9 +75,9 @@ export default class PromiseItem extends Component {
     }
 
     if (get(this, 'args.model.isExpanded')) {
-      return 'list__cell_arrow_expanded';
+      return 'list-cell-arrow-expanded';
     } else {
-      return 'list__cell_arrow_collapsed';
+      return 'list-cell-arrow-collapsed';
     }
   }
 
@@ -139,8 +142,7 @@ export default class PromiseItem extends Component {
     let startedAt =
       get(this, 'args.model.parent.settledAt') ||
       get(this, 'args.model.createdAt');
-    let remaining =
-      get(this, 'args.model.settledAt').getTime() - startedAt.getTime();
+    let remaining = this.args.model.settledAt.getTime() - startedAt.getTime();
     return remaining;
   }
 }

package/app/components/promise-tree-toolbar.hbs

@@ -23,7 +23,7 @@
   <button
     class="{{
       if (eq @filter "all") "active"
-    }} toolbar__radio toolbar__radio--first js-filter"
+    }} toolbar-radio toolbar-radio-first js-filter"
     type="button"
     {{on "click" (fn @setFilter "all")}}
   >
@@ -31,14 +31,14 @@
   </button>
 
   <button
-    class="{{if (eq @filter "rejected") "active"}} toolbar__radio js-filter"
+    class="{{if (eq @filter "rejected") "active"}} toolbar-radio js-filter"
     type="button"
     {{on "click" (fn @setFilter "rejected")}}
   >
     Rejected
   </button>
   <button
-    class="{{if (eq @filter "pending") "active"}} toolbar__radio js-filter"
+    class="{{if (eq @filter "pending") "active"}} toolbar-radio js-filter"
     type="button"
     {{on "click" (fn @setFilter "pending")}}
   >
@@ -47,7 +47,7 @@
   <button
     class="{{
       if (eq @filter "fulfilled") "active"
-    }} toolbar__radio toolbar__radio--last js-filter"
+    }} toolbar-radio toolbar-radio-last js-filter"
     type="button"
     {{on "click" (fn @setFilter "fullfilled")}}
   >
@@ -56,7 +56,7 @@
 
   <Ui::ToolbarDivider />
 
-  <div class="toolbar__checkbox js-with-stack">
+  <div class="toolbar-checkbox js-with-stack">
     <label>
       <Input
         @type="checkbox"

package/app/components/records-toolbar.hbs

@@ -8,7 +8,7 @@
   <Ui::ToolbarDivider />
 
   <button
-    class="{{if (is-empty @filterValue) "active"}} toolbar__radio js-filter"
+    class="{{if (is-empty @filterValue) "active"}} toolbar-radio js-filter"
     type="button"
     {{on "click" (fn @setFilter "")}}
   >
@@ -19,7 +19,7 @@
     <button
       class="{{
         if (eq @filterValue filter.name) "active"
-      }} toolbar__radio js-filter"
+      }} toolbar-radio js-filter"
       type="button"
       {{on "click" (fn @setFilter filter.name)}}
     >

package/app/components/render-item.hbs

@@ -1,10 +1,10 @@
 <Ui::Disclosure as |disclosure|>
   <tr
     style={{this.nodeStyle}}
-    class="list__row js-render-profile-item"
+    class="list-row js-render-profile-item"
   >
     <@list.cell
-      class="list__cell_main js-render-main-cell"
+      class="list-cell-main js-render-main-cell"
       @on-click={{disclosure.toggle}}
       style={{this.nameStyle}}
     >
@@ -17,13 +17,13 @@
       </span>
     </@list.cell>
 
-    <@list.cell class="list__cell_value_numeric">
+    <@list.cell class="list-cell-value_numeric">
       <span class="pill js-render-profile-duration">
         {{ms-to-time @model.duration}}
       </span>
     </@list.cell>
 
-    <@list.cell class="list__cell_value_numeric js-render-profile-timestamp">
+    <@list.cell class="list-cell-value_numeric js-render-profile-timestamp">
       {{this.readableTime}}
     </@list.cell>
   </tr>