1640519 - Reader mode toolbar controls get lighter if user hovers away from popover

Status: NEW

(Toolkit :: Reader Mode, defect, P5)

Description

[Asif Youssuff]

Steps to reproduce:

1. Open reader mode on a page like https://www.rollingstone.com/politics/politics-features/rudy-giuliani-new-york-trump-997712/
2. Click on the "type controls" widget
3. Move mouse pointer over page content (not popover)

What happens:

moving mouse pointer away from the popover causes the toolbar contents to get lighter

Expected result:

The toolbar is active as long as the popover is open, so the toolbar styling should have active styling - the toolbar controls should not fade.

See the three dot menu in the address bar for an example of how this ought to work.

Comment 1

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

:yoasif, if you think that's a regression, then could you try to find a regression range in using for example mozregression?

Comment 2

[:Gijs (out for now; he/him)]

The toolbar losing opacity and border when the popover opens is expected - the focus is on the popover/dropdown, closing the popover/dropdown ends that effect.

What's not expected is that hovering within the dropdown/popover brings back opacity on the toolbar; it's a result of this causing :hover styles on the toolbar to match because the popover/dropdown is a child of the toolbar.

FWIW, I don't see the border returning... Can you do a screencast or provide more details about what you mean?

Comment 3

[Asif Youssuff]

Attachment: Screenshot from 2020-05-24 17-35-58.png

(In reply to :Gijs (he/him) from comment #2)

The toolbar losing opacity and border when the popover opens is expected - the focus is on the popover/dropdown, closing the popover/dropdown ends that effect.

This doesn't feel expected to me. Look at the three dot menu in the address bar - clicking on the menu retains the active styling while the popover is open. It doesn't go from gray to white as soon as the popover is opened.

FWIW, I don't see the border returning... Can you do a screencast or provide more details about what you mean?

The border doesn't return, but I expect it to stay on screen while the popover is shown for the same reason as above.

Comment 4

[Asif Youssuff]

Attachment: Screenshot from 2020-05-24 17-35-58.png

See also the styling of extension popups and how the extension button remains "active" while the popover is open on screen.

The styling in the reader view toolbar while the popover is open is unexpected.

Comment 5

[Asif Youssuff]

Attachment: Screenshot from 2020-05-24 17-36-53.png

See also the styling of extension popups and how the extension button remains "active" while the popover is open on screen.

The styling in the reader view toolbar while the popover is open is unexpected.

(attached the wrong attachment, sorry)

Comment 6

[:Gijs (out for now; he/him)]

(In reply to Asif Youssuff from comment #3)

Created attachment 9151361 [details]
Screenshot from 2020-05-24 17-35-58.png

(In reply to :Gijs (he/him) from comment #2)

The toolbar losing opacity and border when the popover opens is expected - the focus is on the popover/dropdown, closing the popover/dropdown ends that effect.

This doesn't feel expected to me. Look at the three dot menu in the address bar - clicking on the menu retains the active styling while the popover is open. It doesn't go from gray to white as soon as the popover is opened.

This was a specific part of the design, and I don't think it's all that unexpected. User focus is on the dropdown, so we de-emphasize the toolbar. Also, clicking a different button will not do anything immediately except close the dropdown. You close the dropdown, the toolbar gets previous style back - though the difference is a bit subtle if you're scrolled down on the page (which will also lose the toolbar its border and reduces its opacity already, except when hovered).

Comment 7

[Asif Youssuff]

Upon further review, I think that the border disappearing is fine and may actually contribute to making the interaction looking nicer, so scratch that from my feedback.

I disagree however that the opacity should decrease if the user's cursor is over the page -- this is now the active control that spawned a popover, and it doesn't make sense to de-emphasize it like when a user is reading and scrolling down the page.

Comment 8

[Jared Wein [:jaws] (please needinfo? me)]

The UI has now changed again. I don't see any issues here. Asif, can you please re-test in latest Nightly?

Comment 9

[Asif Youssuff]

Given that bug 1640508 is a WONTFIX, I'm not sure it makes sense to maintain my objection here. Ideally, we would keep bug 1640508 open as an enhancement or modify the behavior such that it matches platform norms so that we could revisit this.

(If scrolling over the popover or page didn't interrrupt the popup, it makes sense to maintain the opacity on open, otherwise, if the scrolling over any part of the UI interrupts it, I'm not sure that the affordance of maintaining the on-open opacity makes a difference).

Thanks for your consideration!

Comment 10

[Mike Conley (:mconley) (:⚙️)]

This sounds like a P5 for now.