1348350 - Use a consistent style for focus rings in OSX

Status: NEW

(Firefox :: Theme, enhancement)

Description

[Sam Foster [:sfoster] (he/him)]

There are a few remaining focus treatments in the OSX theme that are inconsistent. We should use the var(--focus-ring-box-shadow) for uniform visual and code style unless there are specific reasons not to. 

A search for moz-mac-focusring is a place to start looking: https://dxr.mozilla.org/mozilla-central/search?q=moz-mac-focusring

Comment 1

[Sam Foster [:sfoster] (he/him)]

I see only one box-shadow in that list: https://dxr.mozilla.org/mozilla-central/source/toolkit/themes/osx/global/notification.css#96

I'm looking back at https://bugzilla.mozilla.org/show_bug.cgi?id=1346280#c7 - did you spot anything else? There are several border/outline properties which maybe should be using box-shadow instead?

Comment 2

[:Gijs (away/busy until Mar 10)]

(In reply to Sam Foster [:sfoster] from comment #1)
> I see only one box-shadow in that list:
> https://dxr.mozilla.org/mozilla-central/source/toolkit/themes/osx/global/
> notification.css#96
> 
> I'm looking back at https://bugzilla.mozilla.org/show_bug.cgi?id=1346280#c7
> - did you spot anything else? There are several border/outline properties
> which maybe should be using box-shadow instead?

Yeah, I think some the outlines on buttons probably want to be using box-shadow. Ditto for the synced tabs sidebar search textbox. Otherwise it looks like the borders are already working in concert with the box shadow, in a manner that's effectively correct, I think?

One other thing I realized is that we can now remove the preprocessor defines and put the styling directly in the CSS variables. :-)