Vertikale Lesezeichenleiste, Script und CSS

  • Mir ist nicht ganz klar wie - aber mit einer wilden Mixtur aus Infos aus dem Forum hätte ich ( vielleicht ) hier eine potentiell funktionierende vertikale Toolbar in reduzierter Form . :)

    Die auch den Browserinhalt anpasst beim Schliessen !


    Vielleicht kann mir jemand mit mehr Kompetenz einen oder 2 Tips Tip geben, um weiterzukommen ohne zu viel Zeit mit meinem Amateurgepfusche zu verschwenden .

    Zu erledigen # 1 : Im Symbolleiste anpassen Fenster ist die Zusatzleiste nicht sichtbar ; bei mir sind die Leseichensymbole nur drin weil ich sie in einer früheren Version schon reingepflanzt hatte ; in eine unsichtbare Leiste kann man eben nichts reinschieben oder rausnehmen .

    Das wäre der allerwichtigste nächste Schritt .

    #2 : Die Lesezeichen als Inhalt der Zusatzleiste werden nur im ersten geöffneten Firefox Fenster dargestellt; in jedem weiteren Fenster bleibt die Liste leer ( Anhang 1 erstes Fenster , Anhang 2 neues Fenster ) .

    Andere Buttons aus dem Symbolleiste anpassen Fenster haben das Problem nicht - nur ausgerechnet die Lesezeichen Symbole machen Ärger ... Und um die geht's mir ja hauptsächlich ... X/

    #3 : Beim Einklappen der seitlichen Leiste gibt es das gleiche Problem wie beim Aris Script; der Browserinhalt 'zuckt' etwas für einen Moment, auf der rechten Seite und besonders die Scrollbar , bevor er sich komplett in der Breite angepasst hat .

    Wäre auch nett wenn man einen weichen Übergang haben könnte .

    Und hier der Code; sehr grob noch und mit mehr Sturheit als Verstand zu Laufen gebracht :

    Script für seitliche Toolbar :

    CSS, -moz-box-ordinal-group kann bestimmt auch in's Script, aber bis dahin braucht man das zur Positionierung .

    Button zum Ein-/ Ausklappen :

    Erwartet wird hier ein Icon in einem Ordner namens icons im chrome Ordner , genannt newtoolbar.png ( hängt an ) .

    Ansonsten ist der Button da, aber nur bei hover erkennbar .


    Kommentare, Hilfe und viel benötigte Verbesserungsvorschläge wie immer herzlich willkommen ! :)


                          

  • Also, ... ;)

    Bevor ich jetzt endgültig aufgebe, hier mein letzter Stand ; vielleicht hat ja noch jemand eine Idee .

    Mit meinen nicht vorhandenen Scriptfähigkeiten drehe ich mich hier nur noch im Kreis .

    Das Fazit vorab - die selber gebaute vertikale Toolbar geht, taucht aber nicht im Symbolleiste anpassen Fenster auf .

    Also geht sie eigentlich nicht, weil man dann ja nichts reinschieben kann ....

    Horizontale Toolbar, kein Problem, egal wo man sie hinhaben will, ist ja hier im Forum sehr gut dokumentiert .

    Das Gemeine ist , wenn man das Symbolleiste anpassen Fenster öffnet, ist die Toolbar nicht sichtbar - schliesst man aber das Fenster, blitzt die Toolbar im Symbolleiste anpassen Fenster kurz auf, bevor es komplett geschlossen ist ....

    Hier dann der aktuelle Code; Symbolleiste - diesmal rechts - vertikal, extra Script für den Button zum Öffnen/Schliessen , und CSS für die Breite und etwas Farbe .

    Toolbar :

    Button :

    CSS :

    Icon für den Button, in den chrome Ordner, und Screenshot -->


  • Das Fazit vorab - die selber gebaute vertikale Toolbar geht, taucht aber nicht im Symbolleiste anpassen Fenster auf .

    Also geht sie eigentlich nicht, weil man dann ja nichts reinschieben kann ....

    Ich bin zwar auch kein Script-Kenner, aber ich hab mal gemerkt, dass die vertikale Zusatzleiste im "Symbolleiste anpassen..."-Fenster normal unter den anderen Leisten also horizontal angezeigt wird. :)

    "Klug sein hat noch nie einen Menschen an Dummheiten gehindert." Stefan Zweig
    Firefox-Version: 125.0.2
    Edition: Windows 11 Home (64-Bit-Betriebssystem)
    Version: 23H2

  • Ich bin zwar auch kein Script-Kenner, aber ich hab mal gemerkt, dass die vertikale Zusatzleiste im "Symbolleiste anpassen..."-Fenster normal unter den anderen Leisten also horizontal angezeigt wird. :)

    Danke , aber das macht leider auch keinen Unterschied .

    Wenn die Zusatzleiste, so wie sie ist , statt in appcontent in zB browser-bottombox eingefügt wird ( s. Codeschnipsel unten ), dann taucht die Leiste auch in Symbolleiste anpassen auf .

    Nur ist die Leiste dann unten statt an der Seite, und liegt auch horizontal, egal was man im Script angibt .

    Es scheint als bräuchte ich quasi zwei Versionen der Leiste, eine für die normalen Browserfenster, und eine für Symbolleiste anpassen .

    Im Aris Script ist das Problem auch gelöst, nur ist das Ganze zu komplex für mich, um die entsprechenden Einträge zu finden und in ein einfacheres Script zu übertragen .

    Kann natürlich gut sein, dass es keine simplere Lösung gibt .

    JavaScript
     var parentE = document.getElementById('appcontent').parentNode;
      var childE = document.getElementById('appcontent');
      parentE.insertBefore( tb_addonbar , childE.nextSibling ); 
  • Mir fehlt hier etwas der Kontext, weil ich nicht alles gelesen und mich auch nicht damit befasst habe. Mir fällt nur bei diesen drei Code-Zeilen etwas auf, was verbessert werden sollte.

    Der Zugriff auf DOM-Elemente ist aus Performance-Sicht immer teuer. Und hier wird zwei Mal hintereinander

    document.getElementById('appcontent') ausgeführt. Das verändert sich ja nicht von einer Zeile auf die nächste. Wieso also nicht auf das zugreifen, was man bereits ausgelesen hat?

    Aus:

    JavaScript
    var parentE = document.getElementById('appcontent').parentNode;
    var childE = document.getElementById('appcontent');

    sollte daher sowas werden wie:

    JavaScript
    var childE = document.getElementById('appcontent');
    var parentE = childE.parentNode;

    (Und var kann vermutlich durch const oder wenigstens let ersetzt werden, aber das ist ein anderes Thema. Da das nur ein Code-Ausschnitt ist, habe ich das an dieser Stelle auch nicht geändert.)

  • Mir fehlt hier etwas der Kontext, weil ich nicht alles gelesen und mich auch nicht damit befasst habe. Mir fällt nur bei diesen drei Code-Zeilen etwas auf, was verbessert werden sollte.

    .....

    (Und var kann vermutlich durch const oder wenigstens let ersetzt werden, aber das ist ein anderes Thema. Da das nur ein Code-Ausschnitt ist, habe ich das an dieser Stelle auch nicht geändert.)

    Danke für den Tip, werd ich einsetzen .

    Der gesamte Code steht übrigens 2 Beiträge drüber, und Optimierung ist in dem Stadium nicht so wirklich das Problem hier - aber jedes bisschen hilft . ;)

  • Nutzen werde ich sie dann wahrscheinlich nicht, da 27' und ich z.Z. die Lesezeichenleiste per Script ausblende.

    Aber wer weis, aus probieren würde ich Dein Ergebnis ja doch schon mal.

    Falls Du noch auf der Suche bist, ich teste gerade an Alternativen zum Ausblenden der Lesezeichenleiste rum ; sieht bisher gut aus .

    Hier ist der Beitrag auf Reddit wo mir geholfen wurde , kannst ja mal reinschauen .

    Falls Deine Lesezeichenleiste horizontal liegt, sollte es ziemlich einfach sein den Anfangszustand ohne grosses Rumscripten festzulegen ; vertikal (von oben nach unten ;) ) ist etwas mehr Aufwand .

  • Nichts als Ärger mit dem Otto .

    Nachdem ich eigentlich endgültig aufgegeben hatte, aber halt nicht so ganz ;) , gibt's jetzt ein neues Problem - es scheint etwas zu funktionieren . =O

    Hier eine scheinbar funktionierende Lösung für eine vertikale Lesezeichenleiste , die beim Ändern der Breite auch den Browserinhalt mit anpasst .

    Weil ich dem Braten nicht so ganz traue, würde es mich sehr interessieren was Ihr davon haltet ; kann gut sein dass es mehr Probleme schafft als löst .

    Das Ganze basiert auf vielen Einzelteilen, die hier im Thread schon erwähnt und verlinkt wurden; im Wesentlichen sind es Variationen von Vertikalen Bookmarks , dem Script von hier , und der letzte aber wichtigste Anstoss kam von hier .

    Also dann, der aktuelle Stand, ist noch in Arbeit :

    Javascript / blabla.uc.cs :

    CSS :

    Beides muss zusammen benutzt werden; das Icon für den Button muss im chrome Ordner liegen, und in diesem Fall bookmark-cap-32.png genannt sein ( könnt Ihr natürlich in der CSS beliebig ändern ) .

    Das Icon packe ich in den Anhang .

    Bei Tabs unten: das hier sollte funktionieren , um ein evtl. Überlappen der vertikalen Leiste mit den Tabs zu vermeiden .

    Einmal editiert, zuletzt von Horstmann (31. Oktober 2022 um 09:06)

  • Ich schreibe nochmal in diesen Thread, weil ich den Diskussionsthread zu Javascript nicht durcheinander bringen will.

    Dort hast Du geschrieben:

    Zitat

    Was vielleicht auch Sinn machen würde - bei ausgeblendeter Lesezeichenleiste einen Button zum Öffnen von nur einem Lesezeichenordner zu haben ; z.B. Weitere Lesezeichen , oder noch besser einem anderen festgelegten Ordner .

    Also quasi ein einzelner Lesezeichenordner für die Toolbar , der aufklappt wie ein normaler Lesezeichenordner .

    So habe ich das bei mir eingerichtet, s. Screenshot

    Ich habe die Tabs links vertikal, keine Lesezeichenleiste, keine Menübar, einfach nur die beiden Ordner RSS und Lesezeichen zwischen der Searchbar und der Urlbar. Sonst nichts.

    Die Tabbar ist mit Javascript realisiert, alles andere mit CSS und Bordmitteln.

  • Ich schreibe nochmal in diesen Thread, weil ich den Diskussionsthread zu Javascript nicht durcheinander bringen will.

    So habe ich das bei mir eingerichtet, s. Screenshot

    Ich habe die Tabs links vertikal, keine Lesezeichenleiste, keine Menübar, einfach nur die beiden Ordner RSS und Lesezeichen zwischen der Searchbar und der Urlbar. Sonst nichts.

    Die Tabbar ist mit Javascript realisiert, alles andere mit CSS und Bordmitteln.

    Danke, hat aber mit diesem Thread eigentlich nichts zu tun , ganz ehrlich gesagt .

    Man kann relativ einfach die Lesezeichenleiste oder Teile davon zusammenschrumpfen, und keinen oder nur einen oder zwei Ordner anzeigen lassen, und das Ganze in eine andere Toolbar verschieben; ein simples Beispiel s. Anhang .

    Ein verschiebbarer Button, der nur einen bestimmten Lesezeichenordner bedient, unabhängig vom Rest der Lesezeichen, das ist nochmal was anderes .


    Einmal editiert, zuletzt von Horstmann (4. November 2022 um 08:23)

  • Falls es jemand mal testen möchte ; diese Version funktioniert bei mir auf einem Basisprofil, ohne Anpassungen .

    Es gibt einmal das Script , und den CSS Code; beide müssen benutzt werden .

    Der Button zum Ändern der Breite der Lesezeichenleiste braucht ein Icon im chrome Ordner , namens toolbar.png ; wie zB dieses hier :

    Das Tastaturkürzel CMD + < funktioniert hier auf dem Mac mit deutschem Keyboard ; für andere OS kann ich leider nichts dafür anbieten .

    Die Breiten sind im Script(edit) CSS auf 40px geschlossen bzw. 130px offen eingestellt ; das kann man beliebig ändern .


    Hier das Javascript :

    Das CSS :

    Zusätzliches CSS falls die Tabs unten sind; abhängig von der jeweiligen restlichen Konfiguration :

    Alternativ kann man auf die Schnelle die Position auch so korrigieren, Abstand nach Bedarf anpassen :

    CSS
    /* Bookmarks bar Vertical distance top */
    
    #PersonalToolbar {
        margin-top : 44px !important;
    }

    Und so sollte es dann aussehen auf einem sonst unveränderten FF :


    Und stylen kann man dann beliebig, zB so :


    2 Mal editiert, zuletzt von Horstmann (8. November 2022 um 11:07)

  • Horstmann 5. November 2022 um 22:02

    Hat den Titel des Themas von „Vertikale Lesezeichenleiste, Frage dazu“ zu „Vertikale Lesezeichenleiste, Script und CSS“ geändert.
  • Das Ganze jetzt nochmal etwas aufgefrischt und gestrafft .

    Wie zuvor, ein Teil Javascript, ein Teil CSS .

    Auch wie zuvor, der Button benötigt ein Icon im chrome Ordner, namens toolbar.png , hängt unten wieder an .

    Die Tableiste wird jetzt mit angepasst, wenn man das entsprechende Segment für Tabs Bottom in der CSS behält; hat man die Tabs nicht unten, das Segment einfach löschen .

    Zusätzliche Buttons sollten hier auch sauber mit reinpassen; die Werte für schmal/breit lassen sich in der CSS einfacher mit nur zwei zu verändernden Variablen einstellen .

    ToggleVerticalBM_oder_so.uc.js :

    CSS :

    Button Icon :