Beiträge von Mira_Belle

// ==UserScript==
// @name           zzzz-MultiRowTab_LiteforFx48.uc.js
// @namespace      http://space.geocities.yahoo.co.jp/gl/alice0775
// @description    多段タブもどき実験版 CSS入れ替えまくりLiteバージョン
// @include        main
// @compatibility  Firefox128esr Firefox131+
// @author         Alice0775
// @version        2016/08/05 00:00 Firefox 48
// @version        2016/05/01 00:01 hide favicon if busy
// @version        2016/03/09 00:01 Bug 1222490 - Actually remove panorama for Fx45+
// @version        2016/02/09 00:01 workaround css for lwt
// @version        2016/02/09 00:00
// ==/UserScript==
"use strict";

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

    // -- Config --

    const                                        // タブバーの段数
    TabBar_Rows =                      	false	,// [false] = 段数無制限
                                                 //  true   = 段数指定
    Maximum_Rows =                     	3		,// 段数指定 デフォルト3段

                                                 // ProtonUI タブの見た目
    ProtonUI =                         	true	,// [true] = ProtonUI デフォルト
                                                 //  false = Firefox90以前は出来た設定で「browser.proton.enabled」を「false」にした時の見た目にする
                                                 //          タブの周りにある空白を0にしてUI密度の高さにするので上下にあった空白の分-8px低くなります

                                                 // タブバーの位置
    TabBar_Position =                  	0		,// [0] = ツールバーの上 デフォルト
                                                 //  1  = ツールバーの下
                                                 //  2  = ウインドウの下

                                                 // タブバーの位置デフォルト用 タイトルバーボタン[－□×]を隠くしてその分タブバーの横幅を広く使う
    TitleBar_Button_Autohide =         	false	,// [false] = 使用しない
                                                 //  true   = 使用する
                                                 // タイトルバーボタン[－□×]の外枠を小さくして透明化、タブバーの右上をマウスオーバーで元のサイズに戻して透明化を解除

                                                 // UI密度 タブの高さ
    UI_Density_Compact =               	29		,// デフォルト29px コンパクト
    UI_Density_Normal =                	36		,// デフォルト36px 通常
    UI_Density_Touch =                 	41		,// デフォルト41px タッチ
                                                 // 同じ様なCSSを書いた場合userChrome.cssが優先されます

                                                 // タブの横幅
    Tab_Min_Width =                    	76		,// デフォルト76px  最小値
    Tab_Max_Width =                    	225		,// デフォルト225px 最大値
                                                 // 指定する数値を両方同じにすると横幅が固定化します
                                                 // 同じ様なCSSを書いた場合userChrome.cssが優先されます

                                                 // タブをドラッグ＆ドロップで移動中に表示されるアイコンの差し替え
    Tab_Drop_Indicator =               	false	,// [false] = しない デフォルトアイコン
                                                 //  true   = する   赤線アイコン(2px×29px)

                                                 // タブの左右に境界線
    Tab_Separators  =                  	false	,// [false] = 表示しない
                                                 //  true   = 表示する
                                                 // Firefox90以前は出来た設定で「browser.proton.enabled」を「false」にした時に表示されていた境界線のCSSを抽出して調整しています

                                                 // タブバーのドラッグ領域
    Left_Drag_Area =                   	0		,// デフォルト40px 左のドラッグ領域
    Right_Drag_Area =                  	0		,// デフォルト40px 右のドラッグ領域
    Window_Maximize_Left_Drag_Area =   	false	,// [false] = デフォルト
                                                 //  true   = ウィンドウを最大化した時、非表示になる 左のドラッグ領域が表示出来ます
    Fullscreen_Drag_Area =             	false	,// [false] = デフォルト
                                                 //  true   = フルスクリーンにした時、非表示になる 左右のドラッグ領域が表示出来ます

                                                 // ピン留めタブの位置
    Separate_Tabs_and_PinnedTabs =     	false	,// [false] = デフォルト
                                                 //  true   = ピン留めタブをタブの行から分離して上に出来る行へ移動する

                                                 // タブを閉じるボタン
    Tab_Close_Button =                 	0		,// [0] = デフォルト
                                                 //  1  = 非表示
                                                 //  2  = すべてのタブに表示
                                                 //  3  = タブをマウスオーバーで表示

                                                 // タブを一覧表示するボタン
    All_Tabs_Button =                  	false	,// [false] = 非表示
                                                 //  true   = 表示

    // -- Config End --

    css = `

    #TabsToolbar {

      :root[uidensity="compact"] & { --tab-min-height: ${UI_Density_Compact}px; }
      :root:not([uidensity])     & { --tab-min-height: ${UI_Density_Normal}px; }
      :root[uidensity="touch"]   & { --tab-min-height: ${UI_Density_Touch}px; }

      ${Tab_Drop_Indicator ? `
        #tabbrowser-tabs > .tab-drop-indicator {
          background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAAdCAIAAAAPVCo9AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAASSURBVBhXY3growJEQ5+SUQEAOb1EM8kwskcAAAAASUVORK5CYII=) no-repeat center !important;
        }
      ` : ``}

      .titlebar-spacer[type="pre-tabs"] {
        width: ${Left_Drag_Area}px !important;
      }

      .titlebar-spacer[type="post-tabs"] {
        width: ${Right_Drag_Area}px !important;
      }

      ${Window_Maximize_Left_Drag_Area ? `
        .titlebar-spacer {
          :root:not([sizemode="normal"], [inFullscreen]) &[type="pre-tabs"] {
            display: block !important;
          }
        }
      ` : ``}

      ${Fullscreen_Drag_Area ? `
        .titlebar-spacer {
          :root[inFullscreen] &, :root:not([tabsintitlebar]) & {
            display: block !important;
          }
        }
      ` : ``}

      #tabbrowser-arrowscrollbox {
        &::part(scrollbox) {

          &:has(+ spacer) > slot,
          .scrollbox-clip > & {
            flex-wrap: wrap;
          }

          ${TabBar_Rows ? `
            max-height: calc((var(--tab-min-height) + ${ProtonUI ? 8 : 0}px) * ${Maximum_Rows});
            overflow: hidden auto;
            & scrollbar {
              -moz-window-dragging: no-drag;
            }
          ` : ``}

        }

        &::part(overflow-start-indicator),
        &::part(overflow-end-indicator),
        &::part(scrollbutton-up),
        &::part(scrollbutton-down) {
          display: none;
        }

        ${Separate_Tabs_and_PinnedTabs ? `
          &::part(scrollbox) {
            &:has(+ spacer) > slot::after,
            .scrollbox-clip > &::after {
              display: flow-root list-item;
              content: "";
              flex-basis: -moz-available;
              height: 0;
              overflow: hidden;
            }
          }
          .tabbrowser-tab:not([pinned]) {
            #tabbrowser-tabs[haspinnedtabs] & {
              &, & + :not(#tabs-newtab-button) {
                order: 1;
              }
            }
          }
        ` : ``}

        .tabbrowser-tab[fadein]:not([pinned]) {
          --tab-min-width: ${Tab_Min_Width}px;
          --tab-max-width: ${Tab_Max_Width}px;
          max-width: var(--tab-max-width);

          ${Tab_Close_Button !== 0 ? `
            ${Tab_Close_Button === 1 ? `
              .tab-close-button {
                display: none !important;
              }
            ` : Tab_Close_Button === 2 ? `
              .tab-close-button {
                display: block !important;
              }
            ` : Tab_Close_Button === 3 ? `
              .tab-close-button {
                opacity: 0;
              }
              &:hover .tab-close-button {
                opacity: 1;
                display: block !important;
              }
            ` : ``}
          ` : ``}
        }

        #tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs]):not([orient="vertical"]) > & > .tabbrowser-tab:nth-child(1 of :not([pinned], [hidden])) {
          margin-inline-start: 0 !important;
        }

      }

      ${ProtonUI ? `` : `
        .toolbarbutton-1 {
          margin: 0 !important;
          padding: 0 !important;
        }
        .tabbrowser-tab,
        #tabs-newtab-button {
          height: var(--tab-min-height);
          padding: 0 !important;
        }
        .tab-background {
          box-shadow: none !important;
          margin-block: 0 !important;
        }
        .tabbrowser-tab[usercontextid] > .tab-stack > .tab-background > .tab-context-line {
          margin: 1px 2px 0 !important;
        }
      `}

      ${Tab_Separators ? `
        .titlebar-spacer[type="pre-tabs"] {
          border-inline-end: 1px solid color-mix(in srgb, currentColor 20%, transparent);
        }
        .tabbrowser-tab::after,
        .tabbrowser-tab::before {
          border-left: 1px solid color-mix(in srgb, currentColor 50%, transparent);
          height: calc(var(--tab-min-height) - 15%);
          margin-block: auto;
        }
        .tabbrowser-tab:hover::after,
        .tabbrowser-tab[multiselected]::after,
        #tabbrowser-tabs:not([movingtab]) .tabbrowser-tab:has(+ .tabbrowser-tab:hover)::after,
        #tabbrowser-tabs:not([movingtab]) .tabbrowser-tab:has(+ [multiselected])::after {
          height: 100%;
        }
        .tabbrowser-tab::after,
        #tabbrowser-tabs[movingtab] .tabbrowser-tab[visuallyselected]::before {
          content: "";
          display: block;
        }
      ` : ``}

      ${All_Tabs_Button ? `` : `
        #alltabs-button {
          display: none;
        }
      `}

    }

    ${TabBar_Position === 0 ? `
      #TabsToolbar {
        .titlebar-buttonbox-container {
          height: calc(var(--tab-min-height) + ${ProtonUI ? 8 : 0}px);
          margin-bottom: 0 !important;

          ${TitleBar_Button_Autohide ? `
            background-color: color-mix(in srgb, currentColor 20%, transparent);
            height: 6px;
            opacity: 0;
            position: fixed;
            right: 0;
            z-index: 2147483647;
            .titlebar-button {
              opacity: 0;
              padding: 0;
            }
            &:hover {
              height: calc(var(--tab-min-height) + ${ProtonUI ? 8 : 0}px);
              opacity: 1;
              .titlebar-button {
                opacity: 1;
                padding: 8px 17px;
              }
            }
          ` : ``}

        }
      }
    ` : `
      #nav-bar {
        :root:not([inFullscreen]) #toolbar-menubar:not([inactive]) + & > .titlebar-buttonbox-container {
          display: none;
        }
        .titlebar-button {
          padding-block: 0 !important;
        }
      }
    `}

    ${TabBar_Position !== 2 ? `` : `
      body {
        & > #fullscr-toggler[hidden] + tabbox,
        :root[inFullscreen] & > tabbox:hover {
          border-top: 0.5px solid var(--toolbar-bgcolor);
        }
        & > tabbox > #navigator-toolbox {
          border-block: none !important;
        }
        :root[inFullscreen] & {
          & > #navigator-toolbox {
            transition: none;
            &:has(~ tabbox:hover) {
              margin-top: 0 !important;
            }
            &:hover ~ tabbox > #navigator-toolbox {
              max-height: 100%;
          }}
          & > tabbox:not(:hover) {
            border-top: .5px solid transparent;
            & > #navigator-toolbox {
              max-height: 0;
            }
          }
        }
      }
    `}

    `,
    sss = Cc["@mozilla.org/content/style-sheet-service;1"].getService(Ci.nsIStyleSheetService),
    uri = Services.io.newURI("data:text/css;charset=UTF=8," + encodeURIComponent(css));
    if (TabBar_Rows == false) {
      ["0", "2"].find(type => {
        if(sss.sheetRegistered(uri, type)) sss.unregisterSheet(uri, type); sss.loadAndRegisterSheet(uri, type);
      });
    } else {
      ["0", "2", "SSTabRestored", "TabMove", "TabOpen", "TabSelect"].find(type => {
        if(sss.sheetRegistered(uri, type)) sss.unregisterSheet(uri, type); sss.loadAndRegisterSheet(uri, type);
        gBrowser.tabContainer.addEventListener(type, (e) => { e.target.scrollIntoView({ block: "nearest" }); });
      });
    }

    if (TabBar_Position !== 0) {
      if (TabBar_Position === 1) {
        document.getElementById("navigator-toolbox").prepend(
          document.getElementById("toolbar-menubar"),
          document.getElementById("nav-bar"),
          document.getElementById("PersonalToolbar"),
          document.getElementById("titlebar"),
        );
      } else {
        document.getElementById("navigator-toolbox").prepend(
          document.getElementById("toolbar-menubar"),
          document.getElementById("nav-bar"),
          document.getElementById("PersonalToolbar"),
        );
      }
      document.getElementById("nav-bar").appendChild(
        document.querySelector("#TabsToolbar > .titlebar-buttonbox-container")
      );
    }

    if (TabBar_Position === 2) {
      document.body.appendChild(
        document.createXULElement("tabbox")
      ).appendChild(
        document.importNode(document.getElementById("navigator-toolbox"))
      ).appendChild(
        document.getElementById("titlebar")
      );
    }

    gBrowser.tabContainer.addEventListener("dragover", function(event) { this._on_dragover(event); }, false)
    gBrowser.tabContainer.addEventListener("drop", function(event) { this._on_drop(event); }, false)

    gBrowser.tabContainer.on_dragover = function(event) { return false; }
    gBrowser.tabContainer.on_drop = function(event) { return false; }

    gBrowser.tabContainer._on_dragover = function(event) {
      var effects = this.getDropEffectForTabDrag(event);

      var ind = this._tabDropIndicator;
      if (effects == "" || effects == "none") {
        ind.hidden = true;
        return;
      }
      event.preventDefault();
      event.stopPropagation();

      var arrowScrollbox = this.arrowScrollbox;

      if (effects == "link") {
        let tab = this._getDragTargetTab(event, { ignoreTabSides: true });
        if (tab) {
          if (!this._dragTime) {
            this._dragTime = Date.now();
          }
          if (Date.now() >= this._dragTime + this._dragOverDelay) {
            this.selectedItem = tab;
          }
          ind.hidden = true;
          return;
        }
      }

      var tabRect, rect = arrowScrollbox.getBoundingClientRect();
      var newMarginX, newMarginY;
      let newIndex = this._getDropIndex(event);
      let children = this.allTabs;
      if (newIndex == children.length) {
        tabRect = this._getVisibleTabs().at(-1).getBoundingClientRect();
          newMarginX = tabRect.right - rect.left;
      } else {
        tabRect = children[newIndex].getBoundingClientRect();
          newMarginX = tabRect.left - rect.left;
      }
        newMarginY = tabRect.top - rect.top + tabRect.height / 2 - rect.height / 2;

      ind.hidden = false;
      newMarginX += ind.clientWidth / 2;
      ind.style.transform = "translate(" + Math.round(newMarginX) + "px," + Math.round(newMarginY) + "px)";
    }

    gBrowser.tabContainer._on_drop = function(event) {
      var dt = event.dataTransfer;
      var dropEffect = dt.dropEffect;
      var draggedTab;
      let movingTabs;
      if (dt.mozTypesAt(0)[0] == TAB_DROP_TYPE) {
        // tab copy or move
        draggedTab = dt.mozGetDataAt(TAB_DROP_TYPE, 0);
        // not our drop then
        if (!draggedTab) {
          return;
        }
        movingTabs = draggedTab._dragData.movingTabs;
        draggedTab.container._finishGroupSelectedTabs(draggedTab);
      }

      this._tabDropIndicator.hidden = true;
      event.stopPropagation();
      if (draggedTab && dropEffect == "copy") {
        // copy the dropped tab (wherever it's from)
        let newIndex = this._getDropIndex(event);
        let draggedTabCopy;
        for (let tab of movingTabs) {
          let newTab = gBrowser.duplicateTab(tab);
          gBrowser.moveTabTo(newTab, newIndex++);
          if (tab == draggedTab) {
            draggedTabCopy = newTab;
          }
        }
        if (draggedTab.container != this || event.shiftKey) {
          this.selectedItem = draggedTabCopy;
        }
      } else if (draggedTab && draggedTab.container == this) {
        let oldTranslate = Math.round(draggedTab._dragData.translatePos);
        let tabSize = Math.round(draggedTab._dragData.tabSize);
        let translateOffset = oldTranslate % tabSize;
        let newTranslate = oldTranslate - translateOffset;
        if (oldTranslate > 0 && translateOffset > tabSize / 2) {
          newTranslate += tabSize;
        } else if (oldTranslate < 0 && -translateOffset > tabSize / 2) {
          newTranslate -= tabSize;
        }

        let dropIndex;
        if (draggedTab._dragData.fromTabList) {
          dropIndex = this._getDropIndex(event);
        } else {
          dropIndex = this._getDropIndex(event);
         // "animDropIndex" in draggedTab._dragData &&
         // draggedTab._dragData.animDropIndex;
        }
        let incrementDropIndex = true;
        if (dropIndex && dropIndex > movingTabs[0]._tPos) {
          dropIndex--;
          incrementDropIndex = false;
        }

        if (oldTranslate && oldTranslate != newTranslate && !gReduceMotion) {
          for (let tab of movingTabs) {
            tab.toggleAttribute("tabdrop-samewindow", true);
            tab.style.transform = this.verticalMode
              ? "translateY(" + newTranslate + "px)"
              : "translateX(" + newTranslate + "px)";
            let postTransitionCleanup = () => {
              tab.removeAttribute("tabdrop-samewindow");

              this._finishAnimateTabMove();
              if (dropIndex !== false) {
                gBrowser.moveTabTo(tab, dropIndex);
                if (incrementDropIndex) {
                  dropIndex++;
                }
              }

              gBrowser.syncThrobberAnimations(tab);
            };
            if (gReduceMotion) {
              postTransitionCleanup();
            } else {
              let onTransitionEnd = transitionendEvent => {
                if (
                  transitionendEvent.propertyName != "transform" ||
                  transitionendEvent.originalTarget != tab
                ) {
                  return;
                }
                tab.removeEventListener("transitionend", onTransitionEnd);

                postTransitionCleanup();
              };
              tab.addEventListener("transitionend", onTransitionEnd);
            }
          }
        } else {
          this._finishAnimateTabMove();
          if (dropIndex !== false) {
            for (let tab of movingTabs) {
              gBrowser.moveTabTo(tab, dropIndex);
              if (incrementDropIndex) {
                dropIndex++;
              }
            }
          }
        }
      } else if (draggedTab) {
        // Move the tabs. To avoid multiple tab-switches in the original window,
        // the selected tab should be adopted last.
        const dropIndex = this._getDropIndex(event);
        let newIndex = dropIndex;
        let selectedTab;
        let indexForSelectedTab;
        for (let i = 0; i < movingTabs.length; ++i) {
          const tab = movingTabs[i];
          if (tab.selected) {
            selectedTab = tab;
            indexForSelectedTab = newIndex;
          } else {
            const newTab = gBrowser.adoptTab(tab, newIndex, tab == draggedTab);
            if (newTab) {
              ++newIndex;
            }
          }
        }
        if (selectedTab) {
          const newTab = gBrowser.adoptTab(
            selectedTab,
            indexForSelectedTab,
            selectedTab == draggedTab
          );
          if (newTab) {
            ++newIndex;
          }
        }

        // Restore tab selection
        gBrowser.addRangeToMultiSelectedTabs(
          gBrowser.tabs[dropIndex],
          gBrowser.tabs[newIndex - 1]
        );
      } else {
        // Pass true to disallow dropping javascript: or data: urls
        let links;
        try {
          links = browserDragAndDrop.dropLinks(event, true);
        } catch (ex) {}

        if (!links || links.length === 0) {
          return;
        }

        let inBackground = Services.prefs.getBoolPref(
          "browser.tabs.loadInBackground"
        );
        if (event.shiftKey) {
          inBackground = !inBackground;
        }

        let targetTab = this._getDragTargetTab(event, { ignoreTabSides: true });
        let userContextId = this.selectedItem.getAttribute("usercontextid");
        let replace = !!targetTab;
        let newIndex = this._getDropIndex(event);
        let urls = links.map(link => link.url);
        let csp = browserDragAndDrop.getCsp(event);
        let triggeringPrincipal =
          browserDragAndDrop.getTriggeringPrincipal(event);

        (async () => {
          if (
            urls.length >=
            Services.prefs.getIntPref("browser.tabs.maxOpenBeforeWarn")
          ) {
            // Sync dialog cannot be used inside drop event handler.
            let answer = await OpenInTabsUtils.promiseConfirmOpenInTabs(
              urls.length,
              window
            );
            if (!answer) {
              return;
            }
          }

          gBrowser.loadTabs(urls, {
            inBackground,
            replace,
            allowThirdPartyFixup: true,
            targetTab,
            newIndex,
            userContextId,
            triggeringPrincipal,
            csp,
          });
        })();
      }

      if (draggedTab) {
        delete draggedTab._dragData;
      }
    }

};

/*** Curved tabs beta D2b sauber - dunkles Theme ***/
/* aus #130 https://www.camp-firefox.de/forum/thema/137164-tabform/?postID=1239391#post1239391 */

/* -------------------------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------- */

/*** General adjustments ***/
/*** Allgemeine Anpassunge ***/

:root {

    /* Tabs bar height adjust */
    /* Tabbar Höhe einstellen */
        /*--tabs-navbar-shadow-size: 0 !important;*/
        /*--tab-block-margin: 4px !important;*/
        --tab-block-margin: var(--uc-block-margin) !important;      /*  2px */
        --tab-min-height: var(--uc-min-height) !important;          /* 36px */
    
    /* Edges without corner Svg /  Radius */
    /* Kanten ohne Ecken (svg / Radien */
        /*--ug-radius: 20px;*/
        --ug-radius: var(--uc-radius) !important;                   /* 19px */
    
    
    /* Edges (borders, outlines) colors */
    /* Farben für Ränder (Umrandungen, Konturen) */
    
    /* Edges not selected */
    /* Ränder nicht ausgewählt */
/*        --ug-color-border: hsla(0, 0%, 83%, 0.5);                   /* hellgrau unselected Kante Tab */
/*        --ug-color-border: var(--uc-color-orange-test); */
        --ug-color-border: var(--uc-color-grey-light);
        --ug-stroke: var(--ug-color-border);                         /* unselected Kante Svg */
/*        --ug-kante_hova: hsla(0, 0%, 93%, 0.65);                    /* mittelgrau unselected alle Kanten hover */
        --ug-kante_hova: var(--ug-color-border);
    
    /* Edges selected , multiselected */
    /* Kanten ausgewählt, mehrfach ausgewählt */
/*        --ug-color-border_select: hsla(0, 0%, 93%, 0.75);           /* mittelgrau hell+ selected Kante Tab */
        --ug-color-border_select: var(--uc-color-orange-normal);
        --ug-stroke_select: var(--ug-color-border_select);           /* selected Kante Svg */
/*        --ug-kante_hova_select: hsla(0, 0%, 100%, 0.8);             /* mittelgrau hell++ multiselected alle Kanten hover */
        --ug-kante_hova_select: var(--uc-color-orange-normal);

    
    /* Tabs background colors:  */
    
/*        --ug-color1: hsla(0, 0%, 83%, 0.25);                        /* hellgrau basis, unselected */
/*        --ug-color2: hsla(35, 80%, 60%, 0.25);                      /* zart orange selected */
/*        --ug-color2-multi: hsla(35, 80%, 40%, 0.25);                /* zart orange dunkel+ multiselected */
/*        --ug-color_multi_hova: hsla(35, 70%, 40%, 0.35);            /* zart orange dunkel++ multiselected hover */
/*        --ug-color_hova: hsla(0, 0%, 50%, 0.25);                    /* mittelgrau#2 unselected hover */

        --ug-color1: var(--uc-color);                               /* hellgrau basis, unselected */
        --ug-color2: var(--uc-color-sel);                           /* zart orange selected */
        --ug-color2-multi: var(--uc-color-musel);                   /* zart orange dunkel+ multiselected */
        --ug-color_hova: var(--uc-color_hov);                       /* mittelgrau unselected hover */
        --ug-color_multi_hova: var(--uc-color_musel_hov);           /* zart orange dunkel++ multiselected hover */


    /* Tab bar unten, border bottom color */
/*        --ug-color_bottom: hsla(0, 0%, 93%, 1);                   /* hellgrau nicht transparent, Kante unten */
        --ug-color_bottom: var(--uc-color-orange-normal);

    
    /* Symbole für about:xxx */
        --ug-color_tab-icon: var(--uc-color-red-normal);
}
    /*** General adjustments end ***/
/* -------------------------------------------------------------------------------------------------------------- */    
/* -------------------------------------------------------------------------------------------------------------- */

                                                               /*** Tabs base ***/

    /* tabs connected bottom */
    
    .tab-background {
        margin-block: calc(2 * var(--tab-block-margin)) 0 !important;
    }
    
    /*** Tabs Radien, borders, corners, tab shapes order , inline borders only where no custom corners ***/
    
    /*  Basis alle Tabs  */
    
    .tabbrowser-tab .tab-background {
        border-radius: var(--ug-radius) var(--ug-radius) var(--ug-radius)  0 !important;
        border: 1px solid !important;
        /*border-bottom: none !important;*/
    }
    
    .tabbrowser-tab:not([pinned]) .tab-background {
        border-left: none !important;
    }
    
    /*  Zusatzregeln, überschreiben Basis alle Tabs  */
    
    /* selected , pinned tabs */
    .tabbrowser-tab:is([visuallyselected], [pinned]) .tab-background {
        border-radius: var(--ug-radius) var(--ug-radius) 0 0 !important;
    }
    /* Tab selected no inline border */
    .tabbrowser-tab[visuallyselected]:not([pinned]) .tab-background {
        border-inline: none !important;
    }
    
    /* Tab after selected tab completely round, no corners */
    .tabbrowser-tab:is([visuallyselected]):not([pinned]) + .tabbrowser-tab:not([visuallyselected]) .tab-background {
        border-radius: var(--ug-radius) !important;
        border-left: 1px solid var(--ug-color-border) !important;
    }
    
    /* Last tab dual corners, unless it comes after selected tab */
    .tabbrowser-tab:not([pinned]):last-of-type .tab-background {
        border-radius: var(--ug-radius) var(--ug-radius) 0 0 !important;
        border-inline: none !important;
    }
    .tabbrowser-tab:is([visuallyselected]):not([pinned]) + .tabbrowser-tab:not([visuallyselected]):last-of-type .tab-background {
        border-radius: var(--ug-radius) var(--ug-radius) 0 var(--ug-radius) !important;
        border-right: none !important;
    }

    /* Erster Tab nach ausgewähltem Tab komplett rund, keine Ecken !! multiselected */
    .tabbrowser-tab:is([visuallyselected]):not([pinned]) + .tabbrowser-tab:is([visuallyselected], [multiselected]) .tab-background {
        border-color: var(--uc-color-orange-normal) !important;
    }

                                                                  /***  COLORS  ***/
    
    /**  In about:config set svg.context-properties.content.enabled to true  **/
    
    /*  Basis alle Tabs  */
    
    .tabbrowser-tab .tab-background {
        outline: none !important;
        box-shadow: none !important;
        background-color: var(--ug-color1) !important;
        border-color: var(--ug-color-border) !important;
        stroke: var(--ug-stroke) !important;
        fill: var(--ug-color1) !important;
        border-bottom: none !important;   /* Muss zusätzlich, da unten ja keine Kante sein soll !  */
    }
    
    /*  Zusatzregeln, überschreiben Basis alle Tabs  */
    
    /* Colors, outlines: selected / multiselected / hover */
    
    /* tabs selected base */
    .tabbrowser-tab:is([visuallyselected], [multiselected]) .tab-background {
        background-image: none !important;
        background-color: var(--ug-color2) !important;
        stroke: var(--ug-stroke_select) !important;
        border-color: var(--ug-color-border_select) !important;
        fill: var(--ug-color2) !important;
    }
    
    /* tabs multiselected */
    .tabbrowser-tab:not([visuallyselected])[multiselected] .tab-background {
        background-color: var(--ug-color2-multi) !important;
        fill: var(--ug-color2-multi) !important;
    }
    
    /* tabs multiselected hover */
    .tabbrowser-tab:not([visuallyselected]):hover .tab-background {
        background-color: var(--ug-color_multi_hova) !important;
        fill: var(--ug-color_multi_hova) !important;
        stroke: var(--ug-kante_hova_select) !important;
        border-color: var(--ug-kante_hova_select) !important;
    }
    
    /* tabs unselected hover */
    .tabbrowser-tab:not([visuallyselected], [multiselected]):hover .tab-background {
        background-color: var(--ug-color_hova) !important;
        fill: var(--ug-color_hova) !important;
        stroke: var(--ug-kante_hova) !important;
        border-color: var(--ug-kante_hova) !important;
    }
    
/* -------------------------------------------------------------------------------------------------------------- */
    /* fill colors selected / unselected hover */
    .tabbrowser-tab:is([visuallyselected], [multiselected]) .tab-background::before, 
    .tabbrowser-tab:is([visuallyselected], [multiselected]) .tab-background::after {
        fill: var(--ug-color2) !important;       
        stroke: var(--uc-color-orange-normal) !important;
    }

    .tabbrowser-tab:not([visuallyselected]):is([multiselected]) .tab-background::before, 
    .tabbrowser-tab:not([visuallyselected]):is([multiselected]) .tab-background::after {
        fill: var(--ug-color2-multi) !important;
    }

    .tabbrowser-tab:not([visuallyselected]):is([multiselected]):hover .tab-background::before, 
    .tabbrowser-tab:not([visuallyselected]):is([multiselected]):hover .tab-background::after {
        fill: var(--ug-color_multi_hova) !important;
    }

    /*  right corner bg, selected --> vor not selected  */
    .tabbrowser-tab:is([visuallyselected]) + .tabbrowser-tab:not([visuallyselected]) .tab-background::before {
        background-image: none !important;
    }
/* -------------------------------------------------------------------------------------------------------------- */

                                                          /***  tabs corners  ***/
    /*  base  */
    
    #TabsToolbar {
        --ug-corner-size: var(--tab-min-height) !important;                     /*  36px */
        --ug-corner-image: url("../icons/tab_corner.svg") !important;
    }
    
    .tabbrowser-tab .tab-background::before, 
    .tabbrowser-tab .tab-background::after {
        -moz-context-properties: fill, fill-opacity, stroke, stroke-opacity !important;
        content: "";
        position: absolute;
        width: var(--ug-corner-size) !important;
        height: var(--ug-corner-size) !important;
        background-size: var(--ug-corner-size) !important;
        background-repeat: no-repeat !important;
        background-position: bottom center !important;
        mask-image: linear-gradient(215deg, transparent, black 18px) !important;
        pointer-events: none !important;
    }
    
    /*  left  */
    .tabbrowser-tab .tab-background::before {
        left: calc(0px - var(--ug-corner-size) / 2);                            /* -18px */
        background-image: var(--ug-corner-image) !important;
    }
    
    /*  right  */
    .tabbrowser-tab:is([visuallyselected], :last-of-type) .tab-background::after {
        right: calc(0px - var(--ug-corner-size) / 2);                           /* -18px */
        background-image: var(--ug-corner-image) !important;
        transform: scaleX(-1) !important;
    }

                                            /****   Margins etc. overflow fix   ****/
    /*
    .tabbrowser-tab:not([pinned]) {
        outline: 1px solid hsla(135, 80%, 50%, 0.75) !important;
        outline-offset: -1px !important;
    }
    */
    
    /* Base values ; tab padding, margin */
    #tabbrowser-tabs {
    /*    --ug-tab_Pad: calc(8px + var(--ug-corner-size) / 2);                  /*  26px */
        --ug-tab_Pad: calc(-10px + var(--ug-corner-size) / 2);                  /*   8px */

    /*    --ug-tab_Marge: calc(0px - var(--ug-corner-size) - 12px);             /* -48px */
        --ug-tab_Marge: calc(0px - var(--ug-corner-size) / 2 + 6px);            /* -12px */
    }

    /* Basis all Tabs */
    .tabbrowser-tab:not([pinned]) {
        overflow: visible !important;
        padding-inline: var(--ug-tab_Pad) !important;
    /*    padding-inline: 0px !important; */
    }

    /* Tab before any tab */
    .tabbrowser-tab:not([pinned], [visuallyselected]) + .tabbrowser-tab:not([pinned]) {
        margin-inline: var(--ug-tab_Marge) 0px !important;
    /*    margin-inline: -48px 0px !important; */
    }

    /* Tab after selected */
    .tabbrowser-tab:not([pinned]):is([visuallyselected]) + .tabbrowser-tab:not([pinned]) {
        margin-inline: var(--ug-tab_Marge) 0px !important;
    /*    margin-inline: -48px 0px !important; */
    }

    /* Tab selected  */
    .tabbrowser-tab:not([pinned]):is([visuallyselected], :last-of-type) {
        margin-inline: 0px !important;
    }

    /* Last tab after selected tab */
    .tabbrowser-tab:is([visuallyselected]):not([pinned]) + .tabbrowser-tab:not([visuallyselected]):last-of-type {
        margin-inline: var(--ug-tab_Marge) 0px !important;
    /*    margin-inline: -48px 0px !important; */
    }
    /***  Tab left higher z index / Vorrang vor Tab rechts  ***/
    .tabbrowser-tab:not([pinned]) .tab-content {
        z-index: 1 !important;
    }

    /***  Space for corner left/right - first/last tab, overflow bugs fix  ***/
    /* Test #6 */

    #tabbrowser-tabs .tabbrowser-tab:nth-child(1 of :not([pinned], [hidden])) {
    /*    margin-inline-start: 0px !important; */
        margin-inline-start: 10px !important;
    }
    #tabbrowser-tabs:not([pinned]) .tabbrowser-tab:last-of-type {
    /*    margin-inline-start: 0px !important; */    
        margin-inline-end: 10px !important;
    }
    #tabbrowser-tabs[overflow]:not([movingtab]) .tabbrowser-tab:nth-child(1 of :not([pinned], [hidden])) {
        margin-inline-start: -12px !important;
    }
    #tabbrowser-tabs[overflow]:not([movingtab]) .tabbrowser-tab:last-of-type {
        margin-inline-end: -12px !important;
    }
    /* Move buttons up/down, optional, OFF */
    /*
    #TabsToolbar toolbarbutton {
        margin-top: -1px !important;
    }
    #tabbrowser-tabs {
        --ug_margin_plus: 1px -1px;
    }
    :is(#scrollbutton-up, #scrollbutton-down) {
        margin-block:  var(--ug_margin_plus) !important;
    }
    */

    /*-----------------------------------------------*/
    /****     Tabtext nicht verkürzt bei hover    ****/
    /*-----------------------------------------------*/

    /* Ein längerer Tabtext wird am Ende ja ausgeblendet. */
    /* Diese Verkürzung bei hover hätte ich gerne verhindert. */

    .tabbrowser-tab:not(:hover) > .tab-stack > .tab-content > .tab-close-button {
        padding-inline-start: 7px !important;
        width: 24px !important;
    }
  
    .tabbrowser-tab[visuallyselected=true]:not(:hover),
    #tabbrowser-tabs:not([closebuttons=activetab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab:not([visuallyselected=true]):not(:hover) {
        --tab-label-mask-size: 1em !important;
    }
    
    /* Tabtext wird nicht ausgeblendet */    
    .tab-label-container[textoverflow][labeldirection=ltr]:not([pinned]),
    .tab-label-container[textoverflow]:not([labeldirection]):not([pinned]):-moz-locale-dir(ltr) {
        mask-image: none !important;
    }

    /*--------------------------------------------*/
    /****     Tabbar nach unten verschieben    ****/
    /*--------------------------------------------*/
    
    #navigator-toolbox {
        position: relative !important;
        padding-bottom: calc( var(--tab-min-height) + 8px );                    /*  44px */
    /*    padding-bottom: 42px !important; */
    }
    
    #TabsToolbar {
        position: absolute !important;
        display: block !important;
    }

    /*--------------------------------------------------*/
    /****  Trennlinie zwischen Inhalt und Tableiste  ****/
    /*--------------------------------------------------*/

    #TabsToolbar {
        bottom: 6px !important;         /* Tableiste etwas angehoben */
        width: 100vw !important;        /* Tableistenbreite festgelegt */
        background-image: linear-gradient(to top, var(--ug-color_bottom) 7px, transparent 1px) !important;
        margin-bottom: -7px !important; /* Trennlinie nach unten verschoben */
        padding-bottom: 7px !important; /* Tabs etwas angehoben */
    }

    /*---------------------------------------------*/
    /****     Symbole für about:xxx anpassen    ****/
    /*---------------------------------------------*/

	.tab-icon-image {
		-moz-context-properties: fill !important;
	/*	fill: #FFAA00 !important;	*/
		fill: #FF0000 !important;
	}

    /*-----------------------------------------------------------------------*/
    /* Ausblenden des Meüs "Link in neuem Tab in Umgebung öffnen" im Popoup **/
    /*-----------------------------------------------------------------------*/

    #context_reopenInContainer {
        display: none !important;
      }
      
    /*---------------------------------------------------*/
    /************** Tab schließen X hover  ***************/
    /*---------------------------------------------------*/

    .tabbrowser-tab:not([pinned]) .tab-close-button {                   /* Button rund */
        border-radius: 50% !important;
        display: flex !important;
    }

    .tab-content > .tab-close-button:hover {
        /*outline: none !important;*/
        outline: 1px solid rgba(255, 0, 0, 0.3) !important;
        outline-offset: -1px !important;
        background-color: rgba(255, 0, 0, 0.4) !important;              /* Rot */
        box-shadow: 0 0 1em rgba(255, 0, 0, 0.7) !important;            /* Rot, glow */
    }   

    /*---------------------------------------------------*/
    /************* New Tab Button (+) hover  *************/
    /*---------------------------------------------------*/

    /* Abstand vom Tab */
    #tabbrowser-arrowscrollbox-periphery #tabs-newtab-button .toolbarbutton-icon {
        margin-left: 6px !important;
        border-radius: 50% !important;
    }

    /* New Tab (+) button hover outline */
    #tabbrowser-arrowscrollbox-periphery:hover #tabs-newtab-button .toolbarbutton-icon {
        outline: 1px solid var(--uc-color-orange-normal) !important;
        outline-offset: -1px !important;
        background-color: var(--ug-color1) !important;
    }

    /* New Tab (+) button hover color */
    #tabbrowser-arrowscrollbox-periphery:hover #tabs-newtab-button:hover {
        fill: var(--uc-color-orange-normal) !important;
    }

    /* Position, closer to last tab */
    #tabbrowser-arrowscrollbox-periphery #tabs-newtab-button {
        margin: 0 !important;
        margin-top: 2px !important;
        padding-inline: 0px !important;
    }
    .tabbrowser-tab:not([pinned]) + #tabbrowser-arrowscrollbox-periphery {
        margin-left: -16px !important;
        z-index: 2 !important;
    }

    /*-------------------------------------------------*/
    /*************** Schrift in den Tabs ***************/
    /*-------------------------------------------------*/

    .tab-label {
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    /*    text-overflow: " " !important;    */
        text-overflow: " …" !important;
        white-space: nowrap !important;
        max-width: 95% !important; 
        text-shadow: 1px 1px 1.5px var(--uc-color-black-light) !important;  /* Schatten hinter Schrift */
    }
    .tab-label[selected]  {
        color: var(--uc-color-white-normal) !important;                     /* Aktiver Tab: Schriftfarbe (Orange) */
    }
    .tab-label:not([selected])  {
        color: var(--uc-color-grey-lighter) !important;                     /* Aktiver Tab: Schriftfarbe (Hellgrau) */
    }
    
    /* Move tab content */
    .tab-content {
        margin-top: 1px !important;
    }

/*************** Tests ***************/

    #tabbrowser-tabs {
    /*    --tab-min-width: 76px !important; */
        --tab-min-width: 75px !important;
        --tab-loading-fill: lime !important;      
        --tab-overflow-pinned-tabs-width: 0px !important;
      
    }
    
    /* userChrome.css */
    /* progress-bar page loading in the tab header */
    .tabbrowser-tab:not([usercontextid]) > .tab-stack > .tab-background > .tab-context-line {
        opacity: 0;
        background-color: #FFCC00;
        height: 2px;
        margin-inline: 12px;
        margin-top: 0px;
        border-radius: 90px;
    }
    .tabbrowser-tab:is([busy], [progress]) > .tab-stack > .tab-background > .tab-context-line {
        opacity: 1;
        transform-origin: left center;
        animation: 2s ease-in-out scale;
    }
    .tabbrowser-tab[bursting] > .tab-stack > .tab-background > .tab-context-line {
        transition: opacity 2s ease-out;
    }
    @keyframes scale {
        0% {transform: scaleX(0);}
        100% {transform: scaleX(1);}
    }
        /*background-position: right top -380px, var(--lwt-background-alignment) !important;*/
/*
    *    Gesammelte Werke   *

    #navigator-toolbox {
        background-image: url("../background/Bild1.jpg") !important;
        background-image: linear-gradient(to bottom, #4a4a4a 30%, #9a5a00 80%, #e49800 100%) !important;
        background-image: linear-gradient(to top, black 50px, transparent 10px) !important;
        background-image: linear-gradient(-2deg, rgba(172, 171, 194, 1) 10%, rgba(145, 145, 167, 1) 20%, rgba(120, 119, 140, 1) 35%, rgba(95, 94, 115, 1) 45%, rgba(71, 71, 90, 1) 55%, rgba(48, 48, 67, 1) 65%, rgba(27, 27, 45, 1) 80%, rgba(2, 0, 25, 1) 90%, rgba(0, 0, 0, 1) 100%) !important;

    }
*/    
/*
    #navigator-toolbox { 
        background-image: linear-gradient(1deg, rgba(255, 170, 0, 1) 2%, rgba(223, 144, 0, 1) 4%, rgba(192, 118, 0, 1) 8%, rgba(161, 93, 0, 1) 16%, rgba(131, 69, 0, 1) 32%, rgba(102, 47, 0, 1) 64%, rgba(74, 25, 0, 1) 72%, rgba(47, 3, 0, 1) 80%, rgba(11, 0, 0, 1) 88%, rgba(0, 0, 0, 1) 100%) !important;
    }
*/    

// ==UserScript==
// @name           Quit.uc.js
// @Version        2.1
// @author         Mira Bellenbaum
// @Korrektur	   Sören Hentzschel	
// @Source file    https://www.camp-firefox.de/forum/thema/138324/?postID=1256294#post1256294
// @description    Fügt ans Ende des Kontextmenüs der Tabs eine "Beenden" - Schaltfläche hinzu
// ==/UserScript==

location.href.startsWith('chrome://browser/content/browser.x') && (() => {
    document.getElementById('tabContextMenu').addEventListener('popupshowing', function () {
        // Falls die Schaltfläche bereits existiert, zuerst entfernen, um Mehrfacheinträge zu verhindern
        const existingQuitApp = document.getElementById('context_quitApp');
        if (existingQuitApp) {
            existingQuitApp.remove();
        }

        // Neues Menuitem für "Beenden" eigenständig erstellen
        const quitApp = document.createXULElement('menuitem');
        quitApp.setAttribute('label', 'Beenden');
        quitApp.setAttribute('id', 'context_quitApp'); // Eine ID für einfaches Referenzieren
        quitApp.classList.add('quit-app-separator'); // Klasse für das CSS hinzufügen
        
        // Event für das Menuitem zum Beenden der Anwendung
        quitApp.addEventListener('command', () => {
            goQuitApplication(event); // Anwendung beenden
        });

        // Kontextmenü-Element abrufen
        const tabContextMenu = document.getElementById('tabContextMenu');
        
        // Schaltfläche immer am Ende des Menüs hinzufügen
        tabContextMenu.appendChild(quitApp);

    });
})();

location.href.startsWith('chrome://browser/content/browser.x') && (() => {
    document.getElementById('tabContextMenu').addEventListener('popupshowing', function () {
        // Falls die Schaltfläche bereits existiert, zuerst entfernen, um Mehrfacheinträge zu verhindern
        const existingQuitApp = document.getElementById('context_quitApp');
        if (existingQuitApp) {
            existingQuitApp.remove();
        }

        // Neues Menuitem für "Beenden" eigenständig erstellen
        const quitApp = document.createElementNS('http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul', 'menuitem');
        quitApp.setAttribute('label', 'Beenden');
        quitApp.setAttribute('id', 'context_quitApp'); // Eine ID für einfaches Referenzieren
        quitApp.classList.add('quit-app-separator'); // Klasse für das CSS hinzufügen
        
        // Event für das Menuitem zum Beenden der Anwendung
        quitApp.addEventListener('command', () => {
            goQuitApplication(); // Anwendung beenden
        });

        // Kontextmenü-Element abrufen
        const tabContextMenu = document.getElementById('tabContextMenu');
        
        // Schaltfläche immer am Ende des Menüs hinzufügen
        tabContextMenu.appendChild(quitApp);
    }, { once: false }) // { once: false } sorgt dafür, dass das Event jedes Mal bei der Anzeige ausgelöst wird
})();

// ==UserScript==
// @name           Quit.uc.js
// @author         Mira Bellenbaum
// @Source file    https://www.camp-firefox.de/forum/thema/138324/?postID=1256198#post1256198
// @description    Fügt ans Ende des Kontextmenüs der Tabs eine "Beenden" - Schaltfläche hinzu
// ==/UserScript==

location.href.startsWith('chrome://browser/content/browser.x') && (() => {
    document.getElementById('tabContextMenu').addEventListener('popupshowing', function () {
        // Neues Menuitem für "Beenden" erstellen
        const quitApp = document.createElementNS('http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul', 'menuitem');
        quitApp.setAttribute('label', 'Beenden');
        
        // Event für das Menuitem zum Beenden der Anwendung
        quitApp.addEventListener('command', () => {
            goQuitApplication(event); // Anwendung beenden
        });

        // Schaltfläche am Ende des Menüs hinzufügen
        document.getElementById('tabContextMenu').appendChild(quitApp);
    }, { once: true })
})();