Modules pour le navigateur Firefox
  • Extensions
  • ThĂšmes
    • pour Firefox
    • Dictionnaires et paquetages linguistiques
    • Sites pour les autres navigateurs
    • Modules pour Android
Connexion
Aperçu de Tab Preview On Hover

Tab Preview On Hover par Eason

Adds on-hover tab preview to Firefox (requires CSS theme).

ExpérimentalExpérimental
4.9 (8 reviews)4.9 (8 reviews)
77 utilisateurs·trices77 utilisateurs·trices
Vous avez besoin de Firefox pour utiliser cette extension
TĂ©lĂ©charger Firefox et obtenir l’extension
Télécharger le fichier

MĂ©tadonnĂ©es de l’extension

Captures d’écran
À propos de cette extension
This add-on may no longer receive updates, as tab preview is now supported in current versions of Firefox.

What Does the Add-on & CSS Theme Do

With the add-on and the supporting CSS theme, tab preview will appear when a tab is hovered over.

There will be a delay before tab preview shows up. At the same time, if the cursor hovers from one tab over another tab, there’ll be no delay. If the cursor leaves the tab area for a short moment and goes back, the delay will come back. The behaviour is controlled by the CSS theme, user can simply change --preview-delay and --preview-delay-tolerance to adjust the timing.


How to Install the CSS Theme
  1. Go to about:support and locate Profile Folder
  2. Download or copy the CSS theme and move it into Profile Folder -> chrome
  3. Go to about:config and turn toolkit.legacyUserProfileCustomizations.stylesheets to true
  4. Restart Firefox


Compromises
  1. Background image for the browser navbar will be disabled
  2. Incompatible with built-in browser themes “System theme – auto” and “Firefox Alpenglow”
  3. Only the first ten tabs on the left will have tab preview
  4. Adaptive Tab Bar Colour can cause the tab preview to disappear at times, as it resets the browser theme whenever it changes the colour of the tab bar


Supporting CSS Theme

The CSS theme is also available here: download.

/* Tab Preview On Hover supporting CSS theme */

/* Move this file to profile folder > chrome, or append to existing userChrome.css */

/* Version 2024-03-01 */

#navigator-toolbox:-moz-lwtheme {
background-image: none !important;
}

#navigator-toolbox {
z-index: 10 !important;
}

#tabbrowser-tab-tooltip {
display: none !important;
}

.tabbrowser-tab::after {
--preview-delay: 1s; /* Delay of tab preview when the cursor move onto a tab from outside of tab bar */
--preview-delay-tolerance: 0.75s; /* Max time period of cursor not hovering on tab bar before preview delay re-engages */
--preview-width: 200px; /* Width of the preview panel */
--preview-height: 150px; /* Height of the preview panel */
}

.tabbrowser-tab::after {
box-shadow: 0 0 50px black, 0 0 0 1px var(--arrowpanel-border-color) inset;
outline: 0.5px solid black;
pointer-events: none;
content: "";
display: none;
position: absolute;
z-index: 10000;
top: 50px /* Edit if the preview panel is misplaced */;
width: var(--preview-width);
height: var(--preview-height);
background-color: var(--lwt-accent-color);
background-image: var(--lwt-additional-images);
background-repeat: no-repeat;
background-clip: padding-box;
border-radius: 8px;
}

#tabbrowser-arrowscrollbox:not(:hover) .tabbrowser-tab::after {
transition: opacity 0.5s, filter 0s var(--preview-delay-tolerance);
filter: opacity(0);
}

#tabbrowser-arrowscrollbox:hover .tabbrowser-tab::after {
transition: opacity 0.5s, filter 0.5s var(--preview-delay);
filter: opacity(1);
}

.tabbrowser-tab:not(:hover)::after {
opacity: 0;
}

.tabbrowser-tab:hover::after {
opacity: 1;
}

.tabbrowser-tab[selected]:hover::after {
opacity: 0;
transition-duration: 0.25s !important;
}

.tabbrowser-tab:nth-of-type(1)::after {
display: block;
background-size: cover, 0, 0, 0, 0, 0, 0, 0, 0, 0;
}

.tabbrowser-tab:nth-of-type(2)::after {
display: block;
background-size: 0, cover, 0, 0, 0, 0, 0, 0, 0, 0;
}

.tabbrowser-tab:nth-of-type(3)::after {
display: block;
background-size: 0, 0, cover, 0, 0, 0, 0, 0, 0, 0;
}

.tabbrowser-tab:nth-of-type(4)::after {
display: block;
background-size: 0, 0, 0, cover, 0, 0, 0, 0, 0, 0;
}

.tabbrowser-tab:nth-of-type(5)::after {
display: block;
background-size: 0, 0, 0, 0, cover, 0, 0, 0, 0, 0;
}

.tabbrowser-tab:nth-of-type(6)::after {
display: block;
background-size: 0, 0, 0, 0, 0, cover, 0, 0, 0, 0;
}

.tabbrowser-tab:nth-of-type(7)::after {
display: block;
background-size: 0, 0, 0, 0, 0, 0, cover, 0, 0, 0;
}

.tabbrowser-tab:nth-of-type(8)::after {
display: block;
background-size: 0, 0, 0, 0, 0, 0, 0, cover, 0, 0;
}

.tabbrowser-tab:nth-of-type(9)::after {
display: block;
background-size: 0, 0, 0, 0, 0, 0, 0, 0, cover, 0;
}

.tabbrowser-tab:nth-of-type(10)::after {
display: block;
background-size: 0, 0, 0, 0, 0, 0, 0, 0, 0, cover;
}
Noté 4,9 par 8 personnes
Connectez-vous pour noter cette extension
Il n’y a aucune note pour l’instant

Le nombre d’étoiles est enregistrĂ©

5
7
4
1
3
0
2
0
1
0
Lire les 8 critiques
Autorisations et donnéesEn savoir plus

Autorisations nécessaires :

  • AccĂ©der aux onglets du navigateur
  • AccĂ©der Ă  vos donnĂ©es pour tous les sites web
Plus d’informations
Liens du module
  • Page d’accueil
  • Site d’assistance
  • E-mail d’assistance
Version
1.1
Taille
28,71 Ko
DerniĂšre mise Ă  jour
il y a 2 ans (28 août 2023)
Catégories associées
  • Apparence
  • Onglets
Licence
Licence MIT
Historique des versions
  • Voir toutes les versions
Ajouter Ă  la collection
Signaler ce module
Plus de modules créés par Eason
  • Il n’y a aucune note pour l’instant

  • Il n’y a aucune note pour l’instant

  • Il n’y a aucune note pour l’instant

  • Il n’y a aucune note pour l’instant

  • Il n’y a aucune note pour l’instant

  • Il n’y a aucune note pour l’instant

Aller à la page d’accueil de Mozilla

Modules complémentaires

  • À propos
  • Blog des modules complĂ©mentaires Firefox
  • Atelier sur les extensions
  • PĂŽle dĂ©veloppeur
  • Politiques Ă  destination des dĂ©veloppeurs
  • Blog de la communautĂ©
  • Forum
  • Signaler un problĂšme
  • Guide de revue

Navigateurs

  • Desktop
  • Mobile
  • Enterprise

Produits

  • Browsers
  • VPN
  • Relay
  • Monitor
  • Pocket
  • Bluesky (@firefox.com)
  • Instagram (Firefox)
  • YouTube (firefoxchannel)
  • ConfidentialitĂ©
  • Cookies
  • Mentions lĂ©gales

Sauf mention contraire, le contenu de ce site est disponible sous licence Creative Commons Attribution Share-Alike v3.0 ou toute version supérieure.