Fix the pref binding by binding to the object rather than the element

BUG=485381

Review URL: https://codereview.chromium.org/1132223005

Cr-Commit-Position: refs/heads/master@{#329789}

chrome/browser/resources/settings/a11y_page/a11y_page.html

@@ -15,42 +15,43 @@
 
 <if expr="chromeos">
       <cr-settings-checkbox
-          pref="{{prefs.settings.settings.a11y.enable_menu}}"
+          pref="{{prefs.settings.a11y.enable_menu}}"
           i18n-values="label:accessibilityOptionsInMenuLabel">
       </cr-settings-checkbox>
       <cr-settings-checkbox
-          pref="{{prefs.settings.settings.a11y.large_cursor_enabled}}"
+          pref="{{prefs.settings.a11y.large_cursor_enabled}}"
           i18n-values="label:accessibilityLargeMouseCursorLabel">
       </cr-settings-checkbox>
       <cr-settings-checkbox
-          pref="{{prefs.settings.settings.a11y.high_contrast_enabled}}"
+          pref="{{prefs.settings.a11y.high_contrast_enabled}}"
           i18n-values="label:accessibilityHighContrastLabel">
       </cr-settings-checkbox>
       <cr-settings-checkbox
-          pref="{{prefs.settings.settings.a11y.sticky_keys_enabled}}"
+          pref="{{prefs.settings.a11y.sticky_keys_enabled}}"
           i18n-values="label:accessibilityStickyKeysLabel;
                        subLabel:accessibilityStickyKeysSublabel">
       </cr-settings-checkbox>
-      <cr-settings-checkbox pref="{{prefs.settings.settings.accessibility}}"
+      <cr-settings-checkbox pref="{{prefs.settings.accessibility}}"
           i18n-values="label:accessibilityChromeVoxLabel;
                        subLabel:accessibilityChromeVoxSublabel">
       </cr-settings-checkbox>
       <cr-settings-checkbox
-          pref="{{prefs.settings.settings.a11y.screen_magnifier}}"
+          pref="{{prefs.settings.a11y.screen_magnifier}}"
           i18n-values="label:accessibilityScreenMagnifierLabel">
       </cr-settings-checkbox>
       <cr-settings-checkbox
-          pref="{{prefs.settings.settings.touchpad.enable_tap_dragging}}"
+          pref="{{prefs.settings.touchpad.enable_tap_dragging}}"
           i18n-values="label:accessibilityTapDraggingLabel">
       </cr-settings-checkbox>
-      <cr-settings-checkbox pref="{{prefs.settings.settings.a11y.autoclick}}"
+      <cr-settings-checkbox pref="{{prefs.settings.a11y.autoclick}}"
           i18n-values="label:accessibilityClickOnStopLabel">
       </cr-settings-checkbox>
 
       <div class="autoclick-delay-label"
-          hidden$="{{!prefs.settings.settings.a11y.autoclick}}">
+          hidden$="{{!prefs.settings.a11y.autoclick}}">
         <span i18n-content="accessibilityDelayBeforeClickLabel"></span>
-        <select id="autoclickDropdown" on-change="autoclickSelectChanged_">
+        <select id="autoclickDropdown"
+            value="{{prefs.settings.a11y.autoclick_delay_ms::change}}">
           <option value="200"
               i18n-content="accessibilityDelayBeforeClickExtremelyShort">
           </option>
@@ -70,7 +71,7 @@
       </div>
 
       <cr-settings-checkbox
-          pref="{{prefs.settings.settings.a11y.virtual_keyboard}}"
+          pref="{{prefs.settings.a11y.virtual_keyboard}}"
           i18n-values="label:accessibilityOnScreenKeyboardLabel">
       </cr-settings-checkbox>
 </if>

chrome/browser/resources/settings/a11y_page/a11y_page.js

@@ -23,9 +23,6 @@ Polymer({
   properties: {
     /**
      * Preferences state.
-     *
-     * @type {?CrSettingsPrefsElement}
-     * @default null
      */
     prefs: {
       type: Object,
@@ -72,14 +69,4 @@ Polymer({
       readOnly: true,
     },
   },
-
-  /**
-   * Called when the selected value of the autoclick dropdown changes.
-   * TODO(jlklein): Replace with binding when paper-dropdown lands.
-   * @private
-   */
-  autoclickSelectChanged_: function() {
-    this.prefs.settings.settings.a11y.autoclick_delay_ms =
-        this.$.autoclickDropdown.value;
-  },
 });

chrome/browser/resources/settings/checkbox/checkbox.js

@@ -21,7 +21,10 @@ Polymer({
      * The boolean preference object to control.
      * @type {?chrome.settingsPrivate.PrefObject}
      */
-    pref: Object,
+    pref: {
+      type: Object,
+      notify: true,
+    },
 
     label: {
       type: String,

chrome/browser/resources/settings/date_time_page/date_time_page.html

@@ -12,7 +12,7 @@
         <span class="time-zone-label" i18n-content="dateTimeTimeZoneLabel"></span>
       </div>
       <cr-settings-checkbox
-          pref="{{prefs.settings.settings.clock.use_24hour_clock}}"
+          pref="{{prefs.settings.clock.use_24hour_clock}}"
           i18n-values="label:dateTime24HourClockLabel">
       </cr-settings-checkbox>
       <span id="setAutomatically" i18n-content="dateTimeAutomaticallySet"></span>

chrome/browser/resources/settings/date_time_page/date_time_page.js

@@ -24,7 +24,6 @@ Polymer({
   properties: {
     /**
      * Preferences state.
-     * @type {?CrSettingsPrefsElement}
      */
     prefs: {
       type: Object,

chrome/browser/resources/settings/downloads_page/downloads_page.html

@@ -15,7 +15,7 @@
         <div class="layout horizontal center">
           <div id="locationLabel" i18n-content="downloadsLocationLabel"></div>
           <cr-input id="downloadsPath" floating-label="false"
-                value="{{prefs.settings.download.default_directory.value}}"
+                value="{{prefs.download.default_directory.value}}"
                 readonly aria-labelledby="locationLabel">
           </cr-input>
         </div>
@@ -24,7 +24,7 @@
         </cr-button>
       </div>
       <cr-settings-checkbox
-          pref="{{prefs.settings.download.prompt_for_download}}"
+          pref="{{prefs.download.prompt_for_download}}"
           i18n-values="label:downloadsPromptForDownloadLabel">
       </cr-settings-checkbox>
     </paper-material>

chrome/browser/resources/settings/downloads_page/downloads_page.js

@@ -24,7 +24,6 @@ Polymer({
   properties: {
     /**
      * Preferences state.
-     * @type {?CrSettingsPrefsElement}
      */
     prefs: {
       type: Object,

chrome/browser/resources/settings/prefs/prefs.js

@@ -26,7 +26,7 @@
       /**
        * Object containing all preferences.
        */
-      settings: {
+      prefStore: {
         type: Object,
         value: function() { return {}; },
         notify: true,
@@ -74,7 +74,7 @@
      */
     updatePrefs_: function(prefs, shouldObserve) {
       prefs.forEach(function(prefObj) {
-        let root = this.settings;
+        let root = this.prefStore;
         let tokens = prefObj.key.split('.');
 
         assert(tokens.length > 0);
@@ -83,7 +83,7 @@
           let token = tokens[i];
 
           if (!root.hasOwnProperty(token)) {
-            let path = 'settings.' + tokens.slice(0, i + 1).join('.');
+            let path = 'prefStore.' + tokens.slice(0, i + 1).join('.');
             this.setPathValue(path, {});
           }
           root = root[token];
@@ -92,7 +92,7 @@
         // NOTE: Do this copy rather than just a re-assignment, so that the
         // ObjectObserver fires.
         for (let objKey in prefObj) {
-          let path = 'settings.' + prefObj.key + '.' + objKey;
+          let path = 'prefStore.' + prefObj.key + '.' + objKey;
           this.setPathValue(path, prefObj[objKey]);
         }
 

chrome/browser/resources/settings/search_engines_page/search_engines_page.js

@@ -21,15 +21,6 @@ Polymer({
   is: 'cr-settings-search-engines-page',
 
   properties: {
-    /**
-     * Preferences state.
-     * @type {?CrSettingsPrefsElement}
-     */
-    prefs: {
-      type: Object,
-      notify: true
-    },
-
     /**
      * Route for the page.
      */

chrome/browser/resources/settings/search_page/search_page.js

@@ -20,15 +20,6 @@ Polymer({
   is: 'cr-settings-search-page',
 
   properties: {
-    /**
-     * Preferences state.
-     * @type {?CrSettingsPrefsElement}
-     */
-    prefs: {
-      type: Object,
-      notify: true,
-    },
-
     /**
      * Route for the page.
      */

chrome/browser/resources/settings/settings.html

@@ -4,7 +4,7 @@
 
 <dom-module id="cr-settings">
   <template>
-    <cr-settings-prefs id="prefs"></cr-settings-prefs>
+    <cr-settings-prefs id="prefs" pref-store="{{prefs_}}"></cr-settings-prefs>
     <cr-settings-ui prefs="{{prefs_}}"></cr-settings-ui>
   </template>
   <script src="settings.js"></script>

chrome/browser/resources/settings/settings.js

@@ -13,18 +13,4 @@
  * @group Chrome Settings Elements
  * @element cr-settings
  */
-Polymer({
-  is: 'cr-settings',
-
-  properties: {
-    /**
-     * The CrSettingsPrefsElement used throughout the app.
-     * @private {!CrSettingsPrefsElement}
-     */
-    prefs_: {
-      type: Object,
-      value: function() { return this.$.prefs; },
-      notify: true,
-    }
-  },
-});
+Polymer({is: 'cr-settings'});

chrome/browser/resources/settings/settings_main/settings_main.html

@@ -43,10 +43,8 @@
 </if>
           <cr-settings-downloads-page prefs="{{prefs}}" route="downloads">
           </cr-settings-downloads-page>
-          <cr-settings-search-page prefs="{{prefs}}" route="search">
-          </cr-settings-search-page>
-          <cr-settings-search-engines-page prefs="{{prefs}}"
-              route="search-engines">
+          <cr-settings-search-page route="search"></cr-settings-search-page>
+          <cr-settings-search-engines-page route="search-engines">
           </cr-settings-search-engines-page>
         </iron-pages>
       </more-route-selector>

ui/webui/resources/cr_elements/v0_8/cr_checkbox/cr_checkbox.js

@@ -22,23 +22,16 @@ Polymer({
   properties: {
     /**
      * Gets or sets the state. `true` is checked and `false` is unchecked.
-     *
-     * @attribute checked
-     * @type {boolean}
-     * @default false
      */
     checked: {
       type: Boolean,
       value: false,
+      notify: true,
       reflectToAttribute: true
     },
 
     /**
      * If true, the user cannot interact with this element.
-     *
-     * @attribute disabled
-     * @type {boolean}
-     * @default false
      */
     disabled: {
       type: Boolean,