Beiträge von Horstmann

Horstmann

Zitat von Sören Hentzschel

Tja, auch darauf muss man erst einmal kommen, dass mitten in einem deutschen Satz völlig wahllos ein englischer und definitiv nicht alltäglicher Begriff eingebaut wird, der dann auch noch aus der englischen Umgangssprache kommt, die ich ja schon im Deutschen versuche, weitestgehend zu vermeiden. Auf die Idee wäre ich überhaupt nicht gekommen. Aber das ist gut, denn das unterstreicht genau meinen Punkt.

Dein Punkt gehört und zur Kenntnis genommen.

OP und lingo muss man nicht kennen, es sind aber sehr geläufige Begriffe für jemanden, der sich ab und an aus dem deutschsprachigen online Umfeld herausbewegt - was du doch eigentlich auch tust?

Zu Sprachreinheit brauche ich übrigens keine Ratschläge, aber ich weiss es ist eine Obsession von dir - schön dass sich junge Leute noch die Mühe machen, auch wenn es entschieden off-topic (ausserhalb des Themas) ist.

Meine online Aktivitäten bewegen sich zu 90% im englischen Sprachraum, daher die Überschneidungen; wer Fragen hat kann fragen, wie der OP.

Vielleicht können wir dann zum Thema zurückkehren; welches Tabs CSS Code betrifft, der permanent falsch benutzt wird - bestimmt auch von mir - und sehr häufig zu Fragen führt.

Horstmann

Zitat von Sören Hentzschel

Am besten bleibt man einfach bei deutschen Begriffen ohne Abkürzung, die versteht jeder.

Mit deshalb ist die Forensuche intern und extern oft problematisch, weil jeder seine eigenen Übersetzungen von jedem UI (Benutzeroberfläche ) Teil kreiert.
Ich bleibe bei meiner Lingo, vor allem wenn es weniger Buchstaben braucht (Button => Schaltfläche ??).

Dato , hier mal eine Art von CSS das ich für den Zweck benutze, es gibt da viele mögliche Varianten, ist auch abhängig von mehreren Variablen.

CSS

.tabbrowser-tab[multiselected] .tab-background {
    background-color: orange !important;
    outline-color: lightgreen !important;
    background-image: none !important;
}

.tabbrowser-tab[multiselected]:not([selected]):hover .tab-background {
    background-color: darkorange !important;
    outline-color: green !important;
}

.tabbrowser-tab[multiselected]:not([selected], :hover) .tab-content {
    color: red !important;
}

Alles anzeigen

Horstmann

Zitat von Dato

was ist ein OP ?

Ein Operationssaal.
Oder ein Original Poster, der ursprüngliche Beitragsersteller - also du.

Horstmann

Zitat von 2002Andreas

Teste bitte:

CSS

.tab-content[multiselected] {
    background: red !important;
    color: white !important;
    border: 4px solid blue !important;
  }

Der Tabhintergrund ist generell tab-background, der Code oben setzt HG und Umrandung an die falsche Stelle und verfälscht das Tabdesign .
Die Umrandung ist ausserdem eine existierende outline, die man anpassen könnte, statt eine border drauf zu zwingen.
Hier dann evtl. für die Text-Farbe.
multiselected und selected könnte man sich dann auch noch im Zusammenhang zueinander anschauen, u.a..

Wenn der OP das nicht bemerkt, ist es ja ok, nur zur Info.
Getestet von Garten Eden bis FX144.

Horstmann

Zitat von lenny2

Ich mache mir Sorgen um aufgeblähten Code, deshalb verwende ich weiterhin V7R2

Prima dass es zu klappen scheint!
Der extra Code in späteren Versionen ist vorwiegend optional, sollte also kaum oder keinen Einfluss auf Performance haben, und wird für Funktionen ignoriert falls nicht aktiviert.

Horstmann

Version 10/ Fix:

Bitte den Header und die Kommentare in der User Einstellungen Sektion vor Änderungen lesen; zwei mögliche Lösungen für störrische Themes können optional benutzt werden, und für Lenny hätten wir noch eine Space & Separator Script Lösung #102 (gefühlt).
Dieses Script wurde auch gerade erneuert.

Einige weitere Optionen sind hinzugefügt, speziell für Abmessungen; eine Autovariante hätte ich auch dafür, aber so schwer ist es nicht das manuell zu regeln.
Sowas könnte Sinn machen noch mit rein zu packen, aber dazu braucht es Feedback.

JavaScript

// Zusaetzliche Toolbars wahlweise rechts, links, unten

// Use filename starting with 00 for custom button functions !! =>
// 00_extra_toolbars_V10.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
// Forumthema: https://www.camp-firefox.de/forum/thema/139927-eigene-zusatzleisten-ab-ff-143/
// Kudos an Aris und Mitleser fuer Vorarbeit, Loesungen und Tips

// 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/

// Version V10 / Release 5

(function() {
    if (location.href !== 'chrome://browser/content/browser.xhtml')
        return;

// User Einstellungen
// Nach Script Aenderungen Neustart mit Start-Cache loeschen => about:support
// Moegliche Problemloesungen (s. unten) muessen wo noetig manuell an/ausgeschaltet werden

        // 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, bei new_tb_save = 1
        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';

        // Trennlinie Breite, 0px = off
        let new_tb_border_width = '1px';
        // Trennlinie Farbe
        //let new_tb_border_color = 'grey';
        let new_tb_border_color = 'color-mix(in srgb, currentColor 30%, transparent)';

// Groessen von Leiste und Buttons aendern, muss px Wert sein, auch bei 0px, manuell

        // Groesse Buttons via padding aendern, 8px Standard; Abstand, Leistengroesse wird mit geaendert
        let new_tb_btn_size = '6px';

        // Abstand zwischen Buttons, 2px Standard
        let new_tb_distance = '5px';

        // Breite vertikale Leiste / Hoehe horizontale Leiste um diesen Wert erhoehen, bei 0px => Leistengroesse = Buttongroesse
        let new_tb_size = '1px';

// Moegliche Problemloesungen, nur falls noetig, experimentell

        // Fix #1 fuer Themes mit zu niedrigen/ gekachelten Hintergrund Bildern, true / false, besser nur eines benutzen
        let theme_fix = false;
        // Fix #2, ueberschreibt Fix #1
        let theme_fix_2 = false;

        // Anpassung fuer Restore 'Space & Separator' items script for Firefox 102+ by Aris, true / false
        // https://github.com/Aris-t2/CustomJSforFx/blob/master/scripts/space_and_separator_restorer.uc.js
        // Tip: Separator, Space etc. im Anpassenfenster nur mit Rechtsklick aus Leiste entfernen
        let separator_fix = true;

// 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');
        toolbox_new.setAttribute('orient','horizontal');

        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');
        ntb.setAttribute('toolbarname', 'Addon Bars');
	      ntb.setAttribute('label', 'Addon Bars');
        ntb.setAttribute('orient', 'vertical');
        ntb.setAttribute("accesskey","");

	      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) { }
          }
        });
        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 Funktion
    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);
           }
    };

    // Position 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: Prefs loeschen, 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.classList.add("ntb_bg_color");
       }

const css =`

:root {
    --ug-newbar_basewidth: calc(2 * var(--ug-newbar-button_inner_padding) + 16px);
    --ug-newbar_width: calc(var(--ug-newbar_basewidth) + var(--ug-newbar_borderwidth) + 2 * var(--ug-newbar_add_width));

    --ug-newbar-button_inner_padding: ${new_tb_btn_size};         /* Groesse Buttons */
    --ug-newbar_add_width: `+new_tb_size+`;                       /* Breite / Hoehe erhoehen */
    --ug-newbar_btnspace: ${new_tb_distance};                     /* Abstand zw. Buttons */
    --ug-newbar_borderwidth: ${new_tb_border_width};              /* Breite / Hoehe Trennlinie */
}

/*- Buttons Groesse -*/
#newtoolbar {
    --toolbarbutton-inner-padding: var(--ug-newbar-button_inner_padding) !important;
	 	--toolbarbutton-outer-padding: 0px !important;
}

/*-  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.4;
}
#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: var(--ug-newbar_width) !important;
}

#toolbox_new {
    position: fixed;
    z-index: 4 !important;
    display: flex;
    width: fit-content;
    top: var(--height_newbar_top);
    right: 0;
}
#newtoolbar {
    display: flex;
    min-width: var(--ug-newbar_basewidth) !important;
    width: var(--ug-newbar_width);
    min-height: var(--ug-newbar_basewidth) !important;
    height: var(--height_newbar) !important;
    align-items: center !important;
    padding-block: 8px;
    border: 0 solid ${new_tb_border_color};
    border-inline-width: var(--ug-newbar_borderwidth) 0;
    transition: margin 0.25s ease;
    box-shadow: none !important;
}
#newtoolbar:not([customizing]).off-mode {
    min-width: 0px !important;
    margin-inline: 0 calc(0px - var(--ug-newbar_width));
}

#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: var(--ug-newbar_width) 0 !important;
}
#toolbox_new.left_mode {
    left: 0;
}
.left_mode #newtoolbar:not([customizing]) {
    border-left: none;
    border-inline-width: 0 var(--ug-newbar_borderwidth);
}
.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 {
    top: unset;
    bottom: 0;
}
.bottom_mode #newtoolbar:not([customizing]) {
    flex-direction: row !important;
    height: var(--ug-newbar_width) !important;
    width: 100vw;
    padding-block: 0;
    padding-inline: 8px;
    border-inline-width: 0;
    border-top-width: var(--ug-newbar_borderwidth);
    /*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 falls eingeschaltet */
#newtoolbar.ntb_bg_color {
    background-color: ${new_tb_bg_color} !important;
}

/*- Farben Themes, falls Hintergrundbilder gekachelt, oben theme_fix versuchen -*/

:root[lwtheme] #newtoolbar:not(.ntb_bg_color) {
    background-color: var(--lwt-accent-color, var(--toolbar-bgcolor)) !important;
}
:root[lwtheme][lwtheme-image] #newtoolbar:not(.ntb_bg_color) {
    background-image: var(--lwt-header-image) !important;
    background-position: right 0px top 0px !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;
}
*/

`;

let theme_fix_code = '';
if (theme_fix) {
  theme_fix_code = `
/*-  Fix #1 Hintergrundbilder fuer Themes mit gekachelten Bildern, falls eingeschaltet -*/
:root[lwtheme][lwtheme-image] #newtoolbar:not(.ntb_bg_color) {
    background: var(--lwt-header-image) !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: right 0px top 0px !important;
}
:root[lwtheme][lwtheme-image] #toolbox_new.bottom_mode #newtoolbar:not(.ntb_bg_color) {
    background-size: auto !important;
}
 `;
}

let theme_fix_code_2 = '';
if (theme_fix_2) {
  theme_fix_code_2 = `
/*-  Fix #2 Hintergrundbilder fuer Themes mit gekachelten Bildern, falls eingeschaltet -*/
:root[lwtheme][lwtheme-image] #toolbox_new #newtoolbar:not(.ntb_bg_color) {
     background: transparent !important;
}
:root[lwtheme][lwtheme-image] #newtoolbar:not(.ntb_bg_color)::before {
    content: "" ;
    position: absolute;
    top: 0;
    right: 0;
    width: var(--height_newbar) !important;
    height: var(--ug-newbar_width) !important;
    pointer-events: none;
    z-index: -1 !important;
    background: var(--lwt-header-image) !important;
    background-repeat: no-repeat !important;
    /*background-position: left 0px top 100% !important;*/
    transform: rotate(-90deg) translateX(var(--ug-newbar_width)) !important;
    transform-origin: 100% 100% !important;
    transition: margin 0.25s ease;
}
:root[lwtheme][lwtheme-image] #toolbox_new.bottom_mode #newtoolbar:not(.ntb_bg_color, [customizing])::before {
    transform: scaleX(-1) !important;
    transform-origin:  50% 50% !important;
    width: 100% !important;
}

:root[lwtheme][lwtheme-image] #newtoolbar:not(.ntb_bg_color)[customizing]::before {
    width: var(--height_newbar_c) !important;
}

#newtoolbar:not([customizing]).off-mode::before {
    min-width: 0px !important;
    margin-inline: 0 calc(0px - var(--ug-newbar_width));
}
.left_mode #newtoolbar:not([customizing]).off-mode::before {
    margin-inline: calc(0px - var(--ug-newbar_width)) 0;
}
.bottom_mode #newtoolbar:not([customizing]).off-mode::before {
    min-height: 0px !important;
    margin-inline: 0;
    margin-block: 0 calc(0px - var(--ug-newbar_width)) !important;
}
 `;
}

let separator_fix_code = '';
if (separator_fix) {
  separator_fix_code = `
/* Anpassung fuer Separator Scripts, falls eingeschaltet */
#newtoolbar toolbarseparator {
    margin: 6px 0 !important;
    width: calc(var(--ug-newbar_width) - var(--ug-newbar_borderwidth) - 6px) !important;
    max-width: var(--ug-newbar_width) !important;
    border-block-color: hsl(0, 0%, 0%, 0.55) hsl(0, 0%, 100%, 0.55) !important;
    /*background-color: color-mix(in srgb, currentColor 70%, transparent) !important;
    border: none !important;*/
}
#newtoolbar :is(toolbarspacer, toolbarspring, toolbarseparator) {
    min-width: 1px !important;
}
.bottom_mode #newtoolbar:not([customizing]) toolbarseparator {
    transform: rotate(-90deg) !important;
}
#newtoolbar[customizing] toolbarseparator {
    margin-block: 16px !important;
}
 `;
}

  const sss = Cc['@mozilla.org/content/style-sheet-service;1'].getService(Ci.nsIStyleSheetService);
  //const uri = Services.io.newURI('data:text/css,' + encodeURIComponent(css));
  const uri = Services.io.newURI('data:text/css,' + encodeURIComponent(''+ css + theme_fix_code + theme_fix_code_2 + separator_fix_code));
  sss.loadAndRegisterSheet(uri, sss.AGENT_SHEET);

})();

Alles anzeigen

toolbar_n3.svg.zip

Horstmann

Zitat von FuchsFan

Horstmann
Nur als Hinweis, stelle ich in Zeile 72 auf true, so bleibt beim Ausblenden die Leiste wieder sichtbar (Thema hatten wir schon).

Vielen Dank, gut beobachtet!

Fix für theme_fix_2 ist unterwegs!

Horstmann

Zitat von lenny2

Ja

Danke; gut zu wissen.

Evtl. die finale Version, ausser es gibt grobe Fehler, bevor jeder zu Aris wechselt.

Bitte die Kommentare in der User Einstellungen Sektion vor Änderungen lesen; zwei mögliche Lösungen für störrische Themes können optional benutzt werden, und für Lenny hätten wir noch eine Space & Separator Script Lösung #102 (gefühlt).
Dieses Script wurde auch gerade erneuert, immer noch buggy...

Einige weitere Optionen sind hinzugefügt, speziell für Abmessungen; eine Autovariante hätte ich auch dafür, aber so schwer ist es nicht das manuell zu regeln.
Sowas könnte Sinn machen noch mit rein zu packen, aber dazu braucht es Feedback.

Version 9:

JavaScript

// Zusaetzliche Toolbars wahlweise rechts, links, unten

// Use filename starting with 00 !! =>
// 00_extra_toolbars_V9.uc.js

// Basiert auf: https://www.camp-firefox.de/forum/thema/137714-seitennavigation-fly-out-menue
// Und Aris: https://github.com/Aris-t2/CustomJSforFx/blob/master/scripts/addonbar_vertical.uc.js
// Forumthema: 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/

// Version V9 / Release 4

(function() {
    if (location.href !== 'chrome://browser/content/browser.xhtml')
        return;

// User Einstellungen
// Nach Script Aenderungen Neustart mit Start-Cache loeschen => about:support
// Moegliche Problemloesungen (s. unten) muessen wo noetig manuell an/ausgeschaltet werden

        // 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, bei new_tb_save = 1
        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';

        // Trennlinie Breite, 0px = off
        let new_tb_border_width = '1px';
        // Trennlinie Farbe
        //let new_tb_border_color = 'grey';
        let new_tb_border_color = 'color-mix(in srgb, currentColor 30%, transparent)';

// Groessen von Leiste und Buttons aendern, muss px Wert sein, auch bei 0px, manuell

        // Groesse Buttons via padding aendern, 8px Standard, Abstand geringer, Leistengroesse wird mit angepasst!
        let new_tb_btn_size = '6px';

        // Abstand zwischen Buttons, 2px Standard
        let new_tb_distance = '5px';

        // Breite vertikale Leiste / Hoehe horizontale Leiste um diesen Wert erhoehen, bei 0px => Leistengroesse = Buttongroesse
        let new_tb_size = '1px';

// Moegliche Problemloesungen, nur falls noetig, experimentell

        // Fix #1 fuer Themes mit zu niedrigen/ gekachelten Hintergrund Bildern, true / false, besser nur eines benutzen
        let theme_fix = false;
        // Fix #2, ueberschreibt Fix #1
        let theme_fix_2 = false;

        // Anpassung fuer Restore 'Space & Separator' items script for Firefox 102+ by Aris, true / false
        // Benutzung nicht empfohlen, Bugs, und toolbarspring fehlplaziert
        // Tip: Separator, Space etc. im Anpassenfenster nur mit Rechtsklick aus Leiste entfernen
        let separator_fix = true;

// 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');
        toolbox_new.setAttribute('orient','horizontal');

        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');
        ntb.setAttribute('toolbarname', 'Addon Bars');
	      ntb.setAttribute('label', 'Addon Bars');
        ntb.setAttribute('orient', 'vertical');
        ntb.setAttribute("accesskey","");

	      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) { }
          }
        });
        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 Funktion
    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);
           }
    };

    // Position 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: Prefs loeschen, 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.classList.add("ntb_bg_color");
       }

const css =`

:root {
    --ug-newbar_basewidth: calc(2 * var(--ug-newbar-button_inner_padding) + 16px);
    --ug-newbar_width: calc(var(--ug-newbar_basewidth) + var(--ug-newbar_borderwidth) + 2 * var(--ug-newbar_add_width));

    --ug-newbar-button_inner_padding: ${new_tb_btn_size};         /* Groesse Buttons */
    --ug-newbar_add_width: `+new_tb_size+`;                       /* Breite / Hoehe erhoehen */
    --ug-newbar_btnspace: ${new_tb_distance};                     /* Abstand zw. Buttons */
    --ug-newbar_borderwidth: ${new_tb_border_width};              /* Breite / Hoehe Trennlinie */
}

/*- Buttons Groesse -*/
#newtoolbar {
    --toolbarbutton-inner-padding: var(--ug-newbar-button_inner_padding) !important;
	 	--toolbarbutton-outer-padding: 0px !important;
}

/*-  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.4;
}
#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: var(--ug-newbar_width) !important;
}

#toolbox_new {
    position: fixed;
    z-index: 4 !important;
    display: flex;
    width: fit-content;
    top: var(--height_newbar_top);
    right: 0;
}
#newtoolbar {
    display: flex;
    min-width: var(--ug-newbar_basewidth) !important;
    width: var(--ug-newbar_width);
    min-height: var(--ug-newbar_basewidth) !important;
    height: var(--height_newbar) !important;
    align-items: center !important;
    padding-block: 8px;
    border: 0 solid ${new_tb_border_color};
    border-inline-width: var(--ug-newbar_borderwidth) 0;
    transition: width 0.25s ease, margin 0.25s ease /*,height 0.5s ease*/ ;
    box-shadow: none !important;
}
#newtoolbar:not([customizing]).off-mode {
    min-width: 0px !important;
    margin-inline: 0 calc(0px - var(--ug-newbar_width));
}

#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: var(--ug-newbar_width) 0 !important;
}
#toolbox_new.left_mode {
    left: 0;
}
.left_mode #newtoolbar:not([customizing]) {
    border-left: none;
    border-inline-width: 0 var(--ug-newbar_borderwidth);
}
.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 {
    top: unset;
    bottom: 0;
}
.bottom_mode #newtoolbar:not([customizing]) {
    flex-direction: row !important;
    height: var(--ug-newbar_width) !important;
    width: 100vw;
    padding-block: 0;
    padding-inline: 8px;
    border-inline-width: 0;
    border-top-width: var(--ug-newbar_borderwidth);
    /*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 falls eingeschaltet */
#newtoolbar.ntb_bg_color {
    background-color: ${new_tb_bg_color} !important;
}

/*- Farben Themes, falls Hintergrundbilder gekachelt, oben theme_fix versuchen -*/

:root[lwtheme] #newtoolbar:not(.ntb_bg_color) {
    background-color: var(--lwt-accent-color, var(--toolbar-bgcolor)) !important;
}
:root[lwtheme][lwtheme-image] #newtoolbar:not(.ntb_bg_color) {
    background-image: var(--lwt-header-image) !important;
    background-position: right 0px top 0px !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;
}
*/

`;

let theme_fix_code = '';
if (theme_fix) {
  theme_fix_code = `
/*-  Fix #1 Hintergrundbilder fuer Themes mit gekachelten Bildern, falls eingeschaltet -*/
:root[lwtheme][lwtheme-image] #newtoolbar:not(.ntb_bg_color) {
    background: var(--lwt-header-image) !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: right 0px top 0px !important;
}
:root[lwtheme][lwtheme-image] #toolbox_new.bottom_mode #newtoolbar:not(.ntb_bg_color) {
    background-size: auto !important;
}
 `;
}

let theme_fix_code_2 = '';
if (theme_fix_2) {
  theme_fix_code_2 = `
/*-  Fix #2 Hintergrundbilder fuer Themes mit gekachelten Bildern, falls eingeschaltet -*/
:root[lwtheme][lwtheme-image] #toolbox_new #newtoolbar:not(.ntb_bg_color) {
     background: transparent !important;
}
:root[lwtheme][lwtheme-image] #newtoolbar:not(.ntb_bg_color)::before {
    content: "" ;
    position: absolute;
    top: 0;
    right: 0;
    width: var(--height_newbar) !important;
    height: var(--ug-newbar_width) !important;
    pointer-events: none;
    z-index: -1 !important;
    background: var(--lwt-header-image) !important;
    background-repeat: no-repeat !important;
    /*background-position: left 0px top 100% !important;*/
    transform: rotate(-90deg) translateX(var(--ug-newbar_width)) !important;
    transform-origin: 100% 100% !important;
}
:root[lwtheme][lwtheme-image] #toolbox_new.bottom_mode #newtoolbar:not(.ntb_bg_color)::before {
    transform: scaleX(-1) !important;
    transform-origin:  50% 50% !important;
    width: 100% !important;
}
 `;
}

let separator_fix_code = '';
if (separator_fix) {
  separator_fix_code = `
/* Anpassung fuer Separator Scripts, falls eingeschaltet */
#newtoolbar toolbarseparator {
    margin: 6px 0 !important;
    width: calc(var(--ug-newbar_width) - var(--ug-newbar_borderwidth) - 6px) !important;
    max-width: var(--ug-newbar_width) !important;
    border-block-color: hsl(0, 0%, 0%, 0.55) hsl(0, 0%, 100%, 0.55) !important;
    /*background-color: color-mix(in srgb, currentColor 70%, transparent) !important;
    border: none !important;*/
}
#newtoolbar :is(toolbarspacer, toolbarspring, toolbarseparator) {
    min-width: 1px !important;
}
.bottom_mode #newtoolbar:not([customizing]) toolbarseparator {
    transform: rotate(-90deg) !important;
}
#newtoolbar[customizing] toolbarseparator {
    margin-block: 16px !important;
}
 `;
}

  const sss = Cc['@mozilla.org/content/style-sheet-service;1'].getService(Ci.nsIStyleSheetService);
  //const uri = Services.io.newURI('data:text/css,' + encodeURIComponent(css));
  const uri = Services.io.newURI('data:text/css,' + encodeURIComponent(''+ css + theme_fix_code + theme_fix_code_2 + separator_fix_code));
  sss.loadAndRegisterSheet(uri, sss.AGENT_SHEET);

})();

Alles anzeigen

toolbar_n3.svg.zip

Horstmann

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.

Horstmann

Zitat von lenny2

Zitat 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.

Horstmann

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.

Horstmann

Zitat von lenny2
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:
Code
        let new_tb_size = '0px';
Code
const 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.

Horstmann

Zitat von lenny2

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.

00-toolbar_test-41-RC5-tile.uc.js.zip

Horstmann

Zitat von FuchsFan

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 (?).

Horstmann

Zitat von FuchsFan

Zitat von Horstmann

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.

Horstmann

Zitat von FuchsFan

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

// 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);
})();

Alles anzeigen

Horstmann

Zitat von FuchsFan

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, oder~~ wie von Andreas beschrieben direkt die --lwt-accent-color.

Zitat von 2002Andreas

Zitat von FuchsFan

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!

Horstmann

Danke!

Hoffen wir mal daß grössere Bugs ausbleiben.

Horstmann

Eine Gedrängel ist das hier...

Zitat von lenny2

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

// 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);
})();

Alles anzeigen

Icon, optional: toolbar_n3.svg.zip

Horstmann

Damit das mal vom Tisch kommt:

Zitat

Das 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

// 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);
})();

Alles anzeigen

Icon, optional: toolbar_n3.svg.zip

Beiträge von Horstmann

CSS gesucht für "Alle Tabs Auswählen"

CSS gesucht für "Alle Tabs Auswählen"

CSS gesucht für "Alle Tabs Auswählen"

CSS gesucht für "Alle Tabs Auswählen"

Eigene Zusatzleisten ab ff 143+

Eigene Zusatzleisten ab ff 143+

Eigene Zusatzleisten ab ff 143+

Eigene Zusatzleisten ab ff 143+

Fix: Toolbar-Buttons reagieren nicht mehr ab FF 134

Eigene Zusatzleisten ab ff 143+

Eigene Zusatzleisten ab ff 143+

Eigene Zusatzleisten ab ff 143+

Eigene Zusatzleisten ab ff 143+

Eigene Zusatzleisten ab ff 143+

Eigene Zusatzleisten ab ff 143+

Eigene Zusatzleisten ab ff 143+

Eigene Zusatzleisten ab ff 143+

Eigene Zusatzleisten ab ff 143+

Eigene Zusatzleisten ab ff 143+

Eigene Zusatzleisten ab ff 143+