From 04d0cf6ad6ce2c18afc651e7ba13c97827ae3d6f Mon Sep 17 00:00:00 2001 From: Matt Bierner Date: Tue, 1 Oct 2019 16:17:48 -0700 Subject: [PATCH] Show errors when image can't be loaded For #81803 --- extensions/image-preview/media/main.css | 29 ++++++++++++++++++++----- extensions/image-preview/media/main.js | 16 ++++++++------ extensions/image-preview/src/preview.ts | 12 ++++++---- 3 files changed, 40 insertions(+), 17 deletions(-) diff --git a/extensions/image-preview/media/main.css b/extensions/image-preview/media/main.css index 971a641fb07..57dface9cad 100644 --- a/extensions/image-preview/media/main.css +++ b/extensions/image-preview/media/main.css @@ -6,6 +6,7 @@ html, body { height: 100%; max-height: 100%; + text-align: center; } body img { @@ -77,18 +78,34 @@ body img { margin-left: 5px; } -.loading { - position: fixed; +.container.loading, +.container.error { + display: flex; + justify-content: center; + align-items: center; +} + +.loading-indicator { width: 30px; height: 30px; - left: 50%; - top: 50%; - margin-top: -15px; - margin-left: -15px; background-image: url('./loading.svg'); background-size: cover; } +.loading-indicator, +.image-load-error-message { + display: none; +} + +.loading .loading-indicator, +.error .image-load-error-message { + display: block; +} + +.image-load-error-message { + margin: 1em; +} + .vscode-dark .loading { background-image: url('./loading-dark.svg'); } diff --git a/extensions/image-preview/media/main.js b/extensions/image-preview/media/main.js index e58b7e58f36..cd39eb9a53f 100644 --- a/extensions/image-preview/media/main.js +++ b/extensions/image-preview/media/main.js @@ -72,7 +72,7 @@ let hasLoadedImage = false; // Elements - const container = /** @type {HTMLElement} */(document.querySelector('body')); + const container = document.body; const image = document.createElement('img'); function updateScale(newScale) { @@ -232,19 +232,15 @@ image.classList.add('scale-to-fit'); image.addEventListener('load', () => { - document.querySelector('.loading').remove(); hasLoadedImage = true; - if (!image) { - return; - } - vscode.postMessage({ type: 'size', value: `${image.naturalWidth}x${image.naturalHeight}`, }); - container.classList.add('ready'); + document.body.classList.remove('loading'); + document.body.classList.add('ready'); document.body.append(image); updateScale(scale); @@ -254,6 +250,12 @@ } }); + image.addEventListener('error', () => { + hasLoadedImage = true; + document.body.classList.add('error'); + document.body.classList.remove('loading'); + }); + image.src = decodeURI(settings.src); window.addEventListener('message', e => { diff --git a/extensions/image-preview/src/preview.ts b/extensions/image-preview/src/preview.ts index b3c050587a1..007697fffc5 100644 --- a/extensions/image-preview/src/preview.ts +++ b/extensions/image-preview/src/preview.ts @@ -4,9 +4,12 @@ *--------------------------------------------------------------------------------------------*/ import * as vscode from 'vscode'; -import { SizeStatusBarEntry } from './sizeStatusBarEntry'; -import { ZoomStatusBarEntry, Scale } from './zoomStatusBarEntry'; +import * as nls from 'vscode-nls'; import { Disposable } from './dispose'; +import { SizeStatusBarEntry } from './sizeStatusBarEntry'; +import { Scale, ZoomStatusBarEntry } from './zoomStatusBarEntry'; + +const localize = nls.loadMessageBundle(); const enum PreviewState { Disposed, @@ -132,8 +135,9 @@ export class Preview extends Disposable { - -
+ +
+
${localize('preview.imageLoadError', "An error occurred while loading the image")}
`;