Closed Bug 1294480 Opened 3 years ago Closed 3 years ago

inspector-searchbox focus behavior is gone

Categories

(DevTools :: Inspector, defect, P1)

All
Windows
defect

Tracking

(firefox50 verified, firefox51 verified)

VERIFIED FIXED
Firefox 51
Iteration:
51.3 - Sep 19
Tracking Status
firefox50 --- verified
firefox51 --- verified

People

(Reporter: magicp.jp, Assigned: Honza)

References

(Depends on 1 open bug)

Details

(Whiteboard: [reserve-html])

Attachments

(2 files, 1 obsolete file)

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.
Has STR: --- → yes
Component: Untriaged → Developer Tools: Inspector
OS: Unspecified → All
Hardware: Unspecified → All
Flags: qe-verify?
Whiteboard: [devtools-html] [triage]
I can see the blue focus-border on linux(ubuntu 14.04) though, will check on Mac later
(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.
OS: All → Windows
I can see the blue focus-border on Mac as well, so it only effect Windows :-/
Flags: qe-verify? → qe-verify+
Priority: -- → P2
QA Contact: cristian.comorasu
Whiteboard: [devtools-html] [triage] → [reserve-html]
See Also: → 1295511
Duplicate of this bug: 1295110
I would assume the same fix here would also apply to Bug 1295511
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?
Flags: needinfo?(mochen)
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.
Flags: needinfo?(mochen)
Depends on: 1296985
Attached patch bug1294480.patch (obsolete) — Splinter Review
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
Attachment #8790609 - Flags: review?(ntim.bugs)
Assignee: nobody → odvarko
Status: NEW → ASSIGNED
Iteration: --- → 51.3 - Sep 19
Priority: P2 → P1
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.
Attachment #8790609 - Flags: review?(ntim.bugs)
Attached patch bug1294480.patchSplinter Review
(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
Attachment #8790609 - Attachment is obsolete: true
Attachment #8791126 - Flags: review?(ntim.bugs)
Attachment #8791126 - Flags: review?(ntim.bugs) → review+
Pushed by cbook@mozilla.com:
https://hg.mozilla.org/integration/fx-team/rev/38fceae2b551
inspector-searchbox focus behavior is gone; r=ntim
Keywords: checkin-needed
https://hg.mozilla.org/mozilla-central/rev/38fceae2b551
Status: ASSIGNED → RESOLVED
Closed: 3 years ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 51
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 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
Attachment #8791126 - Flags: approval-mozilla-aurora?
Hi :Honza,
50 is beta now. You should uplift to 50 beta.
Flags: needinfo?(odvarko)
Comment on attachment 8791126 [details] [diff] [review]
bug1294480.patch

It's already in 51.
Attachment #8791126 - Flags: approval-mozilla-aurora? → approval-mozilla-aurora-
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
Flags: needinfo?(odvarko)
Attachment #8791126 - Flags: approval-mozilla-beta?
Hi Honza, Fx50 status is marked as unaffected. Is that incorrect?
Flags: needinfo?(odvarko)
(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)
Flags: needinfo?(odvarko)
(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 on attachment 8791126 [details] [diff] [review]
bug1294480.patch

CSS only, low risk fix, Beta50+
Attachment #8791126 - Flags: approval-mozilla-beta? → approval-mozilla-beta+
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.
Status: RESOLVED → VERIFIED
Flags: qe-verify+
Product: Firefox → DevTools
You need to log in before you can comment on or make changes to this bug.