Der letzte Eintrag ist zwar schon eine Weile her, ich poste es aber trotzdem, vielleicht hilft es ja jemanden weiter .
Bei der letzten JS-Script / CSS-Datei Version von BrokenHeart sind zwar die Tab Reihen alle ganz zu sehen, dafür gibt es (zumindest bei mir) ein anderes Problem: das Browser Fenster läßt sich nicht mehr mit dem Mauszeiger verschieben, was in der ersten Version ganz oben noch ging. Ich habe mir jetzt mal die Dateien der ersten Version angeschaut (habe von JS-Script / CSS keine Ahnung ) und die Verschiebung der Tab Reihen korrigiert. Jetzt sind die Tab Reihen sauber zu sehen und man kann das Browser Fenster trotzdem verschieben. Folgende Änderungen kann man z.B. in der userchrome.css selbst einstellen (ist im letzten Abschnitt):
min-width: 100px !important; /* Feste Breite des einzelnem Tabs */ (Breite eines nicht angepinnten Tabs, z.B. 200 statt 100)
ax-height: calc( 3 * 30px ) !important; // 3 Rows (Anzahl der Tab Zeilen, z.B. 4 statt 3)
Getestet mit Firefox 74.0 mit den Auflösungen 1920x1080 und 2560x1440.
Zusammen mit dem AddOn 'Bookmark Tab Here' bin ich jetzt schon nah an dem Komfort von früher (mit TabMixPlus und Add Bookmark Here).
// ==UserScript==
// @name zzzz-MultiRowTab_LiteforFx48.uc.js
// @namespace http://space.geocities.yahoo.co.jp/gl/alice0775
// @description 多段タブもどき実験版 CSS入れ替えまくりLiteバージョン
// @include main
// @compatibility Firefox 71
// @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 sss = Cc['@mozilla.org/content/style-sheet-service;1'].getService(Ci.nsIStyleSheetService);
var uri = makeURI('data:text/css;charset=UTF=8,');
sss.loadAndRegisterSheet(uri, sss.AGENT_SHEET);
var css =`
tabs tab {
border-left: solid 1px hsla(0,0%,50%,.5) !important;
border-right: solid 1px hsla(0,0%,50%,.5) !important;
}
tabs tab:after,tabs tab:before { display: none !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.AUTHOR_SHEET);
gBrowser.tabContainer.clearDropIndicator = function() {
var tabs = this.allTabs;
for (let i = 0, len = tabs.length; i < len; i++) {
tabs[i].style.removeProperty("border-left-color");
tabs[i].style.removeProperty("border-right-color");
}
}
gBrowser.tabContainer.addEventListener("dragleave", function(event) { this.clearDropIndicator(event); }, true);
gBrowser.tabContainer.on_dragover = function(event) {
this.clearDropIndicator();
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;
// autoscroll the tab strip if we drag over the scroll
// buttons, even if we aren't dragging a tab, but then
// return to avoid drawing the drop indicator
var pixelsToScroll = 0;
if (this.getAttribute("overflow") == "true") {
switch (event.originalTarget) {
case arrowScrollbox._scrollButtonUp:
pixelsToScroll = arrowScrollbox.scrollIncrement * -1;
break;
case arrowScrollbox._scrollButtonDown:
pixelsToScroll = arrowScrollbox.scrollIncrement;
break;
}
if (pixelsToScroll) {
arrowScrollbox.scrollByPixels(
(RTL_UI ? -1 : 1) * pixelsToScroll,
true
);
}
}
/*
let draggedTab = event.dataTransfer.mozGetDataAt(TAB_DROP_TYPE, 0);
if (
(effects == "move" || effects == "copy") &&
this == draggedTab.container
) {
ind.hidden = true;
if (!this._isGroupTabsAnimationOver()) {
// Wait for grouping tabs animation to finish
return;
}
this._finishGroupSelectedTabs(draggedTab);
if (effects == "move") {
this._animateTabMove(event);
return;
}
}
this._finishAnimateTabMove();
*/
if (effects == "link") {
let tab = this._getDragTargetTab(event, 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 newMargin;
if (pixelsToScroll) {
// if we are scrolling, put the drop indicator at the edge
// so that it doesn't jump while scrolling
let scrollRect = arrowScrollbox.scrollClientRect;
let minMargin = scrollRect.left - rect.left;
let maxMargin = Math.min(
minMargin + scrollRect.width,
scrollRect.right
);
if (RTL_UI) {
[minMargin, maxMargin] = [
this.clientWidth - maxMargin,
this.clientWidth - minMargin,
];
}
newMargin = pixelsToScroll > 0 ? maxMargin : minMargin;
} else {
let newIndex = this._getDropIndex(event, effects == "link");
let children = this.allTabs;
if (newIndex == children.length) {
let tabRect = children[newIndex - 1].getBoundingClientRect();
if (RTL_UI) {
newMargin = rect.right - tabRect.left;
} else {
newMargin = tabRect.right - rect.left;
}
children[newIndex - 1].style.setProperty("border-right-color","red","important");
} else {
let tabRect = children[newIndex].getBoundingClientRect();
if (RTL_UI) {
newMargin = rect.right - tabRect.right;
} else {
newMargin = tabRect.left - rect.left;
}
children[newIndex].style.setProperty("border-left-color","red","important");
}
}
//ind.hidden = false;
ind.hidden = true;
newMargin += ind.clientWidth / 2;
if (RTL_UI) {
newMargin *= -1;
}
ind.style.transform = "translate(" + Math.round(newMargin) + "px)";
ind.style.marginInlineStart = -ind.clientWidth + "px";
}
gBrowser.tabContainer.on_drop = function(event) {
this.clearDropIndicator();
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, false);
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 = this._getDropIndex(event, false);
// "animDropIndex" in draggedTab._dragData &&
// draggedTab._dragData.animDropIndex;
let incrementDropIndex = true;
if (dropIndex && dropIndex > movingTabs[0]._tPos) {
dropIndex--;
incrementDropIndex = false;
}
let animate = gBrowser.animationsEnabled;
if (oldTranslateX && oldTranslateX != newTranslateX && animate) {
for (let tab of movingTabs) {
tab.setAttribute("tabdrop-samewindow", "true");
tab.style.transform = "translateX(" + newTranslateX + "px)";
let onTransitionEnd = transitionendEvent => {
if (
transitionendEvent.propertyName != "transform" ||
transitionendEvent.originalTarget != tab
) {
return;
}
tab.removeEventListener("transitionend", onTransitionEnd);
tab.removeAttribute("tabdrop-samewindow");
this._finishAnimateTabMove();
if (dropIndex !== false) {
gBrowser.moveTabTo(tab, dropIndex);
if (incrementDropIndex) {
dropIndex++;
}
}
gBrowser.syncThrobberAnimations(tab);
};
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) {
let newIndex = this._getDropIndex(event, false);
let newTabs = [];
for (let tab of movingTabs) {
let newTab = gBrowser.adoptTab(tab, newIndex++, tab == draggedTab);
newTabs.push(newTab);
}
// Restore tab selection
gBrowser.addRangeToMultiSelectedTabs(
newTabs[0],
newTabs[newTabs.length - 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, true);
let userContextId = this.selectedItem.getAttribute("usercontextid");
let replace = !!targetTab;
let newIndex = this._getDropIndex(event, true);
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;
}
}
gBrowser.tabContainer._getDropIndex = function(event, isLink) {
var tabs = this.allTabs;
var tab = this._getDragTargetTab(event, isLink);
if (!RTL_UI) {
for (let i = tab ? tab._tPos : 0; i < tabs.length; i++) {
if (
event.screenY <
tabs[i].screenY + tabs[i].getBoundingClientRect().height
) {
if (
event.screenX <
tabs[i].screenX + tabs[i].getBoundingClientRect().width / 2
) {
return i;
}
if (
event.screenX >
tabs[i].screenX + tabs[i].getBoundingClientRect().width / 2 &&
event.screenX <
tabs[i].screenX + tabs[i].getBoundingClientRect().width
) {
return i + 1;
}
}
}
} else {
for (let i = tab ? tab._tPos : 0; i < tabs.length; i++) {
if (
event.screenY <
tabs[i].screenY + tabs[i].getBoundingClientRect().height
) {
if (
event.screenX <
tabs[i].screenX + tabs[i].getBoundingClientRect().width &&
event.screenX >
tabs[i].screenX + tabs[i].getBoundingClientRect().width / 2
) {
return i;
}
if (
event.screenX <
tabs[i].screenX + tabs[i].getBoundingClientRect().width / 2
) {
return i + 1;
}
}
}
}
return tabs.length;
}
}
Alles anzeigen
/* Do not remove the @namespace line -- it's required for correct functioning */
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* set default namespace to XUL */
/* -----------------------------*/
/* Menü-Toolbar */
/* -----------------------------*/
/*
#toolbar-menubar{
background-image: linear-gradient( rgba(192,192,192,0.25), rgba(110,110,110,0.25) ), none !important;
border-bottom: 1px solid rgba(0,0,0,0.75) !important;
height: 28px !important;
margin-top: -2px !important;
}
#toolbar-menubar:not(:-moz-lwtheme){
background-image: linear-gradient( rgba(192,192,192,0.25), rgba(0,0,0,0.25) ), none !important;
border-bottom: 1px solid black !important;
color: white !important;
}
#main-menubar > menu {
height: 28px !important;
font-family: "Arial" !important;
font-size: 12px !important;
font-weight: 100 !important;
text-shadow: 1px 1px 0px rgba(64,64,64,0.5) !important;
}
#main-menubar > menu:-moz-lwtheme {
margin-top: 1px !important;
}
#menubar-items:-moz-lwtheme:not(:-moz-lwtheme-brighttext) {
color: black !important;
}
#menubar-items:-moz-lwtheme:-moz-lwtheme-brighttext {
color: white !important;
}
#main-menubar > menu:-moz-lwtheme:not(:-moz-lwtheme-brighttext) {
text-shadow: -1px -1px 0px rgba(255,255,255,0.25) !important;
}
#main-menubar > menu:not(:-moz-lwtheme),
#main-menubar > menu:-moz-lwtheme:-moz-lwtheme-brighttext {
background: unset !important;
color: white !important;
filter: drop-shadow( 0px 1px 1px rgba(0,0,0,0.25)) !important;
}
#main-menubar > menu:hover:not(:-moz-lwtheme),
#main-menubar > menu:hover:-moz-lwtheme:-moz-lwtheme-brighttext {
filter: drop-shadow( 0px 0px 3px #EEEEEE) brightness(115%) !important;
}
*/
/* -----------------------------*/
/* Navigation-Toolbar */
/* -----------------------------*/
/*
#nav-bar {
min-height: unset !important;
max-height: unset !important;
border: unset !important;
height: 37px !important;
border-bottom: 1px solid black !important;
}
#nav-bar:-moz-lwtheme{
background: none! important;
background-image: linear-gradient( rgba(255,255,255,0.25), rgba(110,110,110,0.25) ), none !important;
}
#nav-bar:not(:-moz-lwtheme){
background-image: linear-gradient( rgba(255,255,255,0.25), rgba(50,50,50,0.5) ), none !important;
}
#navigator-toolbox {
border-bottom: 0 none !important;
}
*/
/* -----------------------------*/
/* Tabs-Toolbar */
/* -----------------------------*/
#TabsToolbar:not(:-moz-lwtheme){
color: black !important;
margin-top: -11px !important;
}
#TabsToolbar:-moz-lwtheme {
margin-top: -10px !important;
}
#TabsToolbar{
margin-bottom: 0px !important;
padding-top: 10px !important;
}
#menubar-items :not([fokus]), #tabbrowser-tabs :not([fokus]){
opacity: 1!important;
}
/* -----------------------------*/
/* Tab: Optische Anpassungen */
/* -----------------------------*/
/* TabLabel settings */
.tabbrowser-tab .tab-label {
text-shadow: 1px 1px 0px #000000 !important;
font-weight: 500 !important;
font-size: 12px !important;
font-family: "Arial" !important;
color: white !important;
}
.tabbrowser-tab .tab-label:not(:-moz-lwtheme) {
text-shadow: none !important;
color: black !important;
}
.tabbrowser-tab .tab-label[selected="true"] {
text-shadow: 1px 1px 0px #000000 !important;
color: white !important;
font-weight: 500 !important;
font-size: 12px !important;
font-family: "Arial" !important;
}
/* hide tab-line */
#TabsToolbar .tabbrowser-tab .tab-line {
display: none !important;
}
/* hide tab separators */
.tabbrowser-tab::after,
.tabbrowser-tab::before {
opacity: 0 !important;
border-image: unset !important;
border-image-slice: none !important;
width: 2 !important;
}
#TabsToolbar .tabbrowser-tab[visuallyselected="true"],
#TabsToolbar .tabbrowser-tab,
#TabsToolbar .tabbrowser-tab .tab-background {
background: unset !important;
border-top: unset !important;
outline: none !important;
}
/*------------------*/
/* Tab-Background */
/*------------------*/
/*--- selektiert ---*/
.tab-background[selected=true]:not(:-moz-lwtheme) > spacer {
background-image: linear-gradient( rgba(103,171,224,1), rgba(10,58,95,1) ), none !important; /* blau */
/*background-image: linear-gradient( rgba(230,175,175,1), rgba(84,25,25,1) ), none !important;*/ /* rot */
filter: drop-shadow(4px 3px 2px rgba(0,0,0,0.33)) drop-shadow(-4px 3px 2px rgba(0,0,0,0.33)) !important;
}
.tab-background[selected=true]:-moz-lwtheme > spacer {
background-image: linear-gradient( rgba(103,171,224,1), rgba(10,58,95,1) ), none !important;
filter: drop-shadow(3px 3px 2px rgba(0,0,0,0.33)) drop-shadow(-2px 3px 2px rgba(0,0,0,0.33)) !important;
}
/*--- hover(nicht selektiert) ---*/
.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]):not(:-moz-lwtheme) > spacer {
background-image: linear-gradient( rgba(255,255,255,1), rgba(115,115,115,1) ), none !important;
filter: brightness(130%) contrast(95%) drop-shadow(1px 1px 1px rgba(0,0,0,0.33)) drop-shadow(-1px 1px 1px rgba(0,0,0,0.33)) !important;
}
.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]):-moz-lwtheme > spacer {
background-image: linear-gradient( rgba(225,225,225,0.66), rgba(100,125,145,0.66) ), none !important;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.75);
}
/*--- nicht selektiert ---*/
.tab-background:not([selected=true]):not(:-moz-lwtheme) > spacer {
background-image: linear-gradient( rgba(255,255,255,1), rgba(125,125,125,1) ), none !important;
filter: brightness(115%) contrast(90%) drop-shadow(1px 1px 1px rgba(0,0,0,0.33)) drop-shadow(-1px 1px 1px rgba(0,0,0,0.33)) !important;
}
.tab-background:not([selected=true]):-moz-lwtheme > spacer {
background-image: linear-gradient( rgba(255,255,255,0.33), rgba(110,110,110,0.33) ), none !important;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.75);
}
/*--- Multi-selektiert ---*/
.tab-background[multiselected=true]:not([selected=true]) > spacer {
background-image: linear-gradient( rgba(225,225,225,1), rgba(50,98,135,1) ), none !important;
}
.tabbrowser-tab:hover > .tab-stack > .tab-background[multiselected=true]:not([selected=true]) > spacer {
background-image: linear-gradient( rgba(225,225,225,1), rgba(50,98,135,1) ), none !important;
}
/* ----------------------------*/
/* Mehrzeilige Tabreihen */
/* ----------------------------*/
/* Die angezeigte Scrollbar, bewegt sich mit dem Mausrad, wenn die Anzahl der Tabreihen um mehr als die angegebene Anzahl erhöht wird */
/*tabs > arrowscrollbox > scrollbox{ -moz-binding: url("chrome://global/content/bindings/scrollbox.xml#arrowscrollbox") ; }*/
.tabbrowser-tab {
min-height: 28px !important;
max-height: 28px !important;
height: 28px !important;
vertical-align: bottom !important;
margin-top: 1px !important;
margin-bottom: 1px !important;
}
.tab-throbber, .tab-icon-image {
margin-top: 0px !important;
}
.tabbrowser-tab:not([pinned]) {
min-width: 100px !important; /* Feste Breite des einzelnem Tabs */
}
/* tabs right position */
.tabbrowser-tabs {
margin-right: -41px !important;
}
tabs > arrowscrollbox {
display: block !important;
}
scrollbox[part][orient="horizontal"] {
display: flex;
flex-wrap: wrap;
overflow: visible !important;
overflow-x: hidden !important;
overflow-y: auto !important;
min-height: 30px !important;
max-height: calc( 3 * 30px ) !important; // 3 Rows
-moz-window-dragging: no-drag !important;
}
/* Button for scrolling tabs to the left */
.scrollbutton-up{
display: none;
}
/* Button for scrolling tabs to the right */
.scrollbutton-down{
display: none;
}
/* TabClose hidden */
.tabbrowser-tab .tab-close-button {
visibility: collapse !important;
}
/* Height for '+'-Button (newtab) */
.tabs-newtab-button {
vertical-align: bottom !important;
height: var(--tab-min-height:) !important;
}
/*Drop-down menu for all tabs */
#alltabs-button{
display: none;
}
Alles anzeigen