Seitennavigation - Fly Out Menü

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

})();

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

})();

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

})();