Bug 1550098 - Trailhead initial uplift for Firefox 67.0 r=flod a=pascalc DEVEDITION_67_0b19_BUILD1 DEVEDITION_67_0b19_RELEASE FIREFOX_67_0b19_BUILD1 FIREFOX_67_0b19_RELEASE
authorEd Lee <edilee@mozilla.com>
Thu, 09 May 2019 21:40:22 +0300
changeset 523530 9c4cd169d5d07b75453e6574e13bf4f912814fb0
parent 523529 306b6635505681131acd230eb8685d2c4c54311c
child 523531 c181666e8bfa382f04a2550a0d2a35422a06bbc8
push id11256
push usernbeleuzu@mozilla.com
push dateThu, 09 May 2019 18:52:24 +0000
treeherdermozilla-beta@9c4cd169d5d0 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersflod, pascalc
bugs1550098
milestone67.0
Bug 1550098 - Trailhead initial uplift for Firefox 67.0 r=flod a=pascalc Reviewers: r1cky, flod Reviewed By: r1cky, flod Subscribers: pascalc, Mardak, flod Tags: #secure-revision, #bmo-mozilla-employee-confidential Bug #: 1550098 Differential Revision: https://phabricator.services.mozilla.com/D30451
browser/app/profile/firefox.js
browser/components/newtab/.eslintrc.jsx-a11y.js
browser/components/newtab/bin/render-activity-stream-html.js
browser/components/newtab/common/Actions.jsm
browser/components/newtab/content-src/asrouter/asrouter-content.jsx
browser/components/newtab/content-src/asrouter/components/ModalOverlay/ModalOverlay.jsx
browser/components/newtab/content-src/asrouter/components/ModalOverlay/_ModalOverlay.scss
browser/components/newtab/content-src/asrouter/docs/targeting-attributes.md
browser/components/newtab/content-src/asrouter/templates/OnboardingMessage/OnboardingMessage.jsx
browser/components/newtab/content-src/asrouter/templates/OnboardingMessage/_OnboardingMessage.scss
browser/components/newtab/content-src/asrouter/templates/StartupOverlay/StartupOverlay.jsx
browser/components/newtab/content-src/asrouter/templates/Trailhead/Trailhead.jsx
browser/components/newtab/content-src/asrouter/templates/Trailhead/_Trailhead.scss
browser/components/newtab/content-src/components/ASRouterAdmin/ASRouterAdmin.jsx
browser/components/newtab/content-src/components/ASRouterAdmin/ASRouterAdmin.scss
browser/components/newtab/content-src/components/Base/Base.jsx
browser/components/newtab/content-src/components/Search/_Search.scss
browser/components/newtab/content-src/styles/_activity-stream.scss
browser/components/newtab/content-src/styles/_theme.scss
browser/components/newtab/content-src/styles/_variables.scss
browser/components/newtab/css/activity-stream-linux.css
browser/components/newtab/css/activity-stream-mac.css
browser/components/newtab/css/activity-stream-windows.css
browser/components/newtab/data/content/activity-stream.bundle.js
browser/components/newtab/data/content/assets/sync-devices-trailhead.svg
browser/components/newtab/data/content/assets/trailhead/accounts-form-bg.jpg
browser/components/newtab/data/content/assets/trailhead/benefit-knowledge.png
browser/components/newtab/data/content/assets/trailhead/benefit-privacy.png
browser/components/newtab/data/content/assets/trailhead/benefit-products.png
browser/components/newtab/data/content/assets/trailhead/card-illo-devices.png
browser/components/newtab/data/content/assets/trailhead/card-illo-fbcont.png
browser/components/newtab/data/content/assets/trailhead/card-illo-ffmonitor.png
browser/components/newtab/data/content/assets/trailhead/card-illo-ffsend.png
browser/components/newtab/data/content/assets/trailhead/card-illo-lockwise.png
browser/components/newtab/data/content/assets/trailhead/card-illo-mobile.png
browser/components/newtab/data/content/assets/trailhead/card-illo-pledge.png
browser/components/newtab/data/content/assets/trailhead/card-illo-pocket.png
browser/components/newtab/data/content/assets/trailhead/card-illo-private.png
browser/components/newtab/data/content/assets/trailhead/card-illo-sendtab.png
browser/components/newtab/data/content/assets/trailhead/card-illo-tracking.png
browser/components/newtab/data/content/assets/trailhead/firefox-logo.png
browser/components/newtab/docs/v2-system-addon/data_events.md
browser/components/newtab/lib/ASRouter.jsm
browser/components/newtab/lib/OnboardingMessageProvider.jsm
browser/components/newtab/lib/TelemetryFeed.jsm
browser/components/newtab/lib/UTEventReporting.jsm
browser/components/newtab/mochitest.sh
browser/components/newtab/package-lock.json
browser/components/newtab/package.json
browser/components/newtab/prerendered/locales/ach/activity-stream-noscripts.html
browser/components/newtab/prerendered/locales/ach/activity-stream-prerendered-noscripts.html
browser/components/newtab/prerendered/locales/ach/activity-stream-prerendered.html
browser/components/newtab/prerendered/locales/ach/activity-stream.html
browser/components/newtab/prerendered/locales/an/activity-stream-noscripts.html
browser/components/newtab/prerendered/locales/an/activity-stream-prerendered-noscripts.html
browser/components/newtab/prerendered/locales/an/activity-stream-prerendered.html
browser/components/newtab/prerendered/locales/an/activity-stream.html
browser/components/newtab/prerendered/locales/ar/activity-stream-noscripts.html
browser/components/newtab/prerendered/locales/ar/activity-stream-prerendered-noscripts.html
browser/components/newtab/prerendered/locales/ar/activity-stream-prerendered.html
browser/components/newtab/prerendered/locales/ar/activity-stream.html
browser/components/newtab/prerendered/locales/ast/activity-stream-noscripts.html
browser/components/newtab/prerendered/locales/ast/activity-stream-prerendered-noscripts.html
browser/components/newtab/prerendered/locales/ast/activity-stream-prerendered.html
browser/components/newtab/prerendered/locales/ast/activity-stream.html
browser/components/newtab/prerendered/locales/az/activity-stream-noscripts.html
browser/components/newtab/prerendered/locales/az/activity-stream-prerendered-noscripts.html
browser/components/newtab/prerendered/locales/az/activity-stream-prerendered.html
browser/components/newtab/prerendered/locales/az/activity-stream.html
browser/components/newtab/prerendered/locales/be/activity-stream-noscripts.html
browser/components/newtab/prerendered/locales/be/activity-stream-prerendered-noscripts.html
browser/components/newtab/prerendered/locales/be/activity-stream-prerendered.html
browser/components/newtab/prerendered/locales/be/activity-stream.html
browser/components/newtab/prerendered/locales/bg/activity-stream-noscripts.html
browser/components/newtab/prerendered/locales/bg/activity-stream-prerendered-noscripts.html
browser/components/newtab/prerendered/locales/bg/activity-stream-prerendered.html
browser/components/newtab/prerendered/locales/bg/activity-stream.html
browser/components/newtab/prerendered/locales/bn-BD/activity-stream-noscripts.html
browser/components/newtab/prerendered/locales/bn-BD/activity-stream-prerendered-noscripts.html
browser/components/newtab/prerendered/locales/bn-BD/activity-stream-prerendered.html
browser/components/newtab/prerendered/locales/bn-BD/activity-stream.html
browser/components/newtab/prerendered/locales/bn-IN/activity-stream-noscripts.html
browser/components/newtab/prerendered/locales/bn-IN/activity-stream-prerendered-noscripts.html
browser/components/newtab/prerendered/locales/bn-IN/activity-stream-prerendered.html
browser/components/newtab/prerendered/locales/bn-IN/activity-stream.html
browser/components/newtab/prerendered/locales/br/activity-stream-noscripts.html
browser/components/newtab/prerendered/locales/br/activity-stream-prerendered-noscripts.html
browser/components/newtab/prerendered/locales/br/activity-stream-prerendered.html
browser/components/newtab/prerendered/locales/br/activity-stream.html
browser/components/newtab/prerendered/locales/bs/activity-stream-noscripts.html
browser/components/newtab/prerendered/locales/bs/activity-stream-prerendered-noscripts.html
browser/components/newtab/prerendered/locales/bs/activity-stream-prerendered.html
browser/components/newtab/prerendered/locales/bs/activity-stream.html
browser/components/newtab/prerendered/locales/ca/activity-stream-noscripts.html
browser/components/newtab/prerendered/locales/ca/activity-stream-prerendered-noscripts.html
browser/components/newtab/prerendered/locales/ca/activity-stream-prerendered.html
browser/components/newtab/prerendered/locales/ca/activity-stream.html
browser/components/newtab/prerendered/locales/cak/activity-stream-noscripts.html
browser/components/newtab/prerendered/locales/cak/activity-stream-prerendered-noscripts.html
browser/components/newtab/prerendered/locales/cak/activity-stream-prerendered.html
browser/components/newtab/prerendered/locales/cak/activity-stream.html
browser/components/newtab/prerendered/locales/crh/activity-stream-noscripts.html
browser/components/newtab/prerendered/locales/crh/activity-stream-prerendered-noscripts.html
browser/components/newtab/prerendered/locales/crh/activity-stream-prerendered.html
browser/components/newtab/prerendered/locales/crh/activity-stream.html
browser/components/newtab/prerendered/locales/cs/activity-stream-noscripts.html
browser/components/newtab/prerendered/locales/cs/activity-stream-prerendered-noscripts.html
browser/components/newtab/prerendered/locales/cs/activity-stream-prerendered.html
browser/components/newtab/prerendered/locales/cs/activity-stream.html
browser/components/newtab/prerendered/locales/cy/activity-stream-noscripts.html
browser/components/newtab/prerendered/locales/cy/activity-stream-prerendered-noscripts.html
browser/components/newtab/prerendered/locales/cy/activity-stream-prerendered.html
browser/components/newtab/prerendered/locales/cy/activity-stream.html
browser/components/newtab/prerendered/locales/da/activity-stream-noscripts.html
browser/components/newtab/prerendered/locales/da/activity-stream-prerendered-noscripts.html
browser/components/newtab/prerendered/locales/da/activity-stream-prerendered.html
browser/components/newtab/prerendered/locales/da/activity-stream.html
browser/components/newtab/prerendered/locales/de/activity-stream-noscripts.html
browser/components/newtab/prerendered/locales/de/activity-stream-prerendered-noscripts.html
browser/components/newtab/prerendered/locales/de/activity-stream-prerendered.html
browser/components/newtab/prerendered/locales/de/activity-stream.html
browser/components/newtab/prerendered/locales/dsb/activity-stream-noscripts.html
browser/components/newtab/prerendered/locales/dsb/activity-stream-prerendered-noscripts.html
browser/components/newtab/prerendered/locales/dsb/activity-stream-prerendered.html
browser/components/newtab/prerendered/locales/dsb/activity-stream.html
browser/components/newtab/prerendered/locales/el/activity-stream-noscripts.html
browser/components/newtab/prerendered/locales/el/activity-stream-prerendered-noscripts.html
browser/components/newtab/prerendered/locales/el/activity-stream-prerendered.html
browser/components/newtab/prerendered/locales/el/activity-stream.html
browser/components/newtab/prerendered/locales/en-CA/activity-stream-noscripts.html
browser/components/newtab/prerendered/locales/en-CA/activity-stream-prerendered-noscripts.html
browser/components/newtab/prerendered/locales/en-CA/activity-stream-prerendered.html
browser/components/newtab/prerendered/locales/en-CA/activity-stream.html
browser/components/newtab/prerendered/locales/en-GB/activity-stream-noscripts.html
browser/components/newtab/prerendered/locales/en-GB/activity-stream-prerendered-noscripts.html
browser/components/newtab/prerendered/locales/en-GB/activity-stream-prerendered.html
browser/components/newtab/prerendered/locales/en-GB/activity-stream.html
browser/components/newtab/prerendered/locales/en-US/activity-stream-noscripts.html
browser/components/newtab/prerendered/locales/en-US/activity-stream-prerendered-noscripts.html
browser/components/newtab/prerendered/locales/en-US/activity-stream-prerendered.html
browser/components/newtab/prerendered/locales/en-US/activity-stream.html
browser/components/newtab/prerendered/locales/eo/activity-stream-noscripts.html
browser/components/newtab/prerendered/locales/eo/activity-stream-prerendered-noscripts.html
browser/components/newtab/prerendered/locales/eo/activity-stream-prerendered.html
browser/components/newtab/prerendered/locales/eo/activity-stream.html
browser/components/newtab/prerendered/locales/es-AR/activity-stream-noscripts.html
browser/components/newtab/prerendered/locales/es-AR/activity-stream-prerendered-noscripts.html
browser/components/newtab/prerendered/locales/es-AR/activity-stream-prerendered.html
browser/components/newtab/prerendered/locales/es-AR/activity-stream.html
browser/components/newtab/prerendered/locales/es-CL/activity-stream-noscripts.html
browser/components/newtab/prerendered/locales/es-CL/activity-stream-prerendered-noscripts.html
browser/components/newtab/prerendered/locales/es-CL/activity-stream-prerendered.html
browser/components/newtab/prerendered/locales/es-CL/activity-stream.html
browser/components/newtab/prerendered/locales/es-ES/activity-stream-noscripts.html
browser/components/newtab/prerendered/locales/es-ES/activity-stream-prerendered-noscripts.html
browser/components/newtab/prerendered/locales/es-ES/activity-stream-prerendered.html
browser/components/newtab/prerendered/locales/es-ES/activity-stream.html
browser/components/newtab/prerendered/locales/es-MX/activity-stream-noscripts.html
browser/components/newtab/prerendered/locales/es-MX/activity-stream-prerendered-noscripts.html
browser/components/newtab/prerendered/locales/es-MX/activity-stream-prerendered.html
browser/components/newtab/prerendered/locales/es-MX/activity-stream.html
browser/components/newtab/prerendered/locales/et/activity-stream-noscripts.html
browser/components/newtab/prerendered/locales/et/activity-stream-prerendered-noscripts.html
browser/components/newtab/prerendered/locales/et/activity-stream-prerendered.html
browser/components/newtab/prerendered/locales/et/activity-stream.html
browser/components/newtab/prerendered/locales/eu/activity-stream-noscripts.html
browser/components/newtab/prerendered/locales/eu/activity-stream-prerendered-noscripts.html
browser/components/newtab/prerendered/locales/eu/activity-stream-prerendered.html
browser/components/newtab/prerendered/locales/eu/activity-stream.html
browser/components/newtab/prerendered/locales/fa/activity-stream-noscripts.html
browser/components/newtab/prerendered/locales/fa/activity-stream-prerendered-noscripts.html
browser/components/newtab/prerendered/locales/fa/activity-stream-prerendered.html
browser/components/newtab/prerendered/locales/fa/activity-stream.html
browser/components/newtab/prerendered/locales/ff/activity-stream-noscripts.html
browser/components/newtab/prerendered/locales/ff/activity-stream-prerendered-noscripts.html
browser/components/newtab/prerendered/locales/ff/activity-stream-prerendered.html
browser/components/newtab/prerendered/locales/ff/activity-stream.html
browser/components/newtab/prerendered/locales/fi/activity-stream-noscripts.html
browser/components/newtab/prerendered/locales/fi/activity-stream-prerendered-noscripts.html
browser/components/newtab/prerendered/locales/fi/activity-stream-prerendered.html
browser/components/newtab/prerendered/locales/fi/activity-stream.html
browser/components/newtab/prerendered/locales/fr/activity-stream-noscripts.html
browser/components/newtab/prerendered/locales/fr/activity-stream-prerendered-noscripts.html
browser/components/newtab/prerendered/locales/fr/activity-stream-prerendered.html
browser/components/newtab/prerendered/locales/fr/activity-stream.html
browser/components/newtab/prerendered/locales/fy-NL/activity-stream-noscripts.html
browser/components/newtab/prerendered/locales/fy-NL/activity-stream-prerendered-noscripts.html
browser/components/newtab/prerendered/locales/fy-NL/activity-stream-prerendered.html
browser/components/newtab/prerendered/locales/fy-NL/activity-stream.html
browser/components/newtab/prerendered/locales/ga-IE/activity-stream-noscripts.html
browser/components/newtab/prerendered/locales/ga-IE/activity-stream-prerendered-noscripts.html
browser/components/newtab/prerendered/locales/ga-IE/activity-stream-prerendered.html
browser/components/newtab/prerendered/locales/ga-IE/activity-stream.html
browser/components/newtab/prerendered/locales/gd/activity-stream-noscripts.html
browser/components/newtab/prerendered/locales/gd/activity-stream-prerendered-noscripts.html
browser/components/newtab/prerendered/locales/gd/activity-stream-prerendered.html
browser/components/newtab/prerendered/locales/gd/activity-stream.html
browser/components/newtab/prerendered/locales/gl/activity-stream-noscripts.html
browser/components/newtab/prerendered/locales/gl/activity-stream-prerendered-noscripts.html
browser/components/newtab/prerendered/locales/gl/activity-stream-prerendered.html
browser/components/newtab/prerendered/locales/gl/activity-stream.html
browser/components/newtab/prerendered/locales/gn/activity-stream-noscripts.html
browser/components/newtab/prerendered/locales/gn/activity-stream-prerendered-noscripts.html
browser/components/newtab/prerendered/locales/gn/activity-stream-prerendered.html
browser/components/newtab/prerendered/locales/gn/activity-stream.html
browser/components/newtab/prerendered/locales/gu-IN/activity-stream-noscripts.html
browser/components/newtab/prerendered/locales/gu-IN/activity-stream-prerendered-noscripts.html
browser/components/newtab/prerendered/locales/gu-IN/activity-stream-prerendered.html
browser/components/newtab/prerendered/locales/gu-IN/activity-stream.html
browser/components/newtab/prerendered/locales/he/activity-stream-noscripts.html
browser/components/newtab/prerendered/locales/he/activity-stream-prerendered-noscripts.html
browser/components/newtab/prerendered/locales/he/activity-stream-prerendered.html
browser/components/newtab/prerendered/locales/he/activity-stream.html
browser/components/newtab/prerendered/locales/hi-IN/activity-stream-noscripts.html
browser/components/newtab/prerendered/locales/hi-IN/activity-stream-prerendered-noscripts.html
browser/components/newtab/prerendered/locales/hi-IN/activity-stream-prerendered.html
browser/components/newtab/prerendered/locales/hi-IN/activity-stream.html
browser/components/newtab/prerendered/locales/hr/activity-stream-noscripts.html
browser/components/newtab/prerendered/locales/hr/activity-stream-prerendered-noscripts.html
browser/components/newtab/prerendered/locales/hr/activity-stream-prerendered.html
browser/components/newtab/prerendered/locales/hr/activity-stream.html
browser/components/newtab/prerendered/locales/hsb/activity-stream-noscripts.html
browser/components/newtab/prerendered/locales/hsb/activity-stream-prerendered-noscripts.html
browser/components/newtab/prerendered/locales/hsb/activity-stream-prerendered.html
browser/components/newtab/prerendered/locales/hsb/activity-stream.html
browser/components/newtab/prerendered/locales/hu/activity-stream-noscripts.html
browser/components/newtab/prerendered/locales/hu/activity-stream-prerendered-noscripts.html
browser/components/newtab/prerendered/locales/hu/activity-stream-prerendered.html
browser/components/newtab/prerendered/locales/hu/activity-stream.html
browser/components/newtab/prerendered/locales/hy-AM/activity-stream-noscripts.html
browser/components/newtab/prerendered/locales/hy-AM/activity-stream-prerendered-noscripts.html
browser/components/newtab/prerendered/locales/hy-AM/activity-stream-prerendered.html
browser/components/newtab/prerendered/locales/hy-AM/activity-stream.html
browser/components/newtab/prerendered/locales/ia/activity-stream-noscripts.html
browser/components/newtab/prerendered/locales/ia/activity-stream-prerendered-noscripts.html
browser/components/newtab/prerendered/locales/ia/activity-stream-prerendered.html
browser/components/newtab/prerendered/locales/ia/activity-stream.html
browser/components/newtab/prerendered/locales/id/activity-stream-noscripts.html
browser/components/newtab/prerendered/locales/id/activity-stream-prerendered-noscripts.html
browser/components/newtab/prerendered/locales/id/activity-stream-prerendered.html
browser/components/newtab/prerendered/locales/id/activity-stream.html
browser/components/newtab/prerendered/locales/is/activity-stream-noscripts.html
browser/components/newtab/prerendered/locales/is/activity-stream-prerendered-noscripts.html
browser/components/newtab/prerendered/locales/is/activity-stream-prerendered.html
browser/components/newtab/prerendered/locales/is/activity-stream.html
browser/components/newtab/prerendered/locales/it/activity-stream-noscripts.html
browser/components/newtab/prerendered/locales/it/activity-stream-prerendered-noscripts.html
browser/components/newtab/prerendered/locales/it/activity-stream-prerendered.html
browser/components/newtab/prerendered/locales/it/activity-stream.html
browser/components/newtab/prerendered/locales/ja-JP-mac/activity-stream-noscripts.html
browser/components/newtab/prerendered/locales/ja-JP-mac/activity-stream-prerendered-noscripts.html
browser/components/newtab/prerendered/locales/ja-JP-mac/activity-stream-prerendered.html
browser/components/newtab/prerendered/locales/ja-JP-mac/activity-stream.html
browser/components/newtab/prerendered/locales/ja/activity-stream-noscripts.html
browser/components/newtab/prerendered/locales/ja/activity-stream-prerendered-noscripts.html
browser/components/newtab/prerendered/locales/ja/activity-stream-prerendered.html
browser/components/newtab/prerendered/locales/ja/activity-stream.html
browser/components/newtab/prerendered/locales/ka/activity-stream-noscripts.html
browser/components/newtab/prerendered/locales/ka/activity-stream-prerendered-noscripts.html
browser/components/newtab/prerendered/locales/ka/activity-stream-prerendered.html
browser/components/newtab/prerendered/locales/ka/activity-stream.html
browser/components/newtab/prerendered/locales/kab/activity-stream-noscripts.html
browser/components/newtab/prerendered/locales/kab/activity-stream-prerendered-noscripts.html
browser/components/newtab/prerendered/locales/kab/activity-stream-prerendered.html
browser/components/newtab/prerendered/locales/kab/activity-stream.html
browser/components/newtab/prerendered/locales/kk/activity-stream-noscripts.html
browser/components/newtab/prerendered/locales/kk/activity-stream-prerendered-noscripts.html
browser/components/newtab/prerendered/locales/kk/activity-stream-prerendered.html
browser/components/newtab/prerendered/locales/kk/activity-stream.html
browser/components/newtab/prerendered/locales/km/activity-stream-noscripts.html
browser/components/newtab/prerendered/locales/km/activity-stream-prerendered-noscripts.html
browser/components/newtab/prerendered/locales/km/activity-stream-prerendered.html
browser/components/newtab/prerendered/locales/km/activity-stream.html
browser/components/newtab/prerendered/locales/kn/activity-stream-noscripts.html
browser/components/newtab/prerendered/locales/kn/activity-stream-prerendered-noscripts.html
browser/components/newtab/prerendered/locales/kn/activity-stream-prerendered.html
browser/components/newtab/prerendered/locales/kn/activity-stream.html
browser/components/newtab/prerendered/locales/ko/activity-stream-noscripts.html
browser/components/newtab/prerendered/locales/ko/activity-stream-prerendered-noscripts.html
browser/components/newtab/prerendered/locales/ko/activity-stream-prerendered.html
browser/components/newtab/prerendered/locales/ko/activity-stream.html
browser/components/newtab/prerendered/locales/lij/activity-stream-noscripts.html
browser/components/newtab/prerendered/locales/lij/activity-stream-prerendered-noscripts.html
browser/components/newtab/prerendered/locales/lij/activity-stream-prerendered.html
browser/components/newtab/prerendered/locales/lij/activity-stream.html
browser/components/newtab/prerendered/locales/lo/activity-stream-noscripts.html
browser/components/newtab/prerendered/locales/lo/activity-stream-prerendered-noscripts.html
browser/components/newtab/prerendered/locales/lo/activity-stream-prerendered.html
browser/components/newtab/prerendered/locales/lo/activity-stream.html
browser/components/newtab/prerendered/locales/lt/activity-stream-noscripts.html
browser/components/newtab/prerendered/locales/lt/activity-stream-prerendered-noscripts.html
browser/components/newtab/prerendered/locales/lt/activity-stream-prerendered.html
browser/components/newtab/prerendered/locales/lt/activity-stream.html
browser/components/newtab/prerendered/locales/ltg/activity-stream-noscripts.html
browser/components/newtab/prerendered/locales/ltg/activity-stream-prerendered-noscripts.html
browser/components/newtab/prerendered/locales/ltg/activity-stream-prerendered.html
browser/components/newtab/prerendered/locales/ltg/activity-stream.html
browser/components/newtab/prerendered/locales/lv/activity-stream-noscripts.html
browser/components/newtab/prerendered/locales/lv/activity-stream-prerendered-noscripts.html
browser/components/newtab/prerendered/locales/lv/activity-stream-prerendered.html
browser/components/newtab/prerendered/locales/lv/activity-stream.html
browser/components/newtab/prerendered/locales/mai/activity-stream-noscripts.html
browser/components/newtab/prerendered/locales/mai/activity-stream-prerendered-noscripts.html
browser/components/newtab/prerendered/locales/mai/activity-stream-prerendered.html
browser/components/newtab/prerendered/locales/mai/activity-stream.html
browser/components/newtab/prerendered/locales/mk/activity-stream-noscripts.html
browser/components/newtab/prerendered/locales/mk/activity-stream-prerendered-noscripts.html
browser/components/newtab/prerendered/locales/mk/activity-stream-prerendered.html
browser/components/newtab/prerendered/locales/mk/activity-stream.html
browser/components/newtab/prerendered/locales/ml/activity-stream-noscripts.html
browser/components/newtab/prerendered/locales/ml/activity-stream-prerendered-noscripts.html
browser/components/newtab/prerendered/locales/ml/activity-stream-prerendered.html
browser/components/newtab/prerendered/locales/ml/activity-stream.html
browser/components/newtab/prerendered/locales/mr/activity-stream-noscripts.html
browser/components/newtab/prerendered/locales/mr/activity-stream-prerendered-noscripts.html
browser/components/newtab/prerendered/locales/mr/activity-stream-prerendered.html
browser/components/newtab/prerendered/locales/mr/activity-stream.html
browser/components/newtab/prerendered/locales/ms/activity-stream-noscripts.html
browser/components/newtab/prerendered/locales/ms/activity-stream-prerendered-noscripts.html
browser/components/newtab/prerendered/locales/ms/activity-stream-prerendered.html
browser/components/newtab/prerendered/locales/ms/activity-stream.html
browser/components/newtab/prerendered/locales/my/activity-stream-noscripts.html
browser/components/newtab/prerendered/locales/my/activity-stream-prerendered-noscripts.html
browser/components/newtab/prerendered/locales/my/activity-stream-prerendered.html
browser/components/newtab/prerendered/locales/my/activity-stream.html
browser/components/newtab/prerendered/locales/nb-NO/activity-stream-noscripts.html
browser/components/newtab/prerendered/locales/nb-NO/activity-stream-prerendered-noscripts.html
browser/components/newtab/prerendered/locales/nb-NO/activity-stream-prerendered.html
browser/components/newtab/prerendered/locales/nb-NO/activity-stream.html
browser/components/newtab/prerendered/locales/ne-NP/activity-stream-noscripts.html
browser/components/newtab/prerendered/locales/ne-NP/activity-stream-prerendered-noscripts.html
browser/components/newtab/prerendered/locales/ne-NP/activity-stream-prerendered.html
browser/components/newtab/prerendered/locales/ne-NP/activity-stream.html
browser/components/newtab/prerendered/locales/nl/activity-stream-noscripts.html
browser/components/newtab/prerendered/locales/nl/activity-stream-prerendered-noscripts.html
browser/components/newtab/prerendered/locales/nl/activity-stream-prerendered.html
browser/components/newtab/prerendered/locales/nl/activity-stream.html
browser/components/newtab/prerendered/locales/nn-NO/activity-stream-noscripts.html
browser/components/newtab/prerendered/locales/nn-NO/activity-stream-prerendered-noscripts.html
browser/components/newtab/prerendered/locales/nn-NO/activity-stream-prerendered.html
browser/components/newtab/prerendered/locales/nn-NO/activity-stream.html
browser/components/newtab/prerendered/locales/oc/activity-stream-noscripts.html
browser/components/newtab/prerendered/locales/oc/activity-stream-prerendered-noscripts.html
browser/components/newtab/prerendered/locales/oc/activity-stream-prerendered.html
browser/components/newtab/prerendered/locales/oc/activity-stream.html
browser/components/newtab/prerendered/locales/pa-IN/activity-stream-noscripts.html
browser/components/newtab/prerendered/locales/pa-IN/activity-stream-prerendered-noscripts.html
browser/components/newtab/prerendered/locales/pa-IN/activity-stream-prerendered.html
browser/components/newtab/prerendered/locales/pa-IN/activity-stream.html
browser/components/newtab/prerendered/locales/pl/activity-stream-noscripts.html
browser/components/newtab/prerendered/locales/pl/activity-stream-prerendered-noscripts.html
browser/components/newtab/prerendered/locales/pl/activity-stream-prerendered.html
browser/components/newtab/prerendered/locales/pl/activity-stream.html
browser/components/newtab/prerendered/locales/pt-BR/activity-stream-noscripts.html
browser/components/newtab/prerendered/locales/pt-BR/activity-stream-prerendered-noscripts.html
browser/components/newtab/prerendered/locales/pt-BR/activity-stream-prerendered.html
browser/components/newtab/prerendered/locales/pt-BR/activity-stream.html
browser/components/newtab/prerendered/locales/pt-PT/activity-stream-noscripts.html
browser/components/newtab/prerendered/locales/pt-PT/activity-stream-prerendered-noscripts.html
browser/components/newtab/prerendered/locales/pt-PT/activity-stream-prerendered.html
browser/components/newtab/prerendered/locales/pt-PT/activity-stream.html
browser/components/newtab/prerendered/locales/rm/activity-stream-noscripts.html
browser/components/newtab/prerendered/locales/rm/activity-stream-prerendered-noscripts.html
browser/components/newtab/prerendered/locales/rm/activity-stream-prerendered.html
browser/components/newtab/prerendered/locales/rm/activity-stream.html
browser/components/newtab/prerendered/locales/ro/activity-stream-noscripts.html
browser/components/newtab/prerendered/locales/ro/activity-stream-prerendered-noscripts.html
browser/components/newtab/prerendered/locales/ro/activity-stream-prerendered.html
browser/components/newtab/prerendered/locales/ro/activity-stream.html
browser/components/newtab/prerendered/locales/ru/activity-stream-noscripts.html
browser/components/newtab/prerendered/locales/ru/activity-stream-prerendered-noscripts.html
browser/components/newtab/prerendered/locales/ru/activity-stream-prerendered.html
browser/components/newtab/prerendered/locales/ru/activity-stream.html
browser/components/newtab/prerendered/locales/si/activity-stream-noscripts.html
browser/components/newtab/prerendered/locales/si/activity-stream-prerendered-noscripts.html
browser/components/newtab/prerendered/locales/si/activity-stream-prerendered.html
browser/components/newtab/prerendered/locales/si/activity-stream.html
browser/components/newtab/prerendered/locales/sk/activity-stream-noscripts.html
browser/components/newtab/prerendered/locales/sk/activity-stream-prerendered-noscripts.html
browser/components/newtab/prerendered/locales/sk/activity-stream-prerendered.html
browser/components/newtab/prerendered/locales/sk/activity-stream.html
browser/components/newtab/prerendered/locales/sl/activity-stream-noscripts.html
browser/components/newtab/prerendered/locales/sl/activity-stream-prerendered-noscripts.html
browser/components/newtab/prerendered/locales/sl/activity-stream-prerendered.html
browser/components/newtab/prerendered/locales/sl/activity-stream.html
browser/components/newtab/prerendered/locales/sq/activity-stream-noscripts.html
browser/components/newtab/prerendered/locales/sq/activity-stream-prerendered-noscripts.html
browser/components/newtab/prerendered/locales/sq/activity-stream-prerendered.html
browser/components/newtab/prerendered/locales/sq/activity-stream.html
browser/components/newtab/prerendered/locales/sr/activity-stream-noscripts.html
browser/components/newtab/prerendered/locales/sr/activity-stream-prerendered-noscripts.html
browser/components/newtab/prerendered/locales/sr/activity-stream-prerendered.html
browser/components/newtab/prerendered/locales/sr/activity-stream.html
browser/components/newtab/prerendered/locales/sv-SE/activity-stream-noscripts.html
browser/components/newtab/prerendered/locales/sv-SE/activity-stream-prerendered-noscripts.html
browser/components/newtab/prerendered/locales/sv-SE/activity-stream-prerendered.html
browser/components/newtab/prerendered/locales/sv-SE/activity-stream.html
browser/components/newtab/prerendered/locales/ta/activity-stream-noscripts.html
browser/components/newtab/prerendered/locales/ta/activity-stream-prerendered-noscripts.html
browser/components/newtab/prerendered/locales/ta/activity-stream-prerendered.html
browser/components/newtab/prerendered/locales/ta/activity-stream.html
browser/components/newtab/prerendered/locales/te/activity-stream-noscripts.html
browser/components/newtab/prerendered/locales/te/activity-stream-prerendered-noscripts.html
browser/components/newtab/prerendered/locales/te/activity-stream-prerendered.html
browser/components/newtab/prerendered/locales/te/activity-stream.html
browser/components/newtab/prerendered/locales/th/activity-stream-noscripts.html
browser/components/newtab/prerendered/locales/th/activity-stream-prerendered-noscripts.html
browser/components/newtab/prerendered/locales/th/activity-stream-prerendered.html
browser/components/newtab/prerendered/locales/th/activity-stream.html
browser/components/newtab/prerendered/locales/tl/activity-stream-noscripts.html
browser/components/newtab/prerendered/locales/tl/activity-stream-prerendered-noscripts.html
browser/components/newtab/prerendered/locales/tl/activity-stream-prerendered.html
browser/components/newtab/prerendered/locales/tl/activity-stream.html
browser/components/newtab/prerendered/locales/tr/activity-stream-noscripts.html
browser/components/newtab/prerendered/locales/tr/activity-stream-prerendered-noscripts.html
browser/components/newtab/prerendered/locales/tr/activity-stream-prerendered.html
browser/components/newtab/prerendered/locales/tr/activity-stream.html
browser/components/newtab/prerendered/locales/uk/activity-stream-noscripts.html
browser/components/newtab/prerendered/locales/uk/activity-stream-prerendered-noscripts.html
browser/components/newtab/prerendered/locales/uk/activity-stream-prerendered.html
browser/components/newtab/prerendered/locales/uk/activity-stream.html
browser/components/newtab/prerendered/locales/ur/activity-stream-noscripts.html
browser/components/newtab/prerendered/locales/ur/activity-stream-prerendered-noscripts.html
browser/components/newtab/prerendered/locales/ur/activity-stream-prerendered.html
browser/components/newtab/prerendered/locales/ur/activity-stream.html
browser/components/newtab/prerendered/locales/uz/activity-stream-noscripts.html
browser/components/newtab/prerendered/locales/uz/activity-stream-prerendered-noscripts.html
browser/components/newtab/prerendered/locales/uz/activity-stream-prerendered.html
browser/components/newtab/prerendered/locales/uz/activity-stream.html
browser/components/newtab/prerendered/locales/vi/activity-stream-noscripts.html
browser/components/newtab/prerendered/locales/vi/activity-stream-prerendered-noscripts.html
browser/components/newtab/prerendered/locales/vi/activity-stream-prerendered.html
browser/components/newtab/prerendered/locales/vi/activity-stream.html
browser/components/newtab/prerendered/locales/zh-CN/activity-stream-noscripts.html
browser/components/newtab/prerendered/locales/zh-CN/activity-stream-prerendered-noscripts.html
browser/components/newtab/prerendered/locales/zh-CN/activity-stream-prerendered.html
browser/components/newtab/prerendered/locales/zh-CN/activity-stream.html
browser/components/newtab/prerendered/locales/zh-TW/activity-stream-noscripts.html
browser/components/newtab/prerendered/locales/zh-TW/activity-stream-prerendered-noscripts.html
browser/components/newtab/prerendered/locales/zh-TW/activity-stream-prerendered.html
browser/components/newtab/prerendered/locales/zh-TW/activity-stream.html
browser/components/newtab/prerendered/static/activity-stream-debug.html
browser/components/newtab/prerendered/static/activity-stream-prerendered-debug.html
browser/components/newtab/test/schemas/pings.js
browser/components/newtab/test/unit/asrouter/ASRouter.test.js
browser/components/newtab/test/unit/asrouter/ASRouterTargeting.test.js
browser/components/newtab/test/unit/asrouter/ModalOverlay.test.jsx
browser/components/newtab/test/unit/asrouter/TargetingDocs.test.js
browser/components/newtab/test/unit/asrouter/asrouter-content.test.jsx
browser/components/newtab/test/unit/asrouter/templates/OnboardingMessage.test.jsx
browser/components/newtab/test/unit/asrouter/templates/Trailhead.test.jsx
browser/components/newtab/test/unit/content-src/components/ASRouterAdmin.test.jsx
browser/components/newtab/test/unit/lib/TelemetryFeed.test.js
browser/components/newtab/test/unit/lib/UTEventReporting.test.js
browser/components/newtab/test/unit/unit-entry.js
browser/components/newtab/yamscripts.yml
browser/locales/en-US/browser/branding/brandings.ftl
browser/locales/en-US/browser/newtab/onboarding.ftl
toolkit/components/telemetry/Events.yaml
--- a/browser/app/profile/firefox.js
+++ b/browser/app/profile/firefox.js
@@ -1320,16 +1320,18 @@ pref("browser.newtabpage.activity-stream
 
 // The pref controls if search hand-off is enabled for Activity Stream.
 #ifdef NIGHTLY_BUILD
 pref("browser.newtabpage.activity-stream.improvesearch.handoffToAwesomebar", true);
 #else
 pref("browser.newtabpage.activity-stream.improvesearch.handoffToAwesomebar", false);
 #endif
 
+pref("trailhead.firstrun.branches", "control");
+
 // Enable the DOM fullscreen API.
 pref("full-screen-api.enabled", true);
 
 // Startup Crash Tracking
 // number of startup crashes that can occur before starting into safe mode automatically
 // (this pref has no effect if more than 6 hours have passed since the last crash)
 pref("toolkit.startup.max_resumed_crashes", 3);
 
new file mode 100644
--- /dev/null
+++ b/browser/components/newtab/.eslintrc.jsx-a11y.js
@@ -0,0 +1,17 @@
+module.exports = {
+  "plugins": [
+    "jsx-a11y" // require("eslint-plugin-jsx-a11y")
+  ],
+  "extends": "plugin:jsx-a11y/recommended",
+  "overrides": [{
+    // These files use fluent-dom to insert content
+    "files": [
+      "content-src/asrouter/templates/OnboardingMessage/**",
+      "content-src/asrouter/templates/Trailhead/**",
+    ],
+    "rules": {
+      "jsx-a11y/anchor-has-content": 0,
+      "jsx-a11y/heading-has-content": 0,
+    }
+  }],
+};
--- a/browser/components/newtab/bin/render-activity-stream-html.js
+++ b/browser/components/newtab/bin/render-activity-stream-html.js
@@ -99,18 +99,19 @@ for (const src of ${JSON.stringify(scrip
     <meta charset="utf-8">
     <meta http-equiv="Content-Security-Policy" content="default-src 'none'; script-src 'unsafe-inline' resource: chrome:; connect-src https:; img-src https: data: blob:; style-src 'unsafe-inline';">
     <title>${options.strings.newtab_page_title}</title>
     <link rel="icon" type="image/png" href="chrome://branding/content/icon32.png"/>
     <link rel="stylesheet" href="chrome://browser/content/contentSearchUI.css" />
     <link rel="stylesheet" href="${options.baseUrl}css/activity-stream.css" />
   </head>
   <body class="activity-stream">
+    <div id="header-asrouter-container" role="presentation"></div>
     <div id="root">${isPrerendered ? html : "<!-- Regular React Rendering -->"}</div>
-    <div id="footer-snippets-container" />${options.noscripts ? "" : scriptTag}
+    <div id="footer-asrouter-container" role="presentation"></div>${options.noscripts ? "" : scriptTag}
   </body>
 </html>
 `;
 }
 
 /**
  * templateJs - Generates a js file that passes the initial state of the prerendered
  * DOM to the React version. This is necessary to ensure the checksum matches when
--- a/browser/components/newtab/common/Actions.jsm
+++ b/browser/components/newtab/common/Actions.jsm
@@ -121,16 +121,17 @@ for (const type of [
   "TOP_SITES_INSERT",
   "TOP_SITES_OPEN_SEARCH_SHORTCUTS_MODAL",
   "TOP_SITES_PIN",
   "TOP_SITES_PREFS_UPDATED",
   "TOP_SITES_UNPIN",
   "TOP_SITES_UPDATED",
   "TOTAL_BOOKMARKS_REQUEST",
   "TOTAL_BOOKMARKS_RESPONSE",
+  "TRAILHEAD_ENROLL_EVENT",
   "UNINIT",
   "UPDATE_PINNED_SEARCH_SHORTCUTS",
   "UPDATE_SEARCH_SHORTCUTS",
   "UPDATE_SECTION_PREFS",
   "WEBEXT_CLICK",
   "WEBEXT_DISMISS",
 ]) {
   actionTypes[type] = type;
--- a/browser/components/newtab/content-src/asrouter/asrouter-content.jsx
+++ b/browser/components/newtab/content-src/asrouter/asrouter-content.jsx
@@ -5,19 +5,21 @@ import {generateMessages} from "./rich-t
 import {ImpressionsWrapper} from "./components/ImpressionsWrapper/ImpressionsWrapper";
 import {LocalizationProvider} from "fluent-react";
 import {OnboardingMessage} from "./templates/OnboardingMessage/OnboardingMessage";
 import React from "react";
 import ReactDOM from "react-dom";
 import {ReturnToAMO} from "./templates/ReturnToAMO/ReturnToAMO";
 import {SnippetsTemplates} from "./templates/template-manifest";
 import {StartupOverlay} from "./templates/StartupOverlay/StartupOverlay";
+import {Trailhead} from "./templates/Trailhead/Trailhead";
 
 const INCOMING_MESSAGE_NAME = "ASRouter:parent-to-child";
 const OUTGOING_MESSAGE_NAME = "ASRouter:child-to-parent";
+const TEMPLATES_ABOVE_PAGE = ["trailhead"];
 const TEMPLATES_BELOW_SEARCH = ["simple_below_search_snippet"];
 
 export const ASRouterUtils = {
   addListener(listener) {
     if (global.RPMAddMessageListener) {
       global.RPMAddMessageListener(INCOMING_MESSAGE_NAME, listener);
     }
   },
@@ -86,17 +88,18 @@ export class ASRouterUISurface extends R
   constructor(props) {
     super(props);
     this.onMessageFromParent = this.onMessageFromParent.bind(this);
     this.sendClick = this.sendClick.bind(this);
     this.sendImpression = this.sendImpression.bind(this);
     this.sendUserActionTelemetry = this.sendUserActionTelemetry.bind(this);
     this.state = {message: {}, bundle: {}};
     if (props.document) {
-      this.portalContainer = props.document.getElementById("footer-snippets-container");
+      this.headerPortal = props.document.getElementById("header-asrouter-container");
+      this.footerPortal = props.document.getElementById("footer-asrouter-container");
     }
   }
 
   sendUserActionTelemetry(extraProps = {}) {
     const {message, bundle} = this.state;
     if (!message && !extraProps.message_id) {
       throw new Error(`You must provide a message_id for bundled messages`);
     }
@@ -208,17 +211,18 @@ export class ASRouterUISurface extends R
 
   componentWillUnmount() {
     ASRouterUtils.removeListener(this.onMessageFromParent);
   }
 
   renderSnippets() {
     if (this.state.bundle.template === "onboarding" ||
         this.state.message.template === "fxa_overlay" ||
-        this.state.message.template === "return_to_amo_overlay") {
+        this.state.message.template === "return_to_amo_overlay" ||
+        this.state.message.template === "trailhead") {
       return null;
     }
     const SnippetComponent = SnippetsTemplates[this.state.message.template];
     const {content} = this.state.message;
 
     return (
       <ImpressionsWrapper
         id="NEWTAB_FOOTER_BAR"
@@ -275,16 +279,31 @@ export class ASRouterUISurface extends R
             onBlock={this.onDismissById(message.id)}
             onAction={ASRouterUtils.executeAction} />
         </LocalizationProvider>
       );
     }
     return null;
   }
 
+  renderTrailhead() {
+    const {message} = this.state;
+    if (message.template === "trailhead") {
+      return (<Trailhead
+        document={this.props.document}
+        message={message}
+        onAction={ASRouterUtils.executeAction}
+        onDoneButton={this.dismissBundle(this.state.bundle.bundle)}
+        sendUserActionTelemetry={this.sendUserActionTelemetry}
+        dispatch={this.props.dispatch}
+        fxaEndpoint={this.props.fxaEndpoint} />);
+    }
+    return null;
+  }
+
   renderPreviewBanner() {
     if (this.state.message.provider !== "preview") {
       return null;
     }
 
     return (
       <div className="snippets-preview-banner">
         <span className="icon icon-small-spacer icon-info" />
@@ -292,27 +311,29 @@ export class ASRouterUISurface extends R
       </div>
     );
   }
 
   render() {
     const {message, bundle} = this.state;
     if (!message.id && !bundle.template) { return null; }
     const shouldRenderBelowSearch = TEMPLATES_BELOW_SEARCH.includes(message.template);
+    const shouldRenderInHeader = TEMPLATES_ABOVE_PAGE.includes(message.template);
 
     return shouldRenderBelowSearch ?
       // Render special below search snippets in place;
       <div className="below-search-snippet">{this.renderSnippets()}</div> :
       // For onboarding, regular snippets etc. we should render
       // everything in our footer container.
       ReactDOM.createPortal(
         <React.Fragment>
           {this.renderPreviewBanner()}
+          {this.renderTrailhead()}
           {this.renderFirstRunOverlay()}
           {this.renderOnboarding()}
           {this.renderSnippets()}
         </React.Fragment>,
-        this.portalContainer
+        shouldRenderInHeader ? this.headerPortal : this.footerPortal
       );
   }
 }
 
 ASRouterUISurface.defaultProps = {document: global.document};
--- a/browser/components/newtab/content-src/asrouter/components/ModalOverlay/ModalOverlay.jsx
+++ b/browser/components/newtab/content-src/asrouter/components/ModalOverlay/ModalOverlay.jsx
@@ -1,30 +1,54 @@
 import React from "react";
 
-export class ModalOverlay extends React.PureComponent {
+export class ModalOverlayWrapper extends React.PureComponent {
+  constructor(props) {
+    super(props);
+    this.onKeyDown = this.onKeyDown.bind(this);
+  }
+
+  onKeyDown(event) {
+    if (event.key === "Escape") {
+      this.props.onClose(event);
+    }
+  }
+
   componentWillMount() {
-    this.setState({active: true});
-    document.body.classList.add("modal-open");
+    this.props.document.addEventListener("keydown", this.onKeyDown);
+    this.props.document.body.classList.add("modal-open");
   }
 
   componentWillUnmount() {
-    document.body.classList.remove("modal-open");
-    this.setState({active: false});
+    this.props.document.removeEventListener("keydown", this.onKeyDown);
+    this.props.document.body.classList.remove("modal-open");
   }
 
   render() {
-    const {active} = this.state;
+    const {props} = this;
+    return (<React.Fragment>
+      <div className="modalOverlayOuter active" onClick={props.onClose} role="presentation" />
+      <div className={`modalOverlayInner active ${props.innerClassName || ""}`}
+        aria-labelledby={props.headerId}
+        id={props.id}
+        role="dialog">
+        {props.children}
+      </div>
+    </React.Fragment>);
+  }
+}
+
+ModalOverlayWrapper.defaultProps = {document: global.document};
+
+export class ModalOverlay extends React.PureComponent {
+  render() {
     const {title, button_label} = this.props;
     return (
-      <div>
-        <div className={`modalOverlayOuter ${active ? "active" : ""}`} />
-        <div className={`modalOverlayInner ${active ? "active" : ""}`}>
-          <h2> {title} </h2>
-          {this.props.children}
-          <div className="footer">
-            <button tabIndex="2" onClick={this.props.onDoneButton} className="button primary modalButton"> {button_label} </button>
-          </div>
+      <ModalOverlayWrapper onClose={this.props.onDoneButton}>
+        <h2> {title} </h2>
+        {this.props.children}
+        <div className="footer">
+          <button className="button primary modalButton"
+            onClick={this.props.onDoneButton}> {button_label} </button>
         </div>
-      </div>
-    );
+      </ModalOverlayWrapper>);
   }
 }
--- a/browser/components/newtab/content-src/asrouter/components/ModalOverlay/_ModalOverlay.scss
+++ b/browser/components/newtab/content-src/asrouter/components/ModalOverlay/_ModalOverlay.scss
@@ -1,17 +1,16 @@
 .activity-stream {
   &.modal-open {
     overflow: hidden;
   }
 }
 
 .modalOverlayOuter {
-  background: $white;
-  opacity: 0.93;
+  background: var(--newtab-overlay-color);
   height: 100%;
   position: fixed;
   top: 0;
   width: 100%;
   display: none;
   z-index: 1100;
 
   &.active {
--- a/browser/components/newtab/content-src/asrouter/docs/targeting-attributes.md
+++ b/browser/components/newtab/content-src/asrouter/docs/targeting-attributes.md
@@ -23,16 +23,18 @@ Please note that some targeting attribut
 * [profileAgeCreated](#profileagecreated)
 * [profileAgeReset](#profileagereset)
 * [providerCohorts](#providercohorts)
 * [region](#region)
 * [searchEngines](#searchengines)
 * [sync](#sync)
 * [topFrecentSites](#topfrecentsites)
 * [totalBookmarksCount](#totalbookmarkscount)
+* [trailheadInterrupt](#trailheadinterrupt)
+* [trailheadTriplet](#trailheadtriplet)
 * [usesFirefoxSync](#usesfirefoxsync)
 * [xpinstallEnabled](#xpinstallEnabled)
 * [hasPinnedTabs](#haspinnedtabs)
 
 ## Detailed usage
 
 ### `addonsInfo`
 Provides information about the add-ons the user has installed.
@@ -419,16 +421,24 @@ type UnixEpochNumber = number;
 Total number of bookmarks.
 
 #### Definition
 
 ```ts
 declare const totalBookmarksCount: number;
 ```
 
+### `trailheadInterrupt`
+
+(67.05+ only) Experiment branch for "interrupt" study
+
+### `trailheadTriplet`
+
+(67.05+ only) Experiment branch for "triplet" study
+
 ### `usesFirefoxSync`
 
 Does the user use Firefox sync?
 
 #### Definition
 
 ```ts
 declare const usesFirefoxSync: boolean;
--- a/browser/components/newtab/content-src/asrouter/templates/OnboardingMessage/OnboardingMessage.jsx
+++ b/browser/components/newtab/content-src/asrouter/templates/OnboardingMessage/OnboardingMessage.jsx
@@ -1,12 +1,18 @@
 import {ModalOverlay} from "../../components/ModalOverlay/ModalOverlay";
 import React from "react";
 
-class OnboardingCard extends React.PureComponent {
+const FLUENT_FILES = [
+  "branding/brand.ftl",
+  "browser/branding/sync-brand.ftl",
+  "browser/newtab/onboarding.ftl",
+];
+
+export class OnboardingCard extends React.PureComponent {
   constructor(props) {
     super(props);
     this.onClick = this.onClick.bind(this);
   }
 
   onClick() {
     const {props} = this;
     const ping = {
@@ -15,34 +21,45 @@ class OnboardingCard extends React.PureC
       id: props.UISurface,
     };
     props.sendUserActionTelemetry(ping);
     props.onAction(props.content.primary_button.action);
   }
 
   render() {
     const {content} = this.props;
+    const className = this.props.className || "onboardingMessage";
     return (
-      <div className="onboardingMessage">
+      <div className={className}>
         <div className={`onboardingMessageImage ${content.icon}`} />
         <div className="onboardingContent">
           <span>
-            <h3> {content.title} </h3>
-            <p> {content.text} </p>
+            <h3 className="onboardingTitle" data-l10n-id={content.title.string_id} />
+            <p className="onboardingText" data-l10n-id={content.text.string_id} />
           </span>
-          <span>
-            <button tabIndex="1" className="button onboardingButton" onClick={this.onClick}> {content.primary_button.label} </button>
+          <span className="onboardingButtonContainer">
+            <button data-l10n-id={content.primary_button.label.string_id}
+              className="button onboardingButton"
+              onClick={this.onClick} />
           </span>
         </div>
       </div>
     );
   }
 }
 
 export class OnboardingMessage extends React.PureComponent {
+  componentWillMount() {
+    FLUENT_FILES.forEach(file => {
+      const link = document.head.appendChild(document.createElement("link"));
+      link.href = file;
+      link.rel = "localization";
+    });
+  }
+
   render() {
     const {props} = this;
     const {button_label, header} = props.extraTemplateStrings;
     return (
       <ModalOverlay {...props} button_label={button_label} title={header}>
         <div className="onboardingMessageContainer">
           {props.bundle.map(message => (
             <OnboardingCard key={message.id}
--- a/browser/components/newtab/content-src/asrouter/templates/OnboardingMessage/_OnboardingMessage.scss
+++ b/browser/components/newtab/content-src/asrouter/templates/OnboardingMessage/_OnboardingMessage.scss
@@ -50,53 +50,16 @@
       }
     }
   }
 
   @media(max-width: 650px) {
     height: 250px;
   }
 
-  .onboardingMessageImage {
-    height: 100px;
-    width: 120px;
-    background-size: 120px;
-    background-position: center center;
-    background-repeat: no-repeat;
-    display: inline-block;
-    vertical-align: middle;
-
-
-    @media(max-width: 850px) {
-      height: 75px;
-      min-width: 80px;
-      background-size: 80px;
-    }
-
-    &.addons {
-      background-image: url('resource://activity-stream/data/content/assets/illustration-addons@2x.png');
-    }
-
-    &.privatebrowsing {
-      background-image: url('resource://activity-stream/data/content/assets/illustration-privatebrowsing@2x.png');
-    }
-
-    &.screenshots {
-      background-image: url('resource://activity-stream/data/content/assets/illustration-screenshots@2x.png');
-    }
-
-    &.gift {
-      background-image: url('resource://activity-stream/data/content/assets/illustration-gift@2x.png');
-    }
-
-    &.sync {
-      background-image: url('resource://activity-stream/data/content/assets/illustration-sync@2x.png');
-    }
-  }
-
   .onboardingContent {
     height: 175px;
 
     > span > h3 {
       color: $grey-90;
       margin-bottom: 8px;
       font-weight: 400;
     }
@@ -159,8 +122,89 @@
       content: none;
     }
   }
 
   &:last-child::before {
     content: none;
   }
 }
+
+// Also used for Trailhead
+.onboardingMessageImage {
+  height: 100px;
+  width: 120px;
+  background-size: 120px;
+  background-position: center center;
+  background-repeat: no-repeat;
+  display: inline-block;
+  vertical-align: middle;
+
+  @media(max-width: 850px) {
+    height: 75px;
+    min-width: 80px;
+    background-size: 80px;
+  }
+
+  &.addons {
+    background-image: url('#{$image-path}illustration-addons@2x.png');
+  }
+
+  &.privatebrowsing {
+    background-image: url('#{$image-path}illustration-privatebrowsing@2x.png');
+  }
+
+  &.screenshots {
+    background-image: url('#{$image-path}illustration-screenshots@2x.png');
+  }
+
+  &.gift {
+    background-image: url('#{$image-path}illustration-gift@2x.png');
+  }
+
+  &.sync {
+    background-image: url('#{$image-path}illustration-sync@2x.png');
+  }
+
+  &.devices {
+    background-image: url('#{$image-path}trailhead/card-illo-devices.png');
+  }
+
+  &.fbcont {
+    background-image: url('#{$image-path}trailhead/card-illo-fbcont.png');
+  }
+
+  &.ffmonitor {
+    background-image: url('#{$image-path}trailhead/card-illo-ffmonitor.png');
+  }
+
+  &.ffsend {
+    background-image: url('#{$image-path}trailhead/card-illo-ffsend.png');
+  }
+
+  &.lockwise {
+    background-image: url('#{$image-path}trailhead/card-illo-lockwise.png');
+  }
+
+  &.mobile {
+    background-image: url('#{$image-path}trailhead/card-illo-mobile.png');
+  }
+
+  &.pledge {
+    background-image: url('#{$image-path}trailhead/card-illo-pledge.png');
+  }
+
+  &.pocket {
+    background-image: url('#{$image-path}trailhead/card-illo-pocket.png');
+  }
+
+  &.private {
+    background-image: url('#{$image-path}trailhead/card-illo-private.png');
+  }
+
+  &.sendtab {
+    background-image: url('#{$image-path}trailhead/card-illo-sendtab.png');
+  }
+
+  &.tracking {
+    background-image: url('#{$image-path}trailhead/card-illo-tracking.png');
+  }
+}
--- a/browser/components/newtab/content-src/asrouter/templates/StartupOverlay/StartupOverlay.jsx
+++ b/browser/components/newtab/content-src/asrouter/templates/StartupOverlay/StartupOverlay.jsx
@@ -8,31 +8,33 @@ export class _StartupOverlay extends Rea
     super(props);
     this.onInputChange = this.onInputChange.bind(this);
     this.onSubmit = this.onSubmit.bind(this);
     this.clickSkip = this.clickSkip.bind(this);
     this.initScene = this.initScene.bind(this);
     this.removeOverlay = this.removeOverlay.bind(this);
     this.onInputInvalid = this.onInputInvalid.bind(this);
 
+    this.utmParams = "utm_source=activity-stream&utm_campaign=firstrun&utm_medium=referral&utm_term=trailhead-control";
+
     this.state = {
       emailInput: "",
       overlayRemoved: false,
       flowId: "",
       flowBeginTime: 0,
     };
     this.didFetch = false;
   }
 
   async componentWillUpdate() {
     if (this.props.fxa_endpoint && !this.didFetch) {
       try {
         this.didFetch = true;
-        const fxaParams = "entrypoint=activity-stream-firstrun&utm_source=activity-stream&utm_campaign=firstrun&form_type=email";
-        const response = await fetch(`${this.props.fxa_endpoint}/metrics-flow?${fxaParams}`, {credentials: "omit"});
+        const fxaParams = "entrypoint=activity-stream-firstrun&form_type=email";
+        const response = await fetch(`${this.props.fxa_endpoint}/metrics-flow?${fxaParams}&${this.utmParams}`, {credentials: "omit"});
         if (response.status === 200) {
           const {flowId, flowBeginTime} = await response.json();
           this.setState({flowId, flowBeginTime});
         } else {
           this.props.dispatch(ac.OnlyToMain({type: at.TELEMETRY_UNDESIRED_EVENT, data: {event: "FXA_METRICS_FETCH_ERROR", value: response.status}}));
         }
       } catch (error) {
         this.props.dispatch(ac.OnlyToMain({type: at.TELEMETRY_UNDESIRED_EVENT, data: {event: "FXA_METRICS_ERROR"}}));
@@ -101,38 +103,40 @@ export class _StartupOverlay extends Rea
 
   render() {
     // When skipping the onboarding tour we show AS but we are still on
     // about:welcome, prop.isFirstrun is true and StartupOverlay is rendered
     if (this.state.overlayRemoved) {
       return null;
     }
 
-    let termsLink = (<a href={`${this.props.fxa_endpoint}/legal/terms`} target="_blank" rel="noopener noreferrer"><FormattedMessage id="firstrun_terms_of_service" /></a>);
-    let privacyLink = (<a href={`${this.props.fxa_endpoint}/legal/privacy`} target="_blank" rel="noopener noreferrer"><FormattedMessage id="firstrun_privacy_notice" /></a>);
+    let termsLink = (<a href={`${this.props.fxa_endpoint}/legal/terms?${this.utmParams}`} target="_blank" rel="noopener noreferrer"><FormattedMessage id="firstrun_terms_of_service" /></a>);
+    let privacyLink = (<a href={`${this.props.fxa_endpoint}/legal/privacy?${this.utmParams}`} target="_blank" rel="noopener noreferrer"><FormattedMessage id="firstrun_privacy_notice" /></a>);
 
     return (
       <div className={`overlay-wrapper ${this.state.show ? "show" : ""}`}>
         <div className="background" />
         <div className="firstrun-scene">
           <div className="fxaccounts-container">
             <div className="firstrun-left-divider">
               <h1 className="firstrun-title"><FormattedMessage id="firstrun_title" /></h1>
               <p className="firstrun-content"><FormattedMessage id="firstrun_content" /></p>
-              <a className="firstrun-link" href="https://www.mozilla.org/firefox/features/sync/" target="_blank" rel="noopener noreferrer"><FormattedMessage id="firstrun_learn_more_link" /></a>
+              <a className="firstrun-link" href={`https://www.mozilla.org/firefox/features/sync/?${this.utmParams}`} target="_blank" rel="noopener noreferrer"><FormattedMessage id="firstrun_learn_more_link" /></a>
             </div>
             <div className="firstrun-sign-in">
               <p className="form-header"><FormattedMessage id="firstrun_form_header" /><span className="sub-header"><FormattedMessage id="firstrun_form_sub_header" /></span></p>
               <form method="get" action={this.props.fxa_endpoint} target="_blank" rel="noopener noreferrer" onSubmit={this.onSubmit}>
                 <input name="service" type="hidden" value="sync" />
                 <input name="action" type="hidden" value="email" />
                 <input name="context" type="hidden" value="fx_desktop_v3" />
                 <input name="entrypoint" type="hidden" value="activity-stream-firstrun" />
                 <input name="utm_source" type="hidden" value="activity-stream" />
                 <input name="utm_campaign" type="hidden" value="firstrun" />
+                <input name="utm_medium" type="hidden" value="referral" />
+                <input name="utm_term" type="hidden" value="trailhead-control" />
                 <input name="flow_id" type="hidden" value={this.state.flowId} />
                 <input name="flow_begin_time" type="hidden" value={this.state.flowBeginTime} />
                 <span className="error">{this.props.intl.formatMessage({id: "firstrun_invalid_input"})}</span>
                 <input className="email-input" name="email" type="email" required="true" onInvalid={this.onInputInvalid} placeholder={this.props.intl.formatMessage({id: "firstrun_email_input_placeholder"})} onChange={this.onInputChange} />
                 <div className="extra-links">
                   <FormattedMessage
                     id="firstrun_extra_legal_links"
                     values={{
new file mode 100644
--- /dev/null
+++ b/browser/components/newtab/content-src/asrouter/templates/Trailhead/Trailhead.jsx
@@ -0,0 +1,302 @@
+import {actionCreators as ac, actionTypes as at} from "common/Actions.jsm";
+import {injectIntl} from "react-intl";
+import {ModalOverlayWrapper} from "../../components/ModalOverlay/ModalOverlay";
+import {OnboardingCard} from "../OnboardingMessage/OnboardingMessage";
+import React from "react";
+
+const FLUENT_FILES = [
+  "branding/brand.ftl",
+  "browser/branding/brandings.ftl",
+  "browser/branding/sync-brand.ftl",
+  "browser/newtab/onboarding.ftl",
+];
+
+// From resource://devtools/client/shared/focus.js
+const FOCUSABLE_SELECTOR = [
+  "a[href]:not([tabindex='-1'])",
+  "button:not([disabled]):not([tabindex='-1'])",
+  "iframe:not([tabindex='-1'])",
+  "input:not([disabled]):not([tabindex='-1'])",
+  "select:not([disabled]):not([tabindex='-1'])",
+  "textarea:not([disabled]):not([tabindex='-1'])",
+  "[tabindex]:not([tabindex='-1'])",
+].join(", ");
+
+export class _Trailhead extends React.PureComponent {
+  constructor(props) {
+    super(props);
+    this.closeModal = this.closeModal.bind(this);
+    this.hideCardPanel = this.hideCardPanel.bind(this);
+    this.onInputChange = this.onInputChange.bind(this);
+    this.onStartBlur = this.onStartBlur.bind(this);
+    this.onSubmit = this.onSubmit.bind(this);
+    this.onInputInvalid = this.onInputInvalid.bind(this);
+    this.onCardAction = this.onCardAction.bind(this);
+
+    this.state = {
+      emailInput: "",
+      isModalOpen: true,
+      showCardPanel: true,
+      showCards: false,
+      flowId: "",
+      flowBeginTime: 0,
+    };
+    this.didFetch = false;
+  }
+
+  get dialog() {
+    return this.props.document.getElementById("trailheadDialog");
+  }
+
+  async componentWillMount() {
+    FLUENT_FILES.forEach(file => {
+      const link = document.head.appendChild(document.createElement("link"));
+      link.href = file;
+      link.rel = "localization";
+    });
+
+    if (this.props.fxaEndpoint && !this.didFetch) {
+      try {
+        this.didFetch = true;
+        const url = new URL(`${this.props.fxaEndpoint}/metrics-flow?entrypoint=activity-stream-firstrun&form_type=email`);
+        this.addUtmParams(url);
+        const response = await fetch(url, {credentials: "omit"});
+        if (response.status === 200) {
+          const {flowId, flowBeginTime} = await response.json();
+          this.setState({flowId, flowBeginTime});
+        } else {
+          this.props.dispatch(ac.OnlyToMain({type: at.TELEMETRY_UNDESIRED_EVENT, data: {event: "FXA_METRICS_FETCH_ERROR", value: response.status}}));
+        }
+      } catch (error) {
+        this.props.dispatch(ac.OnlyToMain({type: at.TELEMETRY_UNDESIRED_EVENT, data: {event: "FXA_METRICS_ERROR"}}));
+      }
+    }
+  }
+
+  componentDidMount() {
+    // We need to remove hide-main since we should show it underneath everything that has rendered
+    this.props.document.body.classList.remove("hide-main");
+
+    // Add inline-onboarding class to disable fixed search header and fixed positioned settings icon
+    this.props.document.body.classList.add("inline-onboarding");
+
+    // The rest of the page is "hidden" when the modal is open
+    if (this.props.message.content) {
+      this.props.document.getElementById("root").setAttribute("aria-hidden", "true");
+
+      // Start with focus in the email input box
+      this.dialog.querySelector("input[name=email]").focus();
+    } else {
+      // No modal overlay, let the user scroll and deal them some cards.
+      this.props.document.body.classList.remove("welcome");
+
+      if (this.props.message.includeBundle || this.props.message.cards) {
+        this.revealCards();
+      }
+    }
+  }
+
+  componentWillUnmount() {
+    this.props.document.body.classList.remove("inline-onboarding");
+  }
+
+  onInputChange(e) {
+    let error = e.target.previousSibling;
+    this.setState({emailInput: e.target.value});
+    error.classList.remove("active");
+    e.target.classList.remove("invalid");
+  }
+
+  onStartBlur(event) {
+    // Make sure focus stays within the dialog when tabbing from the button
+    const {dialog} = this;
+    if (event.relatedTarget &&
+        !(dialog.compareDocumentPosition(event.relatedTarget) &
+          dialog.DOCUMENT_POSITION_CONTAINED_BY)) {
+      dialog.querySelector(FOCUSABLE_SELECTOR).focus();
+    }
+  }
+
+  onSubmit() {
+    this.props.dispatch(ac.UserEvent({event: "SUBMIT_EMAIL", ...this._getFormInfo()}));
+
+    global.addEventListener("visibilitychange", this.closeModal);
+  }
+
+  closeModal(ev) {
+    global.removeEventListener("visibilitychange", this.closeModal);
+    this.props.document.body.classList.remove("welcome");
+    this.props.document.getElementById("root").removeAttribute("aria-hidden");
+    this.setState({isModalOpen: false});
+    this.revealCards();
+
+    // If closeModal() was triggered by a visibilitychange event, the user actually
+    // submitted the email form so we don't send a SKIPPED_SIGNIN ping.
+    if (!ev || ev.type !== "visibilitychange") {
+      this.props.dispatch(ac.UserEvent({event: "SKIPPED_SIGNIN", ...this._getFormInfo()}));
+    }
+  }
+
+  /**
+   * Report to telemetry additional information about the form submission.
+   */
+  _getFormInfo() {
+    const value = {has_flow_params: this.state.flowId.length > 0};
+    return {value};
+  }
+
+  onInputInvalid(e) {
+    let error = e.target.previousSibling;
+    error.classList.add("active");
+    e.target.classList.add("invalid");
+    e.preventDefault(); // Override built-in form validation popup
+    e.target.focus();
+  }
+
+  hideCardPanel() {
+    this.setState({showCardPanel: false});
+  }
+
+  revealCards() {
+    this.setState({showCards: true});
+  }
+
+  getStringValue(str) {
+    if (str.property_id) {
+      str.value = this.props.intl.formatMessage({id: str.property_id});
+    }
+    return str.value;
+  }
+
+  /**
+   * Takes in a url as a string or URL object and returns a URL object with the
+   * utm_* parameters added to it. If a URL object is passed in, the paraemeters
+   * are added to it (the return value can be ignored in that case as it's the
+   * same object).
+   */
+  addUtmParams(url, isCard = false) {
+    let returnUrl = url;
+    if (typeof returnUrl === "string") {
+      returnUrl = new URL(url);
+    }
+    returnUrl.searchParams.append("utm_source", "activity-stream");
+    returnUrl.searchParams.append("utm_campaign", "firstrun");
+    returnUrl.searchParams.append("utm_medium", "referral");
+    returnUrl.searchParams.append("utm_term", `${this.props.message.utm_term}${isCard ? "-card" : ""}`);
+    return returnUrl;
+  }
+
+  onCardAction(action) {
+    let actionUpdates = {};
+
+    if (action.type === "OPEN_URL") {
+      let url = new URL(action.data.args);
+      this.addUtmParams(url, true);
+
+      if (action.addFlowParams) {
+        url.searchParams.append("flow_id", this.state.flowId);
+        url.searchParams.append("flow_begin_time", this.state.flowBeginTime);
+      }
+
+      actionUpdates = {data: {...action.data, args: url}};
+    }
+
+    this.props.onAction({...action, ...actionUpdates});
+  }
+
+  render() {
+    const {props} = this;
+    const {bundle: cards, content, utm_term} = props.message;
+    const innerClassName = [
+      "trailhead",
+      content && content.className,
+    ].filter(v => v).join(" ");
+    return (<React.Fragment>
+    {this.state.isModalOpen && content ? <ModalOverlayWrapper innerClassName={innerClassName} onClose={this.closeModal} id="trailheadDialog" headerId="trailheadHeader">
+      <div className="trailheadInner">
+        <div className="trailheadContent">
+          <h1 data-l10n-id={content.title.string_id}
+            id="trailheadHeader">{this.getStringValue(content.title)}</h1>
+          {content.subtitle &&
+            <p data-l10n-id={content.subtitle.string_id}>{this.getStringValue(content.subtitle)}</p>
+          }
+          <ul className="trailheadBenefits">
+            {content.benefits.map(item => (
+              <li key={item.id} className={item.id}>
+                <h3 data-l10n-id={item.title.string_id}>{this.getStringValue(item.title)}</h3>
+                <p data-l10n-id={item.text.string_id}>{this.getStringValue(item.text)}</p>
+              </li>
+            ))}
+          </ul>
+          <a className="trailheadLearn" data-l10n-id={content.learn.text.string_id} href={this.addUtmParams(content.learn.url)} target="_blank" rel="noopener noreferrer">
+            {this.getStringValue(content.learn.text)}
+          </a>
+        </div>
+        <div className="trailheadForm">
+          <h3 data-l10n-id={content.form.title.string_id}>{this.getStringValue(content.form.title)}</h3>
+          <p data-l10n-id={content.form.text.string_id}>{this.getStringValue(content.form.text)}</p>
+          <form method="get" action={this.props.fxaEndpoint} target="_blank" rel="noopener noreferrer" onSubmit={this.onSubmit}>
+            <input name="service" type="hidden" value="sync" />
+            <input name="action" type="hidden" value="email" />
+            <input name="context" type="hidden" value="fx_desktop_v3" />
+            <input name="entrypoint" type="hidden" value="activity-stream-firstrun" />
+            <input name="utm_source" type="hidden" value="activity-stream" />
+            <input name="utm_campaign" type="hidden" value="firstrun" />
+            <input name="utm_term" type="hidden" value={utm_term} />
+            <input name="flow_id" type="hidden" value={this.state.flowId} />
+            <input name="flow_begin_time" type="hidden" value={this.state.flowBeginTime} />
+            <input name="style" type="hidden" value="trailhead" />
+            <p data-l10n-id="onboarding-join-form-email-error" className="error" />
+            <input
+              data-l10n-id={content.form.email.string_id}
+              placeholder={this.getStringValue(content.form.email)}
+              name="email"
+              type="email"
+              required="required"
+              onInvalid={this.onInputInvalid}
+              onChange={this.onInputChange} />
+            <p className="trailheadTerms" data-l10n-id="onboarding-join-form-legal">
+              <a data-l10n-name="terms" target="_blank" rel="noopener noreferrer"
+                href={this.addUtmParams("https://accounts.firefox.com/legal/terms")} />
+              <a data-l10n-name="privacy" target="_blank" rel="noopener noreferrer"
+                href={this.addUtmParams("https://accounts.firefox.com/legal/privacy")} />
+            </p>
+            <button data-l10n-id={content.form.button.string_id} type="submit">
+              {this.getStringValue(content.form.button)}
+            </button>
+          </form>
+        </div>
+      </div>
+
+      <button className="trailheadStart"
+        data-l10n-id={content.skipButton.string_id}
+        onBlur={this.onStartBlur}
+        onClick={this.closeModal}>{this.getStringValue(content.skipButton)}</button>
+    </ModalOverlayWrapper> : null}
+    {(cards && cards.length) ? <div className={`trailheadCards ${this.state.showCardPanel ? "expanded" : "collapsed"}`}>
+      <div className="trailheadCardsInner"
+        aria-hidden={!this.state.showCards}>
+        <h1 data-l10n-id="onboarding-welcome-header" />
+        <div className={`trailheadCardGrid${this.state.showCards ? " show" : ""}`}>
+        {cards.map(card => (
+          <OnboardingCard key={card.id}
+            className="trailheadCard"
+            sendUserActionTelemetry={props.sendUserActionTelemetry}
+            onAction={this.onCardAction}
+            UISurface="TRAILHEAD"
+            {...card} />
+        ))}
+        </div>
+        {this.state.showCardPanel &&
+          <button
+            className="icon icon-dismiss" onClick={this.hideCardPanel}
+            title={props.intl.formatMessage({id: "menu_action_dismiss"})}
+            aria-label={props.intl.formatMessage({id: "menu_action_dismiss"})} />
+        }
+      </div>
+    </div> : null}
+    </React.Fragment>);
+  }
+}
+
+export const Trailhead = injectIntl(_Trailhead);
new file mode 100644
--- /dev/null
+++ b/browser/components/newtab/content-src/asrouter/templates/Trailhead/_Trailhead.scss
@@ -0,0 +1,425 @@
+.trailhead {
+  $benefit-icon-size: 62px;
+  $benefit-icon-spacing: $benefit-icon-size + 12px;
+  $benefit-icon-size-small: 40px;
+  $benefit-icon-spacing-small: $benefit-icon-size-small + 12px;
+  $responsive-breakpoint: 850px;
+
+  background: url('#{$image-path}trailhead/accounts-form-bg.jpg') bottom / cover;
+  color: $white;
+  height: auto;
+  top: 100px;
+
+  a {
+    color: $white;
+    text-decoration: underline;
+  }
+
+  input,
+  button {
+    border-radius: 4px;
+    padding: 10px;
+  }
+
+  .trailheadInner {
+    $content-spacing: 40px;
+
+    display: grid;
+    grid-column-gap: $content-spacing;
+    grid-template-columns: 5fr 3fr;
+    padding: $content-spacing 60px;
+  }
+
+  .trailheadContent {
+    h1 {
+      font-size: 36px;
+      font-weight: 200;
+      line-height: 46px;
+      margin: 0;
+    }
+
+    .trailheadLearn {
+      display: block;
+      margin-top: 30px;
+
+      @media (min-width: $responsive-breakpoint) {
+        margin-inline-start: $benefit-icon-spacing;
+      }
+    }
+  }
+
+  &.syncCohort {
+    left: calc(50% - 430px);
+    width: 860px;
+
+    @media (max-width: 860px) {
+      left: 0;
+      width: 100%;
+    }
+
+    .trailheadInner {
+      grid-template-columns: 4fr 3fr;
+    }
+
+    .trailheadContent {
+      .trailheadBenefits {
+        background: url('#{$image-path}sync-devices-trailhead.svg');
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: contain;
+        height: 200px;
+        margin-inline-end: 60px;
+      }
+
+      .trailheadLearn {
+        margin-inline-start: 0;
+      }
+    }
+  }
+
+  .trailheadBenefits {
+    padding: 0;
+
+    li {
+      background-position: left 6px;
+      background-repeat: no-repeat;
+      background-size: $benefit-icon-size-small;
+      -moz-context-properties: fill;
+      fill: $blue-50;
+      list-style: none;
+      padding-top: 8px;
+
+
+      @media (min-width: $responsive-breakpoint) {
+        background-position-y: 4px;
+        background-size: $benefit-icon-size;
+        margin-inline-end: 60px;
+        padding-inline-start: $benefit-icon-spacing;
+      }
+
+      &:dir(rtl) {
+        background-position-x: right;
+      }
+
+      &.knowledge {
+        background-image: url('#{$image-path}trailhead/benefit-knowledge.png');
+      }
+
+      &.privacy {
+        background-image: url('#{$image-path}trailhead/benefit-privacy.png');
+      }
+
+      &.products {
+        background-image: url('#{$image-path}trailhead/benefit-products.png');
+      }
+    }
+
+    h3 {
+      color: $violet-20;
+      font-size: 22px;
+      font-weight: 400;
+      margin: 0 0 4px;
+      padding-inline-start: $benefit-icon-spacing-small;
+
+      @media (min-width: $responsive-breakpoint) {
+        padding-inline-start: 0;
+      }
+    }
+
+    p {
+      color: $white;
+      font-size: 15px;
+      line-height: 22px;
+      margin: 4px 0 15px;
+    }
+  }
+
+  .trailheadForm {
+    $logo-size: 100px;
+
+    background: url('#{$image-path}trailhead/firefox-logo.png') top center / $logo-size no-repeat;
+    min-width: 260px;
+    padding-top: $logo-size;
+    text-align: center;
+
+    h3 {
+      font-size: 36px;
+      font-weight: 200;
+      line-height: 46px;
+      margin: 12px 0 4px;
+    }
+
+    p {
+      color: $white;
+      font-size: 15px;
+      line-height: 22px;
+      margin: 0 0 20px;
+    }
+
+    .trailheadTerms {
+      margin: 4px 30px 20px;
+
+      a,
+      & {
+        color: $white-70;
+        font-size: 12px;
+        line-height: 20px;
+      }
+    }
+
+    form {
+      position: relative;
+
+      .error.active {
+        inset-inline-start: 0;
+        z-index: 0;
+      }
+    }
+
+    button,
+    input {
+      width: 100%;
+    }
+
+    input {
+      background-color: $white;
+      border: 1px solid $grey-50;
+      box-shadow: none;
+      color: $grey-70;
+      font-size: 15px;
+      transition: border-color 150ms, box-shadow 150ms;
+
+      &:hover {
+        border-color: $grey-90;
+      }
+
+      &:focus {
+        border-color: $blue-50;
+        box-shadow: 0 0 0 3px $email-input-focus;
+      }
+
+      &.invalid {
+        border-color: $red-60;
+      }
+
+      &.invalid:focus {
+        box-shadow: 0 0 0 3px $email-input-invalid;
+      }
+    }
+
+    button {
+      background-color: $blue-60;
+      border: 0;
+      cursor: pointer;
+      display: block;
+      font-size: 15px;
+      font-weight: 400;
+      padding: 14px;
+
+      &:hover,
+      &:focus {
+        background-color: $trailhead-blue-60;
+      }
+
+      &:focus {
+        outline: dotted 1px;
+      }
+
+      &:active {
+        background-color: $trailhead-blue-70;
+      }
+    }
+  }
+
+  .trailheadStart {
+    border: 1px solid $white-50;
+    cursor: pointer;
+    display: block;
+    font-size: 15px;
+    font-weight: 400;
+    margin: 0 auto 40px;
+    min-width: 300px;
+    padding: 14px;
+
+    &:hover,
+    &:focus {
+      background-color: $trailhead-blue-60;
+      border-color: transparent;
+    }
+
+    &:focus {
+      outline: dotted 1px;
+    }
+
+    &:active {
+      background-color: $trailhead-blue-70;
+    }
+  }
+
+  .trailheadInner,
+  .trailheadStart {
+    animation: fadeIn 0.4s;
+  }
+}
+
+.trailheadCards {
+  background: var(--trailhead-cards-background-color);
+  max-height: 1000px;
+  overflow: hidden;
+  text-align: center;
+  transition: max-height 0.5s $photon-easing;
+
+
+  &.collapsed {
+    max-height: 0;
+  }
+
+  h1 {
+    font-size: 36px;
+    font-weight: 200;
+    margin: 0 0 40px;
+    color: var(--trailhead-header-text-color);
+  }
+}
+
+.trailheadCardsInner {
+  margin: auto;
+  padding: 40px $section-horizontal-padding;
+
+  @media (min-width: $break-point-medium) {
+    width: $wrapper-max-width-medium;
+  }
+
+  @media (min-width: $break-point-large) {
+    width: $wrapper-max-width-large;
+  }
+
+  @media (min-width: $break-point-widest) {
+    width: $wrapper-max-width-widest;
+  }
+
+  .icon-dismiss {
+    border: 0;
+    cursor: pointer;
+    inset-inline-end: 15px;
+    padding: 15px;
+    opacity: 0.75;
+    position: absolute;
+    top: 15px;
+
+    &:hover,
+    &:focus {
+      background-color: var(--newtab-element-hover-color);
+    }
+  }
+}
+
+.trailheadCardGrid {
+  display: grid;
+  grid-gap: $base-gutter;
+  margin: 0;
+  opacity: 0;
+  transition: opacity 0.4s;
+  transition-delay: 0.1s;
+
+  &.show {
+    opacity: 1;
+  }
+
+  @media (min-width: $break-point-medium) {
+    grid-template-columns: repeat(auto-fit, $card-width);
+  }
+
+  @media (min-width: $break-point-widest) {
+    grid-template-columns: repeat(auto-fit, $card-width-large);
+  }
+}
+
+.trailheadCard {
+  position: relative;
+  background: var(--newtab-card-background-color);
+  border-radius: 4px;
+  box-shadow: var(--newtab-card-shadow);
+
+  font-size: 13px;
+  padding: 20px;
+
+  @media (min-width: $break-point-widest) {
+    font-size: 15px;
+    padding: 40px;
+  }
+
+  .onboardingTitle {
+    font-weight: normal;
+    color: var(--newtab-text-primary-color);
+    margin: 10px 0 4px;
+    font-size: 15px;
+
+    @media (min-width: $break-point-widest) {
+      font-size: 18px;
+    }
+  }
+
+  .onboardingText {
+    margin: 0 0 60px;
+    color: var(--newtab-text-conditional-color);
+    line-height: 1.5;
+    font-weight: 200;
+  }
+
+  .onboardingButton {
+    color: var(--newtab-text-conditional-color);
+    background: var(--trailhead-card-button-background-color);
+    border: 0;
+    height: 30px;
+    min-width: 70%;
+    padding: 0 14px;
+
+    &:focus,
+    &:hover {
+      box-shadow: none;
+      background: var(--trailhead-card-button-background-hover-color);
+    }
+
+    &:focus {
+      outline: dotted 1px;
+    }
+
+    &:active {
+      background: var(--trailhead-card-button-background-active-color);
+    }
+  }
+
+  .onboardingButtonContainer {
+    height: 60px;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    text-align: center;
+  }
+}
+
+.inline-onboarding {
+  &.activity-stream.welcome {
+    overflow: scroll;
+  }
+
+  .modalOverlayInner {
+    position: absolute;
+  }
+
+  .outer-wrapper {
+    position: relative;
+
+    .prefs-button {
+      button {
+        position: absolute;
+      }
+    }
+  }
+
+  .asrouter-toggle {
+    position: absolute;
+  }
+}
--- a/browser/components/newtab/content-src/components/ASRouterAdmin/ASRouterAdmin.jsx
+++ b/browser/components/newtab/content-src/components/ASRouterAdmin/ASRouterAdmin.jsx
@@ -557,16 +557,26 @@ export class ASRouterAdminInner extends 
           </tr>
           <tr>
             <td> <button className="ASRouterButton primary button" onClick={this.setAttribution} > Force Attribution </button> </td>
           </tr>
         </table>
       </div>);
   }
 
+  renderTrailheadInfo() {
+    const {trailheadInterrupt, trailheadTriplet, trailheadInitialized} = this.state;
+    return trailheadInitialized ? (<table className="minimal-table">
+      <tbody>
+        <tr><td>Interrupt branch</td><td>{trailheadInterrupt}</td></tr>
+        <tr><td>Triplet branch</td><td>{trailheadTriplet}</td></tr>
+      </tbody>
+    </table>) : <p>Trailhead is not initialized. To update these values, load about:welcome.</p>;
+  }
+
   getSection() {
     const [section] = this.props.location.routes;
     switch (section) {
       case "targeting":
         return (<React.Fragment>
           <h2>Targeting Utilities</h2>
           <button className="button" onClick={this.expireCache}>Expire Cache</button> (This expires the cache in ASR Targeting for bookmarks and top sites)
           {this.renderTargetingParameters()}
@@ -581,16 +591,18 @@ export class ASRouterAdminInner extends 
         return (<React.Fragment>
           <h2>Discovery Stream</h2>
           <DiscoveryStreamAdmin state={this.props.DiscoveryStream} otherPrefs={this.props.Prefs.values} dispatch={this.props.dispatch} />
         </React.Fragment>);
       default:
         return (<React.Fragment>
           <h2>Message Providers <button title="Restore all provider settings that ship with Firefox" className="button" onClick={this.resetPref}>Restore default prefs</button></h2>
           {this.state.providers ? this.renderProviders() : null}
+          <h2>Trailhead</h2>
+          {this.renderTrailheadInfo()}
           <h2>Messages</h2>
           {this.renderMessageFilter()}
           {this.renderMessages()}
           {this.renderPasteModal()}
         </React.Fragment>);
     }
   }
 
--- a/browser/components/newtab/content-src/components/ASRouterAdmin/ASRouterAdmin.scss
+++ b/browser/components/newtab/content-src/components/ASRouterAdmin/ASRouterAdmin.scss
@@ -1,9 +1,8 @@
-
 .asrouter-admin {
   $border-color: var(--newtab-border-secondary-color);
   $monospace: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Mono', 'Droid Sans Mono', 'Source Code Pro', monospace;
   $sidebar-width: 240px;
   margin: 0 auto;
   font-size: 14px;
   padding-left: $sidebar-width;
   display: flex;
@@ -43,16 +42,34 @@
     padding: 6px 12px;
     margin-inline-start: 5px;
     margin-bottom: 0;
   }
 
   table {
     border-collapse: collapse;
     width: 100%;
+
+    &.minimal-table {
+      border-collapse: collapse;
+
+      td {
+        padding: 8px;
+        border: 1px solid $border-color;
+      }
+
+      td:first-child {
+        width: 1%;
+        white-space: nowrap;
+      }
+
+      td:not(:first-child) {
+        font-family: $monospace;
+      }
+    }
   }
 
   .sourceLabel {
     background: var(--newtab-textbox-background-color);
     padding: 2px 5px;
     border-radius: 3px;
 
     &.isDisabled {
@@ -156,9 +173,8 @@
     margin-bottom: 20px;
   }
 
   .optOutNote {
     font-size: 12px;
     margin-inline-start: 4px;
   }
 }
-
--- a/browser/components/newtab/content-src/components/Base/Base.jsx
+++ b/browser/components/newtab/content-src/components/Base/Base.jsx
@@ -70,16 +70,17 @@ export class _Base extends React.PureCom
 
   updateTheme() {
     const bodyClassName = [
       "activity-stream",
       // If we skipped the about:welcome overlay and removed the CSS classes
       // we don't want to add them back to the Activity Stream view
       document.body.classList.contains("welcome") ? "welcome" : "",
       document.body.classList.contains("hide-main") ? "hide-main" : "",
+      document.body.classList.contains("inline-onboarding") ? "inline-onboarding" : "",
     ].filter(v => v).join(" ");
     global.document.body.className = bodyClassName;
   }
 
   render() {
     const {props} = this;
     const {App, locale, strings} = props;
     const {initialized} = App;
@@ -166,17 +167,17 @@ export class BaseContent extends React.P
           <main>
             {prefs.showSearch &&
               <div className="non-collapsible-section">
                 <ErrorBoundary>
                   <Search showLogo={noSectionsEnabled} handoffEnabled={searchHandoffEnabled} {...props.Search} />
                 </ErrorBoundary>
               </div>
             }
-            <ASRouterUISurface dispatch={this.props.dispatch} />
+            <ASRouterUISurface fxaEndpoint={this.props.Prefs.values.fxa_endpoint} dispatch={this.props.dispatch} />
             <div className={`body-wrapper${(initialized ? " on" : "")}`}>
               {isDiscoveryStream ? (
                 <ErrorBoundary className="borderless-error">
                   {prefs.darkModeMessage && <DarkModeMessage />}
                   <DiscoveryStreamBase />
                 </ErrorBoundary>) : <Sections />}
               <PrefsButton onClick={this.openPreferences} />
             </div>
--- a/browser/components/newtab/content-src/components/Search/_Search.scss
+++ b/browser/components/newtab/content-src/components/Search/_Search.scss
@@ -241,17 +241,17 @@
       to {
         visibility: hidden;
       }
     }
   }
 }
 
 @media (min-height: 701px) {
-  .fixed-search {
+  body:not(.inline-onboarding) .fixed-search {
     main {
       padding-top: 146px;
     }
 
     .search-wrapper {
       $search-header-bar-height: 95px;
       $search-height: 35px;
       $search-icon-size: 16px;
--- a/browser/components/newtab/content-src/styles/_activity-stream.scss
+++ b/browser/components/newtab/content-src/styles/_activity-stream.scss
@@ -8,16 +8,20 @@ html {
   height: 100%;
 }
 
 body,
 #root { // sass-lint:disable-line no-ids
   min-height: 100vh;
 }
 
+#root { // sass-lint:disable-line no-ids
+  position: relative;
+}
+
 body {
   background-color: var(--newtab-background-color);
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Ubuntu', 'Helvetica Neue', sans-serif;
   font-size: 16px;
   overflow-y: scroll;
 }
 
 h1,
@@ -160,8 +164,9 @@ input {
 @import '../asrouter/components/ModalOverlay/ModalOverlay';
 @import '../asrouter/templates/ReturnToAMO/ReturnToAMO';
 @import '../asrouter/templates/SimpleBelowSearchSnippet/SimpleBelowSearchSnippet';
 @import '../asrouter/templates/SimpleSnippet/SimpleSnippet';
 @import '../asrouter/templates/SubmitFormSnippet/SubmitFormSnippet';
 @import '../asrouter/templates/OnboardingMessage/OnboardingMessage';
 @import '../asrouter/templates/EOYSnippet/EOYSnippet';
 @import '../asrouter/templates/StartupOverlay/StartupOverlay';
+@import '../asrouter/templates/Trailhead/Trailhead';
--- a/browser/components/newtab/content-src/styles/_theme.scss
+++ b/browser/components/newtab/content-src/styles/_theme.scss
@@ -73,16 +73,23 @@ body {
   --newtab-card-hairline-color: #{$black-10};
   --newtab-card-placeholder-color: #{$grey-30};
   --newtab-card-shadow: 0 1px 4px 0 #{$grey-90-10};
 
   // Snippets
   --newtab-snippets-background-color: #{$white};
   --newtab-snippets-hairline-color: transparent;
 
+  // Trailhead
+  --trailhead-header-text-color: #{$trailhead-purple};
+  --trailhead-cards-background-color: #{$grey-20};
+  --trailhead-card-button-background-color: #{$grey-90-10};
+  --trailhead-card-button-background-hover-color: #{$grey-90-20};
+  --trailhead-card-button-background-active-color: #{$grey-90-30};
+
   &[lwt-newtab-brighttext]:not(.force-light-theme) {
     // General styles
     --newtab-background-color: #{$grey-80};
     --newtab-border-primary-color: #{$grey-10-80};
     --newtab-border-secondary-color: #{$grey-10-10};
     --newtab-button-primary-color: #{$blue-60};
     --newtab-button-secondary-color: #{$grey-70};
     --newtab-element-active-color: #{$grey-10-20};
@@ -131,10 +138,17 @@ body {
     --newtab-card-background-color: #{$grey-70};
     --newtab-card-hairline-color: #{$grey-10-10};
     --newtab-card-placeholder-color: #{$grey-60};
     --newtab-card-shadow: 0 1px 8px 0 #{$grey-90-20};
 
     // Snippets
     --newtab-snippets-background-color: #{$grey-70};
     --newtab-snippets-hairline-color: #{$white-10};
+
+    // Trailhead
+    --trailhead-header-text-color: #{$white-60};
+    --trailhead-cards-background-color: #{$grey-90-10};
+    --trailhead-card-button-background-color: #{$grey-90-30};
+    --trailhead-card-button-background-hover-color: #{$grey-90-50};
+    --trailhead-card-button-background-active-color: #{$grey-90-70};
   }
 }
--- a/browser/components/newtab/content-src/styles/_variables.scss
+++ b/browser/components/newtab/content-src/styles/_variables.scss
@@ -14,16 +14,17 @@
 $grey-80: #2A2A2E;
 $grey-90: #0C0C0D;
 $teal-10: #A7FFFE;
 $teal-60: #00C8D7;
 $teal-70: #008EA4;
 $teal-80: #005A71;
 $red-60: #D70022;
 $yellow-50: #FFE900;
+$violet-20: #CB9EFF;
 
 // Photon opacity from http://design.firefox.com/photon/visuals/color.html#opacity
 $grey-10-10: rgba($grey-10, 0.1);
 $grey-10-20: rgba($grey-10, 0.2);
 $grey-10-30: rgba($grey-10, 0.3);
 $grey-10-40: rgba($grey-10, 0.4);
 $grey-10-50: rgba($grey-10, 0.5);
 $grey-10-60: rgba($grey-10, 0.6);
@@ -52,31 +53,37 @@
 $black-15: rgba($black, 0.15);
 $black-20: rgba($black, 0.2);
 $black-25: rgba($black, 0.25);
 $black-30: rgba($black, 0.3);
 
 // Other colors
 $white: #FFF;
 $white-10: rgba($white, 0.1);
+$white-50: rgba($white, 0.5);
+$white-60: rgba($white, 0.6);
+$white-70: rgba($white, 0.7);
 $pocket-teal: #50BCB6;
 $pocket-red: #EF4056;
 $shadow-10: rgba(12, 12, 13, 0.1);
 $bookmark-icon-fill: #0A84FF;
 $download-icon-fill: #12BC00;
 $pocket-icon-fill: #D70022;
 $email-input-focus: rgba($blue-50, 0.3);
 $email-input-invalid: rgba($red-60, 0.3);
 $aw-extra-blue-1: #004EC2;
 $aw-extra-blue-2: #0080FF;
 $aw-extra-blue-3: #00C7FF;
 $about-welcome-gradient: linear-gradient(to bottom, $blue-70 40%, $aw-extra-blue-1 60%, $blue-60 80%, $aw-extra-blue-2 90%, $aw-extra-blue-3 100%);
 $about-welcome-extra-links: #676F7E;
 $firefox-wordmark-default-color: #363959;
 $firefox-wordmark-darktheme-color: $white;
+$trailhead-purple: #2B2156;
+$trailhead-blue-60: #0250BB;
+$trailhead-blue-70: #054096;
 
 // Photon transitions from http://design.firefox.com/photon/motion/duration-and-easing.html
 $photon-easing: cubic-bezier(0.07, 0.95, 0, 1);
 
 $border-radius: 3px;
 
 // Grid related styles
 $base-gutter: 32px;
--- a/browser/components/newtab/css/activity-stream-linux.css
+++ b/browser/components/newtab/css/activity-stream-linux.css
@@ -62,17 +62,22 @@ body {
   --newtab-topsites-icon-shadow: inset 0 0 0 1px var(--newtab-inner-box-shadow-color);
   --newtab-topsites-label-color: inherit;
   --newtab-card-active-outline-color: #D7D7DB;
   --newtab-card-background-color: #FFF;
   --newtab-card-hairline-color: rgba(0, 0, 0, 0.1);
   --newtab-card-placeholder-color: #D7D7DB;
   --newtab-card-shadow: 0 1px 4px 0 rgba(12, 12, 13, 0.1);
   --newtab-snippets-background-color: #FFF;
-  --newtab-snippets-hairline-color: transparent; }
+  --newtab-snippets-hairline-color: transparent;
+  --trailhead-header-text-color: #2B2156;
+  --trailhead-cards-background-color: #EDEDF0;
+  --trailhead-card-button-background-color: rgba(12, 12, 13, 0.1);
+  --trailhead-card-button-background-hover-color: rgba(12, 12, 13, 0.2);
+  --trailhead-card-button-background-active-color: rgba(12, 12, 13, 0.3); }
   body[lwt-newtab-brighttext]:not(.force-light-theme) {
     --newtab-background-color: #2A2A2E;
     --newtab-border-primary-color: rgba(249, 249, 250, 0.8);
     --newtab-border-secondary-color: rgba(249, 249, 250, 0.1);
     --newtab-button-primary-color: #0060DF;
     --newtab-button-secondary-color: #38383D;
     --newtab-element-active-color: rgba(249, 249, 250, 0.2);
     --newtab-element-hover-color: rgba(249, 249, 250, 0.1);
@@ -106,17 +111,22 @@ body {
     --newtab-topsites-icon-shadow: none;
     --newtab-topsites-label-color: rgba(249, 249, 250, 0.8);
     --newtab-card-active-outline-color: #4A4A4F;
     --newtab-card-background-color: #38383D;
     --newtab-card-hairline-color: rgba(249, 249, 250, 0.1);
     --newtab-card-placeholder-color: #4A4A4F;
     --newtab-card-shadow: 0 1px 8px 0 rgba(12, 12, 13, 0.2);
     --newtab-snippets-background-color: #38383D;
-    --newtab-snippets-hairline-color: rgba(255, 255, 255, 0.1); }
+    --newtab-snippets-hairline-color: rgba(255, 255, 255, 0.1);
+    --trailhead-header-text-color: rgba(255, 255, 255, 0.6);
+    --trailhead-cards-background-color: rgba(12, 12, 13, 0.1);
+    --trailhead-card-button-background-color: rgba(12, 12, 13, 0.3);
+    --trailhead-card-button-background-hover-color: rgba(12, 12, 13, 0.5);
+    --trailhead-card-button-background-active-color: rgba(12, 12, 13, 0.7); }
 
 .icon {
   background-position: center center;
   background-repeat: no-repeat;
   background-size: 16px;
   -moz-context-properties: fill;
   display: inline-block;
   fill: var(--newtab-icon-primary-color);
@@ -225,16 +235,19 @@ body {
 
 html {
   height: 100%; }
 
 body,
 #root {
   min-height: 100vh; }
 
+#root {
+  position: relative; }
+
 body {
   background-color: var(--newtab-background-color);
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Ubuntu', 'Helvetica Neue', sans-serif;
   font-size: 16px;
   overflow-y: scroll; }
 
 h1,
 h2 {
@@ -1131,41 +1144,41 @@ main {
     top: 16px;
     width: 1px; }
 
 @keyframes caret-animation {
   to {
     visibility: hidden; } }
 
 @media (min-height: 701px) {
-  .fixed-search main {
+  body:not(.inline-onboarding) .fixed-search main {
     padding-top: 146px; }
-  .fixed-search .search-wrapper {
+  body:not(.inline-onboarding) .fixed-search .search-wrapper {
     background-color: var(--newtab-search-header-background-color);
     border-bottom: solid 1px var(--newtab-border-secondary-color);
     height: 95px;
     left: 0;
     padding: 30px 0;
     position: fixed;
     top: 0;
     width: 100%;
     z-index: 9; }
-    .fixed-search .search-wrapper .search-inner-wrapper {
+    body:not(.inline-onboarding) .fixed-search .search-wrapper .search-inner-wrapper {
       height: 35px; }
-    .fixed-search .search-wrapper input {
+    body:not(.inline-onboarding) .fixed-search .search-wrapper input {
       background-position-x: 16px;
       background-size: 16px; }
-      .fixed-search .search-wrapper input:dir(rtl) {
+      body:not(.inline-onboarding) .fixed-search .search-wrapper input:dir(rtl) {
         background-position-x: right 16px; }
-  .fixed-search .search-handoff-button {
+  body:not(.inline-onboarding) .fixed-search .search-handoff-button {
     background-position-x: 12px;
     background-size: 24px; }
-    .fixed-search .search-handoff-button:dir(rtl) {
+    body:not(.inline-onboarding) .fixed-search .search-handoff-button:dir(rtl) {
       background-position-x: right 12px; }
-    .fixed-search .search-handoff-button .fake-caret {
+    body:not(.inline-onboarding) .fixed-search .search-handoff-button .fake-caret {
       top: 10px; } }
 
 .contentSearchSuggestionTable {
   background-color: var(--newtab-search-dropdown-color);
   border: 0;
   box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(0, 0, 0, 0.2);
   transform: translateY(4px); }
   .contentSearchSuggestionTable .contentSearchHeader {
@@ -1643,16 +1656,26 @@ main {
   .asrouter-admin h2 .button {
     font-size: 14px;
     padding: 6px 12px;
     margin-inline-start: 5px;
     margin-bottom: 0; }
   .asrouter-admin table {
     border-collapse: collapse;
     width: 100%; }
+    .asrouter-admin table.minimal-table {
+      border-collapse: collapse; }
+      .asrouter-admin table.minimal-table td {
+        padding: 8px;
+        border: 1px solid var(--newtab-border-secondary-color); }
+      .asrouter-admin table.minimal-table td:first-child {
+        width: 1%;
+        white-space: nowrap; }
+      .asrouter-admin table.minimal-table td:not(:first-child) {
+        font-family: "SF Mono", "Monaco", "Inconsolata", "Fira Mono", "Droid Sans Mono", "Source Code Pro", monospace; }
   .asrouter-admin .sourceLabel {
     background: var(--newtab-textbox-background-color);
     padding: 2px 5px;
     border-radius: 3px; }
     .asrouter-admin .sourceLabel.isDisabled {
       background: rgba(215, 0, 34, 0.3);
       color: #D70022; }
   .asrouter-admin .message-item:first-child td {
@@ -2737,18 +2760,17 @@ main {
   width: 100%; }
   .snippets-preview-banner span {
     vertical-align: middle; }
 
 .activity-stream.modal-open {
   overflow: hidden; }
 
 .modalOverlayOuter {
-  background: #FFF;
-  opacity: 0.93;
+  background: var(--newtab-overlay-color);
   height: 100%;
   position: fixed;
   top: 0;
   width: 100%;
   display: none;
   z-index: 1100; }
   .modalOverlayOuter.active {
     display: block; }
@@ -3202,39 +3224,16 @@ main {
           font-weight: 400; }
         .onboardingMessage .onboardingContent > span > p {
           margin-top: 0;
           line-height: 22px;
           font-size: 15px; } }
   @media (max-width: 650px) {
     .onboardingMessage {
       height: 250px; } }
-  .onboardingMessage .onboardingMessageImage {
-    height: 100px;
-    width: 120px;
-    background-size: 120px;
-    background-position: center center;
-    background-repeat: no-repeat;
-    display: inline-block;
-    vertical-align: middle; }
-    @media (max-width: 850px) {
-      .onboardingMessage .onboardingMessageImage {
-        height: 75px;
-        min-width: 80px;
-        background-size: 80px; } }
-    .onboardingMessage .onboardingMessageImage.addons {
-      background-image: url("resource://activity-stream/data/content/assets/illustration-addons@2x.png"); }
-    .onboardingMessage .onboardingMessageImage.privatebrowsing {
-      background-image: url("resource://activity-stream/data/content/assets/illustration-privatebrowsing@2x.png"); }
-    .onboardingMessage .onboardingMessageImage.screenshots {
-      background-image: url("resource://activity-stream/data/content/assets/illustration-screenshots@2x.png"); }
-    .onboardingMessage .onboardingMessageImage.gift {
-      background-image: url("resource://activity-stream/data/content/assets/illustration-gift@2x.png"); }
-    .onboardingMessage .onboardingMessageImage.sync {
-      background-image: url("resource://activity-stream/data/content/assets/illustration-sync@2x.png"); }
   .onboardingMessage .onboardingContent {
     height: 175px; }
     .onboardingMessage .onboardingContent > span > h3 {
       color: #0C0C0D;
       margin-bottom: 8px;
       font-weight: 400; }
     .onboardingMessage .onboardingContent > span > p {
       color: #4A4A4F;
@@ -3275,16 +3274,62 @@ main {
     margin-top: 40px;
     margin-inline-start: 215px; }
     @media (max-width: 850px) {
       .onboardingMessage::before {
         content: none; } }
   .onboardingMessage:last-child::before {
     content: none; }
 
+.onboardingMessageImage {
+  height: 100px;
+  width: 120px;
+  background-size: 120px;
+  background-position: center center;
+  background-repeat: no-repeat;
+  display: inline-block;
+  vertical-align: middle; }
+  @media (max-width: 850px) {
+    .onboardingMessageImage {
+      height: 75px;
+      min-width: 80px;
+      background-size: 80px; } }
+  .onboardingMessageImage.addons {
+    background-image: url("../data/content/assets/illustration-addons@2x.png"); }
+  .onboardingMessageImage.privatebrowsing {
+    background-image: url("../data/content/assets/illustration-privatebrowsing@2x.png"); }
+  .onboardingMessageImage.screenshots {
+    background-image: url("../data/content/assets/illustration-screenshots@2x.png"); }
+  .onboardingMessageImage.gift {
+    background-image: url("../data/content/assets/illustration-gift@2x.png"); }
+  .onboardingMessageImage.sync {
+    background-image: url("../data/content/assets/illustration-sync@2x.png"); }
+  .onboardingMessageImage.devices {
+    background-image: url("../data/content/assets/trailhead/card-illo-devices.png"); }
+  .onboardingMessageImage.fbcont {
+    background-image: url("../data/content/assets/trailhead/card-illo-fbcont.png"); }
+  .onboardingMessageImage.ffmonitor {
+    background-image: url("../data/content/assets/trailhead/card-illo-ffmonitor.png"); }
+  .onboardingMessageImage.ffsend {
+    background-image: url("../data/content/assets/trailhead/card-illo-ffsend.png"); }
+  .onboardingMessageImage.lockwise {
+    background-image: url("../data/content/assets/trailhead/card-illo-lockwise.png"); }
+  .onboardingMessageImage.mobile {
+    background-image: url("../data/content/assets/trailhead/card-illo-mobile.png"); }
+  .onboardingMessageImage.pledge {
+    background-image: url("../data/content/assets/trailhead/card-illo-pledge.png"); }
+  .onboardingMessageImage.pocket {
+    background-image: url("../data/content/assets/trailhead/card-illo-pocket.png"); }
+  .onboardingMessageImage.private {
+    background-image: url("../data/content/assets/trailhead/card-illo-private.png"); }
+  .onboardingMessageImage.sendtab {
+    background-image: url("../data/content/assets/trailhead/card-illo-sendtab.png"); }
+  .onboardingMessageImage.tracking {
+    background-image: url("../data/content/assets/trailhead/card-illo-tracking.png"); }
+
 .EOYSnippetForm {
   margin: 10px 0 8px;
   align-self: start;
   font-size: 14px;
   display: flex;
   align-items: center; }
   .EOYSnippetForm .donation-amount,
   .EOYSnippetForm .donation-form-url {
@@ -3569,8 +3614,284 @@ a.firstrun-link {
 
 @keyframes fade-down {
   0% {
     opacity: 0;
     transform: translateY(-15px); }
   100% {
     opacity: 1;
     transform: translateY(0); } }
+
+.trailhead {
+  background: url("../data/content/assets/trailhead/accounts-form-bg.jpg") bottom/cover;
+  color: #FFF;
+  height: auto;
+  top: 100px; }
+  .trailhead a {
+    color: #FFF;
+    text-decoration: underline; }
+  .trailhead input,
+  .trailhead button {
+    border-radius: 4px;
+    padding: 10px; }
+  .trailhead .trailheadInner {
+    display: grid;
+    grid-column-gap: 40px;
+    grid-template-columns: 5fr 3fr;
+    padding: 40px 60px; }
+  .trailhead .trailheadContent h1 {
+    font-size: 36px;
+    font-weight: 200;
+    line-height: 46px;
+    margin: 0; }
+  .trailhead .trailheadContent .trailheadLearn {
+    display: block;
+    margin-top: 30px; }
+    @media (min-width: 850px) {
+      .trailhead .trailheadContent .trailheadLearn {
+        margin-inline-start: 74px; } }
+  .trailhead.syncCohort {
+    left: calc(50% - 430px);
+    width: 860px; }
+    @media (max-width: 860px) {
+      .trailhead.syncCohort {
+        left: 0;
+        width: 100%; } }
+    .trailhead.syncCohort .trailheadInner {
+      grid-template-columns: 4fr 3fr; }
+    .trailhead.syncCohort .trailheadContent .trailheadBenefits {
+      background: url("../data/content/assets/sync-devices-trailhead.svg");
+      background-position: center center;
+      background-repeat: no-repeat;
+      background-size: contain;
+      height: 200px;
+      margin-inline-end: 60px; }
+    .trailhead.syncCohort .trailheadContent .trailheadLearn {
+      margin-inline-start: 0; }
+  .trailhead .trailheadBenefits {
+    padding: 0; }
+    .trailhead .trailheadBenefits li {
+      background-position: left 6px;
+      background-repeat: no-repeat;
+      background-size: 40px;
+      -moz-context-properties: fill;
+      fill: #0A84FF;
+      list-style: none;
+      padding-top: 8px; }
+      @media (min-width: 850px) {
+        .trailhead .trailheadBenefits li {
+          background-position-y: 4px;
+          background-size: 62px;
+          margin-inline-end: 60px;
+          padding-inline-start: 74px; } }
+      .trailhead .trailheadBenefits li:dir(rtl) {
+        background-position-x: right; }
+      .trailhead .trailheadBenefits li.knowledge {
+        background-image: url("../data/content/assets/trailhead/benefit-knowledge.png"); }
+      .trailhead .trailheadBenefits li.privacy {
+        background-image: url("../data/content/assets/trailhead/benefit-privacy.png"); }
+      .trailhead .trailheadBenefits li.products {
+        background-image: url("../data/content/assets/trailhead/benefit-products.png"); }
+    .trailhead .trailheadBenefits h3 {
+      color: #CB9EFF;
+      font-size: 22px;
+      font-weight: 400;
+      margin: 0 0 4px;
+      padding-inline-start: 52px; }
+      @media (min-width: 850px) {
+        .trailhead .trailheadBenefits h3 {
+          padding-inline-start: 0; } }
+    .trailhead .trailheadBenefits p {
+      color: #FFF;
+      font-size: 15px;
+      line-height: 22px;
+      margin: 4px 0 15px; }
+  .trailhead .trailheadForm {
+    background: url("../data/content/assets/trailhead/firefox-logo.png") top center/100px no-repeat;
+    min-width: 260px;
+    padding-top: 100px;
+    text-align: center; }
+    .trailhead .trailheadForm h3 {
+      font-size: 36px;
+      font-weight: 200;
+      line-height: 46px;
+      margin: 12px 0 4px; }
+    .trailhead .trailheadForm p {
+      color: #FFF;
+      font-size: 15px;
+      line-height: 22px;
+      margin: 0 0 20px; }
+    .trailhead .trailheadForm .trailheadTerms {
+      margin: 4px 30px 20px; }
+      .trailhead .trailheadForm .trailheadTerms a, .trailhead .trailheadForm .trailheadTerms {
+        color: rgba(255, 255, 255, 0.7);
+        font-size: 12px;
+        line-height: 20px; }
+    .trailhead .trailheadForm form {
+      position: relative; }
+      .trailhead .trailheadForm form .error.active {
+        inset-inline-start: 0;
+        z-index: 0; }
+    .trailhead .trailheadForm button,
+    .trailhead .trailheadForm input {
+      width: 100%; }
+    .trailhead .trailheadForm input {
+      background-color: #FFF;
+      border: 1px solid #737373;
+      box-shadow: none;
+      color: #38383D;
+      font-size: 15px;
+      transition: border-color 150ms, box-shadow 150ms; }
+      .trailhead .trailheadForm input:hover {
+        border-color: #0C0C0D; }
+      .trailhead .trailheadForm input:focus {
+        border-color: #0A84FF;
+        box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.3); }
+      .trailhead .trailheadForm input.invalid {
+        border-color: #D70022; }
+      .trailhead .trailheadForm input.invalid:focus {
+        box-shadow: 0 0 0 3px rgba(215, 0, 34, 0.3); }
+    .trailhead .trailheadForm button {
+      background-color: #0060DF;
+      border: 0;
+      cursor: pointer;
+      display: block;
+      font-size: 15px;
+      font-weight: 400;
+      padding: 14px; }
+      .trailhead .trailheadForm button:hover, .trailhead .trailheadForm button:focus {
+        background-color: #0250BB; }
+      .trailhead .trailheadForm button:focus {
+        outline: dotted 1px; }
+      .trailhead .trailheadForm button:active {
+        background-color: #054096; }
+  .trailhead .trailheadStart {
+    border: 1px solid rgba(255, 255, 255, 0.5);
+    cursor: pointer;
+    display: block;
+    font-size: 15px;
+    font-weight: 400;
+    margin: 0 auto 40px;
+    min-width: 300px;
+    padding: 14px; }
+    .trailhead .trailheadStart:hover, .trailhead .trailheadStart:focus {
+      background-color: #0250BB;
+      border-color: transparent; }
+    .trailhead .trailheadStart:focus {
+      outline: dotted 1px; }
+    .trailhead .trailheadStart:active {
+      background-color: #054096; }
+  .trailhead .trailheadInner,
+  .trailhead .trailheadStart {
+    animation: fadeIn 0.4s; }
+
+.trailheadCards {
+  background: var(--trailhead-cards-background-color);
+  max-height: 1000px;
+  overflow: hidden;
+  text-align: center;
+  transition: max-height 0.5s cubic-bezier(0.07, 0.95, 0, 1); }
+  .trailheadCards.collapsed {
+    max-height: 0; }
+  .trailheadCards h1 {
+    font-size: 36px;
+    font-weight: 200;
+    margin: 0 0 40px;
+    color: var(--trailhead-header-text-color); }
+
+.trailheadCardsInner {
+  margin: auto;
+  padding: 40px 25px; }
+  @media (min-width: 610px) {
+    .trailheadCardsInner {
+      width: 530px; } }
+  @media (min-width: 866px) {
+    .trailheadCardsInner {
+      width: 786px; } }
+  @media (min-width: 1122px) {
+    .trailheadCardsInner {
+      width: 1042px; } }
+  .trailheadCardsInner .icon-dismiss {
+    border: 0;
+    cursor: pointer;
+    inset-inline-end: 15px;
+    padding: 15px;
+    opacity: 0.75;
+    position: absolute;
+    top: 15px; }
+    .trailheadCardsInner .icon-dismiss:hover, .trailheadCardsInner .icon-dismiss:focus {
+      background-color: var(--newtab-element-hover-color); }
+
+.trailheadCardGrid {
+  display: grid;
+  grid-gap: 32px;
+  margin: 0;
+  opacity: 0;
+  transition: opacity 0.4s;
+  transition-delay: 0.1s; }
+  .trailheadCardGrid.show {
+    opacity: 1; }
+  @media (min-width: 610px) {
+    .trailheadCardGrid {
+      grid-template-columns: repeat(auto-fit, 224px); } }
+  @media (min-width: 1122px) {
+    .trailheadCardGrid {
+      grid-template-columns: repeat(auto-fit, 309px); } }
+
+.trailheadCard {
+  position: relative;
+  background: var(--newtab-card-background-color);
+  border-radius: 4px;
+  box-shadow: var(--newtab-card-shadow);
+  font-size: 13px;
+  padding: 20px; }
+  @media (min-width: 1122px) {
+    .trailheadCard {
+      font-size: 15px;
+      padding: 40px; } }
+  .trailheadCard .onboardingTitle {
+    font-weight: normal;
+    color: var(--newtab-text-primary-color);
+    margin: 10px 0 4px;
+    font-size: 15px; }
+    @media (min-width: 1122px) {
+      .trailheadCard .onboardingTitle {
+        font-size: 18px; } }
+  .trailheadCard .onboardingText {
+    margin: 0 0 60px;
+    color: var(--newtab-text-conditional-color);
+    line-height: 1.5;
+    font-weight: 200; }
+  .trailheadCard .onboardingButton {
+    color: var(--newtab-text-conditional-color);
+    background: var(--trailhead-card-button-background-color);
+    border: 0;
+    height: 30px;
+    min-width: 70%;
+    padding: 0 14px; }
+    .trailheadCard .onboardingButton:focus, .trailheadCard .onboardingButton:hover {
+      box-shadow: none;
+      background: var(--trailhead-card-button-background-hover-color); }
+    .trailheadCard .onboardingButton:focus {
+      outline: dotted 1px; }
+    .trailheadCard .onboardingButton:active {
+      background: var(--trailhead-card-button-background-active-color); }
+  .trailheadCard .onboardingButtonContainer {
+    height: 60px;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    text-align: center; }
+
+.inline-onboarding.activity-stream.welcome {
+  overflow: scroll; }
+
+.inline-onboarding .modalOverlayInner {
+  position: absolute; }
+
+.inline-onboarding .outer-wrapper {
+  position: relative; }
+  .inline-onboarding .outer-wrapper .prefs-button button {
+    position: absolute; }
+
+.inline-onboarding .asrouter-toggle {
+  position: absolute; }
--- a/browser/components/newtab/css/activity-stream-mac.css
+++ b/browser/components/newtab/css/activity-stream-mac.css
@@ -65,17 +65,22 @@ body {
   --newtab-topsites-icon-shadow: inset 0 0 0 1px var(--newtab-inner-box-shadow-color);
   --newtab-topsites-label-color: inherit;
   --newtab-card-active-outline-color: #D7D7DB;
   --newtab-card-background-color: #FFF;
   --newtab-card-hairline-color: rgba(0, 0, 0, 0.1);
   --newtab-card-placeholder-color: #D7D7DB;
   --newtab-card-shadow: 0 1px 4px 0 rgba(12, 12, 13, 0.1);
   --newtab-snippets-background-color: #FFF;
-  --newtab-snippets-hairline-color: transparent; }
+  --newtab-snippets-hairline-color: transparent;
+  --trailhead-header-text-color: #2B2156;
+  --trailhead-cards-background-color: #EDEDF0;
+  --trailhead-card-button-background-color: rgba(12, 12, 13, 0.1);
+  --trailhead-card-button-background-hover-color: rgba(12, 12, 13, 0.2);
+  --trailhead-card-button-background-active-color: rgba(12, 12, 13, 0.3); }
   body[lwt-newtab-brighttext]:not(.force-light-theme) {
     --newtab-background-color: #2A2A2E;
     --newtab-border-primary-color: rgba(249, 249, 250, 0.8);
     --newtab-border-secondary-color: rgba(249, 249, 250, 0.1);
     --newtab-button-primary-color: #0060DF;
     --newtab-button-secondary-color: #38383D;
     --newtab-element-active-color: rgba(249, 249, 250, 0.2);
     --newtab-element-hover-color: rgba(249, 249, 250, 0.1);
@@ -109,17 +114,22 @@ body {
     --newtab-topsites-icon-shadow: none;
     --newtab-topsites-label-color: rgba(249, 249, 250, 0.8);
     --newtab-card-active-outline-color: #4A4A4F;
     --newtab-card-background-color: #38383D;
     --newtab-card-hairline-color: rgba(249, 249, 250, 0.1);
     --newtab-card-placeholder-color: #4A4A4F;
     --newtab-card-shadow: 0 1px 8px 0 rgba(12, 12, 13, 0.2);
     --newtab-snippets-background-color: #38383D;
-    --newtab-snippets-hairline-color: rgba(255, 255, 255, 0.1); }
+    --newtab-snippets-hairline-color: rgba(255, 255, 255, 0.1);
+    --trailhead-header-text-color: rgba(255, 255, 255, 0.6);
+    --trailhead-cards-background-color: rgba(12, 12, 13, 0.1);
+    --trailhead-card-button-background-color: rgba(12, 12, 13, 0.3);
+    --trailhead-card-button-background-hover-color: rgba(12, 12, 13, 0.5);
+    --trailhead-card-button-background-active-color: rgba(12, 12, 13, 0.7); }
 
 .icon {
   background-position: center center;
   background-repeat: no-repeat;
   background-size: 16px;
   -moz-context-properties: fill;
   display: inline-block;
   fill: var(--newtab-icon-primary-color);
@@ -228,16 +238,19 @@ body {
 
 html {
   height: 100%; }
 
 body,
 #root {
   min-height: 100vh; }
 
+#root {
+  position: relative; }
+
 body {
   background-color: var(--newtab-background-color);
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Ubuntu', 'Helvetica Neue', sans-serif;
   font-size: 16px;
   overflow-y: scroll; }
 
 h1,
 h2 {
@@ -1134,41 +1147,41 @@ main {
     top: 16px;
     width: 1px; }
 
 @keyframes caret-animation {
   to {
     visibility: hidden; } }
 
 @media (min-height: 701px) {
-  .fixed-search main {
+  body:not(.inline-onboarding) .fixed-search main {
     padding-top: 146px; }
-  .fixed-search .search-wrapper {
+  body:not(.inline-onboarding) .fixed-search .search-wrapper {
     background-color: var(--newtab-search-header-background-color);
     border-bottom: solid 1px var(--newtab-border-secondary-color);
     height: 95px;
     left: 0;
     padding: 30px 0;
     position: fixed;
     top: 0;
     width: 100%;
     z-index: 9; }
-    .fixed-search .search-wrapper .search-inner-wrapper {
+    body:not(.inline-onboarding) .fixed-search .search-wrapper .search-inner-wrapper {
       height: 35px; }
-    .fixed-search .search-wrapper input {
+    body:not(.inline-onboarding) .fixed-search .search-wrapper input {
       background-position-x: 16px;
       background-size: 16px; }
-      .fixed-search .search-wrapper input:dir(rtl) {
+      body:not(.inline-onboarding) .fixed-search .search-wrapper input:dir(rtl) {
         background-position-x: right 16px; }
-  .fixed-search .search-handoff-button {
+  body:not(.inline-onboarding) .fixed-search .search-handoff-button {
     background-position-x: 12px;
     background-size: 24px; }
-    .fixed-search .search-handoff-button:dir(rtl) {
+    body:not(.inline-onboarding) .fixed-search .search-handoff-button:dir(rtl) {
       background-position-x: right 12px; }
-    .fixed-search .search-handoff-button .fake-caret {
+    body:not(.inline-onboarding) .fixed-search .search-handoff-button .fake-caret {
       top: 10px; } }
 
 .contentSearchSuggestionTable {
   background-color: var(--newtab-search-dropdown-color);
   border: 0;
   box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(0, 0, 0, 0.2);
   transform: translateY(4px); }
   .contentSearchSuggestionTable .contentSearchHeader {
@@ -1646,16 +1659,26 @@ main {
   .asrouter-admin h2 .button {
     font-size: 14px;
     padding: 6px 12px;
     margin-inline-start: 5px;
     margin-bottom: 0; }
   .asrouter-admin table {
     border-collapse: collapse;
     width: 100%; }
+    .asrouter-admin table.minimal-table {
+      border-collapse: collapse; }
+      .asrouter-admin table.minimal-table td {
+        padding: 8px;
+        border: 1px solid var(--newtab-border-secondary-color); }
+      .asrouter-admin table.minimal-table td:first-child {
+        width: 1%;
+        white-space: nowrap; }
+      .asrouter-admin table.minimal-table td:not(:first-child) {
+        font-family: "SF Mono", "Monaco", "Inconsolata", "Fira Mono", "Droid Sans Mono", "Source Code Pro", monospace; }
   .asrouter-admin .sourceLabel {
     background: var(--newtab-textbox-background-color);
     padding: 2px 5px;
     border-radius: 3px; }
     .asrouter-admin .sourceLabel.isDisabled {
       background: rgba(215, 0, 34, 0.3);
       color: #D70022; }
   .asrouter-admin .message-item:first-child td {
@@ -2740,18 +2763,17 @@ main {
   width: 100%; }
   .snippets-preview-banner span {
     vertical-align: middle; }
 
 .activity-stream.modal-open {
   overflow: hidden; }
 
 .modalOverlayOuter {
-  background: #FFF;
-  opacity: 0.93;
+  background: var(--newtab-overlay-color);
   height: 100%;
   position: fixed;
   top: 0;
   width: 100%;
   display: none;
   z-index: 1100; }
   .modalOverlayOuter.active {
     display: block; }
@@ -3205,39 +3227,16 @@ main {
           font-weight: 400; }
         .onboardingMessage .onboardingContent > span > p {
           margin-top: 0;
           line-height: 22px;
           font-size: 15px; } }
   @media (max-width: 650px) {
     .onboardingMessage {
       height: 250px; } }
-  .onboardingMessage .onboardingMessageImage {
-    height: 100px;
-    width: 120px;
-    background-size: 120px;
-    background-position: center center;
-    background-repeat: no-repeat;
-    display: inline-block;
-    vertical-align: middle; }
-    @media (max-width: 850px) {
-      .onboardingMessage .onboardingMessageImage {
-        height: 75px;
-        min-width: 80px;
-        background-size: 80px; } }
-    .onboardingMessage .onboardingMessageImage.addons {
-      background-image: url("resource://activity-stream/data/content/assets/illustration-addons@2x.png"); }
-    .onboardingMessage .onboardingMessageImage.privatebrowsing {
-      background-image: url("resource://activity-stream/data/content/assets/illustration-privatebrowsing@2x.png"); }
-    .onboardingMessage .onboardingMessageImage.screenshots {
-      background-image: url("resource://activity-stream/data/content/assets/illustration-screenshots@2x.png"); }
-    .onboardingMessage .onboardingMessageImage.gift {
-      background-image: url("resource://activity-stream/data/content/assets/illustration-gift@2x.png"); }
-    .onboardingMessage .onboardingMessageImage.sync {
-      background-image: url("resource://activity-stream/data/content/assets/illustration-sync@2x.png"); }
   .onboardingMessage .onboardingContent {
     height: 175px; }
     .onboardingMessage .onboardingContent > span > h3 {
       color: #0C0C0D;
       margin-bottom: 8px;
       font-weight: 400; }
     .onboardingMessage .onboardingContent > span > p {
       color: #4A4A4F;
@@ -3278,16 +3277,62 @@ main {
     margin-top: 40px;
     margin-inline-start: 215px; }
     @media (max-width: 850px) {
       .onboardingMessage::before {
         content: none; } }
   .onboardingMessage:last-child::before {
     content: none; }
 
+.onboardingMessageImage {
+  height: 100px;
+  width: 120px;
+  background-size: 120px;
+  background-position: center center;
+  background-repeat: no-repeat;
+  display: inline-block;
+  vertical-align: middle; }
+  @media (max-width: 850px) {
+    .onboardingMessageImage {
+      height: 75px;
+      min-width: 80px;
+      background-size: 80px; } }
+  .onboardingMessageImage.addons {
+    background-image: url("../data/content/assets/illustration-addons@2x.png"); }
+  .onboardingMessageImage.privatebrowsing {
+    background-image: url("../data/content/assets/illustration-privatebrowsing@2x.png"); }
+  .onboardingMessageImage.screenshots {
+    background-image: url("../data/content/assets/illustration-screenshots@2x.png"); }
+  .onboardingMessageImage.gift {
+    background-image: url("../data/content/assets/illustration-gift@2x.png"); }
+  .onboardingMessageImage.sync {
+    background-image: url("../data/content/assets/illustration-sync@2x.png"); }
+  .onboardingMessageImage.devices {
+    background-image: url("../data/content/assets/trailhead/card-illo-devices.png"); }
+  .onboardingMessageImage.fbcont {
+    background-image: url("../data/content/assets/trailhead/card-illo-fbcont.png"); }
+  .onboardingMessageImage.ffmonitor {
+    background-image: url("../data/content/assets/trailhead/card-illo-ffmonitor.png"); }
+  .onboardingMessageImage.ffsend {
+    background-image: url("../data/content/assets/trailhead/card-illo-ffsend.png"); }
+  .onboardingMessageImage.lockwise {
+    background-image: url("../data/content/assets/trailhead/card-illo-lockwise.png"); }
+  .onboardingMessageImage.mobile {
+    background-image: url("../data/content/assets/trailhead/card-illo-mobile.png"); }
+  .onboardingMessageImage.pledge {
+    background-image: url("../data/content/assets/trailhead/card-illo-pledge.png"); }
+  .onboardingMessageImage.pocket {
+    background-image: url("../data/content/assets/trailhead/card-illo-pocket.png"); }
+  .onboardingMessageImage.private {
+    background-image: url("../data/content/assets/trailhead/card-illo-private.png"); }
+  .onboardingMessageImage.sendtab {
+    background-image: url("../data/content/assets/trailhead/card-illo-sendtab.png"); }
+  .onboardingMessageImage.tracking {
+    background-image: url("../data/content/assets/trailhead/card-illo-tracking.png"); }
+
 .EOYSnippetForm {
   margin: 10px 0 8px;
   align-self: start;
   font-size: 14px;
   display: flex;
   align-items: center; }
   .EOYSnippetForm .donation-amount,
   .EOYSnippetForm .donation-form-url {
@@ -3572,8 +3617,284 @@ a.firstrun-link {
 
 @keyframes fade-down {
   0% {
     opacity: 0;
     transform: translateY(-15px); }
   100% {
     opacity: 1;
     transform: translateY(0); } }
+
+.trailhead {
+  background: url("../data/content/assets/trailhead/accounts-form-bg.jpg") bottom/cover;
+  color: #FFF;
+  height: auto;
+  top: 100px; }
+  .trailhead a {
+    color: #FFF;
+    text-decoration: underline; }
+  .trailhead input,
+  .trailhead button {
+    border-radius: 4px;
+    padding: 10px; }
+  .trailhead .trailheadInner {
+    display: grid;
+    grid-column-gap: 40px;
+    grid-template-columns: 5fr 3fr;
+    padding: 40px 60px; }
+  .trailhead .trailheadContent h1 {
+    font-size: 36px;
+    font-weight: 200;
+    line-height: 46px;
+    margin: 0; }
+  .trailhead .trailheadContent .trailheadLearn {
+    display: block;
+    margin-top: 30px; }
+    @media (min-width: 850px) {
+      .trailhead .trailheadContent .trailheadLearn {
+        margin-inline-start: 74px; } }
+  .trailhead.syncCohort {
+    left: calc(50% - 430px);
+    width: 860px; }
+    @media (max-width: 860px) {
+      .trailhead.syncCohort {
+        left: 0;
+        width: 100%; } }
+    .trailhead.syncCohort .trailheadInner {
+      grid-template-columns: 4fr 3fr; }
+    .trailhead.syncCohort .trailheadContent .trailheadBenefits {
+      background: url("../data/content/assets/sync-devices-trailhead.svg");
+      background-position: center center;
+      background-repeat: no-repeat;
+      background-size: contain;
+      height: 200px;
+      margin-inline-end: 60px; }
+    .trailhead.syncCohort .trailheadContent .trailheadLearn {
+      margin-inline-start: 0; }
+  .trailhead .trailheadBenefits {
+    padding: 0; }
+    .trailhead .trailheadBenefits li {
+      background-position: left 6px;
+      background-repeat: no-repeat;
+      background-size: 40px;
+      -moz-context-properties: fill;
+      fill: #0A84FF;
+      list-style: none;
+      padding-top: 8px; }
+      @media (min-width: 850px) {
+        .trailhead .trailheadBenefits li {
+          background-position-y: 4px;
+          background-size: 62px;
+          margin-inline-end: 60px;
+          padding-inline-start: 74px; } }
+      .trailhead .trailheadBenefits li:dir(rtl) {
+        background-position-x: right; }
+      .trailhead .trailheadBenefits li.knowledge {
+        background-image: url("../data/content/assets/trailhead/benefit-knowledge.png"); }
+      .trailhead .trailheadBenefits li.privacy {
+        background-image: url("../data/content/assets/trailhead/benefit-privacy.png"); }
+      .trailhead .trailheadBenefits li.products {
+        background-image: url("../data/content/assets/trailhead/benefit-products.png"); }
+    .trailhead .trailheadBenefits h3 {
+      color: #CB9EFF;
+      font-size: 22px;
+      font-weight: 400;
+      margin: 0 0 4px;
+      padding-inline-start: 52px; }
+      @media (min-width: 850px) {
+        .trailhead .trailheadBenefits h3 {
+          padding-inline-start: 0; } }
+    .trailhead .trailheadBenefits p {
+      color: #FFF;
+      font-size: 15px;
+      line-height: 22px;
+      margin: 4px 0 15px; }
+  .trailhead .trailheadForm {
+    background: url("../data/content/assets/trailhead/firefox-logo.png") top center/100px no-repeat;
+    min-width: 260px;
+    padding-top: 100px;
+    text-align: center; }
+    .trailhead .trailheadForm h3 {
+      font-size: 36px;
+      font-weight: 200;
+      line-height: 46px;
+      margin: 12px 0 4px; }
+    .trailhead .trailheadForm p {
+      color: #FFF;
+      font-size: 15px;
+      line-height: 22px;
+      margin: 0 0 20px; }
+    .trailhead .trailheadForm .trailheadTerms {
+      margin: 4px 30px 20px; }
+      .trailhead .trailheadForm .trailheadTerms a, .trailhead .trailheadForm .trailheadTerms {
+        color: rgba(255, 255, 255, 0.7);
+        font-size: 12px;
+        line-height: 20px; }
+    .trailhead .trailheadForm form {
+      position: relative; }
+      .trailhead .trailheadForm form .error.active {
+        inset-inline-start: 0;
+        z-index: 0; }
+    .trailhead .trailheadForm button,
+    .trailhead .trailheadForm input {
+      width: 100%; }
+    .trailhead .trailheadForm input {
+      background-color: #FFF;
+      border: 1px solid #737373;
+      box-shadow: none;
+      color: #38383D;
+      font-size: 15px;
+      transition: border-color 150ms, box-shadow 150ms; }
+      .trailhead .trailheadForm input:hover {
+        border-color: #0C0C0D; }
+      .trailhead .trailheadForm input:focus {
+        border-color: #0A84FF;
+        box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.3); }
+      .trailhead .trailheadForm input.invalid {
+        border-color: #D70022; }
+      .trailhead .trailheadForm input.invalid:focus {
+        box-shadow: 0 0 0 3px rgba(215, 0, 34, 0.3); }
+    .trailhead .trailheadForm button {
+      background-color: #0060DF;
+      border: 0;
+      cursor: pointer;
+      display: block;
+      font-size: 15px;
+      font-weight: 400;
+      padding: 14px; }
+      .trailhead .trailheadForm button:hover, .trailhead .trailheadForm button:focus {
+        background-color: #0250BB; }
+      .trailhead .trailheadForm button:focus {
+        outline: dotted 1px; }
+      .trailhead .trailheadForm button:active {
+        background-color: #054096; }
+  .trailhead .trailheadStart {
+    border: 1px solid rgba(255, 255, 255, 0.5);
+    cursor: pointer;
+    display: block;
+    font-size: 15px;
+    font-weight: 400;
+    margin: 0 auto 40px;
+    min-width: 300px;
+    padding: 14px; }
+    .trailhead .trailheadStart:hover, .trailhead .trailheadStart:focus {
+      background-color: #0250BB;
+      border-color: transparent; }
+    .trailhead .trailheadStart:focus {
+      outline: dotted 1px; }
+    .trailhead .trailheadStart:active {
+      background-color: #054096; }
+  .trailhead .trailheadInner,
+  .trailhead .trailheadStart {
+    animation: fadeIn 0.4s; }
+
+.trailheadCards {
+  background: var(--trailhead-cards-background-color);
+  max-height: 1000px;
+  overflow: hidden;
+  text-align: center;
+  transition: max-height 0.5s cubic-bezier(0.07, 0.95, 0, 1); }
+  .trailheadCards.collapsed {
+    max-height: 0; }
+  .trailheadCards h1 {
+    font-size: 36px;
+    font-weight: 200;
+    margin: 0 0 40px;
+    color: var(--trailhead-header-text-color); }
+
+.trailheadCardsInner {
+  margin: auto;
+  padding: 40px 25px; }
+  @media (min-width: 610px) {
+    .trailheadCardsInner {
+      width: 530px; } }
+  @media (min-width: 866px) {
+    .trailheadCardsInner {
+      width: 786px; } }
+  @media (min-width: 1122px) {
+    .trailheadCardsInner {
+      width: 1042px; } }
+  .trailheadCardsInner .icon-dismiss {
+    border: 0;
+    cursor: pointer;
+    inset-inline-end: 15px;
+    padding: 15px;
+    opacity: 0.75;
+    position: absolute;
+    top: 15px; }
+    .trailheadCardsInner .icon-dismiss:hover, .trailheadCardsInner .icon-dismiss:focus {
+      background-color: var(--newtab-element-hover-color); }
+
+.trailheadCardGrid {
+  display: grid;
+  grid-gap: 32px;
+  margin: 0;
+  opacity: 0;
+  transition: opacity 0.4s;
+  transition-delay: 0.1s; }
+  .trailheadCardGrid.show {
+    opacity: 1; }
+  @media (min-width: 610px) {
+    .trailheadCardGrid {
+      grid-template-columns: repeat(auto-fit, 224px); } }
+  @media (min-width: 1122px) {
+    .trailheadCardGrid {
+      grid-template-columns: repeat(auto-fit, 309px); } }
+
+.trailheadCard {
+  position: relative;
+  background: var(--newtab-card-background-color);
+  border-radius: 4px;
+  box-shadow: var(--newtab-card-shadow);
+  font-size: 13px;
+  padding: 20px; }
+  @media (min-width: 1122px) {
+    .trailheadCard {
+      font-size: 15px;
+      padding: 40px; } }
+  .trailheadCard .onboardingTitle {
+    font-weight: normal;
+    color: var(--newtab-text-primary-color);
+    margin: 10px 0 4px;
+    font-size: 15px; }
+    @media (min-width: 1122px) {
+      .trailheadCard .onboardingTitle {
+        font-size: 18px; } }
+  .trailheadCard .onboardingText {
+    margin: 0 0 60px;
+    color: var(--newtab-text-conditional-color);
+    line-height: 1.5;
+    font-weight: 200; }
+  .trailheadCard .onboardingButton {
+    color: var(--newtab-text-conditional-color);
+    background: var(--trailhead-card-button-background-color);
+    border: 0;
+    height: 30px;
+    min-width: 70%;
+    padding: 0 14px; }
+    .trailheadCard .onboardingButton:focus, .trailheadCard .onboardingButton:hover {
+      box-shadow: none;
+      background: var(--trailhead-card-button-background-hover-color); }
+    .trailheadCard .onboardingButton:focus {
+      outline: dotted 1px; }
+    .trailheadCard .onboardingButton:active {
+      background: var(--trailhead-card-button-background-active-color); }
+  .trailheadCard .onboardingButtonContainer {
+    height: 60px;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    text-align: center; }
+
+.inline-onboarding.activity-stream.welcome {
+  overflow: scroll; }
+
+.inline-onboarding .modalOverlayInner {
+  position: absolute; }
+
+.inline-onboarding .outer-wrapper {
+  position: relative; }
+  .inline-onboarding .outer-wrapper .prefs-button button {
+    position: absolute; }
+
+.inline-onboarding .asrouter-toggle {
+  position: absolute; }
--- a/browser/components/newtab/css/activity-stream-windows.css
+++ b/browser/components/newtab/css/activity-stream-windows.css
@@ -62,17 +62,22 @@ body {
   --newtab-topsites-icon-shadow: inset 0 0 0 1px var(--newtab-inner-box-shadow-color);
   --newtab-topsites-label-color: inherit;
   --newtab-card-active-outline-color: #D7D7DB;
   --newtab-card-background-color: #FFF;
   --newtab-card-hairline-color: rgba(0, 0, 0, 0.1);
   --newtab-card-placeholder-color: #D7D7DB;
   --newtab-card-shadow: 0 1px 4px 0 rgba(12, 12, 13, 0.1);
   --newtab-snippets-background-color: #FFF;
-  --newtab-snippets-hairline-color: transparent; }
+  --newtab-snippets-hairline-color: transparent;
+  --trailhead-header-text-color: #2B2156;
+  --trailhead-cards-background-color: #EDEDF0;
+  --trailhead-card-button-background-color: rgba(12, 12, 13, 0.1);
+  --trailhead-card-button-background-hover-color: rgba(12, 12, 13, 0.2);
+  --trailhead-card-button-background-active-color: rgba(12, 12, 13, 0.3); }
   body[lwt-newtab-brighttext]:not(.force-light-theme) {
     --newtab-background-color: #2A2A2E;
     --newtab-border-primary-color: rgba(249, 249, 250, 0.8);
     --newtab-border-secondary-color: rgba(249, 249, 250, 0.1);
     --newtab-button-primary-color: #0060DF;
     --newtab-button-secondary-color: #38383D;
     --newtab-element-active-color: rgba(249, 249, 250, 0.2);
     --newtab-element-hover-color: rgba(249, 249, 250, 0.1);
@@ -106,17 +111,22 @@ body {
     --newtab-topsites-icon-shadow: none;
     --newtab-topsites-label-color: rgba(249, 249, 250, 0.8);
     --newtab-card-active-outline-color: #4A4A4F;
     --newtab-card-background-color: #38383D;
     --newtab-card-hairline-color: rgba(249, 249, 250, 0.1);
     --newtab-card-placeholder-color: #4A4A4F;
     --newtab-card-shadow: 0 1px 8px 0 rgba(12, 12, 13, 0.2);
     --newtab-snippets-background-color: #38383D;
-    --newtab-snippets-hairline-color: rgba(255, 255, 255, 0.1); }
+    --newtab-snippets-hairline-color: rgba(255, 255, 255, 0.1);
+    --trailhead-header-text-color: rgba(255, 255, 255, 0.6);
+    --trailhead-cards-background-color: rgba(12, 12, 13, 0.1);
+    --trailhead-card-button-background-color: rgba(12, 12, 13, 0.3);
+    --trailhead-card-button-background-hover-color: rgba(12, 12, 13, 0.5);
+    --trailhead-card-button-background-active-color: rgba(12, 12, 13, 0.7); }
 
 .icon {
   background-position: center center;
   background-repeat: no-repeat;
   background-size: 16px;
   -moz-context-properties: fill;
   display: inline-block;
   fill: var(--newtab-icon-primary-color);
@@ -225,16 +235,19 @@ body {
 
 html {
   height: 100%; }
 
 body,
 #root {
   min-height: 100vh; }
 
+#root {
+  position: relative; }
+
 body {
   background-color: var(--newtab-background-color);
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Ubuntu', 'Helvetica Neue', sans-serif;
   font-size: 16px;
   overflow-y: scroll; }
 
 h1,
 h2 {
@@ -1131,41 +1144,41 @@ main {
     top: 16px;
     width: 1px; }
 
 @keyframes caret-animation {
   to {
     visibility: hidden; } }
 
 @media (min-height: 701px) {
-  .fixed-search main {
+  body:not(.inline-onboarding) .fixed-search main {
     padding-top: 146px; }
-  .fixed-search .search-wrapper {
+  body:not(.inline-onboarding) .fixed-search .search-wrapper {
     background-color: var(--newtab-search-header-background-color);
     border-bottom: solid 1px var(--newtab-border-secondary-color);
     height: 95px;
     left: 0;
     padding: 30px 0;
     position: fixed;
     top: 0;
     width: 100%;
     z-index: 9; }
-    .fixed-search .search-wrapper .search-inner-wrapper {
+    body:not(.inline-onboarding) .fixed-search .search-wrapper .search-inner-wrapper {
       height: 35px; }
-    .fixed-search .search-wrapper input {
+    body:not(.inline-onboarding) .fixed-search .search-wrapper input {
       background-position-x: 16px;
       background-size: 16px; }
-      .fixed-search .search-wrapper input:dir(rtl) {
+      body:not(.inline-onboarding) .fixed-search .search-wrapper input:dir(rtl) {
         background-position-x: right 16px; }
-  .fixed-search .search-handoff-button {
+  body:not(.inline-onboarding) .fixed-search .search-handoff-button {
     background-position-x: 12px;
     background-size: 24px; }
-    .fixed-search .search-handoff-button:dir(rtl) {
+    body:not(.inline-onboarding) .fixed-search .search-handoff-button:dir(rtl) {
       background-position-x: right 12px; }
-    .fixed-search .search-handoff-button .fake-caret {
+    body:not(.inline-onboarding) .fixed-search .search-handoff-button .fake-caret {
       top: 10px; } }
 
 .contentSearchSuggestionTable {
   background-color: var(--newtab-search-dropdown-color);
   border: 0;
   box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(0, 0, 0, 0.2);
   transform: translateY(4px); }
   .contentSearchSuggestionTable .contentSearchHeader {
@@ -1643,16 +1656,26 @@ main {
   .asrouter-admin h2 .button {
     font-size: 14px;
     padding: 6px 12px;
     margin-inline-start: 5px;
     margin-bottom: 0; }
   .asrouter-admin table {
     border-collapse: collapse;
     width: 100%; }
+    .asrouter-admin table.minimal-table {
+      border-collapse: collapse; }
+      .asrouter-admin table.minimal-table td {
+        padding: 8px;
+        border: 1px solid var(--newtab-border-secondary-color); }
+      .asrouter-admin table.minimal-table td:first-child {
+        width: 1%;
+        white-space: nowrap; }
+      .asrouter-admin table.minimal-table td:not(:first-child) {
+        font-family: "SF Mono", "Monaco", "Inconsolata", "Fira Mono", "Droid Sans Mono", "Source Code Pro", monospace; }
   .asrouter-admin .sourceLabel {
     background: var(--newtab-textbox-background-color);
     padding: 2px 5px;
     border-radius: 3px; }
     .asrouter-admin .sourceLabel.isDisabled {
       background: rgba(215, 0, 34, 0.3);
       color: #D70022; }
   .asrouter-admin .message-item:first-child td {
@@ -2737,18 +2760,17 @@ main {
   width: 100%; }
   .snippets-preview-banner span {
     vertical-align: middle; }
 
 .activity-stream.modal-open {
   overflow: hidden; }
 
 .modalOverlayOuter {
-  background: #FFF;
-  opacity: 0.93;
+  background: var(--newtab-overlay-color);
   height: 100%;
   position: fixed;
   top: 0;
   width: 100%;
   display: none;
   z-index: 1100; }
   .modalOverlayOuter.active {
     display: block; }
@@ -3202,39 +3224,16 @@ main {
           font-weight: 400; }
         .onboardingMessage .onboardingContent > span > p {
           margin-top: 0;
           line-height: 22px;
           font-size: 15px; } }
   @media (max-width: 650px) {
     .onboardingMessage {
       height: 250px; } }
-  .onboardingMessage .onboardingMessageImage {
-    height: 100px;
-    width: 120px;
-    background-size: 120px;
-    background-position: center center;
-    background-repeat: no-repeat;
-    display: inline-block;
-    vertical-align: middle; }
-    @media (max-width: 850px) {
-      .onboardingMessage .onboardingMessageImage {
-        height: 75px;
-        min-width: 80px;
-        background-size: 80px; } }
-    .onboardingMessage .onboardingMessageImage.addons {
-      background-image: url("resource://activity-stream/data/content/assets/illustration-addons@2x.png"); }
-    .onboardingMessage .onboardingMessageImage.privatebrowsing {
-      background-image: url("resource://activity-stream/data/content/assets/illustration-privatebrowsing@2x.png"); }
-    .onboardingMessage .onboardingMessageImage.screenshots {
-      background-image: url("resource://activity-stream/data/content/assets/illustration-screenshots@2x.png"); }
-    .onboardingMessage .onboardingMessageImage.gift {
-      background-image: url("resource://activity-stream/data/content/assets/illustration-gift@2x.png"); }
-    .onboardingMessage .onboardingMessageImage.sync {
-      background-image: url("resource://activity-stream/data/content/assets/illustration-sync@2x.png"); }
   .onboardingMessage .onboardingContent {
     height: 175px; }
     .onboardingMessage .onboardingContent > span > h3 {
       color: #0C0C0D;
       margin-bottom: 8px;
       font-weight: 400; }
     .onboardingMessage .onboardingContent > span > p {
       color: #4A4A4F;
@@ -3275,16 +3274,62 @@ main {
     margin-top: 40px;
     margin-inline-start: 215px; }
     @media (max-width: 850px) {
       .onboardingMessage::before {
         content: none; } }
   .onboardingMessage:last-child::before {
     content: none; }
 
+.onboardingMessageImage {
+  height: 100px;
+  width: 120px;
+  background-size: 120px;
+  background-position: center center;
+  background-repeat: no-repeat;
+  display: inline-block;
+  vertical-align: middle; }
+  @media (max-width: 850px) {
+    .onboardingMessageImage {
+      height: 75px;
+      min-width: 80px;
+      background-size: 80px; } }
+  .onboardingMessageImage.addons {
+    background-image: url("../data/content/assets/illustration-addons@2x.png"); }
+  .onboardingMessageImage.privatebrowsing {
+    background-image: url("../data/content/assets/illustration-privatebrowsing@2x.png"); }
+  .onboardingMessageImage.screenshots {
+    background-image: url("../data/content/assets/illustration-screenshots@2x.png"); }
+  .onboardingMessageImage.gift {
+    background-image: url("../data/content/assets/illustration-gift@2x.png"); }
+  .onboardingMessageImage.sync {
+    background-image: url("../data/content/assets/illustration-sync@2x.png"); }
+  .onboardingMessageImage.devices {
+    background-image: url("../data/content/assets/trailhead/card-illo-devices.png"); }
+  .onboardingMessageImage.fbcont {
+    background-image: url("../data/content/assets/trailhead/card-illo-fbcont.png"); }
+  .onboardingMessageImage.ffmonitor {
+    background-image: url("../data/content/assets/trailhead/card-illo-ffmonitor.png"); }
+  .onboardingMessageImage.ffsend {
+    background-image: url("../data/content/assets/trailhead/card-illo-ffsend.png"); }
+  .onboardingMessageImage.lockwise {
+    background-image: url("../data/content/assets/trailhead/card-illo-lockwise.png"); }
+  .onboardingMessageImage.mobile {
+    background-image: url("../data/content/assets/trailhead/card-illo-mobile.png"); }
+  .onboardingMessageImage.pledge {
+    background-image: url("../data/content/assets/trailhead/card-illo-pledge.png"); }
+  .onboardingMessageImage.pocket {
+    background-image: url("../data/content/assets/trailhead/card-illo-pocket.png"); }
+  .onboardingMessageImage.private {
+    background-image: url("../data/content/assets/trailhead/card-illo-private.png"); }
+  .onboardingMessageImage.sendtab {
+    background-image: url("../data/content/assets/trailhead/card-illo-sendtab.png"); }
+  .onboardingMessageImage.tracking {
+    background-image: url("../data/content/assets/trailhead/card-illo-tracking.png"); }
+
 .EOYSnippetForm {
   margin: 10px 0 8px;
   align-self: start;
   font-size: 14px;
   display: flex;
   align-items: center; }
   .EOYSnippetForm .donation-amount,
   .EOYSnippetForm .donation-form-url {
@@ -3569,8 +3614,284 @@ a.firstrun-link {
 
 @keyframes fade-down {
   0% {
     opacity: 0;
     transform: translateY(-15px); }
   100% {
     opacity: 1;
     transform: translateY(0); } }
+
+.trailhead {
+  background: url("../data/content/assets/trailhead/accounts-form-bg.jpg") bottom/cover;
+  color: #FFF;
+  height: auto;
+  top: 100px; }
+  .trailhead a {
+    color: #FFF;
+    text-decoration: underline; }
+  .trailhead input,
+  .trailhead button {
+    border-radius: 4px;
+    padding: 10px; }
+  .trailhead .trailheadInner {
+    display: grid;
+    grid-column-gap: 40px;
+    grid-template-columns: 5fr 3fr;
+    padding: 40px 60px; }
+  .trailhead .trailheadContent h1 {
+    font-size: 36px;
+    font-weight: 200;
+    line-height: 46px;
+    margin: 0; }
+  .trailhead .trailheadContent .trailheadLearn {
+    display: block;
+    margin-top: 30px; }
+    @media (min-width: 850px) {
+      .trailhead .trailheadContent .trailheadLearn {
+        margin-inline-start: 74px; } }
+  .trailhead.syncCohort {
+    left: calc(50% - 430px);
+    width: 860px; }
+    @media (max-width: 860px) {
+      .trailhead.syncCohort {
+        left: 0;
+        width: 100%; } }
+    .trailhead.syncCohort .trailheadInner {
+      grid-template-columns: 4fr 3fr; }
+    .trailhead.syncCohort .trailheadContent .trailheadBenefits {
+      background: url("../data/content/assets/sync-devices-trailhead.svg");
+      background-position: center center;
+      background-repeat: no-repeat;
+      background-size: contain;
+      height: 200px;
+      margin-inline-end: 60px; }
+    .trailhead.syncCohort .trailheadContent .trailheadLearn {
+      margin-inline-start: 0; }
+  .trailhead .trailheadBenefits {
+    padding: 0; }
+    .trailhead .trailheadBenefits li {
+      background-position: left 6px;
+      background-repeat: no-repeat;
+      background-size: 40px;
+      -moz-context-properties: fill;
+      fill: #0A84FF;
+      list-style: none;
+      padding-top: 8px; }
+      @media (min-width: 850px) {
+        .trailhead .trailheadBenefits li {
+          background-position-y: 4px;
+          background-size: 62px;
+          margin-inline-end: 60px;
+          padding-inline-start: 74px; } }
+      .trailhead .trailheadBenefits li:dir(rtl) {
+        background-position-x: right; }
+      .trailhead .trailheadBenefits li.knowledge {
+        background-image: url("../data/content/assets/trailhead/benefit-knowledge.png"); }
+      .trailhead .trailheadBenefits li.privacy {
+        background-image: url("../data/content/assets/trailhead/benefit-privacy.png"); }
+      .trailhead .trailheadBenefits li.products {
+        background-image: url("../data/content/assets/trailhead/benefit-products.png"); }
+    .trailhead .trailheadBenefits h3 {
+      color: #CB9EFF;
+      font-size: 22px;
+      font-weight: 400;
+      margin: 0 0 4px;
+      padding-inline-start: 52px; }
+      @media (min-width: 850px) {
+        .trailhead .trailheadBenefits h3 {
+          padding-inline-start: 0; } }
+    .trailhead .trailheadBenefits p {
+      color: #FFF;
+      font-size: 15px;
+      line-height: 22px;
+      margin: 4px 0 15px; }
+  .trailhead .trailheadForm {
+    background: url("../data/content/assets/trailhead/firefox-logo.png") top center/100px no-repeat;
+    min-width: 260px;
+    padding-top: 100px;
+    text-align: center; }
+    .trailhead .trailheadForm h3 {
+      font-size: 36px;
+      font-weight: 200;
+      line-height: 46px;
+      margin: 12px 0 4px; }
+    .trailhead .trailheadForm p {
+      color: #FFF;
+      font-size: 15px;
+      line-height: 22px;
+      margin: 0 0 20px; }
+    .trailhead .trailheadForm .trailheadTerms {
+      margin: 4px 30px 20px; }
+      .trailhead .trailheadForm .trailheadTerms a, .trailhead .trailheadForm .trailheadTerms {
+        color: rgba(255, 255, 255, 0.7);
+        font-size: 12px;
+        line-height: 20px; }
+    .trailhead .trailheadForm form {
+      position: relative; }
+      .trailhead .trailheadForm form .error.active {
+        inset-inline-start: 0;
+        z-index: 0; }
+    .trailhead .trailheadForm button,
+    .trailhead .trailheadForm input {
+      width: 100%; }
+    .trailhead .trailheadForm input {
+      background-color: #FFF;
+      border: 1px solid #737373;
+      box-shadow: none;
+      color: #38383D;
+      font-size: 15px;
+      transition: border-color 150ms, box-shadow 150ms; }
+      .trailhead .trailheadForm input:hover {
+        border-color: #0C0C0D; }
+      .trailhead .trailheadForm input:focus {
+        border-color: #0A84FF;
+        box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.3); }
+      .trailhead .trailheadForm input.invalid {
+        border-color: #D70022; }
+      .trailhead .trailheadForm input.invalid:focus {
+        box-shadow: 0 0 0 3px rgba(215, 0, 34, 0.3); }
+    .trailhead .trailheadForm button {
+      background-color: #0060DF;
+      border: 0;
+      cursor: pointer;
+      display: block;
+      font-size: 15px;
+      font-weight: 400;
+      padding: 14px; }
+      .trailhead .trailheadForm button:hover, .trailhead .trailheadForm button:focus {
+        background-color: #0250BB; }
+      .trailhead .trailheadForm button:focus {
+        outline: dotted 1px; }
+      .trailhead .trailheadForm button:active {
+        background-color: #054096; }
+  .trailhead .trailheadStart {
+    border: 1px solid rgba(255, 255, 255, 0.5);
+    cursor: pointer;
+    display: block;
+    font-size: 15px;
+    font-weight: 400;
+    margin: 0 auto 40px;
+    min-width: 300px;
+    padding: 14px; }
+    .trailhead .trailheadStart:hover, .trailhead .trailheadStart:focus {
+      background-color: #0250BB;
+      border-color: transparent; }
+    .trailhead .trailheadStart:focus {
+      outline: dotted 1px; }
+    .trailhead .trailheadStart:active {
+      background-color: #054096; }
+  .trailhead .trailheadInner,
+  .trailhead .trailheadStart {
+    animation: fadeIn 0.4s; }
+
+.trailheadCards {
+  background: var(--trailhead-cards-background-color);
+  max-height: 1000px;
+  overflow: hidden;
+  text-align: center;
+  transition: max-height 0.5s cubic-bezier(0.07, 0.95, 0, 1); }
+  .trailheadCards.collapsed {
+    max-height: 0; }
+  .trailheadCards h1 {
+    font-size: 36px;
+    font-weight: 200;
+    margin: 0 0 40px;
+    color: var(--trailhead-header-text-color); }
+
+.trailheadCardsInner {
+  margin: auto;
+  padding: 40px 25px; }
+  @media (min-width: 610px) {
+    .trailheadCardsInner {
+      width: 530px; } }
+  @media (min-width: 866px) {
+    .trailheadCardsInner {
+      width: 786px; } }
+  @media (min-width: 1122px) {
+    .trailheadCardsInner {
+      width: 1042px; } }
+  .trailheadCardsInner .icon-dismiss {
+    border: 0;
+    cursor: pointer;
+    inset-inline-end: 15px;
+    padding: 15px;
+    opacity: 0.75;
+    position: absolute;
+    top: 15px; }
+    .trailheadCardsInner .icon-dismiss:hover, .trailheadCardsInner .icon-dismiss:focus {
+      background-color: var(--newtab-element-hover-color); }
+
+.trailheadCardGrid {
+  display: grid;
+  grid-gap: 32px;
+  margin: 0;
+  opacity: 0;
+  transition: opacity 0.4s;
+  transition-delay: 0.1s; }
+  .trailheadCardGrid.show {
+    opacity: 1; }
+  @media (min-width: 610px) {
+    .trailheadCardGrid {
+      grid-template-columns: repeat(auto-fit, 224px); } }
+  @media (min-width: 1122px) {
+    .trailheadCardGrid {
+      grid-template-columns: repeat(auto-fit, 309px); } }
+
+.trailheadCard {
+  position: relative;
+  background: var(--newtab-card-background-color);
+  border-radius: 4px;
+  box-shadow: var(--newtab-card-shadow);
+  font-size: 13px;
+  padding: 20px; }
+  @media (min-width: 1122px) {
+    .trailheadCard {
+      font-size: 15px;
+      padding: 40px; } }
+  .trailheadCard .onboardingTitle {
+    font-weight: normal;
+    color: var(--newtab-text-primary-color);
+    margin: 10px 0 4px;
+    font-size: 15px; }
+    @media (min-width: 1122px) {
+      .trailheadCard .onboardingTitle {
+        font-size: 18px; } }
+  .trailheadCard .onboardingText {
+    margin: 0 0 60px;
+    color: var(--newtab-text-conditional-color);
+    line-height: 1.5;
+    font-weight: 200; }
+  .trailheadCard .onboardingButton {
+    color: var(--newtab-text-conditional-color);
+    background: var(--trailhead-card-button-background-color);
+    border: 0;
+    height: 30px;
+    min-width: 70%;
+    padding: 0 14px; }
+    .trailheadCard .onboardingButton:focus, .trailheadCard .onboardingButton:hover {
+      box-shadow: none;
+      background: var(--trailhead-card-button-background-hover-color); }
+    .trailheadCard .onboardingButton:focus {
+      outline: dotted 1px; }
+    .trailheadCard .onboardingButton:active {
+      background: var(--trailhead-card-button-background-active-color); }
+  .trailheadCard .onboardingButtonContainer {
+    height: 60px;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    text-align: center; }
+
+.inline-onboarding.activity-stream.welcome {
+  overflow: scroll; }
+
+.inline-onboarding .modalOverlayInner {
+  position: absolute; }
+
+.inline-onboarding .outer-wrapper {
+  position: relative; }
+  .inline-onboarding .outer-wrapper .prefs-button button {
+    position: absolute; }
+
+.inline-onboarding .asrouter-toggle {
+  position: absolute; }
--- a/browser/components/newtab/data/content/activity-stream.bundle.js
+++ b/browser/components/newtab/data/content/activity-stream.bundle.js
@@ -88,25 +88,25 @@
 /* 0 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* WEBPACK VAR INJECTION */(function(global) {/* harmony import */ var common_Actions_jsm__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2);
 /* harmony import */ var content_src_lib_snippets__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(3);
 /* harmony import */ var content_src_components_Base_Base__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(4);
-/* harmony import */ var content_src_lib_detect_user_session_start__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(52);
+/* harmony import */ var content_src_lib_detect_user_session_start__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(53);
 /* harmony import */ var content_src_lib_init_store__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(8);
 /* harmony import */ var react_redux__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(26);
 /* harmony import */ var react_redux__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(react_redux__WEBPACK_IMPORTED_MODULE_5__);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(12);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_6__);
 /* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(16);
 /* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_7___default = /*#__PURE__*/__webpack_require__.n(react_dom__WEBPACK_IMPORTED_MODULE_7__);
-/* harmony import */ var common_Reducers_jsm__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(57);
+/* harmony import */ var common_Reducers_jsm__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(58);
 
 
 
 
 
 
 
 
@@ -200,17 +200,17 @@ const globalImportContext = typeof Windo
 
 // Create an object that avoids accidental differing key/value pairs:
 // {
 //   INIT: "INIT",
 //   UNINIT: "UNINIT"
 // }
 const actionTypes = {};
 
-for (const type of ["ADDONS_INFO_REQUEST", "ADDONS_INFO_RESPONSE", "ARCHIVE_FROM_POCKET", "AS_ROUTER_INITIALIZED", "AS_ROUTER_PREF_CHANGED", "AS_ROUTER_TELEMETRY_USER_EVENT", "BLOCK_URL", "BOOKMARK_URL", "COPY_DOWNLOAD_LINK", "DELETE_BOOKMARK_BY_ID", "DELETE_FROM_POCKET", "DELETE_HISTORY_URL", "DIALOG_CANCEL", "DIALOG_OPEN", "DISCOVERY_STREAM_CONFIG_CHANGE", "DISCOVERY_STREAM_CONFIG_SETUP", "DISCOVERY_STREAM_CONFIG_SET_VALUE", "DISCOVERY_STREAM_FEEDS_UPDATE", "DISCOVERY_STREAM_IMPRESSION_STATS", "DISCOVERY_STREAM_LAYOUT_RESET", "DISCOVERY_STREAM_LAYOUT_UPDATE", "DISCOVERY_STREAM_OPT_OUT", "DISCOVERY_STREAM_SPOCS_ENDPOINT", "DISCOVERY_STREAM_SPOCS_UPDATE", "DISCOVERY_STREAM_SPOC_IMPRESSION", "DOWNLOAD_CHANGED", "FAKE_FOCUS_SEARCH", "FILL_SEARCH_TERM", "HANDOFF_SEARCH_TO_AWESOMEBAR", "HIDE_SEARCH", "INIT", "NEW_TAB_INIT", "NEW_TAB_INITIAL_STATE", "NEW_TAB_LOAD", "NEW_TAB_REHYDRATED", "NEW_TAB_STATE_REQUEST", "NEW_TAB_UNLOAD", "OPEN_DOWNLOAD_FILE", "OPEN_LINK", "OPEN_NEW_WINDOW", "OPEN_PRIVATE_WINDOW", "OPEN_WEBEXT_SETTINGS", "PAGE_PRERENDERED", "PLACES_BOOKMARK_ADDED", "PLACES_BOOKMARK_REMOVED", "PLACES_HISTORY_CLEARED", "PLACES_LINKS_CHANGED", "PLACES_LINK_BLOCKED", "PLACES_LINK_DELETED", "PLACES_SAVED_TO_POCKET", "POCKET_CTA", "POCKET_LOGGED_IN", "POCKET_WAITING_FOR_SPOC", "PREFS_INITIAL_VALUES", "PREF_CHANGED", "PREVIEW_REQUEST", "PREVIEW_REQUEST_CANCEL", "PREVIEW_RESPONSE", "REMOVE_DOWNLOAD_FILE", "RICH_ICON_MISSING", "SAVE_SESSION_PERF_DATA", "SAVE_TO_POCKET", "SCREENSHOT_UPDATED", "SECTION_DEREGISTER", "SECTION_DISABLE", "SECTION_ENABLE", "SECTION_MOVE", "SECTION_OPTIONS_CHANGED", "SECTION_REGISTER", "SECTION_UPDATE", "SECTION_UPDATE_CARD", "SETTINGS_CLOSE", "SETTINGS_OPEN", "SET_PREF", "SHOW_DOWNLOAD_FILE", "SHOW_FIREFOX_ACCOUNTS", "SHOW_SEARCH", "SKIPPED_SIGNIN", "SNIPPETS_BLOCKLIST_CLEARED", "SNIPPETS_BLOCKLIST_UPDATED", "SNIPPETS_DATA", "SNIPPETS_PREVIEW_MODE", "SNIPPETS_RESET", "SNIPPET_BLOCKED", "SUBMIT_EMAIL", "SYSTEM_TICK", "TELEMETRY_IMPRESSION_STATS", "TELEMETRY_PERFORMANCE_EVENT", "TELEMETRY_UNDESIRED_EVENT", "TELEMETRY_USER_EVENT", "TOP_SITES_CANCEL_EDIT", "TOP_SITES_CLOSE_SEARCH_SHORTCUTS_MODAL", "TOP_SITES_EDIT", "TOP_SITES_INSERT", "TOP_SITES_OPEN_SEARCH_SHORTCUTS_MODAL", "TOP_SITES_PIN", "TOP_SITES_PREFS_UPDATED", "TOP_SITES_UNPIN", "TOP_SITES_UPDATED", "TOTAL_BOOKMARKS_REQUEST", "TOTAL_BOOKMARKS_RESPONSE", "UNINIT", "UPDATE_PINNED_SEARCH_SHORTCUTS", "UPDATE_SEARCH_SHORTCUTS", "UPDATE_SECTION_PREFS", "WEBEXT_CLICK", "WEBEXT_DISMISS"]) {
+for (const type of ["ADDONS_INFO_REQUEST", "ADDONS_INFO_RESPONSE", "ARCHIVE_FROM_POCKET", "AS_ROUTER_INITIALIZED", "AS_ROUTER_PREF_CHANGED", "AS_ROUTER_TELEMETRY_USER_EVENT", "BLOCK_URL", "BOOKMARK_URL", "COPY_DOWNLOAD_LINK", "DELETE_BOOKMARK_BY_ID", "DELETE_FROM_POCKET", "DELETE_HISTORY_URL", "DIALOG_CANCEL", "DIALOG_OPEN", "DISCOVERY_STREAM_CONFIG_CHANGE", "DISCOVERY_STREAM_CONFIG_SETUP", "DISCOVERY_STREAM_CONFIG_SET_VALUE", "DISCOVERY_STREAM_FEEDS_UPDATE", "DISCOVERY_STREAM_IMPRESSION_STATS", "DISCOVERY_STREAM_LAYOUT_RESET", "DISCOVERY_STREAM_LAYOUT_UPDATE", "DISCOVERY_STREAM_OPT_OUT", "DISCOVERY_STREAM_SPOCS_ENDPOINT", "DISCOVERY_STREAM_SPOCS_UPDATE", "DISCOVERY_STREAM_SPOC_IMPRESSION", "DOWNLOAD_CHANGED", "FAKE_FOCUS_SEARCH", "FILL_SEARCH_TERM", "HANDOFF_SEARCH_TO_AWESOMEBAR", "HIDE_SEARCH", "INIT", "NEW_TAB_INIT", "NEW_TAB_INITIAL_STATE", "NEW_TAB_LOAD", "NEW_TAB_REHYDRATED", "NEW_TAB_STATE_REQUEST", "NEW_TAB_UNLOAD", "OPEN_DOWNLOAD_FILE", "OPEN_LINK", "OPEN_NEW_WINDOW", "OPEN_PRIVATE_WINDOW", "OPEN_WEBEXT_SETTINGS", "PAGE_PRERENDERED", "PLACES_BOOKMARK_ADDED", "PLACES_BOOKMARK_REMOVED", "PLACES_HISTORY_CLEARED", "PLACES_LINKS_CHANGED", "PLACES_LINK_BLOCKED", "PLACES_LINK_DELETED", "PLACES_SAVED_TO_POCKET", "POCKET_CTA", "POCKET_LOGGED_IN", "POCKET_WAITING_FOR_SPOC", "PREFS_INITIAL_VALUES", "PREF_CHANGED", "PREVIEW_REQUEST", "PREVIEW_REQUEST_CANCEL", "PREVIEW_RESPONSE", "REMOVE_DOWNLOAD_FILE", "RICH_ICON_MISSING", "SAVE_SESSION_PERF_DATA", "SAVE_TO_POCKET", "SCREENSHOT_UPDATED", "SECTION_DEREGISTER", "SECTION_DISABLE", "SECTION_ENABLE", "SECTION_MOVE", "SECTION_OPTIONS_CHANGED", "SECTION_REGISTER", "SECTION_UPDATE", "SECTION_UPDATE_CARD", "SETTINGS_CLOSE", "SETTINGS_OPEN", "SET_PREF", "SHOW_DOWNLOAD_FILE", "SHOW_FIREFOX_ACCOUNTS", "SHOW_SEARCH", "SKIPPED_SIGNIN", "SNIPPETS_BLOCKLIST_CLEARED", "SNIPPETS_BLOCKLIST_UPDATED", "SNIPPETS_DATA", "SNIPPETS_PREVIEW_MODE", "SNIPPETS_RESET", "SNIPPET_BLOCKED", "SUBMIT_EMAIL", "SYSTEM_TICK", "TELEMETRY_IMPRESSION_STATS", "TELEMETRY_PERFORMANCE_EVENT", "TELEMETRY_UNDESIRED_EVENT", "TELEMETRY_USER_EVENT", "TOP_SITES_CANCEL_EDIT", "TOP_SITES_CLOSE_SEARCH_SHORTCUTS_MODAL", "TOP_SITES_EDIT", "TOP_SITES_INSERT", "TOP_SITES_OPEN_SEARCH_SHORTCUTS_MODAL", "TOP_SITES_PIN", "TOP_SITES_PREFS_UPDATED", "TOP_SITES_UNPIN", "TOP_SITES_UPDATED", "TOTAL_BOOKMARKS_REQUEST", "TOTAL_BOOKMARKS_RESPONSE", "TRAILHEAD_ENROLL_EVENT", "UNINIT", "UPDATE_PINNED_SEARCH_SHORTCUTS", "UPDATE_SEARCH_SHORTCUTS", "UPDATE_SECTION_PREFS", "WEBEXT_CLICK", "WEBEXT_DISMISS"]) {
   actionTypes[type] = type;
 }
 
 // These are acceptable actions for AS Router messages to have. They can show up
 // as call-to-action buttons in snippets, onboarding tour, etc.
 const ASRouterActions = {};
 
 for (const type of ["INSTALL_ADDON_FROM_URL", "OPEN_APPLICATIONS_MENU", "OPEN_PRIVATE_BROWSER_WINDOW", "OPEN_URL", "OPEN_ABOUT_PAGE", "OPEN_PREFERENCES_PAGE", "SHOW_FIREFOX_ACCOUNTS", "PIN_CURRENT_TAB"]) {
@@ -940,27 +940,27 @@ function addSnippetsSubscriber(store) {
 /* WEBPACK VAR INJECTION */(function(global) {/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "_Base", function() { return _Base; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "BaseContent", function() { return BaseContent; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "Base", function() { return Base; });
 /* harmony import */ var common_Actions_jsm__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2);
 /* harmony import */ var react_intl__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(5);
 /* harmony import */ var react_intl__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_intl__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var content_src_components_ASRouterAdmin_ASRouterAdmin__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(6);
 /* harmony import */ var _asrouter_asrouter_content__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(7);
-/* harmony import */ var content_src_components_ConfirmDialog_ConfirmDialog__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(28);
+/* harmony import */ var content_src_components_ConfirmDialog_ConfirmDialog__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(29);
 /* harmony import */ var react_redux__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(26);
 /* harmony import */ var react_redux__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(react_redux__WEBPACK_IMPORTED_MODULE_5__);
-/* harmony import */ var content_src_components_DarkModeMessage_DarkModeMessage__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(29);
-/* harmony import */ var content_src_components_DiscoveryStreamBase_DiscoveryStreamBase__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(53);
-/* harmony import */ var content_src_components_ErrorBoundary_ErrorBoundary__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(37);
-/* harmony import */ var common_PrerenderData_jsm__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(45);
+/* harmony import */ var content_src_components_DarkModeMessage_DarkModeMessage__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(30);
+/* harmony import */ var content_src_components_DiscoveryStreamBase_DiscoveryStreamBase__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(54);
+/* harmony import */ var content_src_components_ErrorBoundary_ErrorBoundary__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(38);
+/* harmony import */ var common_PrerenderData_jsm__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(46);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(12);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_10___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_10__);
-/* harmony import */ var content_src_components_Search_Search__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(46);
-/* harmony import */ var content_src_components_Sections_Sections__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(48);
+/* harmony import */ var content_src_components_Search_Search__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(47);
+/* harmony import */ var content_src_components_Sections_Sections__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(49);
 var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
 
 
 
 
 
 
@@ -1031,17 +1031,17 @@ class _Base extends react__WEBPACK_IMPOR
   componentWillUpdate() {
     this.updateTheme();
   }
 
   updateTheme() {
     const bodyClassName = ["activity-stream",
     // If we skipped the about:welcome overlay and removed the CSS classes
     // we don't want to add them back to the Activity Stream view
-    document.body.classList.contains("welcome") ? "welcome" : "", document.body.classList.contains("hide-main") ? "hide-main" : ""].filter(v => v).join(" ");
+    document.body.classList.contains("welcome") ? "welcome" : "", document.body.classList.contains("hide-main") ? "hide-main" : "", document.body.classList.contains("inline-onboarding") ? "inline-onboarding" : ""].filter(v => v).join(" ");
     global.document.body.className = bodyClassName;
   }
 
   render() {
     const { props } = this;
     const { App, locale, strings } = props;
     const { initialized } = App;
 
@@ -1132,17 +1132,17 @@ class BaseContent extends react__WEBPACK
             "div",
             { className: "non-collapsible-section" },
             react__WEBPACK_IMPORTED_MODULE_10___default.a.createElement(
               content_src_components_ErrorBoundary_ErrorBoundary__WEBPACK_IMPORTED_MODULE_8__["ErrorBoundary"],
               null,
               react__WEBPACK_IMPORTED_MODULE_10___default.a.createElement(content_src_components_Search_Search__WEBPACK_IMPORTED_MODULE_11__["Search"], _extends({ showLogo: noSectionsEnabled, handoffEnabled: searchHandoffEnabled }, props.Search))
             )
           ),
-          react__WEBPACK_IMPORTED_MODULE_10___default.a.createElement(_asrouter_asrouter_content__WEBPACK_IMPORTED_MODULE_3__["ASRouterUISurface"], { dispatch: this.props.dispatch }),
+          react__WEBPACK_IMPORTED_MODULE_10___default.a.createElement(_asrouter_asrouter_content__WEBPACK_IMPORTED_MODULE_3__["ASRouterUISurface"], { fxaEndpoint: this.props.Prefs.values.fxa_endpoint, dispatch: this.props.dispatch }),
           react__WEBPACK_IMPORTED_MODULE_10___default.a.createElement(
             "div",
             { className: `body-wrapper${initialized ? " on" : ""}` },
             isDiscoveryStream ? react__WEBPACK_IMPORTED_MODULE_10___default.a.createElement(
               content_src_components_ErrorBoundary_ErrorBoundary__WEBPACK_IMPORTED_MODULE_8__["ErrorBoundary"],
               { className: "borderless-error" },
               prefs.darkModeMessage && react__WEBPACK_IMPORTED_MODULE_10___default.a.createElement(content_src_components_DarkModeMessage_DarkModeMessage__WEBPACK_IMPORTED_MODULE_6__["DarkModeMessage"], null),
               react__WEBPACK_IMPORTED_MODULE_10___default.a.createElement(content_src_components_DiscoveryStreamBase_DiscoveryStreamBase__WEBPACK_IMPORTED_MODULE_7__["DiscoveryStreamBase"], null)
@@ -1182,17 +1182,17 @@ module.exports = ReactIntl;
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ASRouterAdmin", function() { return ASRouterAdmin; });
 /* harmony import */ var common_Actions_jsm__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2);
 /* harmony import */ var _asrouter_asrouter_content__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(7);
 /* harmony import */ var react_redux__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(26);
 /* harmony import */ var react_redux__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(react_redux__WEBPACK_IMPORTED_MODULE_2__);
 /* harmony import */ var _asrouter_components_ModalOverlay_ModalOverlay__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(15);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(12);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_4__);
-/* harmony import */ var _SimpleHashRouter__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(27);
+/* harmony import */ var _SimpleHashRouter__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(28);
 var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
 
 
 
 
 
 
@@ -2185,16 +2185,60 @@ class ASRouterAdminInner extends react__
             ),
             " "
           )
         )
       )
     );
   }
 
+  renderTrailheadInfo() {
+    const { trailheadInterrupt, trailheadTriplet, trailheadInitialized } = this.state;
+    return trailheadInitialized ? react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement(
+      "table",
+      { className: "minimal-table" },
+      react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement(
+        "tbody",
+        null,
+        react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement(
+          "tr",
+          null,
+          react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement(
+            "td",
+            null,
+            "Interrupt branch"
+          ),
+          react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement(
+            "td",
+            null,
+            trailheadInterrupt
+          )
+        ),
+        react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement(
+          "tr",
+          null,
+          react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement(
+            "td",
+            null,
+            "Triplet branch"
+          ),
+          react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement(
+            "td",
+            null,
+            trailheadTriplet
+          )
+        )
+      )
+    ) : react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement(
+      "p",
+      null,
+      "Trailhead is not initialized. To update these values, load about:welcome."
+    );
+  }
+
   getSection() {
     const [section] = this.props.location.routes;
     switch (section) {
       case "targeting":
         return react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement(
           react__WEBPACK_IMPORTED_MODULE_4___default.a.Fragment,
           null,
           react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement(
@@ -2246,16 +2290,22 @@ class ASRouterAdminInner extends react__
               { title: "Restore all provider settings that ship with Firefox", className: "button", onClick: this.resetPref },
               "Restore default prefs"
             )
           ),
           this.state.providers ? this.renderProviders() : null,
           react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement(
             "h2",
             null,
+            "Trailhead"
+          ),
+          this.renderTrailheadInfo(),
+          react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement(
+            "h2",
+            null,
             "Messages"
           ),
           this.renderMessageFilter(),
           this.renderMessages(),
           this.renderPasteModal()
         );
     }
   }
@@ -2354,42 +2404,45 @@ const ASRouterAdmin = Object(react_redux
 /* WEBPACK VAR INJECTION */(function(global) {/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ASRouterUtils", function() { return ASRouterUtils; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ASRouterUISurface", function() { return ASRouterUISurface; });
 /* harmony import */ var react_intl__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(5);
 /* harmony import */ var react_intl__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react_intl__WEBPACK_IMPORTED_MODULE_0__);
 /* harmony import */ var common_Actions_jsm__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(2);
 /* harmony import */ var content_src_lib_init_store__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(8);
 /* harmony import */ var _rich_text_strings__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(10);
 /* harmony import */ var _components_ImpressionsWrapper_ImpressionsWrapper__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(11);
-/* harmony import */ var fluent_react__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(56);
+/* harmony import */ var fluent_react__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(57);
 /* harmony import */ var _templates_OnboardingMessage_OnboardingMessage__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(14);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(12);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_7___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_7__);
 /* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(16);
 /* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_8___default = /*#__PURE__*/__webpack_require__.n(react_dom__WEBPACK_IMPORTED_MODULE_8__);
 /* harmony import */ var _templates_ReturnToAMO_ReturnToAMO__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(17);
-/* harmony import */ var _templates_template_manifest__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(54);
+/* harmony import */ var _templates_template_manifest__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(55);
 /* harmony import */ var _templates_StartupOverlay_StartupOverlay__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(25);
+/* harmony import */ var _templates_Trailhead_Trailhead__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(27);
 var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
 
 
 
 
 
 
 
 
 
 
 
 
 
+
 const INCOMING_MESSAGE_NAME = "ASRouter:parent-to-child";
 const OUTGOING_MESSAGE_NAME = "ASRouter:child-to-parent";
+const TEMPLATES_ABOVE_PAGE = ["trailhead"];
 const TEMPLATES_BELOW_SEARCH = ["simple_below_search_snippet"];
 
 const ASRouterUtils = {
   addListener(listener) {
     if (global.RPMAddMessageListener) {
       global.RPMAddMessageListener(INCOMING_MESSAGE_NAME, listener);
     }
   },
@@ -2458,17 +2511,18 @@ class ASRouterUISurface extends react__W
   constructor(props) {
     super(props);
     this.onMessageFromParent = this.onMessageFromParent.bind(this);
     this.sendClick = this.sendClick.bind(this);
     this.sendImpression = this.sendImpression.bind(this);
     this.sendUserActionTelemetry = this.sendUserActionTelemetry.bind(this);
     this.state = { message: {}, bundle: {} };
     if (props.document) {
-      this.portalContainer = props.document.getElementById("footer-snippets-container");
+      this.headerPortal = props.document.getElementById("header-asrouter-container");
+      this.footerPortal = props.document.getElementById("footer-asrouter-container");
     }
   }
 
   sendUserActionTelemetry(extraProps = {}) {
     const { message, bundle } = this.state;
     if (!message && !extraProps.message_id) {
       throw new Error(`You must provide a message_id for bundled messages`);
     }
@@ -2577,17 +2631,17 @@ class ASRouterUISurface extends react__W
     }
   }
 
   componentWillUnmount() {
     ASRouterUtils.removeListener(this.onMessageFromParent);
   }
 
   renderSnippets() {
-    if (this.state.bundle.template === "onboarding" || this.state.message.template === "fxa_overlay" || this.state.message.template === "return_to_amo_overlay") {
+    if (this.state.bundle.template === "onboarding" || this.state.message.template === "fxa_overlay" || this.state.message.template === "return_to_amo_overlay" || this.state.message.template === "trailhead") {
       return null;
     }
     const SnippetComponent = _templates_template_manifest__WEBPACK_IMPORTED_MODULE_10__["SnippetsTemplates"][this.state.message.template];
     const { content } = this.state.message;
 
     return react__WEBPACK_IMPORTED_MODULE_7___default.a.createElement(
       _components_ImpressionsWrapper_ImpressionsWrapper__WEBPACK_IMPORTED_MODULE_4__["ImpressionsWrapper"],
       {
@@ -2643,16 +2697,31 @@ class ASRouterUISurface extends react__W
           onReady: this.triggerOnboarding,
           onBlock: this.onDismissById(message.id),
           onAction: ASRouterUtils.executeAction }))
       );
     }
     return null;
   }
 
+  renderTrailhead() {
+    const { message } = this.state;
+    if (message.template === "trailhead") {
+      return react__WEBPACK_IMPORTED_MODULE_7___default.a.createElement(_templates_Trailhead_Trailhead__WEBPACK_IMPORTED_MODULE_12__["Trailhead"], {
+        document: this.props.document,
+        message: message,
+        onAction: ASRouterUtils.executeAction,
+        onDoneButton: this.dismissBundle(this.state.bundle.bundle),
+        sendUserActionTelemetry: this.sendUserActionTelemetry,
+        dispatch: this.props.dispatch,
+        fxaEndpoint: this.props.fxaEndpoint });
+    }
+    return null;
+  }
+
   renderPreviewBanner() {
     if (this.state.message.provider !== "preview") {
       return null;
     }
 
     return react__WEBPACK_IMPORTED_MODULE_7___default.a.createElement(
       "div",
       { className: "snippets-preview-banner" },
@@ -2666,34 +2735,36 @@ class ASRouterUISurface extends react__W
   }
 
   render() {
     const { message, bundle } = this.state;
     if (!message.id && !bundle.template) {
       return null;
     }
     const shouldRenderBelowSearch = TEMPLATES_BELOW_SEARCH.includes(message.template);
+    const shouldRenderInHeader = TEMPLATES_ABOVE_PAGE.includes(message.template);
 
     return shouldRenderBelowSearch ?
     // Render special below search snippets in place;
     react__WEBPACK_IMPORTED_MODULE_7___default.a.createElement(
       "div",
       { className: "below-search-snippet" },
       this.renderSnippets()
     ) :
     // For onboarding, regular snippets etc. we should render
     // everything in our footer container.
     react_dom__WEBPACK_IMPORTED_MODULE_8___default.a.createPortal(react__WEBPACK_IMPORTED_MODULE_7___default.a.createElement(
       react__WEBPACK_IMPORTED_MODULE_7___default.a.Fragment,
       null,
       this.renderPreviewBanner(),
+      this.renderTrailhead(),
       this.renderFirstRunOverlay(),
       this.renderOnboarding(),
       this.renderSnippets()
-    ), this.portalContainer);
+    ), shouldRenderInHeader ? this.headerPortal : this.footerPortal);
   }
 }
 
 ASRouterUISurface.defaultProps = { document: global.document };
 /* WEBPACK VAR INJECTION */}.call(this, __webpack_require__(1)))
 
 /***/ }),
 /* 8 */
@@ -2857,17 +2928,17 @@ module.exports = Redux;
 /***/ }),
 /* 10 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "RICH_TEXT_KEYS", function() { return RICH_TEXT_KEYS; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "generateMessages", function() { return generateMessages; });
-/* harmony import */ var fluent__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(55);
+/* harmony import */ var fluent__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(56);
 
 
 /**
  * Properties that allow rich text MUST be added to this list.
  *   key: the localization_id that should be used
  *   value: a property or array of properties on the message.content object
  */
 const RICH_TEXT_CONFIG = {
@@ -2990,25 +3061,28 @@ module.exports = React;
 module.exports = PropTypes;
 
 /***/ }),
 /* 14 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 __webpack_require__.r(__webpack_exports__);
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "OnboardingCard", function() { return OnboardingCard; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "OnboardingMessage", function() { return OnboardingMessage; });
 /* harmony import */ var _components_ModalOverlay_ModalOverlay__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(15);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(12);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
 var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
 
 
 
+const FLUENT_FILES = ["branding/brand.ftl", "browser/branding/sync-brand.ftl", "browser/newtab/onboarding.ftl"];
+
 class OnboardingCard extends react__WEBPACK_IMPORTED_MODULE_1___default.a.PureComponent {
   constructor(props) {
     super(props);
     this.onClick = this.onClick.bind(this);
   }
 
   onClick() {
     const { props } = this;
@@ -3018,58 +3092,51 @@ class OnboardingCard extends react__WEBP
       id: props.UISurface
     };
     props.sendUserActionTelemetry(ping);
     props.onAction(props.content.primary_button.action);
   }
 
   render() {
     const { content } = this.props;
+    const className = this.props.className || "onboardingMessage";
     return react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement(
       "div",
-      { className: "onboardingMessage" },
+      { className: className },
       react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement("div", { className: `onboardingMessageImage ${content.icon}` }),
       react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement(
         "div",
         { className: "onboardingContent" },
         react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement(
           "span",
           null,
-          react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement(
-            "h3",
-            null,
-            " ",
-            content.title,
-            " "
-          ),
-          react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement(
-            "p",
-            null,
-            " ",
-            content.text,
-            " "
-          )
+          react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement("h3", { className: "onboardingTitle", "data-l10n-id": content.title.string_id }),
+          react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement("p", { className: "onboardingText", "data-l10n-id": content.text.string_id })
         ),
         react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement(
           "span",
-          null,
-          react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement(
-            "button",
-            { tabIndex: "1", className: "button onboardingButton", onClick: this.onClick },
-            " ",
-            content.primary_button.label,
-            " "
-          )
+          { className: "onboardingButtonContainer" },
+          react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement("button", { "data-l10n-id": content.primary_button.label.string_id,
+            className: "button onboardingButton",
+            onClick: this.onClick })
         )
       )
     );
   }
 }
 
 class OnboardingMessage extends react__WEBPACK_IMPORTED_MODULE_1___default.a.PureComponent {
+  componentWillMount() {
+    FLUENT_FILES.forEach(file => {
+      const link = document.head.appendChild(document.createElement("link"));
+      link.href = file;
+      link.rel = "localization";
+    });
+  }
+
   render() {
     const { props } = this;
     const { button_label, header } = props.extraTemplateStrings;
     return react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement(
       _components_ModalOverlay_ModalOverlay__WEBPACK_IMPORTED_MODULE_0__["ModalOverlay"],
       _extends({}, props, { button_label: button_label, title: header }),
       react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement(
         "div",
@@ -3085,65 +3152,94 @@ class OnboardingMessage extends react__W
 }
 
 /***/ }),
 /* 15 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 __webpack_require__.r(__webpack_exports__);
+/* WEBPACK VAR INJECTION */(function(global) {/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ModalOverlayWrapper", function() { return ModalOverlayWrapper; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ModalOverlay", function() { return ModalOverlay; });
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(12);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
 
 
-class ModalOverlay extends react__WEBPACK_IMPORTED_MODULE_0___default.a.PureComponent {
+class ModalOverlayWrapper extends react__WEBPACK_IMPORTED_MODULE_0___default.a.PureComponent {
+  constructor(props) {
+    super(props);
+    this.onKeyDown = this.onKeyDown.bind(this);
+  }
+
+  onKeyDown(event) {
+    if (event.key === "Escape") {
+      this.props.onClose(event);
+    }
+  }
+
   componentWillMount() {
-    this.setState({ active: true });
-    document.body.classList.add("modal-open");
+    this.props.document.addEventListener("keydown", this.onKeyDown);
+    this.props.document.body.classList.add("modal-open");
   }
 
   componentWillUnmount() {
-    document.body.classList.remove("modal-open");
-    this.setState({ active: false });
+    this.props.document.removeEventListener("keydown", this.onKeyDown);
+    this.props.document.body.classList.remove("modal-open");
   }
 
   render() {
-    const { active } = this.state;
-    const { title, button_label } = this.props;
+    const { props } = this;
     return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(
-      "div",
+      react__WEBPACK_IMPORTED_MODULE_0___default.a.Fragment,
       null,
-      react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", { className: `modalOverlayOuter ${active ? "active" : ""}` }),
+      react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", { className: "modalOverlayOuter active", onClick: props.onClose, role: "presentation" }),
       react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(
         "div",
-        { className: `modalOverlayInner ${active ? "active" : ""}` },
-        react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(
-          "h2",
-          null,
-          " ",
-          title,
-          " "
-        ),
-        this.props.children,
+        { className: `modalOverlayInner active ${props.innerClassName || ""}`,
+          "aria-labelledby": props.headerId,
+          id: props.id,
+          role: "dialog" },
+        props.children
+      )
+    );
+  }
+}
+
+ModalOverlayWrapper.defaultProps = { document: global.document };
+
+class ModalOverlay extends react__WEBPACK_IMPORTED_MODULE_0___default.a.PureComponent {
+  render() {
+    const { title, button_label } = this.props;
+    return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(
+      ModalOverlayWrapper,
+      { onClose: this.props.onDoneButton },
+      react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(
+        "h2",
+        null,
+        " ",
+        title,
+        " "
+      ),
+      this.props.children,
+      react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(
+        "div",
+        { className: "footer" },
         react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(
-          "div",
-          { className: "footer" },
-          react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(
-            "button",
-            { tabIndex: "2", onClick: this.props.onDoneButton, className: "button primary modalButton" },
-            " ",
-            button_label,
-            " "
-          )
+          "button",
+          { className: "button primary modalButton",
+            onClick: this.props.onDoneButton },
+          " ",
+          button_label,
+          " "
         )
       )
     );
   }
 }
+/* WEBPACK VAR INJECTION */}.call(this, __webpack_require__(1)))
 
 /***/ }),
 /* 16 */
 /***/ (function(module, exports) {
 
 module.exports = ReactDOM;
 
 /***/ }),
@@ -3253,17 +3349,17 @@ class ReturnToAMO extends react__WEBPACK
 /***/ }),
 /* 18 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "convertLinks", function() { return convertLinks; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "RichText", function() { return RichText; });
-/* harmony import */ var fluent_react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(56);
+/* harmony import */ var fluent_react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(57);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(12);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _rich_text_strings__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(10);
 /* harmony import */ var _template_utils__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(19);
 var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
 
 
@@ -3399,34 +3495,36 @@ class _StartupOverlay extends react__WEB
     super(props);
     this.onInputChange = this.onInputChange.bind(this);
     this.onSubmit = this.onSubmit.bind(this);
     this.clickSkip = this.clickSkip.bind(this);
     this.initScene = this.initScene.bind(this);
     this.removeOverlay = this.removeOverlay.bind(this);
     this.onInputInvalid = this.onInputInvalid.bind(this);
 
+    this.utmParams = "utm_source=activity-stream&utm_campaign=firstrun&utm_medium=referral&utm_term=trailhead-control";
+
     this.state = {
       emailInput: "",
       overlayRemoved: false,
       flowId: "",
       flowBeginTime: 0
     };
     this.didFetch = false;
   }
 
   componentWillUpdate() {
     var _this = this;
 
     return _asyncToGenerator(function* () {
       if (_this.props.fxa_endpoint && !_this.didFetch) {
         try {
           _this.didFetch = true;
-          const fxaParams = "entrypoint=activity-stream-firstrun&utm_source=activity-stream&utm_campaign=firstrun&form_type=email";
-          const response = yield fetch(`${_this.props.fxa_endpoint}/metrics-flow?${fxaParams}`, { credentials: "omit" });
+          const fxaParams = "entrypoint=activity-stream-firstrun&form_type=email";
+          const response = yield fetch(`${_this.props.fxa_endpoint}/metrics-flow?${fxaParams}&${_this.utmParams}`, { credentials: "omit" });
           if (response.status === 200) {
             const { flowId, flowBeginTime } = yield response.json();
             _this.setState({ flowId, flowBeginTime });
           } else {
             _this.props.dispatch(common_Actions_jsm__WEBPACK_IMPORTED_MODULE_0__["actionCreators"].OnlyToMain({ type: common_Actions_jsm__WEBPACK_IMPORTED_MODULE_0__["actionTypes"].TELEMETRY_UNDESIRED_EVENT, data: { event: "FXA_METRICS_FETCH_ERROR", value: response.status } }));
           }
         } catch (error) {
           _this.props.dispatch(common_Actions_jsm__WEBPACK_IMPORTED_MODULE_0__["actionCreators"].OnlyToMain({ type: common_Actions_jsm__WEBPACK_IMPORTED_MODULE_0__["actionTypes"].TELEMETRY_UNDESIRED_EVENT, data: { event: "FXA_METRICS_ERROR" } }));
@@ -3498,22 +3596,22 @@ class _StartupOverlay extends react__WEB
     // When skipping the onboarding tour we show AS but we are still on
     // about:welcome, prop.isFirstrun is true and StartupOverlay is rendered
     if (this.state.overlayRemoved) {
       return null;
     }
 
     let termsLink = react__WEBPACK_IMPORTED_MODULE_3___default.a.createElement(
       "a",
-      { href: `${this.props.fxa_endpoint}/legal/terms`, target: "_blank", rel: "noopener noreferrer" },
+      { href: `${this.props.fxa_endpoint}/legal/terms?${this.utmParams}`, target: "_blank", rel: "noopener noreferrer" },
       react__WEBPACK_IMPORTED_MODULE_3___default.a.createElement(react_intl__WEBPACK_IMPORTED_MODULE_1__["FormattedMessage"], { id: "firstrun_terms_of_service" })
     );
     let privacyLink = react__WEBPACK_IMPORTED_MODULE_3___default.a.createElement(
       "a",
-      { href: `${this.props.fxa_endpoint}/legal/privacy`, target: "_blank", rel: "noopener noreferrer" },
+      { href: `${this.props.fxa_endpoint}/legal/privacy?${this.utmParams}`, target: "_blank", rel: "noopener noreferrer" },
       react__WEBPACK_IMPORTED_MODULE_3___default.a.createElement(react_intl__WEBPACK_IMPORTED_MODULE_1__["FormattedMessage"], { id: "firstrun_privacy_notice" })
     );
 
     return react__WEBPACK_IMPORTED_MODULE_3___default.a.createElement(
       "div",
       { className: `overlay-wrapper ${this.state.show ? "show" : ""}` },
       react__WEBPACK_IMPORTED_MODULE_3___default.a.createElement("div", { className: "background" }),
       react__WEBPACK_IMPORTED_MODULE_3___default.a.createElement(
@@ -3532,17 +3630,17 @@ class _StartupOverlay extends react__WEB
             ),
             react__WEBPACK_IMPORTED_MODULE_3___default.a.createElement(
               "p",
               { className: "firstrun-content" },
               react__WEBPACK_IMPORTED_MODULE_3___default.a.createElement(react_intl__WEBPACK_IMPORTED_MODULE_1__["FormattedMessage"], { id: "firstrun_content" })
             ),
             react__WEBPACK_IMPORTED_MODULE_3___default.a.createElement(
               "a",
-              { className: "firstrun-link", href: "https://www.mozilla.org/firefox/features/sync/", target: "_blank", rel: "noopener noreferrer" },
+              { className: "firstrun-link", href: `https://www.mozilla.org/firefox/features/sync/?${this.utmParams}`, target: "_blank", rel: "noopener noreferrer" },
               react__WEBPACK_IMPORTED_MODULE_3___default.a.createElement(react_intl__WEBPACK_IMPORTED_MODULE_1__["FormattedMessage"], { id: "firstrun_learn_more_link" })
             )
           ),
           react__WEBPACK_IMPORTED_MODULE_3___default.a.createElement(
             "div",
             { className: "firstrun-sign-in" },
             react__WEBPACK_IMPORTED_MODULE_3___default.a.createElement(
               "p",
@@ -3558,16 +3656,18 @@ class _StartupOverlay extends react__WEB
               "form",
               { method: "get", action: this.props.fxa_endpoint, target: "_blank", rel: "noopener noreferrer", onSubmit: this.onSubmit },
               react__WEBPACK_IMPORTED_MODULE_3___default.a.createElement("input", { name: "service", type: "hidden", value: "sync" }),
               react__WEBPACK_IMPORTED_MODULE_3___default.a.createElement("input", { name: "action", type: "hidden", value: "email" }),
               react__WEBPACK_IMPORTED_MODULE_3___default.a.createElement("input", { name: "context", type: "hidden", value: "fx_desktop_v3" }),
               react__WEBPACK_IMPORTED_MODULE_3___default.a.createElement("input", { name: "entrypoint", type: "hidden", value: "activity-stream-firstrun" }),
               react__WEBPACK_IMPORTED_MODULE_3___default.a.createElement("input", { name: "utm_source", type: "hidden", value: "activity-stream" }),
               react__WEBPACK_IMPORTED_MODULE_3___default.a.createElement("input", { name: "utm_campaign", type: "hidden", value: "firstrun" }),
+              react__WEBPACK_IMPORTED_MODULE_3___default.a.createElement("input", { name: "utm_medium", type: "hidden", value: "referral" }),
+              react__WEBPACK_IMPORTED_MODULE_3___default.a.createElement("input", { name: "utm_term", type: "hidden", value: "trailhead-control" }),
               react__WEBPACK_IMPORTED_MODULE_3___default.a.createElement("input", { name: "flow_id", type: "hidden", value: this.state.flowId }),
               react__WEBPACK_IMPORTED_MODULE_3___default.a.createElement("input", { name: "flow_begin_time", type: "hidden", value: this.state.flowBeginTime }),
               react__WEBPACK_IMPORTED_MODULE_3___default.a.createElement(
                 "span",
                 { className: "error" },
                 this.props.intl.formatMessage({ id: "firstrun_invalid_input" })
               ),
               react__WEBPACK_IMPORTED_MODULE_3___default.a.createElement("input", { className: "email-input", name: "email", type: "email", required: "true", onInvalid: this.onInputInvalid, placeholder: this.props.intl.formatMessage({ id: "firstrun_email_input_placeholder" }), onChange: this.onInputChange }),
@@ -3609,16 +3709,372 @@ const StartupOverlay = Object(react_redu
 module.exports = ReactRedux;
 
 /***/ }),
 /* 27 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 __webpack_require__.r(__webpack_exports__);
+/* WEBPACK VAR INJECTION */(function(global) {/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "_Trailhead", function() { return _Trailhead; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "Trailhead", function() { return Trailhead; });
+/* harmony import */ var common_Actions_jsm__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2);
+/* harmony import */ var react_intl__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(5);
+/* harmony import */ var react_intl__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_intl__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var _components_ModalOverlay_ModalOverlay__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(15);
+/* harmony import */ var _OnboardingMessage_OnboardingMessage__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(14);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(12);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_4__);
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+function _asyncToGenerator(fn) { return function () { var gen = fn.apply(this, arguments); return new Promise(function (resolve, reject) { function step(key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { return Promise.resolve(value).then(function (value) { step("next", value); }, function (err) { step("throw", err); }); } } return step("next"); }); }; }
+
+
+
+
+
+
+
+const FLUENT_FILES = ["branding/brand.ftl", "browser/branding/brandings.ftl", "browser/branding/sync-brand.ftl", "browser/newtab/onboarding.ftl"];
+
+// From resource://devtools/client/shared/focus.js
+const FOCUSABLE_SELECTOR = ["a[href]:not([tabindex='-1'])", "button:not([disabled]):not([tabindex='-1'])", "iframe:not([tabindex='-1'])", "input:not([disabled]):not([tabindex='-1'])", "select:not([disabled]):not([tabindex='-1'])", "textarea:not([disabled]):not([tabindex='-1'])", "[tabindex]:not([tabindex='-1'])"].join(", ");
+
+class _Trailhead extends react__WEBPACK_IMPORTED_MODULE_4___default.a.PureComponent {
+  constructor(props) {
+    super(props);
+    this.closeModal = this.closeModal.bind(this);
+    this.hideCardPanel = this.hideCardPanel.bind(this);
+    this.onInputChange = this.onInputChange.bind(this);
+    this.onStartBlur = this.onStartBlur.bind(this);
+    this.onSubmit = this.onSubmit.bind(this);
+    this.onInputInvalid = this.onInputInvalid.bind(this);
+    this.onCardAction = this.onCardAction.bind(this);
+
+    this.state = {
+      emailInput: "",
+      isModalOpen: true,
+      showCardPanel: true,
+      showCards: false,
+      flowId: "",
+      flowBeginTime: 0
+    };
+    this.didFetch = false;
+  }
+
+  get dialog() {
+    return this.props.document.getElementById("trailheadDialog");
+  }
+
+  componentWillMount() {
+    var _this = this;
+
+    return _asyncToGenerator(function* () {
+      FLUENT_FILES.forEach(function (file) {
+        const link = document.head.appendChild(document.createElement("link"));
+        link.href = file;
+        link.rel = "localization";
+      });
+
+      if (_this.props.fxaEndpoint && !_this.didFetch) {
+        try {
+          _this.didFetch = true;
+          const url = new URL(`${_this.props.fxaEndpoint}/metrics-flow?entrypoint=activity-stream-firstrun&form_type=email`);
+          _this.addUtmParams(url);
+          const response = yield fetch(url, { credentials: "omit" });
+          if (response.status === 200) {
+            const { flowId, flowBeginTime } = yield response.json();
+            _this.setState({ flowId, flowBeginTime });
+          } else {
+            _this.props.dispatch(common_Actions_jsm__WEBPACK_IMPORTED_MODULE_0__["actionCreators"].OnlyToMain({ type: common_Actions_jsm__WEBPACK_IMPORTED_MODULE_0__["actionTypes"].TELEMETRY_UNDESIRED_EVENT, data: { event: "FXA_METRICS_FETCH_ERROR", value: response.status } }));
+          }
+        } catch (error) {
+          _this.props.dispatch(common_Actions_jsm__WEBPACK_IMPORTED_MODULE_0__["actionCreators"].OnlyToMain({ type: common_Actions_jsm__WEBPACK_IMPORTED_MODULE_0__["actionTypes"].TELEMETRY_UNDESIRED_EVENT, data: { event: "FXA_METRICS_ERROR" } }));
+        }
+      }
+    })();
+  }
+
+  componentDidMount() {
+    // We need to remove hide-main since we should show it underneath everything that has rendered
+    this.props.document.body.classList.remove("hide-main");
+
+    // Add inline-onboarding class to disable fixed search header and fixed positioned settings icon
+    this.props.document.body.classList.add("inline-onboarding");
+
+    // The rest of the page is "hidden" when the modal is open
+    if (this.props.message.content) {
+      this.props.document.getElementById("root").setAttribute("aria-hidden", "true");
+
+      // Start with focus in the email input box
+      this.dialog.querySelector("input[name=email]").focus();
+    } else {
+      // No modal overlay, let the user scroll and deal them some cards.
+      this.props.document.body.classList.remove("welcome");
+
+      if (this.props.message.includeBundle || this.props.message.cards) {
+        this.revealCards();
+      }
+    }
+  }
+
+  componentWillUnmount() {
+    this.props.document.body.classList.remove("inline-onboarding");
+  }
+
+  onInputChange(e) {
+    let error = e.target.previousSibling;
+    this.setState({ emailInput: e.target.value });
+    error.classList.remove("active");
+    e.target.classList.remove("invalid");
+  }
+
+  onStartBlur(event) {
+    // Make sure focus stays within the dialog when tabbing from the button
+    const { dialog } = this;
+    if (event.relatedTarget && !(dialog.compareDocumentPosition(event.relatedTarget) & dialog.DOCUMENT_POSITION_CONTAINED_BY)) {
+      dialog.querySelector(FOCUSABLE_SELECTOR).focus();
+    }
+  }
+
+  onSubmit() {
+    this.props.dispatch(common_Actions_jsm__WEBPACK_IMPORTED_MODULE_0__["actionCreators"].UserEvent(Object.assign({ event: "SUBMIT_EMAIL" }, this._getFormInfo())));
+
+    global.addEventListener("visibilitychange", this.closeModal);
+  }
+
+  closeModal(ev) {
+    global.removeEventListener("visibilitychange", this.closeModal);
+    this.props.document.body.classList.remove("welcome");
+    this.props.document.getElementById("root").removeAttribute("aria-hidden");
+    this.setState({ isModalOpen: false });
+    this.revealCards();
+
+    // If closeModal() was triggered by a visibilitychange event, the user actually
+    // submitted the email form so we don't send a SKIPPED_SIGNIN ping.
+    if (!ev || ev.type !== "visibilitychange") {
+      this.props.dispatch(common_Actions_jsm__WEBPACK_IMPORTED_MODULE_0__["actionCreators"].UserEvent(Object.assign({ event: "SKIPPED_SIGNIN" }, this._getFormInfo())));
+    }
+  }
+
+  /**
+   * Report to telemetry additional information about the form submission.
+   */
+  _getFormInfo() {
+    const value = { has_flow_params: this.state.flowId.length > 0 };
+    return { value };
+  }
+
+  onInputInvalid(e) {
+    let error = e.target.previousSibling;
+    error.classList.add("active");
+    e.target.classList.add("invalid");
+    e.preventDefault(); // Override built-in form validation popup
+    e.target.focus();
+  }
+
+  hideCardPanel() {
+    this.setState({ showCardPanel: false });
+  }
+
+  revealCards() {
+    this.setState({ showCards: true });
+  }
+
+  getStringValue(str) {
+    if (str.property_id) {
+      str.value = this.props.intl.formatMessage({ id: str.property_id });
+    }
+    return str.value;
+  }
+
+  /**
+   * Takes in a url as a string or URL object and returns a URL object with the
+   * utm_* parameters added to it. If a URL object is passed in, the paraemeters
+   * are added to it (the return value can be ignored in that case as it's the
+   * same object).
+   */
+  addUtmParams(url, isCard = false) {
+    let returnUrl = url;
+    if (typeof returnUrl === "string") {
+      returnUrl = new URL(url);
+    }
+    returnUrl.searchParams.append("utm_source", "activity-stream");
+    returnUrl.searchParams.append("utm_campaign", "firstrun");
+    returnUrl.searchParams.append("utm_medium", "referral");
+    returnUrl.searchParams.append("utm_term", `${this.props.message.utm_term}${isCard ? "-card" : ""}`);
+    return returnUrl;
+  }
+
+  onCardAction(action) {
+    let actionUpdates = {};
+
+    if (action.type === "OPEN_URL") {
+      let url = new URL(action.data.args);
+      this.addUtmParams(url, true);
+
+      if (action.addFlowParams) {
+        url.searchParams.append("flow_id", this.state.flowId);
+        url.searchParams.append("flow_begin_time", this.state.flowBeginTime);
+      }
+
+      actionUpdates = { data: Object.assign({}, action.data, { args: url }) };
+    }
+
+    this.props.onAction(Object.assign({}, action, actionUpdates));
+  }
+
+  render() {
+    const { props } = this;
+    const { bundle: cards, content, utm_term } = props.message;
+    const innerClassName = ["trailhead", content && content.className].filter(v => v).join(" ");
+    return react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement(
+      react__WEBPACK_IMPORTED_MODULE_4___default.a.Fragment,
+      null,
+      this.state.isModalOpen && content ? react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement(
+        _components_ModalOverlay_ModalOverlay__WEBPACK_IMPORTED_MODULE_2__["ModalOverlayWrapper"],
+        { innerClassName: innerClassName, onClose: this.closeModal, id: "trailheadDialog", headerId: "trailheadHeader" },
+        react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement(
+          "div",
+          { className: "trailheadInner" },
+          react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement(
+            "div",
+            { className: "trailheadContent" },
+            react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement(
+              "h1",
+              { "data-l10n-id": content.title.string_id,
+                id: "trailheadHeader" },
+              this.getStringValue(content.title)
+            ),
+            content.subtitle && react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement(
+              "p",
+              { "data-l10n-id": content.subtitle.string_id },
+              this.getStringValue(content.subtitle)
+            ),
+            react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement(
+              "ul",
+              { className: "trailheadBenefits" },
+              content.benefits.map(item => react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement(
+                "li",
+                { key: item.id, className: item.id },
+                react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement(
+                  "h3",
+                  { "data-l10n-id": item.title.string_id },
+                  this.getStringValue(item.title)
+                ),
+                react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement(
+                  "p",
+                  { "data-l10n-id": item.text.string_id },
+                  this.getStringValue(item.text)
+                )
+              ))
+            ),
+            react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement(
+              "a",
+              { className: "trailheadLearn", "data-l10n-id": content.learn.text.string_id, href: this.addUtmParams(content.learn.url), target: "_blank", rel: "noopener noreferrer" },
+              this.getStringValue(content.learn.text)
+            )
+          ),
+          react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement(
+            "div",
+            { className: "trailheadForm" },
+            react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement(
+              "h3",
+              { "data-l10n-id": content.form.title.string_id },
+              this.getStringValue(content.form.title)
+            ),
+            react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement(
+              "p",
+              { "data-l10n-id": content.form.text.string_id },
+              this.getStringValue(content.form.text)
+            ),
+            react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement(
+              "form",
+              { method: "get", action: this.props.fxaEndpoint, target: "_blank", rel: "noopener noreferrer", onSubmit: this.onSubmit },
+              react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement("input", { name: "service", type: "hidden", value: "sync" }),
+              react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement("input", { name: "action", type: "hidden", value: "email" }),
+              react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement("input", { name: "context", type: "hidden", value: "fx_desktop_v3" }),
+              react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement("input", { name: "entrypoint", type: "hidden", value: "activity-stream-firstrun" }),
+              react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement("input", { name: "utm_source", type: "hidden", value: "activity-stream" }),
+              react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement("input", { name: "utm_campaign", type: "hidden", value: "firstrun" }),
+              react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement("input", { name: "utm_term", type: "hidden", value: utm_term }),
+              react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement("input", { name: "flow_id", type: "hidden", value: this.state.flowId }),
+              react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement("input", { name: "flow_begin_time", type: "hidden", value: this.state.flowBeginTime }),
+              react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement("input", { name: "style", type: "hidden", value: "trailhead" }),
+              react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement("p", { "data-l10n-id": "onboarding-join-form-email-error", className: "error" }),
+              react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement("input", {
+                "data-l10n-id": content.form.email.string_id,
+                placeholder: this.getStringValue(content.form.email),
+                name: "email",
+                type: "email",
+                required: "required",
+                onInvalid: this.onInputInvalid,
+                onChange: this.onInputChange }),
+              react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement(
+                "p",
+                { className: "trailheadTerms", "data-l10n-id": "onboarding-join-form-legal" },
+                react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement("a", { "data-l10n-name": "terms", target: "_blank", rel: "noopener noreferrer",
+                  href: this.addUtmParams("https://accounts.firefox.com/legal/terms") }),
+                react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement("a", { "data-l10n-name": "privacy", target: "_blank", rel: "noopener noreferrer",
+                  href: this.addUtmParams("https://accounts.firefox.com/legal/privacy") })
+              ),
+              react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement(
+                "button",
+                { "data-l10n-id": content.form.button.string_id, type: "submit" },
+                this.getStringValue(content.form.button)
+              )
+            )
+          )
+        ),
+        react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement(
+          "button",
+          { className: "trailheadStart",
+            "data-l10n-id": content.skipButton.string_id,
+            onBlur: this.onStartBlur,
+            onClick: this.closeModal },
+          this.getStringValue(content.skipButton)
+        )
+      ) : null,
+      cards && cards.length ? react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement(
+        "div",
+        { className: `trailheadCards ${this.state.showCardPanel ? "expanded" : "collapsed"}` },
+        react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement(
+          "div",
+          { className: "trailheadCardsInner",
+            "aria-hidden": !this.state.showCards },
+          react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement("h1", { "data-l10n-id": "onboarding-welcome-header" }),
+          react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement(
+            "div",
+            { className: `trailheadCardGrid${this.state.showCards ? " show" : ""}` },
+            cards.map(card => react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement(_OnboardingMessage_OnboardingMessage__WEBPACK_IMPORTED_MODULE_3__["OnboardingCard"], _extends({ key: card.id,
+              className: "trailheadCard",
+              sendUserActionTelemetry: props.sendUserActionTelemetry,
+              onAction: this.onCardAction,
+              UISurface: "TRAILHEAD"
+            }, card)))
+          ),
+          this.state.showCardPanel && react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement("button", {
+            className: "icon icon-dismiss", onClick: this.hideCardPanel,
+            title: props.intl.formatMessage({ id: "menu_action_dismiss" }),
+            "aria-label": props.intl.formatMessage({ id: "menu_action_dismiss" }) })
+        )
+      ) : null
+    );
+  }
+}
+
+const Trailhead = Object(react_intl__WEBPACK_IMPORTED_MODULE_1__["injectIntl"])(_Trailhead);
+/* WEBPACK VAR INJECTION */}.call(this, __webpack_require__(1)))
+
+/***/ }),
+/* 28 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
 /* WEBPACK VAR INJECTION */(function(global) {/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "SimpleHashRouter", function() { return SimpleHashRouter; });
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(12);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
 
 
 class SimpleHashRouter extends react__WEBPACK_IMPORTED_MODULE_0___default.a.PureComponent {
   constructor(props) {
     super(props);
@@ -3646,17 +4102,17 @@ class SimpleHashRouter extends react__WE
         routes
       }
     });
   }
 }
 /* WEBPACK VAR INJECTION */}.call(this, __webpack_require__(1)))
 
 /***/ }),
-/* 28 */
+/* 29 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "_ConfirmDialog", function() { return _ConfirmDialog; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ConfirmDialog", function() { return ConfirmDialog; });
 /* harmony import */ var common_Actions_jsm__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2);
 /* harmony import */ var react_redux__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(26);
@@ -3758,17 +4214,17 @@ class _ConfirmDialog extends react__WEBP
       )
     );
   }
 }
 
 const ConfirmDialog = Object(react_redux__WEBPACK_IMPORTED_MODULE_1__["connect"])(state => state.Dialog)(_ConfirmDialog);
 
 /***/ }),
-/* 29 */
+/* 30 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "_DarkModeMessage", function() { return _DarkModeMessage; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "DarkModeMessage", function() { return DarkModeMessage; });
 /* harmony import */ var common_Actions_jsm__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2);
 /* harmony import */ var react_redux__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(26);
@@ -3834,30 +4290,30 @@ class _DarkModeMessage extends react__WE
       )
     );
   }
 }
 
 const DarkModeMessage = Object(react_redux__WEBPACK_IMPORTED_MODULE_1__["connect"])()(_DarkModeMessage);
 
 /***/ }),
-/* 30 */
+/* 31 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "_LinkMenu", function() { return _LinkMenu; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "LinkMenu", function() { return LinkMenu; });
 /* harmony import */ var common_Actions_jsm__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2);
 /* harmony import */ var react_redux__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(26);
 /* harmony import */ var react_redux__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_redux__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var content_src_components_ContextMenu_ContextMenu__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(31);
+/* harmony import */ var content_src_components_ContextMenu_ContextMenu__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(32);
 /* harmony import */ var react_intl__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(5);
 /* harmony import */ var react_intl__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(react_intl__WEBPACK_IMPORTED_MODULE_3__);
-/* harmony import */ var content_src_lib_link_menu_options__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(32);
+/* harmony import */ var content_src_lib_link_menu_options__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(33);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(12);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_5__);
 
 
 
 
 
 
@@ -3909,17 +4365,17 @@ class _LinkMenu extends react__WEBPACK_I
       options: this.getOptions() });
   }
 }
 
 const getState = state => ({ isPrivateBrowsingEnabled: state.Prefs.values.isPrivateBrowsingEnabled, platform: state.Prefs.values.platform });
 const LinkMenu = Object(react_redux__WEBPACK_IMPORTED_MODULE_1__["connect"])(getState)(Object(react_intl__WEBPACK_IMPORTED_MODULE_3__["injectIntl"])(_LinkMenu));
 
 /***/ }),
-/* 31 */
+/* 32 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* WEBPACK VAR INJECTION */(function(global) {/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ContextMenu", function() { return ContextMenu; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ContextMenuItem", function() { return ContextMenuItem; });
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(12);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
@@ -4016,17 +4472,17 @@ class ContextMenuItem extends react__WEB
         option.label
       )
     );
   }
 }
 /* WEBPACK VAR INJECTION */}.call(this, __webpack_require__(1)))
 
 /***/ }),
-/* 32 */
+/* 33 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "GetPlatformString", function() { return GetPlatformString; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "LinkMenuOptions", function() { return LinkMenuOptions; });
 /* harmony import */ var common_Actions_jsm__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2);
 
@@ -4243,17 +4699,17 @@ const LinkMenuOptions = {
   CheckBookmark: site => site.bookmarkGuid ? LinkMenuOptions.RemoveBookmark(site) : LinkMenuOptions.AddBookmark(site),
   CheckPinTopSite: (site, index) => site.isPinned ? LinkMenuOptions.UnpinTopSite(site) : LinkMenuOptions.PinTopSite(site, index),
   CheckSavedToPocket: (site, index) => site.pocket_id ? LinkMenuOptions.DeleteFromPocket(site) : LinkMenuOptions.SaveToPocket(site, index),
   CheckBookmarkOrArchive: site => site.pocket_id ? LinkMenuOptions.ArchiveFromPocket(site) : LinkMenuOptions.CheckBookmark(site),
   OpenInPrivateWindow: (site, index, eventSource, isEnabled) => isEnabled ? _OpenInPrivateWindow(site) : LinkMenuOptions.EmptyItem()
 };
 
 /***/ }),
-/* 33 */
+/* 34 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* WEBPACK VAR INJECTION */(function(global) {/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "INTERSECTION_RATIO", function() { return INTERSECTION_RATIO; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ImpressionStats", function() { return ImpressionStats; });
 /* harmony import */ var common_Actions_jsm__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(12);
@@ -4407,37 +4863,37 @@ ImpressionStats.defaultProps = {
   IntersectionObserver: global.IntersectionObserver,
   document: global.document,
   rows: [],
   source: ""
 };
 /* WEBPACK VAR INJECTION */}.call(this, __webpack_require__(1)))
 
 /***/ }),
-/* 34 */
+/* 35 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* WEBPACK VAR INJECTION */(function(global) {/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "_TopSites", function() { return _TopSites; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "TopSites", function() { return TopSites; });
 /* harmony import */ var common_Actions_jsm__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2);
-/* harmony import */ var _TopSitesConstants__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(35);
-/* harmony import */ var content_src_components_CollapsibleSection_CollapsibleSection__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(36);
-/* harmony import */ var content_src_components_ComponentPerfTimer_ComponentPerfTimer__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(40);
+/* harmony import */ var _TopSitesConstants__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(36);
+/* harmony import */ var content_src_components_CollapsibleSection_CollapsibleSection__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(37);
+/* harmony import */ var content_src_components_ComponentPerfTimer_ComponentPerfTimer__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(41);
 /* harmony import */ var react_redux__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(26);
 /* harmony import */ var react_redux__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(react_redux__WEBPACK_IMPORTED_MODULE_4__);
 /* harmony import */ var react_intl__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(5);
 /* harmony import */ var react_intl__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(react_intl__WEBPACK_IMPORTED_MODULE_5__);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(12);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_6__);
-/* harmony import */ var _SearchShortcutsForm__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(42);
-/* harmony import */ var common_Reducers_jsm__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(57);
-/* harmony import */ var _TopSiteForm__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(59);
-/* harmony import */ var _TopSite__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(43);
+/* harmony import */ var _SearchShortcutsForm__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(43);
+/* harmony import */ var common_Reducers_jsm__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(58);
+/* harmony import */ var _TopSiteForm__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(60);
+/* harmony import */ var _TopSite__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(44);
 var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
 
 
 
 
 
 
@@ -4616,17 +5072,17 @@ class _TopSites extends react__WEBPACK_I