Web Inspector: focus outline of a search field should have a radius

• Component: Web Inspector
• Status: RESOLVED FIXED

[Nikita Vasilyev]

Created attachment 253719 [details]
Animated GIF of the problem

https://bugs.webkit.org/show_bug.cgi?id=20807 would solve our problem, but I don’t see any progress there.

[Radar WebKit Bug Importer]

<rdar://problem/21109008>

[Nikita Vasilyev]

Created attachment 253721 [details]
[Image] Native input has rounded outline

There are at least two ways of fixing this:

1. Use native <input type=search> as it does have a rounded outline.

Unfortunately, changing it’s hight via CSS isn't possible with the hight property – only with font-size. Also, we can’t change border colors.

[Nikita Vasilyev]

2. Use box-shadow and make it look like outline. http://stackoverflow.com/a/14896315/16185

[Nikita Vasilyev]

Created attachment 253731 [details]
Patch

[Nikita Vasilyev]

Created attachment 253733 [details]
[Animated GIF] With the patch applied

[Timothy Hatcher]

Comment on attachment 253731 [details]
Patch

View in context: https://bugs.webkit.org/attachment.cgi?id=253731&action=review

> Source/WebInspectorUI/UserInterface/Views/Toolbar.css:121
> +    box-shadow: rgba(0, 0, 0, 0.15) 0 1px 0, 0 0 0 7px hsla(211, 96%, 48%, 0);

I think the system animates from a much larger size than 7px. Maybe even 15px.

[Nikita Vasilyev]

Created attachment 253740 [details]
[Image] Native outline radius

(In reply to comment #6)
> Comment on attachment 253731 [details]
> Patch
> 
> View in context:
> https://bugs.webkit.org/attachment.cgi?id=253731&action=review
> 
> > Source/WebInspectorUI/UserInterface/Views/Toolbar.css:121
> > +    box-shadow: rgba(0, 0, 0, 0.15) 0 1px 0, 0 0 0 7px hsla(211, 96%, 48%, 0);
> 
> I think the system animates from a much larger size than 7px. Maybe even
> 15px.

I measured it, it’s 24px.

However, in Web Inspector I have two constrains:

1. box-shadow can be clipped by a parent element with overflow hidden. In our case it’s Web Inspector toolbar.

2. CSS transition/animations don't allow animating box shadow color separately from its radius, which needs to be done to match the native behavior.

[Nikita Vasilyev]

(In reply to comment #7)
> Created attachment 253740 [details]
> [Image] Native outline radius
> 
> (In reply to comment #6)
> 2. CSS transition/animations don't allow animating box shadow color
> separately from its radius, which needs to be done to match the native
> behavior.

To clarify, I need to use two different timing function for box shadow color and box shadow spread radius, which isn’t possible.

[Timothy Hatcher]

Comment on attachment 253731 [details]
Patch

Okay, makes sense. This is clearly better than before.

[WebKit Commit Bot]

Comment on attachment 253731 [details]
Patch

Clearing flags on attachment: 253731

Committed r184877: <http://trac.webkit.org/changeset/184877>

[WebKit Commit Bot]

All reviewed patches have been landed.  Closing bug.