ember-inspector 4.13.1 → 4.15.0

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

package/app/libs/promise-assembler.ts

@@ -0,0 +1,249 @@
+/* eslint-disable @typescript-eslint/no-unsafe-argument */
+import { assert } from '@ember/debug';
+import { later } from '@ember/runloop';
+import EmberObject, { action, setProperties } from '@ember/object';
+import { addListener, removeListener, sendEvent } from '@ember/object/events';
+import type { AnyFn } from '@ember/-internals/utility-types';
+
+import { TrackedArray, TrackedObject } from 'tracked-built-ins';
+import { tracked } from '@glimmer/tracking';
+
+import PromiseModel from '../models/promise';
+import type PortService from '../services/port';
+
+interface SerializedPromise {
+  children?: Array<string>;
+  guid: string;
+  label: string;
+  parent?: string;
+  reason: string;
+  state: string;
+  value: string;
+}
+
+export default class PromiseAssembler extends EmberObject {
+  declare port: PortService;
+  // Used to track whether current message received
+  // is the first in the request
+  // Mainly helps in triggering 'firstMessageReceived' event
+  @tracked firstMessageReceived = false;
+
+  all = new TrackedArray<PromiseModel>([]);
+  promiseIndex = new TrackedObject<Record<string, number>>({});
+  topSort = new TrackedArray<PromiseModel>([]);
+  topSortMeta = new TrackedObject<Record<string, { hasParent?: boolean }>>({});
+
+  start() {
+    this.port.on('promise:promisesUpdated', this, this.addOrUpdatePromises);
+    this.port.send('promise:getAndObservePromises');
+  }
+
+  stop() {
+    this.port.off('promise:promisesUpdated', this, this.addOrUpdatePromises);
+    this.port.send('promise:releasePromises');
+    this.reset();
+  }
+
+  reset() {
+    this.topSortMeta = new TrackedObject<
+      Record<string, { hasParent?: boolean }>
+    >({});
+    this.promiseIndex = new TrackedObject<Record<string, number>>({});
+    this.topSort.splice(0, this.topSort.length);
+
+    this.firstMessageReceived = false;
+    const all = this.all;
+    // Lazily destroy promises
+    // Allows for a smooth transition on deactivate,
+    // and thus providing the illusion of better perf
+    // eslint-disable-next-line ember/no-runloop
+    later(
+      this,
+      function () {
+        this.destroyPromises(all);
+      },
+      500,
+    );
+    this.all = new TrackedArray([]);
+  }
+
+  destroyPromises(promises: Array<EmberObject>) {
+    promises.forEach(function (item) {
+      item.destroy();
+    });
+  }
+
+  addOrUpdatePromises = (message: { promises: Array<SerializedPromise> }) => {
+    this.rebuildPromises(message.promises);
+
+    if (!this.firstMessageReceived) {
+      this.firstMessageReceived = true;
+      this.trigger('firstMessageReceived');
+    }
+  };
+
+  rebuildPromises = (promises: Array<SerializedPromise | PromiseModel>) => {
+    promises.forEach((props) => {
+      props = Object.assign({}, props);
+      const childrenIds = props.children;
+      const parentId = props.parent;
+      delete props.children;
+      delete props.parent;
+      if (parentId && parentId !== props.guid) {
+        props.parent = this.updateOrCreate({ guid: parentId });
+      }
+      const promise = this.updateOrCreate(props);
+      if (childrenIds) {
+        childrenIds.forEach((childId) => {
+          // avoid infinite recursion
+          if (childId === props.guid) {
+            return;
+          }
+          const child = this.updateOrCreate({ guid: childId, parent: promise });
+          promise.children.push(child);
+        });
+      }
+    });
+  };
+
+  updateTopSort = (promise: PromiseModel) => {
+    const topSortMeta = this.topSortMeta;
+    const guid = promise.guid;
+    let meta = topSortMeta[guid] ?? {};
+    const isNew = !meta;
+    let hadParent: boolean | undefined = false;
+    const hasParent = !!promise.parent;
+    const topSort = this.topSort;
+    let parentChanged = isNew;
+
+    if (isNew) {
+      meta = topSortMeta[guid] = {};
+    } else {
+      hadParent = meta.hasParent;
+    }
+    if (!isNew && hasParent !== hadParent) {
+      // todo: implement recursion to reposition children
+      const index = topSort.indexOf(promise);
+      if (index !== -1) {
+        topSort.splice(index, 1);
+      }
+      parentChanged = true;
+    }
+    meta.hasParent = hasParent;
+    if (parentChanged) {
+      this.insertInTopSort(promise);
+    }
+  };
+
+  insertInTopSort = (promise: PromiseModel) => {
+    const topSort = this.topSort;
+    if (promise.parent) {
+      const parentIndex = topSort.indexOf(promise.parent);
+      topSort.splice(parentIndex + 1, 0, promise);
+    } else {
+      this.topSort.push(promise);
+    }
+    promise.children.forEach((child) => {
+      const index = topSort.indexOf(child);
+      if (index !== -1) {
+        topSort.splice(index, 1);
+      }
+      this.insertInTopSort(child);
+    });
+  };
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  updateOrCreate = (props: any) => {
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access
+    const guid = props.guid;
+    const promise = this.findOrCreate(guid);
+
+    setProperties(promise, props);
+
+    this.updateTopSort(promise);
+
+    return promise;
+  };
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  createPromise(props: any): PromiseModel {
+    const promise = PromiseModel.create(props) as PromiseModel;
+    const index = this.all.length;
+
+    this.all.push(promise);
+    this.promiseIndex[promise.guid as keyof object] = index;
+    return promise;
+  }
+
+  find(guid?: string) {
+    if (guid) {
+      const index = this.promiseIndex[guid as keyof object];
+      if (index !== undefined) {
+        return this.all.at(index);
+      }
+    } else {
+      return this.all;
+    }
+  }
+
+  findOrCreate(guid?: string) {
+    if (!guid) {
+      assert('You have tried to findOrCreate without a guid');
+    }
+    return (this.find(guid) as PromiseModel) || this.createPromise({ guid });
+  }
+
+  // Manually implement Evented functionality, so we can move away from the mixin
+
+  on(eventName: string, method: AnyFn): void;
+  on(eventName: string, target: unknown, method: AnyFn): void;
+
+  @action
+  // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents
+  on(eventName: string, targetOrMethod: unknown | AnyFn, method?: AnyFn): void {
+    if (typeof targetOrMethod === 'function') {
+      // If we did not pass a target, default to `this`
+      addListener(this, eventName, this, targetOrMethod as AnyFn);
+    } else {
+      addListener(this, eventName, targetOrMethod as object, method);
+    }
+  }
+
+  one(eventName: string, method: AnyFn): void;
+  one(eventName: string, target: unknown, method: AnyFn): void;
+
+  @action
+  // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents
+  one(eventName: string, targetOrMethod: unknown | AnyFn, method?: AnyFn) {
+    if (typeof targetOrMethod === 'function') {
+      // If we did not pass a target, default to `this`
+      addListener(this, eventName, this, targetOrMethod as AnyFn, true);
+    } else {
+      addListener(this, eventName, targetOrMethod as object, method, true);
+    }
+  }
+
+  off(eventName: string, method: AnyFn): void;
+  off(eventName: string, target: unknown, method: AnyFn): void;
+
+  @action
+  // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents
+  off(eventName: string, targetOrMethod: unknown | AnyFn, method?: AnyFn) {
+    try {
+      if (typeof targetOrMethod === 'function') {
+        // If we did not pass a target, default to `this`
+        removeListener(this, eventName, this, targetOrMethod as AnyFn);
+      } else {
+        removeListener(this, eventName, targetOrMethod as object, method);
+      }
+    } catch (e) {
+      console.error(e);
+    }
+  }
+
+  @action
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  trigger(eventName: string, ...args: Array<any>) {
+    sendEvent(this, eventName, args);
+  }
+}

package/app/libs/resizable-columns.js

@@ -81,7 +81,7 @@ export default class {
     let saved = this.storage.getItem(this.getStorageKey());
     if (saved && saved.columnVisibility) {
       let savedIds = keys(saved.columnVisibility).sort();
-      let schemaIds = this.columnSchema.mapBy('id').sort();
+      let schemaIds = this.columnSchema.map((col) => col.id).sort();
       if (!compareArrays(savedIds, schemaIds)) {
         // Clear saved items
         this.storage.removeItem(this.getStorageKey());
@@ -165,7 +165,7 @@ export default class {
     if (saved.columnVisibility && !isNone(saved.columnVisibility[id])) {
       return saved.columnVisibility[id];
     }
-    return this.columnSchema.findBy('id', id).visible;
+    return this.columnSchema.find((x) => x.id === id).visible;
   }
 
   /**
@@ -195,7 +195,7 @@ export default class {
     this._columnVisibility = this.columnSchema.map((column) =>
       Object.assign({}, column, {
         visible: this.isColumnVisible(column.id),
-      })
+      }),
     );
   }
 
@@ -221,8 +221,8 @@ export default class {
       let diff = this.tableWidth - totalWidth;
       while (diff > 0) {
         columns
-          .filterBy('visible')
-          .sortBy('width')
+          .filter((col) => !!col.visible)
+          .sort((a, b) => a.width - b.width)
           .forEach((column) => {
             if (diff > 0) {
               column.width++;
@@ -245,7 +245,7 @@ export default class {
    * @param {Number} width The column's new width
    */
   updateColumnWidth(id, width) {
-    let column = this._columns.findBy('id', id);
+    let column = this._columns.find((x) => x.id === id);
     let previousWidth = column.width;
     column.width = width;
     let last = this._columns[this._columns.length - 1];
@@ -265,9 +265,9 @@ export default class {
    * @param {String} id
    */
   toggleVisibility(id) {
-    let column = this._columnVisibility.findBy('id', id);
+    let column = this._columnVisibility.find((x) => x.id === id);
     column.visible = !column.visible;
-    if (!this._columnVisibility.isAny('visible')) {
+    if (!this._columnVisibility.some((col) => col.visible)) {
       // If this column was the last visible column
       // cancel toggling and set back to `true`.
       column.visible = true;
@@ -317,7 +317,7 @@ export default class {
         obj[id] = visible;
         return obj;
       },
-      {}
+      {},
     );
     this.storage.setItem(this.getStorageKey(), saved);
   }
@@ -362,7 +362,7 @@ export default class {
    * @method getStorageKey
    */
   getStorageKey() {
-    return `list__${this.key}`;
+    return `list-${this.key}`;
   }
 
   /**