Closed Bug 1640027 Opened 4 months ago Closed 3 months ago

Add zap style to highlight word in multistage about:welcome screen title

Categories

(Firefox :: Messaging System, enhancement, P1)

enhancement

Tracking

()

VERIFIED FIXED
Firefox 79
Iteration:
79.2 - June 15 - June 28
Tracking Status
firefox78 --- wontfix
firefox79 --- verified

People

(Reporter: pdahiya, Assigned: emcminn)

References

(Blocks 1 open bug)

Details

Attachments

(1 file)

Scope of this bug is to add zap style as shown in specs here
https://www.figma.com/file/KqQZwwLhft9cUIcBtMVmbz/Desktop-First-Run?node-id=45%3A2944

This follows pattern from Protocol design system for Mozilla and Firefox websites
https://protocol.mozilla.org/patterns/atoms/zap.html

See related work by Jgruen on high fidelity prototype using zap:
https://firefox-onboard.herokuapp.com
https://github.com/johngruen/onboarding-app

Prototype is built using application framework https://svelte.dev/

Priority: -- → P2
Assignee: nobody → emcminn
Iteration: --- → 79.1 - June 1 - June 14
Priority: P2 → P1
Duplicate of this bug: 1645028
Iteration: 79.1 - June 1 - June 14 → 79.2 - June 15 - June 28
Pushed by emcminn@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/41883b5892bc
Add Zap component that allows zap style to be added to headings r=pdahiya,fluent-reviewers
Status: NEW → RESOLVED
Closed: 3 months ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 79

I have verified that the zap style is correctly displayed, according to figma, using Firefox Nightly 79.0a1 (Build ID: 20200628212804) on Windows 10 x64, macOS 10.15, and Ubuntu Linux 18.04 by doing the following.

  1. Open the Firefox build with a new profile.
  2. Navigate to about:config.
  3. Add the following value to the "browser.aboutwelcome.overrideContent" pref:
    • "{"id": "multi-stage-welcome-importable-theme","template": "multistage","screens": [{"id": "AW_GET_STARTED","order": 0,"content": {"zap": true,"title": { "string_id": "onboarding-multistage-welcome-header" }, "subtitle": "The fast, safe, and private browser that's backed by a non-profit.", "primary_button": {"label": "Start Setup","action":{"navigate": true}}, "secondary_button": {"text": "Have an account?", "label": "Sign in","position": "top", "action":{"type": "OPEN_URL","addFlowParams": true, "data":{"args": "https://accounts.firefox.com/?service=sync&action=email&context=fx_desktop_v3&entrypoint=activity-stream-firstrun&style=trailhead","where": "current"}}}}},{"id": "AW_IMPORT_SETTINGS","order": 1,"content": {"zap": true,"title": "Import your passwords, bookmarks,\u00a0and more","subtitle": "Coming from another browser? It's easy to bring everything to Firefox.","tiles": {"type": "topsites"}, "primary_button": {"label": "Start Import", "action":{"type": "SHOW_MIGRATION_WIZARD","navigate": true}},"secondary_button": {"label": "Not now","action":{"navigate": true}}}},{"id": "AW_CHOOSE_THEME","order": 2,"content": {"zap": true, "title": "Choose a look","subtitle": "Personalize Firefox with a theme.","tiles": {"type": "theme","action": {"theme": "<event>"}, "data": [{"theme": "light", "label": "Light"}, {"theme": "dark", "label": "Dark"}]}, "primary_button": {"label": "Save Theme", "action":{"navigate": true}},"secondary_button": {"label": "Not now","action":{"theme": "default","navigate": true}}}}]}"
  4. Restart the browser and navigate to "about:welcome"
Status: RESOLVED → VERIFIED
You need to log in before you can comment on or make changes to this bug.