Merging upstream version 125.0.1.

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>

2 files changed, 29 insertions, 45 deletions

diff --git a/browser/components/tabpreview/tabpreview.css b/browser/components/tabpreview/tabpreview.css
index 8b288cb95d..776f520c7d 100644
--- a/browser/components/tabpreview/tabpreview.css
+++ b/browser/components/tabpreview/tabpreview.css
@@ -3,13 +3,25 @@
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 .tab-preview-container {
-  background-color: #ffffff;
-  color: #15141a;
+  --tab-preview-background-color: light-dark(#fff, #42414d);
+  --tab-preview-text-color: light-dark(#15141a, #fbfbfe);
+  --tab-preview-border-color: light-dark(#cfcfd8, #8f8f9d);
+
+  @media (prefers-contrast) {
+    --tab-preview-background-color: Canvas;
+    --tab-preview-text-color: CanvasText;
+  }
+}
+
+.tab-preview-container {
+  background-color: var(--tab-preview-background-color);
+  color: var(--tab-preview-text-color);
   border-radius: 9px;
   display: inline-block;
   width: 280px;
   overflow: hidden;
   line-height: 1.5;
+  border: 1px solid var(--tab-preview-border-color);
 }
 
 .tab-preview-title {
@@ -19,7 +31,7 @@
 }
 
 .tab-preview-uri {
-  color: #4a4b49;
+  color: var(--text-color-deemphasized);
   max-height: 1.5em;
   overflow: hidden;
   white-space: nowrap;
@@ -30,32 +42,16 @@
   padding: 8px;
 }
 
+.tab-preview-thumbnail-container {
+  border-top: 1px solid var(--tab-preview-border-color);
+}
+
 .tab-preview-thumbnail-container img,
 .tab-preview-thumbnail-container canvas {
   display: block;
   width: 100%;
 }
 
-@media (prefers-color-scheme: dark) {
-  .tab-preview-container {
-    background-color: #42414d;
-    color: #fbfbfe;
-  }
-  .tab-preview-uri {
-    color: #cfcfd8;
-  }
-}
-
-@media (prefers-contrast) {
-  .tab-preview-container {
-    background-color: Canvas;
-    color: CanvasText;
-  }
-  .tab-preview-uri {
-    color: CanvasText;
-  }
-}
-
 @media (max-width: 640px) {
   .tab-preview-thumbnail-container {
     display: none;
diff --git a/browser/components/tabpreview/tabpreview.mjs b/browser/components/tabpreview/tabpreview.mjs
index 5256ab22ff..2409c3fa7a 100644
--- a/browser/components/tabpreview/tabpreview.mjs
+++ b/browser/components/tabpreview/tabpreview.mjs
@@ -11,7 +11,6 @@ var { XPCOMUtils } = ChromeUtils.importESModule(
 
 const TAB_PREVIEW_USE_THUMBNAILS_PREF =
   "browser.tabs.cardPreview.showThumbnails";
-const TAB_PREVIEW_DELAY_PREF = "browser.tabs.cardPreview.delayMs";
 
 /**
  * Detailed preview card that displays when hovering a tab
@@ -37,8 +36,7 @@ export default class TabPreview extends MozLitElement {
     XPCOMUtils.defineLazyPreferenceGetter(
       this,
       "_prefPreviewDelay",
-      TAB_PREVIEW_DELAY_PREF,
-      1000
+      "ui.tooltip.delay_ms"
     );
     XPCOMUtils.defineLazyPreferenceGetter(
       this,
@@ -62,8 +60,8 @@ export default class TabPreview extends MozLitElement {
     this.panel.setAttribute("noautofocus", true);
     this.panel.setAttribute("norolluponanchor", true);
     this.panel.setAttribute("consumeoutsideclicks", "never");
+    this.panel.setAttribute("rolluponmousewheel", "true");
     this.panel.setAttribute("level", "parent");
-    this.panel.setAttribute("type", "arrow");
     this.shadowRoot.append(this.panel);
     return this.panel;
   }
@@ -84,9 +82,9 @@ export default class TabPreview extends MozLitElement {
   getPrettyURI(uri) {
     try {
       const url = new URL(uri);
-      return `${url.hostname}${url.pathname}`.replace(/\/+$/, "");
+      return `${url.hostname}`.replace(/^w{3}\./, "");
     } catch {
-      return this.pageURI;
+      return uri;
     }
   }
 
@@ -96,10 +94,6 @@ export default class TabPreview extends MozLitElement {
         this.requestUpdate();
         break;
       }
-      case "wheel": {
-        this.hidePreview();
-        break;
-      }
       case "popuphidden": {
         this.previewHidden();
         break;
@@ -113,29 +107,23 @@ export default class TabPreview extends MozLitElement {
       y: -2,
       isContextMenu: false,
     });
-    window.addEventListener("wheel", this, {
-      capture: true,
-      passive: true,
-    });
     window.addEventListener("TabSelect", this);
     this.panel.addEventListener("popuphidden", this);
   }
 
   hidePreview() {
     this.panel.hidePopup();
-    this.updateComplete.then(() => {
-      /**
-       * @event TabPreview#previewhidden
-       * @type {CustomEvent}
-       */
-      this.dispatchEvent(new CustomEvent("previewhidden"));
-    });
   }
 
   previewHidden() {
-    window.removeEventListener("wheel", this, { capture: true, passive: true });
     window.removeEventListener("TabSelect", this);
     this.panel.removeEventListener("popuphidden", this);
+
+    /**
+     * @event TabPreview#previewhidden
+     * @type {CustomEvent}
+     */
+    this.dispatchEvent(new CustomEvent("previewhidden"));
   }
 
   // compute values derived from tab element