[FEATURE] Support for Ember Engines routes

 Fixes emberjs#632

app/components/container-picker.js

@@ -0,0 +1,11 @@
+import Component from '@ember/component';
+
+export default Component.extend({
+  containers: null,
+
+  actions: {
+    onSelect(containerId) {
+      this.sendAction('selectContainer', containerId);
+    }
+  }
+});

app/controllers/containers.js

@@ -0,0 +1,7 @@
+import Controller from '@ember/controller';
+import { sort } from '@ember/object/computed';
+
+export default Controller.extend({
+  sortProperties: ['container_type_id', 'container_instance_id'],
+  sorted: sort('model', 'sortProperties')
+});

app/router.js

@@ -30,13 +30,16 @@ Router.map(function() {
     });
 
     this.route('render-tree', { resetNamespace: true });
-    this.route('container-types', { resetNamespace: true }, function() {
-      this.route('container-type', { path: '/:type_id', resetNamespace: true });
+    this.route('containers', { path: '/containers', resetNamespace: true }, function() {
+      this.route('container', { path: '/:container_type_id/instance/:container_instance_id' }, function() {
+        this.route('container-types', { path: '/type' }, function() {
+          this.route('container-type', { path: '/:type_id' });
+        });
+      });
     });
 
     this.route('deprecations', { resetNamespace: true });
   });
-
 });
 
 export default Router;

app/routes/containers.js

@@ -0,0 +1,29 @@
+import TabRoute from "ember-inspector/routes/tab";
+
+export default TabRoute.extend({
+  model() {
+    const port = this.get('port');
+    return new Promise(resolve => {
+      port.one('container:all', function(message) {
+        let container_type_id, container_instance_id, containers;
+        containers = message.containers.map(function(containerRef) {
+          [container_type_id, container_instance_id] = containerRef.split(':');
+          return {
+            container_type_id,
+            container_instance_id
+          }
+        });
+        resolve(containers);
+      });
+      port.send('container:all');
+    });
+  },
+
+  actions: {
+    selectContainer(containerIndex) {
+      let containerRef;
+      containerRef = this.get('controller.model').objectAt(containerIndex);
+      this.transitionTo('containers.container', containerRef);
+    }
+  }
+});

app/routes/containers/container.js

@@ -0,0 +1,7 @@
+import Route from '@ember/routing/route';
+
+export default Route.extend({
+  model(params) {
+    return params;
+  }
+});

app/routes/container-types.js → app/routes/containers/container/container-types.js

@@ -2,13 +2,17 @@ import Route from '@ember/routing/route';
 import { Promise } from 'rsvp';
 
 export default Route.extend({
+  controllerName: 'container-types',
+
   model() {
+    let containerRef = this.modelFor('containers.container');
     const port = this.get('port');
     return new Promise(resolve => {
       port.one('container:types', function(message) {
         resolve(message.types);
       });
-      port.send('container:getTypes');
+      containerRef = containerRef.container_type_id+':'+containerRef.container_instance_id;
+      port.send('container:getTypes', { containerRef });
     });
   },
   actions: {

app/routes/container-type.js → app/routes/containers/container/container-types/container-type.js

@@ -1,8 +1,10 @@
 import { Promise } from 'rsvp';
 import { get } from '@ember/object';
-import TabRoute from "ember-inspector/routes/tab";
+import Route from '@ember/routing/route';
+
+export default Route.extend({
+  controllerName: 'container-type',
 
-export default TabRoute.extend({
   setupController(controller) {
     controller.setProperties({
       search: '',
@@ -11,8 +13,9 @@ export default TabRoute.extend({
     this._super(...arguments);
   },
   model(params) {
-    const type = params.type_id;
+    const containerType = params.type_id;
     const port = this.get('port');
+    let containerRef = this.modelFor('containers.container');
     return new Promise((resolve, reject) => {
       port.one('container:instances', message => {
         if (message.status === 200) {
@@ -21,15 +24,16 @@ export default TabRoute.extend({
           reject(message);
         }
       });
-      port.send('container:getInstances', { containerType: type });
+      containerRef = containerRef.container_type_id+':'+containerRef.container_instance_id;
+      port.send('container:getInstances', { containerRef, containerType });
     });
   },
 
 
   actions: {
     error(err) {
       if (err && err.status === 404) {
-        this.transitionTo('container-types.index');
+        this.transitionTo('containers.container.containers-types.container-type.index');
         return false;
       }
     },

app/routes/containers/container/container-types/index.js

@@ -0,0 +1,8 @@
+import Route from '@ember/routing/route';
+
+export default Route.extend({
+  afterModel() {
+    let containerType = this.modelFor('containers.container.container-types').firstObject;
+    return this.transitionTo('containers.container.container-types.container-type', containerType.name);
+  }
+});

app/routes/containers/container/index.js

@@ -0,0 +1,7 @@
+import Route from '@ember/routing/route';
+
+export default Route.extend({
+  beforeModel() {
+    this.transitionTo('containers.container.container-types');
+  }
+});

app/routes/containers/index.js

@@ -0,0 +1,11 @@
+import Route from '@ember/routing/route';
+
+export default Route.extend({
+  beforeModel() {
+    let containers = this.modelFor('containers');
+    if (containers) {
+      this.transitionTo('containers.container', containers[0]);
+    }
+  }
+});
+

app/templates/components/container-picker.hbs

@@ -0,0 +1,8 @@
+<div class="dropdown">
+  <select class="dropdown__select" onchange={{action "onSelect" value="target.value"}}>
+    {{#each containers as |containerRef index|}}
+    <option value={{index}}>{{containerRef.container_type_id}}:{{containerRef.container_instance_id}}</option>
+    {{/each}}
+  </select>
+  {{svg-jar "dropdown-arrow" class="dropdown__arrow"}}
+</div>

app/templates/components/item-types.hbs

@@ -13,13 +13,14 @@
         {{#each sorted as |itemType|}}
           <li class={{typeClass}}>
             {{#link-to
-              (if (eq type "model") "records" "container-type")
+              (if (eq type "model") "records" "containers.container.container-types.container-type")
               (escape-url itemType.name)
             }}
               <span class={{concat typeClass "-name"}}>
                 {{itemType.name}}
               </span>
               (<span class={{concat typeClass "-count"}}>{{itemType.count}}</span>)
+
             {{/link-to}}
           </li>
         {{/each}}

app/templates/container-types/index-toolbar.hbs → app/templates/containers-toolbar.hbs

@@ -1,4 +1,6 @@
 <div class="toolbar">
+  {{container-picker containers=sorted selectContainer='selectContainer'}}
+
   {{reload-button
     action="reload"
     classNames="toolbar__icon-button js-reload-container-btn"

app/templates/containers.hbs

@@ -0,0 +1 @@
+{{outlet}}

app/templates/containers/container.hbs

@@ -0,0 +1 @@
+{{outlet}}

app/templates/nav.hbs

@@ -47,7 +47,7 @@
       {{/link-to}}
     </li>
     <li>
-      {{#link-to "container-types"}}
+      {{#link-to "containers"}}
         {{svg-jar "nav-container" width="20px" height="20px"}}
         Container
       {{/link-to}}

ember_debug/container-debug.js

@@ -37,10 +37,34 @@ export default EmberObject.extend(PortMixin, {
     return type[0] === '-' || this.get('TYPES_TO_SKIP').indexOf(type) !== -1;
   },
 
-  instancesByType() {
+  all() {
+    let containers = [
+      'app:main'
+    ];
+
+    const router = this.get('container').lookup('router:main');
+    containers.pushObjects( Object.keys(router._engineInfoByRoute).map(function(key) {
+      return router._engineInfoByRoute[key].name + ':' + router._engineInfoByRoute[key].instanceId;}
+    ).uniq());
+
+    return containers;
+  },
+
+  getContainer(containerRef) {
+    if (containerRef === 'app:main') {
+      return this.get('container');
+    } else {
+      const router = this.get('container').lookup('router:main');
+      let container_type_id, container_instance_id;
+      [container_type_id, container_instance_id] = containerRef.split(':');
+      return router._engineInstances[container_type_id][container_instance_id].__container__;
+    }
+  },
+
+  instancesByType(container) {
     let key;
     let instancesByType = {};
-    let cache = this.get('container').cache;
+    let cache = container.cache;
     // Detect if InheritingDict (from Ember < 1.8)
     if (typeof cache.dict !== 'undefined' && typeof cache.eachLocal !== 'undefined') {
       cache = cache.dict;
@@ -59,18 +83,20 @@ export default EmberObject.extend(PortMixin, {
     return instancesByType;
   },
 
-  getTypes() {
+  getTypes(containerRef) {
     let key;
     let types = [];
-    const instancesByType = this.instancesByType();
+    const container = this.getContainer(containerRef);
+    const instancesByType = this.instancesByType(container);
     for (key in instancesByType) {
       types.push({ name: key, count: instancesByType[key].length });
     }
     return types;
   },
 
-  getInstances(type) {
-    const instances = this.instancesByType()[type];
+  getInstances(containerRef, type) {
+    const container = this.getContainer(containerRef);
+    const instances = this.instancesByType(container)[type];
     if (!instances) {
       return null;
     }
@@ -82,13 +108,19 @@ export default EmberObject.extend(PortMixin, {
   },
 
   messages: {
-    getTypes() {
+    all() {
+      this.sendMessage('all', {
+        containers: this.all()
+      });
+    },
+
+    getTypes(message) {
       this.sendMessage('types', {
-        types: this.getTypes()
+        types: this.getTypes(message.containerRef)
       });
     },
     getInstances(message) {
-      let instances = this.getInstances(message.containerType);
+      let instances = this.getInstances(message.containerRef, message.containerType);
       if (instances) {
         this.sendMessage('instances', {
           instances,

ember_debug/route-debug.js

@@ -143,10 +143,18 @@ function buildSubTree(routeTree, route) {
 
       const router = this.get('router');
       const routerLib = router._routerMicrolib || router.router;
-      routeHandler = routerLib.getHandler(handler);
-      controllerName = routeHandler.get('controllerName') || routeHandler.get('routeName');
-      controllerFactory = owner.factoryFor ? owner.factoryFor(`controller:${controllerName}`) : owner._lookupFactory(`controller:${controllerName}`);
-      controllerClassName = this.getClassName(controllerName, 'controller');
+      let isWithinEngine = router._engineInfoByRoute[handler];
+      let hasBeenLoaded = router._seenHandlers[handler];
+      if (isWithinEngine && !hasBeenLoaded) {
+        controllerName = 'Unloaded controller name';
+        controllerFactory = true;
+        controllerClassName = 'Unloaded controller class name';
+      } else {
+        routeHandler = routerLib.getHandler(handler);
+        controllerName = routeHandler.get('controllerName') || routeHandler.get('routeName');
+        controllerFactory = owner.factoryFor ? owner.factoryFor(`controller:${controllerName}`) : owner._lookupFactory(`controller:${controllerName}`);
+        controllerClassName = this.getClassName(controllerName, 'controller');
+      }
       templateName = this.getClassName(handler, 'template');
 
       subTree[handler] = {

tests/integration/components/container-picker-test.js

@@ -0,0 +1,26 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render } from '@ember/test-helpers';
+import hbs from 'htmlbars-inline-precompile';
+
+module('Integration | Component | container-picker', function(hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function(assert) {
+    // Set any properties with this.set('myProperty', 'value');
+    // Handle any actions with this.set('myAction', function(val) { ... });
+
+    await render(hbs`{{container-picker}}`);
+
+    assert.equal(this.element.textContent.trim(), '');
+
+    // Template block usage:
+    await render(hbs`
+      {{#container-picker}}
+        template block text
+      {{/container-picker}}
+    `);
+
+    assert.equal(this.element.textContent.trim(), 'template block text');
+  });
+});

tests/unit/routes/container-test.js

@@ -0,0 +1,11 @@
+import { module, test } from 'qunit';
+import { setupTest } from 'ember-qunit';
+
+module('Unit | Route | container', function(hooks) {
+  setupTest(hooks);
+
+  test('it exists', function(assert) {
+    let route = this.owner.lookup('route:container');
+    assert.ok(route);
+  });
+});

tests/unit/routes/containers-test.js

@@ -0,0 +1,11 @@
+import { module, test } from 'qunit';
+import { setupTest } from 'ember-qunit';
+
+module('Unit | Route | containers', function(hooks) {
+  setupTest(hooks);
+
+  test('it exists', function(assert) {
+    let route = this.owner.lookup('route:containers');
+    assert.ok(route);
+  });
+});