Bug 207819 - Web Inspector: Add "outline focused element" debug setting
Summary: Web Inspector: Add "outline focused element" debug setting
Status: RESOLVED FIXED
Alias: None
Product: WebKit
Classification: Unclassified
Component: Web Inspector (show other bugs)
Version: WebKit Nightly Build
Hardware: All All
: P2 Normal
Assignee: Nikita Vasilyev
URL:
Keywords: InRadar
Depends on:
Blocks: 208217
  Show dependency tree / graph
 
Reported: 2020-02-15 17:37 PST by Nikita Vasilyev
Modified: 2020-02-25 13:57 PST (History)
5 users (show)

See Also:

Attachments
Patch (4.43 KB, patch)
2020-02-15 17:45 PST, Nikita Vasilyev 		no flags Details | Formatted Diff | Diff
[Image] With patch applied (261.76 KB, image/png)
2020-02-15 17:49 PST, Nikita Vasilyev 		no flags Details
View All Add an attachment (proposed patch, testcase, etc.)

Note You need to log in before you can comment on or make changes to this bug.
Description Nikita Vasilyev 2020-02-15 17:37:33 PST 
When debugging accessibility issues of Web Inspector, it's helpful to know what element is focused. Many elements have "outline: none" and no clear indication what's focused.

Add a debug setting to show a bright outline for all focused elements.
Comment 1 Radar WebKit Bug Importer 2020-02-15 17:37:45 PST 
<rdar://problem/59489993>
Comment 2 Nikita Vasilyev 2020-02-15 17:45:39 PST 
Created attachment 390877 [details]
Patch
Comment 3 Nikita Vasilyev 2020-02-15 17:49:19 PST 
Created attachment 390879 [details]
[Image] With patch applied
Comment 4 WebKit Commit Bot 2020-02-17 16:26:56 PST 
Comment on attachment 390877 [details]
Patch

Clearing flags on attachment: 390877

Committed r256788: <https://trac.webkit.org/changeset/256788>
Comment 5 WebKit Commit Bot 2020-02-17 16:26:57 PST 
All reviewed patches have been landed.  Closing bug.
Comment 6 Devin Rousso 2020-02-25 13:57:06 PST 
Comment on attachment 390877 [details]
Patch

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

> Source/WebInspectorUI/UserInterface/Base/Main.js:568
> +    function setFocusDebugOutline() {

This should really exist inside 'Source/WebInspectorUI/UserInterface/Debug/Bootstrap.js' so we don't ship it when it's not going to be usable.

> Source/WebInspectorUI/UserInterface/Views/Main.css:124
> +body.focus-debug *:focus {

This should really exist inside 'Source/WebInspectorUI/UserInterface/Debug/Bootstrap.css' (which we should create) so we don't ship it when it's not going to be usable.