Mehrzeilige Tableiste für aktuelle Firefox-Versionen

Mira_Belle

Zitat von Sören Hentzschel

Da blickt niemand mehr durch – wie ja auch die Nachfrage zeigt.

Mh, ok, nehmen wir an, es ist so, TheRaves Information bezieht sich auf das "tote" Skript aus Beitrag #1.
Dennoch ist es so, dass es hier in diesem Thread mittlerweile drei Versionen für ein Skript für die Tabs gibt.
Daher meine, so finde ich, berechtigte Frage und Anmerkung.
Und bevor es nun eskaliert oder irgendwie drüber und drunter geht, bin ich jetzt raus!
Soll ein jeder mit der Information von TheRave machen, was er/sie will.

TheRave

Ja es bezieht sich auf Beitrag eins mit den dazu bekannten Updates, die auch alle in diesem Thread sind. Die letzte Version für den 140er liegt im Github bei Endor. Alle die hier regelmässig lesen werden es einzunorden wissen und alle die die das Script nutzen werden die Info finden wenn drag & drop vermisst wird. Ob die anderen Scripte die hier mal hier im Thread waren noch laufen, kann ich nicht sagen. Am Ende muss jeder selber schauen inwieweit die Infos relevant sind. Das hier erwähnte tut es jedenfalls noch anstandslos (für meine Konfiguration).

Mira_Belle

TheRave Danke für den Link,
siehste, da bin ich doch falsch gewesen, mir meiner "137",
und Deiner Erklärung.

FuchsFan

Die Basis für das im Anschluss vorgestellte Script ist hier zu finden. Das Script ist vollständig umgebaut, der CSS-Code wurde ganz heraus genommen und in eine separate CSS-Datei (userChrome.css) umgelagert. Vom Grunde her kann das Script ohne diese arbeiten, dann fehlt die ganze Optik der Tabs, und einige Funktionen im Script selbst würden ohne Wirkung bleiben. Deshalb ist es ratsam beides gemeinsam zu nutzen, Anpassungen können dann im CSS-Code nach eigenen Wünschen vorgenommen werden.

Meister BrokenHeart hat das Script getestet und für gebrauchsfähig empfunden. Auch habe ich seine Zustimmung, das Script in dieser Form hier vorzustellen.

Das Projekt konnte ich nur mit Hilfe von KI starten, da ich von JavaScript Null Ahnung habe, ich bitte um Nachsehen.

....das Script:

JavaScript

// 'MultiRowTabs@BuF.uc.js' – Logik-Version mit MultiRow + DnD + Emoji-Marker
// Styling (Farben, Tabhöhe, Breite, max. Zeilen) in userChrome.css

"use strict";

MultiRowTabs();

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

  // ----------------------------
  // --- User-Settings: Start ---
  // ----------------------------

  // Position der Tab-Leiste:
  //
  // [1] Tab-Leiste ist oberhalb aller Symbolleisten
  // [2] Tab-Leiste ist unterhalb aller Symbolleisten, aber über dem Inhaltsbereich
  // [6] Tab-Leiste ist unterhalb des Inhaltsbereichs 
  var nTabbarPosition = 2;

  // MultiRow-Einstellungen (nur horizontale Positionen [1], [2], [6])
  // Die tatsächliche Zeilenanzahl wird ausschließlich über CSS (max-height) begrenzt.
  var nTabLines     = 3;      // Dokumentationswert; in userChrome.css via max-height nachziehen
  var bTabScrollbar = true;   // Scrollbar für Tab-Leiste anzeigen
  var bTabTooltips  = false;  // Tab-Tooltips (Tabvorschau) anzeigen?

  // Einstellungen für Maus-Bedienung
  var bTabWheel               = false; // Tab per Mausrad wechseln
  var bPageScroll             = true;  // seitenweises Scrollen (statt zeilenweise)
  var bDblclickOnTabbarNewTab = true;  // Doppelklick auf freie Tabbar -> neuer Tab
  var bDblclickOnTabReloadTab = true;  // Doppelklick auf Tab -> Reload

  // ----------------------------
  // --- User-Settings: Ende ---
  // ----------------------------    

  let strHomepageURL;
  try {
    strHomepageURL = Services.prefs.getCharPref("browser.startup.homepage");
  } catch (e) {
    console.log("Error Homepage-String loading...");
  }

  if (nTabbarPosition < 1 || (nTabbarPosition != 1 && nTabbarPosition != 2 && nTabbarPosition != 6)) {
    nTabbarPosition = 1;
  }

  // Tab-Leiste ganz unten 
  if (nTabbarPosition == 6) {
    let tabbarBoxBottom = document.createXULElement("vbox");
    tabbarBoxBottom.id = "tabbarboxbottom";

    document
      .getElementById("navigator-toolbox")
      .parentNode.insertBefore(tabbarBoxBottom, null);

    let tabbar = document.getElementById("TabsToolbar");
    tabbarBoxBottom.appendChild(tabbar);
  }

  // -------------------------------------------------------------
  // Grund-CSS für Slot-Layout & Scrollbar (keine Farben!)
  // -------------------------------------------------------------
  {
    let cssAgent = `
      /* Scrollbars in der Tabbar sollen nicht als Fenster-Drag-Bereich dienen */
      scrollbar,
      scrollcorner,
      scrollbar thumb,
      scrollbar scrollbarbutton {
        -moz-window-dragging: no-drag !important;
      }

      /* Slot-Inhalt (Tabs) direkt in den Flex-Container holen */
      scrollbox[smoothscroll="true"] > slot {
        display: contents !important;
      }
    `;

    let sss = Cc["@mozilla.org/content/style-sheet-service;1"].getService(
      Ci.nsIStyleSheetService
    );
    let uriAgent = makeURI(
      "data:text/css;charset=UTF=8," + encodeURIComponent(cssAgent)
    );
    if (!sss.sheetRegistered(uriAgent, sss.AGENT_SHEET)) {
      sss.loadAndRegisterSheet(uriAgent, sss.AGENT_SHEET);
    }
  }

  {
    // MultiRow-Layout: Wrap, keine Pfeile, „Alle Tabs“-Button entfernen
    let cssAuthor = `
      #tabbrowser-tabs {
        --tab-overflow-pinned-tabs-width: 0px !important;
      }
      
      #alltabs-button,
      hbox.titlebar-spacer,
      #tabbrowser-arrowscrollbox::part(scrollbutton-up), 
      #tabbrowser-arrowscrollbox::part(scrollbutton-down),
      #tabbrowser-arrowscrollbox::part(overflow-start-indicator), 
      #tabbrowser-arrowscrollbox::part(overflow-end-indicator) {
        display: none !important;
      }
      
      tabs > arrowscrollbox::part(scrollbox) {
        flex-wrap: wrap !important;
        overflow-x: hidden !important;
        overflow-y: ${bTabScrollbar ? "auto" : "hidden"} !important;
      }
    `;

    let sss = Cc["@mozilla.org/content/style-sheet-service;1"].getService(
      Ci.nsIStyleSheetService
    );
    let uriAuthor = makeURI(
      "data:text/css;charset=UTF=8," + encodeURIComponent(cssAuthor)
    );
    if (!sss.sheetRegistered(uriAuthor, sss.AUTHOR_SHEET)) {
      sss.loadAndRegisterSheet(uriAuthor, sss.AUTHOR_SHEET);
    }
  }

  // Tab-Leiste unterhalb der Symbolleisten (Position 2)
  if (nTabbarPosition == 2) {
    let tabbar = document.getElementById("TabsToolbar");
    tabbar.parentNode.appendChild(tabbar);
  }

  //------------------------------------------------------------------------------------------

  var tabsToolbar   = document.getElementById("TabsToolbar");
  var tabsscrollbox = document.getElementById("tabbrowser-arrowscrollbox");
  var ScrollBox     = tabsscrollbox.scrollbox;    

  // ----------------------------------
  // Load-Event: MultiRow aktivieren (keine Höhenberechnung mehr)
  // ----------------------------------
  function onReady() {
    console.log("MultiRowTabs OnReady");
    // Auswahl sichtbar halten
    gBrowser.selectedTab.scrollIntoView();
  }    
    
  if (document.readyState !== "loading") {
    setTimeout(onReady, 500); 
  } else {
    window.addEventListener("DOMContentLoaded", onReady);
  }

  // ----------------------------------
  // ToggleMenuObserver (Menüleiste ein/aus) – nur für Position 2/6
  // ----------------------------------
  if (nTabbarPosition == 2 || nTabbarPosition == 6) {
    let targetMenubar = document.getElementById("toolbar-menubar");
    let titlebar      = document.querySelector("#navigator-toolbox>vbox#titlebar");

    const callback = (mutationList, observer) => {
      for (const mutation of mutationList) {
        if (mutation.type === "attributes") {
          let bInactive = targetMenubar.getAttribute("inactive");
          if (bInactive == "true") {
            titlebar.style.display = "none";
          } else {
            titlebar.style.display = "initial";
          }
        }
      }
    };
    
    let observerToggleMenu = new MutationObserver(callback);
    let configObserver = {
      attributes: true,
      attributeFilter: ["autohide","inactive"]
    };
    observerToggleMenu.observe(targetMenubar, configObserver);    
  }

  // ----------------------------------
  // Middleclick auf Tab -> Close Tab
  // ----------------------------------
  gBrowser.tabContainer.addEventListener(
    "click",
    function(event) {
      if (event.button == 1) {
        let element = event.target.parentNode;
        while (element) {
          if (element.localName == "tab") {
            gBrowser.removeTab(element, { animate: false });
            event.preventDefault();
            event.stopPropagation();    
            return;
          }
          element = element.parentNode;
        }
      }
    },
    true
  );

  // ----------------------------------
  // Middleclick auf TabsToolbar -> New Tab
  // ----------------------------------
  tabsToolbar.addEventListener(
    "click",
    function(event) {
      if (event.button == 1) {
        if (event.target.parentNode.id == "TabsToolbar") { 
          if (strHomepageURL) {
            event.target.ownerGlobal.openTrustedLinkIn(strHomepageURL,"tab");
          } else {
            BrowserOpenTab();
          }
          return;
        }
      }
    },
    true
  );

  // ----------------------------------
  // Doubleclick auf TabsToolbar -> New Tab
  // ----------------------------------
  tabsToolbar.addEventListener(
    "dblclick",
    function(event) {
      if (!bDblclickOnTabbarNewTab) return;
      if (event.button == 0) {
        if (event.target.parentNode.id == "TabsToolbar") {
          if (strHomepageURL) {
            event.target.ownerGlobal.openTrustedLinkIn(strHomepageURL,"tab");
          } else {
            BrowserOpenTab();
          }
          event.preventDefault();
          event.stopPropagation();    
          return;
        }
      }
    },
    true
  );
        
  // ----------------------------------
  // Doubleclick auf leeren Bereich in TabContainer -> New Tab
  // ----------------------------------
  gBrowser.tabContainer.addEventListener(
    "dblclick",
    function(event) {
      if (!bDblclickOnTabbarNewTab) return;
      if (event.button == 0) {
        let element = event.target.parentNode;
        if (element == gBrowser.tabContainer) {
          if (strHomepageURL) {
            event.target.ownerGlobal.openTrustedLinkIn(strHomepageURL,"tab");
          } else {
            BrowserOpenTab();
          }
          event.preventDefault();
          event.stopPropagation();    
          return;
        }
      }
    },
    true
  );
    
  // ----------------------------------
  // Doubleclick auf Tab -> Reload Tab
  // ----------------------------------
  gBrowser.tabContainer.addEventListener(
    "dblclick",
    function(event) {
      if (!bDblclickOnTabReloadTab) return;
      if (event.button == 0) {
        let element = event.target.parentNode;
        while (element) {
          if (element.localName == "tab") {
            element.linkedBrowser.reload();
            return;
          }
          element = element.parentNode;
        }
      }
    },
    true
  );

  // ----------------------------------
  // TabSelect -> Tab in Sicht bekommen
  // ----------------------------------
  gBrowser.tabContainer.addEventListener(
    "TabSelect",
    function(event) {
      let bScroll    = false;
      let bScrollTop = true;
                
      let scrollBoxY1     = event.target.parentElement.scrollbox.screenY;
      let scrollBoxHeight = event.target.parentElement.scrollbox.clientHeight;
      let scrollBoxY2     = scrollBoxY1 + scrollBoxHeight;
        
      let TabSelY1     = event.target.screenY;
      let TabSelHeight = event.target.clientHeight;
      let TabSelY2     = TabSelY1 + TabSelHeight;
        
      if (TabSelY2 > scrollBoxY2) {
        bScroll    = true;
        bScrollTop = false;
      }
      if (TabSelY1 < scrollBoxY1) {
        bScroll    = true;
        bScrollTop = true;
      }
        
      if (bScroll) {
        setTimeout(function() {
          event.target.scrollIntoView(bScrollTop);
        }, 0);
      }
    },
    true
  );
      
  // ----------------------------------
  // Wheel-Event über Tab-Leiste  
  // ----------------------------------
  let tabsScrollbox2 = document.getElementById(
    "tabbrowser-arrowscrollbox"
  ).scrollbox;

  tabsScrollbox2.addEventListener(
    "wheel",
    function(event) {
      event.preventDefault();
      event.stopPropagation();
        
      let scrollUp    = true;
      let wrap        = false;
      let scrollBoxY1 =
        gBrowser.tabContainer._animateElement.scrollbox.scrollTop; 
      let scrollHeight;
        
      if (bPageScroll) {
        scrollHeight =
          gBrowser.tabContainer._animateElement.scrollbox.clientHeight;
      } else {            
        let firstTab = gBrowser.visibleTabs[0];
        let h = firstTab ? firstTab.getBoundingClientRect().height : 24;
        scrollHeight = h;
      }
        
      let dir = (scrollUp ? 1 : -1) * Math.sign(event.deltaY);
      let bLastScrollLine = false; 
        
      if (
        gBrowser.tabContainer._animateElement.scrollbox.scrollTopMax ==
        gBrowser.tabContainer._animateElement.scrollbox.scrollTop
      ) {
        bLastScrollLine = true;
      }        

      if (
        !bTabWheel ||
        event.ctrlKey ||
        event.originalTarget.localName == "thumb"  ||
        event.originalTarget.localName == "slider" ||
        event.originalTarget.localName == "scrollbarbutton"
      ) {
        setTimeout(function() {
          let scrollBoxMod = scrollBoxY1 % scrollHeight;
          if (scrollBoxMod > 0) {
            if (dir == -1) {
              scrollBoxY1 -= scrollBoxMod;
              if (scrollBoxMod < scrollHeight && !bLastScrollLine) {
                scrollBoxY1 -= scrollHeight;
              }
            } else {
              scrollBoxY1 += scrollHeight - scrollBoxMod;
              if (scrollHeight - scrollBoxMod < scrollHeight) {
                scrollBoxY1 += scrollHeight;
              }
            }
          } else {
            if (dir == -1) {
              scrollBoxY1 -= scrollHeight;
            } else {
              scrollBoxY1 += scrollHeight;
            }
          }
          gBrowser.tabContainer._animateElement.scrollbox.scrollTo({
            top: scrollBoxY1,
            left: 0,
            behavior: "auto"
          }); 
        }, 20);
      }

      if (bTabWheel && !event.ctrlKey) {
        setTimeout(function() {
          if (
            event.originalTarget.localName != "slider" &&
            event.originalTarget.localName != "thumb"  &&
            event.originalTarget.localName != "scrollbarbutton"
          ) {
            gBrowser.tabContainer.advanceSelectedTab(dir, wrap);
            if (
              gBrowser.tabContainer._firstTab == gBrowser.selectedTab ||
              gBrowser.tabContainer._lastTab  == gBrowser.selectedTab
            ) {
              gBrowser.selectedTab.scrollIntoView(); 
            }
          }    
        }, 50);
      }
    },
    false
  );

  //-------------------------------------------------------------------------------------------
  // Drag & Drop – Multirow-fähig, mit Emoji-Einfüge-Marker
  //-------------------------------------------------------------------------------------------

  // Einfüge-Markierung vorbereiten: Attribut "dnd-marker" statt Border
  if (!gBrowser.tabContainer.clearDropIndicator) {
    gBrowser.tabContainer.clearDropIndicator = function() {
      for (let tab of this.allTabs) {
        tab.removeAttribute("dnd-marker");
      }
    };

    gBrowser.tabContainer.addEventListener(
      "dragleave",
      function () {
        this.clearDropIndicator();
      },
      true
    );
  }

  // _getDropIndex: ermittelt die Zielposition für den Drop
  gBrowser.tabContainer._getDropIndex = function(event) {
    let tabToDropAt = getTabFromEventTarget(event, false);

    if (tabToDropAt?.localName == "tab-group") {
      tabToDropAt = tabToDropAt.previousSibling;
      if (!tabToDropAt) {
        tabToDropAt = gBrowser.visibleTabs[0];
      }
    }

    if (!tabToDropAt) {
      tabToDropAt =
        gBrowser.visibleTabs[gBrowser.visibleTabs.length - 1];
    }

    const tabPos = gBrowser.tabContainer.getIndexOfItem(tabToDropAt);

    if (window.getComputedStyle(this).direction == "ltr") {
      let rect = tabToDropAt.getBoundingClientRect();
      if (event.clientX < rect.x + rect.width / 2) {
        return tabPos;
      }
      return tabPos + 1;
    }

    let rect = tabToDropAt.getBoundingClientRect();
    if (event.clientX > rect.x + rect.width / 2) {
      return tabPos;
    }
    return tabPos + 1;
  };

  let listenersActive = false;

  gBrowser.tabContainer.addEventListener("dragstart", () => {
    gBrowser.visibleTabs.forEach(t => (t.style.transform = ""));

    if (!listenersActive) {
      gBrowser.tabContainer.getDropEffectForTabDrag = function() {};
      gBrowser.tabContainer._getDropEffectForTabDrag = function() {};

      gBrowser.tabContainer.on_dragover  = dragoverEvent => performTabDragOver(dragoverEvent);
      gBrowser.tabContainer._onDragOver  = dragoverEvent => performTabDragOver(dragoverEvent);
      gBrowser.tabContainer.ondrop       = dropEvent    => performTabDropEvent(dropEvent);

      listenersActive = true;
    }
  });
} // Ende MultiRowTabs()

// -----------------------------------------------------------------------------
// Globale Hilfsfunktionen für Drag&Drop (mit Emoji-Einfüge-Marker)
// -----------------------------------------------------------------------------

var lastKnownIndex = null;
var lastGroupStart = null;
var lastGroupEnd   = null;

function getTabFromEventTarget(event, ignoreTabSides = false) {
  let { target } = event;
  if (target.nodeType != Node.ELEMENT_NODE) {
    target = target.parentElement;
  }
  let tab =
    target?.closest("tab") || target?.closest("tab-group");
  const selectedTab = gBrowser.selectedTab;

  if (tab && ignoreTabSides) {
    let { width, height } = tab.getBoundingClientRect();
    if (
      event.screenX < tab.screenX + width * 0.25 ||
      event.screenX > tab.screenX + width * 0.75 ||
      ((event.screenY < tab.screenY + height * 0.25 ||
        event.screenY > tab.screenY + height * 0.25) &&
        gBrowser.tabContainer.verticalMode)
    ) {
      return selectedTab;
    }
  }
  return tab;
}

function performTabDragOver(event) {
  event.preventDefault();
  event.stopPropagation();

  let tc  = gBrowser.tabContainer;
  let ind = tc._tabDropIndicator;

  // Alte Marker entfernen
  if (tc.clearDropIndicator) {
    tc.clearDropIndicator();
  }

  let effects = orig_getDropEffectForTabDrag(event);
  let tab;

  // Link-Drop (Links auf Tabs ziehen) – nur Auswahl, kein Marker
  if (effects == "link") {
    tab = getTabFromEventTarget(event, true);
    if (tab) {
      if (!tc._dragTime) {
        tc._dragTime = Date.now();
      }
      if (
        !tab.hasAttribute("pendingicon") &&
        Date.now() >= tc._dragTime + tc._dragOverDelay
      ) {
        tc.selectedItem = tab;
      }
      if (ind) {
        ind.hidden = true;
      }
      return;
    }
  }

  if (!tab) {
    tab = getTabFromEventTarget(event, false);
  }

  let newIndex = tc._getDropIndex(event);
  if (newIndex == null) {
    return;
  }

  // eingebauten Indikator verstecken
  if (ind) {
    ind.hidden = true;
  }

  let tabs = gBrowser.tabs;

  // Am Ende der Tab-Leiste: Marker "right" am letzten Tab
  if (newIndex == tabs.length) {
    let lastTab = tabs[newIndex - 1];
    if (lastTab) {
      lastTab.setAttribute("dnd-marker", "right");
    }
  } else {
    // Sonst: Marker "left" am Tab an der Drop-Position
    let targetTab = tabs[newIndex];
    if (targetTab) {
      targetTab.setAttribute("dnd-marker", "left");
    }
  }
}

function performTabDropEvent(event) {
  let newIndex;
  let dt         = event.dataTransfer;
  let dropEffect = dt.dropEffect;
  let draggedTab;

  if (dt.mozTypesAt(0)[0] == TAB_DROP_TYPE) {
    draggedTab = dt.mozGetDataAt(TAB_DROP_TYPE, 0);
    if (!draggedTab) {
      return;
    }
  }

  if (
    draggedTab &&
    dropEffect != "copy" &&
    draggedTab.container == gBrowser.tabContainer
  ) {
    newIndex = gBrowser.tabContainer._getDropIndex(event);

    let selectedTabs =
      gBrowser.selectedTabs.length > 1
        ? gBrowser.selectedTabs
        : [draggedTab];
    let tabToMoveAt = gBrowser.tabContainer.getItemAtIndex(newIndex);
    let tab         = getTabFromEventTarget(event, false);
    let tabgroup    = tab?.closest("tab-group");

    if (!tab) {
      newIndex = gBrowser.tabs.length;
      tabToMoveAt = null;
    }

    if (tabgroup && !tab.previousSibling) {
      newIndex = 0;
      selectedTabs.forEach(t => {
        gBrowser.moveTabTo(t, {
          tabIndex: newIndex++,
          forceUngrouped: true
        });
      });
    } else if (
      !tab ||
      (!tabgroup && !tabToMoveAt?.group) ||
      (tabgroup && tabToMoveAt?.group)
    ) {
      selectedTabs.forEach(t => {
        gBrowser.moveTabBefore(t, tabToMoveAt);
      });
    } else {
      tabToMoveAt = gBrowser.tabContainer.getItemAtIndex(newIndex - 1);
      selectedTabs.forEach(t => {
        gBrowser.moveTabAfter(t, tabToMoveAt);
      });
    }

    lastKnownIndex = null;
    lastGroupStart = null;
    lastGroupEnd   = null;
  }

  // Marker nach dem Drop entfernen
  if (gBrowser.tabContainer.clearDropIndicator) {
    gBrowser.tabContainer.clearDropIndicator();
  }
}

function orig_getDropEffectForTabDrag(event) {
  let dt = event.dataTransfer;

  let isMovingTabs = dt.mozItemCount > 0;
  for (let i = 0; i < dt.mozItemCount; i++) {
    let types = dt.mozTypesAt(0);
    if (types[0] != TAB_DROP_TYPE) {
      isMovingTabs = false;
      break;
    }
  }

  if (isMovingTabs) {
    let sourceNode = dt.mozGetDataAt(TAB_DROP_TYPE, 0);
    if (
      XULElement.isInstance(sourceNode) &&
      sourceNode.localName == "tab" &&
      sourceNode.ownerGlobal.isChromeWindow &&
      sourceNode.ownerDocument.documentElement.getAttribute("windowtype") ==
        "navigator:browser" &&
      sourceNode.ownerGlobal.gBrowser.tabContainer == sourceNode.container
    ) {
      if (
        PrivateBrowsingUtils.isWindowPrivate(window) !=
        PrivateBrowsingUtils.isWindowPrivate(sourceNode.ownerGlobal)
      ) {
        return "none";
      }

      if (
        window.gMultiProcessBrowser !=
        sourceNode.ownerGlobal.gMultiProcessBrowser
      ) {
        return "none";
      }

      if (window.gFissionBrowser != sourceNode.ownerGlobal.gFissionBrowser) {
        return "none";
      }

      return dt.dropEffect == "copy" ? "copy" : "move";
    }
  }

  if (Services.droppedLinkHandler.canDropLink(event, true)) {
    return "link";
  }

  return "none";
}

Alles anzeigen

......für userChrome.css

JavaScript

/***********************************************************************
 * MultiRowTabs – Tab- New-Tab-Button- und Close-Button - Anpassungen
 * (Script selbst enthält nur Logik)
 ***********************************************************************/

/* Grundeinstellungen: Tabhöhe */
#tabbrowser-tabs {
  --tab-min-height: 24px;  /* Gesamthöhe eines Tabs */
  min-height: 0 !important; /* interne Mindesthöhe der Tab-Leiste aufheben */
}

/* linker Abstand der Tabs */
#tabbrowser-tabs arrowscrollbox#tabbrowser-arrowscrollbox tab.tabbrowser-tab stack.tab-stack vbox.tab-background {
  margin-left: -2px !important;
}

/* Maximal 3 Zeilen Tabs sichtbar; Rest per Scrollbar / Änderungen immer hier und im Script
   (3 = nTabLines aus dem Script) */
#tabbrowser-arrowscrollbox {
  max-height: calc( (var(--tab-min-height) + 2px) * 3 ) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  margin-inline-start: 2px !important;
}

/* Tab-Höhe + Zeilenabstand (wirkt auf jede Zeile im MultiRow) */
.tabbrowser-tab,
.tabbrowser-tab .tab-stack,
.tabbrowser-tab .tab-background {
  min-height: var(--tab-min-height) !important;
  max-height: var(--tab-min-height) !important;
  margin-top: 0 !important;
  margin-bottom: 2px !important;  /* Abstand zwischen den Tab-Zeilen */
}

/* Tab-Breite (fix) */
.tabbrowser-tab[fadein]:not([pinned]) {
  min-width: 200px !important;
  max-width: 271px !important;  /* gleiche Werte = feste Breite */
}

/* Schrift inaktive Tabs */
.tabbrowser-tab .tab-label {
  font-family: Arial, sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: rgb(20,20,20) !important;
  opacity: .7 !important;  
}

/* Aktiver / multiselektierter Tab – Schriftfarbe */
.tabbrowser-tab[selected] .tab-label,
.tabbrowser-tab[multiselected] .tab-label {
  color: rgb(0, 0, 255) !important;
  font-weight: 600 !important;
  opacity: 1 !important; 
}

/* Tabtext zentriert */
.tab-label-container {
  height: unset !important;
  display: grid !important;
  justify-items: safe center !important;
  justify-content: safe center !important;
}
.tab-label {
  justify-content: center !important;
  overflow: hidden !important;
}

/* Keine abgerundeten Ecken, mit Rahmen */
#TabsToolbar .tabbrowser-tab .tab-background {
  border-radius: 0 !important;
  border: 1px solid grey !important; 
}

/* Nicht ausgewählter Tab / Farben – Pastell-Blau-Schema */
.tabbrowser-tab:not([selected]) .tab-background {
  background-image: linear-gradient(
    rgba(242,246,252,1),   /* oben */
    rgba(225,233,246,1)    /* unten */
  ) !important;
}

/* Ausgewählter Tab */
.tabbrowser-tab[selected] .tab-background {
  background-image: linear-gradient(
    rgba(225,235,255,1),   /* oben */
    rgba(190,210,245,1)    /* unten */
  ) !important;
}

/* Hover auf inaktivem Tab */
.tabbrowser-tab:not([selected]):hover .tab-background {
  filter: brightness(1.06) !important;
}

/* Tab-Leisten-Hintergrund */
#TabsToolbar {
  background-image: linear-gradient(
    rgba(235,242,255,1),
    rgba(215,225,245,1)
  ) !important;
}

/* FavIcon-Größe (optional, kann angepasst werden) */
.tabbrowser-tab .tab-icon-image {
  width: 16px !important;
  height: 16px !important;
  margin-left: -3px !important;
}

/*=== Tab-Close-Button ** nur zu sehen bei Mouseover ===*/

/* Tab X close buttons ( links -1 / rechts 2 ) */                                                                                          
.tab-close-button {
  order: 2 !important; 
  margin-right: -8px !important;
}

/* Farbe der X-Markierung ändern */
.tab-close-button {
  fill: grey !important;
  transform: scale(1.3, 1.3) !important;
  display: block !important;
  opacity: 0 !important;
}
	
.tabbrowser-tab:hover .tab-close-button {
  opacity: 1 !important;
  color: red !important;
  display: block !important;
  background: none !important;
}
	
/*Tab schließen Button verschoben bei Tabstext mittig*/
.tabbrowser-tab > .tab-stack > .tab-content > .tab-close-button {
  flex-shrink: 0 !important;
  width: 24px !important;
  /* display: none !important; */  /* wird total ausgeblendet */
}
                                                                                      
/* close-button ** ENDE */

/*===== New-Tab-Button =====*/

/* Weite für newtab-button */
#TabsToolbar #tabs-newtab-button{
  min-width: 0px !important;
  width: 22px !important;
  height: 21px !important;
  margin-top: 2px !important;
  margin-left: 2px !important;
}
#TabsToolbar #tabs-newtab-button:hover {	
  background-color: #FFF !important;
  padding: 0px !important;
  border: 1px solid grey !important; 
}

/* das Plus-Zeichen */
#TabsToolbar :is(.tabs-newtab-button,#tabs-newtab-button) .toolbarbutton-icon {
  margin-bottom: 2px !important;
  background: unset !important;
  box-shadow: unset !important;
  fill: grey !important;
}
#TabsToolbar #tabs-newtab-button:hover > image {	
  fill: red !important;
}

/*===== New-Tab-Button ** ENDE =====*/

/********************************************
 * Emoji-Einfüge-Marker beim Drag&Drop
 ********************************************/

.tabbrowser-tab[dnd-marker] {
  position: relative;  /* Referenzrahmen für ::before/::after */
}

/* Gemeinsame Basis für beide Marker */
.tabbrowser-tab[dnd-marker="left"]::before,
.tabbrowser-tab[dnd-marker="right"]::after {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  pointer-events: none;
  z-index: 1000;
}

/* Marker links vom Tab */
.tabbrowser-tab[dnd-marker="left"]::before {
  content: "📌";
  left: -8px;   /* ggf. an dein Layout anpassen */
}

/* Marker rechts vom Tab */
.tabbrowser-tab[dnd-marker="right"]::after {
  content: "📌️";
  right: -8px;  /* ggf. an dein Layout anpassen */
}

Alles anzeigen

17.03.26: Update - Nicht mehr genutzte Funktionen (funktionierten teilweise auch nicht mehr), vertikale Ausrichtung und Autohide aus Script entfernt.

Endor

Hallo FuchsFan.
Habe Dein Script jetzt ausgiebig getestet, und bin begeistert.

Funktioniert hier soweit prima.
Mit und ohne Deinen CSS Code.
Vielen Dank.
Soll ich das bei mir hoch laden?
Mfg.
Endor

lenny2

Zitat von FuchsFan

....das Script:

Das Skript funktioniert einwandfrei Ich habe es ohne Ihre userChrome.css getestet. Drag & Drop funktioniert sowohl für normale als auch für Split View Tabs.
Beim Versuch, die minimale und maximale Breite von Tab-Breite mithilfe eines Code-Snippets aus Ihrem eigenen oder einem anderen Style zu ändern, geht die Kompatibilität mit dem Split-View-Modus (v149beta) verloren. Könnten Sie bitte eine kleine CSS-Datei erstellen, mit der sich die minimale und maximale Breite von Tab-Breite ändern lässt, ohne die Kompatibilität zu beeinträchtigen?
Vielen Dank.

2002Andreas

Zitat von lenny2

die minimale und maximale Breite von Tab-Breite ändern lässt

Teste bitte mal:

CSS

.tabbrowser-tab[fadein]:not([pinned]) {
  min-width: 200px !important;
  max-width: 200px !important;  
}

#tabbrowser-tabs tab-split-view-wrapper {
  & .tabbrowser-tab {   
    min-width: 100px !important;
    max-width: 150px !important;  
}
  }

Alles anzeigen

Die Werte wenn dann anpassen.

lenny2

Zitat von 2002Andreas

Teste bitte mal:

Prima, es funktioniert! Aber jetzt gibt es eine Inkompatibilität mit Tab-Gruppen; die Gruppe befindet sich permanent im expand Modus und kann nicht zwischen expand und collapse Modus umgeschaltet werden.

2002Andreas

Zitat von lenny2

jetzt gibt es eine Inkompatibilität

Dann muss da wohl doch ein Fachmann ran

lenny2

Dieser von MrOtherGuy übernommene Stil scheint das Problem mit Tab-Gruppen zu lösen.

CSS

/* Make tab groups collapse */
tab-group[collapsed] .tabbrowser-tab[fadein]:not([pinned]){
 min-width: 30px !important;
}

Horstmann

Zitat von lenny2

Dieser von MrOtherGuy übernommene Stil scheint das Problem mit Tab-Gruppen zu lösen.

Immer eine gute Idee, mal bei MOG vorbeizuschauen, wenn man Probleme mit den Werkzeugen oder searchfox hat; und hier wäre vermutlich der Link.

FuchsFan

Zitat von lenny2

Aber jetzt gibt es eine Inkompatibilität mit Tab-Gruppen; die Gruppe befindet sich permanent im expand Modus und kann nicht zwischen expand und collapse Modus umgeschaltet werden.

Mit Tabgruppen habe ich mich noch nie befasst, deswegen sorry, war keine Absicht.

Zitat von Endor

Soll ich das bei mir hoch laden?

Endor

Kein Problem, hier ist eine neue CSS-Datei dafür. Fix für Tabgruppen ist eingefügt, und am Ende sind zwei Drop-Marker eingefügt. Aktuell ist der mit dem Punkt, der zweite mit Emoji ist auskommentiert. Wenn gewünscht, kann auch wie bisher links und rechts ein Strich sein, dann bitte melden, Code liefere ich dann nach.

.....für userChrome.css:

CSS

 /***********************************************************************
 * MultiRowTabs – Tab- New-Tab-Button- und Close-Button - Anpassungen
 * (Script selbst enthält nur Logik)
 ***********************************************************************/

/* Grundeinstellungen: Tabhöhe */
#tabbrowser-tabs {
  --tab-min-height: 24px;  /* Gesamthöhe eines Tabs */
  min-height: 0 !important; /* interne Mindesthöhe der Tab-Leiste aufheben */
}

/* linker Abstand der Tabs */
#tabbrowser-tabs arrowscrollbox#tabbrowser-arrowscrollbox tab.tabbrowser-tab stack.tab-stack vbox.tab-background {
  margin-left: -2px !important;
}

/* Maximal 3 Zeilen Tabs sichtbar; Rest per Scrollbar / Änderungen immer hier und im Script
   (3 = nTabLines aus dem Script) */
#tabbrowser-arrowscrollbox {
  max-height: calc( (var(--tab-min-height) + 2px) * 3 ) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  margin-inline-start: 2px !important;
}

/* Tab-Höhe + Zeilenabstand (wirkt auf jede Zeile im MultiRow) */
.tabbrowser-tab,
.tabbrowser-tab .tab-stack,
.tabbrowser-tab .tab-background {
  min-height: var(--tab-min-height) !important;
  max-height: var(--tab-min-height) !important;
  margin-top: 0 !important;
  margin-bottom: 1px !important;  /* Abstand zwischen den Tab-Zeilen */
}

/* Tab-Breite (fix) */
.tabbrowser-tab[fadein]:not([pinned]) {
  min-width: 271px !important;
  max-width: 350px !important;  /* gleiche Werte = feste Breite */
}

/* Tabs mittig */
#tabbrowser-tabs:not([overflow], [orient="vertical"]) .tabbrowser-tab:nth-child(1 of :not([pinned], [hidden])) {
    margin-left: auto !important;
}
#tabbrowser-tabs:not([overflow], [orient="vertical"]) #tabbrowser-arrowscrollbox-periphery {
    margin-right: auto !important;
}

/* Tab-Gruppen einklappen */
tab-group[collapsed] .tabbrowser-tab[fadein]:not([pinned]){
 min-width: 30px !important;
}	

#tabbrowser-tabs tab-split-view-wrapper {
  & .tabbrowser-tab {   
    min-width: 100px !important;
    max-width: 150px !important;  
}
  }  

/* Schrift inaktive Tabs */
.tabbrowser-tab .tab-label {
  font-family: Arial, sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: rgb(20,20,20) !important;
  opacity: .7 !important;  
}

/* Aktiver / multiselektierter Tab – Schriftfarbe */
.tabbrowser-tab[selected] .tab-label,
.tabbrowser-tab[multiselected] .tab-label {
  color: rgb(0, 0, 255) !important;
  font-weight: 600 !important;
  opacity: 1 !important; 
}

/* Tabtext zentriert */
.tab-label-container {
  height: unset !important;
  display: grid !important;
  justify-items: safe center !important;
  justify-content: safe center !important;
}
.tab-label {
  justify-content: center !important;
  overflow: hidden !important;
}

/* Keine abgerundeten Ecken, mit Rahmen */
#TabsToolbar .tabbrowser-tab .tab-background {
  border-radius: 0 !important;
  border: 1px solid grey !important; 
}

/* Nicht ausgewählter Tab / Farben – Pastell-Blau-Schema */
.tabbrowser-tab:not([selected]) .tab-background {
  background-image: linear-gradient(
    rgba(242,246,252,1),   /* oben */
    rgba(225,233,246,1)    /* unten */
  ) !important;
}

/* Ausgewählter Tab */
.tabbrowser-tab[selected] .tab-background {
  background-image: linear-gradient(
    rgba(225,235,255,1),   /* oben */
    rgba(190,210,245,1)    /* unten */
  ) !important;
}

/* Hover auf inaktivem Tab */
.tabbrowser-tab:not([selected]):hover .tab-background {
  filter: brightness(1.06) !important;
}

/* Tab-Leisten-Hintergrund */
#TabsToolbar {
  background-image: linear-gradient(
    rgba(235,242,255,1),
    rgba(215,225,245,1)
  ) !important;
}

/* FavIcon-Größe (optional, kann angepasst werden) */
.tabbrowser-tab .tab-icon-image {
  width: 16px !important;
  height: 16px !important;
  margin-left: -3px !important;
}

/*=== Tab-Close-Button ** nur zu sehen bei Mouseover ===*/

/* Tab X close buttons ( links -1 / rechts 2 ) */                                                                                          
.tab-close-button {
  order: 2 !important; 
  margin-right: -8px !important;
}

/* Farbe der X-Markierung ändern */
.tab-close-button {
  fill: grey !important;
  transform: scale(1.3, 1.3) !important;
  display: block !important;
  opacity: 0 !important;
}
	
.tabbrowser-tab:hover .tab-close-button {
  opacity: 1 !important;
  color: red !important;
  display: block !important;
  background: none !important;
}
	
/*Tab schließen Button verschoben bei Tabstext mittig*/
.tabbrowser-tab > .tab-stack > .tab-content > .tab-close-button {
  flex-shrink: 0 !important;
  width: 24px !important;
  /* display: none !important; */  /* wird total ausgeblendet */
}
                                                                                      
/* close-button ** ENDE */

/*===== New-Tab-Button =====*/

/* Weite für newtab-button */
#TabsToolbar #tabs-newtab-button{
  min-width: 0px !important;
  width: 22px !important;
  height: 21px !important;
  margin-top: 2px !important;
  margin-left: 2px !important;
}
#TabsToolbar #tabs-newtab-button:hover {	
  background-color: #FFF !important;
  padding: 0px !important;
  border: 1px solid grey !important; 
}

/* das Plus-Zeichen */
#TabsToolbar :is(.tabs-newtab-button,#tabs-newtab-button) .toolbarbutton-icon {
  margin-bottom: 2px !important;
  background: unset !important;
  box-shadow: unset !important;
  fill: grey !important;
}
#TabsToolbar #tabs-newtab-button:hover > image {	
  fill: red !important;
}

/*===== New-Tab-Button ** ENDE =====*/

/********************************************
    * Einfüge-Marker beim Drag&Drop als Punkt
 ********************************************/
	
	/* Referenzrahmen für ::before/::after */
    .tabbrowser-tab[dnd-marker] {
       position: relative;
    }

    .tabbrowser-tab[dnd-marker="left"]::before,
    .tabbrowser-tab[dnd-marker="right"]::after {
       position: absolute;
       top: 50%;
       transform: translateY(-50%);
       pointer-events: none;
       z-index: 1000;
       content: "";
       width: 14px;
       height: 16px;
       border-radius: 50%;
       background:
         radial-gradient(circle at center,
         #00ffff 0 35%,
         #1dacd6 36% 60%,
         rgba(255,255,255,0) 61%);
       box-shadow: 0 0 3px rgba(255, 90, 82, 0.35);
    }

    .tabbrowser-tab[dnd-marker="left"]::before {
       left: -2px;
	   top: 6px;
    }

    .tabbrowser-tab[dnd-marker="right"]::after {
       right: -2px;
	   top: 6px;
    }
	
/********************************************
 * Emoji-Einfüge-Marker beim Drag&Drop
 ********************************************/

/* Referenzrahmen für ::before/::after */
/* .tabbrowser-tab[dnd-marker] {
  position: relative;  
}

.tabbrowser-tab[dnd-marker="left"]::before,
.tabbrowser-tab[dnd-marker="right"]::after {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  pointer-events: none;
  z-index: 1000;
}

.tabbrowser-tab[dnd-marker="left"]::before {
  content: "📌";
  left: -8px;   
}

.tabbrowser-tab[dnd-marker="right"]::after {
  content: "📌️";
  right: -8px;  
} */

Alles anzeigen

Noch ein Nachtrag, ich habe das Script für mich angepasst, es sind alle Teile für die Scrollbar rechts entfernt. Aus Erfahrung mit dem Script von BrokenHeart kann ich sagen, dass ich diese eigentlich nie nutzte, sondern immer mit dem Mausrad die Funktion ausgeübt habe. Wenn der Wunsch besteht kann ich das Script hier einstellen.

lenny2

Zitat von FuchsFan

Kein Problem, hier ist eine neue CSS-Datei dafür.

Vielen Dank, alles hat wunderbar geklappt. Ich habe das CSS deutlich vereinfacht, um das gewohnte Aussehen der Tabs beizubehalten.
Für die Kompatibilität mit der Split-View-Mode müssen Sie die zweite Hälfte des Codes aus diesem Beitrag hinzufügen.
Skript und Stil passen hervorragend zusammen

FuchsFan

Zitat von lenny2

Vielen Dank, alles hat wunderbar geklappt. Ich habe das CSS deutlich vereinfacht, um das gewohnte Aussehen der Tabs beizubehalten.

Freut mich, wenn es gefällt. Das Aussehen gemäß CSS kann jeder nach seinen Wünschen anpassen, so wie es gefällt.

Zitat von lenny2

Für die Kompatibilität mit der Split-View-Mode müssen Sie die zweite Hälfte des Codes aus diesem Beitrag hinzufügen.

Danke, werde ich oben einfügen.

Endor

Hallo FuchsFan

Habe alles hoch geladen:

userChrome.js/Multirowtabs/Firefox 148 at master · Endor8/userChrome.js

Skripte für die Firefox-Erweiterung userChromeJS. Contribute to Endor8/userChrome.js development by creating an account on GitHub.

github.com

Readme habe ich auch einen kleinen gemacht.
Habe mir Dein Bild von oben ausgeliehen.
Wenn du was ändern willst oder mehr Info und Bilder immer gerne.
Einfach PN am mich.
Mfg.
Endor

FuchsFan

Zitat von Endor

Readme habe ich auch einen kleinen gemacht.
Habe mir Dein Bild von oben ausgeliehen.

Endor

Prima, eventuell findet es Anhänger. Es gehört hier sicherlich nicht her, aber weil wir schon mal bei der MultiRow-Thematik sind, hier eine weitere Variante. Das Script ist vom Ursprung her allgemein bekannt, ich habe einige Änderungen gemacht, den ganzen Drag&Drop-Code entfernt (funktionierte nicht mehr), sowie das Verschieben der Tabs wieder aktiviert. Für Drag&Drop habe ich mit KI ein neues Script erstellt, dass jetzt die Marker beim Verschieben der Tabs setzt. Kann also gemeinsam mit dem MultiRow-Script genutzt werden, wenn Wert darauf gelegt wird. Auch lege ich eine css-Datei bei, die auf das Script abgestimmt ist (wenn Bedarf besteht).

.....MultiRow-Script:

CSS

// ==UserScript==
// @name           MultiRowNew@Fu.uc.js
// @namespace      Based on Alice0775's zzzz-MultiRowTab_LiteforFx48.uc.js
// @description    Mehrzeilige Tab-Leiste 
// @include        main
// @compatibility  Firefox 148+
// @version        2026/03/14 14:45
// ==/UserScript==
"use strict";

MultiRowTabLiteForFx();

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

  // -- Einstellungen --
  // Hinweis: Wenn du ähnliche CSS-Regeln in „userChrome.css“ definiert hast,
  // haben diese dort Vorrang vor diesem Script.

  const
    // Mehrzeilige Tabs An/Aus und Anzahl der Tabzeilen
    MultiRowTab_OnOff_and_TabBar_Rows = 3,  // [-1] = Mehrzeilige Tabs an, unbegrenzte Zeilen
                                            //  0   = Mehrzeilige Tabs aus (Standard-Einzeilig)
                                            //  1   = Mehrzeilige Tabs an, i.d.R. 1 Zeile,
                                            //        weitere Zeilen nur bei Mausüberfahrt (Mouseover).
                                            //        Anzahl dieser Zeilen stellst du über „TabBar_Rows_on_MouseOver“ ein.
                                            //  2+  = Mehrzeilige Tabs an, feste Anzahl Zeilen

    // Wenn „MultiRowTab_OnOff_and_TabBar_Rows = 1“:
    // Anzahl der Zeilen, die bei Mouseover eingeblendet werden sollen.
    TabBar_Rows_on_MouseOver = 3,

    // Wie lange (in Sekunden) die zusätzlichen Zeilen nach Mouseover sichtbar bleiben,
    // bevor wieder auf 1 Zeile zurückgewechselt wird.
    TabBar_DisplayTime_on_MouseOver = 1,

    // Position der Tab-Leiste
    TabBar_Position = 1,                    // [0] = Oberhalb der Werkzeugleisten (Standard)
                                            //  1  = Unterhalb der Werkzeugleisten
                                            //  2  = Unterhalb des Seiteninhalts

    // Wenn „TabBar_Position = 1“:
    // Reihenfolge von Tab-Leiste und Lesezeichen-Symbolleiste tauschen?
    Bookmark_Toolbar_Position = true,       // [true]  = Menüleiste, Navigationsleiste, Lesezeichenleiste, Tab-Leiste
                                            //  false  = Menüleiste, Navigationsleiste, Tab-Leiste, Lesezeichenleiste

    // Tab-Höhe je nach UI-Dichte
    UI_Density_Compact = 25,                // Standard: 29px (Kompakt)
    UI_Density_Normal = 25,                 // Standard: 36px (Normal)
    UI_Density_Touch = 25,                  // Standard: 41px (Touch)

    // Minimale und maximale Tab-Breite
    Tab_Min_Width = 250,                    // Standard: 76px (Minimum)
    Tab_Max_Width = 350,                    // Standard: 225px (Maximum)
                                            // Wenn beide Werte identisch sind, ist die Tabbreite strikt fixiert.

    // Verhalten des Tab-Schließen-Buttons
    Tab_Close_Button = 3,                   // [0] = Firefox-Standard
                                            //  1  = Schließen-Button ausblenden
                                            //  2  = Auf allen Tabs anzeigen
                                            //  3  = Nur bei Mausüberfahrt anzeigen
                                            //  4  = Aktiver Tab: immer anzeigen,
                                            //       inaktiver Tab: nur bei Mausüberfahrt anzeigen
                                            //       (Standard im vertikalen Tab-Modus)

    // Vertikale Trennerlinien zwischen Tabs
    Tab_Separators  = false,                // [false] = Keine Trenner
                                            //  true   = Trenner anzeigen (ähnlich Firefox ≤ 90)

    // Titelleisten-Buttons [− □ ×] ausblenden und Platz der Tab-Leiste zuschlagen
    // Vorbedingung: „TabBar_Position = 0“
    TitleBar_Button_Autohide = false,       // [false] = Nicht verwenden
                                            //  true   = Buttons werden i.d.R. verkleinert/transparent,
                                            //           Mouseover im Trigger-Bereich zeigt sie wieder an.
    // Anzeigedauer (Sekunden) der eingeblendeten Titelleisten-Buttons
    TitleBar_Button_DisplayTime = 0.6,

    // Tab-Leiste direkt von Anfang an auf eine bestimmte Zeilenhöhe setzen
    // Vorbedingung: „MultiRowTab_OnOff_and_TabBar_Rows >= 2“
    Set_the_TabBar_to_the_Specified_Height = false, // [false] = Nicht verwenden
                                                    //  true   = Tab-Leiste immer mit der angegebenen Zeilenanzahl

    // Position der angehefteten (Pinned) Tabs
    // Vorbedingung: „MultiRowTab_OnOff_and_TabBar_Rows != 0“
    Separate_Tabs_and_PinnedTabs = false,   // [false] = Standard (Pinned-Tabs in der gleichen Zeile)
                                            //  true   = Pinned-Tabs in eine „eigene“ obere Zeile auslagern

    // Breite der Pinned-Tabs anpassbar machen
    // Vorbedingung: „Separate_Tabs_and_PinnedTabs = true“
    PinnedTab_Width = false,                // [false] = Standardbreite für Pinned-Tabs
                                            //  true   = Pinned-Tabs wie normale Tabs skalierbar
    PinnedTab_Min_Width = 40,               // Minimalbreite Pinned-Tabs
    PinnedTab_Max_Width = 40,               // Maximalbreite Pinned-Tabs
                                            // identische Werte → feste Breite

    // Schließen-Button auf Pinned-Tabs
    // Vorbedingung: „Separate_Tabs_and_PinnedTabs = true“
    PinnedTab_Close_Button = 2,             // [0] = Standard
                                            //  1  = Auf allen Pinned-Tabs anzeigen
                                            //  2  = Nur bei Mausüberfahrt anzeigen
                                            //  3  = Aktiver Pinned-Tab: immer anzeigen,
                                            //       inaktive: bei Mausüberfahrt

    // Drag-Bereiche links/rechts neben der Tab-Leiste
    Left_Drag_Area = 0,                     // Standard: 40px (links)
    Right_Drag_Area = 0,                    // Standard: 40px (rechts)
    Maximize_Left_Drag_Area = false,        // [false] = Standard
                                            //  true   = Linker Drag-Bereich bleibt auch im maximierten Fenster sichtbar
    Fullscreen_Drag_Area = false;           // [false] = Standard
                                            //  true   = Drag-Bereiche auch im Vollbild anzeigen
                                            // Hinweis: Mit sichtbarer Titelleiste funktionieren
                                            //          „.titlebar-spacer“ nicht als Drag-Bereich.

  // -- Einstellungen ENDE --

  let css = `

    #TabsToolbar:not([collapsed="true"]) {

      :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;
      }

      /* ‚Alle Tabs‘-Button rechts ausblenden */
      #alltabs-button {
        display: none !important;
      }

      #tabbrowser-tabs {
        min-height: var(--tab-min-height);

        ${MultiRowTab_OnOff_and_TabBar_Rows != 0 ? `
          &[overflow] {
            padding-inline: 0 !important;
            & > #tabbrowser-arrowscrollbox {
              & > .tabbrowser-tab[pinned] {
                display: flex;
                margin-inline-start: 0 !important;
                position: static !important;
              }
              &::part(scrollbox) {
                padding-inline: 0;
              }
            }
            & + #new-tab-button {
              display: none;
            }
          }

          #tabbrowser-arrowscrollbox {
            &::part(scrollbox) {
              & > slot {
                flex-wrap: wrap;
              }

              ${MultiRowTab_OnOff_and_TabBar_Rows != -1 ? `
                ${MultiRowTab_OnOff_and_TabBar_Rows == 1 ? `
                  ${TabBar_Rows_on_MouseOver == 0 || TabBar_Rows_on_MouseOver == 1 ? `
                    max-height: calc(var(--tab-min-height) * 2);
                  ` : `
                    max-height: calc(var(--tab-min-height) * ${TabBar_Rows_on_MouseOver});
                  `}
                  &:not(:hover) {
                    max-height: var(--tab-min-height) !important;
                    scrollbar-width: none;
                    transition: all 0s ease-in-out ${TabBar_DisplayTime_on_MouseOver}s;
                  }
                ` : `
                  ${Set_the_TabBar_to_the_Specified_Height ? `
                    min-height: calc(var(--tab-min-height) * ${MultiRowTab_OnOff_and_TabBar_Rows});
                    & > slot {
                      max-height: var(--tab-min-height);
                    }
                  ` : `
                    max-height: calc(var(--tab-min-height) * ${MultiRowTab_OnOff_and_TabBar_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 ? `
              &:has(> .tabbrowser-tab[fadein][pinned]) {
                &::part(scrollbox) {
                  & > slot::after {
                    display: flow-root list-item;
                    content: "";
                    flex-basis: -moz-available;
                    height: 0;
                    overflow: hidden;
                  }
                }
              }
              .tabbrowser-tab[fadein] {
                &:not([pinned]) {
                  #tabbrowser-tabs[haspinnedtabs] & {
                    &, & + :not(#tabs-newtab-button) {
                      order: 1;
                    }
                  }
                }
                &[pinned] {
                  .tab-background:after {
                    content: "📌";
                    font-size: 11px;
                    right: -2px;
                    position: absolute;
                    top: -2px;
                  }

                  ${PinnedTab_Width ? `
                    flex: 100 100;
                    max-width: ${PinnedTab_Max_Width}px;
                    min-width: ${PinnedTab_Min_Width}px;
                    .tab-throbber, .tab-icon-pending, .tab-icon-image, .tab-sharing-icon-overlay, .tab-icon-overlay {
                      margin-inline-end: 5.5px !important;
                    }

                    ${PinnedTab_Close_Button == 1 ? `
                      .tab-close-button {
                        display: flex;
                      }
                    ` : PinnedTab_Close_Button == 2 ? `
                      .tab-close-button {
                        display: none;
                      }
                      &:hover .tab-close-button {
                        display: flex;
                      }
                    ` : PinnedTab_Close_Button == 3 ? `
                      &:not([selected]):hover,
                      &[selected] {
                        .tab-close-button {
                          display: flex;
                        }
                      }
                    ` : ``}

                  ` : ``}

                }
              }
            ` : ``}

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

          }
        ` : ``}
      }

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

        ${Tab_Close_Button == 1 ? `
          .tab-close-button {
            display: none;
          }
        ` : Tab_Close_Button == 2 ? `
          .tab-close-button {
            display: flex;
          }
        ` : Tab_Close_Button == 3 ? `
          .tab-close-button {
            display: none;
          }
          &:hover .tab-close-button {
            display: flex;
          }
        ` : Tab_Close_Button == 4 ? `
          &:not([selected]):hover {
            .tab-close-button {
              display: flex;
            }
          }
        ` : ``}

      }

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

      ${Tab_Separators ? `` : `
        .tabbrowser-tab,
        .toolbarbutton-1 {
          padding: 0;
        }
        .tabbrowser-tab,
        #tabs-newtab-button {
          height: var(--tab-min-height);
        }
        .tabbrowser-tab {
          .tab-background {
            box-shadow: none;
            margin-block: 0;
          }
          .tab-label-container {
            height: var(--tab-min-height);
            max-height: 24px;
          }
          .tab-close-button {
            height: 20px !important;
            padding-block: 3px !important;
          }
          &[usercontextid] > .tab-stack > .tab-background > .tab-context-line {
            margin-block-start: 1px !important;
          }
        }
      `}
    }

    ${TabBar_Position == 0 ? `
      .titlebar-buttonbox-container {
        height: var(--tab-min-height);
      }

      ${TitleBar_Button_Autohide ? `
        & > .titlebar-buttonbox-container {
          background-color: color-mix(in srgb, currentColor 20%, transparent);
          position: fixed;
          right: 0;
          &:not(:hover) {
            height: 6px;
            .titlebar-button {
              padding: 0;
            }
            &,& .titlebar-button {
              opacity: 0;
              transition: all 0s ease-in-out ${TitleBar_Button_DisplayTime}s;
            }
          }
        }
      ` : ``}

    ` : `

      ${TabBar_Position == 1 || TabBar_Position == 2 ? `
        & > .titlebar-buttonbox-container {
          display: none;
        }
        #nav-bar {
          &:not(.browser-titlebar) {
            :root[customtitlebar] #toolbar-menubar[autohide="true"] ~ &,
            :root[inFullscreen] #toolbar-menubar ~ & {
              & > .titlebar-buttonbox-container {
                display: flex;
              }
            }
          }
          .titlebar-button {
            padding-block: 0;
          }
        }
      ` : ``}

      body:has(> #navigator-toolbox:not([tabs-hidden])) {
        ${TabBar_Position == 1 ? `
          script, toolbar:not(#TabsToolbar ${Bookmark_Toolbar_Position ? `` : `, #PersonalToolbar`}) {
            order: -1;
          }
        ` : TabBar_Position == 2 ? `
          & > #fullscr-toggler[hidden] + tabbox,
          :root[inFullscreen] & > tabbox:hover {
            border-top: 0.01px solid var(--chrome-content-separator-color);
          }
          & > tabbox > #navigator-toolbox {
            border-block: none !important;
          }
          :root[inFullscreen] & {
            & > #navigator-toolbox {
              transition: none;
              &:has(~ tabbox:hover) {
                margin-top: 0 !important;
              }
              &:hover ~ tabbox > #navigator-toolbox {
                display: flex;
              }
            }
            & > tabbox:not(:hover) {
              border-top: 0.01px solid transparent;
              & > #navigator-toolbox {
                display: none;
              }
            }
          }
        ` : ``}
      }

    `}

    toolbar[id$="bar"].browser-titlebar {
      .titlebar-spacer {
        &[type="pre-tabs"] {
          width: ${Left_Drag_Area}px;
        }
        &[type="post-tabs"] {
          width: ${Right_Drag_Area}px;
        }
        ${Maximize_Left_Drag_Area ? `
          :root[customtitlebar]:not([sizemode="normal"], [inFullscreen]) &[type="pre-tabs"] {
            display: flex;
          }
        ` : ``}
        ${Fullscreen_Drag_Area ? `
          :root[customtitlebar][inFullscreen] & {
            display: flex;
          }
        ` : ``}
      }
      #navigator-toolbox[tabs-hidden] & {
        #new-tab-button {
          display: none;
        }
      }
    }

  `;

  let sss = Cc["@mozilla.org/content/style-sheet-service;1"].getService(Ci.nsIStyleSheetService);
  let uri = Services.io.newURI("data:text/css;charset=UTF=8," + encodeURIComponent(css));

  ["0", "2", "dragend", "SSTabRestored", "TabAttrModified"].forEach(eventType => {
    if (!sss.sheetRegistered(uri, eventType)) {
      sss.loadAndRegisterSheet(uri, eventType);
    }
  });
}

Alles anzeigen

.....das Script für Drag&Drop

Code

// ==UserScript==
// @name           TabMoveOnly.uc.js
// @namespace      local
// @description    Nur das Verschieben von Tabs per Drag & Drop
// @include        main
// @compatibility  Firefox138+
// @version        2026-03-20
// ==/UserScript==
"use strict";

TabMoveOnly();

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

  // -- CSS: Einfüge-Marker beim Drag&Drop als Punkt Plus Ring --
  const css = `
    
	/********************************************
    * Einfüge-Marker beim Drag&Drop als Punkt
    ********************************************/
	
    .tabbrowser-tab[dnd-marker] {
       position: relative;
    }

    .tabbrowser-tab[dnd-marker="left"]::before,
    .tabbrowser-tab[dnd-marker="right"]::after {
       position: absolute;
       top: 50%;
       transform: translateY(-50%);
       pointer-events: none;
       z-index: 1000;
       content: "";
       width: 14px;
       height: 18px;
       border-radius: 50%;
       background:
         radial-gradient(circle at center,
         #00ffff 0 35%,
         #1dacd6 36% 60%,
         rgba(255,255,255,0) 61%);
       box-shadow: 0 0 3px rgba(255, 90, 82, 0.35);
    }

    .tabbrowser-tab[dnd-marker="left"]::before {
       left: -2px;
	   top: 6px;
    }

    .tabbrowser-tab[dnd-marker="right"]::after {
       right: -2px;
	   top: 6px;
    }
	
	/********************************************
    * Einfüge-Marker beim Drag&Drop als Strich
    ********************************************/

    /* .tabbrowser-tab[dnd-marker] {
       position: relative;
    }

    .tabbrowser-tab[dnd-marker="left"]::before,
    .tabbrowser-tab[dnd-marker="right"]::after {
       position: absolute;
       top: 50%;
       transform: translateY(-50%);
       pointer-events: none;
       z-index: 1000;
       content: "";
       width: 4px;
       height: 24px;
       background: #ff3b30;
       box-shadow: 0 0 4px rgba(255, 59, 48, 0.65);
    }

    .tabbrowser-tab[dnd-marker="left"]::before {
       left: -2px;
    }

    .tabbrowser-tab[dnd-marker="right"]::after {
       right: -2px;
    } */
  `;

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

  if (!sss.sheetRegistered(uri, sss.USER_SHEET)) {
    sss.loadAndRegisterSheet(uri, sss.USER_SHEET);
  }

  // Damit wir die Handler nur einmal setzen
  let listenersActive = false;

  // Merker für Drag-/Drop-Zustand
  let lastKnownIndex = null;
  let lastGroupStart = null;
  let lastGroupEnd = null;

  function clearDndMarkers() {
    for (let tab of gBrowser.tabs) {
      tab.removeAttribute("dnd-marker");
    }
  }

  function setDndMarker(tab, side) {
    clearDndMarkers();
    if (tab && side) {
      tab.setAttribute("dnd-marker", side);
    }
  }

  function getTabFromEventTarget(event, ignoreTabSides = false) {
    let { target } = event;
    if (target.nodeType != Node.ELEMENT_NODE) {
      target = target.parentElement;
    }

    let tab = target?.closest("tab") || target?.closest("tab-group");
    const selectedTab = gBrowser.selectedTab;

    if (tab && ignoreTabSides) {
      let { width, height } = tab.getBoundingClientRect();
      if (
        event.screenX < tab.screenX + width * 0.25 ||
        event.screenX > tab.screenX + width * 0.75 ||
        ((event.screenY < tab.screenY + height * 0.25 ||
          event.screenY > tab.screenY + height * 0.75) &&
          gBrowser.tabContainer.verticalMode)
      ) {
        return selectedTab;
      }
    }
    return tab;
  }

  // Eigene Drop-Index-Berechnung für Multirow / normales Tab-Layout
  gBrowser.tabContainer._getDropIndex = function(event) {
    let tabToDropAt = getTabFromEventTarget(event, false);

    if (tabToDropAt?.localName == "tab-group") {
      tabToDropAt = tabToDropAt.previousSibling;
      if (!tabToDropAt) {
        tabToDropAt = gBrowser.visibleTabs[0];
      }
    }

    if (!tabToDropAt) {
      tabToDropAt = gBrowser.visibleTabs[gBrowser.visibleTabs.length - 1];
    }

    if (!tabToDropAt) {
      return null;
    }

    const tabPos = gBrowser.tabContainer.getIndexOfItem(tabToDropAt);

    if (window.getComputedStyle(this).direction == "ltr") {
      let rect = tabToDropAt.getBoundingClientRect();
      if (event.clientX < rect.x + rect.width / 2)
        return tabPos;
      else
        return tabPos + 1;
    } else {
      let rect = tabToDropAt.getBoundingClientRect();
      if (event.clientX > rect.x + rect.width / 2)
        return tabPos;
      else
        return tabPos + 1;
    }
  };

  function orig_getDropEffectForTabDrag(event) {
    let dt = event.dataTransfer;

    let isMovingTabs = dt.mozItemCount > 0;
    for (let i = 0; i < dt.mozItemCount; i++) {
      let types = dt.mozTypesAt(0);
      if (types[0] != TAB_DROP_TYPE) {
        isMovingTabs = false;
        break;
      }
    }

    if (isMovingTabs) {
      let sourceNode = dt.mozGetDataAt(TAB_DROP_TYPE, 0);
      if (XULElement.isInstance(sourceNode) &&
          sourceNode.localName == "tab" &&
          sourceNode.ownerGlobal.isChromeWindow &&
          sourceNode.ownerDocument.documentElement.getAttribute("windowtype") == "navigator:browser" &&
          sourceNode.ownerGlobal.gBrowser.tabContainer == sourceNode.container) {

        if (PrivateBrowsingUtils.isWindowPrivate(window) !=
            PrivateBrowsingUtils.isWindowPrivate(sourceNode.ownerGlobal))
          return "none";

        if (window.gMultiProcessBrowser != sourceNode.ownerGlobal.gMultiProcessBrowser)
          return "none";

        if (window.gFissionBrowser != sourceNode.ownerGlobal.gFissionBrowser)
          return "none";

        return dt.dropEffect == "copy" ? "copy" : "move";
      }
    }

    if (Services.droppedLinkHandler.canDropLink(event, true))
      return "link";

    return "none";
  }

  function getMarkerInfo(event) {
    let tabToDropAt = getTabFromEventTarget(event, false);
    if (tabToDropAt?.localName == "tab-group") {
      tabToDropAt = tabToDropAt.previousSibling;
      if (!tabToDropAt) {
        tabToDropAt = gBrowser.visibleTabs[0];
      }
    }

    if (!tabToDropAt) {
      let lastTab = gBrowser.visibleTabs[gBrowser.visibleTabs.length - 1];
      return { tab: lastTab, side: "right" };
    }

    const rect = tabToDropAt.getBoundingClientRect();
    const ltr = (window.getComputedStyle(gBrowser.tabContainer).direction == "ltr");

    const side = ltr
      ? (event.clientX < rect.x + rect.width / 2 ? "left" : "right")
      : (event.clientX > rect.x + rect.width / 2 ? "left" : "right");

    return { tab: tabToDropAt, side };
  }

  function performTabDragOver(event) {
    const effects = orig_getDropEffectForTabDrag(event);

    // Nur Tab-Dragging abfangen
    if (effects == "none" || effects == "link") {
      clearDndMarkers();
      return;
    }

    event.preventDefault();
    event.stopPropagation();

    let tab = getTabFromEventTarget(event, true);

    // Kleine Starthilfe für Gruppen-Merker
    if (tab && tab.nodeName == "tab-group" && !lastGroupStart) {
      let first = tab.querySelector("tab:first-of-type");
      let last = tab.querySelector("tab:last-of-type");
      if (first && last) {
        lastGroupStart = first._tPos;
        lastGroupEnd = last._tPos;
      }
    }

    let newIndex = gBrowser.tabContainer._getDropIndex(event);
    if (newIndex == null) {
      clearDndMarkers();
      return;
    }

    lastKnownIndex = newIndex;

    const markerInfo = getMarkerInfo(event);
    setDndMarker(markerInfo.tab, markerInfo.side);
  }

  function performTabDropEvent(event) {
    clearDndMarkers();

    let dt = event.dataTransfer;
    let dropEffect = dt.dropEffect;
    let draggedTab;

    if (dt.mozTypesAt(0)[0] == TAB_DROP_TYPE) {
      draggedTab = dt.mozGetDataAt(TAB_DROP_TYPE, 0);
      if (!draggedTab) return;
    }

    if (draggedTab && dropEffect != "copy" && draggedTab.container == gBrowser.tabContainer) {
      let newIndex = gBrowser.tabContainer._getDropIndex(event);
      if (newIndex == null) return;

      let selectedTabs = gBrowser.selectedTabs.length > 1 ? gBrowser.selectedTabs : [draggedTab];
      let tabToMoveAt = gBrowser.tabContainer.getItemAtIndex(newIndex);
      let tab = getTabFromEventTarget(event, false);
      let tabgroup = tab?.closest("tab-group");

      if (!tab) {
        newIndex = gBrowser.tabs.length;
        tabToMoveAt = null;
      }

      if (tabgroup && !tab.previousSibling) {
        newIndex = 0;
        selectedTabs.forEach(t => {
          gBrowser.moveTabTo(t, { tabIndex: newIndex++, forceUngrouped: true });
        });
      } else if (
        !tab ||
        (!tabgroup && !tabToMoveAt?.group) ||
        (tabgroup && tabToMoveAt?.group)
      ) {
        selectedTabs.forEach(t => {
          gBrowser.moveTabBefore(t, tabToMoveAt);
        });
      } else {
        tabToMoveAt = gBrowser.tabContainer.getItemAtIndex(newIndex - 1);
        selectedTabs.forEach(t => {
          gBrowser.moveTabAfter(t, tabToMoveAt);
        });
      }

      lastKnownIndex = null;
      lastGroupStart = null;
      lastGroupEnd = null;
    }
  }

  gBrowser.tabContainer.addEventListener("dragstart", () => {
    if (!listenersActive) {
      gBrowser.tabContainer.on_dragover = (e) => performTabDragOver(e);
      gBrowser.tabContainer._onDragOver = (e) => performTabDragOver(e);
      gBrowser.tabContainer.ondrop = (e) => performTabDropEvent(e);

      gBrowser.tabContainer.addEventListener("dragend", clearDndMarkers, true);
      gBrowser.tabContainer.addEventListener("drop", clearDndMarkers, true);

      listenersActive = true;
    }
  });
}

Alles anzeigen

...für userChrome.css:

CSS

/* =========================================================
             Tableiste + MULTIROW-Script
   ========================================================= */

:root {
    --toolbarbutton-border-radius: 0px !important;
    --proton-tab-radius: 0px !important;
    --proton-tab-block-margin: 0px !important;
    --inline-tab-padding: 10px !important;
}
 
/* rechts bündiger Abschluss der Tableiste */
hbox.titlebar-spacer,
tabs tab:not([fadein]) {
    display: none !important;
}

/* New-Tab-Button bei voller Tableiste ausgeblendet */
#new-tab-button.toolbarbutton-1.chromeclass-toolbar-additional {
    display: none !important;
}

.tabbrowser-tab,
.tab-stack,
.tab-background {
    border: unset !important;
    margin-right: 0px !important;
    box-sizing: border-box !important;
	margin-bottom: 1px !important;
}

/* Start der Tabs ab linken Rand */
:is(.tabs-newtab-button,#tabs-newtab-button),
.tabbrowser-tab:not([pinned]) {
    margin-inline-start: 1px !important;
}

/* =========================================================
   AKTIVER TAB
   ========================================================= */

#TabsToolbar #firefox-view-button[open] > .toolbarbutton-icon:-moz-lwtheme,
.tab-background:is([selected],[multiselected]):-moz-lwtheme {
    outline: 1px solid green !important;
}

tab.tabbrowser-tab[selected] stack.tab-stack vbox.tab-background,
.tabbrowser-tab[selected] .tab-background {
    background: linear-gradient(0.35turn, #ffa700, beige, white, beige, #c19a6b) !important;
    outline: 1px solid green !important;
    box-shadow: none !important;
}

.tabbrowser-tab[selected]:hover .tab-background {
    background: linear-gradient(0.35turn, #e69500, #f5f5dc, #f8f8f8, #f5f5dc, #b8945e) !important;
}

#tabbrowser-arrowscrollbox tab.tabbrowser-tab[selected] .tab-label,
.tabbrowser-tab[selected] .tab-label {
    font-weight: bold !important;
    color: blue !important;
    font-size: 1.2em !important;
    font-family: "Verdana, Helvetica", serif !important;
    font-style: italic !important;
    position: relative !important;
    left: 0 !important;
    transform: translateX(0) !important;
    padding-bottom: 0px !important;
}

/* =========================================================
   INAKTIVE TABS
   ========================================================= */

.tabbrowser-tab > .tab-stack > .tab-background:not([selected],[multiselected]),
.tabbrowser-tab:not([selected]) .tab-background {
    background: linear-gradient(0.35turn, grey, lightblue, beige, white, beige, lightblue, grey) !important;
    border: 1px solid grey !important;
    filter: brightness(100%) contrast(90%) !important;
}

.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected],[multiselected]),
.tabbrowser-tab:not([selected]):hover .tab-background {
    background: linear-gradient(0.30turn, blue, lightblue, beige, white, beige, lightblue, green) !important;
    border: 1px solid coral !important;
    filter: brightness(95%) contrast(120%) !important;
}

.tabbrowser-tab:not([selected]) .tab-label,
.tabbrowser-tab:not([visuallyselected="true"]) label.tab-text.tab-label {
    color: #4a525f !important;
    font-weight: 600 !important;
    font-size: 1.1em !important;
    padding-bottom: 0px !important;
}

.tabbrowser-tab:not([selected]):hover .tab-label,
.tabbrowser-tab:not([visuallyselected="true"]):hover label.tab-text.tab-label {
    color: brown !important;
    font-weight: 700 !important;
    font-size: 1.1em !important;
    opacity: 1 !important;
}

/* =========================================================
   TAB-LADESTATUS
   ========================================================= */

#tabbrowser-arrowscrollbox tab.tabbrowser-tab[busy] .tab-label,
.tabbrowser-tab[busy] .tab-label {
    color: tomato !important;
}

/* =========================================================
   CLOSE-BUTTON
   ========================================================= */

.tab-close-button {
    fill: white !important;
    transform: scale(1.1, 1.1) !important;
    display: block !important;
    opacity: 0 !important;
}

.tabbrowser-tab:hover .tab-close-button {
    opacity: 1 !important;
    color: red !important;
    display: block !important;
    background: none !important;
}

/* Tabtext zentriert */
.tab-label-container {
    height: unset !important;
    display: grid !important;
    justify-items: safe center !important;
    justify-content: safe center !important;
    align-items: center !important;
    text-align: center !important;
}

.tab-label {
    justify-content: center !important;
    overflow: hidden !important;
    position: relative !important;
    left: 0 !important;
    margin: 0 !important;
    padding: 0 4px !important;
}

/* Tabtext nicht verschoben bei hover */
.tabbrowser-tab > .tab-stack > .tab-content > .tab-close-button {
    padding-inline-start: 7px !important;
    width: unset !important;
}

/* Favicon Position */
.tabbrowser-tab:not([pinned]):not([locked]) .tab-throbber,
.tabbrowser-tab:not([pinned]) .tab-icon-image {
    margin-inline-start: -2px !important;
}

/* Pinned Tabs */
#TabsToolbar .tab-content[pinned] {
    padding: 0 6px !important;
}

/* =========================================================
   NEW TAB BUTTON
   ========================================================= */

#TabsToolbar :is(.tabs-newtab-button,#tabs-newtab-button) {
    min-width: 0px !important;
    width: 22px !important;
    height: 22px !important;
    margin-top: 1px !important;
    margin-left: 3px !important;
}

#TabsToolbar :is(.tabs-newtab-button,#tabs-newtab-button) .toolbarbutton-icon {
    min-width: 0px !important;
    min-height: 0px !important;
    width: 14px !important;
    height: 14px !important;
    margin: 0px !important;
    padding: 0px !important;
    background: unset !important;
    box-shadow: unset !important;
}

#TabsToolbar #tabs-newtab-button > image {
    min-height: 24px !important;
    max-height: 24px !important;
    min-width: 24px !important;
    max-width: 24px !important;
    margin-top: 1px !important;
    margin-left: 0px !important;
    padding: 2px !important;
    fill: grey !important;
}

#TabsToolbar #tabs-newtab-button:hover > image {
    fill: red !important;
}

#TabsToolbar #tabs-newtab-button:hover {
    background-color: #FFF !important;
    padding: 0px !important;
}

Alles anzeigen

Horstmann

Nur mal aus Neugierde naiv gefragt: Dieses CSS von MrOtherGuy erlaubt das Verschieben von Tabs nicht, was wohl JS benötigt.

Wenn man "nur" JS für diese schon wichtige Funktion schreiben würde, in Verbindung mit diesem CSS Code, würde dann noch etwas anderes wichtiges fehlen für eine funktionelle mehrzeilige Tableiste, verglichen mit der normalen Fx Leiste?

FuchsFan

Zitat von Horstmann

Nur mal aus Neugierde naiv gefragt: Dieses CSS von MrOtherGuy erlaubt das Verschieben von Tabs nicht, was wohl JS benötigt.

Du kannst dir das ja mal anschauen, denn den css-Code von ihm (?) habe ich auch verändert. Zum Verschieben in Verbindung mit dem Script aus #1116.

CSS

/* =========================================================
   GRUNDEINSTELLUNGEN
   ========================================================= */

:root{
  --multirow-n-rows: 2;                 /* Maximale Anzahl sichtbarer Reihen */
  --multirow-tab-min-width: 250px;      /* Kleinste Tab-Breite */
  --multirow-tab-max-width: 350px;      /* Größte Tab-Breite */
  --multirow-tab-height: 27px;          /* Sichtbare Tab-Höhe */
  --multirow-tab-top-margin: 0px;       /* Oberer Abstand pro Tab */
  --multirow-tab-bottom-margin: 0px;    /* Unterer Abstand pro Tab */
  --multirow-row-gap: 2px;              /* Abstand zwischen Reihen */

  --multirow-tab-total-height: calc(
    var(--multirow-tab-height) +
    var(--multirow-tab-top-margin) +
    var(--multirow-tab-bottom-margin)
  );

  --proton-tab-radius: 0px;
  --proton-tab-block-margin: 0px;
  --inline-tab-padding: 5px;

  --scrollbutton-display-model: none;
}

/* =========================================================
   MULTIROW-TABS
   ========================================================= */

#tabbrowser-tabs{
  min-height: unset !important;
  padding-inline-start: 0 !important;
  padding-inline-end: 0 !important;
  margin-top: 1px !important;
  margin-inline-end: 0 !important;
}

#tabbrowser-tabs[orient="horizontal"]{
  min-height: calc(var(--multirow-tab-total-height)) !important;
  justify-content: flex-start !important;
  align-content: flex-start !important;
  overflow: hidden !important;
}

@-moz-document url(chrome://browser/content/browser.xhtml){
  /* Firefox-interne Scrollbuttons ausblenden */
  #scrollbutton-up~spacer,
  #scrollbutton-up,
  #scrollbutton-down{
    display: none !important;
  }

  /* Entscheidender Multirow-Block */
  scrollbox[part][orient="horizontal"],
  scrollbox[part][orient="horizontal"] > slot{
    display: flex !important;
    flex-wrap: wrap !important;
    align-content: flex-start !important;
    justify-content: flex-start !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;

    max-height: calc(
      (var(--multirow-tab-total-height) * var(--multirow-n-rows)) +
      ((var(--multirow-n-rows) - 1) * var(--multirow-row-gap))
    ) !important;

    scrollbar-width: thin !important;
    scrollbar-color: auto !important;
    scrollbar-gutter: auto !important;

    padding-inline-end: 0 !important;
    margin-inline-end: 0 !important;
    border-inline-end: 0 !important;

    contain: none !important;

    -moz-window-dragging: no-drag !important;
  }

  /* Clip-Wrapper ebenfalls ohne rechten Versatz */
  box.scrollbox-clip[orient="horizontal"]{
    padding-inline-end: 0 !important;
    margin-inline-end: 0 !important;
    border-inline-end: 0 !important;
    overflow: visible !important;

    -moz-window-dragging: no-drag !important;
  }

  /* Scrollbar selbst nicht als Fensterzugfläche behandeln */
  #tabbrowser-arrowscrollbox scrollbar,
  #tabbrowser-arrowscrollbox scrollbar *{
    -moz-window-dragging: no-drag !important;
  }
}

#tabbrowser-arrowscrollbox{
  overflow-y: auto !important;
  overflow-x: hidden !important;
  display: block !important;

  scrollbar-width: thin !important;
  scrollbar-color: auto !important;
  scrollbar-gutter: auto !important;

  padding-inline-end: 0 !important;
  margin-inline-end: 0 !important;
  border-inline-end: 0 !important;

  -moz-window-dragging: no-drag !important;
}

#tabbrowser-arrowscrollbox-periphery{
  margin: 0 !important;
  padding: 0 !important;
  inset-inline-end: 0 !important;
  position: relative !important;

  -moz-window-dragging: no-drag !important;
}

.tabbrowser-tab{
  height: var(--multirow-tab-height) !important;
  min-height: var(--multirow-tab-height) !important;
  max-height: var(--multirow-tab-height) !important;
  margin-top: var(--multirow-tab-top-margin) !important;
  margin-bottom: var(--multirow-tab-bottom-margin) !important;
  scroll-snap-align: start;
  box-shadow: none !important;
}

/* Drag-Verhalten sauber halten */
#tabbrowser-tabs[orient="horizontal"] .tabbrowser-tab[movingtab]{
  padding-bottom: 15px !important;
  margin-bottom: -15px !important;
}

/* Angeheftete Tabs */
#tabbrowser-tabs .tabbrowser-tab[pinned]{
  position: static !important;
  margin-inline-start: 0 !important;
}

/* Normale Tabs: Breite */
#tabbrowser-tabs[orient="horizontal"] .tabbrowser-tab[fadein]:not([pinned]){
  flex: 1 1 var(--multirow-tab-min-width) !important;
  min-width: var(--multirow-tab-min-width) !important;
  max-width: var(--multirow-tab-max-width) !important;
  width: auto !important;
}

/* Inhalt füllt den Tab */
.tabbrowser-tab > stack{
  width: 100%;
  height: 100%;
}

/* Buttons und Störer ausblenden */
#alltabs-button,
:root:not([customizing]) #TabsToolbar #new-tab-button,
#tabbrowser-arrowscrollbox > spacer,
.tabbrowser-tab::after{
  display: none !important;
}

/* Allgemeine Tabflächen */
.tab-background{
  margin-block: unset !important;
}

box.scrollbox-clip[orient="horizontal"]{
  display: inline !important;
}

.tab-label-container{
  height: unset !important;
}

#tabbrowser-tabs[orient="horizontal"] .tab-background,
#tabbrowser-tabs[orient="horizontal"]{
  min-height: unset !important;
}

/* Optional: Split-View */
tab-split-view-wrapper{
  min-width: calc(var(--multirow-tab-min-width) * 2 + 6px) !important;
}

/* Optional: Tab-Gruppen */
tab-group[collapsed] .tabbrowser-tab[fadein]:not([pinned]){
  min-width: 0 !important;
}

/* =========================================================
   TAB-STYLE
   Zweck:
   - Optische Gestaltung der Tabs
   - Farben, Hover, Schrift und Toolbar-Abstände
   ========================================================= */

/* Tabs ohne Radius */
#TabsToolbar .tabbrowser-tab .tab-background{
  border-radius: unset !important;
  margin-block: unset !important;
}

/* Nicht sichtbare Tabs / rechter Abschluss */
hbox.titlebar-spacer,
tabs tab:not([fadein]){
  display: none !important;
}

/* Aktiver Tab */
#tabbrowser-arrowscrollbox tab.tabbrowser-tab stack.tab-stack vbox.tab-background[selected]{
  min-height: var(--multirow-tab-height) !important;
  max-height: var(--multirow-tab-height) !important;
  background: linear-gradient(45deg, gold, #FFFAF0, beige, #FFFAF0, orange) !important;
  margin-left: -2px !important;
  margin-right: -2px !important;
  border: 1px solid green !important;
  outline: none !important;
}

/* Aktiver Tab bei Hover dunkler */
#main-window .tabbrowser-tab[selected]:hover{
  opacity: .5 !important;
}

/* Inaktiver Tab */
.tabbrowser-tab:not([selected]){
  background: linear-gradient(0.35turn, silver, white, silver) !important;
  border: 1px solid grey !important;
}

/* Inaktiver Tab bei Hover */
.tabbrowser-tab:not([visuallyselected]):hover{
  background: linear-gradient(8deg, lightblue, white, lightblue) !important;
  border: 1px solid blue !important;
}

/* Favicon */
.tabbrowser-tab:not([visuallyselected]) img.tab-icon-image{
  margin-top: 0px !important;
  margin-left: -1px !important;
}

/* Schließen-Button standardmäßig unsichtbar */
.tab-close-button{
  fill: grey !important;
  transform: scale(1.5, 1.5) !important;
  display: block !important;
  opacity: 0 !important;
  margin-right: -7px !important;
}

/* Schließen-Button nur bei Hover sichtbar */
.tabbrowser-tab:hover .tab-close-button{
  opacity: 1 !important;
  color: red !important;
  background: none !important;
}

/* Schließen-Button bei inaktiven Tabs leicht verschieben */
.tabbrowser-tab:not([visuallyselected]) .tab-close-button{
  margin-top: -2px !important;
}

/* Schließen-Button Position im Tab */
.tabbrowser-tab > .tab-stack > .tab-content > .tab-close-button{
  flex-shrink: 0 !important;
  width: 24px !important;
  padding-inline-start: 7px !important;
  width: unset !important;
}

/* Tabtext zentrieren */
.tab-label-container{
  height: unset !important;
  display: grid !important;
  justify-items: safe center !important;
  justify-content: safe center !important;
}

.tab-label{
  justify-content: center !important;
  overflow: hidden !important;
}

/* Schrift aktiver Tab */
.tabbrowser-tab[visuallyselected] .tab-label{
  color: blue !important;
  font-weight: bold !important;
  font-size: 1.25em !important;
  font-family: "Verdana, Helvetica", serif !important;
  font-style: italic !important;
  padding-bottom: 0 !important;
}

/* Schrift inaktiver Tab */
.tabbrowser-tab:not([visuallyselected]) .tab-label{
  color: #4a525f !important;
  font-weight: 600 !important;
  font-size: 1.1em !important;
  padding-bottom: 0px !important;
}

/* Inaktiver Tab bei Hover */
.tabbrowser-tab:not([visuallyselected]):hover .tab-label{
  color: brown !important;
  font-weight: 700 !important;
  font-size: 1.1em !important;
  opacity: 1 !important;
}

/* Tabtext beim Laden blau */
.tabbrowser-tab[busy] .tab-label{
  color: blue !important;
}

/* Nav-Bar mit Hintergrund und Rand */
#nav-bar{
  appearance: none !important;
  background-image: none !important;
  background-color: #C2D3ED !important;
  border-top: 1px solid grey !important;
  border-bottom: 1px solid grey !important;
  box-shadow: none !important;
  margin-top: 3px !important;
}

/* Abstand Lesezeichen-Symbolleiste zur URL-Bar */
#PersonalToolbar{
  margin-top: 3px !important;
}

/* Abstand TabsToolbar zur Menü-Bar / Personal-Toolbar */
#TabsToolbar{
  margin-top: 2px !important;
  margin-bottom: -1px !important;
  padding-top: 0 !important;
}

/* Menubar-Anpassung */
#main-menubar{
  margin-top: 3px !important;
}

/*===== New-Tab-Button =====*/
/* Zeilen 126 und 127 auskommentiert */

/* Weite für newtab-button */
#TabsToolbar :is(.tabs-newtab-button,#tabs-newtab-button){
  min-width: 0px !important;
  width: 22px !important;
  height: 22px !important;
  margin-top: 3px !important;
  margin-left: 4px !important;
}

/* Größe des neuen Tab-Tabs „+“-Symbol */
#TabsToolbar :is(.tabs-newtab-button,#tabs-newtab-button) .toolbarbutton-icon{
  min-width: 0px !important;
  min-height: 0px !important;
  width: 14px !important;
  height: 14px !important;
  margin: 0px !important;
  margin-bottom: 0px !important;
  padding: 0px !important;
  background: unset !important;
  box-shadow: unset !important;
}

#TabsToolbar #tabs-newtab-button:hover {	
  background-color: #FFF !important;
  padding: 0px !important;
}

/* das Plus-Zeichen */
#TabsToolbar #tabs-newtab-button > image {
  min-height: 24px !important;
  max-height: 24px !important;
  min-width: 24px !important;
  max-width: 24px !important;
  margin-top: 1px !important;
  margin-left: 0px !important;
  padding: 2px !important;
  fill: grey !important;
}	

#TabsToolbar #tabs-newtab-button:hover > image {	
  fill: red !important;
}

/*===== New-Tab-Button ** ENDE =====*/

/* ==================================================================
   TABLEISTEN-POSITION
   Zweck:
   - order 1: oben über der Menüleiste
   - order 2: unter der Menüleiste
   - order 3: unter der Navigationsleiste
   - order 4: unter der Personal-Symbolleiste
   Hinweis:
   - Immer alle vier Leisten zusammen anpassen (keine doppelte order)
   ================================================================= */

/* Navigator-Toolbox als Flexcontainer sicherstellen */
#navigator-toolbox {
  display: flex !important;
  flex-direction: column !important;
}

/* Menüleiste */
#toolbar-menubar {
  order: 1 !important;
}

/* Navigationsleiste */
#nav-bar {
  order: 2 !important;
}

/* Lesezeichen-Symbolleiste */
#PersonalToolbar {
  order: 3 !important;
}

/* Tableiste */
#TabsToolbar {
  order: 4 !important;
}

Alles anzeigen

lenny2

Zitat von FuchsFan

.....das Script für Drag&Drop

Super, das Skript funktioniert hervorragend mit multi-row_tabs.css von MrOtherGuy.

yaqwa

ich bin begeistert - viel Dank -

eine Frage - wo kann ich einstellen dass wenn ich einen neuen link aufrufe entweder auf der seite wo ich bin oder von meiner lesezeichenleiste - das dieser dann am ende geöffnet wird und nicht direkt neben dem tab den ic hgerade offen habe ?