Fix outline: auto in user agent style sheets - #1740

Where does this number 3 come from? How was it determined? I think we need a comment, not just an unexplained constant. This was already true in the old code.

Is there a good reason for the number to be in the header rather than in the .cpp file?

I believe this is matching +[UIFocusRingStyle borderThickness], which we use in GraphicsContextCG::drawFocusRing.

It would be nice to have platformFocusRingWidth and drawFocusRing call into the same method.

Where does this number 5 come from? How was it determined? I think we need a comment, not just an unexplained constant. This was already true in the old code.

Is there a good reason for the number to be in the header rather than in the .cpp file?

Why is this number 5 a new default for all themes other than iOS? The change log and bug title both talk about macOS, but we’re changing it here everywhere except for iOS. I presume there is a good reason for this, but I don’t know what it is.

Why does this need to be determined at runtime and use a virtual function? I don’t think I understand why some things in RenderTheme.h are simply constants or done with #if and others are based on virtual functions and derived classes at runtime. Do we actually need the same binary to support multiple themes? Seems like this is a leftover of an unusual past choice and it would be nice to move in the right direction.

Both of these values were previously in html.css, I just reflected those. Let me see if I can find out more about the rationale

I think macOS should also be 3, matching the value in AppKit. Sadly that constant isn't exposed like the UIKit one.

I believe the 5px from before was because of the outline-offset of -2px on macOS only, which is now being removed.

I have a dim memory of the reason for the -2px that might be helpful.

A long time ago, the way Mac focus rings were rendered, there was a part of the ring that visually didn’t look like it was part of the ring, but was a faint trailing off bit of it, kind of like a barely visible aura or light shadow. Conceptually the ring’s thickness was only 3px, but in terms of invalidation and repainting there was some effect outside the 3px, I think it extended 2px further. We needed the web engine to know about this so it could properly paint the rings when they appeared and disappeared without leaving behind residue, but it didn’t make sense to represent this as part of the outline thickness. At the time, with a less sophisticated understand of CSS than the rest of you, I thought it was important to both know where the visual extent of the outline ended (3px out) and where the complete rendering extent ended (2px further out). I seem to recall that the rectangle you would pass in needed to be outset by the 3px, but the actual drawing would go 2px further out.

I don’t know if this memory is correct, but if so, has this changed? If it has, when? If not, do we have a new solution to this old problem? Or another way of asking this is: What is the correct way to express this kind of thing in our CSS and rendering machinery?

I can see how this made sense with the slight 3D border we had pre-liquid glass, but with liquid glass, the border is no longer semi-transparent, so the focusring no longer shows underneath:

I checked using the digital color meter, and the border-color is identical with or without the focusring.

I'll change the focusring to be 3px instead.