Es gibt aktuell einige Updates von Aris, u.a. scheint er an diesem hier diskutierten Problem gearbeitet zu haben.
Hier in Zeilen 130 -148; das nur zur Info, nicht getestet.
Beiträge von Horstmann
-
-
Die Konkurrenz schläft nicht.
Die Aktivierung gelang mir nur einmal und mit Mühe. Danach waren mehrere Aktivierungsversuche erfolglos. Es gibt grafische Mängel bei der Hintergrundfarbe und die Trennlinien werden nicht korrekt angezeigt.
Ich habe mich für V7R2 entschieden. Bedeutet die 00 am Anfang des Namens übrigens, dass das Skript zuerst geladen wird?Diese Probleme, traten die mit der neuen Aris Version auf, oder mit meiner V8 aus #73?
00 am Anfang des Namens lädt tatsächlich das Script früh, vor allem um die Funktion von Inhalten wie eigenen Buttons zu gewährleisten. -
Die Konkurrenz schläft nicht.
Ganz nett, aber schlaffes Design.
Ist vermutlich viel besser; habe hier nur etwas Probleme mit eigenen Buttons - sogar auch ausserhalb der Leiste - die manchmal keine Funktion haben, auch nach Umbenennung des Scripts mit 000 am Anfang. -
Ah, danke. Ich habe es nicht richtig hinbekommen, weil ich in Zeile 57 eine doppelte Zahl (35, 36) eingefügt habe. Also habe ich Folgendes gemacht:
Codelet new_tb_size = '0px';Codeconst css =` :root { --ug-newbar_basewidth: 35px; // --ug-newbar_basewidth: calc(2 * var(--toolbarbutton-inner-padding) + 16px);Da wo // User Einstellungen Ende steht, sollte man aufhören im normalen Gebrauch.
Also würde ich den Code flott rausnehmen, siehe auch Sören's Kommentar.
Die Leiste hat gerade Zahlen als Breite(Höhe bei bottom), um die Buttons zentriert zu halten, plus Trennlinie aussen. -
Mit dieser Version gibt es keine Probleme. Ich denke, es wäre hilfreich, eine direkte Anpassung der Toolbar width hinzuzufügen.
Die Anpassung gibt es schon, in Zeile 57.
Die Mindestbreite/Höhe ist momentan fest 32px, was die Standardbreite der Buttons in Fx ist, sonst passen eben die Buttons nicht rein.Falls du eine schmalere Leiste möchtest, kannst du das hier mal testen; nur als zip, um Codeverwirrung zu vermeiden, das ist eine reine TEST Version mit noch anderem experimentellem Kram.
Alle nötigen Anpassungen oben unter // Groessen aendern. -
Letzte Version macht mit den Themes hier keine Probleme mehr, als Beispiel Clouds (bisher schwarze Leiste), jetzt voll übernommen. Prima!
Das Problem ist, der Hintergrund wird bei diesem Theme gekachelt, s. #56/57, weil das Bild nicht hoch genug ist.
Sehr schön kann man den Effekt hier beobachten:
Das kann man zwar anpassen, aber es ist für jedes Theme etwas anders - ausser das HGbild ist im Theme sauber plaziert und v.a. gross genug.
In deinem Fall ginge evtl. sowas statt dem momentanen Code an dieser Stelle:
CSS:root[lwtheme][lwtheme-image] #newtoolbar:not(.ntb_bg_color) { background-image: var(--lwt-header-image) !important; background-size: cover !important; background-repeat: no-repeat !important; }Im Moment sehe ich das aber als Theme abhängiges Problem; vertikale Leisten sind in Fx glaub ich nicht via externe Theme Bilder abgedeckt, evtl. deshalb arbeiten die Themebauer nur für die normalen horizontalen Leisten oben (?).
-
So, damit lässt sich wohl hoffentlich generell die Hintergrundfarbe oben in Zeile 49 einstellen
Danke, werde ich auch mal testen.
Nur zur Klarstellung, es braucht dann keinen zusätzlichen Code mehr für --lwt-accent-color, die Variable kann damit jetzt bei Bedarf direkt in Zeile 49 überschrieben werden, dank dem Hinweis von Andreas.
Also besser nicht beides benutzen.
Weil der Rest vom Themecode auch etwas angepasst ist, sollte das seltener nötig sein. -
Das ist ja schon im Skript eingearbeitet (ab Zeile 49), kann dann notfalls verwendet werden. Das war wohl nicht richtig formuliert von mir, gemeint hatte ich die automatische Übernahme der Farbe aus den Themes. Es funktioniert oft, aber nicht bei allen, das ist das Problem.
So, damit lässt sich wohl hoffentlich generell die Hintergrundfarbe oben in Zeile 49 einstellen, ohne weitere Änderungen im CSS weiter unten, falls noch nötig (zB gekachelte HG Bilder).
Das Grundproblem mit der Kompatibilität von manchen Themes löst das nicht, und ich kann das auch im Aris Script beobachten.
Lösungsvorschläge wie immer willkommen.JavaScript
Alles anzeigen// Zusaetzliche Toolbars wahlweise rechts, links, unten // Use filename starting with 00 !! => // 00_extra_toolbars_V8.uc.js // Basiert auf: https://www.camp-firefox.de/forum/thema/137714-seitennavigation-fly-out-menue // Aris: https://github.com/Aris-t2/CustomJSforFx/blob/master/scripts/addonbar_vertical.uc.js // Forum: https://www.camp-firefox.de/forum/thema/139927-eigene-zusatzleisten-ab-ff-143/ // 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 fuer Vorarbeit, Loesungen und Tips // ToDo: Themes Kompatibiltaet // Nach Script Aenderungen Neustart mit Start-Cache loeschen => about:support // Version V8 / Release 3 (function() { if (location.href !== 'chrome://browser/content/browser.xhtml') return; // User Einstellungen // Eigenes Icon in Profilordner/chrome/icons Ordner let ProfilePath = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir)); let IconPath = '/chrome/icons/'; let Icon_tb = 'toolbar_n3.svg'; let ImagePath = ProfilePath + IconPath + Icon_tb; // 0 Firefox Icon , 1 eigenes Icon benutzen let new_tb_icon = 0; // Position Startzustand: 0 Rechts , 1 Links , 2 Bottom let new_tb_loc = 0; // 0 letzter Zustand Leiste On/Off beim Beenden merken , 1 nicht merken // 2x Neustart noetig, nur beim ersten Neuspeichern dieser Einstellung let new_tb_save = 0; // 0 Startzustand Leiste On , 1 Startzustand Off , falls nicht beim Beenden gespeichert let new_tb_off = 0; // 0 Button schaltet Leiste fuer alle Fenster , 1 nur aktives Fenster let new_tb_uno = 0; // Eigene Hintergrundfarbe: 0 Off , 1 On let new_tb_color = 0; // Hintergrundfarbe bei On let new_tb_bg_color = 'lightblue'; // Abstand zw. Buttons, muss px Wert sein, auch bei 0px let new_tb_distance = '2px'; // Breite / Hoehe Leiste erhoehen, muss positiver px Wert sein, auch bei 0px let new_tb_size = '0px'; // Trennlinie Breite, muss px Wert sein, 0px = off let new_tb_border_width = '1px'; // Trennlinie Farbe let new_tb_border_color = 'var(--chrome-content-separator-color)'; // User Einstellungen Ende if (Services.prefs.getBoolPref('svg.context-properties.content.enabled') == false) { Services.prefs.setBoolPref('svg.context-properties.content.enabled', true ); } const pref_newtoolbar_state = "userchrome.newtoolbar.enabled"; 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 observer_custom = new MutationObserver(function(mutations) { for (let mutation of mutations) { try { const customContainer = document.getElementById('customization-container'); if (!customContainer) return; const rect = customContainer.getBoundingClientRect(); document.getElementById('toolbox_new').style.setProperty('--height_newbar_c', rect.height + 'px'); } catch (e) { console.error("Fehler beim Setzen von --height_newbar_c:", e); } } }); observer_custom.observe(document.querySelector('#main-window'), { attributes: true, attributeFilter: ['customizing'], }); let navbar_size = document.getElementById("browser"); let observer = new ResizeObserver(() => { let rect = navbar_size.getBoundingClientRect(); document.getElementById('toolbox_new').style.setProperty('--height_newbar', rect.height + 'px'); document.getElementById('toolbox_new').style.setProperty('--height_newbar_top', rect.top + 'px'); }); observer.observe(navbar_size); CustomizableUI.registerArea('newtoolbar', {legacy: true}); setTimeout(function(){ CustomizableUI.registerArea('newtoolbar', {legacy: true}); },2000); 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 Funktions if (new_tb_uno === 0) { document.getElementById('NewToolbar_button').addEventListener('click', tb_toggle ); } else if (new_tb_uno === 1) { document.getElementById('NewToolbar_button').addEventListener('click', tb_toggle_uno ); } function tb_toggle() { let windows = Services.wm.getEnumerator(null); while (windows.hasMoreElements()) { let win = windows.getNext(); if (event.button === 0) { const toolbar = win.document.getElementById("newtoolbar"); const browserArea = win.document.getElementById("browser"); const button = win.document.getElementById("NewToolbar_button"); toolbar.classList.toggle("off-mode"); browserArea.classList.toggle("off-mode_b"); button.classList.toggle("off-mode_btn"); const ntb_visible = !toolbar.classList.contains("off-mode"); Services.prefs.setBoolPref(pref_newtoolbar_state, ntb_visible); } } }; function tb_toggle_uno() { if (event.button === 0) { const toolbar = document.getElementById("newtoolbar"); const browserArea = document.getElementById("browser"); const button = document.getElementById("NewToolbar_button"); toolbar.classList.toggle("off-mode"); browserArea.classList.toggle("off-mode_b"); button.classList.toggle("off-mode_btn"); const ntb_visible = !toolbar.classList.contains("off-mode"); Services.prefs.setBoolPref(pref_newtoolbar_state, ntb_visible); } }; // Positions Startzustand if (new_tb_loc === 1) { toolbox_new.classList.add("left_mode"); browser.classList.add("left_mode_b"); NewToolbar_button.classList.add("left_mode_btn"); } else if (new_tb_loc === 2) { toolbox_new.classList.add("bottom_mode"); browser.classList.add("bottom_mode_b"); NewToolbar_button.classList.add("bottom_mode_btn"); } let toolbarEnabled = true; try { toolbarEnabled = Services.prefs.getBoolPref(pref_newtoolbar_state); } catch(e) { Services.prefs.setBoolPref(pref_newtoolbar_state, new_tb_off === 0); // Initialwert setzen toolbarEnabled = new_tb_off === 0; } if (!toolbarEnabled) { newtoolbar.classList.add("off-mode"); browser.classList.add("off-mode_b"); NewToolbar_button.classList.add("off-mode_btn"); } // #1 Beim Beenden von Firefox: Pref löschen, falls new_tb_save === 1 if (new_tb_save === 1) { Services.obs.addObserver(function observer(subject, topic, data) { if (topic === "quit-application-granted") { try { Services.prefs.clearUserPref(pref_newtoolbar_state); } catch (e) { } Services.obs.removeObserver(observer, "quit-application-granted"); } }, "quit-application-granted"); } // 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; // } if (new_tb_color === 1) { newtoolbar.classList.add("ntb_bg_color"); } const css =` :root { /*--ug-newbar_basewidth: 32px;*/ --ug-newbar_basewidth: calc(2 * var(--toolbarbutton-inner-padding) + 16px); --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 */ } /*- Buttons kleiner -*/ #newtoolbar { /*--toolbarbutton-inner-padding: 6px !important;*/ --toolbarbutton-outer-padding: 0px !important; } /*- Trennlinie -*/ #newtoolbar { --trenn-color: ${new_tb_border_color}; } /*- Button -*/ #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}"); } #NewToolbar_button.off-mode_btn:not(:hover, :active) .toolbarbutton-icon { opacity: 0.45; } #NewToolbar_button.left_mode_btn .toolbarbutton-icon { transform: rotate(180deg); } #NewToolbar_button.bottom_mode_btn .toolbarbutton-icon { transform: rotate(90deg); } /*-- Basis / Right --*/ #browser { transition: padding 0.25s ease !important; } #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; top: var(--height_newbar_top); right: 0; } #newtoolbar { display: flex; flex-direction: column; min-width: var(--ug-newbar_basewidth) !important; width: var(--ug-newbar_width); min-height: var(--ug-newbar_basewidth) !important; height: 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; } #newtoolbar:not([customizing]).off-mode { min-width: 0px !important; 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; } /*-- 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 { top: unset; bottom: 0; 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; /*justify-content: center !important;*/ /* Inhalt mittig, optional */ } .bottom_mode #newtoolbar:not([customizing]).off-mode { min-height: 0px !important; 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 --*/ /* Mac / nur Video Fullscreen */ #main-window[inDOMFullscreen]:not([customizing]) #toolbox_new { visibility: collapse !important; } #main-window[inDOMFullscreen]:not([customizing]) #browser { padding: 0 !important; } /* Windows Fullscreen Video + Normal */ @media (-moz-platform: windows) { #main-window[inFullscreen]:not([customizing]) #toolbox_new { visibility: collapse !important; } #main-window[inFullscreen]:not([customizing]) #browser { padding: 0 !important; } } /*-- customizing --*/ :root[customizing] #toolbox_new { top: unset !important; bottom: 0 !important; right: 0 !important; left: unset !important; } #newtoolbar[customizing] { height: var(--height_newbar_c) !important; } #customization-container { margin-right: var(--ug-newbar_width) !important; } /*- Farben Themes -*/ /* Eigene HG Farbe */ #newtoolbar.ntb_bg_color { background-color: ${new_tb_bg_color} !important; } :root[lwtheme] #newtoolbar:not(.ntb_bg_color) { background-color: var(--lwt-accent-color, var(--toolbar-bgcolor)) !important; } /*- Hintergundbilder Themes, geht nur für Themes mit grossen Bildern, optional -*/ :root[lwtheme][lwtheme-image] #newtoolbar:not(.ntb_bg_color) { background-image: var(--lwt-header-image) !important; background-color: var(--lwt-accent-color, var(--toolbar-bgcolor)) !important; background-position: right 0px top calc(0px - var(--height_newbar_top)) !important; } /*-- Testfarben --*/ /* #newtoolbar { border-block: 8px solid orange; } #newtoolbar > :is(.toolbarbutton-1, toolbaritem), #newtoolbar toolbarpaletteitem > :is(.toolbarbutton-1, toolbaritem) { outline: 1px solid red; outline-offset: -1px; } */ `; 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); })(); -
Das ist ja schon im Skript eingearbeitet (ab Zeile 49), kann dann notfalls verwendet werden. Das war wohl nicht richtig formuliert von mir, gemeint hatte ich die automatische Übernahme der Farbe aus den Themes. Es funktioniert oft, aber nicht bei allen, das ist das Problem.
Das ist eben das Thema das ich nicht so ganz beherrsche...
Zunächst mal ist da ein Fehler im Script, ersetz mal --toolbar-color mit --toolbar-bgcolor , in Zeilen 394 und 401.
Ich mach das auch gleich mal oben.
Das ändert bei mir aber auch nichts mit vielen Themes.Mehr als manuell ändern fällt mir dazu grade nicht ein, eben oben in Zeile ~ 49, oderwie von Andreas beschrieben direkt die --lwt-accent-color.ab Zeile 49
Das funktioniert auch nicht immer, hängt auch vom Theme ab:
Wer also immer diese Farbe nutzen will, der braucht dazu meinen obigen Code.
Korrekt!
-
Danke!
Hoffen wir mal daß grössere Bugs ausbleiben.
-
Eine Gedrängel ist das hier...
Getestet in v143.
Danke!
Es ist ein kleiner Speicherfehler in V6; korrigiert und mit neuem Feature: der Button schaltet jetzt die Leiste für alle Fenster ein und aus (Verhalten optional einstellbar).
JavaScript
Alles anzeigen// Zusaetzliche Toolbars wahlweise rechts, links, unten // Use filename starting with 00 !! => // 00_extra_toolbars_V7.uc.js // Basiert auf: https://www.camp-firefox.de/forum/thema/137714-seitennavigation-fly-out-menue // Aris: https://github.com/Aris-t2/CustomJSforFx/blob/master/scripts/addonbar_vertical.uc.js // Forum: https://www.camp-firefox.de/forum/thema/139927-eigene-zusatzleisten-ab-ff-143/ // 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 fuer Vorarbeit, Loesungen und Tips // ToDo: Themes Kompatibiltaet // Button schaltet alle Fenster // Nach Script Aenderungen Neustart mit Start-Cache loeschen => about:support // Version V7 / Release 2 (function() { if (location.href !== 'chrome://browser/content/browser.xhtml') return; // User Einstellungen // Eigenes Icon in Profilordner/chrome/icons Ordner let ProfilePath = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir)); let IconPath = '/chrome/icons/'; let Icon_tb = 'toolbar_n3.svg'; let ImagePath = ProfilePath + IconPath + Icon_tb; // 0 Firefox Icon , 1 eigenes Icon benutzen let new_tb_icon = 0; // Position Startzustand: 0 Rechts , 1 Links , 2 Bottom let new_tb_loc = 0; // 0 letzter Zustand Leiste On/Off beim Beenden merken , 1 nicht merken // 2x Neustart noetig, nur beim ersten Neuspeichern dieser Einstellung let new_tb_save = 0; // 0 Startzustand Leiste On , 1 Startzustand Off , falls nicht beim Beenden gespeichert let new_tb_off = 0; // 0 Button schaltet Leiste fuer alle Fenster , 1 nur aktives Fenster let new_tb_uno = 0; // Eigene Hintergrundfarbe: 0 Off , 1 On let new_tb_color = 0; // Hintergrundfarbe bei On let new_tb_bg_color = 'lightblue'; // Abstand zw. Buttons, muss px Wert sein, auch bei 0px let new_tb_distance = '2px'; // Breite / Hoehe Leiste erhoehen, muss positiver px Wert sein, auch bei 0px let new_tb_size = '0px'; // Trennlinie Breite, muss px Wert sein, 0px = off let new_tb_border_width = '1px'; // Trennlinie Farbe let new_tb_border_color = 'var(--chrome-content-separator-color)'; // User Einstellungen Ende if (Services.prefs.getBoolPref('svg.context-properties.content.enabled') == false) { Services.prefs.setBoolPref('svg.context-properties.content.enabled', true ); } const pref_newtoolbar_state = "userchrome.newtoolbar.enabled"; 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 observer_custom = new MutationObserver(function(mutations) { for (let mutation of mutations) { try { const customContainer = document.getElementById('customization-container'); if (!customContainer) return; const rect = customContainer.getBoundingClientRect(); document.getElementById('toolbox_new').style.setProperty('--height_newbar_c', rect.height + 'px'); } catch (e) { console.error("Fehler beim Setzen von --height_newbar_c:", e); } } }); observer_custom.observe(document.querySelector('#main-window'), { attributes: true, attributeFilter: ['customizing'], }); let navbar_size = document.getElementById("browser"); let observer = new ResizeObserver(() => { let rect = navbar_size.getBoundingClientRect(); document.getElementById('toolbox_new').style.setProperty('--height_newbar', rect.height + 'px'); document.getElementById('toolbox_new').style.setProperty('--height_newbar_top', rect.top + '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 Funktions if (new_tb_uno === 0) { document.getElementById('NewToolbar_button').addEventListener('click', tb_toggle ); } else if (new_tb_uno === 1) { document.getElementById('NewToolbar_button').addEventListener('click', tb_toggle_uno ); } function tb_toggle() { let windows = Services.wm.getEnumerator(null); while (windows.hasMoreElements()) { let win = windows.getNext(); if (event.button === 0) { const toolbar = win.document.getElementById("newtoolbar"); const browserArea = win.document.getElementById("browser"); const button = win.document.getElementById("NewToolbar_button"); toolbar.classList.toggle("off-mode"); browserArea.classList.toggle("off-mode_b"); button.classList.toggle("off-mode_btn"); const ntb_visible = !toolbar.classList.contains("off-mode"); Services.prefs.setBoolPref(pref_newtoolbar_state, ntb_visible); } } }; function tb_toggle_uno() { if (event.button === 0) { const toolbar = document.getElementById("newtoolbar"); const browserArea = document.getElementById("browser"); const button = document.getElementById("NewToolbar_button"); toolbar.classList.toggle("off-mode"); browserArea.classList.toggle("off-mode_b"); button.classList.toggle("off-mode_btn"); const ntb_visible = !toolbar.classList.contains("off-mode"); Services.prefs.setBoolPref(pref_newtoolbar_state, ntb_visible); } }; // Positions Startzustand if (new_tb_loc === 1) { toolbox_new.classList.add("left_mode"); browser.classList.add("left_mode_b"); NewToolbar_button.classList.add("left_mode_btn"); } else if (new_tb_loc === 2) { toolbox_new.classList.add("bottom_mode"); browser.classList.add("bottom_mode_b"); NewToolbar_button.classList.add("bottom_mode_btn"); } let toolbarEnabled = true; try { toolbarEnabled = Services.prefs.getBoolPref(pref_newtoolbar_state); } catch(e) { Services.prefs.setBoolPref(pref_newtoolbar_state, new_tb_off === 0); // Initialwert setzen toolbarEnabled = new_tb_off === 0; } if (!toolbarEnabled) { newtoolbar.classList.add("off-mode"); browser.classList.add("off-mode_b"); NewToolbar_button.classList.add("off-mode_btn"); } // #1 Beim Beenden von Firefox: Pref löschen, falls new_tb_save === 1 if (new_tb_save === 1) { Services.obs.addObserver(function observer(subject, topic, data) { if (topic === "quit-application-granted") { try { Services.prefs.clearUserPref(pref_newtoolbar_state); } catch (e) { } Services.obs.removeObserver(observer, "quit-application-granted"); } }, "quit-application-granted"); } // 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; } const css =` :root { /*--ug-newbar_basewidth: 32px;*/ --ug-newbar_basewidth: calc(2 * var(--toolbarbutton-inner-padding) + 16px); --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 */ } /*- Buttons kleiner -*/ #newtoolbar { /*--toolbarbutton-inner-padding: 6px !important;*/ --toolbarbutton-outer-padding: 0px !important; } /*- Trennlinie -*/ #newtoolbar { --trenn-color: ${new_tb_border_color}; } /*- Button -*/ #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}"); } #NewToolbar_button.off-mode_btn:not(:hover, :active) .toolbarbutton-icon { opacity: 0.45; } #NewToolbar_button.left_mode_btn .toolbarbutton-icon { transform: rotate(180deg); } #NewToolbar_button.bottom_mode_btn .toolbarbutton-icon { transform: rotate(90deg); } /*-- Basis / Right --*/ #browser { transition: padding 0.25s ease !important; } #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; top: var(--height_newbar_top); right: 0; } #newtoolbar { display: flex; flex-direction: column; min-width: var(--ug-newbar_basewidth) !important; width: var(--ug-newbar_width); min-height: var(--ug-newbar_basewidth) !important; height: 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; } #newtoolbar:not([customizing]).off-mode { min-width: 0px !important; 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; } /*-- 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 { top: unset; bottom: 0; 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; /*justify-content: center !important;*/ /* Inhalt mittig, optional */ } .bottom_mode #newtoolbar:not([customizing]).off-mode { min-height: 0px !important; 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 --*/ /* Mac / nur Video Fullscreen */ #main-window[inDOMFullscreen]:not([customizing]) #toolbox_new { visibility: collapse !important; } #main-window[inDOMFullscreen]:not([customizing]) #browser { padding: 0 !important; } /* Windows Fullscreen Video + Normal */ @media (-moz-platform: windows) { #main-window[inFullscreen]:not([customizing]) #toolbox_new { visibility: collapse !important; } #main-window[inFullscreen]:not([customizing]) #browser { padding: 0 !important; } } /*-- customizing --*/ :root[customizing] #toolbox_new { top: unset !important; bottom: 0 !important; right: 0 !important; left: unset !important; } #newtoolbar[customizing] { height: var(--height_newbar_c) !important; } #customization-container { margin-right: var(--ug-newbar_width) !important; } /*- Farben Themes -*/ :root[lwtheme]:not([customizing]) #newtoolbar { background-color: var(--lwt-accent-color, var(--toolbar-bgcolor)) !important; } /*- Hintergundbilder Themes, geht nur für Themes mit grossen Bildern, optional -*/ /* :root[lwtheme][lwtheme-image] #newtoolbar { background-image: var(--lwt-header-image) !important; background-color: var(--lwt-accent-color, var(--toolbar-bgcolor)) !important; background-position: right 0px top calc(0px - var(--height_newbar_top)) !important; } */ /*-- Testfarben --*/ /* #newtoolbar { border-block: 8px solid orange; } #newtoolbar > :is(.toolbarbutton-1, toolbaritem), #newtoolbar toolbarpaletteitem > :is(.toolbarbutton-1, toolbaritem) { outline: 1px solid red; outline-offset: -1px; } */ `; 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); })();Icon, optional: toolbar_n3.svg.zip
-
Damit das mal vom Tisch kommt:
ZitatDas Ganze sollte sich bei let new_tb_save = 0; etwa wie die Sidebar verhalten; bei Neustart wird der letzte Zustand gespeichert, und auch für neue Fenster während einer Session übernommen
JavaScript
Alles anzeigen// Use filename starting with 00 !! => // 00_extra_toolbars_V6.uc.js // Basiert auf: https://www.camp-firefox.de/forum/thema/137714-seitennavigation-fly-out-menue // Aris: https://github.com/Aris-t2/CustomJSforFx/blob/master/scripts/addonbar_vertical.uc.js // Forum: https://www.camp-firefox.de/forum/thema/139927-eigene-zusatzleisten-ab-ff-143/ // 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 fuer Vorarbeit, Loesungen und Tips // ToDo: Themes Kompatibiltaet // Nach Script Aenderungen Neustart mit Start-Cache loeschen => about:support // Version V6 / Release 1 (function() { if (location.href !== 'chrome://browser/content/browser.xhtml') return; // User Einstellungen // Eigenes Icon in Profilordner/chrome/icons Ordner let ProfilePath = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir)); let IconPath = '/chrome/icons/'; let Icon_tb = 'toolbar_n3.svg'; let ImagePath = ProfilePath + IconPath + Icon_tb; // 0 Firefox Icon , 1 eigenes Icon benutzen let new_tb_icon = 0; // Position Startzustand: 0 Rechts , 1 Links , 2 Bottom let new_tb_loc = 0; // 0 letzter Zustand Leiste On/Off beim Beenden speichern , 1 nicht speichern let new_tb_save = 0; // 0 Startzustand Leiste On , 1 Startzustand Off , falls nicht beim Beenden gespeichert let new_tb_off = 0; // Eigene Hintergrundfarbe: 0 Off , 1 On let new_tb_color = 1; // Hintergrundfarbe bei On let new_tb_bg_color = 'lightblue'; // Abstand zw. Buttons, muss px Wert sein, auch bei 0px let new_tb_distance = '2px'; // Breite / Hoehe Leiste erhoehen, muss px Wert sein, auch bei 0px let new_tb_size = '0px'; // Trennlinie Breite, muss px Wert sein, 0px = off let new_tb_border_width = '1px'; // Trennlinie Farbe let new_tb_border_color = 'grey'; // User Einstellungen Ende if (Services.prefs.getBoolPref('svg.context-properties.content.enabled') == false) { Services.prefs.setBoolPref('svg.context-properties.content.enabled', true ); } const pref_newtoolbar_state = "userchrome.newtoolbar.enabled"; if (new_tb_save === 1) { Services.prefs.setBoolPref(pref_newtoolbar_state, new_tb_off === 0); } 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 observer_custom = new MutationObserver(function(mutations) { for (let mutation of mutations) { try { const customContainer = document.getElementById('customization-container'); if (!customContainer) return; const rect = customContainer.getBoundingClientRect(); document.getElementById('toolbox_new').style.setProperty('--height_newbar_c', rect.height + 'px'); } catch (e) { console.error("Fehler beim Setzen von --height_newbar_c:", e); } } }); observer_custom.observe(document.querySelector('#main-window'), { attributes: true, attributeFilter: ['customizing'], }); let navbar_size = document.getElementById("browser"); let observer = new ResizeObserver(() => { let rect = navbar_size.getBoundingClientRect(); document.getElementById('toolbox_new').style.setProperty('--height_newbar', rect.height + 'px'); document.getElementById('toolbox_new').style.setProperty('--height_newbar_top', rect.top + '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) { } document.getElementById('NewToolbar_button').addEventListener('click', event => { if (event.button === 0) { const toolbar = document.getElementById("newtoolbar"); const browserArea = document.getElementById("browser"); const button = document.getElementById("NewToolbar_button"); toolbar.classList.toggle("off-mode"); browserArea.classList.toggle("off-mode_b"); button.classList.toggle("off-mode_btn"); const ntb_visible = !toolbar.classList.contains("off-mode"); Services.prefs.setBoolPref(pref_newtoolbar_state, ntb_visible); } }); // 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"); NewToolbar_button.classList.add("left_mode_btn"); } else if (new_tb_loc === 2) { toolbox_new.classList.add("bottom_mode"); browser.classList.add("bottom_mode_b"); NewToolbar_button.classList.add("bottom_mode_btn"); } let toolbarEnabled = true; try { toolbarEnabled = Services.prefs.getBoolPref(pref_newtoolbar_state); } catch(e) { Services.prefs.setBoolPref(pref_newtoolbar_state, new_tb_off === 0); // Initialwert setzen toolbarEnabled = new_tb_off === 0; } if (!toolbarEnabled) { newtoolbar.classList.add("off-mode"); browser.classList.add("off-mode_b"); NewToolbar_button.classList.add("off-mode_btn"); } if (new_tb_save === 1) { window.addEventListener("unload", () => { try { Services.prefs.clearUserPref(pref_newtoolbar_state); } catch (e) { } }, { once: true }); } const css =` :root { /*--ug-newbar_basewidth: 32px;*/ --ug-newbar_basewidth: calc(2 * var(--toolbarbutton-inner-padding) + 16px); --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 */ } /*- Buttons kleiner -*/ #newtoolbar { /*--toolbarbutton-inner-padding: 6px !important;*/ --toolbarbutton-outer-padding: 0px !important; } /*- Trennlinie -*/ #newtoolbar { --trenn-color: ${new_tb_border_color}; } /*- Button -*/ #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}"); } #NewToolbar_button.off-mode_btn:not(:hover, :active) .toolbarbutton-icon { opacity: 0.45; } #NewToolbar_button.left_mode_btn .toolbarbutton-icon { transform: rotate(180deg); } #NewToolbar_button.bottom_mode_btn .toolbarbutton-icon { transform: rotate(90deg); } /*-- Basis / Right --*/ #browser { transition: padding 0.25s ease !important; } #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; top: var(--height_newbar_top); right: 0; } #newtoolbar { display: flex; flex-direction: column; min-width: var(--ug-newbar_basewidth) !important; width: var(--ug-newbar_width); min-height: var(--ug-newbar_basewidth) !important; height: 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; } #newtoolbar:not([customizing]).off-mode { min-width: 0px !important; 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; } /*-- 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 { top: unset; bottom: 0; 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; /*justify-content: center !important;*/ /* Inhalt mittig, optional */ } .bottom_mode #newtoolbar:not([customizing]).off-mode { min-height: 0px !important; 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 unfinished? --*/ /* Mac / nur Video Fullscreen */ #main-window[inDOMFullscreen]:not([customizing]) #toolbox_new { visibility: collapse !important; } #main-window[inDOMFullscreen]:not([customizing]) #browser { padding: 0 !important; } /* Windows Fullscreen Video + Normal */ @media (-moz-platform: windows) { #main-window[inFullscreen]:not([customizing]) #toolbox_new { visibility: collapse !important; } #main-window[inFullscreen]:not([customizing]) #browser { padding: 0 !important; } } /*-- customizing --*/ :root[customizing] #toolbox_new { top: unset !important; bottom: 0 !important; right: 0 !important; left: unset !important; } #newtoolbar[customizing] { height: var(--height_newbar_c) !important; } #customization-container { margin-right: var(--ug-newbar_width) !important; } /*- Farben Themes -*/ :root[lwtheme]:not([customizing]) #newtoolbar { background-color: var(--lwt-accent-color, var(--toolbar-color)) !important; } /*- Hintergundbilder Themes, geht nur für Themes mit grossen Bildern, optional -*/ /* :root[lwtheme][lwtheme-image] #newtoolbar { background-image: var(--lwt-header-image) !important; background-color: var(--lwt-accent-color, var(--toolbar-color)) !important; background-position: right 0px top calc(0px - var(--height_newbar_top)) !important; } */ /*-- Testfarben --*/ /* #newtoolbar { border-block: 8px solid orange; } #newtoolbar > :is(.toolbarbutton-1, toolbaritem), #newtoolbar toolbarpaletteitem > :is(.toolbarbutton-1, toolbaritem) { outline: 1px solid red; outline-offset: -1px; } */ `; 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); })();Icon, optional: toolbar_n3.svg.zip
-
Und bevor ich mir einen Artikel komplett durchlesen muss, fände ich eine Zusammenfassung von KI gar nicht mal so unattraktiv.
Sofern die KI in der Lage ist eine korrekte Zusammenfassung erzeugen zu können, spricht nichts dagegen.
Doch erst heute habe ich in einem Forum erneut gesehen, dass dem oftmals nicht so ist. Das schlimme daran ist, dass man dies erst erkennt, wenn man den ursprünglichen Artikel durchliest.
Das ist ein gutes Argument, aber nicht zwingend AI spezifisch.
Anständige Recherche hat schon immer Bemühen verlangt, auch wenn das Internet, und Algorithmen - AI ist ja auch nur Twitter plus eigenes Kraftwerk - Recherche subjektiv vereinfacht bzw. beschleunigt haben.
Das Werkzeug macht aber nicht das Werk, sondern wer sich das Zeug dazu angeeignet hat.
Möge die Macht mit dir sein, viel zu lernen du noch hast.
Bitte keine yoda Sprüche...
-
In der Leiste von Aris konnte man ein background image anstelle einer background color festlegen
Siehe #57, mit vielen Themes passt es nicht sauber.
-
Themes Kompatibiltaet könnte sich mal jemand anschauen der sich auskennt mit sowas, betr. der HGfarbe.
In einem anderen Toolbarskript habe ich dies verwendet:
Definitiv sind da die Selektoren zu bearbeiten!
(Wenn ich jenes Skript verwende, wird der Toolbarhintergrund dynamisch dem Theme angepasst)Danke, ich kenne den Thread und die Codes, aber nach dem Testen von ein paar Dutzend Themes passen nur die wenigsten sauber, und müssten individuell angepasst werde, soweit ich das überblicke.
Viele Themes scheinen nur für den (alten) Basis Fx Toolbar Setup gebaut zu sein, ohne vertikale, untere oder überhaupt Zusatz-Elemente zu berücksichtigen, und haben oft eigene Plazierungen für HG-Bilder.
Wo's klappt ist es hübsch (Screens aus 115esr)
, aber den Code den ich habe kann man nicht für alle benutzen. 
Kenn mich aber auch nicht aus, wie gesagt.
V5. Separators werden sehr kurz angezeigt, 5-7px, und ich konnte dies nicht ändern. Vorrang hat derzeit V4.
Übrigens, die Methode zum Hinzufügen von Separators und Spaces aus Beitrag Nr. 13 funktioniert in Firefox v144.0rc1. Dabei ist kein Aris-Skript oder ein anderes Skript erforderlich.Offengestanden werde ich den Code dazu später rausnehmen, das ist wohl besser in der gelinkten Thread aufgehoben.
Hier wäre noch ein Test für diese Leisten: sepa no border.rtf.zip -
Mit diesem Code hat es in der Toolbar und im Einstellungsfenster geklappt.
CSS#newtoolbar toolbarseparator { outline: 1px solid yellow !important; outline-offset: -3px !important; padding-left: 34px !important; }Die Border war wohl das Problem...
Ich hab das mal in dieser Version geändert, sollte aber besser gehen, und ist vermutlich trotzdem ein separates Thema, wenn's in anderen vertikalen auch nicht klappt.A propos diese Version, hier ein paar Detaillösungen, und ein etwas gewagter Versuch die On/Off Zustände zu speichern.
Das Ganze sollte sich bei let new_tb_off = 2; etwa wie die Sidebar verhalten; bei Neustart wird der letzte Zustand gespeichert, und auch für neue Fenster während einer Session übernommen (sollte aber auch viel besser gehen, hab mich da etwas verkünstelt).Themes Kompatibiltaet könnte sich mal jemand anschauen der sich auskennt mit sowas, betr. der HGfarbe.
Und ein Icon gibt's auch noch!JavaScript
Alles anzeigen// Use filename starting with 00 !! => // 00_extra_toolbars_V5.uc.js // Basiert auf: https://www.camp-firefox.de/forum/thema/137714-seitennavigation-fly-out-menue // Aris: https://github.com/Aris-t2/CustomJSforFx/blob/master/scripts/addonbar_vertical.uc.js // Forum: https://www.camp-firefox.de/forum/thema/139927-eigene-zusatzleisten-ab-ff-143/ // 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 fuer Vorarbeit, Loesungen und Tips // ToDo: Themes Kompatibiltaet // Nach Script Aenderungen Neustart mit Start-Cache loeschen => about:support // Version V5 / Test 5 (function() { if (location.href !== 'chrome://browser/content/browser.xhtml') return; // User Einstellungen // Eigenes Icon in Profilordner/chrome/icons Ordner let ProfilePath = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir)); let IconPath = '/chrome/icons/'; let Icon_tb = 'toolbar_n3.svg'; let ImagePath = ProfilePath + IconPath + Icon_tb; // 0 Firefox Icon, 1 eigenes Icon benutzen let new_tb_icon = 0; // Position Startzustand: 0 Rechts , 1 Links , 2 Bottom let new_tb_loc = 0; // 0 Startzustand Leiste On , 1 Startzustand Off, 2 Startzustand letzter Zustand gespeichert experimentell let new_tb_off = 2; // Eigene Hintergrundfarbe: 0 Off , 1 On let new_tb_color = 1; // Hintergrundfarbe bei On let new_tb_bg_color = 'lightblue'; // Abstand zw. Buttons, muss px Wert sein, auch bei 0px let new_tb_distance = '2px'; // Breite / Hoehe Leiste erhoehen, muss px Wert sein, auch bei 0px let new_tb_size = '0px'; // Trennlinien Breite, muss px Wert sein, 0px = off let new_tb_border_width = '1px'; // Trennlinien Farbe let new_tb_border_color = 'grey'; // User Einstellungen 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 observer_custom = new MutationObserver(function(mutations) { for (let mutation of mutations) { try { const customContainer = document.getElementById('customization-container'); if (!customContainer) return; const rect = customContainer.getBoundingClientRect(); document.getElementById('toolbox_new').style.setProperty('--height_newbar_c', rect.height + 'px'); } catch (e) { console.error("Fehler beim Setzen von --height_newbar_c:", e); } } }); observer_custom.observe(document.querySelector('#main-window'), { attributes: true, attributeFilter: ['customizing'], }); let navbar_size = document.getElementById("browser"); let observer = new ResizeObserver(() => { let rect = navbar_size.getBoundingClientRect(); document.getElementById('toolbox_new').style.setProperty('--height_newbar', rect.height + 'px'); document.getElementById('toolbox_new').style.setProperty('--height_newbar_top', rect.top + '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"); NewToolbar_button.classList.toggle("off-mode_btn"); let ntb_off = newtoolbar.classList.contains("off-mode"); Services.prefs.setBoolPref("userChrome.newtoolbar.hidden", ntb_off); } }); // 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"); NewToolbar_button.classList.add("left_mode_btn"); } else if (new_tb_loc === 2) { toolbox_new.classList.add("bottom_mode"); browser.classList.add("bottom_mode_b"); NewToolbar_button.classList.add("bottom_mode_btn"); }; // On/off Startzustand if (new_tb_off === 0) { Services.prefs.setBoolPref('userChrome.newtoolbar.hidden', false ); } else if (new_tb_off === 1) { newtoolbar.classList.add("off-mode"); browser.classList.add("off-mode_b"); NewToolbar_button.classList.add("off-mode_btn"); Services.prefs.setBoolPref('userChrome.newtoolbar.hidden', true ); } else if (new_tb_off === 2) { try { if (Services.prefs.getBoolPref("userChrome.newtoolbar.hidden")) { newtoolbar.classList.add("off-mode"); browser.classList.add("off-mode_b"); NewToolbar_button.classList.add("off-mode_btn"); } } catch (e) {} }; const css =` :root { /*--ug-newbar_basewidth: 32px;*/ --ug-newbar_basewidth: calc(2 * var(--toolbarbutton-inner-padding) + 16px); --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 */ } /*- Buttons kleiner -*/ #newtoolbar { /*--toolbarbutton-inner-padding: 6px !important;*/ --toolbarbutton-outer-padding: 0px !important; } /*- Trennlinie -*/ #newtoolbar { --trenn-color: ${new_tb_border_color}; } /*- Button -*/ #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}"); } #NewToolbar_button.off-mode_btn:not(:hover, :active) .toolbarbutton-icon { opacity: 0.45; } #NewToolbar_button.left_mode_btn .toolbarbutton-icon { transform: rotate(180deg); } #NewToolbar_button.bottom_mode_btn .toolbarbutton-icon { transform: rotate(90deg); } /*-- Basis / Right --*/ /*- Farben Themes, unfinished -*/ :root[lwtheme]:not([customizing]) #newtoolbar { background-color: var(--lwt-accent-color, var(--toolbox-bgcolor)) !important; } #browser { transition: padding 0.25s ease !important; } #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; top: var(--height_newbar_top); right: 0; } #newtoolbar { display: flex; flex-direction: column; min-width: var(--ug-newbar_basewidth) !important; width: var(--ug-newbar_width); min-height: var(--ug-newbar_basewidth) !important; height: 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; } #newtoolbar:not([customizing]).off-mode { min-width: 0px !important; 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; } /*-- 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 { top: unset; bottom: 0; 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; /*justify-content: center !important;*/ /* Inhalt mittig, optional */ } .bottom_mode #newtoolbar:not([customizing]).off-mode { min-height: 0px !important; 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 unfinished? --*/ /* Mac / nur Video Fullscreen */ #main-window[inDOMFullscreen]:not([customizing]) #toolbox_new { visibility: collapse !important; } #main-window[inDOMFullscreen]:not([customizing]) #browser { padding: 0 !important; } /* Windows Fullscreen Video + Normal */ @media (-moz-platform: windows) { #main-window[inFullscreen]:not([customizing]) #toolbox_new { visibility: collapse !important; } #main-window[inFullscreen]:not([customizing]) #browser { padding: 0 !important; } } /*-- customizing --*/ :root[customizing] #toolbox_new { top: unset !important; bottom: 0 !important; right: 0 !important; left: unset !important; } #newtoolbar[customizing] { height: var(--height_newbar_c) !important; } #customization-container { margin-right: var(--ug-newbar_width) !important; } /*- Extra Test: Anpassung fuer Restore 'Space & Separator' items script for Firefox 102+ by Aris -*/ #newtoolbar { --ug-sep_distance: 8px; /* Distanz */ --ug-sep_width: 4px; /* schmaler */ } #newtoolbar toolbarseparator { margin-block: var(--ug-sep_distance) !important; margin-inline: 0px !important; width: calc(var(--ug-newbar_width) - var(--ug-sep_width)) !important; height: 1px !important; appearance: none !important; border-inline: none !important; border-top: 1px solid rgba(15,17,38, 0.5) !important; border-bottom: 1px solid rgba(255,255,255, 0.3) !important; } .bottom_mode #newtoolbar:not([customizing]) toolbarseparator { margin-block: 0px !important; margin-inline: var(--ug-sep_distance) !important; width: initial !important; height: calc(var(--ug-newbar_width) - var(--ug-sep_width)) !important; border-block: none !important; border-left: 1px solid rgba(15,17,38, 0.5) !important; border-right: 1px solid rgba(255,255,255, 0.3) !important; } #newtoolbar toolbarspacer { min-width: 0px !important; width: 18px !important; height: 18px !important; } #newtoolbar[customizing] :is(toolbarseparator, toolbarspacer) { margin-block: 8px !important; } /*-- Testfarben --*/ /* #newtoolbar { border-block: 8px solid orange; } #newtoolbar > :is(.toolbarbutton-1, toolbaritem), #newtoolbar toolbarpaletteitem > :is(.toolbarbutton-1, toolbaritem) { outline: 1px solid red; outline-offset: -1px; } */ `; 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); })(); -
Du definierst im JS Variablen! Und warum wandelst Du sie dann im CSS um?
Und an so einigen Stellen im JS habe ich mich auch gefragt, warum?
Ich vermute, Du kommst mit CSS besser klar.Gefühlt hatten allein wir beide diese Diskussion schon 100x.
Die paar JS Variablen sind in dem Script einfacher zu setzen gewesen (ohne zB endlos Klassen zu adden), und teils nur da um die User Anpassungen nach oben zu packen, für einfachere Bedienbarkeit.
JS Variablen dann in CSS Variablen zu packen macht für mich die Bearbeitung und das Troubleshooting einfacher, auch weil ${...} Variablen direkt im CSS seeeehr hartnäckig sein können.
Das mit der Weiche schau ich mir aber nochmal an; ist mir schon aufgefallen, hat mir aber bisher nicht zugesagt.Und ja, ich komme mit CSS sehr viel besser klar als mit JS.
-
In der vertikalen Toolbar wird der Separator jedoch nicht angezeigt. Ähnliches Verhalten bei anderen Separator-Skripten: In horizontalen Toolbar sind die Separator sichtbar, in vertikalen Toolbar hingegen nicht.
Ahh, das ist gut zu wissen - und wäre ein Thema für eine eigene Thread.
Aber du könntest das mal probieren, CSS irgendwo reinschreiben (geht auch im Script CSS Teil), und im Anpassenfenster einen Separator in meine vertikale Leiste ziehen:
CSS#newtoolbar toolbarseparator { outline: 1px solid red !important; outline-offset: 12px !important; }Und schauen was passiert.
Ausserdem, grob geraten: in den Separatorscripts evtl. probieren toolbar[orient="vertical"] mit toolbar[vertical] zu ersetzen, oder als Test für vertikale Toolbars kurz nur toolbar an diesen Stellen zu benutzen.
-
Mal reingegrätscht: Hier wird derzeit nur eine vertikale Zusatzleiste besprochen, die ich nicht nutzen möchte; Ich präferiere in Nightly und 143.0.4 eine horizontale Zusatzleiste UNTEN.
Wenn jemand daran interessiert ist, bitte mal melden, dann würde ich den verwendeten Code einstellen.
Gibt doch bestimmt schon Beiträge dazu, evtl. einfach dazu verlinken?
Ich erinnere mich vage, dass wir deine Leiste schon ab und zu diskutiert hatten.
Nur um Codeblähung zu vermeiden.
Wie erwähnt, hier gibt es auch eine "Bottom" Variante, kannst ja mal testen wenn du möchtest, ist nicht kompliziert.Gemacht, keine Probleme mehr erkannt, Leiste wird bei Vollbild ausgeblendet.
Für lenny2 einen Zusatz für das Aris Script , wenn es das denn ist.
In V4 werden jetzt Space aus diesem oder einem ähnlichen Skript angezeigt, Separator jedoch nicht.
Insgesamt gibt es keine Probleme mit dem V4 und es funktioniert ordnungsgemäßNicht mehr relevant, dieser Grafikfehler ist in V4 nicht mehr vorhanden.
Danke mal wieder!
Kurz zu den Separatoren etc., es gibt verschiedene Scripts dazu, meist älter, und die müssten erst mal in aktuellem Firefox durchgetestet werden ob sie generell noch klappen.
Im Zusammenhang mit diesen Leisten wäre der Testaufwand multipliziert, weiter komm ich da leider nicht.Mira_Belle : Die Dinger sind als generell feste Leisten mit Versteckenoption pro Fenster konzipiert; Wegscrollen nach einiger Zeit oder Hovertricks sind leider nicht vorgesehen.
Ich habe einen Button als Test der die Position umschaltet, was man speichern könnte, ist aber auch eher ein Gimmick in diesem Fall.
-
Erstmal danke an alle Tester!
Hier eine neue Testversion:
Für lenny2 einen Zusatz für das Aris Script , wenn es das denn ist.
Auf alle Wünsche kann ich nicht direkt eingehen, ist aber alles notiert.
Für die Vollbildgeschichte habe ich mal etwas reingebastelt, das evtl. als Basis funktioniert für Windows.Fullscreen ist aber sehr OS abhängig, und ich bin am Mac.
Falls das so nicht funktioniert, müsste sich das ein geneigter Windows und evtl. Linux Coder der Sache annehmen.
Eine Menge JS und CSS Codes benutzen Provisorien für genau das, nur kann ich die halt nicht testen.JavaScript
Alles anzeigen// Use filename starting with 00 !! => // 00_extra_toolbars_V4.uc.js // Extra newtoolbars 8 => 10 / Toggle button on/off / Custom/browser height used / 143 kompatibel // Fullscreen Testphase // Basiert auf: https://www.camp-firefox.de/forum/thema/137714-seitennavigation-fly-out-menue // Aris: https://github.com/Aris-t2/CustomJSforFx/blob/master/scripts/addonbar_vertical.uc.js // 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 // Nach Script Aenderungen Neustart mit Start-Cache loeschen => about:support // Test 4 (function() { if (location.href !== 'chrome://browser/content/browser.xhtml') return; // User Einstellungen // Eigenes Icon in Profilordner/chrome/icons let ProfilePath = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir)); let IconPath = '/chrome/icons/'; let Icon_tb = 'flower-satt32.png'; let ImagePath = ProfilePath + IconPath + Icon_tb; let new_tb_icon = 0; // 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 = off //let new_tb_button_size = '0px'; // Button Groesse, normal 'inherit', kleiner '0px' // User Einstellungen 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 observer_custom = new MutationObserver(function(mutations) { for (let mutation of mutations) { try { const customContainer = document.getElementById('customization-container'); if (!customContainer) return; const rect = customContainer.getBoundingClientRect(); document.getElementById('toolbox_new').style.setProperty('--height_newbar_c', rect.height + 'px'); } catch (e) { console.error("Fehler beim Setzen von --height_newbar_c:", e); } } }); observer_custom.observe(document.querySelector('#main-window'), { attributes: true, attributeFilter: ['customizing'], }); let navbar_size = document.getElementById("browser"); let observer = new ResizeObserver(() => { let rect = navbar_size.getBoundingClientRect(); document.getElementById('toolbox_new').style.setProperty('--height_newbar', rect.height + 'px'); document.getElementById('toolbox_new').style.setProperty('--height_newbar_top', rect.top + '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: 30px; --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 */ } /* Buttons kleiner */ #newtoolbar { /*--toolbarbutton-inner-padding: 6px !important;*/ --toolbarbutton-outer-padding: 0px !important; } /* Anpassung fuer Restore 'Space & Separator' items script for Firefox 102+ by Aris */ #newtoolbar { --ug-sep_distance: 2px; /* Distanz */ --ug-sep_width: 4px; /* schmaler */ } #newtoolbar toolbarseparator { margin-block: var(--ug-sep_distance) !important; margin-inline: 0px !important; width: calc(var(--ug-newbar_width) - var(--ug-sep_width)) !important; } .bottom_mode #newtoolbar:not([customizing]) toolbarseparator { margin-block: 0px !important; margin-inline: var(--ug-sep_distance) !important; width: initial !important; height: calc(var(--ug-newbar_width) - var(--ug-sep_width)) !important; } #newtoolbar toolbarspacer { min-width: 0px !important; width: 18px !important; height: 18px !important; } #newtoolbar[customizing] :is(toolbarseparator, toolbarspacer) { margin-block: 8px !important; } /* 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; } #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; top: var(--height_newbar_top); right: 0; } #newtoolbar { display: flex; flex-direction: column; min-width: fit-content !important; width: var(--ug-newbar_width); min-height: fit-content !important; height: 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; } #newtoolbar:not([customizing]).off-mode { min-width: 0px !important; 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; } /*-- 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 { top: unset; bottom: 0; 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 { min-height: 0px !important; 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 */ #main-window[inDOMFullscreen]:not([customizing]) #toolbox_new { visibility: collapse !important; } #main-window[inDOMFullscreen]:not([customizing]) #browser { padding: 0 !important; } /* Windows Test */ @media (-moz-platform: windows) { #main-window[inFullscreen]:not([customizing]) #toolbox_new { visibility: collapse !important; } #main-window[inFullscreen]:not([customizing]) #browser { padding: 0 !important; } } /*-- customizing --*/ :root[customizing] #toolbox_new { bottom: 0 !important; top: unset !important; right: 0 !important; left: unset !important; } #newtoolbar[customizing] { height: var(--height_newbar_c) !important; } #customization-container { margin-right: var(--ug-newbar_width) !important; } /*-- Testfarben --*/ /* #newtoolbar { border-block: 8px solid orange; } #newtoolbar > :is(.toolbarbutton-1, toolbaritem), #newtoolbar toolbarpaletteitem > :is(.toolbarbutton-1, toolbaritem) { outline: 1px solid red; outline-offset: -1px; } */ `; 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); })();Mit dem ersten CSS wechselt die Toolbar in den Bottom Mode und wird nicht ausgeblendet. Mit dem zweiten CSS verhält es sich wie ohne dieses CSS.
Nur zur Info:
v140.3.1esr nur unter Windows 11, Toolbar links positioniert. Die Toolbar wird nicht vollständig ausgeblendet; ein 4–6 Pixel breiter Streifen bleibt sichtbar.Danke; FuchsFan hatte auf den Fehler im Code hingewiesen, korrigiert.
Der Screenshot ist sehr stark angeschnitten, kann ich leider nicht nachvollziehen.
Evtl. mal den gerade geposteten Code testen.
