1791899 - New macOS icon is somewhat out-of-place

Status: RESOLVED FIXED

(Firefox :: Shell Integration, defect)

Description

[Sam Johnson]

Attachment: firefox-icon.png

Bug 1784524 added some very nice new icons for macOS Firefox, however, they have some issues which make the icons somewhat out-of-place next to other icons in the same style:

1. The icon is missing a shadow, which all current macOS icons have
2. The "rounded rectangle" portion of the icon is incorrectly sized at various icon sizes. Unfortunately, simply scaling the image across different icon sizes is insufficient, since the margins around the "rounded rectangle" portion of the icon are different depending on the size. As a result, the Firefox icon looks very small next to other icons.

One way around these issues is to use the official Apple icon templates.

Comment 1

[[e-mail] (:bhearsum)]

Hi Sam, thanks for the report. Just to clarify one point:

Unfortunately, simply scaling the image across different icon sizes is insufficient, since the margins around the "rounded rectangle" portion of the icon are different depending on the size.

You're saying that the downscaling we did from the largest icon is inappropriate, and each icon needs to be crafted specially?

A couple of other questions as well:

• Can you attach a higher resolution screenshot? It's hard to see what you're talking about in the one you provided
• Which icon sizes specifically are a problem?

In the meantime, I'll forward this to our UX people.

Comment 2

[Sam Johnson]

Attachment: firefox-16.png

(In reply to [e-mail] (:bhearsum) from comment #1)

You're saying that the downscaling we did from the largest icon is inappropriate, and each icon needs to be crafted specially?

A couple of other questions as well:

• Can you attach a higher resolution screenshot? It's hard to see what you're talking about in the one you provided
• Which icon sizes specifically are a problem?

Once you reach a certain size (which seems to be 64x64), they are consistent, but sizes below that will likely need special treatment.

I've attached screenshots showing the issue at 16px, 24px, 32px, and 48px. Once you hit 64px, the Firefox icon size is correct, though not ending on a pixel boundary like the system icons. I've added that as well for good measure.

I only have a non-retina display, so apologies for the low resolution. I've pixel-doubled the attachments so that it is easier to see.

Comment 3

[Sam Johnson]

Attachment: firefox-24.png

Comment 4

[Sam Johnson]

Attachment: firefox-32.png

Comment 5

[Sam Johnson]

Attachment: firefox-48.png

Comment 6

[Sam Johnson]

Attachment: firefox-64.png

Comment 7

[Sam Johnson]

When I opened the above system app icons in Preview, there appear to be these 4 sizes the icons are rendered at: 16px, 32px, 128px, and 256px. I presume the sizes between those are scaled from the "next highest" size by the system (so you may even be able to get away with a smaller file).

Comment 8

[Christian Apolloni]

Attachment: Firefox dock icon seems smaller due to lack of shadow highlight

At least the missing shadow is an issue in 106.0b3 too. In some color combinations the icon in the dock appears much smaller than the other "standard" icons due to the dark square blending with the background. The shadow highlight should be present to prevent this from happening.

Comment 9

[[e-mail] (:bhearsum)]

(In reply to Christian Apolloni from comment #8)

Created attachment 9296303 [details]
Firefox dock icon seems smaller due to lack of shadow highlight

At least the missing shadow is an issue in 106.0b3 too. In some color combinations the icon in the dock appears much smaller than the other "standard" icons due to the dark square blending with the background. The shadow highlight should be present to prevent this from happening.

Thanks -- we've got a fix coming for the shadows (most likely this week). We're waiting to see if we're making additional changes for https://bugzilla.mozilla.org/show_bug.cgi?id=1792247 before landing it.

Comment 10

[[e-mail] (:bhearsum)]

I just prepared a build with a potential replacement icon. It can be found here if anyone wants to take a look.

Comment 11

[[e-mail] (:bhearsum)]

Attachment: Bug 1791899: updating mac icon documentation r?nalexander!

Two things that we discovered after the initial update:

1. Fix the list of resolutions/DPIs needed
2. Update to the reflect the fact that each size must be manually crafted

Comment 12

[[e-mail] (:bhearsum)]

Attachment: Bug 1791899: update mac icons, round two r?nalexander!

Additional changes based on community feedback and UX iteration

Depends on D158422

Comment 13

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/42d66cbe3a8f
updating mac icon documentation r=nalexander
https://hg.mozilla.org/integration/autoland/rev/a9c80040b640
update mac icons, round two r=nalexander

Comment 14

[Sandor Molnar[:smolnar]]

https://hg.mozilla.org/mozilla-central/rev/42d66cbe3a8f
https://hg.mozilla.org/mozilla-central/rev/a9c80040b640

Comment 15

[[e-mail] (:bhearsum)]

Attachment: Bug 1791899: macOS icons, round 3 r?nalexander!

Comment 16

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/b4d15688cff7
macOS icons, round 3 r=nalexander

Comment 17

[Norisz Fay [:noriszfay]]

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

Comment 18

[BugBot [:suhaib / :marco/ :calixte]]

A patch has been attached on this bug, which was already closed. Filing a separate bug will ensure better tracking. If this was not by mistake and further action is needed, please alert the appropriate party. (Or: if the patch doesn't change behavior -- e.g. landing a test case, or fixing a typo -- then feel free to disregard this message)

Comment 19

[[e-mail] (:bhearsum)]

Comment on attachment 9297112 [details]
Bug 1791899: macOS icons, round 3 r?nalexander!

Beta/Release Uplift Approval Request

• User impact if declined: Users will have less than ideal macOS icons, and will be subjected to another icon change in 107.
• Is this code covered by automated tests?: No
• Has the fix been verified in Nightly?: No
• Needs manual test from QE?: No
• If yes, steps to reproduce:
• List of other uplifts needed: None
• Risk to taking this patch: Low
• Why is the change risky/not risky? (and alternatives if risky): This is a branding-only change, and only touches icon files

Side note: The earlier attachment with new icons can be ignored, even though it already landed on Nightly. This patch updates all of the files it touched, so there's no reason to uplift both.

• String changes made/needed: no
• Is Android affected?: No

Comment 20

[Pascal Chevrel:pascalc (PTO until April 26)]

Comment on attachment 9297112 [details]
Bug 1791899: macOS icons, round 3 r?nalexander!

Approved for 106.0b9, I am also uplifting the previous revisions 42d66cbe3a8f+a9c80040b640 as the requested uplift is on top of those. Thanks.

Comment 21

[Pascal Chevrel:pascalc (PTO until April 26)]

https://hg.mozilla.org/releases/mozilla-beta/rev/ddf6e58bf9a7
https://hg.mozilla.org/releases/mozilla-beta/rev/69ee37943606
https://hg.mozilla.org/releases/mozilla-beta/rev/05164e090c92

Comment 22

[[e-mail] (:bhearsum)]

Attachment: Bug 1791899: macOS icons, round 4 r?nalexander!

Comment 23

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/d5d7b2e1a50e
macOS icons, round 4 r=nalexander

Comment 24

[[e-mail] (:bhearsum)]

Comment on attachment 9297466 [details]
Bug 1791899: macOS icons, round 4 r?nalexander!

Beta/Release Uplift Approval Request

• User impact if declined:
• Is this code covered by automated tests?: Yes
• Has the fix been verified in Nightly?: Yes
• Needs manual test from QE?: Yes
• If yes, steps to reproduce:
• List of other uplifts needed: None
• Risk to taking this patch: Low
• Why is the change risky/not risky? (and alternatives if risky): (sorry, this was meant for https://bugzilla.mozilla.org/show_bug.cgi?id=1793993 but I bungled up the commit message)
• String changes made/needed:
• Is Android affected?: Yes

Comment 27

[Pascal Chevrel:pascalc (PTO until April 26)]

Comment on attachment 9297466 [details]
Bug 1791899: macOS icons, round 4 r?nalexander!

Approved for the last beta.

Comment 28

[Pascal Chevrel:pascalc (PTO until April 26)]

https://hg.mozilla.org/releases/mozilla-beta/rev/ff4671ebec70

Comment 29

[Marian-Vasile Laza]

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

Comment 30

[Alexandru Trif, Desktop QA [:atrif]]

Attachment: combine_images (1).jpg

Hello! Looked over this today on macOS 11.5.2 with Firefox 106.0b9 and Firefox 107.0a1 (20221009212852) and these are the results:

• verified that Firefox icons inside the Application folder are matching other macOS icons with different icon sizes (see attached screenshot)
• verified that the Firefox logo size has been enlarged inside the application folder (see attached screenshot)
• verified that dock logo size has been enlarged with the white and dark theme (see attached screenshot)
• verified that the Firefox icon is displayed as expected inside Application Menu while the icons are shown in a list (see attached screenshot)

I have also attached a screenshot with 16/ 24/ 32/ 48 and 64 icon sizes and Doc icons on white and dark themes. Is there anything else that we should test here? Thank you in advance!

Comment 31

[Christian Apolloni]

The new dock icon still appears smaller than other dock icons with Dark Mode enabled, since the rounded square still blends with the dark Dock. This can be seen in #30 too.

I assume this is an inherent issue in the current dock icon design which cannot be realistically fixed by enlarging the logo inside the rounded square and can only be fixed by re-designing the icon to ensure the rounded square stands out more when used against a dark dock.

Comment 32

[Acasandrei Beatrice (needinfo me)]

Perfherder has detected a build_metrics performance regression and Bug 1791899 or Bug 1791757 might be the cause of the performance regression.
Do you think one of the mentioned patches are the probable cause of the following regression?

Regressions:

Ratio	Test	Platform	Options	Absolute values (old vs new)
0.27%	installer size	osx-aarch64-shippable	aarch64 nightly	73,820,957.00 -> 74,017,048.83
0.27%	installer size	osx-aarch64-shippable	aarch64 nightly	73,799,229.92 -> 74,001,870.92

Comment 33

[[e-mail] (:bhearsum)]

Redirecting both of these questions to UX

(In reply to Alexandru Trif, QA [:atrif] from comment #30)

Created attachment 9297784 [details]
combine_images (1).jpg

Hello! Looked over this today on macOS 11.5.2 with Firefox 106.0b9 and Firefox 107.0a1 (20221009212852) and these are the results:

• verified that Firefox icons inside the Application folder are matching other macOS icons with different icon sizes (see attached screenshot)
• verified that the Firefox logo size has been enlarged inside the application folder (see attached screenshot)
• verified that dock logo size has been enlarged with the white and dark theme (see attached screenshot)
• verified that the Firefox icon is displayed as expected inside Application Menu while the icons are shown in a list (see attached screenshot)

I have also attached a screenshot with 16/ 24/ 32/ 48 and 64 icon sizes and Doc icons on white and dark themes. Is there anything else that we should test here? Thank you in advance!

(In reply to Christian Apolloni from comment #31)

The new dock icon still appears smaller than other dock icons with Dark Mode enabled, since the rounded square still blends with the dark Dock. This can be seen in #30 too.

I assume this is an inherent issue in the current dock icon design which cannot be realistically fixed by enlarging the logo inside the rounded square and can only be fixed by re-designing the icon to ensure the rounded square stands out more when used against a dark dock.

Comment 34

[Acasandrei Beatrice (needinfo me)]

(In reply to Acasandrei Beatrice (needinfo me) from comment #32)

Perfherder has detected a build_metrics performance regression and Bug 1791899 or Bug 1791757 might be the cause of the performance regression.
Do you think one of the mentioned patches are the probable cause of the following regression?

Regressions:

Ratio	Test	Platform	Options	Absolute values (old vs new)
0.27%	installer size	osx-aarch64-shippable	aarch64 nightly	73,820,957.00 -> 74,017,048.83
0.27%	installer size	osx-aarch64-shippable	aarch64 nightly	73,799,229.92 -> 74,001,870.92

Comment 35

[[e-mail] (:bhearsum)]

(In reply to Acasandrei Beatrice (needinfo me) from comment #34)

(In reply to Acasandrei Beatrice (needinfo me) from comment #32)

Perfherder has detected a build_metrics performance regression and Bug 1791899 or Bug 1791757 might be the cause of the performance regression.
Do you think one of the mentioned patches are the probable cause of the following regression?

Regressions:

Ratio	Test	Platform	Options	Absolute values (old vs new)
0.27%	installer size	osx-aarch64-shippable	aarch64 nightly	73,820,957.00 -> 74,017,048.83
0.27%	installer size	osx-aarch64-shippable	aarch64 nightly	73,799,229.92 -> 74,001,870.92

Yes, this bug probably caused it, and we ought not to be concerned about it.

Comment 36

[Acasandrei Beatrice (needinfo me)]

(In reply to Pulsebot from comment #16)

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/b4d15688cff7
macOS icons, round 3 r=nalexander

== Change summary for alert #35699 (as of Wed, 19 Oct 2022 05:41:21 GMT) ==

Regressions:

Ratio	Test	Platform	Options	Absolute values (old vs new)
0.15%	installer size	osx-shippable	nightly	85,147,123.79 -> 85,278,659.42
0.08%	installer size	osx-shippable	nightly	85,162,623.50 -> 85,234,723.58

For up to date results, see: https://treeherder.mozilla.org/perfherder/alerts?id=35699