Revert "Use separate div for image preview transparency grid" (#229082)

This reverts commit 945d4cd. Fixes #229019
microsoft · Sep 20, 2024 · 0685b0a · 0685b0a
1 parent 180d424
commit 0685b0a
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 12 deletions.
diff --git a/extensions/media-preview/media/imagePreview.css b/extensions/media-preview/media/imagePreview.css
@@ -12,7 +12,6 @@ html, body {
 body img {
 	max-width: none;
 	max-height: none;
-	vertical-align: middle;
 }
 
 .container:focus {
@@ -32,20 +31,20 @@ body img {
 	box-sizing: border-box;
 }
 
-.container.image .transparency-grid {
+.container.image img {
 	padding: 0;
 	background-position: 0 0, 8px 8px;
 	background-size: 16px 16px;
 	border: 1px solid var(--vscode-imagePreview-border);
 }
 
-.container.image .transparency-grid {
+.container.image img {
 	background-image:
 		linear-gradient(45deg, rgb(230, 230, 230) 25%, transparent 25%, transparent 75%, rgb(230, 230, 230) 75%, rgb(230, 230, 230)),
 		linear-gradient(45deg, rgb(230, 230, 230) 25%, transparent 25%, transparent 75%, rgb(230, 230, 230) 75%, rgb(230, 230, 230));
 }
 
-.vscode-dark.container.image .transparency-grid {
+.vscode-dark.container.image img {
 	background-image:
 		linear-gradient(45deg, rgb(20, 20, 20) 25%, transparent 25%, transparent 75%, rgb(20, 20, 20) 75%, rgb(20, 20, 20)),
 		linear-gradient(45deg, rgb(20, 20, 20) 25%, transparent 25%, transparent 75%, rgb(20, 20, 20) 75%, rgb(20, 20, 20));
@@ -55,13 +54,13 @@ body img {
 	image-rendering: pixelated;
 }
 
-.container .transparency-grid.scale-to-fit {
+.container img.scale-to-fit {
 	max-width: calc(100% - 20px);
 	max-height: calc(100% - 20px);
 	object-fit: contain;
 }
 
-.container .transparency-grid {
+.container img {
 	margin: auto;
 }
 

diff --git a/extensions/media-preview/media/imagePreview.js b/extensions/media-preview/media/imagePreview.js
@@ -76,8 +76,6 @@
 
 	// Elements
 	const container = document.body;
-	const transparencyGrid = document.createElement('div');
-	transparencyGrid.classList.add('transparency-grid');
 	const image = document.createElement('img');
 
 	function updateScale(newScale) {
@@ -87,7 +85,7 @@
 
 		if (newScale === 'fit') {
 			scale = 'fit';
-			transparencyGrid.classList.add('scale-to-fit');
+			image.classList.add('scale-to-fit');
 			image.classList.remove('pixelated');
 			// @ts-ignore Non-standard CSS property
 			image.style.zoom = 'normal';
@@ -294,9 +292,7 @@
 
 		document.body.classList.remove('loading');
 		document.body.classList.add('ready');
-
-		document.body.append(transparencyGrid);
-		transparencyGrid.appendChild(image);
+		document.body.append(image);
 
 		updateScale(scale);