Revert "Make horizontal scrolling visible on diff page"

This reverts commit 52c943d88e.

Change-Id: I63f4aa2efd386300c070521c5bccf1c6ac5c594e

polygerrit-ui/app/elements/diff/gr-diff-view/gr-diff-view.html

@@ -22,7 +22,6 @@ limitations under the License.
 <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 @@ limitations under the License.
     <style>
       :host {
         background-color: var(--view-background-color);
+        display: block;
       }
-      gr-header {
+      header,
-        background-color: #fff;
+      .subHeader {
-        border-bottom: 1px #eee solid;
-      }
-      .titleHeader,
-      .patchRangeHeader {
         align-items: center;
         display: flex;
         justify-content: space-between;
       }
-      .patchRangeLeft {
+      header {
-        display: flex;
-      }
-      .titleHeader {
         padding: .75em var(--default-horizontal-margin);
       }
-      .patchRangeHeader {
+      .patchRangeLeft {
-        margin: 0 var(--default-horizontal-margin) .75em;
+        display: flex;
       }
       .navLink:not([href]),
       .downloadLink:not([href]) {
@@ -118,6 +111,9 @@ limitations under the License.
         padding: 0 var(--default-horizontal-margin) 1em;
         color: #666;
       }
+      .subHeader {
+        margin: 0 var(--default-horizontal-margin) .75em;
+      }
       .prefsButton {
         text-align: right;
       }
@@ -146,20 +142,17 @@ limitations under the License.
         }
       }
     </style>
-    <gr-header keep-on-scroll>
+    <header>
-      <div class="titleHeader">
       <h3>
         <a href$="[[_computeChangePath(_changeNum, _patchRange.*, _change.revisions)]]">
           [[_changeNum]]</a><span>:</span>
         <span>[[_change.subject]]</span>
         <span class="dash">—</span>
-          <input
+        <input id="reviewed"
-              id="reviewed"
                class="reviewed"
                type="checkbox"
                on-change="_handleReviewedChange"
-              hidden$="[[!_loggedIn]]"
+               hidden$="[[!_loggedIn]]" hidden>
-              hidden>
         <div class="jumpToFileContainer">
           <gr-button link class="dropdown-trigger" id="trigger" on-tap="_showDropdownTapHandler">
             <span>[[_computeFileDisplayName(_path)]]</span>
@@ -199,9 +192,10 @@ limitations under the License.
         <a class="navLink"
            href$="[[_computeNavLinkURL(_path, _fileList, 1, 1)]]">Next</a>
       </div>
-      </div>
+    </header>
     <div class="loading" hidden$="[[!_loading]]">Loading...</div>
-      <div class="patchRangeHeader" hidden hidden$="[[_loading]]">
+    <div hidden$="[[_loading]]" hidden>
+      <div class="subHeader">
         <div class="patchRangeLeft">
           <gr-patch-range-select
               path="[[_path]]"
@@ -229,12 +223,12 @@ limitations under the License.
           <span hidden$="[[_computePrefsButtonHidden(_prefs, _loggedIn)]]">
             <span
                 hidden$="[[_computeModeSelectHidden(_isImageDiff)]]">/</span>
-            <gr-button
+            <gr-button link
-                link
                 class="prefsButton"
                 on-tap="_handlePrefsTap">Preferences</gr-button>
           </span>
         </div>
+      </div>
       <gr-overlay id="prefsOverlay" with-backdrop>
         <gr-diff-preferences
             id="diffPreferences"
@@ -243,12 +237,8 @@ limitations under the License.
             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}}"
@@ -261,6 +251,7 @@ limitations under the License.
           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>

polygerrit-ui/app/elements/diff/gr-diff/gr-diff.html

@@ -44,6 +44,7 @@ limitations under the License.
         border-top: 1px solid #eee;
         display: flex;
         font: 12px var(--monospace-font-family);
+        overflow-x: auto;
         will-change: transform;
       }
       table {

polygerrit-ui/app/elements/gr-app.html

@@ -31,7 +31,6 @@ limitations under the License.
 <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 @@ limitations under the License.
         color: #b71c1c;
       }
     </style>
-    <gr-header>
     <gr-main-header id="mainHeader" search-query="{{params.query}}">
     </gr-main-header>
-    </gr-header>
     <main>
       <template is="dom-if" if="[[_showChangeListView]]" restamp="true">
         <gr-change-list-view

polygerrit-ui/app/elements/shared/gr-header/gr-header.html

@@ -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>

polygerrit-ui/app/elements/shared/gr-header/gr-header.js

@@ -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);
-    },
-  });
-})();

polygerrit-ui/app/elements/shared/gr-header/gr-header_test.html

@@ -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>