1792823 - Set and Continue button rapidly moves up and down when changing colors on the Choose the color what inspires you screen

Status: VERIFIED FIXED

(Firefox :: Messaging System, defect, P2)

Description

[Alexandru Trif, Desktop Test Engineering [:atrif]]

Attachment: choose_the color.gif

Found in

• 106.0b5 (20220927185813)

Affected versions

• 106.0b5 (20220927185813)
• 107.0a1 (20220929014928)

Tested platforms

• Affected platforms: Windows 10x64, Ubuntu 20.04, macOS 11.6
• Unaffected platform: none

Steps to reproduce

1. Open about:welcome page.
2. Select the Skip this step option until the Choose the color that inspires you is displayed.
3. Change the colors and observe the Set and continue button.

Expected result

• The colors are changed and no visual issues occur.

Actual result

• Set and continue button rapidly changes position.

Additional notes

• Attached a screen recording.
• On Ubuntu 20.04 and macOS 11 the issue is intermittent. On Windows, the issues happen almost anytime when changing colors.

Comment 1

[Shane Hughes [:aminomancer]]

I guess it's a Fluent issue like bug 1737951 - the node is rendered synchronously, the text content is translated asynchronously. There's a way to force translation synchronously, but idk how easily it fits into the react component structure we have here.

One reasonable solution would be to set a minimum height for the description box. Even if we didn't have that problem, I think this might still be worthwhile, because in most languages the description will be 1 row tall for the "Use my current colors" option, and 2+ rows tall for the Colorway options. So when switching between them, the primary button will move up and down, even if the description content didn't flicker.

I think this would work, if we want to go in that direction:

.onboardingContainer .screen[pos="split"] .tiles-theme-container .colorway-text {
  min-height: 3em;
}

Comment 2

[Punam Dahiya [:pdahiya]]

NI @Ania to help set priority on the issue thanks

Comment 3

[Ania]

This came up at our "pixel-perfect" walkthrough with Gabrielle too - it's a small thing, but IMO the flicker is unpleasant enough to set the min height for description box in 107.

Comment 4

[Shane Hughes [:aminomancer]]

Attachment: Bug 1792823 - Give MR Onboarding Colorway descriptions a min height. r=pdahiya!

Comment 5

[Punam Dahiya [:pdahiya]]

Attachment: Screen shot description text with min-height.png

Comment 6

[Punam Dahiya [:pdahiya]]

Attachment: Screen Shot desc text responsive.png

Comment 7

[Punam Dahiya [:pdahiya]]

NI @asafkoto to review screenshot that allows 3 line desc text by setting min-height to 58.5 px and fixes the jump reported in the bug thanks

Comment 8

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/1729f4e93ae9
Give MR Onboarding Colorway descriptions a min height. r=pdahiya

Comment 9

[Sandor Molnar[:smolnar]]

https://hg.mozilla.org/mozilla-central/rev/1729f4e93ae9

Comment 10

[Alexandru Trif, Desktop Test Engineering [:atrif]]

Verified fixed with Firefox 107.0a1 (20221006093717) on Windows 10x64, macOS 10.15.7 and Ubuntu 20.04. The Set and continue button no longer changes position when the colors are changed usiung Keyboard navigation or mouse.

Comment 11

[Ania]

My apologies, I thought I posted a comment here a while back. The new height looks great, thank you!

Comment 12

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

The patch landed in nightly and beta is affected.
:aminomancer, is this bug important enough to require an uplift?

• If yes, please nominate the patch for beta approval.
• If no, please set status-firefox106 to wontfix.

For more information, please visit auto_nag documentation.

Comment 13

[Shane Hughes [:aminomancer]]

Too late for uplift