Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Fix issue with threads timelines with few events cropping events #8392

Merged
merged 2 commits into from
Apr 22, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 0 additions & 4 deletions res/css/structures/_RoomView.scss
Original file line number Diff line number Diff line change
Expand Up @@ -70,10 +70,6 @@ limitations under the License.
overflow-y: auto;
flex: 1 1 0;
overflow-anchor: none;

&[data-scrollbar=false] {
overflow-y: hidden;
}
}

.mx_RoomView_messagePanelSearchSpinner {
Expand Down
50 changes: 16 additions & 34 deletions src/components/structures/ScrollPanel.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -22,19 +22,17 @@ import AutoHideScrollbar from "./AutoHideScrollbar";
import { getKeyBindingsManager } from "../../KeyBindingsManager";
import ResizeNotifier from "../../utils/ResizeNotifier";
import { KeyBindingAction } from "../../accessibility/KeyboardShortcuts";
import UIStore, { UI_EVENTS } from "../../stores/UIStore";

const DEBUG_SCROLL = false;

// The amount of extra scroll distance to allow prior to unfilling.
// See getExcessHeight.
const UNPAGINATION_PADDING = 6000;
// The number of milliseconds to debounce calls to onUnfillRequest, to prevent
// many scroll events causing many unfilling requests.
// The number of milliseconds to debounce calls to onUnfillRequest,
// to prevent many scroll events causing many unfilling requests.
const UNFILL_REQUEST_DEBOUNCE_MS = 200;
// _updateHeight makes the height a ceiled multiple of this so we
// don't have to update the height too often. It also allows the user
// to scroll past the pagination spinner a bit so they don't feel blocked so
// updateHeight makes the height a ceiled multiple of this so we don't have to update the height too often.
// It also allows the user to scroll past the pagination spinner a bit so they don't feel blocked so
// much while the content loads.
const PAGE_SIZE = 400;

Expand Down Expand Up @@ -193,24 +191,20 @@ export default class ScrollPanel extends React.Component<IProps> {
private preventShrinkingState: IPreventShrinkingState;
private unfillDebouncer: number;
private bottomGrowth: number;
private pages: number;
private minListHeight: number;
private heightUpdateInProgress: boolean;
private divScroll: HTMLDivElement;

constructor(props, context) {
super(props, context);

if (this.props.resizeNotifier) {
this.props.resizeNotifier.on("middlePanelResizedNoisy", this.onResize);
}
this.props.resizeNotifier?.on("middlePanelResizedNoisy", this.onResize);

this.resetScrollState();
}

componentDidMount() {
this.checkScroll();

UIStore.instance.on(UI_EVENTS.Resize, this.onUiResize);
}

componentDidUpdate() {
Expand All @@ -230,11 +224,7 @@ export default class ScrollPanel extends React.Component<IProps> {
// (We could use isMounted(), but facebook have deprecated that.)
this.unmounted = true;

if (this.props.resizeNotifier) {
this.props.resizeNotifier.removeListener("middlePanelResizedNoisy", this.onResize);
}

UIStore.instance.off(UI_EVENTS.Resize, this.onUiResize);
this.props.resizeNotifier?.removeListener("middlePanelResizedNoisy", this.onResize);
}

private onScroll = ev => {
Expand Down Expand Up @@ -546,7 +536,7 @@ export default class ScrollPanel extends React.Component<IProps> {
stuckAtBottom: this.props.startAtBottom,
};
this.bottomGrowth = 0;
this.pages = 0;
this.minListHeight = 0;
this.scrollTimeout = new Timer(100);
this.heightUpdateInProgress = false;
};
Expand Down Expand Up @@ -721,17 +711,6 @@ export default class ScrollPanel extends React.Component<IProps> {
}
}

private onUiResize = () => {
this.setDataScrollbar();
};

private setDataScrollbar(contentHeight = this.getMessagesHeight()) {
const sn = this.getScrollNode();
const minHeight = sn.clientHeight;
const displayScrollbar = contentHeight > minHeight;
sn.dataset.scrollbar = displayScrollbar.toString();
}

// need a better name that also indicates this will change scrollTop? Rebalance height? Reveal content?
private async updateHeight(): Promise<void> {
// wait until user has stopped scrolling
Expand All @@ -750,10 +729,13 @@ export default class ScrollPanel extends React.Component<IProps> {
const sn = this.getScrollNode();
const itemlist = this.itemlist.current;
const contentHeight = this.getMessagesHeight();
const minHeight = sn.clientHeight;
const height = Math.max(minHeight, contentHeight);
this.pages = Math.ceil(height / PAGE_SIZE);
this.setDataScrollbar(contentHeight);
// Only round to the nearest page when we're basing the height off the content, not off the scrollNode height
// otherwise it'll cause too much overscroll which makes it possible to entirely scroll content off-screen.
if (contentHeight < sn.clientHeight - PAGE_SIZE) {
this.minListHeight = sn.clientHeight;
} else {
this.minListHeight = Math.ceil(contentHeight / PAGE_SIZE) * PAGE_SIZE;
}
this.bottomGrowth = 0;
const newHeight = `${this.getListHeight()}px`;

Expand Down Expand Up @@ -822,7 +804,7 @@ export default class ScrollPanel extends React.Component<IProps> {
}

private getListHeight(): number {
return this.bottomGrowth + (this.pages * PAGE_SIZE);
return this.bottomGrowth + this.minListHeight;
}

private getMessagesHeight(): number {
Expand Down