This CL updates the Console and Issues counters shown in the upper
right of DevTools next to the Settings gear icon to be more accessible.
- The counter element has changed from a <div> to a <button> element.
Previously, the counters were not tab accessible (see bug);
the <button> element is tab accessible by default and makes more
semantic sense as they open the Console and Issues panels.
- The styling has been updated slightly to include a border and hover
effect when focused to indicate interactivity. Previously, the only
indication that the counters were interactive was the pointer cursor
shown upon hover.
- The description text (tooltip) is updated to be more clear. We have
received reports from users regarding confusion around the meaning
of the existing descriptions, e.g. "5 errors, 2 warnings". This text
has been changed to explicitly state the interaction outcome, e.g.
"Open Console to view 5 errors, 2 warnings".
- General code refactors.
Before: https://i.imgur.com/waQPBhH.gif
After: https://i.imgur.com/zmztxvi.mp4
Bug: 1133060
Change-Id: If0cbc4f58705f3443e480498ca842d68222bc0a9
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2436646
Commit-Queue: Brian Cui <brcui@microsoft.com>
Reviewed-by: Sigurd Schneider <sigurds@chromium.org>
Reviewed-by: Shane Clifford <shanejc@microsoft.com>
Reviewed-by: Mathias Bynens <mathias@chromium.org>
Brian Cui
