Beiträge von Horstmann

Horstmann

Zitat von omar1979

Zitat von Horstmann

Den Iconhintergrund hat Andreas auf der letzten Seite schon erläutert, zB hier ; der Leistenhintergrund in deiner ersten Leiste ist ja rot, sollte in der neuen Leiste dann eigentlich auch so sein .

Ich benütze ja diese Code, die 2002Andreas dort teilte. Hab die Code noch geändert, damit ich die gleiche Leiste auch auf der rechten Seite habe.

Der letzte Script Code den Du oben gepostet hast ist ohne die Änderungen von Andreas für die Buttons und ihr aktiv bzw. hover Verhalten .

Persönlich würde ich die potthässlichen Buttons eh aus dem Script löschen, und über CSS einbauen , geht auch ohne Drama .

Horstmann

Zitat von omar1979

Hier ist mal die Code, evtl kann jemand helfen den Fehler zu finden.
1. Wäre froh wenn die Leiste auf der rechten Seite wäre.
2. Die Farbe der Leiste wie beim Leiste auf der linken Seite auch automatisch rot wird.
3. Dass der Hintergrund des Icons von der Leiste nicht immer grau ist, als ob es immer auf Hover wäre.
Besten Danke im Voraus..

Einige Antworten haben sich wohl überschnitten ; hast Du die Lösungen aus den letzten Beiträgen mal probiert ?

Den Iconhintergrund hat Andreas auf der letzten Seite schon erläutert, zB hier ; der Leistenhintergrund in deiner ersten Leiste ist ja rot, sollte in der neuen Leiste dann eigentlich auch so sein .

Horstmann

Zitat von Dharkness

Zitat von omar1979

aber die vertikale Leiste ist auch auf der linken Seite.

Du hast das → var addonbar_v_on_the_left auch auf false geändert?

Bei mir ( Mac ) funktioniert die Leiste rechts nur wenn ich zusätzlich noch var insert_before_borders = true setze .

Horstmann

Nur für eine schnellen Test habe ich mal ziemlich genau das gemacht, was Darkness inzwischen auch schon vorgeschlagen hat .

Hier sind einfach die IDs etc. umbenannt ( überall Rex angehängt ), die Einträge ziemlich am Anfang für var addonbar_vRex_on_the_left = false und - in meinem Fall muss ich das auch mit ändern - var insert_before_borders = true gesetzt .

Und es taucht damit eine zweite Leiste rechts auf , auch mit eigenem Button .

Zusätzlich zum originalen Script könntest Du das mal ausprobieren, mit einem unterschiedlichen Scriptnamen natürlich, und schauen ob's funktioniert .

JavaScript

//Test second toolbar right

// 'Vertical Add-on Bar' script for Firefox 60+ by Aris
//
// no 'close' button
// 'toggle' toolbar with 'Ctr + Alt + /' on Windows/Linux or 'Cmd + Alt + /' on macOS
// optional toggle button hides the toolbar temporarily, it gets restored on every restart
// 'Vertical Add-on Bar' entry is only visible in toolbars context menu when in customizing mode
//
// flexible spaces on toolbar work 'vertically'
// toolbar can be on the left or on the right
// toolbar is display horizontally in customizing mode

// [!] Fix for WebExtensions with own windows by 黒仪大螃蟹 (for 1-N scripts)


Components.utils.import("resource:///modules/CustomizableUI.jsm");
var {Services} = Components.utils.import("resource://gre/modules/Services.jsm", {});
var appversion = parseInt(Services.appinfo.version);



var AddonbarVerticalRex = {
  init: function() {

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

    /* blank tab workaround */
    try {
      if(gBrowser.selectedBrowser.getAttribute('blank')) gBrowser.selectedBrowser.removeAttribute('blank');
    } catch(e) {}
      
    var addonbar_vRex_label = "Vertical Add-on Bar"; // toolbar name
    var button_label = "Toggle vertical Add-on Bar"; // Toggle button name
    var addonbar_vRex_togglebutton = true; // display toggle button for vertical toolbar (true) or not (false)
    var addonbar_vRex_on_the_left = false; // display vertical toolbar on the left (true) or the right (false)
    var insert_before_borders = true; // may not always offer a visible change
    var style_addonbar_vRex = true; // apply default toolbar appearance/colors to vertical add-on bar
    var addonbar_vRex_width = "30px"; // toolbar width
    var compact_buttons = false; // compact button size (true) or default button size (false)

    try {
     if(document.getElementById('toolbox_abvRex') == null && document.getElementById('addonbar_vRex') == null) {
      if(appversion <= 62) var toolbox_abvRex = document.createElement("toolbox");
      else var toolbox_abvRex = document.createXULElement("toolbox");
      toolbox_abvRex.setAttribute("orient","horizontal");
      toolbox_abvRex.setAttribute("id","toolbox_abvRex");
      toolbox_abvRex.setAttribute("insertbefore","sidebar-box");
      
      if(appversion <= 62) var tb_addonbarvRex = document.createElement("toolbar");
      else var tb_addonbarvRex = document.createXULElement("toolbar");
      tb_addonbarvRex.setAttribute("id","addonbar_vRex");
      tb_addonbarvRex.setAttribute("customizable","true");
      tb_addonbarvRex.setAttribute("class","toolbar-primary chromeclass-toolbar browser-toolbar customization-target");
      tb_addonbarvRex.setAttribute("mode","icons");
      tb_addonbarvRex.setAttribute("iconsize","small");
      tb_addonbarvRex.setAttribute("toolboxid","navigator-toolbox");
      tb_addonbarvRex.setAttribute("orient","vertical");
      tb_addonbarvRex.setAttribute("flex","1");
      tb_addonbarvRex.setAttribute("context","toolbar-context-menu");
      tb_addonbarvRex.setAttribute("toolbarname", addonbar_vRex_label);
      tb_addonbarvRex.setAttribute("label", addonbar_vRex_label);
      tb_addonbarvRex.setAttribute("lockiconsize","true");
      tb_addonbarvRex.setAttribute("defaultset","spring");
      
      toolbox_abvRex.appendChild(tb_addonbarvRex);
      
      CustomizableUI.registerArea("addonbar_vRex", {legacy: true});
      if(appversion >= 65) CustomizableUI.registerToolbarNode(tb_addonbarvRex);
      
      if(addonbar_vRex_on_the_left) {
        if(insert_before_borders || appversion >= 86) document.getElementById("browser").insertBefore(toolbox_abvRex,document.getElementById("browser").firstChild);
        else document.getElementById("browser").insertBefore(toolbox_abvRex,document.getElementById("browser").firstChild.nextSibling);
      }
      else {
        if(insert_before_borders) document.getElementById("browser").appendChild(toolbox_abvRex);
        else document.getElementById("browser").insertBefore(toolbox_abvRex,document.getElementById("browser").lastChild);
      }
      
        var observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
          try {
            if(document.querySelector('#main-window').getAttribute('customizing')) {
              document.querySelector('#addonbar_vRex').setAttribute("orient","horizontal");
              document.querySelector('#navigator-toolbox').appendChild(document.querySelector('#addonbar_vRex'));
            }
            else  {
              document.querySelector('#addonbar_vRex').setAttribute("orient","vertical");
              document.querySelector('#toolbox_abvRex').appendChild(document.querySelector('#addonbar_vRex'));

            }
          } catch(e){}
        });    
      });
    
      observer.observe(document.querySelector('#main-window'), { attributes: true, attributeFilter: ['customizing'] });
      
      try {
        Services.prefs.getDefaultBranch("browser.vaddonbar.").setBoolPref("enabled",true);
        setToolbarVisibility(document.getElementById("addonbar_vRex"), Services.prefs.getBranch("browser.vaddonbar.").getBoolPref("enabled"));
        setToolbarVisibility(document.getElementById("toolbox_abvRex"), Services.prefs.getBranch("browser.vaddonbar.").getBoolPref("enabled"));
      } catch(e) {}
      
      if(addonbar_vRex_togglebutton) {
      
        CustomizableUI.createWidget({
            id: "tooglebutton_addonbar_vRex", // button id
            defaultArea: CustomizableUI.AREA_NAVBAR,
            removable: true,
            label: button_label, // button title
            tooltiptext: button_label, // tooltip title
            onClick: function(event) {

              var windows = Services.wm.getEnumerator(null);
                while (windows.hasMoreElements()) {
                  var win = windows.getNext();
                  
                  var vAddonBar = win.document.getElementById("addonbar_vRex");
                  setToolbarVisibility(vAddonBar, vAddonBar.collapsed);
                      
                  var vAddonBarBox = win.document.getElementById("toolbox_abvRex");
                  setToolbarVisibility(vAddonBarBox, vAddonBarBox.collapsed);
                      
                  Services.prefs.getBranch("browser.vaddonbar.").setBoolPref("enabled",!vAddonBar.collapsed);
                  
                  if(!vAddonBar.collapsed)
                    win.document.querySelector('#tooglebutton_addonbar_vRex').setAttribute("checked","true");
                  else win.document.querySelector('#tooglebutton_addonbar_vRex').removeAttribute("checked");
                }

            },
            onCreated: function(button) {
              if(Services.prefs.getBranch("browser.vaddonbar.").getBoolPref("enabled"))
                button.setAttribute("checked","true");
              return button;
            }
                
        });
      }

      // 'Ctr + Alt + /' on Windows/Linux or 'Cmd + Alt + /' on macOS to toggle vertical add-on bar
      var key = document.createXULElement('key');
      if(appversion < 69) key = document.createElement("key");
      key.id = 'key_toggleVAddonBar';
      key.setAttribute('key', '/');
      key.setAttribute('modifiers', 'accel,alt');
      key.setAttribute('oncommand','\
        var windows = Services.wm.getEnumerator(null);\
        while (windows.hasMoreElements()) {\
          var win = windows.getNext();  \
          var vAddonBar = win.document.getElementById("addonbar_vRex");\
          setToolbarVisibility(vAddonBar, vAddonBar.collapsed);\
          var vAddonBarBox = win.document.getElementById("toolbox_abvRex");\
          setToolbarVisibility(vAddonBarBox, vAddonBarBox.collapsed);\
          Services.prefs.getBranch("browser.vaddonbar.").setBoolPref("enabled",!vAddonBar.collapsed);\
          if(!vAddonBar.collapsed)\
            win.document.querySelector("#tooglebutton_addonbar_vRex").setAttribute("checked","true");\
          else win.document.querySelector("#tooglebutton_addonbar_vRex").removeAttribute("checked");\
        }\
      ');
      document.getElementById('mainKeyset').appendChild(key);
      
     }
    } catch(e) {}
    
    // style toolbar & toggle button
    var addonbar_vRex_style = '';
    var tooglebutton_addonbar_vRex_style = '';
    
    if(style_addonbar_vRex) {
      var end_border =' \
        #addonbar_vRex { \
            -moz-border-end: 1px solid var(--sidebar-border-color,rgba(0,0,0,0.1)) !important; \
        }\
      ';
          
      if(!addonbar_vRex_on_the_left) {
        end_border ='\
          #addonbar_vRex { \
            -moz-border-start: 1px solid var(--sidebar-border-color,rgba(0,0,0,0.1)) !important; \
          }\
        ';
      }

      addonbar_vRex_style ='\
        #addonbar_vRex { \
          -moz-appearance: none !important; \
          background-color: var(--toolbar-bgcolor); \
          background-image: var(--toolbar-bgimage); \
          background-clip: padding-box; \
          color: var(--toolbar-color, inherit); \
        } \
        #main-window:-moz-lwtheme #addonbar_vRex { \
          background: var(--lwt-accent-color) !important; \
        } \
        #main-window[lwtheme-image="true"]:-moz-lwtheme #addonbar_vRex { \
          background: var(--lwt-header-image) !important; \
          background-position: 0vw 50vh !important; \
        } \
        #main-window:not([customizing]) #toolbox_abvRex:not([collapsed="true"]), \
        #main-window:not([customizing]) #addonbar_vRex:not([collapsed="true"]) { \
          min-width: '+addonbar_vRex_width+'; \
          width: '+addonbar_vRex_width+'; \
          max-width: '+addonbar_vRex_width+'; \
        } \
        #main-window[chromehidden="menubar toolbar location directories status extrachrome "] #toolbox_abvRex:not([collapsed="true"]), \
        #main-window[chromehidden="menubar toolbar location directories status extrachrome "] #addonbar_vRex:not([collapsed="true"]), \
        #main-window[sizemode="fullscreen"] #toolbox_abvRex:not([collapsed="true"]), \
        #main-window[sizemode="fullscreen"] #addonbar_vRex:not([collapsed="true"]) { \
          min-width: 0px; \
          width: 0px; \
          max-width: 0px; \
        } \
        #main-window[customizing] #addonbar_vRex { \
          outline: 1px dashed !important; \
          outline-offset: -2px !important; \
        } \
        #addonbar_vRex:-moz-lwtheme { \
          background: var(--lwt-header-image) !important; \
          background-position: 100vw 50vh !important; \
        } \
        #addonbar_vRex toolbarbutton, \
        #addonbar_vRex toolbar .toolbarbutton-1 { \
          padding: 0 !important; \
        } \
        '+end_border+' \
      ';
    }
    
    if(addonbar_vRex_togglebutton) {
      tooglebutton_addonbar_vRex_style ='\
        #tooglebutton_addonbar_vRex .toolbarbutton-icon { \
          list-style-image: url("chrome://browser/skin/sidebars.svg"); \
          fill: green; \
        }\
        /*#tooglebutton_addonbar_vRex .toolbarbutton-icon { \
          list-style-image: url("chrome://browser/skin/forward.svg"); \
          fill: red; \
        } \
        #tooglebutton_addonbar_vRex[checked] .toolbarbutton-icon { \
          fill: green;  \
        } \
        #tooglebutton_addonbar_vRex { \
          background: url("chrome://browser/skin/back.svg") no-repeat; \
          background-size: 35% !important; \
          background-position: 10% 70% !important; \
        } \
        #tooglebutton_addonbar_vRex[checked] { \
          transform: rotate(180deg) !important;  \
          background: url("chrome://browser/skin/back.svg") no-repeat; \
          background-position: 10% 30% !important; \
        }*/ \
      ';
    }
    
    var compact_buttons_code = "";
    
    if(compact_buttons)
      compact_buttons_code = "\
        #addonbar_vRex toolbarbutton .toolbarbutton-icon { \
          padding: 0 !important; \
          width: 16px !important; \
          height: 16px !important; \
        } \
        #addonbar_vRex .toolbarbutton-badge-stack { \
          padding: 0 !important; \
          margin: 0 !important; \
          width: 16px !important; \
          min-width: 16px !important; \
          height: 16px !important; \
          min-height: 16px !important; \
        } \
        #addonbar_vRex toolbarbutton .toolbarbutton-badge { \
          margin-top: 0px !important; \
          font-size: 8px !important; \
        } \
      ";
      
    var uri = Services.io.newURI("data:text/css;charset=utf-8," + encodeURIComponent('\
      '+addonbar_vRex_style+' \
      '+tooglebutton_addonbar_vRex_style+' \
      '+compact_buttons_code+' \
    '), null, null);
      
    var sss = Components.classes["@mozilla.org/content/style-sheet-service;1"].getService(Components.interfaces.nsIStyleSheetService);
    sss.loadAndRegisterSheet(uri, sss.AGENT_SHEET);
    
  }

}

/* initialization delay workaround */
document.addEventListener("DOMContentLoaded", AddonbarVerticalRex.init(), false);
/* Use the below code instead of the one above this line, if issues occur */
/*
setTimeout(function(){
  AddonbarVerticalRex.init();
},2000);
*/

Alles anzeigen

Horstmann

Zitat von omar1979

Hallo Allen..
ich hab heute versucht, die vertikale Zusatzleiste umzuändern, so dass ich eine 2.te auf der rechten Seite habe, hat aber nicht geklappt. Benützt evtl. jemand diese Leiste doppelt also für rechts und links? Kann er/sie es teilen? oder mir helfen die änderungen richtig zu machen?

Nur mal aus Neugierde, was hast Du denn probiert um eine zweite vertikale Zusatzleiste zu bekommen ?

Es gibt da verschiedene Möglichkeiten - bzw. 2 die ich selber kenne - wobei das Aris Script die einzig mir bekannte Fertiglösung ist .

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 !

Beiträge von Horstmann

Vertikale Zusatzleiste wird nicht angezeigt.

Vertikale Zusatzleiste wird nicht angezeigt.

Vertikale Zusatzleiste wird nicht angezeigt.

Vertikale Zusatzleiste wird nicht angezeigt.

Vertikale Zusatzleiste wird nicht angezeigt.

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