Closed Bug 1325571 Opened 5 years ago Closed 2 years ago

Focus dotted rectangle not visible inside modal


(DevTools :: Responsive Design Mode, defect)

Not set


(firefox50 unaffected, firefox51 unaffected, firefox52 wontfix, firefox53 affected)

Tracking Status
firefox50 --- unaffected
firefox51 --- unaffected
firefox52 --- wontfix
firefox53 --- affected


(Reporter: bogdan_maris, Unassigned)


(Blocks 1 open bug)


(Whiteboard: [dt-q])


(1 file)

[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

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

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.
(In reply to Bogdan Maris, QA [:bogdan_maris] from comment #0)
> Pushlog:

Edited with the correct pushlog
Has Regression Range: --- → yes
Has STR: --- → yes
QA Whiteboard: [qe-rdm]
Flags: needinfo?(dao+bmo)
Someone working on devtools will need to look into this.
Flags: needinfo?(dao+bmo)
Ryan, can you help assign a priority to this?
Flags: needinfo?(jryans)
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.
Flags: needinfo?(jryans)
Keywords: regression
OS: All → Windows
Priority: -- → P3
Whiteboard: [rdm-v2]
Mass wontfix for bugs affecting firefox 52.
Product: Firefox → DevTools
Blocks: rdm-ux
Duplicate of this bug: 1498536
Priority: P3 → P2
Whiteboard: [rdm-v2] → [rdm-v2][dt-q]
See Also: → 1498501, 1487857

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?

Flags: needinfo?(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.

Closed: 2 years ago
Flags: needinfo?(mbalfanz)
Resolution: --- → WORKSFORME
Priority: P2 → --
Whiteboard: [rdm-v2][dt-q] → [dt-q]
You need to log in before you can comment on or make changes to this bug.