Add a line limit indicator in fit to screen mode

When the width of the screen is larger than the line limit, a line will
be visible to indicate the line limit. When the screen is narrower than
the line limit, the indicator is not visible.

Bug: Issue 4813
Change-Id: I06cd97c10c33c4eb9e73340752b9254f10239ddb

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

@@ -101,8 +101,7 @@ limitations under the License.
               id="lineWrappingInput"
               on-tap="_handlelineWrappingTap">
         </div>
-        <div class="pref" id="columnsPref"
-            hidden$="[[_newPrefs.line_wrapping]]">
+        <div class="pref" id="columnsPref">
           <label for="columnsInput">Diff width</label>
           <input is="iron-input" type="number" id="columnsInput"
               prevent-invalid-input

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

@@ -77,18 +77,6 @@ limitations under the License.
       assert.isFalse(element._newPrefs.syntax_highlighting);
     });
 
-    test('clicking fit to screen hides line length input', () => {
-      element.prefs = {line_wrapping: false};
-
-      assert.isFalse(element.$.columnsPref.hidden);
-
-      MockInteractions.tap(element.$.lineWrappingInput);
-      assert.isTrue(element.$.columnsPref.hidden);
-
-      MockInteractions.tap(element.$.lineWrappingInput);
-      assert.isFalse(element.$.columnsPref.hidden);
-    });
-
     test('clicking save button calls _handleSave function', () => {
       const savePrefs = sinon.stub(element, '_handleSave');
       MockInteractions.tap(element.$.saveButton);

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

@@ -239,6 +239,20 @@ limitations under the License.
         overflow: hidden;
         width: 200px;
       }
+      /** Since the line limit position is determined by charachter size, blank
+       lines also need to have the same font size as everything else */
+      .full-width .blank {
+        font-size: var(--font-size, var(--font-size-small));
+      }
+      /** Support the line length indicator **/
+      .full-width td.content,
+      .full-width td.blank {
+        /* Base 64 encoded 1x30px of #ddd */
+        background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAeAgMAAACQ+5xUAAAACVBMVEXd3d0AAAClpaWbWM6mAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAEElEQVQImWNgwAsakEgMAAAaPAEBM3eopQAAAABJRU5ErkJggg==')
+;
+        background-position: var(--line-limit) 0;
+        background-repeat: repeat-y;
+      }
     </style>
     <style include="gr-theme-default"></style>
     <div id="diffHeader" hidden$="[[_computeDiffHeaderHidden(_diffHeaderItems)]]">

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

@@ -623,6 +623,7 @@
         this._diffTableClass = 'full-width';
         if (this.viewMode === 'SIDE_BY_SIDE') {
           stylesToUpdate['--content-width'] = 'none';
+          stylesToUpdate['--line-limit'] = prefs.line_length + 'ch';
         }
       } else {
         this._diffTableClass = '';

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

@@ -70,6 +70,20 @@ limitations under the License.
       assert.equal(element._diffLength(mock.diffResponse), 52);
     });
 
+    test('line limit with line_wrapping', () => {
+      element = fixture('basic');
+      element.prefs = {line_wrapping: true, line_length: 80, tab_size: 2};
+      flushAsynchronousOperations();
+      assert.equal(element.customStyle['--line-limit'], '80ch');
+    });
+
+    test('line limit without line_wrapping', () => {
+      element = fixture('basic');
+      element.prefs = {line_wrapping: false, line_length: 80, tab_size: 2};
+      flushAsynchronousOperations();
+      assert.isNotOk(element.customStyle['--line-limit']);
+    });
+
     suite('_get{PatchNum|IsParentComment}ByLineAndContent', () => {
       let lineEl;
       let contentEl;