Show errors when image can't be loaded

For #81803
microsoft · Oct 1, 2019 · 04d0cf6 · 04d0cf6
1 parent aeae28b
commit 04d0cf6
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 17 deletions.
diff --git 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
@@ -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
@@ -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 {
 
  <meta id="image-preview-settings" data-settings="${escapeAttribute(JSON.stringify(settings))}">
 </head>
-<body class="container image scale-to-fit">
- <div class='loading'></div>
+<body class="container image scale-to-fit loading">
+ <div class="loading-indicator"></div>
+ <div class="image-load-error-message">${localize('preview.imageLoadError', "An error occurred while loading the image")}</div>
  <script src="${escapeAttribute(this.extensionResource('/media/main.js'))}"></script>
 </body>
 </html>`;