Closed Bug 1590707 Opened 5 years ago Closed 5 years ago

Focus ring on scrollbar Split Console

Categories

(DevTools :: Shared Components, defect)

defect
Not set
minor

Tracking

(firefox-esr68 unaffected, firefox67 unaffected, firefox68 unaffected, firefox69 unaffected, firefox70 unaffected, firefox71 unaffected, firefox72 verified)

VERIFIED FIXED
Firefox 72
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

  1. Launch Firefox, enable DevTools, access any webpage;
  2. Press ESC (enable the Split console - editor mode);
  3. Add blocks of text until the area becomes scrollable;
  4. As per the screenshot click on the output from the right;
  5. Click on the scrollar for the Split Console;
  6. [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;

Hy Nicolas, mind taking a look at this/regressor and confirming if it's the case?

Flags: needinfo?(nchevobbe)

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)

Flags: needinfo?(nchevobbe)

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: nobody → nchevobbe
Status: NEW → ASSIGNED
Keywords: regression

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.
Status: ASSIGNED → RESOLVED
Closed: 5 years ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 72

Verified with 72.0a1 (2019-10-27) on the mentioned platforms.

Status: RESOLVED → VERIFIED
Has Regression Range: --- → yes
Has STR: --- → yes
Component: CSS and Themes → Shared Components
You need to log in before you can comment on or make changes to this bug.