Tab mit Audioinhalt: Ist diese Darstellung normal oder ein nicht mehr richtig funktionierendes Script?

Hallo allen..

Welche CSS funkt jetzt gut für den Tab mit Video-Wiedergabe und gibt es die Möglichkeit, nur das Icon Play/Mute anzuzeigen und nicht auch das Icon der Webseite?

Hab von Seite 1 an geschaut, bin aber etwas verwirrt.

Besten Dank.

Zitat von omar1979

nur das Icon Play/Mute anzuzeigen und nicht auch das Icon der Webseite?

Damit funkioniert das:

Beitrag

RE: Tab mit Audioinhalt: Ist diese Darstellung normal oder ein nicht mehr richtig funktionierendes Script?

Ich bin hier auf eine interessante Lsg. gestoßen;

(Quelltext, 13 Zeilen)

Nach etwas Justierung ersetzt der .tab-audio-button das .tab-icon-image ganz ohne 'geflacker', Die Farbe muß - wie gehabt - angepasst werden.

Mitleser

6. März 2025 um 12:43

Zitat von Mitleser

So müsstest du deinem Ziel..

Danke, ist ja reichlich fummelig alles, darum bin ich auch froh, dass nicht nutzen zu müssen.

Wenn ich mal mehr als 4 Tabs offen habe, dann macht mich das schon nervös

Zitat von 2002Andreas

Damit funkioniert das:

Danke, hab das jetzt etwas versucht zu ändern, aber nur das mit Video-Wiedergabe-Icon funkt.

Kann keine Farben ändern oder wenn es Stummgeschaltet ist, dass es ein anderes Icon azeigt.

Gibts auch für das schon was?

Zitat von omar1979

wenn es Stummgeschaltet ist, dass es ein anderes Icon azeigt.

Teste bitte:

.tab-audio-button {
  scale: 1.5 !important;
 }
  
.tab-audio-button[soundplaying]::part(button) {
    fill: green !important;
 }

.tab-audio-button[muted]::part(button) {
    fill: red !important;
 }
 
.tab-audio-button[muted]::part(button) {
    background-image: url("chrome://browser/skin/downloads/downloads.svg") !important;
 }

Zitat von Zitronella

Doch

Danke dir. Es dauert jedoch ein paar Sekunden, die hatte ich nicht gewartet, auch bei ARD Live Stream.

Wegen Tag - wenn ich mit den Browserwerkzeugen, das Symbol wähle:

.tab-audio-button {
  #tabbrowser-tabs:is([orient="vertical"][expanded], [orient="horizontal"]) &:not([pinned]):not([crashed]) {
    &[soundplaying]::part(button) {
      background-image: url("chrome://browser/skin/tabbrowser/tab-audio-playing-small.svg");
    }
  }
}

Da ist also eine andere CLASS zu sehen, aber auch eben besagtes shadow-CSS. Das kann ich mit den hier genutzten Mitteln nicht berücksichtigen, da braucht es das, was Andreas vorschlug.

"Springen" kann man vermutlich nur verhindern, wenn in Abhängigkeit dieses Buttons (Ton, oder nicht) der Inhalt darunter immer angezeigt. Da kann ich dir leider nicht weiterhelfen.

Zitat von omar1979

Gibts auch für das schon was?

Wenn dir das alles zu kompliziert ist, setze doch das css einfach in eine .uc.js, ungefähr so (Damit wäre der gesamte Quelltext an einem Ort):

// TabIconSound.css.uc.js
(function() {

   if (location != 'chrome://browser/content/browser.xhtml') return;
const
// ■■ START UserConfiguration ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
IconPath1 = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir, 'chrome', 'css', 'image', 'ff_svg')), // Pfad zum 1.Ordner der das .svg-Symbol (mit: fill="context-fill" fill-opacity="context-fill-opacity") beinhaltet.
IconPath2 = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir, 'chrome', 'css', 'image')), // Pfad zum 2.Ordner der das .svg-Symbol (mit: fill="context-fill" fill-opacity="context-fill-opacity") beinhaltet.
IconPath3 = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir, 'chrome', 'icons')); // Pfad zum 3.Ordner der das .svg-Symbol (mit: fill="context-fill" fill-opacity="context-fill-opacity") beinhaltet.
// ■■ END UserConfiguration ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

   const sss = Components.classes['@mozilla.org/content/style-sheet-service;1'].getService(Components.interfaces.nsIStyleSheetService);   
   const uri = Services.io.newURI('data:text/css;charset=utf-8,' + encodeURIComponent(`
   
.tab-audio-button {
  #tabbrowser-tabs:is([orient="vertical"][expanded], [orient="horizontal"]) &:not([pinned]):not([crashed]) {
    &[soundplaying]::part(button) {
      background-image: url("${IconPath2}/16_volume-up_moz.svg") !important;
    }
  }
}
.tab-audio-button:hover {
  #tabbrowser-tabs:is([orient="vertical"][expanded], [orient="horizontal"]) &:not([pinned]):not([crashed]) {
    &[soundplaying]::part(button) {
      background-image: url("${IconPath2}/16_volume-off_moz.svg") !important;
    }
  }
}
.tab-audio-button {
  #tabbrowser-tabs:is([orient="vertical"][expanded], [orient="horizontal"]) &:not([pinned]):not([crashed]) {
    &[muted]::part(button) {
      background-image: url("${IconPath2}/16_volume-off_moz.svg") !important;
    }
  }
}
.tab-audio-button:hover {
  #tabbrowser-tabs:is([orient="vertical"][expanded], [orient="horizontal"]) &:not([pinned]):not([crashed]) {
    &[muted]::part(button) {
      background-image: url("${IconPath2}/16_volume-up_moz.svg") !important;
    }
  }
}
.tab-audio-button {
    &[soundplaying]::part(button) {
    fill: green !important;
 }
}
.tab-audio-button {
    &[muted]::part(button) {
    fill: red !important;
 }
}
.tab-audio-button:hover {
    &[soundplaying]::part(button) {
    fill: red !important;
	background-color: lightgray !important;
 }
}
.tab-audio-button:hover {
    &[muted]::part(button) {
    fill: green !important;
	background-color: lightgray !important;
 }
}
#tabbrowser-tabs:is([orient="vertical"][expanded], [orient="horizontal"]) .tabbrowser-tab:not([pinned]):not([crashed]):is([soundplaying], [muted], [activemedia-blocked]) {
    .tab-content .tab-icon-image {
        display: none;
    }
    .tab-audio-button {
        --button-size-icon-small: 18px !important;
        --button-min-height-small: 18px !important;
        margin: auto 2px auto -20px !important;
        transform: translateY(-2px);
    }
}
      `), null, null);
   sss.loadAndRegisterSheet(uri, sss.AUTHOR_SHEET);

})();

/*Der Letzte räumt den Quellcode auf*/

Beispielicons:

.DeJaVu Danke, jetzt hab ich es verstanden. Hatte gestern dann auch mit den BrowserWerkzeugen gesucht und wurde sogar fündig. Weiß aber nicht, ob ich es dann noch geschafft hätte den korrekten css Code zu erstellen. Zeitgleich wurde er dann hier ins Forum gepostet und dann habe ich es mir zugegebenermaßen leicht gemacht und diesen genommen.

Zitat von Mitleser

setze doch das css einfach in eine .uc.js, ungefähr so

Von wegen einfach. Das ist doch viel zu unübersichtlich inmitten des ganzen JavaScript-Codes.

Zitat von milupo

Das ist doch viel zu unübersichtlich inmitten des ganzen JavaScript-Codes.

Verstehe ich nicht, mach es einfach besser! Klug******!!

Zitat von Mitleser

Verstehe ich nicht, mach es einfach besser! Klug******!!

Ich meine damit, dass man CSS nur in begrenztem Maße in ein Skript einbauen sollte. Dann besser eine eigene CSS-Datei mit dem gleichen Namen wie das Skript, damit man weiß, dass die Dateien zusammengehören. Also bitte nichts mit Klug******!

Zitat von milupo

Ich meine damit, dass man CSS nur in begrenztem Maße in ein Skript einbauen sollte.

Hallo milupo.

Welchen Nachteil könnte das denn dann haben?

Zitat von 2002Andreas

Welchen Nachteil könnte das denn dann haben?

Wie gesagt, ich halte es für unübersichtlicher. Was ist, wenn das Skript nicht mehr funktioniert, du musst dann auch den CSS-Code durchgehen. Und für jemanden, der von Skripten keine Ahnung hat, ist das nicht einfacher, das einzubauen. Der kann dann wieder nur komplette Skripts übernehmen.

Und ich könnte mir auch vorstellen, dass das Skript dann langsamer geladen wird.

Zitat von milupo

ich könnte mir auch vorstellen

Danke für deine Erklärung/Meinung dazu.

Lieber milupo , der .tab-audio-button befindet sich im shadow-root-Bereich. Also gibt es nur eine Lsg. über userChromeShadow.css; ein Teil befindet sich aber außerhalb dieses Bereiches; eine Lsg. die beide Bereiche bedient ist also: Die oben genannte Datei (so kompliziert sich der text auch liest!) in eine .us.js-Datei einzugliedern. Hast du was Besseres?

Zitat von Mitleser

Hast du was Besseres?

Ich habe meine Meinung geschrieben. Es geht hier nicht um besser oder nicht besser. Es geht einfach um Übersichtlichkeit und Handhabbarkeit für den Nutzer. Wenn es ein Problem mit dem zugehörigen CSS gibt, muss man nicht erst ein Skript durchsuchen, sondern die entsprechende CSS-Datei. Außerdem ist zusätzlicher Code immer eine Fehlerquelle, zumal das kein JavaScript-Code ist. Nun gut, ich habe mich nicht strikt gegen CSS in JavaScript ausgesprochen, aber einem Nutzer, der sich mit Skripten und kaum mit CSS auskennt zu sagen, er solle das CSS einfach in das Skript übernehmen, ist die Übernahme für dich einfach, aber nicht für den Nutzer.

Zitat von 2002Andreas

Teste bitte:

Dieses Teil hab ich in cssshadowordner:

@-moz-document url-prefix(chrome://browser/content/browser.xhtml) {

.tab-audio-button[soundplaying]::part(button) {
    fill: green !important;
 }
.tab-audio-button[muted]::part(button) {
    fill: red !important;
 }
.tab-audio-button[muted]::part(button) {
    background-image: url("file:///C:/Users/Ramo/AppData/Roaming/Mozilla/Firefox/Profiles/c612nnc8.default-release/chrome/Icons/16_volume-off_moz.svg") !important;
 }

}

Dieses Teil in cssordner:

@-moz-document url-prefix(chrome://browser/content/browser.xhtml) {

/* hide favicon when audio is playing (like FF 135) */
#tabbrowser-tabs:is([orient="vertical"][expanded], [orient="horizontal"]) .tabbrowser-tab:not([pinned]):not([crashed]):is([soundplaying], [muted], [activemedia-blocked]) {
    .tab-content .tab-icon-image {
        display: none;
    }
    .tab-audio-button {
        --button-size-icon-small: 18px !important;
        --button-min-height-small: 18px !important;/**/
        /*margin: auto 2px auto -20px !important; 
        transform: translateY(-1.5px);
		transform: scale(1.2, 1.2) !important;
		color: white !important; */
    }
}
.tab-audio-button {
  scale: 1.4 !important;
 }

}

und beide Teile auch nur in cssordner..

icon wird nicht eingefärbt und bei stummschaltung wird das icon der webseite angezeigt..

kA was ich wieder falsch mache.

Zitat von omar1979

kA was ich wieder falsch mache.

Entfern bitte mal Zeile 1 in dem ersten Code für die userChromeShadow.css. Und auch die Klammer in Zeile 13 dann noch.

Die Zeile gehört da auch nicht rein, und ist auch in keinem der hier geposteten CSS Codes enthalten.

Ich habe die Regeln eben bei Aris gepostet, aber will das hier auch mal schnell tun. Das funktioniert bei mir:

.tab-audio-button {
    --button-size-icon-small: 22px !important;
    --button-min-height-small: 22px !important;
}
.tab-audio-button[activemedia-blocked] {
	--button-icon-fill: #FFE900 !important;/* var(--yellow-50) */
}
.tab-audio-button[soundplaying] {
	--button-icon-fill: #058B00 !important;/* var(--green-70) */
}
.tab-audio-button[muted] {
	--button-icon-fill: #D70022 !important;/* var(--red-60) */
}

Die Variablen werden dann in .button-background angewandt.

Die Vorgabe für --button-icon-fill ist currentColor und deshalb funktionieren die Regeln vom FuchsFan aus #66.

Zitat von 2002Andreas

Entfern bitte mal Zeile 1 in dem ersten Code für die userChromeShadow.css. Und auch die Klammer in Zeile 13 dann noch.

Die Zeile gehört da auch nicht rein, und ist auch in keinem der hier geposteten CSS Codes enthalten.

Hab es gemacht, dann funkt nurnoch das mit dem "Stummschaltung" nicht.

Zitat von Speravir

Ich habe die Regeln eben bei Aris gepostet, aber will das hier auch mal schnell tun. Das funktioniert bei mir:

bei mir funktionert es auch nicht so.

Die CSSshadow

.tab-audio-button[soundplaying]::part(button) {
    --button-icon-fill: white !important;
}
.tab-audio-button[muted]::part(button) {
    --button-icon-fill: red !important;
}
/*
.tab-audio-button[muted]::part(button) {
    background-image: url("file:///C:/Users/Ramo/AppData/Roaming/Mozilla/Firefox/Profiles/c612nnc8.default-release/chrome/Icons/16_volume-off_moz.svg") !important;
}
*/

Und die normale CSS

@-moz-document url-prefix(chrome://browser/content/browser.xhtml) {

/* hide favicon when audio is playing (like FF 135) */
#tabbrowser-tabs:is([orient="vertical"][expanded], [orient="horizontal"]) .tabbrowser-tab:not([pinned]):not([crashed]):is([soundplaying], [muted], [activemedia-blocked]) {
    .tab-content .tab-icon-image {
        display: none;
    }
    .tab-audio-button {
        --button-size-icon-small: 18px !important;
        --button-min-height-small: 18px !important;/**/
        /*margin: auto 2px auto -20px !important; 
        transform: translateY(-1.5px);
		transform: scale(1.2, 1.2) !important;
		color: white !important; */
    }
}
.tab-audio-button {
  scale: 1.4 !important;
 }

}

wenn video lauft, da wird der weisse Icon angzeigt.

aber bei stummschaltung wird das originale Icon von der webseite angezeigt.