ember-inspector 4.5.11 → 4.6.0

package/.ember-cli

@@ -5,5 +5,11 @@
 
     Setting `disableAnalytics` to true will prevent any data from being sent.
   */
-  "disableAnalytics": false
+  "disableAnalytics": false,
+
+  /**
+  Setting `isTypeScriptProject` to true will force the blueprint generators to generate TypeScript
+  rather than JavaScript by default, when a TypeScript version of a given blueprint is available.
+  */
+  "isTypeScriptProject": false
 }

package/.eslintignore

@@ -19,9 +19,15 @@
 # ember-try
 /.node_modules.ember-try/
 /bower.json.ember-try
+/npm-shrinkwrap.json.ember-try
 /package.json.ember-try
+/package-lock.json.ember-try
+/yarn.lock.ember-try
 
 # ember-inspector specific
 /dist_prev/
 /skeletons/
 /ember_debug/vendor/startup-wrapper.js
+
+# Safari build
+/Ember Inspector/

package/.eslintrc.js

@@ -33,13 +33,11 @@ module.exports = {
     'ember/avoid-leaking-state-in-ember-objects': 'off',
     'ember/classic-decorator-hooks': 'off',
     'ember/classic-decorator-no-classic-methods': 'off',
-    'ember/no-actions-hash': 'off',
     'ember/no-classic-classes': 'off',
     'ember/no-classic-components': 'off',
     'ember/no-component-lifecycle-hooks': 'off',
     'ember/no-computed-properties-in-native-classes': 'off',
     'ember/no-get': 'off',
-    'ember/no-test-import-export': 'off',
 
     // Best practice
     'no-duplicate-imports': 'error',
@@ -78,7 +76,7 @@ module.exports = {
       },
     },
     {
-      // Test files:
+      // test files
       files: ['tests/**/*-test.{js,ts}'],
       extends: ['plugin:qunit/recommended'],
       rules: {

package/.github/workflows/build.yml

@@ -87,6 +87,7 @@ jobs:
           - ember-lts-3.16
           - ember-lts-3.20
           - ember-lts-3.24
+          - ember-lts-3.28
           - ember-release
           - ember-beta
           - ember-canary

package/.prettierignore

@@ -14,8 +14,12 @@
 /coverage/
 !.*
 .eslintcache
+.lint-todo/
 
 # ember-try
 /.node_modules.ember-try/
 /bower.json.ember-try
+/npm-shrinkwrap.json.ember-try
 /package.json.ember-try
+/package-lock.json.ember-try
+/yarn.lock.ember-try

package/.template-lintrc.js

@@ -7,10 +7,6 @@ module.exports = {
     'no-negated-condition': false,
 
     // TODO: enable these rules
-    'no-action': false,
-    'no-implicit-this': false,
-    'no-inline-styles': false,
     'no-positive-tabindex': false,
-    'table-groups': false,
   },
 };

package/CHANGELOG.md

@@ -8,6 +8,49 @@
 
 
 
+
+## v4.6.0 (2022-08-17)
+
+#### :rocket: Enhancement
+* [#2040](https://github.com/emberjs/ember-inspector/pull/2040) do not close the object inspector ([@patricklx](https://github.com/patricklx))
+* [#1905](https://github.com/emberjs/ember-inspector/pull/1905) enhancement(view-inspection): increased z-index for highlight and tooltip ([@andrewmnlv](https://github.com/andrewmnlv))
+* [#1959](https://github.com/emberjs/ember-inspector/pull/1959) component-tree: make left/right arrow nav in certain conditions (Closes [#1537](https://github.com/emberjs/ember-inspector/issues/1537)) ([@geneukum](https://github.com/geneukum))
+
+#### :bug: Bug Fix
+* [#2051](https://github.com/emberjs/ember-inspector/pull/2051) fix loading ember-inspector after reload ([@patricklx](https://github.com/patricklx))
+* [#2052](https://github.com/emberjs/ember-inspector/pull/2052) fix component tree item show ([@patricklx](https://github.com/patricklx))
+* [#2043](https://github.com/emberjs/ember-inspector/pull/2043) bring back the inspect component context menu functionality ([@patricklx](https://github.com/patricklx))
+* [#2008](https://github.com/emberjs/ember-inspector/pull/2008) Deprecation toolbar clear btn does not clear deprecations ([@geneukum](https://github.com/geneukum))
+* [#1940](https://github.com/emberjs/ember-inspector/pull/1940) Remove support for the TargetActionSupport mixin ([@Windvis](https://github.com/Windvis))
+
+#### :house: Internal
+* [#2103](https://github.com/emberjs/ember-inspector/pull/2103) Remove automated uploads ([@rwwagner90](https://github.com/rwwagner90))
+* [#2101](https://github.com/emberjs/ember-inspector/pull/2101) Download panes from GitHub instead of S3 ([@rwwagner90](https://github.com/rwwagner90))
+* [#2054](https://github.com/emberjs/ember-inspector/pull/2054) Convert controllers to native classes ([@rwwagner90](https://github.com/rwwagner90))
+* [#2053](https://github.com/emberjs/ember-inspector/pull/2053) Convert ToolbarSearchField to glimmer ([@rwwagner90](https://github.com/rwwagner90))
+* [#2041](https://github.com/emberjs/ember-inspector/pull/2041) ember-cli 4.4.0, fix some lint ([@rwwagner90](https://github.com/rwwagner90))
+* [#1998](https://github.com/emberjs/ember-inspector/pull/1998) list-cell: convert to glimmer ([@geneukum](https://github.com/geneukum))
+* [#1990](https://github.com/emberjs/ember-inspector/pull/1990) resizable-column: convert to glimmer ([@geneukum](https://github.com/geneukum))
+* [#1991](https://github.com/emberjs/ember-inspector/pull/1991) object-inspector-test: fix legacy-attribute-arguments issue ([@geneukum](https://github.com/geneukum))
+* [#1987](https://github.com/emberjs/ember-inspector/pull/1987) render-item: fixup no-curly-component-invocation ([@geneukum](https://github.com/geneukum))
+* [#1988](https://github.com/emberjs/ember-inspector/pull/1988) eslintrc: enable 'no-actions-hash' lint rule ([@geneukum](https://github.com/geneukum))
+* [#1989](https://github.com/emberjs/ember-inspector/pull/1989) eslintrc: enable no-test-import-export rule ([@geneukum](https://github.com/geneukum))
+* [#1973](https://github.com/emberjs/ember-inspector/pull/1973) deprecations: resolve instances of this-property-fallback ([@geneukum](https://github.com/geneukum))
+* [#1976](https://github.com/emberjs/ember-inspector/pull/1976) deprecations: fixup instances of no-inline-styles ([@geneukum](https://github.com/geneukum))
+* [#1974](https://github.com/emberjs/ember-inspector/pull/1974) deprecations: fix instances of routing-transition-methods ([@geneukum](https://github.com/geneukum))
+* [#1975](https://github.com/emberjs/ember-inspector/pull/1975) list: fixup dot access for run.bind deprecation ([@geneukum](https://github.com/geneukum))
+* [#1972](https://github.com/emberjs/ember-inspector/pull/1972) properties-base, properties-grouped, properties-all: octane/glimmer upgrade  ([@geneukum](https://github.com/geneukum))
+* [#1961](https://github.com/emberjs/ember-inspector/pull/1961) object-inspector: migrate to glimmer component ([@geneukum](https://github.com/geneukum))
+* [#1906](https://github.com/emberjs/ember-inspector/pull/1906) octane migration - deprecation-item-source ([@michaelbdai](https://github.com/michaelbdai))
+
+#### Committers: 6
+- Bing Dai ([@michaelbdai](https://github.com/michaelbdai))
+- Geordan Neukum ([@geneukum](https://github.com/geneukum))
+- Robert Wagner ([@rwwagner90](https://github.com/rwwagner90))
+- Sam Van Campenhout ([@Windvis](https://github.com/Windvis))
+- [@andrewmnlv](https://github.com/andrewmnlv)
+- [@patricklx](https://github.com/patricklx)
+
 ## v4.5.11 (2021-12-27)
 
 #### :bug: Bug Fix

package/README.md

@@ -120,7 +120,11 @@ Here are the steps to lock an inspector version:
 - Create a new branch (from `stable`) named after the Ember version range that will be supported by this branch. The min version in the range is the first element in the `emberVersionsSupported` array in `package.json`. The max version in the range is the first version that will *not* be supported. For example, a branch named `ember-0.0.0-2.7.0` means it supports Ember 0.0.0 -> 2.6.0, and a branch named `ember-2.7.0-3.4.0` means it supports Ember 2.7.0 -> Ember 3.3.2.
 - Update `package.json`'s `emberVersionsSupported`: add a second element that indicates the minimum Ember version the `master` branch *will not* support.
 - Commit the branch.
-- Run `yarn lock-version`. This will build, compress, and upload this version to S3.
+- Run `yarn lock-version`. This will build, and compress the panes.
+- To upload the panes to GitHub:
+  - Create a folder locally with the naming convention `panes-x-x-x`
+  - Copy the 3 zip files (chrome.zip, firefox.zip, and bookmarklet.zip) into the folder you just created.
+  - Go to https://github.com/emberjs/ember-inspector/upload/panes and drag the folder in to upload it.
 - Checkout the `master` branch.
 - Update `package.json`'s `previousEmberVersionsSupported`: add the first Ember version supported by the recently locked snapshot (the first element in the `emberVersionsSupported` array).
 - Update `package.json`'s `emberVersionsSupported`: Take the last element from `previousEmberVersionsSupported` and set it as the first element in this array. Set an empty string as the second element to indicate there's currently no maximum Ember version supported yet. `emberVersionsSupported` array length should always be `2` indicating a [min, max] range.

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

@@ -1,8 +1,8 @@
 <div class="toolbar">
   <button
     class="{{if @isInspecting "active"}} toolbar__icon-button"
-    {{on "click" @toggleInspect}}
     type="button"
+    {{on "click" @toggleInspect}}
   >
     {{svg-jar "inspect" width="16px" height="17px"}}
   </button>
@@ -12,8 +12,8 @@
   <button
     class="toolbar__icon-button"
     title="expand all"
-    {{on "click" @expandAll}}
     type="button"
+    {{on "click" @expandAll}}
   >
     {{svg-jar "chevron-down" width="16px" height="16px"}}
   </button>
@@ -21,8 +21,8 @@
   <button
     class="toolbar__icon-button"
     title="collapse all"
-    {{on "click" @collapseAll}}
     type="button"
+    {{on "click" @collapseAll}}
   >
     {{svg-jar "chevron-right" width="16px" height="16px"}}
   </button>
@@ -30,7 +30,8 @@
   <Ui::ToolbarDivider />
 
   <Ui::ToolbarSearchField
+    @clear={{fn (mut @query)}}
     @value={{@query}}
     data-test-filter-views
   />
-</div>
+</div>

package/app/components/container-type-toolbar.hbs

@@ -1,8 +1,5 @@
 <div class="toolbar">
-  <Ui::ToolbarReloadButton
-    @action={{@reload}}
-    data-test-reload-container-btn
-  />
+  <Ui::ToolbarReloadButton @action={{@reload}} data-test-reload-container-btn />
 
   <Ui::ToolbarDivider />
 
@@ -11,7 +8,8 @@
   <Ui::ToolbarDivider />
 
   <Ui::ToolbarSearchField
+    @clear={{fn (mut @searchValue)}}
     @value={{@searchValue}}
     data-test-container-instance-search
   />
-</div>
+</div>

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

@@ -1 +1,28 @@
-{{yield this}}
+<div class="deprecation-source pb-2" data-test-deprecation-source>
+  <button
+    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}}
+    type="button"
+  >
+    {{svg-jar "send-with-chevron" width="6px" height="9px"}}
+    Trace in the Console
+  </button>
+  <span class="source">
+    {{#if this.isClickable}}
+      <a
+        class="font-mono"
+        href="#"
+        data-test-deprecation-source-link
+        {{on "click" this.handleRedirect}}
+      >
+        {{this.url}}
+      </a>
+    {{else}}
+      <span class="font-mono" data-test-deprecation-source-text>
+        {{this.url}}
+      </span>
+    {{/if}}
+  </span>
+</div>

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

@@ -1,26 +1,38 @@
-import { tagName } from '@ember-decorators/component';
-import { computed, get } from '@ember/object';
+import { action } from '@ember/object';
 import { inject as service } from '@ember/service';
-import { and, readOnly, bool } from '@ember/object/computed';
-import Component from '@ember/component';
 
-@tagName('')
+import Component from '@glimmer/component';
 export default class DeprecationItemSource extends Component {
   @service port;
 
-  @bool('model.map.source') known;
-
-  @computed('model.map.{line,source}', 'known')
   get url() {
-    let source = get(this, 'model.map.source');
+    let source = this.args.itemModel?.map.source;
     if (this.known) {
-      return `${source}:${get(this, 'model.map.line')}`;
+      return `${source}:${this.args.itemModel?.map.line}`;
     } else {
       return 'Unkown source';
     }
   }
 
-  @readOnly('port.adapter') adapter;
+  get adapter() {
+    return this.port.adapter;
+  }
 
-  @and('known', 'adapter.canOpenResource') isClickable;
+  get isClickable() {
+    return this.known && this.adapter.canOpenResource;
+  }
+
+  get known() {
+    return this.args.itemModel?.map.source;
+  }
+
+  @action
+  handleClick() {
+    this.args.traceSource?.(this.args.modelGroup, this.args.itemModel);
+  }
+
+  @action
+  handleRedirect() {
+    this.args.openResource?.(this.args.itemModel?.map);
+  }
 }

package/app/components/deprecation-item.hbs

@@ -1,3 +1,4 @@
+{{! template-lint-disable require-presentational-children }}
 <Ui::Disclosure as |disclosure|>
   <div class="deprecation-item px-3 text-lg" data-test-deprecation-item>
     <div class="flex items-center">
@@ -28,8 +29,8 @@
           class="send-to-console send-to-console--chevron-only mr-2"
           title="Trace deprecations in console"
           data-test-full-trace-deprecations-btn
-          {{on "click" (fn @traceDeprecations @model)}}
           type="button"
+          {{on "click" (fn @traceDeprecations @model)}}
         >
           {{svg-jar "send-with-chevron" width="6px" height="9px"}}
           Trace in the Console
@@ -40,46 +41,28 @@
         <a
           href={{@model.url}}
           class="flex items-center flex-shrink-0 py-1 px-2 rounded no-underline bg-base02"
-          target="_blank" rel="noopener noreferrer"
+          target="_blank"
+          rel="noopener noreferrer"
         >
           Transition Plan
-          {{svg-jar "external-link" width="16px" height="16px" class="ml-1 external-link"}}
+          {{svg-jar
+            "external-link"
+            width="16px"
+            height="16px"
+            class="ml-1 external-link"
+          }}
         </a>
       {{/if}}
     </div>
 
     {{#if (and @model.hasSourceMap disclosure.isExpanded)}}
       {{#each @model.sources as |single|}}
-        <DeprecationItemSource @model={{single}} as |source|>
-          <div class="deprecation-source pb-2" data-test-deprecation-source>
-            <button
-              class="send-to-console send-to-console--chevron-only mr-3"
-              title="Trace deprecations in console"
-              data-test-trace-deprecations-btn
-              {{on "click" (fn @traceSource @model source.model)}}
-              type="button"
-            >
-              {{svg-jar "send-with-chevron" width="6px" height="9px"}}
-              Trace in the Console
-            </button>
-            <span class="source">
-              {{#if source.isClickable}}
-                <a
-                  class="font-mono"
-                  href="#"
-                  data-test-deprecation-source-link
-                  {{on "click" (fn @openResource source.model.map)}}
-                >
-                  {{source.url}}
-                </a>
-              {{else}}
-                <span class="font-mono" data-test-deprecation-source-text>
-                  {{source.url}}
-                </span>
-              {{/if}}
-            </span>
-          </div>
-        </DeprecationItemSource>
+        <DeprecationItemSource
+          @itemModel={{single}}
+          @modelGroup={{@model}}
+          @traceSource={{@traceSource}}
+          @openResource={{@openResource}}
+        />
       {{/each}}
     {{/if}}
   </div>

package/app/components/deprecations-toolbar.hbs

@@ -1,5 +1,5 @@
 <div class="toolbar">
-  <Ui::ToolbarClearButton @action={{@clear}} />
+  <Ui::ToolbarClearButton @action={{@clear}} data-test-deprecations-clear />
 
   <Ui::ToolbarDivider />
 
@@ -17,7 +17,8 @@
   <Ui::ToolbarDivider />
 
   <Ui::ToolbarSearchField
+    @clear={{fn (mut @searchValue)}}
     @value={{@searchValue}}
     data-test-deprecations-search
   />
-</div>
+</div>

package/app/components/list-cell.hbs

@@ -1,9 +1,12 @@
 <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}}
+  {{on "click" this.click}}
+  ...attributes
 >
   {{yield}}
 </td>

package/app/components/list-cell.js

@@ -1,5 +1,3 @@
-import { tagName } from '@ember-decorators/component';
-import { computed } from '@ember/object';
 /**
  * An individual cell for the `list` table.
  * Usually not called directly but as a contextual helper.
@@ -16,11 +14,10 @@ import { computed } from '@ember/object';
  * </List>
  * ```
  */
-import Component from '@ember/component';
-
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
 import { htmlSafe } from '@ember/template';
 
-@tagName('')
 export default class ListCell extends Component {
   /**
    * Avoid unsafe style warning. This property does not
@@ -29,7 +26,6 @@ export default class ListCell extends Component {
    * @property safeStyle
    * @type {SafeString}
    */
-  @computed('style')
   get safeStyle() {
     return htmlSafe(this.style);
   }
@@ -41,7 +37,9 @@ export default class ListCell extends Component {
    * @type {String}
    * @default null
    */
-  title = null;
+  get title() {
+    return this.args.title ?? null;
+  }
 
   /**
    * The `style` attribute of the DOM element.
@@ -50,7 +48,9 @@ export default class ListCell extends Component {
    * @type {String}
    * @default null
    */
-  style = null;
+  get style() {
+    return this.args.style ?? null;
+  }
 
   /**
    * Cells can be clickable. One example would be clicking Data records to
@@ -61,7 +61,9 @@ export default class ListCell extends Component {
    * @type {Boolean}
    * @default false
    */
-  clickable = false;
+  get clickable() {
+    return this.args.clickable ?? false;
+  }
 
   /**
    * Set this property to `true` to highlight the cell. For example
@@ -71,25 +73,18 @@ export default class ListCell extends Component {
    * @type {Boolean}
    * @default false
    */
-  highlight = false;
-
-  /**
-   * Action to trigger when the cell is clicked.
-   * Pass the action through the template using the `action`
-   * helper.
-   *
-   * @property on-click
-   * @type {Function}
-   */
-  'on-click'() {}
+  get highlight() {
+    return this.args.highlight ?? false;
+  }
 
   /**
-   * DOM event triggered when cell is clicked.
-   * Calls the `on-click` action (if set).
+   * Action triggered when cell is clicked.
+   * Calls the `on-click` argument (if set).
    *
    * @method click
    */
+  @action
   click() {
-    this['on-click']();
+    this.args['on-click']?.();
   }
 }

package/app/components/list-content.hbs

@@ -2,11 +2,11 @@
   <div class="list__table-container">
     <table>
       <colgroup>
-        {{#each columns as |column|}}
+        {{#each this.columns as |column|}}
           <col style={{build-style width=(concat column.width "px")}} />
         {{/each}}
       </colgroup>
-      {{yield (hash rowEvents=rowEvents)}}
+      {{yield (hash rowEvents=this.rowEvents)}}
     </table>
   </div>
 </div>

package/app/components/list.hbs

@@ -1,15 +1,15 @@
-{{#if schema.columns.length}}
+{{#if this.schema.columns.length}}
   <div class="list__header">
     <div class="list__table-container">
       <table>
         <colgroup>
-          {{#each columns key="id" as |column|}}
+          {{#each this.columns key="id" as |column|}}
             <col style={{build-style width=(concat column.width "px")}}>
           {{/each}}
         </colgroup>
         <tbody>
           <tr class="list__row">
-            {{#each columns key="id" as |column|}}
+            {{#each this.columns key="id" as |column|}}
               <ListCell
                 class="js-header-column"
                 @tagName="th"
@@ -40,8 +40,8 @@
   }}
 </ListContent>
 
-{{#each columns key="id" as |column|}}
-  {{#if (and column.visible (not-eq column columns.lastObject))}}
+{{#each this.columns key="id" as |column|}}
+  {{#if (and column.visible (not-eq column this.columns.lastObject))}}
     <Ui::DragHandle
       @faded={{true}}
       @left={{column.left}}

package/app/components/list.js

@@ -1,6 +1,6 @@
 /* eslint-disable ember/require-tagless-components */
 import Component from '@ember/component';
-import { run, scheduleOnce } from '@ember/runloop';
+import { bind, scheduleOnce } from '@ember/runloop';
 import { task, timeout } from 'ember-concurrency';
 import ResizableColumns from 'ember-inspector/libs/resizable-columns';
 import { inject as service } from '@ember/service';
@@ -165,7 +165,7 @@ export default Component.extend({
         arr.push({
           name,
           title: name,
-          fn: run.bind(this, this.toggleColumnVisibility, id),
+          fn: bind(this, this.toggleColumnVisibility, id),
         });
         return arr;
       }, []);

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

@@ -1,4 +1,4 @@
-import { action, computed } from '@ember/object';
+import { action } from '@ember/object';
 import { inject as service } from '@ember/service';
 import PropertiesBase from 'ember-inspector/components/object-inspector/properties-base';
 
@@ -8,31 +8,30 @@ const findMixin = function (mixins, property) {
   });
 };
 
-export default PropertiesBase.extend({
-  port: service(),
+export default class PropertiesAll extends PropertiesBase {
+  @service port;
 
-  tagName: '',
-
-  calculate: action(function (property) {
-    const mixin = findMixin(this.get('model.mixins'), property);
+  @action calculate(property) {
+    const mixin = findMixin(this.args.model.mixins, property);
 
     this.port.send('objectInspector:calculate', {
-      objectId: this.model.objectId,
-      mixinIndex: this.get('model.mixins').indexOf(mixin),
+      objectId: this.args.model.objectId,
+      mixinIndex: this.args.model.mixins.indexOf(mixin),
       property: property.name,
     });
-  }),
+  }
 
-  flatPropertyList: computed('customFilter', 'model.mixins', function () {
-    const props = this.get('model.mixins').map(function (mixin) {
+  get flatPropertyList() {
+    const props = this.args.model.mixins.map(function (mixin) {
       return mixin.properties.filter(function (p) {
-        let shoulApplyCustomFilter = this.customFilter
-          ? p.name.toLowerCase().indexOf(this.customFilter.toLowerCase()) > -1
+        let shouldApplyCustomFilter = this.args.customFilter
+          ? p.name.toLowerCase().indexOf(this.args.customFilter.toLowerCase()) >
+            -1
           : true;
-        return !p.hasOwnProperty('overridden') && shoulApplyCustomFilter;
+        return !p.hasOwnProperty('overridden') && shouldApplyCustomFilter;
       }, this);
     }, this);
 
     return props.flat();
-  }),
-});
+  }
+}