Tab Preview On Hover par Eason Wong
Adds on-hover tab preview to Firefox (requires CSS theme).
Vous avez besoin de Firefox pour utiliser cette extension
MĂ©tadonnĂ©es de lâextension
Captures dâĂ©cran
Ă propos de cette extension
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
How to Install the CSS Theme
Compromises
Supporting CSS Theme
The CSS theme is also available here: download.
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
- Go to
about:support
and locateProfile Folder
- Download or copy the CSS theme and move it into
Profile Folder -> chrome
- Go to
about:config
and turntoolkit.legacyUserProfileCustomizations.stylesheets
totrue
- Restart Firefox
Compromises
- Background image for the browser navbar will be disabled
- Incompatible with built-in browser themes âSystem theme â autoâ and âFirefox Alpenglowâ
- Only the first ten tabs on the left will have tab preview
- 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;
}
Ăvaluez votre expĂ©rience
PermissionsEn savoir plus
Ce module a besoin de :
- Accéder aux onglets du navigateur
- Accéder à vos données pour tous les sites web
Plus dâinformations
- Liens du module
- Version
- 1.1
- Taille
- 28,71Â Ko
- DerniĂšre mise Ă jour
- il y a 9 mois (28 août 2023)
- Catégories associées
- Licence
- La licence MIT
- Historique des versions
Ajouter Ă la collection
Plus de modules créés par Eason Wong
- 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