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

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

package/app/config/environment.d.ts

@@ -1,14 +1,17 @@
 /**
  * Type declarations for
- *    import config from 'my-app/config/environment'
+ *    import config from 'ember-inspector/config/environment'
  */
 declare const config: {
+  emberVersionsSupported: [fromVersion: string, tillVersion: string];
   environment: string;
   modulePrefix: string;
   podModulePrefix: string;
-  locationType: 'history' | 'hash' | 'none' | 'auto';
+  locationType: 'history' | 'hash' | 'none';
+  previousEmberVersionsSupported: Array<string>;
   rootURL: string;
   APP: Record<string, unknown>;
+  VERSION: string;
 };
 
 export default config;

package/app/controllers/app-config.js

@@ -1,3 +1,4 @@
+// eslint-disable-next-line ember/no-computed-properties-in-native-classes
 import { computed } from '@ember/object';
 import Controller from '@ember/controller';
 

package/app/controllers/application.js

@@ -1,19 +1,19 @@
-import Controller from '@ember/controller';
+import Controller, { inject as controller } from '@ember/controller';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
-import { equal } from '@ember/object/computed';
 import { debounce, schedule } from '@ember/runloop';
 import { inject as service } from '@ember/service';
 
+import { TrackedArray, TrackedObject } from 'tracked-built-ins';
+
 export default class ApplicationController extends Controller {
+  @controller('component-tree') componentTreeController;
+
   /**
    * Service used to broadcast changes to the application's layout
    * such as toggling of the object inspector.
-   *
-   * @property layoutService
-   * @type {Service}
    */
-  @service('layout') layoutService;
+  @service layout;
   @service port;
 
   // Indicates that the extension window is focused,
@@ -21,17 +21,16 @@ export default class ApplicationController extends Controller {
   @tracked isDragging = false;
   @tracked contentHeight = null;
   @tracked deprecationCount = 0;
-  @tracked inspectorExpanded = false;
   @tracked inspectorWidth = 360;
   /**
    * Indicates if the inspector has detected an ember app.
-   *
-   * @type {Boolean}
    */
   isEmberApplication = false;
   @tracked _navWidthExpanded = 180;
   @tracked _navWidthCollapsed = 48;
   @tracked navIsCollapsed = false;
+  @tracked mixinDetails = new TrackedObject({});
+  @tracked mixinStack = new TrackedArray([]);
 
   get navWidth() {
     return this.navIsCollapsed
@@ -43,14 +42,8 @@ export default class ApplicationController extends Controller {
     this._navWidthExpanded = value;
   }
 
-  @equal('port.adapter.name', 'chrome')
-  isChrome;
-
-  constructor() {
-    super(...arguments);
-
-    this.mixinStack = [];
-    this.mixinDetails = [];
+  get isChrome() {
+    return this.port?.adapter?.name === 'chrome';
   }
 
   /*
@@ -67,76 +60,44 @@ export default class ApplicationController extends Controller {
       errors,
     };
 
-    this.mixinStack.pushObject(details);
-    this.set('mixinDetails', details);
+    this.mixinStack.push(details);
+    this.mixinDetails = details;
   }
 
   @action
   popMixinDetails() {
-    let mixinStack = this.mixinStack;
-    let item = mixinStack.popObject();
-    this.set('mixinDetails', mixinStack.get('lastObject'));
+    const item = this.mixinStack.pop();
+    this.mixinDetails = this.mixinStack.at(-1);
     this.port.send('objectInspector:releaseObject', {
       objectId: item.objectId,
     });
   }
 
-  @action
-  showInspector() {
-    if (this.inspectorExpanded === false) {
-      this.set('inspectorExpanded', true);
-      // Broadcast that tables have been resized (used by `x-list`).
-      schedule('afterRender', () => {
-        this.layoutService.trigger('resize', { source: 'object-inspector' });
-      });
-    }
-  }
-
-  @action
-  hideInspector() {
-    if (this.inspectorExpanded === true) {
-      this.set('inspectorExpanded', false);
-      // Broadcast that tables have been resized (used by `x-list`).
-      schedule('afterRender', () => {
-        this.layoutService.trigger('resize', { source: 'object-inspector' });
-      });
-    }
-  }
-
-  @action
-  toggleInspector() {
-    if (this.inspectorExpanded) {
-      this.hideInspector();
-    } else {
-      this.showInspector();
-    }
-  }
-
   @action
   setActive(bool) {
+    // eslint-disable-next-line ember/no-runloop
     schedule('afterRender', () => {
-      this.set('active', bool);
+      this.active = bool;
     });
   }
 
   @action
   setupContentElement(element) {
     this.contentElement = element;
-    this.layoutService.updateContentHeight(this.contentElement.clientHeight);
+    this.layout.updateContentHeight(this.contentElement.clientHeight);
   }
 
   @action
   _windowDidResize() {
+    // eslint-disable-next-line ember/no-runloop
     schedule('afterRender', () => {
       if (!this.isDestroyed && !this.isDestroying) {
-        this.layoutService.trigger('resize', {
+        this.layout.trigger('resize', {
           source: 'application-controller',
         });
 
         if (this.contentElement) {
-          this.layoutService.updateContentHeight(
-            this.contentElement.clientHeight
-          );
+          this.layout.updateContentHeight(this.contentElement.clientHeight);
         }
       }
     });
@@ -144,14 +105,16 @@ export default class ApplicationController extends Controller {
 
   @action
   windowDidResize() {
+    // eslint-disable-next-line ember/no-runloop
     debounce(this, this._windowDidResize, 250);
   }
 
   @action
   toggleNavCollapsed() {
-    this.set('navIsCollapsed', !this.navIsCollapsed);
+    this.navIsCollapsed = !this.navIsCollapsed;
+    // eslint-disable-next-line ember/no-runloop
     schedule('afterRender', () => {
-      this.layoutService.trigger('resize', { source: 'navigation' });
+      this.layout.trigger('resize', { source: 'navigation' });
     });
   }
 
@@ -166,28 +129,30 @@ export default class ApplicationController extends Controller {
       });
     });
 
-    this.set('mixinStack', []);
+    this.mixinStack = new TrackedArray([]);
     this.pushMixinDetails(name, undefined, objectId, details, errors);
   }
 
   @action
   droppedObject(objectId) {
-    let mixinStack = this.mixinStack;
-    let obj = mixinStack.findBy('objectId', objectId);
+    let obj = this.mixinStack.find((mixin) => mixin.objectId === objectId);
     if (obj) {
-      let index = mixinStack.indexOf(obj);
-      let objectsToRemove = [];
+      let index = this.mixinStack.indexOf(obj);
+      let objectsToRemove = new TrackedArray([]);
       for (let i = index; i >= 0; i--) {
-        objectsToRemove.pushObject(mixinStack.objectAt(i));
+        objectsToRemove.push(this.mixinStack.at(i));
       }
       objectsToRemove.forEach((item) => {
-        mixinStack.removeObject(item);
+        const index = this.mixinStack.indexOf(item);
+        if (index !== -1) {
+          this.mixinStack.splice(index, 1);
+        }
       });
     }
-    if (mixinStack.get('length') > 0) {
-      this.set('mixinDetails', mixinStack.get('lastObject'));
+    if (this.mixinStack.length > 0) {
+      this.mixinDetails = this.mixinStack.at(-1);
     } else {
-      this.set('mixinDetails', null);
+      this.mixinDetails = null;
     }
   }
 }

package/app/controllers/component-tree.js

@@ -1,4 +1,4 @@
-import Controller, { inject as controller } from '@ember/controller';
+import Controller from '@ember/controller';
 import { action } from '@ember/object';
 import { debounce } from '@ember/runloop';
 import { inject as service } from '@ember/service';
@@ -14,11 +14,12 @@ export default class ComponentTreeController extends Controller {
   // Estimated height for each row
   itemHeight = 22;
 
-  @controller application;
   @service port;
+  @service layout;
 
   @tracked query = '';
   @tracked isInspecting = false;
+  @tracked showParentsOnly = false;
   @tracked renderItems = [];
 
   @tracked _pinned = undefined;
@@ -53,7 +54,7 @@ export default class ComponentTreeController extends Controller {
           renderNode.children.some((c) => c.type === 'modifier')
         ) {
           const idx = renderNode.children.findLastIndex(
-            (c) => c.type === 'modifier'
+            (c) => c.type === 'modifier',
           );
           renderNode.children.splice(idx + 1, 0, {
             type: 'placeholder-closing-tag',
@@ -145,14 +146,14 @@ export default class ComponentTreeController extends Controller {
           objectId: item.instance,
         });
       } else {
-        this.application.hideInspector();
+        this.layout.hideInspector();
       }
     } else {
       this._pinned = undefined;
       this._previewing = undefined;
 
       this.port.send('view:hideInspection');
-      this.application.hideInspector();
+      this.layout.hideInspector();
     }
 
     this.syncInspection();
@@ -182,6 +183,7 @@ export default class ComponentTreeController extends Controller {
   }
 
   syncInspection() {
+    // eslint-disable-next-line ember/no-runloop
     debounce(this, this._syncInspection, 50);
   }
 
@@ -268,6 +270,10 @@ export default class ComponentTreeController extends Controller {
   @action arrowKeysTeardown() {
     document.removeEventListener('keydown', this.handleKeyDown);
   }
+
+  @action toggleParentsOnly() {
+    this.showParentsOnly = !this.showParentsOnly;
+  }
 }
 
 function isInternalRenderNode(renderNode) {
@@ -279,7 +285,7 @@ function isInternalRenderNode(renderNode) {
 
 function focusedInInput() {
   return ['input', 'textarea'].includes(
-    document.activeElement.tagName.toLowerCase()
+    document.activeElement.tagName.toLowerCase(),
   );
 }
 
@@ -287,7 +293,7 @@ function arrowKeyPressed(keyCode) {
   return [KEYS.up, KEYS.right, KEYS.down, KEYS.left].includes(keyCode);
 }
 
-class RenderItem {
+export class RenderItem {
   @tracked isExpanded;
   @tracked renderNode;
 
@@ -416,11 +422,24 @@ class RenderItem {
   get isVisible() {
     if (this.isRoot) {
       return true;
+    } else if (this.controller.showParentsOnly) {
+      return (
+        this.hasPinnedChild() ||
+        (this.hasPinnedParent() && this.parentItem.isExpanded)
+      );
     } else {
       return this.parentItem.isVisible && this.parentItem.isExpanded;
     }
   }
 
+  hasPinnedParent() {
+    return this.isPinned || this.parentItem?.hasPinnedParent();
+  }
+
+  hasPinnedChild() {
+    return this.isPinned || this.childItems.some((c) => c.hasPinnedChild());
+  }
+
   get isPinned() {
     return this.id === this.controller.pinned;
   }

package/app/controllers/container-type.js

@@ -1,5 +1,6 @@
 import Controller, { inject as controller } from '@ember/controller';
 import { inject as service } from '@ember/service';
+// eslint-disable-next-line ember/no-computed-properties-in-native-classes
 import { action, computed, set } from '@ember/object';
 import debounceComputed from 'ember-inspector/computed/debounce';
 import searchMatch from 'ember-inspector/utils/search-match';
@@ -17,7 +18,7 @@ export default class ContainerTypeContoller extends Controller {
   @computed('model.@each.name', 'search')
   get rows() {
     return this.model.filter((instance) =>
-      searchMatch(instance.name, this.search)
+      searchMatch(instance.name, this.search),
     );
   }