Bug 1942021 - fix CSP violations in about:rights and make the code nicer, r=darktrojan,desktop-theme-reviewers,dao

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

Author: gijsk

toolkit/content/aboutRights.js

@@ -3,40 +3,25 @@
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 var servicesDiv = document.getElementById("webservices-container");
-servicesDiv.style.display = "none";
-
-function showServices() {
-  servicesDiv.style.display = "";
-}
+servicesDiv.hidden = true;
 
 // Fluent replaces the children of the element being overlayed which prevents us
 // from putting an event handler directly on the children.
-let rightsIntro =
-  document.querySelector("[data-l10n-id=rights-intro-point-5]") ||
-  document.querySelector("[data-l10n-id=rights-intro-point-5-unbranded]");
-rightsIntro.addEventListener("click", event => {
+document.body.addEventListener("click", event => {
   if (event.target.id == "showWebServices") {
-    showServices();
+    servicesDiv.hidden = false;
   }
 });
 
 var disablingServicesDiv = document.getElementById(
   "disabling-webservices-container"
 );
 
-function showDisablingServices() {
-  disablingServicesDiv.style.display = "";
-}
-
 if (disablingServicesDiv != null) {
-  disablingServicesDiv.style.display = "none";
-  // Same issue here with Fluent replacing the children affecting the event listeners.
-  let rightsWebServices = document.querySelector(
-    "[data-l10n-id=rights-webservices]"
-  );
-  rightsWebServices.addEventListener("click", event => {
+  disablingServicesDiv.hidden = true;
+  servicesDiv.addEventListener("click", event => {
     if (event.target.id == "showDisablingWebServices") {
-      showDisablingServices();
+      disablingServicesDiv.hidden = false;
     }
   });
 }

toolkit/content/aboutRights.xhtml

@@ -83,7 +83,7 @@
           ></a>
         </p>
 
-        <div id="disabling-webservices-container" style="margin-left: 40px">
+        <div id="disabling-webservices-container">
           <a name="disabling-webservices" />
           <p data-l10n-id="rights-safebrowsing"></p>
           <ul>

toolkit/themes/shared/aboutRights.css

@@ -12,8 +12,12 @@
   display: flex;
   align-items: center;
   padding-inline-end: 320px;
+
+  &:dir(rtl) {
+    background-position-x: left;
+  }
 }
 
-.rights-header:dir(rtl) {
-  background-position: left center;
+#disabling-webservices-container {
+  margin-inline-start: 40px;
 }