Es hat mit Firefox 113 ein paar Änderungen gegeben, siehe hier.
Beiträge von Horstmann
-
-
Aktuelle Tests; in zwei Versionen: #1 hat den Eingabetext permanent auf voller Breite, die Icons schweben dann bei Hover darüber.
Bei #2 passt sich der Text dynamisch in der Breite an, wenn man über den Icons hovert, und ist sonst auf voller Breite (s. Bilder).
Ideal wäre, wenn sich der Textabstand nach rechts dynamisch ändern liesse, sobald von Firefox ein zusätzliches Icon auf der rechten Seite aktiviert bzw. deaktiviert wird.
So ist jetzt der Textabstand rechts auf drei gleich breite Buttons eingestellt; kommt einer dazu oder wird breiter (zB. Permissions), entsteht wieder eine Lücke.
Was Fx im Prinzip ja auch macht, nur wie?
#1
CSS
Alles anzeigen/* Test Margin #7a , Text width static */ /* Buttons right */ :is(#identity-box:not(.chromeUI), #tracking-protection-icon-container, #page-action-buttons) { order: 1 !important; margin-inline: 0px !important; z-index: 2 !important; } /* opacity not hover, open 0, testing 0.5 */ :is(#identity-box:not(.chromeUI) .identity-box-button, #tracking-protection-icon-container, #star-button-box):not(:hover, :hover:active, [open="true"]) { opacity: 0 !important; } /* text full width, overflow ellipsis optional, 84px */ :root { --custom-url-icon-size: calc(var(--urlbar-min-height) - 2px - 2 * var(--urlbar-container-padding)); } #urlbar-input { padding-inline: 9px !important; margin-right: calc(0px - 3 * var(--custom-url-icon-size)) !important; /* overflow ellipsis instead of gradient, optional */ /*mask-image: none !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important;*/ } /* hover, open background not transparent */ :is(#identity-box:not(.chromeUI) .identity-box-button, #tracking-protection-icon-container, #star-button-box):hover { background-color: color-mix(in srgb, white 70%, rgba(87, 80, 68, 1)) !important; } :is(#identity-box:not(.chromeUI) .identity-box-button, #tracking-protection-icon-container, #star-button-box)[open="true"] { background-color: color-mix(in srgb, white 50%, rgba(87, 80, 68, 1)) !important; } /* Icons color */ :is(#identity-box, #tracking-protection-icon-container, #page-action-buttons, #star-button) { fill: rgba(80, 80, 80, 1.0) !important; } /* extra buttons */ #urlbar-zoom-button { margin: 0px !important; order: 1 !important; } #reader-mode-button { display: none !important; } #identity-box[pageproxystate="invalid"] { display: none !important; } #identity-permission-box { display: none !important; } /* buttons never seen ? */ /* #contextual-feature-recommendation, #userContext-icons, #reader-mode-button, #pageActionButton, #translations-button, #picture-in-picture-button, #pageActionButton { display: none !important; }*/ /* colors testing only */ /* #star-button-box { background-color: khaki !important; } #identity-box:not(.chromeUI) .identity-box-button { background-color: lightblue !important; } #tracking-protection-icon-container { background-color: orange !important; }*/
#2
CSS
Alles anzeigen* Test Margin #7b Multi Buttons Margins, Text width dynamic */ /* Buttons right */ :is(#identity-box:not(.chromeUI), #tracking-protection-icon-container, #page-action-buttons) { order: 1 !important; margin-inline: 0px !important; z-index: 2 !important; } /* opacity not hover, open 0, testing 0.5 */ :is(#identity-box:not(.chromeUI) .identity-box-button, #tracking-protection-icon-container, #star-button-box):not(:hover, :hover:active, [open="true"]) { opacity: 0 !important; } /* text full width, overflow ellipsis optional, 84px */ :root { --custom-url-icon-size: calc(var(--urlbar-min-height) - 2px - 2 * var(--urlbar-container-padding)); } #urlbar-input { padding-inline: 9px !important; margin-right: calc(0px - 3 * var(--custom-url-icon-size)) !important; /* overflow ellipsis instead of gradient, optional */ /*mask-image: none !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important;*/ } /* Test Multi Button Margins hover, open */ #page-action-buttons #star-button-box:is(:hover, [open="true"]) { margin-left: calc(1 * var(--custom-url-icon-size)) !important; } #identity-box:not(.chromeUI) #identity-icon-box:is(:hover, [open="true"]) { margin-left: calc(2 * var(--custom-url-icon-size)) !important; } #tracking-protection-icon-container:is(:hover, [open="true"]) { margin-left: calc(3 * var(--custom-url-icon-size)) !important; } /* Icons color */ :is(#identity-box, #tracking-protection-icon-container, #page-action-buttons, #star-button) { fill: rgba(80, 80, 80, 1.0) !important; } /* extra buttons */ #urlbar-zoom-button { margin: 0px !important; order: 1 !important; } #reader-mode-button { display: none !important; } #identity-box[pageproxystate="invalid"] { display: none !important; } #identity-permission-box { display: none !important; } /* buttons never seen ? */ /* #contextual-feature-recommendation, #userContext-icons, #reader-mode-button, #pageActionButton, #translations-button, #picture-in-picture-button, #pageActionButton { display: none !important; }*/ /* colors testing only */ /* #star-button-box { background-color: khaki !important; } #identity-box:not(.chromeUI) .identity-box-button { background-color: lightblue !important; } #tracking-protection-icon-container { background-color: orange !important; }*/
-
nach 2 Jahren ist Deine Lösung für meine Probleme leider mit 113.0.1 wirkungslos geworden. Die in diesem Thema von Dir generierte css ist immer noch am alten Ort, aber alles ist nun wieder anders: Tabs unten, Abstände endlos auseinander, etc...
Es sollte eigentlich funktionieren die hier beschriebenen Änderungen vorzunehmen; wobei allein der Basiscode schon etwas in die Jahre gekommen ist.
Um sicher zu gehen, könntest du den von dir benutzten Code (userChrome.css) hier einstellen, um nicht an einem evtl. geänderten oder dem falschen Code rumzubasteln.
-
Nur mal eben herzlichen Dank an alle Beteiligten!
Das Problem hattet ihr gelöst, bevor ich Zeit hatte meinen Nightly Update zu machen, fantastisch!
-
Oder doch besser sowas in der Art?
Fragen über Fragen...
CSS
Alles anzeigen/* Test Margin #4 alter */ /* colors testing only */ /* #star-button-box { background-color: khaki !important; } #identity-box:not(.chromeUI) .identity-box-button { background-color: lightblue !important; } #tracking-protection-icon-container { background-color: orange !important; }*/ /* Buttons right */ :is(#identity-box:not(.chromeUI), #tracking-protection-icon-container, #page-action-buttons) { order: 1 !important; margin-inline: 0px !important; z-index: 2 !important; } /* Icons color */ :is(#identity-box, #tracking-protection-icon-container, #page-action-buttons, #star-button) { fill: rgba(80, 80, 80, 1.0) !important; } /* opacity not hover, open 0, testing 0.5 */ :is(#identity-box:not(.chromeUI) .identity-box-button, #tracking-protection-icon-container, #star-button-box):not(:hover, :hover:active, [open="true"]) { opacity: 0 !important; } /* hover, open colors */ :is(#identity-box:not(.chromeUI) .identity-box-button, #tracking-protection-icon-container, #star-button-box):hover { background-color: color-mix(in srgb, white 70%, rgba(87, 80, 68, 1)) !important; } :is(#identity-box:not(.chromeUI) .identity-box-button, #tracking-protection-icon-container, #star-button-box)[open="true"] { background-color: color-mix(in srgb, white 50%, rgba(87, 80, 68, 1)) !important; } /* text full width, overflow ellipsis */ :root { --custom-url-icon-size: calc(var(--urlbar-min-height) - 2px - 2 * var(--urlbar-container-padding)); } #urlbar-input { padding-inline: 9px !important; /*margin-right: -84px !important;*/ margin-right: calc(0px - 3 * var(--custom-url-icon-size)) !important; mask-image: none !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } /* extra buttons */ #urlbar-zoom-button { margin: 0px !important; /*padding: 7px !important;*/ order: 1 !important; } #reader-mode-button { display: none !important; } #identity-box[pageproxystate="invalid"] { display: none !important; } #identity-permission-box { display: none !important; } /* buttons never seen ? */ /* #contextual-feature-recommendation, #userContext-icons, #reader-mode-button, #pageActionButton, #translations-button, #picture-in-picture-button, #pageActionButton { display: none !important; }*/
-
Und noch einer.
CSS
Alles anzeigen#reader-mode-button { display: none !important; } #identity-box[pageproxystate="invalid"] { display: none !important; } #identity-permission-box { display: none !important; } #contextual-feature-recommendation, #userContext-icons, #reader-mode-button, #pageActionButton, #urlbar-zoom-button, #translations-button, #picture-in-picture-button, #pageActionButton { display: none !important; } #urlbar-input { padding-inline: 9px !important; } /* opacity not hover, 0, testing 0.5 */ :is(#identity-box:not(.chromeUI) .identity-box-button, #tracking-protection-icon-container, #star-button-box):not(:hover, :hover:active, [open="true"]) { opacity: 0 !important; } /* test colors */ /* #star-button-box { background-color: khaki !important; } #identity-box:not(.chromeUI) .identity-box-button { background-color: lightblue !important; } #tracking-protection-icon-container { background-color: orange !important; }*/ /* hover, open colors */ :is(#identity-box:not(.chromeUI) .identity-box-button, #tracking-protection-icon-container, #star-button-box):hover { background-color: color-mix(in srgb, currentColor 17%, white) !important; } :is(#identity-box:not(.chromeUI) .identity-box-button, #tracking-protection-icon-container, #star-button-box)[open="true"] { background-color: color-mix(in srgb, currentColor 30%, white) !important; } /* positions */ :root { --custom-url-icon-size: calc(var(--urlbar-min-height) - 2px - 2 * var(--urlbar-container-padding)); } #page-action-buttons:not(.chromeUI ~ #page-action-buttons) { position: absolute !important; right: 2px !important; } #identity-box:not(.chromeUI), #tracking-protection-icon-container { position: absolute !important; margin-inline: 0px !important; height: var(--custom-url-icon-size) !important; width: var(--custom-url-icon-size) !important; z-index: 2 !important; } #identity-box:not(.chromeUI) { right: calc(var(--custom-url-icon-size) + 4px) !important; } #tracking-protection-icon-container { right: calc(2*var(--custom-url-icon-size) + 6px) !important; }
-
Hmm, das Gehacke geht munter weiter; in einem frischen Profil funktioniert sowas scheinbar halbwegs.
Vermutlich fehlt die Hälfte oder macht irgendwo Zicken, und ist nur ein grober Test ...
CSS
Alles anzeigen/* Test 2 Leerprofil ok */ #reader-mode-button { display: none !important; } #identity-box[pageproxystate="invalid"] #identity-icon { display: none !important; } #identity-box[pageproxystate="invalid"] .identity-box-button { display: none !important; } /* Notifications box Off ? */ /* #identity-permission-box { display: none !important; }*/ #urlbar-input { padding-inline: 9px !important; } :is(#identity-box:not(.chromeUI) .identity-box-button, #tracking-protection-icon-container):not(:hover, :hover:active, [open="true"]) { opacity: 0.5 !important; } #star-button-box:not(:hover, :active, [open]) { opacity: 0.5 !important; } /* colors */ #star-button-box { background-color: khaki !important; } #identity-box:not(.chromeUI) .identity-box-button { background-color: lightblue !important; } #tracking-protection-icon-container { background-color: orange !important; } /* positions */ #page-action-buttons { position: absolute !important; right: 0px !important; } #identity-box:not(.chromeUI) { position: absolute !important; margin-inline: 0px !important; height: 100% !important; right: 28px !important; z-index: 10 !important; } #tracking-protection-icon-container { position: absolute !important; margin-inline: 0px !important; height: 100% !important; right: 56px !important; z-index: 10 !important; }
-
Damit bist du von jetzt an - der neue CSS Guru!
Das wäre leider keinesfalls gerechtfertigt.
Wie ich seinerzeit zu dem Code gekommen bin, weiß ich nicht mehr. Sicher ist nur, dass selbst der kleine Schnipsel nicht auf meinem Mist gewachsen ist.
Alles gut, war nur ein Scherzchen.
-
Wenn der Text der Webpage bis zum Ende der Zeile gehen würde,
und die Symbole dann bei Hover über dem Text "schweben würden", ja das, das wäre schon fein.
Im Prinzip scheint sowas halbwegs zu funktionieren:
CSS#urlbar-input-container:not(:hover) :is(#identity-box, #tracking-protection-icon-container, #page-action-buttons, #star-button-box) :not(:hover:active, [open="true"]) { display: none !important; } #urlbar-input-container:not(:hover) #tracking-protection-icon-container { padding-inline: 0 !important; }
Das ist nur ein Anfang, und deckt weder alle Buttons ab, noch bleibt der Text bei Hover auf voller Breite wie gewünscht; zudem bleibt die Breite bei einigen Buttons nicht konstant wenn man die Maus weg von der URL Leiste über das Popup bewegt - wenigstens bleiben die Popups endlich offen.
Aber falls noch jemand daran werkelt, hilft's vielleicht beim Testen.
-
opacity: 0 !important;
reicht in diesem Fall.
Klassiker.
Das blendet aber leider die Elemente komplett aus und somit funktioniert dann auch das Einblenden nicht mehr.
Da muss es einen anderen Trick geben, damit sich die Elemente "überlagern".
Nochmals sorry, das war nur als Test gedacht um alle(?) Elemente anzusprechen; hätte ich klarer ausdrücken sollen.
Man sollte auch zumindest den Star Button sowieso nicht in der Art ausblenden, weil sonst die Funktion verloren geht.
-
Das ist ja nicht wirklich eine Lücke!
Das ist die Stelle der Box (#identity-box) und dahinter wäre die Stelle des Lesezeichensterns.
Habe das mal nachzustellen versucht, da sehr interessant!
Die Lücke war mein Fehler, es ist tatsächlich die #star-button-box die ich bei meinem (nicht beschriebenen) Test vergessen hatte.
Das hier elimiert die Lücken beidseitig, zumindest bei mir im Testprofil:
CSS#identity-box, #tracking-protection-icon-container, #star-button-box { display: none !important; }
Sorry, am besten den Teil einfach ignorieren...
Wenn der Text der Webpage bis zum Ende der Zeile gehen würde,
und die Symbole dann bei Hover über dem Text "schweben würden", ja das, das wäre schon fein.
Denk ich auch!
-
Ich glaube, da hast du Horstmann falsch verstanden. Oder ich??
Muss ich dazusagen dass es ein kleiner Scherz war?
-
Na, StandingBill ist doch jetzt zum Fachmann ernannt worden, wobei ich nicht weiß, ob er das weiß
Als Ex-Guru könntest du ihm ja beratend zur Seite stehen, als Übergangslösung - obwohl er bestimmt schon alles weiss.
-
Kleiner Hinweis an den CSS-Guru des Forums:
Hier wurden die Lesezeichenordner wie folgt gelb gefärbt
Damit lassen sich die Ordner auch leicht anders färben.
Damit bist du von jetzt an - der neue CSS Guru!
-
Im Eingabefeld der URL Leiste gibt es ja diverse Buttons, um Lesezeichen zu speichern, Infos und Schutzmassnahmen anzuzeigen, etc. .
Diese Buttons limitieren die Breite des URL Text, was generell ja auch Sinn macht.
In meinem Fall habe ich einige Buttons komplett ausgeblendet, oder verschoben und nur bei Hover sichtbar gemacht.
Als Beispiel, hier nur ein Test:
CSS
Alles anzeigen/* Buttons right , ohne Firefox Logo grau */ :is(#identity-box, #tracking-protection-icon-container):not(#identity-box.chromeUI) { order: 2 !important; margin-inline: 0px !important; opacity: 0.0 !important; } #star-button-box:not(:hover, :active, [open]) { opacity: 0.0 !important; } :is(#identity-box, #tracking-protection-icon-container):not(#identity-box.chromeUI):hover { opacity: 1.0 !important; } /* Star button right */ #page-action-buttons { order: 3 !important; }
Das sieht dann im Testprofil so aus:
Wenn ich über einem der Buttons mit der Maus bin ( Hover ) dann zB so:
Wie man sieht, ist rechts die reservierte Lücke für die Buttons; ich würde das aber gerne ändern, und den Text im Eingabefeld permanent auf voller Breite haben; die Buttons sollten dann bei Hover über diesen Buttons auftauchen, und über dem Text quasi `schweben', bzw. ihn überlagern.
Hier wäre ein in Photoshop insziniertes Beispeil dazu.
(Die 'verbleibende Lücke' ist etwas das ich auch beim Verstecken aller gefunden Buttons und übergeordneten Elementen (display: none) nicht wegbekommen hatte).
Danke schon mal für Vorschläge!
-
das funktioniert prima.
Schönes WE allerseits!
Prima, und ebenfalls schönes Wochenende.
-
Eine Frage eher am Rande: woher kommt in dem Script - in Zeilen 286, 292 - das .tab-throbber-fallback ?
Das ist eine Altlast und kann entfernt werden. Das Skript ist jetzt bald 4 Jahre alt und ich schaue wirklich nur noch, dass die versprochene Funktionalität sichergestellt ist. Ansonsten fasse ich das Ungetüm nur noch mit spitzen Fingern an, bis ich mich mal dazu durchringen kann, endlich eine völlig neue Version des Skripts (welche schon seit ca. 2 Jahren in "Arbeit" ist
) zu erstellen. Das jetzige Skript ist sicher noch voll von überflüssigem und umständlich realisiertem Code, vor allem was die CSS-Teile betrifft...
Danke für die Erklärung, ich war kurz verwirrt.
Ist aber schon ein feines Script; hab's nur kurz mal aus Interesse getestet - ich werde bei mehr als 5 offenen Tabs schon nervös und brauch es nicht - aber die Funktion ist schon beindruckend.
Die wählbaren Einstellungen sind übrigens wirklich gut implementiert und sehr einfach zu handhaben, nach meinem kurzen Eindruck.
-
In der Version vor FF113 bekam ich trotz deaktiviertem Close-Button (bTabCloseButton=false) ein X auf dem aktiven Tab und als Mouseover auch auf inaktiven Tabs. In der aktuellen Version geht das (zumindest mit den bisherigen Settings) nicht mehr, hier gibt es nur noch ganz oder gar nicht.
Keine Ahnung, warum das vorher funktioniert hat, aber ich hätte das gerne wieder, denn ich kann auf meinen 100+ Mini-Tabs jedes Pixel für den Titeltext brauchen.... Hat jemand eine Idee?
Du könntest das mal probieren - nur kurz hier angetestet - das gehört in die userChrome.css.
Im Script von BrokenHeart steht dabei bTabCloseButton=false (Edit: Icon + Outline Farbe zugefügt).
CSS
Alles anzeigen/* bTabCloseButton false */ .tabbrowser-tab .tab-close-button { display: inherit !important; fill: white !important; outline-color: white !important; opacity: 1 !important; } .tabbrowser-tab:not(:hover, [selected]) .tab-close-button { display: none !important; } /* Verlauf / Icon aus */ .tabbrowser-tab { --tab-label-mask-size: 0 !important; } .tab-icon-image:not([pinned]) { display: none !important; }
Oder so, Closebutton aktiviert im Script, bTabCloseButton=true:
-
Bitte mal testen:
Eine Frage eher am Rande: woher kommt in dem Script - in Zeilen 286, 292 - das .tab-throbber-fallback ?
Ich hab's in einem anderen Beitrag zufällig gesehen, seh's aber im Script nicht definiert, und im Fx Code finde ich es auch nicht.
-
Morgen Horstmann
Besten Dank für deinen Code. Funktioniert perfekt. Wenn noch Interesse besteht hier die Pfeile. Weiß aber nicht ob man das auch nutzen kann.
Prima, schön dass es klappt.
Dein Pfeil klappt hier auch, mit deinen Grössenangaben.
Du könntest das hier noch antesten; schlanker und das könnte den Übergang von tabthrobber zum Tabicon füllen.
Die Grösse wäre hier wie du es vorher hattest, schau nochmal ob der Dateipfad zum .gif auch stimmt.
Wenn's Ärger macht, wirf .tab-icon-pending einfach raus (inkl. dem Komma davor).