ember-inspector 4.4.1 → 4.5.0

package/.eslintignore

@@ -13,6 +13,7 @@
 # misc
 /coverage/
 !.*
+.*/
 .eslintcache
 
 # ember-try

package/.eslintrc.js

@@ -50,18 +50,17 @@ module.exports = {
     // node files
     {
       files: [
-        '.ember-cli.js',
-        '.eslintrc.js',
-        '.prettierrc.js',
-        '.stylelintrc.js',
-        '.template-lintrc.js',
-        'ember-cli-build.js',
-        'testem.js',
-        'blueprints/*/index.js',
-        'config/**/*.js',
-        'lib/*/index.js',
-        'scripts/**/*.js',
-        'server/**/*.js',
+        './.eslintrc.js',
+        './.prettierrc.js',
+        './.stylelintrc.js',
+        './.template-lintrc.js',
+        './ember-cli-build.js',
+        './testem.js',
+        './blueprints/*/index.js',
+        './config/**/*.js',
+        './lib/*/index.js',
+        './scripts/**/*.js',
+        './server/**/*.js',
       ],
       excludedFiles: ['app/**'],
       parserOptions: {
@@ -79,5 +78,14 @@ module.exports = {
         'node/no-unpublished-require': 'off',
       },
     },
+    {
+      // Test files:
+      files: ['tests/**/*-test.{js,ts}'],
+      extends: ['plugin:qunit/recommended'],
+      rules: {
+        'qunit/no-conditional-assertions': 'off',
+        'qunit/no-early-return': 'off',
+      },
+    },
   ],
 };

package/.github/workflows/build.yml

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

package/.tool-versions

@@ -0,0 +1 @@
+nodejs 14.16.0

package/CHANGELOG.md

@@ -1,3 +1,34 @@
+# Changelog
+
+
+## v4.5.0 (2021-11-02)
+
+#### :rocket: Enhancement
+* [#1730](https://github.com/emberjs/ember-inspector/pull/1730) Update ember-flatpickr ([@rwwagner90](https://github.com/rwwagner90))
+* [#1685](https://github.com/emberjs/ember-inspector/pull/1685) add highlight render option to Render Performance tab ([@michaelbdai](https://github.com/michaelbdai))
+
+#### :bug: Bug Fix
+* [#1760](https://github.com/emberjs/ember-inspector/pull/1760) Don't rely on Ember.EmberInspectorDebugger ([@sandstrom](https://github.com/sandstrom))
+
+#### :house: Internal
+* [#1759](https://github.com/emberjs/ember-inspector/pull/1759) Fix release-it-lerna-changelog ([@rwwagner90](https://github.com/rwwagner90))
+* [#1750](https://github.com/emberjs/ember-inspector/pull/1750) fixed all the beta build test failures ([@michaelbdai](https://github.com/michaelbdai))
+* [#1733](https://github.com/emberjs/ember-inspector/pull/1733) Recreate yarn.lock ([@rwwagner90](https://github.com/rwwagner90))
+* [#1741](https://github.com/emberjs/ember-inspector/pull/1741) Fix build ([@chancancode](https://github.com/chancancode))
+* [#1731](https://github.com/emberjs/ember-inspector/pull/1731) Fix deprecated use of `run.debounce` ([@chancancode](https://github.com/chancancode))
+* [#1714](https://github.com/emberjs/ember-inspector/pull/1714) Use forks of packages ([@rwwagner90](https://github.com/rwwagner90))
+* [#1727](https://github.com/emberjs/ember-inspector/pull/1727) Refactor legacy/bespoke injection patterns into services ([@chancancode](https://github.com/chancancode))
+* [#1695](https://github.com/emberjs/ember-inspector/pull/1695) Update ember-test-selectors ([@rwwagner90](https://github.com/rwwagner90))
+* [#1683](https://github.com/emberjs/ember-inspector/pull/1683) Remove toolbar outlet, remove more global Ember ([@rwwagner90](https://github.com/rwwagner90))
+* [#1680](https://github.com/emberjs/ember-inspector/pull/1680) ember-cli 3.27, fix some lint ([@rwwagner90](https://github.com/rwwagner90))
+* [#1619](https://github.com/emberjs/ember-inspector/pull/1619) Move changelog heading to top ([@sandstrom](https://github.com/sandstrom))
+
+#### Committers: 4
+- Bing Dai ([@michaelbdai](https://github.com/michaelbdai))
+- Godfrey Chan ([@chancancode](https://github.com/chancancode))
+- Robert Wagner ([@rwwagner90](https://github.com/rwwagner90))
+- [@sandstrom](https://github.com/sandstrom)
+
 ## v4.4.1 (2021-05-25)
 
 #### :bug: Bug Fix
@@ -75,8 +106,6 @@
 - [@dependabot-preview[bot]](https://github.com/apps/dependabot-preview)
 - [@patricklx](https://github.com/patricklx)
 
-# Changelog
-
 ## [v4.1.0](https://github.com/emberjs/ember-inspector/tree/v4.1.0) (2020-05-12)
 
 [Full Changelog](https://github.com/emberjs/ember-inspector/compare/v4.0.1...v4.1.0)

package/app/{templates → components}/component-tree-toolbar.hbs

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

package/app/{templates → components}/container-type-toolbar.hbs

@@ -1,17 +1,17 @@
 <div class="toolbar">
   <Ui::ToolbarReloadButton
-    @action={{action send "reload"}}
+    @action={{@reload}}
     data-test-reload-container-btn
   />
 
   <Ui::ToolbarDivider />
 
-  <Ui::SendToConsole @action={{this.sendContainerToConsole}} />
+  <Ui::SendToConsole @action={{@sendContainerToConsole}} />
 
   <Ui::ToolbarDivider />
 
   <Ui::ToolbarSearchField
-    @value={{this.searchValue}}
+    @value={{@searchValue}}
     data-test-container-instance-search
   />
 </div>

package/app/{templates/container-types/index-toolbar.hbs → components/container-types-toolbar.hbs}

@@ -1,10 +1,10 @@
 <div class="toolbar">
   <Ui::ToolbarReloadButton
-    @action={{action send "reload"}}
+    @action={{@reload}}
     data-test-reload-container-btn
   />
 
   <Ui::ToolbarDivider />
 
-  <Ui::SendToConsole @action={{this.sendContainerToConsole}} />
+  <Ui::SendToConsole @action={{@sendContainerToConsole}} />
 </div>

package/app/components/date-property-field.js

@@ -1,21 +1,15 @@
 import { scheduleOnce } from '@ember/runloop';
+import { action } from '@ember/object';
 import DatePicker from 'ember-inspector/components/ember-flatpickr';
-import { KEYS } from 'ember-inspector/utils/key-codes';
 
 export default class DatePropertyFieldComponent extends DatePicker {
-  didInsertElement() {
-    super.didInsertElement(...arguments);
+  @action
+  onInsert(element) {
+    super.onInsert(element);
 
     scheduleOnce('afterRender', this, this._openFlatpickr);
   }
 
-  keyUp(e) {
-    if (e.keyCode === KEYS.escape) {
-      this.flatpickrRef.close();
-    }
-    return super.keyUp(...arguments);
-  }
-
   _openFlatpickr() {
     this.flatpickrRef.open();
   }

package/app/{templates → components}/deprecations-toolbar.hbs

@@ -1,5 +1,5 @@
 <div class="toolbar">
-  <Ui::ToolbarClearButton @action={{action send "clear"}} />
+  <Ui::ToolbarClearButton @action={{@clear}} />
 
   <Ui::ToolbarDivider />
 
@@ -7,8 +7,8 @@
     <label title="Deprecation workflow">
       <Input
         @type="checkbox"
-        @checked={{this.toggleDeprecationWorkflow}}
-        {{on "change" this.changeDeprecationWorkflow}}
+        @checked={{@toggleDeprecationWorkflow}}
+        {{on "change" @changeDeprecationWorkflow}}
       />
       Toggle for Deprecation Workflow
     </label>
@@ -17,7 +17,7 @@
   <Ui::ToolbarDivider />
 
   <Ui::ToolbarSearchField
-    @value={{this.searchValue}}
+    @value={{@searchValue}}
     data-test-deprecations-search
   />
 </div>

package/app/{templates → components}/model-types-toolbar.hbs

@@ -1,6 +1,6 @@
 <div class="toolbar">
   <Ui::ToolbarReloadButton
-    @action={{action send "reload"}}
+    @action={{@reload}}
     data-test-reload-container-btn
   />
 
@@ -11,7 +11,7 @@
       <Input
         data-test-options-hideEmptyModelTypes
         @type="checkbox"
-        @checked={{this.hideEmptyModelTypes}}
+        @checked={{@hideEmptyModelTypes}}
       />
       Hide Empty Model Types
     </label>
@@ -21,12 +21,12 @@
       <Input
         data-test-options-orderByRecordCount
         @type="checkbox"
-        @checked={{this.orderByRecordCount}}
+        @checked={{@orderByRecordCount}}
       />
       Order Models By Record Count
     </label>
   </div>
-  <button class="toolbar__radio js-filter" {{on "click" this.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/{templates → components}/promise-tree-toolbar.hbs

@@ -1,6 +1,6 @@
 <div class="toolbar">
   <Ui::ToolbarClearButton
-    @action={{this.clear}}
+    @action={{@clear}}
     class="js-clear-promises-btn"
   />
 
@@ -8,7 +8,7 @@
   {{#unless shouldRefresh}}
     <Ui::ToolbarDivider />
     <Ui::ToolbarReloadButton
-      @action={{action send "refreshPage"}}
+      @action={{@refreshPage}}
       class="js-toolbar-page-refresh-btn"
     />
   {{/unless}}
@@ -16,37 +16,37 @@
   <Ui::ToolbarDivider />
 
   <Ui::ToolbarSearchField
-    @value={{this.searchValue}}
+    @value={{@searchValue}}
     class="js-promise-search"
   />
 
   <Ui::ToolbarDivider />
 
   <button
-    class="{{if (eq this.filter "all") "active"}} toolbar__radio toolbar__radio--first js-filter"
-    {{on "click" (fn this.setFilter "all")}}
+    class="{{if (eq @filter "all") "active"}} toolbar__radio toolbar__radio--first js-filter"
+    {{on "click" (fn @setFilter "all")}}
     type="button"
   >
     All
   </button>
 
   <button
-    class="{{if (eq this.filter "rejected") "active"}} toolbar__radio js-filter"
-    {{on "click" (fn this.setFilter "rejected")}}
+    class="{{if (eq @filter "rejected") "active"}} toolbar__radio js-filter"
+    {{on "click" (fn @setFilter "rejected")}}
     type="button"
   >
     Rejected
   </button>
   <button
-    class="{{if (eq this.filter "pending") "active"}} toolbar__radio js-filter"
-    {{on "click" (fn this.setFilter "pending")}}
+    class="{{if (eq @filter "pending") "active"}} toolbar__radio js-filter"
+    {{on "click" (fn @setFilter "pending")}}
     type="button"
   >
     Pending
   </button>
   <button
-    class="{{if (eq this.filter "fulfilled") "active"}} toolbar__radio toolbar__radio--last js-filter"
-    {{on "click" (fn this.setFilter "fullfilled")}}
+    class="{{if (eq @filter "fulfilled") "active"}} toolbar__radio toolbar__radio--last js-filter"
+    {{on "click" (fn @setFilter "fullfilled")}}
     type="button"
   >
     Fulfilled
@@ -58,8 +58,8 @@
     <label>
       <Input
         @type="checkbox"
-        @checked={{this.instrumentWithStack}}
-        {{on "change" (fn this.updateInstrumentWithStack (not this.instrumentWithStack))}}
+        @checked={{@instrumentWithStack}}
+        {{on "change" (fn @updateInstrumentWithStack (not @instrumentWithStack))}}
       />
       Trace promises
     </label>

package/app/components/records-toolbar.hbs

@@ -0,0 +1,26 @@
+<div class="toolbar">
+  <Ui::ToolbarSearchField
+    @value={{@searchValue}}
+    class="js-records-search"
+  />
+
+  <Ui::ToolbarDivider />
+
+  <button
+    class="{{if (is-empty @filterValue) "active"}} toolbar__radio js-filter"
+    {{on "click" (fn @setFilter "")}}
+    type="button"
+  >
+    All
+  </button>
+
+  {{#each @filters as |filter|}}
+    <button
+      class="{{if (eq @filterValue filter.name) "active"}} toolbar__radio js-filter"
+      {{on "click" (fn @setFilter filter.name)}}
+      type="button"
+    >
+      {{filter.desc}}
+    </button>
+  {{/each}}
+</div>

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

@@ -0,0 +1,33 @@
+<div class="toolbar">
+  <Ui::ToolbarClearButton
+    @action={{@clearProfiles}}
+  />
+
+  {{#unless @showEmpty}}
+    <Ui::ToolbarDivider />
+    <Ui::ToolbarReloadButton
+      @action={{@refreshPage}}
+      class="js-toolbar-page-refresh-btn"
+    />
+  {{/unless}}
+
+  <Ui::ToolbarDivider />
+
+  <Ui::ToolbarSearchField
+    @value={{@searchValue}}
+    class="js-render-profiles-search"
+  />
+  {{#if @isHighlightEnabled}}
+    <div class="toolbar__checkbox js-hightlight-render">
+      <label>
+        <Input
+          data-test-options-highlight-render
+          @type="checkbox"
+          @checked={{@shouldHighlightRender}}
+          {{on "change" @updateShouldHighlightRender}}
+        />
+        Highlight render
+      </label>
+    </div>
+  {{/if}}
+</div>

package/app/components/route-cell-name.js

@@ -17,7 +17,7 @@ export default class RouteCellName extends Component {
   get isCurrent() {
     const { currentRoute, route } = this;
 
-    if (!currentRoute) {
+    if (!currentRoute || !route) {
       return false;
     }
 

package/app/{templates → components}/route-tree-toolbar.hbs

@@ -3,7 +3,7 @@
     <label>
       <Input
         @type="checkbox"
-        @checked={{this.options.hideRoutes}}
+        @checked={{@options.hideRoutes}}
       />
       Current Route only
     </label>
@@ -13,7 +13,7 @@
     <label title="Hide loading and error substates">
       <Input
         @type="checkbox"
-        @checked={{this.options.hideSubstates}}
+        @checked={{@options.hideSubstates}}
       />
       Hide Substates
     </label>
@@ -22,7 +22,7 @@
   <Ui::ToolbarDivider />
 
   <Ui::ToolbarSearchField
-    @value={{this.searchValue}}
+    @value={{@searchValue}}
     data-test-filter-views
   />
 </div>

package/app/components/scroll-container.js

@@ -45,7 +45,7 @@ export default class ScrollContainerComponent extends Component {
   }
 
   get scrollTarget() {
-    return this.element.querySelector('.scroll-target');
+    return this.element?.querySelector('.scroll-target');
   }
 
   didRender() {
@@ -74,6 +74,8 @@ export default class ScrollContainerComponent extends Component {
 }
 
 function needsScroll(container, target) {
+  if (!container || !target) return false;
+
   let { top: containerTop, bottom: containerBottom } =
     container.getBoundingClientRect();
   let { top: targetTop, bottom: targetBottom } = target.getBoundingClientRect();

package/app/computed/debounce.js

@@ -1,8 +1,6 @@
-import { run } from '@ember/runloop';
+import { debounce } from '@ember/runloop';
 import { computed } from '@ember/object';
 
-const { debounce } = run;
-
 // Use this if you want a property to debounce
 // another property with a certain delay.
 // This means that every time this prop changes,

package/app/controllers/deprecations.js

@@ -5,6 +5,7 @@ import debounceComputed from 'ember-inspector/computed/debounce';
 import searchMatch from 'ember-inspector/utils/search-match';
 
 export default class DeprecationsController extends Controller {
+  @service adapter;
   @service port;
 
   search = null;

package/app/controllers/render-tree.js

@@ -7,9 +7,12 @@ import debounceComputed from 'ember-inspector/computed/debounce';
 import { and, equal } from '@ember/object/computed';
 
 export default Controller.extend({
+  port: service(),
+
   initialEmpty: false,
-  modelEmpty: equal('model.length', 0),
+  modelEmpty: equal('model.profiles.length', 0),
   showEmpty: and('initialEmpty', 'modelEmpty'),
+  shouldHighlightRender: false,
 
   /**
    * Storage is needed for remembering if the user closed the warning
@@ -56,16 +59,20 @@ export default Controller.extend({
     return escapeRegExp(this.search.toLowerCase());
   }),
 
+  isHighlightEnabled: computed('model.isHighlightSupported', function () {
+    return get(this.model, 'isHighlightSupported');
+  }),
+
   filtered: computed(
     'escapedSearch',
-    'model.@each.name',
+    'model.profiles.@each.name',
     'search',
     function () {
       if (isEmpty(this.escapedSearch)) {
-        return this.model;
+        return get(this.model, 'profiles');
       }
 
-      return this.model.filter((item) => {
+      return get(this.model, 'profiles').filter((item) => {
         const regExp = new RegExp(this.escapedSearch);
         return recursiveMatch(item, regExp);
       });
@@ -75,6 +82,14 @@ export default Controller.extend({
   closeWarning: action(function () {
     this.set('isWarningClosed', true);
   }),
+
+  updateShouldHighlightRender: action(function () {
+    const value = !this.shouldHighlightRender;
+    this.set('shouldHighlightRender', value);
+    this.port.send('render:updateShouldHighlightRender', {
+      shouldHighlightRender: value,
+    });
+  }),
 });
 
 function recursiveMatch(item, regExp) {

package/app/controllers/route-tree.js

@@ -6,45 +6,48 @@ import checkCurrentRoute from 'ember-inspector/utils/check-current-route';
 import searchMatch from 'ember-inspector/utils/search-match';
 import isRouteSubstate from 'ember-inspector/utils/is-route-substate';
 
-export default Controller.extend({
-  application: controller(),
-  port: service(),
+export default class RouteTreeController extends Controller {
+  @controller application;
+  @service port;
 
-  queryParams: ['hideRoutes'],
+  queryParams = ['hideRoutes'];
 
-  currentRoute: null,
-  hideRoutes: alias('options.hideRoutes'),
-  searchValue: '',
+  currentRoute = null;
 
-  filtered: computed(
+  searchValue = '';
+
+  @alias('options.hideRoutes') hideRoutes;
+
+  @computed(
     'model.[]',
     'options.{hideRoutes,hideSubstates}',
     'currentRoute.{name,url}',
-    'searchValue',
-    function () {
-      return this.model.filter((routeItem) => {
-        let currentRoute = this.currentRoute;
-        let hideRoutes = this.get('options.hideRoutes');
-        let hideSubstates = this.get('options.hideSubstates');
-
-        if (hideRoutes && currentRoute) {
-          return checkCurrentRoute(currentRoute, routeItem.value);
-        }
-
-        if (hideSubstates && isRouteSubstate(routeItem.value.name)) {
-          return false;
-        }
-
-        if (!searchMatch(routeItem.value.name, this.searchValue)) {
-          return false;
-        }
-
-        return true;
-      });
-    }
-  ),
+    'searchValue'
+  )
+  get filtered() {
+    return this.model.filter((routeItem) => {
+      let currentRoute = this.currentRoute;
+      let hideRoutes = this.get('options.hideRoutes');
+      let hideSubstates = this.get('options.hideSubstates');
+
+      if (hideRoutes && currentRoute) {
+        return checkCurrentRoute(currentRoute, routeItem.value);
+      }
+
+      if (hideSubstates && isRouteSubstate(routeItem.value.name)) {
+        return false;
+      }
+
+      if (!searchMatch(routeItem.value.name, this.searchValue)) {
+        return false;
+      }
+
+      return true;
+    });
+  }
 
-  rows: computed('filtered.[]', function () {
+  @computed('filtered.[]')
+  get rows() {
     return this.filtered.map(function (route) {
       return {
         name: route,
@@ -52,36 +55,40 @@ export default Controller.extend({
         url: route,
       };
     });
-  }),
+  }
 
   init() {
-    this._super(...arguments);
+    super.init(...arguments);
 
     set(this, 'model', []);
     set(this, 'options', {
       hideRoutes: false,
       hideSubstates: false,
     });
-  },
+  }
 
-  inspectRoute: action(function (name) {
+  @action
+  inspectRoute(name) {
     this.port.send('objectInspector:inspectRoute', { name });
-  }),
+  }
 
-  sendRouteHandlerToConsole: action(function (name) {
+  @action
+  sendRouteHandlerToConsole(name) {
     this.port.send('objectInspector:sendRouteHandlerToConsole', { name });
-  }),
+  }
 
-  inspectController: action(function (controller) {
+  @action
+  inspectController(controller) {
     if (!controller.exists) {
       return;
     }
     this.port.send('objectInspector:inspectController', {
       name: controller.name,
     });
-  }),
+  }
 
-  sendControllerToConsole: action(function (name) {
+  @action
+  sendControllerToConsole(name) {
     this.port.send('objectInspector:sendControllerToConsole', { name });
-  }),
-});
+  }
+}