Vertikale Zusatzleiste wird nicht angezeigt.

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?

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

harff182

Hast Du var addonbar_v_on_the_left = true auf "false" gesetzt?

3 Helferlein - Ein Gedanke...

omar1979

Zitat von Dharkness

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

Bei mir sieht diese Zeile jetzt so aus:

var addonbar_v2_on_the_left = false; // display vertical toolbar on the left (true) or the right (false)

ich setz das mal auf true und teste nochmals.

Danke für die Info.

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 .

omar1979

Hab jetzt so gemacht, wie ich in meinem oberen Beitrag gesagt habe und es sieht jetzt so aus.

Mal noch etwas weiter testen.

Wenn ich in dieser Zeile das 2 nach dem addonbar_v wegnehme verschwindet die Leiste wieder.

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

CSS

// '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 AddonbarVertical = {
  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_v2_label = "Vertical right Add-on Bar"; // toolbar name
    var button_label = "Toggle vertical right Add-on Bar"; // Toggle button name
    var addonbar_v2_togglebutton = true; // display toggle button for vertical toolbar (true) or not (false)
    var addonbar_v2_on_the_left = false; // display vertical toolbar on the left (true) or the right (false)
    var insert_before_borders = false; // may not always offer a visible change
    var style_addonbar_v2 = true; // apply default toolbar appearance/colors to vertical add-on bar
    var addonbar_v2_width = "30px"; // toolbar width
    var compact_buttons = false; // compact button size (true) or default button size (false)

    try {
     if(document.getElementById('toolbox_abv2') == null && document.getElementById('addonbar_v2') == null) {
      if(appversion <= 62) var toolbox_abv2 = document.createElement("toolbox");
      else var toolbox_abv2 = document.createXULElement("toolbox");
      toolbox_abv2.setAttribute("orient","horizontal");
      toolbox_abv2.setAttribute("id","toolbox_abv2");
      toolbox_abv2.setAttribute("insertbefore","sidebar-box");
      
      if(appversion <= 62) var tb_addonbarv = document.createElement("toolbar");
      else var tb_addonbarv = document.createXULElement("toolbar");
      tb_addonbarv.setAttribute("id","addonbar_v2");
      tb_addonbarv.setAttribute("customizable","true");
      tb_addonbarv.setAttribute("class","toolbar-primary chromeclass-toolbar browser-toolbar customization-target");
      tb_addonbarv.setAttribute("mode","icons");
      tb_addonbarv.setAttribute("iconsize","small");
      tb_addonbarv.setAttribute("toolboxid","navigator-toolbox");
      tb_addonbarv.setAttribute("orient","vertical");
      tb_addonbarv.setAttribute("flex","1");
      tb_addonbarv.setAttribute("context","toolbar-context-menu");
      tb_addonbarv.setAttribute("toolbarname", addonbar_v2_label);
      tb_addonbarv.setAttribute("label", addonbar_v2_label);
      tb_addonbarv.setAttribute("lockiconsize","true");
      tb_addonbarv.setAttribute("defaultset","spring");
      
      toolbox_abv2.appendChild(tb_addonbarv);
      
      CustomizableUI.registerArea("addonbar_v2", {legacy: true});
      if(appversion >= 65) CustomizableUI.registerToolbarNode(tb_addonbarv);
      
      if(addonbar_v2_on_the_left) {
        if(insert_before_borders || appversion >= 86) document.getElementById("browser").insertBefore(toolbox_abv2,document.getElementById("browser").firstChild);
        else document.getElementById("browser").insertBefore(toolbox_abv2,document.getElementById("browser").firstChild.nextSibling);
      }
      else {
        if(insert_before_borders) document.getElementById("browser").appendChild(toolbox_abv2);
        else document.getElementById("browser").insertBefore(toolbox_abv2,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_v2').setAttribute("orient","horizontal");
              document.querySelector('#navigator-toolbox').appendChild(document.querySelector('#addonbar_v2'));
            }
            else  {
              document.querySelector('#addonbar_v2').setAttribute("orient","vertical");
              document.querySelector('#toolbox_abv2').appendChild(document.querySelector('#addonbar_v2'));

            }
          } 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_v2"), Services.prefs.getBranch("browser.vaddonbar.").getBoolPref("enabled"));
        setToolbarVisibility(document.getElementById("toolbox_abv2"), Services.prefs.getBranch("browser.vaddonbar.").getBoolPref("enabled"));
      } catch(e) {}
      
      if(addonbar_v2_togglebutton) {
      
        CustomizableUI.createWidget({
            id: "tooglebutton_addonbar_v2", // 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_v2");
                  setToolbarVisibility(vAddonBar, vAddonBar.collapsed);
                      
                  var vAddonBarBox = win.document.getElementById("toolbox_abv2");
                  setToolbarVisibility(vAddonBarBox, vAddonBarBox.collapsed);
                      
                  Services.prefs.getBranch("browser.vaddonbar.").setBoolPref("enabled",!vAddonBar.collapsed);
                  
                  if(!vAddonBar.collapsed)
                    win.document.querySelector('#tooglebutton_addonbar_v2').setAttribute("checked","true");
                  else win.document.querySelector('#tooglebutton_addonbar_v2').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_v2");\
          setToolbarVisibility(vAddonBar, vAddonBar.collapsed);\
          var vAddonBarBox = win.document.getElementById("toolbox_abv2");\
          setToolbarVisibility(vAddonBarBox, vAddonBarBox.collapsed);\
          Services.prefs.getBranch("browser.vaddonbar.").setBoolPref("enabled",!vAddonBar.collapsed);\
          if(!vAddonBar.collapsed)\
            win.document.querySelector("#tooglebutton_addonbar_v2").setAttribute("checked","true");\
          else win.document.querySelector("#tooglebutton_addonbar_v2").removeAttribute("checked");\
        }\
      ');
      document.getElementById('mainKeyset').appendChild(key);
      
     }
    } catch(e) {}
    
    // style toolbar & toggle button
    var addonbar_v2_style = '';
    var tooglebutton_addonbar_v2_style = '';
    
    if(style_addonbar_v2) {
      var end_border =' \
        #addonbar_v2 { \
            -moz-border-end: 1px solid var(--sidebar-border-color,rgba(0,0,0,0.1)) !important; \
        }\
      ';
          
      if(!addonbar_v2_on_the_left) {
        end_border ='\
          #addonbar_v2 { \
            -moz-border-start: 1px solid var(--sidebar-border-color,rgba(0,0,0,0.1)) !important; \
          }\
        ';
      }

      addonbar_v2_style ='\
        #addonbar_v2 { \
          -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_v2 { \
          background: var(--lwt-accent-color) !important; \
        } \
        #main-window[lwtheme-image="true"]:-moz-lwtheme #addonbar_v2 { \
          background: var(--lwt-header-image) !important; \
          background-position: 0vw 50vh !important; \
        } \
        #main-window:not([customizing]) #toolbox_abv2:not([collapsed="true"]), \
        #main-window:not([customizing]) #addonbar_v2:not([collapsed="true"]) { \
          min-width: '+addonbar_v2_width+'; \
          width: '+addonbar_v2_width+'; \
          max-width: '+addonbar_v2_width+'; \
        } \
        #main-window[chromehidden="menubar toolbar location directories status extrachrome "] #toolbox_abv2:not([collapsed="true"]), \
        #main-window[chromehidden="menubar toolbar location directories status extrachrome "] #addonbar_v2:not([collapsed="true"]), \
        #main-window[sizemode="fullscreen"] #toolbox_abv2:not([collapsed="true"]), \
        #main-window[sizemode="fullscreen"] #addonbar_v2:not([collapsed="true"]) { \
          min-width: 0px; \
          width: 0px; \
          max-width: 0px; \
        } \
        #main-window[customizing] #addonbar_v2 { \
          outline: 1px dashed !important; \
          outline-offset: -2px !important; \
        } \
        #addonbar_v2:-moz-lwtheme { \
          background: var(--lwt-header-image) !important; \
          background-position: 100vw 50vh !important; \
        } \
        #addonbar_v2 toolbarbutton, \
        #addonbar_v2 toolbar .toolbarbutton-1 { \
          padding: 0 !important; \
        } \
        '+end_border+' \
      ';
    }
    
    if(addonbar_v2_togglebutton) {
      tooglebutton_addonbar_v2_style ='\
        #tooglebutton_addonbar_v2 .toolbarbutton-icon { \
          list-style-image: url("chrome://browser/skin/sidebars.svg"); \
          fill: green; \
        }\
        /*#tooglebutton_addonbar_v2 .toolbarbutton-icon { \
          list-style-image: url("chrome://browser/skin/forward.svg"); \
          fill: red; \
        } \
        #tooglebutton_addonbar_v2[checked] .toolbarbutton-icon { \
          fill: green;  \
        } \
        #tooglebutton_addonbar_v2 { \
          background: url("chrome://browser/skin/back.svg") no-repeat; \
          background-size: 35% !important; \
          background-position: 10% 70% !important; \
        } \
        #tooglebutton_addonbar_v2[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_v2 toolbarbutton .toolbarbutton-icon { \
          padding: 0 !important; \
          width: 16px !important; \
          height: 16px !important; \
        } \
        #addonbar_v2 .toolbarbutton-badge-stack { \
          padding: 0 !important; \
          margin: 0 !important; \
          width: 16px !important; \
          min-width: 16px !important; \
          height: 16px !important; \
          min-height: 16px !important; \
        } \
        #addonbar_v2 toolbarbutton .toolbarbutton-badge { \
          margin-top: 0px !important; \
          font-size: 8px !important; \
        } \
      ";
      
    var uri = Services.io.newURI("data:text/css;charset=utf-8," + encodeURIComponent('\
      '+addonbar_v2_style+' \
      '+tooglebutton_addonbar_v2_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", AddonbarVertical.init(), false);
/* Use the below code instead of the one above this line, if issues occur */
/*
setTimeout(function(){
  AddonbarVertical.init();
},2000);
*/

Alles anzeigen

zur Zeit sieht die Leiste so aus:

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 .

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.

2002Andreas

Zitat von Horstmann

wenn ich zusätzlich noch

Ist auch mit Windows so

omar1979

Zitat von Horstmann

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

Da ich dachte, dass es bei Windows anderst ist, hab ich das nicht beachtet..

Jetzt wo es 2002Andreas bestätigte, dass es bei Windows auch so ist, hab ich es gemacht.

Und tatsächlich.. die Leiste ist jetzt auf der rechten Seite, nur die Farbe der Leiste ist nicht automatisch rot geworden.

Der Hintergrund des Icons der Leiste ist auch immernoch grau als ob es auf Hover wäre.

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 .

omar1979

Zitat von Horstmann

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

Es ist das Script das 2002Andreas gepostet hat, die benütze ich auch für auf der linken Seite. ich hab nur in diesem Script die addonbar_v zu addonbar_v2 geändert und die toolbox_abv in toolbox_abv2 geändert, damit ich es benützen kann.

Horstmann

Zitat von omar1979

Zitat von Horstmann

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

Es ist das Script das 2002Andreas gepostet hat, die benütze ich auch für auf der linken Seite. ich hab nur in diesem Script die addonbar_v zu addonbar_v2 geändert und die toolbox_abv in toolbox_abv2 geändert, damit ich es benützen kann.

Und die Zeilen 229 und darunter von hier haben also die selben Einträge wie der korrespondierende Code von Andreas ?

omar1979

Zitat von Horstmann

Und die Zeilen 229 und darunter von hier haben also die selben Einträge wie der korrespondierende Code von Andreas ?

Hoppla.. Sorry irgendwie hab ich glaub ich doch den alten Script genommen. Ich sollte es löschen und den anderen code umändern. mach ich aber morgen.

Horstmann

Kommt in den besten Familien vor .

Was die Hintergrundfarbe der neuen Leiste angeht , bei mir - und zumindest mit der Variante die ich oben gepostet hatte - passen sich beide Zusatzleisten an die allgemeine Toolbarfarbe an .

omar1979

Zitat von Horstmann

Was die Hintergrundfarbe der neuen Leiste angeht , bei mir - und zumindest mit der Variante die ich oben gepostet hatte - passen sich beide Zusatzleisten an die allgemeine Toolbarfarbe an .

Besten Dank. Das tut auch die, die ich für die linke Seite benütze auch. Werde morgen das Ändern und schauen.

Horstmann

Zitat von omar1979

Zitat von Horstmann

Was die Hintergrundfarbe der neuen Leiste angeht , bei mir - und zumindest mit der Variante die ich oben gepostet hatte - passen sich beide Zusatzleisten an die allgemeine Toolbarfarbe an .

Besten Dank. Das tut auch die, die ich für die linke Seite benütze auch. Werde morgen das Ändern und schauen.

Gerne doch .

Zum Einfärben beider Zusatzleisten funktioniert bei mir übrigens deine Scriptversion von oben auch, also zumindest in dem Punkt sollte da eigentlich kein Problem sein .

omar1979

ich hab jetzt die original-code die für linke vertikale leiste funkt umgeändert für rechts funkt aber immernoch nicht.

hier die code:

CSS

// '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 AddonbarVertical = {
  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_v2_label = "Vertical right Add-on Bar"; // toolbar name
    var button_label = "Toggle vertical right Add-on Bar"; // Toggle button name
    var addonbar_v2_togglebutton = true; // display toggle button for vertical toolbar (true) or not (false)
    var addonbar_v2_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_v2 = true; // apply default toolbar appearance/colors to vertical add-on bar
    var addonbar_v2_width = "30px"; // toolbar width
    var compact_buttons = false; // compact button size (true) or default button size (false)

    try {
     if(document.getElementById('toolbox_abv2') == null && document.getElementById('addonbar_v2') == null) {
      if(appversion <= 62) var toolbox_abv2 = document.createElement("toolbox");
      else var toolbox_abv2 = document.createXULElement("toolbox");
      toolbox_abv2.setAttribute("orient","horizontal");
      toolbox_abv2.setAttribute("id","toolbox_abv2");
      toolbox_abv2.setAttribute("insertbefore","sidebar-box");
      
      if(appversion <= 62) var tb_addonbarv = document.createElement("toolbar");
      else var tb_addonbarv = document.createXULElement("toolbar");
      tb_addonbarv.setAttribute("id","addonbar_v2");
      tb_addonbarv.setAttribute("customizable","true");
      tb_addonbarv.setAttribute("class","toolbar-primary chromeclass-toolbar browser-toolbar customization-target");
      tb_addonbarv.setAttribute("mode","icons");
      tb_addonbarv.setAttribute("iconsize","small");
      tb_addonbarv.setAttribute("toolboxid","navigator-toolbox");
      tb_addonbarv.setAttribute("orient","vertical");
      tb_addonbarv.setAttribute("flex","1");
      tb_addonbarv.setAttribute("context","toolbar-context-menu");
      tb_addonbarv.setAttribute("toolbarname", addonbar_v2_label);
      tb_addonbarv.setAttribute("label", addonbar_v2_label);
      tb_addonbarv.setAttribute("lockiconsize","true");
      tb_addonbarv.setAttribute("defaultset","spring");
      
      toolbox_abv2.appendChild(tb_addonbarv);
      
      CustomizableUI.registerArea("addonbar_v2", {legacy: true});
      if(appversion >= 65) CustomizableUI.registerToolbarNode(tb_addonbarv);
      
      if(addonbar_v2_on_the_left) {
        if(insert_before_borders || appversion >= 86) document.getElementById("browser").insertBefore(toolbox_abv2,document.getElementById("browser").firstChild);
        else document.getElementById("browser").insertBefore(toolbox_abv2,document.getElementById("browser").firstChild.nextSibling);
      }
      else {
        if(insert_before_borders) document.getElementById("browser").appendChild(toolbox_abv2);
        else document.getElementById("browser").insertBefore(toolbox_abv2,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_v2').setAttribute("orient","horizontal");
              document.querySelector('#navigator-toolbox').appendChild(document.querySelector('#addonbar_v'));
            }
            else  {
              document.querySelector('#addonbar_v2').setAttribute("orient","vertical");
              document.querySelector('#toolbox_abv2').appendChild(document.querySelector('#addonbar_v2'));

            }
          } 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_v2"), Services.prefs.getBranch("browser.vaddonbar.").getBoolPref("enabled"));
        setToolbarVisibility(document.getElementById("toolbox_abv2"), Services.prefs.getBranch("browser.vaddonbar.").getBoolPref("enabled"));
      } catch(e) {}
      
      if(addonbar_v2_togglebutton) {
      
        CustomizableUI.createWidget({
            id: "tooglebutton_addonbar_v2", // 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_v2");
                  setToolbarVisibility(vAddonBar, vAddonBar.collapsed);
                      
                  var vAddonBarBox = win.document.getElementById("toolbox_abv2");
                  setToolbarVisibility(vAddonBarBox, vAddonBarBox.collapsed);
                      
                  Services.prefs.getBranch("browser.vaddonbar.").setBoolPref("enabled",!vAddonBar.collapsed);
                  
                  if(!vAddonBar.collapsed)
                    win.document.querySelector('#tooglebutton_addonbar_v2').setAttribute("checked","true");
                  else win.document.querySelector('#tooglebutton_addonbar_v2').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_v2");\
          setToolbarVisibility(vAddonBar, vAddonBar.collapsed);\
          var vAddonBarBox = win.document.getElementById("toolbox_abv2");\
          setToolbarVisibility(vAddonBarBox, vAddonBarBox.collapsed);\
          Services.prefs.getBranch("browser.vaddonbar.").setBoolPref("enabled",!vAddonBar.collapsed);\
          if(!vAddonBar.collapsed)\
            win.document.querySelector("#tooglebutton_addonbar_v2").setAttribute("checked","true");\
          else win.document.querySelector("#tooglebutton_addonbar_v2").removeAttribute("checked");\
        }\
      ');
      document.getElementById('mainKeyset').appendChild(key);
      
     }
    } catch(e) {}
    
    // style toolbar & toggle button
    var addonbar_v2_style = '';
    var tooglebutton_addonbar_v2_style = '';
    
    if(style_addonbar_v2) {
      var end_border =' \
        #addonbar_v2 { \
            -moz-border-end: 1px solid var(--sidebar-border-color,rgba(0,0,0,0.1)) !important; \
        }\
      ';
          
      if(!addonbar_v2_on_the_left) {
        end_border ='\
          #addonbar_v2 { \
            -moz-border-start: 1px solid var(--sidebar-border-color,rgba(0,0,0,0.1)) !important; \
          }\
        ';
      }

      addonbar_v2_style ='\
        #addonbar_v2 { \
          -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_v2 { \
          background: var(--lwt-accent-color) !important; \
        } \
        #main-window[lwtheme-image="true"]:-moz-lwtheme #addonbar_v2 { \
          background: var(--lwt-header-image) !important; \
          background-position: 0vw 50vh !important; \
        } \
        #main-window:not([customizing]) #toolbox_abv2:not([collapsed="true"]), \
        #main-window:not([customizing]) #addonbar_v2:not([collapsed="true"]) { \
          min-width: '+addonbar_v2_width+'; \
          width: '+addonbar_v2_width+'; \
          max-width: '+addonbar_v2_width+'; \
        } \
        #main-window[chromehidden="menubar toolbar location directories status extrachrome "] #toolbox_abv2:not([collapsed="true"]), \
        #main-window[chromehidden="menubar toolbar location directories status extrachrome "] #addonbar_v2:not([collapsed="true"]), \
        #main-window[sizemode="fullscreen"] #toolbox_abv2:not([collapsed="true"]), \
        #main-window[sizemode="fullscreen"] #addonbar_v2:not([collapsed="true"]) { \
          min-width: 0px; \
          width: 0px; \
          max-width: 0px; \
        } \
        #main-window[customizing] #addonbar_v2 { \
          outline: 1px dashed !important; \
          outline-offset: -2px !important; \
        } \
        #addonbar_v2:-moz-lwtheme { \
          background: var(--lwt-header-image) !important; \
          background-position: 100vw 50vh !important; \
        } \
        #addonbar_v2 toolbarbutton, \
        #addonbar_v2 toolbar .toolbarbutton-1 { \
          padding: 0 !important; \
        } \
        '+end_border+' \
      ';
    }
    
    if(addonbar_v2_togglebutton) {
      tooglebutton_addonbar_v2_style ='\
         #tooglebutton_addonbar_v2:hover > .toolbarbutton-icon {\
         background-color: var(--toolbarbutton-active-background)!important; }\
         #tooglebutton_addonbar_v2> .toolbarbutton-icon {\
          background-color: transparent !important;}\
        #tooglebutton_addonbar_v2 .toolbarbutton-icon { \
          list-style-image: url("chrome://browser/skin/sidebars.svg"); \
          fill: white; \
        }\
        /*#tooglebutton_addonbar_v2 .toolbarbutton-icon { \
          list-style-image: url("chrome://browser/skin/forward.svg"); \
          fill: red; \
        } \
        #tooglebutton_addonbar_v2[checked] .toolbarbutton-icon { \
          fill: green;  \
          background:none !important;\
        } \
        #tooglebutton_addonbar_v2 { \
          background: url("chrome://browser/skin/back.svg") no-repeat; \
          background-size: 35% !important; \
          background-position: 10% 70% !important; \
        } \
        #tooglebutton_addonbar_v2[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_v2 toolbarbutton .toolbarbutton-icon { \
          padding: 0 !important; \
          width: 16px !important; \
          height: 16px !important; \
        } \
        #addonbar_v2 .toolbarbutton-badge-stack { \
          padding: 0 !important; \
          margin: 0 !important; \
          width: 16px !important; \
          min-width: 16px !important; \
          height: 16px !important; \
          min-height: 16px !important; \
        } \
        #addonbar_v2 toolbarbutton .toolbarbutton-badge { \
          margin-top: 0px !important; \
          font-size: 8px !important; \
        } \
      ";
      
    var uri = Services.io.newURI("data:text/css;charset=utf-8," + encodeURIComponent('\
      '+addonbar_v2_style+' \
      '+tooglebutton_addonbar_v2_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", AddonbarVertical.init(), false);
/* Use the below code instead of the one above this line, if issues occur */
/*
setTimeout(function(){
  AddonbarVertical.init();
},2000);
*/

Alles anzeigen

und hier ein bild davon:

also die Leiste ist rechts was ok ist. der icon von der leiste hat keinen grauen hintergrund was auch ok ist.

aber die Leiste wird nicht automatisch wie die auf der linken seite rot.

Horstmann

Zitat von omar1979

ich hab jetzt die original-code die für linke vertikale leiste funkt umgeändert für rechts funkt aber immernoch nicht.
also die Leiste ist rechts was ok ist. der icon von der leiste hat keinen grauen hintergrund was auch ok ist.
aber die Leiste wird nicht automatisch wie die auf der linken seite rot.

Hmm, komisch ...

Dein Script funktioniert bei mir für die Hintergrundfarbe in beiden Leisten ; wenn die Farbe in keiner der Leisten funktionieren würde wäre das ja nachvollziehbar , aber beide benutzen background-color: var(--toolbar-bgcolor) für die jeweiligen IDs , und die Scripts sprechen (bei mir) auch beide an .

Vielleicht könntest Du probieren das Script für die linke Leiste zum testen mal rauszunehmen, auch wenn ich mal annehme dass Du das nicht verändert hast , und dass kein anderes CSS existiert das spezifisch nur die originale linke Zusatzleiste steuert .

Als Krücke sollte auch CSS funktionieren, evtl. sowas :

CSS

        #addonbar_v2 {
          -moz-appearance: none !important;
          background-color: red !important;
        }

Vertikale Zusatzleiste wird nicht angezeigt.

Ähnliche Themen

Button "Cookies akzeptieren" wird nicht angezeigt

Webseite von Microcontroller wird nicht angezeigt.

Youtube: Kommentar wird nicht angezeigt

Webseite wird nicht angezeigt

RestartFirefoxButton_Movable.uc.js wird unter Debian nicht angezeigt?

Website/Player wird nicht angezeigt