Closed Bug 1704782 Opened 10 months ago Closed 4 months ago

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

Categories

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

Desktop
All
defect

Tracking

(firefox87 wontfix, firefox88 wontfix, firefox89 wontfix, firefox95 verified)

VERIFIED FIXED
95 Branch
Tracking Status
firefox87 --- wontfix
firefox88 --- wontfix
firefox89 --- wontfix
firefox95 --- verified

People

(Reporter: atrif, Assigned: janey)

References

(Blocks 1 open bug)

Details

(Keywords: good-first-bug)

Attachments

(3 files)

Attached image 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.
Has STR: --- → yes

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

Keywords: good-first-bug
Priority: -- → P3

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

Done, thanks for the help.
Honza

Assignee: nobody → jenyabrentnall
Status: NEW → ASSIGNED

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

(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!

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!

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)

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:

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

Assignee: jenyabrentnall → nobody
Status: ASSIGNED → NEW

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.

(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.

Pushed by jdescottes@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/79c2c4f99710
[devtools] Change Bck/Frw/Rfr button style: padding and margin. r=Honza
Assignee: nobody → jenyabrentnall
Status: NEW → ASSIGNED
Status: ASSIGNED → RESOLVED
Closed: 4 months ago
Resolution: --- → FIXED
Target Milestone: --- → 95 Branch
Flags: qe-verify+

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

Status: RESOLVED → VERIFIED
Flags: qe-verify+
You need to log in before you can comment on or make changes to this bug.