Add buttons for switching JSON preview style

app/controllers/inspect.js

@@ -1,7 +1,9 @@
 import Controller from '@ember/controller';
 import { inject as controller } from '@ember/controller';
 import { inject as service } from '@ember/service';
+import { computed } from '@ember/object';
 import { alias } from '@ember/object/computed';
+import { isEmpty } from '@ember/utils';
 
 export default Controller.extend({
 
@@ -12,8 +14,26 @@ export default Controller.extend({
 
   queryParams: ['path'],
 
+  documentIsJSON: computed('model.documentMetaData.type', function(){
+    if (isEmpty(this.get('model.documentMetaData'))) { return false; }
+
+    return !!this.get('model.documentMetaData.type').match(/application\/json/i);
+  }),
+
+  jsonView: 'source',
+  jsonShowTree: computed.equal('jsonView', 'tree'),
+  jsonShowSource: computed.equal('jsonView', 'source'),
+
   actions: {
 
+    showJsonTree () {
+      this.set('jsonView', 'tree');
+    },
+
+    showJsonSource () {
+      this.set('jsonView', 'source');
+    },
+
     deleteItem () {
       if (window.confirm('Sure?')) {
         this.get('storage.client')

app/styles/_buttons.scss

@@ -0,0 +1,8 @@
+div.button-group {
+  display: inline-block;
+}
+
+div.button-group + button,
+div.button-group + div.button-group {
+  margin-left: 1rem;
+}

app/styles/app.scss

@@ -16,9 +16,11 @@ body {
   padding: 0;
 }
 
+@import "buttons";
+
 @import "components/account-info";
 @import "components/breadcrumb-nav";
 @import "components/categories-nav";
 @import "components/directory-listing";
-@import "components/item-icon";
 @import "components/file-preview";
+@import "components/item-icon";

app/templates/inspect.hbs

@@ -1,6 +1,12 @@
 <header>
   {{breadcrumb-nav currentDirPath=currentDirPath}}
   <nav class="actions">
+    {{#if documentIsJSON}}
+      <div class="button-group json-view">
+        <button disabled={{jsonShowTree}} class="{{if jsonShowTree "active"}}" {{action "showJsonTree"}}>tree view</button>
+        <button disabled={{jsonShowSource}} class="{{if jsonShowSource "active"}}" {{action "showJsonSource"}}>source</button>
+      </div>
+    {{/if}}
     <button class="delete" {{action "deleteItem"}}>delete</button>
   </nav>
 </header>