Ich werf das mal in den Raum, locker aus dem Handgelenk, falls es jemand testen möchte. ![]()
Das wäre ein evtl. funktionierendes Script für eine zusätzliche Toolbar, manuell einstellbar für vertikal links/ rechts oder unten.
Es basiert auf dem was wir hier gebastelt hatten, also eine Zusatzleiste die nicht an der navigator-toolbox hängt (diverse Gründe).
Wobei die Leiste in diesem Fall fixiert ist, nicht ausklappt bei hover, und nicht schwebt - d.h. der Browserinhalt sollte sich anpassen wenn die Leiste sichtbar oder per Button ausgeblendet ist etc., inkl. Anpassenfenster. ![]()
Könnte sein das es das schon gibt in der Konfiguration, aber auch als nicht Zusatzleisten benutzender Zusatzleistenfanatiker habe ich längst den Überblick verloren.![]()
Header bitte lesen, Dateiname sollte mit 00 oder so starten; Kudos an Mitleser für diverse Tips und Lösungen.
Edit: die ursprüngliche Version funktioniert nicht in aktuellem Fx; diese Version ist in aktuellem Fx 143.01 und Nightly getestet.
Edit #2: Erweiterte Version.
// Use filename starting with 00 !! =>
// 00_extra_toolbars_V2.uc.js
// Extra newtoolbars 8 => 10 / Toggle button on/off
// Basiert auf: https://www.camp-firefox.de/forum/thema/137714-seitennavigation-fly-out-menue
// ACHTUNG: Einige Systembuttons lassen sich in zusaetzliche/eigene Tb's zwar noch verschieben, haben aber KEINE Funktion.
// Dazu gibt es einen Patch von @BrokenHeart: https://www.camp-firefox.de/forum/thema/138875-fix-toolbar-buttons-reagieren-nicht-mehr-ab-ff-134/
// Kudos an Mitleser für Vorarbeit, Loesungen und Tips
// Test
(function() {
if (location.href !== 'chrome://browser/content/browser.xhtml')
return;
// User Einstellungen JS
// Eigenes Icon in Profilordner/chrome/icons
let ProfilePath = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir));
let IconPath = '/chrome/icons/';
//let Icon_tb = 'newtoolbar.png';
let Icon_tb = 'flower-satt32.png';
let ImagePath = ProfilePath + IconPath + Icon_tb;
let new_tb_icon = 1; // 0 Firefox Icon, 1 Eigenes Icon
let new_tb_loc = 0; // Position Startzustand: 0 Rechts , 1 Links , 2 Bottom
let new_tb_off = 0; // 0 Startzustand On , 1 Startzustand Off
let new_tb_color = 1; // Hintergrundfarbe aendern: 0 Off , 1 On
let new_tb_bg_color = 'lightblue'; // Hintergrundfarbe bei On
let new_tb_distance = '2px'; // Abstand zw. Buttons, muss px Wert sein, auch bei 0px
let new_tb_size = '0px'; // Breite / Hoehe Leiste erhoehen, muss px Wert sein, auch bei 0px
let new_tb_border_color = 'grey'; // Trennlinien Farbe
let new_tb_border_width = '1px'; // Trennlinien Breite, muss px Wert sein, auch bei 0px
// User Einstellungen JS Ende
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');
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);
document.getElementById('browser').parentNode.appendChild(toolbox_new);
let navbar_size = document.getElementById("navigator-toolbox");
let observer = new ResizeObserver(() => {
let rect = navbar_size.getBoundingClientRect();
document.getElementById('toolbox_new').style.setProperty('--height_newbar', rect.height + 'px');
});
observer.observe(navbar_size);
CustomizableUI.registerArea('newtoolbar', {legacy: true});
CustomizableUI.registerToolbarNode(ntb);
//On/off button
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) { };
// button function
document.getElementById('NewToolbar_button').addEventListener('click', event => {
if (event.button === 0) {
newtoolbar.classList.toggle("off-mode");
browser.classList.toggle("off-mode_b");
}
});
// Icon
if (new_tb_icon === 1) {
NewToolbar_button.classList.add("icon_mode");
};
// Hintergrundfarbe
if (new_tb_color === 1) {
newtoolbar.style.backgroundColor = new_tb_bg_color;
};
// Positions Startzustand
if (new_tb_loc === 1) {
toolbox_new.classList.add("left_mode");
browser.classList.add("left_mode_b");
}
else if (new_tb_loc === 2) {
toolbox_new.classList.add("bottom_mode");
browser.classList.add("bottom_mode_b");
};
// On/off Startzustand
if (new_tb_off === 1) {
newtoolbar.classList.add("off-mode");
browser.classList.add("off-mode_b");
};
const css =`
:root {
--ug-newbar_basewidth: 36px;
--ug-newbar_width: calc(var(--ug-newbar_basewidth) + 2*var(--ug-newbar_add_width));
--ug-newbar_borderwidth: ${new_tb_border_width}; /* Breite / Hoehe Trennlinie */
--ug-newbar_add_width: ${new_tb_size}; /* Breite / Hoehe erhoehen */
--ug-newbar_btnspace: ${new_tb_distance}; /* Abstand zw. Buttons */
}
/* Trennlinie */
#newtoolbar {
--trenn-color: ${new_tb_border_color};
}
/* Button Icon */
#NewToolbar_button .toolbarbutton-icon {
list-style-image: url("chrome://browser/skin/sidebars-right.svg");
}
#NewToolbar_button.icon_mode .toolbarbutton-icon {
list-style-image: url("${ImagePath}");
}
/*-- Basis / Right --*/
#browser {
transition: padding 0.25s ease !important;
/*border: 5px solid green;*/
}
#browser:not(.off-mode_b) {
padding-right: calc(var(--ug-newbar_width) + var(--ug-newbar_borderwidth)) !important;
}
#toolbox_new {
position: fixed;
z-index: 4 !important;
display: flex;
width: fit-content;
bottom: 0;
right: 0;
}
#newtoolbar {
display: flex;
flex-direction: column;
min-width: fit-content !important;
width: var(--ug-newbar_width);
min-height: fit-content !important;
height: calc(100vh - var(--height_newbar)) !important;
padding-block: 8px;
box-shadow: calc(0px - var(--ug-newbar_borderwidth)) 0 var(--trenn-color);
transition: width 0.25s ease, margin 0.25s ease /*,height 0.5s ease*/ ;
align-items: center !important;
/*justify-content: end !important;*/
/*outline: 1px solid purple;
outline-offset: -4px;*/
}
#newtoolbar:not([customizing]).off-mode {
margin-inline: 0 calc(0px - var(--ug-newbar_width));
box-shadow: none !important;
}
#newtoolbar > :is(.toolbarbutton-1, toolbaritem),
#newtoolbar toolbarpaletteitem > :is(.toolbarbutton-1, toolbaritem) {
margin-block: var(--ug-newbar_btnspace) !important;
/*outline: 1px solid red;
outline-offset: -1px;*/
}
/*-- Left --*/
#browser:not(.off-mode_b).left_mode_b {
padding-inline: calc(var(--ug-newbar_width) + var(--ug-newbar_borderwidth)) 0 !important;
}
#toolbox_new.left_mode {
left: 0;
}
.left_mode #newtoolbar:not([customizing]) {
box-shadow: var(--ug-newbar_borderwidth) 0 var(--trenn-color);
}
.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: calc(var(--ug--newbar_width) + var(--ug-newbar_borderwidth)) !important;
}
#toolbox_new.bottom_mode {
flex-direction: row;
width: fit-content;
}
.bottom_mode #newtoolbar:not([customizing]) {
flex-direction: row !important;
height: var(--ug-newbar_width) !important;
width: 100vw;
padding-block: 0;
padding-inline: 8px;
box-shadow: 0 calc(0px - var(--ug-newbar_borderwidth)) var(--trenn-color);
border: none;
}
.bottom_mode #newtoolbar:not([customizing]).off-mode {
margin-inline: 0;
margin-block: 0 calc(0px - var(--ug-newbar_width)) !important;
}
#toolbox_new.bottom_mode #newtoolbar > :is(.toolbarbutton-1, toolbaritem),
#toolbox_new.bottom_mode #newtoolbar toolbarpaletteitem > :is(.toolbarbutton-1, toolbaritem) {
margin-block: var(--toolbarbutton-outer-padding) !important;
margin-inline: var(--ug-newbar_btnspace) !important;
}
/*-- Fullscreen Test Mac --*/
:root[inDOMFullscreen] #toolbox_new {
display: none !important;
}
:root[inDOMFullscreen] #browser {
padding: 0 !important;
}
/*-- customizing --*/
:root[customizing] #toolbox_new {
bottom: 0 !important;
right: 0 !important;
left: unset !important;
}
#customization-container {
margin-right: 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);
})();
Alles anzeigen