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
diff --git a/polygerrit-ui/app/elements/diff/gr-diff-preferences/gr-diff-preferences.html b/polygerrit-ui/app/elements/diff/gr-diff-preferences/gr-diff-preferences.html
index 9b830cf..c4c5ee6 100644
--- a/polygerrit-ui/app/elements/diff/gr-diff-preferences/gr-diff-preferences.html
+++ b/polygerrit-ui/app/elements/diff/gr-diff-preferences/gr-diff-preferences.html
@@ -101,8 +101,7 @@
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
diff --git a/polygerrit-ui/app/elements/diff/gr-diff-preferences/gr-diff-preferences_test.html b/polygerrit-ui/app/elements/diff/gr-diff-preferences/gr-diff-preferences_test.html
index f06cd3a..f157640 100644
--- a/polygerrit-ui/app/elements/diff/gr-diff-preferences/gr-diff-preferences_test.html
+++ b/polygerrit-ui/app/elements/diff/gr-diff-preferences/gr-diff-preferences_test.html
@@ -77,18 +77,6 @@
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);
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 5ba62af..0255361 100644
--- a/polygerrit-ui/app/elements/diff/gr-diff/gr-diff.html
+++ b/polygerrit-ui/app/elements/diff/gr-diff/gr-diff.html
@@ -239,6 +239,20 @@
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)]]">
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 19b3c6d..987c108 100644
--- a/polygerrit-ui/app/elements/diff/gr-diff/gr-diff.js
+++ b/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 = '';
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 7526141..e2e9c84 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
@@ -70,6 +70,20 @@
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;
