Beiträge von Horstmann

Horstmann

Zitat von FuchsFan

Durch die Tests der anderen Varianten auf der rechten Seite gefällt es mir auch dort.

Eine Sache, die den Aufwand für und Umfang von Leistenscripts - und eigentlich allen Scripts - massiv erhöht, ist das Bereitstellen von Varianten und extra Funktionen für den User.
Die Möglichkeiten sind auch endlos, und jede(r) hätte gerne eine eigene Version.

Wenn ich eine Zusatzleiste haben wollte, würde ich eine von Aris vorschlagen, aber persönlich meine nehmen ; meine extra Buttons sitzen eh einfach nur in einem getunten Overflow Menü - den Overflow Button klicken, alles ist im Popup, und wieder weg wenn das Popup schliesst.

Horstmann

Zitat von FuchsFan

Nun brauche ich nur noch hübsch zu machen, funktioniert. Prima!

Naja, etwas Arbeit bräuchte es schon noch um sauber zu funktionieren, aber ist quasi auch nur eine Fingerübung.
Wollte schon immer wissen wie ein frei verschiebbares Dingens klappen könnte - ob es Sinn macht oder nicht, das ist eine andere Frage.

Horstmann

Zitat von FuchsFan

Nun wird für dich aber die Aufgabe bestehen, das auch für die horizontale Nutzung einzurichten. Also frisch voran!

Der Druck ...

Also denne, verschieben wieder mit dem ersten Button in der Leiste aktivieren/deaktivieren, Ausrichtung horizontal/vertikal über Kontextmenü (Rechtsklick).
Ein paar User Einstellungen gibt es oben im JS Teil, und unten im CSS Bereich.

Icons hängen an, können auch im JS Bereich auf Fx Icons umgestellt, oder eben für eigene Icons getauscht werden.

JavaScript

// 00-dragger_leiste_test6d.uc.js
// Dragleiste Test 6d
// Enable/disable dragging by clicking drag button in the new toolbar
// Rotate dragbar via context menu

// Bugs / Test !!!

(function() {
  if (!window.gBrowser) return;

    if (Services.prefs.getBoolPref('svg.context-properties.content.enabled') == false) {
    	Services.prefs.setBoolPref('svg.context-properties.content.enabled', true );
    }

    // User settings JS

    // Custom Icons, expected in profile-name/chrome/icons folder ("icons" folder needs to be created)
    let ButtonIcon = 'toolbar_4.svg';
    let ButtonIconDrag = 'drag_1.svg';

    let ProfilePath = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir));
    let IconPath = '/chrome/icons/';

    // Image path to use custom icons
    let ImagePath = ProfilePath + IconPath + ButtonIcon;
    let ImagePath_drag = ProfilePath + IconPath + ButtonIconDrag;

    // Image path replacements to use Firefox icons
    //let ImagePath = "chrome://browser/skin/sidebars-right.svg";
    //let ImagePath_drag = "chrome://browser/skin/fullscreen.svg";

    // User settings JS end

    let dragbox_New = document.createXULElement('toolbox');
    dragbox_New.setAttribute('orient','horizontal');
    dragbox_New.setAttribute('id','dragbox_New');

    let dragtb = document.createXULElement('toolbar');
    dragtb.id = 'new_flybar';

    dragtb.setAttribute('customizable', true);
    dragtb.setAttribute("class","toolbar-primary chromeclass-toolbar browser-toolbar customization-target");
    dragtb.setAttribute('orient', 'vertical');
    dragtb.setAttribute('mode', 'icons');
    dragtb.setAttribute('context', 'toolbar-context-menu');
    dragtb.setAttribute("toolbarname", "Drag Toolbar");
    dragtb.setAttribute("label", "Drag Toolbar");

    dragbox_New.appendChild(dragtb);

    const drag_element = document.createElement("div");
    drag_element.id = "drag_diver";
    drag_element.appendChild(dragbox_New);

    let savedState = false;
    try {
      savedState = Services.prefs.getBoolPref("userChrome.drag_diver.off");
    } catch(e) {}
    if (savedState) drag_element.classList.add("dragbar_off_mode");

    document.getElementById('browser').parentNode.appendChild(drag_element);

    CustomizableUI.registerArea('new_flybar', {legacy: true});
    CustomizableUI.registerToolbarNode(dragtb);

// On/Off button
    try {
        CustomizableUI.createWidget({
          id: 'dragbar_off_button',
          defaultArea: CustomizableUI.AREA_NAVBAR,
          tooltiptext: 'Toggle Dragbar',
          label: 'Toggle Dragbar',
            onCreated: (this_button) => {
            this_button.style.setProperty('list-style-image', 'url("' + ImagePath + '")');
            this_button.style.MozContextProperties = 'fill, stroke, fill-opacity, stroke-opacity';
            this_button.style.minWidth = 'fit-content';
            }
        });
    } catch(e) { }

    document.getElementById('dragbar_off_button').addEventListener( "click", drag_offbar );
    function drag_offbar(event) {
      if (event.button === 0) {
        const new_dragbarer = document.getElementById('drag_diver');
        new_dragbarer.classList.toggle("dragbar_off_mode");
        const state = new_dragbarer.classList.contains("dragbar_off_mode");
        Services.prefs.setBoolPref("userChrome.drag_diver.off", state);
      }
    }

// Drag On/Off button
    try {
        CustomizableUI.createWidget({
          id: 'ntb_drag_btn',
          defaultArea: CustomizableUI.AREA_NAVBAR,
          label: 'Drag Toolbar',
          tooltiptext: 'Drag On/Off',
          removable: false,
            onCreated: (drag_button) => {
            drag_button.style.setProperty('list-style-image', 'url("' + ImagePath_drag + '")');
            drag_button.style.MozContextProperties = 'fill, stroke, fill-opacity, stroke-opacity';
            drag_button.style.minWidth = 'fit-content';
            }
        });
    } catch(e) { }

    // 1st child
    let add_parent = document.getElementById('new_flybar');
    let add_btn = document.getElementById('ntb_drag_btn');
    add_parent.insertBefore(add_btn, add_parent.firstChild);

    let separator_dragbtn = document.createXULElement("toolbarseparator");
    separator_dragbtn.setAttribute('id', 'dragbtn_separator');
    add_parent.insertBefore(separator_dragbtn, add_btn.nextSibling);

    document.getElementById('ntb_drag_btn').addEventListener( "click", let_drag);
    function let_drag() {
        if (event.button === 0 ) {
        drag_diver.classList.toggle("drag_mode");
       }
    };

// Context menu menuitem
    let menuitem_drag = document.createXULElement("menuitem");
    menuitem_drag.setAttribute('id', 'Drag_direction_Context');
    menuitem_drag.setAttribute('closemenu', 'none');
    menuitem_drag.setAttribute('label', 'Rotate Toolbar');
    menuitem_drag.classList.add('menuitem-iconic');

    let menu_drag = document.getElementById('toolbar-context-menu');
    let menu_refitem = document.querySelector('.viewCustomizeToolbar');
    menu_drag.insertBefore(menuitem_drag, menu_refitem);

    let menuseparator_drag = document.createXULElement("menuseparator");
    menuseparator_drag.setAttribute('id', 'drag_separator');
    menu_drag.insertBefore(menuseparator_drag, menuitem_drag.nextSibling);

    document.getElementById('Drag_direction_Context').addEventListener("click", rota_bar);
    function rota_bar(event) {
      if (event.button === 0) {
        const new_dragbarer = document.getElementById('drag_diver');
        new_dragbarer.classList.toggle("dragbar_rotate");

        if (dragtb.getAttribute('orient') === 'vertical') {
          dragtb.setAttribute('orient', 'horizontal');
        } else {
          dragtb.setAttribute('orient', 'vertical');
        }
        const isRotated = new_dragbarer.classList.contains("dragbar_rotate");
        Services.prefs.setBoolPref("userChrome.rotate_drag_diver", isRotated);
      }
    }

    let savedState_r = false;
    try {
      savedState_r = Services.prefs.getBoolPref("userChrome.rotate_drag_diver");
    } catch(e) {}

    if (savedState_r) {
      drag_element.classList.add("dragbar_rotate");
      dragtb.setAttribute('orient', 'horizontal');
    } else {
      dragtb.setAttribute('orient', 'vertical');
    }

// Drag functions
    const PREF_REL_X = "userchrome.drag_diver.relX";
    const PREF_REL_Y = "userchrome.drag_diver.relY";

    // Fallback position
    let relX = 0.1;
    let relY = 0.3;

    try {
      if (Services.prefs.prefHasUserValue(PREF_REL_X)) {
        relX = parseFloat(Services.prefs.getCharPref(PREF_REL_X));
      }
      if (Services.prefs.prefHasUserValue(PREF_REL_Y)) {
        relY = parseFloat(Services.prefs.getCharPref(PREF_REL_Y));
      }
    } catch (ex) {}

    function clampPosition(left, top) {
      const winWidth  = window.innerWidth;
      const winHeight = window.innerHeight;
      const elemWidth  = drag_element.offsetWidth;
      const elemHeight = drag_element.offsetHeight;

      const navbar = document.getElementById("navigator-toolbox");
      const TOP_LIMIT = navbar ? navbar.getBoundingClientRect().bottom + 0 : 100;

      if (left < 0) left = 0;
      if (top  < TOP_LIMIT) top = TOP_LIMIT;
      if (left > winWidth - elemWidth)  left = winWidth - elemWidth;
      if (top  > winHeight - elemHeight) top = winHeight - elemHeight;

      return { left, top };
    }

    function applyPositionFromRelative() {
      const winWidth  = window.innerWidth;
      const winHeight = window.innerHeight;

      let left = relX * winWidth;
      let top  = relY * winHeight;

      const pos = clampPosition(left, top);
      drag_element.style.left = pos.left + "px";
      drag_element.style.top  = pos.top  + "px";
    }

    setTimeout(applyPositionFromRelative, 100);

    let isDragging = false;
    let offsetX = 0;
    let offsetY = 0;

    drag_element.addEventListener("mousedown", e => {
      if (document.documentElement.hasAttribute("customizing")) {
        return;
      }
      if (!drag_element.classList.contains("drag_mode")) return;
      e.preventDefault();
      isDragging = true;
      offsetX = e.clientX - drag_element.offsetLeft;
      offsetY = e.clientY - drag_element.offsetTop;
      drag_element.style.transition = "none";
    });
    drag_element.addEventListener("contextmenu", e => {
      if (drag_element.classList.contains("drag_mode")) {
        e.preventDefault();
      }
    });

    window.addEventListener("mousemove", e => {
      if (!isDragging) return;

      let newLeft = e.clientX - offsetX;
      let newTop  = e.clientY - offsetY;

      const pos = clampPosition(newLeft, newTop);
      drag_element.style.left = pos.left + "px";
      drag_element.style.top  = pos.top  + "px";
    });

    window.addEventListener("mouseup", () => {
      if (!isDragging) return;
      isDragging = false;

      let left = drag_element.offsetLeft;
      let top  = drag_element.offsetTop;
      const pos = clampPosition(left, top);

      drag_element.style.left = pos.left + "px";
      drag_element.style.top  = pos.top  + "px";

      const winWidth  = window.innerWidth;
      const winHeight = window.innerHeight;

      relX = pos.left / winWidth;
      relY = pos.top  / winHeight;

      try {
        Services.prefs.setCharPref(PREF_REL_X, String(relX));
        Services.prefs.setCharPref(PREF_REL_Y, String(relY));
      } catch (ex) {}
    });

    window.addEventListener("resize", () => {
      applyPositionFromRelative();
    });

const css = `

/*--  User settings CSS  --*/

:root {
    --ug-dragbar_inner_width: 38px; /* minimum 32px */
    --ug-dragbar_width: calc(var(--ug-dragbar_inner_width) + 2*var(--ug-drag_border_width));

    --ug-dragbar_bg_color: lightblue;
    --ug-dragbar_radius: 8px;

    --ug-drag_border_width: 2px;
    --ug-drag_border_color: orange;
}

/*--  User settings CSS end --*/


#drag_diver {
    position: fixed;
    display: flex;
    height: fit-content;
    width: fit-content;
    z-index: 4 !important;
    cursor: move;
    -moz-window-dragging: no-drag;
}

:root[customizing] #drag_diver {
    visibility: hidden;
}

#dragbox_New {
    display: flex;
    flex-direction: column !important;
    z-index: 5 !important;
    height: fit-content;
    width: fit-content;
    margin: 0px calc(-1*var(--ug-drag_border_width));
    visibility: visible;
}

#new_flybar {
    display: flex;
    width: var(--ug-dragbar_width);
    justify-content: center !important;
    background-color: var(--ug-dragbar_bg_color) !important;
    border-color: var(--ug-drag_border_color);
    border-style: solid !important;
    border-width: var(--ug-drag_border_width);
    border-radius: var(--ug-dragbar_radius);
    cursor: default;
}

#new_flybar {
    min-height: var(--ug-dragbar_width) !important;
    overflow: hidden !important;
    padding: 4px 0px;
}

#new_flybar > :is(.toolbarbutton-1, toolbaritem),
#new_flybar toolbarpaletteitem > :is(.toolbarbutton-1, toolbaritem) {
    margin-inline: 0px !important;
    margin-block: 2px !important;
    padding-inline: 0px !important;
/*     z-index: 6 !important; */
}

/*--  rotate mode  --*/

#main-window:not([customizing]) #drag_diver.dragbar_rotate #new_flybar {
    min-height: 0px !important;
    height: var(--ug-dragbar_width) !important;
    min-width: 0px !important;
    width: fit-content !important;
    padding: 0px 4px;
    margin: calc(-1*var(--ug-drag_border_width)) 0px;
}

#main-windowt:not([customizing]) #drag_diver.dragbar_rotate #new_flybar > :is(.toolbarbutton-1, toolbaritem),
#main-window:not([customizing]) #drag_diver.dragbar_rotate #new_flybar toolbarpaletteitem > :is(.toolbarbutton-1, toolbaritem) {
    margin-inline: 2px !important;
    margin-block: 0px !important;
}

/*--  drag button  --*/

#main-window #ntb_drag_btn  {
    cursor: move;
}
#main-window:not([customizing]) #drag_diver:not(.drag_mode) #ntb_drag_btn:not(:hover, :active) image {
    opacity: 0.5;
}

/*--   drag menu item   --*/

#Drag_direction_Context {
    -moz-context-properties: fill, fill-opacity !important;
    fill: currentColor !important;
}
#drag_diver.dragbar_rotate #Drag_direction_Context {
    fill: red !important;
}
#Drag_direction_Context :is(image, img) {
    list-style-image: url(chrome://global/skin/icons/reload.svg);
    content: url(chrome://global/skin/icons/reload.svg) !important;
}

/*--   drag mode   --*/

#main-window:not([customizing]) #drag_diver.drag_mode #ntb_drag_btn {
    color: red !important;
    opacity: 1;
}
#main-window:not([customizing]) #drag_diver.drag_mode #new_flybar  {
    outline: 2px solid var(--ug-drag_border_color) !important;
    outline-offset: -1px !important;
    cursor: grab;
}
#main-window:not([customizing]) #drag_diver.drag_mode #ntb_drag_btn image {
    outline: 1px solid var(--ug-drag_border_color) !important;
    outline-offset: -1px !important;
}
:root:not([customizing]) #drag_diver.drag_mode toolbarbutton:not(#ntb_drag_btn) {
    pointer-events: none !important;
}

/*--   off mode   --*/

:root:not([customizing]) #drag_diver.dragbar_off_mode {
    display: none;
}

/*
#root:not([customizing]) #drag_diver.dragbar_off_mode #dragbar_off_button:not(:hover, :active) image {
    opacity: 0.45;
}
*/

/*---  customizing  ---*/

:root[customizing] #dragbox_New {
    position: fixed;
    top: 50%;
    right: 0px;
    margin-inline: 0px calc(-2*var(--ug-drag_border_width));
    transform: translateY(-50%);
}

:root[customizing] #new_flybar[customizing] {
    flex-direction: column !important;
    align-items: center !important;
    min-width: calc(var(--ug-dragbar_width) + 0*var(--ug-drag_border_width)) !important;
    width: initial !important;
    min-height: var(--ug-dragbar_width) !important;
    padding-bottom: 48px !important;
    padding-right: var(--ug-drag_border_width) !important;
    border-radius: var(--ug-dragbar_radius) 0 0 var(--ug-dragbar_radius) !important;
}

#customization-content-container {
    margin-right: var(--ug-dragbar_width) !important;
}

/*-  test colors  -*/
/*
#dragbox_New image {
    outline-offset: -1px !important;
    outline: 1px solid green !important;
}
*/
  `;

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

})();

Alles anzeigen

drag_icons.zip

Horstmann

Zitat von Sören Hentzschel

Würdest du nur schreiben, dass KI zum Einsatz kam, ohne das näher zu benennen, würde ich das wohl auch akzeptieren, auch wenn ich es schöner fände, wenn man weiß, wer daran beteiligt war.

Deine Argumente bzgl. der Nachteile der alleinigen Nutzung von AI, statt sich Basiswissen anzueignen, kann ich nur unterstreichen.

Offengestanden halte ich es aber für sinnlos, eines von vielen Tools erwähnen zu sollen, wenn eine Internet Suche eben auch nur ein Tool ist, und ebenfalls keine fachspezifische Ausbildung ersetzen kann.
Als Amateur bin ich so oder so hinterher, und mein Code ist immer suboptimal.

Was mich angeht, benutze ich AI ab und zu, immer zusammen mit Quellen wie MDN, stackoverflow etc..

Quellen von direkt übernommenem Code ohne eigene Anpassung gebe ich generell an, Quellen für angepasste Codeteile nicht, egal ob AI involviert war.

Horstmann

Zitat von FuchsFan

Irrtum, Bedienungsfehler, funktioniert doch.

Die Bedienung bekomme ich momentan leider nicht einfacher hin.
Jetzt auch zart korrigiert in #54.

Und wie immer: danke für's Testen!

Horstmann

Zitat von Mira_Belle

Zitat von Horstmann

Oder etwa doch?

Nuja.

~~Button in der neuen Leiste oben anschalten, dann mit rechter Maustaste verschieben, dann den Button ausschalten.~~

Edit: Ersten Button in der neuen Leiste oben anschalten, um mit Maustasten verschieben zu können, dann den Button ausschalten, um den Verschieben Modus zu beenden.

Andere Leistenscripts vorher besser deaktivieren.
Ziemlich grob und buggy.

JavaScript

//00-dragger-leiste-test5c.uc.js
// Dragleiste Test 5c
// Enable dragging by clicking drag button  ==>
// drag with right mouse button

// Bugs / Test !!!

(function() {
  if (!window.gBrowser) return;

      // Custom Icon, expected in profile-name/chrome/icons folder ("icons" folder needs to be created)
        let ButtonIcon = 'flower-satt32.png';

        let ProfilePath = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir));
        let IconPath = '/chrome/icons/';
        //let ImagePath = ProfilePath + IconPath + ButtonIcon;

        let ImagePath = "chrome://browser/skin/sidebars-right.svg";

        let flybox_New = document.createXULElement('toolbox');
        flybox_New.setAttribute('orient','horizontal');
        flybox_New.setAttribute('id','flybox_new');

        let tb = document.createXULElement('toolbar');
        let tb_label = "New Toolbar";
        tb.id = 'new_flybar';

        tb.setAttribute('customizable', true);
        tb.setAttribute("class","toolbar-primary chromeclass-toolbar browser-toolbar customization-target");
        tb.setAttribute('orient', 'vertical');
        tb.setAttribute('mode', 'icons');
        tb.setAttribute('context', 'toolbar-context-menu');
        tb.setAttribute("toolbarname", tb_label);
        tb.setAttribute("label", tb_label);

	      flybox_New.appendChild(tb);

        const drag_element = document.createElement("div");
        drag_element.id = "drag_diver";

        drag_element.appendChild(flybox_New);

        let savedState = false;
        try {
          savedState = Services.prefs.getBoolPref("userChrome.newFlybar.off");
        } catch(e) {}

        if (savedState) drag_element.classList.add("dragbar_off_mode");

        document.getElementById('browser').parentNode.appendChild(drag_element);

        CustomizableUI.registerArea('new_flybar', {legacy: true});
        CustomizableUI.registerToolbarNode(tb);

    try {
        CustomizableUI.createWidget({
          id: 'NewToolbar_fly_button',
          defaultArea: CustomizableUI.AREA_NAVBAR,
          tooltiptext: 'Toggle Dragbar',
          label: 'Toggle Dragbar',
            onCreated: (this_button) => {
            this_button.style.setProperty('list-style-image', 'url("' + ImagePath + '")');
            }
        });
    } catch(e) { }

    document.getElementById('NewToolbar_fly_button').addEventListener( "click", flybar );

    function flybar(event) {
      if (event.button === 0) {
        const new_dragbar = document.getElementById('drag_diver');
        new_dragbar.classList.toggle("dragbar_off_mode");
        const state = new_dragbar.classList.contains("dragbar_off_mode");
        Services.prefs.setBoolPref("userChrome.newFlybar.off", state);
      }
    }

    try {
        CustomizableUI.createWidget({
          id: 'ntb_drag_btn',
          defaultArea: CustomizableUI.AREA_NAVBAR,
          tooltiptext: 'Drag Me',
          label: 'Drag Toolbar',
          removable: false,
        });
    } catch(e) { }

    // 1st child
    let add_parent = document.getElementById('new_flybar');
    let add_btn = document.getElementById('ntb_drag_btn');
    add_parent.insertBefore(add_btn, add_parent.firstChild);

    document.getElementById('ntb_drag_btn').addEventListener( "click", let_drag);
    function let_drag() {
        if (event.button === 0 ) {
        drag_diver.classList.toggle("drag_mode");
       }
    };


// if (drag_element.classList.contains("drag_mode")) {


  const PREF_X = "userchrome.drag_diver.x";
  const PREF_Y = "userchrome.drag_diver.y";

  // Gespeicherte Position laden (Fallback: 100 / 100)
  let startX = 100;
  let startY = 300;
  try {
    if (Services.prefs.prefHasUserValue(PREF_X)) {
      startX = Services.prefs.getIntPref(PREF_X);
    }
    if (Services.prefs.prefHasUserValue(PREF_Y)) {
      startY = Services.prefs.getIntPref(PREF_Y);
    }
  } catch (ex) {}

  drag_element.style.left = startX + "px";
  drag_element.style.top  = startY + "px";

  let isDragging = false;
  let offsetX = 0;
  let offsetY = 0;

  function clampPosition(left, top) {
    const winWidth  = window.innerWidth;
    const winHeight = window.innerHeight;
    const elemWidth  = drag_element.offsetWidth;
    const elemHeight = drag_element.offsetHeight;

    // Dynamische obere Begrenzung basierend auf der Firefox-Navigationsleiste
    const navbar = document.getElementById("navigator-toolbox");
    const TOP_LIMIT = navbar ? navbar.getBoundingClientRect().bottom + 0 : 100;

    // Begrenzungen anwenden
    if (left < 0) left = 0;
    if (top  < TOP_LIMIT) top = TOP_LIMIT;
    if (left > winWidth - elemWidth)  left = winWidth - elemWidth;
    if (top  > winHeight - elemHeight) top = winHeight - elemHeight;

    return { left, top };
  }

  // drag_element.addEventListener("mousedown", e => {
  //   // Nur reagieren, wenn rechte Maustaste (button === 2)
  //   // if (e.button !== 2) return;
  //   //
  // // Anpassen Fenster auch betroffen
  // if (!drag_element.classList.contains("drag_mode")) return;
  //
  //   // geht nur Rechts Klick
  //   //if (!drag_element.classList.contains("drag_mode") || (e.button !== 2)) return;
  //
  //   e.preventDefault(); // Kontextmenü verhindern
  //   isDragging = true;
  //   offsetX = e.clientX - drag_element.offsetLeft;
  //   offsetY = e.clientY - drag_element.offsetTop;
  //   drag_element.style.transition = "none";
  // });
  //

  drag_element.addEventListener("mousedown", e => {
    // Im Anpassungsmodus gar nicht erst draggen
    if (document.documentElement.hasAttribute("customizing")) {
      return;
    }

    if (!drag_element.classList.contains("drag_mode")) return;

    e.preventDefault();
    isDragging = true;
    offsetX = e.clientX - drag_element.offsetLeft;
    offsetY = e.clientY - drag_element.offsetTop;
    drag_element.style.transition = "none";
  });




  // Optional: Standard-Kontextmenü unterdrücken
  //drag_element.addEventListener("contextmenu", e => e.preventDefault());

  // Standard-Kontextmenü nur unterdrücken, wenn drag_mode aktiv ist
  drag_element.addEventListener("contextmenu", e => {
  if (drag_element.classList.contains("drag_mode")) {
    e.preventDefault();
  }
  });


  window.addEventListener("mousemove", e => {
    if (!isDragging) return;

    let newLeft = e.clientX - offsetX;
    let newTop  = e.clientY - offsetY;

    const pos = clampPosition(newLeft, newTop);
    drag_element.style.left = pos.left + "px";
    drag_element.style.top  = pos.top  + "px";
  });

  window.addEventListener("mouseup", () => {
    if (!isDragging) return;
    isDragging = false;

    // Endposition holen, begrenzen und speichern
    let left = drag_element.offsetLeft;
    let top  = drag_element.offsetTop;
    const pos = clampPosition(left, top);

    drag_element.style.left = pos.left + "px";
    drag_element.style.top  = pos.top  + "px";

    try {
      Services.prefs.setIntPref(PREF_X, pos.left);
      Services.prefs.setIntPref(PREF_Y, pos.top);
    } catch (ex) {}
  });

  // Optional: beim Resize noch einmal clampen
  window.addEventListener("resize", () => {
    let left = drag_element.offsetLeft;
    let top  = drag_element.offsetTop;
    const pos = clampPosition(left, top);
    drag_element.style.left = pos.left + "px";
    drag_element.style.top  = pos.top  + "px";
  });


  const css = `

:root {
    --ug-newbar_inner_width: 38px; /* minimum 32px */
    --ug-newbar_max_width: calc(var(--ug-newbar_inner_width) + 2*var(--ug-fly_border_width));

    --ug-arrow_left: url(chrome://global/skin/icons/arrow-left.svg);
    --ug-arrow_right: url(chrome://global/skin/icons/arrow-right.svg);

    --ug-newbar_bg_color: lightblue;
    --ug-newbar_radius: 8px;

    --ug-fly_border_width: 2px;
    --ug-fly_border_color: orange;
}

#drag_diver {
    position: fixed;
    display: flex;
    height: fit-content;
    width: fit-content;
    z-index: 4 !important;
    cursor: move;
    -moz-window-dragging: no-drag;
}

:root[customizing] #drag_diver {
    outline: 4px solid red;
    visibility: hidden;
}
/*
#drag_diver::before {
    position: absolute;
    content: "";
    bottom: 100% !important;
    left: 0px !important;
    background-color: orange !important;
    height: 30% !important;
    width: 100% !important;
} */

#flybox_new {
    display: flex;
    z-index: 5 !important;
    height: fit-content;
    width: fit-content;
    visibility: visible;
}

#new_flybar {
    display: flex;
/*     min-width: 0px !important; */
    width: var(--ug-newbar_max_width);
    justify-content: center !important;
    background-color: var(--ug-newbar_bg_color) !important;
    border-color: var(--ug-fly_border_color);
    border-style: solid !important;
    border-width: var(--ug-fly_border_width);
    border-radius: var(--ug-newbar_radius);
    cursor: default;
}

#new_flybar {
    min-height: var(--ug-newbar_max_width) !important;
    overflow: hidden !important;
    padding-block: 4px 4px;
}

#new_flybar > :is(.toolbarbutton-1, toolbaritem),
#new_flybar toolbarpaletteitem > :is(.toolbarbutton-1, toolbaritem) {
    margin-inline: 0px !important;
    margin-block: 2px !important;
    padding-inline: 0px !important;
/*     z-index: 6 !important; */
}

/*   drag button   */

#main-window #ntb_drag_btn {
    list-style-image: var(--ug-arrow_right);
    cursor: move;
    padding-bottom: 12px !important;
    fill-opacity: 0.4;
}

/* #ntb_drag_btn::before {
    content: "/" ;
    display: flex;
    position: absolute;
    justify-content: center !important;
    top: 16px;
    left: 0%;
    width: 100% !important;
    height: 100% !important;
    color: black !important;
} */


/*--   drag mode   --*/

:root:not([customizing]) #flybox_new {
    margin: calc(-1*var(--ug-fly_border_width));
}

:root:not([customizing]) #drag_diver.drag_mode #ntb_drag_btn {
    list-style-image: var(--ug-arrow_left);
    cursor: default;
    color: red !important;
    fill-opacity: 1;
}

:root:not([customizing]) #drag_diver.drag_mode #new_flybar  {
    border-color: red !important;
}

:root:not([customizing]) #drag_diver.drag_mode #ntb_drag_btn image {
    outline: 1px solid red !important;
}

:root:not([customizing]) #drag_diver.drag_mode toolbarbutton:not(#ntb_drag_btn) {
    pointer-events: none !important;
}

/*--   off mode   --*/
:root:not([customizing]) #drag_diver.dragbar_off_mode {
    display: none;
}

/*---  customizing  ---*/

:root[customizing] #flybox_new {
    position: fixed;
    top: 50%;
    right: calc(-1*var(--ug-fly_border_width));
    transform: translateY(-50%);
}

#new_flybar[customizing] {
    align-items: center !important;
    min-width: calc(var(--ug-newbar_max_width) + 0*var(--ug-fly_border_width)) !important;
    width: initial !important;
    min-height: var(--ug-newbar_max_width) !important;
    padding-bottom: 48px !important;
    padding-right: var(--ug-fly_border_width) !important;
    border-radius: var(--ug-newbar_radius) 0 0 var(--ug-newbar_radius) !important;
}

/* #new_flybar toolbarpaletteitem > :is(.toolbarbutton-1, toolbaritem),
#new_flybar toolbarpaletteitem[removable="false"]{
    opacity: 1 !important;
} */

#customization-content-container {
    margin-right: var(--ug-newbar_max_width) !important;
}

/* #new_flybar[customizing] #ntb_drag_btn {
    display: none !important;
} */

/*-  test colors  -*/

/* #flybox_new image {
    outline-offset: -1px !important;
    outline: 1px solid green !important;
}
 */

  `;

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

})();

Alles anzeigen

Horstmann

Wenn man jetzt noch eine frei verschiebbare Leiste hätte, die man beliebig mit der Maus im Browserfenster platzieren kann.
Das geht aber nicht!

Oder etwa doch?

Horstmann

Zitat von Mira_Belle

Zitat von Horstmann

... daher würde ich den aktualisierten Code komplett übernehmen ...

OK, wird gemacht.

Sorry für das hin und her, aber manchmal braucht's ein paar Schritte mehr bis es passt.
So sollte hoffentlich auch die Animation im Anpassenfenster klappen, wenn man Buttons in die Leiste zieht.

Horstmann

Zitat von Mira_Belle

Zitat von Horstmann

Bei Benutzung no width würde man dann translate damit ersetzen, wenn man das konsequent umsetzen würde.

Das wiederum kapiere ich nicht! no width ?

Ich werde die Version nutzen, die Du ursprünglich gepostest hat.

Von width hätte das heissen sollen,...

Eine wichtige Korrektur habe ich noch gemacht; wo jetzt :
width: calc(var(--ug-toolbar_width) + 2*var(--ug-fly_border_width)); steht, hatte ich die falsche Variable für border width benutzt ... Ganz dicker Fehler.

Plus noch ein paar Kleinigkeiten, daher würde ich den aktualisierten Code komplett übernehmen, mit deinen Präferenzen eben.
Am Rest hat sich nichts geändert.
Die transition für border-width läuft auch nicht sauber, weil flybox_new nicht animiert ist, würde ich evtl. rausnehmen.

Horstmann

Zitat von Mira_Belle

Zitat von Horstmann

Evtl. testen:

Danke.

Gerne doch.

Ich hab mal noch etwas dazugeschrieben in's Script.
Wenn du in Zeile 113 die outline aktivierst, siehst du was passiert, der Container(?) #flybox_new behält Grösse und Position, da ja der Inhalt #new_flybar nur verschoben wird.

Mit display:none - oder in Zeile 141 width aktivieren als Test - wird die Grösse vom Container mit veringert.
Bei Benutzung no width würde man dann translate damit ersetzen, wenn man das konsequent umsetzen würde.

Horstmann

Sorry, #37 ...

Moment, ich sehe das gleiche Problem in deinem Originalscript, ohne meine Anpassungen.

Edit, nochmal Moment, ich sehe das Problem; denke es ist translate.

Display none ginge, lässt sich aber nicht animieren, ausser mit viel tricksen.

Evtl. testen:

JavaScript

// New switchable toolbar rechts/links – Version mit gleitendem Slide‑In/Out‑Effekt

// TEST mit Anpassenfenster

(function() {
  if (!window.gBrowser)
    return;

  const
  // ■■ START UserConfiguration ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
    id           = 'NewToolbar_fly_button',
    label        = 'Toggle New Toolbar',
    tooltiptext  = 'Toggle New toolbar',
    // Icon-------------------------------------------------------
    icon         = 'Dock Side Right.svg',   // Icon-Dateiname
    //icon = 'flower-satt32.png';

    iconPath     = '/chrome/icons/',
    visible      = '38px',                  // Sichtbare Leistenbreite
    isPosH       = 0,                       // 0 = rechts, 1 = links
    isPosV       = '30%',                   // vertikale Position der Leiste
  // isPosV      = '0%',       Leiste am oberen Fensterrand;
  // isPosV      = '50%',      Leiste mittig zur Fensterhöhe;
	// isPosV      = '100%',     Leiste am unteren Fensterrand;
     delay       = '0.6s';                  // Dauer (schneller/langsamer)
  // ■■ END UserConfiguration ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

  const curProfDir = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir));

  if (Services.prefs.getBoolPref('svg.context-properties.content.enabled') == false) {
    Services.prefs.setBoolPref('svg.context-properties.content.enabled', true);
  }

  const flybox_new = document.createXULElement('toolbox');
  flybox_new.setAttribute('orient','horizontal');
  flybox_new.id = 'flybox_new';

  const fly_bar = document.createXULElement('toolbar');
  fly_bar.id = 'new_flybar';
  fly_bar.setAttribute('orient', 'vertical');
  fly_bar.setAttribute('customizable', true);
  fly_bar.setAttribute('mode', 'icons');
  fly_bar.setAttribute('context', 'toolbar-context-menu');
  fly_bar.setAttribute('class','toolbar-primary chromeclass-toolbar browser-toolbar customization-target');
  fly_bar.setAttribute('toolboxid', 'navigator-toolbox');
  fly_bar.setAttribute('toolbarname', 'New Toolbar');
  fly_bar.setAttribute('label', 'New Toolbar');

  let savedState = false;
  try {
    savedState = Services.prefs.getBoolPref("userChrome.newFlybar.off");
  } catch(e) {}

  if (savedState) fly_bar.classList.add("fly_off_mode");

  flybox_new.appendChild(fly_bar);
  document.getElementById('browser').parentNode.appendChild(flybox_new);

  CustomizableUI.registerArea(fly_bar.id, {legacy: true});
  CustomizableUI.registerToolbarNode(fly_bar);

  try {
    CustomizableUI.createWidget({
      id,
      defaultArea: CustomizableUI.AREA_NAVBAR,
      label,
      tooltiptext,
      onCreated: (button) => {
        button.style.MozContextProperties = 'fill, stroke, fill-opacity, stroke-opacity';
        button.style.listStyleImage = 'url("' + curProfDir + iconPath + icon + '")';
        button.style.minWidth = 'fit-content';
      }
    });
  } catch(e) {};

  document.getElementById('NewToolbar_fly_button').addEventListener("click", flybar);

  function flybar(event) {
    if (event.button === 0) {
      const new_flybar = document.getElementById('new_flybar');
      new_flybar.classList.toggle("fly_off_mode");
      const state = new_flybar.classList.contains("fly_off_mode");
      Services.prefs.setBoolPref("userChrome.newFlybar.off", state);
    }
  }

  if (isPosH === 1)
    flybox_new.classList.add("fly_left");
  else
    flybox_new.classList.remove("fly_left");

  const css = `
    :root {
      --ug-toolbar_width: ${visible};
      /*--ug-bg_fly_color: #2b2b2b;*/
      --ug-bg_fly_color: lightblue;
      --ug-fly_border_width: 2px;
      --ug-border_radius: 8px;
      --ug-border_color: #f3a200;
    }

    #flybox_new {
      position: fixed !important;
      display: flex !important;
      ${isPosH === 0
        ? `right: 0 ; margin-right: calc(-1 * var(--ug-fly_border_width));`
        : `left: 0 ; margin-left: calc(-1 * var(--ug-fly_border_width));`}
      top: ${isPosV} !important;
      transform: translateY(-${isPosV}) !important;
      height: fit-content !important;
      z-index: 4 !important;
      pointer-events: none;
      /*outline: 4px solid red !important;*/
    }

    #new_flybar {
      display: flex;
      width: calc(var(--ug-toolbar_width) + 2*var(--ug-fly_border_width));
      min-width: 0px !important;
      overflow: hidden !important;
      justify-content: center !important;
      padding-block: 4px;
      background-color: var(--ug-bg_fly_color) !important;
      border: var(--ug-fly_border_width) solid var(--ug-border_color) !important;
      ${isPosH === 0
        ? `border-radius: var(--ug-border_radius) 0 0 var(--ug-border_radius);`
        : `border-radius: 0 var(--ug-border_radius) var(--ug-border_radius) 0;`}
      transition: transform ${delay} ease-in-out,
                  opacity ${delay} ease-in-out,
                  border-width ${delay} ease-in-out,
                  width ${delay} ease-in-out;
      transform: translateX(0);
      opacity: 1;
      pointer-events: auto;
    }

    #new_flybar.fly_off_mode:not([customizing]) {
      transform: ${isPosH === 0 ? 'translateX(100%)' : 'translateX(-100%)'};
      opacity: 0;
      border-width: 0px !important;
      /*width: 0px !important;*/
    }

    #new_flybar > :is(.toolbarbutton-1, toolbaritem),
    #new_flybar toolbarpaletteitem > :is(.toolbarbutton-1, toolbaritem) {
      margin-inline: 0px !important;
      margin-block: 2px !important;
      padding: 0px !important;
      /*transition: none;*/
    }

    /*---  customizing  ---*/

    #main-window[customizing]  #flybox_new.fly_left {
      left: unset !important;
      right: 0px !important;
      margin-inline: 0px calc(-1 * var(--ug-fly_border_width)) !important;
    }

    #new_flybar[customizing] {
      align-items: center !important;
      /*width: calc(var(--ug-toolbar_width) + 2*var(--ug-fly_border_width)) !important;*/
      min-width: calc(var(--ug-toolbar_width) + 2*var(--ug-fly_border_width)) !important;
      width: initial !important;      
      min-height: var(--ug-toolbar_width) !important;
      padding-bottom: 48px !important;
      border-radius: var(--ug-border_radius) 0 0 var(--ug-border_radius) !important;
      transition: none !important;
    }

    #main-window:not([customizing]) #new_flybar.fly_off_mode[customizing] {
      transition: none !important;
      opacity: 0 !important;
    }

    #customization-content-container {
      margin-right: var(--ug-toolbar_width) !important;
    }

  `;

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

})();

Alles anzeigen

Horstmann

Zitat von Mira_Belle

Horstmann Habe ich auch schon gemacht, ändert aber nichts.

Benutzt du das komplette Script aus #137, nicht nur Teile davon?

Horstmann

Zitat von Mira_Belle

Der Bereich, der von der Toolbar überdeckt wird, wird auch im ausgeblendeten Zustand "überdeckt"!
Was bedeutet, dass an dieser Stelle der Slider der Scrollbar nicht "angefasst" werden kann.

Gut beobachtet; in Zeile 134 aus #37, /*pointer-events: none;*/ , mal den Kommentar entfernen, also pointer-events: none;.

Horstmann

Zitat von Mitleser

Zitat von Horstmann

Das Scroll Feature funktioniert bei mir am Mac leider nicht.

Hast du das in einem neuen Profil (ohne andere Toolbars) getestet?

Funktioniert am Mac in Fx 145x, nur nicht auf meinem antiken System.
Ich will aber nichts hören, hab extra die Testmaschine angeworfen.

Horstmann

Zitat von Mira_Belle

Lange hat es gedauert, viel Versuche waren nötig, aber jetzt habe ich es!
Die zusätzliche Toolbar ist endlich so, wie sie für mich sein soll.
Ich danke Dir Horstmann und auch Mitleser für Eure Ideen und eigenen Umsetzungen einer solchen Leiste.
Hier nun meine Interpretation der Codeschnipsel, die ich aus Euren Skripten bunt zusammen gewürfelt habe.
Wer es mal testen mag, bitte schön.

Prima zusammengewürfelt, da hab ich was draus gelernt!

Nur eines, die Breite passt sich nicht an die Borderbreite an (mal 8px testen), Zeile 111 könntest du zu sowas ändern :
width: calc(var(--ug-toolbar_width) + 2*var(--ug-border_width));

Und auch wenn ihr kein anständiges Anpassenfenster mögt , hier mal ein Vorschlag:

JavaScript

// New switchable toolbar rechts/links – Version mit gleitendem Slide‑In/Out‑Effekt

// TEST mit Anpassenfenster

(function() {
  if (!window.gBrowser)
    return;

  const
  // ■■ START UserConfiguration ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
    id           = 'NewToolbar_fly_button',
    label        = 'Toggle New Toolbar',
    tooltiptext  = 'Toggle New toolbar',
    // Icon-------------------------------------------------------
    icon         = 'Dock Side Right.svg',   // Icon-Dateiname
    iconPath     = '/chrome/icons/',
    visible      = '38px',                  // Sichtbare Leistenbreite
    isPosH       = 0,                       // 0 = rechts, 1 = links
    isPosV       = '30%',                   // vertikale Position der Leiste
  // isPosV      = '0%',       Leiste am oberen Fensterrand;
  // isPosV      = '50%',      Leiste mittig zur Fensterhöhe;
	// isPosV      = '100%',     Leiste am unteren Fensterrand;
     delay       = '0.6s';                  // Dauer (schneller/langsamer)
  // ■■ END UserConfiguration ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

  const curProfDir = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir));

  if (Services.prefs.getBoolPref('svg.context-properties.content.enabled') == false) {
    Services.prefs.setBoolPref('svg.context-properties.content.enabled', true);
  }

  const flybox_new = document.createXULElement('toolbox');
  flybox_new.setAttribute('orient','horizontal');
  flybox_new.id = 'flybox_new';

  const fly_bar = document.createXULElement('toolbar');
  fly_bar.id = 'new_flybar';
  fly_bar.setAttribute('orient', 'vertical');
  fly_bar.setAttribute('customizable', true);
  fly_bar.setAttribute('mode', 'icons');
  fly_bar.setAttribute('context', 'toolbar-context-menu');
  fly_bar.setAttribute('class','toolbar-primary chromeclass-toolbar browser-toolbar customization-target');
  fly_bar.setAttribute('toolboxid', 'navigator-toolbox');
  fly_bar.setAttribute('toolbarname', 'New Toolbar');
  fly_bar.setAttribute('label', 'New Toolbar');

  let savedState = false;
  try {
    savedState = Services.prefs.getBoolPref("userChrome.newFlybar.off");
  } catch(e) {}

  if (savedState) fly_bar.classList.add("fly_off_mode");

  flybox_new.appendChild(fly_bar);
  document.getElementById('browser').parentNode.appendChild(flybox_new);

  CustomizableUI.registerArea(fly_bar.id, {legacy: true});
  CustomizableUI.registerToolbarNode(fly_bar);

  try {
    CustomizableUI.createWidget({
      id,
      defaultArea: CustomizableUI.AREA_NAVBAR,
      label,
      tooltiptext,
      onCreated: (button) => {
        button.style.MozContextProperties = 'fill, stroke, fill-opacity, stroke-opacity';
        button.style.listStyleImage = 'url("' + curProfDir + iconPath + icon + '")';
        button.style.minWidth = 'fit-content';
      }
    });
  } catch(e) {};

  document.getElementById('NewToolbar_fly_button').addEventListener("click", flybar);

  function flybar(event) {
    if (event.button === 0) {
      const new_flybar = document.getElementById('new_flybar');
      new_flybar.classList.toggle("fly_off_mode");
      const state = new_flybar.classList.contains("fly_off_mode");
      Services.prefs.setBoolPref("userChrome.newFlybar.off", state);
    }
  }

  if (isPosH === 1)
    flybox_new.classList.add("fly_left");
  else
    flybox_new.classList.remove("fly_left");

  const css = `
    :root {
      --ug-toolbar_width: ${visible};
      --ug-bg_color: #2b2b2b;
      --ug-fly_border_width: 2px;
      --ug-border_radius: 8px;
      --ug-border_color: #f3a200;
    }

    #flybox_new {
      position: fixed !important;
      display: flex !important;
      ${isPosH === 0
        ? `right: 0 ; margin-right: calc(-1 * var(--ug-fly_border_width));`
        : `left: 0 ; margin-left: calc(-1 * var(--ug-fly_border_width));`}
      top: ${isPosV} !important;
      transform: translateY(-${isPosV}) !important;
      height: fit-content !important;
      z-index: 4 !important;
    }

    #new_flybar {
      display: flex;
      width: calc(var(--ug-toolbar_width) + 2*var(--ug-fly_border_width));
      min-width: 0 !important;
      overflow: hidden !important;
      justify-content: center !important;
      padding-block: 4px;
      background-color: var(--ug-bg_color) !important;
      border: var(--ug-fly_border_width) solid var(--ug-border_color) !important;
      ${isPosH === 0
        ? `border-radius: var(--ug-border_radius) 0 0 var(--ug-border_radius);`
        : `border-radius: 0 var(--ug-border_radius) var(--ug-border_radius) 0;`}
      transition: transform ${delay} ease-in-out,
                  opacity ${delay} ease-in-out,
                  border-width ${delay} ease-in-out;
      transform: translateX(0);
      opacity: 1;
    }

    #new_flybar.fly_off_mode:not([customizing]) {
      transform: ${isPosH === 0 ? 'translateX(100%)' : 'translateX(-100%)'};
      opacity: 0;
      border-width: 0px !important;
      /*pointer-events: none;*/
    }

    #new_flybar > :is(.toolbarbutton-1, toolbaritem),
    #new_flybar toolbarpaletteitem > :is(.toolbarbutton-1, toolbaritem) {
      margin-inline: 0px !important;
      margin-block: 2px !important;
      padding: 0px !important;
      /*opacity: 1 !important;*/
      transition: none;
    }

    /*---  customizing  ---*/

    #main-window[customizing]  #flybox_new.fly_left {
      left: unset !important;
      right: 0px !important;
      margin-inline: 0px calc(-1 * var(--ug-fly_border_width)) !important;
    }

    #new_flybar[customizing] {
      align-items: center !important;
      width: calc(var(--ug-toolbar_width) + var(--ug-fly_border_width)) !important;
      min-height: var(--ug-toolbar_width) !important;
      padding-bottom: 48px !important;
      border-radius: var(--ug-border_radius) 0 0 var(--ug-border_radius) !important;
      transition: none !important;
    }

    #main-window:not([customizing]) #new_flybar.fly_off_mode[customizing] {
      transition: none !important;
      opacity: 0 !important;
    }

    #customization-content-container {
      margin-right: var(--ug-toolbar_width) !important;
    }

  `;

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

})();

Alles anzeigen

Ansonste habe ich zB nur die --ug-border_width mit --ug-fly_border_width spezieller gemacht; ist meine Schuld, weil ich das auch vergessen hatte in meinen Vorlagen, aber diese :root Variablen können einen schnell austricksen.

Das gleiche mit IDs und manchen Klassen, da kann man sich schnell wundern, wenn ein anderes Script/CSS die gleichen benutzt.

Horstmann

Zitat von Sören Hentzschel

Wenn man sich auskennt, kann so eine KI tatsächlich eine Hilfe sein, weil man dann auch erkennt, was die richtigen Ansätze sind und wo die KI etwas falsch „verstanden” hat. Aber gerade für jemanden, der sich im Thema überhaupt nicht sicher ist, richtet eine solche KI meiner Ansicht nach sogar einen nachhaltigen Schaden an, weil man dann falsche Dinge lernt und das verhindert, dass man sich verbessert.

Mein Reden.

Mein Problem mit AI(KI) ist aber eher das cui bono der Angelegenheit.

Es sieht mir teils aus wie ein neuer Krypto Boom, der jetzt schon artifizielle (...) Finanzmanipulationen auf höchster Investitionsebene betreibt, ein politisches Machtinstrument darstellt, und von einem sehr beschränkten Kreis nicht nur kontrolliert, sondern v.a. von dieser Seite vorangetrieben wird.

Ganz abgesehen von massivem Energiebedarf, dem evtl. signifikanten Verlust von Jobs, niedrigeren Ausbildungsniveaus und kulturellem Schaden, potentieller Nutzen von AI ist nicht für die Allgemeinheit gedacht.

Horstmann

Zitat von Mitleser

Update am 2025-12-05: Neue Version (Die vertikale Position der Leiste kann jetzt gescrollt werden).

Das Scroll Feature funktioniert bei mir am Mac leider nicht.

Ansonsten, ein Vorschlag für das Anpassenfenster, du könntest mal probieren sowas unten in den CSS Block einzufügen, nur mal schnell getestet.
Damit sollte a) die Leiste in diesem Fenster immer sichtbar und an der gleichen Seite sein (rechts), und keine anderen Inhalte im Anpassenfenster verdecken können.

CSS

/*--  customizing  --*/

  :root[customizing] #vert_toolbox {
		right: 0 !important;
		left: unset !important;
	}

	#vert_toolbar[customizing] {
		display: flex !important;
		border-top-right-radius: 0 !important;
		border-top-left-radius: var(--vt-border-radius) !important;
		border-bottom-right-radius: 0 !important;
		border-bottom-left-radius: var(--vt-border-radius) !important;
		margin-left: calc(var(--vt-toolbar-min-width) * -1) !important;
		margin-right: unset !important;
	}

  #customization-content-container {
      margin-right: 32px !important;
  }

Alles anzeigen

Horstmann

Zitat von Mira_Belle

Schade, aber so sind die "Geschmäcker" halt verschieden.

Schwach geworden, wie immer ...

Hier dann die Leiste mit Button und das Ding sitzt aussen.
Wobei sich bei den Versionen mit Extra Button schon die Frage stellt, warum man nicht einfach den Hauptbutton benutzt, den zum komplett Ausschalten der Leiste.

JavaScript

// Toggle newtoolbar 10 rechts/links, extra button instead of hover, button outside
// 00_flybar_V10bo.uc.js


(function() {

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

        // Custom Icon, expected in profile-name/chrome/icons folder ("icons" folder needs to be created)
        let ButtonIcon = 'flower-satt32.png';

        // start positions
        let Fly_Position = 0;  // 0 = right , 1 = left
        let Fly_InOrOut = 0; // 0 = bar extended , 1 = bar collapsed

        let ProfilePath = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir));
        let IconPath = '/chrome/icons/';
        let ImagePath = ProfilePath + IconPath + ButtonIcon;

        let flybox_new = document.createXULElement('toolbox');
        flybox_new.setAttribute('orient','horizontal');
        flybox_new.setAttribute('id','flybox_new');

        let tb = document.createXULElement('toolbar');
        let tb_label = "New Toolbar";
        tb.id = 'new_flybar';

        tb.setAttribute('customizable', true);
        tb.setAttribute("class","toolbar-primary chromeclass-toolbar browser-toolbar customization-target");
        tb.setAttribute('orient', 'vertical');
        tb.setAttribute('mode', 'icons');
        tb.setAttribute('context', 'toolbar-context-menu');
        tb.setAttribute("toolbarname", tb_label);
        tb.setAttribute("label", tb_label);

	      flybox_new.appendChild(tb);
        document.getElementById('browser').parentNode.appendChild(flybox_new);

        CustomizableUI.registerArea('new_flybar', {legacy: true});
        CustomizableUI.registerToolbarNode(tb);

   try {
        CustomizableUI.createWidget({
            id: 'NewToolbar_fly_button',
            type: 'custom',
            defaultArea: CustomizableUI.AREA_NAVBAR,
                onBuild: function(aDocument) {
                    let toolbaritem = aDocument.createXULElement('toolbarbutton');
                    let props = {
                        id: 'NewToolbar_fly_button',
                        class: 'toolbarbutton-1 chromeclass-toolbar-additional',
                        removable: true,
                        label: 'Toggle New Toolbar',
                        tooltiptext: 'Toggle New toolbar',
                        style: 'list-style-image: url("' + ImagePath + '");',
                    };
                    for(let p in props)
                        toolbaritem.setAttribute(p, props[p]);
                    return toolbaritem;
                }
        });
    } catch(e) { };

    document.getElementById('NewToolbar_fly_button').addEventListener( "click", flybar );
    function flybar() {
        if (event.button === 0 ) {
        new_flybar.classList.toggle("fly_off_mode");
       }
    };

    if (Fly_Position === 1) {
       flybox_new.classList.add("fly_left");
       }
    else {
       flybox_new.classList.remove("fly_left");
    };

    try {
        CustomizableUI.createWidget({
          id: 'ntb_flyInOut_btn',
          defaultArea: CustomizableUI.AREA_NAVBAR,
          tooltiptext: 'Fly Me',
          label: 'Fly Me',
          removable: false,
        });
    } catch(e) { }

    if (Fly_InOrOut === 1) {
       flybox_new.classList.remove("fly_InOut_mode");
       }
    else {
       flybox_new.classList.add("fly_InOut_mode");
    };

    // 1st child
    let addy = document.getElementById('new_flybar');
    let addybe = document.getElementById('ntb_flyInOut_btn');
    addy.insertBefore(addybe, addy.firstChild);

    document.getElementById('ntb_flyInOut_btn').addEventListener( "click", flyInOut);
    function flyInOut() {
        if (event.button === 0 ) {
        flybox_new.classList.toggle("fly_InOut_mode");
       }
    };


const css =`

/* Button outside */

:root {
    --ug-newbar_width: 0px;
    --ug-newbar_inner_width: 36px; /* minimum 32px */
    --ug-newbar_max_width: calc(var(--ug-newbar_inner_width) + 2*var(--ug-fly_border));

    --ug-arrow_width: 26px;
    --ug-arrow_left: url(chrome://global/skin/icons/arrow-left.svg);
    --ug-arrow_right: url(chrome://global/skin/icons/arrow-right.svg);

    --ug-newbar_bg_color: lightblue;
    --ug-newbar_radius: 8px;

    --ug-fly_border: 3px;
    --ug-fly_border_color: orange;
}

#flybox_new {
    position: fixed;
    display: flex;
    top: 50%;
    right: 0px;
    transform: translateY(-50%);
    z-index: 4 !important;
    height: fit-content;
    width: fit-content;
}

#ntb_flyInOut_btn,
#new_flybar {
    display: flex;
    min-width: 0px !important;
    width: var(--ug-newbar_width);
    justify-content: center !important;
    background-color: var(--ug-newbar_bg_color) !important;
    border-color: var(--ug-fly_border_color);
    border-style: solid !important;
    border-width: var(--ug-fly_border);
    transition: width 0.5s ease, margin 0.5s ease, padding 0.5s ease /*, left 0.5s ease, right 0.5s ease*/;
}

#new_flybar {
    margin-inline: 0px calc(0px - 2*var(--ug-fly_border));
    min-height: var(--ug-newbar_max_width) !important;
    border-radius: 0 0 0 var(--ug-newbar_radius);
    overflow: hidden !important;
    padding-block: 4px;
}

#flybox_new.fly_InOut_mode #new_flybar:not([customizing]) {
    width: var(--ug-newbar_max_width);
    margin-inline: 0px calc(0px - var(--ug-fly_border));
}

#new_flybar > :is(.toolbarbutton-1, toolbaritem),
#new_flybar toolbarpaletteitem > :is(.toolbarbutton-1, toolbaritem) {
    margin-inline: 0px !important;
    margin-block: 2px !important;
    padding-inline: 0px !important;
    z-index: 6 !important;
}

#new_flybar:not([customizing]) toolbarbutton:not(#ntb_flyInOut_btn) {
    transition: opacity 0.25s ease;
    opacity: 0 !important;
}

#flybox_new.fly_InOut_mode #new_flybar toolbarbutton {
    opacity: 1 !important;
}

/*---  arrow button  ---*/

#flybox_new #ntb_flyInOut_btn {
    position: absolute;
    list-style-image: var(--ug-arrow_right);
    left: calc(-1*var(--ug-arrow_width) - 1*var(--ug-fly_border));
    top: calc(0px - var(--ug-fly_border));
    box-sizing: content-box;
    width: var(--ug-arrow_width);
    border-radius: var(--ug-newbar_radius) 0 0 var(--ug-newbar_radius);
    border-inline-width: var(--ug-fly_border) 0px;
    margin-block: var(--ug-fly_border) !important;
}

#flybox_new #ntb_flyInOut_btn::after {
    content:"";
    position: absolute;
    background-color: inherit;
    right: calc(0px - 1*var(--ug-fly_border));
    height: 100%;
    width: var(--ug-fly_border);
}

#flybox_new:not(.fly_InOut_mode) #ntb_flyInOut_btn {
    list-style-image: var(--ug-arrow_left) !important;
}

#ntb_flyInOut_btn image {
/*  margin-inline:  calc(var(--ug-fly_border)) !important;  */
    margin-block: 6px !important;
    --toolbarbutton-inner-padding: 8px 2px !important;
}

/*---  left  ---*/

:root:not([customizing]) #flybox_new.fly_left {
    right: unset;
    left: 0px;
}

#flybox_new.fly_left #new_flybar:not([customizing]) {
    margin-inline: calc(0px - 2*var(--ug-fly_border)) 0px;
}

#flybox_new.fly_left #new_flybar {
    border-radius: 0 0 var(--ug-newbar_radius) 0;
}

#flybox_new.fly_left.fly_InOut_mode #new_flybar:not([customizing]) {
    margin-inline: calc(0px - var(--ug-fly_border)) 0px;
}

/*---  arrow button left  ---*/

#flybox_new.fly_left #ntb_flyInOut_btn {
    list-style-image: var(--ug-arrow_right) !important;
    left: unset;
    right: calc(-1*var(--ug-arrow_width) - 1*var(--ug-fly_border));
    border-radius: 0 var(--ug-newbar_radius) var(--ug-newbar_radius) 0;
    border-inline-width: 0px var(--ug-fly_border);
}

#flybox_new.fly_left.fly_InOut_mode #ntb_flyInOut_btn {
    list-style-image: var(--ug-arrow_left) !important;
}

#flybox_new.fly_left #ntb_flyInOut_btn::after {
    left: calc(0px - 1*var(--ug-fly_border));
}

/*--  Off  --*/

#new_flybar:not([customizing]).fly_off_mode {
    display: none !important;
}

/*---  customizing  ---*/

#new_flybar[customizing] {
    align-items: center !important;
    min-width: var(--ug-newbar_max_width) !important;
    width: calc(var(--ug-newbar_max_width) + var(--ug-fly_border)) !important;
    min-height: var(--ug-newbar_max_width) !important;
    padding-bottom: 48px !important;
    padding-right: var(--ug-fly_border) !important;
    border-radius: var(--ug-newbar_radius) 0 0 var(--ug-newbar_radius) !important;
    border-color: var(--ug-fly_border_color);
}

#new_flybar toolbarpaletteitem > :is(.toolbarbutton-1, toolbaritem),
#new_flybar toolbarpaletteitem[removable="false"]{
    opacity: 1 !important;
}

#customization-content-container {
    margin-right: var(--ug-newbar_max_width) !important;
}

#new_flybar[customizing] #ntb_flyInOut_btn {
    display: none !important;
}

/*-  test colors  -*/
/*
#flybox_new image {
    outline-offset: -1px !important;
    outline: 1px solid green !important;
}
*/

`;

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

})();

Alles anzeigen

Icon: flower-satt.png.zip

Horstmann

Zitat von Mira_Belle

Verrätst Du mir, wie man den Pfeil, bzw. diese Fläche wieder vor die Leiste bekommt.
Also das die Optik wieder genau der Optik aus #22 entspricht.

Du müsstest dir das selber anschauen, das CSS ist aufwendig, und ich biete momentan nur die existierenden Versionen an.
Mir gefällt es besser, wenn der Button nach dem Ausklappen nicht noch zusätzlich Platz in Richtung Browserinhalt einnimmt.

Im Prinzip musst du nur das ::before Element von #22 mit dem Button von #29 ersetzen, und dann halt basteln.
Hier wäre ein Anfang für ein alternatives CSS in deinem Sinne; eine komplette Anpassung ist mir zu viel Aufwand.

button.css.zip

Horstmann

Und noch eine Variante, mit zusätzlichem Button direkt an der Leiste zum ein/ausfahren, statt hover.
Etwas grob, aber sollte im Prinzip klappen.
Nur Basisoptionen, kein Geschnösel.

JavaScript

// Toggle newtoolbar 10 rechts/links, extra button instead of hover, button inside
// 00_flybar_V10bi.uc.js


(function() {

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

        // Custom Icon, expected in profile-name/chrome/icons folder ("icons" folder needs to be created)
        let ButtonIcon = 'flower-satt32.png';

        // start positions
        let Fly_Position = 0;  // 0 = right , 1 = left
        let Fly_InOrOut = 0; // 0 = bar extended , 1 = bar collapsed

        let ProfilePath = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir));
        let IconPath = '/chrome/icons/';
        let ImagePath = ProfilePath + IconPath + ButtonIcon;

        let flybox_new = document.createXULElement('toolbox');
        flybox_new.setAttribute('orient','horizontal');
        flybox_new.setAttribute('id','flybox_new');

        let tb = document.createXULElement('toolbar');
        let tb_label = "New Toolbar";
        tb.id = 'new_flybar';

        tb.setAttribute('customizable', true);
        tb.setAttribute("class","toolbar-primary chromeclass-toolbar browser-toolbar customization-target");
        tb.setAttribute('orient', 'vertical');
        tb.setAttribute('mode', 'icons');
        tb.setAttribute('context', 'toolbar-context-menu');
        tb.setAttribute("toolbarname", tb_label);
        tb.setAttribute("label", tb_label);

	      flybox_new.appendChild(tb);
        document.getElementById('browser').parentNode.appendChild(flybox_new);

        CustomizableUI.registerArea('new_flybar', {legacy: true});
        CustomizableUI.registerToolbarNode(tb);

   try {
        CustomizableUI.createWidget({
            id: 'NewToolbar_fly_button',
            type: 'custom',
            defaultArea: CustomizableUI.AREA_NAVBAR,
                onBuild: function(aDocument) {
                    let toolbaritem = aDocument.createXULElement('toolbarbutton');
                    let props = {
                        id: 'NewToolbar_fly_button',
                        class: 'toolbarbutton-1 chromeclass-toolbar-additional',
                        removable: true,
                        label: 'Toggle New Toolbar',
                        tooltiptext: 'Toggle New toolbar',
                        style: 'list-style-image: url("' + ImagePath + '");',
                    };
                    for(let p in props)
                        toolbaritem.setAttribute(p, props[p]);
                    return toolbaritem;
                }
        });
    } catch(e) { };

    document.getElementById('NewToolbar_fly_button').addEventListener( "click", flybar );
    function flybar() {
        if (event.button === 0 ) {
        new_flybar.classList.toggle("fly_off_mode");
       }
    };

    if (Fly_Position === 1) {
       flybox_new.classList.add("fly_left");
       }
    else {
       flybox_new.classList.remove("fly_left");
    };

    try {
        CustomizableUI.createWidget({
          id: 'ntb_flyInOut_btn',
          defaultArea: CustomizableUI.AREA_NAVBAR,
          tooltiptext: 'Fly Me',
          label: 'Fly Me',
          removable: false,
        });
    } catch(e) { }

    if (Fly_InOrOut === 1) {
       flybox_new.classList.remove("fly_InOut_mode");
       }
    else {
       flybox_new.classList.add("fly_InOut_mode");
    };

    // 1st child
    let addy = document.getElementById('new_flybar');
    let addybe = document.getElementById('ntb_flyInOut_btn');
    addy.insertBefore(addybe, addy.firstChild);

    document.getElementById('ntb_flyInOut_btn').addEventListener( "click", flyInOut);
    function flyInOut() {
        if (event.button === 0 ) {
        flybox_new.classList.toggle("fly_InOut_mode");
       }
    };


const css =`

/*  Botton inside  */

:root {
    --ug-newbar_width: 0px;
    --ug-newbar_inner_width: 38px; /* minimum 32px */
    --ug-newbar_max_width: calc(var(--ug-newbar_inner_width) + 2*var(--ug-fly_border));

    --ug-arrow_left: url(chrome://global/skin/icons/arrow-left.svg);
    --ug-arrow_right: url(chrome://global/skin/icons/arrow-right.svg);

    --ug-newbar_bg_color: lightblue;
    --ug-newbar_radius: 8px;

    --ug-fly_border: 3px;
    --ug-fly_border_color: orange;
}

#flybox_new {
    position: fixed;
    display: flex;
    top: 50%;
    right: 0px;
    transform: translateY(-50%);
    z-index: 4 !important;
    height: fit-content;
    width: fit-content;
}

#ntb_flyInOut_btn,
#new_flybar {
    display: flex;
    min-width: 0px !important;
    width: var(--ug-newbar_width);
    justify-content: center !important;
    background-color: var(--ug-newbar_bg_color) !important;
    border-color: var(--ug-fly_border_color);
    border-style: solid !important;
    border-width: var(--ug-fly_border);
    transition: width 0.5s ease, margin 0.5s ease, padding 0.5s ease, border-radius 0.5s ease;
}

#new_flybar {
    min-height: var(--ug-newbar_max_width) !important;
    border-radius: 0 0 0 var(--ug-newbar_radius);
    overflow: hidden !important;
    border-top-color: transparent;
    padding-block: 4px 4px;
    margin-inline: 0px calc(0px - 2*var(--ug-fly_border));
}

#flybox_new.fly_InOut_mode #new_flybar:not([customizing]) {
    width: var(--ug-newbar_max_width);
    margin-inline: 0px calc(0px - var(--ug-fly_border));
}

#new_flybar > :is(.toolbarbutton-1, toolbaritem),
#new_flybar toolbarpaletteitem > :is(.toolbarbutton-1, toolbaritem) {
    margin-inline: 0px !important;
    margin-block: 2px !important;
    padding-inline: 0px !important;
    z-index: 6 !important;
}

#new_flybar:not([customizing]) toolbarbutton:not(#ntb_flyInOut_btn) {
    transition: opacity 0.25s ease;
    opacity: 0 !important;
}

#flybox_new.fly_InOut_mode #new_flybar toolbarbutton {
    opacity: 1 !important;
}

/*---  arrow button  ---*/

#ntb_flyInOut_btn {
    position: absolute;
    list-style-image: var(--ug-arrow_right);
    top: calc(0px - 32px - 6px - 0*var(--ug-fly_border));
    right: calc(0px - var(--ug-fly_border));
    width: var(--ug-newbar_max_width);
    border-radius: var(--ug-newbar_radius) 0 0 var(--ug-newbar_radius);
}

#flybox_new.fly_InOut_mode #ntb_flyInOut_btn {
    border-radius: var(--ug-newbar_radius) 0 0 0;
}

#flybox_new:not(.fly_InOut_mode) #ntb_flyInOut_btn::after {
    width: 0px;
}

#flybox_new:not(.fly_InOut_mode) #ntb_flyInOut_btn {
    list-style-image: var(--ug-arrow_left) !important;
    width: calc(var(--ug-newbar_max_width) - 12px);
}

#ntb_flyInOut_btn image {
    margin-block: 6px !important;
    transition: width 0.5s ease !important;
}

#flybox_new:not(.fly_InOut_mode) #ntb_flyInOut_btn image {
    --toolbarbutton-inner-padding: 8px 2px !important;
}

/*  gap  */

#flybox_new #ntb_flyInOut_btn::after {
    content:"";
/*     display: none; */
    position: absolute;
    background:
    linear-gradient(to right, var(--ug-fly_border_color) var(--ug-fly_border), var(--ug-newbar_bg_color) var(--ug-fly_border));
    bottom: calc(0px - 1*var(--ug-fly_border));
    right: calc(0px - 0*var(--ug-fly_border));
    width: calc(100% + var(--ug-fly_border));
    height: var(--ug-fly_border);
    transition: width 0.5s ease;
}


/*---  left  ---*/

:root:not([customizing]) #flybox_new.fly_left {
    right: unset;
    left: 0px;
}

#flybox_new.fly_left #new_flybar:not([customizing]) {
    margin-inline: calc(0px - 2*var(--ug-fly_border)) 0px;
}

#flybox_new.fly_left #new_flybar {
    border-radius: 0 0 var(--ug-newbar_radius) 0;
}

#flybox_new.fly_left.fly_InOut_mode #new_flybar:not([customizing]) {
    margin-inline: calc(0px - var(--ug-fly_border)) 0px;
}

/*---  arrow button left  ---*/

#flybox_new.fly_left #ntb_flyInOut_btn {
    list-style-image: var(--ug-arrow_right) !important;
    left: calc(0px - var(--ug-fly_border));
    border-radius: 0 var(--ug-newbar_radius) var(--ug-newbar_radius) 0;
}

#flybox_new.fly_left.fly_InOut_mode #ntb_flyInOut_btn {
}

#flybox_new.fly_left.fly_InOut_mode #ntb_flyInOut_btn {
    list-style-image: var(--ug-arrow_left) !important;
    border-radius: 0 var(--ug-newbar_radius) 0 0;
}

/*  gap left  */

#flybox_new.fly_left #ntb_flyInOut_btn::after {
    background:
    linear-gradient(to left, var(--ug-fly_border_color) var(--ug-fly_border), var(--ug-newbar_bg_color) var(--ug-fly_border));
    left: calc(0px - 0*var(--ug-fly_border));
}

/*--  Off  --*/

#new_flybar:not([customizing]).fly_off_mode {
    display: none !important;
}

/*---  customizing  ---*/

#new_flybar[customizing] {
    align-items: center !important;
    width: calc(var(--ug-newbar_max_width) + var(--ug-fly_border)) !important;
    min-height: var(--ug-newbar_max_width) !important;
    padding-bottom: 48px !important;
    padding-right: var(--ug-fly_border) !important;
    border-radius: var(--ug-newbar_radius) 0 0 var(--ug-newbar_radius) !important;
    border-color: var(--ug-fly_border_color);
}

#new_flybar toolbarpaletteitem > :is(.toolbarbutton-1, toolbaritem),
#new_flybar toolbarpaletteitem[removable="false"]{
    opacity: 1 !important;
}

#customization-content-container {
    margin-right: var(--ug-newbar_max_width) !important;
}

#new_flybar[customizing] #ntb_flyInOut_btn {
    display: none !important;
}

/*-  test colors  -*/
/*
#flybox_new image {
    outline-offset: -1px !important;
    outline: 1px solid green !important;
}
*/

`;

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

})();

Alles anzeigen

Testicon: icons.zip

Beiträge von Horstmann

Seitennavigation - Fly Out Menü

Seitennavigation - Fly Out Menü

Seitennavigation - Fly Out Menü

Neue Quicklink-Button

Seitennavigation - Fly Out Menü

Seitennavigation - Fly Out Menü

Seitennavigation - Fly Out Menü

Seitennavigation - Fly Out Menü

Seitennavigation - Fly Out Menü

Seitennavigation - Fly Out Menü

Seitennavigation - Fly Out Menü

Seitennavigation - Fly Out Menü

Seitennavigation - Fly Out Menü

Schaltbare vertikale Overlay-Zusatzleiste

Seitennavigation - Fly Out Menü

Neue Quicklink-Button

Schaltbare vertikale Overlay-Zusatzleiste

Seitennavigation - Fly Out Menü

Seitennavigation - Fly Out Menü

Seitennavigation - Fly Out Menü