Tableisten CSS anpassen

2002Andreas

Zitat von FuchsFan

hier nicht.

Du hast recht

Ich hatte das in den Entwickler-Werkzeugen getestet...in der Shadow.css passt alles.

Danke für den Test

Horstmann

Zitat von Sören Hentzschel

Ich denke nicht, dass dieser Umweg einen großen Mehrwert bietet. Zur Erklärung möchte auf eine grundsätzliche Gefahr bei diesem Ansatz aufmerksam machen: Eine nicht definierte Variable kann zu unerwarteten Resultaten führen, weil dann eben nicht der Wert greift, der an anderer Stelle, in dem Fall also im originalen CSS der Firefox-Oberfläche, definiert ist, sondern der Standard-Wert, wie er in der CSS-Spezifikation definiert ist.

Das ist ein sehr guter Punkt, das Problem hatte ich auch schon vor mir ...

Bei überschaubarem und einzel testbarem Einsatz von bestimmten Elementen kann man das über einen Alternativwert halbwegs regeln, oder der Defaultwert passt zufällig; aber bei etwas wie slot wird's unübersichtlich.

ZB hatte ich ursprünglichscrollbox[orient="horizontal"] {justify-content: var(--ug_tabs_position, initial) !important;} in Gebrauch, weil ich zu der Zeit nur noch eine andere horizontale scrollbox im Code finden konnte (in der Lesezeichenleiste), und die hat damit noch gepasst.

Aber jetzt mit den vertikalen Tabs und allem...
Davon abgesehen, der andere Code mit den Automargins wäre viel einfacher für das spezielle Anliegen; aber wenn's keiner testen oder benutzen will...

2002Andreas

Zitat von Horstmann

aber wenn's keiner testen oder benutzen will..

Es funktionieren beide Codes.

Bleibt nur die Aussage von Sören, es für die Zukunft besser per Shadow.css zu erstellen.

grisu2099

Zitat von Horstmann

aber wenn's keiner testen oder benutzen will...

Momentan sehe ich einfach keinen Sinn darin, diese Baustelle anzugehen. Wie Sören ja weiter oben schon ausgeführt hat, ist in dem ganzen Bereich dermaßen viel Bewegung, das es sich einfach nicht lohnt dort Anpassungen vorzunehmen.

Ich für meinen Teil bastele dort erst wieder, wenn die neue Sidebar (mit den vertikalen Tabs) fertig ist. Vorher ist das verschwendete Zeit...

milupo

Der Code von 2002Andreas aus Beitrag #79 funktioniert auch bei mir (im Nightly). Ich habe ihn in der Datei tabs_mittig.css im Unterordner CSSShadow (Vorschlag von Andreas), die ich in die userChromeShadow.css importiere. Leider funktioniert da nur der absolute Pfad:

CSS

@import url("file:///C:/Users/Lenovo M58/AppData/Roaming/Mozilla/Firefox/Profiles/id1ko6na.testnightly88/chrome/CSSShadow/tabs_mittig.css");

2002Andreas

Zitat von milupo

funktioniert auch bei mir.

Danke für den Test

Horstmann

Zitat von 2002Andreas

Es funktionieren beide Codes.
Bleibt nur die Aussage von Sören, es für die Zukunft besser per Shadow.css zu erstellen.

Danke für den Test!

Die Codevariante mit den Margins ist ja direktes CSS, ohne Umwege in die shadow-root oder dran vorbei, ich denke daher braucht's keine Shadow.css etc..

Deinen Code würd ich gerne testen, hab aber den Franken Mac mit aktuellem Fx schon wieder auseinandergebaut....

2002Andreas

Zitat von Horstmann

daher braucht's keine Shadow.css etc..

Warten wir ab, ob bzw. was Mozilla in Zukunft noch ändert.

Sollte CSS in der userChrome.css reichen...dann ist das für viele die einfachste Lösung.

Horstmann

Zitat von grisu2099

Momentan sehe ich einfach keinen Sinn darin, diese Baustelle anzugehen. Wie Sören ja weiter oben schon ausgeführt hat, ist in dem ganzen Bereich dermaßen viel Bewegung, das es sich einfach nicht lohnt dort Anpassungen vorzunehmen.

Macht Sinn; bzgl. will keiner , ich hatte damit eher die Kollegen angesprochen, die eine Lösung für mittige Tabs angefragt hatten, und dann nicht mal den angebotenen Code testen.

Boersenfeger

Tja und hier ist die negative Wirkung des "Slot" - Codes:

Schade... da ich noch völlig jungfräulich mit der Shadow-Geschichte bin... ist irgendwo beschrieben, wie ichs angehen muss?

Bisher habe ich eine userChromeShadow.uc.js mit diesem Inhalt im chrome-Ordner gespeichert:

Code

// userChromeShadow.uc.js by aborix
// 28.07.2022 FF104+ Fix: using PathUtils.join (Sören Hentzschel)

(async function() {

   if (location != 'chrome://browser/content/browser.xhtml') return;
       
    try {
          let path = PathUtils.join(PathUtils.profileDir, 'chrome', 'userChromeShadow.css');
          let cssIn = await IOUtils.readUTF8(path);

          let sss = Cc['@mozilla.org/content/style-sheet-service;1'].getService(Ci.nsIStyleSheetService);
          let uri = makeURI('data:text/css;charset=UTF=8,' + encodeURIComponent(cssIn));
          sss.loadAndRegisterSheet(uri, sss.AUTHOR_SHEET);
    
       } catch(e) { 
        
         console.log("UserChromeShadow-Error: " + e.name + ': ' + e.message );
 
       };        
   
})();

Alles anzeigen

Desweiteren liegt im chrome-Ordner eine userChromeShadow.css mit diesem Inhalt

Code

/*Tabs in Tableiste mittig*/

	#tabbrowser-tabs:not([overflow="true"]) {
	--ug_tabs_position: center;
	}
    scrollbox[smoothscroll="true"] {
	justify-content: center !important ;
	}

Es funktioniert aber nicht.

Was muss ich ändern bzw am Code ergänzen?

FuchsFan

Zitat von Horstmann

die eine Lösung für mittige Tabs angefragt hatten, und dann nicht mal den angebotenen Code testen.

Keine Sticheleien bitte

Ist aber auch von mir getestet worden, und funktioniert. Bin aber zur Shadow-Methode gewechselt, tut mir leid.

Sören Hentzschel

Zitat von Boersenfeger

Desweiteren liegt im chrome-Ordner eine userChromeShadow.css mit diesem Inhalt

Das ist doch schon wieder exakt der gleiche falsche CSS-Code, in dem du eine CSS-Variable definierst, die du nicht verwendest, den du bereits bei Fragestellung so hattest. Andreas hat in Beitrag #79 den CSS-Code gepostet, den du verwenden muss.

FuchsFan

Zitat von Boersenfeger

Desweiteren liegt im chrome-Ordner eine userChromeShadow.css mit diesem Inhalt

Das kann auch nicht funktionieren, versuche diesen ganz normalen css-Code (user Chrome.css).

CSS

#tabbrowser-tabs:not([overflow], [orient="vertical"]) {
    --ug_tabs_position: center;
    --ug_slot_display: contents;
}
scrollbox {
    justify-content: var(--ug_tabs_position) !important;
}
slot {
  display: var(--ug_slot_display) !important;
}

2002Andreas

Auch der funktioniert (noch)

CSS

scrollbox[smoothscroll="true"] > slot {
  display: contents !important;
}

scrollbox[smoothscroll="true"] {
  justify-content: center !important ;
}

Aber wie Sören schon schrieb...in Beitrag Nr. 79 steht der Code für die Shadow.css

FuchsFan

Zitat von 2002Andreas

Auch der funktioniert (noch)

Boersenfeger

Die Lösung aus #79 bewirkt hier in der userChromeShadow.css nichts, der Code von FuchsFan aus #93 in der userChrome.css läßt die Tabs zusammengestaucht oberhalb der Menüleiste landen. Diese werden hier mit einem eigenen css unter die Menü-Leiste verfrachtet. Wenn ich dann den dafür zuständigen Code ebenfalls in die userChrome.css packe, ist es nicht mehr gestaucht aber immer noch oberhalb der Menü-Leiste.

Die Lösung von 2002Andreas aus #94 im Code für die Tab-Gestaltung hingegen funktioniert hier und lässt auch den AddonManager unbehelligt.

Dann lasse ich es zunächst so. Vielen Dank und Euch eine schöne Woche!

2002Andreas

Zitat von Boersenfeger

Die Lösung aus #79 bewirkt hier in der userChromeShadow.css nichts

Dann funkt dir etwas anderes dazwischen.

Sören Hentzschel

Zitat von FuchsFan

Das kann auch nicht funktionieren, versuche diesen ganz normalen css-Code (user Chrome.css).

In Beitrag #77 hatte ich erklärt, was das Problem damit ist. Auch damit überschreibst du pauschal jedes slot-Element.

Zitat von Boersenfeger

Die Lösung von 2002Andreas aus #94 hingegen funktioniert hier und lässt auch den AddonManager unbehelligt.
Dann lasse ich es zunächst so.

Würde ich nicht machen, wenn Andreas bestätigt, dass sein Code aus Beitrag #79 so funktioniert. Dann würde ich eher schauen, dass ich die Ursache dafür finde, wieso es bei dir nicht funktioniert. Dein eigener Beitrag #90 hat doch gezeigt, was passieren kann, wenn sich Code an völlig anderen Stellen auswirkt, die mit deiner eigentlichen Absicht nichts zu tun haben. Selbst, wenn du mit dem Code aus Beitrag #94 jetzt kein Problem siehst, dann kommt es vielleicht mit der nächsten Firefox-Änderung an einer komplett anderen Stelle und dann rätselst wir hier wieder, woher das Problem kommt. Vor allem macht Mozilla immer mehr Gebrauch von Custom Elements und Shadow DOM. Die Auswirkungen werden mit der Zeit definitiv eher größer als kleiner, wenn man seine Anpassungen nicht auf ihr eigentliches Ziel limitiert.

milupo

Zitat von Boersenfeger

Tja und hier ist die negative Wirkung des "Slot" - Codes:

Das kann gar nicht sein, da du in dem gleichen Beitrag angegebenen Code gar keine slot-Regel verwendet hast, abgesehen mal davon, dass du, wie Sören schrieb, den gleichen falschen Code verwendet hast. Was nicht da ist, kann auch nicht wirken.

Sören Hentzschel

Ich würde das eher so verstehen, dass er auf Grund der Auswirkung der slot-Regel überhaupt erst den Weg über das Shadow-Script versucht hat - und im entsprechenden CSS dann eben wieder der alte Code gelandet ist.

2002Andreas 25. August 2024 um 18:34