Seitennavigation - Fly Out Menü

Mira_Belle

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

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?

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

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

Mira_Belle

Zitat von Horstmann

Evtl. testen:

Perfekt

Danke.

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.

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.

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.

Mira_Belle

Zitat von Horstmann

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

OK, wird gemacht. Danke.

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.

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.

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?