1314646 - Highlighter should stay visible while keyboard navigating the DOM tree in the inspector

Status: NEW

(DevTools :: Inspector, defect, P3)

Description

[Patrick Brosset <:pbro>]

STR:
- open any page
- open the inspector
- click on a node in the inspector
- navigate the tree with <down>, <right>, etc.

As you navigate, nodes become highlighted in the page for some time (1 sec).

As discussed on IRC today with @timeless:

> http://www.accessiq.org/create/content/timing-and-timeouts-accessibility-for-developers
> 1. if you're going to timeout an aid, it would be incredibly helpful if you hinted that there's a timer ticking
> 2. timeouts should always be extendable
> 
> If i'm looking at something complicated in a dom tree, it's really helpful if
> I can keep looking back to see what i'm looking at in the document.
> And not have to keep shifting the selected node in the tree just to be able
> to keep track of my place in the document.

Comment 1

[Patrick Brosset <:pbro>]

ChromeDevTools does keep the node highlighted until you
- either select a new node with the keyboard
- or move your mouse over other nodes in the inspector

Comment 3

[Patrick Brosset <:pbro>]

Probably introduced in bug bug 916443.
There's a _brieflyShowBoxModel method in the markup-view (devtools\client\inspector\markup\markup.js) that is used whenever the selection changes.

Comment 4

[Patrick Brosset <:pbro>]

Blocks the devtools a11y bug

Comment 5

[timeless]

Anyway, for my moderately complicated document (in my case, a pdf.js rendering of a mixed Hebrew-English document).
I'm inspecting it and trying to get a sense of what the document thinks of itself as a DOM.
There are essentially runs, and short runs, and gaps.

As I use the arrow keys in the DOM Tree to move up/down the document, the highlighter appears and flashes for a bit, and then roughly when the rules starts to populate, it usually disappears.

But the time I've looked at the DOM, I look back up and have no idea what part of the document I'm looking at.

There's a theory called "cognitive load", and essentially a user can become overloaded and lose something, in this case, that's the "what was I looking at" bit.

Expected results:
WCAG AAA 2.2.3 says "no timing".
You should not use timeouts.

Notably: Chrome's inspector doesn't.

Comment 6

[Patrick Brosset <:pbro>]

Inspector bug triage (filter on CLIMBING SHOES).

Comment 7

[Matteo Ferretti [:zer0] [:matteo]]

Attachment: Bug 1314646 - Remove the timeout when highlighter is shown;

Review commit: https://reviewboard.mozilla.org/r/183902/diff/#index_header
See other reviews: https://reviewboard.mozilla.org/r/183902/

Comment 8

[Matteo Ferretti [:zer0] [:matteo]]

Here the try build: https://treeherder.mozilla.org/#/jobs?repo=try&revision=344540d734a6b7368439d87742a2327ba3ac8951&selectedJob=133457841

Notice that there is also another kind of related test occurrence here:

http://searchfox.org/mozilla-central/source/devtools/client/inspector/test/browser_inspector_highlighter-hover_01.js

But since the nature of the tests seems to me legit to keep – maybe we could just rename the "briefly" part?