Nothing personal updates (fixes #15420) #15445

maureenlholland · 2024-11-05T15:53:29Z

One-line summary

Add new content to the nothing-personal page.

I used an AI to write some of this code.

Significant changes and points to review

New "things" section with button that displays random thing on click
New "privacy" section
New "features" section
Updated fox gif placement
New link for MyLife trash icon
[update] no easy switching feature on mobile, as it is not available for mobile browser yet

There should be no change to header styling or functionality.
No change to bottom sticky note functionality.
No missing or broken easter eggs!

Issue / Bugzilla link

#15420

Testing

⚠️ ensure switch M24_WEBSITE_REFRESH is OFF

Figma 10/24 [Mozilla only]: https://www.figma.com/design/QyN625zQl1CWshXiow5NcI/N.A.-Fx-Campaign?node-id=6801-8061&node-type=text

design feedback for reference [Mozilla only]: https://docs.google.com/document/d/1-N_Hu7kpQMI46JsuRLTY0Xs-PVQofwXnq2yCN3P_Pyc/edit?tab=t.0

http://localhost:8000/en-US/firefox/nothing-personal/

Cross-browser compatibility
Screen size responsiveness
No JS experience
- "Clickity Click" button is gone, there's a details section to expand for more random things
Reduced motion preference experience
- when reduced, gifs are static images, bottom sticky is in view, and the only animation is stars fading in on button
- when allowed, all boxes pop in, bottom sticky slides in, the Clickity Click button stars do a little spinny jump, there's a quick shine over the button and an ongoing pulse

codecov · 2024-11-05T18:52:55Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 78.71%. Comparing base (c3ed5d2) to head (7048d6e).
Report is 28 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main   #15445      +/-   ##
==========================================
+ Coverage   78.65%   78.71%   +0.06%     
==========================================
  Files         156      156              
  Lines        8169     8197      +28     
==========================================
+ Hits         6425     6452      +27     
- Misses       1744     1745       +1

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

ingramjr · 2024-11-07T20:13:47Z

Sticky CTA at top of page
- Was there a request to change it from 'Download Firefox' to 'Learn more'?
Body copy
- What are your thoughts on converting all the body copy that is currently 400 to 500. 400 weight is coming across a little too light.
Browser windows w/ the blue gradient bar
- Can we make the stroke color #333336
- Can we see what the stroke weight looks slightly lighter weight?
- Make the corner radius' same as the radius' of the 4 feature boxes.
Stickers (foxy, heart, smiley face)
- Make the heart and smiley relative in size to the foxy sticker.
- The foxy sticker stroke weight looks different from the heart and smiley. Possibly to make it consistent?
Clickity Click Button (PRIORITY)
- Hover state - I like the shine! Could it also slightly increase in size?
- Hover state - On hover, would it suffice to alter color slightly to signifiy hover?
- Active state - Love the depress animation
- General note - It would be great to add some sort of motion to catch the attention. Would love your thoughts - could it be a light pulsing, the shine animates every 5 seconds, The 3 star shines rotating? All 3!?
What would Firefox do browser window
- Whats your thoughts on making the text box that re-populates every click the 2-line text height instead of having it alternating between the 1-line height and 2-line? Just so that the browser window doesn't resize with every click?
Foxy in bush gif
- I like it on infinite loop. Is it possible to have it pause for 1-2 seconds before looping? Just to give it a beat.
- Could we increase the size by 10-15%
- Make the box strokes same weight as other windows once adjusted.
Animations
- I love the way the windows pop in. Feels natural to the context of it being a desktop!
- First window - possible to have the stickers animate in separately/staggered on their own to insinuate them getting stuck on?
Newsletter browser window (Mobile Only)
- Make "Newsletter" centered instead of right justified.
Background grid
- I know this may be hard to implement but wanted to ask - is there some sort of parallax scroll element or something in the vein of giving it a little life?

slightlyoffbeat · 2024-11-08T16:37:11Z

@stephaniehobson could you take a look at this through a GA4/events point of view?

bedrock/firefox/templates/firefox/nothing-personal/index.html

stephaniehobson

Just had a look at analytics stuff 👀

bedrock/firefox/templates/firefox/nothing-personal/index.html

media/js/firefox/nothing-personal/random-answers.es6.js

- re-exported foxy, heart, and smiley svgs to get rotations from assets - moved stickers from pseudo-elements to inline html to allow animation - added check for dependent animations to run after main animation ends

maureenlholland · 2024-11-13T15:34:36Z

media/img/firefox/nothing-personal/browser-dots.svg

moved to inline HTML for control over stroke width

maureenlholland · 2024-11-13T15:47:07Z

media/css/firefox/nothing-personal/styles.scss

-                }
-            }
+.c-text-title {
+    @include font-size(34px);


I think this is the Mozilla font-size scale on Firefox themed page, so the custom property vars were slightly off from Figma in ways that seemed worth overriding for this case

maureenlholland · 2024-11-13T15:53:45Z

DO NOT MERGE until rebased to single commit after code review & we have green light from Firefox marketing team

maureenlholland · 2024-11-13T16:00:09Z

media/css/firefox/nothing-personal/styles.scss

-            display: flex;
+        .c-content-layout {
+            display: grid;
+            grid-template-columns: 1fr [main-start] auto [main-end aside-start] 1fr [aside-end];


I thought this would help avoid more absolute positioning, but I've got to push the aside section over the main section padding anyway, so I'm on the fence about using grid over absolute positioning here. Reviewer's choice!

media/css/firefox/nothing-personal/_feature-box.scss

The mobile browser does not have this function yet. We have helper JS to detect platform and append classes, so we can hide this feature on android and ios. Default will be to show.

craigcook

This all looks awesome, really nice work. Just a few minor nits, r+wc 🦊

craigcook · 2024-11-19T23:01:41Z

bedrock/firefox/templates/firefox/nothing-personal/index.html

+    <main class="c-main">
+      <section class="c-things">
+        <div class="c-text-section mzp-l-content mzp-t-content-md mzp-t-content-nospace">
+          <h2 class="c-text-title">Ok, we admit it: we’re fast, reliable <span class="u-text-uppercase">and</span> private.</h2>


Suggestion: This span could be an em for semantic emphasis as well as presentation (and make it all-caps and non-italic in CSS)

craigcook · 2024-11-19T23:02:19Z

bedrock/firefox/templates/firefox/nothing-personal/index.html

-        <div class="c-thug-life-gif-wrapper mzp-l-content mzp-t-content-md mzp-t-content-nospace">
-          <div class="c-thug-life-gif c-detached-gif">
+        <div class="c-things-browser-fox-bush-container mzp-l-content mzp-t-content-md mzp-t-content-nospace">
+          <!-- TODO: reduced motion static image -->


Is this still TODO? Or can this comment be removed?

craigcook · 2024-11-19T23:07:56Z

bedrock/firefox/templates/firefox/nothing-personal/index.html

+  <aside class="c-aside">
+    <a class="c-aside-link" href="https://www.youtube.com/watch?v=dQw4w9WgXcQ" aria-label="Link to a Youtube video" target="_blank" rel="external noopener" data-link-text="Folder"><img src="{{ static('img/firefox/nothing-personal/folder-icon.svg') }}" alt="">Folder <br> <.< </a>
+    <a class="c-aside-link" href="https://open.spotify.com/playlist/0vvXsWCC9xrXsKd4FyS8kM" aria-label="Link to a Spotify playlist" target="_blank" rel="external noopener" data-link-text="Focus playlist"><img src="{{ static('img/firefox/nothing-personal/music-icon.svg') }}" alt="">focus <br> playlist</a>
+    <a class="c-aside-link" href="https://www.youtube.com/watch?si=RHt_agrKQEODTPRP&v=F-nFQryDB0s&feature=youtu.be" aria-label="Introducing the new Firefox...jk. It's red pandas" target="_blank" rel="external noopener" data-link-text="MyLife">


Nit: can remove some of the additional tracking params from this URL:

Suggested change

<a class="c-aside-link" href="https://www.youtube.com/watch?si=RHt_agrKQEODTPRP&v=F-nFQryDB0s&feature=youtu.be" aria-label="Introducing the new Firefox...jk. It's red pandas" target="_blank" rel="external noopener" data-link-text="MyLife">

<a class="c-aside-link" href="https://www.youtube.com/watch?v=F-nFQryDB0s" aria-label="Introducing the new Firefox...jk. It's red pandas" target="_blank" rel="external noopener" data-link-text="MyLife">

craigcook · 2024-11-19T23:10:31Z

bedrock/firefox/templates/firefox/nothing-personal/index.html

+                <li>Reset password only to be told you can’t use your existing password</li>
+              </ul>
+              <details>
+                <summary><h5>All the things!</h5></summary>


This is a really nice fallback for non-JS. 👏

craigcook · 2024-11-19T23:18:40Z

media/css/firefox/nothing-personal/_things.scss

+    }
+}
+
+.c-things-button {


Should this button also get cursor: pointer; to help hint at clickability? (Arguably the finger should only be for links but we do apply it on other non-link interactive buttons like form submits, so maybe it's universally understood as "I can click this"?)

maureenlholland force-pushed the nothing-personal-update branch from 9dfc175 to 42e2b0c Compare November 5, 2024 18:42

maureenlholland force-pushed the nothing-personal-update branch 3 times, most recently from c951830 to 140fd98 Compare November 5, 2024 20:24

maureenlholland added Do Not Merge ⚠️ Frontend HTML, CSS, JS... client side stuff WIP 🚧 Pull request is still work in progress and removed Do Not Merge ⚠️ labels Nov 5, 2024

maureenlholland force-pushed the nothing-personal-update branch from 140fd98 to 6cd4ec3 Compare November 6, 2024 21:18

Nothing Personal Updates (fix mozilla#15420)

591e454

maureenlholland force-pushed the nothing-personal-update branch from 6cd4ec3 to 591e454 Compare November 7, 2024 17:51

stephaniehobson reviewed Nov 8, 2024

View reviewed changes

bedrock/firefox/templates/firefox/nothing-personal/index.html Outdated Show resolved Hide resolved

stephaniehobson reviewed Nov 8, 2024

View reviewed changes

maureenlholland added 6 commits November 12, 2024 08:37

design feedback: increase body copy weight

803cd53

design feedback: adjust border color and browser box radius

3a2aac7

design feedback: keep browser bar title centered on mobile

f3d2057

design feedback: reduce spacing for no-asset section gaps

602fd09

design feedback: avoid layout shift as random responses change

6d75287

design feedback: add stickers after browser window pop-in

0437035

- re-exported foxy, heart, and smiley svgs to get rotations from assets - moved stickers from pseudo-elements to inline html to allow animation - added check for dependent animations to run after main animation ends

maureenlholland force-pushed the nothing-personal-update branch from b18ad9e to 0437035 Compare November 12, 2024 16:06

maureenlholland added 3 commits November 12, 2024 11:11

analytics: add data-cta-text for randomizer button

a888d4f

demo: options for drawing attention to button

0dc59cc

design feedback: update stroke widths

df31bcd

maureenlholland force-pushed the nothing-personal-update branch from 4eabf9e to df31bcd Compare November 13, 2024 13:39

maureenlholland added 2 commits November 13, 2024 08:54

design feedback: increase fox bush gif by 10%

d1cccc2

design feedback: link sidebar icon to red panda video

ce429f0

maureenlholland force-pushed the nothing-personal-update branch from 2912dee to ce429f0 Compare November 13, 2024 14:01

maureenlholland added 2 commits November 13, 2024 09:07

Use html entities for symbols

aa78358

Browser support fallbacks

7a473c7

maureenlholland force-pushed the nothing-personal-update branch from 190fe02 to 7a473c7 Compare November 13, 2024 15:08

Handle reduced motion preferences

609ade8

maureenlholland commented Nov 13, 2024

View reviewed changes

media/img/firefox/nothing-personal/browser-dots.svg Outdated

Copy link

Collaborator Author

maureenlholland Nov 13, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

moved to inline HTML for control over stroke width

maureenlholland commented Nov 13, 2024

View reviewed changes

Organization and minor clean-up

392ca93

maureenlholland added Do Not Merge ⚠️ and removed WIP 🚧 Pull request is still work in progress labels Nov 13, 2024

maureenlholland marked this pull request as ready for review November 13, 2024 15:54

maureenlholland changed the title ~~[WIP] Nothing personal updates (fixes #15420)~~ Nothing personal updates (fixes #15420) Nov 13, 2024

maureenlholland commented Nov 13, 2024

View reviewed changes

maureenlholland added Needs Review Awaiting code review Review: M Code review time: 1-2 hours labels Nov 13, 2024

maureenlholland commented Nov 13, 2024

View reviewed changes

media/css/firefox/nothing-personal/_feature-box.scss Outdated Show resolved Hide resolved

Remove easy switching feature on mobile-size screens

7048d6e

The mobile browser does not have this function yet. We have helper JS to detect platform and append classes, so we can hide this feature on android and ios. Default will be to show.

maureenlholland force-pushed the nothing-personal-update branch from 686fc24 to 7048d6e Compare November 13, 2024 18:32

craigcook approved these changes Nov 19, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Nothing personal updates (fixes #15420) #15445

Nothing personal updates (fixes #15420) #15445

maureenlholland commented Nov 5, 2024 •

edited

Loading

codecov bot commented Nov 5, 2024 •

edited

Loading

ingramjr commented Nov 7, 2024 •

edited

Loading

slightlyoffbeat commented Nov 8, 2024

stephaniehobson left a comment

maureenlholland Nov 13, 2024

maureenlholland Nov 13, 2024

maureenlholland commented Nov 13, 2024

maureenlholland Nov 13, 2024 •

edited

Loading

craigcook left a comment

craigcook Nov 19, 2024

craigcook Nov 19, 2024

craigcook Nov 19, 2024

craigcook Nov 19, 2024

craigcook Nov 19, 2024

	<a class="c-aside-link" href="https://www.youtube.com/watch?si=RHt_agrKQEODTPRP&v=F-nFQryDB0s&feature=youtu.be" aria-label="Introducing the new Firefox...jk. It's red pandas" target="_blank" rel="external noopener" data-link-text="MyLife">
	<a class="c-aside-link" href="https://www.youtube.com/watch?v=F-nFQryDB0s" aria-label="Introducing the new Firefox...jk. It's red pandas" target="_blank" rel="external noopener" data-link-text="MyLife">

Nothing personal updates (fixes #15420) #15445

Are you sure you want to change the base?

Nothing personal updates (fixes #15420) #15445

Conversation

maureenlholland commented Nov 5, 2024 • edited Loading

One-line summary

Significant changes and points to review

Issue / Bugzilla link

Testing

codecov bot commented Nov 5, 2024 • edited Loading

Codecov Report

ingramjr commented Nov 7, 2024 • edited Loading

slightlyoffbeat commented Nov 8, 2024

stephaniehobson left a comment

Choose a reason for hiding this comment

maureenlholland Nov 13, 2024

Choose a reason for hiding this comment

maureenlholland Nov 13, 2024

Choose a reason for hiding this comment

maureenlholland commented Nov 13, 2024

maureenlholland Nov 13, 2024 • edited Loading

Choose a reason for hiding this comment

craigcook left a comment

Choose a reason for hiding this comment

craigcook Nov 19, 2024

Choose a reason for hiding this comment

craigcook Nov 19, 2024

Choose a reason for hiding this comment

craigcook Nov 19, 2024

Choose a reason for hiding this comment

craigcook Nov 19, 2024

Choose a reason for hiding this comment

craigcook Nov 19, 2024

Choose a reason for hiding this comment

maureenlholland commented Nov 5, 2024 •

edited

Loading

codecov bot commented Nov 5, 2024 •

edited

Loading

ingramjr commented Nov 7, 2024 •

edited

Loading

maureenlholland Nov 13, 2024 •

edited

Loading