ember-inspector 4.4.1 → 4.5.0

package/app/initializers/setup.js

@@ -1,29 +1,18 @@
 import config from 'ember-inspector/config/environment';
-import PromiseAssembler from 'ember-inspector/libs/promise-assembler';
 
 export default {
   name: 'setup',
   initialize(instance) {
     // {{EMBER_DIST}} is replaced by the build process (basic, chrome, etc)
-    let Adapter = instance.resolveRegistration(`adapter:{{EMBER_DIST}}`);
+    let Adapter = instance.resolveRegistration(
+      `service:adapters/{{EMBER_DIST}}`
+    );
 
-    // register and inject adapter
-    register(instance, 'adapter:main', Adapter);
-    instance.inject('controller:deprecations', 'adapter', 'adapter:main');
-    instance.inject('route:application', 'adapter', 'adapter:main');
-    instance.inject('route:deprecations', 'adapter', 'adapter:main');
-    instance.inject('service:port', 'adapter', 'adapter:main');
+    // register the adapter service
+    register(instance, 'service:adapter', Adapter);
 
-    // register config
-    register(instance, 'config:main', config, { instantiate: false });
-    instance.inject('route', 'config', 'config:main');
-
-    // inject port
-    instance.inject('promise-assembler', 'port', 'service:port');
-
-    // register and inject promise assembler
-    register(instance, 'promise-assembler:main', PromiseAssembler);
-    instance.inject('route:promiseTree', 'assembler', 'promise-assembler:main');
+    // register the config service
+    register(instance, 'service:config', config, { instantiate: false });
   },
 };
 

package/app/models/promise.js

@@ -1,6 +1,5 @@
 import { observes } from '@ember-decorators/object';
 import { or, equal, not } from '@ember/object/computed';
-import { assign } from '@ember/polyfills';
 import { once } from '@ember/runloop';
 import { typeOf, isEmpty } from '@ember/utils';
 // eslint-disable-next-line ember/no-observers
@@ -203,9 +202,9 @@ export default class Promise extends EmberObject {
   }
 
   _allChildren() {
-    let children = assign([], this.children);
+    let children = [...this.children];
     children.forEach((item) => {
-      children = assign(children, item._allChildren());
+      children = [...children, item._allChildren()];
     });
     return children;
   }
@@ -213,7 +212,7 @@ export default class Promise extends EmberObject {
   _allParents() {
     let parent = this.parent;
     if (parent) {
-      return assign([parent], parent._allParents());
+      return [parent, ...parent._allParents()];
     } else {
       return [];
     }

package/app/routes/application.js

@@ -2,18 +2,10 @@ import { inject as service } from '@ember/service';
 import { set, get, action } from '@ember/object';
 import Route from '@ember/routing/route';
 import Ember from 'ember';
-
 const { NativeArray } = Ember;
 
 export default class ApplicationRoute extends Route {
-  /**
-   * Service used to broadcast changes to the application's layout
-   * such as toggling of the object inspector.
-   *
-   * @property layoutService
-   * @type {Service}
-   */
-  @service('layout') layoutService;
+  @service adapter;
   @service port;
 
   setupController(controller) {
@@ -56,11 +48,7 @@ export default class ApplicationRoute extends Route {
   }
 
   updateObject(options) {
-    const details = options.details,
-      name = options.name,
-      property = options.property,
-      objectId = options.objectId,
-      errors = options.errors;
+    let { details, errors, name, objectId, property } = options;
 
     NativeArray.apply(details);
     details.forEach(arrayize);

package/app/routes/component-tree.js

@@ -20,11 +20,13 @@ export default class ComponentTreeRoute extends TabRoute {
 
   setupController(controller, message) {
     super.setupController(...arguments);
+
     this.setRenderTree(message);
   }
 
   activate() {
     super.activate(...arguments);
+
     this.port.on('view:renderTree', this, this.setRenderTree);
     this.port.on('view:cancelSelection', this, this.cancelSelection);
     this.port.on('view:startInspecting', this, this.startInspecting);
@@ -34,6 +36,7 @@ export default class ComponentTreeRoute extends TabRoute {
 
   deactivate() {
     super.deactivate(...arguments);
+
     this.port.off('view:renderTree', this, this.setRenderTree);
     this.port.off('view:cancelSelection', this, this.cancelSelection);
     this.port.off('view:startInspecting', this, this.startInspecting);

package/app/routes/deprecations.js

@@ -4,6 +4,7 @@ import { setProperties, action } from '@ember/object';
 import TabRoute from 'ember-inspector/routes/tab';
 
 export default class DeprecationsRoute extends TabRoute {
+  @service adapter;
   @service port;
 
   model() {
@@ -15,16 +16,19 @@ export default class DeprecationsRoute extends TabRoute {
 
   setupController(controller, message) {
     super.setupController(...arguments);
+
     this.deprecationsAdded(message);
   }
 
   activate() {
     super.activate(...arguments);
+
     this.port.on('deprecation:deprecationsAdded', this, this.deprecationsAdded);
   }
 
   deactivate() {
     super.deactivate(...arguments);
+
     this.port.off(
       'deprecation:deprecationsAdded',
       this,

package/app/routes/launch.js

@@ -10,6 +10,7 @@ const storageSupported = chromeStoreSupported || LOCAL_STORAGE_SUPPORTED;
 const STORE_KEY = 'last-version-opened';
 
 export default class LaunchRoute extends Route {
+  @service config;
   @service storage;
 
   @readOnly('config.VERSION') version;

package/app/routes/libraries.js

@@ -4,6 +4,7 @@ import { Promise } from 'rsvp';
 import TabRoute from 'ember-inspector/routes/tab';
 
 export default class LibrariesRoute extends TabRoute {
+  @service config;
   @service port;
 
   @readOnly('config.VERSION') version;

package/app/routes/promise-tree.js

@@ -2,10 +2,15 @@ import { get, set } from '@ember/object';
 import { inject as service } from '@ember/service';
 import { Promise } from 'rsvp';
 import TabRoute from 'ember-inspector/routes/tab';
+import PromiseAssembler from 'ember-inspector/libs/promise-assembler';
 
 export default class PromiseTreeRoute extends TabRoute {
   @service port;
 
+  assembler = PromiseAssembler.create({
+    port: this.port,
+  });
+
   model() {
     // block rendering until first batch arrives
     // Helps prevent flashing of "please refresh the page"
@@ -19,6 +24,7 @@ export default class PromiseTreeRoute extends TabRoute {
 
   setupController() {
     super.setupController(...arguments);
+
     this.port.on(
       'promise:instrumentWithStack',
       this,

package/app/routes/render-tree.js

@@ -1,4 +1,4 @@
-import { action, get, set } from '@ember/object';
+import EmberObject, { action, get, set } from '@ember/object';
 import { inject as service } from '@ember/service';
 import { Promise } from 'rsvp';
 import TabRoute from 'ember-inspector/routes/tab';
@@ -9,16 +9,20 @@ export default class RenderTreeRoute extends TabRoute {
   model() {
     const port = this.port;
     return new Promise(function (resolve) {
-      port.one('render:profilesAdded', function (message) {
-        resolve(message.profiles);
-      });
+      port.one(
+        'render:profilesAdded',
+        function ({ profiles, isHighlightSupported }) {
+          resolve(EmberObject.create({ profiles, isHighlightSupported }));
+        }
+      );
       port.send('render:watchProfiles');
     });
   }
 
   setupController(controller, model) {
     super.setupController(...arguments);
-    if (model.length === 0) {
+
+    if (get(model, 'profiles.length') === 0) {
       controller.set('initialEmpty', true);
     }
     const port = this.port;
@@ -27,6 +31,8 @@ export default class RenderTreeRoute extends TabRoute {
   }
 
   deactivate() {
+    super.deactivate(...arguments);
+
     const port = this.port;
     port.off('render:profilesUpdated', this, this.profilesUpdated);
     port.off('render:profilesAdded', this, this.profilesAdded);
@@ -34,16 +40,27 @@ export default class RenderTreeRoute extends TabRoute {
   }
 
   profilesUpdated(message) {
-    set(this, 'controller.model', message.profiles);
+    set(this, 'controller.model.profiles', message.profiles);
   }
 
   profilesAdded(message) {
-    const model = get(this, 'controller.model');
+    const currentProfiles = get(this, 'controller.model.profiles');
     const profiles = message.profiles;
+    if (
+      message.isHighlightSupported !== undefined &&
+      message.isHighlightSupported !==
+        get(this, 'controller.model.isHighlightSupported')
+    ) {
+      set(
+        this,
+        'controller.model.isHighlightSupported',
+        message.isHighlightSupported
+      );
+    }
 
-    model.pushObjects(profiles);
-    if (model.length > 100) {
-      set(this, 'controller.model', model.slice(0, 100));
+    currentProfiles.pushObjects(profiles);
+    if (currentProfiles.length > 100) {
+      set(this, 'controller.model.profiles', currentProfiles.slice(0, 100));
     }
   }
 

package/app/routes/route-tree.js

@@ -1,5 +1,4 @@
 import { inject as service } from '@ember/service';
-import { assign } from '@ember/polyfills';
 import { set } from '@ember/object';
 import TabRoute from 'ember-inspector/routes/tab';
 
@@ -7,6 +6,8 @@ export default class RouteTreeRoute extends TabRoute {
   @service port;
 
   setupController() {
+    super.setupController(...arguments);
+
     this.port.on('route:currentRoute', this, this.setCurrentRoute);
     this.port.send('route:getCurrentRoute');
     this.port.on('route:routeTree', this, this.setTree);
@@ -31,7 +32,7 @@ export default class RouteTreeRoute extends TabRoute {
 
 function topSort(tree, list) {
   list = list || [];
-  let route = assign({}, tree);
+  let route = { ...tree };
   delete route.children;
   // Firt node in the tree doesn't have a value
   if (route.value) {

package/app/routes/tab.js

@@ -1,14 +1,14 @@
-/* eslint no-empty:0 */
 import Route from '@ember/routing/route';
+import { scheduleOnce } from '@ember/runloop';
 
 export default class TabRoute extends Route {
-  renderTemplate() {
-    this.render();
-    try {
-      this.render(`${this.routeName.replace(/\./g, '/')}-toolbar`, {
-        into: 'application',
-        outlet: 'toolbar',
-      });
-    } catch (e) {}
+  setupController(controller) {
+    super.setupController(...arguments);
+
+    function setToolbarContainer() {
+      controller.set('toolbarContainer', document.querySelector('#toolbar'));
+    }
+
+    scheduleOnce('afterRender', this, setToolbarContainer);
   }
 }

package/app/routes/whats-new.js

@@ -1,4 +1,5 @@
 import TabRoute from 'ember-inspector/routes/tab';
+import { inject as service } from '@ember/service';
 import { tracked } from '@glimmer/tracking';
 import fetch from 'fetch';
 
@@ -19,6 +20,7 @@ function getLatestEntry(doc) {
 }
 
 export default class WhatsNewRoute extends TabRoute {
+  @service config;
   @tracked error = false;
 
   model() {

package/app/{adapters → services/adapters}/basic.js

@@ -11,11 +11,11 @@
  * });
  * ```
  */
-import EmberObject from '@ember/object';
+import Service from '@ember/service';
 import { tracked } from '@glimmer/tracking';
 import config from 'ember-inspector/config/environment';
 
-export default class Basic extends EmberObject {
+export default class Basic extends Service {
   @tracked canOpenResource = false;
   name = 'basic';
 
@@ -32,7 +32,7 @@ export default class Basic extends EmberObject {
   }
 
   /**
-   * Listens to `EmberInspectorDebugger` message about
+   * Listens to Ember Inspector message about
    * Ember version mismatch. If a mismatch message is received
    * it means the current inspector app does not support the current
    * Ember version and needs to switch to an inspector version

package/app/services/port.js

@@ -1,8 +1,9 @@
 import { set } from '@ember/object';
 import Evented from '@ember/object/evented';
-import Service from '@ember/service';
-
+import Service, { inject as service } from '@ember/service';
 export default class PortService extends Service.extend(Evented) {
+  @service adapter;
+
   applicationId = undefined;
   applicationName = undefined;
 

package/app/templates/application.hbs

@@ -46,7 +46,7 @@
 
           <div class="split__panel">
             <div class="split__panel__hd">
-              {{outlet "toolbar"}}
+              <div id="toolbar"></div>
               <button
                 class="object-inspector-toggle toolbar__icon-button absolute top-0 right-0"
                 {{on "click" this.toggleInspector}}

package/app/templates/component-tree.hbs

@@ -1,13 +1,29 @@
+{{#if this.toolbarContainer}}
+  {{#in-element this.toolbarContainer}}
+    <ComponentTreeToolbar
+      @collapseAll={{this.collapseAll}}
+      @expandAll={{this.expandAll}}
+      @isInspecting={{this.isInspecting}}
+      @query={{this.query}}
+      @toggleInspect={{this.toggleInspect}}
+    />
+  {{/in-element}}
+{{/if}}
+
 <ScrollContainer
-  {{did-insert this.arrowKeysSetup}}
-  {{will-destroy this.arrowKeysTeardown}}
   @collection={{this.visibleItems}}
   @currentItem={{this.currentItem}}
   @itemHeight={{this.itemHeight}}
   class="list__content"
   tabindex="-1"
+  {{did-insert this.arrowKeysSetup}}
+  {{will-destroy this.arrowKeysTeardown}}
 >
-  {{#vertical-collection this.visibleItems estimateHeight=this.itemHeight key="id" as |item|}}
+  {{#vertical-collection
+    this.visibleItems
+    estimateHeight=this.itemHeight
+    key="id" as |item|
+  }}
     <ComponentTreeItem @item={{item}} />
   {{/vertical-collection}}
-</ScrollContainer>
+</ScrollContainer>

package/app/templates/container-type.hbs

@@ -1,3 +1,13 @@
+{{#if this.toolbarContainer}}
+  {{#in-element this.toolbarContainer}}
+    <ContainerTypeToolbar
+      @reload={{action send "reload"}}
+      @searchValue={{this.searchValue}}
+      @sendContainerToConsole={{this.sendContainerToConsole}}
+    />
+  {{/in-element}}
+{{/if}}
+
 <EmberTable as |t|>
   <t.head
     @columns={{this.columns}}

package/app/templates/container-types/index.hbs

@@ -0,0 +1,10 @@
+{{#if this.toolbarContainer}}
+  {{#in-element this.toolbarContainer}}
+    <ContainerTypesToolbar
+      @reload={{action send "reload"}}
+      @sendContainerToConsole={{this.sendContainerToConsole}}
+    />
+  {{/in-element}}
+{{/if}}
+
+{{yield}}

package/app/templates/deprecations.hbs

@@ -1,10 +1,17 @@
+{{#if this.toolbarContainer}}
+  {{#in-element this.toolbarContainer}}
+    <DeprecationsToolbar
+      @changeDeprecationWorkflow={{this.changeDeprecationWorkflow}}
+      @clear={{action send "clear"}}
+      @searchValue={{this.searchValue}}
+      @toggleDeprecationWorkflow={{this.toggleDeprecationWorkflow}}
+    />
+  {{/in-element}}
+{{/if}}
+
 {{#if filtered.length}}
   <div class="list__content js-deprecations" style="height: 100%;">
-    {{#vertical-collection
-      filtered
-      estimateHeight=20
-    as |content|
-    }}
+    {{#vertical-collection filtered estimateHeight=20 as |content|}}
       <DeprecationItem
         @model={{content}}
         @openResource={{this.openResource}}
@@ -19,11 +26,7 @@
       No deprecations have been detected. Try reloading to catch the
       deprecations that were logged before you opened the inspector.
     </p>
-    <button
-      class="js-page-refresh-btn"
-      {{action "refreshPage"}}
-      type="button"
-    >
+    <button class="js-page-refresh-btn" type="button" {{action "refreshPage"}}>
       Reload
     </button>
   </Ui::EmptyMessage>

package/app/templates/libraries.hbs

@@ -1,20 +1,21 @@
+{{#if this.toolbarContainer}}
+  {{#in-element this.toolbarContainer}}
+    <LibrariesToolbar />
+  {{/in-element}}
+{{/if}}
+
 <EmberTable as |t|>
-  <t.head
-    @columns={{schema-for "info-list"}}
-    @enableReorder={{false}}
-  />
+  <t.head @columns={{schema-for "info-list"}} @enableReorder={{false}} />
 
   <t.body @rows={{rows}} as |b|>
     <b.row
-      class={{concat "js-library-row" (if (mod b.rowMeta.index 2) " striped")}}
-    as |r|
+      class={{
+        concat "js-library-row" (if (mod b.rowMeta.index 2) " striped")
+      }} as |r|
     >
-      <r.cell
-        class={{concat "js-lib-" r.columnValue.valuePath}}
-      as |value|
-      >
+      <r.cell class={{concat "js-lib-" r.columnValue.valuePath}} as |value|>
         {{value}}
       </r.cell>
     </b.row>
   </t.body>
-</EmberTable>
+</EmberTable>

package/app/templates/model-types.hbs

@@ -1,8 +1,21 @@
+{{#if this.toolbarContainer}}
+  {{#in-element this.toolbarContainer}}
+    <ModelTypesToolbar
+      @getStore={{this.getStore}}
+      @hideEmptyModelTypes={{this.hideEmptyModelTypes}}
+      @orderByRecordCount={{this.orderByRecordCount}}
+      @reload={{action send "reload"}}
+    />
+  {{/in-element}}
+{{/if}}
+
 <ItemTypes
   @header="Model Types"
-  @sorted={{readonly (if this.orderByRecordCount this.sortByDescCount this.sortByName)}}
+  @sorted={{
+    readonly (if this.orderByRecordCount this.sortByDescCount this.sortByName)
+  }}
   @type="model"
   @width={{this.navWidth}}
 >
   {{outlet}}
-</ItemTypes>
+</ItemTypes>

package/app/templates/promise-tree.hbs

@@ -1,13 +1,28 @@
+{{#if this.toolbarContainer}}
+  {{#in-element this.toolbarContainer}}
+    <PromiseTreeToolbar
+      @clear={{this.clear}}
+      @filter={{this.filter}}
+      @instrumentWithStack={{this.instrumentWithStack}}
+      @refreshPage={{action send "refreshPage"}}
+      @searchValue={{this.searchValue}}
+      @setFilter={{this.setFilter}}
+      @updateInstrumentWithStack={{this.updateInstrumentWithStack}}
+    />
+  {{/in-element}}
+{{/if}}
+
 {{#if this.shouldRefresh}}
   <Ui::EmptyMessage class="js-page-refresh">
-    <p>Reload the page to see promises created before you opened the inspector.</p>
-    <button class="js-page-refresh-btn" {{action "refreshPage"}} type="button">Reload</button>
+    <p>
+      Reload the page to see promises created before you opened the inspector.
+    </p>
+    <button class="js-page-refresh-btn" type="button" {{action "refreshPage"}}>
+      Reload
+    </button>
   </Ui::EmptyMessage>
 {{else}}
-  <List
-    class="js-promise-tree"
-    @schema={{schema-for "promise-tree"}} as |list|
-  >
+  <List class="js-promise-tree" @schema={{schema-for "promise-tree"}} as |list|>
     {{#list.vertical-collection this.filtered as |content index|}}
       <tr class="list__row js-promise-tree-item {{if (mod index 2) "striped"}}">
         <PromiseItem
@@ -23,4 +38,4 @@
       </tr>
     {{/list.vertical-collection}}
   </List>
-{{/if}}
+{{/if}}

package/app/templates/records.hbs

@@ -1,9 +1,19 @@
+{{#if this.toolbarContainer}}
+  {{#in-element this.toolbarContainer}}
+    <RecordsToolbar
+      @filters={{this.filters}}
+      @filterValue={{this.filterValue}}
+      @searchValue={{this.searchValue}}
+      @setFilter={{this.setFilter}}
+    />
+  {{/in-element}}
+{{/if}}
+
 <EmberTable as |t|>
   <t.head
     @columns={{this.columns}}
     @sorts={{this.sorts}}
-    @onUpdateSorts={{this.updateSorts}}
-  as |h|
+    @onUpdateSorts={{this.updateSorts}} as |h|
   >
     <h.row as |r|>
       <r.cell data-test-table-header-column />
@@ -13,13 +23,11 @@
     @rows={{this.filteredRecords}}
     @checkboxSelectionMode="none"
     @selection={{this.selection}}
-    @onSelect={{this.inspectModel}}
-  as |b|
+    @onSelect={{this.inspectModel}} as |b|
   >
     <b.row
       class={{if (mod b.rowMeta.index 2) "striped"}}
-      data-test-table-row
-    as |r|
+      data-test-table-row as |r|
     >
       <r.cell data-test-table-cell as |value column row|>
         <span class={{row.color}}>
@@ -28,4 +36,4 @@
       </r.cell>
     </b.row>
   </t.body>
-</EmberTable>
+</EmberTable>