Beiträge von Horstmann

Horstmann

Zitat von 2002Andreas

Zitat von Boersenfeger

Wie soll es denn dann in Zukunft hier gehandhabt werden?

Nur meine pers. Meinung!
Wenn in einem Code oder Skript der Urheber steht, dann sollte man ihn nicht absichtlich entfernen.

Sehe ich auch so .

Wenn aber für einen CSS Code oder Script eine Vielzahl an Quellen herangezogen, anteilig benutzt und evtl. modifiziert wurden , dann wäre ein ellenlanges Quellenverzeichnis irgenwann nicht nur hinderlich bei der weiteren Bearbeitung, sondern oft auch nicht mehr relevant bzgl. der Urheberfrage .

Selber poste ich mit meinen kleinen Codeschnipseln idR die Quellen im Forenbeitrag - zur Info und weil es sich so gehört imo - man sollte sich ja nicht mit fremden Federn schmücken .

Wenn man Code 'offiziell' als fertige Lösung verbreitet, und der massgeblich auf komplexen und eigenständigen Lösungen Dritter basiert, dann ist das wieder ein anderes Thema .

Horstmann

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 :

JavaScript

//Toggle Vertical PersonalToolbar + Browser + Tabs

(function ptbut() {
    
            
    if (location != 'chrome://browser/content/browser.xul' && location != 'chrome://browser/content/browser.xhtml')
       return;

    try {
        CustomizableUI.createWidget({
            id: 'PersonalToolbar-button',
            type: 'custom',
            defaultArea: CustomizableUI.AREA_NAVBAR,
                onBuild: function(aDocument) {
                    var toolbaritem = aDocument.createXULElement('toolbarbutton');
                    var props = {
                        id: 'PersonalToolbar-button',
                        class: 'toolbarbutton-1 chromeclass-toolbar-additional',
                        removable: true,
                        label: 'Toggle Bookmarks',
                        tooltiptext: 'Toggle Bookmarktoolbar',
                    };
               
                    for(var p in props)
                        toolbaritem.setAttribute(p, props[p]);
                    return toolbaritem;
                    
                }
        });
    } catch(e) { };


document.getElementById('PersonalToolbar-button').addEventListener( "click", onClick );
    
document.addEventListener('keydown', (event) => {
        var keyName = event.key;

        // Mac German keyboard shortcut Cmd + < 
        if (event.metaKey && keyName == '<') {
           onClick(event);        
        }
    }, false
);
    function onClick(aEvent) {

        PersonalToolbar.classList.toggle("wide-mode");
        browser.classList.toggle("margin");
        TabsToolbar.classList.toggle("tab_margin");

     }
})();

Alles anzeigen

CSS :

CSS

/***  VerticalBookmarks variable width  ***/


/**  Bookmarks Toggle button **/

#PersonalToolbar-button .toolbarbutton-icon {
    list-style-image: url("toolbar.png") !important;
}

@-moz-document url(chrome://browser/content/browser.xhtml) {

/***  Adjust Widths , Margins custom  ***/

:root:not([inDOMFullscreen]) {
    --uc-toggle-narrow: 40px;
    --uc-toggle-wide: 130px;
}

#PersonalToolbar:not([customizing]) {
    position: fixed;
    display: flex;
    flex-direction: column;
    left: 0;
    width: var(--uc-personalbar-width);
    height: 100vh;
    max-height: 100vh !important; 
    transition: all 0.4s ease !important;
}


:root:not([chromehidden~="toolbar"]):not([customizing]) body > #browser {
    margin-left: var(--uc-personalbar-width);
    transition: all 0.4s ease !important;
}


/**  Toggle narrow / wide mode / flip for startup state **/

#PersonalToolbar, #browser, #TabsToolbar, #customizationui-widget-panel.bookmarks-toolbar {
    --uc-personalbar-width: var(--uc-toggle-narrow) !important;
}
#PersonalToolbar.wide-mode, #browser.margin, #TabsToolbar.tab_margin {
    --uc-personalbar-width: var(--uc-toggle-wide) !important;
}


/*  Bookmarks vertical  */

#personal-bookmarks {
    overflow-y: auto; scrollbar-width: none;
}

#PersonalToolbar >  #personal-bookmarks > #PlacesToolbar > hbox {
     -moz-box-orient: vertical !important;
}

#PersonalToolbar #PlacesToolbarItems {
    display: flex;
    flex-direction: column;
}


/*  Popups position  */

#PlacesToolbarItems > .bookmark-item >  menupopup, #OtherBookmarks #OtherBookmarksPopup {
    margin-inline-start: calc(var(--uc-personalbar-width) - 8px) !important;
    margin-top: -25px  !important;
}

#PersonalToolbar .cui-widget-panel {
    margin-right: calc(var(--uc-personalbar-width) - 8px) !important;
    margin-top: -25px  !important;
}

#customizationui-widget-panel.bookmarks-toolbar {
    margin-right: calc(var(--uc-personalbar-width) - 12px) !important;
    margin-top: 6px  !important;
}


/*  Buttons spacing  */

#PersonalToolbar > .toolbarbutton-1 {
    padding-block: 4px !important;
}
#PersonalToolbar #PlacesToolbarItems > .bookmark-item {
    padding-block: 4px !important;
}

/*  Hide / align text  */

#PersonalToolbar > .toolbarbutton-1 > .toolbarbutton-text {
    display: -moz-box !important;
    visibility: hidden !important;
    text-align: start !important;
}

#PlacesToolbarItems > .bookmark-item > .toolbarbutton-text {
    text-align: start !important;
    padding-left: 6px !important;
}

/*   OtherBookmarks  on top  */

#OtherBookmarks {
    -moz-box-ordinal-group: 0 !important;
    fill: red !important;
    /*background-color: darkkhaki !important;*/
}

#OtherBookmarks > .toolbarbutton-text {
    visibility: hidden !important;
    text-align: start !important;
}


/***xxxxx Only for Tabs on Bottom xxxxx***/

/* Tabs on bottom , adjusting to width - disable for tabs on top  */

#TabsToolbar {
    margin-left: var(--uc-personalbar-width) !important;
    transition: all 0.4s ease !important;
}
#titlebar {
-moz-box-ordinal-group: 2 !important;
}
.titlebar-buttonbox-container {
    display: none !important;
}

#PersonalToolbar:not([customizing]) {
    padding-top : calc(var(--tab-min-height) + 12px) !important;
}

/***xxxxxxxxxx***/

}

Alles anzeigen

Button Icon :

Horstmann

Zitat von Gabbo

@Horstmann
Vielleicht so:
https://addons.mozilla.org/en-US/firefox/…veforreadlater/

Danke für den Tip !

Horstmann

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 :

JavaScript

//Toggle_Vertical_Bookmarks.uc.js
//Toggle vertical PersonalToolbar + Browser width Test

(function ptbut() {
    
            
    if (location != 'chrome://browser/content/browser.xul' && location != 'chrome://browser/content/browser.xhtml')
       return;

    try {
        CustomizableUI.createWidget({
            id: 'PersonalToolbar-button',
            type: 'custom',
            defaultArea: CustomizableUI.AREA_NAVBAR,
                onBuild: function(aDocument) {
                    var toolbaritem = aDocument.createXULElement('toolbarbutton');
                    var props = {
                        id: 'PersonalToolbar-button',
                        class: 'toolbarbutton-1 chromeclass-toolbar-additional',
                        removable: true,
                        label: 'Toggle Bookmarks',
                        tooltiptext: 'Toggle Bookmarktoolbar',
                    };
               
                    for(var p in props)
                        toolbaritem.setAttribute(p, props[p]);
                    return toolbaritem;
                    
                }
        });
        CustomizableUI.registerToolbarNode(tb);
    } catch(e) { };


document.getElementById('PersonalToolbar-button').addEventListener( "click", onClick );
    
document.addEventListener('keydown', (event) => {
        var keyName = event.key;

        // Mac German keyboard shortcut Cmd + < 
        if (event.metaKey && keyName == '<') {
           onClick(event);        
        }
    }, false
);
    function onClick(aEvent) {

        var d2 = document.getElementById('PersonalToolbar');
        d2.classList.toggle("wide-mode");

        var d1 = document.getElementById('browser');
        d1.classList.toggle("margin");

     }
})();

Alles anzeigen

Das CSS :

CSS

/***  Vertical Bookmarks adjustable ***/


/**  Bookmarks Toggle button **/

#PersonalToolbar-button .toolbarbutton-icon {
    list-style-image: url("toolbar.png") !important;
    opacity: 0.85 !important;
}

@-moz-document url(chrome://browser/content/browser.xhtml) {

#PersonalToolbar:not([customizing]) {
    position: fixed;
    display: flex;
    flex-direction: column;
    left: 0;
    width: var(--uc-personalbar-width);
    height: 100vh;
    max-height: 100vh !important; 
    transition: all 0.4s ease !important;
}

:root:not([chromehidden~="toolbar"]) body > #browser {
    margin-left: var(--uc-margin-width);
    transition: all 0.4s ease !important;
}


/***  Widths , Margins custom  ***/

#PersonalToolbar {
    --uc-personalbar-width: 40px !important;
}
#PersonalToolbar.wide-mode {
    --uc-personalbar-width: 130px !important;
}

#browser {
    --uc-margin-width: 40px !important;
}
#browser.margin {
    --uc-margin-width: 130px !important;
}


/*  Popups position  */

#PlacesToolbarItems > .bookmark-item >  menupopup, #OtherBookmarks #OtherBookmarksPopup {
    margin-inline-start: calc(var(--uc-personalbar-width) - 8px) !important;
    margin-top: -25px  !important;
}


/*  Bookmarks vertical  */

#personal-bookmarks {
    overflow-y: auto; scrollbar-width: none;
}

#PersonalToolbar >  #personal-bookmarks > #PlacesToolbar > hbox {
     -moz-box-orient: vertical !important;
}

#PersonalToolbar #PlacesToolbarItems {
    display: flex;
    flex-direction: column;
}


/*  Bookmarks adjustments  */

#PersonalToolbar .toolbarbutton-1 {
    padding-block: 10px !important;
}

#PersonalToolbar #PlacesToolbarItems > .bookmark-item {
    padding-block: 4px !important;
}

/*  Bookmarks text left  */

#PlacesToolbarItems > .bookmark-item > .toolbarbutton-text {
    text-align: start !important;
    padding-left: 6px !important;
}

}

Alles anzeigen

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

CSS

/***  Order Toolbars Tabs on bottom, Adjust as needed  ***/

#nav-bar {
-moz-box-ordinal-group: 0 !important;
}

#titlebar {
-moz-box-ordinal-group: 1 !important;
}

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

Alles anzeigen

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 :

Horstmann

Zitat von clio

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 .

Horstmann

Zitat von Gabbo

Danke, Zeile 31 ist gelöscht.
Wenn ich ganz scharf nachdenke, könnte ich vielleicht einen Vorteil erkennen.
😁️ Ich weiß einen: bei ausgeblendeter Lesezeichenleiste...

Macht Sinn .

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 .

Nicht dass ich danach verzweifelt suchen würde oder so ... .

Horstmann

Nur der Vollständigkeit halber ; einen der jetzt doppelten oberen Trennlinien kannst Du so loswerden :

CSS

#editBookmarkHeaderSeparator {
   display: none !important;
}

Horstmann

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 .

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 :

JavaScript

//Toggle PersonalToolbar + Browser Test

(function ptbut() {
    
            
    if (location != 'chrome://browser/content/browser.xul' && location != 'chrome://browser/content/browser.xhtml')
       return;

    try {
        CustomizableUI.createWidget({
            id: 'PersonalToolbar-button',
            type: 'custom',
            defaultArea: CustomizableUI.AREA_NAVBAR,
                onBuild: function(aDocument) {
                    var toolbaritem = aDocument.createXULElement('toolbarbutton');
                    var props = {
                        id: 'PersonalToolbar-button',
                        class: 'toolbarbutton-1 chromeclass-toolbar-additional',
                        removable: true,
                        label: 'Toggle Bookmarks',
                        tooltiptext: 'Toggle Bookmarktoolbar',
                    };
               
                    for(var p in props)
                        toolbaritem.setAttribute(p, props[p]);
                    return toolbaritem;
                    
                }
        });
        CustomizableUI.registerToolbarNode(tb);
    } catch(e) { };


document.getElementById('PersonalToolbar-button').addEventListener( "click", onClick );
    
document.addEventListener('keydown', (event) => {
        var keyName = event.key;

        // Mac keyboard shortcut German Cmd + < 
        if (event.metaKey && keyName == '<') {
           onClick(event);        
        }
    }, false
);
    function onClick(aEvent) {

        var d2 = document.getElementById('PersonalToolbar');
        d2.classList.toggle("wide-mode");

        var d1 = document.getElementById('browser');
        d1.classList.toggle("margin");

     }
})();

Alles anzeigen

CSS :

CSS

 /*  Bookmarks text left  */

#PlacesToolbarItems > .bookmark-item > .toolbarbutton-text {
    text-align: start !important;
    padding-left: 6px !important;
}

/**  Bookmarks Toggle button **/

#PersonalToolbar-button .toolbarbutton-icon {
    list-style-image: url("bookmark-cap-32.png") !important;
}

@-moz-document url(chrome://browser/content/browser.xhtml) {

/*
:root:not([inDOMFullscreen]) {
    --uc-vertical-toolbar-width: 40px;
}*/

#PersonalToolbar:not([customizing]) {
    position: fixed;
    display: flex;
    flex-direction: column;
    left: 0;
    width: var(--uc-personalbar-width);
    height: 100vh;
    max-height: 100vh !important; 
    padding-bottom: 120px !important;
    z-index: 2 !important;
}


/*  Width , Margins custom  */

#PersonalToolbar {
    --uc-personalbar-width: 40px !important;
}

#PersonalToolbar.wide-mode {
    --uc-personalbar-width: 130px !important;
}

#browser {
   margin-left: var(--uc-margin-width) !important;
}

#browser {
    --uc-margin-width: 40px !important;
}

#browser.margin {
    --uc-margin-width: 130px !important;
}

#PersonalToolbar, #browser {
    transition: all 0.4s ease !important;
}




#PlacesToolbarItems > .bookmark-item >  menupopup, #OtherBookmarksPopup {
    margin-inline-start: calc(var(--uc-personalbar-width) - 8px) !important;
    margin-top: -25px  !important;
}


#personal-bookmarks {
    overflow-y: auto; scrollbar-width: none;
}

#PersonalToolbar >  #personal-bookmarks > #PlacesToolbar > hbox {
     -moz-box-orient: vertical !important;
}

#PersonalToolbar #PlacesToolbarItems {
    display: flex;
    flex-direction: column;
}

#PersonalToolbar .toolbarbutton-1 {
    padding-block: 10px !important;
}

#PersonalToolbar #PlacesToolbarItems > .bookmark-item {
    padding-block: 4px !important;
}
  
/*
:root:not([chromehidden~="toolbar"]) body > #browser,
:root:not([chromehidden~="toolbar"]) body > #browser-bottombox,
:root:not([chromehidden~="toolbar"]) #customization-container {
    margin-left: var(--uc-personalbar-width);
  }
*/

}

Alles anzeigen

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 .

Horstmann

Zitat von Mira_Belle

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 .

Horstmann

Zitat von Sören Hentzschel

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 .

Horstmann

Zitat von omar1979

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 );

Horstmann

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 :

JavaScript

(function() {


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


  var tb_addonbar = document.createXULElement('toolbar');
  var tb_addonbar_label = "Vertical Add-on Bar";


  tb_addonbar.setAttribute("id" , 'new-toolbar-2');
  tb_addonbar.setAttribute('customizable', "true");
  tb_addonbar.setAttribute("class","toolbar-primary chromeclass-toolbar browser-toolbar customization-target");
  tb_addonbar.setAttribute('mode', 'icons');
  tb_addonbar.setAttribute("orient","vertical");
  tb_addonbar.setAttribute("flex","1");
  tb_addonbar.setAttribute("context","toolbar-context-menu");
  tb_addonbar.setAttribute("toolbarname", "tb_addonbar_label");
  tb_addonbar.setAttribute("label", "tb_addonbar_label");
  tb_addonbar.setAttribute("defaultset","spring");

  var parentE = document.getElementById('appcontent').parentNode;
  var childE = document.getElementById('appcontent');
  parentE.insertBefore( tb_addonbar , childE.nextSibling ); 
  

  CustomizableUI.registerArea('new-toolbar-2', {legacy: true});
  CustomizableUI.registerToolbarNode(tb_addonbar);


})();

Alles anzeigen

Button :

JavaScript

// JavaScript Document
//Toggle new-toolbar-2

(function ptbut() {
    
            
    if (location != 'chrome://browser/content/browser.xul' && location != 'chrome://browser/content/browser.xhtml')
       return;

    try {
        CustomizableUI.createWidget({
            id: 'NewToolbar-button',
            type: 'custom',
            defaultArea: CustomizableUI.AREA_NAVBAR,
                onBuild: function(aDocument) {
                    var toolbaritem = aDocument.createXULElement('toolbarbutton');
                    var currentProfileDirectory = Services.dirsvc.get("ProfD", Ci.nsIFile).path.replace(/\\/g, "/");
                    var buttonicon = "newtoolbar.png"
                    var props = {
                        id: 'NewToolbar-button',
                        class: 'toolbarbutton-1 chromeclass-toolbar-additional',
                        removable: true,
                        label: 'Toggle New Toolbar',
                        tooltiptext: 'Toggle New toolbar',
                        style: 'list-style-image: url("' + ("file:" + currentProfileDirectory + "/chrome/icons/" + buttonicon) +'");',
                    };
                    
                
                    for(var p in props)
                        toolbaritem.setAttribute(p, props[p]);
                    return toolbaritem;
                    
                    
                }
        });
        CustomizableUI.registerToolbarNode(tb);
    } catch(e) { };


document.getElementById('NewToolbar-button').addEventListener( "click", onClick );
    
document.addEventListener('keydown', (event) => {
        var keyName = event.key;


        // Mac : Funktion wird ausgeführt, wenn Cmd + < gedrückt wird
        if (event.metaKey && keyName == '<') {
           onClick(event);        
        }
    }, false
);
    function onClick(aEvent) {

        var d2 = document.getElementById('new-toolbar-2');
        
        if (d2.style.visibility == "") {
            d2.style.visibility = "collapse";
        } else if (d2.style.visibility == "visible") {
            d2.style.visibility = "collapse";
        } else if (d2.style.visibility == "collapse") {
            d2.style.visibility = "visible";
        }
      }
})();

Alles anzeigen

CSS :

CSS

/***  Tester Vertical Toolbar  ***/


#new-toolbar-2:not([customizing]) { 
    background: linear-gradient(to bottom, transparent, khaki, powderblue) !important;
    box-shadow: inset 1px 0px 0px 0px hsl(0, 0%, 10%, 1), 
                         inset 3px 0px 12px 4px hsl(0, 0%, 90%, 1) !important;
    min-width: 180px  !important;
    max-width: 180px  !important;
    width: 180px  !important;
   /*-moz-box-ordinal-group: 1 !important;*/
}

 
/**  Toggle button  **/
#NewToolbar-button > .toolbarbutton-icon {
    opacity: 1 !important;
    border: 1px solid orange !important;
    list-style-image: url("bookmark-cap-32.png") !important;
}

 #new-toolbar-2[customizing] {
    background-color: orange !important;
    outline: 1px solid red !important; 
    min-height: 380px  !important;
    min-width: 180px  !important;
}

Alles anzeigen

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

Horstmann

Zitat von 2002Andreas

Zitat von Horstmann

Das ist der sog. tab throbber ; den kann man ändern

Zitat von balloni

ich arbeite grundsätzlich ohne Tabs

Und wenn die Tableiste auch noch kompl. ausgeblendet wird, dann bleibt nur noch das Icon für Seite neu laden. Animiert ist es auch, und kann beliebig verschoben werden.

Korrekt; aber ich habe etwas den Eindruck dass der OP sich nicht ganz darüber im Klaren ist, ob er tatsächlich gar keine Tab(s) will ; muss man wohl erstmal ausprobieren um zu wissen ob's gefällt .

Falls ja, dann ist Dein Hinweis für komplett deaktivierte Tabs die Lösung; Tabs weg, auf den Reload Button gucken, und fertig .

Ansonsten gibt's noch die One-Liner Varianten, muss man halt mögen, oder die Nummer mit Tableiste versteckt bei nur einer offenen Tab .

Das letztere hat mir damals bei Safari gut gefallen, ich war früher auch lange ohne Tabs unterwegs , nur mit Fenstern .

Im OS benutze ich immer noch keine Tabs .

Das ist aber vielleicht nicht unbedingt was für Anfänger, deshalb hätte ich auch dazu keinen konkreten Vorschlag für etwas das einfach so läuft ohne gewissen Aufwand .

Horstmann

Zitat von balloni

2002Andreas
ich suche nicht den Button "Seite neu laden"
ich suche ein animiertes Icon welches früher als Sanduhr, dann später als sich drehender Punktekreis abgelaufen ist wenn ich eine andere Seite aufrufe und diese nicht sofort angezeigt wird.
Aktuell wird das als eine seitwärts pendelnde Animation im Tabfeld angezeigt und wenn die Seite geladen ist durch das

Das ist der sog. tab throbber ; den kann man ändern, hier zB eine Diskussion zum Thema .

Selber benutze ich ein eigenes animiertes icon, daher hab ich keinen getesteten CSS für Dich parat .

Horstmann

Ich weiss, wäre nur manchmal nett , wenn Fragen und Antworten etwas eloquenter und ausfühlicher wären - ist ja kein Twitter hier !

Horstmann

Zitat von Kyror

Ja, ich meinte den Bereich Lesezeichen hinzufügen. Perfekte Lösung, vielen Dank!

Und welche Lösung hat jetzt welches Problem gelöst ?

Horstmann

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 ...

#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 :

JavaScript

/* new_toolbar.us.js */


(function() {
if (location != AppConstants.BROWSER_CHROME_URL)
return;




var tb = document.createXULElement('toolbar');
tb.id = 'new-toolbar-2';
tb.setAttribute('customizable', "true");
tb.setAttribute("class","toolbar-primary chromeclass-toolbar browser-toolbar customization-target");
tb.setAttribute('mode', 'icons');
tb.setAttribute("toolboxid","navigator-toolbox");
tb.setAttribute("orient","vertical");
tb.setAttribute("flex","1");
tb.setAttribute("context","toolbar-context-menu");
tb.setAttribute("toolbarname", "new-toolbar-2_label");
tb.setAttribute("label", "new-toolbar-2_label");
tb.setAttribute("defaultset","spring");
var parentE = document.getElementById('sidebar-box').parentNode;
var childE = document.getElementById('sidebar-box');
parentE.insertBefore( tb , childE );
CustomizableUI.registerArea('new-toolbar-2', {legacy: true});
CustomizableUI.registerToolbarNode(tb);
})();

Alles anzeigen

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

CSS

#new-toolbar-2 {
background-color: orange !important;
color: red !important;
border: 2px solid red !important;
min-height: 180px  !important;
width: 180px  !important;
max-width: 180px  !important;
-moz-box-ordinal-group: 1 !important;
}




/*  Bookmarks vertical  */


#PlacesToolbarItems {
display: flex;
flex-direction: column;
}

Alles anzeigen

Button zum Ein-/ Ausklappen :

JavaScript

// JavaScript Document
//Toggle new-toolbar-2


(function ptbut() {




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


try {
CustomizableUI.createWidget({
id: 'NewToolbar-button',
type: 'custom',
defaultArea: CustomizableUI.AREA_NAVBAR,
onBuild: function(aDocument) {
var toolbaritem = aDocument.createXULElement('toolbarbutton');
var currentProfileDirectory = Services.dirsvc.get("ProfD", Ci.nsIFile).path.replace(/\\/g, "/");
var buttonicon = "newtoolbar.png"
var props = {
id: 'NewToolbar-button',
class: 'toolbarbutton-1 chromeclass-toolbar-additional',
removable: true,
label: 'Toggle New Toolbar',
tooltiptext: 'Toggle New toolbar',
style: 'list-style-image: url("' + ("file:" + currentProfileDirectory + "/chrome/icons/" + buttonicon) +'");',
};




for(var p in props)
toolbaritem.setAttribute(p, props[p]);
return toolbaritem;




}
});
CustomizableUI.registerToolbarNode(tb);
} catch(e) { };




document.getElementById('NewToolbar-button').addEventListener( "click", onClick );


document.addEventListener('keydown', (event) => {
var keyName = event.key;




// Mac : Funktion wird ausgeführt, wenn Cmd + < gedrückt wird
if (event.metaKey && keyName == '<') {
onClick(event);
}
}, false
);
function onClick(aEvent) {


var d2 = document.getElementById('new-toolbar-2');


if (d2.style.visibility == "") {
d2.style.visibility = "collapse";
} else if (d2.style.visibility == "visible") {
d2.style.visibility = "collapse";
} else if (d2.style.visibility == "collapse") {
d2.style.visibility = "visible";
}
}
})();

Alles anzeigen

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 !

Horstmann

Zitat von Mira_Belle

Ich nutze das Button_PersonalToolbar.uc.js, nur ist beim Start des Firefox
die Lesezeichen-Symbolleiste sichtbar.
Als Notlösung haben "wir", wie hier beschrieben
einfach eingefügt.

In dem Thread zum Toggle Button ist die Festlegung vom Startzustand eigentlich schn öfters definiert worden, in den Scripts die gepostet wurden.

BrokenHeart hat eine super Variante angeboten, die das Problem mit der mehrere Fenster übergreifenden Buttonfunktion löst .

Nur der Startzustand war dabei weggefallen , war aber ja auch nicht angefragt .

Beide unserer Notlösungen scheinen zu funktionieren, zumindest auf meiner Seite ; die Frage scheint mir eher ob man den Code eleganter einpflegen kann, als dass man eine komplett andere Lösung braucht .

Horstmann

Zitat von Mira_Belle

Ich bekomme es einfach nicht gebacken!
Es gibt eine Funktion in JavaScript um Elemente auszublenden.
function hide_elements()
im zusammenspiel mit document.getElementById(elementName).style.display='none';
Aber ich bekomme es einfach nicht hin.

Jeztz bin ich etwas verwirrt - geht's dabei um die ursprüngliche Frage - das Anpassen des Browserfensters beim Schliessen einer seitlichen Leiste ?

Horstmann

Ich glaube der OP meint evtl. das hier, ähnlich wie Andreas's Vorschlag , s. Anhang .

Nehmen wir noch Wetten an ?

CSS

#editBMPanel_folderTree {
min-height: 550px !important;
}

Beiträge von Horstmann

Skript "Alternative Searchbar" funktioniert seit Firefox 107 nicht mehr

Vertikale Lesezeichenleiste, Script und CSS

userChrome.js Scripte für den Fuchs (Diskussion)

Vertikale Lesezeichenleiste, Script und CSS

Vertikale Lesezeichenleiste, Script und CSS

userChrome.js Scripte für den Fuchs (Diskussion)

Lesezeichen Ordner Anzeige vergrößern

Vertikale Lesezeichenleiste, Script und CSS

Vertikale Lesezeichenleiste, Script und CSS

Vertikale Lesezeichenleiste, Script und CSS

Vertikale Lesezeichenleiste, Script und CSS

Vertikale Lesezeichenleiste, Script und CSS

Leisten zusammenlegen

Leisten zusammenlegen

Lesezeichen Ordner Anzeige vergrößern

Lesezeichen Ordner Anzeige vergrößern

Vertikale Lesezeichenleiste, Script und CSS

Vertikale Lesezeichenleiste, Script und CSS

Vertikale Lesezeichenleiste, Script und CSS

Lesezeichen Ordner Anzeige vergrößern