Add padding to diff when scrollbar is inline Inline scrollbars are invisible until scrolling starts, or, for ChromeOS, scrollbar area is hovered. When scrollbar appears, it overlaps last line of diff. This change adds a padding to prevent scrollbar overlapping last line of diff. Bug: Issue 5964 Change-Id: I072f8e8a4d4d2750f122bc6177b8db492b258f5f
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 848de56..dbbe14c 100644 --- a/polygerrit-ui/app/elements/diff/gr-diff/gr-diff.html +++ b/polygerrit-ui/app/elements/diff/gr-diff/gr-diff.html
@@ -23,6 +23,8 @@ <link rel="import" href="../gr-diff-selection/gr-diff-selection.html"> <link rel="import" href="../gr-syntax-themes/gr-theme-default.html"> +<script src="../../../scripts/hiddenscroll.js"></script> + <dom-module id="gr-diff"> <template> <style> @@ -31,7 +33,6 @@ --dark-remove-highlight-color: rgba(255, 0, 0, 0.15); --light-add-highlight-color: #efe; --dark-add-highlight-color: rgba(0, 255, 0, 0.15); - } :host.no-left .sideBySide ::content .left, :host.no-left .sideBySide ::content .left + td, @@ -47,6 +48,9 @@ overflow-x: auto; will-change: transform; } + .diffContainer.hiddenscroll { + padding-bottom: .8em; + } table { border-collapse: collapse; border-right: 1px solid #ddd;
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 ba402f2..09f9e83 100644 --- a/polygerrit-ui/app/elements/diff/gr-diff/gr-diff.js +++ b/polygerrit-ui/app/elements/diff/gr-diff/gr-diff.js
@@ -114,7 +114,6 @@ this._getLoggedIn().then(function(loggedIn) { this._loggedIn = loggedIn; }.bind(this)); - }, ready: function() { @@ -203,6 +202,9 @@ default: throw Error('Invalid view mode: ', viewMode); } + if (Gerrit.hiddenscroll) { + classes.push('hiddenscroll'); + } if (loggedIn) { classes.push('canComment'); }
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 f765b26..a85615e 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
@@ -712,6 +712,12 @@ assert.equal(element.getCursorStops().length, 50); }); }); + + test('adds .hiddenscroll', function() { + Gerrit.hiddenscroll = true; + element.displayLine = true; + assert.include(element.$$('.diffContainer').className, 'hiddenscroll'); + }); }); suite('logged in', function() {
diff --git a/polygerrit-ui/app/scripts/hiddenscroll.js b/polygerrit-ui/app/scripts/hiddenscroll.js new file mode 100644 index 0000000..bb9a160 --- /dev/null +++ b/polygerrit-ui/app/scripts/hiddenscroll.js
@@ -0,0 +1,29 @@ +// Copyright (C) 2017 The Android Open Source Project +// +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + +(function(window) { + window.Gerrit = window.Gerrit || {}; + if (window.Gerrit.hasOwnProperty('hiddenscroll')) { return; } + + window.Gerrit.hiddenscroll = undefined; + + window.addEventListener('WebComponentsReady', function() { + var elem = document.createElement('div'); + elem.setAttribute( + 'style', 'width:100px;height:100px;overflow:scroll'); + document.body.appendChild(elem); + window.Gerrit.hiddenscroll = elem.offsetWidth === elem.clientWidth; + elem.remove(); + }); +})(window);