Skip to content

Commit

Permalink
Bug 1735976 - Update Firefox Suggest preferences: Part 2 - Update the…
Browse files Browse the repository at this point in the history 
… preferences UI. r=Gijs

This updates the Privacy pane for the new Firefox Suggest preferences spec.

Please see the spec here: https://mozilla-hub.atlassian.net/browse/SNT-37

The Jira description is a little out of date, and the wording of these new
strings (which are not exposed to localizers) isn't finalized, but I'm told the
structure of the UI is final more or less.

There is also a Figma here: https://www.figma.com/file/seJ2ZA4v3FgoV7jCxUR74B/Firefox-Suggest-exploration?node-id=3197%3A55695

We're replacing the current two Firefox Suggest checkboxes with three toggle
buttons. The first two toggle buttons correspond to the existing
`browser.urlbar.suggest.quicksuggest` and
`browser.urlbar.suggest.quicksuggest.sponsored` prefs. However, the second pref
is no longer dependent on the first, and it can be toggled regardless of whether
the first is enabled. The third toggle corresponds to a new pref,
`browser.urlbar.quicksuggest.dataCollection.enabled`. It can also be toggled
independently of the others.

In addition, we're adding an info bar/box below the toggles to explain to the
user the effect of their toggle selection. The text in the box depends on the
state of the toggles. The box itself is hidden when all three toggles are off.

Depends on D129224

Differential Revision: https://phabricator.services.mozilla.com/D128661
  • Loading branch information
@0c0w3
0c0w3 committed Nov 9, 2021
1 parent dae7518 commit a9f8a9e
Show file tree
Hide file tree
Showing 8 changed files with 531 additions and 486 deletions.
1 change: 1 addition & 0 deletions browser/components/preferences/preferences.xhtml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
<?xml-stylesheet href="chrome://global/skin/global.css"?>

<?xml-stylesheet href="chrome://global/skin/in-content/common.css"?>
<?xml-stylesheet href="chrome://global/skin/in-content/toggle-button.css"?>
<?xml-stylesheet href="chrome://browser/skin/preferences/preferences.css"?>
<?xml-stylesheet href="chrome://browser/content/preferences/dialogs/handlers.css"?>
<?xml-stylesheet href="chrome://browser/skin/preferences/applications.css"?>
Expand Down
80 changes: 61 additions & 19 deletions browser/components/preferences/privacy.inc.xhtml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -650,28 +650,70 @@
preference="browser.urlbar.suggest.topsites"/>
<checkbox id="enginesSuggestion" data-l10n-id="addressbar-locbar-engines-option"
preference="browser.urlbar.suggest.engines"/>
<!-- #firefoxSuggestContainer is visible only for users enrolled in Firefox Suggest rollouts. -->
<vbox id="firefoxSuggestContainer" hidden="true">
<hbox align="center">
<checkbox id="firefoxSuggestSuggestion"
class="tail-with-learn-more"
data-l10n-id="addressbar-locbar-firefox-suggest-option"
preference="browser.urlbar.suggest.quicksuggest"/>
<label id="firefoxSuggestSuggestionLearnMore"
class="learnMore"
is="text-link"
<vbox class="firefoxSuggestOptionBox">
<hbox align="center">
<label id="firefoxSuggestNonsponsoredLabel"
flex="1"
data-l10n-id="addressbar-firefox-suggest-nonsponsored"/>
<html:input id="firefoxSuggestNonsponsoredToggle"
type="checkbox"
class="toggle-button firefoxSuggestToggle"
preference="browser.urlbar.suggest.quicksuggest"
aria-labelledby="firefoxSuggestNonsponsoredLabel"
aria-describedby="firefoxSuggestNonsponsoredDescription"/>
</hbox>
<description id="firefoxSuggestNonsponsoredDescription"
class="tip-caption firefoxSuggestOptionDescription"
data-l10n-id="addressbar-firefox-suggest-nonsponsored-description"/>
</vbox>
<vbox class="firefoxSuggestOptionBox">
<hbox align="center">
<label id="firefoxSuggestSponsoredLabel"
flex="1"
data-l10n-id="addressbar-firefox-suggest-sponsored"/>
<html:input id="firefoxSuggestSponsoredToggle"
type="checkbox"
class="toggle-button firefoxSuggestToggle"
preference="browser.urlbar.suggest.quicksuggest.sponsored"
aria-labelledby="firefoxSuggestSponsoredLabel"
aria-describedby="firefoxSuggestSponsoredDescription"/>
</hbox>
<description id="firefoxSuggestSponsoredDescription"
class="tip-caption firefoxSuggestOptionDescription"
data-l10n-id="addressbar-firefox-suggest-sponsored-description"/>
</vbox>
<vbox class="firefoxSuggestOptionBox">
<hbox align="center">
<label id="firefoxSuggestDataCollectionLabel"
flex="1"
data-l10n-id="addressbar-firefox-suggest-data-collection"/>
<html:input id="firefoxSuggestDataCollectionToggle"
type="checkbox"
class="toggle-button firefoxSuggestToggle"
preference="browser.urlbar.quicksuggest.dataCollection.enabled"
aria-labelledby="firefoxSuggestDataCollectionLabel"
aria-describedby="firefoxSuggestDataCollectionDescription"/>
</hbox>
<description class="tip-caption firefoxSuggestOptionDescription">
<html:span id="firefoxSuggestDataCollectionDescription"
class="tail-with-learn-more"
data-l10n-id="addressbar-firefox-suggest-data-collection-description"/>
<label id="firefoxSuggestDataCollectionLearnMore"
class="learnMore firefoxSuggestLearnMore" is="text-link"
data-l10n-id="addressbar-locbar-firefox-suggest-learn-more"/>
</hbox>
<description id="firefoxSuggestSuggestionDescription"
hidden="true"
class="indent tip-caption"
data-l10n-id="addressbar-locbar-firefox-suggest-description"/>
<vbox class="indent">
<checkbox id="firefoxSuggestSponsoredSuggestion"
data-l10n-id="addressbar-locbar-firefox-suggest-sponsored-option"/>
<description class="indent tip-caption"
data-l10n-id="addressbar-locbar-firefox-suggest-sponsored-description"/>
</description>
</vbox>
<hbox id="firefoxSuggestInfoBox" class="info-box-container" align="start"
hidden="true">
<image class="info-icon"/>
<description class="tip-caption" flex="1">
<html:span id="firefoxSuggestInfoText" class="tail-with-learn-more"/>
<label id="firefoxSuggestInfoBoxLearnMore"
class="learnMore firefoxSuggestLearnMore" is="text-link"
data-l10n-id="addressbar-locbar-firefox-suggest-learn-more"/>
</description>
</hbox>
</vbox>
<label id="openSearchEnginePreferences" is="text-link"
data-l10n-id="addressbar-suggestions-settings"/>
Expand Down
117 changes: 75 additions & 42 deletions browser/components/preferences/privacy.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -158,6 +158,7 @@ Preferences.addAll([
{ id: "browser.urlbar.suggest.engines", type: "bool" },
{ id: "browser.urlbar.suggest.quicksuggest", type: "bool" },
{ id: "browser.urlbar.suggest.quicksuggest.sponsored", type: "bool" },
{ id: "browser.urlbar.quicksuggest.dataCollection.enabled", type: "bool" },

// History
{ id: "places.history.enabled", type: "bool" },
Expand Down Expand Up @@ -1992,7 +1993,7 @@ var gPrivacyPane = {
// or scenario changes.
this._urlbarPrefObserver = {
onPrefChanged: pref => {
if (["quicksuggest.enabled", "quicksuggest.scenario"].includes(pref)) {
if (pref == "quicksuggest.enabled") {
this._updateFirefoxSuggestSection();
}
},
Expand All @@ -2004,31 +2005,24 @@ var gPrivacyPane = {
this._urlbarPrefObserver = null;
});

// Set up the sponsored checkbox. When the main checkbox is checked, the
// sponsored checkbox should be enabled and its checked status should
// reflect the sponsored pref. When the main checkbox is unchecked, the
// sponsored checkbox should be disabled and unchecked, but the sponsored
// pref should retain its value. Due to this complexity, we manage the
// sponsored checkbox manually.
Preferences.get("browser.urlbar.suggest.quicksuggest").on("change", () =>
// Update the enabled and checked status of the sponsored checkbox when
// the main pref changes.
this._updateFirefoxSuggestSponsoredCheckbox()
);
setEventListener("firefoxSuggestSponsoredSuggestion", "command", () => {
// Update the sponsored pref value when the sponsored checkbox is
// toggled.
Preferences.get(
"browser.urlbar.suggest.quicksuggest.sponsored"
).value = document.getElementById(
"firefoxSuggestSponsoredSuggestion"
).checked;
});
// The Firefox Suggest info box potentially needs updating when any of the
// toggles change.
let infoBoxPrefs = [
"browser.urlbar.suggest.quicksuggest",
"browser.urlbar.suggest.quicksuggest.sponsored",
"browser.urlbar.quicksuggest.dataCollection.enabled",
];
for (let pref of infoBoxPrefs) {
Preferences.get(pref).on("change", () =>
this._updateFirefoxSuggestInfoBox()
);
}

// Set the Firefox Suggest learn-more link URL.
document
.getElementById("firefoxSuggestSuggestionLearnMore")
.setAttribute("href", UrlbarProviderQuickSuggest.helpUrl);
// Set the URL of the Firefox Suggest learn-more links.
let links = document.querySelectorAll(".firefoxSuggestLearnMore");
for (let link of links) {
link.setAttribute("href", UrlbarProviderQuickSuggest.helpUrl);
}

this._updateFirefoxSuggestSection(true);
},
Expand All @@ -2051,15 +2045,15 @@ var gPrivacyPane = {
};
for (let [elementId, l10nId] of Object.entries(l10nIdByElementId)) {
let element = document.getElementById(elementId);
element.dataset.l10nIdOriginal = element.dataset.l10nId;
element.dataset.l10nIdOriginal ??= element.dataset.l10nId;
element.dataset.l10nId = l10nId;
}
// The main checkbox description discusses data collection, which we
// perform only in the "online" scenario. Hide it otherwise.
document.getElementById("firefoxSuggestSuggestionDescription").hidden =
UrlbarPrefs.get("quicksuggest.scenario") != "online";
// Add the extraMargin class to the engine-prefs link.
document
.getElementById("openSearchEnginePreferences")
.classList.add("extraMargin");
// Show the container.
this._updateFirefoxSuggestSponsoredCheckbox();
this._updateFirefoxSuggestInfoBox();
container.removeAttribute("hidden");
} else if (!onInit) {
// Firefox Suggest is not enabled. This is the default, so to avoid
Expand All @@ -2073,23 +2067,62 @@ var gPrivacyPane = {
delete element.dataset.l10nIdOriginal;
document.l10n.translateElements([element]);
}
document
.getElementById("openSearchEnginePreferences")
.classList.remove("extraMargin");
}
},

/**
* Updates the sponsored Firefox Suggest checkbox (in the address bar section)
* depending on the status of the main Firefox Suggest checkbox.
* Updates the Firefox Suggest info box (in the address bar section) depending
* on the states of the Firefox Suggest toggles.
*/
_updateFirefoxSuggestSponsoredCheckbox() {
let sponsoredCheckbox = document.getElementById(
"firefoxSuggestSponsoredSuggestion"
);
sponsoredCheckbox.disabled = !Preferences.get(
"browser.urlbar.suggest.quicksuggest"
_updateFirefoxSuggestInfoBox() {
let nonsponsored = Preferences.get("browser.urlbar.suggest.quicksuggest")
.value;
let sponsored = Preferences.get(
"browser.urlbar.suggest.quicksuggest.sponsored"
).value;
let dataCollection = Preferences.get(
"browser.urlbar.quicksuggest.dataCollection.enabled"
).value;
sponsoredCheckbox.checked =
!sponsoredCheckbox.disabled &&
Preferences.get("browser.urlbar.suggest.quicksuggest.sponsored").value;

// Get the l10n ID of the appropriate text based on the values of the three
// prefs.
let l10nId;
if (nonsponsored && sponsored && dataCollection) {
l10nId = "addressbar-firefox-suggest-info-all";
} else if (nonsponsored && sponsored && !dataCollection) {
l10nId = "addressbar-firefox-suggest-info-nonsponsored-sponsored";
} else if (nonsponsored && !sponsored && dataCollection) {
l10nId = "addressbar-firefox-suggest-info-nonsponsored-data";
} else if (nonsponsored && !sponsored && !dataCollection) {
l10nId = "addressbar-firefox-suggest-info-nonsponsored";
} else if (!nonsponsored && sponsored && dataCollection) {
l10nId = "addressbar-firefox-suggest-info-sponsored-data";
} else if (!nonsponsored && sponsored && !dataCollection) {
l10nId = "addressbar-firefox-suggest-info-sponsored";
} else if (!nonsponsored && !sponsored && dataCollection) {
l10nId = "addressbar-firefox-suggest-info-data";
}

let instance = (this._firefoxSuggestInfoBoxInstance = {});
let infoBox = document.getElementById("firefoxSuggestInfoBox");
if (!l10nId) {
infoBox.hidden = true;
} else {
let infoText = document.getElementById("firefoxSuggestInfoText");
infoText.dataset.l10nId = l10nId;

// If the info box is currently hidden and we unhide it immediately, it
// will show its old text until the new text is asyncly fetched and shown.
// That's ugly, so wait for the fetch to finish before unhiding it.
document.l10n.translateElements([infoText]).then(() => {
if (instance == this._firefoxSuggestInfoBoxInstance) {
infoBox.hidden = false;
}
});
}
},

// GEOLOCATION
Expand Down
Loading

0 comments on commit a9f8a9e

Please sign in to comment.