1704782 - Back/ Forward and Refresh button overlapping on hover state in about:debugging

Status: VERIFIED FIXED

(DevTools :: about:debugging, defect, P3)

Description

[Alexandru Trif, Desktop QA [:atrif]]

Attachment: about_debug_hover.gif

Affected versions

• 89.0a1(20210412213434)
• 88.0 (20210412175251)
• 87.0 (20210318103112)

Affected platforms

• macOS 11.2.3
• Windows 10x64
• Ubuntu 20.04

Preconditions

• devtools.aboutdebugging.local-tab-debugging set to true

Steps to reproduce

1. Open Firefox and about:debbuging -> This Firefox.
2. Click Inspect on a random tab.
3. Press or keyboard select a button.
4. Hover over the button near the selected one.

Expected result

• Hover does not overlap the selected button.

Actual result

• Hover overlaps the selected button.

Regression range

• Not a regression, reproducible with the implementation of the button starting with bug 1617240.

Notes

• Attached a screen recording.

Comment 1

[Jan Honza Odvarko [:Honza] (always need-info? me)]

I can reproduce the bug on Win10, thanks for the report Alexandru.

This looks like a good first bug (most likely only CSS changes).

Some instructions for anyone interested

1. The CSS styles for back/forward button are in this file
   https://searchfox.org/mozilla-central/rev/3de2db87f3c9001ae478318d47a2ca3427574382/devtools/client/themes/toolbox.css#69

2. The rule for .debug-target-info .navigation-button, defines padding, but not margin
   Playing with those styles (e.g. padding 6px and margin 2px) could be the way to solve this issue

3. You want to use Browser Toolbox for inspecting the Firefox UI (the two back/forward buttons)
   https://developer.mozilla.org/en-US/docs/Tools/Browser_Toolbox

Honza

Comment 2

[Jane Kotovich (:janey)]

Hey! Im Jane from Outreachy applicants, could I please work on this issue?

Comment 3

[Jan Honza Odvarko [:Honza] (always need-info? me)]

Done, thanks for the help.
Honza

Comment 4

[Jane Kotovich (:janey)]

Hey Honza,
I was trying to reproduce the issue and could get that. This is what I see:
https://drive.google.com/file/d/1znNMQNQIrku8T2LoY9LfJMtbdSFs8Vzf/view?usp=sharing
Am I doing something incorrectly?
Im on macOS 10.15.7 Catalina
(In reply to Jan Honza Odvarko [:Honza] (always need-info? me) from comment #3)

Done, thanks for the help.
Honza

Comment 5

[Alexandru Trif, Desktop QA [:atrif]]

(In reply to Evgenia Kotovich from comment #4)

Hey Honza,
I was trying to reproduce the issue and could get that. This is what I see:
https://drive.google.com/file/d/1znNMQNQIrku8T2LoY9LfJMtbdSFs8Vzf/view?usp=sharing
Am I doing something incorrectly?
Im on macOS 10.15.7 Catalina

Hello Evgenia! You will need to set devtools.aboutdebugging.local-tab-debugging to true from about:config and open about:debugging -> This Firefox and click on the Inspect button from a randomly opened page. After that, you need to click or tab back/forward/reload button from there and then hover inside the about:devtools, not on the toolbar buttons. Thank you!

Comment 6

[Jane Kotovich (:janey)]

Alexandru, thanks heaps for the help. I have got there, somehow my buttons on hover does not have a blue borders, but yeah I definitely can play around to separate them a bit.
In Mac its pretty much not seen that they are crossing each other!
Like here:
https://drive.google.com/file/d/1VvSmuD2pwIa6r6GNt8ViuM3cUlQPyfhg/view?usp=sharing
Kind regards,
Jane
(In reply to Alexandru Trif, QA [:atrif] from comment #5)

(In reply to Evgenia Kotovich from comment #4)

Hey Honza,
I was trying to reproduce the issue and could get that. This is what I see:
https://drive.google.com/file/d/1znNMQNQIrku8T2LoY9LfJMtbdSFs8Vzf/view?usp=sharing
Am I doing something incorrectly?
Im on macOS 10.15.7 Catalina

Hello Evgenia! You will need to set devtools.aboutdebugging.local-tab-debugging to true from about:config and open about:debugging -> This Firefox and click on the Inspect button from a randomly opened page. After that, you need to click or tab back/forward/reload button from there and then hover inside the about:devtools, not on the toolbar buttons. Thank you!

Comment 7

[Julian Descottes [:jdescottes]]

somehow my buttons on hover does not have a blue borders

The blue border only appears when the buttons are focused.

To trigger this you can either:

• manually move the focus: click the URL text input next to the buttons and then use shift+TAB to move the focus back to one of the buttons
• use the browser toolbox:
  • press cmd+alt+shift+i
  • a Multiprocess Browser Toolbox window should open
  • use it to inspect one of the buttons of the about:devtools-toolbox tab
  • force the ":focus" pseudo class (Inspector > Rules > ":hov" > :focus, see screenshot below)

Comment 8

[Julian Descottes [:jdescottes]]

Attachment: force_focus_pseudo_class.png

Comment 9

[Jane Kotovich (:janey)]

Okay, all done - one thing is I could not decide what's the better option:
when you choose padding 6 it changes a button size and it looks smaller.
I decided to go with:

• padding: 8px;
• margin: auto 2px;

However, if it doesn't fits in UI or looks not good, I can easy change that!
This is three options which happened to be:

• padding: 6, margin: 2 https://drive.google.com/file/d/1_W71EmrzTOro_vtRLkkr4biNqFDHddcD/view?usp=sharing
• padding: 7, margin: auto 2 https://drive.google.com/file/d/1AWgt9Pru2Z_8tEKBiKTKadVgbwAXRrXt/view?usp=sharing
• padding: 8, margin: auto 2 https://drive.google.com/file/d/1K3P_RiTgaXq3rUQIazT7OPCpVNc9jnFM/view?usp=sharing

Comment 10

[Jane Kotovich (:janey)]

Attachment: Bug 1704782 - [devtools] Change Bck/Frw/Rfr button style: padding and margin. r=jdescottes,honza

Depends on D111985

Comment 11

[BugBot [:suhaib / :marco/ :calixte]]

This good-first-bug hasn't had any activity for 2 months, it is automatically unassigned.
For more information, please visit auto_nag documentation.

Comment 12

[Aiya Yegenberdiyeva]

Hi Jan (@honza), Julian (@jdescottes), and Evgenia,
I am Outreachy applicant and wanted to work on this bug. Seems like Evgenia has done some work on this, was there a patch from her? If yes, where can I find it? If not, I would like to be assigned for this bug.

Comment 13

[Julian Descottes [:jdescottes]]

(In reply to Aiya Yegenberdiyeva from comment #12)

Hi Jan (@honza), Julian (@jdescottes), and Evgenia,
I am Outreachy applicant and wanted to work on this bug. Seems like Evgenia has done some work on this, was there a patch from her? If yes, where can I find it? If not, I would like to be assigned for this bug.

Hi! Thanks for the ping. It looks like there was an accepted patch here already (https://phabricator.services.mozilla.com/D112007) which we forgot to land :(

I will try to land it right now.

Comment 14

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/79c2c4f99710
[devtools] Change Bck/Frw/Rfr button style: padding and margin. r=Honza

Comment 15

[Cristian Tuns]

https://hg.mozilla.org/mozilla-central/rev/79c2c4f99710

Comment 16

[Alexandru Trif, Desktop QA [:atrif]]

Verified fixed with Firefox 95.0b2 (20211102190739) on Windows 10x64, macOS 10.15 and Ubuntu 21.04. Hover no longer overlaps the selected button.