Bug 1801936 - use moz-toggle in the ETP panel r=mstriemer,tgiles,desktop-theme-reviewers,flod,dao

This patch replaces both toggles in the different sub views of the ETP panel with `moz-toggle`. Previously there was a small discrepancy where we were setting an `aria-label` on one toggle but not the other. I added a method to handle updating both toggles at once to ensure they stay in sync/always receive the same updates.

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

browser/base/content/browser-siteProtections.js

@@ -1594,6 +1594,8 @@ var gProtectionsHandler = {
 
     // Add an observer to observe that the history has been cleared.
     Services.obs.addObserver(this, "browser:purge-session-history");
+
+    window.ensureCustomElements("moz-button-group", "moz-toggle");
   },
 
   uninit() {
@@ -1729,11 +1731,14 @@ var gProtectionsHandler = {
 
   onPopupShown(event) {
     if (event.target == this._protectionsPopup) {
-      window.ensureCustomElements("moz-button-group");
-
       PopupNotifications.suppressWhileOpen(this._protectionsPopup);
 
       window.addEventListener("focus", this, true);
+      this._protectionsPopupTPSwitch.addEventListener("toggle", this);
+      this._protectionsPopupSiteNotWorkingTPSwitch.addEventListener(
+        "toggle",
+        this
+      );
 
       // Insert the info message if needed. This will be shown once and then
       // remain collapsed.
@@ -1752,6 +1757,11 @@ var gProtectionsHandler = {
   onPopupHidden(event) {
     if (event.target == this._protectionsPopup) {
       window.removeEventListener("focus", this, true);
+      this._protectionsPopupTPSwitch.removeEventListener("toggle", this);
+      this._protectionsPopupSiteNotWorkingTPSwitch.removeEventListener(
+        "toggle",
+        this
+      );
     }
   },
 
@@ -2025,20 +2035,30 @@ var gProtectionsHandler = {
 
   // We handle focus here when the panel is shown.
   handleEvent(event) {
-    let elem = document.activeElement;
-    let position = elem.compareDocumentPosition(this._protectionsPopup);
+    switch (event.type) {
+      case "focus": {
+        let elem = document.activeElement;
+        let position = elem.compareDocumentPosition(this._protectionsPopup);
 
-    if (
-      !(
-        position &
-        (Node.DOCUMENT_POSITION_CONTAINS | Node.DOCUMENT_POSITION_CONTAINED_BY)
-      ) &&
-      !this._protectionsPopup.hasAttribute("noautohide")
-    ) {
-      // Hide the panel when focusing an element that is
-      // neither an ancestor nor descendant unless the panel has
-      // @noautohide (e.g. for a tour).
-      PanelMultiView.hidePopup(this._protectionsPopup);
+        if (
+          !(
+            position &
+            (Node.DOCUMENT_POSITION_CONTAINS |
+              Node.DOCUMENT_POSITION_CONTAINED_BY)
+          ) &&
+          !this._protectionsPopup.hasAttribute("noautohide")
+        ) {
+          // Hide the panel when focusing an element that is
+          // neither an ancestor nor descendant unless the panel has
+          // @noautohide (e.g. for a tour).
+          PanelMultiView.hidePopup(this._protectionsPopup);
+        }
+        break;
+      }
+      case "toggle": {
+        this.onTPSwitchCommand(event);
+        break;
+      }
     }
   },
 
@@ -2067,12 +2087,7 @@ var gProtectionsHandler = {
 
     let currentlyEnabled = !this.hasException;
 
-    for (let tpSwitch of [
-      this._protectionsPopupTPSwitch,
-      this._protectionsPopupSiteNotWorkingTPSwitch,
-    ]) {
-      tpSwitch.toggleAttribute("enabled", currentlyEnabled);
-    }
+    this.updateProtectionsToggles(currentlyEnabled);
 
     this._notBlockingWhyLink.setAttribute(
       "tooltip",
@@ -2084,13 +2099,6 @@ var gProtectionsHandler = {
     // Toggle the breakage link according to the current enable state.
     this.toggleBreakageLink();
 
-    // Give the button an accessible label for screen readers.
-    document.l10n.setAttributes(
-      this._protectionsPopupTPSwitch,
-      currentlyEnabled ? "protections-disable" : "protections-enable",
-      { host }
-    );
-
     // Update the tooltip of the blocked tracker counter.
     this.maybeUpdateEarliestRecordedDateTooltip();
 
@@ -2111,6 +2119,31 @@ var gProtectionsHandler = {
     this._protectionsPopup.toggleAttribute("hasException", this.hasException);
   },
 
+  /**
+   * Updates the "pressed" state and labels for both toggles in the different
+   * panel subviews.
+   *
+   * @param {boolean} isPressed - Whether or not the toggles should be pressed.
+   *  True if ETP is enabled for a given site.
+   */
+  updateProtectionsToggles(isPressed) {
+    let host = gIdentityHandler.getHostForDisplay();
+    for (let toggle of [
+      this._protectionsPopupTPSwitch,
+      this._protectionsPopupSiteNotWorkingTPSwitch,
+    ]) {
+      toggle.toggleAttribute("pressed", isPressed);
+      toggle.toggleAttribute("disabled", !!this._TPSwitchCommanding);
+      document.l10n.setAttributes(
+        toggle,
+        isPressed
+          ? "protections-panel-etp-on-toggle"
+          : "protections-panel-etp-off-toggle",
+        { host }
+      );
+    }
+  },
+
   /*
    * This function sorts the category items into the Blocked/Allowed/None Detected
    * sections. It's called immediately in onContentBlockingEvent if the popup
@@ -2203,12 +2236,8 @@ var gProtectionsHandler = {
     // styling after toggling the TP switch.
     let newExceptionState =
       this._protectionsPopup.toggleAttribute("hasException");
-    for (let tpSwitch of [
-      this._protectionsPopupTPSwitch,
-      this._protectionsPopupSiteNotWorkingTPSwitch,
-    ]) {
-      tpSwitch.toggleAttribute("enabled", !newExceptionState);
-    }
+
+    this.updateProtectionsToggles(!newExceptionState);
 
     // Toggle the breakage link if needed.
     this.toggleBreakageLink();
@@ -2452,11 +2481,11 @@ var gProtectionsHandler = {
     this._protectionsPopupTPSwitchBreakageLink.hidden =
       ContentBlockingAllowList.includes(gBrowser.selectedBrowser) ||
       !this.anyBlocking ||
-      !this._protectionsPopupTPSwitch.hasAttribute("enabled");
+      !this._protectionsPopupTPSwitch.hasAttribute("pressed");
     // The "Site Fixed?" link behaves similarly but for the opposite state.
     this._protectionsPopupTPSwitchBreakageFixedLink.hidden =
       !ContentBlockingAllowList.includes(gBrowser.selectedBrowser) ||
-      this._protectionsPopupTPSwitch.hasAttribute("enabled");
+      this._protectionsPopupTPSwitch.hasAttribute("pressed");
   },
 
   submitBreakageReport(uri) {

browser/base/content/test/protectionsUI/browser_protectionsUI.js

@@ -41,6 +41,12 @@ add_setup(async function () {
   });
 });
 
+async function clickToggle(toggle) {
+  let changed = BrowserTestUtils.waitForEvent(toggle, "toggle");
+  await EventUtils.synthesizeMouseAtCenter(toggle.buttonEl, {});
+  await changed;
+}
+
 add_task(async function testToggleSwitch() {
   let tab = await BrowserTestUtils.openNewForegroundTab(
     gBrowser,
@@ -117,15 +123,15 @@ add_task(async function testToggleSwitch() {
   await viewShown;
 
   ok(
-    gProtectionsHandler._protectionsPopupTPSwitch.hasAttribute("enabled"),
-    "TP Switch should be enabled"
+    gProtectionsHandler._protectionsPopupTPSwitch.hasAttribute("pressed"),
+    "TP Switch should be on"
   );
   let popuphiddenPromise = BrowserTestUtils.waitForEvent(
     gProtectionsHandler._protectionsPopup,
     "popuphidden"
   );
   let browserLoadedPromise = BrowserTestUtils.browserLoaded(tab.linkedBrowser);
-  gProtectionsHandler._protectionsPopupTPSwitch.click();
+  await clickToggle(gProtectionsHandler._protectionsPopupTPSwitch);
 
   // The 'Site not working?' link should be hidden after clicking the TP switch.
   ok(
@@ -165,8 +171,8 @@ add_task(async function testToggleSwitch() {
 
   await openProtectionsPanel();
   ok(
-    !gProtectionsHandler._protectionsPopupTPSwitch.hasAttribute("enabled"),
-    "TP Switch should be disabled"
+    !gProtectionsHandler._protectionsPopupTPSwitch.hasAttribute("pressed"),
+    "TP Switch should be off"
   );
 
   // The 'Site not working?' link should be hidden if the TP is off.
@@ -199,7 +205,7 @@ add_task(async function testToggleSwitch() {
   // Click the TP switch again and check the visibility of the 'Site not
   // Working?'. It should be hidden after toggling the TP switch.
   browserLoadedPromise = BrowserTestUtils.browserLoaded(tab.linkedBrowser);
-  gProtectionsHandler._protectionsPopupTPSwitch.click();
+  await clickToggle(gProtectionsHandler._protectionsPopupTPSwitch);
 
   ok(
     BrowserTestUtils.is_hidden(
@@ -398,7 +404,7 @@ add_task(async function testToggleSwitchFlow() {
   let browserLoadedPromise = BrowserTestUtils.browserLoaded(tab.linkedBrowser);
 
   // Click the TP switch, from On -> Off.
-  gProtectionsHandler._protectionsPopupTPSwitch.click();
+  await clickToggle(gProtectionsHandler._protectionsPopupTPSwitch);
 
   // Check that the icon state has been changed.
   ok(
@@ -444,7 +450,7 @@ add_task(async function testToggleSwitchFlow() {
     "popupshown"
   );
   browserLoadedPromise = BrowserTestUtils.browserLoaded(tab.linkedBrowser);
-  gProtectionsHandler._protectionsPopupTPSwitch.click();
+  await clickToggle(gProtectionsHandler._protectionsPopupTPSwitch);
 
   // Check that the icon state has been changed.
   ok(
@@ -686,7 +692,7 @@ add_task(async function testQuickSwitchTabAfterTogglingTPSwitch() {
   );
 
   // Toggle the TP state and switch tab without waiting it to be finished.
-  gProtectionsHandler._protectionsPopupTPSwitch.click();
+  await clickToggle(gProtectionsHandler._protectionsPopupTPSwitch);
   gBrowser.selectedTab = tabOne;
 
   // Wait for the second tab to be reloaded.

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

@@ -45,19 +45,8 @@
       <vbox id="protections-popup-main-body" class="panel-subview-body">
         <vbox id="protections-popup-tp-switch-section" class="protections-popup-section protections-popup-switch-section">
           <hbox id="protections-popup-tp-switch-section-header" class="protections-popup-switch-section-header">
-            <vbox class="protections-popup-tp-switch-label-box" flex="1" align="start">
-              <label class="protections-popup-switch-header protections-popup-tp-switch-on-header"
-                     role="heading"
-                     aria-level="2" data-l10n-id="protections-panel-etp-on-header"></label>
-              <label class="protections-popup-switch-header protections-popup-tp-switch-off-header"
-                     role="heading"
-                     aria-level="2" data-l10n-id="protections-panel-etp-off-header"></label>
-            </vbox>
-            <vbox class="protections-popup-tp-switch-box">
-              <toolbarbutton id="protections-popup-tp-switch"
-                             class="protections-popup-tp-switch"
-                             enabled="false"
-                             oncommand="gProtectionsHandler.onTPSwitchCommand();" />
+            <vbox class="protections-popup-tp-switch-box" flex="1" align="stretch">
+              <html:moz-toggle id="protections-popup-tp-switch" data-l10n-attrs="label, description"></html:moz-toggle>
             </vbox>
           </hbox>
           <hbox id="protections-popup-tp-switch-section-footer">
@@ -193,19 +182,8 @@
                role="document"
                data-l10n-id="protections-panel-site-not-working-view">
         <hbox id="protections-popup-siteNotWorkingView-header">
-          <vbox class="protections-popup-tp-switch-label-box" flex="1">
-            <label class="protections-popup-switch-header protections-popup-tp-switch-on-header"
-                   role="heading"
-                   aria-level="1" data-l10n-id="protections-panel-etp-on-header"></label>
-            <label class="protections-popup-switch-header protections-popup-tp-switch-off-header"
-                   role="heading"
-                   aria-level="1" data-l10n-id="protections-panel-etp-off-header"></label>
-          </vbox>
-          <vbox class="protections-popup-tp-switch-box">
-            <toolbarbutton id="protections-popup-siteNotWorking-tp-switch"
-                           class="protections-popup-tp-switch"
-                           enabled="false"
-                           oncommand="gProtectionsHandler.onTPSwitchCommand();" />
+          <vbox class="protections-popup-tp-switch-box" flex="1" align="stretch">
+            <html:moz-toggle id="protections-popup-siteNotWorking-tp-switch" data-l10n-attrs="label, description"></html:moz-toggle>
           </vbox>
         </hbox>
         <toolbarseparator></toolbarseparator>

browser/locales/en-US/browser/protectionsPanel.ftl

@@ -26,6 +26,20 @@ protections-panel-etp-more-info =
 protections-panel-etp-on-header = Enhanced Tracking Protection is ON for this site
 protections-panel-etp-off-header = Enhanced Tracking Protection is OFF for this site
 
+## Text for the toggles shown when ETP is enabled/disabled for a given site.
+## .description is transferred into a separate paragraph by the moz-toggle
+## custom element code.
+##   $host (String): the hostname of the site that is being displayed.
+
+protections-panel-etp-on-toggle =
+  .label = Enhanced Tracking Protection
+  .description = On for this site
+  .aria-label = Disable protections for { $host }
+protections-panel-etp-off-toggle =
+  .label = Enhanced Tracking Protection
+  .description = Off for this site
+  .aria-label = Enable protections for { $host }
+
 # The link to be clicked to open the sub-panel view
 protections-panel-site-not-working = Site not working?
 

browser/locales/en-US/browser/siteProtections.ftl

@@ -42,12 +42,6 @@ tracking-protection-icon-no-trackers-detected-container =
 
 # Header of the Protections Panel.
 protections-header = Protections for { $host }
-# Text that gets spoken by a screen reader if the button will disable protections.
-protections-disable =
-    .aria-label = Disable protections for { $host }
-# Text that gets spoken by a screen reader if the button will enable protections.
-protections-enable =
-    .aria-label = Enable protections for { $host }
 
 ## Blocking and Not Blocking sub-views in the Protections Panel
 

browser/themes/shared/controlcenter/panel.css

@@ -550,11 +550,6 @@
   background-color: var(--button-active-bgcolor)
 }
 
-#protections-popup[hasException] .protections-popup-tp-switch-on-header,
-#protections-popup:not([hasException]) .protections-popup-tp-switch-off-header {
-  display: none;
-}
-
 #protections-popup-cookie-banner-section[hasException] .protections-popup-cookie-banner-switch-on-header,
 #protections-popup-cookie-banner-section:not([hasException]) .protections-popup-cookie-banner-switch-off-header {
   display: none;
@@ -570,69 +565,10 @@
   display: revert;
 }
 
-.protections-popup-tp-switch-label-box,
-.protections-popup-tp-switch-box {
-  justify-content: center;
-}
-
-.protections-popup-switch-section-header {
-  min-height: 40px;
-}
-
 .protections-popup-switch-header {
   font-weight: 600;
 }
 
-.protections-popup-tp-switch {
-  appearance: none;
-  box-sizing: border-box;
-  min-width: 30px;
-  border-radius: 10px;
-  background-color: var(--button-bgcolor);
-  border: 1px solid hsla(210,4%,10%,.14);
-  margin-block: 4px;
-  margin-inline-start: 1px;
-  padding: 2px;
-  padding-inline-end: 0;
-  transition: padding .2s ease;
-}
-
-.protections-popup-tp-switch::before {
-  position: relative;
-  display: block;
-  content: "";
-  width: 10px;
-  height: 10px;
-  border-radius: 10px;
-  background: white;
-  outline: 1px solid var(--panel-separator-color);
-}
-
-.protections-popup-tp-switch[enabled] {
-  background-color: var(--button-primary-bgcolor);
-  border-color: var(--button-primary-hover-bgcolor);
-  /* Push the toggle to the right. */
-  padding-inline-start: 16px;
-}
-
-.protections-popup-tp-switch[enabled]:hover {
-  background-color: var(--button-primary-hover-bgcolor);
-  border-color: var(--button-primary-active-bgcolor);
-}
-
-.protections-popup-tp-switch[enabled]:hover:active {
-  background-color: var(--button-primary-active-bgcolor);
-  border-color: var(--button-primary-active-bgcolor);
-}
-
-.protections-popup-tp-switch:not([enabled]):hover {
-  background-color: var(--button-hover-bgcolor);
-}
-
-.protections-popup-tp-switch:not([enabled]):hover:active {
-  background-color: var(--button-active-bgcolor);
-}
-
 #protections-popup-siteNotWorkingView-body-issue-list {
   padding-inline-start: 1em;
 }
@@ -761,11 +697,6 @@
   }
 }
 
-.protections-popup-tp-switch:focus-visible {
-  outline: var(--focus-outline);
-  outline-offset: var(--focus-outline-offset);
-}
-
 #blocked-popup-indicator-item,
 #geo-access-indicator-item {
   margin-top: -2px;

toolkit/themes/shared/popup.css

@@ -20,6 +20,9 @@ panel {
   --panel-shadow-margin: 0px;
   --panel-shadow: 0 0 var(--panel-shadow-margin) hsla(0,0%,0%,.2);
 
+  /* Panel design token theming */
+  --color-canvas: var(--panel-background);
+
   @media (-moz-platform: linux) {
     --panel-border-radius: 8px;
     --panel-padding-block: max(0px, var(--panel-border-radius) / 2 - 1px);