Mehrzeilige Tableiste CSS Code

Platos

Ich hätte eine Frage bezüglich dieses Scripts:

In Post 1 steht, das Script ist für Leute, die sich nicht mit CSS auseinander setzen wollen. Und ich glaube, dieses Projekt wurde früher nur mit CSS umgesetzt und später dann mit javascript gemacht, oder ? Weil ich wäre mit CSS sehr zufrieden.

Weil wenn ich mir das Script anschaue, sind das schon seeeehr viele Zeilen. Und ich will eig. nur 2 Reihen an Tabs haben, mehr nicht. Keine speziellen Zusatzfunktionen wie scrollen oder sowas. Daher frage ich mich: Ist das nicht etwas "schlanker" möglich ? Also eben nur mit CSS scripts?

Ich bin mir nicht ganz sicher, ob ich das hier fragen soll oder eine eigene Frage auchmachen soll.

2002Andreas

Zitat von Platos

oder eine eigene Frage auchmachen soll.

In diesem Fall wäre das besser gewesen.

Darum mache ich das jetzt mal.

CSS

/* Tableiste mehrreihig unten */

@-moz-document url(chrome://browser/content/browser.xhtml) {
    
:root {
   --tab-min-height: 36px !important; 
}

:root #tabbrowser-tabs {
   --tab-min-height: 35px !important; 
} 

/* Feste Tabbreite */
.tabbrowser-tab:not([pinned]) {
   min-width: 145px !important;
   max-width: 145px !important;
}

#titlebar {
   -moz-box-ordinal-group: 2 !important; /*bis Fx 112*/
   order: 2 !important; /*ab Fx 113*/
}

/* Abstand nach oben - unten, und Höhe der Tableiste */
#titlebar {
   margin-top: -10px !important;
   margin-bottom: -7px !important;
}

#toolbar-menubar {
   position: fixed;
   display: inline-flex;
}

[sizemode="maximized"]:not([tabsintitlebar="true"]) #toolbar-menubar,
[sizemode="normal"] #toolbar-menubar {
   top: 1px;
}

[sizemode="maximized"] #toolbar-menubar {
   top: 8px;
}

#main-window[tabsintitlebar="true"] #navigator-toolbox:not([inFullscreen="true"]) {
   border-top: solid 39px transparent !important;
}

#main-window:not([tabsintitlebar="true"]) #navigator-toolbox:not([inFullscreen="true"]) {
   border-top: solid 34px transparent !important;
}

[tabsintitlebar="true"] #navigator-toolbox {
   -moz-window-dragging: drag;
}

#navigator-toolbox:not([style^="margin-top:"])[style=""][inFullscreen="true"] #window-controls,
[tabsintitlebar="true"] .titlebar-buttonbox-container {
   display: block;
   position: fixed;
   right: 0;
}

[tabsintitlebar="true"][sizemode="normal"] .titlebar-buttonbox-container {
   top: 1px;
}

[tabsintitlebar="true"][sizemode="maximized"] .titlebar-buttonbox-container {
   top: 8px;
}

#navigator-toolbox:not([style^="margin-top:"])[style=""][inFullscreen="true"] #window-controls {
   top: 0;
}

#navigator-toolbox[inFullscreen="true"] #nav-bar {
   padding-right: 109px !important;
}

box[class="scrollbox-clip"][orient="horizontal"],
tabs > arrowscrollbox {
   display: block;
   contain: none !important;
}

/* Mehrzeilige Tableiste, bei mehr als 2 Zeilen erscheint eine Scrollbar */
scrollbox[part][orient="horizontal"] {
   display: flex;
   flex-wrap: wrap;
   max-height: calc(var(--tab-min-height) * 3); /* Anzahl der Tabzeilen = 3 Zeilen */
   overflow-x: hidden;
   overflow-y: auto;
}

tabs tab[fadein]:not([pinned]) {
   flex-grow: 1;
}

tabs tab,.tab-background {
   height: var(--tab-min-height);
   overflow: hidden;
}

tab > .tab-stack {
   width: 100%;
}

box[class="scrollbox-clip"][orient="horizontal"] {
   -moz-window-dragging: no-drag;
}

hbox.titlebar-spacer,
#alltabs-button,
tabs tab:not([fadein]) {
   display: none; 
}
}

Alles anzeigen

Nachteil bei einem CSS Code, die Tabs können nicht beliebig verschoben werden.

Platos

Danke für die Antwort und sorry, manchmal ist man sich nicht sicher, wo das hingehört.

Was meinst du denn damit, dass die Tabs nicht "beliebig" verschoben werden können? Kann ich dann die Tabs nicht mehr verschieben?

2002Andreas

Zitat von Platos

Kann ich dann die Tabs nicht mehr verschieben?

Das geht schon, aber eben nicht so gut wie mit dem Skript.

Zitat von Platos

manchmal ist man sich nicht sicher, wo das hingehört.

Im Zweifelsfall immer einen eigenen Thread eröffnen.

Platos

Ok, danke ich werde es mal ausprobieren. Wenn es nicht so gut geht, wie ich es mir erhoffe, kann ich es dann immer noch mit dem javascript probieren.

2002Andreas

Zitat von Platos

immer noch mit dem javascript probieren.

Oder von hier ein Skript nehmen:

userChrome.js/Multirowtabs/Firefox-114 at master · Endor8/userChrome.js

Skripte für die Firefox-Erweiterung userChromeJS. Contribute to Endor8/userChrome.js development by creating an account on GitHub.

github.com

2002Andreas

Zitat von 2002Andreas

Oder von hier ein Skript nehmen:

Hier habe ich mal eins etwas verändert:

JavaScript

// ==UserScript==
// @name           zzzz-MultiRowTab_LiteforFx48.uc.js
// @namespace      http://space.geocities.yahoo.co.jp/gl/alice0775
// @description    Experimentelle CSS Version für Mehrzeilige Tableiste
// @include        main
// @compatibility  Firefox 113
// @author         Alice0775
// @version        2016/08/05 00:00 Firefox 48
// @version        2016/05/01 00:01 hide favicon if busy
// @version        2016/03/09 00:01 Bug 1222490 - Actually remove panorama for Fx45+
// @version        2016/02/09 00:01 workaround css for lwt
// @version        2016/02/09 00:00
// ==/UserScript==
"use strict";
MultiRowTabLiteforFx();
function MultiRowTabLiteforFx() {

    var css =` /* USER_SHEET */
    @-moz-document url-prefix("chrome://browser/content/browser.xhtml") {

    /* Symbolleiste Sortieren */
    #toolbar-menubar { order: 1; } /* Menüleiste */
    #nav-bar         { order: 2; } /* Navigationsleiste */
    #PersonalToolbar { order: 3; } /* Lesezeichenleiste */
    #titlebar        { order: 4; } /* Tableiste */

    /* Anpassung der Symbolleiste */
    #titlebar,#tabbrowser-tabs { appearance: none !important; }

    /* Anpassung für Titelleistenschaltflächen */
    #nav-bar > .titlebar-buttonbox-container .titlebar-button { width: 46px !important; }
    #toolbar-menubar:not([inactive]) ~ #nav-bar:not([inFullscreen]) > .titlebar-buttonbox-container { display: none !important; }

    /* Mehrzeilige Tableiste */
    box.scrollbox-clip[orient="horizontal"] > scrollbox {
      flex-wrap: wrap !important;
      max-height: calc(calc(8px + var(--tab-min-height)) * 3); /* Anzahl der Tabzeilen(Standard = 3 Zeilen) */
      overflow-x: hidden !important;
      overflow-y: auto !important;
    }
    
    .tabbrowser-tab:not([pinned]) {
    flex-grow: 0 !important;
    min-width: 180px !important; /*Feste Breite für die Tabs, kann geändert werden*/
    }

    *|*:root { 
    --tab-toolbar-navbar-overlap: 0 !important;  
    --tab-min-height: 28px !important;
    }
    
    /*Tabtext wird am Ende nicht ausgeblendet*/
    .tab-label-container[textoverflow][labeldirection=ltr]:not([pinned]),
    .tab-label-container[textoverflow]:not([labeldirection]):not([pinned]):-moz-locale-dir(ltr) {
    mask-image: none !important;
    } 

    /*Inaktiver Tab mit Rahmen*/
    .tabbrowser-tab:not([visuallyselected="true"]) > .tab-stack > .tab-background {
    border: 1px solid gray !important;  
    }

    /* Ausblenden */
    #alltabs-button { display: none !important; }

    /* Anpassung */
    hbox.titlebar-spacer[type="pre-tabs"] { width: 0px !important; } /* Linker Ziehbereich: Standard 40px  */
    hbox.titlebar-spacer[type="post-tabs"] { width: 0px !important; } /* Rechter Ziehbereich: Standard 40px  */
    /* ↓ Wenn Sie die linke und rechte Seite des CSS-Codes auskommentieren und den CSS-Code aktivieren, 
       können Sie den Ziehbereich links einblenden, der beim Maximieren des Fensters ausgeblendet wird.  */
    /* :root:not([sizemode="normal"]) hbox.titlebar-spacer[type="pre-tabs"] { display: block !important; } */

    /* ↓ Wenn Sie die Auskommentierung links und rechts von unten stehenden CSS-Code entfernen und den CSS-Code aktivieren, 
         können Sie den linken und rechten Ziehbereich einblenden, der im Vollbildmodus ausgeblendet wird. */
    /* :root[inFullscreen] hbox.titlebar-spacer { display: block !important; } */

    } `;
    var sss = Cc['@mozilla.org/content/style-sheet-service;1'].getService(Ci.nsIStyleSheetService);
    var uri = makeURI('data:text/css;charset=UTF=8,' + encodeURIComponent(css));
    sss.loadAndRegisterSheet(uri, sss.USER_SHEET);

    var css =` /* AGENT_SHEET */
    @-moz-document url-prefix("chrome://browser/content/browser.xhtml") {

    /* Bei Überschreitung der angegebenen Zeilenanzahl, mit der Maus,    
       über die dann eingeblendetet Scrolleiste zur gewünschten Zeile wechseln  */
    box.scrollbox-clip > scrollbox[orient="horizontal"] > scrollbar { -moz-window-dragging: no-drag !important; }

    } `;
    var sss = Cc['@mozilla.org/content/style-sheet-service;1'].getService(Ci.nsIStyleSheetService);
    var uri = makeURI('data:text/css;charset=UTF=8,' + encodeURIComponent(css));
    sss.loadAndRegisterSheet(uri, sss.AGENT_SHEET);

    var css =` /* AUTHOR_SHEET */

    /*
    #tabbrowser-arrowscrollbox::part(scrollbox) {
      flex-wrap: wrap !important;
      max-height: calc(calc(8px + var(--tab-min-height)) * 3);
      overflow-x: hidden !important;
      overflow-y: auto !important;
    }
    */

    /* Bildlaufschaltfläche und Abstandshalter in der Schattenwurzel der Tab-Leiste ausblenden */
    #tabbrowser-arrowscrollbox[scrolledtostart]::part(overflow-start-indicator),
    #tabbrowser-arrowscrollbox[scrolledtoend]::part(overflow-end-indicator),
    #tabbrowser-arrowscrollbox::part(scrollbutton-up),
    #tabbrowser-arrowscrollbox::part(scrollbutton-down) { display: none !important; }

    `;
    var sss = Components.classes['@mozilla.org/content/style-sheet-service;1'].getService(Components.interfaces.nsIStyleSheetService);
    var uri = makeURI('data:text/css;charset=UTF=8,' + encodeURIComponent(css));
    sss.loadAndRegisterSheet(uri, sss.AUTHOR_SHEET);

    if(location.href !== 'chrome://browser/content/browser.xhtml') return;

    // Verschieben Sie die Menüleiste an den oberen Rand der Symbolleiste 
    document.getElementById("titlebar").parentNode.insertBefore(document.getElementById("toolbar-menubar"),document.getElementById("titlebar"));

    // Titelleisten Schaltflächen in die Tableiste an den Rechten Rand verschieben
    document.getElementById("nav-bar").appendChild(document.querySelector("#TabsToolbar .titlebar-buttonbox-container"));

    // Tabbar scrollIntoView
    gBrowser.tabContainer.addEventListener("SSTabRestoring", function(event) {event.target.scrollIntoView({behavior: "instant", block: "nearest", inline: "nearest"})}, true);
    gBrowser.tabContainer.addEventListener("TabAttrModified", function(event) {event.target.scrollIntoView({behavior: "instant", block: "nearest", inline: "nearest"})}, true);
    gBrowser.tabContainer.addEventListener("TabMove", function(event) {event.target.scrollIntoView({behavior: "instant", block: "nearest", inline: "nearest"})}, true);

    // drag & drop & DropIndicator

    gBrowser.tabContainer.on_dragover = function(event) {
      var effects = this.getDropEffectForTabDrag(event);

      var ind = this._tabDropIndicator;
      if (effects == "" || effects == "none") {
        ind.hidden = true;
        return;
      }
      event.preventDefault();
      event.stopPropagation();

      var arrowScrollbox = this.arrowScrollbox;

      if (effects == "link") {
        let tab = this._getDragTargetTab(event, { ignoreTabSides: true });
        if (tab) {
          if (!this._dragTime) {
            this._dragTime = Date.now();
          }
          if (Date.now() >= this._dragTime + this._dragOverDelay) {
            this.selectedItem = tab;
          }
          ind.hidden = true;
          return;
        }
      }

      var rect = arrowScrollbox.getBoundingClientRect();
      var newMarginX, newMarginY;
      let newIndex = this._getDropIndex(event);
      let children = this.allTabs;
      if (newIndex == children.length) {
        let tabRect = this._getVisibleTabs().at(-1).getBoundingClientRect();
        if (RTL_UI) {
          newMarginX = rect.right - tabRect.left;
        } else {
          newMarginX = tabRect.right - rect.left;
        }
          newMarginY = tabRect.top - rect.top + tabRect.height / 2 - rect.height / 2;
      } else {
        let tabRect = children[newIndex].getBoundingClientRect();
        if (RTL_UI) {
          newMarginX = rect.right - tabRect.right;
        } else {
          newMarginX = tabRect.left - rect.left;
        }
          newMarginY = tabRect.top - rect.top + tabRect.height / 2 - rect.height / 2;
      }

      ind.hidden = false;
      newMarginX += ind.clientWidth / 2;
      if (RTL_UI) {
        newMarginX *= -1;
      }
      ind.style.transform = "translate(" + Math.round(newMarginX) + "px," + Math.round(newMarginY) + "px)";
    }

    gBrowser.tabContainer.on_drop = function(event) {
      var dt = event.dataTransfer;
      var dropEffect = dt.dropEffect;
      var draggedTab;
      let movingTabs;
      if (dt.mozTypesAt(0)[0] == TAB_DROP_TYPE) {
        // tab copy or move
        draggedTab = dt.mozGetDataAt(TAB_DROP_TYPE, 0);
        // not our drop then
        if (!draggedTab) {
          return;
        }
        movingTabs = draggedTab._dragData.movingTabs;
        draggedTab.container._finishGroupSelectedTabs(draggedTab);
      }

      this._tabDropIndicator.hidden = true;
      event.stopPropagation();
      if (draggedTab && dropEffect == "copy") {
        // copy the dropped tab (wherever it's from)
        let newIndex = this._getDropIndex(event);
        let draggedTabCopy;
        for (let tab of movingTabs) {
          let newTab = gBrowser.duplicateTab(tab);
          gBrowser.moveTabTo(newTab, newIndex++);
          if (tab == draggedTab) {
            draggedTabCopy = newTab;
          }
        }
        if (draggedTab.container != this || event.shiftKey) {
          this.selectedItem = draggedTabCopy;
        }
      } else if (draggedTab && draggedTab.container == this) {
        let oldTranslateX = Math.round(draggedTab._dragData.translateX);
        let tabWidth = Math.round(draggedTab._dragData.tabWidth);
        let translateOffset = oldTranslateX % tabWidth;
        let newTranslateX = oldTranslateX - translateOffset;
        if (oldTranslateX > 0 && translateOffset > tabWidth / 2) {
          newTranslateX += tabWidth;
        } else if (oldTranslateX < 0 && -translateOffset > tabWidth / 2) {
          newTranslateX -= tabWidth;
        }

        let dropIndex;
        if (draggedTab._dragData.fromTabList) {
          dropIndex = this._getDropIndex(event);
        } else {
          dropIndex = this._getDropIndex(event);
         // "animDropIndex" in draggedTab._dragData &&
         // draggedTab._dragData.animDropIndex;
        }
        let incrementDropIndex = true;
        if (dropIndex && dropIndex > movingTabs[0]._tPos) {
          dropIndex--;
          incrementDropIndex = false;
        }

        if (oldTranslateX && oldTranslateX != newTranslateX && !gReduceMotion) {
          for (let tab of movingTabs) {
            tab.setAttribute("tabdrop-samewindow", "true");
            tab.style.transform = "translateX(" + newTranslateX + "px)";
            let postTransitionCleanup = () => {
              tab.removeAttribute("tabdrop-samewindow");

              this._finishAnimateTabMove();
              if (dropIndex !== false) {
                gBrowser.moveTabTo(tab, dropIndex);
                if (incrementDropIndex) {
                  dropIndex++;
                }
              }

              gBrowser.syncThrobberAnimations(tab);
            };
            if (gReduceMotion) {
              postTransitionCleanup();
            } else {
              let onTransitionEnd = transitionendEvent => {
                if (
                  transitionendEvent.propertyName != "transform" ||
                  transitionendEvent.originalTarget != tab
                ) {
                  return;
                }
                tab.removeEventListener("transitionend", onTransitionEnd);

                postTransitionCleanup();
              };
              tab.addEventListener("transitionend", onTransitionEnd);
            }
          }
        } else {
          this._finishAnimateTabMove();
          if (dropIndex !== false) {
            for (let tab of movingTabs) {
              gBrowser.moveTabTo(tab, dropIndex);
              if (incrementDropIndex) {
                dropIndex++;
              }
            }
          }
        }
      } else if (draggedTab) {
        // Move the tabs. To avoid multiple tab-switches in the original window,
        // the selected tab should be adopted last.
        const dropIndex = this._getDropIndex(event);
        let newIndex = dropIndex;
        let selectedTab;
        let indexForSelectedTab;
        for (let i = 0; i < movingTabs.length; ++i) {
          const tab = movingTabs[i];
          if (tab.selected) {
            selectedTab = tab;
            indexForSelectedTab = newIndex;
          } else {
            const newTab = gBrowser.adoptTab(tab, newIndex, tab == draggedTab);
            if (newTab) {
              ++newIndex;
            }
          }
        }
        if (selectedTab) {
          const newTab = gBrowser.adoptTab(
            selectedTab,
            indexForSelectedTab,
            selectedTab == draggedTab
          );
          if (newTab) {
            ++newIndex;
          }
        }

        // Restore tab selection
        gBrowser.addRangeToMultiSelectedTabs(
          gBrowser.tabs[dropIndex],
          gBrowser.tabs[newIndex - 1]
        );
      } else {
        // Pass true to disallow dropping javascript: or data: urls
        let links;
        try {
          links = browserDragAndDrop.dropLinks(event, true);
        } catch (ex) {}

        if (!links || links.length === 0) {
          return;
        }

        let inBackground = Services.prefs.getBoolPref(
          "browser.tabs.loadInBackground"
        );
        if (event.shiftKey) {
          inBackground = !inBackground;
        }

        let targetTab = this._getDragTargetTab(event, { ignoreTabSides: true });
        let userContextId = this.selectedItem.getAttribute("usercontextid");
        let replace = !!targetTab;
        let newIndex = this._getDropIndex(event);
        let urls = links.map(link => link.url);
        let csp = browserDragAndDrop.getCsp(event);
        let triggeringPrincipal =
          browserDragAndDrop.getTriggeringPrincipal(event);

        (async () => {
          if (
            urls.length >=
            Services.prefs.getIntPref("browser.tabs.maxOpenBeforeWarn")
          ) {
            // Sync dialog cannot be used inside drop event handler.
            let answer = await OpenInTabsUtils.promiseConfirmOpenInTabs(
              urls.length,
              window
            );
            if (!answer) {
              return;
            }
          }

          gBrowser.loadTabs(urls, {
            inBackground,
            replace,
            allowThirdPartyFixup: true,
            targetTab,
            newIndex,
            userContextId,
            triggeringPrincipal,
            csp,
          });
        })();
      }

      if (draggedTab) {
        delete draggedTab._dragData;
      }
    }

}

Alles anzeigen

Platos

Danke für die Mühe.

Ist das jetzt quasi so eine Art "schlanke Version" ?

Ich habe kurz bevor du den CSS-Code gepostet hast noch bei github einen code für CSS gefunden (Eig. mehr oder weniger das selbe wie bei deinem oben, nur da hats noch andere Dinge drinn, die z.B die Tabs unter die Adresszeile schieben und ich wollte mir die Arbeit ersparen, die ganzen Zusatzdinge rauszulöschen). Es funktionieren aber beide Codes.

Ich nutze jetzt diesen code (das mit den mehreren Tabreihen geht ab Zeile 53 los):

CSS

/*Ab hier Code, der für neuere Firefoxversionen nötig ist, damit alles wieder richtig positioniert ist. Stand 10.07.2023*/


/*Verändert glaube ich den schwarzen Hintergrund hinter den Tabs. Ist nötig, damit es keinen freien, schwarzen Hintergrund hinter den
Tabs hat, wenn man sie mittels ".tabbrowser-tab" auf z.B 21px begrenzt (sonst ist der Hintergrund weiterhin so gross, wie original) */
#tabbrowser-tabs {
--tab-min-height: 21px !important;
}


/*Keine Abstände um den Tab rum, die durch neuere Firefoxversionen enstanden sind*/
.tab-background {
margin-block: 0px !important;
}


/*verschiebt den "New-Tab"-Button*/
#TabsToolbar .toolbarbutton-1 > .toolbarbutton-icon, #TabsToolbar .toolbarbutton-1 > .toolbarbutton-text, #TabsToolbar .toolbarbutton-1 > .toolbarbutton-badge-stack {
margin-top: -7px !important;
}


/*Ab hier "alter" code*/


/*Verändert die Tabs (nicht den schwarzen Hintergrund hinter den Tabs)*/
#TabsToolbar #tabs-newtab-button {
margin-top: -7px !important;
margin-bottom: -15px !important;
margin-left: -2px !important;
}


/*Verändert die höhe der Browser-Tabs*/
.tabbrowser-tab {
min-height: 21px !important;
max-height: 21px !important;
}
/*Top-Linie beim (aktiven) tab in "solid #429CE3"*/
.tabbrowser-tab[visuallyselected="true"] > .tab-stack > .tab-background {
border-top: 2px solid #429CE3 !important;
}


/*Das ist die Navigationsleite (dort, wo die Url-Leiste, Addonsymbole & Vor-und Zurückbutton sind)*/


#nav-bar {
min-height: 22px !important;
max-height: 22px !important;
margin-top: 0px !important;
}


/* Stand 10.07.2023. Ab hier code für "mehrere Tabreihen" mit 145px "min-width" (sonst verschwindet das Kreuz zum Tabschliessen, wenn die Tabs kleiner sind)*/


/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/multi-row_tabs.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */


/* Makes tabs to appear on multiple lines */
/* Tab reordering will not work and can't be made to work */
/* You can use multi-row_tabs_window_control_patch.css to move window controls to nav-bar*/


/* You might want to move tabs-new-tab-button outside tabs toolbar for smoother behavior */


/* Change the --multirow-n-rows to change maximum number of rows before the rows will start to scroll  */


:root{
--multirow-n-rows: 3;
--multirow-tab-min-width: 100px;
--multirow-tab-dynamic-width: 1; /* Change to 0 for fixed-width tabs using the above width. */
}


/* Scrollbar can't be clicked but the rows can be scrolled with mouse wheel */
/* Uncomment the next line if you want to be able to use the scrollbar with mouse clicks */


/* #tabbrowser-arrowscrollbox{ -moz-window-dragging: no-drag } */


/* Uncommenting the above makes you unable to drag the window from empty space in the tab strip but normal draggable spaces will continue to work */


#tabbrowser-tabs{
min-height: unset !important;
padding-inline-start: 0px !important
}


@-moz-document url(chrome://browser/content/browser.xhtml){
#scrollbutton-up~spacer,
#scrollbutton-up,
#scrollbutton-down{ display: var(--scrollbutton-display-model,initial) }


scrollbox[part][orient="horizontal"]{
display: flex;
flex-wrap: wrap;
overflow-y: auto;
max-height: calc((var(--tab-min-height) + 2 * var(--tab-block-margin,0px)) * var(--multirow-n-rows));
scrollbar-color: currentColor transparent;
scrollbar-width: thin;
scrollbar-gutter: stable;
scroll-snap-type: y mandatory;
}
}


.scrollbox-clip[orient="horizontal"],
#tabbrowser-arrowscrollbox{
overflow: -moz-hidden-unscrollable;
display: inline;
--scrollbutton-display-model: none;
}


.tabbrowser-tab{ scroll-snap-align: start; }


#tabbrowser-tabs .tabbrowser-tab[pinned]{
position: static !important;
margin-inline-start: 0px !important;
}


.tabbrowser-tab[fadein]:not([pinned]){
min-width: 145px !important;
flex-grow: var(--multirow-tab-dynamic-width) !important;
/*
Uncomment to enable full-width tabs, also makes tab dragging a tiny bit more sensible
Don't set to none or you'll see errors in console when closing tabs
*/
/*max-width: 100vw !important;*/
}


.tabbrowser-tab > stack{ width: 100%; height: 100% }


/* remove bottom margin so it doesn't throw off row height computation */
#tabs-newtab-button{ margin-bottom: 0 !important; }


#tabbrowser-tabs[hasadjacentnewtabbutton][overflow="true"] > #tabbrowser-arrowscrollbox > #tabbrowser-arrowscrollbox-periphery > #tabs-newtab-button {
display: flex !important;
align-items: center; /* Fx <112 compatibility */
}


#alltabs-button,
:root:not([customizing]) #TabsToolbar #new-tab-button,
#tabbrowser-arrowscrollbox > spacer,
.tabbrowser-tab::after{ display: none !important }

Alles anzeigen

Soweit funktioniert alles, bis auf etwas: Manchmal, wenn ich die Tabs schliesse in einer Reihe, fällt die Ansicht nach unten. Das Problem ist jetzt, dass diese "scrollbox" höher ist, wie die Tabreihen selbst. D.h es fällt dann ganz nach unten und dort ist "freier Platz", also bei mir schwarzer Hintergrund.

D.h, ich will eig., dass die Scrollbox immer genau! so hoch ist, wie die Tabs (also bei 2 Reihen, soll sie genau so hoch sein wie 2 Tabs, bei 3 Reihen so hoch wie 3 usw).

Im Grunde will ich also gar keine vertikale Scrollfunktion haben. Ich will einfach eine Box haben, die so hoch ist, wie eben die Tabs (natürlich soll sich die Box automatisch vergrössern/verkleinern, wenn mehr Tab-Reihen entstehen).

Geht das irgendwie? Ich blicke da nicht ganz durch.

Also ich denke dieser code sollte die Scrollbox genau so hoch machen, wie es meine Tabreihen sind (tut er aber nicht):

Code

max-height: calc((var(--tab-min-height) + 2 * var(--tab-block-margin,0px)) * var(--multirow-n-rows))

Ich verstehen nur nicht, was ich da jetzt quasi für Werte eingeben muss bzw. wo ich diese variabel-Werte finde (also z.B --multirow-n-rows). Das einzige, was ich weiss ist --tab-min-heigth, denn das habe ich selber schon auf 21px gestellt in meinem code ganz oben.

2002Andreas

Zitat von Platos

Also ich denke dieser code sollte die Scrollbox genau so hoch machen, wie es meine Tabreihen sind (tut er aber nicht):

So sieht das z.B. mit dem CSS Code und 3 Reihen aus:

Bei nur einer Reihe so:

Und im Skript ist das auch nicht anders.

Ab der 3. Reihe wird die Scrollbox erst angezeigt, steht so auch im CSS Code bzw. im Skript:

Code

max-height: calc(var(--tab-min-height) * 3); /* Anzahl der Tabzeilen = 3 Zeilen */

Platos

Hmm, naja bei mir eben schon ab der 2. Reihe und wenn ich rechts die Scrollbar-Leiste mit der Maus (linksklick) bewege, geht das auch schon mit nur einer Tabreihe.

Da der CSS Code von #2 noch einige andere Anpassungen hat und ich nicht weiss, was genau alles da jetzt für die Tabreihe gebraucht wird, habe ich wie gesagt das von github genommen.

Aber auch wenn ich bei "max-height:" das aus #9 nehme, ist das immer noch gleich.

Also wie gesagt: Ich kann mit dem Mausrad scrollen und unterhalb der letzten Tabreihe hat es noch freien Platz, der eben schwarz ist. Dann sehe ich leeren Freiraum. Und manchmal beim löschen von Tabs oder ganzen Tabreihen rutscht mir diese Scrollbox automatisch nach ganz unten (wo eben freier, leerer schwarzer Bereich ist). Dann sehe ich die Tabreihen nicht mehr vollständig.

2002Andreas

Erstmal solltest du dir überlegen, wo die Tableiste sein soll. Oben oder unten?

Zitat von Platos

Ich nutze jetzt diesen code

Warum, ich habe dir doch einen genannt der auch funktioniert.

Zitat von Platos

Ich blicke da nicht ganz durch.

Dann nimm doch den von mir

Zitat von Platos

noch bei github einen code für CSS gefunden

Der funktioniert hier auch nicht.

So sieht das hier mit Tabs oben aus:

CSS

/* Tableiste mehrreihig oben */
    
#tabbrowser-tabs, #tabbrowser-arrowscrollbox, #tabbrowser-tabs[positionpinnedtabs] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[pinned] {
   margin-top: -2px !important;
   margin-bottom: 2px !important;
}

[tabsintitlebar="true"][sizemode="maximized"] #navigator-toolbox {
   padding-top: 10px !important;
}

#titlebar,#tabbrowser-tabs {
   appearance: none !important;
}

[tabsintitlebar="true"] #TabsToolbar > .titlebar-buttonbox-container,
#main-window[inFullscreen="true"] #window-controls {
   display: block;
}

/* Mehrzeilige Tab-Symbolleiste, aktuell sind es 3 Zeilen  */
box[class="scrollbox-clip"][orient="horizontal"],
tabs > arrowscrollbox { 
   display: block; 
   contain: none !important; 
}

scrollbox[part][orient="horizontal"] {
   display: flex;
   flex-wrap: wrap;
   max-height: calc(var(--tab-min-height) * 3);
   overflow-x: hidden;
   overflow-y: auto;
}

#tabbrowser-arrowscrollbox {
   margin-top: -3px !important;
   margin-bottom: -10px !important;
}

:root {
   --tab-min-height: 27px !important; 
}

:root #tabbrowser-tabs {
   --tab-min-height: 25px !important; 
}
    
    /* Feste Breite der einzelnen Tabs wenn gewünscht, sonst entfernen bzw. verbreitern */
.tabbrowser-tab:not([pinned]) {
  flex-grow: 0 !important;
  min-width: 180px !important; /*Feste Breite für die Tabs, kann geändert werden*/
}

*|*:root { 
  --tab-toolbar-navbar-overlap: 0 !important;  
  --tab-min-height: 28px !important;
}

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

tabs tab[fadein]:not([pinned]) {
   flex-grow: 1;
}

/* Buttons/Zwischenräume Ausblenden */
hbox.titlebar-spacer,
#alltabs-button,tabs tab:not([fadein]), 
[class="scrollbutton-up"],
[class="scrollbutton-up"] + spacer,
scrollbox[part][orient="horizontal"] + spacer,
[class="scrollbutton-down"] { 
   display: none; 
}

tab.tabbrowser-tab .tab-background {
   margin-top: -5px !important;
   border: solid 1px hsla(0,0%,50%,.5) !important;
}

tabs tab:after,tabs tab:before { 
   display: none;
}

#TabsToolbar > .titlebar-buttonbox-container {
   display: none !important;
}

Alles anzeigen

Platos

Zitat

Dann nimm doch den von mir

Ja aber da hat es viel Code drinn, der noch andere Dinge verändert und ich weiss nicht, welche Dinge ich nur für das mit den mehreren Tabreihen brauche und welche nicht.

Denn einiges davon gerät in Konflikt mit dem Design, das ich habe, so dass bei mir alles verschoben wird.

Der neue Code von dir (sowie der alte) hat bei mir aber genau das gleiche Problem, wie der von github. Also auch bei dem von dir ist die Scrollbox höher, wie die Tabreihen selber.

Es liegt eig. nicht am Github-Code. Wenn ich nur diese nverwende, funktioniert es. Aber in kombination mit dem Code, den ich sonst noch nutze (alles vor Zeile 53 im Post #8), funktioniert es nicht. Ich weiss nur nicht, warum.

2002Andreas

Zitat von Platos

Denn einiges davon gerät in Konflikt mit dem Design, das ich habe, so dass bei mir alles verschoben wird.

Dann musst du in deinen anderen CSS Codes mal nachsehen, warum das so ist.

Und dort evtl. etwas anpassen.

Zitat von Platos

da dieser mit meinem sontigen Design nicht in Konflikt gerät

Da ich deine anderen Codes nicht kenne, und auch dein Design nicht, kann ich dir dazu nichts weiter sagen.

Hier funktionieren meine CSS Codes und die Skripte einwandfrei.

Platos

Ja , das habe ich gemacht und versuche ich gerade immer noch. ich finde es aber nicht.

Der andere Code ist in Post #8. Also von Zeile 1-52 ist bezüglich des Designs. Alle Zeilen danach sind bezüglich Tabreihen.

Falls das hilft hier noch ein Bild, wie es aussieht mit dem multi-tab und einmal ohne:

2002Andreas

Zitat von Platos

von Zeile 1-52 ist bezüglich des Designs.

Dort sind teilweise die gleichen Einträge enthalten wie in den Skripten bzw. den CSS Codes von mir.

Das kann dann auch nicht funktionieren.

Also musst du dort mal alles rausnehmen, was mit den Tabs zu tun hat.

Ansonsten wird das nie etwas.

Oder kompl. deaktivieren, und dann nur wieder das nehmen, was du noch zusätzlich brauchst.

Platos

Ok, ich habe jetzt jeweils einzelne Codeteile rausgelöscht und geschaut, ob sich das Problem in Luft auflöst. Konnte dann das Problem mit dem leeren Platz lösen und musste dann dafür aber noch an anderen Stellen anpassungen machen. Jetzt ist aber alles perfekt soweit.

Also danke für die ganzen Hinweise und so. Manchmal brauchts bisschen Input von aussen

Hier der Code, falls jemand Interesse hat:

CSS

/*Ab hier Code, der für neuere Firefoxversionen nötig ist, damit alles wieder richtig positioniert ist. Stand 10.07.2023*/


/*Verändert glaube ich den schwarzen Hintergrund hinter den Tabs. Ist nötig, damit es keinen freien, schwarzen Hintergrund hinter den
Tabs hat, wenn man sie mittels ".tabbrowser-tab" auf z.B 21px begrenzt (sonst ist der Hintergrund weiterhin so gross, wie original).
Ist auch wegen den Multi-Tabreihen wichtig, denn der Code arbeitet mit "--tab-min-height" und dieser muss dann so hoch sein, wie meine Tabs. */
#tabbrowser-tabs {
--tab-min-height: 21px !important;
}


/*Keine Abstände um den Tab rum, die durch neuere Firefoxversionen enstanden sind*/
.tab-background {
margin-block: 0px !important;
}


/*verschiebt den "New-Tab"-Button. Darf nicht zu hoch sein die Zahl, sonst hat man bei den Multi-Tabreihen fehler*/
#TabsToolbar .toolbarbutton-1 > .toolbarbutton-icon, #TabsToolbar .toolbarbutton-1 > .toolbarbutton-text, #TabsToolbar .toolbarbutton-1 > .toolbarbutton-badge-stack {
margin-top: -3px !important;
}


/*Ab hier "alter" code*/


/*Verändert die höhe der Browser-Tabs*/
.tabbrowser-tab {
min-height: 21px !important;
max-height: 21px !important;
}
/*Top-Linie beim (aktiven) tab in "solid #429CE3"*/
.tabbrowser-tab[visuallyselected="true"] > .tab-stack > .tab-background {
border-top: 2px solid #429CE3 !important;
}


/*Das ist die Navigationsleite (dort, wo die Url-Leiste, Addonsymbole & Vor-und Zurückbutton sind)*/


#nav-bar {
min-height: 22px !important;
max-height: 22px !important;
margin-top: -5px !important;
}


/* Stand 10.07.2023. Ab hier code für "mehrere Tabreihen" mit 145px "min-width" (sonst verschwindet das Kreuz zum Tabschliessen, wenn die Tabs kleiner sind)*/


/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/multi-row_tabs.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */


/* Makes tabs to appear on multiple lines */
/* Tab reordering will not work and can't be made to work */
/* You can use multi-row_tabs_window_control_patch.css to move window controls to nav-bar*/


/* You might want to move tabs-new-tab-button outside tabs toolbar for smoother behavior */


/* Change the --multirow-n-rows to change maximum number of rows before the rows will start to scroll  */


:root{
--multirow-n-rows: 3;
--multirow-tab-min-width: 100px;
--multirow-tab-dynamic-width: 1; /* Change to 0 for fixed-width tabs using the above width. */
}


/* Scrollbar can't be clicked but the rows can be scrolled with mouse wheel */
/* Uncomment the next line if you want to be able to use the scrollbar with mouse clicks */


/* #tabbrowser-arrowscrollbox{ -moz-window-dragging: no-drag } */


/* Uncommenting the above makes you unable to drag the window from empty space in the tab strip but normal draggable spaces will continue to work */


#tabbrowser-tabs{
min-height: unset !important;
padding-inline-start: 0px !important
}


@-moz-document url(chrome://browser/content/browser.xhtml){
#scrollbutton-up~spacer,
#scrollbutton-up,
#scrollbutton-down{ display: var(--scrollbutton-display-model,initial) }


scrollbox[part][orient="horizontal"]{
display: flex;
flex-wrap: wrap;
overflow-y: auto;
max-height: calc((var(--tab-min-height) + 2 * var(--tab-block-margin,0px)) * var(--multirow-n-rows));
scrollbar-color: currentColor transparent;
scrollbar-width: thin;
scrollbar-gutter: stable;
scroll-snap-type: y mandatory;
}
}


.scrollbox-clip[orient="horizontal"],
#tabbrowser-arrowscrollbox{
overflow: -moz-hidden-unscrollable;
display: inline;
--scrollbutton-display-model: none;
}


.tabbrowser-tab{ scroll-snap-align: start; }


#tabbrowser-tabs .tabbrowser-tab[pinned]{
position: static !important;
margin-inline-start: 0px !important;
}


.tabbrowser-tab[fadein]:not([pinned]){
min-width: 145px !important;
flex-grow: var(--multirow-tab-dynamic-width) !important;
/*
Uncomment to enable full-width tabs, also makes tab dragging a tiny bit more sensible
Don't set to none or you'll see errors in console when closing tabs
*/
/*max-width: 100vw !important;*/
}


.tabbrowser-tab > stack{ width: 100%; height: 100% }


/* remove bottom margin so it doesn't throw off row height computation */
#tabs-newtab-button{ margin-bottom: 0 !important; }


#tabbrowser-tabs[hasadjacentnewtabbutton][overflow="true"] > #tabbrowser-arrowscrollbox > #tabbrowser-arrowscrollbox-periphery > #tabs-newtab-button {
display: flex !important;
align-items: center; /* Fx <112 compatibility */
}


#alltabs-button,
:root:not([customizing]) #TabsToolbar #new-tab-button,
#tabbrowser-arrowscrollbox > spacer,
.tabbrowser-tab::after{ display: none !important }

Alles anzeigen

Also hier noch ein Bild, wie es jetzt aussieht, für Interessierte:

2002Andreas

Zitat von Platos

Jetzt ist aber alles perfekt soweit.

Danke für die Rückmeldung. 👍

Schön dass dein Problem gelöst ist.

2002Andreas

Zitat von Platos

jeweils einzelne Codeteile rausgelöscht

Hier wird die Breite schon angegeben:

Du änderst sie aber selber in einem anderen Code:

Du hättest also nur Zeile 68 ändern müssen.

Platos

Ok, update: Es geht doch nicht xD

Irgendwas, nach Post #8 hat dazu geführt, dass ich jetzt die Tabs nicht mehr frei bewegen kann. Irgendwas geht nicht mehr.

Und zu min-width: Ja aber, das muss ich zuerst aktivieren, indem ich da ein Wert ändere. Da steht in der Beschreibung, es seien dann fixe Tabbreiten, habs noch nicht ausprobiert.

Aber muss zuerst das andere Problem lösen

Denkt man, man hats und schon kommt das nächste Problem^^

2002Andreas

Zitat von Platos

die Tabs nicht mehr frei bewegen kann.

Waagerecht geht, von unten nach oben auch einigermaßen, nur nicht von oben nach unten.

Das hatte ich dir ja am Anfang schon gesagt.

Dann musst du ein Skript nutzen.