SONAR-5165 It should be possible to use up and down arrows to navigate through results in Issues page

3 files changed, 56 insertions, 0 deletions

diff --git a/sonar-server/src/main/js/issues/app.js b/sonar-server/src/main/js/issues/app.js
index 4a291cc45f7..36a93117eb1 100644
--- a/sonar-server/src/main/js/issues/app.js
+++ b/sonar-server/src/main/js/issues/app.js
@@ -369,6 +369,7 @@ requirejs(
             data: fetchQuery,
             success: function () {
               that.issuesView.$el.removeClass('navigator-fetching');
+              that.issuesView.selectFirst();
             }
           });
           this.detailsRegion.reset();
diff --git a/sonar-server/src/main/js/issues/extra.js b/sonar-server/src/main/js/issues/extra.js
index 66fa821b014..630952805b0 100644
--- a/sonar-server/src/main/js/issues/extra.js
+++ b/sonar-server/src/main/js/issues/extra.js
@@ -164,6 +164,9 @@ define(
 
 
         showDetails: function () {
+          key.setScope('list');
+          this.options.issuesView.selected = this.$el.parent().children().index(this.$el);
+
           this.$el.parent().children().removeClass('active');
           this.$el.addClass('active');
 
@@ -250,6 +253,41 @@ define(
         },
 
 
+        selectFirst: function() {
+          this.selected = -1;
+          this.selectNext();
+        },
+
+
+        selectNext: function() {
+          if (this.selected < this.collection.length - 1) {
+            this.selected++;
+            var child = this.$el.children().eq(this.selected),
+                container = jQuery('.navigator-results'),
+                containerHeight = container.height(),
+                bottom = child.position().top + child.outerHeight();
+            if (bottom > containerHeight) {
+              container.scrollTop(container.scrollTop() - containerHeight + bottom);
+            }
+            child.click();
+          }
+        },
+
+
+        selectPrev: function() {
+          if (this.selected > 0) {
+            this.selected--;
+            var child = this.$el.children().eq(this.selected),
+                container = jQuery('.navigator-results'),
+                top = child.position().top;
+            if (top < 0) {
+              container.scrollTop(container.scrollTop() + top);
+            }
+            child.click();
+          }
+        },
+
+
         onRender: function () {
           var that = this,
               $scrollEl = jQuery('.navigator-results'),
@@ -261,6 +299,7 @@ define(
               },
               throttledScroll = _.throttle(onScroll, 300);
           $scrollEl.off('scroll').on('scroll', throttledScroll);
+          this.bindShortcuts();
         },
 
 
@@ -275,6 +314,13 @@ define(
           var scrollEl = jQuery('.navigator-results');
           scrollEl.off('scroll');
           Marionette.CollectionView.prototype.close.call(this);
+        },
+
+
+        bindShortcuts: function () {
+          var that = this;
+          key('up', 'list', function() { that.selectPrev(); });
+          key('down', 'list', function() { that.selectNext(); });
         }
 
       });
@@ -832,6 +878,8 @@ define(
 
 
         events: {
+          'click': 'setDetailScope',
+
           'click .code-issue-toggle': 'toggleCollapsed',
 
           'click [href=#tab-issue-rule]': 'fetchRule',
@@ -853,6 +901,11 @@ define(
         },
 
 
+        setDetailScope: function() {
+          key.setScope('detail');
+        },
+
+
         onRender: function () {
           this.$('.code-issue-details').tabs();
           this.$('.code-issue-form').hide();
diff --git a/sonar-server/src/main/js/navigator/filters/base-filters.js b/sonar-server/src/main/js/navigator/filters/base-filters.js
index e07a3517bfe..8699c601f44 100644
--- a/sonar-server/src/main/js/navigator/filters/base-filters.js
+++ b/sonar-server/src/main/js/navigator/filters/base-filters.js
@@ -111,8 +111,10 @@ define(['backbone', 'backbone.marionette', 'common/handlebars-extensions'], func
     toggleDetails: function(e) {
       e.stopPropagation();
       if (this.$el.hasClass('active')) {
+        key.setScope('list');
         this.hideDetails();
       } else {
+        key.setScope('filter');
         this.showDetails();
       }
     },