Hold space for pending screenshots and fade in when ready. r=jswinart…

…on,desktop-theme-reviewers,tabbrowser-reviewers,dao
goastian · Dec 28, 2024 · 6a7ed72 · 6a7ed72
1 parent af66ff7
commit 6a7ed72
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 1 deletion.
diff --git a/browser/components/tabbrowser/content/tab-hover-preview.mjs b/browser/components/tabbrowser/content/tab-hover-preview.mjs
@@ -201,6 +201,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) {

diff --git a/browser/themes/shared/tabbrowser/tab-hover-preview.css b/browser/themes/shared/tabbrowser/tab-hover-preview.css
@@ -32,8 +32,10 @@
 }
 
 .tab-preview-thumbnail-container {
+  width: 280px;
+  height: 140px;
   border-top: 1px solid var(--panel-border-color);
-  &:empty {
+  &.hide-thumbnail {
     display: none;
   }
   @media (width < 640px) {
@@ -43,5 +45,11 @@
   > canvas {
     display: block;
     width: 100%;
+    animation: tab-hover-preview-fadein 0.2s ease;
   }
 }
+
+@keyframes tab-hover-preview-fadein {
+  from { opacity: 0; }
+  to { opacity: 100; }
+}