commit 5fcab02dad8c5bcae4c486d71b27f7e6a67e4d57
parent 8c6cff1306fee9ece3ffdcde81f02d3548635060
Author: Rebecca King <rking@mozilla.com>
Date: Fri, 26 Dec 2025 14:16:33 +0000
Bug 2007181 - Convert upgrade message component to bandwidth reached panel state - r=ip-protection-reviewers,fluent-reviewers,flod,fchasen
Differential Revision: https://phabricator.services.mozilla.com/D277351
Diffstat:
7 files changed, 13 insertions(+), 167 deletions(-)
diff --git a/browser/components/ipprotection/IPProtectionPanel.sys.mjs b/browser/components/ipprotection/IPProtectionPanel.sys.mjs
@@ -81,6 +81,8 @@ export class IPProtectionPanel {
* 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
+ * @property {boolean} paused
+ * True if the VPN service has been paused due to bandwidth limits
*/
/**
@@ -126,6 +128,7 @@ export class IPProtectionPanel {
hasUpgraded: lazy.IPPEnrollAndEntitleManager.hasUpgraded,
onboardingMessage: "",
bandwidthWarning: "",
+ paused: false,
};
if (window) {
diff --git a/browser/components/ipprotection/content/ipprotection-content.mjs b/browser/components/ipprotection/content/ipprotection-content.mjs
@@ -245,7 +245,7 @@ export default class IPProtectionContentElement extends MozLitElement {
`;
}
- beforeUpgradeTemplate() {
+ pausedTemplate() {
return html`
<div id="upgrade-vpn-content" class="vpn-bottom-content">
<h2
@@ -280,10 +280,12 @@ export default class IPProtectionContentElement extends MozLitElement {
if (this.state.isSignedOut) {
return html` <ipprotection-signedout></ipprotection-signedout> `;
}
- return html`
- ${this.statusCardTemplate()}
- ${!this.state.hasUpgraded ? this.beforeUpgradeTemplate() : null}
- `;
+
+ if (this.state.paused) {
+ return html` ${this.pausedTemplate()} `;
+ }
+
+ return html` ${this.statusCardTemplate()} `;
}
render() {
diff --git a/browser/components/ipprotection/tests/browser/browser.toml b/browser/components/ipprotection/tests/browser/browser.toml
@@ -43,6 +43,4 @@ skip-if = [
"devedition",
]
-["browser_ipprotection_upgrade.js"]
-
["browser_ipprotection_usage.js"]
diff --git a/browser/components/ipprotection/tests/browser/browser_ipprotection_content.js b/browser/components/ipprotection/tests/browser/browser_ipprotection_content.js
@@ -21,12 +21,6 @@ async function setAndUpdateIsSignedOut(content, isSignedOut) {
await content.updateComplete;
}
-async function setAndUpdateHasUpgraded(content, hasUpgraded) {
- content.state.hasUpgraded = hasUpgraded;
- content.requestUpdate();
- await content.updateComplete;
-}
-
async function resetStateToObj(content, originalState) {
content.state = originalState;
content.requestUpdate();
@@ -60,31 +54,6 @@ add_task(async function test_main_content() {
);
Assert.ok(content.statusCardEl, "Status card should be present");
- // Test content before user upgrade
- await setAndUpdateHasUpgraded(content, false);
- Assert.ok(
- !content.activeSubscriptionEl,
- "Active subscription element should not be present"
- );
- Assert.ok(content.upgradeEl, "Upgrade vpn element should be present");
- Assert.ok(
- content.upgradeEl.querySelector("#upgrade-vpn-title"),
- "Upgrade vpn title should be present"
- );
- Assert.ok(
- content.upgradeEl.querySelector("#upgrade-vpn-paragraph"),
- "Upgrade vpn paragraph should be present"
- );
- Assert.ok(
- content.upgradeEl.querySelector("#upgrade-vpn-button"),
- "Upgrade vpn button should be present"
- );
-
- // Test content after user upgrade
- await setAndUpdateHasUpgraded(content, true);
-
- Assert.ok(!content.upgradeEl, "Upgrade vpn element should not be present");
-
await resetStateToObj(content, originalState);
// Close the panel
@@ -92,47 +61,3 @@ add_task(async function test_main_content() {
EventUtils.synthesizeKey("KEY_Escape");
await panelHiddenPromise;
});
-
-add_task(async function test_support_link() {
- let button = document.getElementById(lazy.IPProtectionWidget.WIDGET_ID);
- let panelView = PanelMultiView.getViewNode(
- document,
- lazy.IPProtectionWidget.PANEL_ID
- );
-
- let panelShownPromise = waitForPanelEvent(document, "popupshown");
- let panelInitPromise = BrowserTestUtils.waitForEvent(
- document,
- "IPProtection:Init"
- );
- // Open the panel
- button.click();
- await Promise.all([panelShownPromise, panelInitPromise]);
-
- let content = panelView.querySelector(lazy.IPProtectionPanel.CONTENT_TAGNAME);
- let originalState = structuredClone(content.state);
- content.state.hasUpgraded = false;
- content.state.isSignedOut = false;
- content.requestUpdate();
- await content.updateComplete;
-
- let supportLink = content.upgradeEl.querySelector("#vpn-support-link");
- Assert.ok(supportLink, "Support link should be present");
-
- let newTabPromise = BrowserTestUtils.waitForNewTab(gBrowser);
- let panelHiddenPromise = waitForPanelEvent(document, "popuphidden");
- supportLink.click();
- let newTab = await newTabPromise;
- await panelHiddenPromise;
-
- Assert.equal(
- gBrowser.selectedTab,
- newTab,
- "New tab is now open in a new foreground tab"
- );
-
- // To be safe, reset the entire state
- await resetStateToObj(content, originalState);
-
- BrowserTestUtils.removeTab(newTab);
-});
diff --git a/browser/components/ipprotection/tests/browser/browser_ipprotection_keyboard_navigation.js b/browser/components/ipprotection/tests/browser/browser_ipprotection_keyboard_navigation.js
@@ -45,11 +45,6 @@ add_task(async function test_keyboard_navigation_in_panel() {
let statusCard = content.statusCardEl;
await expectFocusAfterKey("Tab", statusCard.connectionToggleEl);
- await expectFocusAfterKey("Tab", content.upgradeEl.querySelector("a"));
- await expectFocusAfterKey(
- "Tab",
- content.upgradeEl.querySelector("#upgrade-vpn-button")
- );
// Loop back around
await expectFocusAfterKey(
@@ -60,12 +55,6 @@ add_task(async function test_keyboard_navigation_in_panel() {
);
await expectFocusAfterKey("Tab", statusCard.connectionToggleEl);
- await expectFocusAfterKey("ArrowDown", content.upgradeEl.querySelector("a"));
- await expectFocusAfterKey(
- "ArrowDown",
- content.upgradeEl.querySelector("#upgrade-vpn-button")
- );
-
// Loop back around
await expectFocusAfterKey(
"ArrowDown",
diff --git a/browser/components/ipprotection/tests/browser/browser_ipprotection_telemetry.js b/browser/components/ipprotection/tests/browser/browser_ipprotection_telemetry.js
@@ -224,10 +224,12 @@ add_task(async function click_upgrade_button() {
);
let content = panelView.querySelector(IPProtectionPanel.CONTENT_TAGNAME);
+ let originalState = structuredClone(content.state);
Assert.ok(content, "Panel content should be present");
content.state.isSignedOut = false;
+ content.state.paused = true;
content.requestUpdate();
await content.updateComplete;
@@ -244,7 +246,7 @@ add_task(async function click_upgrade_button() {
Assert.equal(upgradeEvent.length, 1, "should have recorded a toggle");
Services.fog.testResetFOG();
-
+ await resetStateToObj(content, originalState);
BrowserTestUtils.removeTab(newTab);
});
diff --git a/browser/components/ipprotection/tests/browser/browser_ipprotection_upgrade.js b/browser/components/ipprotection/tests/browser/browser_ipprotection_upgrade.js
@@ -1,73 +0,0 @@
-/* This Source Code Form is subject to the terms of the Mozilla Public
- * License, v. 2.0. If a copy of the MPL was not distributed with this
- * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
-
-"use strict";
-
-const lazy = {};
-
-ChromeUtils.defineESModuleGetters(lazy, {
- IPProtectionWidget: "resource:///modules/ipprotection/IPProtection.sys.mjs",
- IPProtectionPanel:
- "resource:///modules/ipprotection/IPProtectionPanel.sys.mjs",
-});
-
-const { LINKS } = ChromeUtils.importESModule(
- "chrome://browser/content/ipprotection/ipprotection-constants.mjs"
-);
-
-async function resetStateToObj(content, originalState) {
- content.state = originalState;
- content.requestUpdate();
- await content.updateComplete;
-}
-
-/**
- * Tests upgrade button functionality
- */
-add_task(async function test_upgrade_button() {
- let button = document.getElementById(lazy.IPProtectionWidget.WIDGET_ID);
- let panelView = PanelMultiView.getViewNode(
- document,
- lazy.IPProtectionWidget.PANEL_ID
- );
-
- let panelShownPromise = waitForPanelEvent(document, "popupshown");
- let panelInitPromise = BrowserTestUtils.waitForEvent(
- document,
- "IPProtection:Init"
- );
- // Open the panel
- button.click();
- await Promise.all([panelShownPromise, panelInitPromise]);
-
- let content = panelView.querySelector(lazy.IPProtectionPanel.CONTENT_TAGNAME);
- let originalState = structuredClone(content.state);
- content.state.hasUpgraded = false;
- content.state.isSignedOut = false;
- content.requestUpdate();
- await content.updateComplete;
-
- let upgradeButton = content.upgradeEl.querySelector("#upgrade-vpn-button");
- Assert.ok(upgradeButton, "Upgrade vpn button should be present");
-
- let newTabPromise = BrowserTestUtils.waitForNewTab(
- gBrowser,
- LINKS.PRODUCT_URL + "#pricing"
- );
- let panelHiddenPromise = waitForPanelEvent(document, "popuphidden");
- upgradeButton.click();
- let newTab = await newTabPromise;
- await panelHiddenPromise;
-
- Assert.equal(
- gBrowser.selectedTab,
- newTab,
- "New tab is now open in a new foreground tab"
- );
-
- // To be safe, reset the entire state
- await resetStateToObj(content, originalState);
-
- BrowserTestUtils.removeTab(newTab);
-});
