Firefox 89: Farbe der Tabs ändern?

@2002Andreas :
Ich hab mir mal deinen Code aus #22 angepasst. Was mir noch aufgefallen ist dabei, die Tableiste bleibt so ja fix an genau durch "top" in Zeile 4 (bzw 54 bei mir) definierten Position....auch im Vollbildmodus.
Das führt dazu das die Tableiste, naja, innerhalb vom main-window hockt im Vollbildmodus^^.
An der eigentlich dafür vorgesehenen Postion der Tableiste ist diesem Fall ein leerer Bereich, der im "Windows Design" wie in #29 die Tableiste beschrieben wird dargestellt ist.

Gibt es noch eine Möglichkeit der Tableiste auch wieder zur korrekten Position im Vollbildmodus zu verhelfen?

Meine angepasste css schaut mittlerweile so aus:
CSS:
/* Mehrzeilige Lesezeichen-Symbolleiste */

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

#PersonalToolbar {
min-height: 25px !important;
}

#PersonalToolbar {
min-height: calc(28px * 2) !important; /* damit werden 2 Reihen angezeigt */
}

#personal-bookmarks,
#PlacesToolbar,
#PlacesToolbar > hbox {
display: flex !important;
}

#PersonalToolbar toolbarbutton {
min-height: 24px !important;
max-height: 24px !important;
}

#PlacesToolbarItems {
display: flex !important;
flex-wrap: wrap !important;
overflow-x: visible !important;
overflow-y: auto !important;
}

#PlacesToolbarItems {
-moz-window-dragging: no-drag !important;
}

#PlacesToolbar #PlacesChevron {
display: none;
}
}


/*Tab schliessen X an allen Tabs*/

.tab-close-button {
   display: block !important;
}



/*Tableiste unter Lesezeichenleiste mit zwei Reihen. Verschieben durch anpassen von Z54 und Z74.*/

#TabsToolbar {
    position: absolute !important;
    display: block !important;
    top: 126px !important; /*Abstand nach oben*/
    width: 100% !important;
    }

.tabbrowser-tab {
    margin-top: 2px !important;
    max-height: 35px !important;
   }

#TabsToolbar :-moz-any(.tabs-newtab-button,#tabs-newtab-button) {
   min-width: 0px !important;
   width: 25px !important;
   margin-bottom: 0px !important;
   }

#tabbrowser-tabs {
   width: 100vw !important;
   }
   
#main-window:not([chromehidden*="toolbar"]) #navigator-toolbox {
   padding-bottom: 44px !important;
   }

edit:
Mir ist eben noch ein "bug" aufgefallen. Wenn man an das Limit für offene Tabs OHNE scrollbalken gelangt, fangen die Tabs an zu "zittern" durch wechselndes, ein und ausblenden, des "Alle Tabs auflisten" buttons.
Sobald der rechte Tabscrollbutton vorhanden ist, hörts auf zu zwittern und die Anzeige ist normal.

edit2:
Die Tabhöhe scheint ab einer höheren Anzahl offener Tabs auch größer zu werden. Etwa 4-5px höher als es bei nur einem offenen Tab der Fall ist. So ist bei meiner geposteten css zu beginn noch ein Leerbereich zum MainWindow vorhanden -.-
 
Zuletzt bearbeitet:
AS2370 schrieb:
fangen die Tabs an zu "zittern"
Du musst bitte diesen Teil aus dem Code entfernen:

CSS:
#TabsToolbar :-moz-any(.tabs-newtab-button,#tabs-newtab-button) {
   min-width: 0px !important;
   width: 25px !important;
   margin-bottom: 0px !important;
   }

Dann steht in deinem Code:
/Tableiste unter Lesezeichenleiste mit zwei Reihen. Verschieben durch anpassen von Z54 und Z74./

Der Code erstellt keine 2te Tabreihe, sondern nur die Tableiste unter die Lesezeichenleiste.
 
Ahjo danke. Das "zittern" hat sich durch entfernen vom "#TabsToolbar :-moz-any(.tabs-newtab-button,#tabs-newtab-button" segment erledigt. yay Ein Schritt weiter zurück zum old normal^^.

Ja ich hatte mir das selber noch mal nachkommentiert, damit ich später noch weis warum ich wo was angepasst hatte 😅

Hast du noch eine Idee zur unterschiedlichen Tableistenhöhe, zwischen wenigen und vielen offenen Tabs, sowie zur Tableistenposition im Vollbildmodus?
 
Zuletzt bearbeitet:
Hab eben noch etwas gefunden was zumindest für eine einheitliche Höhe der Tableiste zu sorgen scheint, egal wieviele Tabs vorhanden sind.

CSS:
@media (-moz-proton) {
    #TabsToolbar {
    --tab-min-height: calc(var(--tab-min-height_tnot) + 1px);
    --toolbarbutton-inner-padding: 4.5px !important;
    }

    .tab-content {
    height: 90%;
    }
}

Code kommt von dort.

Jetzt müsst die Tableiste nur noch im Vollbildmodus an der korrekten Position unterhalb der Adressleiste dargestellt werden :-)
 
AS2370 schrieb:
Teste bitte mal:

CSS:
#TabsToolbar[inFullscreen="true"] {
    -moz-box-ordinal-group:1000!important;
    }

#main-window[inFullscreen="true"] #navigator-toolbox {
    margin-top:-80px!important;
    }

#main-window[inFullscreen="true"] #navigator-toolbox:hover {
    margin-top:1px!important;
    }

#TabsToolbar:not([inFullscreen="true"]){
    position: absolute !important;
    display: block !important;
    top: 95px !important; /*Abstand nach oben*/
    width: 100% !important;
    }

.tabbrowser-tab {
    margin-top: 2px !important;
    max-height: 37px !important;
   }



#tabbrowser-tabs {
   width: 100vw !important;
   }
        
#main-window:not([chromehidden*="toolbar"]) #navigator-toolbox {
   padding-bottom: 34px !important;
   }


Hinweis:
 
Hm ja, fast.

Ich hab diesen Teil
CSS:
#TabsToolbar {
    position: absolute !important;
    display: block !important;
    top: 126px !important; /*Abstand nach oben*/
    width: 100% !important;
    }

.tabbrowser-tab {
    margin-top: 0px !important; /*Abstand nach oben*/
    max-height: 35px !important; /*Tab max Höhe*/
   }

#tabbrowser-tabs {
   width: 100vw !important;
   }
   
#main-window:not([chromehidden*="toolbar"]) #navigator-toolbox {
   padding-bottom: 36px !important;
   }

durch den neuen ersetzt.

Ergebnis, im Fenster und maximierter Ansicht überblendet die Tableiste die zweite Zeile der Lesezeichenleiste. Is auch logisch da die abweichenden Werte bei top jetzt nicht angepasst sind.

Im Vollbildmodus wird die Tableiste oben über der Adressleiste angezeigt, jedoch "zitternd" ein-/ausblenden bei Mausbewegung.
Unterhalb der Adressleiste ist ein leerer Bereich bis zum main-window,....wo, naja die Tableiste sein sollt 🙃

vorher maximiertes Fenster

fox89 maximiert.jpg



vorher Vollbildmodus

fox89 fullscreen.jpg



nachher maximiertes Fenster

fox89 maximiert nachher.jpg



nachher Vollbildmodus, jedoch "zitternde" Anzeige von Tab+Adressleiste vom gesamtem Anzeigebereich beim einblenden der Leisten.

fox89 fullscreen nachher.jpg



userChome.css schaut dabei so aus
CSS:
/* Mehrzeilige Lesezeichen-Symbolleiste */

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

#PersonalToolbar {
min-height: 25px !important;
}

#PersonalToolbar {
min-height: calc(28px * 2) !important; /* damit werden 2 Reihen angezeigt */
}

#personal-bookmarks,
#PlacesToolbar,
#PlacesToolbar > hbox {
display: flex !important;
}

#PersonalToolbar toolbarbutton {
min-height: 24px !important;
max-height: 24px !important;
}

#PlacesToolbarItems {
display: flex !important;
flex-wrap: wrap !important;
overflow-x: visible !important;
overflow-y: auto !important;
}

#PlacesToolbarItems {
-moz-window-dragging: no-drag !important;
}

#PlacesToolbar #PlacesChevron {
display: none;
}
}

/*Lesezeichen-Symbolleiste Abstand zwischen Lesezeichen*/

toolbarbutton.bookmark-item {

margin-left: 0px !important;
margin-right: 0px !important;

}


/*Tab schliessen X an allen Tabs*/

.tab-close-button {
   display: block !important;
}



/*Tableiste unter Lesezeichenleiste.

Abstand angepasst für zwei Reihen Symbollesezeichen.
Verschieben durch anpassen von top und padding-bottom.*/

#TabsToolbar[inFullscreen="true"] {
    -moz-box-ordinal-group:1000!important;
    }

#main-window[inFullscreen="true"] #navigator-toolbox {
    margin-top:-80px!important;
    }

#main-window[inFullscreen="true"] #navigator-toolbox:hover {
    margin-top:1px!important;
    }

#TabsToolbar:not([inFullscreen="true"]){
    position: absolute !important;
    display: block !important;
    top: 95px !important; /*Abstand nach oben*/
    width: 100% !important;
    }

.tabbrowser-tab {
    margin-top: 2px !important;
    max-height: 37px !important;
   }



#tabbrowser-tabs {
   width: 100vw !important;
   }
       
#main-window:not([chromehidden*="toolbar"]) #navigator-toolbox {
   padding-bottom: 34px !important;
   }

 
 
/*Tableistenhöhe immer gleich*/

@media (-moz-proton) {
    #TabsToolbar {
    --tab-min-height: calc(var(--tab-min-height_tnot) + 1px);
    --toolbarbutton-inner-padding: 4.5px !important;
    }

    .tab-content {
    height: 90%;
    }
}

Vielen Dank für deine Mühe :-)


Irgendwie ist das mit Mozilla immer wieder der selbe hickhack, anstatt das solche UI Geschichten einfach optional gemacht machen (opt-in), neeeee...., umbauen als voll toll deklarieren und "kommt damit klar"^^. Schon schade, dabei würd ich vermuten das eine default css im alten UI Layout keine Unzumutbarkeit für Mozilla wäre.
 
Zuletzt bearbeitet:
Habs nun soweit zusammen gebastelt so das:
  • im Fenstermodus + maximiertes Fenster + Vollbildmodus, die Tableiste unter der Adressleiste ist.
  • im Fenstermodus + maximiertes Fenster, das Titelmenü korrekt sichtbar ist.
Jetzt fehlt an sich nur noch, das die Lesezeichensymbolleiste auch im Vollbildmodus mit angezeigt wird.

Die letzten drei Elemente hab ich aus einer in einem reddit thread geposteten css. Hab den link, wie ich eben festenstellen musste, nicht mehr im Verlauf :mad: .
Jedenfalls entstammte das aus einem "komplett Paket", das ich einfach soweit zusammen gestrichen hab, bis für mich ersichtlich wurde welche Elemente dafür sorgen das die Tableiste unten ist und in jedem Modus auch dort bleibt uund die Titelmenüleiste korrekt sichbar bleibt.
Das navigator-toolbox Element hab ich nur um "die nicht Sichtbarkeit im Vollbildmodus" erweitert.

Das ganze dann mit meiner vorherigen css kombiniert und dort noch geschaut was wech kann :)


Meine userchrome.css schaut nun so aus:

CSS:
/* Mehrzeilige Lesezeichen-Symbolleiste */

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

#PersonalToolbar {
min-height: 25px !important;
}

#PersonalToolbar {
min-height: calc(28px * 2) !important; /* damit werden 2 Reihen angezeigt */
}

#personal-bookmarks,
#PlacesToolbar,
#PlacesToolbar > hbox {
display: flex !important;
}

#PersonalToolbar toolbarbutton {
min-height: 24px !important;
max-height: 24px !important;
}

#PlacesToolbarItems {
display: flex !important;
flex-wrap: wrap !important;
overflow-x: visible !important;
overflow-y: auto !important;
}

#PlacesToolbarItems {
-moz-window-dragging: no-drag !important;
}

#PlacesToolbar #PlacesChevron {
display: none;
}
}

/*Lesezeichen-Symbolleiste Abstand zwischen Lesezeichen*/

toolbarbutton.bookmark-item {

margin-left: 0px !important;
margin-right: 0px !important;

}


/*Tab schliessen X an allen Tabs*/

.tab-close-button {
   display: block !important;
}



/*Tableistenhöhe und Abstand zur Leiste darüber.*/

.tabbrowser-tab {
    margin-top: 0px !important; /*Abstand nach oben*/
    max-height: 35px !important; /*Tab max Höhe*/
   }

#tabbrowser-tabs {
   width: 100vw !important;
   }
 
 
 
/*Tableistenhöhe immer gleich*/

@media (-moz-proton) {
    #TabsToolbar {
    --tab-min-height: calc(var(--tab-min-height_tnot) + 1px);
    --toolbarbutton-inner-padding: 4.5px !important;
    }

    .tab-content {
    height: 90%;
    }
}









/*Setzt minimieren, maximieren, schließen button bei Vollbildmodus in Tableiste*/
/*sorgt irgendwie dafür das die Tableiste unter Nav- und Lesezeichensymbolleiste ist*/

#titlebar{
-moz-box-ordinal-group: 2;
-moz-appearance: none !important;
--tabs-navbar-shadow-size: 0px;
}


/*blendet Navigatonsleiste in Vollbildmodus aus*/

#navigator-toolbox:not([inFullscreen="true"]){ padding-top: calc(29px + var(--uc-titlebar-padding,0px)) !important }


/*positioniert Titelmenüleiste für fenster und maximiert direkt über Adressleiste*/

#toolbar-menubar{
position: fixed;
display: flex;
top: var(--uc-titlebar-padding, 9px);
height: 29px;
width: 100%;
overflow: hidden;
}

@2002Andreas : Damit flackert/zitterts auch nicht beim einblenden der Leisten im Vollbildmodus :-) . Ich weis nur nicht warum das so nun funktioniert.

Screenshots vom IST-Zustand liefer ich noch nach ;-)

edit:
Anbei die Screenshots; Firefox 89 im default Theme.


1. kleiner Fenstermodus

fox89 fenster.jpg


2. maximiertes Fenster

fox89 maximiert neu.jpg



3. Vollbildmodus

fox89 fullscreen neu.jpg
 
Zuletzt bearbeitet:
Hallo zusammen,

vielen Dank für die hilfreichen Beiträge.

Ich habe auch eine Frage zu den Tabs:

Kann man diese auch irgendwie halbtransparent machen?

Viele Grüße,
Holli
 
@2002Andreas :
Um den Hintergrund der Tableiste, warum dieser durchscheinend im default Theme ist, schau ich ein anderes mal^^. Müsste an sich doch durch eines deiner post aus dem Threadanfang zu beheben sein :-)

Naja und die Lesezeichenleiste will ich auch noch beim Vollbildmodus angezeigt bekommen, auch wenns nur ein "nice to have" wär.
 
AS2370 schrieb:
Naja und die Lesezeichenleiste
Dafür habe ich leider noch keine Lösung gefunden.

AS2370 schrieb:
den Hintergrund der Tableiste
Da müsstest du mir bitte mal einen Screenshot erstellen was genau du damit meinst.

Einfärben kann man die Tableiste mit jeglicher HG Farbe.
 
2002Andreas schrieb:
Da müsstest du mir bitte mal einen Screenshot erstellen was genau du damit meinst.

@2002Andreas :
Schau mal oben auf den beiden breiten Screenshots, dort kann man das schön erkennen.

Die Tableiste wird dort von aussen zur mitte heller und ist ingesamt ganz leicht durchscheinend im default hell Theme und im default dunkel Theme. "Eigentlich" müsste die Tableiste da doch schon hell bzw dunkel hinterlegt sein wie uA die Lesezeichensymbolleiste oder irre ich mich da?

Bei bspw diesem Theme hingegen, ist auch die Tableiste im Themedesign und wird dunkel dargestellt.

Der Bug in jenem Theme wäre, das im Fenster und im maximierten Fenstermodus die Buttons für minimieren, maximieren, schließen verdeckt sind. Neben dem "Hilfe" der Titelmenüleiste ist wird auch noch eine komisches kleines buntes Feld -wie ein Grafikfehler- dargestellt, das auch bei anderen Themes dort ist.
 
mist---
 
Zuletzt bearbeitet: (falscher thread)
Kann man irgendwie auch die Höhe Tabs ändern via userchrome.css?
 
larska schrieb:
die Höhe Tabs ändern
In about:config
den Wert:

browser.compactmode.show

auf true setzen.
Dann im Anpassenfenster unten auf Dichte klicken, und den Kompaktmodus aktivieren hattest du schon versucht?
 
2002Andreas schrieb:
Dann im Anpassenfenster unten auf Dichte klicken, und den Kompaktmodus aktivieren hattest du schon versucht?
ja, da steht aber "wird nicht unterstützt"... geht das trotzdem?
 
Es ist eine kleine Anpassung meiner css notwendig geworden, nachdem update auf v.107.0 damit die Lesezeichensymbolleiste weiterhin angezeigt wird.



Im Segment für "#PlacesToolbarItems" (Zeile24-29, Post 47) muss das eingefügt werden.
Code:
contain: none !important;

Danach ist wieder alles wie zuvor.

Segment schaut da so aus:
#PlacesToolbarItems {
display: flex !important;
flex-wrap: wrap !important;
overflow-x: visible !important;
overflow-y: auto !important;
contain: none !important;
}

gruß
Alexander
 
Es ist eine kleine Anpassung meiner css notwendig geworden, nachdem update auf v.113.0 damit die Tabs weiterhin unten angezeigt wird.

Im Segment für "#titlebar" (Zeile 95-99, Post 47) muss das eingefügt werden:

Code:
order: 2;


Segment schaut dann final so aus:

Code:
#titlebar{
-moz-box-ordinal-group: 2;
order: 2;
-moz-appearance: none !important;
--tabs-navbar-shadow-size: 0px;
}

Danach sind die Tabs wieder unten...wo sie hingehören :-)


Vielleicht kann mir noch jemand erklären warum ich die erste Zeile "-moz-box-ordinal-group: 2;" auskommentieren kann und trotzdem die Tabs weiterhin unten behalte?



gruß
Alexander
 
AS2370 schrieb:
warum ich die erste Zeile "-moz-box-ordinal-group: 2;" auskommentieren kann und trotzdem die Tabs weiterhin unten behalte?
Der Eintrag hat ab Fx 113 keine Funktion mehr.
Du hast ihn ja bereits ersetzt mit:

order: 2

Also kannst du den anderen löschen.
Ergänzung ()

Die meisten Einträge mit:

-moz-box..

haben keine Funktion mehr, und müssen ersetzt werden.
 
Zurück
Oben