Bug 1551902 - Implement Tracking Protection toggle section in Protections Panel. r=johannh

Differential Revision: https://phabricator.services.mozilla.com/D32952

--HG--
extra : moz-landing-system : lando

browser/base/content/browser-contentblocking.js

@@ -816,6 +816,11 @@ var ContentBlocking = {
     return this.identityPopup = document.getElementById("identity-popup");
   },
 
+  get protectionsPopup() {
+    delete this.protectionsPopup;
+    return this.protectionsPopup = document.getElementById("protections-popup");
+  },
+
   strings: {
     get appMenuTitle() {
       delete this.appMenuTitle;
@@ -1157,9 +1162,11 @@ var ContentBlocking = {
     // occurs on the page.  Note that merely allowing the loading of content that
     // we could have blocked does not trigger the appearance of the shield.
     // This state will be overriden later if there's an exception set for this site.
-    this.content.toggleAttribute("detected", anyDetected);
-    this.content.toggleAttribute("blocking", anyBlocking);
-    this.content.toggleAttribute("hasException", hasException);
+    for (let elt of [this.content, this.protectionsPopup]) {
+      elt.toggleAttribute("detected", anyDetected);
+      elt.toggleAttribute("blocking", anyBlocking);
+      elt.toggleAttribute("hasException", hasException);
+    }
 
     this.iconBox.toggleAttribute("active", anyBlocking);
     this.iconBox.toggleAttribute("hasException", hasException);

browser/base/content/browser-siteProtections.js

@@ -22,6 +22,11 @@ var gProtectionsHandler = {
     return this._protectionsPopupMainViewHeaderLabel =
       document.getElementById("protections-popup-mainView-panel-header-span");
   },
+  get _protectionsPopupTPSwitch() {
+    delete this._protectionsPopupTPSwitch;
+    return this._protectionsPopupTPSwitch =
+      document.getElementById("protections-popup-tp-switch");
+  },
 
   handleProtectionsButtonEvent(event) {
     event.stopPropagation();
@@ -46,6 +51,10 @@ var gProtectionsHandler = {
   },
 
   refreshProtectionsPopup() {
+    // Refresh the state of the TP toggle switch.
+    this._protectionsPopupTPSwitch.toggleAttribute("enabled",
+      !this._protectionsPopup.hasAttribute("hasException"));
+
     let host = gIdentityHandler.getHostForDisplay();
 
     // Push the appropriate strings out to the UI.
@@ -53,4 +62,33 @@ var gProtectionsHandler = {
       // gNavigatorBundle.getFormattedString("protections.header", [host]);
       `Tracking Protections for ${host}`;
   },
+
+  async onTPSwitchCommand(event) {
+    // When the switch is clicked, we wait 500ms and then disable/enable
+    // protections, causing the page to refresh, and close the popup.
+    // We need to ensure we don't handle more clicks during the 500ms delay,
+    // so we keep track of state and return early if needed.
+    if (this._TPSwitchCommanding) {
+      return;
+    }
+
+    this._TPSwitchCommanding = true;
+
+    let currentlyEnabled =
+      !this._protectionsPopup.hasAttribute("hasException");
+
+    this._protectionsPopupTPSwitch.toggleAttribute("enabled", !currentlyEnabled);
+    await new Promise((resolve) => setTimeout(resolve, 500));
+
+    if (currentlyEnabled) {
+      ContentBlocking.disableForCurrentPage();
+      gIdentityHandler.recordClick("unblock");
+    } else {
+      ContentBlocking.enableForCurrentPage();
+      gIdentityHandler.recordClick("block");
+    }
+
+    PanelMultiView.hidePopup(this._protectionsPopup);
+    delete this._TPSwitchCommanding;
+  },
 };

browser/components/controlcenter/content/protectionsPanel.inc.xul

@@ -19,11 +19,18 @@
         </label>
       </vbox>
 
-      <vbox id="protections-popup-placeholder" class="identity-popup-section">
-        <label>
-          <html:h2>Watch this space! :)</html:h2>
-        </label>
-      </vbox>
+      <hbox id="protections-popup-tp-switch-section" class="identity-popup-section">
+        <vbox id="protections-popup-tp-switch-label-box" flex="1">
+          <label id="protections-popup-tp-switch-on-header">Tracking protection is ON for this site</label>
+          <label id="protections-popup-tp-switch-off-header">Tracking protection is OFF for this site</label>
+          <label id="protections-popup-tp-switch-breakage-link" class="text-link">Site not working?</label>
+        </vbox>
+        <vbox id="protections-popup-tp-switch-box">
+          <toolbarbutton id="protections-popup-tp-switch"
+              enabled="false"
+              oncommand="gProtectionsHandler.onTPSwitchCommand();" />
+        </vbox>
+      </hbox>
     </panelview>
   </panelmultiview>
 </panel>

browser/themes/shared/controlcenter/panel.inc.css

@@ -64,8 +64,7 @@
 
 /* Make sure hidden elements don't accidentally become visible from one of the
    above selectors (see Bug 1194258) */
-#identity-popup [hidden],
-#protections-popup [hidden] {
+#identity-popup [hidden] {
   display: none !important;
 }
 
@@ -786,3 +785,71 @@ description#identity-popup-content-verifier,
 .identity-popup-permission-remove-button:not(:-moz-focusring):hover:active {
   opacity: 0.8;
 }
+
+#protections-popup-tp-switch-label-box > label {
+  display: none;
+}
+
+#protections-popup:not([hasException]) #protections-popup-tp-switch-on-header,
+#protections-popup:not([hasException]) #protections-popup-tp-switch-breakage-link,
+#protections-popup[hasException] #protections-popup-tp-switch-off-header {
+  display: unset;
+}
+
+#protections-popup-tp-switch-section {
+  padding: 4px;
+}
+
+#protections-popup-tp-switch-label-box,
+#protections-popup-tp-switch-box {
+  padding: 4px 1em;
+  min-height: 40px;
+  -moz-box-pack: center;
+}
+
+#protections-popup-tp-switch-on-header,
+#protections-popup-tp-switch-off-header {
+  font-weight: 600;
+}
+
+#protections-popup-tp-switch {
+  -moz-appearance: none;
+  box-sizing: border-box;
+  min-width: 26px;
+  border-radius: 10px;
+  background-color: var(--arrowpanel-dimmed-even-further);
+  border: 1px solid transparent;
+  margin-top: 4px;
+  margin-bottom: 4px;
+  margin-inline-start: 1px;
+  margin-inline-end: 7px;
+  padding: 2px;
+  transition: padding .2s ease;
+}
+
+#protections-popup-tp-switch::before {
+  position: relative;
+  display: block;
+  content: "";
+  width: 10px;
+  height: 10px;
+  border-radius: 10px;
+  background: white;
+}
+
+#protections-popup-tp-switch[enabled] {
+  background-color: #0a84ff;
+  border: 1px solid #0a84ff;
+  /* Push the toggle to the right. */
+  padding-inline-start: 12px;
+}
+
+#protections-popup-tp-switch:hover,
+#protections-popup-tp-switch:-moz-focusring {
+  border: 1px solid var(--panel-separator-color);
+}
+
+#protections-popup-tp-switch[enabled=true]:hover,
+#protections-popup-tp-switch[enabled=true]:-moz-focusring {
+  background-color: #45a1ff;
+}