Tabs verschieben in mehrzeiliger Tableiste

Du benötigst Hilfe bezüglich Firefox? Bitte stelle deine Frage im öffentlichen Bereich des Forums und nicht per Konversation an wahllos ausgesuchte Benutzer. Wähle dazu einen passenden Forenbereich, zum Beispiel „Probleme auf Websites“ oder „Erweiterungen und Themes“ und klicke dann rechts oben auf die Schaltfläche „Neues Thema“.
  • Firefox-Version
    84.0.2
    Betriebssystem
    Windows 10

    Hallo, liebe Foristi!


    Erstmal ein dickes Lob an all die ganzen Experten hier: dank Euch und Euren tollen Scripten sieht mein Firefox immer noch so fast aus wie zu den Zeiten, als es für jegliche Wünsche eine nette Erweiterung gab :thumbup::thumbup: .


    Allerdings ‚zittere‘ ich vor jedem größeren Update, weil dann mal wieder nix einiges nicht wie gewohnt funktioniert und die (von keinerlei Sachkenntnis meinerseits getrübte) Fummelei an den Scripten wieder losgeht. Neues Jahr – neues Glück: ich habe mich endlich getraut auf Version 80+x upzudaten.


    Dank 2002Andreas und allen Anderen, die irgendwie an diesem Script Tableiste mehrreihig unten mitgearbeitet haben, ist meine (mehrzeilige!) Tableiste auch wieder unter der (mehrzeiligen!) Lesezeichenleiste, schön mit abgerundeten Ecken.


    Das Einzige, was nicht mehr funktioniert, ist das gezielte Verschieben von Tabs innerhalb der Tableiste. Verschiebe ich einen Tab mittels gedrückter linker Maustaste, dann landet der irgendwo, aber nicht da, wo ich ihn gerne hätte :rolleyes: .


    Es gab dazu auch mal eine Lösung, die das Verschieben eines Tabs an eine bestimmte Stelle ermöglichte. Ich finde die aber leider nicht mehr wieder, obwohl ich hier schon eine ganze Weile gesucht habe.


    Ich würde mich freuen, wenn mir jemand helfen könnte.


    Auf jeden Fall vielen lieben Dank im Voraus.


    Schöne Grüße


    Boderike

  • das Verschieben eines Tabs an eine bestimmte Stelle ermöglichte.

    Hallo und Willkommen hier im Forum. ?


    Das funktioniert wenn dann nur per Script und nicht per CSS Code.


    Dieses Script würde genau das machen:


    Um Scripte nutzen zu können bedarf es erst einiger Vorbereitungen, die hier beschrieben werden:


    https://github.com/Endor8/user…js/tree/master/userChrome


    Wenn, dann mach es bitte ganz in Ruhe, es sieht komplizierter aus als es ist ;)


    Obiges Script und weitere findest du hier:


    https://github.com/Endor8/user…er/Mutirowtabs/Firefox-81

  • Allerdings ‚zittere‘ ich vor jedem größeren Update, weil dann mal wieder nix einiges nicht wie gewohnt funktioniert und die (von keinerlei Sachkenntnis meinerseits getrübte) Fummelei an den Scripten wieder losgeht.

    Nur mal so: Du hast anscheinend vergessen, dass die alten Erweiterungen vor Fx 57 oft Kompatibilitätsprobleme mit neuen Firefox-Versionen hatten und man warten musste, bis die Autoren der Erweiterungen diese an neue Firefox-Versionen angepasst hatten. Bei den Webextensions, die es seit Fx 57 gibt, gehört das weitgehend der Vergangenheit an.

    Übersetzer für Obersorbisch und Niedersorbisch auf pontoon.mozilla.org u.a. für Firefox, Firefox für Android, Firefox für iOS, Firefox Klar/Focus für iOS und Android, Thunderbird, Pootle, Django, LibreOffice, WordPress und Facebook

  • 2002Andreas:

    HA -funktioniert wieder!!! :thumbup::thumbup:

    Als ich mir die Links angesehen habe, kam mir das Ganze irgendwie bekannt vor...

    Es hatte vermutlich vorher nicht mehr funktioniert, weil ich die neue Firefox-Version in einem anderen Verzeichnis installiert hatte und insofern die Dateien im Installationsverzeichnis natürlich fehlten.


    Fazit: Man muss nicht alles wissen, sondern nur wo man nachsehen bzw. wen man fragen sollte! :)


    Einen klitzekleinen Wunsch hätte ich noch: in der alten Version war es so, dass beim Verschieben zunächst ein schmaler roter Strich an der Stelle, wo der Tab hin sollte, auftauchte. Der verschwand dann, wenn ich die Maustaste losgelassen habe. Das war schon nett, weil man dann sicher sah, ob der Tab auch da landen würde, wo er sollte.


    milupo:

    FX 57 ist ja auch schon lange her und in der Vergangenheit verklären sich ja bekannterweise manche Dinge... ;)

  • Einen klitzekleinen Wunsch hätte ich noch: in der alten Version war es so, dass beim Verschieben zunächst ein schmaler roter Strich an der Stelle, wo der Tab hin sollte, auftauchte. Der verschwand dann, wenn ich die Maustaste losgelassen habe. Das war schon nett, weil man dann sicher sah, ob der Tab auch da landen würde, wo er sollte.

    Im Skript aus Beitrag #2 von 2002Andreas wird das in Zeile 118 (rechter Rand) bzw. 120 (linker Rand) festgelegt. Wenn du also sein Skript verwendest, sollte das eigentlich funktionieren.

    Übersetzer für Obersorbisch und Niedersorbisch auf pontoon.mozilla.org u.a. für Firefox, Firefox für Android, Firefox für iOS, Firefox Klar/Focus für iOS und Android, Thunderbird, Pootle, Django, LibreOffice, WordPress und Facebook

  • 2002Andreas

    Das ist genau das, was ich meine.


    Dein Script aus Beitrag #2 habe ich unverändert übernommen.


    Außerdem gibt es bei mir noch eine userChrome.css, die dieses Script hier

    RE: Mehrzeilige Tableiste für aktuelle FireFox-Versionen (71+)

    (Beitrag #216) beinhaltet und in dem ich außer der Tabbreite, der Zeilenanzahl und einer Schriftfarbe und -Größe nichts verändert habe.


    17 /* Feste Tabbreite */

    18 .tabbrowser-tab:not([pinned]) {

    19 min-width: 125px !important;

    20 max-width: 125px !important;

    ...

    93 /* Mehrzeilige Tableiste, bei mehr als 3 Zeilen erscheint eine Scrollbar */

    94 scrollbox[part][orient="horizontal"] {

    95 display: flex;

    96 flex-wrap: wrap;

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

    98 overflow-x: hidden;

    99 overflow-y: auto;

    ...

    130 /* Schriftart/Schriftgröße ändern */

    131 .tabbrowser-tab .tab-label {

    132 text-shadow: 1px 1px 0px #FFFFFF !important;

    133 /* font-weight: 500 !important; */

    134 font-size: 12px !important;

    135 font-family: "Arial" !important;

    136 color: black !important;

    ...

    142 .tabbrowser-tab .tab-label[selected="true"] {

    143 text-shadow: 1px 1px 0px #000000 !important;

    144 color: white !important;

    145 font-weight: 500 !important;

    146 font-size: 12px !important;

    147 font-family: "Arial" !important;


    Könnte es sein, dass sich da irgendetwas nicht verträgt?


    Schöne Grüße


    Boderike

  • Außerdem gibt es bei mir noch

    Du solltest nicht ein Script und eine CSS Datei zusammen nutzen, die letztlich beide das gleiche machen.

    Teste nur das Script erstmal.


    Farben der Tabs etc. kann man später noch anpassen.


    So müsste der CSS Code dann aussehen:


  • (Erstmal vielen lieben Dank, dass Du Dich auch zu später Stunde noch mit meinem Wunsch / Problemchen befasst!
    Wenn ich da so an mein berufliches Umfeld denke, da herrscht doch eher das Motto "Vogel friss oder stirb!")


    Ich habe naturlich gleich mal probiert, ob ich mit Deinem Lösungsansatz weiterkomme:

    Wenn ich nur das Script benutzte und aus der CSS-Datei Deinen Code für die mehrzeiligen Tabs komplett lösche (ansonsten ist da nur noch ein Code für mehrzeilige Lesezeichen drin), dann bekomme ich etwas, was genau wie Dein Muster aussieht, nämlich:

    • den gewünschten roten Strich beim Verschieben von Tabs

    Allerdings:

    • Bei mehr als 5 Zeilen erscheint ein Scroll-Balken, der sich aber leider nicht bewegen lässt
    • Es erscheinen anders als bei dem Code aus der CSS-Datei Tabs mit unterschiedlicher Breite, je nach dem ob die Zeile voll ist (recht schmale Tabs) oder ob noch Platz in der Zeile ist (dann variabel)


    Füge ich nun den CSS-Code aus Beitrag #8 in die CSS-Datei ein, bekommen die Tabs alle wieder die gleiche konstante Breite und der Scroll-Balken lässt sich nur bewegen, wenn ich mit der Maus etwas links daneben bin (Lücke zwischen Tabs und Scroll-Balken); auf dem Balken selbst tut sich nichts.

    Wenn ich dann noch aus dem ursprünglichen CSS-Code den kompletten Bereich „Tab-Hintergrund“ (ab Zeile 191) dranhänge, dann erscheinen erste Ansätze der abgerundeten Tabs.


    Es sieht allerdings so aus, als wenn die Tabs quasi 2 Ebenen hätten, eine abgerundete und eine eckige, wobei ich nicht sagen kann, welche der Vordergrund und welche der Hintergrund ist. Da der CCS-Code aber mit „Tab-Hintergrund“ überschrieben ist, vermute ich mal dass die Rundungen die hintere Ebene sind, auch wenn es eigentlich anders wirkt.

    Außerdem sind die Rundungen in der unteren Hälfte etwas abgeschnitten.


    Schöne Grüße


    Boderike

  • Allerdings:

    Also bei mir funktioniert das alles einwandfrei mit dem Script und dem Code :/



    Was genau hast du denn noch alles in deiner userChrome.css Datei stehen?

    Evtl. kommt sich ja da etwas in die Quere.


    noch mit meinem Wunsch / Problemchen befasst!

    Wir Helfer/ich sind freiwillig hier, um anderen Usern bei ihren Problemen zu helfen(wenn es möglich ist).

    Wobei es egal ist, ob es sich dabei um ein Problem oder wie du es sagst..Problemchen...handelt ;)


    PS:

    Bin jetzt dann aber erstmal offline, weiteres wenn dann morgen.

  • Schönen guten Morgen / Mittag!


    Im Moment steht in der userChrome.css Datei das hier:

    Mir ist allerdings bezüglich der Bewegbarkeit des Scroll-Balkens noch etwas aufgefallen, was ich gestern gar nicht bemerkt habe: Versucht man (wie wie ich das gestern wohl gemacht habe), den Scroll-Balken mittels gedrückter linker Maustaste zu bewegen, passiert nix. Wenn ich allerdings mit der Maus auf den Scroll-Balken gehe und dann das Mausrad bewege, dann funktioniert es wie gewohnt und der Balken bewegt sich. :/


    Schöne Grüße


    Boderike

  • steht in der userChrome.css Datei das hier:

    Da fehlen diverse Einträge mit:


    border-radius: 80px !important;


    am Ende.

    Dadurch sind die Tabs nicht immer abgerundet.

    Außerdem ist am Ende des Codes eine } zuviel.


    Ich bin mir nicht sicher, aber das Problem hatten wir hier schon mal, wenn eine mehrzeilige Lesezeichenleiste und eine mehrzeilige Tableiste zusammen verwendet werden.

    Es gab meiner Meinung nach auch keine perfekte Lösung dafür. :/


    Evtl. habe ich aber auch nur die Lösung übersehen, evtl. fällt einem anderen User ja noch etwas dazu ein.

  • Über die 2. } können wir reden... ;)


    Nach den Änderungen von gestern abend sieht das Ganze so aus:


    Wie man erkennen kann, ist der rote Strich wieder da, aber es gibt eine eckige und eine abgerundete Ebene.


    Was meinst Du damit, dass da Einträge

    border-radius: 80px !important;

    fehlen?

    Das, was ich da in Zeile 81 ff. stehen habe, sind die 45 Zeilen aus Code in den Tread über die mehrzeiligen Tabs (siehe oben), dort Zeilen 190 bis 235.


    Die einzige Stelle, an der
    border-radius: 80px !important;
    im "Original" sonst noch auftaucht wäre diese hier (Zeilen 165 - 173):

    CSS
    /* Abgerundete Ecken */
    #TabsToolbar .tabbrowser-tab,
    #TabsToolbar .tabbrowser-tab .tab-background
    {
        margin-right : -1px !important;
        background: unset;
        border-radius: 80px !important; 
        border: 1px solid rgba(0,0,0,0.1) !important;
    }

    Füge ich diesen Teil auch noch in die userChrome.css Datei ein, dann sieht das Ganze bei mir so aus:



    Wie man vielleicht erkennen kann, ist der blaue Tab gegenüber dem grauen Teil (Vordergrund <-> Hintergrund) irgendwie verschoben und unten abgeschnitten. Der rote Strich taucht nun auch nicht mehr auf.


    Die Merkwürdigkeit des Scroll-Balkens besteht allerdings nach wie vor.


    Wenn ich das jetzt richtig sehe, muss ich also aufgrund dieser mysteriösen Unverträglichkeit ( wer hat je behauptet, dass im IT-Bereich immer alles logisch ist??? ;) ) eine Entscheidung treffen, ob mir die komplett abgerundeten Tabs mit dem komplett funktionierenden Scroll-Balken wichtiger sind oder der rote Strich beim Verschieben. Ich tendiere ehrlichgesagt zu Variante 1.


    Eine Frage hätte ich aber noch rein interessehalber: Du sagt, das Script und der CSS-Code tun in großen Teilen dasselbe. Welcher Teil aus dem Script ist denn für das saubere / gezielte Verschieben verantwortlich und sollte man das Script nur auf diesen Teil einreduzieren, damit diese Doppelung entfällt?


    Schöne Grüße


    Boderike

  • Der rote Strich taucht nun auch nicht mehr auf.

    Der taucht nicht auf, weil der im Skript festgelegt ist und nicht im CSS-Code. Wenn du nur den CSS-Code verwenden willst, zaubert Andreas dir den bestimmt in den CSS-Code rein. :-)

    Übersetzer für Obersorbisch und Niedersorbisch auf pontoon.mozilla.org u.a. für Firefox, Firefox für Android, Firefox für iOS, Firefox Klar/Focus für iOS und Android, Thunderbird, Pootle, Django, LibreOffice, WordPress und Facebook

  • Hallo Boderike

    bitte teste mal diese Version von Script, da habe ich einiges aus dem CSS Code von 2002Andreas

    übernommen und noch etwas dazu gepackt. Bitte ohne den CSS Code testen, nur dieses Script:


    Scrollbalken funktioniert hier damit einwandfrei.


    2002Andreas

    Bei mir ist da rechts neben jeden Tab ein gerader Strich, kriegt man den irgendwie weg?
    Habe einiges probiert, aber will mal wieder nicht. :wink:


    Mfg.

    Endor

    Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:86.0) Gecko/20100101 Firefox/86.0
    Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:87.0) Gecko/20100101 Firefox/87.0
    Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:88.0) Gecko/20100101 Firefox/88.0

    OS: Windows 7 64 bit - Irgendwann Windows 10 64 bit wenn Firma will.
    Kein Support per PN. Fragen bitte im Forum stellen!

    4 Mal editiert, zuletzt von Endor ()

  • Bei mir ist da rechts neben jeden Tab ein gerader Strich

    Hallo Endor!

    Ist das nicht der Strich, der beim Verschieben von Tabs rot ausleuchtet?


    Ich habe das zusätzlich in das Script eingefügt, damit scheint dann alles sauber zu sein. :/

    Grüße vom FuchsFan

    Einmal editiert, zuletzt von FuchsFan ()

  • Hallo FuchsFan

    Klasse, es waren die Tabseparatoren.

    Nun sieht es perfekt aus.


    Edit: Habe eben Deinen ganzen CSS Code getestet, das sieht noch besser aus.
    Prima. Vielen Dank. :)

    Mfg.
    Endor

    Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:86.0) Gecko/20100101 Firefox/86.0
    Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:87.0) Gecko/20100101 Firefox/87.0
    Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:88.0) Gecko/20100101 Firefox/88.0

    OS: Windows 7 64 bit - Irgendwann Windows 10 64 bit wenn Firma will.
    Kein Support per PN. Fragen bitte im Forum stellen!

    2 Mal editiert, zuletzt von Endor ()