Remember focus in IDE panes

ide/static/ide/js/fuzzyprompt.js

@@ -8,9 +8,10 @@ CloudPebble.FuzzyPrompt = (function() {
     var selected_id = null;
     var default_item;
     var selection_was_made;
+    var focus_pane;
     var opened = false;
     var prompt_kind = null;
-
+    var focus_pane_selector = '#main-pane'
     // While manual is false, always highlight the first item
     var manual = false;
 
@@ -184,6 +185,8 @@ CloudPebble.FuzzyPrompt = (function() {
         selection_was_made = false;
         opened = true;
         prompt_kind = kind;
+        focus_pane = $(focus_pane_selector).get()[0];
+
         // Build up the list of files to search through
         var id = 0;
         _.each(sources, function(source) {
@@ -253,6 +256,11 @@ CloudPebble.FuzzyPrompt = (function() {
         if (opened) {
             opened = false;
             prompt.modal('hide');
+            // If we switched page, never refocus
+            if (focus_pane != $(focus_pane_selector).get()[0]) {
+                refocus = false;
+            }
+            // Otherwise, if we want to refocus, do so
             if (refocus) {
                 setTimeout(function () {
                     $(previously_active).focus();

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) {

ide/static/ide/js/sidebar.js

@@ -17,6 +17,7 @@ CloudPebble.Sidebar = (function() {
         if (list_entry) {
             list_entry.removeClass('active');
         }
+
         suspended_panes[pane_id] = pane;
         pane.detach();
         // Create a new empty one.
@@ -37,6 +38,13 @@ CloudPebble.Sidebar = (function() {
         }
     };
 
+    var refocus_pane = function(pane) {
+        setTimeout(function() {
+            var previous_focus = pane.data('previous-focus');
+            (previous_focus || pane.find('*[autofocus]').first().focus()).focus();
+        }, 50);
+    };
+
     var restore_suspended_pane = function(id) {
         var pane = suspended_panes[id];
         if (pane) {
@@ -53,13 +61,16 @@ CloudPebble.Sidebar = (function() {
                 pane.data('pane-restore-function')();
             }
 
+            refocus_pane($('#main-pane'));
+
             return true;
         }
         return false;
     };
 
     var set_main_pane = function(pane, options) {
         $('#main-pane').append(pane).data('pane-id', options.id);
+        refocus_pane($('#main-pane'));
         if (options.onRestore) {
             $('#main-pane').data('pane-restore-function', options.onRestore);
         }
@@ -169,6 +180,10 @@ CloudPebble.Sidebar = (function() {
             $('#sidebar-pane-github > a').click(CloudPebble.GitHub.Show);
             $('#sidebar-pane-timeline > a').click(CloudPebble.Timeline.show);
             create_initial_sections(CloudPebble.ProjectInfo.type);
+
+            $('#pane-parent').on('focusin', '#main-pane *', _.debounce(function(e) {
+                $('#main-pane').data('previous-focus', $(e.target));
+            }, 1));
         },
         SetPopover: function(pane_id, title, content) {
             $('#sidebar-pane-' + pane_id).find('a').popover('destroy').popover({

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' %}

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>
 

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">

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>

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">