1294480 - inspector-searchbox focus behavior is gone

Status: VERIFIED FIXED

(DevTools :: Inspector, defect, P1)

Description

[magicp]

Attachment: inspector-searchbox-focus-behavior.png

User Agent: Mozilla/5.0 (Windows NT 10.0; WOW64; rv:51.0) Gecko/20100101 Firefox/51.0
Build ID: 20160811030201

Steps to reproduce:

1. Start Nightly
2. Open DevTools > Inspector
3. Focus inspector-searchbox


Actual results:

inspector-searchbox focus behavior is gone.


Expected results:

Fix focus-border and focus box shadow.

Comment 1

[magicp]

Regression range:
https://hg.mozilla.org/integration/fx-team/pushloghtml?fromchange=c9bbdb627b7804fee47aa6a6708647e6e589d09c&tochange=3269dd1a824d1b42cb021d1fb6858885179940b0

Comment 2

[[e-mail]]

I can see the blue focus-border on linux(ubuntu 14.04) though, will check on Mac later

Comment 3

[magicp]

(In reply to Fred Lin [:gasolin] from comment #2)
> I can see the blue focus-border on linux(ubuntu 14.04) though, will check on
> Mac later

Hi Fred, you are right. I have changed platform to Windows.

Comment 4

[[e-mail]]

I can see the blue focus-border on Mac as well, so it only effect Windows :-/

Comment 6

[Gabriel Luong [:gl] (ΦωΦ)]

I would assume the same fix here would also apply to Bug 1295511

Comment 7

[[e-mail]]

I borrowed a windows NB and found (by put a `<input/>` tag in jsfiddle)

* xul <textbox> selection have a blue focus-border
* alas normal html <input/> selection does not have a blue focus-border!


On other platform these 2 elements looks like the same. (both have a blue focus-border)



I'd like ask UX team if we'd like unify the blue focus-border effect on `xul <textbox>` and `normal html <input/>` on windows

Morpheus, since you are working on datetime input element, could you help find the right person to decide if we'd like unify or keep html <input> selection effect as it is?

Comment 8

[Morpheus Chen [:morpheus] UX]

Hi Fred,

As far as I know, the style has been defined in this document below. 

https://firefoxux.github.io/StyleGuide/#/inputs

That means the blue border is the default style, so I'll assume it's a style bug only on Windows. Let me know if any questions or still need a right person to comment, thanks.

Comment 9

[Jan Honza Odvarko [:Honza] (always need-info? me)]

Attachment: bug1294480.patch

Tim, here is a patch fixing the problem (also fixing it for bug Bug 1295511). There is already a rule for focus, but using -moz-focusring that doesn't work for me (perhaps because we are living in the new non XUL world).

I think we could use this at least till bug 1296985 if fixed.

Honza

Comment 10

[Jan Honza Odvarko [:Honza] (always need-info? me)]

@ntim: Win64 opt build
https://archive.mozilla.org/pub/firefox/try-builds/[e-mail]-4cfeff7a4dc1cbf19e219f8c253b2b2c16df0769/

Honza

Comment 11

[Tim Nguyen :ntim]

Comment on attachment 8790609 [details] [diff] [review]
bug1294480.patch

Review of attachment 8790609 [details] [diff] [review]:
-----------------------------------------------------------------

::: devtools/client/themes/common.css
@@ +586,5 @@
>    margin-left: 0;
>    margin-right: 0;
>  }
>  
> +/* Might be removed when bug 1296985 is fixed. */

I've checked the bug in question, and I think it might be invalid. Windows native input styling doesn't have a blue glow.

@@ +589,5 @@
>  
> +/* Might be removed when bug 1296985 is fixed. */
> +.devtools-searchbox > .devtools-textinput:focus,
> +.devtools-searchbox > .devtools-searchinput:focus,
> +.devtools-searchbox > .devtools-filterinput:focus {

I'd go further and remove .devtools-searchbox >, so it works in the memory tool and the DOM panel as well.

Comment 12

[Jan Honza Odvarko [:Honza] (always need-info? me)]

Attachment: bug1294480.patch

(In reply to Tim Nguyen :ntim (use needinfo?) from comment #11)
> Comment on attachment 8790609 [details] [diff] [review]
> bug1294480.patch
> 
> Review of attachment 8790609 [details] [diff] [review]:
> -----------------------------------------------------------------
> 
> ::: devtools/client/themes/common.css
> @@ +586,5 @@
> >    margin-left: 0;
> >    margin-right: 0;
> >  }
> >  
> > +/* Might be removed when bug 1296985 is fixed. */
> 
> I've checked the bug in question, and I think it might be invalid. Windows
> native input styling doesn't have a blue glow.
Removed

> 
> @@ +589,5 @@
> >  
> > +/* Might be removed when bug 1296985 is fixed. */
> > +.devtools-searchbox > .devtools-textinput:focus,
> > +.devtools-searchbox > .devtools-searchinput:focus,
> > +.devtools-searchbox > .devtools-filterinput:focus {
> 
> I'd go further and remove .devtools-searchbox >, so it works in the memory
> tool and the DOM panel as well.
Done 

Thanks!

Honza

Comment 13

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/fx-team/rev/38fceae2b551
inspector-searchbox focus behavior is gone; r=ntim

Comment 14

[Wes Kocher (:KWierso) (Not reading bugmail; email directly if needed)]

https://hg.mozilla.org/mozilla-central/rev/38fceae2b551

Comment 15

[magicp]

verified in 51 (Build ID 20160916030204)

Comment 11
>I'd go further and remove .devtools-searchbox >, so it works in the memory tool and the DOM panel
>as well.

Can we uplift this to 50 ?

Comment 16

[Jan Honza Odvarko [:Honza] (always need-info? me)]

Comment on attachment 8791126 [details] [diff] [review]
bug1294480.patch

Approval Request Comment
[Feature/regressing bug #]: 1265759
[User impact if declined]: Missing focus border in a search field (DevTools Toolbox)
[Describe test coverage new/current, TreeHerder]: n/a
[Risks and why]: Low risk, just css change
[String/UUID change made/needed]: n/a

Comment 17

[Gerry Chang [:gchang]]

Hi :Honza,
50 is beta now. You should uplift to 50 beta.

Comment 18

[Gerry Chang [:gchang]]

Comment on attachment 8791126 [details] [diff] [review]
bug1294480.patch

It's already in 51.

Comment 19

[Jan Honza Odvarko [:Honza] (always need-info? me)]

Comment on attachment 8791126 [details] [diff] [review]
bug1294480.patch

Approval Request Comment
[Feature/regressing bug #]: 1265759
[User impact if declined]: Missing focus border in a search field (DevTools Toolbox)
[Describe test coverage new/current, TreeHerder]: n/a
[Risks and why]: Low risk, just css change
[String/UUID change made/needed]: n/a

Comment 20

[Ritu Kothari (:ritu) (Inactive, please n-i to RyanVM, jcristau, or pascal)]

Hi Honza, Fx50 status is marked as unaffected. Is that incorrect?

Comment 21

[Tim Nguyen :ntim]

(In reply to Ritu Kothari (:ritu) from comment #20)
> Hi Honza, Fx50 status is marked as unaffected. Is that incorrect?

This fixes a bug that affects 50 as well (see comment #15)

Comment 22

[Ritu Kothari (:ritu) (Inactive, please n-i to RyanVM, jcristau, or pascal)]

(In reply to Tim Nguyen :ntim (use needinfo?) from comment #21)
> (In reply to Ritu Kothari (:ritu) from comment #20)
> > Hi Honza, Fx50 status is marked as unaffected. Is that incorrect?
> 
> This fixes a bug that affects 50 as well (see comment #15)

Gotcha.

Comment 23

[Ritu Kothari (:ritu) (Inactive, please n-i to RyanVM, jcristau, or pascal)]

Comment on attachment 8791126 [details] [diff] [review]
bug1294480.patch

CSS only, low risk fix, Beta50+

Comment 24

[Ryan VanderMeulen [:RyanVM]]

https://hg.mozilla.org/releases/mozilla-beta/rev/711dc31cbbad

Comment 25

[Cristian Comorasu, QA [:ccomorasu], Releae Desktop QA - Please contact [e-mail]]

I reproduced this issue using Fx 51.0a1, Build ID: 20160914030200.
I can confirm this issue is fixed, I tested it using Fx 50.0b1, build ID: 20160920155715, on Windows 10 x64, Mac OS X 10.11 and Ubuntu 14.04 LTS.