Bug 1462468 - Add a tracking protection option to the hamburger menu. r=mikedeboer

MozReview-Commit-ID: HxRljbdsRau

--HG--
extra : rebase_source : 3f3aae722ca2e1b6a28a29a5116d66bf40aa8092

browser/base/content/browser-sets.inc

@@ -186,6 +186,7 @@
     </broadcaster>
     <broadcaster id="reportPhishingBroadcaster" disabled="true"/>
     <broadcaster id="reportPhishingErrorBroadcaster" disabled="true"/>
+    <broadcaster id="trackingProtectionBroadcaster" enabled="false"/>
   </broadcasterset>
 
   <keyset id="mainKeyset">

browser/base/content/browser-trackingprotection.js

@@ -20,6 +20,16 @@ var TrackingProtection = {
     this.container = $("#tracking-protection-container");
     this.content = $("#tracking-protection-content");
     this.icon = $("#tracking-protection-icon");
+    this.broadcaster = $("#trackingProtectionBroadcaster");
+
+    this.enableTooltip =
+      gNavigatorBundle.getString("trackingProtection.toggle.enable.tooltip");
+    this.disableTooltip =
+      gNavigatorBundle.getString("trackingProtection.toggle.disable.tooltip");
+    this.enableTooltipPB =
+      gNavigatorBundle.getString("trackingProtection.toggle.enable.pbmode.tooltip");
+    this.disableTooltipPB =
+      gNavigatorBundle.getString("trackingProtection.toggle.disable.pbmode.tooltip");
 
     this.updateEnabled();
     Services.prefs.addObserver(this.PREF_ENABLED_GLOBALLY, this);
@@ -49,12 +59,36 @@ var TrackingProtection = {
             PrivateBrowsingUtils.isWindowPrivate(window));
   },
 
+  onGlobalToggleCommand() {
+    if (PrivateBrowsingUtils.isWindowPrivate(window)) {
+      Services.prefs.setBoolPref(this.PREF_ENABLED_IN_PRIVATE_WINDOWS, !this.enabledInPrivateWindows);
+    } else {
+      Services.prefs.setBoolPref(this.PREF_ENABLED_GLOBALLY, !this.enabledGlobally);
+    }
+  },
+
+  openPreferences() {
+    openPreferences("privacy-trackingprotection", { origin: "appMenu-trackingprotection" });
+  },
+
   updateEnabled() {
     this.enabledGlobally =
       Services.prefs.getBoolPref(this.PREF_ENABLED_GLOBALLY);
     this.enabledInPrivateWindows =
       Services.prefs.getBoolPref(this.PREF_ENABLED_IN_PRIVATE_WINDOWS);
     this.container.hidden = !this.enabled;
+
+    if (PrivateBrowsingUtils.isWindowPrivate(window)) {
+      this.broadcaster.setAttribute("enabled", this.enabledInPrivateWindows);
+      this.broadcaster.setAttribute("aria-pressed", this.enabledInPrivateWindows);
+      this.broadcaster.setAttribute("tooltiptext", this.enabledInPrivateWindows ?
+        this.disableTooltipPB : this.enableTooltipPB);
+    } else {
+      this.broadcaster.setAttribute("enabled", this.enabledGlobally);
+      this.broadcaster.setAttribute("aria-pressed", this.enabledGlobally);
+      this.broadcaster.setAttribute("tooltiptext", this.enabledGlobally ?
+        this.disableTooltip : this.enableTooltip);
+    }
   },
 
   enabledHistogramAdd(value) {

browser/base/content/moz.build

@@ -92,6 +92,9 @@ with Files("test/tabs/**"):
 with Files("test/touch/**"):
     BUG_COMPONENT = ("Firefox", "General")
 
+with Files("test/trackingUI/**"):
+    BUG_COMPONENT = ("Firefox", "Tracking Protection")
+
 with Files("test/urlbar/**"):
     BUG_COMPONENT = ("Firefox", "Address Bar")
 

browser/base/content/test/trackingUI/.eslintrc.js

@@ -0,0 +1,7 @@
+"use strict";
+
+module.exports = {
+  "extends": [
+    "plugin:mozilla/browser-test"
+  ]
+};

browser/base/content/test/trackingUI/browser.ini

@@ -0,0 +1,5 @@
+[DEFAULT]
+tags = trackingprotection
+
+[browser_trackingUI_appMenu.js]
+[browser_trackingUI_appMenu_toggle.js]

browser/base/content/test/trackingUI/browser_trackingUI_appMenu.js

@@ -0,0 +1,28 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+ChromeUtils.import("resource://testing-common/CustomizableUITestUtils.jsm", this);
+
+// Test that the "Tracking Protection" button in the app menu loads about:preferences
+add_task(async function testPreferencesButton() {
+  let cuiTestUtils = new CustomizableUITestUtils(window);
+
+  await BrowserTestUtils.withNewTab(gBrowser, async function(browser) {
+    await cuiTestUtils.openMainMenu();
+
+    let loaded = TestUtils.waitForCondition(() => gBrowser.currentURI.spec == "about:preferences#privacy",
+      "Should open about:preferences.");
+    document.getElementById("appMenu-tp-label").click();
+    await loaded;
+
+    await ContentTask.spawn(browser, {}, async function() {
+      let doc = content.document;
+      let section = await ContentTaskUtils.waitForCondition(
+        () => doc.querySelector(".spotlight"), "The spotlight should appear.");
+      is(section.getAttribute("data-subcategory"), "trackingprotection",
+        "The trackingprotection section is spotlighted.");
+    });
+  });
+});

browser/base/content/test/trackingUI/browser_trackingUI_appMenu_toggle.js

@@ -0,0 +1,49 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+ChromeUtils.import("resource://testing-common/CustomizableUITestUtils.jsm", this);
+
+// Test that the app menu toggle correctly flips the TP pref in
+// normal windows and private windows.
+add_task(async function testGlobalToggle() {
+  async function runTest(privateWindow) {
+    let win = await BrowserTestUtils.openNewBrowserWindow({private: privateWindow});
+
+    let panelUIButton = await TestUtils.waitForCondition(() => win.document.getElementById("PanelUI-menu-button"));
+
+    let prefName = privateWindow ? "privacy.trackingprotection.pbmode.enabled" :
+      "privacy.trackingprotection.enabled";
+
+    info("Opening main menu");
+
+    let promiseShown = BrowserTestUtils.waitForEvent(win.PanelUI.mainView, "ViewShown");
+    panelUIButton.click();
+    await promiseShown;
+
+    info("Opened main menu");
+
+    let toggle = win.document.getElementById("appMenu-tp-toggle");
+
+    Services.prefs.setBoolPref(prefName, false);
+    await TestUtils.waitForCondition(() => toggle.getAttribute("enabled") == "false");
+
+    Services.prefs.setBoolPref(prefName, true);
+    await TestUtils.waitForCondition(() => toggle.getAttribute("enabled") == "true");
+
+    toggle.click();
+    is(Services.prefs.getBoolPref(prefName), false);
+
+    toggle.click();
+    is(Services.prefs.getBoolPref(prefName), true);
+
+    Services.prefs.clearUserPref(prefName);
+
+    await BrowserTestUtils.closeWindow(win);
+  }
+
+  // Run once in private and once in normal window.
+  await runTest(true);
+  await runTest(false);
+});

browser/base/moz.build

@@ -54,6 +54,7 @@ BROWSER_CHROME_MANIFESTS += [
     'content/test/tabPrompts/browser.ini',
     'content/test/tabs/browser.ini',
     'content/test/touch/browser.ini',
+    'content/test/trackingUI/browser.ini',
     'content/test/urlbar/browser.ini',
     'content/test/webextensions/browser.ini',
     'content/test/webrtc/browser.ini',

browser/components/customizableui/content/panelUI.inc.xul

@@ -209,6 +209,20 @@
           </toolbarbutton>
         </toolbaritem>
         <toolbarseparator class="sync-ui-item"/>
+        <toolbaritem>
+          <toolbarbutton id="appMenu-tp-label"
+                         tooltiptext="&trackingProtection.tooltip;"
+                         class="subviewbutton subviewbutton-iconic"
+                         oncommand="TrackingProtection.openPreferences();"
+                         label="&trackingProtection.title;"/>
+          <toolbarseparator orient="vertical"/>
+          <toolbarbutton id="appMenu-tp-toggle"
+                         closemenu="none"
+                         class="subviewkeynav"
+                         observes="trackingProtectionBroadcaster"
+                         oncommand="TrackingProtection.onGlobalToggleCommand();" />
+        </toolbaritem>
+        <toolbarseparator />
         <toolbarbutton id="appMenu-new-window-button"
                        class="subviewbutton subviewbutton-iconic"
                        label="&newNavigatorCmd.label;"

browser/components/preferences/in-content/privacy.xul

@@ -283,7 +283,7 @@
 <!-- Tracking -->
 <groupbox id="trackingGroup" data-category="panePrivacy" hidden="true">
   <caption><label data-l10n-id="tracking-header"/></caption>
-  <vbox>
+  <vbox data-subcategory="trackingprotection">
     <hbox align="start">
       <vbox flex="1">
         <description data-l10n-id="tracking-desc">

browser/locales/en-US/chrome/browser/browser.dtd

@@ -898,6 +898,7 @@ you can use these alternative items. Otherwise, their values should be empty.  -
 <!ENTITY getUserMedia.allWindowsShared.message "All visible windows on your screen will be shared.">
 
 <!ENTITY trackingProtection.title "Tracking Protection">
+<!ENTITY trackingProtection.tooltip "Open Tracking Protection Preferences">
 <!ENTITY trackingProtection.detectedBlocked3 "&brandShortName; is blocking parts of the page that may track your browsing.">
 <!ENTITY trackingProtection.detectedNotBlocked3 "This site includes elements that may track your browsing. You have disabled protection.">
 <!ENTITY trackingProtection.notDetected3 "No tracking elements detected on this page.">

browser/locales/en-US/chrome/browser/browser.properties

@@ -534,6 +534,11 @@ trackingProtection.intro.description2=When you see the shield, %S is blocking so
 trackingProtection.intro.step1of3=1 of 3
 trackingProtection.intro.nextButton.label=Next
 
+trackingProtection.toggle.enable.tooltip=Enable Tracking Protection
+trackingProtection.toggle.disable.tooltip=Disable Tracking Protection
+trackingProtection.toggle.enable.pbmode.tooltip=Enable Tracking Protection in Private Browsing
+trackingProtection.toggle.disable.pbmode.tooltip=Disable Tracking Protection in Private Browsing
+
 trackingProtection.icon.activeTooltip=Tracking attempts blocked
 trackingProtection.icon.disabledTooltip=Tracking content detected
 

browser/themes/shared/customizableui/panelUI.inc.css

@@ -579,6 +579,56 @@ toolbarbutton[constrain-size="true"][cui-areatype="menu-panel"] > .toolbarbutton
   background-color: @appmenuWarningBackgroundColorActive@;
 }
 
+/* Tracking Protection Button & Toggle */
+
+#appMenu-tp-label {
+  -moz-context-properties: fill;
+  fill: currentColor;
+  list-style-image: url(chrome://browser/skin/tracking-protection-16.svg#enabled);
+  -moz-box-flex: 1;
+}
+
+#appMenu-tp-toggle {
+  box-sizing: border-box;
+  min-width: 26px;
+  height: 10px;
+  border-radius: 10px;
+  background-color: var(--arrowpanel-dimmed-even-further);
+  border: 1px solid transparent;
+  margin-top: 4px;
+  margin-bottom: 4px;
+  margin-inline-end: 10px;
+  padding: 2px;
+  transition: padding .2s ease;
+}
+
+#appMenu-tp-toggle::before {
+  position: relative;
+  display: block;
+  content: "";
+  width: 10px;
+  height: 10px;
+  border-radius: 10px;
+  background: white;
+}
+
+#appMenu-tp-toggle[enabled=true] {
+  background-color: #0a84ff;
+  border: 1px solid #0a84ff;
+  /* Push the toggle to the right. */
+  padding-inline-start: 12px;
+}
+
+#appMenu-tp-toggle:hover,
+#appMenu-tp-toggle:-moz-focusring {
+  border: 1px solid var(--panel-separator-color);
+}
+
+#appMenu-tp-toggle[enabled=true]:hover,
+#appMenu-tp-toggle[enabled=true]:-moz-focusring {
+  background-color: #45a1ff;
+}
+
 .addon-banner-item > .toolbarbutton-text,
 .panel-banner-item > .toolbarbutton-text {
   margin: 0;

testing/mochitest/BrowserTestUtils/ContentTaskUtils.jsm

@@ -59,7 +59,7 @@ var ContentTaskUtils = {
 
         if (conditionPassed) {
           clearInterval(intervalID);
-          resolve();
+          resolve(conditionPassed);
         }
         tries++;
       }, interval);