From 086c044dc34dfc0f74fbe41f4ecb402b2cd34884 Mon Sep 17 00:00:00 2001 From: Daniel Baumann Date: Fri, 19 Apr 2024 03:13:33 +0200 Subject: Merging upstream version 125.0.1. Signed-off-by: Daniel Baumann --- browser/components/tabpreview/tabpreview.css | 42 +++++++++++++--------------- browser/components/tabpreview/tabpreview.mjs | 32 +++++++-------------- 2 files changed, 29 insertions(+), 45 deletions(-) (limited to 'browser/components/tabpreview') 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 -- cgit v1.2.3