Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 2 commits into from
Apr 22, 2022
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
85b7be7
Remove data-scrollbar workaround
t3chguy Apr 22, 2022
51b1155
Add a special-case to ScrollPanel list height calculation for when th…
t3chguy Apr 22, 2022
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
View file
Open in desktop
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
View file
Open in desktop
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