Use IFileSystem to load resource view resources

Fixes #49278

src/vs/workbench/browser/parts/editor/binaryEditor.ts

@@ -19,6 +19,7 @@ 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 } from 'vs/base/browser/dom';
+import { IFileService } from 'vs/platform/files/common/files';
 
 export interface IOpenCallbacks {
 	openInternal: (input: EditorInput, options: EditorOptions) => void;
@@ -42,7 +43,8 @@ export abstract class BaseBinaryResourceEditor extends BaseEditor {
 		id: string,
 		callbacks: IOpenCallbacks,
 		telemetryService: ITelemetryService,
-		themeService: IThemeService
+		themeService: IThemeService,
+		@IFileService private readonly _fileService: IFileService,
 	) {
 		super(id, telemetryService, themeService);
 
@@ -99,6 +101,7 @@ 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._fileService,
 					this.binaryContainer.getHTMLElement(),
 					this.scrollbar,
 					resource => this.callbacks.openInternal(input, options),

src/vs/workbench/browser/parts/editor/resourceViewer.ts

@@ -26,6 +26,7 @@ import { Action } from 'vs/base/common/actions';
 import { IEditorGroupService } from 'vs/workbench/services/group/common/groupService';
 import { memoize } from 'vs/base/common/decorators';
 import * as platform from 'vs/base/common/platform';
+import { IFileService } from 'vs/platform/files/common/files';
 
 export interface IResourceDescriptor {
 	resource: URI;
@@ -76,6 +77,7 @@ export class ResourceViewer {
 
 	public static show(
 		descriptor: IResourceDescriptor,
+		fileService: IFileService,
 		container: HTMLElement,
 		scrollbar: DomScrollableElement,
 		openInternalClb: (uri: URI) => void,
@@ -88,7 +90,7 @@ export class ResourceViewer {
 
 		// Images
 		if (ResourceViewer.isImageResource(descriptor)) {
-			return ImageView.create(container, descriptor, scrollbar, openExternalClb, metadataClb);
+			return ImageView.create(container, descriptor, fileService, scrollbar, openExternalClb, metadataClb);
 		}
 
 		// Large Files
@@ -105,19 +107,10 @@ export class ResourceViewer {
 	}
 
 	private static isImageResource(descriptor: IResourceDescriptor) {
-		const mime = ResourceViewer.getMime(descriptor);
+		const mime = getMime(descriptor);
 
 		return mime.indexOf('image/') >= 0;
 	}
-
-	private static getMime(descriptor: IResourceDescriptor): string {
-		let mime = descriptor.mime;
-		if (!mime && descriptor.resource.scheme !== Schemas.data) {
-			mime = mimes.getMediaMime(descriptor.resource.toString());
-		}
-
-		return mime || mimes.MIME_BINARY;
-	}
 }
 
 class ImageView {
@@ -127,12 +120,13 @@ class ImageView {
 	public static create(
 		container: HTMLElement,
 		descriptor: IResourceDescriptor,
+		fileService: IFileService,
 		scrollbar: DomScrollableElement,
 		openExternalClb: (uri: URI) => void,
 		metadataClb: (meta: string) => void
 	): ResourceViewerContext | null {
 		if (ImageView.shouldShowImageInline(descriptor)) {
-			return InlineImageView.create(container, descriptor, scrollbar, metadataClb);
+			return InlineImageView.create(container, descriptor, fileService, scrollbar, metadataClb);
 		}
 
 		LargeImageView.create(container, descriptor, openExternalClb);
@@ -361,14 +355,6 @@ class InlineImageView {
 	 */
 	private static readonly PIXELATION_THRESHOLD = 3;
 
-	/**
-	 * Chrome is caching images very aggressively and so we use the ETag information to find out if
-	 * we need to bypass the cache or not. We could always bypass the cache everytime we show the image
-	 * however that has very bad impact on memory consumption because each time the image gets shown,
-	 * memory grows (see also https://github.com/electron/electron/issues/6275)
-	 */
-	private static IMAGE_RESOURCE_ETAG_CACHE = new LRUCache<string, { etag: string, src: string }>(100);
-
 	/**
 	 * Store the scale and position of an image so it can be restored when changing editor tabs
 	 */
@@ -377,6 +363,7 @@ class InlineImageView {
 	public static create(
 		container: HTMLElement,
 		descriptor: IResourceDescriptor,
+		fileService: IFileService,
 		scrollbar: DomScrollableElement,
 		metadataClb: (meta: string) => void
 	) {
@@ -543,7 +530,7 @@ class InlineImageView {
 		$(container)
 			.empty()
 			.addClass('image', 'zoom-in')
-			.img({ src: InlineImageView.imageSrc(descriptor) })
+			.img({})
 			.style('visibility', 'hidden')
 			.addClass('scale-to-fit')
 			.on(DOM.EventType.LOAD, (e, i) => {
@@ -561,27 +548,32 @@ class InlineImageView {
 				}
 			});
 
+		InlineImageView.imageSrc(descriptor, fileService).then(dataUri => {
+			const imgs = container.getElementsByTagName('img');
+			if (imgs.length) {
+				imgs[0].src = dataUri;
+			}
+		});
+
 		return context;
 	}
 
-	private static imageSrc(descriptor: IResourceDescriptor): string {
+	private static imageSrc(descriptor: IResourceDescriptor, fileService: IFileService): TPromise<string> {
 		if (descriptor.resource.scheme === Schemas.data) {
-			return descriptor.resource.toString(true /* skip encoding */);
-		}
-
-		const src = descriptor.resource.toString();
-
-		let cached = InlineImageView.IMAGE_RESOURCE_ETAG_CACHE.get(src);
-		if (!cached) {
-			cached = { etag: descriptor.etag, src };
-			InlineImageView.IMAGE_RESOURCE_ETAG_CACHE.set(src, cached);
+			return TPromise.as(descriptor.resource.toString(true /* skip encoding */));
 		}
 
-		if (cached.etag !== descriptor.etag) {
-			cached.etag = descriptor.etag;
-			cached.src = `${src}?${Date.now()}`; // bypass cache with this trick
-		}
+		return fileService.resolveContent(descriptor.resource, { encoding: 'base64' }).then(data => {
+			const mime = getMime(descriptor);
+			return `data:${mime};base64,${data.value}`;
+		});
+	}
+}
 
-		return cached.src;
+function getMime(descriptor: IResourceDescriptor) {
+	let mime = descriptor.mime;
+	if (!mime && descriptor.resource.scheme !== Schemas.data) {
+		mime = mimes.getMediaMime(descriptor.resource.toString());
 	}
-}
\ No newline at end of file
+	return mime || mimes.MIME_BINARY;
+}

src/vs/workbench/parts/files/browser/editors/binaryFileEditor.ts

@@ -15,6 +15,7 @@ import { onUnexpectedError } from 'vs/base/common/errors';
 import { FileEditorInput } from 'vs/workbench/parts/files/common/editors/fileEditorInput';
 import URI from 'vs/base/common/uri';
 import { BINARY_FILE_EDITOR_ID } from 'vs/workbench/parts/files/common/files';
+import { IFileService } from 'vs/platform/files/common/files';
 
 /**
  * An implementation of editor for binary files like images.
@@ -26,6 +27,7 @@ export class BinaryFileEditor extends BaseBinaryResourceEditor {
 	constructor(
 		@ITelemetryService telemetryService: ITelemetryService,
 		@IThemeService themeService: IThemeService,
+		@IFileService fileService: IFileService,
 		@IWindowsService private windowsService: IWindowsService,
 		@IWorkbenchEditorService private editorService: IWorkbenchEditorService
 	) {
@@ -36,7 +38,8 @@ export class BinaryFileEditor extends BaseBinaryResourceEditor {
 				openExternal: resource => this.openExternal(resource)
 			},
 			telemetryService,
-			themeService
+			themeService,
+			fileService
 		);
 	}