Bleibt wie es ist.
Anstelle von deinem Code aus #1, probier mal:
.bookmark-item[label$=".txt"] img {
content: url('../icons/text.png') !important;
}Das wäre dann nur für die Icons aus deinem Screenshot, etwas allgemein gefasst.
Ansonsten hattest du die fast gleiche Frage schon mal gestellt, wenn ich mich nicht täusche. 
Screenshots wären prima.
Und der seltsame Code hat mal funktioniert, wo kommt der denn her?
Es gibt auch viele aktuelle Themen zu Icons, gerade auch für bookmarks, schätze da wäre was dabei.
wenn man Youtube Videos in Vollbild schaut, dann ist die Tableiste unten am Bildschirm sichtbar.
gibt es da eventl eine Lösung das die nicht im Vollbild zu sheen ist ?
Also soll sie weg wie ich das verstanden habe.
So hab ich das das verstanden, nur speziell für YT Player etc., aber nur der OP kann das Rätsel lösen. 
Das Skript funktioniert einwandfrei, aber die Tableiste wird im Vollbildmodus auch nicht ausgeblendet.
Was ist mit Video-Vollbildmodus, also zB auf YT den Player auf Vollbildmodus setzen, nicht das Fx Fenster?
Solange Werkzeugleisten noch angezeigt werden, inkl. Fx Vollbildmodus, soll die Tableiste ja wohl auch nicht verschwinden.
Frage zu diesem Scrip.
wenn man Youtube Videos in Vollbild schaut, dann ist die Tableiste unten am Bildschirm sichtbar.
gibt es da eventl eine Lösung das die nicht im Vollbild zu sheen ist ?
Was das angeht: vbox, document.getElementById("browser-bottombox"));.
Davon abesehen dass die Syntax seltsam aussieht, browser-bottombox gibt's schon eine Weile nicht mehr.
Poste evtl. dein aktuelles JS, und deine Fx Version.
Letzten Endes wird alles gut, nun lässt sie sich bestücken und sie hält die bestückten Buttons auch nach Beenden oder Neustart, also alles gut.
Die scheint es zu tun - Nightly und Release...
EDIT: Sie tut es auch, wenn der Name nicht mit 000 anfängt. Ich habe einfach mit Name "neu.js" getestet...
Danke! 
Dann werd ich das Ganze bei Gelegenheit mal ordentlich und hübsch machen, es gibt ja zZ andere Leisten die funktionieren bzw. gefixt wurden; ausserdem gäbe es vermutlich noch viel zu testen für das Ding.
Ausser es hat jemand Eile.
Bzgl. 00 , deshalb.
Eigene Buttons können Probleme machen, wenn die Leiste nicht früher geladen wird.
Danke für's testen!
Scheint so als ob ein bestimmter Schlaumeier nicht die leere Leiste getestet hat...
Sorry, hier nochmal Einer:
//Toggle newtoolbar 8D Fix neu test browser
//Use filename starting with 000 !! =>
//000_extra_toolbars_test_D.uc.js
// TEST!!!
(function() {
if (location.href !== 'chrome://browser/content/browser.xhtml')
return;
// Eigenes Icon
let ProfilePath = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir, 'chrome', 'icons'));
let icon_tb = 'newtoolbar.png';
let ImagePath = ProfilePath +'/'+ icon_tb;
let new_tb_loc = 0; // Position: 0 Rechts , 1 Links , 2 Bottom
let new_tb_off = 0; // 0 Startzustand On , 1 Startzustand Off
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 browser_size = document.getElementById("browser");
let rect = browser_size.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);
document.getElementById('browser').parentNode.appendChild(toolbox_new);
//geht height #2 not dynamic ???
//document.getElementById('toolbox_new').style.setProperty('--height_newbar', rect.height + 'px');
document.getElementById('toolbox_new').style.setProperty('--height_newbar', rect.top + '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");
}
else if (new_tb_loc === 2) {
toolbox_new.classList.add("bottom_mode");
browser.classList.add("bottom_mode_b");
}
// Startzustand
if (new_tb_off === 1) {
newtoolbar.classList.add("off-mode");
browser.classList.add("off-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: 36px;
--ug-newbar_bg_color: lightblue;
}
/* Button Icon */
#NewToolbar_button .toolbarbutton-icon {
list-style-image: url("chrome://browser/skin/sidebars-right.svg") !important;
/*list-style-image: url("${ImagePath}") !important;*/
}
#newtoolbar > :is(.toolbarbutton-1, toolbaritem),
#newtoolbar toolbarpaletteitem > :is(.toolbarbutton-1, toolbaritem) {
margin-block: 2px !important;
}
/* Basis / Right */
#browser {
transition: padding 0.25s ease !important;
}
#browser:not(.off-mode_b) {
padding-right: var(--ug-newbar_width) !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: 0 !important;
width: var(--ug-newbar_width);
height: calc(100vh - var(--height_newbar));
padding-block: 8px;
background-color: var(--ug-newbar_bg_color) !important;
box-shadow: -1px 0 grey;
transition: width 0.25s ease, margin 0.25s 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:not([customizing]) {
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;
width: fit-content;
}
.bottom_mode #newtoolbar:not([customizing]) {
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:not([customizing]) > :is(.toolbarbutton-1, toolbaritem) {
margin-block: 0 !important;
margin-inline: 2px !important;
}
/* customizing */
:root[customizing] #toolbox_new {
position: fixed !important;
bottom: 0 !important;
right: 0 !important;
left: unset !important;
}
#customization-container {
margin-inline: 0 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);
})();Und das hier:
Leider nicht, ist sichtbar, aber lässt sich nicht bestücken.
Den letzten Code habe ich gerade im aktuellsten Release 143.x und Nightly getestet, funktioniert prima.
Nur mal ganz schnell und grob, geht das hier generell? :
Ist sichtbar, aber lässt sich nicht mit Buttons belegen.
Schade, Danke für's testen!
Und das hier: ?
//Toggle newtoolbar 8C neu test browser
//Use filename starting with 000 !! =>
//000_extra_toolbars_test_B.uc.js
// TEST!!!
(function() {
if (location.href !== 'chrome://browser/content/browser.xhtml')
return;
// Eigenes Icon
let ProfilePath = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir, 'chrome', 'icons'));
let icon_tb = 'newtoolbar.png';
let ImagePath = ProfilePath +'/'+ icon_tb;
let new_tb_loc = 0; // Position: 0 Rechts , 1 Links , 2 Bottom
let new_tb_off = 0; // 0 Startzustand On , 1 Startzustand Off
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 browser_size = document.getElementById("browser");
let rect = browser_size.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);
document.getElementById('browser').parentNode.appendChild(toolbox_new);
//geht height #2 not dynamic ???
//document.getElementById('toolbox_new').style.setProperty('--height_newbar', rect.height + 'px');
document.getElementById('toolbox_new').style.setProperty('--height_newbar', rect.top + '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");
}
else if (new_tb_loc === 2) {
toolbox_new.classList.add("bottom_mode");
browser.classList.add("bottom_mode_b");
}
// Startzustand
if (new_tb_off === 1) {
newtoolbar.classList.add("off-mode");
browser.classList.add("off-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: 36px;
--ug-newbar_bg_color: lightblue;
}
/* Button Icon */
#NewToolbar_button .toolbarbutton-icon {
list-style-image: url("chrome://browser/skin/sidebars-right.svg") !important;
/*list-style-image: url("${ImagePath}") !important;*/
}
#newtoolbar > :is(.toolbarbutton-1, toolbaritem),
#newtoolbar toolbarpaletteitem > :is(.toolbarbutton-1, toolbaritem) {
margin-block: 2px !important;
}
/* Basis / Right */
#browser {
transition: padding 0.25s ease !important;
}
#browser:not(.off-mode_b) {
padding-right: var(--ug-newbar_width) !important;
}
#toolbox_new {
position: fixed;
z-index: 4 !important;
display: flex;
width: fit-content;
bottom: 0;
right: 0;
}
#newtoolbar {
display: flex;
flex-direction: column;
width: var(--ug-newbar_width);
height: calc(100vh - var(--height_newbar));
padding-block: 8px;
background-color: var(--ug-newbar_bg_color) !important;
box-shadow: -1px 0 grey;
transition: width 0.25s ease, margin 0.25s 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:not([customizing]) {
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;
width: fit-content;
}
.bottom_mode #newtoolbar:not([customizing]) {
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:not([customizing]) > :is(.toolbarbutton-1, toolbaritem) {
margin-block: 0 !important;
margin-inline: 2px !important;
}
/* customizing */
:root[customizing] #toolbox_new {
position: fixed !important;
bottom: 0 !important;
right: 0 !important;
left: unset !important;
}
#newtoolbar[customizing] {
min-width: 0 !important;
width: fit-content !important;
height: calc(100vh - var(--height_newbar) + 1px);
padding-top: 9px;
}
/*
.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);
})();Kannst mal das hier testen, keine Garantie auf Funktion.
Erscheint leider auch nicht im Anpassen-Fenster.
Mist verdammter... 
Nur mal ganz schnell und grob, geht das hier generell? :
Dateiname Script mit 00 beginnen:
//Toggle newtoolbar 8C test browser
(function() {
if (location.href !== 'chrome://browser/content/browser.xhtml')
return;
// Eigenes Icon
let ProfilePath = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir, 'chrome', 'icons'));
let icon_tb = 'newtoolbar.png';
let ImagePath = ProfilePath +'/'+ icon_tb;
let new_tb_loc = 0; // Position: 0 Rechts , 1 Links , 2 Bottom
let new_tb_off = 0; // 0 Startzustand On , 1 Startzustand Off
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 browser_size = document.getElementById("browser");
let rect = browser_size.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);
document.getElementById('browser').parentNode.appendChild(toolbox_new);
//geht height #2 not dynamic ???
//document.getElementById('toolbox_new').style.setProperty('--height_newbar', rect.height + 'px');
document.getElementById('toolbox_new').style.setProperty('--height_newbar', rect.top + '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");
}
else if (new_tb_loc === 2) {
toolbox_new.classList.add("bottom_mode");
browser.classList.add("bottom_mode_b");
}
// Startzustand
if (new_tb_off === 1) {
newtoolbar.classList.add("off-mode");
browser.classList.add("off-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;
}
/* Button Icon */
#NewToolbar_button .toolbarbutton-icon {
list-style-image: url("chrome://browser/skin/sidebars-right.svg") !important;
/*list-style-image: url("${ImagePath}") !important;*/
}
#newtoolbar > :is(.toolbarbutton-1, toolbaritem) {
margin-block: 2px !important;
}
/* Basis / Right */
#browser {
transition: padding 0.5s ease !important;
}
#browser:not(.off-mode_b) {
padding-right: var(--ug-newbar_width) !important;
}
#toolbox_new {
position: absolute;
display: flex;
width: fit-content;
bottom: 0;
right: 0;
}
#newtoolbar {
display: flex;
flex-direction: column;
overflow-x: hidden;
overflow-y: auto;
/*z-index: 4 !important;*/
width: var(--ug-newbar_width);
height: calc(100vh - var(--height_newbar));
padding-block: 8px;
background-color: var(--ug-newbar_bg_color) !important;
box-shadow: -1px 0 grey;
transition: width 0.5s ease, margin 0.5s ease, height 0.75s 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 > :is(.toolbarbutton-1, toolbaritem) {
margin-block: 0 !important;
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);
})();Von allen vertikalen Toolbars in v143 funktioniert nur eine einzige von Mitleser
Das ist eine über der Webseite schwebende Leiste, das ist keine Leiste die festgenagelt am rechten Fensterrand steht und nicht die Webseite verdeckt.
Kannst mal das hier testen, keine Garantie auf Funktion.
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);
})();
Spoiler anzeigen
Das wird mir langsam zu anstrengend...
Kauf dir endlich einen neuen Rechner...1-2 Jahre alte wieder aufbereitete Leasingrückläufer (z.B. als Businesslaptop/Workstationlaptop) gibt es auch gebraucht sehr günstig...Habe auch so einen...
Ok, da hast du recht.
Ich brauche aber eine Mac Workstation mit Saft die 2 Monitore treibt, plus ein kompatibles Laptop.
Das > img funktioniert nur weil du ein list-style-image Attribut gesetzt hast. Das wird nur vom Browser nicht mehr zugelassen/interpretiert.
Das macht aber keinen Sinn, weil man in CSS kein list-style-image Attribut setzen kann, nur benutzen.
Wenn man eine CSS list-style-image Regel benutzt in einem Element das dieses Attribut nicht gesetzt hat - idR in Fx JS - wird diese Regel einfach nur ignoriert.
Falls für ein Element (nur) ein list-style-image Attribut in JS gesetzt ist, lässt sich img nicht als CSS Selector benutzen, das kommt aus Html.
Ich beziehe mich übrigens bei meinen Fragen und meinen Codevorschlagen immer auf den aktuellen Fx Code , nicht auf mein 115esr, falls diese Vermutung die Verwirrung verursacht.
Das list-style-image an der Stelle wird demnach überschrieben?
Ja. Das > img funktioniert nur weil du ein list-style-image Attribut gesetzt hast. Das wird nur vom Browser nicht mehr zugelassen/interpretiert.
Nein. Aber das (Zeile 7):
CSS.menu-icon {
Ah, verstehe, mein Fehler, Danke!
Das list-style-image (XUL) wird immer noch von Fx benutzt an vielen Stellen, da kann ich nicht's für.
Der Selector dafür wäre image, img funktioniert mE dafür nicht, nur eben in diesem Fall.
Ich dachte dass die Lesezeichenleiste noch list-style-image benutzt, aber das ist dann wohl falsch (?).
Oder so:
CSS/*Lesezeichenordner mit einem definierten Text in der Lesezeichenleiste (Änderung in 143)*/ #PlacesToolbarItems toolbarbutton:is([label="Info"],[label="Shoppen"]).bookmark-item:not(.subviewbutton) .toolbarbutton-icon { content: url('../icons/16folder03-black.svg') !important; }
Hmm, interessant.
Das list-style-image an der Stelle wird demnach überschrieben?
Nur mal ganz grob ausgeweitet, könnte sowas auch klappen, für Leiste und Popup, je nachdem wo das jeweilige Label benutzt wird?
.bookmark-item:is([label="Info"],[label="Shoppen"]) .toolbarbutton-icon {
content: url('../icons/16folder03-black.svg') !important;
}doch benutze diese css aktuell
In deiner CSS in Zeile 57 steht das Wort CSS, was da nicht sein soll.
Lösch das Wort mal raus und sieh was passiert, mit deinem originalen Code.
Horstmann danke für deine arbeit sieht jetzt genauso aus wie ichs eben selbst bearbeitet habe.
allerdings bei deiner bearbeitung is was schief gelaufen wenn ich da adresse im feld eingeben will siehts so aus wie am bild
bild 2 normal
Das liegt an deinem CSS, das ist veraltet und vermutlich nicht das was du aktuell benutzt.
Du könntest nur Zeilen 58 bis 95 von Beitrag #30 (zusätzlich) benutzen, alles andere hatte ich unverändert von deinem CSS aus #1 kopiert.
Probier das mal als Test; bräuchte Einiges an Aufräumen, ist eine grobe Variante von deinem CSS in #1:
#TabsToolbar {
border-bottom:1px solid grey!important}
#PersonalToolbar{
border-top:1px solid grey!important;
}
#PersonalToolbar{
border-bottom:1px solid grey!important;
}
.bookmark-item[container="true"] {
fill:orange !important;
color:black !important;
}
.bookmark-item[label="Info"] {list-style-image: url('./icons/blue.png') !important;}
.bookmark-item[label="Sport"] {list-style-image: url('./icons/black.ico') !important;}
.bookmark-item[label="Shoppen"] {list-style-image: url('./icons/blue.png') !important;}
.bookmark-item[label="EDV"] {list-style-image: url('./icons/black.ico') !important;}
.bookmark-item[label="Privat"] {list-style-image: url('./icons/blue.png') !important;}
.bookmark-item[label="Daniela"] {list-style-image: url('./icons/black.ico') !important;}
.bookmark-item[label="Download"] {list-style-image: url('./icons/blue.png') !important;}
.bookmark-item[label="Kommunikation"] {list-style-image: url('./icons/black.ico') !important;}
.bookmark-item[label="Multimedia"] {list-style-image: url('./icons/blue.png') !important;}
.bookmark-item[label="Aktuelles"] {list-style-image: url('./icons/black.ico') !important;}
.bookmark-item[label="Versand"] {list-style-image: url('./icons/blue.png') !important;}
.bookmark-item[label="Apotheken"] {list-style-image: url('./icons/blue.png') !important;}
.bookmark-item[label="Gutscheine"] {list-style-image: url('./icons/blue.png') !important;}
.bookmark-item[label="Sonstiges"] {list-style-image: url('./icons/blue.png') !important;}
.bookmark-item[label="Tiere"] {list-style-image: url('./icons/blue.png') !important;}
.bookmark-item[label="Foren/Tipps"] {list-style-image: url('./icons/blue.png') !important;}
.bookmark-item[label="PKW"] {list-style-image: url('./icons/blue.png') !important;}
.bookmark-item[label="Haushalt"] {list-style-image: url('./icons/blue.png') !important;}
.bookmark-item[label="TV"] {list-style-image: url('./icons/blue.png') !important;}
.bookmark-item[label="Konsum"] {list-style-image: url('./icons/blue.png') !important;}
.bookmark-item[label="Baumärkte"] {list-style-image: url('./icons/blue.png') !important;}
.bookmark-item[label="Einrichtung"] {list-style-image: url('./icons/blue.png') !important;}
.bookmark-item[label="Baustoffe"] {list-style-image: url('./icons/black.ico') !important;}
.bookmark-item[label="Urlaub"] {list-style-image: url('./icons/blue.png') !important;}
.bookmark-item[label="Mode"] {list-style-image: url('./icons/blue.png') !important;}
.bookmark-item[label="Elektronik"] {list-style-image: url('./icons/blue.png') !important;}
.bookmark-item[label="Werkstatt"] {list-style-image: url('./icons/blue.png') !important;}
.bookmark-item[label="Mein..."] {list-style-image: url('./icons/blue.png') !important;}
.bookmark-item[label="Arzt"] {list-style-image: url('./icons/blue.png') !important;}
.bookmark-item[label="Tipps"] {list-style-image: url('./icons/blue.png') !important;}
.bookmark-item[label="Foren"] {list-style-image: url('./icons/blue.png') !important;}
.bookmark-item[label="Suchmaschinen"] {list-style-image: url('./icons/blue.png') !important;}
.bookmark-item[label="Equipment"] {list-style-image: url('./icons/blue.png') !important;}
.bookmark-item[label="Makita"] {list-style-image: url('./icons/blue.png') !important;}
.bookmark-item[label="Onlineshop"] {list-style-image: url('./icons/blue.png') !important;}
.bookmark-item[label="Firmen"] {list-style-image: url('./icons/blue.png') !important;}
.bookmark-item[label="Arbeit"] {list-style-image: url('./icons/blue.png') !important;}
.bookmark-item[label="Tabak"] {list-style-image: url('./icons/blue.png') !important;}
.bookmark-item[label="Info"] > img {content: url('./icons/blue.png') !important;}
.bookmark-item[label="Sport"] > img {content: url('./icons/black.ico') !important;}
.bookmark-item[label="Shoppen"] > img {content: url('./icons/blue.png') !important;}
.bookmark-item[label="EDV"] > img {content: url('./icons/black.ico') !important;}
.bookmark-item[label="Privat"] > img {content: url('./icons/blue.png') !important;}
.bookmark-item[label="Daniela"] > img {content: url('./icons/black.ico') !important;}
.bookmark-item[label="Download"] > img {content: url('./icons/blue.png') !important;}
.bookmark-item[label="Kommunikation"] > img {content: url('./icons/black.ico') !important;}
.bookmark-item[label="Multimedia"] > img {content: url('./icons/blue.png') !important;}
.bookmark-item[label="Aktuelles"] > img {content: url('./icons/black.ico') !important;}
.bookmark-item[label="Versand"] > img {content: url('./icons/blue.png') !important;}
.bookmark-item[label="Apotheken"] > img {content: url('./icons/blue.png') !important;}
.bookmark-item[label="Gutscheine"] > img {content: url('./icons/blue.png') !important;}
.bookmark-item[label="Sonstiges"] > img {content: url('./icons/blue.png') !important;}
.bookmark-item[label="Tiere"] > img {content: url('./icons/blue.png') !important;}
.bookmark-item[label="Foren/Tipps"] > img {content: url('./icons/blue.png') !important;}
.bookmark-item[label="PKW"] > img {content: url('./icons/blue.png') !important;}
.bookmark-item[label="Haushalt"] > img {content: url('./icons/blue.png') !important;}
.bookmark-item[label="TV"] > img {content: url('./icons/blue.png') !important;}
.bookmark-item[label="Konsum"] > img {content: url('./icons/blue.png') !important;}
.bookmark-item[label="Baumärkte"] > img {content: url('./icons/blue.png') !important;}
.bookmark-item[label="Einrichtung"] > img {content: url('./icons/blue.png') !important;}
.bookmark-item[label="Baustoffe"] > img {content: url('./icons/black.ico') !important;}
.bookmark-item[label="Urlaub"] > img {content: url('./icons/blue.png') !important;}
.bookmark-item[label="Mode"] > img {content: url('./icons/blue.png') !important;}
.bookmark-item[label="Elektronik"] > img {content: url('./icons/blue.png') !important;}
.bookmark-item[label="Werkstatt"] > img {content: url('./icons/blue.png') !important;}
.bookmark-item[label="Mein..."] > img {content: url('./icons/blue.png') !important;}
.bookmark-item[label="Arzt"] > img {content: url('./icons/blue.png') !important;}
.bookmark-item[label="Tipps"] > img {content: url('./icons/blue.png') !important;}
.bookmark-item[label="Foren"] > img {content: url('./icons/blue.png') !important;}
.bookmark-item[label="Suchmaschinen"] > img {content: url('./icons/blue.png') !important;}
.bookmark-item[label="Equipment"] > img {content: url('./icons/blue.png') !important;}
.bookmark-item[label="Makita"] > img {content: url('./icons/blue.png') !important;}
.bookmark-item[label="Onlineshop"] > img {content: url('./icons/blue.png') !important;}
.bookmark-item[label="Firmen"] > img {content: url('./icons/blue.png') !important;}
.bookmark-item[label="Arbeit"] > img {content: url('./icons/blue.png') !important;}
.bookmark-item[label="Tabak"] > img {content: url('./icons/blue.png') !important;}
#urlbar[breakout][breakout-extend]{
top: calc((var(--urlbar-toolbar-height) - var(--urlbar-height)) / 2) !important;
left: 0 !important;
width: 100% !important;
}
#urlbar[breakout][breakout-extend] > #urlbar-input-container {
height: var(--urlbar-height) !important;
padding-block: 0 !important;
padding-inline: 0 !important;
}
#urlbar[breakout][breakout-extend][breakout-extend-animate] > #urlbar-background {
animation-name: none !important;
}
#urlbar[breakout][breakout-extend] > #urlbar-background {
box-shadow: none !important;
}
#statuspanel-label {
background: white !important;
color: grey !important;
font-weight: bold !important;
}
/* Rahmen von Adressfeld und Suchfeld */
#urlbar-container {
--toolbar-field-focus-border-color: transparent !important;
}
#search-container {
--toolbar-field-focus-border-color: transparent !important;
}
/* bookmark-items */
#PlacesToolbar > menupopup:first-child
{
margin-top: -1px !important;
}
#PlacesToolbar menuitem,
#PlacesToolbar menu
{
margin: 0 2px !important;
min-height: 22px !important;
padding: 0 !important;
border-radius: unset !important;
}
menupopup > menuitem,
menupopup > menu {
padding-block: 0 !important;
padding-inline-start: 10px !important;
}CSS.bookmark-item[label="Shoppen"] { --bookmark-item-icon: url('file:/C:\Users\SD\AppData\Roaming\Mozilla\Firefox\Profiles\dxui00c9.default-release\chrome\icons\blue.png') !important; } .bookmark-item[label="EDV"] { --bookmark-item-icon: url('file:/C:\Users\SD\AppData\Roaming\Mozilla\Firefox\Profiles\dxui00c9.default-release\chrome\icons\blue.png') !important; } .bookmark-item[label="Info"] { --bookmark-item-icon: url('file:/C:\Users\SD\AppData\Roaming\Mozilla\Firefox\Profiles\dxui00c9.default-release\chrome\icons\blue.png') !important; }
Wäre gut immer auch die Leiste und das Popup zu sehen; werden dort die Icons angewendet?
Mein Fehler...
Neuer Versuch:
Evtl. noch > img an die :is(...) Kette anhängen, wo du content benutzt?
