Add message when os is not supported (#70)

mozilla-extensions · Sep 26, 2024 · b12458f · b12458f
1 parent e9d0fb4
commit b12458f
Show file tree

Hide file tree

Showing 7 changed files with 94 additions and 6 deletions.
diff --git a/src/_locales/en/messages.json b/src/_locales/en/messages.json
@@ -161,5 +161,14 @@
   "useDefaultLocationExplainer": {
     "message": "This is always the same location as selected in your Mozilla VPN desktop app.",
     "description": "Explanation of what 'Use default Mozilla VPN Location' means."
+  },
+  "headerUnsupportedOSMessage": {
+    "message": "Unsupported platform"
+  },
+  "bodyUnsupportedOSMessage": {
+    "message": "Currently, the Mozilla VPN extension is only available on Windows devices."
+  },
+  "footnoteUnsupportedOSMessage": {
+    "message": "We’re working to bring support to macOS and Linux soon!"
   }
 }
diff --git a/src/assets/img/message-os.svg b/src/assets/img/message-os.svg
diff --git a/src/background/vpncontroller/vpncontroller.js b/src/background/vpncontroller/vpncontroller.js
@@ -43,6 +43,7 @@ export class VPNController extends Component {
     state: PropertyType.Bindable,
     postToApp: PropertyType.Function,
     isolationKey: PropertyType.Bindable,
+    featureList: PropertyType.Bindable,
   };
 
   get state() {
@@ -54,6 +55,10 @@ export class VPNController extends Component {
   get isExcluded() {
     return this.#isExcluded;
   }
+  /** @type {IBindable<FeatureFlags>} */
+  get featureList() {
+    return this.#mFeaturelist;
+  }
 
   async initNativeMessaging() {
     log("initNativeMessaging");
@@ -150,6 +155,11 @@ export class VPNController extends Component {
           this.#increaseIsolationKey();
         }
         break;
+      case "featurelist":
+        this.#mFeaturelist.set({
+          ...new FeatureFlags(),
+          ...response.featurelist,
+        });
       default:
         throw Error("Unexpeted Message type: " + response.t);
     }
@@ -171,6 +181,7 @@ export class VPNController extends Component {
         this.postToApp("status");
         this.postToApp("servers");
         this.postToApp("disabled_apps");
+        this.postToApp("featurelist");
       });
       return;
     }
@@ -203,6 +214,8 @@ export class VPNController extends Component {
   // @ts-ignore
   #mServers = property([]);
 
+  #mFeaturelist = property(new FeatureFlags());
+
   #isExcluded = property(false);
 }
 
@@ -323,3 +336,8 @@ export function fromVPNStatusResponse(
   }
   return;
 }
+
+export class FeatureFlags {
+  localProxy = true;
+  webExtension = true;
+}
diff --git a/src/components/prefab-screens.js b/src/components/prefab-screens.js
@@ -11,6 +11,8 @@ const open = (url) => {
     url,
   });
 };
+const sumoLink =
+  "https://support.mozilla.org/products/firefox-private-network-vpn";
 
 const defineMessageScreen = (
   tag,
@@ -20,8 +22,7 @@ const defineMessageScreen = (
   primaryAction,
   onPrimaryAction,
   secondarAction = tr("getHelp"),
-  onSecondaryAction = () =>
-    open("https://support.mozilla.org/products/firefox-private-network-vpn")
+  onSecondaryAction = () => open(sumoLink)
 ) => {
   const body =
     typeof bodyText === "string" ? html`<p>${bodyText}</p>` : bodyText;
@@ -85,3 +86,15 @@ defineMessageScreen(
     open("https://www.mozilla.org/products/vpn/download/");
   }
 );
+
+defineMessageScreen(
+  "unsupported-os-message-screen",
+  "message-os.svg",
+  tr("headerUnsupportedOSMessage"),
+  html`
+    <p>${tr("bodyUnsupportedOSMessage")}</p>
+    <p class="footnote">${tr("footnoteUnsupportedOSMessage")}</p>
+  `,
+  null,
+  null
+);
diff --git a/src/ui/browserAction/backend.js b/src/ui/browserAction/backend.js
@@ -14,6 +14,7 @@ import { getExposedObject } from "../../shared/ipc.js";
  * Manually define the types for convinence, please update if making changes :)
  *
  * @typedef {Object} vpnController
+ * @property {IBindable<any>} featureList - A bindable property that contains the list or configuration of VPN servers.
  * @property {IBindable<ServerCountryList>} servers - A bindable property that contains the list or configuration of VPN servers.
  * @property {IBindable<Boolean>} isExcluded - A bindable property that indicates whether the VPN is excluded from certain operations.
  * @property {IBindable<State>} state - A bindable property representing the current state of the VPN controller (e.g., connected, disconnected).

diff --git a/src/ui/browserAction/popup.html b/src/ui/browserAction/popup.html
@@ -19,6 +19,9 @@
   </head>
   <body>
     <popup-condview>
+      <unsupported-os-message-screen
+        slot="MessageOSNotSupported"
+      ></unsupported-os-message-screen>
       <install-message-screen slot="MessageInstallVPN">
       </install-message-screen>
       <signin-message-screen slot="MessageSignIn"></signin-message-screen>

diff --git a/src/ui/browserAction/popupConditional.js b/src/ui/browserAction/popupConditional.js
@@ -3,6 +3,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 import { ConditionalView } from "../../components/conditional-view.js";
+import { propertySum } from "../../shared/property.js";
 import { vpnController } from "./backend.js";
 
 export class PopUpConditionalView extends ConditionalView {
@@ -12,9 +13,14 @@ export class PopUpConditionalView extends ConditionalView {
 
   connectedCallback() {
     super.connectedCallback();
-    vpnController.state.subscribe((s) => {
-      this.slotName = PopUpConditionalView.toSlotname(s);
-    });
+    propertySum(
+      vpnController.state,
+      vpnController.featureList,
+      (state, features) => {
+        this.slotName = PopUpConditionalView.toSlotname(state, features);
+      }
+    );
+
     // Messages may dispatch an event requesting to send a Command to the VPN
     this.addEventListener("requestMessage", (e) => {
       console.log(`Message requested ${e}`);
@@ -29,17 +35,22 @@ export class PopUpConditionalView extends ConditionalView {
   }
 
   /**
+   * @typedef {import("../../background/vpncontroller/vpncontroller.js").FeatureFlags} FeatureFlags
    * @typedef {import("../../background/vpncontroller/states.js").VPNState} State
    * @param {State} state
+   * @param {FeatureFlags} features
    * @returns {String}
    */
-  static toSlotname(state) {
+  static toSlotname(state, features) {
     if (!state.installed) {
       return "MessageInstallVPN";
     }
     if (!state.alive) {
       return "MessageStartVPN";
     }
+    if (!features.webExtension) {
+      return "MessageOSNotSupported";
+    }
     if (!state.authenticated) {
       return "MessageSignIn";
     }