Merge "Make line marker more distinguished"

polygerrit-ui/app/elements/diff/gr-diff-view/gr-diff-view.js

@@ -193,6 +193,10 @@
       if (this.shouldSuppressKeyboardShortcut(e)) { return; }
 
       switch (e.keyCode) {
+        case 27: // escape
+          e.preventDefault();
+          this.$.diff.displayLine = false;
+          break;
         case 37: // left
           if (e.shiftKey) {
             e.preventDefault();
@@ -208,11 +212,13 @@
         case 40: // down
         case 74: // 'j'
           e.preventDefault();
+          this.$.diff.displayLine = true;
           this.$.cursor.moveDown();
           break;
         case 38: // up
         case 75: // 'k'
           e.preventDefault();
+          this.$.diff.displayLine = true;
           this.$.cursor.moveUp();
           break;
         case 67: // 'c'

polygerrit-ui/app/elements/diff/gr-diff-view/gr-diff-view_test.html

@@ -131,6 +131,16 @@ limitations under the License.
           'moveToPreviousCommentThread');
       MockInteractions.pressAndReleaseKeyOn(element, 80, ['shift']);  // 'P'
       assert(scrollStub.calledOnce);
+
+      var computeContainerClassStub = sandbox.stub(element.$.diff,
+          '_computeContainerClass');
+      MockInteractions.pressAndReleaseKeyOn(element, 74);  // 'j'
+      assert(computeContainerClassStub.lastCall.calledWithExactly(
+          false, 'SIDE_BY_SIDE', true));
+
+      MockInteractions.pressAndReleaseKeyOn(element, 27);  // 'escape'
+      assert(computeContainerClassStub.lastCall.calledWithExactly(
+          false, 'SIDE_BY_SIDE', false));
     });
 
     test('saving diff preferences', function() {

polygerrit-ui/app/elements/diff/gr-diff/gr-diff.html

@@ -150,6 +150,9 @@ limitations under the License.
       .contextControl td:not(.lineNum) {
         text-align: center;
       }
+      .displayLine .diff-row.target-row {
+        border-bottom: 1px solid #bbb;
+      }
       .br:after {
         /* Line feed */
         content: '\A';
@@ -164,7 +167,7 @@ limitations under the License.
       }
     </style>
     <style include="gr-theme-default"></style>
-    <div class$="[[_computeContainerClass(_loggedIn, viewMode)]]"
+    <div class$="[[_computeContainerClass(_loggedIn, viewMode, displayLine)]]"
         on-tap="_handleTap">
       <gr-diff-selection diff="[[_diff]]">
         <gr-diff-highlight

polygerrit-ui/app/elements/diff/gr-diff/gr-diff.js

@@ -51,6 +51,10 @@
       },
       project: String,
       commit: String,
+      displayLine: {
+        type: Boolean,
+        value: false,
+      },
       isImageDiff: {
         type: Boolean,
         computed: '_computeIsImageDiff(_diff)',
@@ -176,7 +180,7 @@
       return Polymer.dom(this.root).querySelectorAll('gr-diff-comment-thread');
     },
 
-    _computeContainerClass: function(loggedIn, viewMode) {
+    _computeContainerClass: function(loggedIn, viewMode, displayLine) {
       var classes = ['diffContainer'];
       switch (viewMode) {
         case DiffViewMode.UNIFIED:
@@ -191,6 +195,9 @@
       if (loggedIn) {
         classes.push('canComment');
       }
+      if (displayLine) {
+        classes.push('displayLine');
+      }
       return classes.join(' ');
     },
 

polygerrit-ui/app/elements/diff/gr-diff/gr-diff_test.html

@@ -50,6 +50,21 @@ limitations under the License.
         assert.isFalse(element.classList.contains('no-left'));
       });
 
+      test('view does not start with displayLine classList',
+          function() {
+        assert.isFalse(
+            element.$$('.diffContainer').classList.contains('displayLine'));
+      });
+
+      test('displayLine class added called when displayLine is true',
+          function() {
+        var spy = sinon.spy(element, '_computeContainerClass');
+        element.displayLine = true;
+        assert.isTrue(spy.called);
+        assert.isTrue(
+            element.$$('.diffContainer').classList.contains('displayLine'));
+      });
+
       test('get drafts', function(done) {
         element.patchRange = {basePatchNum: 0, patchNum: 0};