summaryrefslogtreecommitdiffstats
path: root/browser/components/tabpreview/tabpreview.mjs
diff options
context:
space:
mode:
authorDaniel Baumann <daniel.baumann@progress-linux.org>2024-05-15 03:35:49 +0000
committerDaniel Baumann <daniel.baumann@progress-linux.org>2024-05-15 03:35:49 +0000
commitd8bbc7858622b6d9c278469aab701ca0b609cddf (patch)
treeeff41dc61d9f714852212739e6b3738b82a2af87 /browser/components/tabpreview/tabpreview.mjs
parentReleasing progress-linux version 125.0.3-1~progress7.99u1. (diff)
downloadfirefox-d8bbc7858622b6d9c278469aab701ca0b609cddf.tar.xz
firefox-d8bbc7858622b6d9c278469aab701ca0b609cddf.zip
Merging upstream version 126.0.
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'browser/components/tabpreview/tabpreview.mjs')
-rw-r--r--browser/components/tabpreview/tabpreview.mjs237
1 files changed, 0 insertions, 237 deletions
diff --git a/browser/components/tabpreview/tabpreview.mjs b/browser/components/tabpreview/tabpreview.mjs
deleted file mode 100644
index 2409c3fa7a..0000000000
--- a/browser/components/tabpreview/tabpreview.mjs
+++ /dev/null
@@ -1,237 +0,0 @@
-/* This Source Code Form is subject to the terms of the Mozilla Public
- * License, v. 2.0. If a copy of the MPL was not distributed with this
- * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
-
-import { html } from "chrome://global/content/vendor/lit.all.mjs";
-import { MozLitElement } from "chrome://global/content/lit-utils.mjs";
-
-var { XPCOMUtils } = ChromeUtils.importESModule(
- "resource://gre/modules/XPCOMUtils.sys.mjs"
-);
-
-const TAB_PREVIEW_USE_THUMBNAILS_PREF =
- "browser.tabs.cardPreview.showThumbnails";
-
-/**
- * Detailed preview card that displays when hovering a tab
- *
- * @property {MozTabbrowserTab} tab - the tab to preview
- * @fires TabPreview#previewhidden
- * @fires TabPreview#previewshown
- * @fires TabPreview#previewThumbnailUpdated
- */
-export default class TabPreview extends MozLitElement {
- static properties = {
- tab: { type: Object },
-
- _previewIsActive: { type: Boolean, state: true },
- _previewDelayTimeout: { type: Number, state: true },
- _displayTitle: { type: String, state: true },
- _displayURI: { type: String, state: true },
- _displayImg: { type: Object, state: true },
- };
-
- constructor() {
- super();
- XPCOMUtils.defineLazyPreferenceGetter(
- this,
- "_prefPreviewDelay",
- "ui.tooltip.delay_ms"
- );
- XPCOMUtils.defineLazyPreferenceGetter(
- this,
- "_prefDisplayThumbnail",
- TAB_PREVIEW_USE_THUMBNAILS_PREF,
- false
- );
- }
-
- // render this inside a <panel>
- createRenderRoot() {
- if (!document.createXULElement) {
- console.error(
- "Unable to create panel: document.createXULElement is not available"
- );
- return super.createRenderRoot();
- }
- this.attachShadow({ mode: "open" });
- this.panel = document.createXULElement("panel");
- this.panel.setAttribute("id", "tabPreviewPanel");
- 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.shadowRoot.append(this.panel);
- return this.panel;
- }
-
- get previewCanShow() {
- return this._previewIsActive && this.tab;
- }
-
- get thumbnailCanShow() {
- return (
- this.previewCanShow &&
- this._prefDisplayThumbnail &&
- !this.tab.selected &&
- this._displayImg
- );
- }
-
- getPrettyURI(uri) {
- try {
- const url = new URL(uri);
- return `${url.hostname}`.replace(/^w{3}\./, "");
- } catch {
- return uri;
- }
- }
-
- handleEvent(e) {
- switch (e.type) {
- case "TabSelect": {
- this.requestUpdate();
- break;
- }
- case "popuphidden": {
- this.previewHidden();
- break;
- }
- }
- }
-
- showPreview() {
- this.panel.openPopup(this.tab, {
- position: "bottomleft topleft",
- y: -2,
- isContextMenu: false,
- });
- window.addEventListener("TabSelect", this);
- this.panel.addEventListener("popuphidden", this);
- }
-
- hidePreview() {
- this.panel.hidePopup();
- }
-
- previewHidden() {
- 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
- willUpdate(changedProperties) {
- if (!changedProperties.has("tab")) {
- return;
- }
- if (!this.tab) {
- this._displayTitle = "";
- this._displayURI = "";
- this._displayImg = null;
- return;
- }
- this._displayTitle = this.tab.textLabel.textContent;
- this._displayURI = this.getPrettyURI(
- this.tab.linkedBrowser.currentURI.spec
- );
- this._displayImg = null;
- let { tab } = this;
- window.tabPreviews.get(this.tab).then(el => {
- if (this.tab == tab) {
- this._displayImg = el;
- }
- });
- }
-
- updated(changedProperties) {
- if (changedProperties.has("tab")) {
- // handle preview delay
- if (!this.tab) {
- clearTimeout(this._previewDelayTimeout);
- this._previewIsActive = false;
- } else {
- let lastTabVal = changedProperties.get("tab");
- if (!lastTabVal) {
- // tab was set from an empty state,
- // so wait for the delay duration before showing
- this._previewDelayTimeout = setTimeout(() => {
- this._previewIsActive = true;
- }, this._prefPreviewDelay);
- }
- }
- }
- if (changedProperties.has("_previewIsActive")) {
- if (!this._previewIsActive) {
- this.hidePreview();
- }
- }
- if (
- (changedProperties.has("tab") ||
- changedProperties.has("_previewIsActive")) &&
- this.previewCanShow
- ) {
- this.updateComplete.then(() => {
- if (this.panel.state == "open" || this.panel.state == "showing") {
- this.panel.moveToAnchor(this.tab, "bottomleft topleft", 0, -2);
- } else {
- this.showPreview();
- }
-
- this.dispatchEvent(
- /**
- * @event TabPreview#previewshown
- * @type {CustomEvent}
- * @property {object} detail
- * @property {MozTabbrowserTab} detail.tab - the tab being previewed
- */
- new CustomEvent("previewshown", {
- detail: { tab: this.tab },
- })
- );
- });
- }
- if (changedProperties.has("_displayImg")) {
- this.updateComplete.then(() => {
- /**
- * fires when the thumbnail for a preview is loaded
- * and added to the document.
- *
- * @event TabPreview#previewThumbnailUpdated
- * @type {CustomEvent}
- */
- this.dispatchEvent(new CustomEvent("previewThumbnailUpdated"));
- });
- }
- }
-
- render() {
- return html`
- <link
- rel="stylesheet"
- type="text/css"
- href="chrome://browser/content/tabpreview/tabpreview.css"
- />
- <div class="tab-preview-container">
- <div class="tab-preview-text-container">
- <div class="tab-preview-title">${this._displayTitle}</div>
- <div class="tab-preview-uri">${this._displayURI}</div>
- </div>
- ${this.thumbnailCanShow
- ? html`
- <div class="tab-preview-thumbnail-container">
- ${this._displayImg}
- </div>
- `
- : ""}
- </div>
- `;
- }
-}
-customElements.define("tab-preview", TabPreview);