ember-inspector 4.13.1 → 4.15.0

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

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,6 +1,5 @@
 import Controller from '@ember/controller';
-import { action, computed } from '@ember/object';
-import { sort } from '@ember/object/computed';
+import { action } from '@ember/object';
 import { inject as service } from '@ember/service';
 
 const HIDE_EMPTY_MODELS_KEY = 'are-model-types-hidden';
@@ -13,12 +12,6 @@ export default class ModelTypesController extends Controller {
 
   navWidth = 180;
 
-  constructor() {
-    super(...arguments);
-    this.sortByNameProp = ['name'];
-    this.sortByDescCountProp = ['count:desc'];
-  }
-
   get hideEmptyModelTypes() {
     return getStoredPropertyValue(this.storage, HIDE_EMPTY_MODELS_KEY);
   }
@@ -35,13 +28,14 @@ export default class ModelTypesController extends Controller {
     handleSettingProperty(this.storage, ORDER_MODELS_BY_COUNT_KEY, value);
   }
 
-  @sort('filtered', 'sortByNameProp')
-  sortByName;
+  get sortByName() {
+    return this.filtered.toSorted((a, b) => a.name.localeCompare(b.name));
+  }
 
-  @sort('filtered', 'sortByDescCountProp')
-  sortByDescCount;
+  get sortByDescCount() {
+    return this.filtered.toSorted((a, b) => b.count - a.count);
+  }
 
-  @computed('model.@each.count', 'hideEmptyModelTypes')
   get filtered() {
     return this.model.filter((item) => {
       let hideEmptyModels = this.hideEmptyModelTypes;

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