1843098 - [about:welcome] Embedded Migration wizard checkbox overflow when all content can be imported

Status: RESOLVED FIXED

(Firefox :: Messaging System, defect, P1)

Description

[Mimi Jung]

Attachment: Screen Shot 2023-07-12 at 11.25.31 AM.png

Set browser.migrate.internal-testing.enabled to true or have all available import options

For windows build >= 15063 route to about:welcome and select import checkbox to view the embedded import flow
If pinned - select import on easy setup screen
For macos/linux, route to embedded import flow

Notice the checkbox overflowing on the skip this step button with the import-all.enabled flow enabled (variant 2/expanded view)

Comment 1

[Mimi Jung]

This might be somewhat of an edge-case, I'm uncertain how many users would have all of these options to import and it was only possible for me when using the internal testing pref. This issue is only present with the variant 2 version of the flow. There doesn't seem a great way to resolve this because of the lack of real estate we have with variant 2 (the subheading/button is taking up quite a bit of space) as well as all the options available to import. I think the largest issue is that the skip this step button should be aligned similarly on all screens.

One solution I tried is to remove some of the padding-block on .main-content (or setting a negative top margin on migration-wizard) so that the content is pushed up higher allowing for the skip button to render correctly but then the headings don't align across screens and can look bit awkward when we have less content to import. We need roughly 50 pixels of space to fix the overflow and position of the skip button.

This becomes even more problematic on <800px resolutions - a solution for that would be to potentially have the import and skip button aligned horizontally rather than vertically which would also resolve the issue on larger resolutions.

figma designs

Comment 2

[Mimi Jung]

Updating the QA jira ticket to verify whether this issue is reproducible without using the developer internal testing tool.

Comment 3

[Mimi Jung]

Hi Marius!

NI'ing you directly in case there's bandwidth for QA to investigate this in Nightly outside of testing for the full embedded import wizard flow. No worries if it's not doable as this was discovered quite late.

Comment 4

[Marius Coman [:mcoman], Ecosystem QA, PTO until 20th of October, for any testing requests ping :poiegas]

Attachment: rec of the issue.gif

Hi, Negin!

I have managed to reproduce this issue using the latest Firefox Nightly 116.0a1 117.0a1 (Build ID: 20230716213402) on Windows 10 x64 and macOS 13.4.1 using the following steps:

[Prerequisites]:

• Have a Chrome profile with "Bookmarks", "Logins and Passwords", "Browsing history", "Form autofill data", "Extensions", and "Payment methods" saved.

[Steps to reproduce]:

1. Open Firefox using a new profile.
2. Navigate to the "about:welcome" page and go to the "Import" screen.
3. Select the "Chrome" option and click the "+" button.
4. Observe the "Skip this step" button.

Here are my findings:

• When I'm selecting my Chrome profile from the "Import" Onboarding screen and expand the options the "Skip this step" button is pushed near the progress bar.
• The "Skip this step" button overlaps with the progress bar if the import extensions option is turned on (browser.migrate.chrome.extensions.enabled set to true)
• If Firefox is resized under 800px the "Skip this step" option overlaps with the progress bar regardless if the "Extensions" option is turned on or not.

Attached a screen recording of the behavior.

I have not managed to reproduce this issue on Linux Mint 21.1 because it appears that not all the import options are available on Linux.

I hope this helps. If you need any other information please don't hesitate to ping me here or on Slack (mcoman).

Comment 5

[Mimi Jung]

This is super helpful, thanks Marius!

Comment 6

[Mimi Jung]

Moving forward with hiding the secondary section (background image) on responsive mode (<800px) with a property to increase screen real-estate as this will also likely be an issue with the addons experiment. For >800px, we will be moving the content up to prevent the skip button overflow. Thread on the discussion for more context.

Comment 7

[Mimi Jung]

Attachment: Bug 1843098 - Hide secondary section on responsive mode through pref

Comment 8

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/mozilla-central/rev/3412cb668fd9
Hide secondary section on responsive mode through pref r=omc-reviewers,emcminn

Comment 9

[Atila Butkovits]

https://hg.mozilla.org/mozilla-central/rev/3412cb668fd9