Vertikale Lesezeichenleiste, Script und CSS

Horstmann

Im ewigen Kampf um die optimale Darstellung der Lesezeichenleiste, bin ich kürzlich auf eine weitere mögliche Lösung gestossen .

Diese CSS positioniert die Lesezeichenleiste als vertikale Liste an die Seite , und funktioniert nach anfänglichen Tests auch prima .

Es gibt nur einen Haken - im Gegensatz zur normalen, horizontalen Lesezeichenleiste, die beim Ausblenden aus dem Browserfenster verschwindet und den Webseiteninhalt freigibt - bleibt bei dieser Variante eine Lücke, bzw. eine Art Platzhalter zurück .

Der Browserinhalt bzw. der Webseiteninhalt passen sich nicht darauf an, dass die Lesezeichenleiste eigenlich nicht mehr da ist - im Gegensatz zum genannten Verhalten der Standard Lesezeichenleiste .

Ich hatte die Frage auch schon auf Reddit gestellt, und der Author der CSS hat sich netterweise dazu mit einem Lösungsvorschlag geäussert, nur funktioniert die Geschichte auch damit noch nicht .

Hättet Ihr dazu eine Idee ?

Anbei die Screenshots zum Thema; ich hoffe das macht Sinn .

PS: Idealerweise würde das Ganze auch mit dem Script zum Verstecken der Lesezeichenleiste funtionieren - das ich übrigens absolut liebe .

Horstmann

Nicht drängeln Leute, bitte, hier kommt jeder dran !

Vielleicht war meine ursprüngliche Erklärung der Angelegenheit wieder mal etwas unverständlich ; es geht hier um einen CSS Code, der die Lesezeichenleiste als vertikale Liste an die Seite plaziert, wie oben schon erwähnt .

Im Prinzip hätte ich gern dass diese Leiste genauso wie die Sidebars Leiste agiert : ist die Sidebar offen, wird der Browserinhalt/ die gerade offene Webseite um die Breite der offenen Sidebar reduziert.

Schliesst man die Sidebar, expandiert der Browserinhalt/Webseiteninhalt zurück auf die volle Browserbreite .

Mit dem vertikalen Lesezeichenleisten CSS funtioniert das auch nach einer Modifikation, aber nur bedingt .

Hier ist der CSS Code für die vertikale Lesezeichenleiste; in der Form ist sie permant sichtbar; auch nach Verstecken der Lesezeichenleiste bleibt eine Lücke am Browserrand zurück, wie in der ersten Post beschrieben und bebildert :

CSS

/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/vertical_bookmarks_toolbar.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */

/* Makes bookmarks toolbar appear vertically at the left side of the window */

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

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

  #PersonalToolbar{
    position: fixed;
    display: flex;
    flex-direction: column;
    left: 0;
    width: var(--uc-vertical-toolbar-width,0);
    
    /* These create a empty area to the bottom of the toolbar, which is to mask a fact that we don't know exactly how high the toolbar should be */
    height: 100vh;
    max-height: 100vh !important; 
    padding-bottom: 120px !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 #PlacesToolbarItems > toolbarseparator{
    height: 7px;
    background-color: currentColor;
    background-clip: padding-box;
    border-block: 3px solid transparent !important;
  }
  #PersonalToolbar .toolbarbutton-1{ padding-block: 10px !important }
  #PersonalToolbar #PlacesToolbarItems > .bookmark-item{ padding-block: 4px !important; }
  

  body > #browser,
  body > #browser-bottombox,
  #customization-container{
    margin-left: var(--uc-vertical-toolbar-width,0);
  }

}

Alles anzeigen

Um eine Anpassung des Browserinhalts bei geschlossener Lesezeichenleiste zu ermöglichen, hat der wohlbekannte Mr. Other Guy netterweise auf meine Frage dazu mit einem (experimentellen) Lösungsvorschlag geantwortet :

CSS

#navigator-toolbox-background:has(#PersonalToolbar[collapsed="true"]) + #browser {
margin-left: 0 !important;
}

Das funtioniert tatsächlich ; hat nur einen Haken - ich muss jedesmal das Fenster Symbolleiste anpassen öffnen , bevor der Effekt in Kraft tritt .

Also Webseite ist offen , Vertikale Lesezeichenleiste offen , Webseiteninhalt komprimiert um die Breite der Lesezeichenleiste .

Dann 'schliesse` ich die Lesezeichenleiste - über Rechtsklickmenü oder Tastaturkürzel auf Lesezeichensymbolleiste -> Nie anzeigen - der Inhalt, die Lesezeichen an sich, verschwinden dann, aber die Leiste selber bleibt, der Webseiteninhalt bleibt komprimiert ( s Screenshots in erster Post ).

Seltsam ist jetzt, dass wenn ich nun Symbolleiste anpassen aktiviere - was dann ja ein neues Tab mit eben den Anpassungsfunktionen öffnet - und dann ohne irgendwas zu machen einfach nur auf meine alte Tab zurückgehe - dann hat sich die Leiste komplett geschlossen , und der Webseiteninhalt ist auf voller Breite sichtbar .

Umgekehrt genauso, beim Öffne einer geschlossenen Lesezeichenleiste passt sich der Webseiteninhalt in der Breite an - aber immer nur nach dem Umweg über Symbolleiste anpassen öffnen ....

Getestet in vielen Varianten, inkl. einem Profil ohne weitere CSS oder Script Modifikationen .

Ideen willkkommen !

Mira_Belle

Also ich habe lange herumprobiert, ewig gebraucht, damit die "neue" Leiste bei mir passte!

Danach noch das "verstecken" Script "installiert!

Klappt so weit, aber wie Du schon beschrieben hast, bleibt der "Hintergrund" der Leiste "stehen"!

Es war mir nicht möglich, das "Element" ausfindig zu machen,

aber der Hintergrund wird durch diesen Code generiert!

CSS

:root:not([chromehidden~="toolbar"]) body > #browser,
:root:not([chromehidden~="toolbar"]) body > #browser-bottombox,
:root:not([chromehidden~="toolbar"]) #customization-container{
    margin-left: 165px !important;
  }

Eventuell hat ja jemand anderes eine Idee, wie man diesen Teil im Javascript unter bekommt?

Müsste dann hier sein!

JavaScript

    function onClick(aEvent) {
        var d2 = document.getElementById('PersonalToolbar');
       
        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

Der vollständigkeitshalber beide Codes.

CSS

/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/vertical_bookmarks_toolbar.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */

/* Makes bookmarks toolbar appear vertically at the left side of the window */

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

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

#navigator-toolbox-background:has(#PersonalToolbar[collapsed="true"]),
#navigator-toolbox-background:has(#browser[collapsed="true"]) {
margin-left: 0 !important;
}

  #PersonalToolbar{
    position: fixed;
    display: flex;
    flex-direction: column;
    left: 0px !important;
    width: var(--uc-vertical-toolbar-width,0);
    padding-top: 40px !important;
    /* These create a empty area to the bottom of the toolbar, which is to mask a fact that we don't know exactly how high the toolbar should be */
    height: 100vh !important;
    max-height: 100vh !important; 
    padding-bottom: 120px !important;
  }



  #PersonalToolbar >  #personal-bookmarks > #PlacesToolbar > hbox{ -moz-box-orient: vertical !important; }
  #PersonalToolbar #PlacesToolbarItems{
    display: flex;
    flex-direction: column;
  }
  #PersonalToolbar #PlacesToolbarItems > toolbarseparator{
    height: 7px;
    background-color: currentColor;
    background-clip: padding-box;
    border-block: 3px solid transparent !important;
  }
  #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: 165px !important;
  }

}

Alles anzeigen

und

JavaScript

// JavaScript Document
//Button_PersonalToolbar.uc.js
// Source file https://www.camp-firefox.de/forum/thema/134920-schaltfl%C3%A4che-um-lesezeichen-leiste-ein-auszublenden/?postID=1205823#post1205823
(function ptbut() {
   
           
    if (location.href !== '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 currentProfileDirectory = Services.dirsvc.get("ProfD", Ci.nsIFile).path.replace(/\\/g, "/");
                    var buttonicon = "toolbar.png"
                    var props = {
                        id: 'PersonalToolbar-button',
                        class: 'toolbarbutton-1 chromeclass-toolbar-additional',
                        removable: true,
                        label: 'Toggle',
                        tooltiptext: 'Toggle Bookmarktoolbar',
                        style: 'list-style-image: url("file:///C:/Users/Mira/AppData/Roaming/Mozilla/Firefox/Profiles/iff60u96.default-release/chrome/icons/warning.svg")',
                    };
                   
               
                    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 : Funktion wird ausgeführt, wenn Shift + Cmd + b gedrückt wird
        if (event.shiftKey && event.metaKey && keyName == 'b') {
           onClick(event);        
        }
    }, false
);
    function onClick(aEvent) {
        var d2 = document.getElementById('PersonalToolbar');
       
        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

Was ich auch gerade festgestellt habe, die 'PersonalToolbar' überlagert bei mir zum Teil die Tableiste.

Das hat den unschönen Effekt, dass der erste Tab nicht "angefasst" werden kann!

Auch öffnet sich bei Rechtsklick folglich das falsche Kontextmenü.

Wissen macht "AHHHH"!

Ich habe die Tableiste per CSS nach unten versetzt, deshalb gibt es die Überlagerung

Horstmann

Vielen Dank, Mira, besser erklärt und zusammengefasst als ich es geschafft habe !

Und um alles an einer Stelle zu haben, hier auch noch ein Skript von Aris , Original hier .

Damit erhält man eine zusätzliche vertikale Toolbar, die aber nur schwer zu bändigen ist - für mich jedenfalls .

Meine Vermutung ist dass um Zeile 180 herum die Anpassung der Browser-Fensterbreite geregelt wird .

Wie Mira aber schon dargestellt hat, ideal wäre wenn man "einfach nur" (...) im vorhandenen Button_PersonalToolbar

Skript diese Anpassung mit einpflegen könnte .

In der Höhe funktioniert es ja auch, wenn die Leseteichenleiste wie üblich horizontal ist .

JavaScript

// '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_v_label = "Vertical Add-on Bar"; // toolbar name
    var button_label = "Toggle vertical Add-on Bar"; // Toggle button name
    var addonbar_v_togglebutton = true; // display toggle button for vertical toolbar (true) or not (false)
    var addonbar_v_on_the_left = true; // 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_v = true; // apply default toolbar appearance/colors to vertical add-on bar
    var addonbar_v_width = "30px"; // toolbar width
    var compact_buttons = false; // compact button size (true) or default button size (false)

    try {
     if(document.getElementById('toolbox_abv') == null && document.getElementById('addonbar_v') == null) {
      if(appversion <= 62) var toolbox_abv = document.createElement("toolbox");
      else var toolbox_abv = document.createXULElement("toolbox");
      toolbox_abv.setAttribute("orient","horizontal");
      toolbox_abv.setAttribute("id","toolbox_abv");
      toolbox_abv.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_v");
      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_v_label);
      tb_addonbarv.setAttribute("label", addonbar_v_label);
      tb_addonbarv.setAttribute("lockiconsize","true");
      tb_addonbarv.setAttribute("defaultset","spring");
      
      toolbox_abv.appendChild(tb_addonbarv);
      
      CustomizableUI.registerArea("addonbar_v", {legacy: true});
      if(appversion >= 65) CustomizableUI.registerToolbarNode(tb_addonbarv);
      
      if(addonbar_v_on_the_left) {
        if(insert_before_borders || appversion >= 86) document.getElementById("browser").insertBefore(toolbox_abv,document.getElementById("browser").firstChild);
        else document.getElementById("browser").insertBefore(toolbox_abv,document.getElementById("browser").firstChild.nextSibling);
      }
      else {
        if(insert_before_borders) document.getElementById("browser").appendChild(toolbox_abv);
        else document.getElementById("browser").insertBefore(toolbox_abv,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_v').setAttribute("orient","horizontal");
              document.querySelector('#navigator-toolbox').appendChild(document.querySelector('#addonbar_v'));
            }
            else  {
              document.querySelector('#addonbar_v').setAttribute("orient","vertical");
              document.querySelector('#toolbox_abv').appendChild(document.querySelector('#addonbar_v'));

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

      addonbar_v_style ='\
        #addonbar_v { \
          -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_v { \
          background: var(--lwt-accent-color) !important; \
        } \
        #main-window[lwtheme-image="true"]:-moz-lwtheme #addonbar_v { \
          background: var(--lwt-header-image) !important; \
          background-position: 0vw 50vh !important; \
        } \
        #main-window:not([customizing]) #toolbox_abv:not([collapsed="true"]), \
        #main-window:not([customizing]) #addonbar_v:not([collapsed="true"]) { \
          min-width: '+addonbar_v_width+'; \
          width: '+addonbar_v_width+'; \
          max-width: '+addonbar_v_width+'; \
        } \
        #main-window[chromehidden="menubar toolbar location directories status extrachrome "] #toolbox_abv:not([collapsed="true"]), \
        #main-window[chromehidden="menubar toolbar location directories status extrachrome "] #addonbar_v:not([collapsed="true"]), \
        #main-window[sizemode="fullscreen"] #toolbox_abv:not([collapsed="true"]), \
        #main-window[sizemode="fullscreen"] #addonbar_v:not([collapsed="true"]) { \
          min-width: 0px; \
          width: 0px; \
          max-width: 0px; \
        } \
        #main-window[customizing] #addonbar_v { \
          outline: 1px dashed !important; \
          outline-offset: -2px !important; \
        } \
        #addonbar_v:-moz-lwtheme { \
          background: var(--lwt-header-image) !important; \
          background-position: 100vw 50vh !important; \
        } \
        #addonbar_v toolbarbutton, \
        #addonbar_v toolbar .toolbarbutton-1 { \
          padding: 0 !important; \
        } \
        '+end_border+' \
      ';
    }
    
    if(addonbar_v_togglebutton) {
      tooglebutton_addonbar_v_style ='\
        #tooglebutton_addonbar_v .toolbarbutton-icon { \
          list-style-image: url("chrome://browser/skin/sidebars.svg"); \
          fill: green; \
        }\
        /*#tooglebutton_addonbar_v .toolbarbutton-icon { \
          list-style-image: url("chrome://browser/skin/forward.svg"); \
          fill: red; \
        } \
        #tooglebutton_addonbar_v[checked] .toolbarbutton-icon { \
          fill: green;  \
        } \
        #tooglebutton_addonbar_v { \
          background: url("chrome://browser/skin/back.svg") no-repeat; \
          background-size: 35% !important; \
          background-position: 10% 70% !important; \
        } \
        #tooglebutton_addonbar_v[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_v toolbarbutton .toolbarbutton-icon { \
          padding: 0 !important; \
          width: 16px !important; \
          height: 16px !important; \
        } \
        #addonbar_v .toolbarbutton-badge-stack { \
          padding: 0 !important; \
          margin: 0 !important; \
          width: 16px !important; \
          min-width: 16px !important; \
          height: 16px !important; \
          min-height: 16px !important; \
        } \
        #addonbar_v toolbarbutton .toolbarbutton-badge { \
          margin-top: 0px !important; \
          font-size: 8px !important; \
        } \
      ";
      
    var uri = Services.io.newURI("data:text/css;charset=utf-8," + encodeURIComponent('\
      '+addonbar_v_style+' \
      '+tooglebutton_addonbar_v_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

Zitat von Mira_Belle

Was ich auch gerade festgestellt habe, die 'PersonalToolbar' überlagert bei mir zum Teil die Tableiste.
Das hat den unschönen Effekt, dass der erste Tab nicht "angefasst" werden kann!
Auch öffnet sich bei Rechtsklick folglich das falsche Kontextmenü.
Wissen macht "AHHHH"!
Ich habe die Tableiste per CSS nach unten versetzt, deshalb gibt es die Überlagerung

Den Spass hatte ich auch schon .

Es sollte klappen die Leiste nach unten zu schieben um die Höhe der Tabs Leiste :

CSS

#PersonalToolbar {
margin-top: 24px !important;
}

Oder die Reihenfolge der Leisten festzulegen , zB auf die Art , abhängig von Deiner Konfiguration :

CSS

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

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

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

Alles anzeigen

Ich teste das Ganze momentan mit einem Einzeiler Profil, hatte die Überschneidungen aber auch am Anfang mit der Tableiste unten .

Mira_Belle

Es gibt was Neues!

Horstmann

Zitat von Mira_Belle

Es gibt was Neues!

Beängstigend .

Mira_Belle

Zitat von Horstmann

Beängstigend .

Quatsch

Kümmere Dich nicht um den ganzen Javascript-Code, der macht, was er soll.

Wenn Du die Leise verbreitern willst,

in Zeile 211 unter #sidebar-box

einfach noch z.b. min-width: 23em; & max-width: 56em; einfügen.

Werte nach Belieben anpassen.

Nun stehen die Lesezeichen recht verloren in der zu breiten Leiste.

Das änderst Du, in dem Du einfach unterhalb von Zeile 209 z.B.

CSS

#sidebar {
    min-width: 22emt;
    max-width: 56em;
}

einfügst.

Auch hier gilt, Werte nach Belieben anpassen.

Ich hoffe, dass ich Dir helfen konnte.

Ach!

Bearbeitbar per drag&drop, wie wir es von der Lesezeichen-Symbolleiste gewohnt sind.

Horstmann

Zitat von Mira_Belle

Quatsch
Kümmere Dich nicht um den ganzen Javascript-Code, der macht, was er soll.
einfügst.

Ich hoffe, dass ich Dir helfen konnte.
Ach!
Bearbeitbar per drag&drop, wie wir es von der Lesezeichen-Symbolleiste gewohnt sind.

Alles anzeigen

Hehehe, das Script macht den Hintergund der normalen Firefox Sidebar transparent, und verhindert dass sich der Browserinhalt in der Breite anpasst, bei geöffneter normaler Sidebar .

Noch dazu geht die Sidebar nach kurzer Zeit automatisch zu, auch nicht optimal .

Im Symbolleiste anpassen Fenster - oder überhaupt irgendwo - taucht die zusätzliche Sidebar nicht auf , also drag&drop geht nicht ; das Skript zerschiesst einfach nur die reguläre Firefox Sidebar .

Das Ganze ausprobiert im Testprofil ohne andere Scripts, und mit CSS Dateien deaktiviert (userChrome.css umbenannt) ; meine anderen Scripts, wenn benutzt, funktionieren .

Ich benutze generell zur Verwendung von Scripten die Dateien von Endor, die hier verlinkt werden, seit Mitte diesen Jahres .

Irgendwo hakt es da wohl; bei Dir scheint das Script ja zu klappen, bei mir macht es 10 Schritte in die genau falsche Richtung .

Meine FF Version ist die aktuelle 106, auf macOS .

Hier noch ein Screenshot :

Endor

Hallo zusammen.
expandsidebar.uc.js funktioniert hier gut.

Wenn Ihr lust habe es gäbe da noch eine Alternative vom selben Autor
und etwas aktueller:

SidebarModoki.uc.js

JavaScript

// ==UserScript==
// @name           SidebarModoki
// @namespace      http://space.geocities.yahoo.co.jp/gl/alice0775
// @description    TST
// @include        main
// @compatibility  Firefox 106
// @author         Alice0775
// @note           Tree Style Tab がある場合にブックマークと履歴等を別途"サイドバーもどき"で表示
// @note           SidebarModoki.uc.js.css をuserChrome.cssに読み込ませる必要あり
// @version        2022/09/29 fix Bug 1689816 
// @version        2022/09/28 ordinal position
// @version        2022/09/14 fix Bug 1790299
// @version        2022/09/14 use toolbarspring instead of spacer
// @version        2022/08/26 Bug 1695435 - Remove @@hasInstance for IDL interfaces in chrome context
// @version        2022/04/01 23:00 Convert Components.utils.import to ChromeUtils.import
// @version        2022/03/26 23:00 Bug 1760342 - Remove :-moz-lwtheme-{brighttext,darktext}
// @version        2021/11/21 18:00 Bug 1742111 - Rename internal accentcolor and textcolor properties to be more consistent with the webext theme API
// @version        2021/11/14 13:00 wip change css(Bug 1740230 - moz-lwtheme* pseudo-classes don't get invalidated correctly)
// @version        2021/09/30 22:00 change splitter color
// @version        2021/05/18 20:00 fix margin of tabpanels
// @version        2021/02/09 20:00 Rewrite `X.setAttribute("hidden", Y)` to `X.hidden = Y`
// @version       2020/06/18 fix SidebarModoki position(Bug 1603830 - Remove support for XULElement.ordinal)
// @version       2019/12/11 fix for 73 Bug 1601094 - Rename remaining .xul files to .xhtml in browser
// @version        2019/11/14 03:00 workarround Ctrl+tab/Ctrl+pageUP/Down
// @version        2019/10/20 22:00 fix surplus loading
// @version        2019/10/20 12:30 workaround Bug 1497200: Apply Meta CSP to about:downloads, Bug 1513325 - Remove textbox binding
// @version        2019/09/05 13:00 fix listitem
// @version        2019/08/07 15:00 fix adding key(renamde from key to keyvalue in jsonToDOM)
// @version        2019/07/13 13:00 fix wrong commit
// @version        2019/07/10 10:00 fix 70 Bug 1558914 - Disable Array generics in Nightly
// @version        2019/05/29 16:00 Bug 1519514 - Convert tab bindings
// @version        2018/12/23 14:00 Adjust margin
// @version        2018/12/23 00:00 Add option of SidebarModoki posiotion SM_RIGHT
// @version        2018/05/10 00:00 for 61 wip Bug 1448810 - Rename the Places sidebar files
// @version        2018/05/08 21:00 use jsonToDOM(https://developer.mozilla.org/en-US/docs/Archive/Add-ons/Overlay_Extensions/XUL_School/DOM_Building_and_HTML_Insertion)
// @version        2018/05/08 19:00 get rid loadoverlay
// @version        2017/11/24 19:50 do nothing if window is popup(window.open)
// @version        2017/11/24 19:20 change close button icon style to 57
// @version        2017/11/24 19:10 add key(accel(ctrl)+alt+s) and close button
// @version        2017/11/24 19:00 hack for DL manager
// @version        2017/11/24 15:00 remove unused variable
// @version        2017/11/23 13:10 restore initial tab index/width and more unique id
// @version        2017/11/23 12:30 try catch.  download manager
// @version        2017/11/23 00:30 Make button icon
// @version        2017/11/23 00:00 Make button customizable
// @version        2017/11/22 23:00 fullscreen
// @version        2017/11/22 23:00 DOM fullscreen
// @version        2017/11/22 22:00 F11 fullscreen
// @version        2017/11/15 09:00
// ==/UserScript==


var SidebarModoki = {
  // -- config --
  SM_RIGHT: false,  // SidebarModoki position
  SM_WIDTH : 130,
  SM_AUTOHIDE : false,  //F11 Fullscreen
  TAB_SRC : ["chrome://browser/content/places/bookmarksSidebar.xhtml",
             "chrome://browser/content/places/historySidebar.xhtml",
             "chrome://browser/content/downloads/contentAreaDownloadsView.xhtml?SM"],
  TAB_LABEL : ["Bookmarks", "History", "DL"],
  // -- config --

  kSM_Open : "userChrome.SidebarModoki.Open",
  kSM_lastSelectedTabIndex : "userChrome.SidebarModoki.lastSelectedTabIndex",
  kSM_lastSelectedTabWidth : "userChrome.SidebarModoki.lastSelectedTabWidth",
  ToolBox: null,
  Button: null,

  get prefs(){
    delete this.prefs;
    return this.prefs = Services.prefs;
  },

  jsonToDOM: function(jsonTemplate, doc, nodes) {
    jsonToDOM.namespaces = {
    html: "http://www.w3.org/1999/xhtml",
    xul: "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
    };
    jsonToDOM.defaultNamespace = jsonToDOM.namespaces.xul;
    function jsonToDOM(jsonTemplate, doc, nodes) {
      function namespace(name) {
          var reElemNameParts = /^(?:(.*):)?(.*)$/.exec(name);
          return { namespace: jsonToDOM.namespaces[reElemNameParts[1]], shortName: reElemNameParts[2] };
      }

      // Note that 'elemNameOrArray' is: either the full element name (eg. [html:]div) or an array of elements in JSON notation
      function tag(elemNameOrArray, elemAttr) {
        // Array of elements?  Parse each one...
        if (Array.isArray(elemNameOrArray)) {
          var frag = doc.createDocumentFragment();
          Array.prototype.forEach.call(arguments, function(thisElem) {
            frag.appendChild(tag.apply(null, thisElem));
          });
          return frag;
        }

        // Single element? Parse element namespace prefix (if none exists, default to defaultNamespace), and create element
        var elemNs = namespace(elemNameOrArray);
        var elem = doc.createElementNS(elemNs.namespace || jsonToDOM.defaultNamespace, elemNs.shortName);

        // Set element's attributes and/or callback functions (eg. onclick)
        for (var key in elemAttr) {
          var val = elemAttr[key];
          if (nodes && key == "keyvalue") {  //for later convenient JavaScript access) by giving them a 'keyvalue' attribute; |nodes|.|keyvalue|
              nodes[val] = elem;
              continue;
          }

          var attrNs = namespace(key);
          if (typeof val == "function") {
            // Special case for function attributes; don't just add them as 'on...' attributes, but as events, using addEventListener
            elem.addEventListener(key.replace(/^on/, ""), val, false);
          } else {
            // Note that the default namespace for XML attributes is, and should be, blank (ie. they're not in any namespace)
            elem.setAttributeNS(attrNs.namespace || "", attrNs.shortName, val);
          }
        }

        // Create and append this element's children
        var childElems = Array.prototype.slice.call(arguments, 2);
        childElems.forEach(function(childElem) {
          if (childElem != null) {
            elem.appendChild(
                doc.defaultView.Node.isInstance(childElem)
                /*childElem instanceof doc.defaultView.Node*/ ? childElem :
                    Array.isArray(childElem) ? tag.apply(null, childElem) :
                        doc.createTextNode(childElem));
          }
        });
        return elem;
      }
      return tag.apply(null, jsonTemplate);
    }

    return jsonToDOM(jsonTemplate, doc, nodes);
  },

  init: function() {
    let chromehidden = document.getElementById("main-window").hasAttribute("chromehidden");
    if (chromehidden &&
        document.getElementById("main-window").getAttribute("chromehidden").includes("extrachrome")) {
      return; // do nothing
    }

    let MARGINHACK = this.SM_RIGHT ? "0 0 0 0" : "0 -2px 0 0";
    let style = `
      @namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
      
      #SM_toolbox
      {
        width: {SM_WIDTH}px;
        background-color: var(--toolbar-bgcolor);
        color: -moz-dialogtext;
        text-shadow: none;
      }
      #SM_toolbox:-moz-lwtheme {
        /*background-color: var(--lwt-accent-color);*/
        background-color: var(--toolbar-bgcolor);
        color: var(--lwt-text-color);
      }
      .SM_toolbarspring {
          max-width: unset !important;
      }
      
      /*visibility*/
      #SM_toolbox[collapsed],
      #SM_splitter[collapsed],
      /*フルスクリーン*/
      #SM_toolbox[moz-collapsed="true"],
      #SM_splitter[moz-collapsed="true"]
      {
        visibility:collapse;
      }
      #SM_splitter {
        background-color: var(--toolbar-bgcolor) !important;
        border-inline-start-color: var(--toolbar-bgcolor) !important;
        border-inline-end-color: var(--toolbar-bgcolor) !important;
      }

      /*ポップアップの時*/
      #main-window[chromehidden~="extrachrome"] #SM_toolbox,
      #main-window[chromehidden~="extrachrome"] #SM_splitter
      {
        visibility: collapse;
      }

      #SM_tabpanels
      { 
        appearance: none !important;
        padding: 0 !important;
        margin: {MARGINHACK}; /*hack*/
        appearance: unset;
        color-scheme: unset !important;
      }

      toolbar[brighttext]:-moz-lwtheme #SM_tabbox {
        background-color: var(--toolbar-bgcolor);
      }
      #SM_tabs {
        overflow-x: hidden;
      }
      #SM_tabs tab {
        appearance: none !important;
      }
      #SM_tabs tab:not([selected]) {
        opacity: 0.6 !important;
      }
      #SM_tabs tab {
        color: unset !important;
      }
      
      #SM_Button
      {
        list-style-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAQ0lEQVQ4jWNgoAL4z8DA8N/AwAArTQRGFSBBI4YBDHhonC6n3AA1NTUMZ6F5gyQXYFNEsheweWnUBfRyAbmYcgMoAgBFX4a/wlDliwAAAABJRU5ErkJggg==');
      }
      toolbar[brighttext]:-moz-lwtheme #SM_Button
      {
        list-style-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAANklEQVQ4jWP4TyFg+P///38GBgayMHUNwEdjdTrVDcDnTKJdgEsRSV5ACaBRF9DZBQObFygBAMeIxVdCQIJTAAAAAElFTkSuQmCC');
      }
     `;
  var sss = Cc['@mozilla.org/content/style-sheet-service;1'].getService(Ci.nsIStyleSheetService);
  var uri = makeURI('data:text/css;charset=UTF=8,' + encodeURIComponent(style.replace(/\s+/g, " ").replace(/\{SM_WIDTH\}/g, this.SM_WIDTH).replace(/\{MARGINHACK\}/g, MARGINHACK)));
  if(!sss.sheetRegistered(uri, sss.AGENT_SHEET))
    sss.loadAndRegisterSheet(uri, sss.AGENT_SHEET);
/*
    style = style.replace(/\s+/g, " ").replace(/\{SM_WIDTH\}/g, this.SM_WIDTH).replace(/\{MARGINHACK\}/g, MARGINHACK);
    let sspi = document.createProcessingInstruction(
      'xml-stylesheet',
      'type="text/css" href="data:text/css,' + encodeURIComponent(style) + '"'
    );
    document.insertBefore(sspi, document.documentElement);
    sspi.getAttribute = function(name) {
      return document.documentElement.getAttribute(name);
    };
*/
    ChromeUtils.import("resource:///modules/CustomizableUI.jsm");
    // xxxx try-catch may need for 2nd window
    try {
      CustomizableUI.createWidget({ //must run createWidget before windowListener.register because the register function needs the button added first
        id: 'SM_Button',
        type: 'custom',
        defaultArea: CustomizableUI.AREA_NAVBAR,
        onBuild: function(aDocument) {
          var toolbaritem = aDocument.createElementNS('http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul', 'toolbarbutton');
          var props = {
            id: "SM_Button",
            class: "toolbarbutton-1 chromeclass-toolbar-additional",
            tooltiptext: "Sidebar Modoki",
            oncommand: "SidebarModoki.toggle();",
            type: "button",
            label: "Sidebar Modoki",
            removable: "true"
          };
          for (var p in props) {
            toolbaritem.setAttribute(p, props[p]);
          }
          
          return toolbaritem;
        }
      });
    }catch(e){}

    // to do, replace with MozXULElement.parseXULToFragment();
    let template = ["command", {id: "cmd_SidebarModoki", oncommand: "SidebarModoki.toggle()"}];
    document.getElementById("mainCommandSet").appendChild(this.jsonToDOM(template, document, {}));

    template = ["key", {id: "key_SidebarModoki", key: "B", modifiers: "accel,alt", command: "cmd_SidebarModoki",}];
    document.getElementById("mainKeyset").appendChild(this.jsonToDOM(template, document, {}));
//to do xxx ordinal=xx shoud be replaced with style="-moz-box-ordinal-group: xx;"
    template =
      ["vbox", {id: "SM_toolbox", style: this.SM_RIGHT ? "-moz-box-ordinal-group:10" : "-moz-box-ordinal-group:0"},
        ["hbox", {id: "SM_header", align: "center"},
          ["label", {}, "SidebarModoki"],
          ["toolbarspring", {class: "SM_toolbarspring", flex: "1000"}],
          ["toolbarbutton", {id: "SM_closeButton", class: "close-icon tabbable", tooltiptext: "Close SidebarModoki", oncommand: "SidebarModoki.close();"}]
        ],
        ["tabbox", {id:"SM_tabbox", flex: "1", handleCtrlPageUpDown: false, handleCtrlTab: false},
          ["tabs", {id: "SM_tabs"},
            ["tab", {id: "SM_tab0", label: this.TAB_LABEL[0]}],
            ["tab", {id: "SM_tab1", label: this.TAB_LABEL[1]}],
            ["tab", {id: "SM_tab2", label: this.TAB_LABEL[2]}]
          ],
          ["tabpanels", {id: "SM_tabpanels", flex: "1", style: "border: none;"},
            ["tabpanel", {id: "SM_tab0-container", orient: "vertical", flex: "1"},
              ["browser", {id: "SM_tab0-browser", flex: "1", autoscroll: "false", src: ""}]
            ],
            ["tabpanel", {id: "SM_tab1-container", orient: "vertical", flex: "1"},
              ["browser", {id: "SM_tab1-browser", flex: "1", autoscroll: "false", src: ""}]
            ],
            ["tabpanel", {id: "SM_tab2-container", orient: "vertical", flex: "1"},
              ["browser", {id: "SM_tab2-browser", flex: "1", autoscroll: "false", src: ""}]
            ]
          ]
        ]
      ];
    let sidebar = document.getElementById("sidebar-box");
    sidebar.parentNode.insertBefore(this.jsonToDOM(template, document, {}), sidebar);

    template =
      ["splitter", {id: "SM_splitter", style: this.SM_RIGHT ? "-moz-box-ordinal-group:9" : "-moz-box-ordinal-group:0", state: "open", collapse: this.SM_RIGHT ? "after" :"before", resizebefore: "closest", resizeafter: "farthest"},
        ["grippy", {}]
      ];
    sidebar.parentNode.insertBefore(this.jsonToDOM(template, document, {}), sidebar);

    //xxx 69 hack
    let tabbox = document.getElementById("SM_tabbox");
    tabbox.handleEvent = function handleEvent(event) {
      if (!event.isTrusted) {
        // Don't let untrusted events mess with tabs.
        return;
      }

      // Skip this only if something has explicitly cancelled it.
      if (event.defaultCancelled) {
        return;
      }

      // Don't check if the event was already consumed because tab
      // navigation should always work for better user experience.
      let imports = {};
      ChromeUtils.defineModuleGetter(
        imports,
        "ShortcutUtils",
        "resource://gre/modules/ShortcutUtils.jsm"
      );
      const { ShortcutUtils } = imports;

      switch (ShortcutUtils.getSystemActionForEvent(event)) {
        case ShortcutUtils.CYCLE_TABS:
          if (this.tabs && this.handleCtrlTab) {
            this.tabs.advanceSelectedTab(event.shiftKey ? -1 : 1, true);
            event.preventDefault();
          }
          break;
        case ShortcutUtils.PREVIOUS_TAB:
          if (this.tabs && this.handleCtrlPageUpDown) {
            this.tabs.advanceSelectedTab(-1, true);
            event.preventDefault();
          }
          break;
        case ShortcutUtils.NEXT_TAB:
          if (this.tabs && this.handleCtrlPageUpDown) {
            this.tabs.advanceSelectedTab(1, true);
            event.preventDefault();
          }
          break;
      }
    };

    let index = document.getElementById("SM_tabpanels").selectedIndex;
    let tb0 = document.getElementById("SM_tab0");
    let tb1 = document.getElementById("SM_tab1");
    let tb2 = document.getElementById("SM_tab2");
    tb0.parentNode.insertBefore(tb0, tb1);
    tb0.parentNode.insertBefore(tb1, tb2);
    document.getElementById("SM_tabs").selectedIndex = index;

    setTimeout(function(){this.observe();}.bind(this), 0);

    //F11 fullscreen
    FullScreen.showNavToolbox_org = FullScreen.showNavToolbox;
    FullScreen.showNavToolbox = function(trackMouse = true) {
      FullScreen.showNavToolbox_org(trackMouse);
      if (!!SidebarModoki.ToolBox) {
        SidebarModoki.ToolBox.removeAttribute("moz-collapsed"); 
        SidebarModoki.Splitter.removeAttribute("moz-collapsed");
      }
    }
    FullScreen.hideNavToolbox_org = FullScreen.hideNavToolbox;
    FullScreen.hideNavToolbox = function(aAnimate = false) {
      FullScreen.hideNavToolbox_org(aAnimate);
      if (SidebarModoki.SM_AUTOHIDE && !!SidebarModoki.ToolBox) {
        SidebarModoki.ToolBox.setAttribute("moz-collapsed", "true");
        SidebarModoki.Splitter.setAttribute("moz-collapsed", "true");
      }
    }

    //DOM fullscreen
    window.addEventListener("MozDOMFullscreen:Entered", this,
                            /* useCapture */ true,
                            /* wantsUntrusted */ false);
    window.addEventListener("MozDOMFullscreen:Exited", this,
                            /* useCapture */ true,
                            /* wantsUntrusted */ false);
/*
    SidebarUI.setPosition_org = SidebarUI.setPosition;
    SidebarUI.setPosition = function() {
      SidebarUI.setPosition_org();
      if (SidebarModoki && SidebarModoki.ToolBox) 
      SidebarModoki.ToolBox.style.setProperty("-moz-box-ordinal-group", SidebarModoki.SM_RIGHT ? "10" : "0", "");
      if (SidebarModoki && SidebarModoki.Splitter) 
      SidebarModoki.Splitter.style.setProperty("-moz-box-ordinal-group", SidebarModoki.SM_RIGHT ? "9" : "0", "");
    };
*/
  },


  observe: function() {
    this.ToolBox = document.getElementById("SM_toolbox");
    this.Splitter = document.getElementById("SM_splitter");
    this.ToolBox.style.setProperty("-moz-box-ordinal-group", this.SM_RIGHT ? "10" : "0", "");
    this.Splitter.style.setProperty("-moz-box-ordinal-group", this.SM_RIGHT ? "9" : "0", "");

    if (this.getPref(this.kSM_Open, "bool", true)) {
      this.toggle(true);
    } else {
      this.close();
    }
    document.getElementById("SM_tabs").addEventListener("focus", this, true);
    window.addEventListener("aftercustomization", this, false);

    // xxxx native sidebar changes ordinal when change position of the native sidebar and open/close
    this.SM_Observer = new MutationObserver(function(mutations) {
      mutations.forEach(function(mutation) {
        switch (mutation.attributeName) {
          case "collapsed":
          case "hidden":
          case "positionend":
            setTimeout(() => {
              this.ToolBox.style.setProperty("-moz-box-ordinal-group", this.SM_RIGHT ? "10" : "0", "");
              this.Splitter.style.setProperty("-moz-box-ordinal-group", this.SM_RIGHT ? "9" : "0", "");
            }, 0);
            break;
        }
      }.bind(this));
    }.bind(this));
    // pass in the target node, as well as the observer options
    this.SM_Observer.observe(document.getElementById("sidebar-box"),
                             {attribute: true, attributeFilter: ["collapsed", "hidden", "positionend"]});
  },

  onSelect: function(event) {
    let aIndex = document.getElementById("SM_tabpanels").selectedIndex;
    this.prefs.setIntPref(this.kSM_lastSelectedTabIndex, aIndex);
    width = this.getPref(this.kSM_lastSelectedTabWidth + aIndex, "int", this.SM_WIDTH);
    if (document.getElementById("SM_tab" + aIndex +"-browser").src == "" ) {
      document.getElementById("SM_tab" + aIndex +"-browser").src = this.TAB_SRC[aIndex];
    }
    document.getElementById("SM_toolbox").style.setProperty("width", width + "px", "");
  },
  
  toggle: function(forceopen) {
    this.Button = document.getElementById("SM_Button");
    if (!this.Button.hasAttribute("checked") || forceopen) {
      this.Button.setAttribute("checked", true);
      this.ToolBox.collapsed= false;
      this.Splitter.collapsed= false;
      let index = this.getPref(this.kSM_lastSelectedTabIndex, "int", 0);
      document.getElementById("SM_tabs").selectedIndex = index;
      width = this.getPref(this.kSM_lastSelectedTabWidth + index, "int", this.SM_WIDTH);
      document.getElementById("SM_toolbox").style.setProperty("width", width + "px", "");
      this.prefs.setBoolPref(this.kSM_Open, true)
      this.onSelect({});
      addEventListener("resize", this, false);
    } else {
      this.close();
    }
  },

  close: function() {
    removeEventListener("resize", this, false);
    this.Button = document.getElementById("SM_Button");
    this.Button.removeAttribute("checked");
    this.ToolBox.collapsed = true;
    this.Splitter.collapsed = true;
    this.prefs.setBoolPref(this.kSM_Open, false)
  },


  //ここからは, 大きさの調整
  onResize: function(event) {
     let width = this.ToolBox.getBoundingClientRect().width;
     let aIndex = document.getElementById("SM_tabs").selectedIndex;
     this.prefs.setIntPref(this.kSM_lastSelectedTabWidth + aIndex, width);
  },

  handleEvent: function(event) {
    switch(event.type) {
      case 'focus':
        this.onSelect(event);
        break;
      case 'resize':
        this.onResize(event);
        break;
      case 'MozDOMFullscreen:Entered':
        if (!!this.ToolBox) {
          this.ToolBox.setAttribute("moz-collapsed", "true");
          this.Splitter.setAttribute("moz-collapsed", "true");
        }
        break;
      case 'MozDOMFullscreen:Exited':
        if (!!this.ToolBox) {
          this.ToolBox.removeAttribute("moz-collapsed"); 
          this.Splitter.removeAttribute("moz-collapsed");
        }
        break;
      case 'aftercustomization':
        if (this.getPref(this.kSM_Open, "bool", true)) {
          this.Button.setAttribute("checked", true);
        }
        break;
     }
  },

  //pref読み込み
  getPref: function(aPrefString, aPrefType, aDefault) {
    try{
      switch (aPrefType){
        case "str":
          return this.prefs.getCharPref(aPrefString).toString(); break;
        case "int":
          return this.prefs.getIntPref(aPrefString); break;
        case "bool":
        default:
          return this.prefs.getBoolPref(aPrefString); break;
      }
    }catch(e){
    }
    return aDefault;
  }

}

SidebarModoki.init();

Alles anzeigen

Dieser CSS Code muss dazu verwendet werden, bzw. über userchrome.css geladen werden:

SidebarModoki.uc.js.css

CSS

@charset "utf-8";
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

/*@version        2020/03/13 17:00 use xhtml instead xul*/
/*@version        2019/10/20 12:30*/

@-moz-document url("chrome://browser/content/downloads/contentAreaDownloadsView.xhtml?SM") {
      *|*:root
      {
        --downloads-item-height: 3.5em;
      }
            richlistitem { 
              height: 3.5em !important;
            }       
      #contentAreaDownloadsView
      {
        padding: 0 !important;
      }
      .downloadTypeIcon,
      .downloadBlockedBadge
      {
        margin-left:0 !important;
        margin-right:1px !important;
      }
      .downloadButton {
        padding-left:0 !important;
        padding-right:0 !important;
      }
}

Alles anzeigen

Verwende ich hier nicht.
Vielleicht passt das ja auch.
Mfg.
Endor

Mira_Belle

Zitat von Endor

Hallo zusammen.
expandsidebar.uc.js funktioniert hier gut.

Wenn Ihr lust habe es gäbe da noch eine Alternative vom selben Autor
und etwas aktueller:
SidebarModoki.uc.js

Dieser CSS Code muss dazu verwendet werden, bzw. über userchrome.css geladen werden:
SidebarModoki.uc.js.css

Verwende ich hier nicht.
Vielleicht passt das ja auch.
Mfg.
Endor

Alles anzeigen

Danke Endor.

Aber dieses Javascript ist mir einfach zu heavy!

Da steige ich so gar nicht durch.

Ich hatte da mal mit was gebastelt, aber ich bin mir sicher, das war nur Schrott.

Endor

Ja das Teil ist komplexer.
Ich muss es die Tage mal in Ruhe testen.

Mfg.
Endor

Horstmann

Dankeschön für eure Mühe, ich werde mich mal reinknien .

Horstmann

Zitat von Endor

Hallo zusammen.
expandsidebar.uc.js funktioniert hier gut.

Wenn Ihr lust habe es gäbe da noch eine Alternative vom selben Autor
und etwas aktueller:
SidebarModoki.uc.js

Dieser CSS Code muss dazu verwendet werden, bzw. über userchrome.css geladen werden:
SidebarModoki.uc.js.css

Verwende ich hier nicht.
Vielleicht passt das ja auch.
Mfg.
Endor

Alles anzeigen

Kann gut sein dass ich etwas falsch mache hier , aber dieses Script erzeugt bei mir nur eine Sidebar mit ein paar kleinen Modifikationen, und einigen Bugs .

Der Inhalt lässt sich nicht verändern über Symbolleiste anpassen, weil die Leiste da nicht auftaucht, also gibt's auch keine austauschbaren Basis-Inhalte .

Es ist einfach eine stinknormale Sidebar mit extra Knöpfen, etwas misslungenem Styling und eben ein paar Bugs ....

Wie die Standard Sidebar ist sie vertikal, hat Sidebar Lesezeichen drin, und passt hier auch den Browserinhalt beim Schliessen/Öffnen in der Breite an .

Aber es ist eine klassische Sidebar, und eine klassische Sidebar ist ja eben nicht das Ziel , sondern eine vertikale Lesezeichen-Symbolleiste .

Mira_Belle

Zitat von Horstmann

...

Nimm doch bitte noch einmal das originale expandsidebar.uc.js Script,

ohne irgendwelche Veränderungen.

Teste es bitte in einem jungfräulichen Profil, natürlich vorbereitet, damit es auch CSS und Javescript verarbeiten kann.

Und berichte, bitte.

Horstmann

Zitat von Mira_Belle

Nimm doch bitte noch einmal das originale expandsidebar.uc.js Script,
ohne irgendwelche Veränderungen.
Teste es bitte in einem jungfräulichen Profil, natürlich vorbereitet, damit es auch CSS und Javescript verarbeiten kann.
Und berichte, bitte.

Habe ich widerholt versucht, Script hatte ich mehrmals neu kopiert, nie verändert, und in verschiedenen Profilen ; das Ergebnis ist immer das Gleiche wie im obigen Beitrag beschrieben .

Mira_Belle

Also im obigen Bild hast Du die Lesezeichen-Symbolleiste eingeschaltet!

Dies scheint transparent zu sein!

Das Script übernimmt solche "Einstellungen"!

Deshalb schrieb ich, jungfräulichen Profil, ohne irgend anderem Code, sei es Javascript oder auch CSS!

PS: Moin. Was einem im Schlaf alles so einfällt!

Das Theme könnte ja, und hat es ganz bestimmt, Einfluss auf das Erscheinungsbild der Seitenleiste haben.

Aber auch das kann'ste per CSS im Script beeinflussen!

Eben genau an den von mir genannten Stellen.

2002Andreas

Zitat von Horstmann

Aber es ist eine klassische Sidebar,

Genauso ist es.

Das hat nichts mit einer senkrechten Lesezeichensymbolleiste zu tun.

Und auch das Script expandsidebar_fx58.uc.js macht letztlich nichts anderes, außer das die Sidebar nur per hover erscheint.

Mira_Belle

Nun bin ich aber etwas verwirrt!

So wie ich es verstanden habe, kopiert das Script quasi die Lesezeichen-Symbolleiste.

Im geöffneten Zustand habe ich dann per Drag and Drop einfach aus der Adressleiste hinzugefügt.

Aber nun verstehe ich gar nichts mehr!

Will Horstmann einfach nur eine zusätzliche, frei konfigurierbare Seitenleiste,

die den Fensterinhalt staucht, oder bei Einblendung überlagert?

Fragen über Fragen.

2002Andreas

Zitat von Mira_Belle

kopiert das Script quasi die Lesezeichen-Symbolleiste.

Sieh dir doch die Screenshots einfach alle in Ruhe mal an.

Das ist nichts anderes als die Lesezeichensidebar, und nicht nur die Symbolleiste.

Zitat von Mira_Belle

frei konfigurierbare Seitenleiste,

Nein, sondern wie er geschrieben hat:

Zitat von Horstmann

positioniert die Lesezeichenleiste als vertikale Liste an die Seite

Horstmann

Zitat von Mira_Belle

Will Horstmann einfach nur eine zusätzliche, frei konfigurierbare Seitenleiste,
die den Fensterinhalt staucht, ~~oder bei Einblendung überlagert~~?
Fragen über Fragen.

Genau das; eingeblendet reduziert die (zusätzliche) Seitenleiste das Browserfenster, ausgeblendet wächst das Browserfenster wieder zu voller Breite ; ansonsten wäre diese Seitenleiste idealerweise wie eine zusätliche toolbar, nur eben vertikal .

Also in diesem einen Verhalten genau wie die Sidebar - aber eben keine Sidebar, weil die mir generell im Aufbau und der Funktionsweise nicht gefällt .

Möglich dass die Sidebarskripts von oben eine entsprechende Modifikation erlauben, aber ich hatte die bisher nicht sauber zum laufen gebracht, wie gesagt .

Aber lange Rede kurzer Sinn - mit zarten Modifikationen am Skript von Aris und am vertikalen Bookmarks CSS von Mr. Otherguy bin ich nah dran ; es scheint soweit schon prima zu klappen, ich muss nur noch den ganzen Stylingkrams aus dem Skript überschreiben oder editieren .

Wenn doch bloss die Skripte Schreiber das ganze Stylegedöns in eine separate CSS Datei packen würden, wir Anfänger hätten's so viel einfacher ...

Sobald ich was Spruchreifes habe poste ich den Code - und vielen Dank nochmals für Eure Mühe !

Vertikale Lesezeichenleiste, Script und CSS

Ähnliche Themen

Lesezeichen-Popups einfärben und Buttons näher zusammenrücken.