Entwicklung Firefox

BrokenHeart

Zitat von .DeJaVu

Kannte ich zuletzt nur noch für die Ordnersymbole fur Aris css, mal schauen, ob noch genutzt hier. Danke.

Verdammt, Mist, stimmt! Das hatte ich ja gar nicht auf dem Schirm. Da kommt es ja "hundertfach" vor. Ich benutze noch eine relativ alte Version, muss jetzt auch mal bei Aris schauen, ob das immer noch so ist, oder ob sich da schon was getan hat...

.DeJaVu

Eben nachgeschaut, mein Stand ist noch 4.2.4v3 von Nov'22

Releases · Aris-t2/CustomCSSforFx

Custom CSS tweaks for Firefox. Contribute to Aris-t2/CustomCSSforFx development by creating an account on GitHub.

github.com

Auch die aktuelle 4.3.1v7 nutzt noch -moz-image-region, man sollte ihm Bescheid sagen

(zB in bookmark_icons_colorized.css)

Aufbau:

-moz-image-region - CSS: Cascading Style Sheets | MDN

For certain XUL elements and pseudo-elements that use an image from the list-style-image property, this property specifies a region of the image that is used…

developer.mozilla.org

-moz-image-region: rect(oben, rechts, unten, links);

oben/links fängt es an, endet bei rechts/unten - wer Bilder trennen muss.

Nachtrag, siehe auch

Thema

moz-image-region? 4 Werte?

Hi!

Fummle ja auch gern und viel rum in Themes und Extensions, aber diese 4 Zahlen, wenn auf ein "3er-Bild" zugegriffen wird, krieg ich einfach nicht in den Kopf.

Kennt jemand einen Link, wo das erklärt wird?

Beispiel:
0px 32px 32px 0 px

bedeutet:
ich fang oben links an, gehe 32px nach rechts (unten?), dann 32px nach unten (rechts?) und der 4.Wert? 0px in die 3.Dimension?

tombik

12. Februar 2006 um 17:07

Noch eine wichtige Info für ESR-Nutzer dazu:

Zitat

This version might not fully support Firefox 102 ESR anymore.

Keep CustomCSSforFx v4.2.8 until ESR moves to the next major release.

Release Custom CSS tweaks for Firefox v4.2.8 · Aris-t2/CustomCSSforFx

Full changelog: https://github.com/Aris-t2/CustomCSSforFx/commits/ [Tabs] (fix) tab label position left/center/right (different approach, idea by MrOtherGuy)…

github.com

Nachtrag, ein Beispiel:

alt

CSS

/* Firefox Quantum userChrome.css tweaks ************************************************/
/* Github: https://github.com/aris-t2/customcssforfx ************************************/
/****************************************************************************************/


.folder-icon,
#editBMPanel_chooseFolderMenuItem .menu-iconic-icon,
treechildren::-moz-tree-image(title, container),
treechildren::-moz-tree-image(title, query, hostContainer) {
 list-style-image: url("./folder-item.png")!important;
 -moz-image-region: rect(0px, 32px, 16px, 16px) !important;
}

treechildren::-moz-tree-image(title, open) {
 -moz-image-region: rect(16px, 32px, 32px, 16px) !important;
}

treechildren::-moz-tree-image(title, container, livemark) {
 list-style-image: url("./feedIcon16.png") !important;
 -moz-image-region: auto !important;
}

#editBMPanel_folderMenuList:-moz-any([label="Bookmarks Toolbar"],[label="Lesezeichen-Symbolleiste"]) .menulist-icon,
#editBMPanel_toolbarFolderItem .menu-iconic-icon,
treechildren::-moz-tree-image(container, OrganizerQuery_BookmarksToolbar),
treechildren::-moz-tree-image(container, queryFolder_toolbar_____) {
 list-style-image: url("./bookmarksToolbar.png") !important;
 -moz-image-region: auto !important;
}

#editBMPanel_folderMenuList:-moz-any([label="Bookmarks Menu"],[label="Lesezeichen-Menü"]) .menulist-icon,
#editBMPanel_bmRootItem .menu-iconic-icon,
treechildren::-moz-tree-image(container, OrganizerQuery_BookmarksMenu),
treechildren::-moz-tree-image(container, queryFolder_menu________) {
 list-style-image: url("./bookmarksMenu.png") !important;
 -moz-image-region: auto !important;
}

#editBMPanel_folderMenuList:-moz-any([label="Other Bookmarks"],[label="Weitere Lesezeichen"]) .menulist-icon,
#editBMPanel_unfiledRootItem .menu-iconic-icon,
treechildren::-moz-tree-image(container, OrganizerQuery_UnfiledBookmarks),
treechildren::-moz-tree-image(container, queryFolder_unfiled_____) {
 list-style-image: url("./unsortedBookmarks.png") !important;
 -moz-image-region: auto !important;
}

treechildren::-moz-tree-image(title, query),
treechildren::-moz-tree-image(query) {
 list-style-image: url("./query.png") !important;
 -moz-image-region: auto !important;
}

treechildren::-moz-tree-image(title, query, dayContainer) {
  list-style-image: url("./calendar.png") !important;
  -moz-image-region: auto !important;
}

treechildren::-moz-tree-image(query, OrganizerQuery_History),
treechildren::-moz-tree-image(query, OrganizerQuery_history____v),
treechildren::-moz-tree-image(title, query, dayContainer) {
  list-style-image: url("./calendar.png") !important;
  -moz-image-region: auto !important;
}


treechildren::-moz-tree-image(query, OrganizerQuery_allbms_____v) {
  list-style-image: url("chrome://browser/skin/bookmark.svg") !important;
  -moz-image-region: auto !important;
}

treechildren::-moz-tree-image(query, OrganizerQuery_downloads__v) {
  list-style-image: url("chrome://browser/skin/downloads/downloads.svg") !important;
  -moz-image-region: auto !important;
}

toolbarbutton.bookmark-item[container],
.bookmark-item[container] .menu-iconic-left .menu-iconic-icon {
  list-style-image: url("./folder-item.png") !important;
  -moz-image-region: rect(0px, 32px, 16px, 16px) !important;
}

toolbarbutton.bookmark-item[container][open],
.bookmark-item[container][open] .menu-iconic-left .menu-iconic-icon {
  -moz-image-region: rect(16px, 32px, 32px, 16px) !important;
}

.bookmark-item[container][livemark] {
  list-style-image: url("./livemark-folder.png") !important;
  -moz-image-region: auto !important;
}
.bookmark-item[container][livemark] .bookmark-item {
  list-style-image: url("./livemark-item.png") !important;
  -moz-image-region: rect(0px, 16px, 16px, 0px) !important;
}
.bookmark-item[container][livemark] .bookmark-item[visited] {
  -moz-image-region: rect(0px, 32px, 16px, 16px) !important;
}

.bookmark-item[container][query],
.bookmark-item[container][query][open],
.bookmark-item[container][query] > .menu-iconic-left > .menu-iconic-icon,
.bookmark-item[container][query][open] > .menu-iconic-left > .menu-iconic-icon {
  list-style-image: url("./query.png") !important;
  -moz-image-region: auto !important;
}

#scrollbutton-up .toolbarbutton-icon,
#scrollbutton-down .toolbarbutton-icon {
  -moz-image-region: auto !important;
}

treechildren::-moz-tree-image(title, query, tagContainer),
treechildren::-moz-tree-image(query, OrganizerQuery_tags_______v),
.bookmark-item[query][tagContainer] {
  list-style-image: url("./tag.png") !important;
  -moz-image-region: auto !important;
}

.bookmark-item[query][dayContainer] {
  list-style-image: url("./calendar.png") !important;
  -moz-image-region: auto !important;
}

.bookmark-item[query][hostContainer] {
  list-style-image: url("./folder-item.png") !important;
  -moz-image-region: rect(0px, 32px, 16px, 16px) !important;
}

.bookmark-item[query][hostContainer][open] {
  list-style-image: url("./folder-item.png") !important;
  -moz-image-region: rect(16px, 32px, 32px, 16px) !important;
}

/* Bookmarks roots menu-items */
#subscribeToPageMenuitem:not([disabled]),
#subscribeToPageMenupopup {
  list-style-image: url("./feedIcon16.png") !important;
}

#bookmarksToolbarFolderMenu > .menu-iconic-left > .menu-iconic-icon,
#BMB_bookmarksToolbar > .menu-iconic-left > .menu-iconic-icon,
#panelMenu_bookmarksToolbar {
  list-style-image: url("./bookmarksToolbar.png") !important;
  -moz-image-region: auto !important;
}

#menu_unsortedBookmarks > .menu-iconic-left > .menu-iconic-icon,
#BMB_unsortedBookmarks > .menu-iconic-left > .menu-iconic-icon,
#panelMenu_unsortedBookmarks {
  list-style-image: url("./unsortedBookmarks.png") !important;
  -moz-image-region: auto !important;
}


/**/

Alles anzeigen

neu

CSS

/* Firefox Quantum userChrome.css tweaks ************************************************/
/* Github: https://github.com/aris-t2/customcssforfx ************************************/
/****************************************************************************************/


.folder-icon,
#editBMPanel_chooseFolderMenuItem .menu-iconic-icon,
treechildren::-moz-tree-image(title, container),
treechildren::-moz-tree-image(title, query, hostContainer) {
  list-style-image: url("./folder-item_default_open.png")!important;
}

treechildren::-moz-tree-image(title, open) {
  list-style-image: url("./folder-item_default_open.png")!important;
}

#editBMPanel_folderMenuList:-moz-any([label="Bookmarks Toolbar"],[label="Lesezeichen-Symbolleiste"]) .menulist-icon,
#editBMPanel_toolbarFolderItem .menu-iconic-icon,
treechildren::-moz-tree-image(container, OrganizerQuery_BookmarksToolbar),
treechildren::-moz-tree-image(container, queryFolder_toolbar_____) {
 list-style-image: url("./bookmarksToolbar.png") !important;
}

#editBMPanel_folderMenuList:-moz-any([label="Bookmarks Menu"],[label="Lesezeichen-Menü"]) .menulist-icon,
#editBMPanel_bmRootItem .menu-iconic-icon,
treechildren::-moz-tree-image(container, OrganizerQuery_BookmarksMenu),
treechildren::-moz-tree-image(container, queryFolder_menu________) {
 list-style-image: url("./bookmarksMenu.png") !important;
}

#editBMPanel_folderMenuList:-moz-any([label="Other Bookmarks"],[label="Weitere Lesezeichen"]) .menulist-icon,
#editBMPanel_unfiledRootItem .menu-iconic-icon,
treechildren::-moz-tree-image(container, OrganizerQuery_UnfiledBookmarks),
treechildren::-moz-tree-image(container, queryFolder_unfiled_____) {
 list-style-image: url("./unsortedBookmarks.png") !important;
}

treechildren::-moz-tree-image(title, query),
treechildren::-moz-tree-image(query) {
 list-style-image: url("./query.png") !important;
}

treechildren::-moz-tree-image(title, query, dayContainer) {
  list-style-image: url("./calendar.png") !important;
}

treechildren::-moz-tree-image(query, OrganizerQuery_History),
treechildren::-moz-tree-image(query, OrganizerQuery_history____v),
treechildren::-moz-tree-image(title, query, dayContainer) {
  list-style-image: url("./calendar.png") !important;
}


treechildren::-moz-tree-image(query, OrganizerQuery_allbms_____v) {
  list-style-image: url("chrome://browser/skin/bookmark.svg") !important;
}

treechildren::-moz-tree-image(query, OrganizerQuery_downloads__v) {
  list-style-image: url("chrome://browser/skin/downloads/downloads.svg") !important;
}

toolbarbutton.bookmark-item[container],
.bookmark-item[container] .menu-iconic-left .menu-iconic-icon {
  list-style-image: url("./folder-item_default_open.png")!important;
}

toolbarbutton.bookmark-item[container][open],
.bookmark-item[container][open] .menu-iconic-left .menu-iconic-icon {
 list-style-image: url("./folder-item_default_open.png")!important;
}

.bookmark-item[container][query],
.bookmark-item[container][query][open],
.bookmark-item[container][query] > .menu-iconic-left > .menu-iconic-icon,
.bookmark-item[container][query][open] > .menu-iconic-left > .menu-iconic-icon {
  list-style-image: url("./query.png") !important;
}

treechildren::-moz-tree-image(title, query, tagContainer),
treechildren::-moz-tree-image(query, OrganizerQuery_tags_______v),
.bookmark-item[query][tagContainer] {
  list-style-image: url("./tag.png") !important;
}

.bookmark-item[query][dayContainer] {
  list-style-image: url("./calendar.png") !important;
}

.bookmark-item[query][hostContainer] {
  list-style-image: url("./folder-item_default_open.png")!important;
}

.bookmark-item[query][hostContainer][open] {
  list-style-image: url("./folder-item_default_open.png")!important;
}

/* Bookmarks roots menu-items */
#bookmarksToolbarFolderMenu > .menu-iconic-left > .menu-iconic-icon,
#BMB_bookmarksToolbar > .menu-iconic-left > .menu-iconic-icon,
#panelMenu_bookmarksToolbar {
  list-style-image: url("./bookmarksToolbar.png") !important;
}

#menu_unsortedBookmarks > .menu-iconic-left > .menu-iconic-icon,
#BMB_unsortedBookmarks > .menu-iconic-left > .menu-iconic-icon,
#panelMenu_unsortedBookmarks {
  list-style-image: url("./unsortedBookmarks.png") !important;
}


/**/

Alles anzeigen

Und das passende Bild (zum CSS, kann sich jeder ändern wie lustig)

.DeJaVu

Aris hat sein CSS abgeändert, "v4.3.2dev3" von gestern.

Speravir

Zitat von .DeJaVu

Kannte ich zuletzt nur noch für die Ordnersymbole fur Aris css,

Zitat von BrokenHeart

muss jetzt auch mal bei Aris schauen, ob das immer noch so ist, oder ob sich da schon was getan hat

Zitat von .DeJaVu

Aris hat sein CSS abgeändert

(Ergänzend:) Und vorher:

[Firefox 112+] Mozilla removed -`moz-image-region` rule - icon sets are currently broken · Issue #564 · Aris-t2/CustomCSSforFx

See https://bugzilla.mozilla.org/show_bug.cgi?id=1817071 Settings currently affected by this change: custom icon sets for toolbar button options custom…

github.com

.DeJaVu

clip-path dürfte funktionieren, aber so wie es aktuell gelöst wurde, sollte man es generell beibehalten - würde ich so empfehlen. Allein das mindert erheblich den Aufwand und die Verwaltung - und Änderungen, falls einem das Bild nicht mehr gefällt.

Sören Hentzschel

Weil hier und auch im GitHub-Issue clip-path erwähnt wurde: Der Zusammenhang zu -moz-image-region ist vor allem, dass auf dessen MDN-Seite erwähnt wird, dass die Syntax ähnlich zu clip ist, was wiederum zu Gunsten von clip-path nicht länger verwendet werden soll. Der naheliegende Ersatz für -moz-image-region, weil viel unkomplizierter, ist in vielen Fällen aber ganz einfach die Umsetzung als background. So hat es Mozilla beispielsweise hier gemacht:

mozilla-central @ d8e1a8bee539

Bug 1817068 - Don't use -moz-image-region in page info window. r=Gijs

hg.mozilla.org

Die andere Option, Einzelgrafiken aus solchen Mehrfachgrafiken zu machen, wie Aris es getan hat, geht natürlich auch, ist aber auch nicht zwingend notwendig und hat nach seinen eigenen Angaben die Dateigröße um 40 Prozent vergrößert, was ich für einen ziemlich starken Anstieg halte, falls das wirklich nur darauf zurückzuführen ist (womit die Gesamtgröße natürlich immer noch überschaubar ist und das kein Problem oder dergleichen darstellt, also alles gut). Die Austauschbarkeit ist bei Einzelgrafiken sicherlich einfacher. Die Wartbarkeit höher als die Dateigröße zu gewichten, ist auch vollkommen legitim.

Speravir

Zitat von Sören Hentzschel

Der Zusammenhang zu -moz-image-region ist vor allem, dass auf dessen MDN-Seite erwähnt wird, dass die Syntax ähnlich zu clip ist, was wiederum zu Gunsten von clip-path nicht länger verwendet werden soll.

Exakt.

Zitat von Sören Hentzschel

Der naheliegende Ersatz für -moz-image-region, weil viel unkomplizierter, ist in vielen Fällen aber ganz einfach die Umsetzung als background.

Also so, wie auch im GitHub-Issue von einer mir entfernt bekannt vorkommenden Person erwähnt.

2002Andreas

Ich habe einen Teil der Beiträge mal verschoben nach:

Beitrag

-moz-image-region ersetzen, Bilddatei mit vielen Symbolen

[…]

Ich habe noch nicht verstanden, wie ich -moz-image-region ersetzen muss, wenn ich eine Datei mit vielen Symbolen nicht in einzelne Dateien aufspalten will. Wie muss dann der neue Code für dieses Beispiel aussehen?

(Quelltext, 4 Zeilen)

bege

1. März 2023 um 21:06

Boersenfeger

Zur Kenntnis:

Der Nightly

https://hg.mozilla.org/mozilla-central/rev/7954e1671be3190ab36018a2c80848b07398e0c9

Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:109.0) Gecko/20100101 Firefox/113.0 ID:20230316092607

spricht (bei mir) in Teilen Englisch. Ggf. kommt heute Abend in der neuen Version wieder eine komplette deutsche Darstellung...

milupo

Zitat von Boersenfeger

spricht (bei mir) in Teilen Englisch

Bei mir auch.

Foxxiator

Hier auch, aber das ist nicht ungewöhnlich und stört zumindest mich persönlich nicht. Gibt es immer mal bei der Nightly.....

Boersenfeger

Mir ist das schon bekannt... gewiss ein Weilchen länger

Nope, auch in der Version

https://hg.mozilla.org/mozilla-central/rev/ca5fed1e3908c850b24ccedd0e8762c3b2854171

Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:109.0) Gecko/20100101 Firefox/113.0 ID:20230316125715

Isser noch Englisch

milupo

Bloß gut, dass es den Google Übersetzer gibt …

Endor

Ja kann ich auch bestätigen Nightly 113a ist teilweise in Englischer Sprache.

Menüleiste, Kontextmenüs usw. Aber das ist nichts neues.
Wird demnächst bestimmt wieder alles passen.

Mfg.
Endor

BrokenHeart

Zitat von Endor

Wird demnächst bestimmt wieder alles passen.

Ja, gerade eben ein Update gemacht und alles wieder in unserer geliebten westgermanischen Sprache...

Foxxiator

Passt wieder....

Boersenfeger

milupo

Zitat von BrokenHeart

alles wieder in unserer geliebten westgermanischen Sprache...

Nö, alles wieder in meiner geliebten westslawischen Sprache …

Endor

Sören Hentzschel

Da man es immer noch in aktuellen Anpassungen hier im Forum sieht: Ab der heutigen Nightly-Version unterstützt Firefox keine XUL-Flexbox mehr. Das sollte wenig überraschend sein, nachdem Mozilla in den letzten Monaten ja sämtliche Vorkommen innerhalb von Firefox auf die CSS-Flexbox umgestellt hat, was hier oft genug Thema war. Jedenfalls heißt das, dass Dinge wie display: -moz-box, -moz-box-orient oder -moz-box-flex (neben weiteren) in euren individuellen Anpassungen nichts mehr bewirken, die sind entsprechend zu adaptieren.

1824957 - Stop using XUL layout for nsTreeBodyFrame.

RESOLVED (emilio) in Core - XUL. Last updated 2023-03-30.

bugzilla.mozilla.org