From 36d22d82aa202bb199967e9512281e9a53db42c9 Mon Sep 17 00:00:00 2001 From: Daniel Baumann Date: Sun, 7 Apr 2024 21:33:14 +0200 Subject: Adding upstream version 115.7.0esr. Signed-off-by: Daniel Baumann --- .../components/urlbar/content/firefoxSuggest.ftl | 280 +++++++++++++++++ .../components/urlbar/content/interventions.ftl | 40 +++ .../urlbar/content/preloaded-top-urls.json | 22 ++ .../urlbar/content/quicksuggestOnboarding.css | 311 +++++++++++++++++++ .../urlbar/content/quicksuggestOnboarding.html | 109 +++++++ .../urlbar/content/quicksuggestOnboarding.js | 338 +++++++++++++++++++++ .../content/quicksuggestOnboarding_magglass.svg | 34 +++ .../quicksuggestOnboarding_magglass_animation.svg | 4 + browser/components/urlbar/content/stripOnShare.ftl | 18 ++ .../components/urlbar/content/suggest-example.svg | 53 ++++ 10 files changed, 1209 insertions(+) create mode 100644 browser/components/urlbar/content/firefoxSuggest.ftl create mode 100644 browser/components/urlbar/content/interventions.ftl create mode 100644 browser/components/urlbar/content/preloaded-top-urls.json create mode 100644 browser/components/urlbar/content/quicksuggestOnboarding.css create mode 100644 browser/components/urlbar/content/quicksuggestOnboarding.html create mode 100644 browser/components/urlbar/content/quicksuggestOnboarding.js create mode 100644 browser/components/urlbar/content/quicksuggestOnboarding_magglass.svg create mode 100644 browser/components/urlbar/content/quicksuggestOnboarding_magglass_animation.svg create mode 100644 browser/components/urlbar/content/stripOnShare.ftl create mode 100644 browser/components/urlbar/content/suggest-example.svg (limited to 'browser/components/urlbar/content') diff --git a/browser/components/urlbar/content/firefoxSuggest.ftl b/browser/components/urlbar/content/firefoxSuggest.ftl new file mode 100644 index 0000000000..6cd1a710d4 --- /dev/null +++ b/browser/components/urlbar/content/firefoxSuggest.ftl @@ -0,0 +1,280 @@ +# 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/. + +### These strings are related to the Firefox Suggest feature. Firefox Suggest +### shows recommended and sponsored third-party results in the address bar +### panel. It also shows headings/labels above different groups of results. For +### example, a "Firefox Suggest" label is shown above bookmarks and history +### results, and an "{ $engine } Suggestions" label may be shown above search +### suggestion results. + +## These strings are used in the urlbar panel. + +# A label shown above the top pick group in the urlbar results. +urlbar-group-best-match = + .label = Top pick + +# Label shown above an extension suggestion in the urlbar results (an +# alternative phrasing is "Extension for Firefox"). It's singular since only one +# suggested extension is displayed. +urlbar-group-addon = + .label = { -brand-product-name } extension + +# Tooltip text for the block button shown in top pick rows. +firefox-suggest-urlbar-block = + .title = Dismiss this suggestion + +# Block menu item shown in the result menu of top pick and quick suggest +# results. +urlbar-result-menu-dismiss-firefox-suggest = + .label = Dismiss this suggestion + .accesskey = D + +# Tooltip text for the help button shown in Firefox Suggest urlbar results. +firefox-suggest-urlbar-learn-more = + .title = Learn more about { -firefox-suggest-brand-name } + +# Learn More menu item shown in the result menu of Firefox Suggest results. +urlbar-result-menu-learn-more-about-firefox-suggest = + .label = Learn more about { -firefox-suggest-brand-name } + .accesskey = L + +# A message shown in a result when the user gives feedback on it. +firefox-suggest-feedback-acknowledgment = Thanks for your feedback + +# A message that replaces a result when the user dismisses it. +firefox-suggest-dismissal-acknowledgment = Thanks for your feedback. You won’t see this again. + +## These strings are used for weather suggestions in the urlbar. + +# This string is displayed above the current temperature +firefox-suggest-weather-currently = Currently + +# This string displays the current temperature value and unit +# Variables: +# $value (number) - The temperature value +# $unit (String) - The unit for the temperature +firefox-suggest-weather-temperature = { $value }°{ $unit } + +# This string is the title of the weather summary +# Variables: +# $city (String) - The name of the city the weather data is for +firefox-suggest-weather-title = Weather for { $city } + +# This string displays the weather summary +# Variables: +# $currentConditions (String) - The current weather conditions summary +# $forecast (String) - The forecast weather conditions summary +firefox-suggest-weather-summary-text = { $currentConditions }; { $forecast } + +# This string displays the high and low temperatures +# Variables: +# $high (number) - The number for the high temperature +# $unit (String) - The unit for the temperature +# $low (number) - The number for the low temperature +firefox-suggest-weather-high-low = High: { $high }°{ $unit } · Low: { $low }°{ $unit } + +# This string displays the name of the weather provider +# Variables: +# $provider (String) - The name of the weather provider +firefox-suggest-weather-sponsored = { $provider } · Sponsored + +firefox-suggest-command-show-less-frequently = + .label = Show less frequently +firefox-suggest-command-dont-show-this = + .label = Don’t show this +firefox-suggest-command-not-relevant = + .label = Not relevant +firefox-suggest-command-not-interested = + .label = Not interested +firefox-suggest-weather-command-inaccurate-location = + .label = Report inaccurate location + +# This string displays the number of reviews in the add-ons suggestion +# Variables: +# $quantity (number) - The number of reviews for the add-on. +firefox-suggest-addons-reviews = + { $quantity -> + [one] { $quantity } review + *[other] { $quantity } reviews + } + +# This string explaining that the add-on suggestion is a recommendation. +firefox-suggest-addons-recommended = Recommended + +## These strings are used in the preferences UI (about:preferences). Their names +## follow the naming conventions of other strings used in the preferences UI. + +# When the user is enrolled in a Firefox Suggest rollout, this text replaces +# the usual addressbar-header string and becomes the text of the address bar +# section in the preferences UI. +addressbar-header-firefox-suggest = Address Bar — { -firefox-suggest-brand-name } + +# When the user is enrolled in a Firefox Suggest rollout, this text replaces +# the usual addressbar-suggest string and becomes the text of the description of +# the address bar section in the preferences UI. +addressbar-suggest-firefox-suggest = Choose the type of suggestions that appear in the address bar: + +# The best match checkbox label. This toggle controls best match suggestions +# related to the user's search string. +addressbar-firefox-suggest-best-match-option = + .label = Top pick +addressbar-best-match-learn-more = Learn more + +# First Firefox Suggest toggle button main label and description. This toggle +# controls non-sponsored suggestions related to the user's search string. +addressbar-firefox-suggest-nonsponsored = + .label = Suggestions from the web + .description = Get suggestions from { -brand-product-name } related to your search. + +# Second Firefox Suggest toggle button main label and description. This toggle +# controls sponsored suggestions related to the user's search string. +addressbar-firefox-suggest-sponsored = + .label = Suggestions from sponsors + .description = Support the development of { -brand-short-name } with occasional sponsored suggestions. + +# Third Firefox Suggest toggle button main label and description. This toggle +# controls data collection related to the user's search string. +addressbar-firefox-suggest-data-collection = + .label = Improve the { -firefox-suggest-brand-name } experience + .description = Help create a richer search experience by allowing { -vendor-short-name } to process your search queries. + +# The "Learn more" link shown in the Firefox Suggest preferences UI. +addressbar-locbar-firefox-suggest-learn-more = Learn more + +## The following addressbar-firefox-suggest-info strings are shown in the +## Firefox Suggest preferences UI in the info box underneath the toggle buttons. +## Each string is shown when a particular toggle combination is active. + +# Non-sponsored suggestions: on +# Sponsored suggestions: on +# Data collection: on +addressbar-firefox-suggest-info-all = Based on your selection, you’ll receive suggestions from the web, including sponsored sites. We will process your search query data to develop the { -firefox-suggest-brand-name } feature. + +# Non-sponsored suggestions: on +# Sponsored suggestions: on +# Data collection: off +addressbar-firefox-suggest-info-nonsponsored-sponsored = Based on your selection, you’ll receive suggestions from the web, including sponsored sites. We won’t process your search query data. + +# Non-sponsored suggestions: on +# Sponsored suggestions: off +# Data collection: on +addressbar-firefox-suggest-info-nonsponsored-data = Based on your selection, you’ll receive suggestions from the web, but no sponsored sites. We will process your search query data to develop the { -firefox-suggest-brand-name } feature. + +# Non-sponsored suggestions: on +# Sponsored suggestions: off +# Data collection: off +addressbar-firefox-suggest-info-nonsponsored = Based on your selection, you’ll receive suggestions from the web, but no sponsored sites. We won’t process your search query data. + +# Non-sponsored suggestions: off +# Sponsored suggestions: on +# Data collection: on +addressbar-firefox-suggest-info-sponsored-data = Based on your selection, you’ll receive sponsored suggestions. We will process your search query data to develop the { -firefox-suggest-brand-name } feature. + +# Non-sponsored suggestions: off +# Sponsored suggestions: on +# Data collection: off +addressbar-firefox-suggest-info-sponsored = Based on your selection, you’ll receive sponsored suggestions. We won’t process your search query data. + +# Non-sponsored suggestions: off +# Sponsored suggestions: off +# Data collection: on +addressbar-firefox-suggest-info-data = Based on your selection, you won’t receive suggestions from the web or sponsored sites. We will process your search query data to develop the { -firefox-suggest-brand-name } feature. + +addressbar-dismissed-suggestions-label = Dismissed suggestions +addressbar-restore-dismissed-suggestions-description = Restore dismissed suggestions from sponsors and the web. +addressbar-restore-dismissed-suggestions-button = + .label = Restore +addressbar-restore-dismissed-suggestions-learn-more = Learn more + +## Used as title on the introduction pane. The text can be formatted to span +## multiple lines as needed (line breaks are significant). + +firefox-suggest-onboarding-introduction-title-1 = + Make sure you’ve got our latest + search experience +firefox-suggest-onboarding-introduction-title-2 = + We’re building a better search experience — + one you can trust +firefox-suggest-onboarding-introduction-title-3 = + We’re building a better way to find what + you’re looking for on the web +firefox-suggest-onboarding-introduction-title-4 = + A faster search experience is in the works +firefox-suggest-onboarding-introduction-title-5 = + Together, we can create the kind of search + experience the Internet deserves +firefox-suggest-onboarding-introduction-title-6 = + Meet { -firefox-suggest-brand-name }, the next + evolution in search +firefox-suggest-onboarding-introduction-title-7 = + Find the best of the web, faster. + +## + +firefox-suggest-onboarding-introduction-close-button = + .title = Close + +firefox-suggest-onboarding-introduction-next-button-1 = Find out how +firefox-suggest-onboarding-introduction-next-button-2 = Find out more +firefox-suggest-onboarding-introduction-next-button-3 = Show me how + +## Used as title on the main pane. The text can be formatted to span +## multiple lines as needed (line breaks are significant). + +firefox-suggest-onboarding-main-title-1 = + We’re building a richer search experience +firefox-suggest-onboarding-main-title-2 = + Help us guide the way to the + best of the Internet +firefox-suggest-onboarding-main-title-3 = + A richer, smarter search experience +firefox-suggest-onboarding-main-title-4 = + Finding the best of the web, faster +firefox-suggest-onboarding-main-title-5 = + We’re building a better search experience — + you can help +firefox-suggest-onboarding-main-title-6 = + It’s time to think outside the search engine +firefox-suggest-onboarding-main-title-7 = + We’re building a smarter search experience — + one you can trust +firefox-suggest-onboarding-main-title-8 = + Finding the best of the web should be + simpler and more secure. +firefox-suggest-onboarding-main-title-9 = + Find the best of the web, faster + +## + +firefox-suggest-onboarding-main-description-1 = Allowing { -vendor-short-name } to process your search queries means you’re helping us create smarter, more relevant search suggestions. And, as always, we’ll keep your privacy top of mind. +firefox-suggest-onboarding-main-description-2 = When you allow { -vendor-short-name } to process your search queries, you’re helping build a better { -firefox-suggest-brand-name } for everyone. And, as always, we’ll keep your privacy top of mind. +firefox-suggest-onboarding-main-description-3 = What if your browser helped you zero in on what you’re actually looking for? Allowing { -vendor-short-name } to process your search queries helps us create more relevant search suggestions that still keep your privacy top of mind. +firefox-suggest-onboarding-main-description-4 = You’re trying to get where you’re going on the web and get on with it. When you allow { -vendor-short-name } to process your search queries, we can help you get there faster—while keeping your privacy top of mind. +firefox-suggest-onboarding-main-description-5 = Allowing { -vendor-short-name } to process your search queries will help us create more relevant suggestions for everyone. And, as always, we’ll keep your privacy top of mind. +firefox-suggest-onboarding-main-description-6 = Allowing { -vendor-short-name } to process your search queries will help us create more relevant search suggestions. We’re building { -firefox-suggest-brand-name } to help you get where you’re going on the Internet while keeping your privacy in mind. +firefox-suggest-onboarding-main-description-7 = Allowing { -vendor-short-name } to process your search queries helps us create more relevant search suggestions. +firefox-suggest-onboarding-main-description-8 = Allowing { -vendor-short-name } to process your search queries helps us provide more relevant search suggestions. We don’t use this data to profile you on the web. +firefox-suggest-onboarding-main-description-9 = + We’re building a better search experience. When you allow { -vendor-short-name } to process your search queries, we can create more relevant search suggestions for you. + Learn more + +firefox-suggest-onboarding-main-privacy-first = No user profiling. Privacy-first, always. + +firefox-suggest-onboarding-main-accept-option-label = Allow. Learn more +firefox-suggest-onboarding-main-accept-option-label-2 = Enable + +firefox-suggest-onboarding-main-accept-option-description-1 = Help improve the { -firefox-suggest-brand-name } feature with more relevant suggestions. Your search queries will be processed. +firefox-suggest-onboarding-main-accept-option-description-2 = Recommended for people who support improving the { -firefox-suggest-brand-name } feature. 
Your search queries will be processed. +firefox-suggest-onboarding-main-accept-option-description-3 = Help improve the { -firefox-suggest-brand-name } experience. Your search queries will be processed. + +firefox-suggest-onboarding-main-reject-option-label = Don’t allow. +firefox-suggest-onboarding-main-reject-option-label-2 = Keep disabled + +firefox-suggest-onboarding-main-reject-option-description-1 = Keep the default { -firefox-suggest-brand-name } experience with the strictest data-sharing controls. +firefox-suggest-onboarding-main-reject-option-description-2 = Recommended for people who prefer the strictest data-sharing controls. Keep the default experience. +firefox-suggest-onboarding-main-reject-option-description-3 = Leave the default { -firefox-suggest-brand-name } experience with the strictest data-sharing controls. + +firefox-suggest-onboarding-main-submit-button = Save preferences +firefox-suggest-onboarding-main-skip-link = Not now diff --git a/browser/components/urlbar/content/interventions.ftl b/browser/components/urlbar/content/interventions.ftl new file mode 100644 index 0000000000..50738ba703 --- /dev/null +++ b/browser/components/urlbar/content/interventions.ftl @@ -0,0 +1,40 @@ +# 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/. + +### These strings appear in Urlbar Interventions. Interventions appear in the +### Urlbar in response to the user's query. For example, if we detect that the +### user is searching how to clear their history, we show the Intervention +### described by clear-data. + +intervention-clear-data = Clear your cache, cookies, history and more. +intervention-clear-data-confirm = Choose What to Clear… +intervention-refresh-profile = Restore default settings and remove old add-ons for optimal performance. +intervention-refresh-profile-confirm = Refresh { -brand-short-name }… + +## These strings describe Interventions helping the user with the Firefox update +## process. +## +## Shown when an update is available to download. + +intervention-update-ask = A new version of { -brand-short-name } is available. +intervention-update-ask-confirm = Install and Restart to Update + +## Shown when Firefox does not need to update so instead we offer to refresh +## the user's profile. + +intervention-update-refresh = { -brand-short-name } is up to date. Trying to fix a problem? Restore default settings and remove old add-ons for optimal performance. +intervention-update-refresh-confirm = Refresh { -brand-short-name }… + +## Shown when an update is downloaded and Firefox is ready to install it. + +intervention-update-restart = The latest { -brand-short-name } is downloaded and ready to install. +intervention-update-restart-confirm = Restart to Update + +## Shown when Firefox cannot update itself. The button will open the download +## page on the Firefox website. + +intervention-update-web = Get the latest { -brand-short-name } browser. +intervention-update-web-confirm = Download Now + +## diff --git a/browser/components/urlbar/content/preloaded-top-urls.json b/browser/components/urlbar/content/preloaded-top-urls.json new file mode 100644 index 0000000000..a94b85d76d --- /dev/null +++ b/browser/components/urlbar/content/preloaded-top-urls.json @@ -0,0 +1,22 @@ +[ + ["https://www.google.com/", "Google"], + ["https://www.youtube.com/", "YouTube"], + ["https://www.facebook.com/", "Facebook"], + ["https://www.baidu.com/", "百度一下"], + ["https://www.yahoo.com/", "Yahoo"], + ["https://www.wikipedia.org/", "Wikipedia"], + ["http://www.qq.com/", "腾讯首页"], + ["http://www.sohu.com/", "搜狐"], + ["https://world.taobao.com/", "淘宝海外全球站"], + ["https://www.tmall.com/", "天猫tmall.com"], + ["https://www.live.com/", "Live"], + ["https://www.amazon.com/", "Amazon.com"], + ["https://vk.com/", "VK"], + ["https://twitter.com/", "Twitter"], + ["https://www.instagram.com/", "Instagram"], + ["http://360.cn/", "360公司官网"], + ["http://www.sina.com.cn/", "新浪首页"], + ["https://www.linkedin.com/", "LinkedIn"], + ["http://www.jd.com/", "京东(JD.COM)"], + ["https://www.reddit.com/", "reddit"] +] diff --git a/browser/components/urlbar/content/quicksuggestOnboarding.css b/browser/components/urlbar/content/quicksuggestOnboarding.css new file mode 100644 index 0000000000..6ed8454398 --- /dev/null +++ b/browser/components/urlbar/content/quicksuggestOnboarding.css @@ -0,0 +1,311 @@ +/* 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/. */ + +/** + * When making changes, follow the example of the AboutWelcome messaging surface for font sizes, line heights, + * etc. See: https://searchfox.org/mozilla-central/source/browser/components/newtab/content-src/aboutwelcome/aboutwelcome.scss + */ + +:root { + --introduction-magglass-logo-height: 128px; + --introduction-firefox-logo-height: 72px; + --introduction-image-height: 224px; + --main-magglass-logo-height: 64px; + --main-firefox-logo-height: 50px; + --x-large-margin: 40px; + --large-margin: 24px; + --large-margin-const: 24px; + --small-margin: 16px; + --small-margin-const: 16px; + --x-small-margin-const: 8px; + --section-vertical-padding: 32px; + --section-horizontal-padding: 64px; +} + +body.compact { + --introduction-image-height: 183px; + --main-magglass-logo-height: 48px; + --main-firefox-logo-height: 32px; + --x-large-margin: 20px; + --large-margin: 12px; + --small-margin: 8px; + --section-vertical-padding: 16px; + --section-horizontal-padding: 32px; + + /* 15px is the non-compact font-size. */ + font-size: 13px; +} + +body, +section { + width: 536px; +} + +section { + display: flex; + align-items: stretch; + justify-content: center; + flex-direction: column; + text-align: center; + padding: var(--section-vertical-padding) var(--section-horizontal-padding); + /* This is the largest approximate natural height of the main section across + platforms and dialog variations, erring on the side of being slightly + larger than necessary. If you change this, also update COMPACT_MODE_HEIGHT + in the JS. */ + min-height: 650px; +} + +body.compact section { + /* This is the largest approximate natural height of the main section across + platforms and dialog variations in compact mode, erring on the side of + being slightly larger than necessary. */ + min-height: 510px; +} + +a { + cursor: pointer; + font-weight: normal; +} + +.title { + font-size: 1.6em; + font-weight: 600; + line-height: 1.5; + white-space: pre-line; +} + +.logo { + background-repeat: no-repeat; + background-position: center; + background-size: contain; + border: none; +} + +.description-section { + /* The effective visual margin between the description and first option should + be --large-margin-const. Each child in the description has a bottom margin + of --small-margin, so subtract it from --large-margin-const. */ + margin-block: 0 calc(var(--large-margin-const) - var(--small-margin)); +} + +.description { + font-size: 1.1em; + font-weight: 400; + line-height: 1.6; + margin-block: 0 var(--small-margin); + white-space: pre-line; +} + +.privacy-first { + font-size: 1.1em; + font-weight: 700; + margin-block: 0 var(--small-margin); +} + +.pager > span { + display: inline-block; + border-radius: 3px; + width: 6px; + height: 6px; + background-color: var(--in-content-border-color); + margin-inline: 4px; +} + +.pager > .current { + background-color: var(--in-content-primary-button-background); +} + +#introduction-section .logo { + background-image: url("quicksuggestOnboarding_magglass.svg"); + height: var(--introduction-magglass-logo-height); + margin-block-end: var(--large-margin); +} + +#introduction-section .logo.firefox { + background-image: url("chrome://branding/content/about-logo.svg"); + height: var(--introduction-firefox-logo-height); +} + +@media (prefers-reduced-motion: no-preference) { + #introduction-section .logo { + background-image: url("quicksuggestOnboarding_magglass_animation.svg"); + } +} + +#introduction-section .title { + margin-block-end: var(--x-large-margin); +} + +#introduction-image { + height: var(--introduction-image-height); + background-image: url("suggest-example.svg"); + background-size: contain; + background-repeat: no-repeat; + background-position: center; + margin-block: var(--large-margin); +} + +/* fx100 layout */ +#introduction-section.layout-100 .logo { + height: var(--main-firefox-logo-height); +} + +#introduction-section.layout-100 .title { + margin-block: 0 var(--small-margin); +} + +#introduction-section:not(.layout-100) .description-section { + display: none; +} + +#onboardingClose { + position: absolute; + top: 0; + inset-inline-end: 0; + margin: 16px; + padding: 0; + line-height: 0; + min-width: 20px; + min-height: 20px; +} + +#onboardingClose img { + -moz-context-properties: fill; + fill: currentColor; +} + +#main-section:not(.active) { + display: none; +} + +#main-section .logo { + background-image: url("quicksuggestOnboarding_magglass.svg"); + height: var(--main-magglass-logo-height); + margin-block-end: var(--large-margin); +} + +#main-section .logo.firefox { + background-image: url("chrome://branding/content/about-logo.svg"); + height: var(--main-firefox-logo-height); +} + +#main-section .title { + margin-block: 0 var(--small-margin); +} + +#main-section .privacy-first:not(.active) { + display: none; +} + +#main-section .option { + border-radius: 4px; + border: 2px solid var(--in-content-box-info-background); + display: flex; + text-align: start; + /* Use --small-margin-const for the horizontal padding to make the option's + horizontal padding larger than the vertical padding in compact mode. The + radio button and text are too close to the left and right edges of the + option's border otherwise. */ + padding: var(--small-margin) var(--small-margin-const); + flex-direction: row; +} + +#main-section .option.selected { + border-color: var(--in-content-primary-button-background); +} + +#main-section .option.accept { + margin-block-end: var(--small-margin); +} + +#main-section .option.reject { + margin-block-end: var(--large-margin-const); +} + +#main-section .option > label { + /* Make the whole option area selectable for the radio button. 22px is the + width of the radio button and its inline margin. */ + padding-block: var(--small-margin); + padding-inline-start: calc(22px + var(--small-margin-const)); + padding-inline-end: var(--small-margin-const); + margin-block: calc(-1 * var(--small-margin)); + margin-inline-start: calc(-1 * (22px + var(--small-margin-const))); + margin-inline-end: calc(-1 * var(--small-margin-const)); +} + +body:not(.compact) #main-section .option > input { + /* Vertically align the radio button with the .option-label. */ + margin-block-start: 0.25em; +} + +#main-section .option-label { + font-size: 1.1em; + font-weight: 600; + margin-block-end: 2px; +} + +#main-section .option-description { + font-size: 1em; +} + +.buttonBox { + display: flex; + flex-direction: column; + align-items: center; +} + +button { + margin-block-end: var(--large-margin); +} + +#onboardingSkipLink { + margin-block-end: var(--x-small-margin-const); +} + +/* transition from introduction to main */ +#introduction-section.inactive { + /* Avoid including this section size */ + position: fixed; + pointer-events: none; + animation: fadeout 0.3s forwards; +} + +#main-section.active { + animation: fadein 0.3s forwards; +} + +@keyframes fadeout { + 0% { + opacity: 1; + } + 100% { + visibility: hidden; + opacity: 0; + } +} + +@keyframes fadein { + 0% { + opacity: 0; + } + 100% { + pointer-events: initial; + opacity: 1; + } +} + +/* Show main only without transition */ +body.skip-introduction #introduction-section.inactive { + animation: none; + display: none; +} + +body.skip-introduction #main-section.active { + animation: none; + pointer-events: initial; +} + +body.skip-introduction .pager { + display: none; +} diff --git a/browser/components/urlbar/content/quicksuggestOnboarding.html b/browser/components/urlbar/content/quicksuggestOnboarding.html new file mode 100644 index 0000000000..46247537d8 --- /dev/null +++ b/browser/components/urlbar/content/quicksuggestOnboarding.html @@ -0,0 +1,109 @@ + + + + + + + + + + + + + + + + +
+ + +

+
+

+ +

+

+ +
+
+ +
+ + +
+
+
+
+ +

+
+

+ +

+

+
+
+ + +
+
+ + +
+
+ + +
+ + +
+
+
+ + diff --git a/browser/components/urlbar/content/quicksuggestOnboarding.js b/browser/components/urlbar/content/quicksuggestOnboarding.js new file mode 100644 index 0000000000..5b78bd4409 --- /dev/null +++ b/browser/components/urlbar/content/quicksuggestOnboarding.js @@ -0,0 +1,338 @@ +/* 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 { QuickSuggest } = ChromeUtils.importESModule( + "resource:///modules/QuickSuggest.sys.mjs" +); +const { ONBOARDING_CHOICE } = QuickSuggest; + +const VARIATION_MAP = { + a: { + l10nUpdates: { + onboardingNext: "firefox-suggest-onboarding-introduction-next-button-1", + "introduction-title": "firefox-suggest-onboarding-introduction-title-1", + "main-title": "firefox-suggest-onboarding-main-title-1", + "main-description": "firefox-suggest-onboarding-main-description-1", + "main-accept-option-label": + "firefox-suggest-onboarding-main-accept-option-label", + "main-accept-option-description": + "firefox-suggest-onboarding-main-accept-option-description-1", + "main-reject-option-label": + "firefox-suggest-onboarding-main-reject-option-label", + "main-reject-option-description": + "firefox-suggest-onboarding-main-reject-option-description-1", + }, + }, + b: { + l10nUpdates: { + onboardingNext: "firefox-suggest-onboarding-introduction-next-button-1", + "introduction-title": "firefox-suggest-onboarding-introduction-title-2", + "main-title": "firefox-suggest-onboarding-main-title-2", + "main-description": "firefox-suggest-onboarding-main-description-2", + "main-accept-option-label": + "firefox-suggest-onboarding-main-accept-option-label", + "main-accept-option-description": + "firefox-suggest-onboarding-main-accept-option-description-1", + "main-reject-option-label": + "firefox-suggest-onboarding-main-reject-option-label", + "main-reject-option-description": + "firefox-suggest-onboarding-main-reject-option-description-1", + }, + }, + c: { + logoType: "firefox", + l10nUpdates: { + onboardingNext: "firefox-suggest-onboarding-introduction-next-button-1", + "introduction-title": "firefox-suggest-onboarding-introduction-title-3", + "main-title": "firefox-suggest-onboarding-main-title-3", + "main-description": "firefox-suggest-onboarding-main-description-3", + "main-accept-option-label": + "firefox-suggest-onboarding-main-accept-option-label", + "main-accept-option-description": + "firefox-suggest-onboarding-main-accept-option-description-1", + "main-reject-option-label": + "firefox-suggest-onboarding-main-reject-option-label", + "main-reject-option-description": + "firefox-suggest-onboarding-main-reject-option-description-1", + }, + }, + d: { + l10nUpdates: { + onboardingNext: "firefox-suggest-onboarding-introduction-next-button-1", + "introduction-title": "firefox-suggest-onboarding-introduction-title-4", + "main-title": "firefox-suggest-onboarding-main-title-4", + "main-description": "firefox-suggest-onboarding-main-description-4", + "main-accept-option-label": + "firefox-suggest-onboarding-main-accept-option-label", + "main-accept-option-description": + "firefox-suggest-onboarding-main-accept-option-description-2", + "main-reject-option-label": + "firefox-suggest-onboarding-main-reject-option-label", + "main-reject-option-description": + "firefox-suggest-onboarding-main-reject-option-description-2", + }, + }, + e: { + logoType: "firefox", + l10nUpdates: { + onboardingNext: "firefox-suggest-onboarding-introduction-next-button-1", + "introduction-title": "firefox-suggest-onboarding-introduction-title-5", + "main-title": "firefox-suggest-onboarding-main-title-5", + "main-description": "firefox-suggest-onboarding-main-description-5", + "main-accept-option-label": + "firefox-suggest-onboarding-main-accept-option-label", + "main-accept-option-description": + "firefox-suggest-onboarding-main-accept-option-description-2", + "main-reject-option-label": + "firefox-suggest-onboarding-main-reject-option-label", + "main-reject-option-description": + "firefox-suggest-onboarding-main-reject-option-description-2", + }, + }, + f: { + l10nUpdates: { + onboardingNext: "firefox-suggest-onboarding-introduction-next-button-2", + "introduction-title": "firefox-suggest-onboarding-introduction-title-6", + "main-title": "firefox-suggest-onboarding-main-title-6", + "main-description": "firefox-suggest-onboarding-main-description-6", + "main-accept-option-label": + "firefox-suggest-onboarding-main-accept-option-label", + "main-accept-option-description": + "firefox-suggest-onboarding-main-accept-option-description-2", + "main-reject-option-label": + "firefox-suggest-onboarding-main-reject-option-label", + "main-reject-option-description": + "firefox-suggest-onboarding-main-reject-option-description-2", + }, + }, + g: { + mainPrivacyFirst: true, + l10nUpdates: { + onboardingNext: "firefox-suggest-onboarding-introduction-next-button-1", + "introduction-title": "firefox-suggest-onboarding-introduction-title-7", + "main-title": "firefox-suggest-onboarding-main-title-7", + "main-description": "firefox-suggest-onboarding-main-description-7", + "main-accept-option-label": + "firefox-suggest-onboarding-main-accept-option-label", + "main-accept-option-description": + "firefox-suggest-onboarding-main-accept-option-description-2", + "main-reject-option-label": + "firefox-suggest-onboarding-main-reject-option-label", + "main-reject-option-description": + "firefox-suggest-onboarding-main-reject-option-description-2", + }, + }, + h: { + logoType: "firefox", + l10nUpdates: { + onboardingNext: "firefox-suggest-onboarding-introduction-next-button-1", + "introduction-title": "firefox-suggest-onboarding-introduction-title-2", + "main-title": "firefox-suggest-onboarding-main-title-8", + "main-description": "firefox-suggest-onboarding-main-description-8", + "main-accept-option-label": + "firefox-suggest-onboarding-main-accept-option-label", + "main-accept-option-description": + "firefox-suggest-onboarding-main-accept-option-description-1", + "main-reject-option-label": + "firefox-suggest-onboarding-main-reject-option-label", + "main-reject-option-description": + "firefox-suggest-onboarding-main-reject-option-description-1", + }, + }, + "100-a": { + introductionLayout: "layout-100", + mainPrivacyFirst: true, + logoType: "firefox", + l10nUpdates: { + onboardingNext: "firefox-suggest-onboarding-introduction-next-button-3", + "introduction-title": "firefox-suggest-onboarding-main-title-9", + "main-title": "firefox-suggest-onboarding-main-title-9", + "main-description": "firefox-suggest-onboarding-main-description-9", + "main-accept-option-label": + "firefox-suggest-onboarding-main-accept-option-label-2", + "main-accept-option-description": + "firefox-suggest-onboarding-main-accept-option-description-3", + "main-reject-option-label": + "firefox-suggest-onboarding-main-reject-option-label-2", + "main-reject-option-description": + "firefox-suggest-onboarding-main-reject-option-description-3", + }, + }, + "100-b": { + mainPrivacyFirst: true, + logoType: "firefox", + l10nUpdates: { + "main-title": "firefox-suggest-onboarding-main-title-9", + "main-description": "firefox-suggest-onboarding-main-description-9", + "main-accept-option-label": + "firefox-suggest-onboarding-main-accept-option-label-2", + "main-accept-option-description": + "firefox-suggest-onboarding-main-accept-option-description-3", + "main-reject-option-label": + "firefox-suggest-onboarding-main-reject-option-label-2", + "main-reject-option-description": + "firefox-suggest-onboarding-main-reject-option-description-3", + }, + skipIntroduction: true, + }, +}; + +// If the window height is smaller than this value when the dialog opens, then +// the dialog will open in compact mode. The dialog will not change modes while +// it's open even if the window height changes. +const COMPACT_MODE_HEIGHT = + 650 + // section min-height (non-compact mode) + 2 * 32 + // 2 * --section-vertical-padding (non-compact mode) + 44; // approximate height of the browser window's tab bar + +// Used for test only. If links or buttons may be clicked or typed Key_Enter +// while translating l10n, cannot capture the events since not register listeners +// yet. To avoid the issue, add this flag to know the listeners are ready. +let resolveOnboardingReady; +window._quicksuggestOnboardingReady = new Promise(r => { + resolveOnboardingReady = r; +}); + +document.addEventListener("DOMContentLoaded", async () => { + await document.l10n.ready; + + const variation = + VARIATION_MAP[window.arguments[0].variationType] || VARIATION_MAP.a; + + document.l10n.pauseObserving(); + try { + await applyVariation(variation); + } finally { + document.l10n.resumeObserving(); + } + + addSubmitListener(document.getElementById("onboardingClose"), () => { + window.arguments[0].choice = ONBOARDING_CHOICE.CLOSE_1; + window.close(); + }); + addSubmitListener(document.getElementById("onboardingNext"), () => { + gotoMain(variation); + }); + addSubmitListener(document.getElementById("onboardingLearnMore"), () => { + window.arguments[0].choice = ONBOARDING_CHOICE.LEARN_MORE_2; + window.close(); + }); + addSubmitListener( + document.getElementById("onboardingLearnMoreOnIntroduction"), + () => { + window.arguments[0].choice = ONBOARDING_CHOICE.LEARN_MORE_1; + window.close(); + } + ); + addSubmitListener(document.getElementById("onboardingSkipLink"), () => { + window.arguments[0].choice = ONBOARDING_CHOICE.NOT_NOW_2; + window.close(); + }); + + const onboardingSubmit = document.getElementById("onboardingSubmit"); + const onboardingAccept = document.getElementById("onboardingAccept"); + const onboardingReject = document.getElementById("onboardingReject"); + function optionChangeListener() { + onboardingSubmit.removeAttribute("disabled"); + onboardingAccept + .closest(".option") + .classList.toggle("selected", onboardingAccept.checked); + onboardingReject + .closest(".option") + .classList.toggle("selected", !onboardingAccept.checked); + } + onboardingAccept.addEventListener("change", optionChangeListener); + onboardingReject.addEventListener("change", optionChangeListener); + + function submitListener() { + if (!onboardingAccept.checked && !onboardingReject.checked) { + return; + } + + window.arguments[0].choice = onboardingAccept.checked + ? ONBOARDING_CHOICE.ACCEPT_2 + : ONBOARDING_CHOICE.REJECT_2; + window.close(); + } + addSubmitListener(onboardingSubmit, submitListener); + onboardingAccept.addEventListener("keydown", e => { + if (e.keyCode == e.DOM_VK_RETURN) { + submitListener(); + } + }); + onboardingReject.addEventListener("keydown", e => { + if (e.keyCode == e.DOM_VK_RETURN) { + submitListener(); + } + }); + + if (window.outerHeight < COMPACT_MODE_HEIGHT) { + document.body.classList.add("compact"); + } + + resolveOnboardingReady(); +}); + +function gotoMain(variation) { + window.arguments[0].visitedMain = true; + + document.getElementById("introduction-section").classList.add("inactive"); + document.getElementById("main-section").classList.add("active"); + + document.body.setAttribute("aria-labelledby", "main-title"); + let ariaDescribedBy = "main-description"; + if (variation.mainPrivacyFirst) { + ariaDescribedBy += " main-privacy-first"; + } + document.body.setAttribute("aria-describedby", ariaDescribedBy); +} + +async function applyVariation(variation) { + if (variation.logoType) { + for (const logo of document.querySelectorAll(".logo")) { + logo.classList.add(variation.logoType); + } + } + + if (variation.mainPrivacyFirst) { + const label = document.querySelector("#main-section .privacy-first"); + label.classList.add("active"); + } + + if (variation.l10nUpdates) { + const translatedElements = []; + for (const [id, newL10N] of Object.entries(variation.l10nUpdates)) { + const element = document.getElementById(id); + document.l10n.setAttributes(element, newL10N); + translatedElements.push(element); + } + await document.l10n.translateElements(translatedElements); + } + + if (variation.skipIntroduction) { + document.body.classList.add("skip-introduction"); + gotoMain(variation); + } + + if (variation.introductionLayout) { + document + .getElementById("introduction-section") + .classList.add(variation.introductionLayout); + } +} + +function addSubmitListener(element, listener) { + if (!element) { + console.warn("Element is null on addSubmitListener"); + return; + } + element.addEventListener("click", listener); + element.addEventListener("keydown", e => { + if (e.keyCode == e.DOM_VK_RETURN) { + listener(); + } + }); +} diff --git a/browser/components/urlbar/content/quicksuggestOnboarding_magglass.svg b/browser/components/urlbar/content/quicksuggestOnboarding_magglass.svg new file mode 100644 index 0000000000..7e9d140e35 --- /dev/null +++ b/browser/components/urlbar/content/quicksuggestOnboarding_magglass.svg @@ -0,0 +1,34 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/browser/components/urlbar/content/quicksuggestOnboarding_magglass_animation.svg b/browser/components/urlbar/content/quicksuggestOnboarding_magglass_animation.svg new file mode 100644 index 0000000000..e0f9130a3b --- /dev/null +++ b/browser/components/urlbar/content/quicksuggestOnboarding_magglass_animation.svg @@ -0,0 +1,4 @@ + + diff --git a/browser/components/urlbar/content/stripOnShare.ftl b/browser/components/urlbar/content/stripOnShare.ftl new file mode 100644 index 0000000000..3a9b5678ea --- /dev/null +++ b/browser/components/urlbar/content/stripOnShare.ftl @@ -0,0 +1,18 @@ +# 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/. + +### These strings are related to the Firefox Strip on Share Feature. +### Strip on Share is closely related to QueryStringStripping and strips +### query strings when copying from the url bar or when copying in-content links. + +## These strings are used in the context menu of the url bar +## and the in-content context menu. + +main-context-menu-strip-on-share-link = + .label = Copy Clean Link + .accesskey = y + +text-action-strip-on-share = + .label = Copy Clean + .accesskey = n diff --git a/browser/components/urlbar/content/suggest-example.svg b/browser/components/urlbar/content/suggest-example.svg new file mode 100644 index 0000000000..7557d8ef82 --- /dev/null +++ b/browser/components/urlbar/content/suggest-example.svg @@ -0,0 +1,53 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + -- cgit v1.2.3