Treestyletab: How do I set transparent colors to the whole sidebar like I did for history/bookmarks so that it would blend in with the theme?

[mzso]

Hi!

I've been tinkering with pasting stuff from the snippets page, but virtuall nothing has any visual effect. (Only the "Disable browser theme colors and images" section does)

Particularly I had this CSS for ages, and it still works:

#bookmarksPanel, #history-panel, #sidebar, #sidebar-header, #sidebar-box
{
  /*background-color: transparent !important;*/
  background-color:  rgba(255,255,255,0.2) !important;
}

.sidebar-placesTreechildren::-moz-tree-row(hover) {
   background-color: rgb(205,243,159) !important;
}

.sidebar-placesTreechildren::-moz-tree-row(selected) {
   background-color: rgb(255,235,134) !important;
}
.sidebar-placesTreechildren::-moz-tree-row(selected, focus) {
background-color: rgb(255,100,50) !important;
}

But since these are tabs, I also want unloaded tabs to have transparent text/icons to show this. For the normal tab-bar I also used to distinguish loaded, but unviewed tabs by changing the text color and the background color. (via Classic Theme Restorer)

[piroor]

Sadly it looks impossible to make background color transparent for extensions' sidebar panels, maybe due to separated processes. The bookmarks (and history) sidebar panel is rendered by the UI process of Firefox itself.

• Firefox's window (root level): rendered by the UI process
  
  
  
  • <browser>: a XUL version iframe
  
  
  • chrome://browser/content/places/bookmarksSidebar.xhtml: rendered by the UI process
  
  

On the other hand, a sidebar panel of an extension is rendered by a special process for extensions.

• Firefox's window (root level): rendered by the UI process
  
  
  
  • <browser>
  
  
  • chrome://browser/content/webext-panels.xhtml: rendered by the UI process
    
    
    
    
    
    • <browser remote="true">: here is the process boundary
    
    
    
    • `TST's sidebar panel: rendered by the extension process
    
    
    
  
  

Such a "remote" frame always have a gray background and it can't be transparent. This is a restriction of Firefox itself.

[mzso]

@piroor
That's unfortunate.
How do I recolor the tabs, including separately the special ones like the selected/unloaded/unread?

My attempts with the Extra style field were not really successfuly, I could only change the background color of the whole panel because it was in one of the snippets.

[irvinm]

https://github.com/piroor/treestyletab/wiki/Code-snippets-for-custom-style-rules#highlight-active-tab
https://github.com/piroor/treestyletab/wiki/Code-snippets-for-custom-style-rules#change-styling-of-pending-unloaded-tabs-1363
https://github.com/piroor/treestyletab/wiki/Code-snippets-for-custom-style-rules#show-title-of-unread-tabs-in-italic-1363

[mzso]

@irvinm commented on 2020. nov. 16. 19:10 CET:

https://github.com/piroor/treestyletab/wiki/Code-snippets-for-custom-style-rules#highlight-active-tab
https://github.com/piroor/treestyletab/wiki/Code-snippets-for-custom-style-rules#change-styling-of-pending-unloaded-tabs-1363
https://github.com/piroor/treestyletab/wiki/Code-snippets-for-custom-style-rules#show-title-of-unread-tabs-in-italic-1363

Thanks.

[piroor]

@mzso If you successfully customized, please close this issue. And open new issue when you encounter some impossibility about customization via CSS.