ember-inspector 4.13.1 → 4.15.0

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

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

@@ -1,70 +1,72 @@
 import Service, { inject as service } from '@ember/service';
 import { LOCAL_STORAGE_SUPPORTED } from './storage/local';
+import type LocalStorageService from './storage/local';
+import type MemoryStorageService from './storage/memory';
+import { tracked } from '@glimmer/tracking';
 
 /**
  * Service that wraps either the LocalStorageService or
  * MemoryStorageService (depending on availability) and
  * provide support for storing (JSON-serializable) objects
  * on top of the lower level backends.
- *
- * @class StorageService
- * @extends Service
  */
 export default class StorageService extends Service {
   @service(LOCAL_STORAGE_SUPPORTED ? 'storage/local' : 'storage/memory')
-  backend;
+  declare backend: LocalStorageService | MemoryStorageService;
+  @tracked trackedBackend = {
+    setItem: (k: keyof object, v: string) => {
+      this.backend.setItem(k, v);
+      this.trackedBackend = { ...this.trackedBackend };
+    },
+    removeItem: (k: keyof object) => {
+      this.backend.removeItem(k);
+      this.trackedBackend = { ...this.trackedBackend };
+    },
+    getItem: (k: keyof object) => this.backend.getItem(k),
+    keys: () => this.backend.keys(),
+  };
 
   /**
    * Reads a stored object for a give key, if any.
    *
-   * @method getItem
-   * @param  {String} key
    * @return {Option<String>} The value, if found
    */
-  getItem(key) {
-    let serialized = this.backend.getItem(key);
+  getItem(key: keyof object) {
+    const serialized = this.trackedBackend.getItem(key);
 
     if (serialized === null) {
       // Actual `null` values would have been serialized as `"null"`
       return undefined;
     } else {
-      return JSON.parse(serialized);
+      return JSON.parse(serialized as string) as string;
     }
   }
 
   /**
    * Store a string for a given key.
-   *
-   * @method setItem
-   * @param {String} key
-   * @param {String} value
    */
-  setItem(key, value) {
+  setItem(key: keyof object, value: string) {
     if (value === undefined) {
       this.removeItem(key);
     } else {
-      let serialized = JSON.stringify(value);
-      this.backend.setItem(key, serialized);
+      const serialized = JSON.stringify(value);
+      this.trackedBackend.setItem(key, serialized);
     }
   }
 
   /**
    * Deletes the stored string for a given key.
-   *
-   * @method removeItem
-   * @param  {String} key
    */
-  removeItem(key) {
-    this.backend.removeItem(key);
+  removeItem(key: keyof object) {
+    this.trackedBackend.removeItem(key);
   }
 
   /**
    * Returns the list of stored keys.
    *
-   * @method keys
    * @return {Array<String>} The array of keys
    */
   keys() {
-    return this.backend.keys();
+    return this.trackedBackend.keys();
   }
 }

package/app/styles/app.scss

@@ -9,3 +9,4 @@
 @import "route_tree";
 @import "whats-new";
 @import "ember-table";
+@import "ui/ui";

package/app/styles/base.scss

@@ -1,8 +1,12 @@
 :root {
   /* stylelint-disable value-keyword-case */
-  --font-sans-serif: "Inter", -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Cantarell', 'Oxygen', 'Ubuntu', 'Helvetica Neue', helvetica, arial, sans-serif;
-  --font-monospace: 'SF Mono', Menlo, Monaco, monospace;
+  --font-sans-serif: system-ui, sans-serif, "Apple Color Emoji",
+    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --font-monospace: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo,
+    Consolas, "DejaVu Sans Mono", monospace, "Apple Color Emoji",
+    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   /* stylelint-enable value-keyword-case */
+
   --inherit: inherit;
   --unit0: 0;
   --unit1: 4px;

package/app/styles/colors.scss

@@ -1,4 +1,4 @@
-.theme--light {
+.theme-light {
   // Base
   --base00: #ffffff;
   --base01: #f3f3f3;
@@ -16,12 +16,13 @@
   --base13: #404040;
   --base14: #333333;
   --base15: #222222;
+
   // Spec
   --spec00: #fffec2;
   --spec01: #ff0000;
   --spec02: #990000;
   --spec03: #000099;
-  --spec04: #3F81EE;
+  --spec04: #3f81ee;
   --spec05: #7c027c;
   --spec06: #ecf1fa;
   --spec07: #cd61a7;
@@ -30,58 +31,59 @@
   --white: #ffffff;
   --inherit: inherit;
   --transparent: transparent;
-  --focus: #3F81EE;
+  --focus: #3f81ee;
   --focus-text: var(--white);
-  --component-name: #1171E8;
-  --component-brackets-selected: rgba(255, 255, 255, 0.4);
-  --component-attr: #DB00A9;
-  --component-highlighted-bg: #F2F2F3;
-  --pill-bg: rgba(0, 0, 0, 0.1);
-  --pill-bg-active: rgba(255, 255, 255, 0.3);
+  --component-name: #1171e8;
+  --component-brackets-selected: rgb(255 255 255 / 40%);
+  --component-attr: #db00a9;
+  --component-highlighted-bg: #f2f2f3;
+  --pill-bg: rgb(0 0 0 / 10%);
+  --pill-bg-active: rgb(255 255 255 / 30%);
   --warning-text: #735c0f;
   --tracked-icon-bg: var(--spec03);
 }
 
-.theme--dark {
+.theme-dark {
   // Base
   --base00: #242424;
   --base01: #242424;
   --base02: #121212;
   --base03: #292929;
-  --base04: #2E2E2E;
+  --base04: #2e2e2e;
   --base05: #353535;
-  --base06: #4C4C4C;
-  --base07: #5C5C5C;
+  --base06: #4c4c4c;
+  --base07: #5c5c5c;
   --base08: #777777;
   --base09: #888888;
-  --base10: #8C8C8C;
+  --base10: #8c8c8c;
   --base11: #989898;
-  --base12: #AAAAAA;
-  --base13: #BFBFBF;
-  --base14: #CCCCCC;
-  --base15: #DDDDDD;
+  --base12: #aaaaaa;
+  --base13: #bfbfbf;
+  --base14: #cccccc;
+  --base15: #dddddd;
+
   // Spec
-  --spec00: #00013D;
-  --spec01: #00FFFF;
-  --spec02: #66FFFF;
-  --spec03: #FFFF66;
-  --spec04: #C07E11;
-  --spec05: #83FD83;
-  --spec06: #130E05;
+  --spec00: #00013d;
+  --spec01: #00ffff;
+  --spec02: #66ffff;
+  --spec03: #ffff66;
+  --spec04: #c07e11;
+  --spec05: #83fd83;
+  --spec06: #130e05;
   --spec07: #cd61a7;
   --spec08: #7fb56d;
   --spec09: #328509;
   --white: #ffffff;
   --inherit: inherit;
   --transparent: transparent;
-  --focus: #2270EC;
+  --focus: #2270ec;
   --focus-text: var(--white);
-  --component-name: #77BEFF;
-  --component-brackets-selected: rgba(255, 255, 255, 0.4);
-  --component-attr: #FE7AE9;
+  --component-name: #77beff;
+  --component-brackets-selected: rgb(255 255 255 / 40%);
+  --component-attr: #fe7ae9;
   --component-highlighted-bg: #333333;
-  --pill-bg: rgba(255, 255, 255, 0.2);
-  --pill-bg-active: rgba(255, 255, 255, 0.3);
+  --pill-bg: rgb(255 255 255 / 20%);
+  --pill-bg-active: rgb(255 255 255 / 30%);
   --warning-text: #8ca3f0;
   --tracked-icon-bg: #5e5eb5;
 }