Closed Bug 1390647 Opened 4 years ago Closed 4 years ago

about:debugging and about:addons sidebars don't match about:preferences

Categories

(DevTools :: about:debugging, defect)

defect
Not set
normal

Tracking

(firefox57 fixed)

RESOLVED FIXED
Firefox 57
Tracking Status
firefox57 --- fixed

People

(Reporter: Atoll, Assigned: mstriemer)

References

Details

Attachments

(3 files)

When operating about:debugging on OS X 10.12.6 (release), Nightly 2017-08-15, I noticed that it unexpectedly shows a highlight rectangle. However, the about:preferences leftnav, styled exactly the same, does not.
Component: General → Developer Tools: about:debugging
Assignee: nobody → mstriemer
Summary: about:debugging leftnav shows highlight rectangle, about:preferences does not → about:debugging and about:addons sidebars don't match about:preferences
Comment on attachment 8906837 [details]
Bug 1390647 - Match about:debugging and about:addons sidebar to about:preferences

https://reviewboard.mozilla.org/r/178566/#review183730

See my comment about the outline.

Did not know about fill="context-fill" and fill-opacity="context-fill-opacity". 
That looks really handy, thanks for updating that!

::: commit-message-b7f10:1
(Diff revision 1)
> +Bug 1390647 - Match about:debugging and about:addons sidebar to about:prefences r?jdescottes

about:prefences -> about:preferences

::: devtools/client/aboutdebugging/aboutdebugging.css:30
(Diff revision 1)
>    flex-direction: row;
>    align-items: center;
>  }
>  
> +.category:focus {
> +  outline: none;

This makes about:debugging inaccessible with keyboard navigation. You no longer have the feedback about where the focus is in the application. 
about:preferences has a special mode where they detect keyboard navigation and add a dotted border on the focused element.

I would prefer a solution that still preserves keyboard navigation. Unless there is a very strong incentive to remove the outline for consistency reason, I would keep it for now as it gives us keyboard nav accessibility for nothing.
Attachment #8906837 - Flags: review?(jdescottes) → review+
I updated the category items to be buttons, I had to flex the parent to get them to layout correctly.

This removes the outline when clicking on the item and still supports keyboard navigation as shown in the video. It has the added benefit of not needing the `onKeyDown` handler to get space and enter to trigger the panel change.

Does this work for you, Julian?
Flags: needinfo?(jdescottes)
That's great, let's move forward with that!
Flags: needinfo?(jdescottes)
Keywords: checkin-needed
Pushed by ryanvm@gmail.com:
https://hg.mozilla.org/integration/autoland/rev/4ab54f3ebbc5
Match about:debugging and about:addons sidebar to about:preferences r=jdescottes
Keywords: checkin-needed
https://hg.mozilla.org/mozilla-central/rev/4ab54f3ebbc5
Status: NEW → RESOLVED
Closed: 4 years ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 57
Duplicate of this bug: 1398214
Comment on attachment 8906837 [details]
Bug 1390647 - Match about:debugging and about:addons sidebar to about:preferences

https://reviewboard.mozilla.org/r/178566/#review185326

::: devtools/client/aboutdebugging/aboutdebugging.css:29
(Diff revision 2)
> +  display: flex;
> +  flex-direction: column;
> +}
> +
>  .category {
> +  border: 0 solid transparent;

Use `border: none;`. Also, it would have been better to put this in common.inc.css
I have reproduced this bug with Nightly 57.0a1 (2017-08-15) on Windows 8.1 , 64 Bit ! 

This bug's fix is Verified with latest beta !

Build   ID    20171102181127
User Agent    Mozilla/5.0 (Windows NT 6.3; WOW64; rv:57.0) Gecko/20100101 Firefox/57.0

[bugday-20171101]
Product: Firefox → DevTools
You need to log in before you can comment on or make changes to this bug.