Simplify layout of Routes Tree (#938)

- Remove templates column
- Combine routes and controllers column
- Replace route and controller class names with simple label

app/controllers/route-tree.js

@@ -46,10 +46,8 @@ export default Controller.extend({
   rows: computed('filtered.[]', function() {
     return this.get('filtered').map(function(route) {
       return {
-        controller: route,
         name: route,
-        route,
-        template: route,
+        objects: route,
         url: route
       };
     });

app/schemas/route-tree.js

@@ -6,14 +6,8 @@ export default [
     valuePath: 'name',
     name: 'Route Name',
   }, {
-    valuePath: 'route',
-    name: 'Route',
-  }, {
-    valuePath: 'controller',
-    name: 'Controller',
-  }, {
-    valuePath: 'template',
-    name: 'Template',
+    valuePath: 'objects',
+    name: 'Objects',
   }, {
     valuePath: 'url',
     name: 'URL',

app/styles/app.scss

@@ -36,6 +36,7 @@
 @import "notice";
 @import "object_inspector";
 @import "pill";
+@import "route_tree";
 @import "send_to_console";
 @import "sidebar_toggle";
 @import "split";

app/styles/route_tree.scss

@@ -0,0 +1,11 @@
+.route-cell-objects {
+  .is-link {
+    // inline-block prevents underline from displaying around white-space
+    display: inline-block;
+    margin-right: 2px;
+  }
+
+  .send-to-console {
+    margin-right: 10px;
+  }
+}

app/templates/components/route-cell-objects.hbs

@@ -0,0 +1,29 @@
+<div class="route-cell-objects">
+  <span
+    class="is-link js-route-handler"
+    title={{route.value.routeHandler.className}}
+    {{action inspectRoute route.value.routeHandler.name}}
+  >
+    Route
+  </span>
+
+  {{send-to-console
+    action=sendRouteHandlerToConsole
+    param=route.value.routeHandler.name
+  }}
+
+  {{#if route.value.controller.exists}}
+    <span
+      class="is-link js-route-controller"
+      title={{route.value.controller.className}}
+      {{action inspectController route.value.controller}}
+    >
+      Controller
+    </span>
+
+    {{send-to-console
+      action=sendControllerToConsole
+      param=route.value.controller.name
+    }}
+  {{/if}}
+</div>

app/templates/components/route-cell-url.hbs

@@ -1,3 +1,3 @@
-<span class="js-route-url" title={{route.value.url}}>
+<code class="js-route-url" title={{route.value.url}}>
   {{route.value.url}}
-</span>
+</code>

tests/acceptance/route-tree-test.js

@@ -96,68 +96,36 @@ module('Route Tree Tab', function(hooks) {
     await visit('route-tree');
 
     let routeNodes = findAll('.js-route-tree-item');
-    assert.equal(routeNodes.length, 6);
+    assert.equal(routeNodes.length, 6, 'correct number of nodes');
 
     let routeNames = findAll('.js-route-name').map(function(item) {
       return item.textContent.trim();
     });
-    assert.deepEqual(routeNames, ['application', 'post', 'post.loading', 'post.new', 'post.edit', 'comments']);
+    assert.deepEqual(
+      routeNames,
+      ['application', 'post', 'post.loading', 'post.new', 'post.edit', 'comments'],
+      'route name displayed'
+    );
 
     let routeHandlers = findAll('.js-route-handler').map(function(item) {
-      return item.textContent.trim();
+      return item.getAttribute('title').trim();
     });
-    assert.deepEqual(routeHandlers, ['ApplicationRoute', 'PostRoute', 'PostLoadingRoute', 'PostNewRoute', 'PostEditRoute', 'CommentsRoute']);
+    assert.deepEqual(
+      routeHandlers,
+      ['ApplicationRoute', 'PostRoute', 'PostLoadingRoute', 'PostNewRoute', 'PostEditRoute', 'CommentsRoute'],
+      'route class name in title attribute'
+    );
 
     let controllers = findAll('.js-route-controller').map(function(item) {
-      return item.textContent.trim();
-    });
-
-    assert.deepEqual(controllers, ['ApplicationController', 'PostController', 'PostLoadingController', 'PostNewController', 'PostEditController', 'CommentsController']);
-
-    let templates = findAll('.js-route-template').map(function(item) {
-      return item.textContent.trim();
+      return item.getAttribute('title').trim();
     });
 
-    assert.deepEqual(templates, ['application', 'post', 'post/loading', 'post/new', 'post/edit', 'comments']);
-
-    let titleTips = [];
-
-    routeNodes.forEach((node) => {
-      titleTips = [...node.querySelectorAll('span[title]'), ...titleTips];
-    });
-
-    titleTips = titleTips.map((span) => span.getAttribute('title')).sort();
-
-    assert.deepEqual(titleTips, [
-      "ApplicationController",
-      "ApplicationRoute",
-      "CommentsController",
-      "CommentsRoute",
-      "PostController",
-      "PostEditController",
-      "PostEditRoute",
-      "PostLoadingController",
-      "PostLoadingRoute",
-      "PostNewController",
-      "PostNewRoute",
-      "PostRoute",
-      "application",
-      "application",
-      "comments",
-      "comments",
-      "post",
-      "post",
-      "post.edit",
-      "post.loading",
-      "post.new",
-      "post/edit",
-      "post/edit",
-      "post/edit/comments",
-      "post/loading",
-      "post/loading",
-      "post/new",
-      "post/new"
-    ], 'expected title tips');
+    // "PostController" not listed because a file for it was not created on the filesystem
+    assert.deepEqual(
+      controllers,
+      ['ApplicationController', 'PostLoadingController', 'PostNewController', 'PostEditController', 'CommentsController'],
+      'controller class name in title attribute'
+    );
   });
 
   test("Clicking on route handlers and controller sends an inspection message", async function(assert) {
@@ -187,13 +155,6 @@ module('Route Tree Tab', function(hooks) {
     await click(applicationRow.querySelector('.js-route-controller'));
     assert.equal(name, 'objectInspector:inspectController');
     assert.equal(message.name, 'application');
-
-    name = null;
-    message = null;
-    let postRow = findAll('.js-route-tree-item')[1];
-    await click(postRow.querySelector('.js-route-controller'));
-    assert.equal(name, null, "If controller does not exist, clicking should have no effect.");
-    assert.equal(message, null);
   });
 
   test("Current Route is highlighted", async function(assert) {