| Bug 2032240 - Firefox theme Nova icons r=#desktop-theme-reviewers!
Authored by sthompson on Fri, May 22, 2:11 AM. Referenced Files | Unknown Object (File) | | Tue, Jun 16, 9:54 PM2026-06-16 21:54:36 (UTC+0) |
| Unknown Object (File) | | Tue, Jun 16, 9:54 PM2026-06-16 21:54:35 (UTC+0) |
| Unknown Object (File) | | Tue, Jun 16, 9:54 PM2026-06-16 21:54:34 (UTC+0) |
| Unknown Object (File) | | Mon, Jun 8, 12:52 AM2026-06-08 00:52:01 (UTC+0) |
| Unknown Object (File) | | Sun, Jun 7, 10:13 AM2026-06-07 10:13:44 (UTC+0) |
| Unknown Object (File) | | Sun, Jun 7, 5:41 AM2026-06-07 05:41:39 (UTC+0) |
| Unknown Object (File) | | Sat, Jun 6, 11:56 PM2026-06-06 23:56:11 (UTC+0) |
| Unknown Object (File) | | Sat, Jun 6, 11:06 PM2026-06-06 23:06:35 (UTC+0) |
Summary Displays the Nova iconography when browser.nova.enabled is true.
Updates 87 existing browser theme icons with the following approach:
- wraps the existing (s) in a <g class="proton">
- appends the Nova redrawn icon's (s) in a <g class="nova">
- adds a block with rules to show only one group at a time
This is an unorthodox approach. It has several drawbacks:
- increases individual SVG size
- increases the time required to render each SVG
- viewing the SVGs in normal image tools will only show the Proton variant, which is confusing
However, I think this approach is better than alternatives.
- do not need to add new Nova icon files and CSS rules to use them conditionally
- SVG uses in XHTML and similar contexts doesn't require special handling
- this can be undone very easily after Nova is released, leaving only the Nova paths
- the SVG rendering performance impact is not large, and alternatives would still have non-zero performance impact
- total size of SVGs is not that much larger than if we added separate Nova icons
Event Timelinedao added inline comments. | browser/themes/shared/icons/firefox-view.svg |
| 25 | |
| 25 | context-fill is missing here. non-nova also uses context-stroke, do we still need that? |
| browser/themes/shared/icons/gift.svg |
| 24 ↗ | (On Diff #1280696) | |
Comment ActionsA number of updates here:
- The Acorn team updated their icon exporter to trim clip paths and references to them. I confirmed that there are no longer any in the Nova icons. There are some in the existing Proton icons, but I don't think I need to clean those up in this patch. They should be cleaned up when Nova icons are promoted and the Proton paths are deleted.
- the Acorn team uploaded closed-tabs-16 to the acorn-icons repo, so I was able to add it here
- I went through all of the icons that set fill/stroke/etc. on specific paths. In most cases, I was able to promote those attributes to the <svg> element, but there are some icons that need path-specific colors.
Through this process of going through all of the icons, I did encounter a few novel issues that hadn't been flagged by anyone yet. Mostly, these were issues where I mapped an inappropriate Acorn icon to the codebase. I think it's likely that there are still some errata in this patch stack, but I think they should be isolated issues rather than systematic ones.
However, there are some specific icons where I know there are issues:
add-circle-fill and subtract-circle-fill
The Proton versions of these icons draw a and then a on top. The Nova versions in acorn-icons draw a single describing the filled area around the + or -. That would mean the Nova version could only be used when the icon is supposed to have a transparent + or -.
Since there are existing uses for explicitly coloring the + or - (e.g. the application menu zoom controls), I manually updated the Nova version of this icons to draw a and then remove the circle drawing parts of the . This means the Nova versions in this patch diverge from the acorn-icons repo at this time. I'm talking with the icon designers about how they want to proceed, but I think in practical terms, we need these icons to work the same way as Proton.
bookmark-12 and pin-12
The Proton versions of these icons draw a and a . The practical purpose of this is to draw these icons as "badges" on top of favicons (Firefox View, URL bar, New Tab). When the stroke color is set to the background color of the UI surface, the badge gets a stroke that prevents the favicon colors from bleeding into the badge color.
This would not be easy for me to deal with manually, so this patch contains the current Nova version from acorn-icons. I believe these will need to be updated by the icon designers and then updated in the codebase in an upcoming patch. | browser/themes/shared/icons/firefox-view.svg |
| 25 | The proton icon uses on the clip path only. The Firefox View toolbarbutton doesn't have a stroke defined in its CSS rules, and setting one does not alter the display of the icon. I noticed this oddity ( setting on clip paths) on some Proton icons but it doesn't seem to affect anything.
In this case, I promoted the to the <svg> since it is appropriate for both nova and proton. It's also equivalent for the proton case. |
Comment Actions
add-circle-fill and subtract-circle-fill
The Proton versions of these icons draw a and then a on top. The Nova versions in acorn-icons draw a single describing the filled area around the + or -. That would mean the Nova version could only be used when the icon is supposed to have a transparent + or -.
Since there are existing uses for explicitly coloring the + or - (e.g. the application menu zoom controls), I manually updated the Nova version of this icons to draw a and then remove the circle drawing parts of the . This means the Nova versions in this patch diverge from the acorn-icons repo at this time. I'm talking with the icon designers about how they want to proceed, but I think in practical terms, we need these icons to work the same way as Proton.
Agreed. Please file a follow-up to keep track of this, if it doesn't get fully resolved here.
bookmark-12 and pin-12
The Proton versions of these icons draw a and a . The practical purpose of this is to draw these icons as "badges" on top of favicons (Firefox View, URL bar, New Tab). When the stroke color is set to the background color of the UI surface, the badge gets a stroke that prevents the favicon colors from bleeding into the badge color.
This would not be easy for me to deal with manually, so this patch contains the current Nova version from acorn-icons. I believe these will need to be updated by the icon designers and then updated in the codebase in an upcoming patch.
Are you going to file a follow-up bug on this?
Thanks! | browser/themes/shared/controlcenter/3rdpartycookies-blocked.svg |
| 17–18 | |
Comment Actions
Agreed. Please file a follow-up to keep track of this, if it doesn't get fully resolved here.
Are you going to file a follow-up bug on this?
I passed this information to Juliana and she will look at updating the acorn-icons desktop-transform pipeline to try to support this class of icons systematically. I filed bug 2043461 specifically for updating bookmark-12 and pin-12 since the Nova versions of those will be insufficient until those are reprocessed. This revision was automatically updated to reflect the committed changes. | Path | Size |
|---|
| | | 14 lines | | 13 lines | | 13 lines | | 13 lines | | | 14 lines | | | 14 lines | | 14 lines | | | 16 lines | | 13 lines | | | 16 lines | | 13 lines | | 13 lines | | 13 lines | | 18 lines | | 13 lines | | 15 lines | | 14 lines | | 15 lines | | 19 lines | | 13 lines | | 13 lines | | 13 lines | | 13 lines | | 14 lines | | 13 lines | | 14 lines | | 15 lines | | 13 lines | | 13 lines | | 13 lines | | 13 lines | | 17 lines | | 16 lines | | 13 lines | | 17 lines | | 18 lines | | 14 lines | | 14 lines | | 13 lines | | 13 lines | | 13 lines | | 13 lines | | 13 lines | | 15 lines | | 15 lines | | 16 lines | | 13 lines | | 14 lines | | 13 lines | | 14 lines | | 14 lines | | 17 lines | | 13 lines | | 13 lines | | 16 lines | | 13 lines | | | 13 lines | | 14 lines | | 13 lines | | 14 lines | | 14 lines | | 14 lines | | | 17 lines | | | 14 lines | | 14 lines | | 14 lines | | 13 lines | | 15 lines | | 14 lines | | 15 lines | | 14 lines | | 14 lines | | 13 lines | | 15 lines | | 15 lines | | 13 lines | | 14 lines | | 13 lines | | 15 lines | | 14 lines | | 14 lines | | 14 lines | | 14 lines | | 13 lines | | 19 lines | | 18 lines | | 17 lines |
| Commit | Tree | Parents | Author | Summary | Date |
|---|
| 44e7f3d4c7c3 | dcaea4ff32e7 | Stephen Thompson | Bug 2032240 - Firefox theme Nova icons r=desktop-theme-reviewers,dao (Show More…) |
browser/themes/shared/controlcenter/3rdpartycookies-blocked.svgbrowser/themes/shared/controlcenter/3rdpartycookies.svgbrowser/themes/shared/controlcenter/cryptominers.svgbrowser/themes/shared/controlcenter/tracking-protection.svgbrowser/themes/shared/downloads/downloads.svgbrowser/themes/shared/formautofill/icon-capture-address-fields.svgbrowser/themes/shared/formautofill/icon-capture-email-fields.svgbrowser/themes/shared/fxa/avatar-empty.svgbrowser/themes/shared/fxa/avatar.svgbrowser/themes/shared/icons/add-circle-fill.svgbrowser/themes/shared/icons/back.svgbrowser/themes/shared/icons/bookmark-12.svgbrowser/themes/shared/icons/bookmark-hollow.svgbrowser/themes/shared/icons/bookmark-star-on-tray.svgbrowser/themes/shared/icons/bookmark.svgbrowser/themes/shared/icons/canvas-blocked.svgbrowser/themes/shared/icons/canvas.svgbrowser/themes/shared/icons/fingerprint.svgbrowser/themes/shared/icons/firefox-view.svgbrowser/themes/shared/icons/flame.svgbrowser/themes/shared/icons/forward.svgbrowser/themes/shared/icons/fullscreen-exit.svgbrowser/themes/shared/icons/fullscreen.svgbrowser/themes/shared/icons/history.svgbrowser/themes/shared/icons/home.svgbrowser/themes/shared/icons/import.svgbrowser/themes/shared/icons/labs-16.svgbrowser/themes/shared/icons/library.svgbrowser/themes/shared/icons/login.svgbrowser/themes/shared/icons/menu-badged.svgbrowser/themes/shared/icons/menu.svgbrowser/themes/shared/icons/notification-fill-12.svgbrowser/themes/shared/icons/payment-methods-16.svgbrowser/themes/shared/icons/pin-12.svgbrowser/themes/shared/icons/pin.svgbrowser/themes/shared/icons/reader-mode.svgbrowser/themes/shared/icons/save.svgbrowser/themes/shared/icons/share.svgbrowser/themes/shared/icons/sidebar-collapsed-right.svgbrowser/themes/shared/icons/sidebar-collapsed.svgbrowser/themes/shared/icons/sidebar-expanded-right.svgbrowser/themes/shared/icons/sidebar-expanded.svgbrowser/themes/shared/icons/sort.svgbrowser/themes/shared/icons/split-view-left-16.svgbrowser/themes/shared/icons/split-view-right-16.svgbrowser/themes/shared/icons/subtract-circle-fill.svgbrowser/themes/shared/icons/sync.svgbrowser/themes/shared/icons/synced-tabs.svgbrowser/themes/shared/icons/tab.svgbrowser/themes/shared/icons/tabs.svgbrowser/themes/shared/icons/taskbar-tabs-add-tab.svgbrowser/themes/shared/icons/taskbar-tabs-move-tab.svgbrowser/themes/shared/icons/translations.svgbrowser/themes/shared/icons/trending.svgbrowser/themes/shared/icons/window-firefox.svgbrowser/themes/shared/icons/window.svgbrowser/themes/shared/identity-block/permissions.svgbrowser/themes/shared/identity-block/tracking-protection-disabled.svgbrowser/themes/shared/identity-block/tracking-protection.svgbrowser/themes/shared/identity-block/trust-icon-active.svgbrowser/themes/shared/identity-block/trust-icon-disabled.svgbrowser/themes/shared/identity-block/trust-icon-warning.svgbrowser/themes/shared/migration/success.svgbrowser/themes/shared/notification-icons/autoplay-media-blocked.svgbrowser/themes/shared/notification-icons/autoplay-media.svgbrowser/themes/shared/notification-icons/camera-blocked.svgbrowser/themes/shared/notification-icons/camera.svgbrowser/themes/shared/notification-icons/desktop-notification-blocked.svgbrowser/themes/shared/notification-icons/desktop-notification.svgbrowser/themes/shared/notification-icons/geo-blocked.svgbrowser/themes/shared/notification-icons/geo.svgbrowser/themes/shared/notification-icons/local-host-blocked.svgbrowser/themes/shared/notification-icons/local-host.svgbrowser/themes/shared/notification-icons/local-network-blocked.svgbrowser/themes/shared/notification-icons/local-network.svgbrowser/themes/shared/notification-icons/microphone-blocked.svgbrowser/themes/shared/notification-icons/microphone.svgbrowser/themes/shared/notification-icons/midi.svgbrowser/themes/shared/notification-icons/persistent-storage-blocked.svgbrowser/themes/shared/notification-icons/persistent-storage.svgbrowser/themes/shared/notification-icons/popup.svgbrowser/themes/shared/notification-icons/screen-blocked.svgbrowser/themes/shared/notification-icons/screen.svgbrowser/themes/shared/notification-icons/serial.svgbrowser/themes/shared/notification-icons/xr-blocked.svgbrowser/themes/shared/notification-icons/xr.svgbrowser/themes/shared/update-badge.svg |