VOOZH about

URL: https://phabricator.services.mozilla.com/D301961

⇱ ⚙ D301961 Bug 2032240 - Firefox theme Nova icons r=#desktop-theme-reviewers!


Bug 2032240 - Firefox theme Nova icons r=#desktop-theme-reviewers!
ClosedPublic

Authored by sthompson on Fri, May 22, 2:11 AM.
Referenced Files
Unknown Object (File)
Tue, Jun 16, 9:54 PM
Unknown Object (File)
Tue, Jun 16, 9:54 PM
Unknown Object (File)
Tue, Jun 16, 9:54 PM
Unknown Object (File)
Mon, Jun 8, 12:52 AM
Unknown Object (File)
Sun, Jun 7, 10:13 AM
Unknown Object (File)
Sun, Jun 7, 5:41 AM
Unknown Object (File)
Sat, Jun 6, 11:56 PM
Unknown Object (File)
Sat, Jun 6, 11:06 PM
Subscribers

Details

Summary

Displays the Nova iconography when browser.nova.enabled is true.

Updates 87 existing browser theme icons with the following approach:

  1. wraps the existing (s) in a <g class="proton">
  2. appends the Nova redrawn icon's (s) in a <g class="nova">
  3. adds a block with rules to show only one group at a time

This is an unorthodox approach. It has several drawbacks:

  1. increases individual SVG size
  2. increases the time required to render each SVG
  3. 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.

  1. do not need to add new Nova icon files and CSS rules to use them conditionally
  2. SVG uses in XHTML and similar contexts doesn't require special handling
  3. this can be undone very easily after Nova is released, leaving only the Nova paths
  4. the SVG rendering performance impact is not large, and alternatives would still have non-zero performance impact
  5. total size of SVGs is not that much larger than if we added separate Nova icons

Diff Detail

Event Timeline

phab-bot changed the visibility from "Custom Policy" to "Public (No Login Required)".
phab-bot changed the edit policy from "Custom Policy" to "Restricted Project (Project)".
phab-bot removed a project: secure-revision.
dao requested changes to this revision.Fri, May 22, 6:00 AM
dao added a subscriber: dao.
dao added inline comments.
browser/themes/shared/icons/firefox-view.svg
25

this seems bogus

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)

ditto

This revision now requires changes to proceed.Fri, May 22, 6:00 AM
sthompson updated this revision to Diff 1284961.
Comment Actions

A number of updates here:

  1. 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.
  2. the Acorn team uploaded closed-tabs-16 to the acorn-icons repo, so I was able to add it here
  3. 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

See https://phabricator.services.mozilla.com/D301960#inline-1638063
(Obviously this applies to all icons, not just this one.)

This revision is now accepted and ready to land.Thu, May 28, 11:40 AM
sthompson edited the summary of this revision. (Show Details)
sthompson marked an inline comment as done.
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.

Revision Contents

PathSize
browser/
themes/
shared/
controlcenter/
14 lines
13 lines
13 lines
13 lines
downloads/
14 lines
formautofill/
14 lines
14 lines
fxa/
16 lines
13 lines
icons/
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
identity-block/
13 lines
14 lines
13 lines
14 lines
14 lines
14 lines
migration/
17 lines
notification-icons/
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
CommitTreeParentsAuthorSummaryDate
44e7f3d4c7c3dcaea4ff32e7Stephen Thompson
Bug 2032240 - Firefox theme Nova icons r=desktop-theme-reviewers,dao (Show More…)

Diff 1286249

browser/themes/shared/controlcenter/3rdpartycookies-blocked.svg

Loading...

browser/themes/shared/controlcenter/3rdpartycookies.svg

Loading...

browser/themes/shared/controlcenter/cryptominers.svg

Loading...

browser/themes/shared/controlcenter/tracking-protection.svg

Loading...

browser/themes/shared/downloads/downloads.svg

Loading...

browser/themes/shared/formautofill/icon-capture-address-fields.svg

Loading...

browser/themes/shared/formautofill/icon-capture-email-fields.svg

Loading...

browser/themes/shared/fxa/avatar-empty.svg

Loading...

browser/themes/shared/fxa/avatar.svg

Loading...

browser/themes/shared/icons/add-circle-fill.svg

Loading...

browser/themes/shared/icons/back.svg

Loading...

browser/themes/shared/icons/bookmark-12.svg

Loading...

browser/themes/shared/icons/bookmark-hollow.svg

Loading...

browser/themes/shared/icons/bookmark-star-on-tray.svg

Loading...

browser/themes/shared/icons/bookmark.svg

Loading...

browser/themes/shared/icons/canvas-blocked.svg

Loading...

browser/themes/shared/icons/canvas.svg

Loading...

browser/themes/shared/icons/fingerprint.svg

Loading...

browser/themes/shared/icons/firefox-view.svg

Loading...

browser/themes/shared/icons/flame.svg

Loading...

browser/themes/shared/icons/forward.svg

Loading...

browser/themes/shared/icons/fullscreen-exit.svg

Loading...

browser/themes/shared/icons/fullscreen.svg

Loading...

browser/themes/shared/icons/history.svg

Loading...

browser/themes/shared/icons/home.svg

Loading...

browser/themes/shared/icons/import.svg

Loading...

browser/themes/shared/icons/labs-16.svg

Loading...

browser/themes/shared/icons/library.svg

Loading...

browser/themes/shared/icons/login.svg

Loading...

browser/themes/shared/icons/menu-badged.svg

Loading...

browser/themes/shared/icons/menu.svg

Loading...

browser/themes/shared/icons/notification-fill-12.svg

Loading...

browser/themes/shared/icons/payment-methods-16.svg

Loading...

browser/themes/shared/icons/pin-12.svg

Loading...

browser/themes/shared/icons/pin.svg

Loading...

browser/themes/shared/icons/reader-mode.svg

Loading...

browser/themes/shared/icons/save.svg

Loading...

browser/themes/shared/icons/share.svg

Loading...

browser/themes/shared/icons/sidebar-collapsed-right.svg

Loading...

browser/themes/shared/icons/sidebar-collapsed.svg

Loading...

browser/themes/shared/icons/sidebar-expanded-right.svg

Loading...

browser/themes/shared/icons/sidebar-expanded.svg

Loading...

browser/themes/shared/icons/sort.svg

Loading...

browser/themes/shared/icons/split-view-left-16.svg

Loading...

browser/themes/shared/icons/split-view-right-16.svg

Loading...

browser/themes/shared/icons/subtract-circle-fill.svg

Loading...

browser/themes/shared/icons/sync.svg

Loading...

browser/themes/shared/icons/synced-tabs.svg

Loading...

browser/themes/shared/icons/tab.svg

Loading...

browser/themes/shared/icons/tabs.svg

Loading...

browser/themes/shared/icons/taskbar-tabs-add-tab.svg

Loading...

browser/themes/shared/icons/taskbar-tabs-move-tab.svg

Loading...

browser/themes/shared/icons/translations.svg

Loading...

browser/themes/shared/icons/trending.svg

Loading...

browser/themes/shared/icons/window-firefox.svg

Loading...

browser/themes/shared/icons/window.svg

Loading...

browser/themes/shared/identity-block/permissions.svg

Loading...

browser/themes/shared/identity-block/tracking-protection-disabled.svg

Loading...

browser/themes/shared/identity-block/tracking-protection.svg

Loading...

browser/themes/shared/identity-block/trust-icon-active.svg

Loading...

browser/themes/shared/identity-block/trust-icon-disabled.svg

Loading...

browser/themes/shared/identity-block/trust-icon-warning.svg

Loading...

browser/themes/shared/migration/success.svg

Loading...

browser/themes/shared/notification-icons/autoplay-media-blocked.svg

Loading...

browser/themes/shared/notification-icons/autoplay-media.svg

Loading...

browser/themes/shared/notification-icons/camera-blocked.svg

Loading...

browser/themes/shared/notification-icons/camera.svg

Loading...

browser/themes/shared/notification-icons/desktop-notification-blocked.svg

Loading...

browser/themes/shared/notification-icons/desktop-notification.svg

Loading...

browser/themes/shared/notification-icons/geo-blocked.svg

Loading...

browser/themes/shared/notification-icons/geo.svg

Loading...

browser/themes/shared/notification-icons/local-host-blocked.svg

Loading...

browser/themes/shared/notification-icons/local-host.svg

Loading...

browser/themes/shared/notification-icons/local-network-blocked.svg

Loading...

browser/themes/shared/notification-icons/local-network.svg

Loading...

browser/themes/shared/notification-icons/microphone-blocked.svg

Loading...

browser/themes/shared/notification-icons/microphone.svg

Loading...

browser/themes/shared/notification-icons/midi.svg

Loading...

browser/themes/shared/notification-icons/persistent-storage-blocked.svg

Loading...

browser/themes/shared/notification-icons/persistent-storage.svg

Loading...

browser/themes/shared/notification-icons/popup.svg

Loading...

browser/themes/shared/notification-icons/screen-blocked.svg

Loading...

browser/themes/shared/notification-icons/screen.svg

Loading...

browser/themes/shared/notification-icons/serial.svg

Loading...

browser/themes/shared/notification-icons/xr-blocked.svg

Loading...

browser/themes/shared/notification-icons/xr.svg

Loading...

browser/themes/shared/update-badge.svg

Loading...