Tabbar verstecken bei nur einem Tab

NoNameNeeded

Ich würde gerne die Tabbar verstecken wenn nur ein Tab geöffnet ist.

So weit, so gut, dafür gibt es eine css-Datei...

Code

/*
How To:
1. Find your firefox profile folder : https://support.mozilla.org/en-

US/kb/profiles-where-firefox-stores-user-data
2. create a "chrome" folder if it doesn't exist
3. Paste content of this gist in a "userChrome.css" file
4. Go to about:config and set 

toolkit.legacyUserProfileCustomizations.stylesheets to true
5. Restart Firefox
Don't hesitate to say if there are bugs, I only tested this for my 

workflow : I don't use tabs
at all but I want to see the bar if I open a tab by mistake (otherwise 

I sometimes lose a tab)
*/

/* Copy the default settings for --tab-min-height as --hidetabs-tab-

min-height */
:root {
    --hidetabs-tab-min-height: 30px;
}

:root[uidensity=compact] {
    --hidetabs-tab-min-height: 29px;
}

:root[uidensity=touch] {
    --hidetabs-tab-min-height: 41px;
}

/* Set --tab-min-height to 0px so tab bar can disappear */
#tabbrowser-tabs #TabsToolbar {
    --tab-min-height: 0px;
}



/* Restore minimum height when more than one tab */
#TabsToolbar #tabbrowser-tabs tab {
    min-height: var(--hidetabs-tab-min-height);
}

/* Collapse tab bar when there is only one tab (tab is both first & 

last) */
#tabbrowser-tabs tab[first-visible-tab="true"][last-visible-tab="true"] 

 {
    visibility: collapse;

}



/* Hide the New Tab button when there is only one tab (first visible 

tab is
   adjacent to new tab button) */
#tabbrowser-tabs tab[first-visible-tab="true"] + #tabs-newtab-button {
    visibility: collapse;
}

Alles anzeigen

Diese funktioniert aber dank der unzähligen anderen css-Dateien nicht richtig.

Zwar werden tatsächlich keine tabs angezeigt, wenn nur eines geöffnet ist, allerdings verschwindet die Leiste trotzdem nicht.

Wohl deswegen weil nirgends wirklich angegeben ist, DASS sie verschwinden soll.

Diese Leiste setzt sich wohl zusammen aus #navigator-toolbox #Tabs-Toolbar und einem Ding namens scrollbox (laut Browser-Werkzeuge), obwohl...zum scrollen ist da eigentlich nichts.

Wie auch immer, ich hab's mittlerweile aufgegeben da noch weiter herumzuprobieren.

Hier sind die anderen css-Dateien die wohl Einfluss auf das "falsche" Verhalten haben:

CSS

@import "icons.css";

@import "statusbar.css";
@import "toolbars.css";
@import "contextmenu.css";
@import "urlbar.css"; 
@import "tabs.css"; 
@import "Separator.css";

@import "downloads.css";


@import url("./Fx56_bookmark_buttons/userChrome_Fx56_bookmark_icons.css");


#contentAreaDownloadsView {
    
    padding: 0px !important;

}

:root {
    --default-focusring: 0 !important;
}




#main-window {
   background-color: #C0C0C0 !important;
   color: #000 !important;



}
#reload-button {
  display: -moz-box !important;
}
#stop-button {
  display: -moz-box !important;
transform: scaleX(-1) !important;
}

#stop-reload-button {
  transform: scaleX(-1) !important;
}

#reload-button {
    transform: scaleX(-1) !important;
}

*{ scrollbar-color: auto !important; scrollbar-width: auto !important; }

/* Multi-Row Bookmarks Toolbar */
##nav-bar {
  /* Override max-height */
  min-height: unset !important;
  max-height: unset !important;
}

##nav-bar {
  /* Override hiding */
  overflow-x: visible !important;
  overflow-y: visible !important;
  display: inline-block !important;
  padding-bottom: 1px;
}

##nav-bar {
  /* Reduce padding to fit rows closer together */
  padding-top: 1px !important;
  padding-bottom: 1px !important;
}

#PanelUI-menu-button {
  display: none !important;
}


##nav-bar-overflow-button {
  
visibility: collapse !important;



@-moz-document url-prefix() { ::-moz-focus-inner {border: none} select:-moz-focusring { color: transparent; text-shadow: 0px 0px 0px #000; } }


#TabsToolbar {
    visibility:collapse;
}

#navigator-toolbox:hover #TabsToolbar{
    visibility: visible !important;
    
}

Alles anzeigen

CSS

/* TABS: height */
*|*:root {
--menubar-height: 30px;
--bookmarkbar-height: 18.3px;
/*--tabbar-top: calc(var(--menubar-height) + var(--bookmarkbar-height) + var(--tab-min-height) + 8px); /*89+*/
}
/*
:root {
 --tab-min-height: 28px !important;
}
:root #tabbrowser-tabs {
 --tab-min-height: 28px !important;
}*/

/* Benutze ein Hintergrundbild für die Symbolleisten */
menubar, toolbox, toolbar, .tabbrowser-tabs {
 xbackground-image: url("Kopie von ie2.jpg") !important;

   background-color: none !important;
background-repeat: no-repeat;
 }

#TabsToolbar  {
xbackground-image: url("Kopie von ie2.jpg") !important;

   background-color: none !important;
background-repeat: no-repeat;
}

#nav-bar:not(:-moz-lwtheme) {
  margin-top: 1px !important;
background-color: inherit !important;
 background-image: url("image/xtop.png") !important;
  background-position: left bottom; 
  padding: 0 !important;
  border: 2px solid !important;
  border-top: 2px solid !important;
  border-left: 7px solid !important;
  border-image: url("image/toolbar_handle_top.png") !important;
  border-image-slice: 2 2 2 7 !important;
height: 55px !important;

}
/*:not(#uc-toolbar)*/
toolbar:not(#toolbar-menubar):not(#nav-bar):not(#TabsToolbar):not(:-moz-lwtheme) {
  -moz-appearance: none !important;
  background-color: inherit  !important;
  
  padding: 1px !important;
  border: 2px solid !important;
  border-left: 7px solid !important;
  border-top: 0px !important;
  border-image: url("image/toolbar_handle.png") !important;
  border-image-slice: 2 2 2 7 !important; }
min-height: 55px  !important;
max-height: 55px !important;
position: absolute !important;
background-repeat: no-repeat;

#main-window[uidensity="compact"] toolbar:not(#TabsToolbar):not(#toolbar-menubar):not(#nav-bar):not(:-moz-lwtheme) {
  margin-bottom: 0px !important;
}

#toolbar-menubar {
  -moz-appearance: none !important;
  background-color: #c0c0c0 !important;
  padding: 0px !important;
  padding-left: 2px !important;
  border: 2px solid !important;
  border-left: 7px solid !important;
  border-right: 43px solid !important;
  border-bottom: 0px !important;
  border-image: url("image/menu_bar_handle.png") !important;
  border-image-slice: 2 43 2 7 !important; }
opacity: 0.5;

#main-window[tabsintitlebar="true"] #toolbar-menubar {
  border: none !important;
  height: 100% !important;
  background-image: linear-gradient(to right, #000060,#A1C4E9) !important;
} 

#main-window[tabsintitlebar="true"] #toolbar-menubar .menubar-text {
  color: #fff !important;
}

#TabsToolbar .titlebar-buttonbox-container {
  visibility: collapse !important;

}

#browser {
   xborder: solid !important;
   padding: 0px !important;
   margin-top: -1px !important;
   border-width: 2px 2px 2px 2px !important;
   border-image: url("image/combobox.png") !important;
   border-image-slice: 2 2 2 2 !important; 
#navigator-toolbox toolbar:not(#nav-bar):not(#toolbar-menubar) {-moz-box-ordinal-group:10}
}
#navigator-toolbox {
min-height: 120px !important;
max-height: 210px !important;
}

#TabsToolbar {-moz-box-ordinal-group:1000!important}

#TabsToolbar {
  display: block !important;
  position: absolute !important;
 ## top: var(--tabbar-top) !important;
top: 126px !important;
min-height: 0px !important;
max-height: 30px !important;
  width: 100vw !important;
  -moz-appearance: none !important;
  /*background-image: url("image/bottom.png") !important;*/
  background-color: inherit !important;
  border: 2px solid !important;
  border-left: 7px solid !important;
  border-top: 0px !important;
  border-image: url("image/toolbar_handle.png") !important;
  padding: 0px !important;
  padding-left: 0px !important;
  border-image-slice: 2 2 2 7 !important;
 
}

#tabbrowser-tabs, #tabbrowser-tabs .toolbar-items {
  margin-top: -4px !important;
  border: 0px solid !important;
  border-right: 0px solid !important;
  border-image: url("image/tabs_handle.png") !important;
  border-image-slice: 1 8 2 2 !important; 
  width: 100vw !important;
}

#main-window:not([chromehidden*="toolbar"]) #navigator-toolbox {padding-bottom: var(--tab-min-height) !important;}

#configuration_toolbar {


margin-top: 20px !important;
min-height: 70px !important;
max-height: 70px !important;

}

#uc-toolbar {
background-image: url("Kopie von ie.jpg") !important;
  border-left: 7px solid !important;
  border-top: 0px !important;
  border-image: url("image/toolbar_handle.png") !important;
  border-image-slice: 2 2 2 7 !important; }
}

Alles anzeigen

CSS

/* remove default tab colors */
.tab-line {                             /* = light top line in selected tab in Quantum default */
    display: none !important;
}

.tab-background {
   border: transparent !important;
   background: transparent;
   color: transparent;
   opacity: 0.0;
}

#TabsToolbar:not(:-moz-lwtheme) .tabbrowser-tab[visuallyselected="true"],
#TabsToolbar:not(:-moz-lwtheme) .tabbrowser-tab, .tabbrowser-tab, .tab-content {
   border: unset !important;
}

#TabsToolbar:not(:-moz-lwtheme) .tabbrowser-tab, .tabbrowser-tab,
#TabsToolbar:not(:-moz-lwtheme) .tabbrowser-tab[visuallyselected="true"] {
   min-height: 0px !important;
   max-height: 30px !important;
   padding: 0px !important;
   border: 0px solid transparent !important;
   border-right: 3px solid #D3D3D3 !important;
   box-shadow: inset -1px 0px #757575 !important;
}

.tab-content {

   min-height: 18px !important;
   max-height: 28px !important;
min-width: 28px !important;
   padding: 0px !important;
padding-top: 1px !important;
   padding-left: 12px !important;
   padding-right: 8px !important;
   border: unset !important;
   background-image: url("image/3dtab.png") !important; 
}
.tab-content:hover {
   background-image: url("image/3dtab hover.png") !important;
}



.tab-content[selected="true"] {
   /*color: #fff !important;*/
   
background-image: url("image/3dtab hover.png") !important;
}
.tab-content[selected="true"]:hover {
   /*color: #fff !important;*/
   background-image: url("image/3dtab hover.png") !important;
}
/*
#tabs-newtab-button {
   border-right: 3px solid #fff !important;
   box-shadow: inset -1px 0px #505050 !important;

}*/

spacer[part=overflow-start-indicator], 
spacer[part=overflow-end-indicator] {
  display: none !important; }

.tab-icon-image {
   margin-top: -1px !important;
   margin-left: -5px !important;
   margin-right: 3px !important;
}

#tabs-newtab-button > image  {
   display: none !important;
}

#tabs-newtab-button {
   background: url("NewTab2.png") no-repeat !important;
   background-position: 0px 2px !important;
   padding-left: 34px !important;
margin-bottom: -4px !important;
}

#tabs-newtab-button:hover {
   background: lightgrey url("NewTab3.png") no-repeat !important;
   background-position: 0px 2px !important;
   padding-left: 34px !important;
margin-bottom: -4px !important;

}

Alles anzeigen

Ich kann gut verstehen, wenn wirklich niemand die Lust hat sich den ganzen Kram anzusehen.

Aber fragen kostet ja nichts.

2002Andreas

Zitat von NoNameNeeded

gerne die Tabbar verstecken wenn nur ein Tab geöffnet ist.

Per Script:

Ein Tab...Leiste ausgeblendet.

2 Tabs...Leiste eingeblendet.

JavaScript

//    HideTabbarWithOneTab.uc.js
//    v. 0.1

Cc["@mozilla.org/preferences-service;1"].getService(Ci.nsIPrefService).setBoolPref("browser.tabs.drawInTitlebar", false);
var tabbar = document.getElementById("TabsToolbar");    
function showHideTabbar (mutations) {
    tabbar.collapsed = (gBrowser.visibleTabs.length == 1);
};            
showHideTabbar();                        
var observer = new MutationObserver(showHideTabbar);        
observer.observe(document.querySelector('#tabbrowser-tabs'), {attributes: true});

Alles anzeigen

PS:

Deinen doppelten Thread habe ich gelöscht.

NoNameNeeded

Danke, aber das Script hat scheinbar keine sichtbaren Auswirkungen.

Dürfte wohl an den ganzen anderen css-Dateien liegen.

2002Andreas

Zitat von NoNameNeeded

das Script hat scheinbar keine sichtbaren Auswirkungen.

Siehe meine Screenshots, das Script funktioniert einwandfrei.

Zitat von NoNameNeeded

Dürfte wohl

Das kann gut sein.

NoNameNeeded

Ich glaube dir, dass das Script funktioniert.

Die css-Datei ganz oben würde wohl auch funktionieren.

Nur irgendwas in den ganzen anderen css-Dateien macht dem ganzen leider einen Strich durch die Rechnung.

Trotzdem danke für das Script, hat man wenigstens die Auswahl zw. css-Datei und Script...;)

2002Andreas

Zitat von NoNameNeeded

Nur irgendwas

Die Tableiste wurde nach unten verschoben, darum funktioniert das Script bei dir nicht.

NoNameNeeded

Kann auch sein.

Wobei, immerhin verschwinden ja die Tabs, nur die Leiste an sich bleibt.

2002Andreas

In dem Code /* TABS: height */ sind auch einige komische Einträge:

xbackground-image: url("Kopie von ie2.jpg") !important;

Das x vorne habe ich so noch nie gesehen.

Zeile 58, 98 fehlt die Abschlussklammer.

Zeile 75 passt so auch nicht.

Das habe ich so mit ## auch noch nie gesehen wie in Zeile 111.

## top: var(--tabbar-top) !important;

grisu2099

Der gesamte Code sieht irgendwie zusammengestückelt aus - inklusive falsch gesetzter Zeichen und Klammern.

Kein Wunder, wenn da nix funktioniert...

NoNameNeeded

Ja, da wirst du einiges finden, was du noch nie gesehen hast....:D

Die Sache ist die: Ich selbst habe ja keine Ahnung von den ganzen css-Codes.

Das alles kommt aus einem "Theme" für Firefox 60+, das musste ich aber alles anpassen weil ich die Url-Bar in eine eigene Leiste verschoben habe.

Und das bedeutete extrem viel ausprobieren usw. und um den erst mühsam zusammengklaubten Code nicht direkt wieder löschen zu müssen, habe ich ihn zum Teil mit einem x oder auch mit einer zweiten # auskommentiert.

Typischerweise wird das wohl mit /* und */ gemacht aber das ist mir zu aufwendig.

Eine fehlende Klammer ist aber wohl einfach nur ein Versehen und wurde nicht bewusst von mir so gemacht, die habe ich jetzt auch hinzugefügt.

grisu2099

Zitat von NoNameNeeded

habe ich ihn zum Teil mit einem x oder auch mit einer zweiten # auskommentiert.

Dann kann da auch nichts funktionieren...

NoNameNeeded

Das was mit ## oder mit einem x beginnt SOLL ja auch nicht funktionieren, das war der Grund warum ich es gemacht habe.

Ich hätte die Zeile auch einfach löschen können, habe ich aber sicherheitshalber nicht getan.

Sören Hentzschel

Wenn etwas nicht wirken soll, kommentiere den Code aus oder lösche ihn. Syntax-Fehler einzubauen ist kontraproduktiv und führt höchstens dazu, dass auch anderer Code nicht mehr funktioniert, der weiterhin funktionieren soll.

NoNameNeeded

Meiner bisherigen, sicher bescheidenen Erfahrung nach, sind diese Syntaxfehler nicht ganz so schlimm.

Der darunter- und darüberliegende Code funktionieren trotzdem noch.

Wie gesagt, ich finde es ein bisschen umständlich jeweils am Anfang und am Ende der Zeile /* und */ einfügen zu müssen.

Aber ich werde das beizeiten der Ordnung halber wohl machen.

milupo

Zitat von NoNameNeeded

Aber ich werde das beizeiten der Ordnung halber wohl machen.

Mache das, irgendwann weißt du vielleicht nicht mehr, warum du falschen Code drin stehen hast. Da soll dann vielleicht wieder etwas funktionieren und es funktioniert aber nicht, und du weißt dann plötzlich nicht, warum es nicht funktioniert. Bequemlichkeit ist nicht immer eine gute Lösung. Außerdem: Ich weiß ja nicht wieviele Zeilen nicht wirken sollen, aber einmal /* ... */ hineinschreiben ist ja wohl keine Schwerstarbeit.

Sören Hentzschel

Zitat von NoNameNeeded

Meiner bisherigen, sicher bescheidenen Erfahrung nach, sind diese Syntaxfehler nicht ganz so schlimm.

Syntaxfehler können sich durchaus auf nachfolgenden Code auswirken und selbst wenn es nicht so wäre, gibt es keinen einzigen Grund, so etwas zu machen. Du sparst dir damit dem gegenüber, es einfach korrekt statt falsch zu machen, überhaupt nichts. Alleine dass bei dir andauernd irgendetwas nicht funktioniert, was bei allen anderen funktioniert, sollte dir dahingehend zu denken geben.

.DeJaVu

Das mit Kuddelmuddel im CSS und der Ablieferung vollständiger Informationen hatten wir schon mal bei ihm. Wenn man schon weiss und wiederholend bekennt, dass man von CSS keine Ahnung hat, warum fragt man vorher nicht? Ich meine auch, dass wir sein CSS mal sortiert hatten, wie auch immer.

Was jetzt nochmal erschwerend hinzukommt, dass hier CSS von anno dazumal v61 genutzt wird, dass bedingt bis gar nicht zu einem aktuellen Firefox passt, Mozilla hat inzwischen mehrfach sein CSS zu den Tabs verändert. Darauf wurde auch vorhin schon hingewiesen, dass Aris sein Code entsprechend neuer und vor allem umfangreicher ist, das wird seine Gründe haben. Und wenn dann noch irgendein Script dazwischenspringt, von dem man auch nicht genau weiss, auf welchem Stand es basiert - autsch.

Lasst euch doch nicht bekloppt machen.

NoNameNeeded

Wie gesagt, ich werde das machen.

Aber die Wahrscheinlichkeit, dass ich irgendwann nicht mehr weiß was xbackground-image zu bedeuten hat, halte ich für gering.

Zitat von milupo

Außerdem: Ich weiß ja nicht wieviele Zeilen nicht wirken sollen,

Meiner wie gesagt sehr geringen Erfahrung nach gilt das x oder # dann entweder für die jeweilige Zeile, wenn diese durch ein ; von anderen getrennt ist oder gleich für das gesamte "Ding", also z.B. das hier funktioniert dann gar nicht:

CSS

##bookmarks-toolbar-items {
position: absolute !important; 
top: 70px !important;
  margin-top: 0px !important;
    height: 35px !important;
    padding: 2px !important;
}

Aber wie gesagt, mir ist ja klar, dass man das so normalerweise nicht macht, ich hab's aber der Bequemlichkeit wegen mal so gemacht und gelobe Besserung...:D

Update (eigentlich ein neues Posting, wurde aber mit dem alten zusammengefügt)

Leute, dann lasst es einfach.

Ich hab keine Lust mich dafür zu rechtfertigen, dass ich nur sehr wenig Ahnung von css habe und daher nur mit viel Herumprobieren zum Ziel komme.

Dass dabei auch Fehler passieren ist wohl normal (fehlende Klammern) aber jetzt darüber zu sinnieren wie sehr sich "xtop: 5px" negativ auswirkt, bringt glaub' ich nix.

Ich habe wirklich größtes Verständnis dafür, wenn sich niemand antun will aus dem Code-Wirrwarr herauszulesen was zu machen wäre, damit die Tab-Leiste ausgeblendet wird, überhaupt keine Frage.

Aber irgendwelche Belehrungen und Mutmaßungen (DESWEGEN geht bei dir nie was...) muss ich mir nicht anhören.

Dann betrachtet diesen Thread bitte als erledigt.

Zitat von .DeJaVu

Wenn man schon weiss und wiederholend bekennt, dass man von CSS keine Ahnung hat, warum fragt man vorher nicht?

Um ehrlich zu sein, wegen Leuten wie dir.

Oder auch wegen Postings wie diesem hier:

Zitat von Gabbo

Ok, ich gebe auf.
Im Prinzip geht's eben in die falsche Richtung...
Viel Glück mit Deinem Lösungsansatz! Versuch das! Das Resultat wird Deinen Lernprozess optimieren. Und ja, vielleicht solltest Du mal was selbst machen.

...als ob ich nicht stunden- und wochenlang damit verbracht hätte css-Codeschnipsel auszuprobieren und zusammenzufügen.

grisu2099

Dir ist echt nicht mehr zu helfen...

Einerseits fragst du hier, warum dies und jenes nicht funktioniert. Wenn man es dir dann erklären will, nimmst du es nicht an, weil es nicht deinen Vorstellungen entspricht.

Dazu paßt auch dein stures Festhalten an Windos7/WindowsServer2008.

Aber tröste dich: Von mir wirst du keine Hilfe mehr zu erwarten haben!

AngelOfDarkness

Zumal einige Editoren markierte Bereiche per Rechtsklick oder per Funktion ausdokumentieren können und man dazu nicht "umständlich" was tippen müsste.

Tabbar verstecken bei nur einem Tab

Ähnliche Themen

Sitzungswiederherstellung beim Start von Firefox

Aus einem UC Script heraus auf das innerHTML oder auch outerHTML zugreifen

Wie Fenster als Tab organisieren?

Problem bei Twitter

shadow-root Scrollleiste Tabbar

Lesezeichen löschen & Sucheingabe neuer Tab