mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-10-13 05:15:45 +00:00
Bug 1502361 - Remove Content Blocking toggle from about:privatebrowsing. r=Ehsan
This simply removes the content blocking section when TP is not enabled to avoid overpromising. We may update this UI to alert the user that TP is off after the UX team comes back with a new design. Differential Revision: https://phabricator.services.mozilla.com/D10071 --HG-- extra : moz-landing-system : lando
This commit is contained in:
Johann Hofmann
parent
60130b7c6e
commit
21717ca7b3
@ -4,29 +4,8 @@
|
||||
|
||||
/* eslint-env mozilla/frame-script */
|
||||
|
||||
const CB_ENABLED_PREF = "browser.contentblocking.enabled";
|
||||
const TP_ENABLED_PREF = "privacy.trackingprotection.enabled";
|
||||
const TP_PB_ENABLED_PREF = "privacy.trackingprotection.pbmode.enabled";
|
||||
|
||||
function updateTPInfo() {
|
||||
let tpButton = document.getElementById("tpButton");
|
||||
let tpToggle = document.getElementById("tpToggle");
|
||||
let tpSubHeader = document.getElementById("tpSubHeader");
|
||||
|
||||
let globalTrackingEnabled = RPMGetBoolPref(TP_ENABLED_PREF);
|
||||
let trackingEnabled = globalTrackingEnabled || RPMGetBoolPref(TP_PB_ENABLED_PREF);
|
||||
|
||||
let contentBlockingEnabled = RPMGetBoolPref(CB_ENABLED_PREF);
|
||||
trackingEnabled = trackingEnabled && contentBlockingEnabled;
|
||||
|
||||
// if tracking protection is enabled globally we don't even give the user
|
||||
// a choice here by hiding the toggle completely.
|
||||
tpButton.toggleAttribute("hidden", globalTrackingEnabled);
|
||||
tpToggle.checked = trackingEnabled;
|
||||
|
||||
tpSubHeader.classList.toggle("tp-off", !trackingEnabled);
|
||||
}
|
||||
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
if (!RPMIsWindowPrivate()) {
|
||||
document.documentElement.classList.remove("private");
|
||||
@ -50,22 +29,9 @@ document.addEventListener("DOMContentLoaded", function() {
|
||||
document.getElementById("learnMore").setAttribute("href",
|
||||
RPMGetFormatURLPref("app.support.baseURL") + "private-browsing");
|
||||
|
||||
let tpToggle = document.getElementById("tpToggle");
|
||||
document.getElementById("tpButton").addEventListener("click", () => {
|
||||
tpToggle.click();
|
||||
});
|
||||
tpToggle.addEventListener("change", async function() {
|
||||
let promises = [];
|
||||
if (tpToggle.checked) {
|
||||
promises.push(RPMSetBoolPref(CB_ENABLED_PREF, true));
|
||||
}
|
||||
|
||||
promises.push(RPMSetBoolPref(TP_PB_ENABLED_PREF, tpToggle.checked));
|
||||
|
||||
await Promise.all(promises);
|
||||
|
||||
updateTPInfo();
|
||||
});
|
||||
|
||||
updateTPInfo();
|
||||
let tpEnabled = RPMGetBoolPref(TP_PB_ENABLED_PREF);
|
||||
if (!tpEnabled) {
|
||||
document.getElementById("tpSubHeader").remove();
|
||||
document.getElementById("tpSection").remove();
|
||||
}
|
||||
});
|
||||
|
||||
@ -58,11 +58,9 @@
|
||||
|
||||
<h2 id="tpSubHeader" class="about-subheader">
|
||||
<span id="cbTitle">&contentBlocking.title;</span>
|
||||
<input id="tpToggle" class="toggle toggle-input" type="checkbox"/>
|
||||
<span id="tpButton" class="toggle-btn"></span>
|
||||
</h2>
|
||||
|
||||
<section class="section-main">
|
||||
<section id="tpSection" class="section-main">
|
||||
<p id="cbDescription">&contentBlocking.description;</p>
|
||||
<p>
|
||||
<a id="startTour" class="button">&trackingProtection.startTour1;</a>
|
||||
@ -72,7 +70,6 @@
|
||||
<section class="section-main">
|
||||
<p class="about-info">&aboutPrivateBrowsing.learnMore3.before;<a id="learnMore" target="_blank">&aboutPrivateBrowsing.learnMore3.title;</a>&aboutPrivateBrowsing.learnMore3.after;</p>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -73,51 +73,3 @@ add_task(async function test_links() {
|
||||
await BrowserTestUtils.closeWindow(win);
|
||||
});
|
||||
|
||||
function waitForPrefChanged(pref) {
|
||||
return new Promise(resolve => {
|
||||
let prefObserver = {
|
||||
QueryInterface: ChromeUtils.generateQI([Ci.nsIObserver]),
|
||||
observe() {
|
||||
Services.prefs.removeObserver(pref, prefObserver);
|
||||
resolve();
|
||||
},
|
||||
};
|
||||
Services.prefs.addObserver(pref, prefObserver);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Tests the action to disable and re-enable Tracking Protection in
|
||||
* "about:privatebrowsing" when content blocking is disabled.
|
||||
*/
|
||||
add_task(async function test_toggleTrackingProtectionContentBlocking() {
|
||||
Services.prefs.setBoolPref(TP_PB_ENABLED_PREF, true);
|
||||
Services.prefs.setBoolPref(CB_ENABLED_PREF, false);
|
||||
|
||||
registerCleanupFunction(function() {
|
||||
Services.prefs.clearUserPref(TP_PB_ENABLED_PREF);
|
||||
Services.prefs.clearUserPref(CB_ENABLED_PREF);
|
||||
});
|
||||
|
||||
let { win, tab } = await openAboutPrivateBrowsing();
|
||||
|
||||
let promiseCBPrefChanged = waitForPrefChanged(CB_ENABLED_PREF);
|
||||
await ContentTask.spawn(tab, {}, async function() {
|
||||
is(content.document.getElementById("tpToggle").checked, false, "toggle is not active");
|
||||
content.document.getElementById("tpButton").click();
|
||||
});
|
||||
await promiseCBPrefChanged;
|
||||
ok(Services.prefs.getBoolPref(TP_PB_ENABLED_PREF), "Tracking Protection is enabled.");
|
||||
ok(Services.prefs.getBoolPref(CB_ENABLED_PREF), "Content Blocking is enabled.");
|
||||
|
||||
let promiseTPPrefChanged = waitForPrefChanged(TP_PB_ENABLED_PREF);
|
||||
await ContentTask.spawn(tab, {}, async function() {
|
||||
is(content.document.getElementById("tpToggle").checked, true, "toggle is active");
|
||||
content.document.getElementById("tpButton").click();
|
||||
});
|
||||
await promiseTPPrefChanged;
|
||||
ok(!Services.prefs.getBoolPref(TP_PB_ENABLED_PREF), "Tracking Protection is disabled.");
|
||||
ok(Services.prefs.getBoolPref(CB_ENABLED_PREF), "Content Blocking is enabled.");
|
||||
|
||||
await BrowserTestUtils.closeWindow(win);
|
||||
});
|
||||
|
||||
@ -243,5 +243,4 @@
|
||||
skin/classic/browser/privatebrowsing/aboutPrivateBrowsing.css (../shared/privatebrowsing/aboutPrivateBrowsing.css)
|
||||
skin/classic/browser/privatebrowsing/favicon.svg (../shared/privatebrowsing/favicon.svg)
|
||||
skin/classic/browser/privatebrowsing/private-browsing.svg (../shared/privatebrowsing/private-browsing.svg)
|
||||
skin/classic/browser/privatebrowsing/tracking-protection-off.svg (../shared/privatebrowsing/tracking-protection-off.svg)
|
||||
skin/classic/browser/privatebrowsing/tracking-protection.svg (../shared/privatebrowsing/tracking-protection.svg)
|
||||
|
||||
@ -78,10 +78,6 @@ p {
|
||||
background-position: right;
|
||||
}
|
||||
|
||||
.about-subheader.tp-off {
|
||||
background-image: url("chrome://browser/skin/privatebrowsing/tracking-protection-off.svg");
|
||||
}
|
||||
|
||||
.about-info {
|
||||
font-size: .9em;
|
||||
}
|
||||
@ -97,63 +93,3 @@ a.button {
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/**
|
||||
* We want to hide the checkbox in lieu of the toggle-btn
|
||||
* "slider toggle". We need to make the toggle keyboard
|
||||
* focusable, however, which is not possible if it's
|
||||
* display:none. We work around this by making the toggle
|
||||
* invisible but still present in the display list, allowing
|
||||
* it to receive keyboard events. When it is focused by keyboard,
|
||||
* we use the -moz-focusring selector on the invisible checkbox
|
||||
* to show a focus ring around the slider toggle.
|
||||
*/
|
||||
.toggle-input {
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.toggle + .toggle-btn {
|
||||
box-sizing: border-box;
|
||||
cursor: pointer;
|
||||
min-width: 48px;
|
||||
height: 27px;
|
||||
border-radius: 13px;
|
||||
background-color: var(--color-grey);
|
||||
border: 1px solid #202340;
|
||||
}
|
||||
|
||||
.toggle + .toggle-btn::after {
|
||||
position: relative;
|
||||
display: block;
|
||||
content: "";
|
||||
width: 25px;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
border-radius: 50%;
|
||||
background: white;
|
||||
transition: left .2s ease;
|
||||
}
|
||||
|
||||
.toggle + .toggle-btn:dir(rtl)::after {
|
||||
left: auto;
|
||||
right: 0;
|
||||
transition-property: right;
|
||||
}
|
||||
|
||||
.toggle:checked + .toggle-btn {
|
||||
background: #16da00;
|
||||
border-color: #0CA700;
|
||||
}
|
||||
|
||||
.toggle:checked + .toggle-btn::after {
|
||||
inset-inline-start: 21px;
|
||||
}
|
||||
|
||||
.toggle:-moz-focusring + .toggle-btn {
|
||||
outline: 2px solid rgba(0, 149, 221, 0.5);
|
||||
outline-offset: 1px;
|
||||
-moz-outline-radius: 2px;
|
||||
}
|
||||
|
||||
@ -1,15 +0,0 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- 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/. -->
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
|
||||
<g fill="#ccc">
|
||||
<path d="M28.8,0.3l-2.4,2.4L16.1,1.1L4.9,2.9c-1,0.2-1.8,1-1.8,2c0,2.5,0,6.9,0.3,8.7c0.4,4.3,1.2,6.9,2.7,9.4l-3.5,3.5l2,2
|
||||
L30.8,2.3L28.8,0.3z M5.3,13.5c-0.2-1.9-0.2-6.2-0.2-8.6c0,0,0,0,0.1,0l10.9-1.8l8.6,1.4L16.1,13V5L7.2,6.6c-0.1,0-0.1,0-0.1,0
|
||||
c0,2,0,5.6,0.2,7.1c0.3,3,0.8,4.9,1.6,6.5l-1.4,1.4C6.3,19.6,5.6,17.3,5.3,13.5z"/>
|
||||
<path d="M16.1,20.3l-3.9,3.9c1.7,1.2,3.4,1.6,3.9,1.7V20.3z"/>
|
||||
<path d="M26.9,13.4c-0.5,5.6-1.7,8-3.8,10.7c-2.4,3.1-6.1,3.9-7,4.1c-0.7-0.2-3.2-0.7-5.4-2.5L9.3,27c3.1,2.7,6.7,3,6.7,3
|
||||
s5.2-0.5,8.6-4.9c2.5-3.2,3.6-5.9,4.2-11.6c0.1-1.3,0.2-4,0.2-6.3l-2,2C27,10.9,27,12.5,26.9,13.4z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 980 B |
@ -23,12 +23,9 @@ let RPMAccessManager = {
|
||||
accessMap: {
|
||||
"about:privatebrowsing": {
|
||||
// "sendAsyncMessage": handled within AboutPrivateBrowsingHandler.jsm
|
||||
// "setBoolPref": handled within AsyncPrefs.jsm and uses the prefs
|
||||
// ["browser.contentblocking.enabled",
|
||||
// "privacy.trackingprotection.pbmode.enabled"],
|
||||
"getBoolPref": ["browser.contentblocking.enabled",
|
||||
"privacy.trackingprotection.enabled",
|
||||
"privacy.trackingprotection.pbmode.enabled"],
|
||||
// "setBoolPref": handled within AsyncPrefs.jsm and uses the pref
|
||||
// ["privacy.trackingprotection.pbmode.enabled"],
|
||||
"getBoolPref": ["privacy.trackingprotection.pbmode.enabled"],
|
||||
"getFormatURLPref": ["privacy.trackingprotection.introURL",
|
||||
"app.support.baseURL"],
|
||||
"isWindowPrivate": ["yes"],
|
||||
|
||||
@ -20,7 +20,6 @@ const kAllowedPrefs = new Set([
|
||||
"narrate.rate",
|
||||
"narrate.voice",
|
||||
|
||||
"browser.contentblocking.enabled",
|
||||
"privacy.trackingprotection.pbmode.enabled",
|
||||
|
||||
"reader.font_size",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user