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

package/app/services/adapters/{web-extension.js → web-extension.ts}

@@ -1,11 +1,10 @@
-/* globals chrome */
-import { computed } from '@ember/object';
 import { tracked } from '@glimmer/tracking';
 
 import BasicAdapter from './basic';
 import config from 'ember-inspector/config/environment';
+import type { Message } from '../port';
 
-let emberDebug = null;
+let emberDebug: string | null = null;
 
 export default class WebExtension extends BasicAdapter {
   @tracked canOpenResource = false;
@@ -13,27 +12,30 @@ export default class WebExtension extends BasicAdapter {
 
   /**
    * Called when the adapter is created.
-   *
-   * @method init
    */
-  init() {
+  constructor(...args: unknown[]) {
+    // @ts-expect-error ignore
+    super(...args);
+
     this._connect();
     this._handleReload();
     this._setThemeColors();
 
-    Promise.resolve().then(() => this._sendEmberDebug());
-
-    return super.init(...arguments);
+    void Promise.resolve().then(() => this._sendEmberDebug());
   }
 
-  sendMessage(options) {
-    options = options || {};
-    this._chromePort.postMessage(options);
+  sendMessage(message?: Partial<Message>) {
+    if (message) {
+      message.tabId = chrome.devtools.inspectedWindow.tabId;
+    }
+    this._chromePort.postMessage(message ?? {});
   }
 
   _sendEmberDebug() {
-    let minimumVersion = config.emberVersionsSupported[0].replace(/\./g, '-');
-    let url = chrome.runtime.getURL(`/panes-${minimumVersion}/ember_debug.js`);
+    const minimumVersion = config.emberVersionsSupported[0].replace(/\./g, '-');
+    const url = chrome.runtime.getURL(
+      `/panes-${minimumVersion}/ember_debug.js`,
+    );
     // first send to all frames in current tab
     this.sendMessage({
       from: 'devtools',
@@ -44,23 +46,23 @@ export default class WebExtension extends BasicAdapter {
     this.onMessageReceived((message, sender) => {
       if (message === 'ember-content-script-ready') {
         this.sendMessage({
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-assignment
+          frameId: sender.frameId,
           from: 'devtools',
+          tabId: chrome.devtools.inspectedWindow.tabId,
           type: 'inject-ember-debug',
           value: url,
-          tabId: chrome.devtools.inspectedWindow.tabId,
-          frameId: sender.frameId,
         });
       }
     });
   }
 
-  @computed
   get _chromePort() {
     return chrome.runtime.connect();
   }
 
   _connect() {
-    let chromePort = this._chromePort;
+    const chromePort = this._chromePort;
     chromePort.postMessage({ appId: chrome.devtools.inspectedWindow.tabId });
 
     chromePort.onMessage.addListener((...args) => {
@@ -68,36 +70,38 @@ export default class WebExtension extends BasicAdapter {
     });
 
     chromePort.onDisconnect.addListener(() => {
-      this.notifyPropertyChange('_chromePort');
       this._connect();
     });
   }
 
   _handleReload() {
-    let self = this;
-    chrome.devtools.network.onNavigated.addListener(function () {
-      self._injectDebugger();
-      location.reload(true);
+    chrome.devtools.network.onNavigated.addListener(() => {
+      this._injectDebugger();
+      location.reload();
     });
   }
 
   _injectDebugger() {
-    loadEmberDebug().then((emberDebug) => {
-      chrome.devtools.inspectedWindow.eval(emberDebug, (success, error) => {
-        if (success === undefined && error) {
-          throw error;
-        }
-      });
+    void loadEmberDebug().then((emberDebug) => {
+      chrome.devtools.inspectedWindow.eval(
+        emberDebug as string,
+        (success, error) => {
+          if (success === undefined && error) {
+            // eslint-disable-next-line @typescript-eslint/only-throw-error
+            throw error;
+          }
+        },
+      );
     });
   }
 
   _setThemeColors() {
     // Remove old theme colors to ensure switching themes works
-    document.body.classList.remove('theme--light', 'theme--dark');
+    document.body.classList.remove('theme-light', 'theme-dark');
 
-    let theme = 'theme--light';
+    let theme = 'theme-light';
     if (chrome.devtools.panels.themeName === 'dark') {
-      theme = 'theme--dark';
+      theme = 'theme-dark';
     }
     document.body.classList.add(theme);
   }
@@ -108,11 +112,8 @@ export default class WebExtension extends BasicAdapter {
 
   /**
    * Open the devtools "Elements" or "Sources" tab and select a specific DOM node or function.
-   *
-   * @method inspectJSValue
-   * @param {String} name
    */
-  inspectJSValue(name) {
+  inspectJSValue(name: string) {
     chrome.devtools.inspectedWindow.eval(`
       inspect(window[${JSON.stringify(name)}]);
       delete window[${JSON.stringify(name)}];
@@ -121,14 +122,11 @@ export default class WebExtension extends BasicAdapter {
 
   /**
    * Redirect to the correct inspector version.
-   *
-   * @method onVersionMismatch
-   * @param {String} goToVersion
    */
-  onVersionMismatch(goToVersion) {
+  onVersionMismatch(goToVersion: string) {
     window.location.href = `../panes-${goToVersion.replace(
       /\./g,
-      '-'
+      '-',
     )}/index.html`;
   }
 
@@ -137,22 +135,24 @@ export default class WebExtension extends BasicAdapter {
     scripts as soon as possible into the new page.
   */
   reloadTab() {
-    loadEmberDebug().then((emberDebug) => {
-      chrome.devtools.inspectedWindow.reload({ injectedScript: emberDebug });
+    void loadEmberDebug().then((emberDebug) => {
+      chrome.devtools.inspectedWindow.reload({
+        injectedScript: emberDebug as string,
+      });
     });
   }
 }
 
 function loadEmberDebug() {
-  let minimumVersion = config.emberVersionsSupported[0].replace(/\./g, '-');
-  let xhr;
+  const minimumVersion = config.emberVersionsSupported[0].replace(/\./g, '-');
+  let xhr: XMLHttpRequest;
 
   return new Promise((resolve) => {
     if (!emberDebug) {
       xhr = new XMLHttpRequest();
       xhr.open(
         'GET',
-        chrome.runtime.getURL(`/panes-${minimumVersion}/ember_debug.js`)
+        chrome.runtime.getURL(`/panes-${minimumVersion}/ember_debug.js`),
       );
       xhr.onload = function () {
         if (xhr.readyState === 4) {

package/app/services/adapters/websocket.ts

@@ -0,0 +1,40 @@
+/* eslint-disable @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access */
+import { run } from '@ember/runloop';
+import BasicAdapter from './basic';
+import type { Message } from '../port';
+
+export default class Websocket extends BasicAdapter {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  socket: any;
+
+  constructor() {
+    // @ts-expect-error Using ...arguments is fine.
+    // eslint-disable-next-line prefer-rest-params
+    super(...arguments);
+    // @ts-expect-error TODO: figure out how to type this stuff
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+    this.socket = window.EMBER_INSPECTOR_CONFIG.remoteDebugSocket;
+    this._connect();
+  }
+
+  sendMessage(message?: Partial<Message>) {
+    this.socket.emit('emberInspectorMessage', message ?? {});
+  }
+
+  _connect() {
+    this.socket.on('emberInspectorMessage', (message: Message) => {
+      // eslint-disable-next-line ember/no-runloop
+      run(() => {
+        this._messageReceived(message);
+      });
+    });
+  }
+
+  _disconnect() {
+    this.socket.removeAllListeners('emberInspectorMessage');
+  }
+
+  willDestroy() {
+    this._disconnect();
+  }
+}

package/app/services/layout.ts

@@ -0,0 +1,124 @@
+/**
+ * Layout service used to broadcast changes to the application's
+ * layout due to resizing of the main nav or the object inspector toggling.
+ *
+ * Whenever something resizes it triggers an event on this service. For example
+ * when the main nav is resized.
+ * Elements dependant on the app's layout listen to events on this service. For
+ * example the `list` component.
+ */
+import Service from '@ember/service';
+import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
+import { addListener, removeListener, sendEvent } from '@ember/object/events';
+import type { AnyFn } from '@ember/-internals/utility-types';
+import { schedule } from '@ember/runloop';
+
+export default class LayoutService extends Service {
+  @tracked inspectorExpanded = false;
+
+  /**
+   * Stores the app's content height. This property is kept up-to-date
+   * by the `monitor-content-height` component.
+   */
+  @tracked contentHeight: number | null = null;
+
+  /**
+   * This is called by `monitor-content-height` whenever a window resize is detected
+   * and the app's content height has changed. We therefore update the
+   * `contentHeight` property and notify all listeners (mostly lists).
+   *
+   * @param height The new app content height
+   */
+  updateContentHeight(height: number) {
+    this.contentHeight = height;
+    this.trigger('content-height-update', height);
+  }
+
+  // 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);
+  }
+
+  @action
+  showInspector() {
+    if (this.inspectorExpanded === false) {
+      this.inspectorExpanded = true;
+      // Broadcast that tables have been resized (used by `x-list`).
+      // eslint-disable-next-line ember/no-runloop
+      schedule('afterRender', () => {
+        this.trigger('resize', { source: 'object-inspector' });
+      });
+    }
+  }
+
+  @action
+  hideInspector() {
+    if (this.inspectorExpanded === true) {
+      this.inspectorExpanded = false;
+      // Broadcast that tables have been resized (used by `x-list`).
+      // eslint-disable-next-line ember/no-runloop
+      schedule('afterRender', () => {
+        this.trigger('resize', { source: 'object-inspector' });
+      });
+    }
+  }
+
+  @action
+  toggleInspector() {
+    if (this.inspectorExpanded) {
+      this.hideInspector();
+    } else {
+      this.showInspector();
+    }
+  }
+}

package/app/services/port.ts

@@ -0,0 +1,195 @@
+import { action, set, setProperties } from '@ember/object';
+import { addListener, removeListener, sendEvent } from '@ember/object/events';
+import { hasListeners } from '@ember/-internals/metal';
+import Service, { inject as service } from '@ember/service';
+import type RouterService from '@ember/routing/router-service';
+
+import type WebExtension from './adapters/web-extension';
+import type { AnyFn } from '@ember/-internals/utility-types';
+
+export interface ModelType {
+  columns: Array<{ name: string; desc: string }>;
+  count: number;
+  name: string;
+  objectId: string;
+}
+
+export interface RecordType {
+  color: string;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  columnValues: any;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  filterValues: any;
+  objectId: string;
+  searchIndex: number;
+}
+
+/**
+ * This interface is a catch-all of a bunch of things we
+ * pass around via messages.
+ */
+export interface Message {
+  applicationId: string;
+  applicationName: string;
+  count: number;
+  filters: Array<unknown>;
+  frameId?: string;
+  from: string;
+  index: number;
+  instrumentWithStack?: boolean;
+  modelTypes: Array<ModelType>;
+  name?: string;
+  objectId?: string;
+  promiseId?: string;
+  records: Array<RecordType>;
+  shouldHighlightRender?: boolean;
+  tabId?: number;
+  type: string;
+  unloading?: boolean;
+  value: string;
+  version?: string;
+}
+
+export default class PortService extends Service {
+  @service declare adapter: WebExtension;
+  @service declare router: RouterService;
+
+  applicationId?: string;
+  applicationName?: string;
+  detectedApplications: { [key: string]: string };
+
+  constructor() {
+    // eslint-disable-next-line prefer-rest-params
+    super(...arguments);
+
+    /*
+     * A dictionary of the form:
+     * { applicationId: applicationName }
+     */
+    this.detectedApplications = {};
+    this.applicationId = undefined;
+    this.applicationName = undefined;
+
+    this.adapter.onMessageReceived(
+      (message: Message & { apps: Array<Message> }) => {
+        if (message.type === 'apps-loaded') {
+          message.apps.forEach(
+            ({ applicationId, applicationName }: Message) => {
+              set(this.detectedApplications, applicationId, applicationName);
+            },
+          );
+
+          return;
+        }
+
+        const { applicationId, applicationName } = message;
+
+        if (!applicationId) {
+          return;
+        }
+
+        // save the application, in case we haven't seen it yet
+        set(this.detectedApplications, applicationId, applicationName);
+
+        if (!this.applicationId) {
+          this.selectApplication(applicationId);
+        }
+
+        if (this.applicationId === applicationId) {
+          if (!hasListeners(this, message.type)) {
+            throw new Error('unknown message type ' + message.type);
+          }
+          this.trigger(message.type, message, applicationId);
+        }
+      },
+    );
+
+    addListener(
+      this,
+      'view:inspectJSValue',
+      this,
+      ({ name }: { name: string }) => this.adapter.inspectJSValue(name),
+    );
+  }
+
+  selectApplication(applicationId: string) {
+    if (
+      applicationId in this.detectedApplications &&
+      applicationId !== this.applicationId
+    ) {
+      const applicationName = this.detectedApplications[
+        applicationId
+      ] as string;
+      const currentApplication = this.applicationId;
+      setProperties(this, { applicationId, applicationName });
+      if (currentApplication) {
+        // this is only required when switching apps
+        this.router.transitionTo('app-detected');
+      }
+      this.send('app-selected', { applicationId, applicationName });
+    }
+  }
+
+  @action
+  send(type: string, message?: Partial<Message>) {
+    message = message || {};
+    message.type = type;
+    message.from = 'devtools';
+    message.applicationId = this.applicationId as string;
+    message.applicationName = this.applicationName as string;
+    this.adapter.sendMessage(message);
+  }
+
+  // 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
+  trigger(eventName: string, ...args: Array<unknown>) {
+    sendEvent(this, eventName, args);
+  }
+}

package/app/services/storage/{local.js → local.ts}

@@ -6,51 +6,38 @@ export let LOCAL_STORAGE_SUPPORTED = false;
  * Service that wraps local storage. Only store strings. This
  * is not intended to be used directly, use StorageServeice
  * instead.
- *
- * @class LocalStorageService
- * @extends Service
  */
 export default class LocalStorageService extends Service {
   /**
    * Reads a stored string for a give key, if any.
    *
-   * @method getItem
-   * @param  {String} key
    * @return {Option<String>} The value, if found
    */
-  getItem(key) {
+  getItem(key: string) {
     return localStorage.getItem(key);
   }
 
   /**
    * Store a string for a given key.
-   *
-   * @method setItem
-   * @param {String} key
-   * @param {String} value
    */
-  setItem(key, value) {
+  setItem(key: string, value: string) {
     localStorage.setItem(key, value);
   }
 
   /**
    * Deletes the stored string for a given key.
-   *
-   * @method removeItem
-   * @param  {String} key
    */
-  removeItem(key) {
+  removeItem(key: string) {
     localStorage.removeItem(key);
   }
 
   /**
    * Returns the list of stored keys.
    *
-   * @method keys
-   * @return {Array<String>} The array of keys
+   * @return The array of keys
    */
   keys() {
-    let keys = [];
+    const keys = [];
     for (let i = 0; i < localStorage.length; i++) {
       keys.push(localStorage.key(i));
     }
@@ -61,12 +48,12 @@ export default class LocalStorageService extends Service {
 try {
   localStorage.setItem('test', 'testing');
   LOCAL_STORAGE_SUPPORTED = localStorage.getItem('test') === 'testing';
-} catch (e) {
+} catch {
   // ignore
 } finally {
   try {
     localStorage.removeItem('test');
-  } catch (e) {
+  } catch {
     // ignore
   }
 }

package/app/services/storage/{memory.js → memory.ts}

@@ -4,29 +4,22 @@ import Service from '@ember/service';
  * Service that wraps an in-memory object with the same APIs as
  * the LocalStorageService, usually as a fallback. Only store
  * strings. This is not intended to be used directly, use
- * StorageServeice instead.
- *
- * @class MemoryStorageService
- * @extends Service
+ * StorageService instead.
  */
 export default class MemoryStorageService extends Service {
   /**
    * Where data is stored.
    *
-   * @property store
-   * @type {Object}
    * @private
    */
-  store = Object.create(null);
+  store = Object.create(null) as Record<string, unknown>;
 
   /**
    * Reads a stored string for a give key, if any.
    *
-   * @method getItem
-   * @param  {String} key
    * @return {Option<String>} The value, if found
    */
-  getItem(key) {
+  getItem(key: keyof object) {
     if (key in this.store) {
       return this.store[key];
     } else {
@@ -36,30 +29,22 @@ export default class MemoryStorageService extends Service {
 
   /**
    * Store a string for a given key.
-   *
-   * @method setItem
-   * @param {String} key
-   * @param {String} value
    */
-  setItem(key, value) {
+  setItem(key: keyof object, value: unknown) {
     this.store[key] = value;
   }
 
   /**
    * Deletes the stored string for a given key.
-   *
-   * @method removeItem
-   * @param  {String} key
    */
-  removeItem(key) {
+  removeItem(key: keyof object) {
     delete this.store[key];
   }
 
   /**
    * Returns the list of stored keys.
    *
-   * @method keys
-   * @return {Array<String>} The array of keys
+   * @return The array of keys
    */
   keys() {
     return Object.keys(this.store);