Add styling of unloaded (inactive) tabs

[ReporterX]

Is your feature request related to a problem?
Yes, currently we can't recognize which tabs are unloaded (inactive) when using your CSS styling.

The solution I'd like
Add styling on the following:
Unloaded tabs
When hovering on unloaded tabs

[black7375]

Is there a proper way to display it?
And is there a way to create an unloaded tab?

[ReporterX]

It happens when you restore a session. Let's say you restore a session with 10 tabs in a window. Firefox won't load all tabs at once. Only the selected tab will be loaded (active). The rest are unloaded (inactive).

There are some addons which manage tab (un)loading. A tab will be unloaded if it is not selected and idle for some time, so as to release some memory.

Here are the CSS for loaded and unloaded tabs:

@media (-moz-proton)  {

    /* Loaded tabs */
    #tabbrowser-tabs .tabbrowser-tab:not([pending]) {

    }
    /* When hovering on loaded tabs */	
    #tabbrowser-tabs .tabbrowser-tab:not([pending]):hover {

    }
	
    /* Unloaded tabs */
    #tabbrowser-tabs .tabbrowser-tab[pending] {

    }
    /* When hovering on unloaded tabs */
    #tabbrowser-tabs .tabbrowser-tab[pending]:hover {

    }
  }	

[black7375]

Which one is better?

Solution 1 - Circle content

#tabbrowser-tabs .tabbrowser-tab[pending] .tab-text.tab-label::before {
  content: '•';
}

Solution 2 - Itelic label

#tabbrowser-tabs .tabbrowser-tab[pending] .tab-text.tab-label {
  font-style: italic;
}

Solution 3 - zzz with Itelic label

#tabbrowser-tabs .tabbrowser-tab[pending] .tab-text.tab-label::before {
  content: '💤 ';
}
#tabbrowser-tabs .tabbrowser-tab[pending] .tab-text.tab-label {
  font-style: italic;
}

[Nomes77]

Solution 2 is better

[black7375]

Solution 2 applied to the dev branch.

[Nomes77]

I propose a forth solution:

  #tabbrowser-tabs .tabbrowser-tab[pending] .tab-content {
    opacity: 0.7;
  }

[black7375]

LGTM
It looks consistent

[ReporterX]

I propose a comprehensive solution for both light and dark themes. I use "grey-out" effect to represent unloaded (inactive) tabs.

@media (-moz-proton)  {

    /* =====================================================
       Light theme
       ===================================================== */

    /* Loaded tabs */
    :root[lwtheme-mozlightdark]:not([lwthemetextcolor="bright"]) #tabbrowser-tabs .tabbrowser-tab:not([pending]) {
      opacity: 0.9 !important;
      color: black !important;
      background-color: rgb(230, 230, 230) !important;
    }
    /* When hovering on loaded tabs */
    /* :root[lwtheme-mozlightdark]:not([lwthemetextcolor="bright"]) #tabbrowser-tabs .tabbrowser-tab:not([pending]):hover {
    } */
  
    /* Pending (unloaded) tabs */
    :root[lwtheme-mozlightdark]:not([lwthemetextcolor="bright"]) #tabbrowser-tabs .tabbrowser-tab[pending] {
      opacity: 0.6 !important;
      color: rgb(60, 60, 60) !important;
      background-color: rgb(180, 180, 180) !important;
    }
    /* When hovering on pending (unloaded) tabs */
    :root[lwtheme-mozlightdark]:not([lwthemetextcolor="bright"]) #tabbrowser-tabs .tabbrowser-tab[pending]:hover {
      opacity: 0.9 !important;
      color: black !important;
      background-color: rgb(210, 210, 210) !important;
    }

    /* =====================================================
       Dark theme
       ===================================================== */

    /* Loaded tabs */
    /* :root[lwtheme-mozlightdark][lwthemetextcolor="bright"] #tabbrowser-tabs .tabbrowser-tab:not([pending]) {
    } */
    /* When hovering on loaded tabs */
    :root[lwtheme-mozlightdark][lwthemetextcolor="bright"] #tabbrowser-tabs .tabbrowser-tab:not([pending]):hover {
      background-color: rgb(90, 90, 90) !important;  
    }
    :root[lwtheme-mozlightdark][lwthemetextcolor="bright"] #tabbrowser-tabs .tabbrowser-tab:not([pending]):hover .tab-background {
      background: rgb(90, 90, 90) !important;        
    }
      
    /* Pending (unloaded) tabs */
    :root[lwtheme-mozlightdark][lwthemetextcolor="bright"] #tabbrowser-tabs .tabbrowser-tab[pending] {
      opacity: 0.6 !important;
      color: rgb(210, 210, 210) !important;
    }
    /* When hovering on pending (unloaded) tabs */
    :root[lwtheme-mozlightdark][lwthemetextcolor="bright"] #tabbrowser-tabs .tabbrowser-tab[pending]:hover {
      opacity: 0.75 !important;
      color: rgb(230, 230, 230) !important;
      background-color: rgb(90, 90, 90) !important; 
    }

}