Mit einer kleinen Ergänzung "repariert" dein Code meinen
Dein Thema lautete so:
Adressleiste: Markierter Text, Hintergrundfarbe statt Farbwechsel
Schaue ich mir deinen Code an, so passiert das z.B. im aktuellen Nightly (Version 77) , wobei ich die Farben geändert habe, dass es besser auffällt:
Nehme ich meinen Code, so sieht es damit aus:
Wenn ich dich also richtig verstanden habe, so ging es dir um die Adressleiste, was aber nicht mit deinem Code realisiert wird.
ich hätte gerne den innerhalb der Adressleiste (urlbar) markierten Text wieder mit einer Hintergrundfarbe
Dieser Code macht es bis zur Version 77 bei mir immer noch, bei einem Klick in das Adressfeld, teste mal:
/*************** Adressleiste den Text bzw URL markiert mit anderer Farbe ***************************/
#urlbar-input::selection {
background-color: lime !important;
}Vielen Dank dafür!
Danken sollten wir Sören, denn er hat ja die Grundlage geschaffen. Ich habe ja nur noch eine Anpassung vorgenommen. Freue mich aber auch, dass es wenigstens vorerst wieder läuft.
Er könnte eventuell die portable Version meinen.
Genau die meint er, weil sie von mir ist.
Hallo Büssen, wenn du den folgenden Code jetzt testest (in Nightly), dann sollte alles wieder so laufen wie bisher. In der Portable-Version von mir musst du die css-Datei Adressfeld die Ecken abgerundet.css löschen.
#urlbar-background{
background-color: #d9ecfd ! important;
border: 2px solid #5badff !important;
border-radius: 80px !important;
}
#urlbar[breakout][breakout-extend] {
top: calc((var(--urlbar-toolbar-height) - var(--urlbar-height)) / 2) !important;
left: 0 !important;
width: 100% !important;
}
#urlbar[breakout][breakout-extend] > #urlbar-input-container {
height: var(--urlbar-height) !important;
padding-block: 0 !important;
padding-inline: 0 !important;
}
#urlbar[breakout][breakout-extend][breakout-extend-animate] > #urlbar-background {
animation-name: none !important;
}
#urlbar[breakout][breakout-extend] > #urlbar-background {
box-shadow: none !important;
}Hallo Büssen!
Für mich habe ich z.Z. im Nightly diese Lösung erstellt:
#urlbar #urlbar-background{
background-color: #d9ecfd ! important;
border: 2px solid #5badff !important;
border-radius: 80px !important;
}
#urlbar {
font-style: italic !important;
font-family: verdana !important;
font-size:13px !important;
/* font-weight:bold !important; */
color: red !important;
}Beim Start ist die breite Megabar vorhanden, ein Klick hinein, dann neuen Link öffnen, und die Url-Bar ist wieder normal. Ist also nur eine Hilfslösung.
ist meine Aussage eigentlich klar.
Ist alles klar, ich verzieh mich wieder.
In meinem Beitrag steht doch "mit der neuen Adressleiste".
Es ging nach deiner Aussage um den Code, denn der funktioniert sogar noch bis zur 77. Nur hier kommt dann die neue Adressleiste ins Spiel (mit Verbreiterung). Aber die Tage sollen ja gezählt sein, wo es dann auch nicht mehr wirken wird, so wie du und auch Andreas berichten.
Aber ich hab den Code mal eben in Firefox 75 ausprobiert und da entspricht das Ergebnis definitiv nicht mehr der ursprünglichen Idee.
Der Code macht immer noch das, wozu er gedacht war. Nur in Version 75 ist es erforderlich, dass unter about:config browser.urlbar.update1 auf false zu setzen ist.
/** Adressfeld die Ecken abgerundet **/
#urlbar {
border: 2px solid #5badff !important;
border-radius: 50px !important;
background-color: #d9ecfd ! important;
}Die letzten Tage habe ich mir deine Collection mal in Ruhe angesehen und auch durchprobiert. Du berufst dich ja auch auf die Scripte von Endor für mehrzeilige Tabreihen, die, obwohl ich sie persönlich nie voll ausnutzen werde, mir es doch sehr angetan haben.
Deine CSS-Codes mit den Scripten von Endor, was will man mehr.
So, was habe ich probiert?
Ich habe den CSS-Code aus 2.) genommen, dort die Zeilen 17 bis 47 entfernt. Gleich dazu noch, in dem Code gibt es zweimal den identischen Punkt "Tab Höhe", Zeile 5 bis 12 und Zeile 95 bis 102.
Dann habe ich die Scripte 01 und 03 für meine Zwecke vorbereitet. Dazu habe ich aus dem Script 02 den Absatz für die Scrollbar entnommen und ihn in die Scripte 01 und 03 eigearbeitet. Hier der Code aus Script 02:
/* Mehrzeilige Tableiste mit Scrollbar */
tabs > arrowscrollbox { display: block; }
scrollbox[part][orient="horizontal"] {
display: flex;
flex-wrap: wrap;
max-height: calc(var(--tab-min-height) * 3); /* Anzahl der Tabzeilen(Standard = 5 Zeilen) */
overflow-x: hidden;
overflow-y: auto; }
tabs tab[fadein]:not([pinned]) { flex-grow: 1; }
tabs tab,.tab-background {
height: 32px; /* var(--tab-min-height); */
overflow: hidden; }
tab > .tab-stack { width: 100%; }
/* Bei Überschreitung der angegebenen Zeilenanzahl, mit der Maus,
über die dann eingeblendetet Scrolleiste zur gewünschten Zeile wechseln */
scrollbox[part][orient="horizontal"] > scrollbar { -moz-window-dragging: no-drag; }Wie in dem Script auch beschrieben sind die Basis 5 Tabreihen, dann die Scrollbar. Ich habe das auch auf 3 reduziert, kann nach Bedarf geändert werden.
Eventuell hast du ja Interesse daran, dir das auch noch mal anzuschauen. Das würde meiner Ansicht nach deine Sammlung hier noch komplettieren. Danke für das reichhaltige Angebot.
Hier ein Schnappschuss von Script 01:
hier von Script 03:
Dann musst du den CSS Code ändern.
Toll, Andreas, genau so habe ich mir das vorgestellt. Script und dazu dieser css-Code, passt wunderbar. Danke !
Bin mir nicht sicher, ob ich dich richtig verstanden habe
Doch, ich denke schon.
Erst einmal danke für deine Rückmeldung. Alles, was du da anführst, habe ich gewissenhaft gelesen und auch getestet. Auch den css-Code von Andreas, der funktioniert tadellos. Es ging mir allein um dieses kleine Script, um es auch ganz normal nutzen zu können (ohne mehrzeilige Tabreihen).
Den von dir eingestellten Code zur Ausblendung der Button-Box hatte ich in diesem Zusammenhang auch getestet, aber da trat das von mir geschilderte Problem auf.
Jetzt habe ich Folgendes gemacht, das Script eingesetzt, und den css-Code zusätzlich eingearbeitet. Dadurch habe ich links den Pfeil, rechts Neuer Tab. Das ist weiter nicht schlimm, denn ich kann bequem mit der Maus horizontal in der Tabreihe hin und her scrollen, obwohl mir rechts auch der Pfeil zusagen würde, dafür NewTab weg.
#TabsToolbar > .titlebar-buttonbox-container {
display: none !important;
}
/* Buttons/Zwischenräume Ausblenden */
hbox.titlebar-spacer,
#alltabs-button,tabs tab:not([fadein]),
[class="scrollbutton-down"] {
display: none;
}
Wenn ich das Script von hier RE: Mehrzeilige Tableiste für aktuelle FireFox-Versionen (71+) nutze, dann macht es auch das, was es soll. Wenn ich aber keine mehrzeilige Tabreihe nutze passiert das:
Ich habe zwar noch einen Code, der den Container rechts ausblendet, aber dann verschiebt sich die Tableiste über die Lesezeichen-Symbolleiste. Wie bekomme ich das rechts weg (minimieren/schliessen)?
Da hat es mal wieder geklappt..Ich habe gerne die Testerei mit durchgeführt, aber mehrzeilige Tab-Leisten sind auch nicht so mein Ding.
Hat trotzdem Spaß gemacht!!
Hier wird niemandem etwas aufgezwungen, soviel habe ich hier mitbekommen. Wenn es dir nicht gefällt, dann eventuell einem Anderen.
Wie immer, jedem das Seine!
In diesem Fall sind sie aber oben gelandet - auch erst nach mehreren Anläufen.
Also dann wage ich zu behaupten, dass deine Profile Schrott sind, oder andere Codes dagegen arbeiten. Denn das Script von Endor, und zwar die Version 03, verlagert die Tabbar unter die Lesezeichensymbolleiste, nie nach oben. Dafür ist das letzte Script, die Version 01 da.
Da läuft was nicht rund.
Ich hänge dir mal ein anderes Script an, da sind die Tabs normal über der Urlbar. Das Script teste jetzt mal ohne den css-Code, da sind die Tabs wieder sehr schmal, aber zum testen reichts. strg + t, damit dann genügend Tabs geöffnet werden können, nach der zweiten Reihe sollte die Scrollbar rechts kommen.
// ==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 72
// @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 =` @-moz-document url-prefix("chrome://browser/content/browser.xhtml") {
/* Anpassung der Symbolleiste */
[tabsintitlebar="true"][sizemode="maximized"] #navigator-toolbox { padding-top: 8px !important; }
#titlebar,#tabbrowser-tabs { -moz-appearance: none !important; }
/* Verhindern, dass die Titelleistenschaltfläche der Registerkarte im Hochformat angezeigt wird */
[tabsintitlebar="true"] #TabsToolbar > .titlebar-buttonbox-container,
#main-window[inFullscreen="true"] #window-controls { display: block; }
/* Scrollbar schaffen */
tabs > arrowscrollbox {
display: block; }
scrollbox[part][orient="horizontal"] {
display: flex;
flex-wrap: wrap;
overflow: visible !important;
overflow-x: hidden !important;
overflow-y: auto !important;
min-height: 30px !important; /* Tab-Höhe(28px) + 2px */
max-height: calc( 2 * 30px ) !important; /* Anzahl der Tabreihen * Minimal-Höhe */
-moz-window-dragging: no-drag !important; }
/* Drag-Bereich auf der linken und rechten Seite der
Tab-Leiste auslenden - verstecken
Links und rechts → hbox.titlebar-spacer
links → hbox.titlebar-spacer[type="pre-tabs"]
rechts → hbox.titlebar-spacer[type="post-tabs"] */
hbox.titlebar-spacer
,
/* Ausblenden - Verstecken */
#alltabs-button,
tabs tab:not([fadein]),
[class="scrollbutton-up"],
[class="scrollbutton-up"] ~ spacer,
[class="scrollbutton-down"] { display: none; }
} `;
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);
gBrowser.tabContainer.clearDropIndicator = function() {
var tabs = document.getElementsByClassName("tab-background");
for (let i = 0, len = tabs.length; i < len; i++) {
tabs[i].style.removeProperty("border-left-style");
tabs[i].style.removeProperty("border-right-style");
}
}
gBrowser.tabContainer.addEventListener("dragleave", function(event) { this.clearDropIndicator(event); }, true);
gBrowser.tabContainer.on_dragover = function(event) {
this.clearDropIndicator();
var effects = this._getDropEffectForTabDrag(event);
event.preventDefault();
event.stopPropagation();
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;
}
return;
}
}
let newIndex = this._getDropIndex(event, effects == "link");
let children = document.getElementsByClassName("tab-background");
if (newIndex == children.length) {
children[newIndex - 1].style.setProperty("border-right","2px solid red","important");
} else {
children[newIndex].style.setProperty("border-left","2px solid red","important");
}
}
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;
}
}Ich glaube immer noch, dass ich weiß, was ich mache.
Das habe ich nie angezweifelt, aber so wie es bei deinem Test abläuft, konnte ich das nicht anders erwarten. Ich habe natürlich auch nur den css-Code für sich getestet, und da war genau das gleiche Erscheinungsbild, sonst würde ich nie so etwas behaupten. Hast du mal überprüft, ob beim Kopieren/Einfügen des Scriptes was falsch gelaufen ist, weil ja das Script nicht arbeitet. Zeitmaschine ist nicht.
Ich bastele gerade am Script 01, es gibt überhaupt keine Probleme hier.
Es bildet sich keine 2. oder 3. Reihe - die Tabs wandern alle nach links - und verschwinden klammheimlich!
Hallo Büssen!
Hexerei!!
Ja, mein Freund, was habe ich da geschrieben, das Script und den css-Code zusammen verwenden. Das , was bei dir passiert ist, geht nur, wenn du den css-Code allein nutzt.
Außerdem hatte ich alles zum Test angeboten, über Kleinigkeiten, wie runde Tabs z.B. kann man sich immer noch austauschen.
Und wenn du dir meine Bilder anschaust, dort habe ich nichts anderes gemacht, was ich auch beschrieben habe.
So, dann auf ein Neues!
Hallo!
Das mein ursprüngliches Vorhaben scheiterte hatte ich hier RE: Schliessen-Button/Icon versetzen ja schon angedeutet. Nun habe ich aber nicht aufgegeben, und doch noch eine akzeptable Lösung gefunden. Diese möchte ich euch hier zum Test überlassen, damit ihr euch selbst eine Meinung dazu bilden könnt.
Was habe ich also gemacht?
Das Script von hier https://github.com/Endor8/userChr…LiteforFx.uc.js genommen , und außerdem den größten Teil des css-Codes von BrokenHeart von hier Mehrzeilige Tableiste für aktuelle FireFox-Versionen (71+).
Das Script habe ich dahingehend umgebaut, dass ich den Code für die Scrollbar entfernt, und dafür den von BrokenHeart wieder eingebaut habe. Hier ist die Grundeinstellung, dass nach drei Tabreihen die Scrollbar einsetzt, was natürlich geändert werden kann. Sind mehrere Tabreihen geöffnet, so kann frei mit dem Mausrad gescrollt werden. Außerdem ,wie in der Script-Beschreibung angegeben, können Tabs mit der Maus verschoben werden.
Mit dem css-Code habe ich dann den Tabs noch einige Sachen hinzugefügt, wie z.B. Schliessen-Button erscheint nur bei Mouseover.
Aber, wie schon gesagt, der größte Teil davon stammt von BrokenHeart.
Getestet, Script zusammen mit css-Code, in Version 73.0.1 und im aktuellen Nightly 75 ( evtl. für Endor interessant, Scripte laufen auch hier).
Was noch wichtig ist, die Tab-Breite muss sich jeder im css-Code selbst anpassen, damit es für den jeweiligen Bildschirm passt.
So, dann hier das Script:
// ==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 73
// @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() {
/* Symbolleisten und Menüleiste von der Titelleiste in die Navigator-Toolbox verschieben */
document.getElementById("titlebar").parentNode.insertBefore(document.getElementById("toolbar-menubar"),document.getElementById("titlebar"));
var css =` @-moz-document url-prefix("chrome://browser/content/browser.xhtml") {
/* Symbolleiste Sortieren */
#toolbar-menubar { -moz-box-ordinal-group: 1 !important; } /* Menüleiste */
#nav-bar { -moz-box-ordinal-group: 2 !important; } /* Navigationsleiste */
#PersonalToolbar { -moz-box-ordinal-group: 3 !important; } /* Lesezeichen-Symbolleiste */
#titlebar { -moz-box-ordinal-group: 4 !important; } /* Titelleiste */
/* Anpassung der Symbolleiste */
[tabsintitlebar="true"] #toolbar-menubar { height: 29px; }
[tabsintitlebar="true"][sizemode="maximized"] #navigator-toolbox { padding-top: 8px !important; }
#titlebar,#tabbrowser-tabs { -moz-appearance: none !important; }
/* Windows 10 und Firefox Standardtheme, Fensterausenlinie in weiß.
Anpassung für Titelleistenschaltflächen wenn sie in den Hintergrund verschoben sind */
#main-window:not([lwtheme="true"]) #TabsToolbar .titlebar-buttonbox .titlebar-button,
#main-window:not([lwtheme="true"]) #window-controls toolbarbutton { color: rgb(24, 25, 26) !important; }
#main-window:not([lwtheme="true"]) #TabsToolbar .titlebar-buttonbox .titlebar-button:not(.titlebar-close):hover,
#main-window:not([lwtheme="true"]) #window-controls toolbarbutton:not([id="close-button"]):hover {
background-color: var(--lwt-toolbarbutton-hover-background, hsla(0,0%,70%,.4)) !important; }
/* Anpassung für Titelleistenschaltflächen */
#navigator-toolbox:not([style^="margin-top:"])[style=""][inFullscreen="true"] #window-controls,
[tabsintitlebar="true"] .titlebar-buttonbox-container { display: block; position: fixed; right:0; }
[tabsintitlebar="true"][sizemode="normal"] .titlebar-buttonbox-container { top: 1px; }
[tabsintitlebar="true"][sizemode="maximized"] .titlebar-buttonbox-container { top: 8px; }
#navigator-toolbox:not([style^="margin-top:"])[style=""][inFullscreen="true"] #window-controls { top: 0; }
/* auf der rechten Seite Platz für die Schaltflächen der Titelleiste einfügen, damit die
Schaltflächen der Titelleiste und der Navigationsleiste nicht verdeckt werden */
[tabsintitlebar="true"] #toolbar-menubar[autohide="true"][inactive="true"] ~ #nav-bar:not([inFullscreen="true"]) { padding-right: 139px !important; }
#navigator-toolbox[inFullscreen="true"] #nav-bar { padding-right: 109px !important; }
/* Scrollbar schaffen */
tabs > arrowscrollbox {
display: block; }
scrollbox[part][orient="horizontal"] {
display: flex;
flex-wrap: wrap;
overflow: visible !important;
overflow-x: hidden !important;
overflow-y: auto !important;
min-height: 30px !important; /* Tab-Höhe(28px) + 2px */
max-height: calc( 3 * 30px ) !important; /* Anzahl der Tabreihen * Minimal-Höhe */
-moz-window-dragging: no-drag !important; }
/* Drag-Bereich auf der linken und rechten Seite der
Tab-Leiste ausblenden - verstecken
Links und rechts → hbox.titlebar-spacer
links → hbox.titlebar-spacer[type="pre-tabs"]
rechts → hbox.titlebar-spacer[type="post-tabs"] */
hbox.titlebar-spacer
,
/* Ausblenden - Verstecken */
#alltabs-button,
tabs tab:not([fadein]),
#toolbar-menubar[autohide="false"] + #titlebar #TabsToolbar .titlebar-buttonbox-container,
[class="scrollbutton-up"],
[class="scrollbutton-up"] ~ spacer,
[class="scrollbutton-down"] { display: none; }
} `;
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);
gBrowser.tabContainer.clearDropIndicator = function() {
var tabs = document.getElementsByClassName("tab-background");
for (let i = 0, len = tabs.length; i < len; i++) {
tabs[i].style.removeProperty("border-left-style");
tabs[i].style.removeProperty("border-right-style");
}
}
gBrowser.tabContainer.addEventListener("dragleave", function(event) { this.clearDropIndicator(event); }, true);
gBrowser.tabContainer.on_dragover = function(event) {
this.clearDropIndicator();
var effects = this._getDropEffectForTabDrag(event);
event.preventDefault();
event.stopPropagation();
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;
}
return;
}
}
let newIndex = this._getDropIndex(event, effects == "link");
let children = document.getElementsByClassName("tab-background");
if (newIndex == children.length) {
children[newIndex - 1].style.setProperty("border-right","2px solid red","important");
} else {
children[newIndex].style.setProperty("border-left","2px solid red","important");
}
}
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;
}
}....und hier der css-Code:
/*========================== TABBAR ANPASSEN ================================*/
/*====== mit Script zzzz-MultiRowTab_LiteforFx48.uc.js und css-Code =========*/
/*===========================================================================*/
/* Script von Endor: https://github.com/Endor8/userChrome.js/blob/master/Mutirowtabs/Firefox-72/03-MultiRowTabLiteforFx.uc.js */
/* css-Code vorwiegend von BrokenHeart: https://www.camp-firefox.de/forum/thema/129551-mehrzeilige-tableiste-f%C3%BCr-aktuelle-firefox-versionen-71/ */
/* -----------------------------*/
/* Tab: Optische Anpassungen */
/* -----------------------------*/
/* Tab-Höhe */
.tabbrowser-tab {
min-height: 28px !important;
max-height: 28px !important;
vertical-align: bottom !important;
margin-top: 1px !important;
margin-bottom: 1px !important;
}
/* Feste Breite des einzelnem Tabs */
.tabbrowser-tab:not([pinned]) {
min-width: 211px !important; /* hier die Breite der Tabs abstimmen */
box-shadow: inset 0 0 4px 4px #87CEFA !important; /* innerer Schatten der Tabs */
}
/* aktiver Tab Höhe und innerer Schatten */
.tab-background[selected] {
max-height: 27px!important;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.75);
}
/* nicht aktiver Tab Höhe bei Hover */
.tabbrowser-tab:hover {
min-height: 28px!important;
max-height: 28px!important;
}
/* Icon im Tab versetzt */
#TabsToolbar .tab-icon-image {
height: 16px !important; /* Höhe */
width: 16px !important; /* Breite */
margin-left: -2px !important;
margin-bottom: 1px !important;
}
#tabbrowser-tabs :not([fokus]){
opacity: 1 !important;
}
/**** Schriftart/Schriftgröße ändern ****/
.tabbrowser-tab .tab-label {
font-weight: 500 !important;
font-size: 12px !important;
font-family: "Verdana" !important;
color: black !important;
}
.tabbrowser-tab .tab-label:not(:-moz-lwtheme) {
text-shadow: none !important;
color: black !important;
}
.tabbrowser-tab .tab-label[selected="true"] {
color: blue !important; /* Schriftfarbe aktiver Tab */
font-weight: bold !important;
font-size: 12px !important;
font-family: "Verdana" !important;
}
/**** Schrift im Zentrum des Tabs ****/
.tab-label {
-moz-box-flex: 1 !important;
text-align: center !important;
}
/* Tab-Rahmen entfernen */
#TabsToolbar .tabbrowser-tab[visuallyselected="true"],
#TabsToolbar .tabbrowser-tab,
#TabsToolbar .tabbrowser-tab .tab-background {
background: unset !important;
border-top: unset !important;
outline: none !important;
}
/* Tab-Seperatoren entfernen */
.tabbrowser-tab::after,
.tabbrowser-tab::before {
opacity: 0 !important;
border-image: unset !important;
border-image-slice: none !important;
width: 2 !important;
}
/* obere Tab-Line entfernen */
#TabsToolbar .tabbrowser-tab .tab-line {
display: none !important;
}
/* doppelte graue Linie unter der Tabs-Toolbar entfernt */
#nav-bar {
box-shadow: none !important;
}
/* Tabschliessen-Button ** nur zu sehen bei Mouseover */
.tab-close-button {
display: none !important;
}
.tabbrowser-tab:hover .tab-close-button {
display: block !important;
color: red ! important;
}
.tab-label-container[textoverflow][labeldirection=ltr]:not([pinned]),
.tab-label-container[textoverflow]:not([labeldirection]):not([pinned]):-moz-locale-dir(ltr) {
mask-image: none !important;
}
/*------------------*/
/* Tab-Hintergrund */
/*------------------*/
/*--- 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 */
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(030,144,255,1), rgba(152,245,255,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(151,225,225,0.66), rgba(000,255,255,0.66) ), none !important;
box-shadow: inset 0 0 3px 3px #63b8ff ! important;
min-height: 30px!important;
max-height: 30px!important;
}
.tabbrowser-tab:hover:not([selected="true"]) .tab-label {
color: red !important; /* Schriftfarbe bei Hover */
font-weight: bold !important; /* fette Schrift */
}
/*--- 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(225,225,225,0.66), rgba(100,125,145,0.66) ), 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;
} 
Andreas, ich glaube wir vergessen dieses Thema (obwohl es mich wurmt), da stimmt irgend etwas nicht im Zusammenwirken bestimmter Bestandteile. Jetzt habe ich mal nur das Original von hier genommen RE: Schliessen-Button/Icon versetzen, und mich dann bei BrokenHeart bedient, aus den Codes für mehrzeilige Tabreihen, dann einige Sachen für das Aussehen genommen und es mit dem Script von Endor getestet.
Und hier tritt dieser Effekt mit der Verschiebung der Schliessen-Button nicht auf, liegen alle auf einer Linie.
Wie immer, ich bedanke mich für deine Unterstützung.
Nun ist wieder alles bei mir paletti.
Dann freue ich mich mit dir.