Add a setting to disable diff panel floating window.PANEL_FLOATING_DISABLED=true prevents diff header detaching from the page flow and sticking to the window top border. Change-Id: Idafab7f73fb52a9165b7610ae609e0a8fe52bbd9
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 a47a695..5056927 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
@@ -141,6 +141,10 @@ .separator { margin: 0 .25em; } + .noOverflow { + display: block; + overflow: auto; + } @media screen and (max-width: 50em) { header { padding: .5em var(--default-horizontal-margin); @@ -188,6 +192,7 @@ } </style> <gr-fixed-panel + floating-disabled="[[_panelFloatingDisabled]]" keep-on-scroll ready-for-measure="[[!_loading]]"> <header> @@ -297,26 +302,25 @@ </div> </gr-fixed-panel> <div class="loading" hidden$="[[!_loading]]">Loading...</div> - <div hidden hidden$="[[_loading]]"> - <gr-diff-preferences - id="diffPreferences" - prefs="{{_prefs}}" - local-prefs="{{_localPrefs}}"></gr-diff-preferences> - <gr-diff - id="diff" - hidden - hidden$="[[_loading]]" - 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-diff + id="diff" + hidden + hidden$="[[_loading]]" + class$="[[_computeDiffClass(_panelFloatingDisabled)]]" + 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-diff-preferences + id="diffPreferences" + prefs="{{_prefs}}" + local-prefs="{{_localPrefs}}"></gr-diff-preferences> <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-view/gr-diff-view.js b/polygerrit-ui/app/elements/diff/gr-diff-view/gr-diff-view.js index 95e813a..1b918db 100644 --- a/polygerrit-ui/app/elements/diff/gr-diff-view/gr-diff-view.js +++ b/polygerrit-ui/app/elements/diff/gr-diff-view/gr-diff-view.js
@@ -104,6 +104,10 @@ type: Object, computed: '_computeCommentSkips(_commentMap, _fileList, _path)', }, + _panelFloatingDisabled: { + type: Boolean, + value: () => { return window.PANEL_FLOATING_DISABLED; }, + }, }, behaviors: [ @@ -718,5 +722,11 @@ return skips; }, + + _computeDiffClass(panelFloatingDisabled) { + if (panelFloatingDisabled) { + return 'noOverflow'; + } + }, }); })();
diff --git a/polygerrit-ui/app/elements/shared/gr-fixed-panel/gr-fixed-panel.js b/polygerrit-ui/app/elements/shared/gr-fixed-panel/gr-fixed-panel.js index 27cb373..fc38daa 100644 --- a/polygerrit-ui/app/elements/shared/gr-fixed-panel/gr-fixed-panel.js +++ b/polygerrit-ui/app/elements/shared/gr-fixed-panel/gr-fixed-panel.js
@@ -18,6 +18,7 @@ is: 'gr-fixed-panel', properties: { + floatingDisabled: Boolean, readyForMeasure: { type: Boolean, observer: '_readyForMeasureObserver', @@ -45,6 +46,9 @@ }, attached() { + if (this.floatingDisabled) { + return; + } // Enable content measure unless blocked by param. if (this.readyForMeasure !== false) { this.readyForMeasure = true; @@ -58,7 +62,9 @@ detached() { this.unlisten(window, 'scroll', '_updateOnScroll'); this.unlisten(window, 'resize', 'update'); - this._observer.disconnect(); + if (this._observer) { + this._observer.disconnect(); + } }, _readyForMeasureObserver(readyForMeasure) { @@ -76,6 +82,9 @@ }, unfloat() { + if (this.floatingDisabled) { + return; + } this.$.header.style.top = ''; this._headerFloating = false; this.customStyle['--header-height'] = ''; @@ -95,6 +104,9 @@ }, _updateDebounced() { + if (this.floatingDisabled) { + return; + } this._isMeasured = false; this._maybeFloatHeader(); this._reposition();
diff --git a/polygerrit-ui/app/elements/shared/gr-fixed-panel/gr-fixed-panel_test.html b/polygerrit-ui/app/elements/shared/gr-fixed-panel/gr-fixed-panel_test.html index 97c92b7..d813a44 100644 --- a/polygerrit-ui/app/elements/shared/gr-fixed-panel/gr-fixed-panel_test.html +++ b/polygerrit-ui/app/elements/shared/gr-fixed-panel/gr-fixed-panel_test.html
@@ -39,8 +39,8 @@ let sandbox; setup(() => { - element = fixture('basic'); sandbox = sinon.sandbox.create(); + element = fixture('basic'); element.readyForMeasure = true; }); @@ -48,6 +48,14 @@ sandbox.restore(); }); + test('can be disabled with floatingDisabled', () => { + element.floatingDisabled = true; + sandbox.stub(element, '_reposition'); + window.dispatchEvent(new CustomEvent('resize')); + element.flushDebouncer('update'); + assert.isFalse(element._reposition.called); + }); + test('header is the height of the content', () => { assert.equal(element.getBoundingClientRect().height, 100); });