1469087 - paddle is clipped on empty-customize-area game

Status: RESOLVED FIXED

(Firefox :: Toolbars and Customization, defect, P5)

Description

[Daniel Holbert [:dholbert]]

[Confidential because this discusses an easter egg whose bug is also marked confidential -- bug 1409463]

STR:
 1. In customization mode, right-click every item and choose "add to overflow menu"
 2. When there is only a flexible spacer left, a whimsycorn button will appear on the bottom bar. Click it to start a pong game.

ACTUAL RESULTS:
Both copies of the "Flexible Space" text, as well as the rectangular pong-paddle, are clipped on the right side.  See attached screenshot.

EXPECTED RESULTS:
No such clipping.


I can reproduce in Firefox 58 (where this easter egg first shipped) as well as in current "Nightly 62.0a1 (2018-06-15) (64-bit)", so I suspect this has been an issue ever since this easter egg shipped.

I'm using Linux; I suspect maybe this issue is Linux-only (or at least does not affect Mac, given that's probably what jaws used to develop this)

Comment 1

[Daniel Holbert [:dholbert]]

Oh, it looks like bug 1423242 was meant to address this, but I can still reproduce in Nightly, so that didn't seem to fix it for me, as of current Nightly at least (using Ubuntu 18.04).

Comment 2

[Daniel Holbert [:dholbert]]

Attachment: screenshot

Comment 3

[Daniel Holbert [:dholbert]]

Poked around in Browser Toolbox.  It looks like the paddles are <box> elements with this styling:
#wp-player1, #wp-player2 {
    width: 84px;
    height: calc(39px + 3em);
}

...and with the paddle/text drawn via a background with a "-moz-element" reference (in the inline style="..." attribute on the <box> element).

For the flexible space & text to be fully visible (i.e. for the background area to be large enough to contain the whole referenced -moz-element), I have to increase width to 101px.

Comment 4

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

This _feels_ like a pretty safe P5, since it's a pretty (intentionally) buried piece of interaction. Still, it's a pretty glitchy look. Happy to take pushback.

Comment 5

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

Attachment: Bug 1469087 - Apply the reduced font-size on the Whimsypong toolbarpaletteitem so the label will fit inside of the paddle. r?mconley

Comment 6

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/870476747e94
Apply the reduced font-size on the Whimsypong toolbarpaletteitem so the label will fit inside of the paddle. r=mconley

Comment 7

[Stefan Hindli [:stefan_hindli]]

https://hg.mozilla.org/mozilla-central/rev/870476747e94