commit 6a7085e5ab00727eebe63fc86960f3c466c0ffd4
author Becky Siegel <beckysiegel@google.com> Wed Nov 02 16:25:53 2016 -0700
committer Becky Siegel <beckysiegel@google.com> Thu Nov 03 13:34:07 2016 -0700
tree 8540d43c44ed3bfc85709a70bd3a4b99918864e6
parent 4b60a0bd7eb7fb1eaa005da801a344aaa59c835e

Make line marker more distinguished

Previously, the line marker was only subtly visible by the highlighted
line number. This change adds a bottom border to the selected line if
the user is using keycodes (j, k, up, down) to more the cursor. When
the escape key is pressed, the distinguished line marker will dissapear.

Feature: Issue 4739
Change-Id: If8c751efc137ef87cfdad1c8bf7d905de1219107

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

diff --git a/polygerrit-ui/app/elements/diff/gr-diff/gr-diff.html b/polygerrit-ui/app/elements/diff/gr-diff/gr-diff.html
index 0816501..8262658 100644
--- a/polygerrit-ui/app/elements/diff/gr-diff/gr-diff.html
+++ b/polygerrit-ui/app/elements/diff/gr-diff/gr-diff.html
@@ -150,6 +150,9 @@
       .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 @@
       }
     </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

diff --git a/polygerrit-ui/app/elements/diff/gr-diff/gr-diff.js b/polygerrit-ui/app/elements/diff/gr-diff/gr-diff.js
index eb95a77..4c9d021 100644
--- a/polygerrit-ui/app/elements/diff/gr-diff/gr-diff.js
+++ b/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

diff --git a/polygerrit-ui/app/elements/diff/gr-diff/gr-diff_test.html b/polygerrit-ui/app/elements/diff/gr-diff/gr-diff_test.html
index 7e20a5b..8db05a3 100644
--- a/polygerrit-ui/app/elements/diff/gr-diff/gr-diff_test.html
+++ b/polygerrit-ui/app/elements/diff/gr-diff/gr-diff_test.html
@@ -50,6 +50,21 @@
         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};