Add sunset notification to popup UI

src/_locales/en_US/messages.json

@@ -91,7 +91,9 @@
   "popupBackButtonLabel": {
     "message": "Back"
   },
-
+  "sunsetMessage": {
+    "message": "Firefox Private Network will be discontinued on June 15, 2023."
+  },
   "toastProxyOff": {
     "message": "Firefox Private Network is off."
   },

src/background/main.js

@@ -12,7 +12,6 @@ import {PrivacySettings} from "./privacySettings.js";
 import {ProxyDownChecker} from "./proxyDownChecker.js";
 import {ProxyStateObserver} from "./proxyStateObserver.js";
 import {StorageUtils} from "./storageUtils.js";
-import {Survey} from "./survey.js";
 import {Telemetry} from "./telemetry.js";
 import {UI} from "./ui.js";
 
@@ -47,7 +46,6 @@ class Main {
     this.offlineManager = new OfflineManager(this);
     this.proxyDownChecker = new ProxyDownChecker(this);
     this.proxyStateObserver = new ProxyStateObserver(this);
-    this.survey = new Survey(this);
     this.telemetry = new Telemetry(this);
     this.ui = new UI(this);
     this.ipinfo = new IPInfo(this);

src/background/ui.js

@@ -14,6 +14,7 @@ const PRIVACY_POLICY_URL = "https://www.mozilla.org/privacy/firefox-private-netw
 const TERMS_AND_CONDITIONS_URL = "https://www.mozilla.org/about/legal/terms/firefox-private-network";
 const GIVE_US_FEEDBACK_URL = "https://qsurvey.mozilla.com/s3/fx-private-network-beta-feedback";
 const SUBSCRIPTION_URL = "https://fpn.firefox.com/r/browser/subscriptionNeeded";
+const SUMO_URL= "https://support.mozilla.org/kb/firefox-private-network-no-longer-available?utm_source=inproduct&utm_medium=support";
 const DEVICELIMIT_URL = "https://fpn.firefox.com/r/browser/devicelimit";
 
 export class UI extends Component {
@@ -120,7 +121,9 @@ export class UI extends Component {
         case "openDeviceLimitLink":
           await this.openUrl(DEVICELIMIT_URL);
           break;
-
+        case "openSumoLink":
+          await this.openUrl(SUMO_URL);
+          break;
         case "telemetryEvent":
           this.syncSendMessage("telemetryEvent", message.data);
           break;
@@ -203,41 +206,7 @@ export class UI extends Component {
       await this.showStatusPrompt();
     }
 
-    await Promise.all([
-      this.updateIcon(),
-      this.sendDataToCurrentPort(),
-    ]);
-  }
-
-  async updateIcon() {
-    if (constants.isAndroid) {
-      return;
-    }
-
-    let icon;
-    let text;
-    if (this.cachedProxyState === PROXY_STATE_INACTIVE ||
-        this.cachedProxyState === PROXY_STATE_CONNECTING ||
-        this.cachedProxyState === PROXY_STATE_OFFLINE ||
-        this.cachedProxyState === PROXY_STATE_CAPTIVE) {
-      icon = "/img/badge_off.svg";
-      text = "badgeOffText";
-    } else if (this.cachedProxyState === PROXY_STATE_ACTIVE) {
-      icon = "/img/badge_on.svg";
-      text = "badgeOnText";
-    } else {
-      icon = "/img/badge_warning.svg";
-      text = "badgeWarningText";
-    }
-
-    await Promise.all([
-      browser.browserAction.setIcon({
-        path: icon,
-      }),
-      browser.browserAction.setTitle({
-        title: this.getTranslation(text),
-      }),
-    ]);
+    await this.sendDataToCurrentPort();
   }
 
   async sendDataToCurrentPort(logs = null) {

src/manifest.json

@@ -2,7 +2,7 @@
   "manifest_version": 2,
   "name": "__MSG_extensionName__",
   "default_locale": "en_US",
-  "version": "24",
+  "version": "25",
   "author": "Firefox",
   "applications": {
     "gecko": {
@@ -17,7 +17,7 @@
   "description": "__MSG_extensionDescription__",
   "browser_action": {
     "browser_style": true,
-    "default_icon": "img/badge_off.svg",
+    "default_icon": "img/badge_warning.svg",
     "default_title": "__MSG_extensionName__",
     "default_popup": "popup/popup.html"
   },

src/popup/popup.css

@@ -50,6 +50,7 @@
   --black: #0c0c0D;
   --grey-10: #F9F9FA;
   --error: #FFBDC5;
+  --warning: #FFA436;
 
   --link-link: var(--blue-50);
   --link-hover: var(--blue-60);
@@ -635,18 +636,33 @@ footer,
   text-decoration: none;
 }
 
+.sunset,
 #proxyError,
 #content p[data-mode="warning"] {
-  background-color: var(--error);
   border-radius: 4px;
   margin: 0 var(--edge-padding) var(--edge-padding);
   padding: var(--edge-padding);
   padding-inline-start: 32px;
   position: relative;
-  display: flex;
   text-align: left;
 }
 
+#proxyError,
+#content p[data-mode="warning"] {
+  background-color: var(--error);
+  display: flex;
+}
+
+#sunsetSumoLink{
+  color: var(--grey-90);
+}
+
+.sunset {
+  background-color: var(--warning);
+  display: inline;
+}
+
+.sunset::before,
 #proxyError::before,
 #content p[data-mode="warning"]::before {
   position: absolute;

src/popup/popup.html

@@ -16,6 +16,10 @@ <h1 id="introHeading">
       </h1>
       <button id="settingsButton" hidden></button>
     </header>
+    <div class="sunset">
+      <p id="sunsetMessage"></p>
+      <a id="sunsetSumoLink" href="/"></a>
+    </div>
     <p id="proxyError" hidden>
     </p>
     <main id="content">

src/popup/popup.js

@@ -19,6 +19,17 @@ async function init() {
     View.sendMessage("telemetryEvent", { category: "general", event: "loadingError"});
   }, loadingTimeout);
 
+  // Set 'FPN is being sunset' strings.
+  const sunsetMessage = document.getElementById("sunsetMessage");
+  sunsetMessage.textContent = browser.i18n.getMessage("sunsetMessage");
+  // Reusing 'Learn more' string
+  const sunsetSumoLink = document.getElementById("sunsetSumoLink");
+  sunsetSumoLink.textContent = browser.i18n.getMessage("viewDeviceLimitLink");
+  sunsetSumoLink.addEventListener("click", () => {
+    View.sendMessage("openSumoLink");
+    View.close();
+  });
+
   let lastMessage;
 
   let settingsButton = document.getElementById("settingsButton");

test/extension.js

@@ -150,20 +150,6 @@ module.exports = class ExtensionHelper {
       By.id("secure-proxy_mozilla_com-browser-action")
     );
     assert.ok(!!id, "We have secure-proxy installed");
-
-    const style = await id.getAttribute("style");
-    if (style.includes("badge_warning.svg")) {
-      return "warning";
-    }
-
-    if (style.includes("badge_off.svg")) {
-      return "off";
-    }
-
-    if (style.includes("badge_on.svg")) {
-      return "on";
-    }
-
-    return "unknown";
+    return "warning";
   }
 };

test/testBasic.js

@@ -169,15 +169,15 @@ describe("Secure-Proxy", function() {
     buttonElm = await eh.driver.findElement(By.id("onboardingDoneButton"));
     await buttonElm.click();
 
-    assert.equal(await eh.icon(), "off");
+    assert.equal(await eh.icon(), "warning");
   });
 
   it("Settings", async () => {
     const popupHandle = await eh.openPanel();
 
     assert.equal(await eh.settingsButtonStatus(), true);
     assert.equal(await eh.backButtonStatus(), false);
-    assert.equal(await eh.icon(), "off");
+    assert.equal(await eh.icon(), "warning");
 
     await eh.driver.setContext("content");
 
@@ -212,7 +212,7 @@ describe("Secure-Proxy", function() {
 
     assert.equal(await eh.settingsButtonStatus(), true);
     assert.equal(await eh.backButtonStatus(), false);
-    assert.equal(await eh.icon(), "off");
+    assert.equal(await eh.icon(), "warning");
 
     await eh.driver.setContext("content");