Bug 1357023 - Add onboarding tour for Firefox Sync. r=mossop,flod draft
authorRex Lee <rexboy@mozilla.com>
Wed, 14 Jun 2017 21:12:56 +0800
changeset 600953 a3ec73b21233f657954190f964b626e99a3e5b12
parent 600952 0cde4ff26ec3696277050eebfcb9dae192017e2e
child 635136 c7fd7a7d90ba2cbfdc3a1a080baa8ec467e421d3
push id65921
push userbmo:rexboy@mozilla.com
push dateTue, 27 Jun 2017 22:31:52 +0000
reviewersmossop, flod
bugs1357023
milestone56.0a1
Bug 1357023 - Add onboarding tour for Firefox Sync. r=mossop,flod MozReview-Commit-ID: vZQyXU82YK
browser/extensions/onboarding/content/img/figure_sync.svg
browser/extensions/onboarding/content/img/icons_sync-colored.svg
browser/extensions/onboarding/content/img/icons_sync.svg
browser/extensions/onboarding/content/onboarding-tour-agent.js
browser/extensions/onboarding/content/onboarding.css
browser/extensions/onboarding/content/onboarding.js
browser/extensions/onboarding/locales/en-US/onboarding.properties
browser/extensions/onboarding/test/browser/head.js
new file mode 100644
--- /dev/null
+++ b/browser/extensions/onboarding/content/img/figure_sync.svg
@@ -0,0 +1,1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 352 266"><defs><style>.cls-1{fill:none;}.cls-2{fill:#fff;}.cls-3{fill:#eaeaee;}.cls-4{fill:#f9f9fa;}.cls-5{fill:#f3f3f7;}.cls-6{fill:#90e8f0;}.cls-7{fill:#ccedf0;}.cls-8{fill:url(#New_Gradient_Swatch_1);}.cls-9{fill:url(#New_Gradient_Swatch_1-2);}</style><linearGradient id="New_Gradient_Swatch_1" x1="-57.65" y1="-89.4" x2="383.11" y2="351.36" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#00c8d7"/><stop offset="1" stop-color="#0a84ff"/></linearGradient><linearGradient id="New_Gradient_Swatch_1-2" x1="6.85" y1="-35.33" x2="378.19" y2="336.02" xlink:href="#New_Gradient_Swatch_1"/></defs><title>sync</title><g id="Layer_1" data-name="Layer 1"><rect class="cls-1" width="352" height="266"/></g><g id="Layer_2" data-name="Layer 2"><path class="cls-2" d="M31.27,28.66H61.21S51.84,7.72,71.73,5C89.47,2.6,96.48,20.83,96.48,20.83s2.1-10.52,12.65-8.5S127.22,31,127.22,31h26.07"/><path class="cls-3" d="M153.8,26.1h-6.6a.7.7,0,0,1,0-1.4h6.6a.7.7,0,0,1,0,1.4Zm-19.16,0h-1.4a.7.7,0,1,1,0-1.4h1.4a.7.7,0,0,1,0,1.4ZM127.7,26a.7.7,0,0,1-.62-.38c-.19-.37-.92-1.74-2.1-3.57a.7.7,0,0,1,1.17-.76c1.21,1.88,2,3.29,2.16,3.68a.7.7,0,0,1-.3.94A.69.69,0,0,1,127.7,26Zm-66-.78h-2a.7.7,0,1,1,0-1.4h1c-.12-.31-.25-.68-.39-1.11a.7.7,0,0,1,1.33-.44c.4,1.2.73,2,.73,2a.7.7,0,0,1-.64,1Zm-13.19,0H31.78a.7.7,0,0,1,0-1.4H48.53a.7.7,0,0,1,0,1.4ZM59.71,17.8a.7.7,0,0,1-.69-.61c-.06-.47-.11-.95-.14-1.43a.7.7,0,0,1,.65-.74.68.68,0,0,1,.74.65c0,.46.08.91.13,1.35a.7.7,0,0,1-.6.78Zm36.44-2.21a.7.7,0,0,1-.62-.38c-.18-.36-.4-.76-.65-1.2a.7.7,0,0,1,1.21-.69c.26.46.49.88.68,1.26a.7.7,0,0,1-.62,1Zm22.34-1.77a.69.69,0,0,1-.47-.18,18,18,0,0,0-8.49-4.72,12.22,12.22,0,0,0-2.45-.24,9.2,9.2,0,0,0-3.55.67A.7.7,0,0,1,103,8.05a10.62,10.62,0,0,1,4.09-.78h0a14.46,14.46,0,0,1,2.7.27A19.31,19.31,0,0,1,119,12.6a.7.7,0,0,1-.47,1.21Zm-26.19-4a.7.7,0,0,1-.54-.25A26.69,26.69,0,0,0,88.91,6.6a.7.7,0,1,1,.92-1,28.13,28.13,0,0,1,3,3.08.7.7,0,0,1-.53,1.15ZM63.61,5a.7.7,0,0,1-.45-1.23,17.28,17.28,0,0,1,9-3.57,22.72,22.72,0,0,1,7.52.18.7.7,0,0,1-.27,1.37,21.34,21.34,0,0,0-7.06-.17,15.94,15.94,0,0,0-8.28,3.26A.7.7,0,0,1,63.61,5Z"/><path class="cls-2" d="M154.66,31.42H31.26a1.4,1.4,0,0,1,0-2.79h123.4a1.4,1.4,0,0,1,0,2.79Z"/><path class="cls-2" d="M280.68,39.1h16.65S292.12,27.46,303.18,26c9.86-1.34,13.76,8.79,13.76,8.79s1.17-5.85,7-4.73S334,40.43,334,40.43h14.5"/><path class="cls-3" d="M297.84,37.24H281.19a.7.7,0,1,1,0-1.4h16.65v.59l.61-.25a.79.79,0,0,1,0,.7A.71.71,0,0,1,297.84,37.24ZM343.46,37h-4.19a.7.7,0,1,1,0-1.4h4.19a.7.7,0,1,1,0,1.4Zm-26-4.21-.16,0a.7.7,0,0,1-.52-.84c.13-.55,1.4-5.34,6.27-5.34a8.42,8.42,0,0,1,1.56.15,12.84,12.84,0,0,1,6.54,3.93.7.7,0,0,1-1,1,11.5,11.5,0,0,0-5.81-3.54,7,7,0,0,0-1.3-.13c-3.72,0-4.74,3.55-4.91,4.27A.7.7,0,0,1,317.47,32.82Zm-19.16-6.27a.7.7,0,0,1-.52-1.17,8.16,8.16,0,0,1,3.89-2.28.7.7,0,1,1,.38,1.34,6.8,6.8,0,0,0-3.24,1.88A.7.7,0,0,1,298.31,26.55Zm10.45-2.11a.7.7,0,0,1-.2,0,10.24,10.24,0,0,0-1.27-.3.7.7,0,0,1-.57-.8.71.71,0,0,1,.8-.57,11.92,11.92,0,0,1,1.44.34.7.7,0,0,1-.2,1.37Z"/><path class="cls-2" d="M349.6,41.9H281a1.4,1.4,0,0,1,0-2.79H349.6a1.4,1.4,0,0,1,0,2.79Z"/><ellipse class="cls-3" cx="182.72" cy="257.92" rx="74.67" ry="6.51"/><path class="cls-4" d="M237.45,26.8h.14a1.69,1.69,0,0,0,1.69-1.56,4.16,4.16,0,0,1,3.26-3.73,1.7,1.7,0,1,0-.74-3.31A7.53,7.53,0,0,0,235.9,25,1.71,1.71,0,0,0,237.45,26.8Z"/><path class="cls-5" d="M220,71.68a.86.86,0,0,0-1.11-.49q-1.77.68-3.49,1.46a.85.85,0,0,0-.48.63h3.43c.39-.16.77-.33,1.16-.49A.86.86,0,0,0,220,71.68Z"/><path class="cls-5" d="M295,190a.86.86,0,0,0,1.22,0c.29-.29.56-.61.85-.91h-2.26A.86.86,0,0,0,295,190Z"/><path class="cls-5" d="M189.51,72.34A.86.86,0,0,0,188.4,71l-1.26,1.08a.86.86,0,0,0-.11,1.18h1.38Z"/><path class="cls-5" d="M82,71.18l-.6.25a9.69,9.69,0,0,1,1.72.28s0,0,0,0A.86.86,0,0,0,82,71.18Z"/><path class="cls-5" d="M163.86,72.53A.86.86,0,1,0,165,71.22l-1.28-1.06a.86.86,0,0,0-1.08,1.34Z"/><path class="cls-5" d="M52.75,71.13A.86.86,0,0,0,51.54,71l-.44.38h1.8A.85.85,0,0,0,52.75,71.13Z"/><path class="cls-3" d="M249.67,210.21a.86.86,0,0,1-.82.9q-1.87.1-3.76.1H245a73,73,0,0,1-15-1.55.86.86,0,0,1,.35-1.69A71.16,71.16,0,0,0,245,209.49c1.27,0,2.52,0,3.76-.1A.84.84,0,0,1,249.67,210.21ZM263.1,70.38a70.29,70.29,0,0,1,13.81,5.25.87.87,0,0,0,.39.09.86.86,0,0,0,.39-1.63,72,72,0,0,0-14.15-5.38.86.86,0,1,0-.44,1.67Zm-14.52-4a73.11,73.11,0,0,0-18.84,1.52.86.86,0,0,0,.18,1.7l.18,0a71.75,71.75,0,0,1,18.39-1.49.85.85,0,0,0,.9-.82A.86.86,0,0,0,248.58,66.41ZM216,205.07a.86.86,0,0,0,.35-1.65c-.73-.33-1.46-.69-2.18-1h-3.75c1.71.94,3.45,1.82,5.23,2.61A.86.86,0,0,0,216,205.07Zm68.31-127.2a.86.86,0,1,0-.94,1.45q1.56,1,3.06,2.09a.85.85,0,0,0,.5.16.86.86,0,0,0,.51-1.56Q285.86,78.9,284.26,77.87Zm-.71,120.2a70.63,70.63,0,0,1-13.16,6.72.86.86,0,0,0,.31,1.67.87.87,0,0,0,.31-.06,72.41,72.41,0,0,0,13.48-6.89.86.86,0,0,0-.94-1.44Zm-20.19,9q-1.78.48-3.6.86a.86.86,0,0,0,.18,1.7l.18,0q1.86-.4,3.69-.88a.86.86,0,0,0,.61-1.05A.87.87,0,0,0,263.36,207.08ZM245,60.85A77.68,77.68,0,0,1,300.09,83.7h4.76A81.19,81.19,0,0,0,196.79,73.28h6.07A77.43,77.43,0,0,1,245,60.85Zm0,155.84a77.46,77.46,0,0,1-44.9-14.3h-5.73a81.17,81.17,0,0,0,114.51-13.32h-4.44A77.76,77.76,0,0,1,245,216.68ZM260.11,224a88.16,88.16,0,0,1-19.51,1.2.87.87,0,0,0-.9.82.86.86,0,0,0,.82.9q2.23.11,4.49.11a89.29,89.29,0,0,0,15.4-1.34.86.86,0,1,0-.3-1.7Zm-32.45-.43c-1.58-.32-3.19-.69-4.77-1.11a.86.86,0,1,0-.44,1.67c1.61.42,3.25.81,4.86,1.13l.17,0a.86.86,0,0,0,.17-1.71Zm48.16-3.91-1.53.57a.86.86,0,1,0,.59,1.62l1.56-.58a.86.86,0,0,0-.61-1.61Zm24.9-147.14a.86.86,0,1,0,1.11-1.32l-1.28-1.06a.86.86,0,0,0-1.08,1.34Zm-84.08,148-1.54-.55a.86.86,0,1,0-.6,1.61l1.58.56a.86.86,0,1,0,.56-1.63Zm69.53-5.65c-1.43.77-2.9,1.52-4.36,2.21a.86.86,0,1,0,.74,1.56c1.5-.7,3-1.46,4.45-2.25a.86.86,0,1,0-.82-1.51Zm25.13-20.52a87.23,87.23,0,0,1-14.17,13.46.86.86,0,1,0,1,1.37,88.77,88.77,0,0,0,14.45-13.73.86.86,0,1,0-1.32-1.11Zm1.11-112.6a.86.86,0,0,0-1.32,1.11c.22.26.42.54.64.81H314C313.45,83.07,313,82.41,312.43,81.79ZM201.08,64a.84.84,0,0,0,.43-.12,86.22,86.22,0,0,1,17.9-7.86.86.86,0,0,0-.51-1.65,87.83,87.83,0,0,0-18.25,8,.86.86,0,0,0,.43,1.6Zm58.67-10.57a86.11,86.11,0,0,1,18.77,5.48.86.86,0,0,0,.67-1.59A87.92,87.92,0,0,0,260,51.77a.86.86,0,0,0-.29,1.7ZM290.14,64.9c1.38.85,2.76,1.75,4.1,2.67a.86.86,0,0,0,1-1.42c-1.37-.95-2.78-1.87-4.19-2.73a.86.86,0,0,0-.9,1.47ZM243.49,52.23h1.65a.8.8,0,0,0,.79-.86.92.92,0,0,0-.93-.86h-1.53a.86.86,0,0,0,0,1.72ZM184.92,203.43a88.71,88.71,0,0,0,16,11.84.86.86,0,0,0,.86-1.49,86.8,86.8,0,0,1-15.48-11.4h-1.56A.85.85,0,0,0,184.92,203.43ZM232,53.17h.13c1.6-.24,3.23-.43,4.86-.58a.86.86,0,1,0-.16-1.72c-1.66.15-3.33.35-5,.6a.86.86,0,0,0,.13,1.71ZM123.08,209.65l.18,0q1.86-.4,3.69-.88a.86.86,0,0,0,.61-1.05.87.87,0,0,0-1.05-.61q-1.78.48-3.6.86a.86.86,0,0,0,.18,1.7Zm2.54-140.33a.86.86,0,0,0,.61,1.05,70.24,70.24,0,0,1,8.6,2.9h4.27a72,72,0,0,0-12.43-4.57A.86.86,0,0,0,125.62,69.32ZM92.88,67.93a.86.86,0,0,0,.18,1.7l.18,0a71.75,71.75,0,0,1,18.39-1.49.85.85,0,0,0,.9-.82.86.86,0,0,0-.82-.9A73.11,73.11,0,0,0,92.88,67.93Zm-.39,140.71a.86.86,0,0,0,.67,1,73,73,0,0,0,15,1.55h.09q1.89,0,3.76-.1a.86.86,0,0,0,.82-.9.84.84,0,0,0-.9-.81c-1.25.06-2.49.1-3.76.1A71.16,71.16,0,0,1,93.51,208,.86.86,0,0,0,92.49,208.64ZM133,205.91a.86.86,0,0,0,1.11.49,72.27,72.27,0,0,0,8.62-4H139c-1.8.87-3.62,1.69-5.49,2.41A.86.86,0,0,0,133,205.91Zm-53.95-.84a.86.86,0,0,0,.35-1.65A70.39,70.39,0,0,1,72.72,200h-3.3a72.27,72.27,0,0,0,9.32,5A.86.86,0,0,0,79.09,205.07ZM108.14,60.85a77.43,77.43,0,0,1,42.14,12.43h6.07A81.17,81.17,0,0,0,62.57,71.4h6.49A77.41,77.41,0,0,1,108.14,60.85Zm0,155.84A77.51,77.51,0,0,1,60,200H54.64a81.12,81.12,0,0,0,104.14,2.4H153A77.46,77.46,0,0,1,108.14,216.68Zm41.18-1.77c-1.43.77-2.9,1.52-4.36,2.21a.86.86,0,1,0,.74,1.56c1.5-.7,3-1.46,4.45-2.25a.86.86,0,1,0-.82-1.51Zm4-150c1.38.85,2.76,1.75,4.1,2.67a.86.86,0,0,0,1-1.42c-1.37-.95-2.78-1.87-4.19-2.73a.86.86,0,0,0-.9,1.47Zm-30,159.1a88.16,88.16,0,0,1-19.51,1.2.86.86,0,1,0-.09,1.72q2.23.11,4.49.11a89.29,89.29,0,0,0,15.4-1.34.86.86,0,1,0-.3-1.7Zm-43.46-3.44L78.25,220a.86.86,0,0,0-.6,1.61l1.58.56a.86.86,0,1,0,.56-1.63Zm11,3c-1.58-.32-3.19-.69-4.77-1.11a.86.86,0,1,0-.44,1.67c1.61.42,3.25.81,4.86,1.13l.17,0a.86.86,0,0,0,.17-1.71Zm69.49-15.72a.86.86,0,1,0,1,1.37,88.54,88.54,0,0,0,8-6.84h-2.53C164.7,204.31,162.54,206.14,160.29,207.85ZM139,219.67l-1.53.57a.86.86,0,1,0,.59,1.62l1.56-.58a.86.86,0,0,0-.61-1.61ZM122.9,53.47a86.11,86.11,0,0,1,18.77,5.48.86.86,0,0,0,.67-1.59,87.92,87.92,0,0,0-19.14-5.59.86.86,0,0,0-.29,1.7Zm-16.27-1.24h1.65a.8.8,0,0,0,.79-.86.92.92,0,0,0-.93-.86h-1.53a.86.86,0,0,0,0,1.72ZM64.22,64a.84.84,0,0,0,.43-.12,86.22,86.22,0,0,1,17.9-7.86A.86.86,0,1,0,82,54.41a87.83,87.83,0,0,0-18.25,8,.86.86,0,0,0,.43,1.6ZM65,213.78a86.81,86.81,0,0,1-15.72-11.61.86.86,0,1,0-1.17,1.26,88.71,88.71,0,0,0,16,11.84.86.86,0,0,0,.86-1.49ZM95.14,53.17h.13c1.6-.24,3.23-.43,4.86-.58a.86.86,0,1,0-.16-1.72c-1.66.15-3.33.35-5,.6a.86.86,0,0,0,.13,1.71Z"/><path class="cls-2" d="M334.53,93.73H296a3,3,0,0,0-3,3v72.14a3,3,0,0,0,3,3h38.53a3,3,0,0,0,3-3V96.7A3,3,0,0,0,334.53,93.73ZM314.75,100a9.85,9.85,0,1,1-9.85,9.85A9.86,9.86,0,0,1,314.75,100Zm-9.65,29.53a1.63,1.63,0,0,1,1.25-1.09l4.72-.84,2.64-5.3,1-.07a1.62,1.62,0,0,1,1.46.9l2.22,4.47,5.6,1,.38.93a1.62,1.62,0,0,1-.35,1.62l-3.39,3.64.83,6-.8.64a1.61,1.61,0,0,1-1.69.11l-4.25-2.21-5.07,2.64-.87-.54a1.62,1.62,0,0,1-.67-1.56l.71-5-4-4.29Zm10.53,22.15a1.51,1.51,0,0,1,1.51-1.51h1.66a5.53,5.53,0,0,0-4-1.75,5.63,5.63,0,0,0-5.46,4.28,1.51,1.51,0,0,1-2.93-.73,8.58,8.58,0,0,1,14-4.41v-.64a1.51,1.51,0,1,1,3,0v4.77a1.51,1.51,0,0,1-1.51,1.51h-4.77A1.51,1.51,0,0,1,315.63,151.69Zm-.88,11a8.61,8.61,0,0,1-5.65-2.15v.64a1.51,1.51,0,1,1-3,0v-4.77a1.51,1.51,0,0,1,1.51-1.51h4.77a1.51,1.51,0,1,1,0,3H310.7a5.53,5.53,0,0,0,4,1.75,5.62,5.62,0,0,0,5.46-4.28,1.51,1.51,0,0,1,2.93.73A8.63,8.63,0,0,1,314.75,162.73Z"/><path class="cls-2" d="M314.75,116.7a6.84,6.84,0,1,0-6.84-6.84A6.85,6.85,0,0,0,314.75,116.7Zm-1.46-11a.86.86,0,1,1,1.72,0v3.91h3.91a.86.86,0,1,1,0,1.72h-4.77a.86.86,0,0,1-.86-.86Z"/><polygon class="cls-2" points="311.49 137.59 314.75 135.9 318.01 137.59 317.48 133.79 320.11 130.97 316.41 130.3 314.75 126.97 313.09 130.3 309.39 130.97 312.02 133.79 311.49 137.59"/><path class="cls-6" d="M308.13,139.84a1.62,1.62,0,0,0,.67,1.56l.87.54,5.07-2.64,4.25,2.21a1.61,1.61,0,0,0,1.69-.11l.8-.64-.83-6,3.39-3.64a1.62,1.62,0,0,0,.35-1.62l-.38-.93-5.6-1-2.22-4.47a1.62,1.62,0,0,0-1.46-.9l-1,.07-2.64,5.3-4.72.84a1.63,1.63,0,0,0-1.25,1.09l-.25,1,4,4.29Zm5-9.54,1.66-3.33,1.66,3.33,3.7.66-2.63,2.83.53,3.8-3.26-1.7-3.26,1.7.53-3.8L309.39,131Z"/><polygon class="cls-2" points="44.68 126.97 42.9 130.55 38.91 131.26 41.75 134.31 41.17 138.4 44.68 136.58 48.19 138.4 47.62 134.31 50.46 131.26 46.47 130.55 44.68 126.97"/><path class="cls-2" d="M13,181.86h64.8a3.15,3.15,0,0,0,3.15-3.15V85a3.15,3.15,0,0,0-3.15-3.15H13A3.15,3.15,0,0,0,9.83,85V178.7A3.15,3.15,0,0,0,13,181.86Zm41-18.57a9.51,9.51,0,0,1-15.44,5v.57a1.72,1.72,0,0,1-3.44,0v-5.25a1.72,1.72,0,0,1,1.72-1.72h5.25a1.72,1.72,0,0,1,0,3.44H40.36a6,6,0,0,0,4.32,1.8,6.13,6.13,0,0,0,5.94-4.66,1.72,1.72,0,0,1,3.34.83Zm.31-4.95a1.72,1.72,0,0,1-1.72,1.72H47.31a1.72,1.72,0,0,1,0-3.44H49a6,6,0,0,0-4.32-1.8,6.13,6.13,0,0,0-5.94,4.66,1.72,1.72,0,0,1-1.67,1.31,1.79,1.79,0,0,1-.42-.05,1.72,1.72,0,0,1-1.25-2.09,9.51,9.51,0,0,1,15.44-5v-.57a1.72,1.72,0,1,1,3.44,0ZM55,131.48l-3.7,4,.92,6.56-.91.73a1.84,1.84,0,0,1-1.93.13l-4.66-2.43-5.59,2.91-1-.62a1.84,1.84,0,0,1-.76-1.77l.77-5.52-4.4-4.73.29-1.1a1.85,1.85,0,0,1,1.43-1.24l5.16-.92,2.91-5.84,1.18-.07a1.84,1.84,0,0,1,1.66,1l2.44,4.89,6.17,1.1.42,1.07A1.85,1.85,0,0,1,55,131.48ZM44.68,92.77a10.91,10.91,0,1,1-10.91,10.91A10.92,10.92,0,0,1,44.68,92.77Z"/><path class="cls-2" d="M37.22,103.68a7.46,7.46,0,1,0,7.46-7.46A7.47,7.47,0,0,0,37.22,103.68Zm5.95-4.59a.86.86,0,0,1,1.72,0v4.39h4.39a.86.86,0,1,1,0,1.72H44a.86.86,0,0,1-.86-.86Z"/><path class="cls-6" d="M54.95,128.56l-6.17-1.1-2.44-4.89a1.84,1.84,0,0,0-1.66-1l-1.18.07-2.91,5.84-5.16.92A1.85,1.85,0,0,0,34,129.63l-.29,1.1,4.4,4.73L37.34,141a1.84,1.84,0,0,0,.76,1.77l1,.62,5.59-2.91,4.66,2.43a1.84,1.84,0,0,0,1.93-.13l.91-.73-.92-6.56,3.7-4a1.85,1.85,0,0,0,.41-1.85Zm-7.33,5.75.57,4.09-3.51-1.83-3.51,1.83.57-4.09-2.84-3,4-.71L44.68,127l1.78,3.58,4,.71Z"/><path class="cls-2" d="M152.61,125.88a7.46,7.46,0,1,0-7.46-7.46A7.47,7.47,0,0,0,152.61,125.88Zm-1.52-12.06a.86.86,0,0,1,1.72,0v4.39h4.39a.86.86,0,1,1,0,1.72H152a.86.86,0,0,1-.86-.86Z"/><polygon class="cls-2" points="183.41 116.65 181.63 113.06 179.84 116.65 175.85 117.36 178.69 120.41 178.12 124.5 181.63 122.67 185.13 124.5 184.56 120.41 187.4 117.36 183.41 116.65"/><path class="cls-2" d="M131.35,153.46h99.33a3.6,3.6,0,0,0,3.6-3.6V90.61a3.6,3.6,0,0,0-3.6-3.6H131.35a3.6,3.6,0,0,0-3.6,3.6v59.24A3.6,3.6,0,0,0,131.35,153.46Zm56.85-31.9.92,6.56-.91.73a1.84,1.84,0,0,1-1.93.13l-4.66-2.43L176,129.47l-1-.62a1.85,1.85,0,0,1-.77-1.76l.77-5.54-4.4-4.73.29-1.1a1.85,1.85,0,0,1,1.43-1.24l5.16-.92,2.91-5.85,1.19-.07a1.85,1.85,0,0,1,1.65,1l2.44,4.89,6.17,1.1.42,1.06a1.86,1.86,0,0,1-.4,1.85Zm13.15-5.46a9.51,9.51,0,0,1,15.44-5v-.57a1.72,1.72,0,0,1,3.44,0v5.25a1.72,1.72,0,0,1-1.72,1.72h-5.25a1.72,1.72,0,1,1,0-3.44H215a6,6,0,0,0-4.32-1.8,6.13,6.13,0,0,0-5.94,4.67,1.72,1.72,0,0,1-1.67,1.31,1.79,1.79,0,0,1-.42-.05A1.72,1.72,0,0,1,201.36,116.1ZM201,121a1.72,1.72,0,0,1,1.72-1.72H208a1.72,1.72,0,0,1,0,3.44h-1.69a6,6,0,0,0,4.32,1.8,6.13,6.13,0,0,0,5.94-4.67,1.72,1.72,0,0,1,3.34.83,9.51,9.51,0,0,1-15.44,5v.57a1.72,1.72,0,1,1-3.44,0Zm-48.43-13.53a10.91,10.91,0,1,1-10.91,10.91A10.92,10.92,0,0,1,152.61,107.51Z"/><path class="cls-7" d="M337.27,87.15h-44a5.94,5.94,0,0,0-5.94,5.94v86.6a5.94,5.94,0,0,0,5.94,5.94h44a5.94,5.94,0,0,0,5.94-5.94V93.09A5.94,5.94,0,0,0,337.27,87.15Zm-15.07,91a2.67,2.67,0,0,1-2.67,2.67H311a2.67,2.67,0,0,1-2.67-2.67v-.1a2.67,2.67,0,0,1,2.67-2.67h8.54a2.67,2.67,0,0,1,2.67,2.67Zm15.29-9.34a3,3,0,0,1-3,3H296a3,3,0,0,1-3-3V96.7a3,3,0,0,1,3-3h38.53a3,3,0,0,1,3,3ZM10.07,196.54H80.7A6.31,6.31,0,0,0,87,190.23V81.15a6.31,6.31,0,0,0-6.31-6.31H10.07a6.31,6.31,0,0,0-6.31,6.31V190.23A6.31,6.31,0,0,0,10.07,196.54Zm24.82-6.83v-2.2a2.31,2.31,0,0,1,2.31-2.31H53.57a2.31,2.31,0,0,1,2.31,2.31v2.2A2.31,2.31,0,0,1,53.57,192H37.2A2.31,2.31,0,0,1,34.89,189.71ZM9.83,85A3.15,3.15,0,0,1,13,81.84h64.8A3.15,3.15,0,0,1,80.94,85V178.7a3.15,3.15,0,0,1-3.15,3.15H13a3.15,3.15,0,0,1-3.15-3.15Zm118.28,74.13H233.92A6.12,6.12,0,0,0,240,153V82.84a6.12,6.12,0,0,0-6.12-6.12H128.11A6.12,6.12,0,0,0,122,82.84V153A6.12,6.12,0,0,0,128.11,159.13ZM179,81.67a2,2,0,1,1,2,2A2,2,0,0,1,179,81.67Zm-51.28,8.94a3.6,3.6,0,0,1,3.6-3.6h99.33a3.6,3.6,0,0,1,3.6,3.6v59.24a3.6,3.6,0,0,1-3.6,3.6H131.35a3.6,3.6,0,0,1-3.6-3.6ZM249,198.94a3.62,3.62,0,0,0,3.82-3.38v-1.77a3,3,0,0,0-.28-1.26l-12.64-27.81a3.84,3.84,0,0,0-3.54-2.12H124.91a3.83,3.83,0,0,0-3.57,2.18l-11.86,27.77a3,3,0,0,0-.25,1.19v1.81a3.62,3.62,0,0,0,3.82,3.38Zm-14.64-25.79a16.05,16.05,0,0,1,.59,2c.13.54-.68,1.09-1.55,1.09l-6.37,0c-.57,0-1-.23-1.06-.57a12.51,12.51,0,0,0-.59-2c-.2-.54.49-1.11,1.39-1.11l6.44,0A1.17,1.17,0,0,1,234.33,173.15Zm-9.4-6.83h6c.52,0,.9.23,1,.57a12.69,12.69,0,0,0,.46,1.9c.16.52-.48,1-1.28,1h-5.94a1.14,1.14,0,0,1-1.11-.55,15.3,15.3,0,0,1-.61-1.89C223.31,166.86,224.09,166.32,224.94,166.31Zm-5.49,6.88c.16.79.24,1.19.39,2,.1.54-.71,1.1-1.61,1.1l-6.58,0c-.58,0-1-.23-1.13-.58-.2-.79-.3-1.18-.51-2-.14-.55.67-1.12,1.6-1.12l6.74,0C218.93,172.6,219.37,172.84,219.44,173.19Zm-9.07-6.84,6.38,0c.56,0,1,.23,1,.57l.38,1.9c.11.52-.66,1-1.51,1l-6.24,0c-.55,0-1-.22-1.08-.55l-.5-1.88C208.72,166.9,209.49,166.35,210.38,166.35Zm-7.49,7c.12.8.17,1.2.28,2,.07.53-.68,1-1.55,1l-6.8,0c-.65,0-1.17-.27-1.25-.66-.17-.8-.26-1.19-.44-2-.12-.53.62-1,1.52-1l7,0C202.32,172.66,202.83,172.94,202.88,173.34Zm-8.63-6.93,6.67,0c.63,0,1.12.27,1.17.64.11.76.16,1.14.27,1.89.07.5-.64,1-1.47,1l-6.5,0c-.62,0-1.12-.26-1.2-.63l-.41-1.89C192.69,166.89,193.4,166.41,194.26,166.4Zm-17.2.76c.1-.4.68-.7,1.36-.7l6,0c.67,0,1.22.29,1.28.69.12.76.18,1.14.29,1.89.08.48-.57.92-1.38.92l-6.76,0c-.8,0-1.42-.43-1.31-.91C176.77,168.31,176.86,167.93,177.05,167.17Zm-.43,6.35c.09-.43.69-.75,1.4-.75l6.33,0c.71,0,1.29.31,1.36.74l.34,2c.09.51-.59,1-1.42,1l-7.05,0c-.84,0-1.49-.45-1.39-1C176.36,174.74,176.45,174.33,176.62,173.52Zm-14.7-7,6.68,0c.86,0,1.51.47,1.35,1-.24.76-.35,1.14-.58,1.89a1.25,1.25,0,0,1-1.25.64l-6.5,0c-.83,0-1.51-.47-1.39-1,.17-.75.26-1.13.45-1.89C160.78,166.8,161.29,166.53,161.92,166.53Zm-2.47,7c.08-.4.6-.69,1.26-.7l7,0c.9,0,1.61.51,1.47,1-.22.81-.32,1.22-.53,2a1.25,1.25,0,0,1-1.28.69l-6.8,0c-.87,0-1.6-.5-1.51-1C159.23,174.77,159.3,174.36,159.45,173.54Zm-22.71.54a13.48,13.48,0,0,0-.67,2.06c-.09.36-.52.61-1.08.61l-6.37,0c-.87,0-1.66-.57-1.51-1.15a16.84,16.84,0,0,1,.68-2.08,1.22,1.22,0,0,1,1.18-.62l6.44,0C136.31,172.93,137,173.51,136.75,174.08Zm1.54-4.56a1.24,1.24,0,0,1-1.15.56H131.2c-.81,0-1.41-.53-1.21-1.05a17.25,17.25,0,0,0,.63-1.88,1,1,0,0,1,1-.56h6c.84,0,1.56.53,1.38,1C138.79,168.4,138.62,168.77,138.29,169.53Zm13.44,6.54c-.1.36-.57.61-1.15.61l-6.59,0c-.9,0-1.7-.57-1.57-1.13.18-.82.28-1.23.47-2.06.09-.36.55-.61,1.14-.62l6.74,0c.94,0,1.72.57,1.55,1.14C152.07,174.84,152,175.25,151.72,176.07Zm1.49-6.58a1.13,1.13,0,0,1-1.12.56l-6.24,0c-.85,0-1.58-.53-1.43-1,.21-.75.33-1.13.56-1.89a1.1,1.1,0,0,1,1.11-.56l6.38,0c.89,0,1.6.53,1.41,1.05C153.6,168.36,153.47,168.74,153.21,169.49Zm3.86,18.79c.57-2.93.83-4.46,1.41-7.55,0-.42.52-.73,1.18-.74l43.64-.33c.66,0,1.14.3,1.14.71a75,75,0,0,1,.75,7.8c0,.53-.76,1-1.5,1H158.44C157.69,189.2,157,188.77,157.07,188.28Z"/><path class="cls-8" d="M337.27,83.7h-.32a1.39,1.39,0,0,0,0-.22V82.05a1.48,1.48,0,0,0-1.48-1.48h-8.27a1.48,1.48,0,0,0-1.48,1.48v1.43a1.39,1.39,0,0,0,0,.22H293.25a9.39,9.39,0,0,0-9.38,9.38v86.6a9.39,9.39,0,0,0,9.38,9.38h44a9.39,9.39,0,0,0,9.38-9.38V93.09A9.39,9.39,0,0,0,337.27,83.7Zm5.94,96a5.94,5.94,0,0,1-5.94,5.94h-44a5.94,5.94,0,0,1-5.94-5.94V93.09a5.94,5.94,0,0,1,5.94-5.94h44a5.94,5.94,0,0,1,5.94,5.94Zm-21-1.61v.1a2.67,2.67,0,0,1-2.67,2.67H311a2.67,2.67,0,0,1-2.67-2.67v-.1a2.67,2.67,0,0,1,2.67-2.67h8.54A2.67,2.67,0,0,1,322.2,178.08ZM69.42,200H80.7a9.77,9.77,0,0,0,9.75-9.75V81.15a9.76,9.76,0,0,0-9.06-9.72c-.23,0-.46,0-.7,0H10.07A9.77,9.77,0,0,0,.32,81.15V190.23A9.77,9.77,0,0,0,10.07,200H69.42ZM3.76,81.15a6.31,6.31,0,0,1,6.31-6.31H80.7A6.31,6.31,0,0,1,87,81.15V190.23a6.31,6.31,0,0,1-6.31,6.31H10.07a6.31,6.31,0,0,1-6.31-6.31ZM37.2,192a2.31,2.31,0,0,1-2.31-2.31v-2.2a2.31,2.31,0,0,1,2.31-2.31H53.57a2.31,2.31,0,0,1,2.31,2.31v2.2A2.31,2.31,0,0,1,53.57,192Zm173.18,10.37H249a7.06,7.06,0,0,0,7.26-6.82v-1.77a6.45,6.45,0,0,0-.58-2.69L243,163.29a6.93,6.93,0,0,0-2.82-3.09,9.54,9.54,0,0,0,3.29-7.2V82.84a9.58,9.58,0,0,0-9.57-9.57H128.11a9.58,9.58,0,0,0-9.57,9.57V153a9.53,9.53,0,0,0,3,6.94,7,7,0,0,0-3.37,3.49L106.32,191.2a6.45,6.45,0,0,0-.52,2.55v1.81a7.06,7.06,0,0,0,7.26,6.82h97.32Zm-97.32-3.44a3.62,3.62,0,0,1-3.82-3.38v-1.81a3,3,0,0,1,.25-1.19l11.86-27.77a3.83,3.83,0,0,1,3.57-2.18H236.34a3.84,3.84,0,0,1,3.54,2.12l12.64,27.81a3,3,0,0,1,.28,1.26v1.77a3.62,3.62,0,0,1-3.82,3.38ZM122,153V82.84a6.12,6.12,0,0,1,6.12-6.12H233.92A6.12,6.12,0,0,1,240,82.84V153a6.12,6.12,0,0,1-6.12,6.12H128.11A6.12,6.12,0,0,1,122,153Zm35.08,35.28c.57-2.93.83-4.46,1.41-7.55,0-.42.52-.73,1.18-.74l43.64-.33c.66,0,1.14.3,1.14.71a75,75,0,0,1,.75,7.8c0,.53-.76,1-1.5,1H158.44C157.69,189.2,157,188.77,157.07,188.28ZM152.32,174c-.25.82-.36,1.23-.59,2-.1.36-.57.61-1.15.61l-6.59,0c-.9,0-1.7-.57-1.57-1.13.18-.82.28-1.23.47-2.06.09-.36.55-.61,1.14-.62l6.74,0C151.7,172.88,152.49,173.46,152.32,174Zm6.77,1.56c.14-.81.21-1.22.37-2,.08-.4.6-.69,1.26-.7l7,0c.9,0,1.61.51,1.47,1-.22.81-.32,1.22-.53,2a1.25,1.25,0,0,1-1.28.69l-6.8,0C159.72,176.62,159,176.12,159.09,175.58Zm42.57-2.91c.66,0,1.17.28,1.23.67.12.8.17,1.2.28,2,.07.53-.68,1-1.55,1l-6.8,0c-.65,0-1.17-.27-1.25-.66-.17-.8-.26-1.19-.44-2-.12-.53.62-1,1.52-1Zm-25.46,2.88c.17-.81.25-1.21.43-2,.09-.43.69-.75,1.4-.75l6.33,0c.71,0,1.29.31,1.36.74l.34,2c.09.51-.59,1-1.42,1l-7.05,0C176.74,176.52,176.09,176.06,176.2,175.54Zm35.4-2.92,6.74,0c.59,0,1,.24,1.11.59.16.79.24,1.19.39,2,.1.54-.71,1.1-1.61,1.1l-6.58,0c-.58,0-1-.23-1.13-.58-.2-.79-.3-1.18-.51-2C209.85,173.2,210.66,172.63,211.6,172.63Zm-57.72-5c-.28.76-.41,1.13-.67,1.89a1.13,1.13,0,0,1-1.12.56l-6.24,0c-.85,0-1.58-.53-1.43-1,.21-.75.33-1.13.56-1.89a1.1,1.1,0,0,1,1.11-.56l6.38,0C153.36,166.55,154.07,167.09,153.88,167.61Zm8-1.08,6.68,0c.86,0,1.51.47,1.35,1-.24.76-.35,1.14-.58,1.89a1.25,1.25,0,0,1-1.25.64l-6.5,0c-.83,0-1.51-.47-1.39-1,.17-.75.26-1.13.45-1.89C160.78,166.8,161.29,166.53,161.92,166.53Zm31.29,2.76-.41-1.89c-.11-.51.6-1,1.46-1l6.67,0c.63,0,1.12.27,1.17.64.11.76.16,1.14.27,1.89.07.5-.64,1-1.47,1l-6.5,0C193.79,169.91,193.29,169.65,193.21,169.28Zm-16.62-.22c.18-.75.27-1.13.47-1.89.1-.4.68-.7,1.36-.7l6,0c.67,0,1.22.29,1.28.69.12.76.18,1.14.29,1.89.08.48-.57.92-1.38.92l-6.76,0C177.09,170,176.47,169.54,176.59,169.06Zm32.78.25-.5-1.88c-.14-.53.63-1.07,1.52-1.07l6.38,0c.56,0,1,.23,1,.57l.38,1.9c.11.52-.66,1-1.51,1l-6.24,0C209.89,169.86,209.45,169.64,209.37,169.31Zm-72.62,4.78a13.48,13.48,0,0,0-.67,2.06c-.09.36-.52.61-1.08.61l-6.37,0c-.87,0-1.66-.57-1.51-1.15a16.84,16.84,0,0,1,.68-2.08,1.22,1.22,0,0,1,1.18-.62l6.44,0C136.31,172.93,137,173.51,136.75,174.08Zm2.31-6.44c-.27.75-.43,1.13-.77,1.88a1.24,1.24,0,0,1-1.15.56H131.2c-.81,0-1.41-.53-1.21-1.05a17.25,17.25,0,0,0,.63-1.88,1,1,0,0,1,1-.56h6C138.53,166.59,139.25,167.12,139.06,167.64Zm87.68,4.94,6.44,0a1.17,1.17,0,0,1,1.15.58,16.05,16.05,0,0,1,.59,2c.13.54-.68,1.09-1.55,1.09l-6.37,0c-.57,0-1-.23-1.06-.57a12.51,12.51,0,0,0-.59-2C225.15,173.14,225.84,172.58,226.74,172.58Zm-2.67-3.3a15.3,15.3,0,0,1-.61-1.89c-.14-.53.64-1.08,1.48-1.08h6c.52,0,.9.23,1,.57a12.69,12.69,0,0,0,.46,1.9c.16.52-.48,1-1.28,1h-5.94A1.14,1.14,0,0,1,224.06,169.28ZM181,83.66a2,2,0,1,1,2-2A2,2,0,0,1,181,83.66Z"/><path class="cls-6" d="M192.31,115.72l-.42-1.06-6.17-1.1-2.44-4.89a1.85,1.85,0,0,0-1.65-1l-1.19.07-2.91,5.85-5.16.92a1.85,1.85,0,0,0-1.43,1.24l-.29,1.1,4.4,4.73-.77,5.54a1.85,1.85,0,0,0,.77,1.76l1,.62,5.59-2.91,4.66,2.43a1.84,1.84,0,0,0,1.93-.13l.91-.73-.92-6.56,3.71-4A1.86,1.86,0,0,0,192.31,115.72Zm-7.75,4.69.57,4.09-3.51-1.83-3.51,1.83.57-4.09-2.84-3,4-.71,1.78-3.58,1.78,3.58,4,.71Z"/><path class="cls-9" d="M304.9,109.86a9.85,9.85,0,1,0,9.85-9.85A9.86,9.86,0,0,0,304.9,109.86Zm9.85-6.84a6.84,6.84,0,1,1-6.84,6.84A6.85,6.85,0,0,1,314.75,103Zm-1.46,7.43v-4.77a.86.86,0,1,1,1.72,0v3.91h3.91a.86.86,0,1,1,0,1.72h-4.77A.86.86,0,0,1,313.29,110.45Zm3.84,42.74a1.51,1.51,0,0,1,0-3h1.66a5.53,5.53,0,0,0-4-1.75,5.63,5.63,0,0,0-5.46,4.28,1.51,1.51,0,0,1-2.93-.73,8.58,8.58,0,0,1,14-4.41v-.64a1.51,1.51,0,1,1,3,0v4.77a1.51,1.51,0,0,1-1.51,1.51Zm-2.38,9.54a8.61,8.61,0,0,1-5.65-2.15v.64a1.51,1.51,0,1,1-3,0v-4.77a1.51,1.51,0,0,1,1.51-1.51h4.77a1.51,1.51,0,1,1,0,3H310.7a5.53,5.53,0,0,0,4,1.75,5.62,5.62,0,0,0,5.46-4.28,1.51,1.51,0,0,1,2.93.73A8.63,8.63,0,0,1,314.75,162.73ZM44.68,114.59a10.91,10.91,0,1,0-10.91-10.91A10.92,10.92,0,0,0,44.68,114.59Zm0-18.37a7.46,7.46,0,1,1-7.46,7.46A7.47,7.47,0,0,1,44.68,96.21Zm-1.52,8.12V99.09a.86.86,0,0,1,1.72,0v4.39h4.39a.86.86,0,1,1,0,1.72H44A.86.86,0,0,1,43.16,104.33Zm11.11,48.76v5.25a1.72,1.72,0,0,1-1.72,1.72H47.31a1.72,1.72,0,0,1,0-3.44H49a6,6,0,0,0-4.32-1.8,6.13,6.13,0,0,0-5.94,4.66,1.72,1.72,0,0,1-1.67,1.31,1.79,1.79,0,0,1-.42-.05,1.72,1.72,0,0,1-1.25-2.09,9.51,9.51,0,0,1,15.44-5v-.57a1.72,1.72,0,1,1,3.44,0ZM54,163.29a9.51,9.51,0,0,1-15.44,5v.57a1.72,1.72,0,0,1-3.44,0v-5.25a1.72,1.72,0,0,1,1.72-1.72h5.25a1.72,1.72,0,0,1,0,3.44H40.36a6,6,0,0,0,4.32,1.8,6.13,6.13,0,0,0,5.94-4.66,1.72,1.72,0,0,1,3.34.83Zm98.64-34a10.91,10.91,0,1,0-10.91-10.91A10.92,10.92,0,0,0,152.61,129.32Zm0-18.37a7.46,7.46,0,1,1-7.46,7.46A7.47,7.47,0,0,1,152.61,111Zm-1.52,8.12v-5.25a.86.86,0,0,1,1.72,0v4.39h4.39a.86.86,0,1,1,0,1.72H152A.86.86,0,0,1,151.09,119.07Zm50,7.22V121a1.72,1.72,0,0,1,1.72-1.72H208a1.72,1.72,0,0,1,0,3.44h-1.69a6,6,0,0,0,4.32,1.8,6.13,6.13,0,0,0,5.94-4.67,1.72,1.72,0,0,1,3.34.83,9.51,9.51,0,0,1-15.44,5v.57a1.72,1.72,0,1,1-3.44,0Zm.31-10.19a9.51,9.51,0,0,1,15.44-5v-.57a1.72,1.72,0,0,1,3.44,0v5.25a1.72,1.72,0,0,1-1.72,1.72h-5.25a1.72,1.72,0,1,1,0-3.44H215a6,6,0,0,0-4.32-1.8,6.13,6.13,0,0,0-5.94,4.67,1.72,1.72,0,0,1-1.67,1.31,1.79,1.79,0,0,1-.42-.05A1.72,1.72,0,0,1,201.36,116.1Z"/><ellipse class="cls-3" cx="313.67" cy="257.92" rx="32.1" ry="5.63"/><ellipse class="cls-3" cx="47.11" cy="257.92" rx="43.73" ry="5.63"/></g></svg>
\ No newline at end of file
new file mode 100755
--- /dev/null
+++ b/browser/extensions/onboarding/content/img/icons_sync-colored.svg
@@ -0,0 +1,1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="8 8 16 16"><title>  Icons &#x2F; Sync</title><desc>  Created with Sketch.</desc><g fill="none"><rect width="32" height="32"/><path d="M22 9C21.4 9 21 9.4 21 10L21 11.1C19.2 9.3 16.6 8.6 14.2 9.2 11.7 9.9 9.8 11.8 9.2 14.3 9.1 14.7 9.2 15 9.5 15.3 9.8 15.5 10.1 15.6 10.5 15.5 10.8 15.4 11.1 15.1 11.2 14.8 11.7 12.6 13.7 11 16 11 17.6 11 19 11.7 20 13L18 13C17.4 13 17 13.4 17 14 17 14.6 17.4 15 18 15L22 15C22.6 15 23 14.6 23 14L23 10C23 9.4 22.6 9 22 9ZM22 16.5C21.8 16.4 21.5 16.5 21.3 16.6 21.1 16.7 20.9 17 20.8 17.2 20.3 19.4 18.3 21 16 21 14.4 21 13 20.3 12 19L14 19C14.6 19 15 18.6 15 18 15 17.4 14.6 17 14 17L10 17C9.4 17 9 17.4 9 18L9 22C9 22.6 9.4 23 10 23 10.6 23 11 22.6 11 22L11 20.9C12.8 22.7 15.4 23.4 17.8 22.8 20.3 22.1 22.2 20.2 22.8 17.7 22.9 17.2 22.6 16.6 22 16.5Z" fill="#0A84FF"/></g></svg>
new file mode 100644
--- /dev/null
+++ b/browser/extensions/onboarding/content/img/icons_sync.svg
@@ -0,0 +1,1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="8 8 16 16"><title>  Icons &#x2F; Sync</title><desc>  Created with Sketch.</desc><g fill="none"><rect width="32" height="32"/><path d="M22 9C21.4 9 21 9.4 21 10L21 11.1C19.2 9.3 16.6 8.6 14.2 9.2 11.7 9.9 9.8 11.8 9.2 14.3 9.1 14.7 9.2 15 9.5 15.3 9.8 15.5 10.1 15.6 10.5 15.5 10.8 15.4 11.1 15.1 11.2 14.8 11.7 12.6 13.7 11 16 11 17.6 11 19 11.7 20 13L18 13C17.4 13 17 13.4 17 14 17 14.6 17.4 15 18 15L22 15C22.6 15 23 14.6 23 14L23 10C23 9.4 22.6 9 22 9ZM22 16.5C21.8 16.4 21.5 16.5 21.3 16.6 21.1 16.7 20.9 17 20.8 17.2 20.3 19.4 18.3 21 16 21 14.4 21 13 20.3 12 19L14 19C14.6 19 15 18.6 15 18 15 17.4 14.6 17 14 17L10 17C9.4 17 9 17.4 9 18L9 22C9 22.6 9.4 23 10 23 10.6 23 11 22.6 11 22L11 20.9C12.8 22.7 15.4 23.4 17.8 22.8 20.3 22.1 22.2 20.2 22.8 17.7 22.9 17.2 22.6 16.6 22 16.5Z" fill="#3E3D40"/></g></svg>
--- a/browser/extensions/onboarding/content/onboarding-tour-agent.js
+++ b/browser/extensions/onboarding/content/onboarding-tour-agent.js
@@ -19,16 +19,20 @@ document.getElementById("onboarding-over
       Mozilla.UITour.setConfiguration("defaultBrowser");
       break;
     case "onboarding-tour-private-browsing-button":
       Mozilla.UITour.showHighlight("privateWindow");
       break;
     case "onboarding-tour-search-button":
       Mozilla.UITour.openSearchPanel(() => {});
       break;
+    case "onboarding-tour-sync-button":
+      let emailInput = document.getElementById("onboarding-tour-sync-email-input");
+      Mozilla.UITour.showFirefoxAccounts(null, emailInput.value);
+      break;
     case "onboarding-overlay":
     case "onboarding-overlay-close-btn":
       // Dismiss any highlights if a user tries to close the dialog.
       Mozilla.UITour.hideHighlight();
   }
   // Dismiss any highlights if a user tries to change to other tours.
   if (evt.target.classList.contains("onboarding-tour-item")) {
     Mozilla.UITour.hideHighlight();
--- a/browser/extensions/onboarding/content/onboarding.css
+++ b/browser/extensions/onboarding/content/onboarding.css
@@ -61,30 +61,30 @@
   height: 510px;
   background: #f5f5f7;
   border: 1px solid rgba(9, 6, 13, 0.1); /* #09060D, 0.1 opacity */
   border-radius: 3px;
   position: relative;
   margin: 0 calc(50% - 480px);
   top: calc(50% - 255px);
   display: grid;
-  grid-template-rows: [dialog-start] 76px [page-start] 1fr [footer-start] 30px [dialog-end];
+  grid-template-rows: [dialog-start] 70px [page-start] 1fr [footer-start] 30px [dialog-end];
   grid-template-columns: [dialog-start] 230px [page-start] 1fr [dialog-end];
 }
 
 @media (max-height: 510px) {
   #onboarding-overlay.onboarding-opened > #onboarding-overlay-dialog {
     top: 0;
   }
 }
 
 #onboarding-overlay-dialog > header {
   grid-row: dialog-start / page-start;
   grid-column: dialog-start / tour-end;
-  margin-top: 24px;
+  margin-top: 22px;
   margin-bottom: 0;
   margin-inline-end: 0;
   margin-inline-start: 36px;
   font-size: 22px;
   font-weight: 200;
 }
 
 #onboarding-overlay-dialog > nav {
@@ -146,16 +146,57 @@
 }
 
 #onboarding-tour-list > li.onboarding-active,
 #onboarding-tour-list > li:hover {
   border-inline-start-color: #5ce6e6;
   background-color: #fff;
 }
 
+/* Sync tour */
+#onboarding-tour-sync-page form {
+  text-align: center;
+}
+
+#onboarding-tour-sync-page form > h3 {
+  text-align: center;
+  margin: 0;
+  font-size: 22px;
+  font-weight: normal;
+}
+
+#onboarding-tour-sync-page form > p {
+  text-align: center;
+  margin: 3px 0 0 0;
+  font-size: 15px;
+  font-weight: normal;
+}
+
+#onboarding-tour-sync-page form > input {
+  margin-top: 10px;
+  height: 40px;
+  width: 80%;
+  padding: 7px;
+}
+
+#onboarding-tour-sync-page form > button {
+  padding: 10px 20px;
+  min-width: 40%;
+  font-size: 15px;
+  font-weight: normal;
+  line-height: 20px;
+  background: #0d96ff;
+  border: none;
+  border-radius: 3px;
+  color: #fff;
+  box-shadow: 0 1px 0 rgba(0,0,0,0.23);
+  cursor: pointer;
+  margin: 15px 0;
+}
+
 /* Onboarding tour pages */
 .onboarding-tour-page {
   grid-row: page-start / footer-end;
   grid-column: page-start;
   display: grid;
   grid-template-rows: [tour-page-start] 393px [tour-button-start] 1fr [tour-page-end];
   grid-template-columns: [tour-page-start] 368px [tour-content-start] 1fr [tour-page-end];
 }
@@ -278,16 +319,25 @@
 }
 
 #onboarding-tour-default-browser.onboarding-active,
 #onboarding-tour-default-browser:hover,
 #onboarding-notification-bar[data-target-tour-id=onboarding-tour-default-browser] #onboarding-notification-tour-icon {
   background-image: url("img/icons_default-colored.svg");
 }
 
+#onboarding-tour-sync {
+  background-image: url("img/icons_sync.svg");
+}
+
+#onboarding-tour-sync.onboarding-active,
+#onboarding-tour-sync:hover,
+#onboarding-notification-bar[data-target-tour-id=onboarding-tour-sync] #onboarding-notification-tour-icon {
+  background-image: url("img/icons_sync-colored.svg");
+}
 
 /* Tour Notifications */
 #onboarding-notification-bar {
   position: fixed;
   z-index: 998; /* We want this always under #onboarding-overlay */
   left: 0;
   bottom: 0;
   width: 100%;
--- a/browser/extensions/onboarding/content/onboarding.js
+++ b/browser/extensions/onboarding/content/onboarding.js
@@ -30,17 +30,17 @@ const BRAND_SHORT_NAME = Services.string
  *   // The method returing strings used on tour notification
  *   getNotificationStrings(bundle):
  *     - title: // The string of tour notification title
  *     - message: // The string of tour notification message
  *     - button: // The string of tour notification action button title
  *   // Return a div appended with elements for this tours.
  *   // Each tour should contain the following 3 sections in the div:
  *   // .onboarding-tour-description, .onboarding-tour-content, .onboarding-tour-button.
- *   // Add no-button css class in the div if this tour does not need a button.
+ *   // Add onboarding-no-button css class in the div if this tour does not need a button.
  *   // The overlay layout will responsively position and distribute space for these 3 sections based on viewport size
  *   getPage() {},
  * },
  **/
 var onboardingTours = [
   {
     id: "onboarding-tour-private-browsing",
     tourNameId: "onboarding.tour-private-browsing",
@@ -173,16 +173,49 @@ var onboardingTours = [
         </section>
         <aside class="onboarding-tour-button">
           <button id="onboarding-tour-default-browser-button" data-l10n-id="${defaultBrowserButtonId}"></button>
         </aside>
       `;
       return div;
     },
   },
+  {
+    id: "onboarding-tour-sync",
+    tourNameId: "onboarding.tour-sync",
+    getNotificationStrings(bundle) {
+      return {
+        title: bundle.GetStringFromName("onboarding.notification.onboarding-tour-sync.title"),
+        message: bundle.GetStringFromName("onboarding.notification.onboarding-tour-sync.message"),
+        button: bundle.GetStringFromName("onboarding.button.learnMore"),
+      };
+    },
+    getPage(win, bundle) {
+      let div = win.document.createElement("div");
+      div.classList.add("onboarding-no-button");
+      div.innerHTML = `
+        <section class="onboarding-tour-description">
+          <h1 data-l10n-id="onboarding.tour-sync.title"></h1>
+          <p data-l10n-id="onboarding.tour-sync.description"></p>
+        </section>
+        <section class="onboarding-tour-content">
+          <form>
+            <h3 data-l10n-id="onboarding.tour-sync.form.title"></h3>
+            <p data-l10n-id="onboarding.tour-sync.form.description"></p>
+            <input id="onboarding-tour-sync-email-input" type="text"></input><br />
+            <button id="onboarding-tour-sync-button" data-l10n-id="onboarding.tour-sync.button"></button>
+          </form>
+          <img src="resource://onboarding/img/figure_sync.svg" />
+        </section>
+      `;
+      div.querySelector("#onboarding-tour-sync-email-input").placeholder =
+        bundle.GetStringFromName("onboarding.tour-sync.email-input.placeholder");
+      return div;
+    },
+  },
 ];
 
 /**
  * The script won't be initialized if we turned off onboarding by
  * setting "browser.onboarding.enabled" to false.
  */
 class Onboarding {
   constructor(contentWindow) {
@@ -485,17 +518,17 @@ class Onboarding {
     for (let tour of tours) {
       // Create tour navigation items dynamically
       let li = this._window.document.createElement("li");
       li.textContent = this._bundle.GetStringFromName(tour.tourNameId);
       li.id = tour.id;
       li.className = "onboarding-tour-item";
       itemsFrag.appendChild(li);
       // Dynamically create tour pages
-      let div = tour.getPage(this._window);
+      let div = tour.getPage(this._window, this._bundle);
 
       // Do a traverse for elements in the page that need to be localized.
       let l10nElements = div.querySelectorAll("[data-l10n-id]");
       for (let i = 0; i < l10nElements.length; i++) {
         let element = l10nElements[i];
         // We always put brand short name as the first argument for it's the
         // only and frequently used arguments in our l10n case. Rewrite it if
         // other arguments appears.
--- a/browser/extensions/onboarding/locales/en-US/onboarding.properties
+++ b/browser/extensions/onboarding/locales/en-US/onboarding.properties
@@ -57,8 +57,30 @@ onboarding.notification.onboarding-tour-default-browser.message=It doesn’t take much to get the most from %1$S. Just set %1$S as your default browser and put control, customization, and protection on autopilot.
 
 onboarding.hidden-checkbox-label=Hide the tour
 
 #LOCALIZATION NOTE(onboarding.button.learnMore): this string is used as a button label, displayed near the message, and shared across all the onboarding notifications.
 onboarding.button.learnMore=Learn More
 
 # LOCALIZATION NOTE(onboarding.notification-icon-tool-tip): %S is brandShortName.
 onboarding.notification-icon-tool-tip=New to %S?
+
+onboarding.tour-sync=Firefox Sync
+onboarding.tour-sync.title=Sync brings it all together.
+onboarding.tour-sync.description=Access your bookmarks and passwords on any device. You can even send a tab from your laptop to your phone! Better yet, you can choose what you sync and what you don’t.
+
+# LOCALIZATION NOTE(onboarding.tour-sync.form.title): This string is displayed
+# as a title and followed by onboarding.tour-sync.form.description.
+# Your translation should be consistent with the form displayed in
+# about:accounts when signing up to Firefox Account.
+onboarding.tour-sync.form.title=Create a Firefox Account
+
+# LOCALIZATION NOTE(onboarding.tour-sync.form.description): The description
+# continues after onboarding.tour-sync.form.title to create a complete sentence.
+# If it's not possible for your locale, you can translate this string as
+# "Continue to Firefox Sync" instead.
+# Your translation should be consistent with the form displayed in
+# about:accounts when signing up to Firefox Account.
+onboarding.tour-sync.form.description=to continue to Firefox Sync
+onboarding.tour-sync.button=Next
+onboarding.tour-sync.email-input.placeholder=Email
+onboarding.notification.onboarding-tour-sync.title=Pick up where you left off.
+onboarding.notification.onboarding-tour-sync.message=Still sending yourself links to save or read on your phone? Do it the easy way: get Sync and have the things you save here show up on all of your devices.
--- a/browser/extensions/onboarding/test/browser/head.js
+++ b/browser/extensions/onboarding/test/browser/head.js
@@ -6,16 +6,17 @@ let { Preferences } = Cu.import("resourc
 const ABOUT_HOME_URL = "about:home";
 const ABOUT_NEWTAB_URL = "about:newtab";
 const TOUR_IDs = [
   "onboarding-tour-private-browsing",
   "onboarding-tour-addons",
   "onboarding-tour-customize",
   "onboarding-tour-search",
   "onboarding-tour-default-browser",
+  "onboarding-tour-sync",
 ];
 
 function resetOnboardingDefaultState() {
   // All the prefs should be reset to the default states
   // and no need to revert back so we don't use `SpecialPowers.pushPrefEnv` here.
   Preferences.set("browser.onboarding.hidden", false);
   Preferences.set("browser.onboarding.notification.finished", false);
   Preferences.set("browser.onboarding.notification.lastPrompted", "");