Treestyletab: Document means for reverting to pre-Photon "no favicon" tab icon

[ssokolow]

My Firefox recently started displaying the Photon-style "no favicon for this tab" icons in TST's sidebar. I find the color and weight of the strokes to so strong that they draw the eye away from tabs with actual favicons... not to mention I just think it's an uglier icon.

Please document a means, either through custom CSS or through TST's options page, to revert to the Australis-era globe icon that's still shown in the screenshots in your picker for built-in themes.

Failing that, please consider desaturating the placeholder icon to shade used for disabled toolbar buttons.

Environment

• Platform (OS): Kubuntu Linux 14.04 LTS
• Version of Firefox: Developer Edition 59.0b13 (64-bit)
• Version (or revision) of Tree Style Tab: 2.4.17

[carmanaught]

Edit: Don't use this CSS now, use the solution by @Lej77.

I was able to find a way to replace the "no favicon for this tab" to the older moon.svg that is still in the extensions sidebar resources, though I don't know whether the CSS is actually good, I just messed around looking at some of the CSS changes, so if there's a cleaner way to represent this or the mask/background stuff is the wrong way to go about it then I'd be happy to find a cleaner/neater way.

The only thing I can't seem to figure out how to change yet is the New Tab icon which I think may assign the favicon from JS, possibly webextensions/common/tree/base.js?

.favicon-default::before {
  background: url("/sidebar/styles/icons/moon.svg") no-repeat center / 100%;
}
:root.simulate-svg-context-fill .tab .favicon-default::before {
  mask: url("/sidebar/styles/icons/moon.svg") no-repeat center / 100%;
  background: url("/sidebar/styles/icons/moon.svg") no-repeat center / 100%;
}

[Lej77]

I was able to fix this by adding the following CSS in the advanced advanced section in TST settings page:

/* TST 2.4.17 - HotFix for #1822 - Fix for Photon themed new tab favicon */
#tabbar .tab:not(.loading) .favicon .favicon-image[src^="moz-extension://"][src$="/resources/icons/globe-16.svg"] {
  display: none;
}
#tabbar .tab:not(.loading) .favicon .favicon-image[src^="moz-extension://"][src$="/resources/icons/globe-16.svg"] ~ .favicon-default::before {
  display: inline-block !important;

  background: url("chrome://branding/content/icon32.png") no-repeat center / 100% !important;
  mask: none !important;
}





/* TST 2.4.17 - HotFix for #1822 - Fix for Photon themed default favicon */
.tab:not(.group-tab):not([data-current-uri^="chrome:"]):not([data-current-uri^="about:addons"]):not([data-current-uri^="about:preferences"]) 
.favicon .favicon-default::before {
  background: url("/sidebar/styles/icons/moon.svg") no-repeat center / 100% !important;
  mask: none !important;
}

[carmanaught]

With the edited updates, the CSS @Lej77 has added looks like it indeed fixes this including the New Tab favicon, so I'd recommend using that instead of the CSS I provided.

[ssokolow]

I'm concerned about how long referencing a Firefox-provided URL will continue to work as Firefox continues to migrate to the new icon theme but, for now at least, I can confirm that it appears to reliably produce the desired effect.

[piroor]

I won't make it an option, because the current "globe" icon is the default icon on Firefox 60 and later. To reduce costs of maintenance, TST respects appearance of the latest Firefox, this is a design policy.

However, it is also true that Firefox doesn't show "globe" favicon for regular tabs if the webpage has no favicon. So this is a sample CSS to hide the globe icon for such cases:

.tab:not(.faviconized) .favicon-image.error ~ .favicon-default::before 
  display: none;
}

[ssokolow]

That snippet appears to have no effect while Lej77's snippet does successfully replace the icons.

(Sorry for the delayed response. I'm clawing my way out of a TODO backlog.)

[piroor]

I close this because outdated.