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)]]">
