Topic: firefox 136: non riconosce il codice userchrome dell'icona audio nella scheda

[Schwanz]

appena aggiornato la 136, non riconosce più questo codice per ottenere il colore dell'audio sia attivo che muto, non so se  hanno modificato qualcosa in about:config, come posso correggerlo? ho anche aggiornato waterfox e lì lo riconosce. graficamente senza colori è orribile. grazie

Codice: [Seleziona]

/* MOSTRA ALTOPARLANTE NELLE SCHEDE */
.tabbrowser-tab:not([pinned]) .tab-icon-stack:is([muted],[soundplaying],[activemedia-blocked]){
  grid-template-areas: "a s";
}
.tabbrowser-tab:not([pinned]) .tab-icon-overlay:is([muted],[soundplaying],[activemedia-blocked]){ grid-area: s; }
.tab-icon-overlay,.tab-icon-image{ opacity: 1 !important; }

.tab-icon-overlay:not([pinned]){
  padding: 0px !important;
  margin-inline: -3px 1px !important;
}
#TabsToolbar #tabbrowser-tabs .tabbrowser-tab:not([pinned]) .tab-icon-overlay:not([pinned]) {
  margin-inline-start: -2px !important;
  margin-inline-end: 2px !important;
}
.tab-icon-overlay[soundplaying] {
  fill: #000 !important;
  background-color: #fcfcfc !important;
  border: 2px solid #000;
  font-weight: bolder !important;
}

.tab-icon-overlay[muted] {
  fill: #00aecf !important;
  background-color: #fcfcfc !important;
  border: 2px solid #000;
  opacity: 100% !important;
  font-weight: bolder !important;
}

.tab-icon-overlay[activemedia-blocked] {
  fill: #000 !important;
  background-color: #fcfcfc !important;
  border: 1px solid #000;
  font-weight: bolder !important;
}
/* dimensione icona audio */
.tab-icon-overlay {
  width: 18px !important;
  height: 18px !important;
  background-size: 10.9pt !important;
  }
/* posizione icona del sito */
.tab-icon-stack:not([pinned], [sharing], [crashed]):is([soundplaying], [muted]) > :not(.tab-icon-overlay) {
  margin-top: 2px !important;
  margin-bottom: 2px !important; }
come vedete nell'immagine, nella colonna a sinistra l'audio attivo non viene cerchiato con sfondo bianco (anche da muto), e nella colonna a destra quando è muto non è colorato celeste, per me è importante colorarlo facilitandomi a individuare la scheda di audio muto quando ci sono tante schede aperte


nemmeno attivando questi due parametri di userchrome.css funziona (custom_css_for_fx_v4.7.0)
https://github.com/Aris-t2/CustomCSSforFx/releases/tag/4.7.0

Codice: [Seleziona]

/* @import "./css/tabs/tab_audio_icon.css"; /**/
/* @import "./css/tabs/tab_audio_icon_colorized.css"; /**/

[Schwanz]

è possibile che sia colpa dell'introduzione della scheda verticale? io non lo uso e non mi interessa averlo e fortunatamente è disabilitato.
https://9to5linux.com/mozilla-firefox-136-is-out-with-vertical-tabs-and-official-arm64-linux-binaries

pure aggiungendo questi due parametri in about:config non funziona
https://www.change.org/p/implement-a-legacy-icon-toggle-in-browser-preferences

browser.legacy.tab.icon.Audio
legacy.tab.audio.playing.icon

[Iceberg]

è possibile che sia colpa dell'introduzione della scheda verticale?

Sì, probabilissimo.
Il suggerimento è di aspettare la nuova versione di Custom CSS tweaks for Firefox e da lì partire per aggiornare il codice.

[Schwanz]

ho trovato questa pagina che sembra che hanno creato un icona audio al posto di quello presente nella 136, sto provando a metterci qualcosa del mio codice, ma non ci capisco molto

https://www.reddit.com/r/FirefoxCSS/comments/1j3idx8/how_to_revert_to_the_previous_audio_icon_again/?rdt=52610

però l'icona con sfondo bianco è quadrato e non rotondo

[Schwanz]

è questo il codice corretto, però è di wavefox, su notepad mi appare tutto scritto in verde
https://github.com/QNetITQ/WaveFox/blob/WaveFox-Nightly/chrome/modules/horizontal_tabs/wavefox_tab_media_icons_and_text.css

Codice: [Seleziona]

/* -------------------- Media Icons -------------------- */

/* Pinned Tabs */

.tabbrowser-tab[pinned]:not([crashed])
{
    .tab-icon-overlay
    {
        background-color: transparent !important;
        background-image: none !important;
        fill: currentColor !important;
        border-radius: 50px !important;
        top: -8px !important;
        inset-inline-end: -8px !important;
       
        &:hover
        {
            background-color: color-mix(in srgb, currentColor 15%, transparent) !important;
        }
       
        &:hover:active
        {
            background-color: color-mix(in srgb, currentColor 30%, transparent) !important;
        }
    }
       
    &:where([soundplaying], [muted], [activemedia-blocked]) .tab-icon-stack > :not(.tab-icon-overlay)
    {
        mask-image: linear-gradient(to bottom, black, black), radial-gradient(circle at right top, black 8px, transparent 9px) !important;
        mask-size: 16px 16px !important;
        mask-position: center center !important;
        mask-repeat: no-repeat !important;
        mask-composite: exclude !important;
        mask-mode: alpha !important;
           
        :root:-moz-locale-dir(rtl) &
        {
            mask-image: linear-gradient(to bottom, black, black), radial-gradient(circle at left top, black 8px, transparent 9px) !important;
        }
    }
}

/* Regular Tabs */

.tabbrowser-tab:not([pinned], [crashed])
{
    .tab-icon-overlay
    {
        background-color: currentColor !important;
        border-radius: 50px !important;
        top: 0px !important;
        inset-inline-end: 0px !important;
        mask-image: var(--mask-overlay-background, none), var(--mask-overlay-image, none) !important;
        mask-size: 16px 16px, 12px 12px !important;
        mask-position: center center !important;
        mask-repeat: no-repeat !important;
        mask-mode: alpha !important;
       
        &:hover
        {
            --mask-overlay-background: linear-gradient(to bottom, rgba(0,0,0,0.15), rgba(0,0,0,0.15));
        }

        &:hover:active
        {
            --mask-overlay-background: linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0.3));
        }
    }
   
    &[soundplaying] .tab-icon-overlay
    {
        --mask-overlay-image: url("chrome://browser/skin/tabbrowser/tab-audio-playing-small.svg");
    }

    &[muted] .tab-icon-overlay
    {
        --mask-overlay-image: url("chrome://browser/skin/tabbrowser/tab-audio-muted-small.svg");
    }

    &[activemedia-blocked] .tab-icon-overlay
    {
        --mask-overlay-image: url("chrome://browser/skin/tabbrowser/tab-audio-blocked-small.svg");
    }
   
    &:where([busy], [image], [sharing], [pictureinpicture]) .tab-icon-overlay
    {
        top: -8px !important;
        inset-inline-end: -8px !important;
    }
   
    &:where([soundplaying], [muted], [activemedia-blocked])
    {
        .tab-icon-stack > :not(.tab-icon-overlay)
        {
            mask-image: linear-gradient(to bottom, black, black), radial-gradient(circle at right top, black 8px, transparent 9px) !important;
            mask-size: 16px 16px !important;
            mask-position: center center !important;
            mask-repeat: no-repeat !important;
            mask-composite: exclude !important;
            mask-mode: alpha !important;

            :root:-moz-locale-dir(rtl) &
            {
                mask-image: linear-gradient(to bottom, black, black), radial-gradient(circle at left top, black 8px, transparent 9px) !important;
            }
        }

        .tab-icon-overlay
        {
            display: revert !important;
        }
    }
}

.tabbrowser-tab:not([pinned])
{
    &[fadein]
    {
        min-width: var(--tab-min-width) !important;
    }

    .tab-icon-stack > *
    {
        margin-inline-end: 8px !important;
    }
   
    .tab-audio-button
    {
        display: none !important;
    }
}

/* ---------- Picture-In-Picture ---------- */

.tabbrowser-tab[pictureinpicture]:not([crashed], [busy])
{
    .tab-icon-stack::before
    {
        content: "";
        display: block;
        position: absolute;
        width: 16px;
        height: 16px;
        background-color: currentColor;
        mask-size: 16px 16px;
        mask-position: center center;
        mask-repeat: no-repeat;
        mask-mode: alpha;
       
        :root:-moz-locale-dir(rtl) &
        {
            transform: rotateY(180deg);
        }
    }
   
    .tab-icon-stack > :not(.tab-icon-overlay)
    {
        position: relative !important;
        padding: 2px !important;
        inset-inline-start: 8px !important;
        top: 8px !important;
        mask-image: none !important;
        box-sizing: border-box !important;
        z-index: 1 !important;
    }
   
    &:not([soundplaying], [muted], [activemedia-blocked]) .tab-icon-stack::before
    {
        mask-image: linear-gradient(to bottom, black, black), linear-gradient(to bottom, black, black), url("chrome://global/skin/media/picture-in-picture-open.svg");
        mask-size: 8px 8px, 8px 8px, 16px 16px;
        mask-position: right bottom, right bottom, center center;
        mask-repeat: no-repeat;
        mask-composite: exclude, add;
    }
   
    &:is([soundplaying], [muted], [activemedia-blocked]) .tab-icon-stack::before
    {
        mask-image: linear-gradient(to bottom, black, black), linear-gradient(to bottom, black, black), url("chrome://global/skin/media/picture-in-picture-open.svg");
        mask-size: 8px 16px, 8px 16px, 16px 16px;
        mask-position: right bottom, right bottom, center center;
        mask-repeat: no-repeat;
        mask-composite: exclude, add;
    }
}

/* -------------------- Tab Text -------------------- */

.tab-label-container
{
    height: auto !important;
    font-size: clamp(0px, 1em, 16px) !important;
    mask-image: none !important;
}

.tab-label
{
    width: 100% !important;
    height: auto !important;
    line-height: normal !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    margin-block: 0px !important;
}

.tab-secondary-label
{
    display: none !important;
}

[Schwanz]

finora ho fatto questo, ancora non riesco a colorare l'audio muto, però preferisco lo stile audio quello che avevo prima dove in cui quando è muto è sbarrato e non con la crocetta, manca poi da visualizzare lo spessore del bordo del cerchio

Codice: [Seleziona]

/* Regular Tabs */

.tabbrowser-tab:not([pinned], [crashed])
{
    .tab-audio-button
    {
        position: relative !important;
        margin-inline-end: 4px !important;
        --icon-size-default: 15px !important;
        --button-background-color-ghost: white !important;
        --button-background-color-ghost-hover: white !important;
        --button-background-color-ghost-active: white !important;
        --button-border-radius: 10px !important;
        --button-text-color-ghost: currentColor !important;
        --button-text-color-ghost-hover: currentColor !important;
        --button-text-color-ghost-active: currentColor !important;
        --button-icon-fill: black !important;
        --button-text-color: black !important;
        --button-border: 2px solid #000 !important;
        --button-icon-stroke: 2px solid #000 !important;
--button-icon-background-size: 12pt !important;
}


 
.tab-icon-overlay[activemedia-blocked] {
  fill: #000 !important;
  background-color: #fcfcfc !important;
  border: 1px solid #000;
  font-weight: bolder !important;
}
/* dimensione icona audio */
.tab-icon-overlay {
  width: 16px !important;
  height: 16px !important;
  background-size: 10.9pt !important;
  }
/* posizione icona del sito */
.tab-icon-stack:not([pinned], [sharing], [crashed]):is([soundplaying], [muted]) > :not(.tab-icon-overlay) {
  margin-top: 2px !important;
  margin-bottom: 2px !important; } 

[Schwanz]

qui ci sono altre discussioni
https://www.reddit.com/r/FirefoxCSS/
https://www.reddit.com/r/FirefoxCSS/comments/1j4s5f6/play_tab_icon_has_returned/
https://www.reddit.com/r/FirefoxCSS/comments/1j4oc5z/looking_for_alternative_to_tabiconstack/
https://www.reddit.com/r/FirefoxCSS/comments/1j3idx8/how_to_revert_to_the_previous_audio_icon_again/

[Schwanz]

in un forum tedesco ho trovato il codice giusto per me, manca però quella di ingrandire l'immagine dell'icona, il problema è che il transform: scale(0.85, 0.85);, riducendo o aumentando la scala, lo fa insieme e cioè il raggio e l'icona, e quindi non mi permette di ingrandire solo l'icona una volta trovata la dimensione del raggio,  e ridurre lo spazio tra l'icona del sito e dell'audio, e tra audio e il titolo del sito, mentre sul muto non mi colora in celeste se aggiungo questi, oppure color: light-blue !important;

background-color: #fcfcfc !important;
fill: #00aecf !important;

https://www.camp-firefox.de/forum/thema/138504-tab-mit-audioinhalt-ist-diese-darstellung-normal-oder-ein-nicht-mehr-richtig-fun/?pageNo=4

Codice: [Seleziona]

/*Lautsprechersymbol größer und grün bei Sound*/
.tab-audio-button[soundplaying] {
  color: green !important;
  background-color: white !important;
  border: 2px solid black !important;
  border-radius: 30px !important;
  background-size: 10px !important;
  transform: scale(0.85, 0.85);
  }

/*Lautsprechersymbol größer und rot bei Stumm*/
.tab-audio-button[muted] {
  color: light-blue !important;
  background-color: white !important;
  border: 2px solid black !important;
  border-radius: 30px !important;
  background-size: 10px !important;
  transform: scale(0.85, 0.85);
 }

[Schwanz]

dopo tantissime prove e ricerche di vari codici, ho risolto l'icona dell'audio con questo risultato!

Codice: [Seleziona]

/* MOSTRA ALTOPARLANTE NELLE SCHEDE */
/* Icona audio attivo */
 .tab-audio-button[soundplaying] {
  --icon-size-default: 14.6pt !important;
  --button-icon-fill: #000 !important;
  --button-background-color-ghost-hover: none !important;
  background-color: white !important;
  border: 2px solid black !important;
  border-width: 2pt !important;
  border-radius: 50% !important;
  margin-inline: -8px -4px !important;
  margin-top: -5px !important;
  margin-bottom: -5px !important;
  padding-left: 1px !important;
  padding-right: 1px !important;
  transform: scale(0.92, 0.92);
  scale: .7 !important;  }
}

/* Icona audio muto */
.tab-audio-button[muted] {
  --icon-size-default: 14.6pt !important;
  --button-icon-fill: #00aecf !important;
  --button-background-color-ghost-hover: none !important;
  background-color: #fcfcfc !important;
  border: 2px solid black !important;
  border-width: 2pt !important;
  border-radius: 50% !important;
  margin-inline: -8px -4px !important;
  margin-top: -5px !important;
  margin-bottom: -5px !important;
  padding-left: 1px !important;
  padding-right: 1px !important;
  transform: scale(0.92, 0.92);
  scale: .7 !important;  }


mi piacerebbe trovare anche il modo di far sparire l'icona di audio muto quando apro un altro sito nella stessa scheda, cioè la stessa cosa che fa quando l'audio è attivo, ne ho trovati due che però non va e non so quale sia la giusta correzione da fare? dico questo perchè non ha senso rendere visibile l'icona se apro un sito che non contiene video.

Codice: [Seleziona]

/* Hide the play tab button */
.tabbrowser-tab[pending]:not([soundplaying]):not([muted]):not([activemedia-blocked]) .tab-icon-overlay {
display: none !important;   /* Removes play indicator for loading tabs */
}

.tab-audio-button:not([pinned], [muted]) > :not(.tab-icon-overlay[muted]) {
visibility: none !important; }

[Schwanz]

una cosa simile come questo che però nasconde l'icona del sito quando lo muto

Codice: [Seleziona]

#tabbrowser-tabs:is([orient="vertical"][expanded], [orient="horizontal"]) .tabbrowser-tab:not([pinned]):not([crashed]) {
  /* Nascondi l'icona preferita durante la riproduzione (come in FF 135) eccetto per i media bloccati nelle schede non lette[activemedia-blocked] */
  &:is([soundplaying], [muted]/* , [activemedia-blocked] */) .tab-content .tab-audio-image {
    display: none;
  }

[Schwanz]

c'è un problema che non avevo notato, quando attivo/disattivo l'audio, il titolo della seconda scheda non è allineato, e si era aumentata l'altezza della barra delle schede perchè avevo messo questi valori

Codice: [Seleziona]

margin-top: 2px !important;
margin-bottom: 4px !important;
poi sono riuscito a correggere l'altezza così, però il titolo rimane leggermente più in alto, come posso regolarlo?

Codice: [Seleziona]

margin-top: -5px !important;
margin-bottom: -4px !important;

questa è la dimensione della barra delle schede che avevo impostato

Codice: [Seleziona]

/* DIMENSIONE ALTEZZA DELLE SCHEDE */
.tabbrowser-tab[selected] {
  max-height: 28px !important;
  min-height: 28px !important;
  font-size: 9.6pt !important; 
} 
.tab:not([selected="true"]) {
  max-height: 28px !important;
  min-height: 28px !important;
  font-size: 9.6pt !important; }

[Schwanz]

stranamente è solo la nuova scheda che si posiziona più in alto, perchè da questa scheda corrente, quando aggiungo un'altra scheda aprendo una pagina, ho visto che si riposiziona correttamente, quindi ho capito forse che non è un vero bug.


come vedete, l'ultima scheda è più in su dell'altra nuova scheda