Mehrzeilige Tableiste CSS Code

Platos

Nutzt du da jetzt mein Code?

Weil bei mir funktioniert es nicht. Ich kann sie ein bisschen bewegen und dann aber bleiben sie auf einmal irgendwo "hängen", als wäre da eine Wand oder so.

2002Andreas

Zitat von Platos

Nutzt du da jetzt mein Code?

Ja.

Zitat von Platos

Weil bei mir funktioniert es nicht.

Nur mein Vorschlag.

Du solltest den CSS Code entfernen.

Dann ein Skript nehmen, und das anpassen/ändern, was du noch alles möchtest.

Dann lassen sich die Tabs auch beliebig verschieben.

Platos

Ich nutze jetzt folgenden Code:

CSS

/*Ab hier Code, der für neuere Firefoxversionen nötig ist, damit alles wieder richtig positioniert ist. Stand 10.07.2023*/


/*Verändert glaube ich den schwarzen Hintergrund hinter den Tabs. Ist nötig, damit es keinen freien, schwarzen Hintergrund hinter den
Tabs hat, wenn man sie mittels ".tabbrowser-tab" auf z.B 21px begrenzt (sonst ist der Hintergrund weiterhin so gross, wie original).
Ist auch wegen den Multi-Tabreihen wichtig, denn der Code arbeitet mit "--tab-min-height" und dieser muss dann so hoch sein, wie meine Tabs. */
#tabbrowser-tabs {
--tab-min-height: 21px !important;
}


/*Keine Abstände um den Tab rum, die durch neuere Firefoxversionen enstanden sind*/
.tab-background {
margin-block: 0px !important;
}


/*verschiebt den "New-Tab"-Button. Darf nicht zu hoch sein die Zahl, sonst hat man bei den Multi-Tabreihen fehler*/
#TabsToolbar .toolbarbutton-1 > .toolbarbutton-icon, #TabsToolbar .toolbarbutton-1 > .toolbarbutton-text, #TabsToolbar .toolbarbutton-1 > .toolbarbutton-badge-stack {
margin-top: -3px !important;
}


/*Ab hier "alter" code*/


/*Verändert die höhe der Browser-Tabs und den Abstand zwischen Tabs (padding)*/
.tabbrowser-tab {
min-height: 21px !important;
max-height: 21px !important;
padding: 0 2px !important;
}
/*Top-Linie beim (aktiven) tab in "solid #429CE3"*/
.tabbrowser-tab[visuallyselected="true"] > .tab-stack > .tab-background {
border-top: 2px solid #429CE3 !important;
}


/*Das ist die Navigationsleite (dort, wo die Url-Leiste, Addonsymbole & Vor-und Zurückbutton sind)*/


#nav-bar {
min-height: 22px !important;
max-height: 22px !important;
margin-top: -4px !important;
}


/* Stand 10.07.2023. Ab hier code für "mehrere Tabreihen" mit 145px "min-width" (sonst verschwindet das Kreuz zum Tabschliessen, wenn die Tabs kleiner sind)*/


/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/multi-row_tabs.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */


/* Makes tabs to appear on multiple lines */
/* Tab reordering will not work and can't be made to work */
/* You can use multi-row_tabs_window_control_patch.css to move window controls to nav-bar*/


/* You might want to move tabs-new-tab-button outside tabs toolbar for smoother behavior */


/* Change the --multirow-n-rows to change maximum number of rows before the rows will start to scroll  */


:root{
--multirow-n-rows: 3;
--multirow-tab-min-width: 100px;
--multirow-tab-dynamic-width: 1; /* Change to 0 for fixed-width tabs using the above width. */
}


/* Scrollbar can't be clicked but the rows can be scrolled with mouse wheel */
/* Uncomment the next line if you want to be able to use the scrollbar with mouse clicks */


/* #tabbrowser-arrowscrollbox{ -moz-window-dragging: no-drag } */


/* Uncommenting the above makes you unable to drag the window from empty space in the tab strip but normal draggable spaces will continue to work */


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


@-moz-document url(chrome://browser/content/browser.xhtml){
#scrollbutton-up~spacer,
#scrollbutton-up,
#scrollbutton-down{ display: var(--scrollbutton-display-model,initial) }


scrollbox[part][orient="horizontal"]{
display: flex;
flex-wrap: wrap;
overflow-y: auto;
max-height: calc((var(--tab-min-height) + 2 * var(--tab-block-margin,0px)) * var(--multirow-n-rows));
scrollbar-color: currentColor transparent;
scrollbar-width: thin;
scrollbar-gutter: stable;
scroll-snap-type: y mandatory;
}
}


.scrollbox-clip[orient="horizontal"],
#tabbrowser-arrowscrollbox{
overflow: -moz-hidden-unscrollable;
display: inline;
--scrollbutton-display-model: none;
}


.tabbrowser-tab{ scroll-snap-align: start; }


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


.tabbrowser-tab[fadein]:not([pinned]){
min-width: 145px !important;
flex-grow: var(--multirow-tab-dynamic-width) !important;
/*
Uncomment to enable full-width tabs, also makes tab dragging a tiny bit more sensible
Don't set to none or you'll see errors in console when closing tabs
*/
/*max-width: 100vw !important;*/
}


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


/* remove bottom margin so it doesn't throw off row height computation */
#tabs-newtab-button{ margin-bottom: 0 !important; }


#tabbrowser-tabs[hasadjacentnewtabbutton][overflow="true"] > #tabbrowser-arrowscrollbox > #tabbrowser-arrowscrollbox-periphery > #tabs-newtab-button {
display: flex !important;
align-items: center; /* Fx <112 compatibility */
}


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

Alles anzeigen

Ich habe herausgefunden, dass Zeile 14, 20, 31 und 45 einen Einfluss darauf haben, ob ich mit den Tabs beim ziehen irgendwo "hängen" bleibe.

Mit obigem Code funktioniert das horizontale verschieben innerhalb einer Tabreihe soweit gut. Von oben nach unten geht es in beide Richtungen, aber nicht so ganz "normal". Wenn ich den Tab eine (oder mehrere) Reihe nach unten ziehen will, muss ich mit dem Tab ganz nach rechts gehen und dann kann ich den Tab eine oder mehrere Reihen nach unten ziehen. Umgekehrt zum nach oben Ziehen muss ich ganz nach links.

Soweit funktioniert es, auf diese Weise zumindest, aber ich sehe es schon kommen, dass mir noch mehr Fehler auffallen. Naja, wenn ich nichts mehr schreibe dazu, dann funktioniert es.

Aber ja, vlt. mache ich mich irgendwann ja doch mal auf und nutze Javascript. Ich kann nur gar nix mit Javascript. Wenn, dann starte ich mit deinem Script, denn du ein paar Beiträge vorher gepostet hast.

2002Andreas

Zitat von Platos

Ich kann nur gar nix mit Javascript.

Musst du ja auch nicht selber machen

Hier gibt es einige Fachleute dafür

Ansonsten:

In diesem Skript:

Beitrag

Mehrzeilige Tableiste für aktuelle Firefox-Versionen

(Versteckter Text)

Neues Update (16.10.2024):

Wichtig: Für diese Version des Skript wird es von meiner Seite nur noch Fehlerbehebungen geben. Das heißt, dass auf absehbare Zeit keine neuen Features eingebaut werden. Allerdings können Verbesserungsvorschläge und Feature-Requests gerne weiter gemacht werden, ich sammle das und werde versuchen, einen Teil davon bei einer grundlegend neuen Version (Termin steht allerdings in den ✨) zu berücksichtigen...

Für aktuelle Versionen ab FF131+:

Das Script…

BrokenHeart

8. Dezember 2019 um 01:19

Ab Zeile 59 bis Zeile 151, kannst du alles selber auswählen.

Farben, Hintergrund, Tabs oben oder unten etc. etc.

Einfacher geht es nun wirklich nicht

2002Andreas

Zitat von Platos

Wenn, dann starte ich mit deinem Script,

Könnte dann so aussehen:

JavaScript

// ==UserScript==
// @name           zzzz-MultiRowTab_LiteforFx48.uc.js
// @namespace      http://space.geocities.yahoo.co.jp/gl/alice0775
// @description    Experimentelle CSS Version für Mehrzeilige Tableiste
// @include        main
// @compatibility  Firefox 113
// @author         Alice0775
// @version        2016/08/05 00:00 Firefox 48
// @version        2016/05/01 00:01 hide favicon if busy
// @version        2016/03/09 00:01 Bug 1222490 - Actually remove panorama for Fx45+
// @version        2016/02/09 00:01 workaround css for lwt
// @version        2016/02/09 00:00
// ==/UserScript==
"use strict";
MultiRowTabLiteforFx();
function MultiRowTabLiteforFx() {

    var css =` /* USER_SHEET */
    @-moz-document url-prefix("chrome://browser/content/browser.xhtml") {

    /* Anpassung der Symbolleisten */
    #titlebar,#tabbrowser-tabs { appearance: none !important; }

    /* Anpassen der Titelleistenschaltfläche [- x] der Tableiste  */
    #TabsToolbar > .titlebar-buttonbox-container { margin: 0 !important; }
    #TabsToolbar > .titlebar-buttonbox-container .titlebar-button {
      height: calc(8px + var(--tab-min-height));
      padding: 0 !important;
      width: 46px;
    }
    #toolbar-menubar:not([inactive]) ~ #TabsToolbar:not([inFullscreen]) > .titlebar-buttonbox-container { display: none !important; }

    /* Mehrzeilige Tableiste */
    box.scrollbox-clip[orient="horizontal"] > scrollbox {
      flex-wrap: wrap !important;
      max-height: calc(calc(8px + var(--tab-min-height)) * 3); /* Anzahl der Tabzeilen(Standard = 3 Zeilen)*/
      overflow-x: hidden !important;
      overflow-y: auto !important;
    }

    /* Ausblenden */
    .tabbrowser-tab:not([fadein]),
    #alltabs-button { display: none !important; }

    /* --- Ziehbereich der Tab-Leiste --- */
    /* Anpassung */
    hbox.titlebar-spacer[type="pre-tabs"] { width: 0px !important; } /* Linker Ziehbereich: Standard 40px */
    hbox.titlebar-spacer[type="post-tabs"] { width: 0px !important; } /* Rechter Ziehbereich: Standard 40px */

    /* ↓ Wenn Sie die linke und rechte Seite des CSS-Codes auskommentieren und den CSS-Code aktivieren, 
       können Sie den Ziehbereich links einblenden, der beim Maximieren des Fensters ausgeblendet wird. */
    /* :root:not([sizemode="normal"]) hbox.titlebar-spacer[type="pre-tabs"] { display: block !important; } */
    /* ↓Wenn Sie die Auskommentierung links und rechts von unten stehenden CSS-Code entfernen und den CSS-Code 
        aktivieren, können Sie den linken und rechten Ziehbereich einblenden, der im Vollbildmodus ausgeblendet wird.  */
    /* :root[inFullscreen] hbox.titlebar-spacer { display: block !important; } */

    } `;
    var sss = Cc['@mozilla.org/content/style-sheet-service;1'].getService(Ci.nsIStyleSheetService);
    var uri = makeURI('data:text/css;charset=UTF=8,' + encodeURIComponent(css));
    sss.loadAndRegisterSheet(uri, sss.USER_SHEET);

    var css =` /* AGENT_SHEET */
    @-moz-document url-prefix("chrome://browser/content/browser.xhtml") {

    /* Bei Überschreitung der angegebenen Zeilenanzahl, mit der Maus,    
       über die dann eingeblendetet Scrolleiste zur gewünschten Zeile wechselnる */
    box.scrollbox-clip > scrollbox[orient="horizontal"] > scrollbar { -moz-window-dragging: no-drag !important; }

    } `;
    var sss = Cc['@mozilla.org/content/style-sheet-service;1'].getService(Ci.nsIStyleSheetService);
    var uri = makeURI('data:text/css;charset=UTF=8,' + encodeURIComponent(css));
    sss.loadAndRegisterSheet(uri, sss.AGENT_SHEET);

    var css =` /* AUTHOR_SHEET */

    /*
    #tabbrowser-arrowscrollbox::part(scrollbox) {
      flex-wrap: wrap !important;
      max-height: calc(calc(8px + var(--tab-min-height)) * 3);
      overflow-x: hidden !important;
      overflow-y: auto !important;
    }
    */

    /* Bildlaufschaltfläche und Abstandshalter in der Schattenwurzel der Tab-Leiste ausblenden */
    #tabbrowser-arrowscrollbox[scrolledtostart]::part(overflow-start-indicator),
    #tabbrowser-arrowscrollbox[scrolledtoend]::part(overflow-end-indicator),
    #tabbrowser-arrowscrollbox::part(scrollbutton-up),
    #tabbrowser-arrowscrollbox::part(scrollbutton-down) { display: none !important; }
    
    .tabbrowser-tab:not([pinned]) {
    flex-grow: 0 !important;
    min-width: 180px !important; /*Feste Breite für die Tabs, kann geändert werden*/
    }
    
    *|*:root { 
    --tab-toolbar-navbar-overlap: 0 !important;  
    --tab-min-height: 28px !important;
    }
    
    .tabbrowser-tab {
    min-height: 21px !important;
    max-height: 21px !important;
    }
    
    .tabbrowser-tab[visuallyselected="true"] > .tab-stack > .tab-background {
    border-top: 2px solid #429CE3 !important;
    }
    `;
    var sss = Components.classes['@mozilla.org/content/style-sheet-service;1'].getService(Components.interfaces.nsIStyleSheetService);
    var uri = makeURI('data:text/css;charset=UTF=8,' + encodeURIComponent(css));
    sss.loadAndRegisterSheet(uri, sss.AUTHOR_SHEET);

    if(location.href !== 'chrome://browser/content/browser.xhtml') return;

    // Tabbar scrollIntoView
    gBrowser.tabContainer.addEventListener("SSTabRestoring", function(event) {event.target.scrollIntoView({behavior: "instant", block: "nearest", inline: "nearest"})}, true);
    gBrowser.tabContainer.addEventListener("TabAttrModified", function(event) {event.target.scrollIntoView({behavior: "instant", block: "nearest", inline: "nearest"})}, true);
    gBrowser.tabContainer.addEventListener("TabMove", function(event) {event.target.scrollIntoView({behavior: "instant", block: "nearest", inline: "nearest"})}, true);

    // drag & drop & DropIndicator

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

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

      var arrowScrollbox = this.arrowScrollbox;

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

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

      ind.hidden = false;
      newMarginX += ind.clientWidth / 2;
      if (RTL_UI) {
        newMarginX *= -1;
      }
      ind.style.transform = "translate(" + Math.round(newMarginX) + "px," + Math.round(newMarginY) + "px)";
    }

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

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

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

        if (oldTranslateX && oldTranslateX != newTranslateX && !gReduceMotion) {
          for (let tab of movingTabs) {
            tab.setAttribute("tabdrop-samewindow", "true");
            tab.style.transform = "translateX(" + newTranslateX + "px)";
            let postTransitionCleanup = () => {
              tab.removeAttribute("tabdrop-samewindow");

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

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

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

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

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

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

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

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

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

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

}

Alles anzeigen

Ab Zeile 91 bis 108 habe ich teilweise deine Daten eingefügt.

Platos

Habe mittlerweile das "Original" ausprobiert, ist ganz ok, aber mir gefällt einiges am Style nicht. Habe mich auch schon aufgemacht, es zu ändern, aber deins ist ja viel besser

Danke!

Also nehme ich jetzt deins mal. Ich habe noch folgendes abgeändert/hinzugefügt:

CSS

*|*:root {
--tab-toolbar-navbar-overlap: 0 !important;
--tab-min-height: 21px !important;
}


.tabbrowser-tab {
min-height: 21px !important;
max-height: 21px !important;
}


#nav-bar {
min-height: 22px !important;
max-height: 22px !important;
margin-top: 0px !important;
}


.tabbrowser-tab[visuallyselected="true"] > .tab-stack > .tab-background {
border-top: 2px solid #429CE3 !important;
}

Alles anzeigen

Jetzt frage ich mich aber folgendes bei dem Skript: Egal ob mit oder ohne meine Änderung, die Tabs sind abgeschnitten. Man sieht das auch auf deinem Bild beim angewählten Tab. Oben ist er noch abgerundet, unten aber nicht. Ich weiss nicht, wie das zustande kommt. Hast du da eine Idee?

Dann hätte ich noch eine Frage wegen der Animation beim Tab umherziehen: Im Original ist der ja anders, wie in deiner Version und deine Version anders, wie die aktuelle FF Version. Wäre es möglich, die Animation der aktuellen FF Version da einzubauen? Also so, dass man den Tab immer sieht beim umherziehen. Also nicht nur diese Linien. Ich habe mir alle CSS Einschübe da angeschaut, aber ich erkenne nicht, was für diese Animation verwantwortlich ist.

Edit: Ach ja, und wie mache ich es, dass ich immer den Tabschliessen-Button sehe bei allen Tabs? Fällt mir gerade auf, dass die weg sind.

2002Andreas

Zitat von Platos

dass ich immer den Tabschliessen-Button sehe bei allen Tabs?

Zitat von Platos

die Tabs sind abgeschnitten.

Weil sie so schmal sind.

Zitat von Platos

.tabbrowser-tab { min-height: 21px !important; max-height: 21px !important; }

Zitat von Platos

Also so, dass man den Tab immer sieht beim umherziehen.

Meinst du das damit?

Ich habe den Code mal etwas verändert.

JavaScript

// ==UserScript==
// @name           zzzz-MultiRowTab_LiteforFx48.uc.js
// @namespace      http://space.geocities.yahoo.co.jp/gl/alice0775
// @description    Experimentelle CSS Version für Mehrzeilige Tableiste
// @include        main
// @compatibility  Firefox 113
// @author         Alice0775
// @version        2016/08/05 00:00 Firefox 48
// @version        2016/05/01 00:01 hide favicon if busy
// @version        2016/03/09 00:01 Bug 1222490 - Actually remove panorama for Fx45+
// @version        2016/02/09 00:01 workaround css for lwt
// @version        2016/02/09 00:00
// ==/UserScript==
"use strict";
MultiRowTabLiteforFx();
function MultiRowTabLiteforFx() {

    var css =` /* USER_SHEET */
    @-moz-document url-prefix("chrome://browser/content/browser.xhtml") {

    /* Anpassung der Symbolleisten */
    #titlebar,#tabbrowser-tabs { appearance: none !important; }

    /* Anpassen der Titelleistenschaltfläche [- x] der Tableiste  */
    #TabsToolbar > .titlebar-buttonbox-container { margin: 0 !important; }
    #TabsToolbar > .titlebar-buttonbox-container .titlebar-button {
      height: calc(8px + var(--tab-min-height));
      padding: 0 !important;
      width: 46px;
    }
    #toolbar-menubar:not([inactive]) ~ #TabsToolbar:not([inFullscreen]) > .titlebar-buttonbox-container { display: none !important; }

    /* Mehrzeilige Tableiste */
    box.scrollbox-clip[orient="horizontal"] > scrollbox {
      flex-wrap: wrap !important;
      max-height: calc(calc(8px + var(--tab-min-height)) * 3); /* Anzahl der Tabzeilen(Standard = 3 Zeilen)*/
      overflow-x: hidden !important;
      overflow-y: auto !important;
    }

    /* Ausblenden */
    .tabbrowser-tab:not([fadein]),
    #alltabs-button { display: none !important; }

    /* --- Ziehbereich der Tab-Leiste --- */
    /* Anpassung */
    hbox.titlebar-spacer[type="pre-tabs"] { width: 0px !important; } /* Linker Ziehbereich: Standard 40px */
    hbox.titlebar-spacer[type="post-tabs"] { width: 0px !important; } /* Rechter Ziehbereich: Standard 40px */

    /* ↓ Wenn Sie die linke und rechte Seite des CSS-Codes auskommentieren und den CSS-Code aktivieren, 
       können Sie den Ziehbereich links einblenden, der beim Maximieren des Fensters ausgeblendet wird. */
    /* :root:not([sizemode="normal"]) hbox.titlebar-spacer[type="pre-tabs"] { display: block !important; } */
    /* ↓Wenn Sie die Auskommentierung links und rechts von unten stehenden CSS-Code entfernen und den CSS-Code 
        aktivieren, können Sie den linken und rechten Ziehbereich einblenden, der im Vollbildmodus ausgeblendet wird.  */
    /* :root[inFullscreen] hbox.titlebar-spacer { display: block !important; } */

    } `;
    var sss = Cc['@mozilla.org/content/style-sheet-service;1'].getService(Ci.nsIStyleSheetService);
    var uri = makeURI('data:text/css;charset=UTF=8,' + encodeURIComponent(css));
    sss.loadAndRegisterSheet(uri, sss.USER_SHEET);

    var css =` /* AGENT_SHEET */
    @-moz-document url-prefix("chrome://browser/content/browser.xhtml") {

    /* Bei Überschreitung der angegebenen Zeilenanzahl, mit der Maus,    
       über die dann eingeblendetet Scrolleiste zur gewünschten Zeile wechselnる */
    box.scrollbox-clip > scrollbox[orient="horizontal"] > scrollbar { -moz-window-dragging: no-drag !important; }

    } `;
    var sss = Cc['@mozilla.org/content/style-sheet-service;1'].getService(Ci.nsIStyleSheetService);
    var uri = makeURI('data:text/css;charset=UTF=8,' + encodeURIComponent(css));
    sss.loadAndRegisterSheet(uri, sss.AGENT_SHEET);

    var css =` /* AUTHOR_SHEET */

    /*
    #tabbrowser-arrowscrollbox::part(scrollbox) {
      flex-wrap: wrap !important;
      max-height: calc(calc(8px + var(--tab-min-height)) * 3);
      overflow-x: hidden !important;
      overflow-y: auto !important;
    }
    */

    /* Bildlaufschaltfläche und Abstandshalter in der Schattenwurzel der Tab-Leiste ausblenden */
    #tabbrowser-arrowscrollbox[scrolledtostart]::part(overflow-start-indicator),
    #tabbrowser-arrowscrollbox[scrolledtoend]::part(overflow-end-indicator),
    #tabbrowser-arrowscrollbox::part(scrollbutton-up),
    #tabbrowser-arrowscrollbox::part(scrollbutton-down) { display: none !important; }
    
    .tabbrowser-tab:not([pinned]) {
    flex-grow: 0 !important;
    min-width: 180px !important; /*Feste Breite für die Tabs, kann geändert werden*/
    }
    
    *|*:root { 
    --tab-toolbar-navbar-overlap: 0 !important;  
   /*  --tab-min-height: 28px !important; */
    }
    
/*     .tabbrowser-tab {
    min-height: 33px !important;
    max-height: 33px !important;
    } */
    
    .tabbrowser-tab[visuallyselected="true"] > .tab-stack > .tab-background {
    border-top: 2px solid #429CE3 !important;
    }
    `;
    var sss = Components.classes['@mozilla.org/content/style-sheet-service;1'].getService(Components.interfaces.nsIStyleSheetService);
    var uri = makeURI('data:text/css;charset=UTF=8,' + encodeURIComponent(css));
    sss.loadAndRegisterSheet(uri, sss.AUTHOR_SHEET);

    if(location.href !== 'chrome://browser/content/browser.xhtml') return;

    // Tabbar scrollIntoView
    gBrowser.tabContainer.addEventListener("SSTabRestoring", function(event) {event.target.scrollIntoView({behavior: "instant", block: "nearest", inline: "nearest"})}, true);
    gBrowser.tabContainer.addEventListener("TabAttrModified", function(event) {event.target.scrollIntoView({behavior: "instant", block: "nearest", inline: "nearest"})}, true);
    gBrowser.tabContainer.addEventListener("TabMove", function(event) {event.target.scrollIntoView({behavior: "instant", block: "nearest", inline: "nearest"})}, true);

    // drag & drop & DropIndicator

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

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

      var arrowScrollbox = this.arrowScrollbox;

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

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

      ind.hidden = false;
      newMarginX += ind.clientWidth / 2;
      if (RTL_UI) {
        newMarginX *= -1;
      }
      ind.style.transform = "translate(" + Math.round(newMarginX) + "px," + Math.round(newMarginY) + "px)";
    }

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

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

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

        if (oldTranslateX && oldTranslateX != newTranslateX && !gReduceMotion) {
          for (let tab of movingTabs) {
            tab.setAttribute("tabdrop-samewindow", "true");
            tab.style.transform = "translateX(" + newTranslateX + "px)";
            let postTransitionCleanup = () => {
              tab.removeAttribute("tabdrop-samewindow");

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

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

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

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

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

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

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

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

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

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

}

Alles anzeigen

Platos

Danke, ich werde den Code ausprobieren. War gestern schon nicht mehr hier.

Aber nein, ich meinte nicht das mit der Tab-Vorschau (die gibt es zwar auch bei mir, sehe ich gerade). Wenn du ja ein Tab rumschiebst, siehst du doch diesen blauen Strich (in deiner Version), der einem signalisiert, wo der Tab abgelegt wird. Im aktuellen Firefox ist es aber so, dass dass der Tab an sich rumgeschoben wird (ohne diesen blauen Strich). Ich weiss nicht, wie du das immer machst mit diesen kleinen Videos, deswegen kann ich dir nur ein Bild machen.

Bezüglich abgeschnittenen Tabs: Naja also bei meinem Code geht es ohne Multirow-Tabs (dann ist es nicht abgeschnitten). Irgendwas muss da also in Konflikt geraten. Ich suche ja gerne selber, aber kannst du mir sagen, ob ich nur den CSS Code anschauen muss? Oder könnte es auch sein, dass es am Javascript liegt?

Was ich mich gerade noch frage: Ist es mit CSS technisch möglich, dass sich die Tabbreite folgendermassen verhält: Alle Tabs sollen immer gleich breit sein, sich aber in der Grösse an den verfügbaren Platz in der Leiste oben anpassen. ich nutze oft verschieden breite Fenster. Bei fixen Tabbreiten habe ich dann unter umständen rechts immer leere Bereiche. Nutze ich aber variable Tabbreiten, sind alle Tabs verschieden breit (in den versch. Zeilen). Daher die Idee, dass sie zwar untereinander gleich breit sein sollen, insgesammt aber sich am verfügbaren Platz anpassen sollen in der Breite.

2002Andreas

Zitat von Platos

(ohne diesen blauen Strich

Der wird mit dem Skript erstellt.

Ob, bzw. wo man das deaktivieren kann, bin ich leider überfragt.

Zitat von Platos

ob ich nur den CSS Code anschauen muss? Oder könnte es auch sein, dass es am Javascript liegt?

Ich weiß ja nicht was für Dateien du mit welchem Inhalt nutzt.

Eigentlich brauchst du nur das Skript.

Darin enthalten sind ja die CSS Anpassungen schon.

Zitat von Platos

Alle Tabs sollen immer gleich breit sein, sich aber in der Grösse an den verfügbaren Platz in der Leiste oben anpassen.

Ob das funktioniert kann ich dir auch leider nicht sagen.

Platos

Ok, also der blaue Strich ist mir ja egal. Ich meinte einfach, dass ich beim Tab Umherschieben auch sehe, wie der Tab umhergeschoben wird. Wenn da noch ein blauer Strich ist, ist mir das eig. egal. Ich würde nur gerne sehen, wie der Tab auch umhergeschoben wird, so wie in aktuellen Firefoxversionen.

Wenn du mir sagst, wie du das mit diesen Videos machst, kann ich auch eins machen.

Ich habe jetzt versucht, die Tabs mit diesem Skript wieder so zu machen, wie es ohne Script ist. Hat soweit funktioneirt, denke ich:

CSS

// ==UserScript==
// @name           zzzz-MultiRowTab_LiteforFx48.uc.js
// @namespace      http://space.geocities.yahoo.co.jp/gl/alice0775
// @description    Experimentelle CSS Version für Mehrzeilige Tableiste
// @include        main
// @compatibility  Firefox 113
// @author         Alice0775
// @version        2016/08/05 00:00 Firefox 48
// @version        2016/05/01 00:01 hide favicon if busy
// @version        2016/03/09 00:01 Bug 1222490 - Actually remove panorama for Fx45+
// @version        2016/02/09 00:01 workaround css for lwt
// @version        2016/02/09 00:00
// ==/UserScript==
"use strict";
MultiRowTabLiteforFx();
function MultiRowTabLiteforFx() {


var css =` /* USER_SHEET */
@-moz-document url-prefix("chrome://browser/content/browser.xhtml") {


/* Anpassung der Symbolleisten */
#titlebar,#tabbrowser-tabs { appearance: none !important; }


/* Anpassen der Titelleistenschaltfläche [- x] der Tableiste  */
#TabsToolbar > .titlebar-buttonbox-container { margin: 0 !important; }
#TabsToolbar > .titlebar-buttonbox-container .titlebar-button {
height: calc(8px + var(--tab-min-height));
padding: 0 !important;
width: 46px;
}
#toolbar-menubar:not([inactive]) ~ #TabsToolbar:not([inFullscreen]) > .titlebar-buttonbox-container { display: none !important; }


/* Mehrzeilige Tableiste */
box.scrollbox-clip[orient="horizontal"] > scrollbox {
flex-wrap: wrap !important;
max-height: calc(calc(8px + var(--tab-min-height)) * 3); /* Anzahl der Tabzeilen(Standard = 3 Zeilen)*/
overflow-x: hidden !important;
overflow-y: auto !important;
}


/* --- Ziehbereich der Tab-Leiste --- */
/* Anpassung */
hbox.titlebar-spacer[type="pre-tabs"] { width: 0px !important; } /* Linker Ziehbereich: Standard 40px */
hbox.titlebar-spacer[type="post-tabs"] { width: 0px !important; } /* Rechter Ziehbereich: Standard 40px */


/* ↓ Wenn Sie die linke und rechte Seite des CSS-Codes auskommentieren und den CSS-Code aktivieren,
können Sie den Ziehbereich links einblenden, der beim Maximieren des Fensters ausgeblendet wird. */
/* :root:not([sizemode="normal"]) hbox.titlebar-spacer[type="pre-tabs"] { display: block !important; } */
/* ↓Wenn Sie die Auskommentierung links und rechts von unten stehenden CSS-Code entfernen und den CSS-Code
aktivieren, können Sie den linken und rechten Ziehbereich einblenden, der im Vollbildmodus ausgeblendet wird.  */
/* :root[inFullscreen] hbox.titlebar-spacer { display: block !important; } */


} `;
var sss = Cc['@mozilla.org/content/style-sheet-service;1'].getService(Ci.nsIStyleSheetService);
var uri = makeURI('data:text/css;charset=UTF=8,' + encodeURIComponent(css));
sss.loadAndRegisterSheet(uri, sss.USER_SHEET);


var css =` /* AGENT_SHEET */
@-moz-document url-prefix("chrome://browser/content/browser.xhtml") {


/* Bei Überschreitung der angegebenen Zeilenanzahl, mit der Maus,
über die dann eingeblendetet Scrolleiste zur gewünschten Zeile wechselnる */
box.scrollbox-clip > scrollbox[orient="horizontal"] > scrollbar { -moz-window-dragging: no-drag !important; }


} `;
var sss = Cc['@mozilla.org/content/style-sheet-service;1'].getService(Ci.nsIStyleSheetService);
var uri = makeURI('data:text/css;charset=UTF=8,' + encodeURIComponent(css));
sss.loadAndRegisterSheet(uri, sss.AGENT_SHEET);


var css =` /* AUTHOR_SHEET */


/*
#tabbrowser-arrowscrollbox::part(scrollbox) {
flex-wrap: wrap !important;
max-height: calc(calc(8px + var(--tab-min-height)) * 3);
overflow-x: hidden !important;
overflow-y: auto !important;
}
*/


/* Bildlaufschaltfläche und Abstandshalter in der Schattenwurzel der Tab-Leiste ausblenden */
#tabbrowser-arrowscrollbox[scrolledtostart]::part(overflow-start-indicator),
#tabbrowser-arrowscrollbox[scrolledtoend]::part(overflow-end-indicator),
#tabbrowser-arrowscrollbox::part(scrollbutton-up),
#tabbrowser-arrowscrollbox::part(scrollbutton-down) { display: none !important; }


.tabbrowser-tab:not([pinned]) {
flex-grow: 0 !important;
min-width: 180px !important; /*Feste Breite für die Tabs, kann geändert werden*/
}


*|*:root {
--tab-toolbar-navbar-overlap: 0 !important;
--tab-min-height: 21px !important;
}




/*Keine Abstände um den Tab rum, die durch neuere Firefoxversionen enstanden sind*/
.tab-background {
margin-block: 0px !important;
}


#urlbar {
margin-top: -2px !important;
--urlbar-toolbar-height: 25px !imporant;
--urlbar-height: 22px !important;
}


.tabbrowser-tab {
min-height: 21px !important;
max-height: 21px !important;
padding: 0 0px !important;
}


#nav-bar {
min-height: 22px !important;
max-height: 22px !important;
margin-top: -0px !important;
}


.tabbrowser-tab[visuallyselected="true"] > .tab-stack > .tab-background {
border-top: 2px solid #429CE3 !important;
}
`;
var sss = Components.classes['@mozilla.org/content/style-sheet-service;1'].getService(Components.interfaces.nsIStyleSheetService);
var uri = makeURI('data:text/css;charset=UTF=8,' + encodeURIComponent(css));
sss.loadAndRegisterSheet(uri, sss.AUTHOR_SHEET);


if(location.href !== 'chrome://browser/content/browser.xhtml') return;


// Tabbar scrollIntoView
gBrowser.tabContainer.addEventListener("SSTabRestoring", function(event) {event.target.scrollIntoView({behavior: "instant", block: "nearest", inline: "nearest"})}, true);
gBrowser.tabContainer.addEventListener("TabAttrModified", function(event) {event.target.scrollIntoView({behavior: "instant", block: "nearest", inline: "nearest"})}, true);
gBrowser.tabContainer.addEventListener("TabMove", function(event) {event.target.scrollIntoView({behavior: "instant", block: "nearest", inline: "nearest"})}, true);


// drag & drop & DropIndicator


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


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


var arrowScrollbox = this.arrowScrollbox;


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


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


ind.hidden = false;
newMarginX += ind.clientWidth / 2;
if (RTL_UI) {
newMarginX *= -1;
}
ind.style.transform = "translate(" + Math.round(newMarginX) + "px," + Math.round(newMarginY) + "px)";
}


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


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


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


if (oldTranslateX && oldTranslateX != newTranslateX && !gReduceMotion) {
for (let tab of movingTabs) {
tab.setAttribute("tabdrop-samewindow", "true");
tab.style.transform = "translateX(" + newTranslateX + "px)";
let postTransitionCleanup = () => {
tab.removeAttribute("tabdrop-samewindow");


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


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


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


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


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


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


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


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


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


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


}

Alles anzeigen

2002Andreas

Zitat von Platos

wie der Tab auch umhergeschoben wird

Im Skript ab Zeile 163 wird das verändert.

Was genau dann entfernt werden, muss kann ich dir nicht sagen.

Platos

ok, ich werde es mir ansehen und mal schauen, ob ich da was basteln kann

Noch eine Frage: Ich sehe gerade, dass diese Version in der Tableiste ganz recht so ein Pfeil hat. Wenn ich da drauf klicke, popt ein Menu mit meinen Tabs auf. Kann ich das entfernen? Oder weisst du, an welcher Stelle im Skript das ist?

2002Andreas

Zitat von Platos

ganz recht so ein Pfeil hat.

Den Eintrag hast du aus deinem Skript selber entfernt.

So sieht der aus:

CSS

 /* Ausblenden */
    .tabbrowser-tab:not([fadein]),
    #alltabs-button { display: none !important; }

Platos

Ahh, ja ich habe den entfernt, weil er dafür sorgt, dass der Tab-schliessen Button nur noch auf dem aktiven Tab angezeigt wird.

Wie kann ich denn die Tab-schliessen Button auf allen anzeigen ?

2002Andreas

Zitat von Platos

Wie kann ich denn die Tab-schliessen Button auf allen anzeigen ?

Dein Skript aus Beitrag #30 ergibt hier:

Die X sind überall vorhanden.

Platos

Ja eben, weil ich ja den Teil den du vorher gesagt hast, entfernt habe. Nur taucht dann auch dieser Pfeil ganz rechts in der Tableiste auf.

Aber ich konnte das Problem jetzt lösen und zwar lösche ich den Teil den du gesagt hast nicht raus und zusätzlich mit diesem code funktioniert es dann (habe ich ergooglet):

Code

.tabbrowser-tab:not([pinned]) .tab-close-button {
display: inline-flex !important
}

2002Andreas

Zitat von Platos

entfernt habe.

Siehe die Screenshots in Beitrag 35.

Bei mir sind die auch mit dem Eintrag vorhanden.

Der hat ja auch mit den X nichts zu tun.

Platos

Edit: also soweit gehts jetzt. Das einzige Problem, dass ich jetzt noch habe, ist das mit dem Tab "draghover".

Ich frage mal im anderen Thread nach, ob das geht im Skritp.

Zitat von 2002Andreas

Siehe die Screenshots in Beitrag 35.
Bei mir sind die auch mit dem Eintrag vorhanden.
Der hat ja auch mit den X nichts zu tun.

Ja, aber bei mir sind sie nicht vorhanden. Ich habe es gerade ausprobiert. Bei mir verschwinden die X sofort, wenn ich das aktiviere (das war schon von Anfang an so ohne eigene Änderung am Skript) . Ich weiss nicht wieso es bei mir nicht geht, aber mit dem zusätzlichen Code von # 36 geht es.

2002Andreas

Zitat von Platos

aber mit dem zusätzlichen Code von # 36 geht es.

Dann nimm den zusätzlich.