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

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,23 +22,23 @@
 
   {{!-- 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"
+    class="mixin-property-name text-base14 truncate"
     data-test-object-property-name
   >
     {{#if this.isService}}
       <span
         title="service"
-        class="mixin__property--group"
+        class="mixin-property--group"
         data-test-property-name-service
       >
         {{@model.name}}
@@ -47,7 +47,7 @@
       {{#if this.hasDependentKeys}}
         <span
           title="computed"
-          class="mixin__property--group"
+          class="mixin-property--group"
         >
           {{@model.name}}
         </span>
@@ -62,7 +62,7 @@
   {{#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 +71,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 +83,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 +102,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 +112,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 +128,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;
@@ -66,10 +72,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() {
@@ -121,8 +124,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 +149,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 +176,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.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"
@@ -112,7 +112,7 @@
     {{/if}}
   </div>
 {{else}}
-  <div class="split__panel__bd">
+  <div class="split-panel-bd">
     <Ui::EmptyMessage>
       No object selected
     </Ui::EmptyMessage>

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>

package/app/components/render-item.ts

@@ -1,10 +1,13 @@
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
 import Component from '@glimmer/component';
 import { isEmpty } from '@ember/utils';
 import { htmlSafe } from '@ember/template';
 import escapeRegExp from 'ember-inspector/utils/escape-reg-exp';
 
 interface RenderItemArgs {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   list: any;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   model: any;
   search: string;
   target: { level: number };
@@ -16,7 +19,7 @@ export default class RenderItem extends Component<RenderItemArgs> {
   }
 
   get level() {
-    let parentLevel = this.args.target?.level ?? -1;
+    const parentLevel = this.args.target?.level ?? -1;
 
     return parentLevel + 1;
   }
@@ -34,26 +37,26 @@ export default class RenderItem extends Component<RenderItemArgs> {
   }
 
   get readableTime() {
-    let d = new Date(this.args.model?.timestamp);
-    let ms = d.getMilliseconds();
-    let seconds = d.getSeconds();
-    let minutes =
+    const d = new Date(this.args.model?.timestamp as string);
+    const ms = d.getMilliseconds();
+    const seconds = d.getSeconds();
+    const minutes =
       d.getMinutes().toString().length === 1
         ? `0${d.getMinutes()}`
         : d.getMinutes();
-    let hours =
+    const hours =
       d.getHours().toString().length === 1 ? `0${d.getHours()}` : d.getHours();
 
     return `${hours}:${minutes}:${seconds}:${ms}`;
   }
 
   get searchMatch() {
-    let search = this.args.search;
+    const search = this.args.search;
     if (isEmpty(search)) {
       return true;
     }
-    let name = this.args.model?.name;
-    let regExp = new RegExp(escapeRegExp(search.toLowerCase()) as string);
+    const name = this.args.model?.name as string;
+    const regExp = new RegExp(escapeRegExp(search.toLowerCase()) as string);
     return !!name.toLowerCase().match(regExp);
   }
 }

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

@@ -17,7 +17,7 @@
     class="js-render-profiles-search"
   />
   {{#if @isHighlightEnabled}}
-    <div class="toolbar__checkbox js-hightlight-render">
+    <div class="toolbar-checkbox js-hightlight-render">
       <label>
         <Input
           data-test-options-highlight-render

package/app/components/route-cell-name.hbs

@@ -3,7 +3,7 @@
     title={{@route.value.name}}
     class={{concat
       "js-route-name"
-      (if this.isCurrent " pill pill--blue pill--text font-bold")
+      (if this.isCurrent " pill pill-blue pill-text font-bold")
     }}
   >
     {{@route.value.name}}

package/app/components/route-cell-name.js

@@ -1,4 +1,5 @@
-import { computed, get } from '@ember/object';
+// eslint-disable-next-line ember/no-computed-properties-in-native-classes
+import { computed } from '@ember/object';
 import Component from '@glimmer/component';
 import { htmlSafe } from '@ember/template';
 import checkCurrentRoute from 'ember-inspector/utils/check-current-route';
@@ -7,7 +8,7 @@ export default class RouteCellName extends Component {
   @computed('args.route.parentCount')
   get labelStyle() {
     return htmlSafe(
-      `padding-left: ${+get(this, 'args.route.parentCount') * 20 + 5}px;`
+      `padding-left: ${+this.args.route?.parentCount * 20 + 5}px;`,
     );
   }
 

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

@@ -1,12 +1,12 @@
 <div class="toolbar">
-  <div class="toolbar__checkbox js-filter-hide-routes">
+  <div class="toolbar-checkbox js-filter-hide-routes">
     <label>
       <Input @type="checkbox" @checked={{@options.hideRoutes}} />
       Current Route only
     </label>
   </div>
 
-  <div class="toolbar__checkbox js-filter-hide-substates">
+  <div class="toolbar-checkbox js-filter-hide-substates">
     <label title="Hide loading and error substates">
       <Input @type="checkbox" @checked={{@options.hideSubstates}} />
       Hide Substates

package/app/components/scroll-container.js

@@ -1,4 +1,5 @@
 /* eslint-disable ember/require-tagless-components */
+// eslint-disable-next-line ember/no-classic-components
 import Component from '@ember/component';
 import { action } from '@ember/object';
 import { debounce } from '@ember/runloop';
@@ -60,6 +61,7 @@ export default class ScrollContainerComponent extends Component {
       this.lastIndex = index;
       this.lastItem = currentItem;
 
+      // eslint-disable-next-line ember/no-runloop
       debounce(this, this.scrollIntoViewIfNeeded, 50);
     }
   }