Bug 1548388 - Add focus states, fill telemetry and bug fixes to Activity Stream r=r1cky
authorEd Lee <edilee@mozilla.com>
Wed, 01 May 2019 22:55:10 +0000
changeset 531012 34dd0113415f1aa2b4fd8e457006e28b047a185d
parent 531011 dae4370a4b010a27c6ab3528935a2b389d6f388b
child 531013 5acce9aaceb96cd5b8c0c9fde26286752e8cae29
push id11265
push userffxbld-merge
push dateMon, 13 May 2019 10:53:39 +0000
treeherdermozilla-beta@77e0fe8dbdd3 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersr1cky
bugs1548388
milestone68.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1548388 - Add focus states, fill telemetry and bug fixes to Activity Stream r=r1cky Differential Revision: https://phabricator.services.mozilla.com/D29577
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/common/Reducers.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/Trailhead/Trailhead.jsx
browser/components/newtab/content-src/asrouter/templates/Trailhead/_Trailhead.scss
browser/components/newtab/content-src/components/Base/Base.jsx
browser/components/newtab/content-src/components/DiscoveryStreamBase/DiscoveryStreamBase.jsx
browser/components/newtab/content-src/components/DiscoveryStreamComponents/CardGrid/_CardGrid.scss
browser/components/newtab/content-src/components/DiscoveryStreamComponents/DSCard/_DSCard.scss
browser/components/newtab/content-src/components/DiscoveryStreamComponents/Hero/_Hero.scss
browser/components/newtab/content-src/components/DiscoveryStreamComponents/List/_List.scss
browser/components/newtab/content-src/components/DiscoveryStreamComponents/TopSites/_TopSites.scss
browser/components/newtab/content-src/components/Search/_Search.scss
browser/components/newtab/content-src/lib/selectLayoutRender.js
browser/components/newtab/content-src/styles/_activity-stream.scss
browser/components/newtab/content-src/styles/_mixins.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/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/data/trailhead.wip
browser/components/newtab/docs/v2-system-addon/data_dictionary.md
browser/components/newtab/docs/v2-system-addon/data_events.md
browser/components/newtab/jar.mn
browser/components/newtab/lib/ASRouter.jsm
browser/components/newtab/lib/ASRouterTargeting.jsm
browser/components/newtab/lib/DiscoveryStreamFeed.jsm
browser/components/newtab/lib/OnboardingMessageProvider.jsm
browser/components/newtab/lib/TelemetryFeed.jsm
browser/components/newtab/locales-src/eu/strings.properties
browser/components/newtab/locales-src/pa-IN/strings.properties
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/activity-stream-noscripts.html
browser/components/newtab/prerendered/locales/bn/activity-stream-prerendered-noscripts.html
browser/components/newtab/prerendered/locales/bn/activity-stream-prerendered.html
browser/components/newtab/prerendered/locales/bn/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-strings.js
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/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/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/trs/activity-stream-noscripts.html
browser/components/newtab/prerendered/locales/trs/activity-stream-prerendered-noscripts.html
browser/components/newtab/prerendered/locales/trs/activity-stream-prerendered.html
browser/components/newtab/prerendered/locales/trs/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/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/common/Reducers.test.js
browser/components/newtab/test/unit/content-src/lib/selectLayoutRender.test.js
browser/components/newtab/test/unit/lib/BookmarkPanelHub.test.js
browser/components/newtab/test/unit/lib/DiscoveryStreamFeed.test.js
browser/components/newtab/test/unit/lib/TelemetryFeed.test.js
browser/components/newtab/yamscripts.yml
browser/modules/PingCentre.jsm
--- a/browser/app/profile/firefox.js
+++ b/browser/app/profile/firefox.js
@@ -1311,16 +1311,22 @@ 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
 
+#ifdef NIGHTLY_BUILD
+pref("trailhead.firstrun.cohort", 1);
+#else
+pref("trailhead.firstrun.cohort", 0);
+#endif
+
 // 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
@@ -95,18 +95,19 @@ function templateHTML(options, html) {
     <meta charset="utf-8">
     <meta http-equiv="Content-Security-Policy" content="default-src 'none'; object-src 'none'; script-src 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"></div>
     <div id="root">${isPrerendered ? html : "<!-- Regular React Rendering -->"}</div>
-    <div id="footer-snippets-container"></div>${options.noscripts ? "" : scriptRender}
+    <div id="footer-asrouter-container"></div>${options.noscripts ? "" : scriptRender}
   </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
@@ -41,20 +41,22 @@ for (const type of [
   "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_LINK_BLOCKED",
   "DISCOVERY_STREAM_LOADED_CONTENT",
   "DISCOVERY_STREAM_OPT_OUT",
   "DISCOVERY_STREAM_SPOCS_CAPS",
   "DISCOVERY_STREAM_SPOCS_ENDPOINT",
+  "DISCOVERY_STREAM_SPOCS_FILL",
   "DISCOVERY_STREAM_SPOCS_UPDATE",
   "DISCOVERY_STREAM_SPOC_IMPRESSION",
   "DOWNLOAD_CHANGED",
   "FAKE_FOCUS_SEARCH",
   "FILL_SEARCH_TERM",
   "HANDOFF_SEARCH_TO_AWESOMEBAR",
   "HIDE_SEARCH",
   "INIT",
@@ -287,16 +289,31 @@ function UserEvent(data) {
 function ASRouterUserEvent(data) {
   return AlsoToMain({
     type: actionTypes.AS_ROUTER_TELEMETRY_USER_EVENT,
     data,
   });
 }
 
 /**
+ * DiscoveryStreamSpocsFill - A telemetry ping indicating a SPOCS Fill event.
+ *
+ * @param  {object} data Fields to include in the ping (spocs_fills, etc.)
+ * @param  {int} importContext (For testing) Override the import context for testing.
+ * @return {object} An AlsoToMain action
+ */
+function DiscoveryStreamSpocsFill(data, importContext = globalImportContext) {
+  const action = {
+    type: actionTypes.DISCOVERY_STREAM_SPOCS_FILL,
+    data,
+  };
+  return importContext === UI_CODE ? AlsoToMain(action) : action;
+}
+
+/**
  * UndesiredEvent - A telemetry ping indicating an undesired state.
  *
  * @param  {object} data Fields to include in the ping (value, etc.)
  * @param  {int} importContext (For testing) Override the import context for testing.
  * @return {object} An action. For UI code, a AlsoToMain action.
  */
 function UndesiredEvent(data, importContext = globalImportContext) {
   const action = {
@@ -393,16 +410,17 @@ this.actionCreators = {
   OnlyToOneContent,
   AlsoToMain,
   OnlyToMain,
   AlsoToPreloaded,
   SetPref,
   WebExtEvent,
   DiscoveryStreamImpressionStats,
   DiscoveryStreamLoadedContent,
+  DiscoveryStreamSpocsFill,
 };
 
 // These are helpers to test for certain kinds of actions
 this.actionUtils = {
   isSendToMain(action) {
     if (!action.meta) {
       return false;
     }
--- a/browser/components/newtab/common/Reducers.jsm
+++ b/browser/components/newtab/common/Reducers.jsm
@@ -528,17 +528,17 @@ function DiscoveryStream(prevState = INI
             ...prevState.spocs,
             lastUpdated: action.data.lastUpdated,
             data: action.data.spocs,
             loaded: true,
           },
         };
       }
       return prevState;
-    case at.PLACES_LINK_BLOCKED:
+    case at.DISCOVERY_STREAM_LINK_BLOCKED:
       return isNotReady() ? prevState :
         nextState(items => items.filter(item => item.url !== action.data.url));
 
     case at.PLACES_SAVED_TO_POCKET:
       const addPocketInfo = item => {
         if (item.url === action.data.url) {
           return Object.assign({}, item, {
             open_url: action.data.open_url,
--- a/browser/components/newtab/content-src/asrouter/asrouter-content.jsx
+++ b/browser/components/newtab/content-src/asrouter/asrouter-content.jsx
@@ -6,19 +6,21 @@ import {ImpressionsWrapper} from "./comp
 import {LocalizationProvider} from "fluent-react";
 import {NEWTAB_DARK_THEME} from "content-src/lib/constants";
 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);
     }
   },
@@ -91,17 +93,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`);
     }
@@ -216,17 +219,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"
@@ -283,16 +287,30 @@ 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
+        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" />
@@ -300,27 +318,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(
         <>
           {this.renderPreviewBanner()}
+          {this.renderTrailhead()}
           {this.renderFirstRunOverlay()}
           {this.renderOnboarding()}
           {this.renderSnippets()}
         </>,
-        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,51 @@
 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();
+    }
+  }
+
   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 || ""}`}>
+        {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,17 @@ Please note that some targeting attribut
 * [profileAgeCreated](#profileagecreated)
 * [profileAgeReset](#profileagereset)
 * [providerCohorts](#providercohorts)
 * [region](#region)
 * [searchEngines](#searchengines)
 * [sync](#sync)
 * [topFrecentSites](#topfrecentsites)
 * [totalBookmarksCount](#totalbookmarkscount)
+* [trailheadCohort](#trailheadcohort)
 * [usesFirefoxSync](#usesfirefoxsync)
 * [xpinstallEnabled](#xpinstallEnabled)
 * [hasPinnedTabs](#haspinnedtabs)
 
 ## Detailed usage
 
 ### `addonsInfo`
 Provides information about the add-ons the user has installed.
@@ -419,16 +420,21 @@ type UnixEpochNumber = number;
 Total number of bookmarks.
 
 #### Definition
 
 ```ts
 declare const totalBookmarksCount: number;
 ```
 
+### `trailheadCohort`
+
+(67+ only) Experiment cohort for special trailhead project
+
+
 ### `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');
+  }
+}
new file mode 100644
--- /dev/null
+++ b/browser/components/newtab/content-src/asrouter/templates/Trailhead/Trailhead.jsx
@@ -0,0 +1,184 @@
+import {actionCreators as ac, actionTypes as at} from "common/Actions.jsm";
+import {ModalOverlayWrapper} from "../../components/ModalOverlay/ModalOverlay";
+import {OnboardingCard} from "../OnboardingMessage/OnboardingMessage";
+import React from "react";
+
+const FLUENT_FILES = [
+  "branding/brand.ftl",
+  "browser/branding/sync-brand.ftl",
+  // These are finalized strings exposed to localizers
+  "browser/newtab/onboarding.ftl",
+  // These are WIP/in-development strings that only get used if the string
+  // doesn't already exist in onboarding.ftl above
+  "trailhead.ftl",
+];
+
+export class Trailhead extends React.PureComponent {
+  constructor(props) {
+    super(props);
+    this.closeModal = this.closeModal.bind(this);
+    this.onInputChange = this.onInputChange.bind(this);
+    this.onSubmit = this.onSubmit.bind(this);
+    this.onInputInvalid = this.onInputInvalid.bind(this);
+
+    this.state = {
+      emailInput: "",
+      isModalOpen: true,
+      flowId: "",
+      flowBeginTime: 0,
+    };
+    this.didFetch = false;
+  }
+
+  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 fxaParams = "entrypoint=activity-stream-firstrun&utm_source=activity-stream&utm_campaign=firstrun&utm_term=trailhead&form_type=email";
+        const response = await fetch(`${this.props.fxaEndpoint}/metrics-flow?${fxaParams}`, {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
+    global.document.body.classList.remove("hide-main");
+
+    // Add inline-onboarding class to disable fixed search header and fixed positioned settings icon
+    global.document.body.classList.add("inline-onboarding");
+  }
+
+  componentDidUnmount() {
+    global.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");
+  }
+
+  onSubmit() {
+    this.props.dispatch(ac.UserEvent({event: "SUBMIT_EMAIL", ...this._getFormInfo()}));
+
+    global.addEventListener("visibilitychange", this.closeModal);
+  }
+
+  closeModal() {
+    global.removeEventListener("visibilitychange", this.closeModal);
+    global.document.body.classList.remove("welcome");
+    this.setState({isModalOpen: false});
+    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();
+  }
+
+  render() {
+    const {props} = this;
+    const {bundle: cards, content} = props.message;
+    return (<>
+    {this.state.isModalOpen && content ? <ModalOverlayWrapper innerClassName={`trailhead ${content.className}`} onClose={this.closeModal}>
+      <div className="trailheadInner">
+        <div className="trailheadContent">
+          <h1 data-l10n-id={content.title.string_id}>{content.title.value}</h1>
+          {content.subtitle &&
+            <p data-l10n-id={content.subtitle.string_id}>{content.subtitle.value}</p>
+          }
+          <ul className="trailheadBenefits">
+            {content.benefits.map(item => (
+              <li key={item.id} className={item.id}>
+                <h3 data-l10n-id={item.title.string_id}>{item.title.value}</h3>
+                <p data-l10n-id={item.text.string_id}>{item.text.value}</p>
+              </li>
+            ))}
+          </ul>
+          <a className="trailheadLearn" data-l10n-id={content.learn.text.string_id} href={content.learn.url}>
+            {content.learn.text.value}
+          </a>
+        </div>
+        <div className="trailheadForm">
+          <h3 data-l10n-id={content.form.title.string_id}>{content.form.title.value}</h3>
+          <p data-l10n-id={content.form.text.string_id}>{content.form.text.value}</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="trailhead" />
+            <input name="flow_id" type="hidden" value={this.state.flowId} />
+            <input name="flow_begin_time" type="hidden" value={this.state.flowBeginTime} />
+            <p data-l10n-id="onboarding-join-form-email-error" className="error" />
+            <input
+              data-l10n-id={content.form.email.string_id}
+              placeholder={content.form.email.placeholder}
+              name="email"
+              type="email"
+              required="true"
+              onInvalid={this.onInputInvalid}
+              onChange={this.onInputChange} />
+            <p className="trailheadTerms" data-l10n-id="onboarding-join-form-legal">
+              <a data-l10n-name="terms"
+                href="https://accounts.firefox.com/legal/terms" />
+              <a data-l10n-name="privacy"
+                href="https://accounts.firefox.com/legal/privacy" />
+            </p>
+            <button data-l10n-id={content.form.button.string_id} type="submit">
+              {content.form.button.value}
+            </button>
+          </form>
+        </div>
+      </div>
+
+      <button className="trailheadStart"
+        data-l10n-id={content.skipButton.string_id}
+        onClick={this.closeModal}>{content.skipButton.value}</button>
+    </ModalOverlayWrapper> : null}
+    {(cards && cards.length) ? <div className="trailheadCards">
+      <div className="trailheadCardsInner">
+        <h1 data-l10n-id="onboarding-welcome-header" />
+        <div className="trailheadCardGrid">
+        {cards.map(card => (
+          <OnboardingCard key={card.id}
+            className="trailheadCard"
+            sendUserActionTelemetry={props.sendUserActionTelemetry}
+            onAction={props.onAction}
+            UISurface="TRAILHEAD"
+            {...card} />
+        ))}
+        </div>
+      </div>
+    </div> : null}
+    </>);
+  }
+}
new file mode 100644
--- /dev/null
+++ b/browser/components/newtab/content-src/asrouter/templates/Trailhead/_Trailhead.scss
@@ -0,0 +1,337 @@
+.trailhead {
+  $benefit-icon-size: 62px;
+  $benefit-icon-spacing: $benefit-icon-size + 12px;
+
+  background: url('#{$image-path}trailhead/accounts-form-bg.jpg') bottom / cover;
+  color: $white;
+  height: auto;
+  top: 100px;
+
+  @media (max-height: 700px) {
+    position: absolute;
+    top: 20px;
+  }
+
+  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;
+      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.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 4px;
+      background-repeat: no-repeat;
+      background-size: $benefit-icon-size;
+      -moz-context-properties: fill;
+      fill: $blue-50;
+      list-style: none;
+      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-bottom: 4px;
+    }
+
+    p {
+      color: $white;
+      font-size: 15px;
+      line-height: 22px;
+      margin: 4px 0 15px;
+      margin-inline-end: 60px;
+    }
+  }
+
+  .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 {
+      border: 0;
+      width: 100%;
+    }
+
+    input {
+      background-color: $white;
+      color: $grey-70;
+      font-size: 15px;
+    }
+
+    button {
+      background-color: $blue-60;
+      cursor: pointer;
+      display: block;
+      font-size: 15px;
+      font-weight: 400;
+      padding: 14px;
+
+      &:hover,
+      &:focus {
+        background-color: $trailhead-blue-60;
+      }
+
+      &:focus {
+        outline: dotted 1px;
+      }
+    }
+  }
+
+  .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;
+    }
+  }
+}
+
+.trailheadCards {
+  background: var(--trailhead-cards-background-color);
+  text-align: center;
+
+  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;
+  }
+
+}
+
+.trailheadCardGrid {
+  display: grid;
+  grid-gap: $base-gutter;
+  margin: 0;
+
+  @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);
+    }
+  }
+
+  .onboardingButtonContainer {
+    height: 60px;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    text-align: center;
+  }
+}
+
+.inline-onboarding {
+  .outer-wrapper {
+    position: relative;
+
+    .prefs-button {
+      button {
+        position: absolute;
+      }
+    }
+  }
+}
+
+// If the window is too short, we need to allow scrolling so user can get to Start Browsing button.
+@media (max-height: 700px) {
+  .activity-stream.welcome.inline-onboarding {
+    overflow: auto;
+  }
+}
--- a/browser/components/newtab/content-src/components/Base/Base.jsx
+++ b/browser/components/newtab/content-src/components/Base/Base.jsx
@@ -67,16 +67,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;
@@ -153,17 +154,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">
                   <DiscoveryStreamBase />
                 </ErrorBoundary>) : <Sections />}
               <PrefsButton onClick={this.openPreferences} />
             </div>
             <ConfirmDialog />
--- a/browser/components/newtab/content-src/components/DiscoveryStreamBase/DiscoveryStreamBase.jsx
+++ b/browser/components/newtab/content-src/components/DiscoveryStreamBase/DiscoveryStreamBase.jsx
@@ -1,8 +1,9 @@
+import {actionCreators as ac} from "common/Actions.jsm";
 import {CardGrid} from "content-src/components/DiscoveryStreamComponents/CardGrid/CardGrid";
 import {CollapsibleSection} from "content-src/components/CollapsibleSection/CollapsibleSection";
 import {connect} from "react-redux";
 import {DSMessage} from "content-src/components/DiscoveryStreamComponents/DSMessage/DSMessage";
 import {Hero} from "content-src/components/DiscoveryStreamComponents/Hero/Hero";
 import {HorizontalRule} from "content-src/components/DiscoveryStreamComponents/HorizontalRule/HorizontalRule";
 import {List} from "content-src/components/DiscoveryStreamComponents/List/List";
 import {Navigation} from "content-src/components/DiscoveryStreamComponents/Navigation/Navigation";
@@ -163,22 +164,29 @@ export class _DiscoveryStreamBase extend
   componentWillReceiveProps(oldProps) {
     if (this.props.DiscoveryStream.layout !== oldProps.DiscoveryStream.layout) {
       rickRollCache = [];
     }
   }
 
   render() {
     // Select layout render data by adding spocs and position to recommendations
-    const layoutRender = selectLayoutRender(this.props.DiscoveryStream, this.props.Prefs.values, rickRollCache);
+    const {layoutRender, spocsFill} = selectLayoutRender(this.props.DiscoveryStream, this.props.Prefs.values, rickRollCache);
     const {config, feeds, spocs} = this.props.DiscoveryStream;
     if (!spocs.loaded || !feeds.loaded) {
       return null;
     }
 
+    // Send SPOCS Fill if any. Note that it should not send it again if the same
+    // page gets re-rendered by state changes.
+    if (spocsFill.length && !this._spocsFillSent) {
+      this.props.dispatch(ac.DiscoveryStreamSpocsFill({spoc_fills: spocsFill}));
+      this._spocsFillSent = true;
+    }
+
     // Allow rendering without extracting special components
     if (!config.collapsible) {
       return this.renderLayout(layoutRender);
     }
 
     // Find the first component of a type and remove it from layout
     const extractComponent = type => {
       for (const [rowIndex, row] of Object.entries(layoutRender)) {
--- a/browser/components/newtab/content-src/components/DiscoveryStreamComponents/CardGrid/_CardGrid.scss
+++ b/browser/components/newtab/content-src/components/DiscoveryStreamComponents/CardGrid/_CardGrid.scss
@@ -10,16 +10,20 @@
     @include dark-theme-only {
       background: none;
     }
 
     background: $white;
     border-radius: 4px;
   }
 
+  .ds-card-link:focus {
+    @include ds-fade-in;
+  }
+
   &.ds-card-grid-border {
     .ds-card:not(.placeholder) {
       @include dark-theme-only {
         box-shadow: 0 1px 4px $shadow-10;
         background: $grey-70;
       }
 
       box-shadow: 0 1px 4px 0 $grey-90-10;
--- a/browser/components/newtab/content-src/components/DiscoveryStreamComponents/DSCard/_DSCard.scss
+++ b/browser/components/newtab/content-src/components/DiscoveryStreamComponents/DSCard/_DSCard.scss
@@ -57,16 +57,20 @@
     }
   }
 
   .ds-card-link {
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     height: 100%;
+
+    &:focus {
+      @include ds-fade-in;
+    }
   }
 
   .meta {
     display: flex;
     flex-direction: column;
     flex-grow: 1;
     padding: 16px;
 
--- a/browser/components/newtab/content-src/components/DiscoveryStreamComponents/Hero/_Hero.scss
+++ b/browser/components/newtab/content-src/components/DiscoveryStreamComponents/Hero/_Hero.scss
@@ -62,16 +62,20 @@
     }
 
     color: $grey-50;
     display: block;
     margin: 12px 0 16px;
     padding-top: 16px;
     height: 100%;
 
+    &:focus {
+      @include ds-fade-in;
+    }
+
     @at-root .ds-hero-no-border .ds-hero-item .wrapper {
       border-top: 0;
       border-bottom: 0;
       padding: 0 0 8px;
     }
 
     &:hover .meta header {
       @include dark-theme-only {
--- a/browser/components/newtab/content-src/components/DiscoveryStreamComponents/List/_List.scss
+++ b/browser/components/newtab/content-src/components/DiscoveryStreamComponents/List/_List.scss
@@ -81,16 +81,20 @@
     @include dark-theme-only {
       color: $grey-10;
     }
 
     color: $grey-90;
   }
 }
 
+.ds-list-item-link:focus {
+  @include ds-fade-in;
+}
+
 .ds-list-numbers {
   $counter-whitespace: ($item-line-height - $item-font-size) * 1px;
   $counter-size: 32px;
   $counter-padded-size: $counter-size + $counter-whitespace * 1.5;
 
   .ds-list-item {
     counter-increment: list;
   }
--- a/browser/components/newtab/content-src/components/DiscoveryStreamComponents/TopSites/_TopSites.scss
+++ b/browser/components/newtab/content-src/components/DiscoveryStreamComponents/TopSites/_TopSites.scss
@@ -3,16 +3,20 @@
 
   // This is the override layer.
   .top-sites {
     // Slightly different alignment with the other DS components than AS has.
     margin: 0 (-$section-horizontal-padding);
 
     .top-site-outer {
       padding: 0 12px;
+
+      .top-site-inner > a:-moz-any(.active, :focus) .tile {
+        @include ds-fade-in;
+      }
     }
 
     .top-sites-list {
       margin: 0 -12px;
     }
   }
 
   // Only show 6 cards for 2/3 and 1/3
--- 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/lib/selectLayoutRender.js
+++ b/browser/components/newtab/content-src/lib/selectLayoutRender.js
@@ -1,35 +1,47 @@
 export const selectLayoutRender = (state, prefs, rickRollCache) => {
   const {layout, feeds, spocs} = state;
   let spocIndex = 0;
   let bufferRollCache = [];
+  // Records the chosen and unchosen spocs by the probability selection.
+  let chosenSpocs = new Set();
+  let unchosenSpocs = new Set();
 
   // rickRollCache stores random probability values for each spoc position. This cache is empty
   // on page refresh and gets filled with random values on first render inside maybeInjectSpocs.
   const isFirstRun = !rickRollCache.length;
 
   function maybeInjectSpocs(data, spocsConfig) {
     if (data &&
         spocsConfig && spocsConfig.positions && spocsConfig.positions.length &&
         spocs.data.spocs && spocs.data.spocs.length) {
       const recommendations = [...data.recommendations];
       for (let position of spocsConfig.positions) {
+        const spoc = spocs.data.spocs[spocIndex];
+        if (!spoc) {
+          break;
+        }
+
         // Cache random number for a position
         let rickRoll;
         if (isFirstRun) {
           rickRoll = Math.random();
           rickRollCache.push(rickRoll);
         } else {
           rickRoll = rickRollCache.shift();
           bufferRollCache.push(rickRoll);
         }
 
-        if (spocs.data.spocs[spocIndex] && rickRoll <= spocsConfig.probability) {
-          recommendations.splice(position.index, 0, spocs.data.spocs[spocIndex++]);
+        if (rickRoll <= spocsConfig.probability) {
+          spocIndex++;
+          recommendations.splice(position.index, 0, spoc);
+          chosenSpocs.add(spoc);
+        } else {
+          unchosenSpocs.add(spoc);
         }
       }
 
       return {
         ...data,
         recommendations,
       };
     }
@@ -46,17 +58,17 @@ export const selectLayoutRender = (state
   if (!prefs["feeds.topsites"]) {
     filterArray.push("TopSites");
   }
 
   if (!prefs["feeds.section.topstories"]) {
     filterArray.push(...DS_COMPONENTS);
   }
 
-  return layout.map(row => ({
+  const layoutRender = layout.map(row => ({
     ...row,
 
     // Loops through desired components and adds a .data property
     // containing data from feeds
     components: row.components.filter(c => !filterArray.includes(c.type)).map(component => {
       if (!component.feed || !feeds.data[component.feed.url]) {
         return component;
       }
@@ -89,9 +101,33 @@ export const selectLayoutRender = (state
       // Example: A second card grid starts pos offset from the last card grid.
       for (let i = 0; i < items; i++) {
         data.recommendations[i].pos = positions[component.type]++;
       }
 
       return {...component, data};
     }),
   })).filter(row => row.components.length);
+
+  // Generate the payload for the SPOCS Fill ping. Note that a SPOC could be rejected
+  // by the `probability_selection` first, then gets chosen for the next position. For
+  // all other SPOCS that never went through the probabilistic selection, its reason will
+  // be "out_of_position".
+  let spocsFill = [];
+  if (spocs.data && spocs.data.spocs) {
+    const chosenSpocsFill = [...chosenSpocs]
+      .map(spoc => ({id: spoc.id, reason: "n/a", displayed: 1, full_recalc: 0}));
+    const unchosenSpocsFill = [...unchosenSpocs]
+      .filter(spoc => !chosenSpocs.has(spoc))
+      .map(spoc => ({id: spoc.id, reason: "probability_selection", displayed: 0, full_recalc: 0}));
+    const outOfPositionSpocsFill = spocs.data.spocs.slice(spocIndex)
+      .filter(spoc => !unchosenSpocs.has(spoc))
+      .map(spoc => ({id: spoc.id, reason: "out_of_position", displayed: 0, full_recalc: 0}));
+
+    spocsFill = [
+      ...chosenSpocsFill,
+      ...unchosenSpocsFill,
+      ...outOfPositionSpocsFill,
+    ];
+  }
+
+  return {spocsFill, layoutRender};
 };
--- a/browser/components/newtab/content-src/styles/_activity-stream.scss
+++ b/browser/components/newtab/content-src/styles/_activity-stream.scss
@@ -165,8 +165,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/_mixins.scss
+++ b/browser/components/newtab/content-src/styles/_mixins.scss
@@ -36,8 +36,15 @@
   @content;
 
   @include dark-theme-only {
     border-bottom: 1px solid $grey-60;
   }
 
   border-bottom: 1px solid $grey-30;
 }
+
+@mixin ds-fade-in {
+  box-shadow: 0 0 0 1px $blue-50 inset, 0 0 0 1px $blue-50, 0 0 0 5px $blue-50-30;
+  transition: box-shadow 150ms;
+  border-radius: 4px;
+  outline: none;
+}
--- a/browser/components/newtab/content-src/styles/_theme.scss
+++ b/browser/components/newtab/content-src/styles/_theme.scss
@@ -73,16 +73,22 @@ 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};
+
   &[lwt-newtab-brighttext] {
     // 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 +137,16 @@ 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-40};
   }
 }
--- 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);
@@ -40,43 +41,50 @@
 $grey-90-30: rgba($grey-90, 0.3);
 $grey-90-40: rgba($grey-90, 0.4);
 $grey-90-50: rgba($grey-90, 0.5);
 $grey-90-60: rgba($grey-90, 0.6);
 $grey-90-70: rgba($grey-90, 0.7);
 $grey-90-80: rgba($grey-90, 0.8);
 $grey-90-90: rgba($grey-90, 0.9);
 
+$blue-50-30: rgba($blue-50, 0.3);
+
 $black: #000;
 $black-5: rgba($black, 0.05);
 $black-10: rgba($black, 0.1);
 $black-12: rgba($black, 0.12);
 $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;
 
 // 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,21 @@ 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); }
   body[lwt-newtab-brighttext] {
     --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 +110,21 @@ 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.4); }
 
 .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);
@@ -1134,41 +1142,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 {
@@ -1871,16 +1879,21 @@ main {
   display: grid;
   grid-gap: 24px;
   margin: 16px 0; }
   .ds-card-grid .ds-card {
     background: #FFF;
     border-radius: 4px; }
     [lwt-newtab-brighttext] .ds-card-grid .ds-card {
       background: none; }
+  .ds-card-grid .ds-card-link:focus {
+    box-shadow: 0 0 0 1px #0A84FF inset, 0 0 0 1px #0A84FF, 0 0 0 5px rgba(10, 132, 255, 0.3);
+    transition: box-shadow 150ms;
+    border-radius: 4px;
+    outline: none; }
   .ds-card-grid.ds-card-grid-border .ds-card:not(.placeholder) {
     box-shadow: 0 1px 4px 0 rgba(12, 12, 13, 0.1); }
     [lwt-newtab-brighttext] .ds-card-grid.ds-card-grid-border .ds-card:not(.placeholder) {
       box-shadow: 0 1px 4px rgba(12, 12, 13, 0.1);
       background: #38383D; }
     .ds-card-grid.ds-card-grid-border .ds-card:not(.placeholder):hover {
       box-shadow: 0 0 0 5px #D7D7DB;
       transition: box-shadow 150ms;
@@ -1964,16 +1977,21 @@ main {
     display: block;
     margin: 12px 0 16px;
     padding-top: 16px;
     height: 100%; }
     [lwt-newtab-brighttext] .ds-hero .wrapper {
       border-top: 1px solid #4A4A4F; }
     [lwt-newtab-brighttext] .ds-hero .wrapper {
       color: #D7D7DB; }
+    .ds-hero .wrapper:focus {
+      box-shadow: 0 0 0 1px #0A84FF inset, 0 0 0 1px #0A84FF, 0 0 0 5px rgba(10, 132, 255, 0.3);
+      transition: box-shadow 150ms;
+      border-radius: 4px;
+      outline: none; }
     .ds-hero-no-border .ds-hero-item .wrapper {
       border-top: 0;
       border-bottom: 0;
       padding: 0 0 8px; }
     .ds-hero .wrapper:hover .meta header {
       color: #0060DF; }
       [lwt-newtab-brighttext] .ds-hero .wrapper:hover .meta header {
         color: #45A1FF; }
@@ -2199,16 +2217,22 @@ main {
     display: none; }
   .ds-list:not(.ds-list-images) .ds-list-image {
     display: none; }
   .ds-list a {
     color: #0C0C0D; }
     [lwt-newtab-brighttext] .ds-list a {
       color: #F9F9FA; }
 
+.ds-list-item-link:focus {
+  box-shadow: 0 0 0 1px #0A84FF inset, 0 0 0 1px #0A84FF, 0 0 0 5px rgba(10, 132, 255, 0.3);
+  transition: box-shadow 150ms;
+  border-radius: 4px;
+  outline: none; }
+
 .ds-list-numbers .ds-list-item {
   counter-increment: list; }
 
 .ds-list-numbers .ds-list-item:not(.placeholder) > .ds-list-item-link {
   padding-inline-start: 41px; }
   .ds-list-numbers .ds-list-item:not(.placeholder) > .ds-list-item-link::before {
     background-color: #50BCB6;
     border-radius: 32px;
@@ -2398,16 +2422,21 @@ main {
     margin-top: 4px; }
     [lwt-newtab-brighttext] .ds-section-title .subtitle {
       color: #D7D7DB; }
 
 .ds-top-sites .top-sites {
   margin: 0 -25px; }
   .ds-top-sites .top-sites .top-site-outer {
     padding: 0 12px; }
+    .ds-top-sites .top-sites .top-site-outer .top-site-inner > a:-moz-any(.active, :focus) .tile {
+      box-shadow: 0 0 0 1px #0A84FF inset, 0 0 0 1px #0A84FF, 0 0 0 5px rgba(10, 132, 255, 0.3);
+      transition: box-shadow 150ms;
+      border-radius: 4px;
+      outline: none; }
   .ds-top-sites .top-sites .top-sites-list {
     margin: 0 -12px; }
 
 .ds-top-sites .hide-for-narrow {
   display: none; }
 
 .ds-column-9 .ds-top-sites .hide-for-narrow,
 .ds-column-10 .ds-top-sites .hide-for-narrow,
@@ -2567,16 +2596,21 @@ main {
     .ds-card .img img {
       border-radius: 4px;
       box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.15); }
   .ds-card .ds-card-link {
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     height: 100%; }
+    .ds-card .ds-card-link:focus {
+      box-shadow: 0 0 0 1px #0A84FF inset, 0 0 0 1px #0A84FF, 0 0 0 5px rgba(10, 132, 255, 0.3);
+      transition: box-shadow 150ms;
+      border-radius: 4px;
+      outline: none; }
   .ds-card .meta {
     display: flex;
     flex-direction: column;
     flex-grow: 1;
     padding: 16px; }
     .ds-card .meta .info-wrap {
       flex-grow: 1; }
     .ds-card .meta .title {
@@ -2794,18 +2828,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; }
@@ -3259,39 +3292,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;
@@ -3332,16 +3342,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 {
@@ -3626,8 +3682,229 @@ 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; }
+  @media (max-height: 700px) {
+    .trailhead {
+      position: absolute;
+      top: 20px; } }
+  .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;
+    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.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 4px;
+      background-repeat: no-repeat;
+      background-size: 62px;
+      -moz-context-properties: fill;
+      fill: #0A84FF;
+      list-style: none;
+      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-bottom: 4px; }
+    .trailhead .trailheadBenefits p {
+      color: #FFF;
+      font-size: 15px;
+      line-height: 22px;
+      margin: 4px 0 15px;
+      margin-inline-end: 60px; }
+  .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 {
+      border: 0;
+      width: 100%; }
+    .trailhead .trailheadForm input {
+      background-color: #FFF;
+      color: #38383D;
+      font-size: 15px; }
+    .trailhead .trailheadForm button {
+      background-color: #0060DF;
+      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 .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; }
+
+.trailheadCards {
+  background: var(--trailhead-cards-background-color);
+  text-align: center; }
+  .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; } }
+
+.trailheadCardGrid {
+  display: grid;
+  grid-gap: 32px;
+  margin: 0; }
+  @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 .onboardingButtonContainer {
+    height: 60px;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    text-align: center; }
+
+.inline-onboarding .outer-wrapper {
+  position: relative; }
+  .inline-onboarding .outer-wrapper .prefs-button button {
+    position: absolute; }
+
+@media (max-height: 700px) {
+  .activity-stream.welcome.inline-onboarding {
+    overflow: auto; } }
--- a/browser/components/newtab/css/activity-stream-mac.css
+++ b/browser/components/newtab/css/activity-stream-mac.css
@@ -65,17 +65,21 @@ 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); }
   body[lwt-newtab-brighttext] {
     --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 +113,21 @@ 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.4); }
 
 .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);
@@ -1137,41 +1145,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 {
@@ -1874,16 +1882,21 @@ main {
   display: grid;
   grid-gap: 24px;
   margin: 16px 0; }
   .ds-card-grid .ds-card {
     background: #FFF;
     border-radius: 4px; }
     [lwt-newtab-brighttext] .ds-card-grid .ds-card {
       background: none; }
+  .ds-card-grid .ds-card-link:focus {
+    box-shadow: 0 0 0 1px #0A84FF inset, 0 0 0 1px #0A84FF, 0 0 0 5px rgba(10, 132, 255, 0.3);
+    transition: box-shadow 150ms;
+    border-radius: 4px;
+    outline: none; }
   .ds-card-grid.ds-card-grid-border .ds-card:not(.placeholder) {
     box-shadow: 0 1px 4px 0 rgba(12, 12, 13, 0.1); }
     [lwt-newtab-brighttext] .ds-card-grid.ds-card-grid-border .ds-card:not(.placeholder) {
       box-shadow: 0 1px 4px rgba(12, 12, 13, 0.1);
       background: #38383D; }
     .ds-card-grid.ds-card-grid-border .ds-card:not(.placeholder):hover {
       box-shadow: 0 0 0 5px #D7D7DB;
       transition: box-shadow 150ms;
@@ -1967,16 +1980,21 @@ main {
     display: block;
     margin: 12px 0 16px;
     padding-top: 16px;
     height: 100%; }
     [lwt-newtab-brighttext] .ds-hero .wrapper {
       border-top: 1px solid #4A4A4F; }
     [lwt-newtab-brighttext] .ds-hero .wrapper {
       color: #D7D7DB; }
+    .ds-hero .wrapper:focus {
+      box-shadow: 0 0 0 1px #0A84FF inset, 0 0 0 1px #0A84FF, 0 0 0 5px rgba(10, 132, 255, 0.3);
+      transition: box-shadow 150ms;
+      border-radius: 4px;
+      outline: none; }
     .ds-hero-no-border .ds-hero-item .wrapper {
       border-top: 0;
       border-bottom: 0;
       padding: 0 0 8px; }
     .ds-hero .wrapper:hover .meta header {
       color: #0060DF; }
       [lwt-newtab-brighttext] .ds-hero .wrapper:hover .meta header {
         color: #45A1FF; }
@@ -2202,16 +2220,22 @@ main {
     display: none; }
   .ds-list:not(.ds-list-images) .ds-list-image {
     display: none; }
   .ds-list a {
     color: #0C0C0D; }
     [lwt-newtab-brighttext] .ds-list a {
       color: #F9F9FA; }
 
+.ds-list-item-link:focus {
+  box-shadow: 0 0 0 1px #0A84FF inset, 0 0 0 1px #0A84FF, 0 0 0 5px rgba(10, 132, 255, 0.3);
+  transition: box-shadow 150ms;
+  border-radius: 4px;
+  outline: none; }
+
 .ds-list-numbers .ds-list-item {
   counter-increment: list; }
 
 .ds-list-numbers .ds-list-item:not(.placeholder) > .ds-list-item-link {
   padding-inline-start: 41px; }
   .ds-list-numbers .ds-list-item:not(.placeholder) > .ds-list-item-link::before {
     background-color: #50BCB6;
     border-radius: 32px;
@@ -2401,16 +2425,21 @@ main {
     margin-top: 4px; }
     [lwt-newtab-brighttext] .ds-section-title .subtitle {
       color: #D7D7DB; }
 
 .ds-top-sites .top-sites {
   margin: 0 -25px; }
   .ds-top-sites .top-sites .top-site-outer {
     padding: 0 12px; }
+    .ds-top-sites .top-sites .top-site-outer .top-site-inner > a:-moz-any(.active, :focus) .tile {
+      box-shadow: 0 0 0 1px #0A84FF inset, 0 0 0 1px #0A84FF, 0 0 0 5px rgba(10, 132, 255, 0.3);
+      transition: box-shadow 150ms;
+      border-radius: 4px;
+      outline: none; }
   .ds-top-sites .top-sites .top-sites-list {
     margin: 0 -12px; }
 
 .ds-top-sites .hide-for-narrow {
   display: none; }
 
 .ds-column-9 .ds-top-sites .hide-for-narrow,
 .ds-column-10 .ds-top-sites .hide-for-narrow,
@@ -2570,16 +2599,21 @@ main {
     .ds-card .img img {
       border-radius: 4px;
       box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.15); }
   .ds-card .ds-card-link {
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     height: 100%; }
+    .ds-card .ds-card-link:focus {
+      box-shadow: 0 0 0 1px #0A84FF inset, 0 0 0 1px #0A84FF, 0 0 0 5px rgba(10, 132, 255, 0.3);
+      transition: box-shadow 150ms;
+      border-radius: 4px;
+      outline: none; }
   .ds-card .meta {
     display: flex;
     flex-direction: column;
     flex-grow: 1;
     padding: 16px; }
     .ds-card .meta .info-wrap {
       flex-grow: 1; }
     .ds-card .meta .title {
@@ -2797,18 +2831,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; }
@@ -3262,39 +3295,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;
@@ -3335,16 +3345,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 {
@@ -3629,8 +3685,229 @@ 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; }
+  @media (max-height: 700px) {
+    .trailhead {
+      position: absolute;
+      top: 20px; } }
+  .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;
+    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.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 4px;
+      background-repeat: no-repeat;
+      background-size: 62px;
+      -moz-context-properties: fill;
+      fill: #0A84FF;
+      list-style: none;
+      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-bottom: 4px; }
+    .trailhead .trailheadBenefits p {
+      color: #FFF;
+      font-size: 15px;
+      line-height: 22px;
+      margin: 4px 0 15px;
+      margin-inline-end: 60px; }
+  .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 {
+      border: 0;
+      width: 100%; }
+    .trailhead .trailheadForm input {
+      background-color: #FFF;
+      color: #38383D;
+      font-size: 15px; }
+    .trailhead .trailheadForm button {
+      background-color: #0060DF;
+      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 .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; }
+
+.trailheadCards {
+  background: var(--trailhead-cards-background-color);
+  text-align: center; }
+  .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; } }
+
+.trailheadCardGrid {
+  display: grid;
+  grid-gap: 32px;
+  margin: 0; }
+  @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 .onboardingButtonContainer {
+    height: 60px;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    text-align: center; }
+
+.inline-onboarding .outer-wrapper {
+  position: relative; }
+  .inline-onboarding .outer-wrapper .prefs-button button {
+    position: absolute; }
+
+@media (max-height: 700px) {
+  .activity-stream.welcome.inline-onboarding {
+    overflow: auto; } }
--- a/browser/components/newtab/css/activity-stream-windows.css
+++ b/browser/components/newtab/css/activity-stream-windows.css
@@ -62,17 +62,21 @@ 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); }
   body[lwt-newtab-brighttext] {
     --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 +110,21 @@ 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.4); }
 
 .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);
@@ -1134,41 +1142,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 {
@@ -1871,16 +1879,21 @@ main {
   display: grid;
   grid-gap: 24px;
   margin: 16px 0; }
   .ds-card-grid .ds-card {
     background: #FFF;
     border-radius: 4px; }
     [lwt-newtab-brighttext] .ds-card-grid .ds-card {
       background: none; }
+  .ds-card-grid .ds-card-link:focus {
+    box-shadow: 0 0 0 1px #0A84FF inset, 0 0 0 1px #0A84FF, 0 0 0 5px rgba(10, 132, 255, 0.3);
+    transition: box-shadow 150ms;
+    border-radius: 4px;
+    outline: none; }
   .ds-card-grid.ds-card-grid-border .ds-card:not(.placeholder) {
     box-shadow: 0 1px 4px 0 rgba(12, 12, 13, 0.1); }
     [lwt-newtab-brighttext] .ds-card-grid.ds-card-grid-border .ds-card:not(.placeholder) {
       box-shadow: 0 1px 4px rgba(12, 12, 13, 0.1);
       background: #38383D; }
     .ds-card-grid.ds-card-grid-border .ds-card:not(.placeholder):hover {
       box-shadow: 0 0 0 5px #D7D7DB;
       transition: box-shadow 150ms;
@@ -1964,16 +1977,21 @@ main {
     display: block;
     margin: 12px 0 16px;
     padding-top: 16px;
     height: 100%; }
     [lwt-newtab-brighttext] .ds-hero .wrapper {
       border-top: 1px solid #4A4A4F; }
     [lwt-newtab-brighttext] .ds-hero .wrapper {
       color: #D7D7DB; }
+    .ds-hero .wrapper:focus {
+      box-shadow: 0 0 0 1px #0A84FF inset, 0 0 0 1px #0A84FF, 0 0 0 5px rgba(10, 132, 255, 0.3);
+      transition: box-shadow 150ms;
+      border-radius: 4px;
+      outline: none; }
     .ds-hero-no-border .ds-hero-item .wrapper {
       border-top: 0;
       border-bottom: 0;
       padding: 0 0 8px; }
     .ds-hero .wrapper:hover .meta header {
       color: #0060DF; }
       [lwt-newtab-brighttext] .ds-hero .wrapper:hover .meta header {
         color: #45A1FF; }
@@ -2199,16 +2217,22 @@ main {
     display: none; }
   .ds-list:not(.ds-list-images) .ds-list-image {
     display: none; }
   .ds-list a {
     color: #0C0C0D; }
     [lwt-newtab-brighttext] .ds-list a {
       color: #F9F9FA; }
 
+.ds-list-item-link:focus {
+  box-shadow: 0 0 0 1px #0A84FF inset, 0 0 0 1px #0A84FF, 0 0 0 5px rgba(10, 132, 255, 0.3);
+  transition: box-shadow 150ms;
+  border-radius: 4px;
+  outline: none; }
+
 .ds-list-numbers .ds-list-item {
   counter-increment: list; }
 
 .ds-list-numbers .ds-list-item:not(.placeholder) > .ds-list-item-link {
   padding-inline-start: 41px; }
   .ds-list-numbers .ds-list-item:not(.placeholder) > .ds-list-item-link::before {
     background-color: #50BCB6;
     border-radius: 32px;
@@ -2398,16 +2422,21 @@ main {
     margin-top: 4px; }
     [lwt-newtab-brighttext] .ds-section-title .subtitle {
       color: #D7D7DB; }
 
 .ds-top-sites .top-sites {
   margin: 0 -25px; }
   .ds-top-sites .top-sites .top-site-outer {
     padding: 0 12px; }
+    .ds-top-sites .top-sites .top-site-outer .top-site-inner > a:-moz-any(.active, :focus) .tile {
+      box-shadow: 0 0 0 1px #0A84FF inset, 0 0 0 1px #0A84FF, 0 0 0 5px rgba(10, 132, 255, 0.3);
+      transition: box-shadow 150ms;
+      border-radius: 4px;
+      outline: none; }
   .ds-top-sites .top-sites .top-sites-list {
     margin: 0 -12px; }
 
 .ds-top-sites .hide-for-narrow {
   display: none; }
 
 .ds-column-9 .ds-top-sites .hide-for-narrow,
 .ds-column-10 .ds-top-sites .hide-for-narrow,
@@ -2567,16 +2596,21 @@ main {
     .ds-card .img img {
       border-radius: 4px;
       box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.15); }
   .ds-card .ds-card-link {
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     height: 100%; }
+    .ds-card .ds-card-link:focus {
+      box-shadow: 0 0 0 1px #0A84FF inset, 0 0 0 1px #0A84FF, 0 0 0 5px rgba(10, 132, 255, 0.3);
+      transition: box-shadow 150ms;
+      border-radius: 4px;
+      outline: none; }
   .ds-card .meta {
     display: flex;
     flex-direction: column;
     flex-grow: 1;
     padding: 16px; }
     .ds-card .meta .info-wrap {
       flex-grow: 1; }
     .ds-card .meta .title {
@@ -2794,18 +2828,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; }
@@ -3259,39 +3292,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;
@@ -3332,16 +3342,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 {
@@ -3626,8 +3682,229 @@ 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; }
+  @media (max-height: 700px) {
+    .trailhead {
+      position: absolute;
+      top: 20px; } }
+  .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;
+    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.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 4px;
+      background-repeat: no-repeat;
+      background-size: 62px;
+      -moz-context-properties: fill;
+      fill: #0A84FF;
+      list-style: none;
+      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-bottom: 4px; }
+    .trailhead .trailheadBenefits p {
+      color: #FFF;
+      font-size: 15px;
+      line-height: 22px;
+      margin: 4px 0 15px;
+      margin-inline-end: 60px; }
+  .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 {
+      border: 0;
+      width: 100%; }
+    .trailhead .trailheadForm input {
+      background-color: #FFF;
+      color: #38383D;
+      font-size: 15px; }
+    .trailhead .trailheadForm button {
+      background-color: #0060DF;
+      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 .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; }
+
+.trailheadCards {
+  background: var(--trailhead-cards-background-color);
+  text-align: center; }
+  .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; } }
+
+.trailheadCardGrid {
+  display: grid;
+  grid-gap: 32px;
+  margin: 0; }
+  @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 .onboardingButtonContainer {
+    height: 60px;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    text-align: center; }
+
+.inline-onboarding .outer-wrapper {
+  position: relative; }
+  .inline-onboarding .outer-wrapper .prefs-button button {
+    position: absolute; }
+
+@media (max-height: 700px) {
+  .activity-stream.welcome.inline-onboarding {
+    overflow: auto; } }
--- a/browser/components/newtab/data/content/activity-stream.bundle.js
+++ b/browser/components/newtab/data/content/activity-stream.bundle.js
@@ -87,25 +87,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_components_Base_Base__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(3);
-/* harmony import */ var content_src_lib_detect_user_session_start__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(50);
+/* harmony import */ var content_src_lib_detect_user_session_start__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(51);
 /* harmony import */ var content_src_lib_init_store__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(7);
 /* 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__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(11);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_5__);
 /* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(16);
 /* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(react_dom__WEBPACK_IMPORTED_MODULE_6__);
-/* harmony import */ var common_Reducers_jsm__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(55);
+/* harmony import */ var common_Reducers_jsm__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(56);
 
 
 
 
 
 
 
 
@@ -192,17 +192,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_LOADED_CONTENT", "DISCOVERY_STREAM_OPT_OUT", "DISCOVERY_STREAM_SPOCS_CAPS", "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_LINK_DELETED_OR_ARCHIVED", "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_LINK_BLOCKED", "DISCOVERY_STREAM_LOADED_CONTENT", "DISCOVERY_STREAM_OPT_OUT", "DISCOVERY_STREAM_SPOCS_CAPS", "DISCOVERY_STREAM_SPOCS_ENDPOINT", "DISCOVERY_STREAM_SPOCS_FILL", "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_LINK_DELETED_OR_ARCHIVED", "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"]) {
   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"]) {
@@ -354,16 +354,32 @@ function UserEvent(data) {
 
 function ASRouterUserEvent(data) {
   return AlsoToMain({
     type: actionTypes.AS_ROUTER_TELEMETRY_USER_EVENT,
     data
   });
 }
 /**
+ * DiscoveryStreamSpocsFill - A telemetry ping indicating a SPOCS Fill event.
+ *
+ * @param  {object} data Fields to include in the ping (spocs_fills, etc.)
+ * @param  {int} importContext (For testing) Override the import context for testing.
+ * @return {object} An AlsoToMain action
+ */
+
+
+function DiscoveryStreamSpocsFill(data, importContext = globalImportContext) {
+  const action = {
+    type: actionTypes.DISCOVERY_STREAM_SPOCS_FILL,
+    data
+  };
+  return importContext === UI_CODE ? AlsoToMain(action) : action;
+}
+/**
  * UndesiredEvent - A telemetry ping indicating an undesired state.
  *
  * @param  {object} data Fields to include in the ping (value, etc.)
  * @param  {int} importContext (For testing) Override the import context for testing.
  * @return {object} An action. For UI code, a AlsoToMain action.
  */
 
 
@@ -472,17 +488,18 @@ var actionCreators = {
   AlsoToOneContent,
   OnlyToOneContent,
   AlsoToMain,
   OnlyToMain,
   AlsoToPreloaded,
   SetPref,
   WebExtEvent,
   DiscoveryStreamImpressionStats,
-  DiscoveryStreamLoadedContent
+  DiscoveryStreamLoadedContent,
+  DiscoveryStreamSpocsFill
 }; // These are helpers to test for certain kinds of actions
 
 var actionUtils = {
   isSendToMain(action) {
     if (!action.meta) {
       return false;
     }
 
@@ -545,26 +562,26 @@ var actionUtils = {
 /* 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__(4);
 /* 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__(5);
 /* harmony import */ var _asrouter_asrouter_content__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(6);
-/* 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_DiscoveryStreamBase_DiscoveryStreamBase__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(51);
-/* harmony import */ var content_src_components_ErrorBoundary_ErrorBoundary__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(34);
-/* harmony import */ var common_PrerenderData_jsm__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(44);
+/* harmony import */ var content_src_components_DiscoveryStreamBase_DiscoveryStreamBase__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(52);
+/* harmony import */ var content_src_components_ErrorBoundary_ErrorBoundary__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(35);
+/* harmony import */ var common_PrerenderData_jsm__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(45);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(11);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_9___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_9__);
-/* harmony import */ var content_src_components_Search_Search__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(45);
-/* harmony import */ var content_src_components_Sections_Sections__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(46);
+/* harmony import */ var content_src_components_Search_Search__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(46);
+/* harmony import */ var content_src_components_Sections_Sections__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(47);
 function _extends() { _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; }; return _extends.apply(this, arguments); }
 
 
 
 
 
 
 
@@ -643,17 +660,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 {
@@ -739,16 +756,17 @@ class BaseContent extends react__WEBPACK
     return react__WEBPACK_IMPORTED_MODULE_9___default.a.createElement("div", null, react__WEBPACK_IMPORTED_MODULE_9___default.a.createElement("div", {
       className: outerClassName
     }, react__WEBPACK_IMPORTED_MODULE_9___default.a.createElement("main", null, prefs.showSearch && react__WEBPACK_IMPORTED_MODULE_9___default.a.createElement("div", {
       className: "non-collapsible-section"
     }, react__WEBPACK_IMPORTED_MODULE_9___default.a.createElement(content_src_components_ErrorBoundary_ErrorBoundary__WEBPACK_IMPORTED_MODULE_7__["ErrorBoundary"], null, react__WEBPACK_IMPORTED_MODULE_9___default.a.createElement(content_src_components_Search_Search__WEBPACK_IMPORTED_MODULE_10__["Search"], _extends({
       showLogo: noSectionsEnabled,
       handoffEnabled: searchHandoffEnabled
     }, props.Search)))), react__WEBPACK_IMPORTED_MODULE_9___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_9___default.a.createElement("div", {
       className: `body-wrapper${initialized ? " on" : ""}`
     }, isDiscoveryStream ? react__WEBPACK_IMPORTED_MODULE_9___default.a.createElement(content_src_components_ErrorBoundary_ErrorBoundary__WEBPACK_IMPORTED_MODULE_7__["ErrorBoundary"], {
       className: "borderless-error"
     }, react__WEBPACK_IMPORTED_MODULE_9___default.a.createElement(content_src_components_DiscoveryStreamBase_DiscoveryStreamBase__WEBPACK_IMPORTED_MODULE_6__["DiscoveryStreamBase"], null)) : react__WEBPACK_IMPORTED_MODULE_9___default.a.createElement(content_src_components_Sections_Sections__WEBPACK_IMPORTED_MODULE_11__["Sections"], null), react__WEBPACK_IMPORTED_MODULE_9___default.a.createElement(PrefsButton, {
       onClick: this.openPreferences
     })), react__WEBPACK_IMPORTED_MODULE_9___default.a.createElement(content_src_components_ConfirmDialog_ConfirmDialog__WEBPACK_IMPORTED_MODULE_4__["ConfirmDialog"], null))));
@@ -783,17 +801,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__(6);
 /* 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__(11);
 /* 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);
 function _extends() { _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; }; return _extends.apply(this, arguments); }
 
 
 
 
 
 
 
@@ -1740,43 +1758,46 @@ 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__(4);
 /* 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__(7);
 /* harmony import */ var _rich_text_strings__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(9);
 /* harmony import */ var _components_ImpressionsWrapper_ImpressionsWrapper__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(10);
-/* harmony import */ var fluent_react__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(54);
+/* harmony import */ var fluent_react__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(55);
 /* harmony import */ var content_src_lib_constants__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(13);
 /* harmony import */ var _templates_OnboardingMessage_OnboardingMessage__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(14);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(11);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_8___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_8__);
 /* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(16);
 /* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_9___default = /*#__PURE__*/__webpack_require__.n(react_dom__WEBPACK_IMPORTED_MODULE_9__);
 /* harmony import */ var _templates_ReturnToAMO_ReturnToAMO__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(17);
-/* harmony import */ var _templates_template_manifest__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(52);
+/* harmony import */ var _templates_template_manifest__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(53);
 /* harmony import */ var _templates_StartupOverlay_StartupOverlay__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(25);
+/* harmony import */ var _templates_Trailhead_Trailhead__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(27);
 function _extends() { _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; }; return _extends.apply(this, arguments); }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
+
 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);
     }
   },
 
@@ -1896,17 +1917,18 @@ class ASRouterUISurface extends react__W
     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;
@@ -2085,17 +2107,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_11__["SnippetsTemplates"][this.state.message.template];
     const {
       content
     } = this.state.message;
     return react__WEBPACK_IMPORTED_MODULE_8___default.a.createElement(_components_ImpressionsWrapper_ImpressionsWrapper__WEBPACK_IMPORTED_MODULE_4__["ImpressionsWrapper"], {
@@ -2156,16 +2178,35 @@ class ASRouterUISurface extends react__W
         onBlock: this.onDismissById(message.id),
         onAction: ASRouterUtils.executeAction
       })));
     }
 
     return null;
   }
 
+  renderTrailhead() {
+    const {
+      message
+    } = this.state;
+
+    if (message.template === "trailhead") {
+      return react__WEBPACK_IMPORTED_MODULE_8___default.a.createElement(_templates_Trailhead_Trailhead__WEBPACK_IMPORTED_MODULE_13__["Trailhead"], {
+        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_8___default.a.createElement("div", {
       className: "snippets-preview-banner"
     }, react__WEBPACK_IMPORTED_MODULE_8___default.a.createElement("span", {
@@ -2179,22 +2220,23 @@ class ASRouterUISurface extends react__W
       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_8___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_9___default.a.createPortal(react__WEBPACK_IMPORTED_MODULE_8___default.a.createElement(react__WEBPACK_IMPORTED_MODULE_8___default.a.Fragment, null, this.renderPreviewBanner(), this.renderFirstRunOverlay(), this.renderOnboarding(), this.renderSnippets()), this.portalContainer);
+    react_dom__WEBPACK_IMPORTED_MODULE_9___default.a.createPortal(react__WEBPACK_IMPORTED_MODULE_8___default.a.createElement(react__WEBPACK_IMPORTED_MODULE_8___default.a.Fragment, null, this.renderPreviewBanner(), this.renderTrailhead(), this.renderFirstRunOverlay(), this.renderOnboarding(), this.renderSnippets()), shouldRenderInHeader ? this.headerPortal : this.footerPortal);
   }
 
 }
 ASRouterUISurface.defaultProps = {
   document: global.document
 };
 /* WEBPACK VAR INJECTION */}.call(this, __webpack_require__(1)))
 
@@ -2367,17 +2409,17 @@ module.exports = Redux;
 /***/ }),
 /* 9 */
 /***/ (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__(53);
+/* harmony import */ var fluent__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(54);
 
 /**
  * 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 = {
@@ -2541,25 +2583,26 @@ const NEWTAB_DARK_THEME = {
 /* WEBPACK VAR INJECTION */}.call(this, __webpack_require__(1)))
 
 /***/ }),
 /* 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__(11);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
 function _extends() { _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; }; return _extends.apply(this, arguments); }
 
 
 
-
+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 {
@@ -2573,32 +2616,48 @@ class OnboardingCard extends react__WEBP
     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("span", null, react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement("button", {
-      tabIndex: "1",
+    }, react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement("span", null, 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", {
+      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
-    }, " ", content.primary_button.label, " "))));
-  }
-
-}
-
+    }))));
+  }
+
+}
 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;
@@ -2618,57 +2677,78 @@ 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__(11);
 /* 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();
+    }
+  }
+
   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;
+      props
+    } = this;
+    return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react__WEBPACK_IMPORTED_MODULE_0___default.a.Fragment, null, 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 ${props.innerClassName || ""}`
+    }, 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("div", null, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
-      className: `modalOverlayOuter ${active ? "active" : ""}`
-    }), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
-      className: `modalOverlayInner ${active ? "active" : ""}`
+    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("button", {
-      tabIndex: "2",
-      onClick: this.props.onDoneButton,
-      className: "button primary modalButton"
-    }, " ", button_label, " "))));
-  }
-
-}
+      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;
 
 /***/ }),
@@ -2748,17 +2828,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__(54);
+/* harmony import */ var fluent_react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(55);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(11);
 /* 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__(9);
 /* harmony import */ var _template_utils__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(19);
 function _extends() { _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; }; return _extends.apply(this, arguments); }
 
 
 
@@ -3167,16 +3247,287 @@ 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 import */ var common_Actions_jsm__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2);
+/* harmony import */ var _components_ModalOverlay_ModalOverlay__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(15);
+/* harmony import */ var _OnboardingMessage_OnboardingMessage__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(14);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(11);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_3__);
+function _extends() { _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; }; return _extends.apply(this, arguments); }
+
+
+
+
+
+const FLUENT_FILES = ["branding/brand.ftl", "browser/branding/sync-brand.ftl", // These are finalized strings exposed to localizers
+"browser/newtab/onboarding.ftl", // These are WIP/in-development strings that only get used if the string
+// doesn't already exist in onboarding.ftl above
+"trailhead.ftl"];
+class Trailhead extends react__WEBPACK_IMPORTED_MODULE_3___default.a.PureComponent {
+  constructor(props) {
+    super(props);
+    this.closeModal = this.closeModal.bind(this);
+    this.onInputChange = this.onInputChange.bind(this);
+    this.onSubmit = this.onSubmit.bind(this);
+    this.onInputInvalid = this.onInputInvalid.bind(this);
+    this.state = {
+      emailInput: "",
+      isModalOpen: true,
+      flowId: "",
+      flowBeginTime: 0
+    };
+    this.didFetch = false;
+  }
+
+  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 fxaParams = "entrypoint=activity-stream-firstrun&utm_source=activity-stream&utm_campaign=firstrun&utm_term=trailhead&form_type=email";
+        const response = await fetch(`${this.props.fxaEndpoint}/metrics-flow?${fxaParams}`, {
+          credentials: "omit"
+        });
+
+        if (response.status === 200) {
+          const {
+            flowId,
+            flowBeginTime
+          } = await 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
+    global.document.body.classList.remove("hide-main"); // Add inline-onboarding class to disable fixed search header and fixed positioned settings icon
+
+    global.document.body.classList.add("inline-onboarding");
+  }
+
+  componentDidUnmount() {
+    global.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");
+  }
+
+  onSubmit() {
+    this.props.dispatch(common_Actions_jsm__WEBPACK_IMPORTED_MODULE_0__["actionCreators"].UserEvent({
+      event: "SUBMIT_EMAIL",
+      ...this._getFormInfo()
+    }));
+    global.addEventListener("visibilitychange", this.closeModal);
+  }
+
+  closeModal() {
+    global.removeEventListener("visibilitychange", this.closeModal);
+    global.document.body.classList.remove("welcome");
+    this.setState({
+      isModalOpen: false
+    });
+    this.props.dispatch(common_Actions_jsm__WEBPACK_IMPORTED_MODULE_0__["actionCreators"].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();
+  }
+
+  render() {
+    const {
+      props
+    } = this;
+    const {
+      bundle: cards,
+      content
+    } = props.message;
+    return react__WEBPACK_IMPORTED_MODULE_3___default.a.createElement(react__WEBPACK_IMPORTED_MODULE_3___default.a.Fragment, null, this.state.isModalOpen && content ? react__WEBPACK_IMPORTED_MODULE_3___default.a.createElement(_components_ModalOverlay_ModalOverlay__WEBPACK_IMPORTED_MODULE_1__["ModalOverlayWrapper"], {
+      innerClassName: `trailhead ${content.className}`,
+      onClose: this.closeModal
+    }, react__WEBPACK_IMPORTED_MODULE_3___default.a.createElement("div", {
+      className: "trailheadInner"
+    }, react__WEBPACK_IMPORTED_MODULE_3___default.a.createElement("div", {
+      className: "trailheadContent"
+    }, react__WEBPACK_IMPORTED_MODULE_3___default.a.createElement("h1", {
+      "data-l10n-id": content.title.string_id
+    }, content.title.value), content.subtitle && react__WEBPACK_IMPORTED_MODULE_3___default.a.createElement("p", {
+      "data-l10n-id": content.subtitle.string_id
+    }, content.subtitle.value), react__WEBPACK_IMPORTED_MODULE_3___default.a.createElement("ul", {
+      className: "trailheadBenefits"
+    }, content.benefits.map(item => react__WEBPACK_IMPORTED_MODULE_3___default.a.createElement("li", {
+      key: item.id,
+      className: item.id
+    }, react__WEBPACK_IMPORTED_MODULE_3___default.a.createElement("h3", {
+      "data-l10n-id": item.title.string_id
+    }, item.title.value), react__WEBPACK_IMPORTED_MODULE_3___default.a.createElement("p", {
+      "data-l10n-id": item.text.string_id
+    }, item.text.value)))), react__WEBPACK_IMPORTED_MODULE_3___default.a.createElement("a", {
+      className: "trailheadLearn",
+      "data-l10n-id": content.learn.text.string_id,
+      href: content.learn.url
+    }, content.learn.text.value)), react__WEBPACK_IMPORTED_MODULE_3___default.a.createElement("div", {
+      className: "trailheadForm"
+    }, react__WEBPACK_IMPORTED_MODULE_3___default.a.createElement("h3", {
+      "data-l10n-id": content.form.title.string_id
+    }, content.form.title.value), react__WEBPACK_IMPORTED_MODULE_3___default.a.createElement("p", {
+      "data-l10n-id": content.form.text.string_id
+    }, content.form.text.value), react__WEBPACK_IMPORTED_MODULE_3___default.a.createElement("form", {
+      method: "get",
+      action: this.props.fxaEndpoint,
+      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_term",
+      type: "hidden",
+      value: "trailhead"
+    }), 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("p", {
+      "data-l10n-id": "onboarding-join-form-email-error",
+      className: "error"
+    }), react__WEBPACK_IMPORTED_MODULE_3___default.a.createElement("input", {
+      "data-l10n-id": content.form.email.string_id,
+      placeholder: content.form.email.placeholder,
+      name: "email",
+      type: "email",
+      required: "true",
+      onInvalid: this.onInputInvalid,
+      onChange: this.onInputChange
+    }), react__WEBPACK_IMPORTED_MODULE_3___default.a.createElement("p", {
+      className: "trailheadTerms",
+      "data-l10n-id": "onboarding-join-form-legal"
+    }, react__WEBPACK_IMPORTED_MODULE_3___default.a.createElement("a", {
+      "data-l10n-name": "terms",
+      href: "https://accounts.firefox.com/legal/terms"
+    }), react__WEBPACK_IMPORTED_MODULE_3___default.a.createElement("a", {
+      "data-l10n-name": "privacy",
+      href: "https://accounts.firefox.com/legal/privacy"
+    })), react__WEBPACK_IMPORTED_MODULE_3___default.a.createElement("button", {
+      "data-l10n-id": content.form.button.string_id,
+      type: "submit"
+    }, content.form.button.value)))), react__WEBPACK_IMPORTED_MODULE_3___default.a.createElement("button", {
+      className: "trailheadStart",
+      "data-l10n-id": content.skipButton.string_id,
+      onClick: this.closeModal
+    }, content.skipButton.value)) : null, cards && cards.length ? react__WEBPACK_IMPORTED_MODULE_3___default.a.createElement("div", {
+      className: "trailheadCards"
+    }, react__WEBPACK_IMPORTED_MODULE_3___default.a.createElement("div", {
+      className: "trailheadCardsInner"
+    }, react__WEBPACK_IMPORTED_MODULE_3___default.a.createElement("h1", {
+      "data-l10n-id": "onboarding-welcome-header"
+    }), react__WEBPACK_IMPORTED_MODULE_3___default.a.createElement("div", {
+      className: "trailheadCardGrid"
+    }, cards.map(card => react__WEBPACK_IMPORTED_MODULE_3___default.a.createElement(_OnboardingMessage_OnboardingMessage__WEBPACK_IMPORTED_MODULE_2__["OnboardingCard"], _extends({
+      key: card.id,
+      className: "trailheadCard",
+      sendUserActionTelemetry: props.sendUserActionTelemetry,
+      onAction: props.onAction,
+      UISurface: "TRAILHEAD"
+    }, card)))))) : null);
+  }
+
+}
+/* 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__(11);
 /* 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);
     this.onHashChange = this.onHashChange.bind(this);
@@ -3208,17 +3559,17 @@ class SimpleHashRouter extends react__WE
       }
     });
   }
 
 }
 /* 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);
@@ -3315,30 +3666,30 @@ class _ConfirmDialog extends react__WEBP
       id: this.props.data.confirm_button_string_id
     })))));
   }
 
 }
 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__, "_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__(30);
+/* harmony import */ var content_src_components_ContextMenu_ContextMenu__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(31);
 /* harmony import */ var react_intl__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(4);
 /* 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__(31);
+/* harmony import */ var content_src_lib_link_menu_options__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(32);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(11);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_5__);
 
 
 
 
 
 
@@ -3414,17 +3765,17 @@ class _LinkMenu extends react__WEBPACK_I
 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));
 
 /***/ }),
-/* 30 */
+/* 31 */
 /***/ (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__(11);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
@@ -3534,17 +3885,17 @@ class ContextMenuItem extends react__WEB
       className: `icon icon-spacer icon-${option.icon}`
     }), option.label));
   }
 
 }
 /* WEBPACK VAR INJECTION */}.call(this, __webpack_require__(1)))
 
 /***/ }),
-/* 31 */
+/* 32 */
 /***/ (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);
 
@@ -3827,17 +4178,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()
 };
 
 /***/ }),
-/* 32 */
+/* 33 */
 /***/ (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__(11);
@@ -4048,31 +4399,31 @@ ImpressionStats.defaultProps = {
   IntersectionObserver: global.IntersectionObserver,
   document: global.document,
   rows: [],
   source: ""
 };
 /* WEBPACK VAR INJECTION */}.call(this, __webpack_require__(1)))
 
 /***/ }),
-/* 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__, "_CollapsibleSection", function() { return _CollapsibleSection; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "CollapsibleSection", function() { return CollapsibleSection; });
 /* harmony import */ var react_intl__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(4);
 /* 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_components_ErrorBoundary_ErrorBoundary__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(34);
+/* harmony import */ var content_src_components_ErrorBoundary_ErrorBoundary__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(35);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(11);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_3__);
-/* harmony import */ var content_src_components_SectionMenu_SectionMenu__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(35);
-/* harmony import */ var content_src_lib_section_menu_options__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(36);
+/* harmony import */ var content_src_components_SectionMenu_SectionMenu__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(36);
+/* harmony import */ var content_src_lib_section_menu_options__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(37);
 
 
 
 
 
 
 const VISIBLE = "visible";
 const VISIBILITY_CHANGE_EVENT = "visibilitychange";
@@ -4344,17 +4695,17 @@ class _CollapsibleSection extends react_
   Prefs: {
     values: {}
   }
 };
 const CollapsibleSection = Object(react_intl__WEBPACK_IMPORTED_MODULE_0__["injectIntl"])(_CollapsibleSection);
 /* WEBPACK VAR INJECTION */}.call(this, __webpack_require__(1)))
 
 /***/ }),
-/* 34 */
+/* 35 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ErrorBoundaryFallback", function() { return ErrorBoundaryFallback; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ErrorBoundary", function() { return ErrorBoundary; });
 /* harmony import */ var react_intl__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(4);
 /* harmony import */ var react_intl__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react_intl__WEBPACK_IMPORTED_MODULE_0__);
@@ -4433,30 +4784,30 @@ class ErrorBoundary extends react__WEBPA
   }
 
 }
 ErrorBoundary.defaultProps = {
   FallbackComponent: ErrorBoundaryFallback
 };
 
 /***/ }),
-/* 35 */
+/* 36 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "_SectionMenu", function() { return _SectionMenu; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "SectionMenu", function() { return SectionMenu; });
 /* harmony import */ var common_Actions_jsm__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2);
-/* harmony import */ var content_src_components_ContextMenu_ContextMenu__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(30);
+/* harmony import */ var content_src_components_ContextMenu_ContextMenu__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(31);
 /* harmony import */ var react_intl__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(4);
 /* harmony import */ var react_intl__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(react_intl__WEBPACK_IMPORTED_MODULE_2__);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(11);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_3__);
-/* harmony import */ var content_src_lib_section_menu_options__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(36);
+/* harmony import */ var content_src_lib_section_menu_options__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(37);
 
 
 
 
 
 const DEFAULT_SECTION_MENU_OPTIONS = ["MoveUp", "MoveDown", "Separator", "RemoveSection", "CheckCollapsed", "Separator", "ManageSection"];
 const WEBEXT_SECTION_MENU_OPTIONS = ["MoveUp", "MoveDown", "Separator", "CheckCollapsed", "Separator", "ManageWebExtension"];
 class _SectionMenu extends react__WEBPACK_IMPORTED_MODULE_3___default.a.PureComponent {
@@ -4521,17 +4872,17 @@ class _SectionMenu extends react__WEBPAC
       options: this.getOptions()
     });
   }
 
 }
 const SectionMenu = Object(react_intl__WEBPACK_IMPORTED_MODULE_2__["injectIntl"])(_SectionMenu);
 
 /***/ }),
-/* 36 */
+/* 37 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "SectionMenuOptions", function() { return SectionMenuOptions; });
 /* harmony import */ var common_Actions_jsm__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2);
 
 /**
@@ -4648,37 +4999,37 @@ const SectionMenuOptions = {
       }
     }),
     userEvent: "MENU_PRIVACY_NOTICE"
   }),
   CheckCollapsed: section => section.collapsed ? SectionMenuOptions.ExpandSection(section) : SectionMenuOptions.CollapseSection(section)
 };
 
 /***/ }),
-/* 37 */
+/* 38 */
 /***/ (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__(38);
-/* harmony import */ var content_src_components_CollapsibleSection_CollapsibleSection__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(33);
-/* harmony import */ var content_src_components_ComponentPerfTimer_ComponentPerfTimer__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(39);
+/* harmony import */ var _TopSitesConstants__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(39);
+/* harmony import */ var content_src_components_CollapsibleSection_CollapsibleSection__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(34);
+/* harmony import */ var content_src_components_ComponentPerfTimer_ComponentPerfTimer__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(40);
 /* 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__(4);
 /* 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__(11);
 /* 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__(41);
-/* harmony import */ var common_Reducers_jsm__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(55);
-/* harmony import */ var _TopSiteForm__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(57);
-/* harmony import */ var _TopSite__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(42);
+/* harmony import */ var _SearchShortcutsForm__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(42);
+/* harmony import */ var common_Reducers_jsm__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(56);
+/* harmony import */ var _TopSiteForm__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(58);
+/* harmony import */ var _TopSite__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(43);
 function _extends() { _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; }; return _extends.apply(this, arguments); }
 
 
 
 
 
 
 
@@ -4876,17 +5227,17 @@ class _TopSites extends react__WEBPACK_I
 const TopSites = Object(react_redux__WEBPACK_IMPORTED_MODULE_4__["connect"])(state => ({
   TopSites: state.TopSites,
   Prefs: state.Prefs,
   TopSitesRows: state.Prefs.values.topSitesRows
 }))(Object(react_intl__WEBPACK_IMPORTED_MODULE_5__["injectIntl"])(_TopSites));
 /* WEBPACK VAR INJECTION */}.call(this, __webpack_require__(1)))
 
 /***/ }),
-/* 38 */
+/* 39 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "TOP_SITES_SOURCE", function() { return TOP_SITES_SOURCE; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "TOP_SITES_CONTEXT_MENU_OPTIONS", function() { return TOP_SITES_CONTEXT_MENU_OPTIONS; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "TOP_SITES_SEARCH_SHORTCUTS_CONTEXT_MENU_OPTIONS", function() { return TOP_SITES_SEARCH_SHORTCUTS_CONTEXT_MENU_OPTIONS; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "MIN_RICH_FAVICON_SIZE", function() { return MIN_RICH_FAVICON_SIZE; });
@@ -4896,24 +5247,24 @@ const TOP_SITES_CONTEXT_MENU_OPTIONS = [
 
 const TOP_SITES_SEARCH_SHORTCUTS_CONTEXT_MENU_OPTIONS = ["CheckPinTopSite", "Separator", "BlockUrl"]; // minimum size necessary to show a rich icon instead of a screenshot
 
 const MIN_RICH_FAVICON_SIZE = 96; // minimum size necessary to show any icon in the top left corner with a screenshot
 
 const MIN_CORNER_FAVICON_SIZE = 16;
 
 /***/ }),
-/* 39 */
+/* 40 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ComponentPerfTimer", function() { return ComponentPerfTimer; });
 /* harmony import */ var common_Actions_jsm__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2);
-/* harmony import */ var common_PerfService_jsm__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(40);
+/* harmony import */ var common_PerfService_jsm__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(41);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(11);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_2__);
 
 
  // Currently record only a fixed set of sections. This will prevent data
 // from custom sections from showing up or from topstories.
 
 const RECORDED_SECTIONS = ["highlights", "topsites"];
@@ -5073,17 +5424,17 @@ class ComponentPerfTimer extends react__
     }
 
     return this.props.children;
   }
 
 }
 
 /***/ }),
-/* 40 */
+/* 41 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "_PerfService", function() { return _PerfService; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "perfService", function() { return perfService; });
 
 
@@ -5211,29 +5562,29 @@ function _PerfService(options) {
     let mostRecentEntry = entries[entries.length - 1];
     return this._perf.timeOrigin + mostRecentEntry.startTime;
   }
 
 };
 var perfService = new _PerfService();
 
 /***/ }),
-/* 41 */
+/* 42 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "SelectableSearchShortcut", function() { return SelectableSearchShortcut; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "SearchShortcutsForm", function() { return SearchShortcutsForm; });
 /* harmony import */ var common_Actions_jsm__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2);
 /* harmony import */ var react_intl__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(4);
 /* harmony import */ var react_intl__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_intl__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(11);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_2__);
-/* harmony import */ var _TopSitesConstants__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(38);
+/* harmony import */ var _TopSitesConstants__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(39);
 
 
 
 
 class SelectableSearchShortcut extends react__WEBPACK_IMPORTED_MODULE_2___default.a.PureComponent {
   render() {
     const {
       shortcut,
@@ -5405,35 +5756,35 @@ class SearchShortcutsForm extends react_
     }, react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement(react_intl__WEBPACK_IMPORTED_MODULE_1__["FormattedMessage"], {
       id: "topsites_form_save_button"
     }))));
   }
 
 }
 
 /***/ }),
-/* 42 */
+/* 43 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "TopSiteLink", function() { return TopSiteLink; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "TopSite", function() { return TopSite; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "TopSitePlaceholder", function() { return TopSitePlaceholder; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "_TopSiteList", function() { return _TopSiteList; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "TopSiteList", function() { return TopSiteList; });
 /* harmony import */ var common_Actions_jsm__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2);
 /* harmony import */ var react_intl__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(4);
 /* harmony import */ var react_intl__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_intl__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var _TopSitesConstants__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(38);
-/* harmony import */ var content_src_components_LinkMenu_LinkMenu__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(29);
+/* harmony import */ var _TopSitesConstants__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(39);
+/* harmony import */ var content_src_components_LinkMenu_LinkMenu__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(30);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(11);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_4__);
-/* harmony import */ var content_src_lib_screenshot_utils__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(43);
-/* harmony import */ var common_Reducers_jsm__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(55);
+/* harmony import */ var content_src_lib_screenshot_utils__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(44);
+/* harmony import */ var common_Reducers_jsm__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(56);
 function _extends() { _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; }; return _extends.apply(this, arguments); }
 
 
 
 
 
 
 
@@ -6063,17 +6414,17 @@ class _TopSiteList extends react__WEBPAC
       className: `top-sites-list${this.state.draggedSite ? " dnd-active" : ""}`
     }, topSitesUI);
   }
 
 }
 const TopSiteList = Object(react_intl__WEBPACK_IMPORTED_MODULE_1__["injectIntl"])(_TopSiteList);
 
 /***/ }),
-/* 43 */
+/* 44 */
 /***/ (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__, "ScreenshotUtils", function() { return ScreenshotUtils; });
 /**
  * List of helper functions for screenshot-based images.
  *
@@ -6128,17 +6479,17 @@ const ScreenshotUtils = {
 
     return !remoteImage && !localImage;
   }
 
 };
 /* WEBPACK VAR INJECTION */}.call(this, __webpack_require__(1)))
 
 /***/ }),
-/* 44 */
+/* 45 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "_PrerenderData", function() { return _PrerenderData; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "PrerenderData", function() { return PrerenderData; });
 class _PrerenderData {
   constructor(options) {
@@ -6266,17 +6617,17 @@ var PrerenderData = new _PrerenderData({
     order: 2,
     title: {
       id: "header_highlights"
     }
   }]
 });
 
 /***/ }),
-/* 45 */
+/* 46 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "_Search", function() { return _Search; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "Search", function() { return Search; });
 /* harmony import */ var common_Actions_jsm__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2);
 /* harmony import */ var react_intl__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(4);
@@ -6474,39 +6825,39 @@ class _Search extends react__WEBPACK_IMP
       ref: this.onInputMount
     })));
   }
 
 }
 const Search = Object(react_redux__WEBPACK_IMPORTED_MODULE_2__["connect"])()(Object(react_intl__WEBPACK_IMPORTED_MODULE_1__["injectIntl"])(_Search));
 
 /***/ }),
-/* 46 */
+/* 47 */
 /***/ (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__, "Section", function() { return Section; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "SectionIntl", function() { return SectionIntl; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "_Sections", function() { return _Sections; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "Sections", function() { return Sections; });
 /* harmony import */ var common_Actions_jsm__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2);
-/* harmony import */ var content_src_components_Card_Card__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(56);
+/* harmony import */ var content_src_components_Card_Card__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(57);
 /* harmony import */ var react_intl__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(4);
 /* harmony import */ var react_intl__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(react_intl__WEBPACK_IMPORTED_MODULE_2__);
-/* harmony import */ var content_src_components_CollapsibleSection_CollapsibleSection__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(33);
-/* harmony import */ var content_src_components_ComponentPerfTimer_ComponentPerfTimer__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(39);
+/* harmony import */ var content_src_components_CollapsibleSection_CollapsibleSection__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(34);
+/* harmony import */ var content_src_components_ComponentPerfTimer_ComponentPerfTimer__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(40);
 /* 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_MoreRecommendations_MoreRecommendations__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(47);
-/* harmony import */ var content_src_components_PocketLoggedInCta_PocketLoggedInCta__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(48);
+/* harmony import */ var content_src_components_MoreRecommendations_MoreRecommendations__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(48);
+/* harmony import */ var content_src_components_PocketLoggedInCta_PocketLoggedInCta__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(49);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(11);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_8___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_8__);
-/* harmony import */ var content_src_components_Topics_Topics__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(49);
-/* harmony import */ var content_src_components_TopSites_TopSites__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(37);
+/* harmony import */ var content_src_components_Topics_Topics__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(50);
+/* harmony import */ var content_src_components_TopSites_TopSites__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(38);
 function _extends() { _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; }; return _extends.apply(this, arguments); }
 
 
 
 
 
 
 
@@ -6845,17 +7196,17 @@ class _Sections extends react__WEBPACK_I
 }
 const Sections = Object(react_redux__WEBPACK_IMPORTED_MODULE_5__["connect"])(state => ({
   Sections: state.Sections,
   Prefs: state.Prefs
 }))(_Sections);
 /* WEBPACK VAR INJECTION */}.call(this, __webpack_require__(1)))
 
 /***/ }),
-/* 47 */
+/* 48 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "MoreRecommendations", function() { return MoreRecommendations; });
 /* harmony import */ var react_intl__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(4);
 /* harmony import */ var react_intl__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react_intl__WEBPACK_IMPORTED_MODULE_0__);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(11);
@@ -6878,17 +7229,17 @@ class MoreRecommendations extends react_
     }
 
     return null;
   }
 
 }
 
 /***/ }),
-/* 48 */