fixup! MB 39: Add home page about:mullvad-browser

Bug 271: Show update in about:mullvad-browser

browser/components/BrowserGlue.sys.mjs

@@ -370,6 +370,20 @@ let JSWINDOWACTORS = {
     matches: ["about:messagepreview", "about:messagepreview?*"],
   },
 
+  AboutMullvadBrowser: {
+    parent: {
+      esModuleURI: "resource:///actors/AboutMullvadBrowserParent.sys.mjs",
+    },
+    child: {
+      esModuleURI: "resource:///actors/AboutMullvadBrowserChild.sys.mjs",
+      events: {
+        DOMContentLoaded: {},
+      },
+    },
+
+    matches: ["about:mullvad-browser"],
+  },
+
   AboutPlugins: {
     parent: {
       esModuleURI: "resource:///actors/AboutPluginsParent.sys.mjs",

browser/components/mullvad-browser/AboutMullvadBrowserChild.sys.mjs

+export class AboutMullvadBrowserChild extends JSWindowActorChild {
+  handleEvent(event) {
+    switch (event.type) {
+      case "DOMContentLoaded":
+        this.sendQuery("AboutMullvadBrowser:GetUpdateData").then(data => {
+          const updateEvent = new this.contentWindow.CustomEvent("UpdateData", {
+            detail: Cu.cloneInto(data, this.contentWindow),
+          });
+          this.contentWindow.dispatchEvent(updateEvent);
+        });
+        break;
+    }
+  }
+}

browser/components/mullvad-browser/AboutMullvadBrowserParent.sys.mjs

+export class AboutMullvadBrowserParent extends JSWindowActorParent {
+  receiveMessage(message) {
+    const shouldNotifyPref = "mullvadbrowser.post_update.shouldNotify";
+    switch (message.name) {
+      case "AboutMullvadBrowser:GetUpdateData":
+        if (!Services.prefs.getBoolPref(shouldNotifyPref, false)) {
+          return Promise.resolve(null);
+        }
+        Services.prefs.clearUserPref(shouldNotifyPref);
+        return Promise.resolve({
+          version: Services.prefs.getCharPref(
+            "browser.startup.homepage_override.mullvadbrowser.version"
+          ),
+          url:
+            Services.prefs.getCharPref("mullvadbrowser.post_update.url", "") ||
+            Services.urlFormatter.formatURLPref(
+              "startup.homepage_override_url"
+            ),
+        });
+    }
+    return undefined;
+  }
+}

browser/components/mullvad-browser/content/2728-sparkles.svg

+<!-- FROM https://github.com/twitter/twemoji
+   - licensed under CC-BY 4.0: https://creativecommons.org/licenses/by/4.0/ -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36"><path fill="#FFAC33" d="M34.347 16.893l-8.899-3.294-3.323-10.891c-.128-.42-.517-.708-.956-.708-.439 0-.828.288-.956.708l-3.322 10.891-8.9 3.294c-.393.146-.653.519-.653.938 0 .418.26.793.653.938l8.895 3.293 3.324 11.223c.126.424.516.715.959.715.442 0 .833-.291.959-.716l3.324-11.223 8.896-3.293c.391-.144.652-.518.652-.937 0-.418-.261-.792-.653-.938z"/><path fill="#FFCC4D" d="M14.347 27.894l-2.314-.856-.9-3.3c-.118-.436-.513-.738-.964-.738-.451 0-.846.302-.965.737l-.9 3.3-2.313.856c-.393.145-.653.52-.653.938 0 .418.26.793.653.938l2.301.853.907 3.622c.112.444.511.756.97.756.459 0 .858-.312.97-.757l.907-3.622 2.301-.853c.393-.144.653-.519.653-.937 0-.418-.26-.793-.653-.937zM10.009 6.231l-2.364-.875-.876-2.365c-.145-.393-.519-.653-.938-.653-.418 0-.792.26-.938.653l-.875 2.365-2.365.875c-.393.146-.653.52-.653.938 0 .418.26.793.653.938l2.365.875.875 2.365c.146.393.52.653.938.653.418 0 .792-.26.938-.653l.875-2.365 2.365-.875c.393-.146.653-.52.653-.938 0-.418-.26-.792-.653-.938z"/></svg>

browser/components/mullvad-browser/content/aboutMullvadBrowser.css

@@ -44,14 +44,14 @@ p {
 
 #header {
   display: grid;
-  grid-template-rows: auto auto;
-  grid-template-columns: auto;
+  grid-template: "heading" auto "text" auto / auto;
   justify-items: center;
   align-content: center;
   gap: 1.5em;
 }
 
 #headingContainer {
+  grid-area: heading;
   display: inline flex;
   flex-direction: row;
   white-space: nowrap;
@@ -59,6 +59,32 @@ p {
   gap: 16px;
 }
 
+#mullvad-browser-update,
+#mullvad-browser-intro {
+  grid-area: text;
+}
+
+body:not(.has-update) #mullvad-browser-update {
+  display: none;
+}
+
+body:not(.no-update) #mullvad-browser-intro {
+  /* Invisible but still reserves space for when the page is initially loaded to
+   * prevent the Mullvad title from jumping. */
+  visibility: hidden;
+}
+
+#mullvad-browser-update-img {
+  height: 1em;
+  vertical-align: sub;
+  margin-inline-end: 0.3em;
+}
+
+#mullvad-browser-update a {
+  /* Increase gap between the link and the rest of the text. */
+  margin-inline: 0.4em;
+}
+
 #footer {
   padding-block: 40px;
   background: rgba(0, 0, 0, 0.2);

browser/components/mullvad-browser/content/aboutMullvadBrowser.js

+"use strict";
+
+window.addEventListener("UpdateData", event => {
+  const detail = event.detail;
+  if (detail) {
+    const { url, version } = detail;
+
+    const text = document.getElementById("mullvad-browser-update");
+    document.l10n.setAttributes(
+      text.querySelector("span"),
+      "about-mullvad-browser-update-message",
+      { version }
+    );
+    text.querySelector("a").href = url;
+  }
+  // Before the first call, neither the intro nor update text are shown, this
+  // prevents the intro text from flashing in and out when we have an update.
+  document.body.classList.toggle("no-update", !detail);
+  document.body.classList.toggle("has-update", !!detail);
+});

browser/components/mullvad-browser/content/aboutMullvadBrowser.xhtml

@@ -21,6 +21,8 @@
       rel="localization"
       href="browser/mullvad-browser/aboutMullvadBrowser.ftl"
     />
+
+    <script src="chrome://browser/content/mullvad-browser/aboutMullvadBrowser.js"></script>
   </head>
   <body>
     <div id="header">
@@ -48,11 +50,22 @@
           data-l10n-id="about-mullvad-browser-heading"
         ></h1>
       </div>
-      <p data-l10n-id="about-mullvad-browser-developed-by">
+      <p
+        id="mullvad-browser-intro"
+        data-l10n-id="about-mullvad-browser-developed-by"
+      >
         <a data-l10n-name="tor-project-link" href="https://www.torproject.org">
         </a>
         <a data-l10n-name="mullvad-vpn-link" href="https://mullvad.net"> </a>
       </p>
+      <p id="mullvad-browser-update">
+        <img
+          id="mullvad-browser-update-img"
+          alt=""
+          src="chrome://browser/content/mullvad-browser/2728-sparkles.svg"
+        />
+        <span><a data-l10n-name="update-link"></a></span>
+      </p>
     </div>
     <div id="footer">
       <p data-l10n-id="about-mullvad-browser-use-vpn">

browser/components/mullvad-browser/jar.mn

 browser.jar:
+  content/browser/mullvad-browser/aboutMullvadBrowser.js      (content/aboutMullvadBrowser.js)
   content/browser/mullvad-browser/aboutMullvadBrowser.xhtml   (content/aboutMullvadBrowser.xhtml)
   content/browser/mullvad-browser/aboutMullvadBrowser.css     (content/aboutMullvadBrowser.css)
   content/browser/mullvad-browser/mullvadBrowserFont.css      (content/mullvadBrowserFont.css)
+  content/browser/mullvad-browser/2728-sparkles.svg           (content/2728-sparkles.svg)

browser/components/mullvad-browser/moz.build

 JAR_MANIFESTS += ["jar.mn"]
+
+FINAL_TARGET_FILES.actors += [
+    "AboutMullvadBrowserChild.sys.mjs",
+    "AboutMullvadBrowserParent.sys.mjs",
+]

browser/locales/en-US/browser/mullvad-browser/aboutMullvadBrowser.ftl

@@ -3,6 +3,11 @@ about-mullvad-browser-developed-by = Developed in collaboration between the <a d
 about-mullvad-browser-use-vpn = Get more privacy by using the browser <a data-l10n-name="with-vpn-link">with Mullvad VPN</a>.
 about-mullvad-browser-learn-more = Curious to learn more about the browser? <a data-l10n-name="learn-more-link">Take a dive into the mole hole</a>.
 
+# Update message.
+# <a data-l10n-name="update-link"> should contain the link text and close with </a>.
+# $version (String) - The new browser version.
+about-mullvad-browser-update-message =  { -brand-short-name } has been updated to { $version }. <a data-l10n-name="update-link">See what’s new</a>
+
 
 ## Deprecated. To be removed when 13.5 becomes stable.