Regression: The border of the new back/Forward indicator looks to too pixelated/not smooth

Nightly 111.0a1 (2023-01-23) (64-Bit)
macOS 12.6.2

1.) Open a new Tab
2.) Visit a page in that tab
3.) Swipe back with the Trackpad to the previous page

Actual: the white outline looks too pixelated/not smooth.

Expected: A nice and smooth border.

This is a regression with the new new blue back/forward indicators in Nightly.

A screenshot is attached.

Mozregression brings me to bug 1799563.

Set release status flags based on info from the regressing bug 1799563

:hiro, since you are the author of the regressor, bug 1799563, could you take a look? Also, could you set the severity field?

For more information, please visit auto_nag documentation.

Mehmet, would you mind trying this binary to see whether it's still pixelated or not? You can download mac's binary from the target.dmg link in the "Artifacts and Debugging Tools" pane. I don't expect too much it fixes the pixelated case though.

(In reply to Hiroyuki Ikezoe (:hiro) from comment #3)

Mehmet, would you mind trying this binary to see whether it's still pixelated or not? You can download mac's binary from the target.dmg link in the "Artifacts and Debugging Tools" pane. I don't expect too much it fixes the pixelated case though.

Hi Hiroyuki, I think it was better before. Now the border is too bright and it highlights much more the pixels (please see the attachment). If it is too hard or not worth to fix, I think it should stay then as it is with the current more greyish border.

Thanks :)

Hmm, then it seems like it's just a matter of the size.

Can you please open this attachment in Firefox without any zooming? I expect it's still pixelated.

(In reply to Hiroyuki Ikezoe (:hiro) from comment #5)

Created attachment 9313969 [details]
The swipe-to-nav icon

Hmm, then it seems like it's just a matter of the size.

Can you please open this attachment in Firefox without any zooming? I expect it's still pixelated.

It looks good?! Please see the screenshot without any zooming.

I can't say it looks better. :/ (I did look it with zooming, since pngs aren't scaled by zooming.)

Is this better?

(In reply to Hiroyuki Ikezoe (:hiro) from comment #8)

Created attachment 9314133 [details]
More fine-grained icon

Is this better?

Hmm, the previous icon with the more bolder white border from comment 5 looked better I think. The rounding is more smoother compared to the new "more fine-grained". The new "more fine-grained" looks still too pixelated. Attached side-by-side attached to a window border.

Josh, is it okay for you to increase the semi-circle's line width from 0.5 to 1.0? It looks like it's much better in terms of pixelation.

Attaching SVG is the width=1.0 icon. It was originally exported as SVG from an icon in the spec doc you wrote, and I changed the width from 0.5. So maybe it was just caused by the Figma exporting tool.

Hi,

Yes I am on board, it definitely looks better at 1.0

Thank you!

Thank you Josh!

Also use a more fine-grained SVG.

:hiro this is the final week of 111 nightly, 111 goes to beta next week.
Do you plan on getting this reviewed and landing in central this week?

Yes, I'd hope someone in desktop-theme-reviewers reviews this change within the time frame.

From a review comment;

! In D168009#5579660, @dao wrote:
What's up with this huge <path>? Looks like it's almost setting pixels rather than leveraging the strength of vector graphics? The fact that this is inlined into the browser window markup makes this seem particularly unsound. From just looking at what kind of image we're trying to create here, can't we get there using basic shapes like circles and lines?

UX folks are usually pretty good at creating good vector graphics. Could you please reach out to get some help with this?

Josh, can you please give us another version of the swipe-to-navigation icon SVG file with basic shapes for Mac?

Honestly with my very limited SVG knowledge, it would be a bit tricky since it's not full circle.

Connected with Tati - another designer who is more proficient with visual work. She was able to pull the asset into illustrator and fine tune it and export from there. Let me know if this works please

Thank you Josh for the quick update! I wonder why the new SVG size got shrunk 1px, but it's not a big deal.

https://hg.mozilla.org/mozilla-central/rev/82b41f86e346

Hello, I tested it in latest Nightly 112.0a1 (2023-02-24) (64-Bit) on Retina Mac. The border still looks too pixelated :(

On a non-retina Mac it looks more worse :(

Maybe the indicator is too small and should be larger?

BTW: What was wrong with the good large grey indicator? Why it has to be replaced? The new indicator is a downgrade I think :(

A screenshot is attached. Thanks for checking.