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