Merge pull request #2157 from mozilla/MAC-x-MozillaVPN

✨ MozillaVPN Integration ✨

.eslintrc.js

@@ -19,7 +19,9 @@ module.exports = {
     "OS": true,
     "ADDON_UNINSTALL": true,
     "ADDON_DISABLE": true,
-    "proxifiedContainers": true
+    "proxifiedContainers": true,
+    "MozillaVPN": true,
+    "MozillaVPN_Background": true
   },
   "plugins": [
     "promise",

.stylelintrc

@@ -14,7 +14,7 @@
         ignoreProperties:
           ["inset-block-end", "inset-block-start"]
     }],
-    "property-blacklist": [
+    "property-disallowed-list": [
       "/(min[-]|max[-])height/",
       "/width/",
       "/top/",

src/_locales/en/messages.json

@@ -42,64 +42,52 @@
     "message": "A better way to manage all the things you do online"
   },
   "onboarding-1-description": {
-    "message": "Use containers to organize tasks, manage accounts, and keep your focus where you want it."
-  },
-  "onboarding-1-sec-header": {
-    "message": "A simple and secure way to manage your online life"
-  },
-  "onboarding-1-sec-description": {
-    "message" : "Use containers to organize tasks, manage accounts, and store sensitive data."
+    "message": "Use Containers to organize tasks, manage accounts, and keep your focus where you want it."
   },
   "onboarding-2-header": {
-    "message": "Put containers to work for you."
+    "message": "Put Containers to work for you."
   },
   "onboarding-2-description": {
-    "message": "Features like color-coding and separate container tabs help you find things easily, focus your attention, and minimize distractions."
-  },
-  "onboarding-2-sec-description": {
-    "message": "Color-coding helps you categorize your online life, find things easily, and minimize distractions."
+    "message": "Features like color-coding and separate Container tabs help you find things easily, focus your attention, and minimize distractions."
   },
   "onboarding-3-header": {
     "message": "A place for everything, and everything in its place."
   },
   "onboarding-3-description": {
-    "message": "Start with the containers we've created, or create your own."
-  },
-  "onboarding-3-sec-header": {
-    "message": "Set boundaries for your browsing."
-  },
-  "onboarding-3-sec-description": {
-    "message": "Cookies are stored within a container, so you can segment sensitive data and browsing history to stay organized and to limit the impact of online trackers."
+    "message": "Start with the Containers we’ve created, or create your own."
   },
   "onboarding-4-header": {
-    "message": "Always open sites in the containers you want."
+    "message": "Always open sites in the Containers you want."
   },
   "onboarding-4-description": {
-    "message": "Right-click inside a container tab to assign the site to always open in the container."
+    "message": "Right-click inside a Container tab to assign the site to always open in the Container."
   },
   "onboarding-5-header": {
     "message": "Container tabs when you need them."
   },
   "onboarding-5-description": {
-    "message": "Long-press the New Tab button to create a new container tab."
+    "message": "Long-press the New Tab button to create a new Container tab."
   },
   "onboarding-6-header": {
     "message": "Syncing Containers is now Available!"
   },
   "onboarding-6-description": {
-    "message": "Turn on Sync to share container and site assignments with any computer connected to your Firefox Account."
+    "message": "Turn on Sync to share Container and site assignments with any computer connected to your Firefox account."
   },
   "onboarding-7-header": {
-    "message": "Firefox Account is required to sync."
+    "message": "Firefox account is required to sync."
   },
   "onboarding-7-description": {
-    "message": "Click Sign In to confirm that your Firefox Account is active."
+    "message": "Click Sign In to confirm that your Firefox account is active."
+  },
+  "onboarding-8-description": {
+    "message": "This is a really exciting message about how Container proxies are now supported and about how it’s now really easy to do with Mozilla VPN..."
   },
   "oneHundredTabsHeader": {
     "message": "100 tabs!"
   },
   "youHaveOpened": {
-    "message": "You've opened 100 Container tabs."
+    "message": "You’ve opened 100 Container tabs."
   },
   "spreadTheWord": {
     "message": "If you enjoy Containers, help us spread the word!"
@@ -138,7 +126,7 @@
     "message": "OK"
   },
   "sitesAssignedToThisContainer": {
-    "message": "Sites assigned to this container"
+    "message": "Sites assigned to this Container"
   },
   "options": {
     "message": "Options"
@@ -189,10 +177,10 @@
     "message": "Next"
   },
   "openThisSiteConfirmation": {
-    "message": "Open this site in your assigned container?"
+    "message": "Open this site in your assigned Container?"
   },
   "wouldYouStillLikeToOpenConfirmation": {
-    "message": "Would you still like to open in this current container?"
+    "message": "Would you still like to open in this current Container?"
   },
   "rememberMyDecision": {
     "message": "Remember my decision for this site"
@@ -215,29 +203,29 @@
   "tabBehavior": {
     "message": "Tab behavior:"
   },
-  "firefoxAccountsSync": {
-    "message": "Firefox Accounts Sync:"
-  },
   "enableBookMarkMenus": {
     "message": "Enable Bookmark Menus"
   },
+  "firefoxAccountsSync": {
+    "message": "Firefox accounts sync:"
+  },
   "enableSync": {
-    "message": "Enable Sync"
+    "message": "Enable sync"
   },
   "enableBookMarkMenusDescription": {
-    "message": "This setting allows you to open a bookmark or folder of bookmarks in a container."
+    "message": "This setting allows you to open a bookmark or folder of bookmarks in a Container."
   },
   "enableSyncDescription": {
-    "message": "This setting allows you to sync your containers and site assignments across devices."
+    "message": "This setting allows you to sync your Containers and site assignments across devices."
   },
   "replaceTab": {
-    "message": "This setting allows you to sync your containers and site assignments across devices."
+    "message": "This setting allows you to sync your Containers and site assignments across devices."
   },
   "replaceTabDescription": {
-    "message": "Replace the current tab if a page which is assigned to another container is opened (instead of keeping the current tab open). Opening tabs with middle mouse button is not affected."
+    "message": "Replace the current tab if a page which is assigned to another Container is opened (instead of keeping the current tab open). Opening tabs with middle mouse button is not affected."
   },
   "editWhichContainer": {
-    "message": "Edit which container is opened when using the numbered shortcuts."
+    "message": "Edit which Container is opened when using the numbered shortcuts."
   },
   "keyboardShortCut": {
     "message": "Container to open with Keyboard Shortcut $keyId$",
@@ -266,5 +254,59 @@
         "content": "$1"
       }
     }
+  },
+  "chooseLocation": {
+    "message": "Choose location"
+  },
+  "hide": {
+    "message": "Hide"
+  },
+  "show": {
+    "message": "Show"
+  },
+  "protectEachContainer": {
+    "message": "Protect each Container with Mozilla VPN"
+  },
+  "protectThisContainer": {
+    "message": "Protect this Container with Mozilla VPN"
+  },
+  "advancedProxySettings": {
+    "message": "Advanced proxy settings"
+  },
+  "proxyInputLabel": {
+    "message": "Enter custom proxy"
+  },
+  "useCustomLocation": {
+    "message": "Use custom location for this Container"
+  },
+  "clearproxylabel": {
+    "message": "Clear proxy"
+  },
+  "moz-vpn-connected": {
+    "message": "Mozilla VPN is on"
+  },
+  "moz-vpn-disconnected": {
+    "message": "Mozilla VPN is off"
+  },
+  "invalidProxyAlert": {
+    "message": "Please enter a valid proxy URL"
+  },
+  "mozillaVpnMustBeOn": {
+    "message": "Mozilla VPN app must be on to use this feature."
+  },
+  "learnMore": {
+    "message": "Learn more"
+  },
+  "proxyNowAvailable": {
+    "message": "Mozilla VPN and proxy integration is now available!"
+  },
+  "getMozillaVpn": {
+    "message": "Get Mozilla VPN"
+  },
+  "integratewithmozillavpn": {
+    "message": "Integrate your Containers with Mozilla VPN"
+  },
+  "applyToThisContainer": {
+    "message": "Apply to this Container"
   }
 }

src/css/confirm-page.css

@@ -5,8 +5,8 @@
 
 main {
   background: url(/img/onboarding-4.png) no-repeat;
-  background-position: -10px -15px;
-  background-size: 300px;
+  background-position: 200px 0;
+  background-size: 120px;
   margin-inline-start: -350px;
   padding-inline-start: 350px;
 }
@@ -20,7 +20,7 @@ button .container-name,
   font-weight: bold;
 }
 
-@media only screen and (max-width: 1300px) {
+@media only screen and (max-width: 900px) {
   main {
     background: none;
   }

src/img/arrow-icon-left-light.svg

@@ -0,0 +1,3 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. --><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill="#ffffff" d="M6.414 8l4.293-4.293a1 1 0 0 0-1.414-1.414l-5 5a1 1 0 0 0 0 1.414l5 5a1 1 0 0 0 1.414-1.414z"></path></svg>

src/img/arrow-icon-right-light.svg

@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg width="5px" height="8px" viewBox="0 0 5 8" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 53.2 (72643) - https://sketchapp.com -->
+    <title>Arrow</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <path d="M5.00090934,9.5006316 C4.79840046,9.50099392 4.61567086,9.37916873 4.53812503,9.19209489 C4.4605792,9.00502105 4.5035325,8.78964579 4.64690934,8.6466316 L7.29490934,6.0006316 L4.64690934,3.3546316 C4.45140054,3.1591228 4.45140054,2.8421404 4.64690934,2.6466316 C4.84241814,2.4511228 5.15940054,2.4511228 5.35490934,2.6466316 L8.35490934,5.6466316 C8.44895104,5.74043586 8.50180313,5.86780434 8.50180313,6.0006316 C8.50180313,6.13345886 8.44895104,6.26082734 8.35490934,6.3546316 L5.35490934,9.3546316 C5.26095861,9.44834555 5.13360821,9.5008686 5.00090934,9.5006316 Z" id="path-1"></path>
+    </defs>
+    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.6">
+        <g id="Icons-/-12-/-Arrowhead-Right-12---Thin" transform="translate(-4.000000, -2.000000)">
+            <rect id="bouding-box" x="0" y="0" width="12" height="12"></rect>
+            <mask id="mask-2" fill="white">
+                <use xlink:href="#path-1"></use>
+            </mask>
+            <g id="Shape" fill-rule="nonzero"></g>
+            <g id="Color-/-Photon-/-Primary---Grey-90-80%" mask="url(#mask-2)" fill="#ffffff" fill-opacity="0.8" fill-rule="evenodd">
+                <rect id="Rectangle" x="0" y="0" width="12" height="12"></rect>
+            </g>
+        </g>
+    </g>
+</svg>

src/img/arrow-icon-right.svg

@@ -16,7 +16,7 @@
                 <use xlink:href="#path-1"></use>
             </mask>
             <g id="Shape" fill-rule="nonzero"></g>
-            <g id="Color-/-Photon-/-Primary---Grey-90-80%" mask="url(#mask-2)" fill="#0C0C0D" fill-opacity="0.8" fill-rule="evenodd">
+            <g id="Color-/-Photon-/-Primary---Grey-90-80%" mask="url(#mask-2)" fill="#000000" fill-rule="evenodd">
                 <rect id="Rectangle" x="0" y="0" width="12" height="12"></rect>
             </g>
         </g>

src/img/arrow-toggle.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.71054 11.1175L11.3005 13.7075C11.6905 14.0975 12.3205 14.0975 12.7105 13.7075L15.3005 11.1175C15.9305 10.4875 15.4805 9.4075 14.5905 9.4075H9.41054C8.52054 9.4075 8.08054 10.4875 8.71054 11.1175Z" fill="#6D6D6E"/>
+</svg>

src/img/close-light.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.2225 11.9895L17.7594 7.45261C17.9155 7.29095 18.0019 7.07443 18 6.84969C17.998 6.62495 17.9079 6.40997 17.7489 6.25105C17.59 6.09213 17.375 6.00199 17.1503 6.00003C16.9256 5.99808 16.709 6.08447 16.5474 6.24061L12.0105 10.7775L7.47368 6.24061C7.31202 6.08447 7.0955 5.99808 6.87076 6.00003C6.64602 6.00199 6.43104 6.09213 6.27212 6.25105C6.1132 6.40997 6.02305 6.62495 6.0211 6.84969C6.01914 7.07443 6.10554 7.29095 6.26168 7.45261L10.7985 11.9895L6.26168 16.5263C6.17981 16.6054 6.11451 16.7 6.06959 16.8045C6.02467 16.9091 6.00102 17.0216 6.00003 17.1354C5.99904 17.2492 6.02073 17.3621 6.06383 17.4674C6.10693 17.5728 6.17057 17.6685 6.25105 17.7489C6.33153 17.8294 6.42723 17.8931 6.53257 17.9362C6.63791 17.9793 6.75078 18.001 6.86459 18C6.9784 17.999 7.09088 17.9753 7.19545 17.9304C7.30003 17.8855 7.39461 17.8202 7.47368 17.7383L12.0105 13.2015L16.5474 17.7383C16.709 17.8945 16.9256 17.9809 17.1503 17.9789C17.375 17.9769 17.59 17.8868 17.7489 17.7279C17.9079 17.569 17.998 17.354 18 17.1292C18.0019 16.9045 17.9155 16.688 17.7594 16.5263L13.2225 11.9895Z" fill="#ffffff"/>
+</svg>

src/img/close.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.2225 11.9895L17.7594 7.45261C17.9155 7.29095 18.0019 7.07443 18 6.84969C17.998 6.62495 17.9079 6.40997 17.7489 6.25105C17.59 6.09213 17.375 6.00199 17.1503 6.00003C16.9256 5.99808 16.709 6.08447 16.5474 6.24061L12.0105 10.7775L7.47368 6.24061C7.31202 6.08447 7.0955 5.99808 6.87076 6.00003C6.64602 6.00199 6.43104 6.09213 6.27212 6.25105C6.1132 6.40997 6.02305 6.62495 6.0211 6.84969C6.01914 7.07443 6.10554 7.29095 6.26168 7.45261L10.7985 11.9895L6.26168 16.5263C6.17981 16.6054 6.11451 16.7 6.06959 16.8045C6.02467 16.9091 6.00102 17.0216 6.00003 17.1354C5.99904 17.2492 6.02073 17.3621 6.06383 17.4674C6.10693 17.5728 6.17057 17.6685 6.25105 17.7489C6.33153 17.8294 6.42723 17.8931 6.53257 17.9362C6.63791 17.9793 6.75078 18.001 6.86459 18C6.9784 17.999 7.09088 17.9753 7.19545 17.9304C7.30003 17.8855 7.39461 17.8202 7.47368 17.7383L12.0105 13.2015L16.5474 17.7383C16.709 17.8945 16.9256 17.9809 17.1503 17.9789C17.375 17.9769 17.59 17.8868 17.7489 17.7279C17.9079 17.569 17.998 17.354 18 17.1292C18.0019 16.9045 17.9155 16.688 17.7594 16.5263L13.2225 11.9895Z" fill="black"/>
+</svg>