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);
});
