Tabbreite dynamisch an Tabtext anpassen

Arsen

Hallo,

bei mir ist die Tabbreite über CSS begrenzt.

CSS

/* Tabbreite tab max-width */
.tabbrowser-tab[fadein]:not([pinned]) {
   max-width: 150px !important;
   overflow: hidden !important;

Ist es ev. möglich, die Tabbreite dem Tab Text anzupassen? Also wenn der Tab Text zb. "camp-firefox.de" lautet, wird der Text abgeschnitten und der Tab ist 150px breit. Lautet der Tab text aber zb. "Fefes Blog", könnte der Tab auch schmaler sein und man hat mehr Platz in der Tableiste.

grisu2099

Teste bitte folgende Variante:

CSS

/* Tabbreite tab max-width */
.tabbrowser-tab[fadein]:not([pinned]) {
	min-width: 80px !important;
	max-width: 150px !important;
	overflow: hidden !important;

Evtl. die Mindestbreite noch verändern...

Arsen

Ich kopiere deinen code und überschreiben meinen. Dann speichern (Notepad++) und Fx neu starten. Das ist doch richtig so, oder? Es ändert sich leider nichts an der Breite, auch wenn ich die Mindestbreite nur auf 50px stelle.

Sören Hentzschel

Mit den CSS-Selektoren bei den Tabs muss man in Zukunft echt aufpassen. Es gibt jetzt schließlich auch noch vertikale Tabs sowie Tabgruppen und in der Form verursacht der genannte Selektor für beide Features Probleme der Kategorie „Unbenutzbarkeit“. Hier eine Version, die sich nur auf die horizontale Tableiste und nicht auf Tabgruppen auswirkt:

CSS

@media not (-moz-bool-pref: 'sidebar.verticalTabs') {
  .tabbrowser-tab[fadein]:not([pinned]) {
    min-width: 80px !important;
    max-width: 120px !important;

    tab-group[collapsed] > & {
      min-width: 0 !important;
      max-width: 0 !important;
    }
  }
}

Alles anzeigen

Basierend auf dem Code in Beitrag #2, der Wunsch der dynamischen Breitenanpassung ist auch in meinem Code nicht umgesetzt.

Arsen

Das ändert die Breite fest auf 120px. Welche Funktion hat denn der Code min-width: 80px !important; aus #2 und #4?

Hier ändert sich da nichts, die Tabbreite orientiert sich nur an max-width: 120px !important;, bzw. was man da einstellt.

Achso, das hab ich nicht erwähnt, es geht mir ausschliesslich um der horizontale Tableiste.

grisu2099

Zitat von Arsen

es geht mir ausschliesslich um der horizontale Tableiste.

Dann nimm auf jeden Fall den Code aud #4

Teste mit anderen Werten für min-width...

2002Andreas

Zitat von grisu2099

Dann nimm auf jeden Fall den Code aud #4

Zitat von Sören Hentzschel

der Wunsch der dynamischen Breitenanpassung ist auch in meinem Code nicht umgesetzt.

grisu2099

Neuer Versuch:

CSS

@media not (-moz-bool-pref: 'sidebar.verticalTabs') {
  .tabbrowser-tab[fadein]:not([pinned]) {
  	flex: 0 1 auto !important;
    min-width: 80px !important;
    max-width: 120px !important;

    tab-group[collapsed] > & {
      min-width: 0 !important;
      max-width: 0 !important;
    }
  }
}

Alles anzeigen

2002Andreas

Zitat von grisu2099

Neuer Versuch:

Das funktioniert.

Ich würde noch dieses zusätzlich einfügen:

CSS

.tabbrowser-tab > .tab-stack > .tab-content > .tab-close-button {
  padding-inline-start: 0px !important;
  width: unset !important;
}

dadurch verändern sich die schmaleren Tabs nicht bei hover.

Ohne den Zusatz:

Mit Zusatz:

Arsen

Ja, das geht in die richtige Richtung. Die Tabbreite passt sich im gesteckten Rahmen an den Tabtext an. Der Schliessen-Button ist aber nur noch auf dem letzten Tab sichtbar, das sollte nicht sein.

2002Andreas

Zitat von Arsen

Der Schliessen-Button ist aber nur noch auf dem letzten Tab sichtbar

Siehe meine .gifs, da ist das nicht so.

Nutzt du noch andere Codes?

Arsen

Zitat von 2002Andreas

Nutzt du noch andere Codes?

Ja, ich meine 95% ist von dir. Willste mal sehen, ob sich da was gegeseitig stört?

Das ist der Code den ich vor der Breitenanpassung verwendet habe:

CSS

#urlbar[open] > #urlbar-background {
   margin-top: 4px !important;
   margin-bottom: 4px !important;
   margin-left: 5px !important;
   margin-right: 5px !important;
   border: 2px solid #083469 !important;
   border-radius: 2px !important;
   box-shadow: none !important;
}

#urlbar[focused] > #urlbar-background{
   --toolbar-field-focus-border-color: transparent !important;
   border: 2px solid #083469 !important;
   border-radius: 2px !important;
   box-shadow: none !important;
}

/*Adress und Suchfeld farblich einstellen*/
#urlbar ::selection,
#searchbar ::selection {
   color: white !important;
   background: #083469 !important;
}

#urlbar-background {
   border-radius: 4px !important;;
}

#urlbar[breakout][breakout-extend][breakout-extend-animate] > #urlbar-background {
   animation-name: none !important;
}

#urlbar[breakout][breakout-extend] > #urlbar-background {
   box-shadow: none !important;
}

/*Popup-Menü wird ausgeblendet wenn Suche über Adressleiste erfolgt*/ 
.urlbarView {
   display: none !important;
}

#PopupAutoCompleteRichResult {
   display: none !important;
}

#searchbar:focus-within {
   --toolbar-field-focus-border-color: transparent !important;
   border: 2px solid #083469 !important;
   border-radius: 2px !important;
}

/*Abstände der Einträge in Menüs wieder schmaler*/
menupopup > menuitem,
menupopup > menu {
   padding-block: 1px !important;
   padding-inline-start: 14px !important;
   font-size: 13px !important;
}

/*Anpassung der Schriftgrösse Menüleiste */
#main-menubar > menu {
   font-size: 14px !important;
}

/*Mehrzeilige Lesezeichen-Symbolleiste*/ 
#PersonalToolbar {
   max-height: calc(19px * 3) !important;
}
    
#personal-bookmarks,
#PlacesToolbar,
#PlacesToolbar > hbox {
   display: block !important;
}
    
#PersonalToolbar toolbarbutton {
   min-height: 19px !important;
   max-height: 19px !important;
}
    
#PlacesToolbarItems {
   max-height: 57px!important;
   display: flex!important;
   flex-wrap: wrap!important;
   overflow-x: visible!important;
   overflow-y: auto!important;
}
    
#PlacesToolbar,
#PersonalToolbar > scrollbar {
   -moz-window-dragging: no-drag !important;
}
 
#PlacesToolbar #PlacesChevron {
   display: none !important;
}
	

/* Tabbreite tab max-width */
.tabbrowser-tab[fadein]:not([pinned]) {
   max-width: 150px !important;
   overflow: hidden !important;
}

/*Höhe der Tabs*/
.tabbrowser-tab {
   min-height: 32px !important;
   max-height: 32px !important;
   box-shadow: none !important; 
}

/*Lautsprechersymbol auf Tab größer und blau*/
.tab-icon-overlay {
   fill: #083469 !important;
   transform: scale(1.3) !important;
}  

/*Tab schließen Button HG bei hover (background) und  x (fill) je nach Farbe*/
.tab-close-button[fadein]:hover {
   fill: white !important;
   background: #70100c !important;
}

/*Keine Einblendungen bei Hover über Tab*/
#tab-preview-panel {
   display: none !important;
}

/*Eckige Tabs ohne HG Schatten*/
.tab-background {
   box-shadow: none !important;
   border-radius: 2px !important;
}

/*Aktiver Tab HG Farbeinstellung*/
.tabbrowser-tab[visuallyselected] .tab-background {
   background: #083469 !important;
}

/*Neuer Tab Button ausblenden*/
#TabsToolbar #tabs-newtab-button {
  display: none !important;   
}

/* Visuelle Anzeige des Seitenladezustands in der Kopfzeile der Tabs*/
/* progress-bar page loading in the tab header */
.tabbrowser-tab:not([usercontextid]) > .tab-stack > .tab-background > .tab-context-line {
   opacity: 0;
   background-color: #2A970A;
   height: 3px;	
}

.tabbrowser-tab:is([busy], [progress]) > .tab-stack > .tab-background > .tab-context-line {
   opacity: 1;
   transform-origin: left center;
   animation: 2s ease-in-out scale;
}

.tabbrowser-tab[bursting] > .tab-stack > .tab-background > .tab-context-line {
   transition: opacity 2s ease-out;
}

@keyframes scale {
   0% {transform: scaleX(0);}
   100% {transform: scaleX(1);}
}

#TabsToolbar {
    position: absolute;
    display: block;
    bottom: 0;
    width: 100vw;
}

#navigator-toolbox {
    position: relative;
    padding-bottom: calc( var(--tab-min-height) + 8px );
}
       

/*...................Ab hier nur Privater Modus...................*/

/* Das lila Icon für privaten Modus oben rechts eingefügt */
#main-window[privatebrowsingmode=temporary] #PanelUI-button::before {
    margin-left: 0 !important;
    margin-right: 0 !important;
    content: '' !important;
    display: block !important;
    width: 20px !important;
    height: 30px !important;
    background: url("chrome://global/skin/icons/indicator-private-browsing.svg") !important;
    background-repeat: no-repeat !important;
    background-position: 0 8px !important;
    background-size: 25px 17px !important;
}

/* Der neue zusätzliche Eintrag: Privater Modus unter dem Tab entfernt */  
.private-browsing-indicator-with-label {
    display: none !important;
}

Alles anzeigen

so sieht er jetzt aus:

CSS

#urlbar[open] > #urlbar-background {
   margin-top: 4px !important;
   margin-bottom: 4px !important;
   margin-left: 5px !important;
   margin-right: 5px !important;
   border: 2px solid #083469 !important;
   border-radius: 2px !important;
   box-shadow: none !important;
}

#urlbar[focused] > #urlbar-background{
   --toolbar-field-focus-border-color: transparent !important;
   border: 2px solid #083469 !important;
   border-radius: 2px !important;
   box-shadow: none !important;
}

/*Adress und Suchfeld farblich einstellen*/
#urlbar ::selection,
#searchbar ::selection {
   color: white !important;
   background: #083469 !important;
}

#urlbar-background {
   border-radius: 4px !important;;
}

#urlbar[breakout][breakout-extend][breakout-extend-animate] > #urlbar-background {
   animation-name: none !important;
}

#urlbar[breakout][breakout-extend] > #urlbar-background {
   box-shadow: none !important;
}

/*Popup-Menü wird ausgeblendet wenn Suche über Adressleiste erfolgt*/ 
.urlbarView {
   display: none !important;
}

#PopupAutoCompleteRichResult {
   display: none !important;
}

#searchbar:focus-within {
   --toolbar-field-focus-border-color: transparent !important;
   border: 2px solid #083469 !important;
   border-radius: 2px !important;
}

/*Abstände der Einträge in Menüs wieder schmaler*/
menupopup > menuitem,
menupopup > menu {
   padding-block: 1px !important;
   padding-inline-start: 14px !important;
   font-size: 13px !important;
}

/*Anpassung der Schriftgrösse Menüleiste */
#main-menubar > menu {
   font-size: 14px !important;
}

/*Mehrzeilige Lesezeichen-Symbolleiste*/ 
#PersonalToolbar {
   max-height: calc(19px * 3) !important;
}
    
#personal-bookmarks,
#PlacesToolbar,
#PlacesToolbar > hbox {
   display: block !important;
}
    
#PersonalToolbar toolbarbutton {
   min-height: 19px !important;
   max-height: 19px !important;
}
    
#PlacesToolbarItems {
   max-height: 57px!important;
   display: flex!important;
   flex-wrap: wrap!important;
   overflow-x: visible!important;
   overflow-y: auto!important;
}
    
#PlacesToolbar,
#PersonalToolbar > scrollbar {
   -moz-window-dragging: no-drag !important;
}
 
#PlacesToolbar #PlacesChevron {
   display: none !important;
}
	

@media not (-moz-bool-pref: 'sidebar.verticalTabs') {
  .tabbrowser-tab[fadein]:not([pinned]) {
  	flex: 0 1 auto !important;
    min-width: 80px !important;
    max-width: 120px !important;

    tab-group[collapsed] > & {
      min-width: 0 !important;
      max-width: 0 !important;
    }
  }
}

.tabbrowser-tab > .tab-stack > .tab-content > .tab-close-button {
  padding-inline-start: 0px !important;
  width: unset !important;
}

/*Höhe der Tabs*/
.tabbrowser-tab {
   min-height: 32px !important;
   max-height: 32px !important;
   box-shadow: none !important; 
}

/*Lautsprechersymbol auf Tab größer und blau*/
.tab-icon-overlay {
   fill: #083469 !important;
   transform: scale(1.3) !important;
}  

/*Tab schließen Button HG bei hover (background) und  x (fill) je nach Farbe*/
.tab-close-button[fadein]:hover {
   fill: white !important;
   background: #70100c !important;
}

/*Keine Einblendungen bei Hover über Tab*/
#tab-preview-panel {
   display: none !important;
}

/*Eckige Tabs ohne HG Schatten*/
.tab-background {
   box-shadow: none !important;
   border-radius: 2px !important;
}

/*Aktiver Tab HG Farbeinstellung*/
.tabbrowser-tab[visuallyselected] .tab-background {
   background: #083469 !important;
}

/*Neuer Tab Button ausblenden*/
#TabsToolbar #tabs-newtab-button {
  display: none !important;   
}

/* Visuelle Anzeige des Seitenladezustands in der Kopfzeile der Tabs*/
/* progress-bar page loading in the tab header */
.tabbrowser-tab:not([usercontextid]) > .tab-stack > .tab-background > .tab-context-line {
   opacity: 0;
   background-color: #2A970A;
   height: 3px;	
}

.tabbrowser-tab:is([busy], [progress]) > .tab-stack > .tab-background > .tab-context-line {
   opacity: 1;
   transform-origin: left center;
   animation: 2s ease-in-out scale;
}

.tabbrowser-tab[bursting] > .tab-stack > .tab-background > .tab-context-line {
   transition: opacity 2s ease-out;
}

@keyframes scale {
   0% {transform: scaleX(0);}
   100% {transform: scaleX(1);}
}

#TabsToolbar {
    position: absolute;
    display: block;
    bottom: 0;
    width: 100vw;
}

#navigator-toolbox {
    position: relative;
    padding-bottom: calc( var(--tab-min-height) + 8px );
}
       

/*...................Ab hier nur Privater Modus...................*/

/* Das lila Icon für privaten Modus oben rechts eingefügt */
#main-window[privatebrowsingmode=temporary] #PanelUI-button::before {
    margin-left: 0 !important;
    margin-right: 0 !important;
    content: '' !important;
    display: block !important;
    width: 20px !important;
    height: 30px !important;
    background: url("chrome://global/skin/icons/indicator-private-browsing.svg") !important;
    background-repeat: no-repeat !important;
    background-position: 0 8px !important;
    background-size: 25px 17px !important;
}

/* Der neue zusätzliche Eintrag: Privater Modus unter dem Tab entfernt */  
.private-browsing-indicator-with-label {
    display: none !important;
}

Alles anzeigen

2002Andreas

Zitat von Arsen

ob sich da was gegeseitig stört?

Das liegt an dem neuen Code für die flexible Breite der Tabs.

Füg das bitte noch zusätzlich ein:

CSS

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

oder entfern mal den ganzen Eintrag, und teste:

Auch Zeile 102 kann raus, dann passt sich die Breite genau an den Tabtext an:

Arsen

Ja, das funktioniert! Vielen Dank euch.

Mir wurde wurde bestens geholfen!

2002Andreas

Zitat von Arsen

Ja, das funktioniert!

Zitat von Arsen

Vielen Dank euch.

Was mich davon betrifft: Gern geschehen

Arsen

oh, ich war zu spät und muus jetzt weg, die warten schon. tetse später...

Tabbreite dynamisch an Tabtext anpassen

Ähnliche Themen

MultiRowTabsLiteforFx – Fehlersuche und Kompaktierung

"Neues", altes Appmenu. Update, und bräuchte Hilfe!

Themes verändern auch Text in der Tableiste