Zufall auf Reddit
Ist 'ne Laber-Platform, mehr auch nicht
Falls du vom Fx CSS Reddit sub sprichst, es ist halt immer noch das einzige beste Forum mit vernünftigen und aktuellen CSS inhalten für Firefox.
Floorp und andere Forks sind dort auch kürzlich rausgeflogen als akzebtable Inhalte, nachdem u.a. Floorp dort lange beworben wurde.
Wenn ich einen Vorschlag machen dürfte: es gibt da einen - sogar angepinnten
- Thread für diese mehrzeilige Tabs Geschichte.
Im Sinne der Forenhygiene könnte es Sinn machen, diesen und andere aktuelle Threads zum gleichen Thema dahin zu verschieben.
So wie es jetzt aussieht, gefällt es mir!
Das ist letztlich alles was zählt! 
Damit wäre ich zufrieden. Was könnte man den im Tab CSS verbessern?
Neu aufbauen fürchte ich; du hast grundverschiedene Codes für selektierte versus unselektierte Tabs, mal mit .tab-background (wie es sein sollte für den sichtbaren Teil der Tabs), mal ohne; margins wo paddings sein sollten, etc., und evtl. ein Theme das die eigentlich offensichtlichen Fehler möglicherweise verdeckt.
Der Rest sieht dann aus wie Pflaster über Pflaster, damit alles irgendwie zusammenpasst.
Das Grundproblem ist aber halt, daß deine Tabs eigentlich nicht zusammenpassen.
Nee bleibt er nicht, mit deinem Code sieht es so aus:
Keine grüne Ecke und der Aktive Tab ist nicht rot nur Fettschrift.
Hab gerade nochmal getestet mit deinem CSS aus #3; du hast vermutlich die dort auskommentierten Teile immer noch auskommentiert, da kann ja nix rot werden. 
Das Grün taucht tatsächlich auf in deinem Screenshot, aber an der falschen Stelle - weil offengestanden dein Tab CSS ziemlich daneben ist.
Danke, aber dann lasse ich den Code lieber so, wie er ist. Mir ist schon wichtig, dass der aktuelle Tab rot ist.
Aber der bleibt doch rot mit deinem CSS, das benutzt du einfach normal weiter.
Das Script ist ja nur für die gewünschte Ecke in ungelesenen Tabs, sonst ändert das nichts.
Sowas könnste mal testen; im Prinzip sollte jedes background-image benutzbar sein, aber der Rest von deinem CSS Code für die Tabs schiesst hier quer, daher nur ein grober Ansatz.
Wie gesagt, border-image kann man nicht benutzten, deswegen.
/* Ungelesen Tabs mit grüner Ecke */
(async (url) => {
if (location != url) return;
let css =`
/*
#TabsToolbar .tabbrowser-tab[notselectedsinceload="true"] .tab-background {
border-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAcCAYAAABh2p9gAAAACXBIWXMAAAsSAAALEgHS3X78AAABQklEQVR42q3TP0vDQBjH8atDhQ4uFhSnTg66FieHuljQRUpAbZI2bZqmSf+kQehbEN+Fr6fuvgM7+w7i84M7OI7YHPQJfAkcTz5HEk4URSE4E82zixp1TT1Sr7IxNaJcbW0TxcmzqLposP3Uc/rb7ZdDO3RkXeqeulNrNBdk+ds73W+qQOdnt3ugh06pI62aMTdsfDcKut/ijT5bv8JMDbr08JUJlGw8ACjRLtXaB15afBpfgRLtUedloGcJejooUfy0ExP0LUHXBCUaUnUdHBwCSjTVwaEl6PwHSnSjBgNLsL0PRC997wODI0vwuOREBfJU+WoNg2MbsOqCAQtgyAiGACeM4ARgxAhGAKeM4BRgzAjGAGeM4AxgwggmAFNGMAU4ZwTnABeM4ALgkhFcAlwxgiuAGSOYAVwzgmuAOSOY/wGB0oICMFHRdQAAAABJRU5ErkJggg==") 4 10 3 3 / 4px 10px 0px 3px stretch !important;
}
*/
#TabsToolbar .tabbrowser-tab[notselectedsinceload="true"] .tab-background::after {
content: "";
width: 100%;
height: 100%;
border-radius: inherit;
background-image: linear-gradient(lightgreen, lightgreen);
background-size: 10px 10px;
background-position: top right;
background-repeat: no-repeat;
}
`;
let sss = Cc["@mozilla.org/content/style-sheet-service;1"].getService(Ci.nsIStyleSheetService);
let uri = "data:text/css;charset=utf-8," + encodeURIComponent(css);
sss.loadAndRegisterSheet(Services.io.newURI(uri), sss.AGENT_SHEET);
gBrowser.tabContainer.addEventListener("TabSelect", e => e.target.setAttribute("notselectedsinceload", "false"));
})("chrome://browser/content/browser.xhtml");Richtig! Die Frage ist ja, wie Skript und Code so zusammengeschrieben werden, das alle Tabs abgerundet sind und die grüne Ecke in ungelesenen ebenfalls zu sehen ist.
border-image folgt nicht border-radius, bzw. ignoriert den Radius.
Wie von Speravir und Mira_Belle erwähnt, kann man das auch etwas eleganter umsetzen, hier mit seinem Code (Zeile 27, nicht in Nightly getestet):
//// ContextTranslate DeepL ////
///https://github.com/ardiman/userChrome.js/tree/master/contexttranslate///
// ex ContextTranslate.uc.js///
// modifiziert by universum 123//
// modifiziert von Horstmann und Speravir 03_25 https://www.camp-firefox.de/forum/thema/139144-deepl-context-script-funktioniert-nicht-mehr-in-nightly/?postID=1268793#post1268793//
(function () {
let translate = function () {
let browserMM = gBrowser.selectedBrowser.messageManager;
browserMM.addMessageListener('getSelection', function listener(message) {
let t = (message.data !== '');
let e = (document.charset || document.characterSet);
if (t) {
openWebLinkIn('https://www.deepl.com/translator#en/de/' + encodeURIComponent(message.data), 'tab');
} else {
openWebLinkIn('https://www.deepl.com/translate?u=' + encodeURIComponent(gBrowser.currentURI.spec) + '&hl=de-DE&ie=' + e + '&sl=auto&tl=de-DE', 'tab');
};
browserMM.removeMessageListener('getSelection', listener, true);
});
browserMM.loadFrameScript('data:,sendAsyncMessage("getSelection", content.document.getSelection().toString())', true);
}
let menuitem = document.createXULElement('menuitem');
menuitem.id = 'context-deepltranslate';
menuitem.setAttribute('label', 'Übersetzen');
menuitem.setAttribute('tooltiptext', 'Mit DeeplTranslate übersetzen');
menuitem.addEventListener('command', translate );
menuitem.classList.add('menuitem-iconic');
//Wer kein Icon möchte kann die nächsten beiden Zeilen auskommentieren/löschen
menuitem.style.listStyleImage = 'url("https://www.deepl.com/favicon.ico")';
menuitem.style.listStyleImage = ' url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAACNwAAAjcB9wZEwgAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAGZSURBVDiNjZKxaxRBFMZ/b2ZHbWITUxkRC4PnBUW0k1gkoFlMYmIR8R+w0UZBFAvtLAMS0ipC0guCd0GOa23EJGTPkBRCSCNHKiEgMzvPwmjCuiv3lft97zff7BuhQraWTouJLwE0mmf518a7spwUPxwZvlmLms8B4wWrLZhHPvuwUg44N9afGPcc4T5gK4pFgSUv/jHrre8HgKHJE4nzHWBgn/sZdBuYqQB1Q+5rbLR2DUBy1J89GIbEmNmQNW8DqxWAgcS5IQBT5vqYP3H1Gw9AHyosAKECVA4QuKfIPMhHVKygV4OVU8ByT4BDsiI6rWpusdbYUdgpBpLSMeGTRLYx2o5q9kT0ja2P3xU401ODQJz1neYdVRkT9C1gyob/Ngg/3VbifJf9TVg1L2Q43UC1eo3eb8KfB7O7uRf7T782Yo8hXBG4DFwvaRgFFoP4GTqt7u/bFuTOp5dU9BUw8u/BOhqy5fZ//4HvNL6ErHlNkSmFb4e9YM1WMV+5xjxrvM+P99VBngI/qnK96UI66OrpEhcnThatXx/tiqJJdDA6AAAAAElFTkSuQmCC")';
let refItem = document.getElementById('context-inspect');
refItem.parentNode.insertBefore(menuitem, refItem);
})();Du hast in Zeile 24 die ID einer Variablen zugewiesen (siehe auch Anmerkung unten).
Dann ist es cleverer, diese Variable auch in Z. 34 zu verwenden:
JavaScriptdocument.getElementById(menuitem.id).addEventListener('click', event => { translate (); });Davon abgesehen habe ich (oder habe ich es sogar nur übernommen, müsste man im Thread Div. Skripte funktionieren im aktuellem Nightly nicht mehr herausfinden) den ursprünglichen Einzeiler mit setAttribute (Z. 27 bei Börsenfeger) in diesen Einzeiler mit addEventListener an derselben Stelle umgewandelt und es funktioniert hier:
JavaScriptmenuitem.addEventListener('command', translate );Anmerkung zur ID:
Die ID context-googletranslate ist hier übrigens mindestens irreführend und, wenn man das originale Google-Übersetzungsskript ebenso benutzt, höchstwahrscheinlich sogar falsch. Einfach google in deepl ändern und alles ist gut.
Korrekt in Allem.
Ich hatte nur einen schnellen Fix gesucht, um potentiell das aktuelle Problem zu umgehen.
Den restlichen Code habe ich nicht angefasst; nur in Beitrag #8 Zeile 29 auskommentiert, und die Zeilen 36 - 39 reingebaut.
Grobschlächtig und unnötig komplex; und offengestanden war ich zu faul um die google Komponente auch noch aufzuräumen.
Selber benutze ich den Google translator häufig, und habe einen Button dafür, aber nicht mit der Menü Einbindung.
Ja, das funktioniert.
Prima, danke für's Testen!
So auf Anhieb sehe ich, dass in Zeile 27 noch der Inlinehandler oncommand verwendet wird. Das muss in einen Ausdruck mit addEventListener umgebaut werden.
Hast du da einen Ansatz?
Kannst mal probieren wenn du magst; nur ganz grob getestet:
//// ContextTranslate DeepL ////
///https://github.com/ardiman/userChrome.js/tree/master/contexttranslate///
// ex ContextTranslate.uc.js///
// modifiziert by universum 123///
(function () {
let translate = function () {
let browserMM = gBrowser.selectedBrowser.messageManager;
browserMM.addMessageListener('getSelection', function listener(message) {
let t = (message.data !== '');
let e = (document.charset || document.characterSet);
if (t) {
openWebLinkIn('https://www.deepl.com/translator#en/de/' + encodeURIComponent(message.data), 'tab');
} else {
openWebLinkIn('https://www.deepl.com/translate?u=' + encodeURIComponent(gBrowser.currentURI.spec) + '&hl=de-DE&ie=' + e + '&sl=auto&tl=de-DE', 'tab');
};
browserMM.removeMessageListener('getSelection', listener, true);
});
browserMM.loadFrameScript('data:,sendAsyncMessage("getSelection", content.document.getSelection().toString())', true);
}
let menuitem = document.createXULElement('menuitem');
menuitem.id = 'context-googletranslate';
menuitem.setAttribute('label', 'Übersetzen');
menuitem.setAttribute('tooltiptext', 'Mit DeeplTranslate übersetzen');
// Ausgeschaltet
//menuitem.setAttribute('oncommand', '(' + translate.toString() + ')()');
menuitem.classList.add('menuitem-iconic');
//Wer kein Icon möchte kann die nächsten beiden Zeilen auskommentieren/löschen
menuitem.style.listStyleImage = 'url("https://www.deepl.com/favicon.ico")';
menuitem.style.listStyleImage = ' url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAACNwAAAjcB9wZEwgAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAGZSURBVDiNjZKxaxRBFMZ/b2ZHbWITUxkRC4PnBUW0k1gkoFlMYmIR8R+w0UZBFAvtLAMS0ipC0guCd0GOa23EJGTPkBRCSCNHKiEgMzvPwmjCuiv3lft97zff7BuhQraWTouJLwE0mmf518a7spwUPxwZvlmLms8B4wWrLZhHPvuwUg44N9afGPcc4T5gK4pFgSUv/jHrre8HgKHJE4nzHWBgn/sZdBuYqQB1Q+5rbLR2DUBy1J89GIbEmNmQNW8DqxWAgcS5IQBT5vqYP3H1Gw9AHyosAKECVA4QuKfIPMhHVKygV4OVU8ByT4BDsiI6rWpusdbYUdgpBpLSMeGTRLYx2o5q9kT0ja2P3xU401ODQJz1neYdVRkT9C1gyob/Ngg/3VbifJf9TVg1L2Q43UC1eo3eb8KfB7O7uRf7T782Yo8hXBG4DFwvaRgFFoP4GTqt7u/bFuTOp5dU9BUw8u/BOhqy5fZ//4HvNL6ErHlNkSmFb4e9YM1WMV+5xjxrvM+P99VBngI/qnK96UI66OrpEhcnThatXx/tiqJJdDA6AAAAAElFTkSuQmCC")';
let refItem = document.getElementById('context-inspect');
refItem.parentNode.insertBefore(menuitem, refItem);
// Fix?
document.getElementById('context-googletranslate').addEventListener('click', event => {
translate ();
});
})();Hallo,
ich möchte anstatt der statischen Sanduhr
Das scheinen irgendwie alle überlesen zu haben. Dass du die Sanduhr siehst, bedeutet, dass du in deinem System die Option zur Reduzierung von Animationen aktiviert hast. Die musst du abstellen.
Das ist oder war zumindest mal auch eine Fx spezifische Konfiguration, die man in about:config umstellen konnte, via prefersReducedMotion - und die Sanduhr kam dann mit eben diesen reduzierten Animationen.
Edit: Hier mehr zum Thema:
In Firefox about:config: Add a number preference called ui.prefersReducedMotion and set its value to either 0 for full animation or to 1 to indicate a preference for reduced motion. Changes to this preference take effect immediately.
bei 200 pcs?
Gibt es sonst noch potentiell relevante Infos, die du u.U. ohne weiteres Nachfragen mitteilen könntest, oder willst du es lieber spannend halten?
Ohne, dass ich es selbst ausprobiert habe, ersetze mal in Zeile 20 left: 0 durch right: 0.
Noch dazu die beiden margin-left Einträge weiter unten mit margin-right ersetzen, und am besten den aktuellsten Code von MRG benutzen, s. Link im Code.
Ist vermutlich immer noch suboptimal in vielerlei Hinsicht, aber vielleicht ein Anfang.
Diesen CSS Code kann ich auswendig mitsingen, Pandora's Box... 
Überprüfe, ob die Option toolkit.legacyUserProfileCustomizations.stylesheets in der Datei prefs.js im Ordner chrome_debugger_profile gesetzt ist.
Das war es tatsächlich
Wenn nicht, kannst du das wie im Hauptprofil über eine Datei user.js regeln.
Hab ich jetzt gemacht. Merkwürdig bleibt es aber trotzdem: Auf dem Laptop wurde die Einstellung ohne die zusätzliche user.js übernommen.
Danke für die Hilfe
Wie ja schon von Sören erklärt, und von Dir jetzt geregelt, braucht jede Instanz eben diese stylesheets Freigabe.
Möglicherweise hattest du in deinem alten Laptopprofil das schon mal eingerichtet und nicht mehr dran gedacht; ich jedenfalls habe das schon zigmal vergessen, weil ich Anpassungen in dem Bereich so selten benutze.
Evtl. von Nutzen für's Archiv, hier eine alte Reddit Thread zu einem verwandten Thema.
In Fx 135 wurde für Addon-Buttons eine zusätzliche Ebene im DOM eingeführt, die anscheinend für deren zusätzlichen Abstände verantwortlich ist, und zwar eine
<box class="unified-extensions-item-row-wrapper">.Ich hab jedenfalls erstmal für mich diese Regel ergänzt:
CSS.unified-extensions-item-row-wrapper { margin-inline: -2px !important }(Genau genommen ein wenig anders, aber das spielt hier jetzt keine Rolle.)
Könnte sein dass hier das Problem mit den Erweiterungsbuttons in der Toolbar liegt; in Zeile 161/162 ist zwar wie gehabt der Code vorhanden um das normale Padding von .toolbarbutton-1 zu überschreiben (2px bzw. 3px für Kompakt), aber wie du entdeckt hast ist .unified-extensions-item-row-wrapper dazwischen, vermutlich wird daher der Codeteil nicht ausgeführt.
Also spezifisch in deinem Fall könnte das klappen:
toolbar .toolbaritem-combined-buttons > .unified-extensions-item-row-wrapper > .toolbarbutton-1 {
padding-inline: 0 !important;
}In Fx 135 wurde für Addon-Buttons eine zusätzliche Ebene im DOM eingeführt, die anscheinend für deren zusätzlichen Abstände verantwortlich ist, und zwar eine
<box class="unified-extensions-item-row-wrapper">.Ich hab jedenfalls erstmal für mich diese Regel ergänzt:
CSS.unified-extensions-item-row-wrapper { margin-inline: -2px !important }(Genau genommen ein wenig anders, aber das spielt hier jetzt keine Rolle.)
Die wenigen Ausnahmen in Firefox für margin und Kompagnons sind nach einer Schnellsuche übrigens 742 Funde in 169 CSS-Dateien; eventuell per Javascript eingefügte negative Abstände sind dort nicht enthalten.
Ich weiss nicht was in deinem Fall das Problem mit den Erweiterungs-Buttons ist, und ob Aris Code da mit reinspielt, aber soweit ich das sehe sind die Abstände in Fx135 nicht über diese Box geregelt (s. auch Screenshots unten, in Kompaktmodus).
Sieht so aus als hätte der .toolbarbutton-1 innerhalb des .toolbaritem-combined-buttons jetzt ein Padding, weiss aber nicht seit welcher Version das sein könnte.
Und was für eine Suche wo hat so viele negative Margins gefunden?
Was - grob in Fx135 getestet, in Normal- und Kompaktmodus - klappen sollte ist das von oben; das wäre jetzt für 0 Abstand zwischen den Buttons:
#nav-bar .toolbarbutton-1 {
padding-inline: 0px !important;
}
#nav-bar .toolbaritem-combined-buttons {
margin-inline: 0px !important;
}Und dann eben noch die Anpassungen aus dem Nachtrag, zumindest für den Menübutton; das negative Margin ist auch hier mE unnötig, und macht den gleichen Ärger wie das gehabt.
Andreas hat Barbara darum gebeten, seinen Vorschlag zu testen, und sie war zufrieden damit. Ich verstehe Deine Ausführungen nicht. Wenn ein Website-Designer mit negativen Werten arbeiten muss, dann ist das schlechter Stil, wobei es sein kann, das er ein vorgefundenes Framework nur auf diese Weise übersteuern kann. Wenn ein Privatmensch für sich etwas ändert, dann sehe ich nicht, wo es Problem sein soll.
Wie erklärt, sehe ich keinen Grund für, aber potentielle Probleme durch die negativen Margins.
Recht zu haben ist mir wumpe, ich halte nur den Code für nicht korrekt.
Ich denke es ist nur fair für alle User darauf hinzuweisen; für Gegenargumente bin ich immer offen, und natürlich liege ich auch öfters mal falsch.
Ein kurzer Blick in die Browsertools, und man sieht welcher Abstand wie erzeugt wird.
Das dann sauber zu manipulieren ist aufwendiger, durch die diversen Button und Leisten Designs.
Natürlich kann jeder sowieso machen was er/sie will, und wer keine Probleme darin sieht Elemente wild zusammen und übereinander zu schachteln, inkl. Schaltflächen, der kann das natürlich auch gerne tun.
Welche konkrete Alternative schlägst du in diesem Fall vor? Du musst ja eine bessere Alternative haben, wenn du das schreibst. Dann wäre es zielführend, diese auch zu teilen.
Du verstehst jetzt vielleicht, warum man hier nicht immer den Aufwand betreiben möchte, um in ein Thema zuviel zu investieren.
Das wäre Grund #1, #2 wird sicher prompt geliefert.
Eine Diskussion wäre mir lieber gewesen, aber so würde ich nun ernsthaft vorschlagen, dass der Code aus diesem Beitrag entfernt wird.
Ich denke er ist fehlerhaft, und verursacht signifikante Probleme. 
Nicht zwingend. Es ist nicht immer schön, aber als Pauschalaussage unterschreibe ich das nicht. Das muss man situativ bewerten. Welche konkrete Alternative schlägst du in diesem Fall vor? Du musst ja eine bessere Alternative haben, wenn du das schreibst. Dann wäre es zielführend, diese auch zu teilen.
Dass es Aunahmen geben kann hatte ich schon erwähnt.
Hier ein kleines Experiment:
toolbar .toolbarbutton-1 {
margin: 0px -5px !important;
outline: 1px solid red !important;
outline-offset: -1px !important;
}
toolbar .toolbarbutton-1 image {
outline: 1px solid green;
outline-offset: -1px !important;
}Die Buttons überlappen sich bzw. ragen auch in andere Elemente hinein, an einigen Stellen kann es an den Übergängen daher zum Flackern der beteiligten Elemente kommen.
Auch mal Tab Overflow testen damit, flackert bei mir.
Man darf bei den Buttons nicht vergessen, dass idR. der Button an sich nicht gesamt sichtbar ist, sondern nur der Inhalt und dessen Hintergrundfarben, Outlines etc..
Aktiv als Schaltfläche is aber der gesamte Button, hier .toolbarbutton-1.
Die visuellen horizontalen Abstände kommen dann (nicht alle) vom Padding innerhalb der Buttons, soweit ich sehe durch die Variable --toolbarbutton-outer-padding, die ich aber nicht anfassen würde.
Ergo würde ich in diesem Fall so etwas zum Testen vorschlagen, hier nur für die angefragte Navbar:
(Nachtrag: irgendwas ist doch immer mit den verdammten Buttons)
#nav-bar .toolbarbutton-1 {
padding-inline: 0px !important;
}
#nav-bar .toolbaritem-combined-buttons {
margin-inline: 0px !important;
}
/*Nachtrag*/
#nav-bar #PanelUI-menu-button {
padding-inline-end: var(--toolbar-start-end-padding) !important;
}
#nav-bar-customization-target > :is(toolbarbutton, toolbaritem):first-child,
#nav-bar-customization-target > toolbarpaletteitem:first-child > :is(toolbarbutton, toolbaritem) {
padding-inline-start: var(--toolbar-start-end-padding) !important;
}Die -1px extra bei Andreas, wohl um Outlines hübscher aufeinander zu legen, scheinen laut Screenshot im Originalbeitrag nicht nötig zu sein, da keine permanente Outline um die Buttons ist.
Screen vom bösen Code: