Fixes #95019 - loads timeline based on view size

Also adds `timeline.pageSize` to explicitly choose a page size

src/vs/workbench/contrib/timeline/browser/timeline.contribution.ts

@@ -44,7 +44,12 @@ configurationRegistry.registerConfiguration({
 	properties: {
 		'timeline.excludeSources': {
 			type: 'array',
-			description: localize('timeline.excludeSources', "Experimental: An array of Timeline sources that should be excluded from the Timeline view"),
+			description: localize('timeline.excludeSources', "An array of Timeline sources that should be excluded from the Timeline view"),
+			default: null
+		},
+		'timeline.pageSize': {
+			type: 'number',
+			markdownDescription: localize('timeline.pageSize', "The number of items to show in the Timeline view by default and when loading more items. Setting to `null` (the default) will automatically choose a page size based on the visible area of the Timeline view"),
 			default: null
 		},
 	}

src/vs/workbench/contrib/timeline/browser/timelinePane.ts

@@ -40,8 +40,6 @@ import { escapeRegExpCharacters } from 'vs/base/common/strings';
 import { Iterable } from 'vs/base/common/iterator';
 import { Schemas } from 'vs/base/common/network';
 
-const PageSize = 20;
-
 type TreeElement = TimelineItem | LoadMoreCommand;
 
 function isLoadMoreCommand(item: TreeElement | undefined): item is LoadMoreCommand {
@@ -276,6 +274,12 @@ export class TimelinePane extends ViewPane {
 		}
 	}
 
+	get pageSize() {
+		const pageSize = this.configurationService.getValue<number | null | undefined>('timeline.pageSize') ?? Math.max(20, Math.floor((this.tree.renderHeight / 22) - 1));
+		console.log(pageSize);
+		return pageSize;
+	}
+
 	reset() {
 		this.loadTimeline(true);
 	}
@@ -434,7 +438,7 @@ export class TimelinePane extends ViewPane {
 
 	private clear(cancelPending: boolean) {
 		this._visibleItemCount = 0;
-		this._maxItemCount = PageSize;
+		this._maxItemCount = this.pageSize;
 		this.timelinesBySource.clear();
 
 		if (cancelPending) {
@@ -513,13 +517,13 @@ export class TimelinePane extends ViewPane {
 			!reset &&
 			options?.cursor !== undefined &&
 			timeline !== undefined &&
-			(!timeline?.more || timeline.items.length > timeline.lastRenderedIndex + PageSize)
+			(!timeline?.more || timeline.items.length > timeline.lastRenderedIndex + this.pageSize)
 		) {
 			return false;
 		}
 
 		if (options === undefined) {
-			options = { cursor: reset ? undefined : timeline?.cursor, limit: PageSize };
+			options = { cursor: reset ? undefined : timeline?.cursor, limit: this.pageSize };
 		}
 
 		let request = this.pendingRequests.get(source);
@@ -562,7 +566,7 @@ export class TimelinePane extends ViewPane {
 		} else {
 			// Override the limit, to query for any newer items
 			const { newest } = timeline;
-			this.loadTimelineForSource(timeline.source, this.uri!, false, newest !== undefined ? { limit: { timestamp: newest.timestamp, id: newest.id } } : { limit: PageSize });
+			this.loadTimelineForSource(timeline.source, this.uri!, false, newest !== undefined ? { limit: { timestamp: newest.timestamp, id: newest.id } } : { limit: this.pageSize });
 		}
 	}
 
@@ -886,7 +890,7 @@ export class TimelinePane extends ViewPane {
 						return;
 					}
 
-					this._maxItemCount = this._visibleItemCount + PageSize;
+					this._maxItemCount = this._visibleItemCount + this.pageSize;
 					this.loadTimeline(false);
 				}
 			})