From a987a786901212f525450f1a77beb1350962df0c Mon Sep 17 00:00:00 2001
From: Joseph Atkins-Turkish <joeat@pebble.com>
Date: Mon, 30 Nov 2015 16:27:38 -0800
Subject: [PATCH] Autofocus on the first form elems of IDE pages

---
 ide/static/ide/js/resources.js              | 10 +++++++---
 ide/static/ide/js/sidebar.js                |  7 +++++++
 ide/templates/ide/project/compile.html      |  2 +-
 ide/templates/ide/project/dependencies.html |  2 +-
 ide/templates/ide/project/github.html       |  2 +-
 ide/templates/ide/project/resource.html     |  2 +-
 ide/templates/ide/project/settings.html     |  2 +-
 7 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/ide/static/ide/js/resources.js b/ide/static/ide/js/resources.js
index 21263df1..96694d80 100644
--- a/ide/static/ide/js/resources.js
+++ b/ide/static/ide/js/resources.js
@@ -464,7 +464,7 @@ CloudPebble.Resources = (function() {
         CloudPebble.ProgressBar.Show();
         Ajax.Get("/ide/project/" + PROJECT_ID + "/resource/" + resource.id + "/info").then(function(data) {
             var resource = data.resource;
-            var pane = prepare_resource_pane();
+            var pane = prepare_resource_pane({is_new: false});
 
             var list_entry = $('#sidebar-pane-resource-' + resource.id);
             if(list_entry) {
@@ -858,7 +858,8 @@ CloudPebble.Resources = (function() {
         return textext.textext()[0];
     };
 
-    var prepare_resource_pane = function() {
+    var prepare_resource_pane = function(options) {
+        var is_new = options.is_new;
         var template = resource_template.clone();
         template.removeClass('hide');
         template.find('.font-only').addClass('hide');
@@ -878,6 +879,9 @@ CloudPebble.Resources = (function() {
             });
         });
 
+        template.find('#edit-resource-type').attr('autofocus', is_new);
+        template.find('#edit-resource-file-name').attr('autofocus', !is_new);
+
         // setTimeout is used because the textarea has to actually be visible when the textext tag editor is initialised
         setTimeout(function() {
             var textext = build_tags_editor(template, template.find("#new-resource-tags"), []);
@@ -902,7 +906,7 @@ CloudPebble.Resources = (function() {
     var create_new_resource = function() {
         CloudPebble.Sidebar.SuspendActive();
         if(CloudPebble.Sidebar.Restore('new-resource')) return;
-        var pane = prepare_resource_pane();
+        var pane = prepare_resource_pane({is_new: true});
         var form = pane.find('form');
 
         form.submit(function(e) {
diff --git a/ide/static/ide/js/sidebar.js b/ide/static/ide/js/sidebar.js
index ad85694f..aa9432ab 100644
--- a/ide/static/ide/js/sidebar.js
+++ b/ide/static/ide/js/sidebar.js
@@ -37,6 +37,10 @@ CloudPebble.Sidebar = (function() {
         }
     };
 
+    var refocus_pane = function(pane) {
+        pane.find('*[autofocus]').first().focus();
+    };
+
     var restore_suspended_pane = function(id) {
         var pane = suspended_panes[id];
         if (pane) {
@@ -53,6 +57,8 @@ CloudPebble.Sidebar = (function() {
                 pane.data('pane-restore-function')();
             }
 
+            refocus_pane(pane);
+
             return true;
         }
         return false;
@@ -60,6 +66,7 @@ CloudPebble.Sidebar = (function() {
 
     var set_main_pane = function(pane, options) {
         $('#main-pane').append(pane).data('pane-id', options.id);
+        refocus_pane(pane);
         if (options.onRestore) {
             $('#main-pane').data('pane-restore-function', options.onRestore);
         }
diff --git a/ide/templates/ide/project/compile.html b/ide/templates/ide/project/compile.html
index 7d49cd96..5bce487f 100644
--- a/ide/templates/ide/project/compile.html
+++ b/ide/templates/ide/project/compile.html
@@ -58,7 +58,7 @@ <h3>{% trans 'Last build' %}</h3>
         </div>
         <hr>
         <div class="compilation-buttons three-buttons">
-            <button class="btn btn-affirmative" id="compilation-run-build-button">{% trans 'Run build' %}</button>
+            <button class="btn btn-affirmative" id="compilation-run-build-button" autofocus>{% trans 'Run build' %}</button>
             <a id="last-compilation-pbw" href="#" class="btn hide">
                 {% if project.project_type == 'package'%}
                     {% trans 'Get Package' %}
diff --git a/ide/templates/ide/project/dependencies.html b/ide/templates/ide/project/dependencies.html
index 49a408a8..ed8fabc1 100644
--- a/ide/templates/ide/project/dependencies.html
+++ b/ide/templates/ide/project/dependencies.html
@@ -6,7 +6,7 @@
     <div class="well">
         <h3>{% trans 'NPM Dependencies' %}</h3>
         <form id="dependencies-search-form">
-            <textarea id="dependencies-search" rows="1" cols="50"></textarea>
+            <textarea id="dependencies-search" rows="1" cols="50" autofocus></textarea>
         </form>
         <p class="help-block">{% trans 'Try searching for the keyword "pebble-package" to get a list of all published Pebble packages' %}</p>
 
diff --git a/ide/templates/ide/project/github.html b/ide/templates/ide/project/github.html
index e65a7cac..801da17d 100644
--- a/ide/templates/ide/project/github.html
+++ b/ide/templates/ide/project/github.html
@@ -7,7 +7,7 @@
             <div class="control-group">
                 <label class="control-label" for="github-repo">{% trans 'Github Repo' %}</label>
                 <div class="controls">
-                    <input type="text" class="span6" id="github-repo" pattern="(?:https?://|git@|git://)?(?:www\.)?github\.com[/:]([\w.-]+)/([\w.-]+?)(?:\.git|/|$)" placeholder="github.com/{{ project.owner.github.username }}/PebbleFace">
+                    <input type="text" class="span6" id="github-repo" pattern="(?:https?://|git@|git://)?(?:www\.)?github\.com[/:]([\w.-]+)/([\w.-]+?)(?:\.git|/|$)" placeholder="github.com/{{ project.owner.github.username }}/PebbleFace" autofocus>
                 </div>
             </div>
             <div class="control-group">
diff --git a/ide/templates/ide/project/resource.html b/ide/templates/ide/project/resource.html
index e7996677..c1d6ef62 100644
--- a/ide/templates/ide/project/resource.html
+++ b/ide/templates/ide/project/resource.html
@@ -7,7 +7,7 @@
             <div class="control-group">
                 <label class="control-label" for="edit-resource-type">{% trans 'Resource type' %}</label>
                 <div class="controls">
-                    <select id="edit-resource-type">
+                    <select id="edit-resource-type" autofocus>
                         <option value="bitmap">{% trans 'Bitmap Image' %}</option>
                         {% if project.is_standard_project_type  %}
                             <option value="font">{% trans 'TrueType font' %}</option>
diff --git a/ide/templates/ide/project/settings.html b/ide/templates/ide/project/settings.html
index 103f1dd7..bee91865 100644
--- a/ide/templates/ide/project/settings.html
+++ b/ide/templates/ide/project/settings.html
@@ -7,7 +7,7 @@
             <div class="control-group">
                 <label class="control-label" for="settings-name">{% trans 'Project name' %}</label>
                 <div class="controls">
-                    <input type="text" id="settings-name">
+                    <input type="text" id="settings-name" autofocus>
                 </div>
             </div>
             <div class="control-group">