start mozilla vpn integration

package.json

@@ -2,7 +2,7 @@
   "name": "testpilot-containers",
   "title": "Multi-Account Containers",
   "description": "Containers helps you keep all the parts of your online life contained in different tabs. Custom labels and color-coded tabs help keep different activities — like online shopping, travel planning, or checking work email — separate.",
-  "version": "8.0.0",
+  "version": "9.0.0",
   "author": "Andrea Marchesini, Luke Crouch and Jonathan Kingston",
   "bugs": {
     "url": "https://github.com/mozilla/multi-account-containers/issues"
@@ -25,7 +25,7 @@
     "stylelint": "^13.5.0",
     "stylelint-config-standard": "^20.0.0",
     "stylelint-order": "^4.0.0",
-    "web-ext": "^5.4.1",
+    "web-ext": "^5.5.0",
     "webextensions-jsdom": "^1.2.1"
   },
   "homepage": "https://github.com/mozilla/multi-account-containers#readme",

src/css/popup.css

@@ -839,6 +839,21 @@ hr {
   padding-inline-start: 17px;
 }
 
+.mozilla-proxy-btn {
+  background-color: black;
+  background-image: url("/img/mozillavpn.png");
+  background-repeat: no-repeat;
+  background-size: 2em 2em;
+  border: 0;
+  border-radius: 2px;
+  color: white;
+  cursor: pointer;
+  height: 30px;
+  inline-size: 100%;
+  line-height: 30px;
+  text-align: center;
+}
+
 .delete-btn {
   background-color: rgba(12, 12, 13, 0.1);
   border: 0;

src/js/background/backgroundLogic.js

@@ -22,12 +22,51 @@ const backgroundLogic = {
   },
 
   async getExtensionInfo() {
-    const manifestPath = browser.extension.getURL("manifest.json");
+    const manifestPath = browser.runtime.getURL("manifest.json");
     const response = await fetch(manifestPath);
     const extensionInfo = await response.json();
     return extensionInfo;
   },
 
+  async getMullvadInfo() {
+    const amIMullvadPath = "https://am.i.mullvad.net/json";
+
+    // TODO: Add some sort of error catching
+    const mullvadFetchData = await fetch(amIMullvadPath)
+      .then((response) => response.json())
+      .then(data => {
+        return data;
+      });
+
+    return await mullvadFetchData;
+  },
+
+  async getMullvadServers() {
+    const port = browser.runtime.connectNative("mozillavpnnp");
+
+    port.onMessage.addListener(response => {
+      console.log("Received message: " + JSON.stringify(response));
+    });
+
+    port.postMessage({t: "servers"});
+    console.log("getMullvadServers");
+    const mullvadServersPath = "https://stage-vpn.guardian.nonprod.cloudops.mozgcp.net:443/api/v1/vpn/servers";
+    console.log(`mullvadServersPath: ${mullvadServersPath}`);
+    const response = await fetch(mullvadServersPath, {
+      "credentials": "omit",
+      "headers": {
+        "Accept": "application/json",
+        "Accept-Encoding": "gzip, deflate, br",
+        "Accept-Language": "en-US,en;q=0.5",
+        "Host": "stage-vpn.guardian.nonprod.cloudops.mozgcp.net",
+      },
+      "method": "GET",
+      "mode": "cors"
+    });
+    console.log(`response: ${response}`);
+    return await response.json();
+  },
+
   getUserContextIdFromCookieStoreId(cookieStoreId) {
     if (!cookieStoreId) {
       return false;
@@ -376,4 +415,4 @@ const backgroundLogic = {
 };
 
 
-backgroundLogic.init();
+backgroundLogic.init();

src/js/background/messageHandler.js

@@ -106,6 +106,12 @@ const messageHandler = {
           return assignManager._setOrRemoveAssignment(tab.id, m.url, m.newUserContextId, m.value);
         });
         break;
+      case "getMullvadInfo":
+        response = await backgroundLogic.getMullvadInfo();
+        break;
+      case "getMullvadServers":
+        response = await backgroundLogic.getMullvadServers();
+        break;
       }
       return response;
     });

src/js/popup.js

@@ -29,6 +29,7 @@ const ALWAYS_OPEN_IN_PICKER = "always-open-in";
 const P_CONTAINER_INFO = "containerInfo";
 const P_CONTAINER_EDIT = "containerEdit";
 const P_CONTAINER_DELETE = "containerDelete";
+const P_CONTAINER_MOZ_VPN_PROXY = "containerMozVpnProxy";
 const P_CONTAINERS_ACHIEVEMENT = "containersAchievement";
 const P_CONTAINER_ASSIGNMENTS = "containerAssignments";
 
@@ -41,7 +42,7 @@ function addRemoveSiteIsolation() {
 }
 
 async function getExtensionInfo() {
-  const manifestPath = browser.extension.getURL("manifest.json");
+  const manifestPath = browser.runtime.getURL("manifest.json");
   const response = await fetch(manifestPath);
   const extensionInfo = await response.json();
   return extensionInfo;
@@ -265,9 +266,6 @@ const Logic = {
       const panelElement = document.querySelector(this.getPanelSelector(panelItem));
       if (!panelElement.classList.contains("hide")) {
         panelElement.classList.add("hide");
-        if ("unregister" in panelItem) {
-          panelItem.unregister();
-        }
       }
     });
     const panelEl = document.querySelector(this.getPanelSelector(this._panels[panel]));
@@ -665,9 +663,6 @@ Logic.registerPanel(P_CONTAINERS_LIST, {
 
   },
 
-  unregister() {
-  },
-
   // This method is called when the panel is shown.
   async prepare() {
     const fragment = document.createDocumentFragment();
@@ -1463,6 +1458,12 @@ Logic.registerPanel(P_CONTAINER_EDIT, {
     Utils.addEnterHandler(deleteButton, () => {
       Logic.showPanel(P_CONTAINER_DELETE, identity);
     });
+
+    const mozillaVpnButton = document.getElementById("mozilla-proxy-button");
+    Utils.addEnterHandler(mozillaVpnButton, () => {
+      Logic.showPanel(P_CONTAINER_MOZ_VPN_PROXY, identity);
+    });
+
     return Promise.resolve(null);
   },
 
@@ -1517,6 +1518,57 @@ Logic.registerPanel(P_CONTAINER_DELETE, {
   },
 });
 
+// P_CONTAINER_MOZ_VPN_PROXY: Choose a Mozilla VPN Proxy node
+// ----------------------------------------------------------------------------
+
+Logic.registerPanel(P_CONTAINER_MOZ_VPN_PROXY, {
+  panelSelector: "#moz-vpn-proxy-panel",
+
+  // This method is called when the object is registered.
+  initialize() {
+    Utils.addEnterHandler(document.querySelector("#choose-moz-vpn-proxy-cancel-link"), () => {
+      Logic.showPreviousPanel();
+    });
+    Utils.addEnterHandler(document.querySelector("#close-moz-vpn-proxy-panel"), () => {
+      Logic.showPreviousPanel();
+    });
+    Utils.addEnterHandler(document.querySelector("#choose-moz-vpn-proxy-ok-link"), async () => {
+      try {
+        alert("assign the proxy to the container here!");
+        Logic.showPanel(P_CONTAINER_INFO, Logic.currentIdentity());
+      } catch (e) {
+        Logic.showPanel(P_CONTAINER_INFO, Logic.currentIdentity());
+      }
+    });
+  },
+
+  // This method is called when the panel is shown.
+  async prepare() {
+    const serversListEl = document.getElementById("choose-moz-vpn-proxy-server-list");
+    const promoEl = document.getElementById("choose-moz-vpn-proxy-promo");
+    const mullvadInfo = await browser.runtime.sendMessage({
+      method: "getMullvadInfo"
+    });
+    console.log(`mullvadInfo: ${mullvadInfo}`);
+    console.log(`mullvadInfo.mullvad_exit_ip: ${mullvadInfo.mullvad_exit_ip}`);
+    if (mullvadInfo.mullvad_exit_ip) {
+      const mullvadServers = await browser.runtime.sendMessage({
+        method: "getMullvadServers"
+      });
+      const serversUl = document.createElement("ul");
+      for (const country of mullvadServers.countries) {
+        const serverLi = document.createElement("li");
+        serverLi.innerHtml = Utils.escaped`${country.name}`;
+        serversUl.appendChild(serverLi);
+      }
+      serversListEl.appendChild(serversUl);
+      promoEl.classList.add("hide");
+      serversListEl.classList.remove("hide");
+      return Promise.resolve(null);
+    }
+  }
+});
+
 // P_CONTAINERS_ACHIEVEMENT: Page for achievement.
 // ----------------------------------------------------------------------------
 

src/js/proxified-containers.js

@@ -111,7 +111,7 @@ proxifiedContainers = {
 
   //Parses a proxy description string of the format type://host[:port] or type://username:password@host[:port] (port is optional)
   parseProxy(proxy_str) {
-    const proxyRegexp = /(?<type>(https?)|(socks4?)):\/\/(\b(?<username>\w+):(?<password>\w+)@)?(?<host>((?:\d{1,3}\.){3}\d{1,3}\b)|(\b(\w+)(\.(\w+))+))(:(?<port>\d+))?/;
+    const proxyRegexp = /(?<type>(https?)|(socks4?)):\/\/(\b(?<username>\w+):(?<password>\w+)@)?(?<host>((?:\d{1,3}\.){3}\d{1,3}\b)|(\b([\w.-]+)(\.([\w.-]+))+))(:(?<port>\d+))?/;
     if (proxyRegexp.test(proxy_str) !== true) {
       return false;
     }

src/manifest.json

@@ -1,7 +1,7 @@
 {
   "manifest_version": 2,
   "name": "Firefox Multi-Account Containers",
-  "version": "8.0.0",
+  "version": "9.0.0",
   "incognito": "not_allowed",
   "description": "Multi-Account Containers helps you keep all the parts of your online life contained in different tabs. Custom labels and color-coded tabs help keep different activities — like online shopping, travel planning, or checking work email — separate.",
   "icons": {
@@ -10,7 +10,7 @@
   },
   "applications": {
     "gecko": {
-      "id": "@testpilot-containers",
+      "id": "vpn@mozilla.org",
       "strict_min_version": "67.0"
     }
   },
@@ -24,11 +24,14 @@
     "history",
     "idle",
     "management",
+    "nativeMessaging",
     "storage",
     "tabs",
     "webRequestBlocking",
     "webRequest",
-    "proxy"
+    "proxy",
+
+    "https://stage-vpn.guardian.nonprod.cloudops.mozgcp.net:443/*"
   ],
   "optional_permissions": [
     "bookmarks"

src/popup.html

@@ -301,6 +301,7 @@
         </fieldset>
         <fieldset>
           <legend>Proxy (Optional)</legend>
+          <a class="mozilla-proxy-btn" id="mozilla-proxy-button">Use Mozilla VPN</a>
           <input type="text" name="container-proxy" id="edit-container-panel-proxy" maxlength="50" placeholder="type://host:port"/>
         </fieldset>
       </form>
@@ -360,6 +361,28 @@
     </div>
   </div>
 
+  <div class="panel moz-vpn-proxy-panel hide" id="moz-vpn-proxy-panel">
+    <h3 class="title" id="moz-vpn-proxy-title">
+      Mozilla VPN Proxies
+    </h3>
+    <button class="btn-return arrow-left" id="close-moz-vpn-proxy-panel"></button>
+    <hr>
+    <div class="scrollable panel-content choose-moz-vpn-proxy">
+      <div id="choose-moz-vpn-proxy-server-list" class="hide">
+        <h4 class="choose-moz-vpn-proxy-title">Select a proxy server</h4>
+      </div>
+      <div id="choose-moz-vpn-proxy-promo">
+        <h4>Mozilla VPN</h4>
+        <p>You aren't connected to Mozilla VPN.</p>
+        <p>Connect to <a href="https://vpn.mozilla.org">Mozilla VPN</a> to use its proxy.</p>
+      </div>
+    </div>
+    <div class="panel-footer">
+      <a href="#" class="button expanded secondary footer-button cancel-button" id="choose-moz-vpn-proxy-cancel-link">Cancel</a>
+      <a href="#" class="button expanded primary footer-button" id="choose-moz-vpn-proxy-ok-link">OK</a>
+    </div>
+  </div>
+
   <script src="js/utils.js"></script>
   <script src="js/proxified-containers.js"></script>
   <script src="js/popup.js"></script>