Beiträge von Mira_Belle

Mira_Belle

Zitat von Horstmann

Sorry für das hin und her, aber manchmal braucht's ein paar Schritte mehr bis es passt.

Wem "sagst" Du das? Ist doch bei all meinen JS nicht anders!
Da klappt so manches nicht von Anfang an und es bedarf mehrere Anläufe.

Zitat von Horstmann

So sollte hoffentlich auch die Animation im Anpassenfenster klappen, .....

Das klappte schon vorher sehr gut.
Du hast das CSS arg geändert, jedoch mag mein Auge in der Ausführung des Codes keine Veränderungen wahrnehmen.
Aber sehr wahrscheinlich ist nun der Code robuster und sauberer,
aber was weiß ich schon? Mit solchem komplexen CSS komme ich einfach nicht zurecht.
Mal was per CSS verschieben, ausblenden oder einfach eine Farbe zu weisen, das bekomme ich noch hin,
aber dann hört es auch schon auf.

Mira_Belle

Zitat von Horstmann

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

OK, wird gemacht. Danke.

Mira_Belle

Zitat von Horstmann

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.

Ich sehe und glaube zu verstehen.

Zitat von Horstmann

Mit display:none - oder in Zeile 141 width aktivieren als Test - wird die Grösse vom Container mit veringert.

Ja, auch gesehen, aber dann (display:none) ist der schöne Effekt weg (sanftes ein- und ausblenden)

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.
Die funktioniert wunderbar und ich bin happy,
also noch einmal vielen lieben Dank dafür.

Mira_Belle

Zitat von Horstmann

Evtl. testen:

Perfekt

Danke.

Mira_Belle

Irgendwie müsste da was mit "#flybox_new" gehen.
Wenn ausgeblendet, "#flybox_new" => display: none;

aus #137?
Äh, das hier:

JavaScript

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

(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/',
    tbWidth      = '34px',                  // 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 toolbar = document.createXULElement('toolbar');
  toolbar.id = 'new_flybar';
  toolbar.setAttribute('orient', 'vertical');
  toolbar.setAttribute('customizable', true);
  toolbar.setAttribute('mode', 'icons');
  toolbar.setAttribute('context', 'toolbar-context-menu');
  toolbar.setAttribute('class','toolbar-primary chromeclass-toolbar browser-toolbar customization-target');
  toolbar.setAttribute('toolboxid', 'navigator-toolbox');
  toolbar.setAttribute('toolbarname', 'New Toolbar');
  toolbar.setAttribute('label', 'New Toolbar');

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

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

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

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

  try {
    CustomizableUI.createWidget({
      id,
      defaultArea: CustomizableUI.AREA_NAVBAR,
      label,
      tooltiptext,
      onCreated: (button) => {
        button.style.MozContextProperties = 'fill, stroke, fill-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: ${tbWidth};
      --ug-bg_color: #2b2b2b;
      --ug-border_width: 3px;
      --ug-border_radius: 8px;
      --ug-border_color: #f3a200;
    }

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

    #new_flybar {
      display: flex;
      width: calc(var(--ug-toolbar_width) + 2*var(--ug-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-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 {
      transform: ${isPosH === 0 ? 'translateX(100%)' : 'translateX(-100%)'};
      opacity: 0;
      border-width: 0 !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

Mira_Belle

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

Mira_Belle

Zitat von 2002Andreas

Nur bei aktivierter Titelleiste öffnet sich ein neuer Tab nach Doppelklick auf die Tableiste.

Da muss man erst einmal drauf kommen.

Danke.

Mira_Belle

Eine nicht ganz so schöne Sache habe ich aber nun entdeckt!
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.

Ich prüfe mal, ob das mit Mitlesers Toolbar auch so ist.

Nein, ist nicht so.
Es hat ganz sicher etwas mit dem sanften ein und ausblenden zu tun.
Denn Mitlesers Toolbar "ploppt" auf.
Kann ich in meinem Skript nachvollziehen.

Mir fällt das aber z.Z. nichts Passendes ein.

Mira_Belle

Zitat von BrokenHeart

Bei mir (Win10) öffnet sich im Fehlerbehebungsmodus kein neuer Tab, sondern das Firefox-Fenster ändert seinen Status von maximiert auf verkleinert und umgekehrt. Das ist das Standardverhalten...

Merkwürdig, habe ich nun auch gemacht, nur um es nachvollziehen zu können,
und was soll ich sagen? Bei mir, auch Win10, öffnet sich ein neuer Tab.

Mira_Belle

Zitat von BrokenHeart

sucht aber nach der Funktionalität, die einen neuen Tab öffnet, wenn man auf die Tableiste doppelt klickt!

Oh, das kommt davon, wenn man nicht zu 100% bei der Sache ist. Sorry.

Also ich habe soeben ein neues Profil erstellt und, ....
bei "doppelklick" in die Tableiste mit der linken Maustaste öffnet sich ein neuer TAB.
Und nun?

Mira_Belle

Versuch mal dieses Skript.

JavaScript

// 'Doubleclick on tab reloads tab' script for Firefox 126+ by Aris

/* ***************************************************************************************************************** */
/* Github: https://github.com/Aris-t2/CustomJSforFx/blob/master/scripts/tabstoolbar_doubleclickontab_reloadtab.uc.js */
/* ***************************************************************************************************************** */

var DoubleClickOnTabReloadTab = {
	init: function() {
		try {
			gBrowser.tabContainer.addEventListener("dblclick", function abcde(e) {
				if(e.button==0) {
					BrowserCommands.reload();
					e.stopPropagation();
					e.preventDefault();
				}
			}, false);
		} catch(e) {}
	}
}
setTimeout(function() {
  	DoubleClickOnTabReloadTab.init();
},500);

Alles anzeigen

Funktioniert hier mit Firefox 146.0 (64-Bit)

Mira_Belle

Zitat von Horstmann

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

Doch, doch, danke schön.
Klappt super.
Und auch für den Tipp mit der Leiste und der Rahmenbreite!
Denn das hatte ich ganz vergessen!

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.

JavaScript

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

(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      = '34px',                  // 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 toolbar = document.createXULElement('toolbar');
  toolbar.id = 'new_flybar';
  toolbar.setAttribute('orient', 'vertical');
  toolbar.setAttribute('customizable', true);
  toolbar.setAttribute('mode', 'icons');
  toolbar.setAttribute('context', 'toolbar-context-menu');
  toolbar.setAttribute('class','toolbar-primary chromeclass-toolbar browser-toolbar customization-target');
  toolbar.setAttribute('toolboxid', 'navigator-toolbox');
  toolbar.setAttribute('toolbarname', 'New Toolbar');
  toolbar.setAttribute('label', 'New Toolbar');

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

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

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

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

  try {
    CustomizableUI.createWidget({
      id,
      defaultArea: CustomizableUI.AREA_NAVBAR,
      label,
      tooltiptext,
      onCreated: (button) => {
        button.style.MozContextProperties = 'fill, stroke, fill-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-border_width: 2px;
      --ug-border_radius: 8px;
      --ug-border_color: #f3a200;
    }

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

    #new_flybar {
      display: flex;
      width: var(--ug-toolbar_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-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 {
      transform: ${isPosH === 0 ? 'translateX(100%)' : 'translateX(-100%)'};
      opacity: 0;
      border-width: 0 !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;
    }
  `;

  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

Skript ist unter Zuhilfenahme von KI entstanden.

PS:
Das mit dem Pfeil war wirklich eine blöde Idee,
aber hinterher ist man immer schlauer, heißt es doch, oder?

Mira_Belle

Sören Hentzschel Danke für Deine nachträgliche Antwort!
Das mit den Quellen konnte ich nun auch nachvollziehen und werde das in Zukunft gar nicht mehr verfolgen noch posten.

Zum Erstellen, bzw. abändern von Skripten werde ich nach wie vor KI nutzen.
Natürlich probiere ich erst selber aus, was ich schon kann und was nicht.

Nur eine Frage! Wie, mit welchem Satz soll ich auf den gebrauch einer KI hinweisen und, soll auch die KI genannt werden?
Ich nutze ja gelegentlich verschiedene und mach daraus einen Wettkampf der KI's.

Mira_Belle

Zitat von Horstmann

Wobei sich bei den Versionen mit Extra Button schon die Frage stellt, warum man nicht einfach den Hauptbutton benutzt, ...

Das frage ich mich auch.
Ich bin noch am Testen und hatte diese Idee.
Ob es nun sinnvoll ist, steht auf einem anderen Blatt.
Und wie und ob ich so eine Leite nutzen werde, steht auch noch nicht zu 100% fest,
aber so habe ich nun ein halbes dutzend Optionen.
Danke.

Mira_Belle

Zitat von Horstmann

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.

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

Zitat von Horstmann

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.

Und da ich mit CSS irgendwie auf Kriegsfuß stehe, wenn es um so aufwändigen und komplexen Code geht,
bleibe ich erst einmal bei meiner Interpretation Deiner Leiste.

Aber vielen lieben Dank für die zusätzliche Leiste.

Mira_Belle

Die Version aus #22 funktionierte wunderbar!
Von der Optik gefiel sie mir auch.

Nun sehe ich Deine neue Variante, und dachte, cool, übertrage doch einfach den Code für das "Klicken" auf den Pfeil.

Falsch gedacht!!
Das CSS ist ja sowas von anders! Da steige ich nicht durch.
Und leider gefällt mir die Optik nicht!
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.

Mira_Belle

Danke Horstmann
Mit margin-inline: 0px !important; das Problem mit der Ausrichtung gelöst!

Und da das Problem mit der Hintergrundfarbe in Deinem vorgeschlagenen Skript,
wie auch in Mitlesers Skript vorhanden war/ist, konnte die Ursache ja nur im Skript
für die eigenen Buttons liegen.
Habe den Fehler lokalisieren können und werde dahingehen alle "Buttons" überarbeiten.

Mira_Belle

Zitat von Horstmann

Aus dem Pfeil kann man auch einen zusätzlichen Button machen, der das ein/ausblenden bei click übernimmt; nur ein Button und hover Funktion, das wäre mir zu viel.

Da komme ich vielleicht noch darauf zurück, aber vorerst nicht!

Ich habe mit dem, mit Deinem Skript etwas herumgespielt.
Learning by doing, sozusagen.

Hier mal mein bisheriges Ergebnis, zu dem ich aber noch Fragen hätte!

JavaScript

//Toggle newtoolbar 8 rechts/links

(function() {

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

        let ButtonIcon = 'flower-satt32.png';
        let Fly_Position = 0;  // 0 = right , 1 = left

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

        let Path = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir, 'chrome', 'icons'));

        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("toolboxid","navigator-toolbox");
        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");
    };

const css =`


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

    --ug-arrow_width: 20px;
    --ug-arrow_height: 34px;

    --ug-newbar_bg_color: #2b2b2b;
    --ug-newbar_radius: 8px;
    --ug-fly_border: 3px;
    --ug-fly_border_color: orange;
    --ug-fly_delay: 3s; /* animation delay when closing */
}

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

#new_flybar {
    display: flex;
    min-width: 0px !important;
    width: var(--ug-newbar_width);
    overflow: hidden !important;
    justify-content: center !important;
    padding-block: 4px;
    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);
    border-radius: 0 0 0 var(--ug-newbar_radius);
    margin-inline: 0px calc(0px - 2*var(--ug-fly_border));
    transition: width 0.5s ease, margin 0.5s ease;
    transition-delay: var(--ug-fly_delay);
}

 #new_flybar:not([customizing]):hover {
    width: var(--ug-newbar_max_width);
    margin-inline: 0px calc(0px - 1*var(--ug-fly_border));
    transition-delay: 0s;
}

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

#new_flybar > :is(.toolbarbutton-1, toolbaritem),
#new_flybar toolbarpaletteitem > :is(.toolbarbutton-1, toolbaritem) {
    margin-block: 2px !important;
    padding: 0px !important;
    opacity: 0 !important;
    transition: opacity 0.25s ease;
    transition-delay: var(--ug-fly_delay);
}

#new_flybar:not([customizing]):hover > :is(.toolbarbutton-1, toolbaritem) {
    opacity: 1 !important;
    transition: opacity 0.5s ease;
    transition-delay: 0s;
}

/*---  arrow  ---*/

#new_flybar::before {
    content:"";
    display: flex;
    position: absolute;
    background-color: var(--ug-newbar_bg_color);    
    top: 0px;
    left: calc(-0px - var(--ug-arrow_width) - 1*var(--ug-fly_border));
    height: var(--ug-arrow_height);
    width: calc(var(--ug-arrow_width) + 1*var(--ug-fly_border));
    /*background-image: url(chrome://global/skin/icons/arrow-left.svg);*/
background-image: url("${Path}/Chevron-left.svg");
-moz-context-properties: fill, fill-opacity;
fill: #fafafa;
    background-repeat: no-repeat;
    background-size: 16px;
    background-position-x: left calc(50% - 0.5*var(--ug-fly_border)) ;
    background-position-y: calc(50% - 0px);
    border-right-width: 0px !important;
    border-radius: var(--ug-newbar_radius) 0 0 var(--ug-newbar_radius);
    border: var(--ug-fly_border) solid var(--ug-fly_border_color);
    transition: right 0.5s ease, left 0.5s ease, margin 0.5s ease;
    transition-delay: var(--ug-fly_delay);
}

#new_flybar:hover::before {
    /*background-image: url(chrome://global/skin/icons/arrow-right.svg);*/
background-image: url("${Path}/Chevron-right.svg");
-moz-context-properties: fill, fill-opacity;
fill: #fafafa;
    transition-delay: 0s;
}

/*---  left  ---*/

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

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

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

#flybox_new.fly_left #new_flybar::before {
    left: unset;
    right: calc(-0px - var(--ug-arrow_width) - 1*var(--ug-fly_border));
    border-left-width: 0px !important;
    border-right-width: var(--ug-fly_border) !important;
    border-radius: 0 var(--ug-newbar_radius) var(--ug-newbar_radius) 0;
    background-image: url(chrome://global/skin/icons/arrow-right.svg);
    background-position-x: right calc(50% - 0.5*var(--ug-fly_border)) ;
}

 #flybox_new.fly_left #new_flybar:hover::before {
    background-image: url(chrome://global/skin/icons/arrow-left.svg);
}


/*---  customizing  ---*/

#new_flybar[customizing] {
    min-width: var(--ug-newbar_max_width) !important;
    min-height: var(--ug-newbar_max_width) !important;
    padding-bottom: 48px !important;
    border-radius: var(--ug-newbar_radius) 0 0 var(--ug-newbar_radius) !important;
}

#new_flybar toolbarpaletteitem > :is(.toolbarbutton-1, toolbaritem) {
    opacity: 1 !important;
}

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

#new_flybar[customizing]::before {
    display: none !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

Es funktioniert so weit alles recht gut, nur warum werden eigene Buttons anders behandelt als jene,
die von Erweiterungen stammen.

Zum Beispiel werden die Buttons von Erweiterungen weiter rechts dargestellt.
Sie sind also etwas außerhalb der Mitte.
Dann "eigene" Buttons, deren Hintergrundfarbe, beim Hovern, entspricht nicht der im Skript definierten Farbe.
Bei einem roten Symbol im Button ist die "Hoverfarbe" dann auch leicht rötlich.
Bei blau bläulich und bei gelb eben gelblich.
Nur bei Buttons von Erweiterungen, da stimmt es!

Mira_Belle

Horstmann Cool, das ist ja fast so, wie ich mir das vorgestellt habe!

Beiträge von Mira_Belle

Seitennavigation - Fly Out Menü

Seitennavigation - Fly Out Menü

Seitennavigation - Fly Out Menü

Seitennavigation - Fly Out Menü

Seitennavigation - Fly Out Menü

Seitennavigation - Fly Out Menü

[FFX 145.x] Doppelklick (linke Maustaste) auf die Tableiste neuen Tab öffnen?

Seitennavigation - Fly Out Menü

[FFX 145.x] Doppelklick (linke Maustaste) auf die Tableiste neuen Tab öffnen?

[FFX 145.x] Doppelklick (linke Maustaste) auf die Tableiste neuen Tab öffnen?

[FFX 145.x] Doppelklick (linke Maustaste) auf die Tableiste neuen Tab öffnen?

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ü