Focus ring on scrollbar Split Console
Categories
(DevTools :: Shared Components, defect)
Tracking
(firefox-esr68 unaffected, firefox67 unaffected, firefox68 unaffected, firefox69 unaffected, firefox70 unaffected, firefox71 unaffected, firefox72 verified)
Tracking | Status | |
---|---|---|
firefox-esr68 | --- | unaffected |
firefox67 | --- | unaffected |
firefox68 | --- | unaffected |
firefox69 | --- | unaffected |
firefox70 | --- | unaffected |
firefox71 | --- | unaffected |
firefox72 | --- | verified |
People
(Reporter: cfogel, Assigned: nchevobbe)
Details
(Keywords: regression)
Attachments
(2 files)
Affected versions
- 72.0a1 (2019-10-22);
Affected platforms
- Windows 10, macOS 10.13, Ubuntu 18.04;
Steps to reproduce
- Launch Firefox, enable DevTools, access any webpage;
- Press ESC (enable the Split console - editor mode);
- Add blocks of text until the area becomes scrollable;
- As per the screenshot click on the output from the right;
- Click on the scrollar for the Split Console;
- [Optional] Click+TAB(spammable) on the Scrollbar;
Expected result
- no graphical issues;
Actual result
- focus bar displayed while clicking;
- in some cases the focus ring remains blocked on the bar;
Regression range
- First bad: changeset: 8537d24d8aa8c0c2189c308d5835def2feec313c build_date: 2019-06-28
- Last good: changeset: 74145209605580569286554e106415b061c1f393 build_date: 2019-06-28 11:03:57.576000
- Pushlog: URL
- Potential regressor: Bug 1519312, but I might be wrong;
Additional notes
- attached screenshot with the issue;
- affecting both light and dark theme;
Reporter | ||
Comment 1•5 years ago
|
||
Hy Nicolas, mind taking a look at this/regressor and confirming if it's the case?
Assignee | ||
Comment 2•5 years ago
|
||
I can get the focus style to be displayed sometimes when spam click the scrollbar
But I don't think it's new? I managed to get it on the debugger source as well (the longer the scrollbar, the higher chance to reproduce)
Assignee | ||
Comment 3•5 years ago
|
||
This seems to happen more frequently on the editor though, for some reason.
The following CSS change seems to fix this:
/* codemirror.css | chrome://devtools/content/shared/sourceeditor/codemirror/lib/codemirror.css */
.CodeMirror-vscrollbar {
outline: none !important;
}
Assignee | ||
Updated•5 years ago
|
Assignee | ||
Updated•5 years ago
|
Assignee | ||
Comment 4•5 years ago
|
||
Comment 5•5 years ago
|
||
It looks like the scrollbar elements have tabindex="-1"
so they should be "programatically focusable" (see recent WHATWG post) but not focusable on click. They also have pointer-events: none
, possibly for the same reason.
Given that, I'm okay with removing their focus styles in CSS, since they're not intended to be focusable and tests show that it's rare to actually give them focus (you have to spam clicks or tabulations to get them focused).
Pushed by nchevobbe@mozilla.com: https://hg.mozilla.org/integration/autoland/rev/df04e4fbbcb2 Don't display outline on CodeMirror scrollbars. r=fvsch.
Comment 7•5 years ago
|
||
bugherder |
Reporter | ||
Comment 8•4 years ago
|
||
Verified with 72.0a1 (2019-10-27) on the mentioned platforms.
Updated•4 years ago
|
Updated•4 years ago
|
Updated•4 years ago
|
Updated•2 years ago
|
Description
•