FEATURE: auto focus text editor when editing themes

app/assets/javascripts/admin/components/ace-editor.js.es6

@@ -7,6 +7,13 @@ export default Ember.Component.extend({
   _editor: null,
   _skipContentChangeEvent: null,
 
+  @observes('editorId')
+  editorIdChanged() {
+    if (this.get('autofocus')) {
+      this.send('focus');
+    }
+  },
+
   @observes('content')
   contentChanged() {
     if (this._editor && !this._skipContentChangeEvent) {
@@ -63,7 +70,20 @@ export default Ember.Component.extend({
           // xxx: don't run during qunit tests
           this.appEvents.on('ace:resize', self, self.resize);
         }
+
+        if (this.get("autofocus")) {
+          this.send("focus");
+        }
       });
     });
+  },
+
+  actions: {
+    focus() {
+      if (this._editor) {
+        this._editor.focus();
+        this._editor.navigateFileEnd();
+      }
+    }
   }
 });

app/assets/javascripts/admin/controllers/admin-customize-themes-edit.js.es6

@@ -38,6 +38,11 @@ export default Ember.Controller.extend({
     return fieldName && fieldName.indexOf("scss") > -1 ? "scss" : "html";
   },
 
+  @computed("fieldName", "currentTargetName")
+  editorId(fieldName, currentTarget) {
+    return fieldName + "|" + currentTarget;
+  },
+
   @computed("fieldName", "currentTargetName", "model")
   activeSection: {
     get(fieldName, target, model) {

app/assets/javascripts/admin/routes/admin-customize-themes-edit.js.es6

@@ -17,7 +17,6 @@ export default Ember.Route.extend({
     };
   },
 
-
   setupController(controller, wrapper) {
     controller.set("model", wrapper.model);
     controller.setTargetName(wrapper.target || "common");

app/assets/javascripts/admin/templates/customize-themes-edit.hbs

@@ -42,7 +42,7 @@
 
     <div>
       <div class='custom-ace-gutter'></div>
-      {{ace-editor content=activeSection mode=activeSectionMode}}
+      {{ace-editor content=activeSection editorId=editorId mode=activeSectionMode autofocus="true"}}
     </div>
 
     <div class='admin-footer'>