1835112 - Print preview "1 of 1" overlay at the bottom is awkwardly transparent at the edges, if your window is skinny

Status: NEW

(Toolkit :: Printing, defect, P3)

Description

[Daniel Holbert [:dholbert]]

Attachment: screenshot of "1 of 1" when Firefox window is as skinny as it gets

STR:

1. Visit http://example.org/ and Ctrl+P to print-preview.
2. Shrink your Firefox window to be as skinny as possible.
3. Hover the print preview area and look at the "1 of 1" overlay that appears at the bottom.

ACTUAL RESULTS:
The "1 of 1" button is transparent at its left and right edges.

EXPECTED RESULTS:
No such transparent area.

If you make your window a little bit wider, the issue goes away. Then a little bit wider, the button grows >|>> arrows on either side, and at just the right size, this can be seen with those buttons as well (screenshot coming up).

I'm using Nigthly 115.0a1 (2023-05-24) (64-bit) on Ubuntu 22.04

Comment 1

[Daniel Holbert [:dholbert]]

Attachment: screenshot when window is just wide enough to show `>`|`>>` buttons, which also have this issue

Comment 2

[Daniel Holbert [:dholbert]]

Attachment: screenshot when window is even wider, when the issue goes away [No bug]

Comment 3

[Daniel Holbert [:dholbert]]

Attachment: screencast showing how this looks at a variety of window sizes

Here's a screencast. At the very beginning and very end, the button doesn't show the issue; but in the middle of the screencast, it does.

Comment 4

[Sam Foster [:sfoster] (he/him)]

Yeah I see that gap there too - its particularly visible with a dark mode/theme. The pagination toolbar is styled in printPagination.css. The gap seems too visible to be a rounding error, though the fact that it only shows up at certain widths/sizes seems to suggest it might be. I do remember struggling to keep the buttons and hit-targets large enough , while also having a rounded border and box-shadow on the whole toolbar. intuitively, the button you can click on should fill the whole space and not leave some dead pixels at the edges. At a glance just now, I don't really understand what all the pseudo-elements are doing or why they are necessary.
There's some effort in there to match the border-radius of the left and right-most buttons with the container they are in. That seems problematic, as of course the radius of the outer can't be the same as that of the inner. Conceptually, it would be better/simpler if these were just square buttons in a row whose corners get clipped by the radiused container where we draw the border and box-shadown. I'm not sure if that's possible though without creating other weird artifacts when we show the focus outline?