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

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

package/app/controllers/{render-tree.js → render-tree.ts}

@@ -1,65 +1,71 @@
+/* eslint-disable ember/no-computed-properties-in-native-classes */
 import { action, computed } from '@ember/object';
 import { tracked } from '@glimmer/tracking';
-import { isEmpty } from '@ember/utils';
 import Controller from '@ember/controller';
 import { inject as service } from '@ember/service';
-import escapeRegExp from 'ember-inspector/utils/escape-reg-exp';
-import debounceComputed from 'ember-inspector/computed/debounce';
-import { and, equal } from '@ember/object/computed';
+
+import escapeRegExp from '../utils/escape-reg-exp';
+import debounceComputed from '../computed/debounce';
+import type WebExtension from '../services/adapters/web-extension';
+import type PortService from '../services/port';
+import type StorageService from '../services/storage';
+import type { RenderTreeModel } from '../routes/render-tree';
+import { isNullish } from '../utils/nullish';
 
 export default class RenderTreeController extends Controller {
-  @service adapter;
-  @service port;
+  @service declare adapter: WebExtension;
+  @service declare port: PortService;
   /**
    * Storage is needed for remembering if the user closed the warning
-   *
-   * @property storage
-   * @type {Service}
    */
-  @service storage;
+  @service declare storage: StorageService;
+
+  declare model: RenderTreeModel;
 
-  initialEmpty = false;
+  @tracked initialEmpty = false;
   @tracked shouldHighlightRender = false;
   @tracked search = '';
 
-  @equal('model.profiles.length', 0)
-  modelEmpty;
+  get escapedSearch() {
+    return escapeRegExp(this.search?.toLowerCase());
+  }
 
-  @and('initialEmpty', 'modelEmpty')
-  showEmpty;
+  /**
+   * Indicate the table's header's height in pixels.
+   *
+   * @property headerHeight
+   * @type {Number}
+   */
+  get headerHeight() {
+    return this.isWarningClosed ? 31 : 56;
+  }
 
   /**
    * Checks if the user previously closed the warning by referencing localStorage
-   *
-   * @property isWarningClosed
-   * @type {Boolean}
    */
   get isWarningClosed() {
-    return !!this.storage.getItem('is-render-tree-warning-closed');
+    return !!this.storage.getItem(
+      'is-render-tree-warning-closed' as keyof object,
+    );
   }
 
   set isWarningClosed(value) {
+    // @ts-expect-error Ignore this boolean/string mismatch for now.
     this.storage.setItem('is-render-tree-warning-closed', value);
   }
 
-  /**
-   * Indicate the table's header's height in pixels.
-   *
-   * @property headerHeight
-   * @type {Number}
-   */
-  get headerHeight() {
-    return this.isWarningClosed ? 31 : 56;
+  get modelEmpty() {
+    return this.model.profiles.length === 0;
+  }
+
+  get showEmpty() {
+    return this.initialEmpty && this.modelEmpty;
   }
 
   // bound to the input field, updates the `search` property
   // 300ms after changing
   @debounceComputed('search', 300)
-  searchValue;
-
-  get escapedSearch() {
-    return escapeRegExp(this.search?.toLowerCase());
-  }
+  declare searchValue: string;
 
   @computed('model.isHighlightSupported')
   get isHighlightEnabled() {
@@ -68,14 +74,16 @@ export default class RenderTreeController extends Controller {
 
   @computed('escapedSearch', 'model.profiles.@each.name', 'search')
   get filtered() {
-    if (isEmpty(this.escapedSearch)) {
+    if (isNullish(this.escapedSearch)) {
       return this.model.profiles;
     }
 
-    return this.model.profiles.filter((item) => {
-      const regExp = new RegExp(this.escapedSearch);
-      return recursiveMatch(item, regExp);
-    });
+    return this.model.profiles.filter(
+      (item: RenderTreeModel['profiles'][number]) => {
+        const regExp = new RegExp(this.escapedSearch as string);
+        return recursiveMatch(item, regExp);
+      },
+    );
   }
 
   @action
@@ -85,7 +93,7 @@ export default class RenderTreeController extends Controller {
 
   @action
   closeWarning() {
-    this.set('isWarningClosed', true);
+    this.isWarningClosed = true;
   }
 
   @action
@@ -98,18 +106,19 @@ export default class RenderTreeController extends Controller {
   }
 }
 
-function recursiveMatch(item, regExp) {
-  let children, child;
-  let name = item.name;
-  if (name.toLowerCase().match(regExp)) {
+function recursiveMatch(
+  item: RenderTreeModel['profiles'][number],
+  regExp: string | RegExp,
+) {
+  if (item.name.toLowerCase().match(regExp)) {
     return true;
   }
-  children = item.children;
-  for (let i = 0; i < children.length; i++) {
-    child = children[i];
+
+  for (const child of item.children) {
     if (recursiveMatch(child, regExp)) {
       return true;
     }
   }
+
   return false;
 }

package/app/controllers/route-tree.js

@@ -1,4 +1,6 @@
+// eslint-disable-next-line ember/no-computed-properties-in-native-classes
 import { alias } from '@ember/object/computed';
+// eslint-disable-next-line ember/no-computed-properties-in-native-classes
 import { action, computed, set } from '@ember/object';
 import Controller, { inject as controller } from '@ember/controller';
 import { inject as service } from '@ember/service';
@@ -22,7 +24,7 @@ export default class RouteTreeController extends Controller {
     'model.[]',
     'options.{hideRoutes,hideSubstates}',
     'currentRoute.{name,url}',
-    'searchValue'
+    'searchValue',
   )
   get filtered() {
     if (!Array.isArray(this.model)) {
@@ -30,8 +32,8 @@ export default class RouteTreeController extends Controller {
     }
     return this.model.filter((routeItem) => {
       let currentRoute = this.currentRoute;
-      let hideRoutes = this.get('options.hideRoutes');
-      let hideSubstates = this.get('options.hideSubstates');
+      let hideRoutes = this.options.hideRoutes;
+      let hideSubstates = this.options.hideSubstates;
 
       if (hideRoutes && currentRoute) {
         return checkCurrentRoute(currentRoute, routeItem.value);
@@ -60,8 +62,8 @@ export default class RouteTreeController extends Controller {
     });
   }
 
-  init() {
-    super.init(...arguments);
+  constructor() {
+    super(...arguments);
 
     set(this, 'model', []);
     set(this, 'options', {

package/app/helpers/build-style.js

@@ -15,7 +15,7 @@ const { keys } = Object;
 
 export function buildStyle(_, options) {
   return htmlSafe(
-    keys(options).reduce((style, key) => `${style}${key}:${options[key]};`, '')
+    keys(options).reduce((style, key) => `${style}${key}:${options[key]};`, ''),
   );
 }
 

package/app/index.html

@@ -8,30 +8,12 @@
 
     {{content-for "head"}}
 
-    <style type="text/css">
-      @font-face {
-        font-display: swap;
-        font-family: 'Inter';
-        font-style: normal;
-        font-weight: 400;
-        src: url("{{rootURL}}assets/fonts/Inter-Regular.woff2?v=3.12") format("woff2"), url("{{rootURL}}assets/fonts/Inter-Regular.woff?v=3.12") format("woff");
-      }
-
-      @font-face {
-        font-display: swap;
-        font-family: 'Inter';
-        font-style: normal;
-        font-weight: 700;
-        src: url("{{rootURL}}assets/fonts/Inter-Bold.woff2?v=3.12") format("woff2"), url("{{rootURL}}assets/fonts/Inter-Bold.woff?v=3.12") format("woff");
-      }
-    </style>
-
     <link integrity="" rel="stylesheet" href="{{rootURL}}assets/vendor.css">
     <link integrity="" rel="stylesheet" href="{{rootURL}}assets/ember-inspector.css">
 
     {{content-for "head-footer"}}
   </head>
-  <body class="theme--light">
+  <body class="theme-light">
     {{content-for "body"}}
 
     <script src="{{rootURL}}assets/vendor.js"></script>

package/app/initializers/setup.js

@@ -5,7 +5,7 @@ export default {
   initialize(instance) {
     // {{EMBER_DIST}} is replaced by the build process (basic, chrome, etc)
     let Adapter = instance.resolveRegistration(
-      `service:adapters/{{EMBER_DIST}}`
+      `service:adapters/{{EMBER_DIST}}`,
     );
 
     // register the adapter service