commit dce7e1b78eb5c206240f063576c867ba1fd7147b
parent a63b4b06c538bbae7727feeb290ce87e1e52fdd4
Author: Rebecca King <rking@mozilla.com>
Date: Wed, 12 Nov 2025 15:32:46 +0000
Bug 1997328 - Update ipprotection-content element to show onboarding messages based on state - r=ip-protection-reviewers,fluent-reviewers,bolsson,kpatenio
Differential Revision: https://phabricator.services.mozilla.com/D270912
Diffstat:
4 files changed, 68 insertions(+), 15 deletions(-)
diff --git a/browser/components/ipprotection/IPProtectionPanel.sys.mjs b/browser/components/ipprotection/IPProtectionPanel.sys.mjs
@@ -78,6 +78,8 @@ export class IPProtectionPanel {
* True if we're running the Alpha variant, else false.
* @property {boolean} hasUpgraded
* True if a Mozilla VPN subscription is linked to the user's Mozilla account.
+ * @property {string} onboardingMessage
+ * Continuous onboarding message to display in-panel, empty string if none applicable
*/
/**
@@ -123,6 +125,7 @@ export class IPProtectionPanel {
error: "",
isAlpha: lazy.IPPEnrollAndEntitleManager.isAlpha,
hasUpgraded: lazy.IPPEnrollAndEntitleManager.hasUpgraded,
+ onboardingMessage: "",
};
if (window) {
diff --git a/browser/components/ipprotection/content/ipprotection-content.mjs b/browser/components/ipprotection/content/ipprotection-content.mjs
@@ -206,12 +206,36 @@ export default class IPProtectionContentElement extends MozLitElement {
}
messageBarTemplate() {
- // TODO: Set messageId based on state in Bug 1997328
+ let messageId;
+ let messageLink;
+ let messageLinkl10nId;
+ // If there are errors, the error message should take precedence
+ if (this.#hasErrors) {
+ messageId = "ipprotection-message-generic-error";
+ } else if (this.state.onboardingMessage) {
+ messageId = this.state.onboardingMessage;
+
+ switch (this.state.onboardingMessage) {
+ case "ipprotection-message-continuous-onboarding-intro":
+ break;
+ case "ipprotection-message-continuous-onboarding-autostart":
+ messageLink = "about:settings#privacy";
+ messageLinkl10nId = "setting-link";
+ break;
+ case "ipprotection-message-continuous-onboarding-site-settings":
+ messageLink = "about:settings#privacy";
+ messageLinkl10nId = "setting-link";
+ break;
+ }
+ }
+
return html`
<ipprotection-message-bar
class="vpn-top-content"
type=${this.#hasErrors ? ERRORS.GENERIC : "info"}
- messageId="ipprotection-message-continuous-onboarding-1"
+ .messageId=${ifDefined(messageId)}
+ .messageLink=${ifDefined(messageLink)}
+ .messageLinkl10nId=${ifDefined(messageLinkl10nId)}
></ipprotection-message-bar>
`;
}
@@ -323,17 +347,16 @@ export default class IPProtectionContentElement extends MozLitElement {
}
render() {
- // TODO: Set showContinuousOnboarding based on state Bug 1997328
if (
- (this.#hasErrors || this.showContinuousOnboarding) &&
+ (this.#hasErrors || this.state.onboardingMessage) &&
!this._messageDismissed
) {
this._showMessageBar = true;
}
const messageBar = this._showMessageBar ? this.messageBarTemplate() : null;
- //TODO: Check state to determine what position to add the message bar Bug 1997328
- const content = html`${messageBar}${this.mainContentTemplate()}`;
+
+ let content = html`${messageBar}${this.mainContentTemplate()}`;
// TODO: Conditionally render post-upgrade subview within #ipprotection-content-wrapper - Bug 1973813
return html`
diff --git a/browser/components/ipprotection/content/ipprotection-message-bar.mjs b/browser/components/ipprotection/content/ipprotection-message-bar.mjs
@@ -3,11 +3,17 @@
* file, You can obtain one at https://mozilla.org/MPL/2.0/. */
import { MozLitElement } from "chrome://global/content/lit-utils.mjs";
-import { html } from "chrome://global/content/vendor/lit.all.mjs";
+import { html, ifDefined } from "chrome://global/content/vendor/lit.all.mjs";
// eslint-disable-next-line import/no-unassigned-import
import "chrome://global/content/elements/moz-message-bar.mjs";
+const lazy = {};
+
+ChromeUtils.defineESModuleGetters(lazy, {
+ URILoadingHelper: "resource:///modules/URILoadingHelper.sys.mjs",
+});
+
/**
* A custom element that handles the message bar for IP Protection.
*/
@@ -25,12 +31,15 @@ export default class IPProtectionMessageBarElement extends MozLitElement {
static properties = {
type: { type: String },
messageId: { type: String },
+ messageLink: { type: String },
+ messageLinkl10nId: { type: String },
};
constructor() {
super();
this.handleDismiss = this.handleDismiss.bind(this);
+ this.handleClickSetingsLink = this.handleClickSettingsLink.bind(this);
}
connectedCallback() {
@@ -51,18 +60,24 @@ export default class IPProtectionMessageBarElement extends MozLitElement {
genericErrorTemplate() {
return html`
- <moz-message-bar
- type="error"
- data-l10n-id="ipprotection-message-generic-error"
- dismissable
- >
+ <moz-message-bar type="error" data-l10n-id=${this.messageId} dismissable>
</moz-message-bar>
`;
}
infoMessageTemplate() {
return html`
- <moz-message-bar type="info" data-l10n-id=${this.messageId} dismissable>
+ <moz-message-bar type="info" dismissable>
+ <span
+ slot="message"
+ data-l10n-id=${this.messageId}
+ @click=${this.handleClickSettingsLink}
+ >
+ <a
+ data-l10n-name=${ifDefined(this.messageLinkl10nId)}
+ href=${ifDefined(this.messageLink)}
+ ></a>
+ </span>
</moz-message-bar>
`;
}
@@ -77,6 +92,17 @@ export default class IPProtectionMessageBarElement extends MozLitElement {
);
}
+ handleClickSettingsLink(event) {
+ if (event.target.hasAttribute("href")) {
+ event.preventDefault();
+ lazy.URILoadingHelper.openTrustedLinkIn(window, this.messageLink, "tab");
+
+ this.dispatchEvent(
+ new CustomEvent("IPProtection:Close", { bubbles: true, composed: true })
+ );
+ }
+ }
+
render() {
let messageBarTemplate = this.#MESSAGE_TYPE_MAP.get(this.type)();
diff --git a/browser/locales-preview/ipProtection.ftl b/browser/locales-preview/ipProtection.ftl
@@ -74,8 +74,9 @@ ipprotection-message-generic-error =
.heading = Couldn’t connect to VPN
.message = Try again in a few minutes.
-ipprotection-message-continuous-onboarding-1 =
- .message = Turn on VPN to hide your location and add extra encryption to your browsing.
+ipprotection-message-continuous-onboarding-intro = Turn on VPN to hide your location and add extra encryption to your browsing.
+ipprotection-message-continuous-onboarding-autostart = <a data-l10n-name="setting-link">Set VPN to turn on</a> every time you open { -brand-short-name } for an extra layer of protection.
+ipprotection-message-continuous-onboarding-site-settings = { -brand-short-name } will remember which websites you’ve set to use VPN. Update these in <a data-l10n-name="setting-link">settings</a> anytime.
## IP Protection Settings
