Closed Bug 1273345 Opened 9 years ago Closed 6 years ago

Styling issues connected to focus in devtools (introduced by bug 1242851)

Categories

(DevTools :: Framework, defect, P2)

Product:
DevTools
Component:
Framework
Type:
defect

Tracking

(Not tracked)

Status:
RESOLVED WONTFIX

People

(Reporter: arni2033, Assigned: yzen)

References

Details

>>>   My Info:   Win7_64, Nightly 49, 32bit, ID 20160511030221
All of A-E require some decision; I decided to file 1 bug instead of five.

A) filter in DOM inspector has dotted outline instead of blue highlight:
    STR: open DOM inspector -> press Tab -> click in filter field
B) red/yellow border of filter fields in inspector conflict with blue focus highlight
    STR: open inspector -> press Tab -> click in ruleview filter -> type "a" -> type "asdf"
C) double focusring on sidebar tabs, "show more nodes" buttons and probably more
    STR: open data:text/html,<body onload='S="";for(i=0;i++<999;)S+="<br>";document.body.innerHTML=S'>
         -> open inspector -> focus "show all 999 nodes" button using Tab key -> click on "rules" tab 
D) light theme: black focusring on selected node (which is SHINY BLUE!1!!)
    STR: set light devtools theme -> open inspector -> click "<body" -> press Tab -> press Shift+Tab
E)(bug 1272999!)  console: multiline text is clipped, unnecessary scrollbar, largely increased height

+ some more issues with focusring which were missed in bug 1242851, so I haven't mention them
Flags: needinfo?(yzenevich)
(In reply to arni2033 from comment #0)
> >>>   My Info:   Win7_64, Nightly 49, 32bit, ID 20160511030221
> All of A-E require some decision; I decided to file 1 bug instead of five.
> 
> A) filter in DOM inspector has dotted outline instead of blue highlight:
>     STR: open DOM inspector -> press Tab -> click in filter field
> B) red/yellow border of filter fields in inspector conflict with blue focus
> highlight
>     STR: open inspector -> press Tab -> click in ruleview filter -> type "a"
> -> type "asdf"
> C) double focusring on sidebar tabs, "show more nodes" buttons and probably
> more
>     STR: open data:text/html,<body
> onload='S="";for(i=0;i++<999;)S+="<br>";document.body.innerHTML=S'>
>          -> open inspector -> focus "show all 999 nodes" button using Tab
> key -> click on "rules" tab 
> D) light theme: black focusring on selected node (which is SHINY BLUE!1!!)
>     STR: set light devtools theme -> open inspector -> click "<body" ->
> press Tab -> press Shift+Tab
> E)(bug 1272999!)  console: multiline text is clipped, unnecessary scrollbar,
> largely increased height
> 
> + some more issues with focusring which were missed in bug 1242851, so I
> haven't mention them

Thanks will take care of it.
Assignee: nobody → yzenevich
Status: NEW → ASSIGNED
Flags: needinfo?(yzenevich)
Could you have better steps to reproduce some of these:

(In reply to arni2033 from comment #0)
> >>>   My Info:   Win7_64, Nightly 49, 32bit, ID 20160511030221
> All of A-E require some decision; I decided to file 1 bug instead of five.
> 
> A) filter in DOM inspector has dotted outline instead of blue highlight:
>     STR: open DOM inspector -> press Tab -> click in filter field

I can't seem to be able to see the issue. The search field seems to have a blue outline as expected for me.

> B) red/yellow border of filter fields in inspector conflict with blue focus
> highlight
>     STR: open inspector -> press Tab -> click in ruleview filter -> type "a"
> -> type "asdf"

Better steps to reproduce? Are you talking about style filter?

> C) double focusring on sidebar tabs, "show more nodes" buttons and probably
> more
>     STR: open data:text/html,<body
> onload='S="";for(i=0;i++<999;)S+="<br>";document.body.innerHTML=S'>
>          -> open inspector -> focus "show all 999 nodes" button using Tab
> key -> click on "rules" tab 
> D) light theme: black focusring on selected node (which is SHINY BLUE!1!!)
>     STR: set light devtools theme -> open inspector -> click "<body" ->
> press Tab -> press Shift+Tab

Not sure what exactly the issue is. The outline should be black as required in bug 1242851

> E)(bug 1272999!)  console: multiline text is clipped, unnecessary scrollbar,
> largely increased height

Should be fixed shortly.

> 
> + some more issues with focusring which were missed in bug 1242851, so I
> haven't mention them

If you have specific ones, please mentioned them. Thanks
Flags: needinfo?(arni2033)
> A) > I can't seem to be able to see the issue. The search field seems to have a blue outline.
You're doing something wrong (perhaps you tested on FreeBSD). Also, DOM inspector was recently renamed
> B) > Better steps to reproduce? Are you talking about style filter?
I meant "filter field in ruleview", i.e. #ruleview-searchbox. Better steps to reproduce:
1. open inspector on this page
2. press Tab
3. click in filter field in ruleview
4. type "a"
5. type "asdf"
AR:  red/yellow borders conflict with blue focus outline; it hurts the eyes
ER:  something better than that

At least there are no questions in (C). Also, it's nice to know that breakage (D) was intentional.
Flags: needinfo?(arni2033)
I don't see the dotted outline mentioned in (A) in the toolbox either.  Are you talking about the DOM Inspector addon?
DOM panel was initially documented as "DOM Inspector" in bug 1201475 comment 93, but was renamed later
See Also: → 1277858
Product: Firefox → DevTools
This bug is a bit complicated to follow, and mentions several different problems without explaining them all in the same amount of details. As a result it's not easy to make actionable.
I've been discussing the rule-view and computed-view double outline problem with :victoria and she said that the red/yellow colouring was making things too prominent and that instead we would change those fields to show the number of matches like the debugger does. She'll file a bug for this.
So I'll close this bug in the meantime.
Status: ASSIGNED → RESOLVED
Closed: 6 years ago
Resolution: --- → WONTFIX
You need to log in before you can comment on or make changes to this bug.