nagai/fune
3
0
Fork 0
forked from mirrors/gecko-dev
Code Pull requests Activity

Bug 1779514 - Add privacy segmentation screen for existing users in MR Onboarding r=pdahiya

Browse source 
Differential Revision: https://phabricator.services.mozilla.com/D155287
This commit is contained in:
Jason Prickett 2022-08-30 03:25:34 +00:00
parent 0787850ef9
commit e0367698f6
6 changed files with 111 additions and 2 deletions
repo.diff.show_diff_stats Download patch file Download diff file Expand all files Collapse all files

2
browser/components/newtab/aboutwelcome/content/aboutwelcome.bundle.js
View file

@ -683,7 +683,7 @@ const ProtonScreenActionButtons = props => {
}
return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
className: "action-buttons"
className: `action-buttons ${content.dual_action_buttons ? "dual-action-buttons" : ""}`
}, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_MSLocalized__WEBPACK_IMPORTED_MODULE_1__.Localized, {
text: (_content$primary_butt = content.primary_button) === null || _content$primary_butt === void 0 ? void 0 : _content$primary_butt.label
}, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("button", {

13
browser/components/newtab/aboutwelcome/content/aboutwelcome.css
View file

@ -415,6 +415,19 @@ body[lwt-newtab-brighttext] {
.onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons .checkbox-container label {
vertical-align: middle;
}
.onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons.dual-action-buttons button {
padding: 8px 16px;
}
.onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons.dual-action-buttons .secondary-cta {
display: block;
position: relative;
bottom: unset;
margin-block: 5px 0;
}
.onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons.dual-action-buttons .secondary-cta .secondary {
margin-inline: 0;
font-size: 13px;
}
.onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons .secondary-cta {
position: absolute;
bottom: -30px;

19
browser/components/newtab/content-src/aboutwelcome/aboutwelcome.scss
View file

@ -321,6 +321,25 @@ body {
}
}
&.dual-action-buttons {
button {
padding: 8px 16px;
}
.secondary-cta {
display: block;
position: relative;
bottom: unset;
margin-block: 5px 0;
.secondary {
margin-inline: 0;
font-size: 13px;
}
}
}
.secondary-cta {
position: absolute;
bottom: -30px;

6
browser/components/newtab/content-src/aboutwelcome/components/MultiStageProtonScreen.jsx
View file

@ -62,7 +62,11 @@ export const ProtonScreenActionButtons = props => {
}
return (
<div className="action-buttons">
<div
className={`action-buttons ${
content.dual_action_buttons ? "dual-action-buttons" : ""
}`}
>
<Localized text={content.primary_button?.label}>
<button
className="primary"

54
browser/components/newtab/lib/OnboardingMessageProvider.jsm
View file

@ -411,6 +411,60 @@ const ONBOARDING_MESSAGES = () => [
},
},
},
{
id: "UPGRADE_PRIVACY_SEGMENTATION",
content: {
position: "split",
progress_bar: "true",
dual_action_buttons: true,
background:
"url('chrome://activity-stream/content/data/content/assets/mr-pintaskbar.svg') var(--mr-secondary-position) no-repeat, var(--in-content-page-background) radial-gradient(83.12% 83.12% at 80.59% 16.88%, rgba(103, 51, 205, 0.75) 0%, rgba(0, 108, 207, 0.75) 54.51%, rgba(128, 199, 247, 0.75) 100%)",
logo: {},
title: {
string_id: "mr2022-onboarding-privacy-segmentation-title",
},
subtitle: {
string_id: "mr2022-onboarding-privacy-segmentation-subtitle",
},
cta_paragraph: {
text: {
string_id: "mr2022-onboarding-privacy-segmentation-text-cta",
},
},
primary_button: {
label: {
string_id:
"mr2022-onboarding-privacy-segmentation-button-primary-label",
},
action: {
type: "SET_PREF",
data: {
pref: {
name: "browser.privacySegmentation.enabled",
value: true,
},
},
navigate: true,
},
},
secondary_button: {
label: {
string_id:
"mr2022-onboarding-privacy-segmentation-button-secondary-label",
},
action: {
type: "SET_PREF",
data: {
pref: {
name: "browser.privacySegmentation.enabled",
value: false,
},
},
navigate: true,
},
},
},
},
{
id: "UPGRADE_GRATITUDE",
content: {

19
browser/components/newtab/test/unit/aboutwelcome/MultiStageAWProton.test.jsx
View file

@ -103,6 +103,25 @@ describe("MultiStageAboutWelcomeProton module", () => {
assert.equal(wrapper.find(".welcome-text h1").text(), "test title");
assert.equal(wrapper.find("main").prop("pos"), "center");
});
it("should render action buttons container with dual-action-buttons class", () => {
const SCREEN_PROPS = {
content: {
position: "split",
title: "test title",
dual_action_buttons: true,
primary_button: {
label: "test primary button",
},
secondary_button: {
label: "test secondary button",
},
},
};
const wrapper = mount(<MultiStageProtonScreen {...SCREEN_PROPS} />);
assert.ok(wrapper.exists());
assert.ok(wrapper.find(".dual-action-buttons").text());
});
});
describe("AboutWelcomeDefaults for proton", () => {