Es gibt zwei gegensätzliche Methoden, die Tabs nach unten zu bekommen. In beiden Fällen beruht es darauf, dass eine Navigator-Toolbox hinzugefügt wird. Bei der Methode hier von Seite 1 kommt diese Navigator-Toolbox nach unten und befindet sich auch automatisch an der richtigen Stelle. Leider müssen die Tabs dann aber erst überredet werden, sich innerhalb dieser Navigator-Toolbox zu positionieren. Der erforderliche Wert dort für Zeile 18 differiert je nach Konstellation und Rechner und muss experimentell ermittelt werden. Und man darf auf gar keinen Fall auf die Idee kommen, Menü oder Lesezeichensymbolleiste abzuschalten. Nicht gerade optimal. Nun, zumindest, dass die Box mit dem Exitbutton beim Abschalten des Menüs abwandert, konnte ich beheben, siehe Version 1 im Code.
Die andere Methode ist die von Github auf Seite 7. Da wird die Navigator-Toolbox oben eingefügt und in diesem Fall sind es die Elemente der Menüleiste, die erst dazu dazu überredet werden müssen, sich dort zu positionieren. Das ist nicht trivial. Normalerweise wird die Menüleiste vom Betriebssystem organisiert und hat deshalb immer das passende Aussehen. Wenn man sich selbst darum kümmern muss, gerät ohne besondere Vorkehrungen schnell alles an die falsche Stelle.
Ich habe am Code geschraubt, um diese Geometrieprobleme zu beheben. Erfolgreich getestet habe ich es auf Windows 7 und einem Win10PE. Wer selber damit experimentieren möchte, sollte die Zeilen 1 - 64 auf keinen Fall ändern, allenfalls die Höhe der Menüleiste kann in Zeile 30 bei Bedarf eingestellt werden.
In Zeile 66 wird die Höhe der Tabs festgelegt. In Zeile 72-101 kann der persönliche Lieblingscode für das Aussehen der Tabs eingefügt werden. Vor allem die Farben in den Zeilen 103-131 müssen an das jeweils verwendete Theme angepasst werden. Was ich nicht hinbekommen habe, ist, die Farbe der Menüleiste auf grau zu setzen, wenn das Fenster inaktiv ist. Auch wünsche ich mir einen Verlauf, bei dem es von einem dunkleren Farbton links nach rechts hin heller wird. Falls dazu jemand Ideen hat.
Funktioniert im Prinzip übrigens auch mit älteren Versionen von Firefox. Dort sehen die Tabs dann aber jeweils sehr unterschiedlich aus. Ein Code, der für zukünftige Versionen von Firefox und deren wechselnde Layouts gewappnet sein soll, müsste also die Tabs wesentlich genauer definieren, als ich es getan habe. Aber, zumindest für diesen Monat reicht es erst einmal wieder.
RRM
/* FF89 - TABS: on bottom */
/* RRM 20210613 - Version 2 */
:root{
--uc-titlebar-padding: -1px;
--uc-titlebar-paddinx: 0px;
--uc-titlebar-height: 0px;
}
:root[sizemode="maximized"]{
--uc-titlebar-padding: 0px;
--uc-titlebar-paddinx: 0px;
--uc-titlebar-height: 0px;
}
@media (-moz-os-version: windows-win10){
:root{
--uc-titlebar-padding: 0px;
--uc-titlebar-paddinx: -1px;
--uc-titlebar-height: 0px
}}
@media (-moz-os-version: windows-win10){
:root[sizemode="maximized"]{
--uc-titlebar-padding: 1px;
--uc-titlebar-paddinx: 0px;
--uc-titlebar-height: 1px
}}
#navigator-toolbox{ padding-top: calc(25px + 10 * var(--uc-titlebar-height)) !important }
#titlebar{
-moz-box-ordinal-group: 2;
-moz-appearance: none !important;
}
.titlebar-buttonbox-container > .titlebar-buttonbox{ height: 100%; }
.titlebar-placeholder,
#TabsToolbar .titlebar-spacer{ display: none; }
#toolbar-menubar{
position: fixed;
display: flex;
top: calc(var(--uc-titlebar-padding) * 4 + var(--uc-titlebar-paddinx) * 4 + 5px);
width: 100%;
overflow: hidden;
}
#toolbar-menubar > .titlebar-buttonbox-container{ order: 100; }
#toolbar-menubar > [flex]{ flex-grow: 100; }
#toolbar-menubar > spacer[flex]{
order: 99;
flex-grow: 1;
}
#toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container,
#TabsToolbar > .titlebar-buttonbox-container{
position: fixed;
display: block;
top: calc(var(--uc-titlebar-paddinx) * 4 + var(--uc-titlebar-height) * 4 + 5px);
right: 0px;
}
:root{ --tab-min-height: 27px !important; }
#TabsToolbar{
margin-bottom: -1px !important;
}
.tabbrowser-tab{
margin-top: -4px !important;
margin-bottom: -2px !important;
margin-left: -3px !important;
min-height: var(--tab-min-height) !important;
max-height: var(--tab-min-height) !important;
}
.tab-background{
background-color: #ACBDD7 !important;
}
.tab-background[selected="true"]{
background-color: #DAD7D0 !important;
}
#tabbrowser-tabs{
width: 100vw !important;
}
#tabs-newtab-button{
margin-top: 0px !important;
margin-bottom: -5px !important;
}
#tabbrowser-tabs,
#tabbrowser-tabs > .tabbrowser-arrowscrollbox,
.tabbrowser-tabs[positionpinnedtabs] > .tabbrowser-tab[pinned]{
max-height: var(--tab-min-height) !important;
}
#navigator-toolbox{
-moz-appearance: none !important;
background-image: none !important;
background-color: #304C8A !important;
border-top: 3px solid #D4D0C8 !important;
}
@media (-moz-os-version: windows-win10){
#navigator-toolbox{
border-top: 0px solid #D4D0C8 !important;
}}
#nav-bar{
-moz-appearance: none !important;
background-image: none !important;
background-color: #C2D3ED !important;
}
#PersonalToolbar{
-moz-appearance: none !important;
background-image: none !important;
background-color: #CADBF2 !important;
}
#TabsToolbar{
-moz-appearance: none !important;
background-image: none !important;
background-color: #D2E3F2 !important;
}
/* FF89 - TABS: on bottom */
/* RRM 20210613 - Version 1 */
/*
#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;
}
#toolbar-menubar{
position: fixed;
display: flex;
width: 100%;
overflow: hidden;
}
#toolbar-menubar > .titlebar-buttonbox-container{
order: 100;
}
#toolbar-menubar > [flex]{ flex-grow: 100; }
#toolbar-menubar > spacer[flex]{
order: 99;
flex-grow: 1;
}
#toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container,
#TabsToolbar > .titlebar-buttonbox-container{
position: fixed;
display: block;
right: 0px;
}
#TabsToolbar:not([inFullscreen="true"]){
position: absolute !important;
display: block !important;
top: 91px !important;
width: 100% !important;
}
:root{
--tab-min-height: 27px !important;
}
.tabbrowser-tab{
margin-top: -4px !important;
margin-left: -3px !important;
min-height: var(--tab-min-height) !important;
max-height: var(--tab-min-height) !important;
}
.tab-background{
background-color: #ACBDD7 !important;
}
.tab-background[selected="true"]{
background-color: #DAD7D0 !important;
}
#tabbrowser-tabs{
width: 100vw !important;
}
#tabs-newtab-button{
margin-top: -3px !important;
margin-bottom: -5px !important;
}
#tabbrowser-tabs,
#tabbrowser-tabs > .tabbrowser-arrowscrollbox,
.tabbrowser-tabs[positionpinnedtabs] > .tabbrowser-tab[pinned]{
max-height: var(--tab-min-height) !important;
}
#main-window:not([chromehidden*="toolbar"]) #navigator-toolbox{
padding-bottom: calc(var(--tab-min-height) - 1px) !important;
}
#nav-bar{
-moz-appearance: none !important;
background-image: none !important;
background-color: #C2D3ED !important;
}
#PersonalToolbar{
-moz-appearance: none !important;
background-image: none !important;
background-color: #CADBF2 !important;
}
#navigator-toolbox{
-moz-appearance: none !important;
background-image: none !important;
background-color: #D2E3F2 !important;
}
#TabsToolbar{
-moz-appearance: none !important;
background-image: none !important;
background-color: #D2E3F2 !important;
}
*/
Aber ich muss sagen, es macht doch gleich viel mehr Spaß, wenn man weis, was welche Codes in der CSS eigentlich machen, bzw. wofür sie denn dort stehen. Deshalb habe ich soweit ich mir da sicher bin, auch die entsprechende Beschreibung gleich immer auch dazugeschrieben. Es gibt da aber noch ein paar Lücken, aber ich 'arbeite dran'. Ich 'häng' hier noch mal meine CSS Datei mit dran.
Es gibt schon lange keine XUL-Dateien in Firefox mehr, ergo kann entsprechender Code gar nichts gemacht haben. Aber wenn du eh nichts vermisst hast, dann kannst du den Teil des Codes auch ganz löschen.
