Bislang v140.0rc1
a\ Kein Konflikt mit Unified Extensions Button!
.....Sie sind nach Aris-t2 die zweite Person, die die vertikale Symbolleiste erstellen konnte!
Das ist mal eine hilfreiche Rückmeldung, vielen Dank! 
V.a. die Buttons waren mir wichtig, auch hier schon kurz angesprochen.
Wie erwähnt, das Script hier ist ein ganz grober Test; in dieser Form funktioniert es nur rechts, kann aber recht einfach mit weiteren Optionen versehen werden; viele kosmetische Anpassungen wären auch noch vorzunehmen, etc..
Es ist auch nicht von mir usprünglich, und basiert auf diesem Ansatz.
Noch ein grober Test mit Positionierungsoptionen:
JavaScript
//Toggle newtoolbar 8 test
(function() {
if (location.href !== 'chrome://browser/content/browser.xhtml')
return;
// Eigenes Icon
let ProfilePath = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir, 'chrome', 'icons'));
let icon1 = 'newtoolbar.png';
let ImagePath = ProfilePath + icon1;
let new_tb_loc = 1; // Position: 0 Rechts 1 Links 2 Bottom
if (Services.prefs.getBoolPref('svg.context-properties.content.enabled') == false) {
Services.prefs.setBoolPref('svg.context-properties.content.enabled', true );
}
let toolbox_new = document.createXULElement('toolbox');
toolbox_new.setAttribute('id','toolbox_new');
const element = document.getElementById("navigator-toolbox");
const rect = element.getBoundingClientRect();
let ntb = document.createXULElement('toolbar');
ntb.id = 'newtoolbar';
ntb.setAttribute('customizable', true);
ntb.setAttribute("class","toolbar-primary chromeclass-toolbar browser-toolbar customization-target");
ntb.setAttribute('mode', 'icons');
ntb.setAttribute('context', 'toolbar-context-menu');
toolbox_new.appendChild(ntb);
//Geht
document.getElementById('navigator-toolbox').appendChild(toolbox_new);
//Geht
//document.getElementById('nav-bar').appendChild(toolbox_new);
//geht height #2 not dynamic ???
document.getElementById('toolbox_new').style.setProperty('--height_newbar', rect.height + 'px');
CustomizableUI.registerArea('newtoolbar', {legacy: true});
CustomizableUI.registerToolbarNode(ntb);
try {
CustomizableUI.createWidget({
id: 'NewToolbar_button',
type: 'custom',
defaultArea: CustomizableUI.AREA_NAVBAR,
onBuild: function(aDocument) {
let toolbaritem = aDocument.createXULElement('toolbarbutton');
let props = {
id: 'NewToolbar_button',
class: 'toolbarbutton-1 chromeclass-toolbar-additional',
removable: true,
label: 'Toggle New Toolbar',
tooltiptext: 'Toggle New toolbar',
};
for(let p in props)
toolbaritem.setAttribute(p, props[p]);
return toolbaritem;
}
});
} catch(e) { };
// Position
if (new_tb_loc === 1) {
toolbox_new.classList.add("left_mode");
browser.classList.add("left_mode_b");
}
if (new_tb_loc === 2) {
toolbox_new.classList.add("bottom_mode");
browser.classList.add("bottom_mode_b");
}
// button
document.getElementById('NewToolbar_button').addEventListener( "click", newTB );
function newTB(aEvent, keyEvent=false) {
if(!keyEvent && aEvent.button != 0) {
return;
}
newtoolbar.classList.toggle("off-mode");
browser.classList.toggle("off-mode_b");
}
const css =`
:root {
--ug-newbar_width: 42px;
--ug-newbar_bg_color: lightblue;
}
#NewToolbar_button .toolbarbutton-icon {
list-style-image: url("chrome://browser/skin/sidebars-right.svg") !important;
/*list-style-image: url("${ImagePath}") !important;*/
}
#navigator-toolbox {
z-index: 444 !important;
}
/*
#nav-bar {
z-index: 4 !important;
}
*/
#browser {
transition: padding 0.5s ease !important;
}
#newtoolbar .toolbarbutton-1 {
margin-block: 2px !important;
}
/*
#newtoolbar .toolbarbutton-1 image {
outline: 1px solid red !important;
}
#sidebar-box {
outline: 4px solid red !important;
outline-offset: -2px !important;
}
*/
/* Basis / Right */
#browser:not(.off-mode_b) {
padding-right: var(--ug-newbar_width) !important;
}
#toolbox_new {
position: fixed;
display: flex;
flex-direction: column;
width: var(--ug-newbar_width);
bottom: 0;
right: 0;
}
#newtoolbar {
display: flex;
flex-direction: column;
/*z-index: 4 !important;*/
width: var(--ug-newbar_width);
padding-block: 8px;
height: calc(100vh - var(--height_newbar));
background-color: var(--ug-newbar_bg_color) !important;
box-shadow: -1px 0 grey;
border-top: 1px solid grey;
transition: width 0.5s ease, margin 0.5s ease, height 0.5s ease;
}
#newtoolbar:not([customizing]).off-mode {
margin-inline: 0 calc(0px - var(--ug-newbar_width));
box-shadow: none;
}
/* Left */
#browser:not(.off-mode_b).left_mode_b {
padding-inline: var(--ug-newbar_width) 0 !important;
}
#toolbox_new.left_mode {
left: 0;
}
.left_mode #newtoolbar {
box-shadow: 1px 0 grey;
}
.left_mode #newtoolbar:not([customizing]).off-mode {
margin-inline: calc(0px - var(--ug-newbar_width)) 0;
}
/* Bottom */
#browser:not(.off-mode_b).bottom_mode_b {
padding-inline: 0 !important;
padding-bottom: var(--ug-newbar_width) !important;
}
#toolbox_new.bottom_mode {
flex-direction: row !important;
width: 100vw;
}
.bottom_mode #newtoolbar {
flex-direction: row !important;
height: var(--ug-newbar_width);
width: 100vw;
padding-block: 0;
padding-inline: 8px;
box-shadow: 0 -1px grey;
border: none;
}
.bottom_mode #newtoolbar:not([customizing]).off-mode {
margin-inline: 0;
margin-block: 0 calc(0px - var(--ug-newbar_width)) !important;
}
.bottom_mode #newtoolbar .toolbarbutton-1 {
margin-inline: 2px !important;
}
/* customizing */
#newtoolbar[customizing] {
min-width: 0 !important;
width: fit-content !important;
}
.bottom_mode #newtoolbar[customizing] {
width: 100vw !important;
}
#customization-container {
margin-inline: 0 var(--ug-newbar_width) !important;
}
#browser.left_mode_b + #customization-container {
margin-inline: var(--ug-newbar_width) 0 !important;
}
#browser.bottom_mode_b + #customization-container {
margin-inline: 0 !important;
margin-bottom: var(--ug-newbar_width) !important;
}
`;
const sss = Cc['@mozilla.org/content/style-sheet-service;1'].getService(Ci.nsIStyleSheetService);
const uri = Services.io.newURI('data:text/css,' + encodeURIComponent(css));
sss.loadAndRegisterSheet(uri, sss.AGENT_SHEET);
})();
).