Use fileService and Blob for resource viewer

Fixes #74191 Instead of using a base64 encoded data uri to display images, use the fileService to read Buffer, convert this to a Blob, and display the blob

Use fileService and Blob for resource viewer
Fixes #74191 Instead of using a base64 encoded data uri to display images, use the fileService to read Buffer, convert this to a Blob, and display the blob
ae8da480 · Matt Bierner · f3b8d15b · ae8da480 · ae8da480 · ae8da480
4 changed file
--- a/src/vs/code/electron-browser/workbench/workbench.html
+++ b/src/vs/code/electron-browser/workbench/workbench.html
@@ -3,7 +3,7 @@
 <html>
 	<head>
 		<meta charset="utf-8" />
-		<meta http-equiv="Content-Security-Policy" content="default-src 'none'; img-src 'self' https: data: vscode-remote:; media-src 'none'; child-src 'self'; object-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; connect-src 'self' https:; font-src 'self' https: vscode-remote:;">
+		<meta http-equiv="Content-Security-Policy" content="default-src 'none'; img-src 'self' https: data: blob: vscode-remote:; media-src 'none'; child-src 'self'; object-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; connect-src 'self' https:; font-src 'self' https: vscode-remote:;">
 	</head>
 	<body class="vs-dark" aria-label="">
 	</body>

--- a/src/vs/workbench/browser/parts/editor/binaryEditor.ts
+++ b/src/vs/workbench/browser/parts/editor/binaryEditor.ts
@@ -15,11 +15,11 @@ import { IThemeService } from 'vs/platform/theme/common/themeService';
 import { ResourceViewerContext, ResourceViewer } from 'vs/workbench/browser/parts/editor/resourceViewer';
 import { URI } from 'vs/base/common/uri';
 import { Dimension, size, clearNode } from 'vs/base/browser/dom';
-import { ITextFileService } from 'vs/workbench/services/textfile/common/textfiles';
 import { CancellationToken } from 'vs/base/common/cancellation';
 import { dispose } from 'vs/base/common/lifecycle';
 import { IStorageService } from 'vs/platform/storage/common/storage';
 import { IWorkbenchEnvironmentService } from 'vs/workbench/services/environment/common/environmentService';
+import { IFileService } from 'vs/platform/files/common/files';

 export interface IOpenCallbacks {
 	openInternal: (input: EditorInput, options: EditorOptions) => Promise<void>;
@@ -48,7 +48,7 @@ export abstract class BaseBinaryResourceEditor extends BaseEditor {
 		callbacks: IOpenCallbacks,
 		telemetryService: ITelemetryService,
 		themeService: IThemeService,
-		@ITextFileService private readonly textFileService: ITextFileService,
+		@IFileService private readonly fileService: IFileService,
 		@IWorkbenchEnvironmentService private readonly environmentService: IWorkbenchEnvironmentService,
 		@IStorageService storageService: IStorageService
 	) {
@@ -89,7 +89,11 @@ export abstract class BaseBinaryResourceEditor extends BaseEditor {
 		}

 		// Render Input
-		this.resourceViewerContext = ResourceViewer.show({ name: model.getName(), resource: model.getResource(), size: model.getSize(), etag: model.getETag(), mime: model.getMime() }, this.textFileService, this.binaryContainer, this.scrollbar, {
+		if (this.resourceViewerContext) {
+			this.resourceViewerContext.dispose();
+		}
+
+		this.resourceViewerContext = ResourceViewer.show({ name: model.getName(), resource: model.getResource(), size: model.getSize(), etag: model.getETag(), mime: model.getMime() }, this.fileService, this.binaryContainer, this.scrollbar, {
 			openInternalClb: () => this.handleOpenInternalCallback(input, options),
 			openExternalClb: this.environmentService.configuration.remoteAuthority ? undefined : resource => this.callbacks.openExternal(resource),
 			metadataClb: meta => this.handleMetadataChanged(meta)

--- a/src/vs/workbench/browser/parts/editor/resourceViewer.ts
+++ b/src/vs/workbench/browser/parts/editor/resourceViewer.ts
@@ -15,13 +15,13 @@ import { clamp } from 'vs/base/common/numbers';
 import { Themable } from 'vs/workbench/common/theme';
 import { IStatusbarItem } from 'vs/workbench/browser/parts/statusbar/statusbar';
 import { IContextMenuService } from 'vs/platform/contextview/browser/contextView';
-import { IDisposable, Disposable, combinedDisposable } from 'vs/base/common/lifecycle';
+import { IDisposable, Disposable, combinedDisposable, toDisposable, dispose } from 'vs/base/common/lifecycle';
 import { IThemeService } from 'vs/platform/theme/common/themeService';
 import { Action } from 'vs/base/common/actions';
 import { IEditorService } from 'vs/workbench/services/editor/common/editorService';
 import { memoize } from 'vs/base/common/decorators';
 import * as platform from 'vs/base/common/platform';
-import { ITextFileService } from 'vs/workbench/services/textfile/common/textfiles';
+import { IFileService } from 'vs/platform/files/common/files';

 export interface IResourceDescriptor {
 	readonly resource: URI;
@@ -78,7 +78,7 @@ export class ResourceViewer {

 	static show(
 		descriptor: IResourceDescriptor,
-		textFileService: ITextFileService,
+		fileService: IFileService,
 		container: HTMLElement,
 		scrollbar: DomScrollableElement,
 		delegate: ResourceViewerDelegate
@@ -89,7 +89,7 @@ export class ResourceViewer {

 		// Images
 		if (ResourceViewer.isImageResource(descriptor)) {
-			return ImageView.create(container, descriptor, textFileService, scrollbar, delegate);
+			return ImageView.create(container, descriptor, fileService, scrollbar, delegate);
 		}

 		// Large Files
@@ -118,12 +118,12 @@ class ImageView {
 	static create(
 		container: HTMLElement,
 		descriptor: IResourceDescriptor,
-		textFileService: ITextFileService,
+		fileService: IFileService,
 		scrollbar: DomScrollableElement,
 		delegate: ResourceViewerDelegate
 	): ResourceViewerContext {
 		if (ImageView.shouldShowImageInline(descriptor)) {
-			return InlineImageView.create(container, descriptor, textFileService, scrollbar, delegate);
+			return InlineImageView.create(container, descriptor, fileService, scrollbar, delegate);
 		}

 		return LargeImageView.create(container, descriptor, delegate);
@@ -359,7 +359,7 @@ class InlineImageView {
 	static create(
 		container: HTMLElement,
 		descriptor: IResourceDescriptor,
-		textFileService: ITextFileService,
+		fileService: IFileService,
 		scrollbar: DomScrollableElement,
 		delegate: ResourceViewerDelegate
 	) {
@@ -367,7 +367,7 @@ class InlineImageView {

 		const context: ResourceViewerContext = {
 			layout(dimension: DOM.Dimension) { },
-			dispose: () => combinedDisposable(disposables).dispose()
+			dispose: () => dispose(disposables)
 		};

 		const cacheKey = `${descriptor.resource.toString()}:${descriptor.etag}`;
@@ -557,25 +557,29 @@ class InlineImageView {
 			}
 		}));

-		InlineImageView.imageSrc(descriptor, textFileService).then(dataUri => {
-			const imgs = container.getElementsByTagName('img');
-			if (imgs.length) {
-				imgs[0].src = dataUri;
+		InlineImageView.imageSrc(descriptor, fileService).then(src => {
+			const img = container.querySelector('img');
+			if (img) {
+				if (typeof src === 'string') {
+					img.src = src;
+				} else {
+					const url = URL.createObjectURL(src);
+					disposables.push(toDisposable(() => URL.revokeObjectURL(url)));
+					img.src = url;
+				}
 			}
 		});

 		return context;
 	}

-	private static async imageSrc(descriptor: IResourceDescriptor, textFileService: ITextFileService): Promise<string> {
+	private static async imageSrc(descriptor: IResourceDescriptor, fileService: IFileService): Promise<string | Blob> {
 		if (descriptor.resource.scheme === Schemas.data) {
-			return Promise.resolve(descriptor.resource.toString(true /* skip encoding */));
+			return descriptor.resource.toString(true /* skip encoding */);
 		}

-		const data = await textFileService.read(descriptor.resource, { encoding: 'base64' });
-		const mime = getMime(descriptor);
-
-		return `data:${mime};base64,${data.value}`;
+		const { value } = await fileService.readFile(descriptor.resource);
+		return new Blob([value.buffer], { type: getMime(descriptor) });
 	}
 }


--- a/src/vs/workbench/contrib/files/browser/editors/binaryFileEditor.ts
+++ b/src/vs/workbench/contrib/files/browser/editors/binaryFileEditor.ts
@@ -14,8 +14,8 @@ import { URI } from 'vs/base/common/uri';
 import { BINARY_FILE_EDITOR_ID } from 'vs/workbench/contrib/files/common/files';
 import { IEditorService } from 'vs/workbench/services/editor/common/editorService';
 import { IStorageService } from 'vs/platform/storage/common/storage';
-import { ITextFileService } from 'vs/workbench/services/textfile/common/textfiles';
 import { IWorkbenchEnvironmentService } from 'vs/workbench/services/environment/common/environmentService';
+import { IFileService } from 'vs/platform/files/common/files';

 /**
 * An implementation of editor for binary files like images.
@@ -30,7 +30,7 @@ export class BinaryFileEditor extends BaseBinaryResourceEditor {
 		@IWindowsService private readonly windowsService: IWindowsService,
 		@IEditorService private readonly editorService: IEditorService,
 		@IStorageService storageService: IStorageService,
-		@ITextFileService textFileService: ITextFileService,
+		@IFileService fileService: IFileService,
 		@IWorkbenchEnvironmentService environmentService: IWorkbenchEnvironmentService,
 	) {
 		super(
@@ -41,7 +41,7 @@ export class BinaryFileEditor extends BaseBinaryResourceEditor {
 			},
 			telemetryService,
 			themeService,
-			textFileService,
+			fileService,
 			environmentService,
 			storageService,
 		);