1325571 - Focus dotted rectangle not visible inside modal

Status: RESOLVED WORKSFORME

(DevTools :: Responsive Design Mode, defect)

Description

[Bogdan Maris, Desktop Test Engineering]

Attachment: Screencast showing the issue

[Affected versions]:
- Latest Nightly 53.0a1
- Latest Developer Edition 52.0a2

[Affected platforms]:
- Windows 8.1 32-bit
- Windows 10 64-bit
- Ubuntu 16.04 64-bit
- Mac OS X 10.12.1

[Steps to reproduce]:
1. Start Firefox
2. Visit a random webpage
3. Enter RDM (CTRL+Shift+M / CMD+Alt+M)
4. Open 'Edit list...' from devices
5. Use TAB to change the dotted focus rectangle

[Expected result]:
- The rectangle can be seen in modal as well.

[Actual result]:
- Dotted rectangle is invisible inside modal.

[Regression range]:
- This was caused by an old regression:

Last good revision: f325d73d76d14f2b4ee2e05d6c23a8f8f521907f
First bad revision: ad249ce81497259edc016f4c6957a256a455dbc0
Pushlog:
https://hg.mozilla.org/integration/mozilla-inbound/pushloghtml?fromchange=f325d7
3d76d14f2b4ee2e05d6c23a8f8f521907f&tochange=ad249ce81497259edc016f4c6957a256a455
dbc0

Looks like the following bug has the changes which introduced the regression:

https://bugzilla.mozilla.org/show_bug.cgi?id=582951

ad249ce81497	Dão Gottwald — Bug 582951 - Use CSS outline for checkbox and radio button focus indicator. r=dbaron,jimm

- The regression from above is for the missing dotted rectangle only. The misalignment and dark color is older and not a regression.

[Additional notes]:
- Using a dark theme the dotted rectangle is black (hard to see) on Touch simulation, Screenshot and Close icons.
- Also for some buttons the rectangle is not correctly aligned.

Comment 1

[Bogdan Maris, Desktop Test Engineering]

(In reply to Bogdan Maris, QA [:bogdan_maris] from comment #0)
> Pushlog:
> https://hg.mozilla.org/integration/mozilla-inbound/pushloghtml?fromchange=f325d73d76d14f2b4ee2e05d6c23a8f8f521907f&tochange=ad249ce81497259edc016f4c6957a256a455dbc0

Edited with the correct pushlog

Comment 2

[Dão Gottwald [:dao]]

Someone working on devtools will need to look into this.

Comment 3

[Ryan VanderMeulen [:RyanVM]]

Ryan, can you help assign a priority to this?

Comment 4

[J. Ryan Stinnett [:jryans] (Use needinfo, replies may be slow)]

This is not a regression, since old RDM did not have this modal.

On macOS, tabbing through the modal seems to give OS-defined highlighting of the focused <input> as you progress through the modal (using a rounded blue stroke around the checkbox).

The attached screenshot is from Windows, so I'm guessing nothing happens there.

Comment 5

[Julien Cristau [:jcristau] (back August 18)]

Mass wontfix for bugs affecting firefox 52.

Comment 7

[Micah [:mtigley] (she/her)]

With the redesign for device settings, you can now TAB through the devices and have a highlighted background shown for the focused device. So for visually identifying the tabbed device, we don't need the dotted outline anymore.

Martin, should we mark this as fixed?

Comment 8

[Martin Balfanz [:mbalfanz]]

Yep, I agree this is fixed. There is just one thing that I noticed: when you open the settings menu, the keyboard focus will remain in the RDM toolbar, and I think it should be in the modal window instead. I will file a new bug for this.