Beiträge von Horstmann

Zitat von Sören Hentzschel

Vielleicht überlegst du mal, in welchem Forum du das gerade geschrieben hast und wie das wohl hier ankommt.

Vielleicht könntest du in Betracht ziehen, dass ich mich und meine CSS Beiträge dabei mit einschließe.
Und über diese meine - bescheidenen - Beiträge hast du schon eine rudimentäre Übersicht, korrekt?

Dieses Forum glänzt mit mit den JS Beiträgen bzgl. Firefox - das habe ich noch nicht besser gefunden, zumindest für Amateure wie mich.

Zitat von Mira_Belle

Echt?

Das tut jetzt aber 2002Andreas in der Seele weh,
und anderen "Helfern" tut das auch unrecht.

Wieso?
Meine CSS Skills sind sehr begrenzt, aber zumindest ein klein wenig verstehe ich davon, und erlaube mir eine Meinung dazu.

Mir ist hier in der Vergangenheit oft und viel geholfen worden, besonders auch von 2002Andreas , aber die bessere Foren Quelle ist eben mE der Reddit Sub, auch wenn man sich manchmal durchquälen muss.

Zitat von .DeJaVu

Zitat von Shelly

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.

Zitat von Boersenfeger

So wie es jetzt aussieht, gefällt es mir!

Das ist letztlich alles was zählt!

Zitat von Boersenfeger

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.

Zitat von Boersenfeger

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.

Zitat von Boersenfeger

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

Zitat von Boersenfeger

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

Zitat von Speravir

Horstmann:

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:

JavaScript

document.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:

JavaScript

menuitem.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.

Zitat von milupo

Ja, das funktioniert.

Prima, danke für's Testen!

Zitat von Boersenfeger

Zitat von milupo

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

Zitat von Sören Hentzschel

Hallo,

Zitat von Thunderstruck

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:

Zitat

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.

Zitat von amelie3209232

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?

Zitat von Speravir

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

Zitat von grisu2099

Zitat von Sören Hentzschel

Ü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

Zitat von Sören Hentzschel

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.

Zitat von Speravir

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

Zitat von Speravir

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.

Zitat

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.

Zitat von Sören Hentzschel

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.