Favicon auf Tab statt Wiedergabe-Icon

  • Firefox-Version
    91.6.0 esr
    Betriebssystem
    win10 21h2

    Guten Tag alle :)

    Ich benötige eine kleine Hilfestellung.

    Auf einigen Tabs mit abspielbaren Medien erscheint ein Wiedergabe-Icon, das anstelle des Favicons gezeigt wird.

    Das hätte ich gerne ausgeblendet bzw. entfernt, und statt dessen immer das ganz normale Favicon angezeigt.

    Das Lautsprechersymbol soll erhalten bleiben, das ist OK.

    Ist das in den FF-Optionen abstellbar oder per CSS zu erledigen?

    Meine Versuche haben bisher nicht gefruchtet.

    Falls das schon mal hier angesprochen wurde - ich habe einfach nichts dazu gefunden...

    Besten Dank im Voraus! :)

    FF 115.x ESR auf Win10 Pro 64bit

    FF 115.x ESR auf Linux Mint

  • Hallo Thomas S.,

    teste mal das ↓ in der userChrome.css.

    CSS
    .tabbrowser-tab:not([pinned="true"])[soundplaying="true"] .tab-icon-overlay,
    .tabbrowser-tab:not([pinned="true"])[muted="true"] .tab-icon-overlay {
      opacity: 1.0 !important;
      margin-left: 18px  !important;
    }

    Es grüßt,

    Ralf

  • Bitte nicht einfach etwas antworten, erst lesen. :/

    Es geht nicht um das Lautsprechersymbol, daher soll das so nicht sein.

    Was ich eben herausgefunden habe: mit

    CSS
    .tabbrowser-tab:not([pinned="true"]) .tab-icon-overlay[activemedia-blocked] {
        display: none !important;
    }

    kann das Wiedergabesymbol angesprochen werden.

    FF 115.x ESR auf Win10 Pro 64bit

    FF 115.x ESR auf Linux Mint

    Einmal editiert, zuletzt von Thomas S. (18. Februar 2022 um 21:35)

  • das funktioniert leider nicht.

    Füge bitte das ↓ noch zusätzlich ein.

    CSS
    :root[uidensity="compact"] .tab-icon-stack:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) > :not(.tab-icon-overlay), #tabbrowser-tabs[secondarytext-unsupported] .tab-icon-stack:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) > :not(.tab-icon-overlay),
    :root:not([uidensity="compact"]) #tabbrowser-tabs:not([secondarytext-unsupported]) .tabbrowser-tab:not(:hover) .tab-icon-overlay:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]),
    :root:not([uidensity="compact"]) #tabbrowser-tabs:not([secondarytext-unsupported]) .tabbrowser-tab:hover .tab-icon-stack:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) > :not(.tab-icon-overlay) {
      opacity: 1.0 !important;
    }

    Es grüßt,

    Ralf

  • Hm, etwas seltsam.

    So sieht es jetzt mit Deinem Code aus:

    Der Code spricht auch wieder das Lautsprechersymbol an. Aber man sieht immerhin schon das Favicon.

    Bei meinem Codeschnipsel aus #5 sieht es so aus:

    Platz für das Favicon, aber dies ist leider nicht zu sehen. Das Lautsprechersymbol ist unverändert.

  • Klarstellung: nicht das Lautsprechersymbol verändern, es geht mir nur um das Symbol auf dem zweiten Tab.

    Mit Deinem Code werden beide, das Wiedergabesymbol (Tab 2) und das Lautsprechersymbol (Tab 3), transparent.

    Es soll aber nur das Wiedergabesymbol auf Tab 2 dauerhaft weg.

    Mit diesem Zusatz ist das Symbol auf Tab 2 weg:

    CSS
    /* Wiedergabeymbol entfernt */
    .tab-icon-overlay[activemedia-blocked] {
        list-style-image: unset !important;
    }

    Sieht so aus:

    Die Favicons auf Tab 2 und 3 scheinen aber irgendwie nach oben verschoben zu sein...

    Aber wie gesagt, das Lautsprechsymbol soll eigentlich unverändert bleiben, nicht transparent werden.

    Wenn das nicht gehen sollte, dann als zweite Möglichkeit eben mit Verschieben neben das Favicon...


    (BOAH - wir fliegen hier gleich weg... :huh: )


    Noch ein Zusatz:

    Bisher ist das nur eine rein optische "Korrektur", denn die Funktion ist leider noch gegeben.

    Bei Hover wird die Fläche wie ein Button eingefärbt und kann angeclickt werden, das Video startet...

    FF 115.x ESR auf Win10 Pro 64bit

    FF 115.x ESR auf Linux Mint

    Einmal editiert, zuletzt von Thomas S. (18. Februar 2022 um 22:07) aus folgendem Grund: Ein Beitrag von Thomas S. mit diesem Beitrag zusammengefügt.

  • Hm,

    damit * sieht es hier so ** aus.

    *

    **

    Es grüßt,

    Ralf

  • Wir reden etwas aneinander vorbei, scheint mir...

    Das hier reicht grundsätzlich schon:

    CSS
    /* Wiedergabeymbol entfernt */
    .tab-icon-overlay[activemedia-blocked] {
        display: none !important;
    }

    Sieht so aus, und so soll das als Ergebnis auch sein.

    Tab 2 wie gewollt, und Tab 3 auch wie gewollt (mit aktivem Sound):

    Hat nur eine Macke: beim Browserstart ist das ungewollte Symbol auf Tab 2 zuerst noch da.

    Es verschwindet erst, zwar nicht mehr da, aber auch das Favicon fehlt.

    Es erscheint erst, wenn ich den Tab einmal anclicke.

    FF 115.x ESR auf Win10 Pro 64bit

    FF 115.x ESR auf Linux Mint

  • Guten Morgen Ralf :)

    Link zum Tab 2 mit diesem Symbol Wiedergabe-Icon

    In den generellen Einstellungen zu "Datenschutz & Sicheheit" habe ich unter "Berechtigungen" zu "Automatische Wiedergabe" "Audio und Video blockieren" eingestellt und keine Ausnahme definiert.

    Es sieht immer so aus wie im Beitrag #1 auf Tab 2, obwohl auch in Youtube kein automatisches Abspielen aktiv ist.

    Ist das ein Bug? Hinweis: ich verwende den FF 91.x ESR!

    Sobald irgendein wiedergebbarer Inhalt erkannt wird, erscheint dieses Symbol, auch z.B. bei ARD und ZDF.

    Und dies auch, wenn gar kein Autoplay auf diesen Seiten aktiv ist.

    Die Frage ist also aktuell: wie bekommt man speziell nur dieses Icon transparent, ohne gleichzeitig das Lautsprecher-Icon zu verändern...

    Mit dem kurzen Code aus #11 kann ich dieses Icon ja gezielt ansprechen und entfernen.

    Auch ist die Funktion der Wiedergabe weg, wenn ich da hinein clicke.

    Nur beim erstmaligen Laden der Seite beim Browserstart sieht es dann so aus (Tab 2 ohne Favicon):

    Das normale Favicon erscheint erst, wenn das Tab durch anclicken "aktualisiert" wird.

    FF 115.x ESR auf Win10 Pro 64bit

    FF 115.x ESR auf Linux Mint

  • Jupp genau, guten Morgen Thomas,

    immer noch hm, bei mir gibt es das Icon nicht, aber ändere das * CSS mal dahingehend **, bzw. dahingehend ***.

    *

    CSS
    /* Wiedergabeymbol entfernt */
    .tab-icon-overlay[activemedia-blocked] {
        display: none !important;
    }

    **

    CSS
    /* Wiedergabeymbol entfernt */
    .tab-icon-overlay:is([activemedia-blocked], [pending]) {
        display: none !important;
    }

    ***

    CSS
    /* Wiedergabeymbol entfernt */
    .tab-icon-overlay[activemedia-blocked],
    .tabbrowser-tab[pending="true"] .tab-icon-overlay {
        display: none !important;
    }

    Ich befürchte allerdings, das das in die Hose geht, denn das ist zu generell und blendet das Icon/Symbol auf allen Tabs aus.

    Es grüßt,

    Ralf

  • Beide, ** und ***, zeigen ein identisches Verhalten zu *, keine Änderungen erkennbar.

    Ich denke mittlerweile, dass das nur mit einem Script sauber geht.

    Die Icons werden scheinbar dynamisch zur Laufzeit verändert.

    Das Lautsprecher-Icon ändern sich ja, wenn sich der Medienzustand ändert (es erscheint nur, wenn Audio abgespielt wird).

    Und das Wiedergabe-Icon kommt manchmal recht spät, scheinbar analysiert FF die Site im Hintergrund auf wiedergebbare Medien.

    Ist also mehr als reine Kosmetik.

    FF 115.x ESR auf Win10 Pro 64bit

    FF 115.x ESR auf Linux Mint

  • Und das Wiedergabe-Icon kommt manchmal recht spät

    Wie gesagt, bei mir erscheint das Symbol überhaupt nicht, auch mit den von Dir vorgenommenen Einstellungen bei "Berechtigungen" unter "Datenschutz & Sicheheit", ich denke, das da bei mir noch ne Erweiterung quer schießt und ich mal zum Testen ein neues Profil anlegen muss.

    Es grüßt,

    Ralf

  • Ich bin mir nicht sicher :/

    Ohne Code der ganz rechte Tab:

    Mit Code:

    CSS
    .tab-icon-overlay[activemedia-blocked] {
      display: none !important;
    }
    
    :root[uidensity="compact"] .tab-icon-stack:not([pinned],
    [activemedia-blocked]) > :not(.tab-icon-overlay),
    #tabbrowser-tabs[secondarytext-unsupported] .tab-icon-stack:not([pinned], [sharing],
    [crashed]):is([soundplaying], [muted], [activemedia-blocked]) > :not(.tab-icon-overlay){
      opacity: 1.0 !important;
    }

    bei mir erscheint das Symbol überhaupt nicht

    Du musst dazu diesen Wert:

    browser.tabs.secondaryTextUnsupportedLocales

    um

    ,de

    erweitern.

    Dann einen Neustart machen.

    Dann z.B. bei Youtube einen Link per Rechtsklick anklicken..im Neuen Tab öffnen.

    Der Tab muss sich dann aber im Hintergrund öffnen.

    Mit freundlichem Gruß
    Andreas
    Mein Laptop  Meine Add-ons

    Einmal editiert, zuletzt von 2002Andreas (19. Februar 2022 um 12:00) aus folgendem Grund: Ein Beitrag von 2002Andreas mit diesem Beitrag zusammengefügt.

  • Hallo Andreas, willkommen! :)

    Ich bin auch gerade dabei, das Favicon per "opacity: 1" sofort anzeigen zu lassen.

    Aber bei mir wie auch bei Deinem Code wird bisher leider auch noch der Tab mit Lautsprecher verändert, das Favicon liegt sichtbar hinter dem Lautsprecher.

    Frage ist also: wie kann zusätzlich nur das Favicon des "activemedia-blocked" Tabs angesprochen werden...

    Dieser Zusatz z.B. zeigt alle Favicons an, auch beim Lautsprechersymbol:

    CSS
    .tab-icon-image {
        opacity: 1 !important;
    }

    Wie kann man den auf Tabs mit .tab-icon-overlay[activemedia-blocked] beschränken?

    FF 115.x ESR auf Win10 Pro 64bit

    FF 115.x ESR auf Linux Mint

  • Wie kann man

    Teste bitte wieder:

    CSS
    .tab-icon-overlay[activemedia-blocked] {
         display: none !important;  
    }
    
    :root[uidensity="compact"] .tab-icon-stack:not([pinned],
    [activemedia-blocked]),
    #tabbrowser-tabs[secondarytext-unsupported] .tab-icon-stack:not([pinned],
    [crashed]):is([activemedia-blocked]) > :not(.tab-icon-overlay) {
         opacity: 1.0 !important;
    }
  • Code verkürzt:

    CSS
    .tab-icon-overlay[activemedia-blocked] {
         display: none !important;  
    }
    
    .tab-icon-stack:not([pinned][activemedia-blocked]),
    .tab-icon-stack:not([pinned][crashed]):is([activemedia-blocked]) > :not(.tab-icon-overlay) {
         opacity: 1 !important;
    }

    Sollte auch reichen:

    CSS
    .tab-icon-overlay[activemedia-blocked] {
         display: none !important;  
    }
    
    :is([activemedia-blocked]) > :not(.tab-icon-overlay) {
         opacity: 1 !important;
    }