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

package/app/routes/render-tree.ts

@@ -0,0 +1,93 @@
+import EmberObject, { set } from '@ember/object';
+import { inject as service } from '@ember/service';
+import { Promise } from 'rsvp';
+import type Transition from '@ember/routing/transition';
+
+import { TrackedArray } from 'tracked-built-ins';
+
+import type PortService from '../services/port';
+import type RenderTreeController from '../controllers/render-tree';
+import TabRoute from './tab';
+
+export interface Profile {
+  children: Array<Profile>;
+  name: string;
+}
+
+export interface RenderTreeModel {
+  isHighlightSupported: boolean;
+  profiles: Array<Profile>;
+}
+
+export default class RenderTreeRoute extends TabRoute {
+  @service declare port: PortService;
+
+  declare controller: RenderTreeController;
+
+  model() {
+    return new Promise((resolve) => {
+      this.port.one(
+        'render:profilesAdded',
+        function ({ profiles, isHighlightSupported }: RenderTreeModel) {
+          resolve(
+            EmberObject.create({
+              // @ts-expect-error TODO: fix this
+              profiles: new TrackedArray(profiles),
+              isHighlightSupported,
+            }),
+          );
+        },
+      );
+      this.port.send('render:watchProfiles');
+    });
+  }
+
+  setupController(
+    controller: RenderTreeController,
+    model: RenderTreeModel,
+    transition: Transition,
+  ) {
+    super.setupController(controller, model, transition);
+
+    if (model.profiles.length === 0) {
+      controller.initialEmpty = true;
+    }
+
+    this.port.on('render:profilesUpdated', this, this.profilesUpdated);
+    this.port.on('render:profilesAdded', this, this.profilesAdded);
+  }
+
+  deactivate(transition: Transition) {
+    super.deactivate(transition);
+
+    this.port.off('render:profilesUpdated', this, this.profilesUpdated);
+    this.port.off('render:profilesAdded', this, this.profilesAdded);
+    this.port.send('render:releaseProfiles');
+  }
+
+  profilesUpdated = (message: RenderTreeModel) => {
+    set(this.controller.model, 'profiles', message.profiles);
+  };
+
+  profilesAdded = (message: RenderTreeModel) => {
+    const currentProfiles = this.controller.model.profiles;
+    const profiles = message.profiles;
+    if (
+      message.isHighlightSupported !== undefined &&
+      message.isHighlightSupported !==
+        this.controller.model.isHighlightSupported
+    ) {
+      set(
+        this.controller.model,
+        'isHighlightSupported',
+        message.isHighlightSupported,
+      );
+    }
+
+    // @ts-expect-error TODO: fix this type error
+    currentProfiles.push(profiles);
+    if (currentProfiles.length > 100) {
+      set(this.controller.model, 'profiles', currentProfiles.slice(0, 100));
+    }
+  };
+}

package/app/routes/route-tree.js

@@ -20,7 +20,6 @@ export default class RouteTreeRoute extends TabRoute {
   }
 
   setCurrentRoute(message) {
-    // eslint-disable-next-line ember/no-controller-access-in-routes
     this.controller.set('currentRoute', message);
   }
 

package/app/routes/{tab.js → tab.ts}

@@ -1,14 +1,21 @@
+import type Controller from '@ember/controller';
 import Route from '@ember/routing/route';
 import { scheduleOnce } from '@ember/runloop';
+import type Transition from '@ember/routing/transition';
 
 export default class TabRoute extends Route {
-  setupController(controller) {
-    super.setupController(...arguments);
+  setupController(
+    controller: Controller,
+    model: unknown,
+    transition: Transition,
+  ) {
+    super.setupController(controller, model, transition);
 
     function setToolbarContainer() {
       controller.set('toolbarContainer', document.querySelector('#toolbar'));
     }
 
+    // eslint-disable-next-line ember/no-runloop
     scheduleOnce('afterRender', this, setToolbarContainer);
   }
 }

package/app/routes/whats-new.js

@@ -44,7 +44,7 @@ export default class WhatsNewRoute extends TabRoute {
 
     let ref = version.indexOf('alpha') === -1 ? `v${version}` : 'main';
     let url = `https://raw.githubusercontent.com/emberjs/ember-inspector/${encodeURIComponent(
-      ref
+      ref,
     )}/CHANGELOG.md`;
 
     return fetch(url)

package/app/services/adapters/{basic.js → basic.ts}

@@ -14,22 +14,27 @@
 import Service, { inject as service } from '@ember/service';
 import { action } from '@ember/object';
 import { tracked } from '@glimmer/tracking';
+import type { AnyFn } from '@ember/-internals/utility-types';
 import config from 'ember-inspector/config/environment';
+import type PortService from '../port';
+import type { Message } from '../port';
 
 export default class Basic extends Service {
-  @service port;
+  @service declare port: PortService;
 
-  @tracked canOpenResource = false;
+  _messageCallbacks: Array<AnyFn>;
   name = 'basic';
 
+  @tracked canOpenResource = false;
+
   /**
    * Called when the adapter is created (when
    * the inspector app boots).
-   *
-   * @method init
    */
-  init() {
-    super.init(...arguments);
+  constructor() {
+    // eslint-disable-next-line prefer-rest-params
+    super(...arguments);
+
     this._messageCallbacks = [];
     this._checkVersion();
   }
@@ -41,20 +46,22 @@ export default class Basic extends Service {
    * Ember version and needs to switch to an inspector version
    * that does.
    *
-   * @method _checkVersion
    * @private
    */
   _checkVersion() {
-    this.onMessageReceived((message) => {
-      let { name, version } = message;
+    this.onMessageReceived((message: Message) => {
+      const { name, version } = message;
       if (name === 'version-mismatch') {
-        let previousVersions = config.previousEmberVersionsSupported;
-        let [fromVersion, tillVersion] = config.emberVersionsSupported;
+        const previousVersions = config.previousEmberVersionsSupported;
+        const [fromVersion, tillVersion] = config.emberVersionsSupported;
         let neededVersion;
 
-        if (compareVersion(version, fromVersion) === -1) {
+        if (compareVersion(version as string, fromVersion) === -1) {
           neededVersion = previousVersions[previousVersions.length - 1];
-        } else if (tillVersion && compareVersion(version, tillVersion) !== -1) {
+        } else if (
+          tillVersion &&
+          compareVersion(version as string, tillVersion) !== -1
+        ) {
           neededVersion = tillVersion;
         } else {
           return;
@@ -73,35 +80,35 @@ export default class Basic extends Service {
    * to switch to an older/new inspector version
    * that supports this Ember version.
    *
-   * @method onVersionMismatch
-   * @param {String} neededVersion (The version to go to)
+   * @param _neededVersion (The version to go to)
    */
-  onVersionMismatch() {}
+  onVersionMismatch(_neededVersion?: string) {}
 
   /**
     Used to send messages to EmberDebug
 
-    @param type {Object} the message to the send
+    @param _message the message to send
   **/
-  sendMessage() {}
+  sendMessage(_message: Partial<Message>) {}
 
   /**
     Register functions to be called
     when a message from EmberDebug is received
   **/
-  onMessageReceived(callback) {
+  onMessageReceived(callback: AnyFn) {
     this._messageCallbacks.push(callback);
   }
 
-  _messageReceived(...args) {
+  _messageReceived(...args: Array<unknown>) {
     this._messageCallbacks.forEach((callback) => {
       callback(...args);
     });
   }
 
+  reloadTab?(): void;
   // Called when the "Reload" is clicked by the user
   willReload() {}
-  openResource /* file, line */() {}
+  openResource(_file: string, _line: number) {}
 
   @action
   refreshPage() {
@@ -126,15 +133,14 @@ export default class Basic extends Service {
  * 0 if version1 == version2
  * 1 if version1 > version2
  *
- * @param {String} version1
- * @param {String} version2
- * @return {Boolean} result of the comparison
+ * @return result of the comparison
  */
-function compareVersion(version1, version2) {
-  version1 = cleanupVersion(version1).split('.');
-  version2 = cleanupVersion(version2).split('.');
+function compareVersion(version1: string, version2: string) {
+  const v1 = cleanupVersion(version1).split('.');
+  const v2 = cleanupVersion(version2).split('.');
   for (let i = 0; i < 3; i++) {
-    let compared = compare(+version1[i], +version2[i]);
+    // @ts-expect-error TODO: refactor this to make TS happy
+    const compared = compare(+v1[i], +v2[i]);
     if (compared !== 0) {
       return compared;
     }
@@ -143,11 +149,11 @@ function compareVersion(version1, version2) {
 }
 
 /* Remove -alpha, -beta, etc from versions */
-function cleanupVersion(version) {
+function cleanupVersion(version: string) {
   return version.replace(/-.*/g, '');
 }
 
-function compare(val, number) {
+function compare(val: number, number: number) {
   if (val === number) {
     return 0;
   } else if (val < number) {

package/app/services/adapters/{bookmarklet.js → bookmarklet.ts}

@@ -1,53 +1,46 @@
-/* eslint-disable no-useless-escape */
-import { computed } from '@ember/object';
-
 import BasicAdapter from './basic';
+import type { Message } from '../port';
 
 export default class Bookmarklet extends BasicAdapter {
   name = 'bookmarklet';
 
   /**
    * Called when the adapter is created.
-   *
-   * @method init
    */
-  init() {
+  constructor() {
+    // @ts-expect-error Using ...arguments is fine.
+    // eslint-disable-next-line prefer-rest-params
+    super(...arguments);
+
     this._connect();
-    return super.init(...arguments);
   }
 
-  @computed
   get inspectedWindow() {
-    return window.opener || window.parent;
+    return (window.opener as Window | undefined) || window.parent;
   }
 
-  @computed
   get inspectedWindowURL() {
     return loadPageVar('inspectedWindowURL');
   }
 
-  sendMessage(options) {
-    options = options || {};
-    this.inspectedWindow.postMessage(options, this.inspectedWindowURL);
+  sendMessage(message?: Partial<Message>) {
+    this.inspectedWindow.postMessage(message ?? {}, this.inspectedWindowURL);
   }
 
   /**
    * Redirect to the correct inspector version.
-   *
-   * @method onVersionMismatch
-   * @param {String} goToVersion
    */
-  onVersionMismatch(goToVersion) {
+  onVersionMismatch(goToVersion: string) {
     this.sendMessage({ name: 'version-mismatch', version: goToVersion });
     window.location.href = `../panes-${goToVersion.replace(
       /\./g,
-      '-'
+      '-',
     )}/index.html${window.location.search}`;
   }
 
   _connect() {
     window.addEventListener('message', (e) => {
-      let message = e.data;
+      const message = e.data as Message;
       if (e.origin !== this.inspectedWindowURL) {
         return;
       }
@@ -62,17 +55,17 @@ export default class Bookmarklet extends BasicAdapter {
   }
 }
 
-function loadPageVar(sVar) {
+function loadPageVar(sVar: string) {
   return decodeURI(
     window.location.search.replace(
       new RegExp(
         `^(?:.*[&\\?]${encodeURI(sVar).replace(
           /[\.\+\*]/g,
-          '\\$&'
+          '\\$&',
         )}(?:\\=([^&]*))?)?.*$`,
-        'i'
+        'i',
       ),
-      '$1'
-    )
+      '$1',
+    ),
   );
 }

package/app/services/adapters/{chrome.js → chrome.ts}

@@ -5,8 +5,7 @@ export default class Chrome extends WebExtension {
   name = 'chrome';
   @tracked canOpenResource = true;
 
-  openResource(file, line) {
-    /*global chrome */
+  openResource(file: string, line: number) {
     // For some reason it opens the line after the one specified
     chrome.devtools.panels.openResource(file, line - 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,27 @@ 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>) {
+    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 +43,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 +67,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 +109,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 +119,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 +132,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();
+  }
+}