1791088 - All the text on Firefox View is bigger if the tour is/was active

Status: VERIFIED FIXED

(Firefox :: Messaging System, defect)

Description

[Daniel Holbert [:dholbert]]

STR:

1. Run Firefox Nightly in a fresh profile
2. Visit Firefox View and click through the tour.
3. Refresh Firefox View.

ACTUAL RESULTS:
All of the text on Firefox View gets smaller in step 3 (in other words: the test is artificially larger when the tour is active, and it stays larger after the tour is completed until you explicitly refresh)

EXPECTED RESULTS:
Consistently sized text / no weird relayouts at refresh.

I think this is related to bug 1790315. I initially thought it was part of that bug but it seems not to be since we fixed that bug but this issue persists.

NOTE: In an existing (not-fresh) profile, you can trigger this issue if you want, by resetting about:config browser.firefox-view.feature-tour to the default value.

Comment 1

[Daniel Holbert [:dholbert]]

Attachment: screencast

Comment 2

[Daniel Holbert [:dholbert]]

In the attached screencast, the post-tour refresh happens around 0:10, at which point you can see all the text getting smaller.

I assume the inconsistency here is due to some styles that get inserted as part of displaying the tour.

Comment 3

[Shane Hughes [:aminomancer]]

--grey-subtitle-1: #696977;
--newtab-button-secondary-color: #0060DF;
--mr-welcome-background-color: #F8F6F4;
--mr-welcome-background-gradient: linear-gradient(0deg, rgba(144, 89, 255, 0.2) 0%, rgba(2, 144, 238, 0.2) 100%);
--mr-screen-background-color: #F8F6F4;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Ubuntu", "Helvetica Neue", sans-serif;
font-size: 16px;
position: relative;

Edit: Oh this is just part of aboutwelcome.scss proper.

Comment 4

[Daniel Holbert [:dholbert]]

If you watch very closely (e.g. play the screencast in slow motion or scrub through it slowly), you can also see the text get bigger at 0:01 when the tour shows up as I switch to Firefox View for the first time.

It does its initial layout, and then the tour appears, which mysteriously/quickly grows all of the text.

Comment 5

[Shane Hughes [:aminomancer]]

Daniel, can we add an ID or class on the root element for firefoxview.html? That would help exclude Firefox View from some of our messaging surface rules.

Comment 6

[:Gijs (he/him)]

(In reply to Shane Hughes [:aminomancer] from comment #5)

Daniel, can we add an ID or class on the root element for firefoxview.html? That would help exclude Firefox View from some of our messaging surface rules.

I'd prefer us not to - it feels really fragile. People are going to keep forgetting to add this to rules, and it'll needlessly increase specificity.

The fundamental problem is that the about welcome tour code is supposed to be insertable in ~arbitrary in-content pages. Right now that's just new tab and Firefox View, but this is going to be a recurring problem.

It's a shame we removed support for scoped stylesheets, but you could still get it with custom elements. Can we encapsulate the popups (which I assume are the only places where we need the aboutwelcome CSS) into custom elements and use a stylesheet in those?

Comment 7

[Shane Hughes [:aminomancer]]

Yeah I see what you mean. I'm guessing there are probably reasons that wasn't already done, but it does seem really preferable on first consideration. I'll try to get a sense of the scale of the kind of patch necessary for that. If it ends up being a major project, it might still be nice to at least band-aid this, in light of the time constraints.

Edit: And yeah, the styles are only intended to affect the .featureCallout and descendants, so it does seem like a pretty perfect application for a custom element.

Comment 8

[Ed Lee :Mardak]

I don't see why the aboutwelcome styles need to be placed on body. We already scope basically everything to .onboardingContainer and about:welcome has a #root.welcome-container as its parent too if we really need something for about:welcome and not other surfaces.

Comment 9

[Shane Hughes [:aminomancer]]

Attachment: Bug 1791088 - Constrain aboutwelcome styles to onboarding-specific elements. r=Mardak!

Fix a bug where rules in aboutwelcome.css were applying to Firefox View.

Comment 10

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/509baef0ff87
Constrain aboutwelcome styles to onboarding-specific elements. r=Mardak

Comment 11

[Marian-Vasile Laza]

https://hg.mozilla.org/mozilla-central/rev/509baef0ff87

Comment 12

[Alice Varro [avarro], Ecosystem QA]

I have verified this issue using the latest Firefox Beta 106.0b3 (Build ID: 20220922185808) on Windows 10x64, macOS 12.3.1 and LinuxMint 20.2 x64.

• All the content from the Firefox View page remains at the same size if the tour is/was active.

Comment 13

[Shane Hughes [:aminomancer]]

(In reply to Alice Varro [avarro], Ecosystem QA from comment #12)

I have verified this issue using the latest Firefox Beta 106.0b3 (Build ID: 20220922185808) on Windows 10x64, macOS 12.3.1 and LinuxMint 20.2 x64.

• All the content from the Firefox View page remains at the same size if the tour is/was active.

Thanks!