Bug 1547718, Remove preferenceBindings.js from eval()-whitelist, r=Gijs

Work in progress. Add callback infrastructure to preferenceBindings to replace XUL-attributes. Differential Revision: https://phabricator.services.mozilla.com/D32326 --HG-- extra : moz-landing-system : lando
2019-07-11 09:37:59 +00:00 · 2019-07-11 09:37:59 +00:00 · 3feb30bb0d
--- a/browser/base/content/sanitize.xul
+++ b/browser/base/content/sanitize.xul
@ -73,22 +73,17 @@
    <hbox>
      <vbox data-l10n-id="sanitize-prefs-style" data-l10n-attrs="style">
        <checkbox data-l10n-id="item-history-and-downloads"
-                  preference="privacy.cpd.history"
-                  onsyncfrompreference="return gSanitizePromptDialog.onReadGeneric();"/>
+                  preference="privacy.cpd.history"/>
        <checkbox data-l10n-id="item-active-logins"
-                  preference="privacy.cpd.sessions"
-                  onsyncfrompreference="return gSanitizePromptDialog.onReadGeneric();"/>
+                  preference="privacy.cpd.sessions"/>
        <checkbox data-l10n-id="item-form-search-history"
-                  preference="privacy.cpd.formdata"
-                  onsyncfrompreference="return gSanitizePromptDialog.onReadGeneric();"/>
+                  preference="privacy.cpd.formdata"/>
      </vbox>
      <vbox flex="1">
        <checkbox data-l10n-id="item-cookies"
-                  preference="privacy.cpd.cookies"
-                  onsyncfrompreference="return gSanitizePromptDialog.onReadGeneric();"/>
+                  preference="privacy.cpd.cookies"/>
        <checkbox data-l10n-id="item-cache"
-                  preference="privacy.cpd.cache"
-                  onsyncfrompreference="return gSanitizePromptDialog.onReadGeneric();"/>
+                  preference="privacy.cpd.cache"/>
      </vbox>
    </hbox>
  </groupbox>
@ -97,13 +92,11 @@
    <hbox>
      <vbox data-l10n-id="sanitize-prefs-style" data-l10n-attrs="style">
        <checkbox data-l10n-id="item-site-preferences"
-                  preference="privacy.cpd.siteSettings"
-                  onsyncfrompreference="return gSanitizePromptDialog.onReadGeneric();"/>
+                  preference="privacy.cpd.siteSettings"/>
      </vbox>
      <vbox flex="1">
        <checkbox data-l10n-id="item-offline-apps"
-                  preference="privacy.cpd.offlineApps"
-                  onsyncfrompreference="return gSanitizePromptDialog.onReadGeneric();"/>
+                  preference="privacy.cpd.offlineApps"/>
      </vbox>
    </hbox>
  </groupbox>
--- a/browser/base/content/sanitizeDialog.js
+++ b/browser/base/content/sanitizeDialog.js
@ -41,6 +41,8 @@ var gSanitizePromptDialog = {
      gSanitizePromptDialog.sanitize(e);
    });

+    this.registerSyncFromPrefListeners();
+
    if (this.selectedTimespan === Sanitizer.TIMESPAN_EVERYTHING) {
      this.prepareWarning();
      this.warningBox.hidden = false;
@ -219,4 +221,14 @@ var gSanitizePromptDialog = {
    }
    return false;
  },
+
+  /**
+   * Register syncFromPref listener functions.
+   */
+  registerSyncFromPrefListeners() {
+    let checkboxes = document.querySelectorAll("checkbox[preference]");
+    for (let checkbox of checkboxes) {
+      Preferences.addSyncFromPrefListener(checkbox, () => this.onReadGeneric());
+    }
+  },
 };
--- a/browser/components/preferences/browserLanguages.js
+++ b/browser/components/preferences/browserLanguages.js
@ -381,10 +381,12 @@ var gBrowserLanguagesDialog = {
  beforeAccept() {
    this.selected = this.getSelectedLocales();
    this.accepted = true;
-    return true;
  },

  async onLoad() {
+    document.documentElement.addEventListener("beforeaccept", () =>
+      this.beforeAccept()
+    );
    // Maintain the previously selected locales even if we cancel out.
    let { telemetryId, selected, search } = window.arguments[0];
    this.telemetryId = telemetryId;
--- a/browser/components/preferences/browserLanguages.xul
+++ b/browser/components/preferences/browserLanguages.xul
@ -16,7 +16,6 @@
        persist="screenX screenY"
        role="dialog"
        onload="gBrowserLanguagesDialog.onLoad();"
-        onbeforeaccept="return gBrowserLanguagesDialog.beforeAccept();"
        helpTopic="change-language">

  <linkset>
--- a/browser/components/preferences/connection.js
+++ b/browser/components/preferences/connection.js
@ -84,12 +84,16 @@ window.addEventListener(
      );
    gConnectionsDialog.updateProxySettingsUI();
    initializeProxyUI(gConnectionsDialog);
+    gConnectionsDialog.registerSyncPrefListeners();
+    document.documentElement.addEventListener("beforeaccept", e =>
+      gConnectionsDialog.beforeAccept(e)
+    );
  },
  { once: true, capture: true }
 );

 var gConnectionsDialog = {
-  beforeAccept() {
+  beforeAccept(event) {
    let dnsOverHttpsResolverChoice = document.getElementById(
      "networkDnsOverHttpsResolverChoices"
    ).value;
@ -112,11 +116,11 @@ var gConnectionsDialog = {
    var proxyTypePref = Preferences.get("network.proxy.type");
    if (proxyTypePref.value == 2) {
      this.doAutoconfigURLFixup();
-      return true;
+      return;
    }

    if (proxyTypePref.value != 1) {
-      return true;
+      return;
    }

    var httpProxyURLPref = Preferences.get("network.proxy.http");
@ -141,7 +145,8 @@ var gConnectionsDialog = {
        document
          .getElementById("networkProxy" + prefName.toUpperCase() + "_Port")
          .focus();
-        return false;
+        event.preventDefault();
+        return;
      }
    }

@ -170,8 +175,6 @@ var gConnectionsDialog = {
    }

    this.sanitizeNoProxiesPref();
-
-    return true;
  },

  checkForSystemProxy() {
@ -573,4 +576,53 @@ var gConnectionsDialog = {
      document.getElementById("networkDnsOverHttps").disabled = false;
    }
  },
+
+  registerSyncPrefListeners() {
+    function setSyncFromPrefListener(element_id, callback) {
+      Preferences.addSyncFromPrefListener(
+        document.getElementById(element_id),
+        callback
+      );
+    }
+    function setSyncToPrefListener(element_id, callback) {
+      Preferences.addSyncToPrefListener(
+        document.getElementById(element_id),
+        callback
+      );
+    }
+    setSyncFromPrefListener("networkProxyType", () => this.readProxyType());
+    setSyncFromPrefListener("networkProxyHTTP", () =>
+      this.readHTTPProxyServer()
+    );
+    setSyncFromPrefListener("networkProxyHTTP_Port", () =>
+      this.readHTTPProxyPort()
+    );
+    setSyncFromPrefListener("shareAllProxies", () =>
+      this.updateProtocolPrefs()
+    );
+    setSyncFromPrefListener("networkProxySSL", () =>
+      this.readProxyProtocolPref("ssl", false)
+    );
+    setSyncFromPrefListener("networkProxySSL_Port", () =>
+      this.readProxyProtocolPref("ssl", true)
+    );
+    setSyncFromPrefListener("networkProxyFTP", () =>
+      this.readProxyProtocolPref("ftp", false)
+    );
+    setSyncFromPrefListener("networkProxyFTP_Port", () =>
+      this.readProxyProtocolPref("ftp", true)
+    );
+    setSyncFromPrefListener("networkProxySOCKS", () =>
+      this.readProxyProtocolPref("socks", false)
+    );
+    setSyncFromPrefListener("networkProxySOCKS_Port", () =>
+      this.readProxyProtocolPref("socks", true)
+    );
+    setSyncFromPrefListener("networkDnsOverHttps", () =>
+      this.readDnsOverHttpsMode()
+    );
+    setSyncToPrefListener("networkDnsOverHttps", () =>
+      this.writeDnsOverHttpsMode()
+    );
+  },
 };
--- a/browser/components/preferences/connection.xul
+++ b/browser/components/preferences/connection.xul
@ -15,7 +15,6 @@
        buttons="accept,cancel,help"
        persist="lastSelected screenX screenY"
        role="dialog"
-        onbeforeaccept="return gConnectionsDialog.beforeAccept();"
        onload="gConnectionsDialog.checkForSystemProxy();"
        helpTopic="prefs-connection-settings">

@ -47,8 +46,7 @@
  <groupbox>
    <label><html:h2 data-l10n-id="connection-proxy-configure"/></label>

-    <radiogroup id="networkProxyType" preference="network.proxy.type"
-                onsyncfrompreference="return gConnectionsDialog.readProxyType();">
+    <radiogroup id="networkProxyType" preference="network.proxy.type">
      <radio value="0" data-l10n-id="connection-proxy-option-no" />
      <radio value="4" data-l10n-id="connection-proxy-option-auto" />
      <radio value="5" data-l10n-id="connection-proxy-option-system" id="systemPref" hidden="true" />
@ -65,18 +63,17 @@
            </hbox>
            <hbox align="center">
              <html:input id="networkProxyHTTP" type="text" style="-moz-box-flex: 1;"
-                          preference="network.proxy.http" onsyncfrompreference="return gConnectionsDialog.readHTTPProxyServer();"/>
+                          preference="network.proxy.http"/>
              <label data-l10n-id="connection-proxy-http-port" control="networkProxyHTTP_Port" />
              <html:input id="networkProxyHTTP_Port" class="proxy-port-input" hidespinbuttons="true" type="number" min="0" max="65535"
-                          preference="network.proxy.http_port" onsyncfrompreference="return gConnectionsDialog.readHTTPProxyPort();"/>
+                          preference="network.proxy.http_port"/>
            </hbox>
          </row>
          <row>
            <hbox/>
            <hbox>
              <checkbox id="shareAllProxies" data-l10n-id="connection-proxy-http-share"
-                        preference="network.proxy.share_proxy_settings"
-                        onsyncfrompreference="return gConnectionsDialog.updateProtocolPrefs();"/>
+                        preference="network.proxy.share_proxy_settings"/>
            </hbox>
          </row>
          <row align="center">
@ -84,11 +81,10 @@
              <label data-l10n-id="connection-proxy-ssl" control="networkProxySSL"/>
            </hbox>
            <hbox align="center">
-              <html:input id="networkProxySSL" type="text" style="-moz-box-flex: 1;" preference="network.proxy.ssl"
-                          onsyncfrompreference="return gConnectionsDialog.readProxyProtocolPref('ssl', false);"/>
+              <html:input id="networkProxySSL" type="text" style="-moz-box-flex: 1;" preference="network.proxy.ssl"/>
              <label data-l10n-id="connection-proxy-ssl-port" control="networkProxySSL_Port" />
              <html:input id="networkProxySSL_Port" class="proxy-port-input" hidespinbuttons="true" type="number" min="0" max="65535" size="5"
-                          preference="network.proxy.ssl_port" onsyncfrompreference="return gConnectionsDialog.readProxyProtocolPref('ssl', true);"/>
+                          preference="network.proxy.ssl_port"/>
            </hbox>
          </row>
          <row align="center">
@ -96,11 +92,10 @@
              <label data-l10n-id="connection-proxy-ftp" control="networkProxyFTP"/>
            </hbox>
            <hbox align="center">
-              <html:input id="networkProxyFTP" type="text" style="-moz-box-flex: 1;" preference="network.proxy.ftp"
-                          onsyncfrompreference="return gConnectionsDialog.readProxyProtocolPref('ftp', false);"/>
+              <html:input id="networkProxyFTP" type="text" style="-moz-box-flex: 1;" preference="network.proxy.ftp"/>
              <label data-l10n-id="connection-proxy-ftp-port" control="networkProxyFTP_Port"/>
              <html:input id="networkProxyFTP_Port" class="proxy-port-input" hidespinbuttons="true" type="number" min="0" max="65535" size="5"
-                          preference="network.proxy.ftp_port" onsyncfrompreference="return gConnectionsDialog.readProxyProtocolPref('ftp', true);"/>
+                          preference="network.proxy.ftp_port"/>
            </hbox>
          </row>
          <row align="center">
@ -108,11 +103,10 @@
              <label data-l10n-id="connection-proxy-socks" control="networkProxySOCKS"/>
            </hbox>
            <hbox align="center">
-              <html:input id="networkProxySOCKS" type="text" style="-moz-box-flex: 1;" preference="network.proxy.socks"
-                          onsyncfrompreference="return gConnectionsDialog.readProxyProtocolPref('socks', false);"/>
+              <html:input id="networkProxySOCKS" type="text" style="-moz-box-flex: 1;" preference="network.proxy.socks"/>
              <label data-l10n-id="connection-proxy-socks-port" control="networkProxySOCKS_Port"/>
              <html:input id="networkProxySOCKS_Port" class="proxy-port-input" hidespinbuttons="true" type="number" min="0" max="65535" size="5"
-                          preference="network.proxy.socks_port" onsyncfrompreference="return gConnectionsDialog.readProxyProtocolPref('socks', true);"/>
+                          preference="network.proxy.socks_port"/>
            </hbox>
          </row>
          <row>
@ -154,9 +148,7 @@
  <groupbox>
    <checkbox id="networkDnsOverHttps"
            data-l10n-id="connection-dns-over-https"
-            preference="network.trr.mode"
-            onsyncfrompreference="return gConnectionsDialog.readDnsOverHttpsMode();"
-            onsynctopreference="return gConnectionsDialog.writeDnsOverHttpsMode();"/>
+            preference="network.trr.mode"/>

    <grid class="indent" flex="1">
      <columns>
--- a/browser/components/preferences/fonts.js
+++ b/browser/components/preferences/fonts.js
@ -22,6 +22,7 @@ document.documentElement.addEventListener(
  "dialoghelp",
  window.top.openPrefsHelp
 );
+window.addEventListener("load", () => gFontsDialog.onLoad());

 Preferences.addAll([
  { id: "font.language.group", type: "wstring" },
@ -32,6 +33,27 @@ Preferences.addAll([
 var gFontsDialog = {
  _selectLanguageGroupPromise: Promise.resolve(),

+  onLoad() {
+    Preferences.addSyncFromPrefListener(
+      document.getElementById("selectLangs"),
+      () => this.readFontLanguageGroup()
+    );
+    Preferences.addSyncFromPrefListener(
+      document.getElementById("useDocumentFonts"),
+      () => this.readUseDocumentFonts()
+    );
+    Preferences.addSyncToPrefListener(
+      document.getElementById("useDocumentFonts"),
+      () => this.writeUseDocumentFonts()
+    );
+    for (let id of ["serif", "sans-serif", "monospace"]) {
+      let el = document.getElementById(id);
+      Preferences.addSyncFromPrefListener(el, () =>
+        FontBuilder.readFontSelection(el)
+      );
+    }
+  },
+
  _selectLanguageGroup(aLanguageGroup) {
    this._selectLanguageGroupPromise = (async () => {
      // Avoid overlapping language group selections by awaiting the resolution
--- a/browser/components/preferences/fonts.xul
+++ b/browser/components/preferences/fonts.xul
@ -36,8 +36,7 @@
    </hbox>
    <!-- Please don't remove the wrapping hbox/vbox/box for these elements. It's used to properly compute the search tooltip position. -->
    <hbox>
-      <menulist id="selectLangs" preference="font.language.group"
-                onsyncfrompreference="return gFontsDialog.readFontLanguageGroup();">
+      <menulist id="selectLangs" preference="font.language.group">
        <menupopup>
          <menuitem value="ar"              data-l10n-id="fonts-langgroup-arabic"/>
          <menuitem value="x-armn"          data-l10n-id="fonts-langgroup-armenian"/>
@ -139,8 +138,7 @@
            <label data-l10n-id="fonts-serif" control="serif"/>
          </hbox>
          <hbox>
-            <menulist id="serif" flex="1" style="width: 0px;" delayprefsave="true"
-                      onsyncfrompreference="return FontBuilder.readFontSelection(this);"/>
+            <menulist id="serif" flex="1" style="width: 0px;" delayprefsave="true"/>
          </hbox>
          <spacer/>
        </row>
@ -149,8 +147,7 @@
            <label data-l10n-id="fonts-sans-serif" control="sans-serif"/>
          </hbox>
          <hbox>
-            <menulist id="sans-serif" flex="1" style="width: 0px;" delayprefsave="true"
-                      onsyncfrompreference="return FontBuilder.readFontSelection(this);"/>
+            <menulist id="sans-serif" flex="1" style="width: 0px;" delayprefsave="true"/>
          </hbox>
          <spacer/>
        </row>
@ -159,8 +156,7 @@
            <label data-l10n-id="fonts-monospace" control="monospace"/>
          </hbox>
          <hbox>
-            <menulist id="monospace" flex="1" style="width: 0px;" crop="right" delayprefsave="true"
-                      onsyncfrompreference="return FontBuilder.readFontSelection(this);"/>
+            <menulist id="monospace" flex="1" style="width: 0px;" crop="right" delayprefsave="true"/>
          </hbox>
          <hbox align="center" pack="end">
            <label data-l10n-id="fonts-monospace-size" control="sizeMono"/>
@ -243,9 +239,7 @@
    <hbox>
      <checkbox id="useDocumentFonts"
                data-l10n-id="fonts-allow-own"
-                preference="browser.display.use_document_fonts"
-                onsyncfrompreference="return gFontsDialog.readUseDocumentFonts();"
-                onsynctopreference="return gFontsDialog.writeUseDocumentFonts();"/>
+                preference="browser.display.use_document_fonts"/>
    </hbox>
  </groupbox>

--- a/browser/components/preferences/in-content/home.inc.xul
+++ b/browser/components/preferences/in-content/home.inc.xul
@ -32,7 +32,6 @@
      <html:input id="homePrefHidden"
                  type="text"
                  preference="browser.startup.homepage"
-                  onsyncfrompreference="return gHomePane.syncFromHomePref();"
                  hidden="true" />
      <menulist id="homeMode"
                class="check-home-page-controlled"
@ -85,9 +84,7 @@

    <menulist id="newTabMode"
                flex="1"
-                preference="browser.newtabpage.enabled"
-                onsyncfrompreference="return gHomePane.syncFromNewTabPref();"
-                onsynctopreference="return gHomePane.syncToNewTabPref(this.value);">
+                preference="browser.newtabpage.enabled">
      <menupopup>
          <menuitem value="0" data-l10n-id="home-mode-choice-default" />
          <menuitem value="1" data-l10n-id="home-mode-choice-blank" />
--- a/browser/components/preferences/in-content/home.js
+++ b/browser/components/preferences/in-content/home.js
@ -486,6 +486,19 @@ var gHomePane = {
      .getElementById("restoreDefaultHomePageBtn")
      .addEventListener("command", this.restoreDefaultPrefsForHome.bind(this));

+    Preferences.addSyncFromPrefListener(
+      document.getElementById("homePrefHidden"),
+      () => this.syncFromHomePref()
+    );
+    Preferences.addSyncFromPrefListener(
+      document.getElementById("newTabMode"),
+      () => this.syncFromNewTabPref()
+    );
+    Preferences.addSyncToPrefListener(
+      document.getElementById("newTabMode"),
+      element => this.syncToNewTabPref(element.value)
+    );
+
    this._updateUseCurrentButton();
    window.addEventListener("focus", this._updateUseCurrentButton.bind(this));

--- a/browser/components/preferences/in-content/main.inc.xul
+++ b/browser/components/preferences/in-content/main.inc.xul
@ -73,9 +73,7 @@
              oncommand="Services.prefs.clearUserPref('browser.ctrlTab.migrated');"/>

    <checkbox id="linkTargeting" data-l10n-id="open-new-link-as-tabs"
-              preference="browser.link.open_newwindow"
-              onsyncfrompreference="return gMainPane.readLinkTarget();"
-              onsynctopreference="return gMainPane.writeLinkTarget();"/>
+              preference="browser.link.open_newwindow"/>

    <checkbox id="warnCloseMultiple" data-l10n-id="warn-on-close-multiple-tabs"
              preference="browser.tabs.warnOnClose"/>
@ -104,8 +102,7 @@
        <checkbox id="browserContainersCheckbox"
                  class="tail-with-learn-more"
                  data-l10n-id="browser-containers-enabled"
-                  preference="privacy.userContext.enabled"
-                  onsyncfrompreference="return gMainPane.readBrowserContainersCheckbox();"/>
+                  preference="privacy.userContext.enabled"/>
        <label id="browserContainersLearnMore" is="text-link" class="learnMore" data-l10n-id="browser-containers-learn-more"/>
        <spacer flex="1"/>
        <!-- Please don't remove the wrapping hbox/vbox/box for these elements. It's used to properly compute the search tooltip position. -->
@ -139,7 +136,7 @@
      <label control="defaultFont" data-l10n-id="default-font"/>
      <!-- Please don't remove the wrapping hbox/vbox/box for these elements. It's used to properly compute the search tooltip position. -->
      <hbox flex="1">
-        <menulist id="defaultFont" flex="1" delayprefsave="true" onsyncfrompreference="return FontBuilder.readFontSelection(this);"/>
+        <menulist id="defaultFont" flex="1" delayprefsave="true"/>
      </hbox>
      <label id="defaultFontSizeLabel" control="defaultFontSize" data-l10n-id="default-font-size"></label>
      <!-- Please don't remove the wrapping hbox/vbox/box for these elements. It's used to properly compute the search tooltip position. -->
@ -319,9 +316,7 @@
  <hbox id="translationBox" hidden="true">
    <hbox align="center" flex="1">
      <checkbox id="translate" preference="browser.translation.detectLanguage"
-                data-l10n-id="translate-web-pages"
-                onsyncfrompreference="return gMainPane.updateButtons('translateButton',
-                                              'browser.translation.detectLanguage');"/>
+                data-l10n-id="translate-web-pages"/>
      <hbox id="bingAttribution" hidden="true" align="center">
        <label data-l10n-id="translate-attribution">
          <html:img id="translationAttributionImage" aria-label="Microsoft Translator"
@ -337,8 +332,6 @@
  </hbox>
  <checkbox id="checkSpelling"
          data-l10n-id="check-user-spelling"
-          onsyncfrompreference="return gMainPane.readCheckSpelling();"
-          onsynctopreference="return gMainPane.writeCheckSpelling();"
          preference="layout.spellcheckDefault"/>
 </groupbox>

@ -355,8 +348,7 @@
  <label><html:h2 data-l10n-id="download-header"/></label>

  <radiogroup id="saveWhere"
-              preference="browser.download.useDownloadDir"
-              onsyncfrompreference="return gMainPane.readUseDownloadDir();">
+              preference="browser.download.useDownloadDir">
    <hbox>
      <radio id="saveTo"
             value="true"
--- a/browser/components/preferences/in-content/main.js
+++ b/browser/components/preferences/in-content/main.js
@ -691,6 +691,43 @@ var gMainPane = {
    // Notify observers that the UI is now ready
    Services.obs.notifyObservers(window, "main-pane-loaded");

+    Preferences.addSyncFromPrefListener(
+      document.getElementById("defaultFont"),
+      element => FontBuilder.readFontSelection(element)
+    );
+    Preferences.addSyncFromPrefListener(
+      document.getElementById("translate"),
+      () =>
+        this.updateButtons(
+          "translateButton",
+          "browser.translation.detectLanguage"
+        )
+    );
+    Preferences.addSyncFromPrefListener(
+      document.getElementById("checkSpelling"),
+      () => this.readCheckSpelling()
+    );
+    Preferences.addSyncToPrefListener(
+      document.getElementById("checkSpelling"),
+      () => this.writeCheckSpelling()
+    );
+    Preferences.addSyncFromPrefListener(
+      document.getElementById("saveWhere"),
+      () => this.readUseDownloadDir()
+    );
+    Preferences.addSyncFromPrefListener(
+      document.getElementById("linkTargeting"),
+      () => this.readLinkTarget()
+    );
+    Preferences.addSyncToPrefListener(
+      document.getElementById("linkTargeting"),
+      () => this.writeLinkTarget()
+    );
+    Preferences.addSyncFromPrefListener(
+      document.getElementById("browserContainersCheckbox"),
+      () => this.readBrowserContainersCheckbox()
+    );
+
    this.setInitialized();
  },

--- a/browser/components/preferences/in-content/privacy.inc.xul
+++ b/browser/components/preferences/in-content/privacy.inc.xul
@ -261,16 +261,12 @@
                            class="content-blocking-checkbox" flex="1"
                            data-l10n-id="content-blocking-cookies-label"
                            aria-describedby="contentBlockingCustomDesc"
-                            preference="network.cookie.cookieBehavior"
-                            onsyncfrompreference="return gPrivacyPane.readBlockCookies();"
-                            onsynctopreference="return gPrivacyPane.writeBlockCookies();"/>
+                            preference="network.cookie.cookieBehavior"/>
                  <vbox>
                    <!-- Please don't remove the wrapping hbox/vbox/box for these elements. It's used to properly compute the search tooltip position. -->
                    <hbox>
                      <menulist id="blockCookiesMenu"
-                                preference="network.cookie.cookieBehavior"
-                                onsyncfrompreference="return gPrivacyPane.readBlockCookiesFrom();"
-                                onsynctopreference="return gPrivacyPane.writeBlockCookiesFrom();">
+                                preference="network.cookie.cookieBehavior">
                        <menupopup>
                          <menuitem data-l10n-id="sitedata-option-block-trackers" value="trackers"/>
                          <menuitem data-l10n-id="sitedata-option-block-unvisited" value="unvisited"/>
@ -367,8 +363,6 @@
        <checkbox id="deleteOnClose"
                  data-l10n-id="sitedata-delete-on-close"
                  preference="network.cookie.lifetimePolicy"
-                  onsyncfrompreference="return gPrivacyPane.readDeleteOnClose();"
-                  onsynctopreference="return gPrivacyPane.writeDeleteOnClose();"
                  flex="1" />
      </hbox>
    </vbox>
@ -428,7 +422,6 @@
          <checkbox id="savePasswords"
                    data-l10n-id="forms-ask-to-save-logins"
                    preference="signon.rememberSignons"
-                    onsyncfrompreference="return gPrivacyPane.readSavePasswords();"
                    flex="1" />
        </hbox>
        <hbox class="indent" id="generatePasswordsBox" flex="1">
@ -542,17 +535,14 @@
          <vbox class="indent">
            <checkbox id="rememberHistory"
                      data-l10n-id="history-remember-browser-option"
-                      onsyncfrompreference="return gPrivacyPane.ensurePrivacyMicroControlUncheckedWhenDisabled(this)"
                      preference="places.history.enabled"/>
            <checkbox id="rememberForms"
                      data-l10n-id="history-remember-search-option"
-                      onsyncfrompreference="return gPrivacyPane.ensurePrivacyMicroControlUncheckedWhenDisabled(this)"
                      preference="browser.formfill.enable"/>
            <hbox id="clearDataBox"
                  align="center">
              <checkbox id="alwaysClear"
                        preference="privacy.sanitize.sanitizeOnShutdown"
-                        onsyncfrompreference="return gPrivacyPane.ensurePrivacyMicroControlUncheckedWhenDisabled(this)"
                        data-l10n-id="history-clear-on-close-option"
                        flex="1" />
            </hbox>
@ -753,8 +743,6 @@
  <hbox data-subcategory="permissions-block-popups">
    <checkbox id="popupPolicy" preference="dom.disable_open_during_load"
              data-l10n-id="permissions-block-popups"
-              onsyncfrompreference="return gPrivacyPane.updateButtons('popupPolicyButton',
-                                         'dom.disable_open_during_load');"
              flex="1" />
    <!-- Please don't remove the wrapping hbox/vbox/box for these elements. It's used to properly compute the search tooltip position. -->
    <hbox>
@ -776,7 +764,6 @@
    <checkbox id="warnAddonInstall"
              data-l10n-id="permissions-addon-install-warning"
              preference="xpinstall.whitelist.required"
-              onsyncfrompreference="return gPrivacyPane.readWarnAddonInstall();"
              flex="1" />
    <!-- Please don't remove the wrapping hbox/vbox/box for these elements. It's used to properly compute the search tooltip position. -->
    <hbox>
@ -925,8 +912,6 @@
  <hbox align="start">
    <checkbox id="enableOCSP"
              data-l10n-id="certs-enable-ocsp"
-              onsyncfrompreference="return gPrivacyPane.readEnableOCSP();"
-              onsynctopreference="return gPrivacyPane.writeEnableOCSP();"
              preference="security.OCSP.enabled"
              flex="1" />
    <vbox>
--- a/browser/components/preferences/in-content/privacy.js
+++ b/browser/components/preferences/in-content/privacy.js
@ -184,6 +184,14 @@ function setEventListener(aId, aEventType, aCallback) {
    .addEventListener(aEventType, aCallback.bind(gPrivacyPane));
 }

+function setSyncFromPrefListener(aId, aCallback) {
+  Preferences.addSyncFromPrefListener(document.getElementById(aId), aCallback);
+}
+
+function setSyncToPrefListener(aId, aCallback) {
+  Preferences.addSyncToPrefListener(document.getElementById(aId), aCallback);
+}
+
 function dataCollectionCheckboxHandler({
  checkbox,
  pref,
@ -500,6 +508,37 @@ var gPrivacyPane = {
      gPrivacyPane.toggleDoNotDisturbNotifications
    );

+    setSyncFromPrefListener("contentBlockingBlockCookiesCheckbox", () =>
+      this.readBlockCookies()
+    );
+    setSyncToPrefListener("contentBlockingBlockCookiesCheckbox", () =>
+      this.writeBlockCookies()
+    );
+    setSyncFromPrefListener("blockCookiesMenu", () =>
+      this.readBlockCookiesFrom()
+    );
+    setSyncToPrefListener("blockCookiesMenu", () =>
+      this.writeBlockCookiesFrom()
+    );
+    setSyncFromPrefListener("deleteOnClose", () => this.readDeleteOnClose());
+    setSyncToPrefListener("deleteOnClose", () => this.writeDeleteOnClose());
+    setSyncFromPrefListener("savePasswords", () => this.readSavePasswords());
+
+    let microControlHandler = el =>
+      this.ensurePrivacyMicroControlUncheckedWhenDisabled(el);
+    setSyncFromPrefListener("rememberHistory", microControlHandler);
+    setSyncFromPrefListener("rememberForms", microControlHandler);
+    setSyncFromPrefListener("alwaysClear", microControlHandler);
+
+    setSyncFromPrefListener("popupPolicy", () =>
+      this.updateButtons("popupPolicyButton", "dom.disable_open_during_load")
+    );
+    setSyncFromPrefListener("warnAddonInstall", () =>
+      this.readWarnAddonInstall()
+    );
+    setSyncFromPrefListener("enableOCSP", () => this.readEnableOCSP());
+    setSyncToPrefListener("enableOCSP", () => this.writeEnableOCSP());
+
    if (AlertsServiceDND) {
      let notificationsDoNotDisturbBox = document.getElementById(
        "notificationsDoNotDisturbBox"
--- a/browser/components/preferences/languages.js
+++ b/browser/components/preferences/languages.js
@ -27,6 +27,14 @@ var gLanguagesDialog = {
  _selectedItemID: null,

  onLoad() {
+    let spoofEnglishElement = document.getElementById("spoofEnglish");
+    Preferences.addSyncFromPrefListener(spoofEnglishElement, () =>
+      gLanguagesDialog.readSpoofEnglish()
+    );
+    Preferences.addSyncToPrefListener(spoofEnglishElement, () =>
+      gLanguagesDialog.writeSpoofEnglish()
+    );
+
    Preferences.get("intl.accept_languages").on("change", () =>
      this._readAcceptLanguages().catch(Cu.reportError)
    );
--- a/browser/components/preferences/languages.xul
+++ b/browser/components/preferences/languages.xul
@ -37,9 +37,7 @@
  <description data-l10n-id="languages-description"/>
  <checkbox id="spoofEnglish"
            data-l10n-id="languages-customize-spoof-english"
-            preference="privacy.spoof_english"
-            onsyncfrompreference="return gLanguagesDialog.readSpoofEnglish();"
-            onsynctopreference="return gLanguagesDialog.writeSpoofEnglish();"/>
+            preference="privacy.spoof_english"/>
  <grid flex="1">
    <columns>
      <column flex="1"/>
--- a/modules/libpref/init/all.js
+++ b/modules/libpref/init/all.js
@ -2469,7 +2469,7 @@ pref("csp.overrule_about_uris_without_csp_whitelist", false);
 pref("csp.skip_about_page_has_csp_assert", false);
 // assertion flag will be set to false after fixing Bug 1473549
 pref("security.allow_eval_with_system_principal", false);
-pref("security.uris_using_eval_with_system_principal", "autocomplete.xml,redux.js,react-redux.js,content-task.js,preferencesbindings.js,lodash.js,jszip.js,sinon-7.2.7.js,ajv-4.1.1.js,jsol.js");
+pref("security.uris_using_eval_with_system_principal", "autocomplete.xml,redux.js,react-redux.js,content-task.js,lodash.js,jszip.js,sinon-7.2.7.js,ajv-4.1.1.js,jsol.js");
 #endif

 #ifdef EARLY_BETA_OR_EARLIER
--- a/toolkit/content/preferencesBindings.js
+++ b/toolkit/content/preferencesBindings.js
@ -250,22 +250,12 @@ const Preferences = (window.Preferences = (function() {
    },

    _fireEvent(aEventName, aTarget) {
-      // Panel loaded, synthesize a load event.
      try {
-        const event = document.createEvent("Events");
-        event.initEvent(aEventName, true, true);
-        let cancel = !aTarget.dispatchEvent(event);
-        if (aTarget.hasAttribute("on" + aEventName)) {
-          const fn = new Function(
-            "event",
-            aTarget.getAttribute("on" + aEventName)
-          );
-          const rv = fn.call(aTarget, event);
-          if (!rv) {
-            cancel = true;
-          }
-        }
-        return !cancel;
+        const event = new CustomEvent(aEventName, {
+          bubbles: true,
+          cancelable: true,
+        });
+        return aTarget.dispatchEvent(event);
      } catch (e) {
        Cu.reportError(e);
      }
@ -305,6 +295,41 @@ const Preferences = (window.Preferences = (function() {
          return undefined;
      }
    },
+
+    _syncFromPrefListeners: new WeakMap(),
+    _syncToPrefListeners: new WeakMap(),
+
+    addSyncFromPrefListener(aElement, callback) {
+      this._syncFromPrefListeners.set(aElement, callback);
+      // Make sure elements are updated correctly with the listener attached.
+      let elementPref = aElement.getAttribute("preference");
+      if (elementPref) {
+        let pref = this.get(elementPref);
+        if (pref) {
+          pref.updateElements();
+        }
+      }
+    },
+
+    addSyncToPrefListener(aElement, callback) {
+      this._syncToPrefListeners.set(aElement, callback);
+      // Make sure elements are updated correctly with the listener attached.
+      let elementPref = aElement.getAttribute("preference");
+      if (elementPref) {
+        let pref = this.get(elementPref);
+        if (pref) {
+          pref.updateElements();
+        }
+      }
+    },
+
+    removeSyncFromPrefListener(aElement) {
+      this._syncFromPrefListeners.delete(aElement);
+    },
+
+    removeSyncToPrefListener(aElement) {
+      this._syncToPrefListeners.delete(aElement);
+    },
  };

  Services.prefs.addObserver("", Preferences);
@ -383,19 +408,9 @@ const Preferences = (window.Preferences = (function() {
      }

      let rv = undefined;
-      if (aElement.hasAttribute("onsyncfrompreference")) {
-        // Value changed, synthesize an event
-        try {
-          const event = document.createEvent("Events");
-          event.initEvent("syncfrompreference", true, true);
-          const f = new Function(
-            "event",
-            aElement.getAttribute("onsyncfrompreference")
-          );
-          rv = f.call(aElement, event);
-        } catch (e) {
-          Cu.reportError(e);
-        }
+
+      if (Preferences._syncFromPrefListeners.has(aElement)) {
+        rv = Preferences._syncFromPrefListeners.get(aElement)(aElement);
      }
      let val = rv;
      if (val === undefined) {
@ -446,16 +461,9 @@ const Preferences = (window.Preferences = (function() {
    }

    getElementValue(aElement) {
-      if (aElement.hasAttribute("onsynctopreference")) {
-        // Value changed, synthesize an event
+      if (Preferences._syncToPrefListeners.has(aElement)) {
        try {
-          const event = document.createEvent("Events");
-          event.initEvent("synctopreference", true, true);
-          const f = new Function(
-            "event",
-            aElement.getAttribute("onsynctopreference")
-          );
-          const rv = f.call(aElement, event);
+          const rv = Preferences._syncToPrefListeners.get(aElement)(aElement);
          if (rv !== undefined) {
            return rv;
          }
--- a/toolkit/content/tests/chrome/window_preferences_beforeaccept.xul
+++ b/toolkit/content/tests/chrome/window_preferences_beforeaccept.xul
@ -9,13 +9,13 @@
        width="300" height="300"
        windowtype="test:preferences"
        buttons="accept,cancel"
-        onbeforeaccept="return beforeAccept();"
        onload="onDialogLoad();"
 >
  <script type="application/javascript" src="chrome://global/content/preferencesBindings.js"/>
  <script type="application/javascript">
  <![CDATA[
    function onDialogLoad() {
+      document.addEventListener("beforeaccept", beforeAccept);
      var pref = Preferences.get("tests.beforeaccept.dialogShown");
      pref.value = true;

@ -23,12 +23,14 @@
      window.arguments[0]();
    }

-    function beforeAccept() {
+    function beforeAccept(event) {
      var beforeAcceptPref = Preferences.get("tests.beforeaccept.called");
      var oldValue = beforeAcceptPref.value;
      beforeAcceptPref.value = true;

-      return !!oldValue;
+      if (!oldValue) {
+        event.preventDefault();
+      }
    }

    Preferences.addAll([
--- a/toolkit/content/tests/chrome/window_preferences_onsyncfrompreference.xul
+++ b/toolkit/content/tests/chrome/window_preferences_onsyncfrompreference.xul
@ -12,7 +12,8 @@
        class="prefwindow"
        title="preferences window"
        width="300" height="300"
-        windowtype="test:preferences">
+        windowtype="test:preferences"
+        onload="onLoad()">

  <script type="application/javascript" src="chrome://global/content/preferencesBindings.js"/>
  <script type="application/javascript">
@ -22,21 +23,30 @@
      { id: "tests.onsyncfrompreference.pref2", type: "int" },
      { id: "tests.onsyncfrompreference.pref3", type: "int" },
    ]);
+
+    function onLoad() {
+      Preferences.addSyncFromPrefListener(document.getElementById("check1"),
+        () => window.arguments[0]());
+      Preferences.addSyncFromPrefListener(document.getElementById("check2"),
+        () => window.arguments[0]());
+      Preferences.addSyncFromPrefListener(document.getElementById("check3"),
+        () => window.arguments[0]());
+      Preferences.addSyncToPrefListener(document.getElementById("check1"),
+        () => 1);
+      Preferences.addSyncToPrefListener(document.getElementById("check2"),
+        () => 1);
+      Preferences.addSyncToPrefListener(document.getElementById("check3"),
+        () => 1);
+    }
  ]]>
  </script>
  <vbox id="sample_pane" class="prefpane" label="Sample Prefpane">
  </vbox>
  <label>Test Prefpane</label>
        <checkbox id="check1" label="Label1"
-                preference="tests.onsyncfrompreference.pref1"
-                onsyncfrompreference="return window.arguments[0]();"
-                onsynctopreference="return 1;"/>
+                preference="tests.onsyncfrompreference.pref1"/>
        <checkbox id="check2" label="Label2"
-                preference="tests.onsyncfrompreference.pref2"
-                onsyncfrompreference="return window.arguments[0]();"
-                onsynctopreference="return 1;"/>
+                preference="tests.onsyncfrompreference.pref2"/>
        <checkbox id="check3" label="Label3"
-                preference="tests.onsyncfrompreference.pref3"
-                onsyncfrompreference="return window.arguments[0]();"
-                onsynctopreference="return 1;"/>
+                preference="tests.onsyncfrompreference.pref3"/>
 </dialog>