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

package/PRIVACY.md

@@ -0,0 +1,3 @@
+# Privacy Policy
+
+The Ember Inspector collects no data from any of its users and has no analytics. As we don't collect any data it is impossilbe for us to store any data about our users.

package/README.md

@@ -60,13 +60,21 @@ Internet explorer will open an iframe instead of a popup due to the lack of supp
 
 For development:
 
-- run `pnpm serve:bookmarklet`
-- create a bookmark (make sure you unblock the popup when you run the bookmarklet):
+- In a terminal:
+  - run `pnpm serve:bookmarklet`
+- In your browser:
+  - If Ember Inspector is installed as an active extension, deactivate it
+  - Visit the Ember app you want to inspect
+  - Open the developer tool console and execute the following (make sure you unblock the popup when you run the bookmarklet):
 
 ```javascript
 javascript: (function() { var s = document.createElement('script'); s.src = 'http://localhost:9191/bookmarklet/load_inspector.js'; document.body.appendChild(s); }());
 ```
 
+Or to do this more easily in the future, create a new bookmark in your browser, and copy the above script as the URL.
+
+The expected behavior is a new window opening with the URL `http://localhost:9191/bookmarklet/<pane-root>/index.html?inspectedWindowURL=<inspected-app-url>`, running your local ember-inspector. The content should be the same as the one you see when using the published extension, but not properly styled.
+
 ## Building and Testing:
 
 Run `pnpm install && pnpm add -g ember-cli` to install the required modules.

package/app/components/app-picker.hbs

@@ -16,9 +16,9 @@
     </select>
 
     {{#if @collapsed}}
-      {{svg-jar "e-logo" width="15" height="13" class="dropdown__collapsed-icon fill-current absolute pointer-events-none"}}
+      {{svg-jar "e-logo" width="15" height="13" class="dropdown-collapsed-icon fill-current absolute pointer-events-none"}}
     {{/if}}
 
-    {{svg-jar "dropdown-arrow" class="dropdown__arrow fill-current absolute opacity-75 pointer-events-none"}}
+    {{svg-jar "dropdown-arrow" class="dropdown-arrow fill-current absolute opacity-75 pointer-events-none"}}
   </div>
 </div>

package/app/components/component-tree-item.hbs

@@ -4,9 +4,9 @@
   class="
     component-tree-item relative flex items-center mx-1 rounded
     {{if @item.hasInstance "cursor-pointer" "cursor-default"}}
-    {{if @item.isComponent "component-tree-item--component"}}
-    {{if @item.isPinned "component-tree-item--pinned"}}
-    {{if @item.isHighlighted "component-tree-item--highlighted"}}"
+    {{if @item.isComponent "component-tree-item-component"}}
+    {{if @item.isPinned "component-tree-item-pinned"}}
+    {{if @item.isHighlighted "component-tree-item-highlighted"}}"
   {{on "click" @item.toggleInspection}}
   {{on "mouseenter" @item.showPreview}}
   {{on "mouseleave" @item.hidePreview}}
@@ -14,7 +14,7 @@
   <div class="component-tree-item-background flex items-center pr-2 rounded">
     {{#if @item.hasChildren}}
       <Ui::DisclosureTriangle
-        class="component-tree-item__expand self-stretch px-1 cursor-pointer"
+        class="component-tree-item-expand self-stretch px-1 cursor-pointer"
         title="Click to toggle (alt/option click to toggle with children)"
         @toggle={{@item.toggleExpansion}}
         @expanded={{@item.isExpanded}}
@@ -22,18 +22,18 @@
     {{/if}}
 
     <code
-      class="component-tree-item__tag flex whitespace-no-wrap
-        {{if @item.isClosingTag 'component-tree-item__closing'}}
-        {{if @item.hasModifiers 'component-tree-item__has_modifier'}}
+      class="component-tree-item-tag flex whitespace-no-wrap
+        {{if @item.isClosingTag 'component-tree-item-closing'}}
+        {{if @item.hasModifiers 'component-tree-item-has-modifier'}}
         {{if
         (or @item.isComponent @item.isModifier @item.isHtmlTag)
           (if
             @item.isCurlyInvocation
-            "component-tree-item-classic__bracket"
+            "component-tree-item-classic-bracket"
             (if
               @item.hasChildren
-              "component-tree-item__bracket"
-              "component-tree-item__bracket component-tree-item__bracket--self-closing"
+              "component-tree-item-bracket"
+              "component-tree-item-bracket component-tree-item-bracket-self-closing"
             )
           )
         }}"
@@ -45,7 +45,7 @@
             {{@item.name}}
           </span>
 
-          {{#each @item.args.positional as |value|}}
+          {{#each @item.args.positional key="@index" as |value|}}
             <div class="arg-token flex ml-2">
               {{if (is-string value) "\""}}
               <ComponentTreeArg @value={{value}} />
@@ -104,9 +104,9 @@
   </div>
 
   {{#if @item.hasBounds}}
-    <div class="component-tree-item__actions sticky flex items-center pr-1 whitespace-no-wrap">
+    <div class="component-tree-item-actions sticky flex items-center pr-1 whitespace-no-wrap">
       <button
-        class="component-tree-item__action inline-flex items-center h-full p-0 border-0 cursor-pointer bg-transparent z-10"
+        class="component-tree-item-action inline-flex items-center h-full p-0 border-0 cursor-pointer bg-transparent z-10"
         title="Scroll into view"
         data-test-scroll-into-view
         {{on "click" @item.scrollIntoView}}
@@ -116,7 +116,7 @@
       </button>
 
       <button
-        class="component-tree-item__action inline-flex items-center h-full ml-2 p-0 border-0 cursor-pointer bg-transparent z-10"
+        class="component-tree-item-action inline-flex items-center h-full ml-2 p-0 border-0 cursor-pointer bg-transparent z-10"
         title="View in Elements panel"
         data-test="view-dom-element"
         {{on "click" @item.inspectElement}}

package/app/components/component-tree-toolbar.hbs

@@ -1,6 +1,6 @@
 <div class="toolbar">
   <button
-    class="{{if @isInspecting "active"}} toolbar__icon-button"
+    class="{{if @isInspecting "active"}} toolbar-icon-button"
     type="button"
     {{on "click" @toggleInspect}}
   >
@@ -10,7 +10,7 @@
   <Ui::ToolbarDivider />
 
   <button
-    class="toolbar__icon-button"
+    class="toolbar-icon-button"
     title="expand all"
     type="button"
     {{on "click" @expandAll}}
@@ -19,7 +19,7 @@
   </button>
 
   <button
-    class="toolbar__icon-button"
+    class="toolbar-icon-button"
     title="collapse all"
     type="button"
     {{on "click" @collapseAll}}
@@ -34,4 +34,18 @@
     @value={{@query}}
     data-test-filter-views
   />
+
+  <Ui::ToolbarDivider />
+
+  {{#if @pinned}}
+    <button
+      class="{{if @showParentsOnly "active"}} toolbar-icon-button"
+      type="button"
+      title="toggle focus mode"
+      data-test-toggle-focus
+      {{on "click" @toggleParentsOnly}}
+    >
+      {{svg-jar "focus-point-round" width="16px" height="16px"}}
+    </button>
+  {{/if}}
 </div>

package/app/components/{date-property-field.js → date-property-field.ts}

@@ -1,16 +1,17 @@
 import { scheduleOnce } from '@ember/runloop';
 import { action } from '@ember/object';
-import DatePicker from 'ember-inspector/components/ember-flatpickr';
+import DatePicker from 'ember-flatpickr/components/ember-flatpickr';
 
 export default class DatePropertyFieldComponent extends DatePicker {
   @action
-  onInsert(element) {
+  onInsert(element: HTMLInputElement) {
     super.onInsert(element);
 
+    // eslint-disable-next-line ember/no-runloop
     scheduleOnce('afterRender', this, this._openFlatpickr);
   }
 
-  _openFlatpickr() {
-    this.flatpickrRef.open();
-  }
+  _openFlatpickr = () => {
+    this.flatpickrRef?.open();
+  };
 }

package/app/components/deprecation-item-source.hbs

@@ -1,6 +1,6 @@
 <div class="deprecation-source pb-2" data-test-deprecation-source>
   <button
-    class="send-to-console send-to-console--chevron-only mr-3"
+    class="send-to-console send-to-console-chevron-only mr-3"
     title="Trace deprecations in console"
     data-test-trace-deprecations-btn
     {{on "click" this.handleClick}}

package/app/components/deprecation-item.hbs

@@ -26,7 +26,7 @@
 
       {{#if (not @model.hasSourceMap)}}
         <button
-          class="send-to-console send-to-console--chevron-only mr-2"
+          class="send-to-console send-to-console-chevron-only mr-2"
           title="Trace deprecations in console"
           data-test-full-trace-deprecations-btn
           type="button"

package/app/components/deprecations-toolbar.hbs

@@ -3,7 +3,7 @@
 
   <Ui::ToolbarDivider />
 
-  <div class="toolbar__checkbox">
+  <div class="toolbar-checkbox">
     <label title="Deprecation workflow">
       <Input
         @type="checkbox"

package/app/components/item-types.hbs

@@ -1,11 +1,11 @@
 <div class="split">
   <Ui::DraggableColumn
-    @classes="split__panel split__panel--sidebar-2 nav"
+    @classes="split-panel split-panel-sidebar-2 nav"
     @side="left"
     @width={{@width}}
   >
-    <div class="split__panel__bd">
-      <h1 class="nav__title">{{@header}}</h1>
+    <div class="split-panel-bd">
+      <h1 class="nav-title">{{@header}}</h1>
 
       <ul>
         {{#each @sorted as |itemType|}}
@@ -13,9 +13,9 @@
             <LinkTo
               @route={{if (eq @type "model") "records" "container-type"}}
               @model={{escape-url itemType.name}}
-              class="nav__item"
+              class="nav-item"
             >
-              <span class={{concat this.typeClass "-name" " nav__item-label"}}>
+              <span class={{concat this.typeClass "-name" " nav-item-label"}}>
                 {{itemType.name}}
               </span>
 
@@ -27,8 +27,8 @@
     </div>
   </Ui::DraggableColumn>
 
-  <div class="split__panel">
-    <div class="split__panel__bd">
+  <div class="split-panel">
+    <div class="split-panel-bd">
       {{yield}}
     </div>
   </div>

package/app/components/list-cell.hbs

@@ -1,7 +1,7 @@
 <td
-  class="list__cell
-    {{if this.clickable 'list__cell_clickable'}}
-    {{if this.highlight 'list__cell_highlight'}}"
+  class="list-cell
+    {{if this.clickable 'list-cell-clickable'}}
+    {{if this.highlight 'list-cell-highlight'}}"
   role="button"
   style={{this.safeStyle}}
   title={{this.title}}

package/app/components/list-content.hbs

@@ -1,12 +1,13 @@
 <div
-  class="list__content js-list-content"
+  class="list-content js-list-content"
   style={{this.style}}
   {{did-insert this.elementInserted}}
+  ...attributes
 >
-  <div class="list__table-container">
+  <div class="list-table-container">
     <table>
       <colgroup>
-        {{#each this.columns as |column|}}
+        {{#each @columns as |column|}}
           <col style={{build-style width=(concat column.width "px")}} />
         {{/each}}
       </colgroup>

package/app/components/list-content.ts

@@ -0,0 +1,96 @@
+import { action } from '@ember/object';
+import { inject as service } from '@ember/service';
+import Component from '@glimmer/component';
+import { htmlSafe } from '@ember/template';
+import { schedule } from '@ember/runloop';
+import { tracked } from '@glimmer/tracking';
+
+import type LayoutService from '../services/layout';
+
+interface ListContentSignature {
+  Element: HTMLDivElement;
+  Args: {
+    /**
+     * Array of objects representing the columns to render
+     * and their corresponding widths. This array is passed
+     * through the template.
+     *
+     * Each item in the array has `width` and `id` properties.
+     */
+    columns: Array<{ id: string; width: number }>;
+    /**
+     * Number passed from `list`. Indicates the header height
+     * in pixels.
+     */
+    headerHeight: number;
+  };
+}
+
+/**
+ * Base list view config
+ */
+export default class ListContent extends Component<ListContentSignature> {
+  /**
+   * The layout service. Used to observe the app's content height.
+   */
+  @service('layout') declare layoutService: LayoutService;
+
+  @tracked contentHeight: number | null = null;
+
+  /**
+   * Hook called before destruction. Clean up events listeners.
+   */
+  willDestroy() {
+    this.layoutService.off(
+      'content-height-update',
+      this,
+      this.updateContentHeight,
+    );
+    return super.willDestroy();
+  }
+
+  get height() {
+    // In testing list-view is created before `contentHeight` is set
+    // which will trigger an exception
+    if (!this.contentHeight) {
+      return 1;
+    }
+    return this.contentHeight - this.args.headerHeight;
+  }
+
+  get style() {
+    return htmlSafe(`height:${this.height}px`);
+  }
+
+  /**
+   * Hook called when content element is inserted.
+   */
+  @action
+  elementInserted() {
+    // eslint-disable-next-line ember/no-runloop
+    schedule('afterRender', this, this.setupHeight);
+  }
+
+  /**
+   * Set up the content height and listen to any updates to that property.
+   */
+  setupHeight = () => {
+    this.contentHeight = this.layoutService.contentHeight;
+    this.layoutService.on(
+      'content-height-update',
+      this,
+      this.updateContentHeight,
+    );
+  };
+
+  /**
+   * Triggered whenever the app's content height changes. This usually happens
+   * when the window is resized. Once we detect a change we update this
+   * component's `contentHeight` property and consequently its `height` style.
+   *
+   * @param height The app's new content height
+   */
+  updateContentHeight = (height: number) => {
+    this.contentHeight = height;
+  };
+}

package/app/components/list.hbs

@@ -5,8 +5,8 @@
   {{did-update this.schemaUpdated this.schema}}
 >
   {{#if this.schema.columns.length}}
-    <div class="list__header">
-      <div class="list__table-container">
+    <div class="list-header">
+      <div class="list-table-container">
         <table>
           <colgroup>
             {{#each this.columns key="id" as |column|}}
@@ -14,7 +14,7 @@
             {{/each}}
           </colgroup>
           <tbody>
-            <tr class="list__row">
+            <tr class="list-row">
               {{#each this.columns key="id" as |column|}}
                 <ListCell class="js-header-column" @tagName="th">
                   {{column.name}}

package/app/components/list.js

@@ -13,9 +13,6 @@ export default class ListComponent extends Component {
   /**
    * Layout service used to listen to changes to the application
    * layout such as resizing of the main nav or object inspector.
-   *
-   * @property layoutService
-   * @type {Service}
    */
   @service('layout') layoutService;
 
@@ -120,6 +117,7 @@ export default class ListComponent extends Component {
     let oldSchema = this.oldSchema;
     let newSchema = this.schema;
     if (newSchema && newSchema !== oldSchema) {
+      // eslint-disable-next-line ember/no-runloop
       scheduleOnce('actions', this, this.setupColumns);
     }
     this.oldSchema = newSchema;
@@ -128,6 +126,7 @@ export default class ListComponent extends Component {
   @action
   elementInserted(el) {
     this.el = el;
+    // eslint-disable-next-line ember/no-runloop
     scheduleOnce('afterRender', this, this.setupColumns);
     this.onResize = () => {
       this.debounceColumnWidths.perform();
@@ -157,6 +156,7 @@ export default class ListComponent extends Component {
         arr.push({
           name,
           title: name,
+          // eslint-disable-next-line ember/no-runloop
           fn: bind(this, this.toggleColumnVisibility, id),
         });
         return arr;
@@ -166,7 +166,7 @@ export default class ListComponent extends Component {
       basicContext.show(menu, e);
     };
 
-    const listHeader = this.el.querySelector('.list__header');
+    const listHeader = this.el.querySelector('.list-header');
     if (listHeader) {
       listHeader.addEventListener('contextmenu', this.showBasicContext);
     }
@@ -184,7 +184,7 @@ export default class ListComponent extends Component {
   @action
   toggleColumnVisibility(id) {
     this.resizableColumns.toggleVisibility(id);
-    const listHeader = this.el.querySelector('.list__header');
+    const listHeader = this.el.querySelector('.list-header');
     if (listHeader) {
       listHeader.removeEventListener('contextmenu', this.showBasicContext);
     }
@@ -212,7 +212,7 @@ export default class ListComponent extends Component {
    * @method willDestroy
    */
   willDestroy() {
-    const listHeader = this.el.querySelector('.list__header');
+    const listHeader = this.el.querySelector('.list-header');
     if (listHeader) {
       listHeader.removeEventListener('contextmenu', this.showBasicContext);
     }
@@ -228,7 +228,7 @@ export default class ListComponent extends Component {
    */
   @action
   getTableWidth() {
-    return this.el.querySelector('.list__table-container').clientWidth;
+    return this.el.querySelector('.list-table-container').clientWidth;
   }
 
   /**

package/app/components/model-types-toolbar.hbs

@@ -6,7 +6,7 @@
 
   <Ui::ToolbarDivider />
 
-  <div class="toolbar__checkbox js-filter-hide-empty-model-types">
+  <div class="toolbar-checkbox js-filter-hide-empty-model-types">
     <label>
       <Input
         data-test-options-hideEmptyModelTypes
@@ -16,7 +16,7 @@
       Hide Empty Model Types
     </label>
   </div>
-  <div class="toolbar__checkbox js-filter-order-records-by-count">
+  <div class="toolbar-checkbox js-filter-order-records-by-count">
     <label>
       <Input
         data-test-options-orderByRecordCount
@@ -26,7 +26,7 @@
       Order Models By Record Count
     </label>
   </div>
-  <button class="toolbar__radio js-filter" {{on "click" @getStore}} data-test-inspect-store type="button">
+  <button class="toolbar-radio js-filter" {{on "click" @getStore}} data-test-inspect-store type="button">
     Inspect Store
   </button>
 </div>

package/app/components/object-inspector/component-parents.hbs

@@ -0,0 +1,33 @@
+<ObjectInspector::Accordion @mixin={{this.accordionMixin}} as |accordion|>
+  <div
+    class="mixin {{this.accordionMixin.type}} {{if accordion.isExpanded "mixin-state-expanded"}} {{if this.accordionMixin.properties.length "mixin-props-yes" "mixin-props-no"}}"
+    data-test-object-detail
+  >
+    {{#if this.accordionMixin.properties.length}}
+      <h2
+        data-test-object-detail-name
+        class="mixin-name sticky top-0 truncate select-none cursor-default text-base15 bg-base01"
+        role="button"
+        {{on "click" accordion.toggle}}
+      >
+        {{this.accordionMixin.name}}
+      </h2>
+    {{else}}
+      <h2
+        class="mixin-name mixin-name--no-props sticky top-0 truncate select-none text-base09 cursor-default bg-base01"
+        data-test-object-detail-name
+      >
+        {{this.accordionMixin.name}}
+      </h2>
+    {{/if}}
+    {{#if accordion.isExpanded}}
+      <ul class="mixin-properties m-0 text-base font-mono list-none">
+      {{#each this.parents as |parent|}}
+        <ComponentTreeItem @item={{parent}}  />
+      {{else}}
+          <li class="mixin-property flex relative flex-row items-center truncate">No Properties</li>
+      {{/each}}
+      </ul>
+    {{/if}}
+  </div>
+</ObjectInspector::Accordion>

package/app/components/object-inspector/component-parents.js

@@ -0,0 +1,43 @@
+import Component from '@glimmer/component';
+import { RenderItem } from 'ember-inspector/controllers/component-tree';
+
+class RenderItemNoParent extends RenderItem {
+  get level() {
+    return 0;
+  }
+
+  get hasChildren() {
+    return false;
+  }
+}
+
+export default class ComponentParents extends Component {
+  get accordionMixin() {
+    return {
+      name: 'rendered by',
+      expand: true,
+      properties: {
+        length: 1,
+      },
+    };
+  }
+  get parents() {
+    const parents = [];
+    let item = this.args.item?.parentItem;
+    while (item) {
+      parents.push(
+        new RenderItemNoParent(
+          item.controller,
+          item.parentItem,
+          item.renderNode,
+        ),
+      );
+      item = item.parentItem;
+    }
+    return parents;
+  }
+
+  selectComponent = (item) => {
+    this.args.select(item);
+  };
+}

package/app/components/object-inspector/dependent-keys.hbs

@@ -1,14 +1,14 @@
-<li class="mixin__property-dependency-list relative">
+<li class="mixin-property-dependency-list relative">
   {{svg-jar "dependent-key-connection" width="20px" height="10px"}}
   <ul class="m-0 p-0 list-none">
     {{#each @keys as |dep|}}
       <li
-        class="mixin__property-dependency-item relative text-base12 text-sm {{if dep.changed 'text-spec01'}}"
+        class="mixin-property-dependency-item relative text-base12 text-sm {{if dep.changed 'text-spec01'}}"
         title={{if dep.changed 'this property changed'}}
       >
       {{#if dep.child}}
         <span
-          class="mixin__property-dependency-name subkey"
+          class="mixin-property-dependency-name subkey"
           data-label="object-property-name"
         >
           • -- {{dep.child}}
@@ -20,7 +20,7 @@
           height="9px"
         }}
         <span
-          class="mixin__property-dependency-name"
+          class="mixin-property-dependency-name"
           data-label="object-property-name"
         >
           {{dep.name}}

package/app/components/object-inspector/errors.hbs

@@ -1,9 +1,9 @@
-<div class="mixin mixin_props_no" data-test-object-inspector-errors>
-  <h2 class="mixin__name mixin__name--errors bg-base00">
+<div class="mixin mixin-props-no" data-test-object-inspector-errors>
+  <h2 class="mixin-name mixin-name--errors bg-base00">
     Errors
     <button
       data-test-send-errors-to-console
-      class="send-to-console send-to-console--chevron-only ml-1"
+      class="send-to-console send-to-console-chevron-only ml-1"
       type="button"
       {{on "click" @traceErrors}}
     >
@@ -11,7 +11,7 @@
       Trace in the Console
     </button>
   </h2>
-  <div class="mixin__properties m-0 text-base font-mono">
+  <div class="mixin-properties m-0 text-base font-mono">
     {{#each @errors as |error|}}
       <div class="py-0 px-5 mr-1 text-spec01" data-test-object-inspector-error>
         Error while computing: {{error.property}}

package/app/components/object-inspector/properties-all.hbs

@@ -1,5 +1,5 @@
 {{#if this.flatPropertyList.length}}
-  <ul class="mixin__properties m-0 text-base font-mono list-none">
+  <ul class="mixin-properties m-0 text-base font-mono list-none">
     <ObjectInspector::SortProperties
       @properties={{this.flatPropertyList}}
       as |sortedProperties|

package/app/components/object-inspector/properties-base.js

@@ -9,9 +9,11 @@ export default class PropertiesBase extends Component {
     const data = {
       objectId: this.args.model.objectId,
     };
+
     if (name !== '...') {
       data.property = name;
     }
+
     this.port.send('objectInspector:sendToConsole', data);
   }