Clean up copy-and-pasted code in prefs UI classes

chrome/browser/resources/options/pref_ui.js

 // Copyright (c) 2012 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 cr.define('options', function() {
 
   var Preferences = options.Preferences;
 
   /**
    * Allows an element to be disabled for several reasons.
@@ skipping 21 matching lines @@
         console.error('Element is not disabled but should be');
     }
     if (disabled) {
       el.disabledReasons[reason] = true;
     } else {
       delete el.disabledReasons[reason];
     }
     el.disabled = Object.keys(el.disabledReasons).length > 0;
   }
 
-  /**
-   * Helper function to update element's state from pref change event.
-   * @private
-   * @param {!HTMLElement} el The element to update.
-   * @param {!Event} event The pref change event.
-   */
-  function updateElementState_(el, event) {
-    updateDisabledState_(el, 'notUserModifiable', event.value.disabled);
-    el.controlledBy = event.value.controlledBy;
-    OptionsPage.updateManagedBannerVisibility();
-  }
-
   /////////////////////////////////////////////////////////////////////////////
-  // PrefCheckbox class:
-  // TODO(jhawkins): Refactor all this copy-pasted code!
+  // PrefInputElement class:
 
   // Define a constructor that uses an input element as its underlying element.
-  var PrefCheckbox = cr.ui.define('input');
+  var PrefInputElement = function() {};
 
-  PrefCheckbox.prototype = {
+  PrefInputElement.prototype = {
     // Set up the prototype chain
     __proto__: HTMLInputElement.prototype,
 
     /**
      * Initialization function for the cr.ui framework.
      */
     decorate: function() {
-      this.type = 'checkbox';
       var self = this;
 
-      this.initializeValueType(this.getAttribute('value-type'));
+      // Listen for user events.
+      this.addEventListener('change', this.handleChange_.bind(this));
 
-      // Listen to pref changes.
+      // Listen for pref changes.
       Preferences.getInstance().addEventListener(this.pref, function(event) {
-        var value = event.value.value;
-        self.checked = self.inverted_pref ? !value : value;
-        updateElementState_(self, event);
+        self.updateStateFromPref_(event);
+        updateDisabledState_(self, 'notUserModifiable', event.value.disabled);
+        self.controlledBy = event.value.controlledBy;
+        OptionsPage.updateManagedBannerVisibility();
       });
-
-      // Listen to user events.
-      this.addEventListener('change', this.updatePreferenceValue_.bind(this));
     },
 
     /**
-     * Handler that updates the associated pref when the user changes the input
-     * element's value.
+     * Handle changes to the input element's state made by the user. If a custom
+     * change handler does not suppress it, a default handler is invoked that
+     * updates the associated pref.
      * @param {Event} event Change event.
      * @private
      */
-    updatePreferenceValue_: function(event) {
-      if (this.customChangeHandler(event))
-        return;
-
-      var value = this.inverted_pref ? !this.checked : this.checked;
-      switch (this.valueType) {
-        case 'number':
-          Preferences.setIntegerPref(this.pref, Number(value),
-                                     !this.dialogPref, this.metric);
-          break;
-        case 'boolean':
-          Preferences.setBooleanPref(this.pref, value,
-                                     !this.dialogPref, this.metric);
-          break;
-      }
+    handleChange_: function(event) {
+      if (!this.customChangeHandler(event))
+        this.updatePrefFromState_();
     },
 
     /**
-     * Sets up options in checkbox element.
-     * @param {String} valueType The preference type for this checkbox.
+     * Update the input element's state when the associated pref changes.
+     * @param {Event} event Pref change event.
+     * @private
      */
-    initializeValueType: function(valueType) {
-      this.valueType = valueType || 'boolean';
+    updateStateFromPref_: function(event) {
+      this.value = event.value.value;
     },
 
     /**
      * See |updateDisabledState_| above.
      */
     setDisabled: function(reason, disabled) {
       updateDisabledState_(this, reason, disabled);
     },
 
     /**
-     * Handler that is called when the user changes the input element's value.
-     * If it returns false, the default handler is executed next, updating the
-     * associated pref to its new value. If it returns true, the default handler
-     * is skipped (i.e., this works like stopPropagation or cancelBubble).
-     * @param {Event} event Change event.
+     * Custom change handler that is invoked first when the user makes changes
+     * to the input element's state. If it returns false, a default handler is
+     * invoked next that updates the associated pref. If it returns true, the
+     * default handler is suppressed (i.e., this works like stopPropagation or
+     * cancelBubble).
+     * @param {Event} event Input element change event.
      */
     customChangeHandler: function(event) {
       return false;
     },
   };
 
   /**
-   * The preference name.
+   * The name of the associated preference.
    * @type {string}
    */
-  cr.defineProperty(PrefCheckbox, 'pref', cr.PropertyKind.ATTR);
+  cr.defineProperty(PrefInputElement, 'pref', cr.PropertyKind.ATTR);
 
   /**
-   * A special preference type specific to dialogs. Changes take effect in the
-   * settings UI immediately but are only actually committed when the user
-   * confirms the dialog. If the user cancels the dialog instead, the changes
-   * are rolled back in the settings UI and never committed.
+   * The data type of the associated preference, only relevant for derived
+   * classes that support multiple different data types.

[James Hawkins, 2012/09/04 14:22:20]

I think the use of the word 'different' here is superfluous as it's implied by
'multiple'.

[bartfab (slow), 2012/09/04 15:03:29]

Done. I actually spent some time last night wondering whether "multiple
different" is clearer or needlessy redundant :).

+   * @type {string}
+   */
+  cr.defineProperty(PrefInputElement, 'dataType', cr.PropertyKind.ATTR);
+
+  /**
+   * Whether this input element is part of a dialog. If so, changes take effect
+   * in the settings UI immediately but are only actually committed when the

[James Hawkins, 2012/09/04 14:22:20]

Before I forget: do we have code to handle reverting the pref change if the user
manages to close the settings page before confirming the dialog?

[bartfab (slow), 2012/09/04 15:03:29]

Until you click "OK", the new setting values exist only in the current settings
page's Preferences object. If you just close the page, that object goes away and
the new setting values disappear with it. When you reopen the settings page, a
new Preferences object is constructed that re-reads the settings from Chrome.
For good measure, I just verified that this works as expected.

+   * user confirms the dialog. If the user cancels the dialog instead, the
+   * changes are rolled back in the settings UI and never committed.
    * @type {boolean}
    */
-  cr.defineProperty(PrefCheckbox, 'dialogPref', cr.PropertyKind.BOOL_ATTR);
+  cr.defineProperty(PrefInputElement, 'dialogPref', cr.PropertyKind.BOOL_ATTR);
 
   /**
-   * Whether the preference is controlled by something else than the user's
-   * settings (either 'policy' or 'extension').
+   * Whether the associated preference is controlled by a source other than the
+   * user's setting (can be 'policy', 'extension' or 'recommended').
    * @type {string}
    */
-  cr.defineProperty(PrefCheckbox, 'controlledBy', cr.PropertyKind.ATTR);
+  cr.defineProperty(PrefInputElement, 'controlledBy', cr.PropertyKind.ATTR);
 
   /**
    * The user metric string.
    * @type {string}
    */
-  cr.defineProperty(PrefCheckbox, 'metric', cr.PropertyKind.ATTR);
+  cr.defineProperty(PrefInputElement, 'metric', cr.PropertyKind.ATTR);
+
+  /////////////////////////////////////////////////////////////////////////////
+  // PrefCheckbox class:
+
+  // Define a constructor that uses an input element as its underlying element.
+  var PrefCheckbox = cr.ui.define('input');
+
+  PrefCheckbox.prototype = {
+    // Set up the prototype chain
+    __proto__: PrefInputElement.prototype,
+
+    /**
+     * Initialization function for the cr.ui framework.
+     */
+    decorate: function() {
+      PrefInputElement.prototype.decorate.call(this);
+      this.type = 'checkbox';
+    },
+
+    /**
+     * Update the associated pref when when the user makes changes to the
+     * checkbox state.
+     * @private
+     */
+    updatePrefFromState_: function() {
+      var value = this.inverted_pref ? !this.checked : this.checked;
+      Preferences.setBooleanPref(this.pref, value,
+                                 !this.dialogPref, this.metric);
+    },
+
+    /**
+     * Update the checkbox state when the associated pref changes.
+     * @param {Event} event Pref change event.
+     * @private
+     */
+    updateStateFromPref_: function(event) {
+      var value = Boolean(event.value.value);
+      this.checked = this.inverted_pref ? !value : value;
+    },
+  };
 
   /**
-   * Whether to use inverted pref value.
+   * Whether the mapping between checkbox state and associated pref is inverted.
    * @type {boolean}
    */
   cr.defineProperty(PrefCheckbox, 'inverted_pref', cr.PropertyKind.BOOL_ATTR);
 
   /////////////////////////////////////////////////////////////////////////////
+  // PrefNumber class:
+
+  // Define a constructor that uses an input element as its underlying element.
+  var PrefNumber = cr.ui.define('input');
+
+  PrefNumber.prototype = {
+    // Set up the prototype chain
+    __proto__: PrefInputElement.prototype,
+
+    /**
+     * Initialization function for the cr.ui framework.
+     */
+    decorate: function() {
+      PrefInputElement.prototype.decorate.call(this);
+      this.type = 'number';
+    },
+
+    /**
+     * Update the associated pref when when the user inputs a number.
+     * @private
+     */
+    updatePrefFromState_: function() {
+      if (this.validity.valid) {
+        Preferences.setIntegerPref(this.pref, this.value,
+                                   !this.dialogPref, this.metric);
+      }
+    },
+  };
+
+  /////////////////////////////////////////////////////////////////////////////
   // PrefRadio class:
 
   //Define a constructor that uses an input element as its underlying element.
   var PrefRadio = cr.ui.define('input');
 
   PrefRadio.prototype = {
     // Set up the prototype chain
-    __proto__: HTMLInputElement.prototype,
-
-    // Stores the initialized value of the preference used to reset the input
-    // in resetPrefState().
-    storedValue_: null,
+    __proto__: PrefInputElement.prototype,
 
     /**
      * Initialization function for the cr.ui framework.
      */
     decorate: function() {
+      PrefInputElement.prototype.decorate.call(this);
       this.type = 'radio';
-      var self = this;
-
-      // Listen to pref changes.
-      Preferences.getInstance().addEventListener(this.pref, function(event) {
-        self.checked = String(event.value.value) == self.value;
-        updateElementState_(self, event);
-      });
-
-      // Listen to user events.
-      this.addEventListener('change', this.updatePreferenceValue_.bind(this));
     },
 
     /**
-     * Handler that updates the associated pref when the user changes the input
-     * element's value.
-     * @param {Event} event Change event.
+     * Update the associated pref when when the user selects the radio button.
      * @private
      */
-    updatePreferenceValue_: function(event) {
-      if (this.customChangeHandler(event))
-        return;
-
+    updatePrefFromState_: function() {
       if (this.value == 'true' || this.value == 'false') {
-        var value = String(this.value);
-        Preferences.setBooleanPref(this.pref, value == String(this.checked),
+        Preferences.setBooleanPref(this.pref,
+                                   this.value == String(this.checked),
                                    !this.dialogPref, this.metric);
       } else {
-        Preferences.setIntegerPref(this.pref, parseInt(this.value, 10),
+        Preferences.setIntegerPref(this.pref, this.value,
                                    !this.dialogPref, this.metric);
       }
     },
 
     /**
-     * See |updateDisabledState_| above.
+     * Update the radio button state when the associated pref changes.
+     * @param {Event} event Pref change event.
+     * @private
      */
-    setDisabled: function(reason, disabled) {
-      updateDisabledState_(this, reason, disabled);
-    },
-
-    /**
-     * Handler that is called when the user changes the input element's value.
-     * If it returns false, the default handler is executed next, updating the
-     * associated pref to its new value. If it returns true, the default handler
-     * is skipped (i.e., this works like stopPropagation or cancelBubble).
-     * @param {Event} event Change event.
-     */
-    customChangeHandler: function(event) {
-      return false;
+    updateStateFromPref_: function(event) {
+      this.checked = this.value == String(event.value.value);
     },
   };
 
-  /**
-   * The preference name.
-   * @type {string}
-   */
-  cr.defineProperty(PrefRadio, 'pref', cr.PropertyKind.ATTR);
-
-  /**
-   * A special preference type specific to dialogs. Changes take effect in the
-   * settings UI immediately but are only actually committed when the user
-   * confirms the dialog. If the user cancels the dialog instead, the changes
-   * are rolled back in the settings UI and never committed.
-   * @type {boolean}
-   */
-  cr.defineProperty(PrefRadio, 'dialogPref', cr.PropertyKind.BOOL_ATTR);
-
-  /**
-   * Whether the preference is controlled by something else than the user's
-   * settings (either 'policy' or 'extension').
-   * @type {string}
-   */
-  cr.defineProperty(PrefRadio, 'controlledBy', cr.PropertyKind.ATTR);
-
-  /**
-   * The user metric string.
-   * @type {string}
-   */
-  cr.defineProperty(PrefRadio, 'metric', cr.PropertyKind.ATTR);
-
-  /////////////////////////////////////////////////////////////////////////////
-  // PrefNumeric class:
-
-  // Define a constructor that uses an input element as its underlying element.
-  var PrefNumeric = function() {};
-  PrefNumeric.prototype = {
-    // Set up the prototype chain
-    __proto__: HTMLInputElement.prototype,
-
-    /**
-     * Initialization function for the cr.ui framework.
-     */
-    decorate: function() {
-      var self = this;
-
-      // Listen to pref changes.
-      Preferences.getInstance().addEventListener(this.pref, function(event) {
-        self.value = event.value.value;
-        updateElementState_(self, event);
-      });
-
-      // Listen to user events.
-      this.addEventListener('change', function(event) {
-        if (self.validity.valid) {
-          Preferences.setIntegerPref(self.pref, self.value,
-                                     !self.dialogPref, self.metric);
-        }
-      });
-    },
-
-    /**
-     * See |updateDisabledState_| above.
-     */
-    setDisabled: function(reason, disabled) {
-      updateDisabledState_(this, reason, disabled);
-    },
-  };
-
-  /**
-   * The preference name.
-   * @type {string}
-   */
-  cr.defineProperty(PrefNumeric, 'pref', cr.PropertyKind.ATTR);
-
-  /**
-   * A special preference type specific to dialogs. Changes take effect in the
-   * settings UI immediately but are only actually committed when the user
-   * confirms the dialog. If the user cancels the dialog instead, the changes
-   * are rolled back in the settings UI and never committed.
-   * @type {boolean}
-   */
-  cr.defineProperty(PrefRadio, 'dialogPref', cr.PropertyKind.BOOL_ATTR);
-
-  /**
-   * Whether the preference is controlled by something else than the user's
-   * settings (either 'policy' or 'extension').
-   * @type {string}
-   */
-  cr.defineProperty(PrefNumeric, 'controlledBy', cr.PropertyKind.ATTR);
-
-  /**
-   * The user metric string.
-   * @type {string}
-   */
-  cr.defineProperty(PrefNumeric, 'metric', cr.PropertyKind.ATTR);
-
-  /////////////////////////////////////////////////////////////////////////////
-  // PrefNumber class:
-
-  // Define a constructor that uses an input element as its underlying element.
-  var PrefNumber = cr.ui.define('input');
-
-  PrefNumber.prototype = {
-    // Set up the prototype chain
-    __proto__: PrefNumeric.prototype,
-
-    /**
-     * Initialization function for the cr.ui framework.
-     */
-    decorate: function() {
-      this.type = 'number';
-      PrefNumeric.prototype.decorate.call(this);
-      var self = this;
-
-      // Listen to user events.
-      this.addEventListener('input',
-          function(e) {
-            if (self.validity.valid) {
-              Preferences.setIntegerPref(self.pref, self.value,
-                                         !self.dialogPref, self.metric);
-            }
-          });
-    },
-
-    /**
-     * See |updateDisabledState_| above.
-     */
-    setDisabled: function(reason, disabled) {
-      updateDisabledState_(this, reason, disabled);
-    },
-  };
-
   /////////////////////////////////////////////////////////////////////////////
   // PrefRange class:
 
   // Define a constructor that uses an input element as its underlying element.
   var PrefRange = cr.ui.define('input');
 
   PrefRange.prototype = {
     // Set up the prototype chain
-    __proto__: HTMLInputElement.prototype,
+    __proto__: PrefInputElement.prototype,
 
     /**
-     * The map from input range value to the corresponding preference value.
+     * The map from slider position to corresponding pref value.
      */
     valueMap: undefined,
 
     /**
      * Initialization function for the cr.ui framework.
      */
     decorate: function() {
+      PrefInputElement.prototype.decorate.call(this);
       this.type = 'range';
 
-      // Update the UI when the pref changes.
-      Preferences.getInstance().addEventListener(
-          this.pref, this.onPrefChange_.bind(this));
-
-      // Listen to user events.
+      // Listen for user events.
       // TODO(jhawkins): Add onmousewheel handling once the associated WK bug is
       // fixed.
       // https://bugs.webkit.org/show_bug.cgi?id=52256
-      this.addEventListener('keyup', this.updatePreferenceValue_.bind(this));
-      this.addEventListener('mouseup', this.updatePreferenceValue_.bind(this));
+      this.addEventListener('keyup', this.handleRelease_.bind(this));
+      this.addEventListener('mouseup', this.handleRelease_.bind(this));
     },
 
     /**
-     * Event listener that updates the input element when the associated pref
-     * changes.
-     * @param {Event} event The event that details the pref change.
+     * Update the associated pref when when the user releases the slider.
      * @private
      */
-    onPrefChange_: function(event) {
+    updatePrefFromState_: function() {
+      Preferences.setIntegerPref(this.pref, this.mapPositionToPref(this.value),
+                                 !this.dialogPref, this.metric);
+    },
+
+    /**
+     * Ignore changes to the slider position made by the user while the slider
+     * has not been released.
+     * @private
+     */
+    handleChange_: function() {
+    },
+
+    /**
+     * Handle changes to the slider position made by the user when the slider is
+     * released. If a custom change handler does not suppress it, a default
+     * handler is invoked that updates the associated pref.
+     * @param {Event} event Change event.
+     * @private
+     */
+    handleRelease_: function(event) {
+      if (!this.customChangeHandler(event))
+        this.updatePrefFromState_();
+    },
+
+    /**
+     * Update the slider position when the associated pref changes.
+     * @param {Event} event Pref change event.
+     * @private
+     */
+    updateStateFromPref_: function(event) {
       var value = event.value.value;
       this.value = this.valueMap ? this.valueMap.indexOf(value) : value;
     },
 
     /**
-     * Handler that updates the associated pref when the user changes the input
-     * element's value.
-     * This handler is called when the user completes the change by releasing
-     * the slider.
-     * @param {Event} event Change event.
-     * @private
+     * Map slider position to the range of values provided by the client,
+     * represented by |valueMap|.
+     * @param {number} position The slider position to map.
      */
-    updatePreferenceValue_: function(event) {
-      if (this.customChangeHandler(event))
-        return;
-
-      Preferences.setIntegerPref(this.pref, this.mapValueToRange(this.value),
-                                 !this.dialogPref, this.metric);
-    },
-
-    /**
-     * Maps the value of this element into the range provided by the client,
-     * represented by |valueMap|.
-     * @param {number} value The value to map.
-     */
-    mapValueToRange: function(value) {
-      return this.valueMap ? this.valueMap[value] : value;
-    },
-
-    /**
-     * See |updateDisabledState_| above.
-     */
-    setDisabled: function(reason, disabled) {
-      updateDisabledState_(this, reason, disabled);
-    },
-
-    /**
-     * Handler that is called when the user changes the input element's value.
-     * If it returns false, the default handler is executed next, updating the
-     * associated pref to its new value. If it returns true, the default handler
-     * is skipped (i.e., this works like stopPropagation or cancelBubble).
-     * This handler is called when the user completes the change by releasing
-     * the slider.
-     * @param {Event} event Change event.
-     */
-    customChangeHandler: function(event) {
-      return false;
+    mapPositionToPref: function(position) {
+      return this.valueMap ? this.valueMap[position] : position;
     },
   };
 
-  /**
-   * The preference name.
-   * @type {string}
-   */
-  cr.defineProperty(PrefRange, 'pref', cr.PropertyKind.ATTR);
-
-  /**
-   * A special preference type specific to dialogs. Changes take effect in the
-   * settings UI immediately but are only actually committed when the user
-   * confirms the dialog. If the user cancels the dialog instead, the changes
-   * are rolled back in the settings UI and never committed.
-   * @type {boolean}
-   */
-  cr.defineProperty(PrefRadio, 'dialogPref', cr.PropertyKind.BOOL_ATTR);
-
-  /**
-   * Whether the preference is controlled by something else than the user's
-   * settings (either 'policy' or 'extension').
-   * @type {string}
-   */
-  cr.defineProperty(PrefRange, 'controlledBy', cr.PropertyKind.ATTR);
-
-  /**
-   * The user metric string.
-   * @type {string}
-   */
-  cr.defineProperty(PrefRange, 'metric', cr.PropertyKind.ATTR);
-
   /////////////////////////////////////////////////////////////////////////////
   // PrefSelect class:
 
   // Define a constructor that uses a select element as its underlying element.
   var PrefSelect = cr.ui.define('select');
 
   PrefSelect.prototype = {
     // Set up the prototype chain
-    __proto__: HTMLSelectElement.prototype,
+    __proto__: PrefInputElement.prototype,
 
     /**
-    * Initialization function for the cr.ui framework.
-    */
-    decorate: function() {
-      // Listen to pref changes.
-      Preferences.getInstance().addEventListener(
-          this.pref, this.onPrefChange_.bind(this));
-
-      // Listen to user events.
-      this.addEventListener('change', this.updatePreferenceValue_.bind(this));
+     * Update the associated pref when when the user selects an item.
+     * @private
+     */
+    updatePrefFromState_: function() {
+      var value = this.options[this.selectedIndex].value;
+      switch (this.dataType) {
+        case 'number':
+          Preferences.setIntegerPref(this.pref, value,
+                                     !this.dialogPref, this.metric);
+          break;
+        case 'double':
+          Preferences.setDoublePref(this.pref, value,
+                                    !this.dialogPref, this.metric);
+          break;
+        case 'boolean':
+          Preferences.setBooleanPref(this.pref, value == 'true',
+                                     !this.dialogPref, this.metric);
+          break;
+        case 'string':
+          Preferences.setStringPref(this.pref, value,
+                                    !this.dialogPref, this.metric);
+          break;
+        default:
+          console.error('Unknown data type for <select> UI element: ' +
+                        this.dataType);
+      }
     },
 
     /**
-     * Event listener that updates the input element when the associated pref
-     * changes.
-     * @param {Event} event The event that details the pref change.
+     * Update the selected item when the associated pref changes.
+     * @param {Event} event Pref change event.
      * @private
      */
-    onPrefChange_: function(event) {
-      // Make sure |value| is a string, because the value is stored as a string
-      // in the HTMLOptionElement.
-      var value = event.value.value.toString();
-
-      updateElementState_(this, event);
+    updateStateFromPref_: function(event) {
+      // Make sure the value is a string, because the value is stored as a
+      // string in the HTMLOptionElement.
+      value = String(event.value.value);
 
       var found = false;
       for (var i = 0; i < this.options.length; i++) {
         if (this.options[i].value == value) {
           this.selectedIndex = i;
           found = true;
         }
       }
 
       // Item not found, select first item.
       if (!found)
         this.selectedIndex = 0;
 
+      // The "onchange" event automatically fires when the user makes a manual
+      // change. It should never be fired for a programmatic change. However,
+      // these two lines were here already and it is hard to tell who may be
+      // relying on them.
       if (this.onchange)
         this.onchange(event);
     },
-
-    /**
-     * Handler that updates the associated pref when the user changes the input
-     * element's value.
-     * @param {Event} event Change event.
-     * @private
-     */
-    updatePreferenceValue_: function(event) {
-      if (!this.dataType) {
-        console.error('undefined data type for <select> pref');
-        return;
-      }
-
-      var prefValue = this.options[this.selectedIndex].value;
-      switch (this.dataType) {
-        case 'number':
-          Preferences.setIntegerPref(this.pref, prefValue,
-                                     !this.dialogPref, this.metric);
-          break;
-        case 'double':
-          Preferences.setDoublePref(this.pref, prefValue,
-                                    !this.dialogPref, this.metric);
-          break;
-        case 'boolean':
-          var value = (prefValue == 'true');
-          Preferences.setBooleanPref(this.pref, value,
-                                     !this.dialogPref, this.metric);
-          break;
-        case 'string':
-          Preferences.setStringPref(this.pref, prefValue,
-                                    !this.dialogPref, this.metric);
-          break;
-        default:
-          console.error('unknown data type for <select> pref: ' +
-                        this.dataType);
-      }
-    },
-
-    /**
-     * See |updateDisabledState_| above.
-     */
-    setDisabled: function(reason, disabled) {
-      updateDisabledState_(this, reason, disabled);
-    },
   };
 
-  /**
-   * The preference name.
-   * @type {string}
-   */
-  cr.defineProperty(PrefSelect, 'pref', cr.PropertyKind.ATTR);
-
-  /**
-   * Whether the preference is controlled by something else than the user's
-   * settings (either 'policy' or 'extension').
-   * @type {string}
-   */
-  cr.defineProperty(PrefSelect, 'controlledBy', cr.PropertyKind.ATTR);
-
-  /**
-   * A special preference type specific to dialogs. Changes take effect in the
-   * settings UI immediately but are only actually committed when the user
-   * confirms the dialog. If the user cancels the dialog instead, the changes
-   * are rolled back in the settings UI and never committed.
-   * @type {boolean}
-   */
-  cr.defineProperty(PrefSelect, 'dialogPref', cr.PropertyKind.BOOL_ATTR);
-
-  /**
-   * The user metric string.
-   * @type {string}
-   */
-  cr.defineProperty(PrefSelect, 'metric', cr.PropertyKind.ATTR);
-
-  /**
-   * The data type for the preference options.
-   * @type {string}
-   */
-  cr.defineProperty(PrefSelect, 'dataType', cr.PropertyKind.ATTR);
-
   /////////////////////////////////////////////////////////////////////////////
   // PrefTextField class:
 
   // Define a constructor that uses an input element as its underlying element.
   var PrefTextField = cr.ui.define('input');
 
   PrefTextField.prototype = {
     // Set up the prototype chain
-    __proto__: HTMLInputElement.prototype,
+    __proto__: PrefInputElement.prototype,
 
     /**
      * Initialization function for the cr.ui framework.
      */
     decorate: function() {
+      PrefInputElement.prototype.decorate.call(this);
       var self = this;
 
-      // Listen to pref changes.
-      Preferences.getInstance().addEventListener(this.pref, function(event) {
-        self.value = event.value.value;
-        updateElementState_(self, event);
-      });
-
-      // Listen to user events.
-      this.addEventListener('change', this.updatePreferenceValue_.bind(this));
-
-      window.addEventListener('unload', function(event) {
+      // Listen for user events.
+      window.addEventListener('unload', function() {
         if (document.activeElement == self)
           self.blur();
       });
     },
 
     /**
-     * Handler that updates the associated pref when the user changes the input
-     * element's value.
-     * @param {Event} event Change event.
+     * Update the associated pref when when the user inputs text.
      * @private
      */
-    updatePreferenceValue_: function(event) {
+    updatePrefFromState_: function(event) {
       switch (this.dataType) {
         case 'number':
           Preferences.setIntegerPref(this.pref, this.value,
                                      !this.dialogPref, this.metric);
           break;
         case 'double':
           Preferences.setDoublePref(this.pref, this.value,
                                     !this.dialogPref, this.metric);
           break;
         case 'url':
           Preferences.setURLPref(this.pref, this.value,
                                  !this.dialogPref, this.metric);
           break;
         default:
           Preferences.setStringPref(this.pref, this.value,
                                     !this.dialogPref, this.metric);
           break;
       }
     },
-
-    /**
-     * See |updateDisabledState_| above.
-     */
-    setDisabled: function(reason, disabled) {
-      updateDisabledState_(this, reason, disabled);
-    },
   };
 
-  /**
-   * The preference name.
-   * @type {string}
-   */
-  cr.defineProperty(PrefTextField, 'pref', cr.PropertyKind.ATTR);
-
-  /**
-   * A special preference type specific to dialogs. Changes take effect in the
-   * settings UI immediately but are only actually committed when the user
-   * confirms the dialog. If the user cancels the dialog instead, the changes
-   * are rolled back in the settings UI and never committed.
-   * @type {boolean}
-   */
-  cr.defineProperty(PrefTextField, 'dialogPref', cr.PropertyKind.BOOL_ATTR);
-
-  /**
-   * Whether the preference is controlled by something else than the user's
-   * settings (either 'policy' or 'extension').
-   * @type {string}
-   */
-  cr.defineProperty(PrefTextField, 'controlledBy', cr.PropertyKind.ATTR);
-
-  /**
-   * The user metric string.
-   * @type {string}
-   */
-  cr.defineProperty(PrefTextField, 'metric', cr.PropertyKind.ATTR);
-
-  /**
-   * The data type for the preference options.
-   * @type {string}
-   */
-  cr.defineProperty(PrefTextField, 'dataType', cr.PropertyKind.ATTR);
-
   /////////////////////////////////////////////////////////////////////////////
   // PrefButton class:
 
   // Define a constructor that uses a button element as its underlying element.
   var PrefButton = cr.ui.define('button');
 
   PrefButton.prototype = {
     // Set up the prototype chain
     __proto__: HTMLButtonElement.prototype,
 
     /**
-    * Initialization function for the cr.ui framework.
-    */
+     * Initialization function for the cr.ui framework.
+     */
     decorate: function() {
       var self = this;
 
-      // Listen to pref changes. This element behaves like a normal button and
-      // doesn't affect the underlying preference; it just becomes disabled
-      // when the preference is managed, and its value is false.
-      // This is useful for buttons that should be disabled when the underlying
-      // boolean preference is set to false by a policy or extension.
+      // Listen for pref changes.
+      // This element behaves like a normal button and does not affect the
+      // underlying preference; it just becomes disabled when the preference is
+      // managed, and its value is false. This is useful for buttons that should
+      // be disabled when the underlying Boolean preference is set to false by a
+      // policy or extension.
       Preferences.getInstance().addEventListener(this.pref, function(event) {
-        var e = {
-          value: {
-            'disabled': event.value.disabled && !event.value.value,
-            'controlledBy': event.value.controlledBy
-          }
-        };
-        updateElementState_(self, e);
+        updateDisabledState_(self, 'notUserModifiable',
+                             event.value.disabled && !event.value.value);
+        self.controlledBy = event.value.controlledBy;
+        OptionsPage.updateManagedBannerVisibility();
       });
     },
 
     /**
      * See |updateDisabledState_| above.
      */
     setDisabled: function(reason, disabled) {
       updateDisabledState_(this, reason, disabled);
     },
   };
 
   /**
-   * The preference name.
+   * The name of the associated preference.
    * @type {string}
    */
   cr.defineProperty(PrefButton, 'pref', cr.PropertyKind.ATTR);
 
   /**
-   * Whether the preference is controlled by something else than the user's
-   * settings (either 'policy' or 'extension').
+   * Whether the associated preference is controlled by a source other than the
+   * user's setting (can be 'policy', 'extension' or 'recommended').
    * @type {string}
    */
   cr.defineProperty(PrefButton, 'controlledBy', cr.PropertyKind.ATTR);
 
   // Export
   return {
     PrefCheckbox: PrefCheckbox,
     PrefNumber: PrefNumber,
-    PrefNumeric: PrefNumeric,
     PrefRadio: PrefRadio,
     PrefRange: PrefRange,
     PrefSelect: PrefSelect,
     PrefTextField: PrefTextField,
     PrefButton: PrefButton
   };
 
 });