ember-inspector 4.13.1 → 4.15.0

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>

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);
     }
   }

package/app/components/side-nav.hbs

@@ -3,13 +3,13 @@
   {{did-insert this.setupListeners}}
   {{will-destroy this.destroyListeners}}
 >
-  <nav class="absolute inset-0 nav nav--main {{if @collapsed "nav--collapsed overflow-hidden"}}">
+  <nav class="absolute inset-0 nav nav-main {{if @collapsed "nav-collapsed overflow-hidden"}}">
     <ul>
       {{#each this.itemsToDisplay as |item|}}
         <li>
-          <LinkTo @route={{item.route}} class="nav__item" title={{item.title}}>
-            {{svg-jar item.icon width="20px" height="20px" class="nav__item-icon"}}
-            <span class="nav__item-label">{{item.label}}</span>
+          <LinkTo @route={{item.route}} class="nav-item" title={{item.title}}>
+            {{svg-jar item.icon width="20px" height="20px" class="nav-item-icon"}}
+            <span class="nav-item-label">{{item.label}}</span>
             {{#if item.pillCount}}
               <span class="pill">{{item.pillCount}}</span>
             {{/if}}
@@ -18,7 +18,7 @@
       {{/each}}
       {{#if (and @collapsed this.overflowItems.length)}}
         <li
-          class="{{if this.overflowItemIsActive "nav__overflow--active"}} nav__overflow relative flex items-center justify-center cursor-pointer"
+          class="{{if this.overflowItemIsActive "nav-overflow-active"}} nav-overflow relative flex items-center justify-center cursor-pointer"
           title="More options"
         >
           <select

package/app/components/side-nav.js

@@ -92,7 +92,7 @@ export default class SideNav extends Component {
 
   handleResize() {
     const containerHeight = this.element.clientHeight;
-    const item = this.element.querySelector('.nav__item');
+    const item = this.element.querySelector('.nav-item');
     const itemHeight = item.clientHeight;
 
     this.displayCount = Math.floor(containerHeight / itemHeight) - 1;

package/{lib/ui/addon/components → app/components/ui}/drag-handle.hbs

@@ -1,13 +1,13 @@
 {{! template-lint-disable no-pointer-down-event-binding }}
 <div
   class="drag-handle absolute top-0 bottom-0 cursor-col-resize {{
-    if this.isLeft "drag-handle--left"
-  }} {{if this.isRight "drag-handle--right"}} {{
-    if @faded "drag-handle--faded"
+    if this.isLeft "drag-handle-left"
+  }} {{if this.isRight "drag-handle-right"}} {{
+    if @faded "drag-handle-faded"
   }}"
   role="button"
   style={{this.style}}
   {{on "mousedown" this.mouseDownHandler}}
 >
-  <div class="drag-handle__border h-full pointer-events-none"></div>
+  <div class="drag-handle-border h-full pointer-events-none"></div>
 </div>

package/{lib/ui/addon/components → app/components/ui}/drag-handle.js

@@ -1,8 +1,10 @@
 import { equal } from '@ember/object/computed';
+// eslint-disable-next-line ember/no-classic-components
 import Component from '@ember/component';
 import { action, computed } from '@ember/object';
 import { htmlSafe } from '@ember/template';
 
+// eslint-disable-next-line ember/no-classic-classes
 export default Component.extend({
   tagName: '',
   position: 0,
@@ -83,7 +85,7 @@ export default Component.extend({
 
   style: computed('side', 'position', 'left', function () {
     return htmlSafe(
-      this.side ? `${this.side}: ${this.position + this.left}px;` : ''
+      this.side ? `${this.side}: ${this.position + this.left}px;` : '',
     );
   }),
 

package/{lib/ui/addon/components → app/components/ui}/empty-message.hbs

@@ -1,5 +1,5 @@
 <div class="empty-message flex flex-col items-center justify-center h-full text-center text-base11 text-4xl" ...attributes>
   {{svg-jar "ember-icon-empty" width="129px" height="129px"}}
-  <div class="empty-message__content pt-4 px-6">{{yield}}</div>
+  <div class="empty-message-content pt-4 px-6">{{yield}}</div>
 </div>
 

package/{lib/ui/addon/components → app/components/ui}/error-page.hbs

@@ -1,13 +1,13 @@
 <div class="error-page box-border overflow-auto absolute inset-0 flex text-base13 text-md bg-base02">
-  <div class="error-page__content box-border relative m-auto px-6 pb-6 rounded bg-base00">
-    <div class="error-page__header overflow-hidden relative flex items-center font-bold text-4xl">
+  <div class="error-page-content box-border relative m-auto px-6 pb-6 rounded bg-base00">
+    <div class="error-page-header overflow-hidden relative flex items-center font-bold text-4xl">
       <div class="flex-grow pt-6">
         {{@description}}
       </div>
       <img class="tomster" src="assets/images/fishy_tomster.png" alt="Fishy Tomster">
     </div>
 
-    <div class="error-page__body pb-2">
+    <div class="error-page-body pb-2">
       <div class="font-bold">
         Here are some common reasons this happens:
       </div>

package/{lib/ui/addon/components → app/components/ui}/resizable-column.js

@@ -4,7 +4,7 @@ import { htmlSafe } from '@ember/template';
 export default class ResizableColumn extends Component {
   get style() {
     return htmlSafe(
-      `-webkit-flex: none; flex: none; width: ${this.args.width}px;`
+      `-webkit-flex: none; flex: none; width: ${this.args.width}px;`,
     );
   }
 }

package/{lib/ui/addon/components → app/components/ui}/toolbar-clear-button.hbs

@@ -1,6 +1,6 @@
 <button
   title="clear"
-  class="toolbar__icon-button"
+  class="toolbar-icon-button"
   ...attributes
   {{on "click" @action}}
   type="button"

package/{lib/ui/addon/components → app/components/ui}/toolbar-reload-button.hbs

@@ -1,6 +1,6 @@
 <button
   title="Reload"
-  class="toolbar__icon-button"
+  class="toolbar-icon-button"
   ...attributes
   {{on "click" @action}}
   type="button"

package/{lib/ui/addon/components → app/components/ui}/toolbar-search-field.hbs

@@ -1,4 +1,4 @@
-<div class="toolbar__search relative mx-1" ...attributes>
+<div class="toolbar-search relative mx-1" ...attributes>
   <Input
     id={{this.inputId}}
     @type="text"
@@ -9,7 +9,7 @@
 
   {{#if @value}}
     <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-search-field-clear-button
       {{on "click" this.clear}}

package/app/computed/{debounce.js → debounce.ts}

@@ -1,15 +1,16 @@
 import { debounce } from '@ember/runloop';
-import { computed } from '@ember/object';
+import { computed, set } from '@ember/object';
+import type { AnyFn } from '@ember/-internals/utility-types';
 
 // Use this if you want a property to debounce
 // another property with a certain delay.
 // This means that every time this prop changes,
 // the other prop will change to the same val after [delay]
-export default function (prop, delay, callback) {
-  let value;
+export default function (prop: string, delay: number, callback?: AnyFn) {
+  let value: unknown;
 
-  let updateVal = function () {
-    this.set(prop, value);
+  const updateVal = function (this: object) {
+    set(this, prop, value);
     if (callback) {
       callback.call(this);
     }
@@ -20,6 +21,7 @@ export default function (prop, delay, callback) {
     get() {},
     set(key, val) {
       value = val;
+      // eslint-disable-next-line ember/no-runloop
       debounce(this, updateVal, delay);
       return val;
     },