FF 57 Mehrzeilige Tab-Leiste

AdE

Hallo Andreas,

bei mir funktioniert das leider nur bedingt:

Zitat von 2002Andreas

Da funken euch andere Codes dazwischen.
Hier gibt es keinen Abstand zwischen den Reihen.
Zwischenablage01.jpg

und sieht vielmehr so aus:
[attachment=0]test.jpg[/attachment]

Unter die jeweiligen Tabs fügt es noch einen großen Zwischenraum ein und rechts einen Scrollbalken.

In meiner Usercromecss habe ich nur nachfolgende weitere Zeilen drin. Ich habe versucht, die wegzulassen, aber auch da ändert sich nichts :cry: Hat jemand vielleicht eine Lösung?

#PersonalToolbar {
-moz-box-ordinal-group: 2 !important;
}
#TabsToolbar {
-moz-box-ordinal-group: 3 !important;
}

#TabsToolbar {
border-bottom:3px solid grey!important}

.openintabs-menuitem{
-moz-box-ordinal-group:0!important;
}

Fox2Fox

Zitat von AdE

In meiner Usercromecss habe ich nur nachfolgende weitere Zeilen drin.

Korrekt muss die Datei userChrome.css heißen.

Teste diesen Code:

CSS

/*Tab mehrzeilig, Breite und Höhe verringern*/


.tabbrowser-tab{
	margin-right:20px!important;
    max-height: 40px!important;
    -moz-box-flex: 0!important;
    width: 126px!important;
}

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


.tab-stack {
  width: 90%!important;
}


#tabbrowser-tabs .scrollbox-innerbox {
  display: flex!important;
  flex-wrap: wrap!important;
  overflow-y: auto !important;
  min-height: var(--tab-min-height);
  max-height: calc(5*var(--tab-min-height)) !important; /* 5 rows */
}


#tabbrowser-tabs .arrowscrollbox-scrollbox {
	margin-right:-20px!important;
  overflow: visible!important; 
  display: block!important;
}


#tabbrowser-tabs .scrollbutton-up,
#tabbrowser-tabs .scrollbutton-down,
#alltabs-button,
.tabbrowser-tab:not([fadein]){
  display: none;
}


#main-window[tabsintitlebar] #tabbrowser-tabs {
  -moz-window-dragging: no-drag;
}

Alles anzeigen

Sieht bei mir so aus

[attachment=0]A3.jpg[/attachment]

AdE

Mmh, jetzt sieht es so aus:

[attachment=0]Test2.jpg[/attachment]

und die kleinen angepinnten Tabs hat es mir auf volle Länge gestreckt.

Fox2Fox

Dann solltest du die Werte anpassen

AdE

Ja, bin am probieren. Vielen Dank für Deine Hilfe. Allerdings finde ich nicht die Werte für die Zwischenräume, wo hast Du diese eingestellt?

Fox2Fox

Da ich diesen Code nicht selbst gestrickt habe, kann ich dir zum Inhalt nichts sagen.

Vielleicht meldet sich 2002Andreas noch. Wenn mich nicht alles täuscht, kam der Code von ihm.

Endor

Nur zur Info, 2002 Andreas ist bis zum Wochenende nicht erreichbar.
Daher wird er auch vorher nicht antworten.
Mfg.
Endor

AdE

Danke für die Info. Allein bekomme ich es leider nicht hin.

BurtGummer

Hallo,

weil diese Funktion für mich sehr wichtig ist, bin ich schon fast auf Vivaldi umgestiegen...

An den Ersteller der github-Seite:

https://github.com/Endor8/userChr…ilige-Tableiste

Bitte wenigstens eine kleine Beschreibung dazuschreiben, was man wo erstellen muss. Zb:

1. userChrome.css erstellen (wenn sie nicht schon existiert) im Profil-Ordner, bei Firefox Portable zB.:
FirefoxPortable\Data\profile\chrome\
beim normal installierten Firefox zB.:
%AppData% eingeben, dann:
Roaming\Mozilla\Firefox\Profiles\PROFILNAME.default\chrome\
Wenn der chrome Ordner nicht existiert, anlegen.
2. das Script in die userChrome.css kopieren, eventuell anpassen, speichern und Firefox neu starten.

Und ich finde es super, dass auch sowas auf Github landet.

Dass man durch die Tableiste scrollen kann wenn man rechts einen Scrollbalken hat wäre echt toll.

2002Andreas

Zitat von BurtGummer

Bitte wenigstens eine kleine Beschreibung dazuschreiben, was man wo erstellen muss

Steht im Beitrag Nr.2 in diesem Thread. :wink:

Re: FF 57 Mehrzeilige Tab-Leiste

Endor

Zum scrollen durch die Tableiste kannst Du dieses Script mal testen:
https://github.com/Endor8/userChr…eelScroll.uc.js

Maus auf Tab oder Tableiste und scrollen.

Mfg.
Endor

2002Andreas

Zur Nutzung von Scripten bedarf es erst einer Vorbereitung. :wink:

Firefox Anpassungen : die Basis

BurtGummer

Euch vielen Dank für die schnelle Reaktion. Trotzdem wäre es deutlich benutzerfreundlicher, alle Infos auf einer Seite (zB. die von Github) zu haben ohne erst x Seiten eines Forums durchforsten zu müssen. Aber eventuell sehe ich das auch zu kritisch

Endor

Beziehst Du dich auf die Verwendung von Scripten, wenn ja Anleitung
ist bei mir in Github auch vorhanden:
https://github.com/Endor8/userChr…hrome/readme.md

Mfg.
Endor

milupo

Zitat von BurtGummer

Euch vielen Dank für die schnelle Reaktion. Trotzdem wäre es deutlich benutzerfreundlicher, alle Infos auf einer Seite (zB. die von Github) zu haben ohne erst x Seiten eines Forums durchforsten zu müssen. Aber eventuell sehe ich das auch zu kritisch

Wenn du wirklich im Forum nachgeschaut hättest, hättest du diesen Beitrag nicht zu schreiben brauchen. Im Unterforum Anpassungen ist der dazugehörige Thread ganz oben angepinnt.

Endor

Nur mal zur Info, soweit mir das bekannt ist, kann also auch falsch sein,
kann man Tabs ohne ein Script seit Firefox 61 nicht mehr verschieben.
Es muss also zuerst mal ein Script geladen werden, und dann den CSS Code zu.
Dann sollten die Tabs auch wieder verschiebbar sein.

Script:

CSS

// ==UserScript==
// @name           zzzz-MultiRowTab_LiteforFx48.uc.js
// @namespace      http://space.geocities.yahoo.co.jp/gl/alice0775
// @description    Mehrzeilige Tableiste, Experimentelle CSS Version
// @include        main
// @compatibility  Firefox 48
// @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==
"user strict";
zzzz_MultiRowTabLite();
function zzzz_MultiRowTabLite(){
  var style = ' \
    #TabsToolbar .tabbrowser-tab { \
        border-left: solid 1px rgba(0,0,0,.0) !important; \
        border-right: solid 1px rgba(0,0,0,.0) !important; \
    }\ ';
    var sspi = document.createProcessingInstruction(
        'xml-stylesheet',
        'type="text/css" href="data:text/css,' + encodeURIComponent(style) + '"' );
    document.insertBefore(sspi, document.documentElement);
  style = ' \
    #tabbrowser-tabs .scrollbox-innerbox scrollbar {\
         -moz-window-dragging: no-drag !important;\
    }\ ';
  var sss = Components.classes["@mozilla.org/content/style-sheet-service;1"].getService(Components.interfaces.nsIStyleSheetService);
  var ios = Components.classes["@mozilla.org/network/io-service;1"].getService(Components.interfaces.nsIIOService);
  var uri = ios.newURI("data:text/css," + encodeURIComponent(style), null, null);
  sss.loadAndRegisterSheet(uri, sss.AGENT_SHEET);
    gBrowser.tabContainer._animateTabMove = function(event){};
    gBrowser.tabContainer._finishAnimateTabMove = function(event){};
    gBrowser.tabContainer.lastVisibleTab = function() {
        var tabs = this.childNodes;
        for (let i = tabs.length - 1; i >= 0; i--){
            if (!tabs[i].hasAttribute("hidden"))
                return i;
        }
        return -1;
    };
    gBrowser.tabContainer.clearDropIndicator = function() {
        var tabs = this.childNodes;
        for (let i = 0, len = tabs.length; i < len; i++){
            let tab_s= tabs[i].style;
            tab_s.removeProperty("border-left-color");
            tab_s.removeProperty("border-right-color");
        }
    };
    gBrowser.tabContainer.addEventListener("drop", function(event) {
        this.onDrop(event);
    }.bind(gBrowser.tabContainer), true);
    gBrowser.tabContainer.addEventListener("dragleave", function(event) {
        this.clearDropIndicator(event);
    }.bind(gBrowser.tabContainer), true);
    gBrowser.tabContainer._onDragOver = function(event) {
        this.MultiRowTabonDragOver(event);
        var effects = this._getDropEffectForTabDrag(event);
        this.clearDropIndicator();
        var newIndex = this._getDropIndex(event);
        if (newIndex == null) {
            return;
        }
        if (newIndex < this.childNodes.length) {
            this.childNodes[newIndex].style.setProperty("border-left-color","red","important");
        } else {
            newIndex = gBrowser.tabContainer.lastVisibleTab();
            if (newIndex >= 0)
                this.childNodes[newIndex].style.setProperty("border-right-color","red","important");
        }
    };
    gBrowser.tabContainer.addEventListener("dragover", gBrowser.tabContainer._onDragOver, true);
    gBrowser.tabContainer._getDropIndex = function(aEvent) {
        var tabs = this.childNodes;
        if (window.getComputedStyle(this, null).direction == "ltr") {
            for (let i = 0; i < tabs.length; i++){
                if (aEvent.screenY > tabs[i].boxObject.screenY &&
                    aEvent.screenY < tabs[i].boxObject.screenY + tabs[i].boxObject.height) {
                    if (aEvent.screenX > tabs[i].boxObject.screenX &&
                        aEvent.screenX < tabs[i].boxObject.screenX + tabs[i].boxObject.width / 2)
                        return i;
                    if (aEvent.screenX > tabs[i].boxObject.screenX + tabs[i].boxObject.width / 2 &&
                        aEvent.screenX < tabs[i].boxObject.screenX + tabs[i].boxObject.width)
                        return i + 1;
                }
            }
        } else {
            for (let i = 0; i < tabs.length; i++){
                if (aEvent.screenY > tabs[i].boxObject.screenY &&
                    aEvent.screenY < tabs[i].boxObject.screenY + tabs[i].boxObject.height) {
                    if (aEvent.screenX < tabs[i].boxObject.screenX + tabs[i].boxObject.width &&
                        aEvent.screenX > tabs[i].boxObject.screenX + tabs[i].boxObject.width / 2)
                        return i;
                    if (aEvent.screenX < tabs[i].boxObject.screenX + tabs[i].boxObject.width / 2 &&
                        aEvent.screenX > tabs[i].boxObject.screenX)
                        return i + 1;
                }
            }
        }
        return tabs.length;
    };
    gBrowser.tabContainer.onDrop = function(event) {
        var newIndex;
        this.clearDropIndicator();
        var dt = event.dataTransfer;
        var dropEffect = dt.dropEffect;
        var draggedTab;
        if (dt.mozTypesAt(0)[0] == TAB_DROP_TYPE) {
            draggedTab = dt.mozGetDataAt(TAB_DROP_TYPE, 0);
            if (!draggedTab)
                return;
        }
        if (draggedTab && dropEffect == "copy") {
        } else if (draggedTab && draggedTab.parentNode == this) {
            newIndex = this._getDropIndex(event, false);
            if (newIndex > draggedTab._tPos)
                newIndex--;
            gBrowser.moveTabTo(draggedTab, newIndex);
        }
    };
    gBrowser.tabContainer.MultiRowTabonDragOver = function(event) {};
}

Alles anzeigen

Zur Verwendung des Scripts muss die Basis gewährleistet sein:
https://www.camp-firefox.de/forum/viewtopic.php?f=16&t=122538

CSS Code:

CSS

/*AGENT_SHEET*/
@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);


/* === Mehrzeilige Tableiste === */


/* Notwendige Anpassung für Titelleiste */
#titlebar {
    height: 32px !important;
    margin-bottom: -32px !important;
}
#main-window[sizemode="maximized"] #titlebar {
    margin-bottom: -24px !important;
}
#titlebar-buttonbox {
    height: 32px !important;
}
/* Tableiste */
#tabbrowser-tabs,
.tabbrowser-arrowscrollbox {
    min-height: 32px !important;
}


/* Die angezeigte Bildlaufleiste, bewegt sich mit dem Mausrad, 
wenn die Anzahl der Tabzeilen um mehr als die angegebene Anzahl erhöht wird  */


.tabbrowser-arrowscrollbox { -moz-binding: url("chrome://global/content/bindings/scrollbox.xml#arrowscrollbox") !important; }
/* Anzahl der Tabreihen */
#tabbrowser-tabs .scrollbox-innerbox {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    max-height: calc( 32px * 5 ) !important;/* Der Zahlenwert auf der rechten Seite ist die Anzahl der Tabzeilen */
}


/* Mehrzeilige Tableiste */
#tabbrowser-tabs .arrowscrollbox-scrollbox {
    overflow: visible !important;
    display: block !important;
}
#tabbrowser-tabs .scrollbox-innerbox {
    display: flex !important;
    flex-wrap: wrap !important;
}
/* Tab */
.tabbrowser-tab {
    display: -webkit-box !important;
    min-height: 32px !important;
}
.tabbrowser-tab:not([pinned]) {
    flex-grow: 1 !important;
}
.tab-stack { width: 100% !important; }


/* -- Ausblenden -- */
#tabbrowser-tabs autorepeatbutton {
    display: none !important;
}

Alles anzeigen

Beides habe ich in einem asiatischen Forum gefunden.
Mangels Zeit konnte ich es noch nicht testen.
Mfg.
Endor

JeffWood

Vielen Dank, Endor!

Das verschieben funktioniert mit dem Script bei mir einwandfrei, allerdings nicht mit dem dazugehörigen CSS-Code.
Hier "meine"(alles zusammengeklaut ) CSS-Version mit der es erstmals ganz brauchbar für mich funktioniert:

CSS

:root {
  --tab-min-height: 28px !important;
}
/* titlebar buttons */
#titlebar-buttonbox {
  vertical-align: top !important;
  display: block !important;
}
.tabbrowser-arrowscrollbox scrollbox {
  overflow: visible !important;
}
.tabbrowser-arrowscrollbox scrollbox > box {
  display: block !important;
}
/* titlebar button height */
toolbarbutton.titlebar-button {
  min-height: 10px !important;
}
/* tabs right position */
.tabbrowser-tabs {
  margin-right: -41px !important;
}
/* tab size */
.tabbrowser-tab:not([pinned]) {
  min-width: 188px !important; 
  min-height: var(--tab-min-height) !important;
  max-height: var(--tab-min-height) !important;
}
.tabbrowser-tabs .tabbrowser-tab {
  vertical-align: top !important;
  -moz-box-sizing: border-box !important;
  min-height: var(--tab-min-height) !important;
  max-height: var(--tab-min-height) !important;
}


#tabbrowser-tabs .scrollbox-innerbox {
  display: flex;
  flex-wrap: wrap;
  overflow-y: auto !important;
  min-height: var(--tab-min-height);
  max-height: calc(4*var(--tab-min-height)) !important; /* 4 rows */
}


#tabbrowser-tabs .arrowscrollbox-scrollbox {
  overflow: visible; 
  display: block;
}


/* Button for scrolling tabs to the left */
.scrollbutton-up{
  display: none;
}


/* Button for scrolling tabs to the right */
.scrollbutton-down{
  display: none;
}


/*Drop-down menu for all tabs */
#alltabs-button{
  display: none;
}

Alles anzeigen

[attachment=0]ScreenTabs03.jpg[/attachment]

Das einzige, was noch nicht funktioniert ist, dass bei sichtbarer Scrollbox ein neu hinzugefügter Tab nicht automatisch in den sichtbaren Bereich gescrollt wird. Das muss man leider händisch machen.

Hat da vielleicht jemand eine Lösung?

...aber ansonsten bin ich bis jetzt ganz zufrieden (muss noch weiter testen)....

Endor

Da wäre noch dieser CSS Code dabei, aber der macht einiges mehr glaube ich.

CSS

/*AGENT_SHEET*/
@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
/* === Symbolleiste Sortieren === */
#nav-bar { /* main toolbar */
    padding-right: 139px !important;
    -moz-box-ordinal-group: 1 !important;
}
#PersonalToolbar { /* bookmarks toolbar */
    -moz-box-ordinal-group: 2 !important;
}
#TabsToolbar { /* tabbar */
    -moz-box-ordinal-group: 3 !important;
}
/* === Mehrzeilige Tableiste === */
/* Titelleisten Anpassung */
#titlebar {
    height: 32px !important;
    margin-bottom: -32px !important;
}
#main-window[sizemode="maximized"] #titlebar {
    margin-bottom: -24px !important;
}
#titlebar-buttonbox {
    height: 28px !important;
}
/* Tableiste */
#tabbrowser-tabs,.tabbrowser-arrowscrollbox {
    min-height: 32px !important;
}


/* Die angezeigte Scrollbar, bewegt sich mit dem Mausrad, wenn die Anzahl der Tabreihen um mehr als die angegebene Anzahl erhöht wird */
.tabbrowser-arrowscrollbox { -moz-binding: url("chrome://global/content/bindings/scrollbox.xml#arrowscrollbox") !important; }
/* Azahl Tabreihen */
#tabbrowser-tabs .scrollbox-innerbox {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    max-height: calc( 32px * 5 ) !important;/* Die Zahl Rechts ist die Anzahl der Tab-reihen */
}


/* Mehrzeilige Tableiste - deren Elemente */
#tabbrowser-tabs .arrowscrollbox-scrollbox {
    overflow: visible !important;
    display: block !important;
}
#tabbrowser-tabs .scrollbox-innerbox {
    display: flex !important;
    flex-wrap: wrap !important;
}
/* Tab */
.tabbrowser-tab {
    display: -webkit-box !important;
    min-height: 32px !important;
}
.tabbrowser-tab:not([pinned]) {
    flex-grow: 1 !important;
}
.tab-stack { width: 100% !important; }
/* -- Ausblenden -- */
#TabsToolbar .titlebar-placeholder,
#tabbrowser-tabs autorepeatbutton {
    display: none !important;
}


/* === Symbolleiste === */
/* Breite der Navigationsleiste */
#urlbar,.searchbar-textbox {
    margin: 1px 0 1px 0 !important;
    min-height: 26px !important;
}
/* Symbolleistensymbol ucjs - Standortleiste - Symbolleisten Breite*/
#page-action-buttons,
.search-go-container {
    height: 22px !important;
}
#urlbar .urlbar-icon,
#ucjs-Locationbar-toolbar .toolbarbutton-icon {
    width: 22px !important;
    height: 22px !important;
    padding: 4px !important;
}
#ucjs-Locationbar-toolbar toolbarbutton.toolbarbutton-1:hover,
#ucjs-Locationbar-toolbar toolbaritem toolbarbutton:hover {
    background-color: rgba(255, 255, 255, 0.2) !important;
}
#ucjs-Locationbar-toolbar,
#nav-bar .toolbarbutton-1 {
    padding: 0 !important;
}
#nav-bar toolbarbutton.toolbarbutton-1 .toolbarbutton-icon[label="ExtrasConfigMenu+"],
#nav-bar toolbarbutton.toolbarbutton-1.chromeclass-toolbar-additional .toolbarbutton-icon,
#nav-bar toolbarbutton.toolbarbutton-1.chromeclass-toolbar-additional .toolbarbutton-badge-stack,
#nav-bar toolbaritem toolbarbutton.toolbarbutton-1 .toolbarbutton-badge-stack {
    width: 24px !important;
    height: 24px !important;
    padding: 4px !important;
}
#nav-bar toolbarbutton#downloads-button .toolbarbutton-icon,
#nav-bar toolbarbutton.toolbarbutton-1.webextension-browser-action .toolbarbutton-badge-stack {
    width: 24px !important;
    height: 24px !important;
    padding: 0 !important;
}
#PanelUI-button {
    margin-inline-start: 1px !important;
    border-inline-start: none !important;
    margin-inline-end: 1px !important;
    border-inline-end: none !important;
}
/* urlbar-zoom-button */
#urlbar-zoom-button {
    margin: 0 !important;
}
/* toolbarbutton-badge */
#nav-bar .toolbarbutton-badge {
    margin-top: 0px !important;
    min-width: 12px !important;
    max-height: 12px !important;
    margin-inline-end: 0px !important;
    font-size: 8px !important;
}
 .toolbarbutton-badge {
    margin-top: -2px !important;
    min-width: 12px !important;
    max-height: 12px !important;
    margin-inline-end: -3px !important;
    font-size: 8px !important;
}
/* Lesezeichen-Symbolleiste */
#navigator-toolbox > #PersonalToolbar {
    padding: 1px 2px 1px 2px !important;
    visibility: visible !important;
}
#PersonalToolbar toolbarbutton {
    padding: 1px 3px 1px 3px !important;
    margin: 0 !important;
}
#PersonalToolbar #personal-bookmarks {
    height: 20px !important;
}

Alles anzeigen

Mfg.
Endor

Endor

Hallo zusammen.
Es gibt wieder etwas neues:
Vier Scripte mit kleinen Unterschieden.
https://github.com/Endor8/userChr…ter/Mutirowtabs

Von den ganzen CSS Codes sollte es keinen mehr brauchen, nur eines der vier
Scripte sowie den kleinen CSS Code auf der verlinkten Seite.
Sonst nichts.

Mfg.
Endor

Pete

Hallo Endor,

vielen Dank für die Neuigkeit!

Mfg. Pete.