mozilla
/
gecko-dev
зеркало из https://github.com/mozilla/gecko-dev.git
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность

Bug 1762297 - Change buttons on about:welcome language prompt; r=Mardak,platform-i18n-reviewers,nordzilla,fluent-reviewers 

Differential Revision: https://phabricator.services.mozilla.com/D142516
This commit is contained in:
Greg Tatum 2022-04-01 21:39:16 +00:00
Родитель e21ea02da1
Коммит 45500af2ce
7 изменённых файлов: 93 добавлений и 69 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

33
browser/components/newtab/aboutwelcome/content/aboutwelcome.bundle.js
Просмотреть файл

@ -1162,17 +1162,22 @@ function useLanguageSwitcher(appAndSystemLocaleInfo, screens, screenIndex, setSc
if (langPack) {
// Convert the BCP 47 identifiers into the proper display names.
// e.g. "fr-CA" -> "Canadian French".
const displayNames = new Intl.DisplayNames(appAndSystemLocaleInfo.appLocaleRaw, {
const appDN = new Intl.DisplayNames(appAndSystemLocaleInfo.appLocaleRaw, {
type: "language"
});
const langPackDN = new Intl.DisplayNames(langPack.target_locale, {
type: "language"
});
setNegotiatedLanguage({
displayName: displayNames.of(langPack.target_locale),
langPackDisplayName: langPackDN.of(langPack.target_locale),
appDisplayName: appDN.of(appAndSystemLocaleInfo.appLocaleRaw),
langPack,
requestSystemLocales: [langPack.target_locale, appAndSystemLocaleInfo.appLocaleRaw]
});
} else {
setNegotiatedLanguage({
displayName: null,
langPackDisplayName: null,
appDisplayName: null,
langPack: null,
requestSystemLocales: null
});
@ -1255,12 +1260,12 @@ function LanguageSwitcher(props) {
}, [isAwaitingLangpack, langPackInstallPhase]); // The message args are the localized language names.
const withMessageArgs = obj => {
const displayName = negotiatedLanguage === null || negotiatedLanguage === void 0 ? void 0 : negotiatedLanguage.displayName;
const langPackDisplayName = negotiatedLanguage === null || negotiatedLanguage === void 0 ? void 0 : negotiatedLanguage.langPackDisplayName;
if (displayName) {
if (langPackDisplayName) {
return { ...obj,
args: { ...obj.args,
negotiatedLanguage: displayName
negotiatedLanguage: langPackDisplayName
}
};
}
@ -1340,25 +1345,21 @@ function LanguageSwitcher(props) {
style: {
display: showReadyScreen ? "block" : "none"
}
}, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_MSLocalized__WEBPACK_IMPORTED_MODULE_1__.Localized, {
text: withMessageArgs(content.languageSwitcher.switch)
}, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("button", {
}, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("button", {
className: "primary",
value: "primary_button",
onClick: () => {
_lib_aboutwelcome_utils__WEBPACK_IMPORTED_MODULE_2__.AboutWelcomeUtils.sendActionTelemetry(messageId, "download_langpack");
setIsAwaitingLangpack(true);
}
}))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
className: "secondary-cta"
}, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_MSLocalized__WEBPACK_IMPORTED_MODULE_1__.Localized, {
text: content.languageSwitcher.not_now
}, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("button", {
}, // This is the localized name from the Intl.DisplayNames API.
negotiatedLanguage === null || negotiatedLanguage === void 0 ? void 0 : negotiatedLanguage.langPackDisplayName)), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("button", {
type: "button",
className: "secondary text-link",
className: "secondary",
value: "decline",
onClick: handleAction
})))));
}, // This is the localized name from the Intl.DisplayNames API.
negotiatedLanguage === null || negotiatedLanguage === void 0 ? void 0 : negotiatedLanguage.appDisplayName))));
}
/***/ }),

15
browser/components/newtab/aboutwelcome/content/aboutwelcome.css
Просмотреть файл

@ -792,15 +792,21 @@ body[lwt-newtab-brighttext] {
.onboardingContainer .steps .indicator.current:last-of-type:first-of-type {
opacity: 0;
}
.onboardingContainer .primary {
.onboardingContainer .primary,
.onboardingContainer .secondary {
font-size: 13px;
line-height: 16px;
padding: 11px 15px;
transition: var(--transition);
}
.onboardingContainer .primary.rtamo {
.onboardingContainer .primary.rtamo,
.onboardingContainer .secondary.rtamo {
margin-top: 24px;
}
.onboardingContainer .secondary {
background-color: var(--in-content-button-background);
color: var(--in-content-button-text-color);
}
.onboardingContainer .noodle {
display: block;
background-repeat: no-repeat;
@ -965,6 +971,7 @@ body[lwt-newtab-brighttext] {
transition-delay: 0.9s;
}
.onboardingContainer .dialog-initial .primary,
.onboardingContainer .dialog-initial .secondary,
.onboardingContainer .dialog-initial .secondary-cta,
.onboardingContainer .dialog-initial .steps {
transition-delay: 1s;
@ -974,6 +981,7 @@ body[lwt-newtab-brighttext] {
transition-delay: 0.2s;
}
.onboardingContainer .screen:not(.dialog-initial):not([pos=corner]) .primary,
.onboardingContainer .screen:not(.dialog-initial):not([pos=corner]) .secondary,
.onboardingContainer .screen:not(.dialog-initial):not([pos=corner]) .secondary-cta {
transition-delay: 0.4s;
}
@ -1016,6 +1024,7 @@ body[lwt-newtab-brighttext] {
.onboardingContainer.transition-in [pos=corner] .brand-logo,
.onboardingContainer.transition-in [pos=corner] .welcome-text,
.onboardingContainer.transition-in [pos=corner] .primary,
.onboardingContainer.transition-in [pos=corner] .secondary,
.onboardingContainer.transition-in [pos=corner] .secondary-cta:not(.top),
.onboardingContainer.transition-in [pos=corner] .message-text {
opacity: 0;
@ -1040,6 +1049,7 @@ body[lwt-newtab-brighttext] {
.onboardingContainer.transition-in .screen:not([pos=corner]) .colorway-variations,
.onboardingContainer.transition-in .screen:not([pos=corner]) .tiles-theme-section,
.onboardingContainer.transition-in .screen:not([pos=corner]) .primary,
.onboardingContainer.transition-in .screen:not([pos=corner]) .secondary,
.onboardingContainer.transition-in .screen:not([pos=corner]) .secondary-cta:not(.top) {
opacity: 0;
translate: 0 calc(-1 * var(--translate));
@ -1082,6 +1092,7 @@ body[lwt-newtab-brighttext] {
transition-delay: 0.2s;
}
.onboardingContainer.transition-out .screen:not(.dialog-last):not([pos=corner]) .primary,
.onboardingContainer.transition-out .screen:not(.dialog-last):not([pos=corner]) .secondary,
.onboardingContainer.transition-out .screen:not(.dialog-last):not([pos=corner]) .secondary-cta:not(.top) {
opacity: 0;
translate: 0 var(--translate);

7
browser/components/newtab/aboutwelcome/lib/AboutWelcomeDefaults.jsm
Просмотреть файл

@ -78,21 +78,14 @@ const DEFAULT_WELCOME_CONTENT = {
content: {
logo: {},
title: { string_id: "onboarding-live-language-header" },
subtitle: { string_id: "onboarding-live-language-subtitle" },
has_noodles: true,
languageSwitcher: {
switch: {
string_id: "onboarding-live-language-switch-button-label",
},
downloading: {
string_id: "onboarding-live-language-button-label-downloading",
},
cancel: {
string_id: "onboarding-live-language-secondary-cancel-download",
},
not_now: {
string_id: "onboarding-live-language-not-now-button-label",
},
waiting: { string_id: "onboarding-live-language-waiting-button" },
skip: { string_id: "onboarding-live-language-skip-button-label" },
action: {

13
browser/components/newtab/content-src/aboutwelcome/aboutwelcome.scss
Просмотреть файл

@ -969,7 +969,8 @@ body {
}
}
.primary {
.primary,
.secondary {
font-size: 13px;
line-height: 16px;
padding: 11px 15px;
@ -980,6 +981,11 @@ body {
}
}
.secondary {
background-color: var(--in-content-button-background);
color: var(--in-content-button-text-color);
}
// Styles specific to background noodles, with screen-by-screen positions
.noodle {
display: block;
@ -1184,6 +1190,7 @@ body {
}
.primary,
.secondary,
.secondary-cta,
.steps {
transition-delay: 1s;
@ -1198,6 +1205,7 @@ body {
}
.primary,
.secondary,
.secondary-cta {
transition-delay: 0.4s;
}
@ -1253,6 +1261,7 @@ body {
.brand-logo,
.welcome-text,
.primary,
.secondary,
.secondary-cta:not(.top),
.message-text {
opacity: 0;
@ -1288,6 +1297,7 @@ body {
.colorway-variations,
.tiles-theme-section,
.primary,
.secondary,
.secondary-cta:not(.top) {
opacity: 0;
translate: 0 calc(-1 * var(--translate));
@ -1346,6 +1356,7 @@ body {
}
.primary,
.secondary,
.secondary-cta:not(.top) {
opacity: 0;
translate: 0 var(--translate);

70
browser/components/newtab/content-src/aboutwelcome/components/LanguageSwitcher.jsx
Просмотреть файл

@ -42,13 +42,17 @@ export function useLanguageSwitcher(
if (langPack) {
// Convert the BCP 47 identifiers into the proper display names.
// e.g. "fr-CA" -> "Canadian French".
const displayNames = new Intl.DisplayNames(
const appDN = new Intl.DisplayNames(
appAndSystemLocaleInfo.appLocaleRaw,
{ type: "language" }
);
const langPackDN = new Intl.DisplayNames(langPack.target_locale, {
type: "language",
});
setNegotiatedLanguage({
displayName: displayNames.of(langPack.target_locale),
langPackDisplayName: langPackDN.of(langPack.target_locale),
appDisplayName: appDN.of(appAndSystemLocaleInfo.appLocaleRaw),
langPack,
requestSystemLocales: [
langPack.target_locale,
@ -57,7 +61,8 @@ export function useLanguageSwitcher(
});
} else {
setNegotiatedLanguage({
displayName: null,
langPackDisplayName: null,
appDisplayName: null,
langPack: null,
requestSystemLocales: null,
});
@ -160,13 +165,13 @@ export function LanguageSwitcher(props) {
// The message args are the localized language names.
const withMessageArgs = obj => {
const displayName = negotiatedLanguage?.displayName;
if (displayName) {
const langPackDisplayName = negotiatedLanguage?.langPackDisplayName;
if (langPackDisplayName) {
return {
...obj,
args: {
...obj.args,
negotiatedLanguage: displayName,
negotiatedLanguage: langPackDisplayName,
},
};
}
@ -189,6 +194,7 @@ export function LanguageSwitcher(props) {
// the localized text elements rendering as blank, then filling in the text.
return (
<>
{/* Pre-loading screen */}
<div style={{ display: showPreloadingScreen ? "block" : "none" }}>
<button
className="primary"
@ -214,6 +220,7 @@ export function LanguageSwitcher(props) {
</Localized>
</div>
</div>
{/* Waiting to download the language screen. */}
<div style={{ display: showWaitingScreen ? "block" : "none" }}>
<button
className="primary"
@ -245,31 +252,38 @@ export function LanguageSwitcher(props) {
</Localized>
</div>
</div>
{/* The typical ready screen. */}
<div style={{ display: showReadyScreen ? "block" : "none" }}>
<div>
<Localized text={withMessageArgs(content.languageSwitcher.switch)}>
<button
className="primary"
value="primary_button"
onClick={() => {
AboutWelcomeUtils.sendActionTelemetry(
messageId,
"download_langpack"
);
setIsAwaitingLangpack(true);
}}
/>
</Localized>
<button
className="primary"
value="primary_button"
onClick={() => {
AboutWelcomeUtils.sendActionTelemetry(
messageId,
"download_langpack"
);
setIsAwaitingLangpack(true);
}}
>
{
// This is the localized name from the Intl.DisplayNames API.
negotiatedLanguage?.langPackDisplayName
}
</button>
</div>
<div className="secondary-cta">
<Localized text={content.languageSwitcher.not_now}>
<button
type="button"
className="secondary text-link"
value="decline"
onClick={handleAction}
/>
</Localized>
<div>
<button
type="button"
className="secondary"
value="decline"
onClick={handleAction}
>
{
// This is the localized name from the Intl.DisplayNames API.
negotiatedLanguage?.appDisplayName
}
</button>
</div>
</div>
</>

16
browser/components/newtab/test/browser/browser_aboutwelcome_multistage_languageSwitcher.js
Просмотреть файл

@ -104,9 +104,9 @@ async function testScreenContent(
unexpectedSelectors: unexpected,
}) => {
function selectorIsVisible(selector) {
const el = content.document.querySelector(selector);
const els = content.document.querySelectorAll(selector);
// The offsetParent will be null if element is hidden through "display: none;"
return el && el.offsetParent !== null;
return [...els].some(el => el.offsetParent !== null);
}
for (let selector of expected) {
@ -204,8 +204,8 @@ add_task(async function test_aboutwelcome_languageSwitcher_accept() {
// Expected selectors:
[
...liveLanguageSwitchSelectors,
`[data-l10n-id="onboarding-live-language-switch-button-label"]`,
`[data-l10n-id="onboarding-live-language-not-now-button-label"]`,
`button.primary[value="primary_button"]`,
`button.secondary[value="decline"]`,
],
// Unexpected selectors:
[
@ -317,8 +317,8 @@ add_task(async function test_aboutwelcome_languageSwitcher_accept() {
// Expected selectors:
[
...liveLanguageSwitchSelectors,
`[data-l10n-id="onboarding-live-language-switch-button-label"]`,
`[data-l10n-id="onboarding-live-language-not-now-button-label"]`,
`button.primary[value="primary_button"]`,
`button.secondary[value="decline"]`,
],
// Unexpected selectors:
[
@ -419,8 +419,8 @@ add_task(async function test_aboutwelcome_languageSwitcher_decline() {
// Expected selectors:
[
...liveLanguageSwitchSelectors,
`[data-l10n-id="onboarding-live-language-switch-button-label"]`,
`[data-l10n-id="onboarding-live-language-not-now-button-label"]`,
`button.primary[value="primary_button"]`,
`button.secondary[value="decline"]`,
],
// Unexpected selectors:
[

8
browser/locales/en-US/browser/newtab/onboarding.ftl
Просмотреть файл

@ -228,20 +228,14 @@ mr2-onboarding-start-browsing-button-label = Start browsing
## The following language names are generated by the browser's Intl.DisplayNames API.
##
## Variables:
## $appLanguage (String) - The name of Firefox's language, e.g. "American English"
## $systemLanguage (String) - The name of the OS's language, e.g. "European Spanish"
## $negotiatedLanguage (String) - The name of the langpack's language, e.g. "European Spanish"
onboarding-live-language-header = Choose Your Language
onboarding-live-language-subtitle = { -brand-short-name } is using { $appLanguage } while your system is using { $systemLanguage }.
onboarding-live-language-header = Choose your language
onboarding-live-language-switch-button-label = Switch to { $negotiatedLanguage }
onboarding-live-language-button-label-downloading = Downloading the language pack for { $negotiatedLanguage }…
onboarding-live-language-waiting-subtitle = It looks like your system and { -brand-short-name } are using different languages.
onboarding-live-language-waiting-button = Getting available languages…
onboarding-live-language-installing = Installing the language pack for { $negotiatedLanguage }…
onboarding-live-language-secondary-cancel-download = Cancel
onboarding-live-language-not-now-button-label = Not now
onboarding-live-language-skip-button-label = Skip
## Firefox 100 Thank You screens