image dimensions in hover (for #3414)

src/vs/base/browser/ui/resourceviewer/resourceViewer.ts

@@ -104,6 +104,9 @@ export class ResourceViewer {
 						});
 					}
 
+					// Update title when we know the image bounds
+					img.title(nls.localize('imgTitle', "{0} ({1}x{2})", paths.basename(resource.fsPath), imgElement.naturalWidth, imgElement.naturalHeight));
+
 					scrollbar.scanDomNode();
 				});
 		}

src/vs/base/browser/ui/resourceviewer/resourceviewer.css

@@ -13,9 +13,9 @@
 }
 
 .monaco-resource-viewer.image {
-	padding: 10px;
-	background-position: 0 0, 6px 6px;
-	background-size: 12px 12px;
+	padding: 10px 10px 0 10px;
+	background-position: 0 0, 8px 8px;
+	background-size: 16px 16px;
 }
 
 .monaco-resource-viewer.image.full-size {
@@ -24,19 +24,19 @@
 
 .vs .monaco-resource-viewer.image {
 	background-image:
-		linear-gradient(45deg, rgb(220, 220, 220) 25%, transparent 25%, transparent 75%, rgb(220, 220, 220) 75%, rgb(220, 220, 220)),
-		linear-gradient(45deg, rgb(220, 220, 220) 25%, transparent 25%, transparent 75%, rgb(220, 220, 220) 75%, rgb(220, 220, 220));
+		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));
 }
 
 .vs-dark .monaco-resource-viewer.image {
 	background-image:
-		linear-gradient(45deg, rgb(80, 80, 80) 25%, transparent 25%, transparent 75%, rgb(80, 80, 80) 75%, rgb(80, 80, 80)),
-		linear-gradient(45deg, rgb(80, 80, 80) 25%, transparent 25%, transparent 75%, rgb(80, 80, 80) 75%, rgb(80, 80, 80));
+		linear-gradient(45deg, rgb(40, 40, 40) 25%, transparent 25%, transparent 75%, rgb(40, 40, 40) 75%, rgb(40, 40, 40)),
+		linear-gradient(45deg, rgb(40, 40, 40) 25%, transparent 25%, transparent 75%, rgb(40, 40, 40) 75%, rgb(40, 40, 40));
 }
 
 .monaco-resource-viewer img {
 	max-width: 100%;
-	max-height: 100%;
+	max-height: calc(100% - 10px); /* somehow this prevents scrollbars from showing up */
 }
 
 .monaco-resource-viewer.oversized img {

src/vs/workbench/browser/parts/editor/media/binarydiffeditor.css

@@ -12,7 +12,7 @@
 }
 
 .vs-dark .monaco-workbench .binarydiff-right {
-	border-left: 3px solid black;
+	border-left: 3px solid rgb(20, 20, 20);
 }
 
 .hc-black .monaco-workbench .binarydiff-right {