1804762 - Spinner displayed during Search has borders

Status: VERIFIED FIXED

(DevTools :: Netmonitor, defect, P3)

Description

[Nicolas Chevobbe [:nchevobbe][PTO - back on October 21]]

Attachment: spinner icon with border

There's a thin border displayed on the icon which does not look great.
I'm seeing the same thing on the debugger one, I just filed this here since its easier to see the icon for a longer time in netmonitor :)

Comment 1

[Nicolas Chevobbe [:nchevobbe][PTO - back on October 21]]

looks like the mask image being used doesn't cover the whole element or something

https://searchfox.org/mozilla-central/rev/9423bbd90c59ef7739c8453c265d04d8cf07ce73/devtools/client/netmonitor/src/assets/styles/search.css#133

mask-image: url(chrome://devtools/content/debugger/images/loader.svg);

we may want to switch to an actual <img> and use -moz-context-properties to make it the right color

Comment 2

[Julian Descottes [:jdescottes]]

Note Bug 1787010 about the underlying webrender issue. But it would make sense to land a workaround to fix the issue.

Comment 3

[Nicolas Chevobbe [:nchevobbe][PTO - back on October 21]]

Attachment: Bug 1804762 - [devtools] Use `background-image` for search spinner icon in debugger and netmonitor. r=jdescottes.

We were using mask-image as a way to make the icon the color
we wanted, but we can use -moz-context-properties for that instead.
Not using mask-image removes the glitchy thin border that was visible (see Bug 1787010).

Comment 4

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/286433649ab4
[devtools] Use `background-image` for search spinner icon in debugger and netmonitor. r=jdescottes.

Comment 5

[Narcis Beleuzu [:NarcisB]]

https://hg.mozilla.org/mozilla-central/rev/286433649ab4

Comment 6

[Simona Badau, Desktop QA]

Reproduced on Nightly 110.0a1 (Build ID: 20221230213139).
Verified as fixed on Firefox 110.0b7(build ID: 20230129190147) and Nightly 111.0a1(build ID: 20230131093335) on macOS 11.7, Ubuntu 20.04 and Windows 10.