[Settings UI] Settings toggle requires a pref.

Without a pref the settings toggle shows an error on console that the
pref is not valid. Just as upstream does, for example, in
personalization_options with metrics reporting toggle, we can fake the
pref object.

Chromium changes:

https://source.chromium.org/chromium/chromium/src/+/a6bb7ccff5ac9a8b1970fda06ce49547c0f41608

commit a6bb7ccff5ac9a8b1970fda06ce49547c0f41608
Author: dpapad <[email protected]>
Date:   Wed Sep 29 01:18:15 2021 +0000

    [Reland] Settings: Convert legacy Behaviors in controls/ folder to Mixins.

    Original CL was reverted due to a failure in a test that only runs on
    official builds, which is now addressed.

    Specifically converting:
     - CrPolicyPrefBehavior
     - PrefControlBehavior
     - SettingsBooleanControlBehavior

    This is in preparation of further migrating these to TypeScript.

    Bug: 1234307

https://source.chromium.org/chromium/chromium/src/+/a26b552a4aa82c86ed482269d2a0bb823978f442

commit a26b552a4aa82c86ed482269d2a0bb823978f442
Author: Xiaohui Chen <[email protected]>
Date:   Mon Feb 7 21:01:05 2022 +0000

    settings: add additional validation to pref_control_mixin

    It seems possible that developer put wrong pref value in html. Add
    additional validation to catch bad 'string' values.

    Bug: 1189444

browser/resources/settings/brave_default_extensions_page/brave_default_extensions_page.html

@@ -117,8 +117,7 @@
     <if expr="enable_tor">
     <settings-toggle-button id="torEnabled"
         class="cr-row"
-        pref=""
-        checked="[[torEnabled_]]"
+        pref="[[torEnabledPref_]]"
         label="$i18n{torEnabledLabel}"
         sub-label="$i18n{torEnabledDesc}"
         disabled="[[disableTorOption_]]"
@@ -142,11 +141,10 @@
     <settings-toggle-button
         id="widevineEnabled"
         class="cr-row"
-        pref=""
+        pref="[[widevineEnabledPref_]]"
         label="Widevine"
         sub-label="$i18n{widevineEnabledDesc}"
-        on-settings-boolean-control-change="onWidevineEnabledChange_"
-        checked="[[widevineEnabled_]]">
+        on-settings-boolean-control-change="onWidevineEnabledChange_">
     </settings-toggle-button>
     <div class="settings-row" id="manageExtensionsRow">
       <cr-link-row icon-class="icon-external"

browser/resources/settings/brave_default_extensions_page/brave_default_extensions_page.js

@@ -27,12 +27,26 @@ Polymer({
 
   properties: {
     showRestartToast_: Boolean,
-    torEnabled_: Boolean,
-    widevineEnabled_: Boolean,
     disableTorOption_: Boolean,
     decentralizedDnsEnabled_: Boolean,
     unstoppableDomainsResolveMethod_: Array,
     ensResolveMethod_: Array,
+    torEnabledPref_: {
+      type: Object,
+      value() {
+        // TODO(dbeam): this is basically only to appease PrefControlMixin.
+        // Maybe add a no-validate attribute instead? This makes little sense.
+        return {};
+      },
+    },
+    widevineEnabledPref_: {
+      type: Object,
+      value() {
+        // TODO(dbeam): this is basically only to appease PrefControlMixin.
+        // Maybe add a no-validate attribute instead? This makes little sense.
+        return {};
+      },
+    },
   },
 
   /** @private {?settings.BraveDefaultExtensionsBrowserProxy} */
@@ -56,25 +70,13 @@ Polymer({
     this.addWebUIListener('brave-needs-restart-changed', (needsRestart) => {
       this.showRestartToast_ = needsRestart
     })
-    this.addWebUIListener('tor-enabled-changed', (enabled) => {
-      this.torEnabled_ = enabled
-    })
-    this.addWebUIListener('widevine-enabled-changed', (enabled) => {
-      this.widevineEnabled_ = enabled
-    })
 
     this.browserProxy_.getRestartNeeded().then(show => {
       this.showRestartToast_ = show;
     });
-    this.browserProxy_.isTorEnabled().then(enabled => {
-      this.torEnabled_ = enabled
-    })
     this.browserProxy_.isTorManaged().then(managed => {
       this.disableTorOption_ = managed
     })
-    this.browserProxy_.isWidevineEnabled().then(enabled => {
-      this.widevineEnabled_ = enabled
-    })
     this.browserProxy_.isDecentralizedDnsEnabled().then(enabled => {
       this.decentralizedDnsEnabled_ = enabled
     })
@@ -86,6 +88,16 @@ Polymer({
       this.Provider.ENS).then(list => {
       this.ensResolveMethod_ = list
     })
+
+    // PrefControlMixin checks for a pref being valid, so have to fake it,
+    // same as upstream.
+    const setTorEnabledPref = (enabled) => this.setTorEnabledPref_(enabled);
+    this.addWebUIListener('tor-enabled-changed', setTorEnabledPref);
+    this.browserProxy_.isTorEnabled().then(setTorEnabledPref);
+
+    const setWidevineEnabledPref = (enabled) => this.setWidevineEnabledPref_(enabled);
+    this.addWebUIListener('widevine-enabled-changed', setWidevineEnabledPref);
+    this.browserProxy_.isWidevineEnabled().then(setWidevineEnabledPref);
   },
 
   onWebTorrentEnabledChange_: function() {
@@ -101,10 +113,28 @@ Polymer({
     window.open("chrome://restart", "_self");
   },
 
+  setTorEnabledPref_: function (enabled) {
+    const pref = {
+      key: '',
+      type: chrome.settingsPrivate.PrefType.BOOLEAN,
+      value: enabled,
+    };
+    this.torEnabledPref_ = pref;
+  },
+
   onTorEnabledChange_: function() {
     this.browserProxy_.setTorEnabled(this.$.torEnabled.checked);
   },
 
+  setWidevineEnabledPref_: function (enabled) {
+    const pref = {
+      key: '',
+      type: chrome.settingsPrivate.PrefType.BOOLEAN,
+      value: enabled,
+    };
+    this.widevineEnabledPref_ = pref;
+  },
+
   onWidevineEnabledChange_: function() {
     this.browserProxy_.setWidevineEnabled(this.$.widevineEnabled.checked);
   },

browser/resources/settings/brave_privacy_page/brave_personalization_options.html

@@ -40,16 +40,14 @@
     </settings-toggle-button>
     <settings-toggle-button id="p3aEnabled"
         class="cr-row"
-        pref=""
-        checked="[[p3aEnabled_]]"
+        pref="[[p3aEnabledPref_]]"
         label="$i18n{p3aEnableTitle}"
         sub-label="$i18n{p3aEnabledDesc}"
         on-settings-boolean-control-change="onP3AEnabledChange_">
     </settings-toggle-button>
     <settings-toggle-button id="statsUsagePingEnabled"
         class="cr-row"
-        pref=""
-        checked="[[statsUsagePingEnabled_]]"
+        pref="[[statsUsagePingEnabledPref_]]"
         label="$i18n{statsUsagePingEnabledTitle}"
         sub-label="$i18n{statsUsagePingEnabledDesc}"
         on-settings-boolean-control-change="onStatsUsagePingEnabledChange_">

browser/resources/settings/brave_privacy_page/brave_personalization_options.js

@@ -27,8 +27,22 @@ Polymer({
     },
 
     webRTCPolicy_: String,
-    p3aEnabled_: Boolean,
-    statsUsagePingEnabled_: Boolean
+    p3aEnabledPref_: {
+      type: Object,
+      value() {
+        // TODO(dbeam): this is basically only to appease PrefControlMixin.
+        // Maybe add a no-validate attribute instead? This makes little sense.
+        return {};
+      },
+    },
+    statsUsagePingEnabledPref_: {
+      type: Object,
+      value() {
+        // TODO(dbeam): this is basically only to appease PrefControlMixin.
+        // Maybe add a no-validate attribute instead? This makes little sense.
+        return {};
+      },
+    },
   },
 
   /** @private {?settings.BravePrivacyBrowserProxy} */
@@ -42,26 +56,40 @@ Polymer({
   /** @override */
   ready: function() {
     // Used for first time initialization of checked state.
-    // Can't use `prefs` property of `settings-toggle-button`
-    // because p3a enabled is a local state setting.
-    this.browserProxy_.getP3AEnabled().then(enabled => {
-      this.p3aEnabled_ = enabled;
-    });
-    this.browserProxy_.getStatsUsagePingEnabled().then(enabled => {
-      this.statsUsagePingEnabled_ = enabled;
-    });
-    this.addWebUIListener('stats-usage-ping-enabled-changed', (enabled) => {
-      this.statsUsagePingEnabled_ = enabled;
-    })
-    this.addWebUIListener('p3a-enabled-changed', (enabled) => {
-      this.p3aEnabled_ = enabled
-    })
+    // Can't use `prefs` property of `settings-toggle-button` directly
+    // because p3a enabled is a local state setting, but PrefControlMixin
+    // checks for a pref being valid, so have to fake it, same as upstream.
+    const setP3AEnabledPref = (enabled) => this.setP3AEnabledPref_(enabled);
+    this.addWebUIListener('p3a-enabled-changed', setP3AEnabledPref);
+    this.browserProxy_.getP3AEnabled().then(setP3AEnabledPref);
+
+    const setStatsUsagePingEnabledPref = (enabled) => this.setStatsUsagePingEnabledPref_(enabled);
+    this.addWebUIListener('stats-usage-ping-enabled-changed', setStatsUsagePingEnabledPref);
+    this.browserProxy_.getStatsUsagePingEnabled().then(setStatsUsagePingEnabledPref);
+  },
+
+  setP3AEnabledPref_: function (enabled) {
+    const pref = {
+      key: '',
+      type: chrome.settingsPrivate.PrefType.BOOLEAN,
+      value: enabled,
+    };
+    this.p3aEnabledPref_ = pref;
   },
 
   onP3AEnabledChange_: function() {
     this.browserProxy_.setP3AEnabled(this.$.p3aEnabled.checked);
   },
 
+  setStatsUsagePingEnabledPref_: function (enabled) {
+    const pref = {
+      key: '',
+      type: chrome.settingsPrivate.PrefType.BOOLEAN,
+      value: enabled,
+    };
+    this.statsUsagePingEnabledPref_ = pref;
+  },
+
   onStatsUsagePingEnabledChange_: function() {
     this.browserProxy_.setStatsUsagePingEnabled(this.$.statsUsagePingEnabled.checked);
   },