for #498: security onboarding panels and logic
This commit is contained in:
parent
13cd601212
commit
5237e67fa6
5 changed files with 79 additions and 22 deletions
6
index.js
6
index.js
|
@ -222,6 +222,7 @@ const ContainerService = {
|
||||||
"getPreference",
|
"getPreference",
|
||||||
"sendTelemetryPayload",
|
"sendTelemetryPayload",
|
||||||
"getTheme",
|
"getTheme",
|
||||||
|
"getShieldStudyVariation",
|
||||||
"refreshNeeded",
|
"refreshNeeded",
|
||||||
"forgetIdentityAndRefresh",
|
"forgetIdentityAndRefresh",
|
||||||
"checkIncompatibleAddons"
|
"checkIncompatibleAddons"
|
||||||
|
@ -332,6 +333,7 @@ const ContainerService = {
|
||||||
|
|
||||||
if (self.id === "@shield-study-containers") {
|
if (self.id === "@shield-study-containers") {
|
||||||
study.startup(reason);
|
study.startup(reason);
|
||||||
|
this.shieldStudyVariation = study.variation;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
@ -375,6 +377,10 @@ const ContainerService = {
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
|
getShieldStudyVariation() {
|
||||||
|
return this.shieldStudyVariation;
|
||||||
|
},
|
||||||
|
|
||||||
// utility methods
|
// utility methods
|
||||||
|
|
||||||
_containerTabCount(userContextId) {
|
_containerTabCount(userContextId) {
|
||||||
|
|
|
@ -43,7 +43,7 @@
|
||||||
},
|
},
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"build": "npm test && jpm xpi",
|
"build": "npm test && jpm xpi",
|
||||||
"build-shield": "npm test && json -I -f package.json -e 'this.name=\"shield-study-containers\"' && jpm xpi && json -I -f package.json -e 'this.name=\"testpilot-containers\"'",
|
"build-shield": "npm test && npm run package-shield",
|
||||||
"deploy": "deploy-txp",
|
"deploy": "deploy-txp",
|
||||||
"lint": "npm-run-all lint:*",
|
"lint": "npm-run-all lint:*",
|
||||||
"lint:addon": "addons-linter webextension --self-hosted",
|
"lint:addon": "addons-linter webextension --self-hosted",
|
||||||
|
@ -51,6 +51,7 @@
|
||||||
"lint:html": "htmllint webextension/*.html",
|
"lint:html": "htmllint webextension/*.html",
|
||||||
"lint:js": "eslint .",
|
"lint:js": "eslint .",
|
||||||
"package": "npm run build && mv testpilot-containers.xpi addon.xpi",
|
"package": "npm run build && mv testpilot-containers.xpi addon.xpi",
|
||||||
|
"package-shield": "json -I -f package.json -e 'this.name=\"shield-study-containers\"' && jpm xpi && json -I -f package.json -e 'this.name=\"testpilot-containers\"'",
|
||||||
"test": "npm run lint"
|
"test": "npm run lint"
|
||||||
},
|
},
|
||||||
"updateURL": "https://testpilot.firefox.com/files/@testpilot-containers/updates.json"
|
"updateURL": "https://testpilot.firefox.com/files/@testpilot-containers/updates.json"
|
||||||
|
|
4
study.js
4
study.js
|
@ -15,9 +15,7 @@ const studyConfig = {
|
||||||
},
|
},
|
||||||
variations: {
|
variations: {
|
||||||
"control": () => {},
|
"control": () => {},
|
||||||
"privacyOnboarding": () => {},
|
"securityOnboarding": () => {}
|
||||||
"onlineAccountsOnboarding": () => {},
|
|
||||||
"tabManagementOnboarding": () => {}
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -70,15 +70,19 @@ const Logic = {
|
||||||
_currentPanel: null,
|
_currentPanel: null,
|
||||||
_previousPanel: null,
|
_previousPanel: null,
|
||||||
_panels: {},
|
_panels: {},
|
||||||
|
_onboardingVariation: null,
|
||||||
|
|
||||||
init() {
|
init() {
|
||||||
// Remove browserAction "upgraded" badge when opening panel
|
// Remove browserAction "upgraded" badge when opening panel
|
||||||
this.clearBrowserActionBadge();
|
this.clearBrowserActionBadge();
|
||||||
|
|
||||||
// Retrieve the list of identities.
|
// Retrieve the list of identities.
|
||||||
this.refreshIdentities()
|
const identitiesPromise = this.refreshIdentities();
|
||||||
|
// Get the onboarding variation
|
||||||
|
const variationPromise = this.getShieldStudyVariation();
|
||||||
|
|
||||||
// Routing to the correct panel.
|
// Routing to the correct panel.
|
||||||
|
Promise.all([identitiesPromise, variationPromise])
|
||||||
.then(() => {
|
.then(() => {
|
||||||
// If localStorage is disabled, we don't show the onboarding.
|
// If localStorage is disabled, we don't show the onboarding.
|
||||||
if (!localStorage || localStorage.getItem("onboarded4")) {
|
if (!localStorage || localStorage.getItem("onboarded4")) {
|
||||||
|
@ -160,6 +164,15 @@ const Logic = {
|
||||||
}).catch((e) => {throw e;});
|
}).catch((e) => {throw e;});
|
||||||
},
|
},
|
||||||
|
|
||||||
|
getPanelSelector(panel) {
|
||||||
|
if (this._onboardingVariation === "securityOnboarding" &&
|
||||||
|
panel.hasOwnProperty("securityPanelSelector")) {
|
||||||
|
return panel.securityPanelSelector;
|
||||||
|
} else {
|
||||||
|
return panel.panelSelector;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
async showPanel(panel, currentIdentity = null) {
|
async showPanel(panel, currentIdentity = null) {
|
||||||
// Invalid panel... ?!?
|
// Invalid panel... ?!?
|
||||||
if (!(panel in this._panels)) {
|
if (!(panel in this._panels)) {
|
||||||
|
@ -175,7 +188,7 @@ const Logic = {
|
||||||
await this._panels[panel].prepare();
|
await this._panels[panel].prepare();
|
||||||
Object.keys(this._panels).forEach((panelKey) => {
|
Object.keys(this._panels).forEach((panelKey) => {
|
||||||
const panelItem = this._panels[panelKey];
|
const panelItem = this._panels[panelKey];
|
||||||
const panelElement = document.querySelector(panelItem.panelSelector);
|
const panelElement = document.querySelector(this.getPanelSelector(panelItem));
|
||||||
if (!panelElement.classList.contains("hide")) {
|
if (!panelElement.classList.contains("hide")) {
|
||||||
panelElement.classList.add("hide");
|
panelElement.classList.add("hide");
|
||||||
if ("unregister" in panelItem) {
|
if ("unregister" in panelItem) {
|
||||||
|
@ -183,7 +196,7 @@ const Logic = {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
document.querySelector(this._panels[panel].panelSelector).classList.remove("hide");
|
document.querySelector(this.getPanelSelector(this._panels[panel])).classList.remove("hide");
|
||||||
},
|
},
|
||||||
|
|
||||||
showPreviousPanel() {
|
showPreviousPanel() {
|
||||||
|
@ -258,6 +271,14 @@ const Logic = {
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
|
getShieldStudyVariation() {
|
||||||
|
return browser.runtime.sendMessage({
|
||||||
|
method: "getShieldStudyVariation"
|
||||||
|
}).then(variation => {
|
||||||
|
this._onboardingVariation = variation;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
generateIdentityName() {
|
generateIdentityName() {
|
||||||
const defaultName = "Container #";
|
const defaultName = "Container #";
|
||||||
const ids = [];
|
const ids = [];
|
||||||
|
@ -286,14 +307,17 @@ const Logic = {
|
||||||
|
|
||||||
Logic.registerPanel(P_ONBOARDING_1, {
|
Logic.registerPanel(P_ONBOARDING_1, {
|
||||||
panelSelector: ".onboarding-panel-1",
|
panelSelector: ".onboarding-panel-1",
|
||||||
|
securityPanelSelector: ".security-onboarding-panel-1",
|
||||||
|
|
||||||
// This method is called when the object is registered.
|
// This method is called when the object is registered.
|
||||||
initialize() {
|
initialize() {
|
||||||
// Let's move to the next panel.
|
// Let's move to the next panel.
|
||||||
Logic.addEnterHandler(document.querySelector("#onboarding-start-button"), () => {
|
[...document.querySelectorAll(".onboarding-start-button")].forEach(startElement => {
|
||||||
|
Logic.addEnterHandler(startElement, () => {
|
||||||
localStorage.setItem("onboarded1", true);
|
localStorage.setItem("onboarded1", true);
|
||||||
Logic.showPanel(P_ONBOARDING_2);
|
Logic.showPanel(P_ONBOARDING_2);
|
||||||
});
|
});
|
||||||
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
// This method is called when the panel is shown.
|
// This method is called when the panel is shown.
|
||||||
|
@ -307,14 +331,17 @@ Logic.registerPanel(P_ONBOARDING_1, {
|
||||||
|
|
||||||
Logic.registerPanel(P_ONBOARDING_2, {
|
Logic.registerPanel(P_ONBOARDING_2, {
|
||||||
panelSelector: ".onboarding-panel-2",
|
panelSelector: ".onboarding-panel-2",
|
||||||
|
securityPanelSelector: ".security-onboarding-panel-2",
|
||||||
|
|
||||||
// This method is called when the object is registered.
|
// This method is called when the object is registered.
|
||||||
initialize() {
|
initialize() {
|
||||||
// Let's move to the containers list panel.
|
// Let's move to the containers list panel.
|
||||||
Logic.addEnterHandler(document.querySelector("#onboarding-next-button"), () => {
|
[...document.querySelectorAll(".onboarding-next-button")].forEach(nextElement => {
|
||||||
|
Logic.addEnterHandler(nextElement, () => {
|
||||||
localStorage.setItem("onboarded2", true);
|
localStorage.setItem("onboarded2", true);
|
||||||
Logic.showPanel(P_ONBOARDING_3);
|
Logic.showPanel(P_ONBOARDING_3);
|
||||||
});
|
});
|
||||||
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
// This method is called when the panel is shown.
|
// This method is called when the panel is shown.
|
||||||
|
@ -328,14 +355,17 @@ Logic.registerPanel(P_ONBOARDING_2, {
|
||||||
|
|
||||||
Logic.registerPanel(P_ONBOARDING_3, {
|
Logic.registerPanel(P_ONBOARDING_3, {
|
||||||
panelSelector: ".onboarding-panel-3",
|
panelSelector: ".onboarding-panel-3",
|
||||||
|
securityPanelSelector: ".security-onboarding-panel-3",
|
||||||
|
|
||||||
// This method is called when the object is registered.
|
// This method is called when the object is registered.
|
||||||
initialize() {
|
initialize() {
|
||||||
// Let's move to the containers list panel.
|
// Let's move to the containers list panel.
|
||||||
Logic.addEnterHandler(document.querySelector("#onboarding-almost-done-button"), () => {
|
[...document.querySelectorAll(".onboarding-almost-done-button")].forEach(almostElement => {
|
||||||
|
Logic.addEnterHandler(almostElement, () => {
|
||||||
localStorage.setItem("onboarded3", true);
|
localStorage.setItem("onboarded3", true);
|
||||||
Logic.showPanel(P_ONBOARDING_4);
|
Logic.showPanel(P_ONBOARDING_4);
|
||||||
});
|
});
|
||||||
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
// This method is called when the panel is shown.
|
// This method is called when the panel is shown.
|
||||||
|
|
|
@ -7,28 +7,50 @@
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div class="hide panel onboarding onboarding-panel-1" id="onboarding-panel-1">
|
<div class="hide panel onboarding onboarding-panel-1">
|
||||||
<img class="onboarding-img" alt="Container Tabs Overview" src="/img/onboarding-1.png" />
|
<img class="onboarding-img" alt="Container Tabs Overview" src="/img/onboarding-1.png" />
|
||||||
<h3 class="onboarding-title">A better way to manage all the things you do online</h3>
|
<h3 class="onboarding-title">A better way to manage all the things you do online</h3>
|
||||||
<p>
|
<p>
|
||||||
Use containers to organize tasks, manage accounts, and keep your focus where you want it.
|
Use containers to organize tasks, manage accounts, and keep your focus where you want it.
|
||||||
</p>
|
</p>
|
||||||
<a href="#" id="onboarding-start-button" class="onboarding-button">Get Started</a>
|
<a href="#" class="onboarding-button onboarding-start-button">Get Started</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="hide panel onboarding security-onboarding-panel-1">
|
||||||
|
<img class="onboarding-img" alt="Container Tabs Overview" src="/img/onboarding-1.png" />
|
||||||
|
<h3 class="onboarding-title">A simple and secure way to manage your online life</h3>
|
||||||
|
<p>
|
||||||
|
Use containers to organize tasks, manage accounts, and keep your sensitive data where you want it.
|
||||||
|
</p>
|
||||||
|
<a href="#" class="onboarding-button onboarding-start-button">Get Started</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="panel onboarding onboarding-panel-2 hide" id="onboarding-panel-2">
|
<div class="panel onboarding onboarding-panel-2 hide">
|
||||||
<img class="onboarding-img" alt="How Containers Work" src="/img/onboarding-2.png" />
|
<img class="onboarding-img" alt="How Containers Work" src="/img/onboarding-2.png" />
|
||||||
<h3 class="onboarding-title">Put containers to work for you.</h3>
|
<h3 class="onboarding-title">Put containers to work for you.</h3>
|
||||||
<p>Features like color-coding and separate container tabs help you find things easily, focus your attention, and minimize distractions.</p>
|
<p>Features like color-coding and separate container tabs help you find things easily, focus your attention, and minimize distractions.</p>
|
||||||
<a href="#" id="onboarding-next-button" class="onboarding-button">Next</a>
|
<a href="#" class="onboarding-button onboarding-next-button">Next</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="panel onboarding onboarding-panel-3 hide" id="onboarding-panel-3">
|
<div class="panel onboarding security-onboarding-panel-2 hide">
|
||||||
|
<img class="onboarding-img" alt="How Containers Work" src="/img/onboarding-2.png" />
|
||||||
|
<h3 class="onboarding-title">Put containers to work for you.</h3>
|
||||||
|
<p>Color-coding helps you categorize your online life, find things easily, and minimize distractions.</p>
|
||||||
|
<a href="#" class="onboarding-button onboarding-next-button">Next</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="panel onboarding onboarding-panel-3 hide">
|
||||||
<img class="onboarding-img" alt="How Containers Work" src="/img/onboarding-3.png" />
|
<img class="onboarding-img" alt="How Containers Work" src="/img/onboarding-3.png" />
|
||||||
<h3 class="onboarding-title">A place for everything, and everything in its place.</h3>
|
<h3 class="onboarding-title">A place for everything, and everything in its place.</h3>
|
||||||
<p>Start with the containers we've created, or create your own.</p>
|
<p>Start with the containers we've created, or create your own.</p>
|
||||||
<a href="#" id="onboarding-almost-done-button" class="onboarding-button">Next</a>
|
<a href="#" class="onboarding-button onboarding-almost-done-button">Next</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="panel onboarding security-onboarding-panel-3 hide">
|
||||||
|
<img class="onboarding-img" alt="How Containers Work" src="/img/security-onboarding-3.png" />
|
||||||
|
<h3 class="onboarding-title">Use containers to secure everything within.</h3>
|
||||||
|
<p>Containers separate cookies and sensitive data from other containers, like surrounded by firewalls to block tracking.</p>
|
||||||
|
<a href="#" class="onboarding-button onboarding-almost-done-button">Next</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="panel onboarding onboarding-panel-4 hide" id="onboarding-panel-4">
|
<div class="panel onboarding onboarding-panel-4 hide" id="onboarding-panel-4">
|
||||||
|
|
Loading…
Add table
Reference in a new issue