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

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/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,17 +1,15 @@
 import 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 {
   /**
    * 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 port;
@@ -25,13 +23,13 @@ export default class ApplicationController extends Controller {
   @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 +41,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,15 +59,14 @@ 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,
     });
@@ -84,8 +75,9 @@ export default class ApplicationController extends Controller {
   @action
   showInspector() {
     if (this.inspectorExpanded === false) {
-      this.set('inspectorExpanded', true);
+      this.inspectorExpanded = true;
       // Broadcast that tables have been resized (used by `x-list`).
+      // eslint-disable-next-line ember/no-runloop
       schedule('afterRender', () => {
         this.layoutService.trigger('resize', { source: 'object-inspector' });
       });
@@ -95,8 +87,9 @@ export default class ApplicationController extends Controller {
   @action
   hideInspector() {
     if (this.inspectorExpanded === true) {
-      this.set('inspectorExpanded', false);
+      this.inspectorExpanded = false;
       // Broadcast that tables have been resized (used by `x-list`).
+      // eslint-disable-next-line ember/no-runloop
       schedule('afterRender', () => {
         this.layoutService.trigger('resize', { source: 'object-inspector' });
       });
@@ -114,8 +107,9 @@ export default class ApplicationController extends Controller {
 
   @action
   setActive(bool) {
+    // eslint-disable-next-line ember/no-runloop
     schedule('afterRender', () => {
-      this.set('active', bool);
+      this.active = bool;
     });
   }
 
@@ -127,6 +121,7 @@ export default class ApplicationController extends Controller {
 
   @action
   _windowDidResize() {
+    // eslint-disable-next-line ember/no-runloop
     schedule('afterRender', () => {
       if (!this.isDestroyed && !this.isDestroying) {
         this.layoutService.trigger('resize', {
@@ -135,7 +130,7 @@ export default class ApplicationController extends Controller {
 
         if (this.contentElement) {
           this.layoutService.updateContentHeight(
-            this.contentElement.clientHeight
+            this.contentElement.clientHeight,
           );
         }
       }
@@ -144,12 +139,14 @@ 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' });
     });
@@ -166,28 +163,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

@@ -53,7 +53,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',
@@ -182,6 +182,7 @@ export default class ComponentTreeController extends Controller {
   }
 
   syncInspection() {
+    // eslint-disable-next-line ember/no-runloop
     debounce(this, this._syncInspection, 50);
   }
 
@@ -279,7 +280,7 @@ function isInternalRenderNode(renderNode) {
 
 function focusedInInput() {
   return ['input', 'textarea'].includes(
-    document.activeElement.tagName.toLowerCase()
+    document.activeElement.tagName.toLowerCase(),
   );
 }
 

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

package/app/controllers/container-types/{index.js → index.ts}

@@ -1,10 +1,13 @@
 import Controller from '@ember/controller';
 import { action } from '@ember/object';
+import type RouterService from '@ember/routing/router-service';
 import { inject as service } from '@ember/service';
 
+import type PortService from '../../services/port';
+
 export default class ContainerTypesIndexController extends Controller {
-  @service port;
-  @service router;
+  @service declare port: PortService;
+  @service declare router: RouterService;
 
   @action
   refresh() {

package/app/controllers/container-types.js

@@ -1,3 +1,4 @@
+// eslint-disable-next-line ember/no-computed-properties-in-native-classes
 import { sort } from '@ember/object/computed';
 import { inject as service } from '@ember/service';
 import Controller from '@ember/controller';
@@ -5,11 +6,7 @@ import Controller from '@ember/controller';
 export default class ContainerTypesController extends Controller {
   @service router;
 
-  @sort('model', 'sortProperties') sorted;
-
-  constructor() {
-    super(...arguments);
+  sortProperties = ['name'];
 
-    this.sortProperties = ['name'];
-  }
+  @sort('model', 'sortProperties') sorted;
 }

package/app/controllers/deprecations.js

@@ -1,6 +1,10 @@
-import { action, computed, set } from '@ember/object';
+import { action } from '@ember/object';
 import { inject as service } from '@ember/service';
 import Controller from '@ember/controller';
+import { tracked } from '@glimmer/tracking';
+
+import { TrackedArray } from 'tracked-built-ins';
+
 import debounceComputed from 'ember-inspector/computed/debounce';
 import searchMatch from 'ember-inspector/utils/search-match';
 
@@ -8,32 +12,33 @@ export default class DeprecationsController extends Controller {
   @service adapter;
   @service port;
 
-  search = null;
-  toggleDeprecationWorkflow = false;
+  deprecations = new TrackedArray([]);
+  @tracked search = null;
+  @tracked toggleDeprecationWorkflow = false;
 
   @debounceComputed('search', 300) searchValue;
 
-  constructor() {
-    super(...arguments);
-    set(this, 'deprecations', []);
-  }
-
   @action
   changeDeprecationWorkflow(e) {
-    this.set('toggleDeprecationWorkflow', e.target.checked);
+    this.toggleDeprecationWorkflow = e.target.checked;
 
     this.port.send('deprecation:setOptions', {
       options: { toggleDeprecationWorkflow: this.toggleDeprecationWorkflow },
     });
   }
 
-  @computed('deprecations.@each.message', 'search')
   get filtered() {
     return this.deprecations.filter((item) =>
-      searchMatch(item.message, this.search)
+      searchMatch(item.message, this.search),
     );
   }
 
+  @action
+  clear() {
+    this.port.send('deprecation:clear');
+    this.deprecations.splice(0, this.deprecations.length);
+  }
+
   @action
   openResource(item) {
     this.adapter.openResource(item.fullSource, item.line);

package/app/controllers/libraries.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/model-types.js

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

package/app/controllers/promise-tree.ts

@@ -0,0 +1,149 @@
+import { action } from '@ember/object';
+import Controller from '@ember/controller';
+import { inject as service } from '@ember/service';
+import { debounce, once } from '@ember/runloop';
+import { tracked } from '@glimmer/tracking';
+
+// @ts-expect-error We should move away from observers.
+import { observes } from '@ember-decorators/object';
+
+import type PortService from '../services/port';
+import type PromiseModel from '../models/promise';
+import type WebExtension from '../services/adapters/web-extension';
+import { isNullish } from 'ember-inspector/utils/nullish';
+
+export default class PromiseTreeController extends Controller {
+  queryParams = ['filter'];
+
+  declare model: Array<PromiseModel>;
+
+  @service declare adapter: WebExtension;
+  @service declare port: PortService;
+
+  @tracked createdAfter: Date | null = null;
+  @tracked effectiveSearch: string | null = null;
+  @tracked filter = 'all';
+  // Keep track of promise stack traces.
+  // It is opt-in due to performance reasons.
+  @tracked instrumentWithStack = false;
+  @tracked searchValue: string | null = null;
+
+  // below used to show the "refresh" message
+  get isEmpty() {
+    return this.model.length === 0;
+  }
+
+  get neverCleared() {
+    return !this.wasCleared;
+  }
+
+  get shouldRefresh() {
+    return this.isEmpty && this.neverCleared;
+  }
+
+  get wasCleared() {
+    return Boolean(this.createdAfter);
+  }
+
+  get filtered() {
+    return this.model.filter((item) => {
+      // exclude cleared promises
+      if (this.createdAfter && item.createdAt < this.createdAfter) {
+        return false;
+      }
+
+      if (!item.isVisible) {
+        return false;
+      }
+
+      // Exclude non-filter complying promises
+      // If at least one of their children passes the filter,
+      // then they pass
+      let include = true;
+      if (this.filter === 'pending') {
+        include = item.pendingBranch;
+      } else if (this.filter === 'rejected') {
+        include = item.rejectedBranch;
+      } else if (this.filter === 'fulfilled') {
+        include = item.fulfilledBranch;
+      }
+      if (!include) {
+        return false;
+      }
+
+      // Search filter
+      // If they or at least one of their children
+      // match the search, then include them
+      const search = this.effectiveSearch;
+      if (!isNullish(search)) {
+        return item.matches(search);
+      }
+      return true;
+    });
+  }
+
+  // eslint-disable-next-line ember/no-observers, @typescript-eslint/no-unsafe-call
+  @observes('searchValue')
+  searchChanged() {
+    // eslint-disable-next-line ember/no-runloop
+    debounce(this, this.updateEffectiveSearch, 500);
+  }
+
+  updateEffectiveSearch = () => {
+    this.effectiveSearch = this.searchValue;
+  };
+
+  @action
+  toggleExpand(promise: PromiseModel) {
+    const isExpanded = !promise.isExpanded;
+    promise.isManuallyExpanded = isExpanded;
+    promise.recalculateExpanded();
+    const children = promise._allChildren();
+    if (isExpanded) {
+      children.forEach((child) => {
+        if (isNullish(child.isManuallyExpanded)) {
+          child.isManuallyExpanded = isExpanded;
+          child.recalculateExpanded();
+        }
+      });
+    }
+  }
+
+  @action
+  tracePromise(promise: PromiseModel) {
+    this.port.send('promise:tracePromise', { promiseId: promise.guid });
+  }
+
+  @action
+  inspectObject() {
+    // @ts-expect-error TODO: figure this out later
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-call, prefer-rest-params
+    this.target.send('inspectObject', ...arguments);
+  }
+
+  @action
+  sendValueToConsole(promise: PromiseModel) {
+    this.port.send('promise:sendValueToConsole', {
+      promiseId: promise.guid,
+    });
+  }
+
+  @action
+  setFilter(filter: string) {
+    this.filter = filter;
+  }
+
+  @action
+  updateInstrumentWithStack(instrumentWithStack: boolean) {
+    this.port.send('promise:setInstrumentWithStack', {
+      instrumentWithStack,
+    });
+  }
+
+  @action
+  clear() {
+    this.createdAfter = new Date();
+    // eslint-disable-next-line ember/no-runloop
+    once(this, this.updateEffectiveSearch);
+  }
+}

package/app/controllers/records.js

@@ -1,17 +1,22 @@
 import { isEmpty } from '@ember/utils';
-import { action, computed, get } from '@ember/object';
+import { action, get, set } from '@ember/object';
 import Controller, { inject as controller } from '@ember/controller';
 import { inject as service } from '@ember/service';
-import escapeRegExp from 'ember-inspector/utils/escape-reg-exp';
+import { tracked } from '@glimmer/tracking';
+
+import escapeRegExp from '../utils/escape-reg-exp';
 
 export default class RecordsController extends Controller {
+  queryParams = ['filterValue', 'searchValue'];
+
   @controller application;
   @service port;
 
-  queryParams = ['filterValue', 'searchValue'];
-
-  searchValue = '';
-  filterValue = null;
+  @tracked filterValue = null;
+  @tracked filters = [];
+  @tracked modelType;
+  @tracked searchValue = '';
+  @tracked sorts = undefined;
 
   recordToString(record) {
     return (record.searchKeywords || []).join(' ').toLowerCase();
@@ -32,22 +37,16 @@ export default class RecordsController extends Controller {
    * @property schema
    * @type {Object}
    */
-  @computed('modelType.columns')
   get columns() {
-    return this.get('modelType.columns').map(({ desc, name }) => ({
+    return this.modelType.columns.map(({ desc, name }) => ({
       valuePath: `columnValues.${name}`,
       name: desc,
     }));
   }
 
-  @computed(
-    'searchValue',
-    'model.@each.{columnValues,filterValues}',
-    'filterValue'
-  )
   get filteredRecords() {
-    let search = this.searchValue;
-    let filter = this.filterValue;
+    const search = this.searchValue;
+    const filter = this.filterValue;
 
     return this.model.filter((item) => {
       // check filters
@@ -59,34 +58,27 @@ export default class RecordsController extends Controller {
       if (!isEmpty(search)) {
         let searchString = this.recordToString(item);
         return !!searchString.match(
-          new RegExp(`.*${escapeRegExp(search.toLowerCase())}.*`)
+          new RegExp(`.*${escapeRegExp(search.toLowerCase())}.*`),
         );
       }
       return true;
     });
   }
 
-  constructor() {
-    super(...arguments);
-
-    this.filters = [];
-    this.sorts = undefined;
-  }
-
   @action
   setFilter(val) {
     val = val || null;
-    this.set('filterValue', val);
+    this.filterValue = val;
   }
 
   @action
   inspectModel([record]) {
-    this.set('selection', record);
+    set(this, 'selection', record);
     this.port.send('data:inspectModel', { objectId: record.objectId });
   }
 
   @action
   updateSorts(newSorts) {
-    this.set('sorts', newSorts);
+    this.sorts = newSorts;
   }
 }