web - throttle upload/download progress update calls

src/vs/workbench/contrib/files/browser/fileActions.ts

@@ -43,13 +43,13 @@ import { WebFileSystemAccess, triggerDownload } from 'vs/base/browser/dom';
 import { mnemonicButtonLabel } from 'vs/base/common/labels';
 import { IFilesConfigurationService } from 'vs/workbench/services/filesConfiguration/common/filesConfigurationService';
 import { IWorkingCopyService, IWorkingCopy } from 'vs/workbench/services/workingCopy/common/workingCopyService';
-import { sequence, timeout } from 'vs/base/common/async';
+import { RunOnceWorker, sequence, timeout } from 'vs/base/common/async';
 import { IWorkingCopyFileService } from 'vs/workbench/services/workingCopy/common/workingCopyFileService';
 import { once } from 'vs/base/common/functional';
 import { Codicon } from 'vs/base/common/codicons';
 import { IViewsService } from 'vs/workbench/common/views';
 import { trim, rtrim } from 'vs/base/common/strings';
-import { IProgressService, ProgressLocation } from 'vs/platform/progress/common/progress';
+import { IProgressService, IProgressStep, ProgressLocation } from 'vs/platform/progress/common/progress';
 import { CancellationTokenSource } from 'vs/base/common/cancellation';
 import { ILogService } from 'vs/platform/log/common/log';
 import { IUriIdentityService } from 'vs/workbench/services/uriIdentity/common/uriIdentity';
@@ -1040,7 +1040,8 @@ const downloadFileHandler = (accessor: ServicesAccessor) => {
 				if (preferFileSystemAccessWebApis && WebFileSystemAccess.supported(window)) {
 
 					interface IDownloadOperation {
-						startTime: number,
+						startTime: number;
+						progressScheduler: RunOnceWorker<IProgressStep>;
 
 						filesTotal: number;
 						filesDownloaded: number;
@@ -1139,13 +1140,15 @@ const downloadFileHandler = (accessor: ServicesAccessor) => {
 							message = nls.localize('downloadProgressLarge', "{0} ({1} of {2}, {3}/s)", name, BinarySize.formatSize(operation.fileBytesDownloaded), BinarySize.formatSize(fileSize), BinarySize.formatSize(bytesDownloadedPerSecond));
 						}
 
-						progress.report({ message });
+						// Report progress but limit to update only once per second
+						operation.progressScheduler.work({ message });
 					}
 
 					try {
 						const parentFolder: WebFileSystemAccess.FileSystemDirectoryHandle = await window.showDirectoryPicker();
 						const operation: IDownloadOperation = {
 							startTime: Date.now(),
+							progressScheduler: new RunOnceWorker<IProgressStep>(steps => { progress.report(steps[steps.length - 1]); }, 1000),
 
 							filesTotal: stat.isDirectory ? 0 : 1, // folders increment filesTotal within downloadFolder method
 							filesDownloaded: 0,
@@ -1160,6 +1163,8 @@ const downloadFileHandler = (accessor: ServicesAccessor) => {
 						} else {
 							await downloadFile(parentFolder, stat.name, stat.resource, operation);
 						}
+
+						operation.progressScheduler.dispose();
 					} catch (error) {
 						logService.warn(error);
 						cts.cancel(); // `showDirectoryPicker` will throw an error when the user cancels

src/vs/workbench/contrib/files/browser/views/explorerViewer.ts

@@ -41,7 +41,7 @@ import { IWorkingCopyFileService } from 'vs/workbench/services/workingCopy/commo
 import { IHostService } from 'vs/workbench/services/host/browser/host';
 import { IWorkspaceEditingService } from 'vs/workbench/services/workspaces/common/workspaceEditing';
 import { URI } from 'vs/base/common/uri';
-import { ITask, sequence } from 'vs/base/common/async';
+import { ITask, RunOnceWorker, sequence } from 'vs/base/common/async';
 import { IEditorService } from 'vs/workbench/services/editor/common/editorService';
 import { IWorkspaceFolderCreationData } from 'vs/platform/workspaces/common/workspaces';
 import { findValidPasteFileTarget } from 'vs/workbench/contrib/files/browser/fileActions';
@@ -779,11 +779,13 @@ interface IWebkitDataTransferItemEntryReader {
 }
 
 interface IUploadOperation {
+	startTime: number;
+	progressScheduler: RunOnceWorker<IProgressStep>;
+
 	filesTotal: number;
 	filesUploaded: number;
 
-	startTime: number;
-	bytesUploaded: number;
+	totalBytesUploaded: number;
 }
 
 export class FileDragAndDrop implements ITreeDragAndDrop<ExplorerItem> {
@@ -1047,7 +1049,15 @@ export class FileDragAndDrop implements ITreeDragAndDrop<ExplorerItem> {
 		}
 
 		const results: { isFile: boolean, resource: URI }[] = [];
-		const operation: IUploadOperation = { filesTotal: entries.length, filesUploaded: 0, startTime: Date.now(), bytesUploaded: 0 };
+		const operation: IUploadOperation = {
+			startTime: Date.now(),
+			progressScheduler: new RunOnceWorker<IProgressStep>(steps => { progress.report(steps[steps.length - 1]); }, 1000),
+
+			filesTotal: entries.length,
+			filesUploaded: 0,
+
+			totalBytesUploaded: 0
+		};
 
 		for (let entry of entries) {
 			if (token.isCancellationRequested) {
@@ -1075,6 +1085,8 @@ export class FileDragAndDrop implements ITreeDragAndDrop<ExplorerItem> {
 			}
 		}
 
+		operation.progressScheduler.dispose();
+
 		// Open uploaded file in editor only if we upload just one
 		const firstUploadedFile = results[0];
 		if (!token.isCancellationRequested && firstUploadedFile?.isFile) {
@@ -1091,9 +1103,9 @@ export class FileDragAndDrop implements ITreeDragAndDrop<ExplorerItem> {
 		let fileBytesUploaded = 0;
 		const reportProgress = (fileSize: number, bytesUploaded: number): void => {
 			fileBytesUploaded += bytesUploaded;
-			operation.bytesUploaded += bytesUploaded;
+			operation.totalBytesUploaded += bytesUploaded;
 
-			const bytesUploadedPerSecond = operation.bytesUploaded / ((Date.now() - operation.startTime) / 1000);
+			const bytesUploadedPerSecond = operation.totalBytesUploaded / ((Date.now() - operation.startTime) / 1000);
 
 			// Small file
 			let message: string;
@@ -1110,7 +1122,8 @@ export class FileDragAndDrop implements ITreeDragAndDrop<ExplorerItem> {
 				message = localize('uploadProgressLarge', "{0} ({1} of {2}, {3}/s)", entry.name, BinarySize.formatSize(fileBytesUploaded), BinarySize.formatSize(fileSize), BinarySize.formatSize(bytesUploadedPerSecond));
 			}
 
-			progress.report({ message });
+			// Report progress but limit to update only once per second
+			operation.progressScheduler.work({ message });
 		};
 		operation.filesUploaded++;
 		reportProgress(0, 0);