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/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;
