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

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"
             )
           )
         }}"
@@ -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}}

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/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-grouped.hbs

@@ -1,13 +1,13 @@
 {{#each @model.mixins as |mixin|}}
   <ObjectInspector::Accordion @mixin={{mixin}} as |accordion|>
     <div
-      class="mixin {{mixin.type}} {{if accordion.isExpanded "mixin_state_expanded"}} {{if mixin.properties.length "mixin_props_yes" "mixin_props_no"}}"
+      class="mixin {{mixin.type}} {{if accordion.isExpanded "mixin-state-expanded"}} {{if mixin.properties.length "mixin-props-yes" "mixin-props-no"}}"
       data-test-object-detail
     >
       {{#if mixin.properties.length}}
         <h2
           data-test-object-detail-name
-          class="mixin__name sticky top-0 truncate select-none cursor-default text-base15 bg-base01"
+          class="mixin-name sticky top-0 truncate select-none cursor-default text-base15 bg-base01"
           role="button"
           {{on "click" accordion.toggle}}
         >
@@ -15,14 +15,14 @@
         </h2>
       {{else}}
         <h2
-          class="mixin__name mixin__name--no-props sticky top-0 truncate select-none text-base09 cursor-default bg-base01"
+          class="mixin-name mixin-name--no-props sticky top-0 truncate select-none text-base09 cursor-default bg-base01"
           data-test-object-detail-name
         >
           {{mixin.name}}
         </h2>
       {{/if}}
       {{#if accordion.isExpanded}}
-        <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={{mixin.properties}} as |sortedProperties|
           >
@@ -36,7 +36,7 @@
                 @gotoSource={{fn this.gotoSource prop}}
               />
             {{else}}
-              <li class="mixin__property flex relative flex-row items-center truncate">No Properties</li>
+              <li class="mixin-property flex relative flex-row items-center truncate">No Properties</li>
             {{/each}}
           </ObjectInspector::SortProperties>
         </ul>