Revert "Make horizontal scrolling visible on diff page"
This reverts commit 52c943d88e088894e61e054964ec91ffe410a0bc.
Change-Id: I63f4aa2efd386300c070521c5bccf1c6ac5c594e
diff --git a/polygerrit-ui/app/elements/diff/gr-diff-view/gr-diff-view.html b/polygerrit-ui/app/elements/diff/gr-diff-view/gr-diff-view.html
index 4770340..d5b63bd 100644
--- a/polygerrit-ui/app/elements/diff/gr-diff-view/gr-diff-view.html
+++ b/polygerrit-ui/app/elements/diff/gr-diff-view/gr-diff-view.html
@@ -22,7 +22,6 @@
<link rel="import" href="../../shared/gr-overlay/gr-overlay.html">
<link rel="import" href="../../shared/gr-rest-api-interface/gr-rest-api-interface.html">
<link rel="import" href="../../shared/gr-select/gr-select.html">
-<link rel="import" href="../../shared/gr-header/gr-header.html">
<link rel="import" href="../gr-diff/gr-diff.html">
<link rel="import" href="../gr-diff-cursor/gr-diff-cursor.html">
<link rel="import" href="../gr-diff-preferences/gr-diff-preferences.html">
@@ -33,25 +32,19 @@
<style>
:host {
background-color: var(--view-background-color);
+ display: block;
}
- gr-header {
- background-color: #fff;
- border-bottom: 1px #eee solid;
- }
- .titleHeader,
- .patchRangeHeader {
+ header,
+ .subHeader {
align-items: center;
display: flex;
justify-content: space-between;
}
- .patchRangeLeft {
- display: flex;
- }
- .titleHeader {
+ header {
padding: .75em var(--default-horizontal-margin);
}
- .patchRangeHeader {
- margin: 0 var(--default-horizontal-margin) .75em;
+ .patchRangeLeft {
+ display: flex;
}
.navLink:not([href]),
.downloadLink:not([href]) {
@@ -118,6 +111,9 @@
padding: 0 var(--default-horizontal-margin) 1em;
color: #666;
}
+ .subHeader {
+ margin: 0 var(--default-horizontal-margin) .75em;
+ }
.prefsButton {
text-align: right;
}
@@ -146,62 +142,60 @@
}
}
</style>
- <gr-header keep-on-scroll>
- <div class="titleHeader">
- <h3>
- <a href$="[[_computeChangePath(_changeNum, _patchRange.*, _change.revisions)]]">
- [[_changeNum]]</a><span>:</span>
- <span>[[_change.subject]]</span>
- <span class="dash">—</span>
- <input
- id="reviewed"
- class="reviewed"
- type="checkbox"
- on-change="_handleReviewedChange"
- hidden$="[[!_loggedIn]]"
- hidden>
- <div class="jumpToFileContainer">
- <gr-button link class="dropdown-trigger" id="trigger" on-tap="_showDropdownTapHandler">
- <span>[[_computeFileDisplayName(_path)]]</span>
- <span class="downArrow">▼</span>
- </gr-button>
- <iron-dropdown id="dropdown" vertical-align="top" vertical-offset="25">
- <div class="dropdown-content">
- <template
- is="dom-repeat"
- items="[[_fileList]]"
- as="path"
- initial-count="75">
- <a href$="[[_computeDiffURL(_changeNum, _patchRange.*, path)]]"
- selected$="[[_computeFileSelected(path, _path)]]"
- data-key-nav$="[[_computeKeyNav(path, _path, _fileList)]]"
- on-tap="_handleFileTap">[[_computeFileDisplayName(path)]]</a>
- </template>
- </div>
- </iron-dropdown>
- </div>
- <div class="mobileJumpToFileContainer">
- <select on-change="_handleMobileSelectChange">
- <template is="dom-repeat" items="[[_fileList]]" as="path">
- <option
- value$="[[path]]"
- selected$="[[_computeFileSelected(path, _path)]]">
- [[_computeTruncatedFileDisplayName(path)]]
- </option>
+ <header>
+ <h3>
+ <a href$="[[_computeChangePath(_changeNum, _patchRange.*, _change.revisions)]]">
+ [[_changeNum]]</a><span>:</span>
+ <span>[[_change.subject]]</span>
+ <span class="dash">—</span>
+ <input id="reviewed"
+ class="reviewed"
+ type="checkbox"
+ on-change="_handleReviewedChange"
+ hidden$="[[!_loggedIn]]" hidden>
+ <div class="jumpToFileContainer">
+ <gr-button link class="dropdown-trigger" id="trigger" on-tap="_showDropdownTapHandler">
+ <span>[[_computeFileDisplayName(_path)]]</span>
+ <span class="downArrow">▼</span>
+ </gr-button>
+ <iron-dropdown id="dropdown" vertical-align="top" vertical-offset="25">
+ <div class="dropdown-content">
+ <template
+ is="dom-repeat"
+ items="[[_fileList]]"
+ as="path"
+ initial-count="75">
+ <a href$="[[_computeDiffURL(_changeNum, _patchRange.*, path)]]"
+ selected$="[[_computeFileSelected(path, _path)]]"
+ data-key-nav$="[[_computeKeyNav(path, _path, _fileList)]]"
+ on-tap="_handleFileTap">[[_computeFileDisplayName(path)]]</a>
</template>
- </select>
- </div>
- </h3>
- <div>
- <a class="navLink"
- href$="[[_computeNavLinkURL(_path, _fileList, -1, 1)]]">Prev</a>
- /
- <a class="navLink"
- href$="[[_computeNavLinkURL(_path, _fileList, 1, 1)]]">Next</a>
+ </div>
+ </iron-dropdown>
</div>
+ <div class="mobileJumpToFileContainer">
+ <select on-change="_handleMobileSelectChange">
+ <template is="dom-repeat" items="[[_fileList]]" as="path">
+ <option
+ value$="[[path]]"
+ selected$="[[_computeFileSelected(path, _path)]]">
+ [[_computeTruncatedFileDisplayName(path)]]
+ </option>
+ </template>
+ </select>
+ </div>
+ </h3>
+ <div>
+ <a class="navLink"
+ href$="[[_computeNavLinkURL(_path, _fileList, -1, 1)]]">Prev</a>
+ /
+ <a class="navLink"
+ href$="[[_computeNavLinkURL(_path, _fileList, 1, 1)]]">Next</a>
</div>
- <div class="loading" hidden$="[[!_loading]]">Loading...</div>
- <div class="patchRangeHeader" hidden hidden$="[[_loading]]">
+ </header>
+ <div class="loading" hidden$="[[!_loading]]">Loading...</div>
+ <div hidden$="[[_loading]]" hidden>
+ <div class="subHeader">
<div class="patchRangeLeft">
<gr-patch-range-select
path="[[_path]]"
@@ -212,7 +206,7 @@
</gr-patch-range-select>
<span class="separator">/</span>
<a class="downloadLink"
- href$="[[_computeDownloadLink(_changeNum, _patchRange, _path)]]">
+ href$="[[_computeDownloadLink(_changeNum, _patchRange, _path)]]">
Download
</a>
</div>
@@ -229,38 +223,35 @@
<span hidden$="[[_computePrefsButtonHidden(_prefs, _loggedIn)]]">
<span
hidden$="[[_computeModeSelectHidden(_isImageDiff)]]">/</span>
- <gr-button
- link
+ <gr-button link
class="prefsButton"
on-tap="_handlePrefsTap">Preferences</gr-button>
</span>
</div>
- <gr-overlay id="prefsOverlay" with-backdrop>
- <gr-diff-preferences
- id="diffPreferences"
- prefs="{{_prefs}}"
- local-prefs="{{_localPrefs}}"
- on-save="_handlePrefsSave"
- on-cancel="_handlePrefsCancel"></gr-diff-preferences>
- </gr-overlay>
</div>
- </gr-header>
- <gr-diff
- id="diff"
- hidden
- hidden$="[[_loading]]"
- project="[[_change.project]]"
- commit="[[_change.current_revision]]"
- is-image-diff="{{_isImageDiff}}"
- files-weblinks="{{_filesWeblinks}}"
- change-num="[[_changeNum]]"
- patch-range="[[_patchRange]]"
- path="[[_path]]"
- prefs="[[_prefs]]"
- project-config="[[_projectConfig]]"
- view-mode="[[_diffMode]]"
- on-line-selected="_onLineSelected">
- </gr-diff>
+ <gr-overlay id="prefsOverlay" with-backdrop>
+ <gr-diff-preferences
+ id="diffPreferences"
+ prefs="{{_prefs}}"
+ local-prefs="{{_localPrefs}}"
+ on-save="_handlePrefsSave"
+ on-cancel="_handlePrefsCancel"></gr-diff-preferences>
+ </gr-overlay>
+ <gr-diff
+ id="diff"
+ project="[[_change.project]]"
+ commit="[[_change.current_revision]]"
+ is-image-diff="{{_isImageDiff}}"
+ files-weblinks="{{_filesWeblinks}}"
+ change-num="[[_changeNum]]"
+ patch-range="[[_patchRange]]"
+ path="[[_path]]"
+ prefs="[[_prefs]]"
+ project-config="[[_projectConfig]]"
+ view-mode="[[_diffMode]]"
+ on-line-selected="_onLineSelected">
+ </gr-diff>
+ </div>
<gr-rest-api-interface id="restAPI"></gr-rest-api-interface>
<gr-storage id="storage"></gr-storage>
<gr-diff-cursor id="cursor"></gr-diff-cursor>
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 e500da0..0816501 100644
--- a/polygerrit-ui/app/elements/diff/gr-diff/gr-diff.html
+++ b/polygerrit-ui/app/elements/diff/gr-diff/gr-diff.html
@@ -44,6 +44,7 @@
border-top: 1px solid #eee;
display: flex;
font: 12px var(--monospace-font-family);
+ overflow-x: auto;
will-change: transform;
}
table {
diff --git a/polygerrit-ui/app/elements/gr-app.html b/polygerrit-ui/app/elements/gr-app.html
index 47f9250..a403e6c 100644
--- a/polygerrit-ui/app/elements/gr-app.html
+++ b/polygerrit-ui/app/elements/gr-app.html
@@ -31,7 +31,6 @@
<link rel="import" href="./settings/gr-registration-dialog/gr-registration-dialog.html">
<link rel="import" href="./settings/gr-settings-view/gr-settings-view.html">
-<link rel="import" href="./shared/gr-header/gr-header.html">
<link rel="import" href="./shared/gr-overlay/gr-overlay.html">
<link rel="import" href="./shared/gr-rest-api-interface/gr-rest-api-interface.html">
@@ -88,10 +87,8 @@
color: #b71c1c;
}
</style>
- <gr-header>
- <gr-main-header id="mainHeader" search-query="{{params.query}}">
- </gr-main-header>
- </gr-header>
+ <gr-main-header id="mainHeader" search-query="{{params.query}}">
+ </gr-main-header>
<main>
<template is="dom-if" if="[[_showChangeListView]]" restamp="true">
<gr-change-list-view
diff --git a/polygerrit-ui/app/elements/shared/gr-header/gr-header.html b/polygerrit-ui/app/elements/shared/gr-header/gr-header.html
deleted file mode 100644
index 6567e04..0000000
--- a/polygerrit-ui/app/elements/shared/gr-header/gr-header.html
+++ /dev/null
@@ -1,46 +0,0 @@
-<!--
- Copyright (C) 2016 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.
- -->
-
-<link rel="import" href="../../../bower_components/polymer/polymer.html">
-
-<dom-module id="gr-header">
- <template>
- <style>
- :host {
- height: var(--header-height);
- }
- header {
- background: inherit;
- border: inherit;
- left: 0;
- position: fixed;
- width: 100%;
- will-change: top;
- z-index: 1;
- }
- .spacer {
- height: var(--header-height);
- }
- </style>
- <header id="header">
- <div class="contentWrapper">
- <content></content>
- </div>
- </header>
- <div class="spacer"></div>
- </template>
- <script src="gr-header.js"></script>
-</dom-module>
diff --git a/polygerrit-ui/app/elements/shared/gr-header/gr-header.js b/polygerrit-ui/app/elements/shared/gr-header/gr-header.js
deleted file mode 100644
index 02f7f4f..0000000
--- a/polygerrit-ui/app/elements/shared/gr-header/gr-header.js
+++ /dev/null
@@ -1,79 +0,0 @@
-// Copyright (C) 2016 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() {
- 'use strict';
-
- Polymer({
- is: 'gr-header',
-
- properties: {
- keepOnScroll: {
- type: Boolean,
- },
- _topInitial: Number,
- _topLast: Number,
- _headerHeight: Number,
- },
-
- attached: function() {
- var rect = this.$.header.getBoundingClientRect();
- this._topInitial = rect.top;
- this._topLast = rect.top;
- this._headerHeight = rect.height;
- this.customStyle['--header-height'] = rect.height + 'px';
- this.updateStyles();
- this.listen(window, 'scroll', '_handleScroll');
- },
-
- detached: function() {
- this.unlisten(window, 'scroll', '_handleScroll');
- },
-
- _getScrollY: function() {
- return window.scrollY;
- },
-
- _handleScrollDebounced: function() {
- var header = this.$.header;
- var scrollY = this._topInitial - this._getScrollY();
- var newTop;
- if (this.keepOnScroll) {
- if (scrollY > 0) {
- // Reposition to imitate natural scrolling.
- newTop = scrollY;
- } else {
- newTop = 0;
- }
- } else if (scrollY > -this._headerHeight ||
- this._topLast < -this._headerHeight) {
- // Allow to scroll away, but ignore when far behind the edge.
- newTop = scrollY;
- } else {
- newTop = -this._headerHeight;
- }
- if (this._topLast !== newTop) {
- if (newTop === undefined) {
- header.style.top = '';
- } else {
- header.style.top = newTop + 'px';
- }
- this._topLast = newTop;
- }
- },
-
- _handleScroll: function() {
- this.debounce('scroll', this._handleScrollDebounced);
- },
- });
-})();
diff --git a/polygerrit-ui/app/elements/shared/gr-header/gr-header_test.html b/polygerrit-ui/app/elements/shared/gr-header/gr-header_test.html
deleted file mode 100644
index a1b1499..0000000
--- a/polygerrit-ui/app/elements/shared/gr-header/gr-header_test.html
+++ /dev/null
@@ -1,98 +0,0 @@
-<!DOCTYPE html>
-<!--
-Copyright (C) 2016 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.
--->
-
-<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
-<title>gr-header</title>
-
-<script src="../../../bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
-<script src="../../../bower_components/web-component-tester/browser.js"></script>
-
-<link rel="import" href="gr-header.html">
-
-<test-fixture id="basic">
- <template>
- <gr-header>
- <div style="height: 100px"></div>
- </gr-header>
- </template>
-</test-fixture>
-
-<script>
- suite('gr-header', function() {
- var element;
- var sandbox;
-
- setup(function() {
- element = fixture('basic');
- sandbox = sinon.sandbox.create();
- });
-
- teardown(function() {
- sandbox.restore();
- });
-
- test('header is the height of the content', function() {
- assert.equal(element.getBoundingClientRect().height, 100);
- });
-
- test('scroll triggers _handleScroll', function() {
- sandbox.stub(element, '_handleScroll');
- window.dispatchEvent(new CustomEvent('scroll'));
- assert.isTrue(element._handleScroll.called);
- });
-
- suite('_handleScroll', function() {
-
- var getHeaderTop = function() {
- return element.$.header.style.top;
- };
-
- var emulateScrollY = function(distance) {
- element._getScrollY.returns(distance);
- element._handleScroll();
- element.flushDebouncer('scroll');
- };
-
- setup(function() {
- element._headerTopInitial = 10;
- sandbox.stub(element, '_getScrollY').returns(0);
- });
-
- test('is debounced', function() {
- sandbox.stub(element, 'debounce');
- element._handleScroll();
- assert.isTrue(element.debounce.called);
- });
-
- test('scrolls header along with document', function() {
- emulateScrollY(20);
- assert.equal(getHeaderTop(), '-10px');
- });
-
- test('does not stick to the top by default', function() {
- emulateScrollY(150);
- assert.equal(getHeaderTop(), '-140px');
- });
-
- test('sticks to the top if enabled', function() {
- element.keepOnScroll = true;
- emulateScrollY(120);
- assert.equal(getHeaderTop(), '0px');
- });
- });
- });
-</script>
