Bug 1902619 - Hold space for pending screenshots and fade in when ready. r=jswinarton,desktop-theme-reviewers,tabbrowser-reviewers,dao

Differential Revision: https://phabricator.services.mozilla.com/D218101

browser/components/tabbrowser/content/tab-hover-preview.mjs

@@ -203,6 +203,10 @@ export default class TabHoverPreviewPanel {
     let thumbnailContainer = this._panel.querySelector(
       ".tab-preview-thumbnail-container"
     );
+    thumbnailContainer.classList.toggle(
+      "hide-thumbnail",
+      !this._hasValidThumbnailState(this._tab)
+    );
     if (thumbnailContainer.firstChild != this._thumbnailElement) {
       thumbnailContainer.replaceChildren();
       if (this._thumbnailElement) {

browser/themes/shared/tabbrowser/tab-hover-preview.css

@@ -32,16 +32,23 @@
 }
 
 .tab-preview-thumbnail-container {
+  width: 280px;
+  height: 140px;
   border-top: 1px solid var(--panel-border-color);
-  &:empty {
+  &.hide-thumbnail {
     display: none;
   }
   @media (width < 640px) {
     display: none;
   }
-
   > canvas {
     display: block;
     width: 100%;
+    animation: tab-hover-preview-fadein 0.2s ease;
   }
 }
+
+@keyframes tab-hover-preview-fadein {
+  from { opacity: 0; }
+  to { opacity: 100; }
+}