Mehrzeilige Tableiste für aktuelle Firefox-Versionen

FuchsFan

Zitat von yaqwa

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 ?

Teste mal Folgendes: In die Adressleiste about:config eingeben, mit Enter bestätigen und Sicherheitshinweis beachten. Oben dann das : browser.tabs.insertAfterCurrent , müsste dort auf true stehen. Diesen Wert auf false setzen, und speichern. Firefox dann neu starten. Merke dir die Änderung, damit du sie notfalls wieder auf den Standardwert zurück stellen kannst.

yaqwa

hat funktioniert - vielen Dank

FuchsFan

Zitat von yaqwa

hat funktioniert - vielen Dank

Freut mich!

FuchsFan

Das Script für Drag&Drop aus diesem Beitrag #1116 erhält hiermit ein Update. Es funktionierten die Abstände der Marker nicht richtig, was hiermit korrigiert wird. Im oberen Teil ist jetzt außerdem ein Settings-Modul eingebaut, von dem aus die Abstände der Marker eingestellt werden können.

....das Script für Drag&Drop (Update):

CSS

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

TabMoveOnly();

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

  const TAB_DROP_TYPE = window.TAB_DROP_TYPE || "application/x-moz-tabbrowser-tab";

  // =========================================================
  // FEINEINSTELLUNGEN FÜR DIE MARKER
  // =========================================================
  // Links: Marker horizontal verschieben in px
  const LEFT_MARKER_SHIFT = 0;

  // Rechts: Marker horizontal verschieben in px
  const RIGHT_MARKER_SHIFT = 0;

  // Marker vertikal leicht nach oben/unten korrigieren in px
  const MARKER_TOP = -1;

  // =========================================================
  // MARKER-CSS
  // =========================================================
  const css = `
.tabbrowser-tab[dnd-marker]{
  position: relative !important;
}

.tab-dnd-marker{
  position: absolute !important;
  pointer-events: none !important;
  z-index: 1000 !important;
  content: "" !important;
  width: 14px !important;
  height: 18px !important;
  border-radius: 50% !important;
  background:
    radial-gradient(circle at center,
    #00ffff 0 35%,
    #1dacd6 36% 60%,
    rgba(255,255,255,0) 61%) !important;
  box-shadow: 0 0 3px rgba(255, 90, 82, 0.35) !important;
}
`;

  // =========================================================
  // CSS EINBINDEN
  // =========================================================
  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);
  }

  const tabContainer = gBrowser.tabContainer;

  // Listener nur einmal aktivieren
  let listenersActive = false;

  // Reserviert für Gruppen-/Drop-Zustand
  let lastGroupStart = null;
  let lastGroupEnd = null;

  // =========================================================
  // MARKER-VERWALTUNG
  // =========================================================

  function clearDndMarkers() {
    for (const tab of gBrowser.tabs) {
      tab.removeAttribute("dnd-marker");
      tab.style.removeProperty("--tab-dnd-marker-top");

      if (tab._dndMarkerEl) {
        tab._dndMarkerEl.remove();
        tab._dndMarkerEl = null;
      }
    }
  }

  function setDndMarker(tab, side) {
    clearDndMarkers();
    if (!tab || !side) return;

    // Nur zur Erkennung / CSS-Selektoren
    tab.setAttribute("dnd-marker", side);

    // Vertikale Feinkorrektur als Variable direkt am Tab
    tab.style.setProperty("--tab-dnd-marker-top", `${MARKER_TOP}px`);

    // Echtes Marker-Element, damit dein CSS sicher greift
    const marker = tab.ownerDocument.createXULElement("box");
    marker.className = `tab-dnd-marker ${side}`;

    // Horizontale Feineinstellung pro Seite
    if (side === "left") {
      marker.style.setProperty("left", `${1 + LEFT_MARKER_SHIFT}px`, "important");
    } else if (side === "right") {
      marker.style.setProperty("right", `${1 + RIGHT_MARKER_SHIFT}px`, "important");
    }

    tab.appendChild(marker);
    tab._dndMarkerEl = marker;
  }

  // =========================================================
  // HILFSFUNKTIONEN FÜR TAB / DROP
  // =========================================================

  function getTabFromEventTarget(event, ignoreTabSides = false) {
    let { target } = event;
    if (!target) return null;

    if (target.nodeType !== Node.ELEMENT_NODE) {
      target = target.parentElement;
    }

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

    // Falls der Cursor nur im Randbereich ist, nimm den aktuell ausgewählten Tab
    if (tab && ignoreTabSides) {
      const { 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;
  }

  // Firefox-interne 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);
    const rect = tabToDropAt.getBoundingClientRect();
    const ltr = window.getComputedStyle(this).direction == "ltr";

    if (ltr) {
      return event.clientX < rect.x + rect.width / 2 ? tabPos : tabPos + 1;
    }
    return event.clientX > rect.x + rect.width / 2 ? tabPos : tabPos + 1;
  };

  // Prüft, ob der Drag wirklich ein Tab-Drag ist
  function orig_getDropEffectForTabDrag(event) {
    const dt = event.dataTransfer;

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

    if (isMovingTabs) {
      const 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) {
      const 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 };
  }

  // =========================================================
  // DRAG OVER
  // =========================================================
  function performTabDragOver(event) {
    const effects = orig_getDropEffectForTabDrag(event);

    // Nur echte Tab-Drags zulassen
    if (effects == "none" || effects == "link") {
      clearDndMarkers();
      return;
    }

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

    const tab = getTabFromEventTarget(event, true);

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

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

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

  // =========================================================
  // DROP
  // =========================================================
  function performTabDropEvent(event) {
    clearDndMarkers();

    const dt = event.dataTransfer;
    const 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;

      const selectedTabs = gBrowser.selectedTabs.length > 1 ? gBrowser.selectedTabs : [draggedTab];
      let tabToMoveAt = gBrowser.tabContainer.getItemAtIndex(newIndex);
      const tab = getTabFromEventTarget(event, false);
      const 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);
        });
      }

      lastGroupStart = null;
      lastGroupEnd = null;
    }
  }

  // =========================================================
  // EINMALIGE INITIALISIERUNG
  // =========================================================
  tabContainer.addEventListener("dragstart", () => {
    if (listenersActive) return;

    tabContainer.on_dragover = e => performTabDragOver(e);
    tabContainer._onDragOver = e => performTabDragOver(e);
    tabContainer.ondrop = e => performTabDropEvent(e);

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

    listenersActive = true;
  });
}

Alles anzeigen

FuchsFan

Ergänzend hierzu #1118 habe ich den CSS-Code für MultiRowTabs mit dem Script für Drag&Drop vereinigt.

JavaScript

// ==UserScript==
// @name           TabMoveOnlyMultiRow.uc.js
// @namespace      local
// @description    Multirow-Tabs + Styling + nur Tab-Verschieben per Drag & Drop
// @include        main
// @compatibility  Firefox138+
// @version        2026-03-24
// ==/UserScript==
"use strict";

TabMoveOnly();

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

  const TAB_DROP_TYPE = window.TAB_DROP_TYPE || "application/x-moz-tabbrowser-tab";
  const RIGHT_MARKER_SHIFT = 15; // Marker 15px weiter nach links

  const css = `

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

:root{
  --multirow-n-rows: 3;
  --multirow-tab-min-width: 250px;
  --multirow-tab-max-width: 350px;
  --multirow-tab-height: 27px;
  --multirow-tab-top-margin: 1px;
  --multirow-tab-bottom-margin: 0px;
  --multirow-row-gap: 2px;

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

#scrollbutton-up~spacer,
#scrollbutton-up,
#scrollbutton-down{
  display: none !important;
}

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

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

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

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

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

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

.tabbrowser-tab > stack{
  width: 100%;
  height: 100%;
}

#alltabs-button,
:root:not([customizing]) #TabsToolbar #new-tab-button,
#tabbrowser-arrowscrollbox > spacer,
.tabbrowser-tab::after{
  display: none !important;
}

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

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

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

/* =========================================================
   TAB-STYLE
   ========================================================= */

#TabsToolbar .tabbrowser-tab .tab-background{
  border-radius: unset !important;
  margin-block: unset !important;
}

hbox.titlebar-spacer,
tabs tab:not([fadein]){
  display: none !important;
}

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

#main-window .tabbrowser-tab[selected]:hover{
  opacity: .5 !important;
}

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

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

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

.tab-close-button{
  fill: grey !important;
  transform: scale(1.5, 1.5) !important;
  display: block !important;
  opacity: 0 !important;
  margin-right: -7px !important;
}

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

.tabbrowser-tab:not([visuallyselected]) .tab-close-button{
  margin-top: -2px !important;
}

.tabbrowser-tab > .tab-stack > .tab-content > .tab-close-button{
  flex-shrink: 0 !important;
  width: 24px !important;
  padding-inline-start: 7px !important;
  width: unset !important;
}

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

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

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

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

.tabbrowser-tab[busy] .tab-label{
  color: blue !important;
}

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

#PersonalToolbar{
  margin-top: 3px !important;
}

#TabsToolbar{
  margin-top: 2px !important;
  margin-bottom: -1px !important;
  padding-top: 0 !important;
}

#main-menubar{
  margin-top: 3px !important;
}

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

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

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

/* =========================================================
   TABLEISTEN-POSITION
   ========================================================= */

#navigator-toolbox{
  display: flex !important;
  flex-direction: column !important;
}

#toolbar-menubar{
  order: 1 !important;
}

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

#PersonalToolbar{
  order: 3 !important;
}

#TabsToolbar{
  order: 4 !important;
}

/* =========================================================
   DND-MARKER
   ========================================================= */

.tabbrowser-tab[dnd-marker]{
  position: relative !important;
}

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

.tab-dnd-marker.left{
  left: 1px !important;
  top: -1px !important;
}

.tab-dnd-marker.right{
  right: 1px !important;
  top: -1px !important;
}
`;

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

  const tabContainer = gBrowser.tabContainer;
  let listenersActive = false;
  let lastKnownIndex = null;
  let lastGroupStart = null;
  let lastGroupEnd = null;

  function clearDndMarkers() {
    for (const tab of gBrowser.tabs) {
      tab.removeAttribute("dnd-marker");
      if (tab._dndMarkerEl) {
        tab._dndMarkerEl.remove();
        tab._dndMarkerEl = null;
      }
    }
  }

  function setDndMarker(tab, side) {
    clearDndMarkers();
    if (!tab || !side) return;

    tab.setAttribute("dnd-marker", side);

    const marker = tab.ownerDocument.createXULElement("box");
    marker.className = `tab-dnd-marker ${side}`;

    if (side === "right") {
      marker.style.right = `${-2 + RIGHT_MARKER_SHIFT}px`;
    } else {
      marker.style.left = "-2px";
    }

    tab.appendChild(marker);
    tab._dndMarkerEl = marker;
  }

  function getTabFromEventTarget(event, ignoreTabSides = false) {
    let { target } = event;
    if (!target) return null;

    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) {
      const { 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;
  }

  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);
    const rect = tabToDropAt.getBoundingClientRect();

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

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

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

    if (isMovingTabs) {
      const 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) {
      const 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);

    if (effects == "none" || effects == "link") {
      clearDndMarkers();
      return;
    }

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

    const tab = getTabFromEventTarget(event, true);

    if (tab && tab.nodeName == "tab-group" && !lastGroupStart) {
      const first = tab.querySelector("tab:first-of-type");
      const last = tab.querySelector("tab:last-of-type");
      if (first && last) {
        lastGroupStart = first._tPos;
        lastGroupEnd = last._tPos;
      }
    }

    const 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();

    const dt = event.dataTransfer;
    const 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;

      const selectedTabs = gBrowser.selectedTabs.length > 1 ? gBrowser.selectedTabs : [draggedTab];
      let tabToMoveAt = gBrowser.tabContainer.getItemAtIndex(newIndex);
      const tab = getTabFromEventTarget(event, false);
      const 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;
    }
  }

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

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

      listenersActive = true;
    }
  });
}

Alles anzeigen

lenny2

Zitat von FuchsFan

....das Script für Drag&Drop (Update):

Beim Verschieben eines Tabs kann die Marker entweder am Ende des vorherigen oder am Anfang des nächsten Tabs erscheinen. Ist das so beabsichtigt?

Dank Ihrer Skripte ist die Mehrzeilenfunktionalität nun deutlich verbessert. Vielen Dank!

FuchsFan

Zitat von lenny2

Beim Verschieben eines Tabs kann die Marker entweder am Ende des vorherigen oder am Anfang des nächsten Tabs erscheinen. Ist das so beabsichtigt?

Nein, die Marker erscheinen mit den Settings immer innerhalb eines Tabs, entweder links oder rechts. Ein anderes Verhalten kann ich hier nicht feststellen.

Zitat von lenny2

Dank Ihrer Skripte ist die Mehrzeilenfunktionalität nun deutlich verbessert. Vielen Dank!

Freut mich wenn es gefällt, aber ich betone nochmals, nur mit KI ist das möglich, ich kenne mich nicht mit JavaScript aus.

Hier dann nochmals das überarbeitete Script, mit dem Settings-Modul zur einfachen Auswahl der Abstände.

CSS

// ==UserScript==
// @name           TabMoveOnlyMultiRow.uc.js
// @namespace      local
// @description    Multirow-Tabs + Styling + nur Tab-Verschieben per Drag & Drop
// @include        main
// @compatibility  Firefox138+
// @version        2026-03-24
// ==/UserScript==
"use strict";

TabMoveOnly();

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

  const TAB_DROP_TYPE = window.TAB_DROP_TYPE || "application/x-moz-tabbrowser-tab";

  // =========================================================
  // FEINEINSTELLUNGEN FÜR DIE MARKER
  // =========================================================
  // Links: Marker horizontal verschieben in px
  const LEFT_MARKER_SHIFT = 0;

  // Rechts: Marker horizontal verschieben in px
  const RIGHT_MARKER_SHIFT = 0;

  // Marker vertikal leicht nach oben/unten korrigieren in px
  const MARKER_TOP = -1;

  const css = `

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

:root{
  --multirow-n-rows: 3;
  --multirow-tab-min-width: 250px;
  --multirow-tab-max-width: 350px;
  --multirow-tab-height: 27px;
  --multirow-tab-top-margin: 1px;
  --multirow-tab-bottom-margin: 0px;
  --multirow-row-gap: 2px;

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

#scrollbutton-up~spacer,
#scrollbutton-up,
#scrollbutton-down{
  display: none !important;
}

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

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

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

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

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

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

.tabbrowser-tab > stack{
  width: 100%;
  height: 100%;
}

#alltabs-button,
:root:not([customizing]) #TabsToolbar #new-tab-button,
#tabbrowser-arrowscrollbox > spacer,
.tabbrowser-tab::after{
  display: none !important;
}

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

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

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

/* =========================================================
   TAB-STYLE
   ========================================================= */

#TabsToolbar .tabbrowser-tab .tab-background{
  border-radius: unset !important;
  margin-block: unset !important;
}

hbox.titlebar-spacer,
tabs tab:not([fadein]){
  display: none !important;
}

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

#main-window .tabbrowser-tab[selected]:hover{
  opacity: .5 !important;
}

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

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

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

.tab-close-button{
  fill: grey !important;
  transform: scale(1.5, 1.5) !important;
  display: block !important;
  opacity: 0 !important;
  margin-right: -7px !important;
}

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

.tabbrowser-tab:not([visuallyselected]) .tab-close-button{
  margin-top: -2px !important;
}

.tabbrowser-tab > .tab-stack > .tab-content > .tab-close-button{
  flex-shrink: 0 !important;
  width: 24px !important;
  padding-inline-start: 7px !important;
  width: unset !important;
}

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

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

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

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

.tabbrowser-tab[busy] .tab-label{
  color: blue !important;
}

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

#PersonalToolbar{
  margin-top: 3px !important;
}

#TabsToolbar{
  margin-top: 2px !important;
  margin-bottom: -1px !important;
  padding-top: 0 !important;
}

#main-menubar{
  margin-top: 3px !important;
}

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

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

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

/* =========================================================
   TABLEISTEN-POSITION
   ========================================================= */

#navigator-toolbox{
  display: flex !important;
  flex-direction: column !important;
}

#toolbar-menubar{
  order: 1 !important;
}

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

#PersonalToolbar{
  order: 3 !important;
}

#TabsToolbar{
  order: 4 !important;
}

/* =========================================================
   DND-MARKER
   ========================================================= */

.tabbrowser-tab[dnd-marker]{
  position: relative !important;
}

.tab-dnd-marker{
  position: absolute !important;
  pointer-events: none !important;
  z-index: 1000 !important;
  content: "" !important;
  width: 14px !important;
  height: 18px !important;
  border-radius: 50% !important;
  background:
    radial-gradient(circle at center,
    #00ffff 0 35%,
    #1dacd6 36% 60%,
    rgba(255,255,255,0) 61%) !important;
  box-shadow: 0 0 3px rgba(255, 90, 82, 0.35) !important;
}
`;

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

  const tabContainer = gBrowser.tabContainer;
  let listenersActive = false;
  let lastKnownIndex = null;
  let lastGroupStart = null;
  let lastGroupEnd = null;

  function clearDndMarkers() {
    for (const tab of gBrowser.tabs) {
      tab.removeAttribute("dnd-marker");
      if (tab._dndMarkerEl) {
        tab._dndMarkerEl.remove();
        tab._dndMarkerEl = null;
      }
    }
  }

  function setDndMarker(tab, side) {
    clearDndMarkers();
    if (!tab || !side) return;

    tab.setAttribute("dnd-marker", side);

    const marker = tab.ownerDocument.createXULElement("box");
    marker.className = "tab-dnd-marker";

    marker.style.top = `${MARKER_TOP}px`;

    if (side === "right") {
      marker.style.right = `${-2 + RIGHT_MARKER_SHIFT}px`;
    } else {
      marker.style.left = `${-2 + LEFT_MARKER_SHIFT}px`;
    }

    tab.appendChild(marker);
    tab._dndMarkerEl = marker;
  }

  function getTabFromEventTarget(event, ignoreTabSides = false) {
    let { target } = event;
    if (!target) return null;

    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) {
      const { 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;
  }

  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);
    const rect = tabToDropAt.getBoundingClientRect();

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

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

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

    if (isMovingTabs) {
      const 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) {
      const 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);

    if (effects == "none" || effects == "link") {
      clearDndMarkers();
      return;
    }

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

    const tab = getTabFromEventTarget(event, true);

    if (tab && tab.nodeName == "tab-group" && !lastGroupStart) {
      const first = tab.querySelector("tab:first-of-type");
      const last = tab.querySelector("tab:last-of-type");
      if (first && last) {
        lastGroupStart = first._tPos;
        lastGroupEnd = last._tPos;
      }
    }

    const 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();

    const dt = event.dataTransfer;
    const 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;

      const selectedTabs = gBrowser.selectedTabs.length > 1 ? gBrowser.selectedTabs : [draggedTab];
      let tabToMoveAt = gBrowser.tabContainer.getItemAtIndex(newIndex);
      const tab = getTabFromEventTarget(event, false);
      const 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;
    }
  }

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

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

      listenersActive = true;
    }
  });
}

Alles anzeigen

lenny2

Zitat von FuchsFan

Nein, die Marker erscheinen mit den Settings immer innerhalb eines Tabs, entweder links oder rechts. Ein anderes Verhalten kann ich hier nicht feststellen.

Ich habe TabMoveOnly.uc.js #1.124 mit MrOtherGuys Multi-Row-Stil ausprobiert.

Stefan62

Hallo 2002Andreas,

du hast mir vor 2 Jahren eine CSS erstellt, hier im Beitrag #873

Funktioniert auch immer noch, nur wird die Tableiste seit einiger Zeit unterteilt, die angehefteten Tabs sind links und die Unterteilung schiebt sich, wenn ich einen Tab mehr anhefte, immer weiter nach rechts, so dass für die normalen Tabs immer weniger Platz bleibt.

Lässt sich da in der CSS was ändern so das die Unterteilung verschwindet?

grisu2099

Zitat von Stefan62

Lässt da in der CSS was ändern?

Ich bin zwar nicht Andreas, aber erwartest du wirklich, daß hier jemand in den 57 Seiten nach deinem CSS sucht? Wenn du hier nach Anpassungen fragst, ist es dich wohl das Mindeste, daß du dein aktuelles CSS hier (unaufgefordert!) zur Verfügung stellst...

2002Andreas

Zitat von Stefan62

Lässt da in der CSS was ändern so das die Unterteilung verschwindet?

Zumindest mir ist keine Möglichkeit dafür bekannt. Das Problem ist ja auch bei Nutzung von einem Skript statt CSS Code vorhanden.

Stefan62

Zitat von grisu2099

Zitat von Stefan62

Lässt da in der CSS was ändern?

Ich bin zwar nicht Andreas, aber erwartest du wirklich, daß hier jemand in den 57 Seiten nach deinem CSS sucht? Wenn du hier nach Anpassungen fragst, ist es dich wohl das Mindeste, daß du dein aktuelles CSS hier (unaufgefordert!) zur Verfügung stellst...

Vielen Dank für deine freundliche Hilfe und frohe Ostern.

Zitat von 2002Andreas

Zitat von Stefan62

Lässt da in der CSS was ändern so das die Unterteilung verschwindet?

Zumindest mir ist keine Möglichkeit dafür bekannt. Das Problem ist ja auch bei Nutzung von einem Skript statt CSS Code vorhanden.

Danke, dachte ist nur bei mir so. Frohe Ostern.

2002Andreas

Zitat von Stefan62

Frohe Ostern.

Danke, wünsche ich dir auch