Is it possible to make tab icons grey before being loaded?
I've been using "unload tab" feature in the right click menu a lot, because my device is slow and I like to keep tabs open. (Thank you so much for adding it!) I love that it makes tabs that I unload manually have grey icons, this is super helpful for keeping track of which tabs are processing and which aren't Can you change it or make a setting so that tabs that are not loaded yet (tabs opened by by the "restore tabs when reopening browser" setting for example) are also grey? It would help me keep track of which tabs are loaded and when. In other words, right now it's possible for a tab to have a color icon when it's not loaded, and I want to make that impossible, so I can keep track better.
الحل المُختار
I don't think there is a built-in way to do it. But it probably could be done with a custom style rule applied to icons on the tab bar. This involves creating a userChrome.css file, which is not officially supported. If I don't get back to you based on personal experimentation, here are some resources for help with custom style rules:
(1) The Firefox CSS subreddit: https://www.reddit.com/r/FirefoxCSS/
(2) My old website at: https://www.userchrome.org/
Read this answer in context 👍 1All Replies (3)
الحل المُختار
I don't think there is a built-in way to do it. But it probably could be done with a custom style rule applied to icons on the tab bar. This involves creating a userChrome.css file, which is not officially supported. If I don't get back to you based on personal experimentation, here are some resources for help with custom style rules:
(1) The Firefox CSS subreddit: https://www.reddit.com/r/FirefoxCSS/
(2) My old website at: https://www.userchrome.org/
After some talking with chatgpt, here's what I ended up putting in my userchrome.css file. I made it so that anyone stumbling across this can (hopefully) edit it even if they don't know anything about CSS. My goal was to make all unloaded tabs look exactly the same, but you can easily use this to make both kinds of tabs look however you want.
/* This removes the filters firefox puts on unloaded tabs by default */
.tabbrowser-tab[pending], /* tabs that aren't loaded, whether it's because you just opened them or they were unloaded */
.tabbrowser-tab[discarded] { /* manually unloaded tabs */
filter: none !important;
}
/* By default Firefox plays a short dimming animation when you unload a tab. This means they'll end up dimmer than not yet loaded tabs. This removes it*/
.tabbrowser-tab[discarded] .tab-icon-image,
.tabbrowser-tab[discarded] .tab-label {
opacity: 1 !important;
}
/* Alternatively, apply the dim to all pending tabs by copying it onto non-discarded tabs too. If you uncomment this by removing the stars and slashes, remember to remove the part above so they don't both happen*/
/* .tabbrowser-tab[pending]:not([discarded]) .tab-icon-image,
.tabbrowser-tab[pending]:not([discarded]) .tab-label {
opacity: 0.5 !important;
} */
/*This applies directly to the label and favicon. You can change it to apply to the whole tab by removing everything between the first ] and first {*/
.tabbrowser-tab[pending] .tab-icon-image,
.tabbrowser-tab[pending] .tab-label {
filter: grayscale(1) invert(.2) !important; /* Replace this with any filter you like. This is the default filter for discarded tabs*/
}
Modified
I eventually changed it to this
/* This removes the filters firefox puts on unloaded tabs by default */
.tabbrowser-tab[pending], /* Tabs that aren't loaded, whether it's because you just opened them or they were unloaded */
.tabbrowser-tab[discarded] { /* Manually unloaded tabs */
filter: none !important;
}
/* Remove default discard animation */
.tabbrowser-tab[discarded] .tab-icon-image,
.tabbrowser-tab[discarded] .tab-label {
opacity: 1 !important;
}
/* Add our own*/
.tabbrowser-tab {
transition: opacity 150ms linear, filter 150ms linear;
}
.tabbrowser-tab[pending]{
opacity: 0.7 !important;
}
/* Further filters on the tab image */
.tabbrowser-tab[pending] .tab-icon-image {
filter: grayscale(0.3) !important;
}
/* Restore mostly normal look on hover */
.tabbrowser-tab[pending]:hover {
opacity: 1 !important;
filter: none !important;
}
.tabbrowser-tab[pending]:hover .tab-icon-image {
filter: grayscale(0.1) !important;
}
Modified