Add edit-content buttons and states

app/controllers/inspect.js

@@ -14,6 +14,11 @@ export default Controller.extend({
 
   queryParams: ['path'],
 
+  documentIsEditable: computed.not('model.documentMetaData.isBinary'),
+
+  documentShowEditor: false,
+  documentHideEditor: computed.not('documentShowEditor'),
+
   documentIsJSON: computed('model.documentMetaData.type', function(){
     if (isEmpty(this.get('model.documentMetaData'))) { return false; }
 
@@ -46,6 +51,16 @@ export default Controller.extend({
       this.set('jsonView', 'source');
     },
 
+    showEditor () {
+      this.set('documentShowEditor', true);
+      // TODO init editing
+    },
+
+    cancelEditor () {
+      this.set('documentShowEditor', false);
+      // TODO remove changes from tree/source
+    },
+
     toggleMetadata () {
       this.toggleProperty('metadataHidden');
     },

app/templates/icons/edit.hbs

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M417.8 315.5l20-20c3.8-3.8 10.2-1.1 10.2 4.2V464c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h292.3c5.3 0 8 6.5 4.2 10.2l-20 20c-1.1 1.1-2.7 1.8-4.2 1.8H48c-8.8 0-16 7.2-16 16v352c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16V319.7c0-1.6.6-3.1 1.8-4.2zm145.9-191.2L251.2 436.8l-99.9 11.1c-13.4 1.5-24.7-9.8-23.2-23.2l11.1-99.9L451.7 12.3c16.4-16.4 43-16.4 59.4 0l52.6 52.6c16.4 16.4 16.4 43 0 59.4zm-93.6 48.4L403.4 106 169.8 339.5l-8.3 75.1 75.1-8.3 233.5-233.6zm71-85.2l-52.6-52.6c-3.8-3.8-10.2-4-14.1 0L426 83.3l66.7 66.7 48.4-48.4c3.9-3.8 3.9-10.2 0-14.1z"/></svg>

app/templates/icons/eye.hbs

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M569.354 231.631C512.969 135.948 407.808 72 288 72 168.14 72 63.004 135.994 6.646 231.63a47.999 47.999 0 0 0 0 48.739C63.032 376.053 168.192 440 288 440c119.86 0 224.996-63.994 281.354-159.631a48.002 48.002 0 0 0 0-48.738zM416 228c0 68.483-57.308 124-128 124s-128-55.517-128-124 57.308-124 128-124 128 55.517 128 124zm125.784 36.123C489.837 352.277 393.865 408 288 408c-106.291 0-202.061-56.105-253.784-143.876a16.006 16.006 0 0 1 0-16.247c29.072-49.333 73.341-90.435 127.66-115.887C140.845 158.191 128 191.568 128 228c0 85.818 71.221 156 160 156 88.77 0 160-70.178 160-156 0-36.411-12.833-69.794-33.875-96.01 53.76 25.189 98.274 66.021 127.66 115.887a16.006 16.006 0 0 1-.001 16.246zM224 224c0-10.897 2.727-21.156 7.53-30.137v.02c0 14.554 11.799 26.353 26.353 26.353 14.554 0 26.353-11.799 26.353-26.353s-11.799-26.353-26.353-26.353h-.02c8.981-4.803 19.24-7.53 30.137-7.53 35.346 0 64 28.654 64 64s-28.654 64-64 64-64-28.654-64-64z"/></svg>

app/templates/inspect.hbs

@@ -38,6 +38,21 @@
         </button>
       </div>
     {{/if}}
+    {{#if documentIsEditable}}
+      <div class="button-group editable">
+        <button disabled={{documentHideEditor}}
+                class="{{if documentHideEditor "active"}}"
+                title="{{if documentShowEditor "Cancel editing"}}"
+                {{action "cancelEditor"}}>
+          {{partial "icons/eye"}}
+        </button>
+        <button disabled={{documentShowEditor}}
+                class="{{if documentShowEditor "active"}}"
+                {{action "showEditor"}}>
+          {{partial "icons/edit"}}
+        </button>
+      </div>
+    {{/if}}
     <button class="delete" title="Delete"
             {{action "deleteItem"}}>{{partial "icons/trash"}}</button>
   </nav>

tests/unit/controllers/inspect-test.js

@@ -47,7 +47,7 @@ test('#documentIsJSON', function(assert) {
   assert.notOk(controller.get('documentIsJSON'), 'is false when content type is not JSON');
 });
 
-test('jsonView actions/methods', function(assert) {
+test('jsonView - switch between source and tree view', function(assert) {
   let controller = this.subject();
   controller.set('jsonView', null);