Explore changing /firefox/all/ to be less process intensive.

[robhudson]

One-line summary

This branch is an effort to eventually replace /firefox/all/ to avoid a very heavy paylaod to the browser by breaking the choices into separate pages rather than a single page.

• I used an AI to write some of this code (sh: I used Co-pilot while writing the tests)

Changes

• Improve wording to better explain this is a multi-step selection, not just choosing a language
• Re-write CSS for new page structure, lean up old CSS classes and CSS file
• Remove JS that supported old single page structure
• Remove JS tests
• Re-write integration tests
• Add a cancel / back button for each step
• Add a single page for both mobile platforms to simplify mobile download process
• Remove template all-unified.html and linked css/js/tests
• Display system requirements, release notes and support links at download step
• Update URL helper
• Update links with anchors to #products-*

Issue / Bugzilla link

Fix #9845
Fix #14673

Testing

https://www-demo2.allizom.org/en-US/firefox/all/

• All the channel/os combos from the current /all page have equivalents in these pages
• The download buttons download what they say they should
• The Micosoft Store button displays for store downloads and is localized when appropriate
• Do we have good test coverage?

Analytics:

• Desktop downloads have stub attribution & GA4
• Mobile download buttons have GA4

Mobile:

• Test app & play store links on an actual mobile device.

Localization:

• No untranslated strings
• No unused translations (they should be deleted if we're not using them)
• RTL support

QR codes go to expected App/Play store:

• Mobile
• Android Beta
• Android Nightly
• Scan one with a phone to make sure it has enough size/whitespace to work

[codecov]

Codecov Report

Attention: Patch coverage is 96.66667% with 3 lines in your changes missing coverage. Please review.

Project coverage is 77.70%. Comparing base (87e805e) to head (ee4b6f3).
Report is 20 commits behind head on main.

Files with missing lines	Patch %	Lines
bedrock/firefox/views.py	96.15%	3 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main   #14324      +/-   ##
==========================================
+ Coverage   77.36%   77.70%   +0.34%     
==========================================
  Files         161      161              
  Lines        8336     8378      +42     
==========================================
+ Hits         6449     6510      +61     
+ Misses       1887     1868      -19     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[stephaniehobson]

I've started but I'm not finished and I don't have time to leave notes for someone else to pick it up :/ Fortunately, there's no rush.

[stephaniehobson]

I pushed my most recent changes.

• Links that need changing are href="TODO"
  • There should be 3 "back buttons" plus the download button
• The page that needs fixing is linked on the first page under Browser > Mobile > Firefox
  • you can use the plat_mobile and lang_multi variables in views.py to construct the values for platform and language

[stephaniehobson]

@alexgibson This will change /all to work with a folder structure instead of anchors. Do you think that is likely to break anything?

[alexgibson]

@alexgibson This will change /all to work with a folder structure instead of anchors. Do you think that is likely to break anything?

There are a few places in bedrock where we point to the old anchors I think, which should be easy enough to update. I have no idea about external sites though. Maybe referrer in GA might point us to any other sites that link to it?

[stephaniehobson]

I added some tests 🎉 And, like any good tests, they have discovered some bugs 🐞

[janbrasna]

Now with the recent rebase even AArch64 Linux Nightlies started working, nice job! 🚀

Right now I'm debugging general layout issues with this branch, pretty site-wide, and can't seem to be finding any culprits in the added styles though:/ I'm constantly having some weird layout issues for this PR when spoofing UAs (or it might be related to OSX versions being frozen in UAstring to 10_15_7 that's also the current support fringe?) like content blinking or disappearing when scrolling in webkit (on unrelated pages like fx/new) or text being dramatically smaller than what it should be in gecko etc. The most visible is ie the CTA alignment or paragraph sizing, anywhere on the site, not just under /firefox or /firefox/all etc.:

[stephaniehobson]

@janbrasna nice find on the missing " 😵

[stephaniehobson]

Ready for review 🎉

[janbrasna]

Oh I see, I was too nosy/early 😇 (but just love this PR and kept an eye on it for a while;)…)

One super-minor layout issue I've encountered is at some widths, the chevrons don't play well with longer strings:

Screen.Recording.2024-07-23.at.01.47.10.mov

(but I guess this Is so minor it can be sorted out later not blocking this going to prod…)

---

The "Release notes" link for Android beta https://www-demo2.allizom.org/en-US/firefox/android/beta/notes/ leads to a version from 2020, that's probably when they stopped publishing them for beta? I can also open an issue for this separately, as this looks like a more meta issue (i.e. should the notes even redirect there, to some v68.x?)

---

I can make it a sad 500 if I feel fancy and put the /win-store/ after any other product, like https://www-demo2.allizom.org/firefox/all/desktop-nightly/win-store/ (which is happily displayed instead of barking at me) and then clicking any language, obviously.

---

nice find on the missing " 😵

Ah that wasn't really me, after weeks of frustration why the layout order doesn't make sense I ran it through all the validators, parsers and formatters I could think of in desperation, eventually pointing out unexpected tokens leading me to areas with something not quite closed or quoted, and the rest was easy;)

FYI the nesting fix also resolved the violent flickering in Safari when scrolling as shown on one of the screen captures, so good it was the same cause… 🤞

will change /all to work with a folder structure instead of anchors. Do you think that is likely to break anything?

Good thing is it's from anchors to folders, so any outdated external links to anchors would just land the users at a root "step 0" initial state, still being able to make the selection manually and finish the task.

(I can imagine this may get a lightweight progressive JS treatment at a later stage that would only return the options fragments and populate them in-place, instead of full page reloads, that if making use of History API can also be translating the old fragment paths to the new folder structure URLs "as a rewrite"?)

BTW the Playwright tests are currently commented out as they liked to time out on the old /all — this new structure now enables writing new tests for it in Playwright too.

[robhudson]

If we need to we can rebase this. I don't have any local changes so it's fine to rebase and force push.

[robhudson]

I can't approve my own PR, but I read through things and it all is looking good to me from the code.

[janbrasna]

I'm afraid this misses the functionality to choose from several ESR versions.

The current https://www.mozilla.org/firefox/all/#product-desktop-esr offers the choice of esr-latest vs. esr-next — and most importantly: it's the only place to download it, all the ESR CTAs around the web only link to esr-latest (=115.x), users looking to download esr-next (=128.x) can only find it in /all — and I'm having trouble locating a step where I could make such a choice here (admittedly now only testing demo2, but that's not too old iirc)

[stephaniehobson]

@janbrasna Yeah, we missed that. I poked at it for a couple hours but didn't make any progress adding the version. I'll enlist someone else's help (probably not Rob since he's away for 3 weeks).

[stephaniehobson]

@robhudson FYI I did a force push to rebase.

[pmac]

I love this. Gives great URLs for direct linking as well. Great work 💯

[alexgibson]

I took a first-pass and spotted a few issues, but nothing all hopefully minor / easy enough to fix. Excited to see this one land after all this time!

[janbrasna]

Only observations / naïve questions:

[alexgibson]

Updates look good to me, great work @robhudson @stephaniehobson!

The only remaining thing that's missing from my initial pass is RTL styles for the product icons. Once that's done I think this is good to merge.

r+wc