1600891 - The text from the tips is not displayed when the Firefox browser is resized to 25% width or less

Status: VERIFIED FIXED

(Firefox :: Address Bar, defect, P1)

Description

[Simona Rosu [:srosu], Ecosystem QA]

Attachment: OnboardingTip_Resize.mp4

[Affected versions]:

• Latest Firefox Nightly 73.0a1 (Build ID: 20191202220401)

[Affected Platforms]:

• Mac 10.14
• Windows 10 x64
• Ubuntu 16.04 x64

[Prerequisites]:

• Have the latest Nightly installed.
• Have the “devtools.chrome.enabled” pref set to “true”.
• Run the “(async function() { let { ProfileAge } = ChromeUtils.import("resource://gre/modules/ProfileAge.jsm"); let age = await ProfileAge(); age._times = { firstUse: 1368255600000, created: 1368255600000 }; await age.writeTimes(); })();” code on the browser console.
• Have access to the stage delivery console.
• Have an active branched add-on recipe.
• Have the “security.content.signature.root_hash” pref set to "DB:74:CE:58:E4:F9:D0:9E:E0:42:36:BE:6C:C5:C4:F6:6A:E7:74:7D:C0:21:42:7A:03:BC:2F:57:0C:8B:9B:90".
• Have the "app.normandy.api_url" pref set to "https://stage.normandy.nonprod.cloudops.mozgcp.net/api/v1".
• Have the "app.normandy.dev_mode" pref set to “true”.
• Have the "app.normandy.logging.level" pref set to “0”.
• Have the "services.settings.server" pref set to "https://settings.stage.mozaws.net/v1".
• Have the "xpinstall.signatures.dev-root" pref set to “true”.
• Create a new pref named “carmentips” and set it as “true”.

[Steps to reproduce]:

1. Open the Firefox browser with the profile from prerequisites.
2. Resize the browser to 25%.
3. Open a new tab and observe the elements from the “Onboarding” tip.

[Expected result]:

• The “Onboarding” tip is resized so that it fits the available browser width.

[Actual result]:

• The “Type less, find more: Search Google right from your address bar.” string is not displayed.

[ Notes]:

• This issue is also reproducible for the “Redirect” tip.
• Attached a screen recording with the issue.

Comment 1

[Drew Willcoxon :adw]

Looks like the reason the view is so tall in that video (and I can reproduce it) is that the text has wrapped after each word more or less, and the reason that the text isn't visible at all is because there's a fade out effect applied on top of the text that ends up covering it completely.

Comment 2

[Drew Willcoxon :adw]

At least we probably shouldn't apply the fade out to tip text, since tip text wraps.

Comment 3

[Drew Willcoxon :adw]

I asked Verdi to take a look at this.

Comment 4

[Drew Willcoxon :adw]

Attachment: Verdi's suggestion for narrow windows

This is from Slack.

Comment 5

[Drew Willcoxon :adw]

I prototyped the mockup in comment 4 using the browser toolbox and took a screenshot and sent it to Verdi. He didn't like it. He says he'll work on something, so I'm blocked on that for now.

Comment 6

[Drew Willcoxon :adw]

Attachment: New mockup

Comment 7

[Drew Willcoxon :adw]

Attachment: Bug 1600891 - Wrap tips at narrow window widths.

Megabar automatically wraps the tip, which is nice. We just need some tweaks to make it look a little better. Non-megabar needs to have flex-wrap: wrap set, and I also couldn't get the wrapping to Just Work for non-small window widths. (The buttons keep wrapping when they don't need to.) So I gave up and added a @media screen and (max-width: 800px) specifically for turning on wrapping in narrow windows. I don't feel bad about that because megabar is the future anyway.

I'll post screenshots to the bug in a minute. Also, I need to rebase this on D57133, but that shouldn't be hard.

Comment 8

[Drew Willcoxon :adw]

Attachment: Non-megabar screenshot 1 (slightly narrow window)

Comment 9

[Drew Willcoxon :adw]

Attachment: Non-megabar screenshot 2 (very narrow window)

Comment 10

[Drew Willcoxon :adw]

Attachment: Megabar screen recording

Comment 11

[Drew Willcoxon :adw]

Attachment: Help button ugly wrapping

Eventually at very narrow window widths, the help button wraps again and ends up by itself, which isn't great. I'm not sure how to fix that without changes to the DOM, but I think we can live with that for the experiment at least [edit: experiments plural]...

Comment 12

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/dd5d97bfba89
Wrap tips at narrow window widths. r=harry

Comment 13

[Cristina Coroiu [:ccoroiu]]

https://hg.mozilla.org/mozilla-central/rev/dd5d97bfba89

Comment 14

[Drew Willcoxon :adw]

Comment on attachment 9115877 [details]
Bug 1600891 - Wrap tips at narrow window widths.

Beta/Release Uplift Approval Request

• User impact if declined: We need this in order to run two urlbar experiments on 72 as planned (bug 1568594, bug 1564506).
• Is this code covered by automated tests?: No
• Has the fix been verified in Nightly?: No
• Needs manual test from QE?: Yes
• If yes, steps to reproduce: Please see comment 0
• List of other uplifts needed: None
• Risk to taking this patch: Low
• Why is the change risky/not risky? (and alternatives if risky): This is a CSS change that only affects "tip" results in the urlbar. Tip results aren't shown normally and are only shown in our urlbar experiments. We have QA coverage for this due to the experiments.
• String changes made/needed:

Comment 15

[Simona Rosu [:srosu], Ecosystem QA]

I have verified this issue and is no longer reproducible on the latest Nightly 73.0a1 (Build ID: 20191216214733) on Windows 10 x64, Mac 10.14, Ubuntu 18.04 x64.

• The elements from the tips are correctly displayed and rendered when the browser is resized.

Comment 16

[Julien Cristau [:jcristau]]

Comment on attachment 9115877 [details]
Bug 1600891 - Wrap tips at narrow window widths.

urlbar css fix to support experiments, approved for 72.0b8

Comment 17

[Cosmin Sabou [:CosminS]]

https://hg.mozilla.org/releases/mozilla-beta/rev/0582c2f476a0

Comment 18

[Simona Rosu [:srosu], Ecosystem QA]

I have verified this issue and is no longer reproducible on the Firefox Developer Edition 72.0b8 (Build ID: 20191218033533) on Windows 10 x64, Mac 10.14, Ubuntu 16.04 x64.

• The elements from the tips are displayed and rendered when the browser is resized.