1858752 - Screenshots overlay flickers when dragging

Status: VERIFIED FIXED

(Firefox :: Screenshots, defect)

Description

[Niklas Baumgardner [:niklas]]

Attachment: screenshotsRecording.mp4

STR:

1. set screenshots.browser.component.enabled to true
2. open screenshots on any page
3. drag a region on the overlay and once done dragging, do not move the mouse

AR:

• The overlay background will flicker on top of the the mover targets (white cricles)
• Once the mouse is released, the buttons are under the overlay background.

ER:
The background should not flicker and the buttons should not be under the background.

The buttons do eventually come back on top of the background.
I noticed that the timing of this seems to coincide with the timing of the scrollbar disappearing. As shown in the attached video.

Comment 1

[Niklas Baumgardner [:niklas]]

I meant to set this bug regressed by bug 1799036, but bugzilla won't let me change it to regressed by or undo the regression because I don't have access to bug 1799036.

Comment 3

[Emilio Cobos Álvarez (:emilio)]

This is on Windows 11, right? I don't seem to be able to reproduce this on Linux. Is there anything interesting in the debug console? Is this fixed by bug 1857946 (so we need to back that out to repro)?

Comment 4

[Niklas Baumgardner [:niklas]]

The video is from Windows 11 but I've reproduced on my mac and linux machines also.

Bug 1857946 does not fix the issue.

Comment 5

[Niklas Baumgardner [:niklas]]

I noticed something when I was looking at this. It appears the the z-index is not working for elements in the screenshots overlay?

STR:

1. set screenshots.browser.component.enabled to true
2. open screenshots on any page
3. drag a region on the overlay so the x, copy, and download buttons appear
4. open the browser toolbox and select the element with id buttons-container
5. set the z-index on this element to a large number ex. 123456

ER:
The buttons container should be above background

AR:
The buttons container is under the background

I tried this on 119 and I got the ER of the buttons container above the background

:emilio are you able to reproduce this?

Comment 6

[Emilio Cobos Álvarez (:emilio)]

I can repro that (and comment 0 now, for some reason). Will look.

Comment 7

[Emilio Cobos Álvarez (:emilio)]

Attachment: Bug 1858752 - Simplify screenshots component markup. r=niklas

This doesn't fix the issue at hand, but makes stuff easier to reason about.

Comment 8

[Emilio Cobos Álvarez (:emilio)]

Attachment: Bug 1858752 - Explicitly z-sort bghighlight. r=niklas

Before bug 1799036, this was not an issue because the background and the
highlight ended up in different containing blocks.

Depends on D191137

Comment 9

[Emilio Cobos Álvarez (:emilio)]

Attachment: Bug 1858752 - Fix button position after showing them on both sides. r=niklas

Drive-by, but I noticed it while poking so might as well fix it.

Depends on D191138

Comment 10

[Phabricator Automation]

Comment on attachment 9358781 [details]
Bug 1858752 - Fix button position after showing them on both sides. r=niklas

Revision D191139 was moved to bug 1859058. Setting attachment 9358781 [details] to obsolete.

Comment 11

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/e39431525cfb
Simplify screenshots component markup. r=niklas
https://hg.mozilla.org/integration/autoland/rev/38740caf5ab0
Explicitly z-sort bghighlight. r=niklas

Comment 12

[Cristian Tuns]

https://hg.mozilla.org/mozilla-central/rev/e39431525cfb
https://hg.mozilla.org/mozilla-central/rev/38740caf5ab0

Comment 13

[Ardelean Oana, Desktop Test Engineering [:oardelean]]

Reproducible on a 2023-10-12 Nightly build on Windows 10.
Verified as fixed on Firefox 120.0b4 and Nightly 121.0a1 on Windows 10, Ubuntu 22, macOS 12.