DOMUI: Implement the new Fonts and Encoding page.

chrome/browser/resources/options/pref_ui.js

-// Copyright (c) 2010 The Chromium Authors. All rights reserved.
+// Copyright (c) 2011 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;
   /////////////////////////////////////////////////////////////////////////////
   // PrefCheckbox class:
   // TODO(jhawkins): Refactor all this copy-pasted code!
 
@@ skipping 228 matching lines @@
   };
 
   /////////////////////////////////////////////////////////////////////////////
   // 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__: PrefNumeric.prototype,
+    __proto__: HTMLInputElement.prototype,
+
+    /**
+     * The map from input range value to the corresponding preference value.
+     */
+    valueMap: undefined,
+
+    /**
+     * If true, the associated pref will be modified on each onchange event;
+     * otherwise, the pref will only be modified on the onmouseup event after
+     * the drag.
+     */
+    continuous: true,
 
     /**
      * Initialization function for the cr.ui framework.
      */
     decorate: function() {
       this.type = 'range';
-      PrefNumeric.prototype.decorate.call(this);
-      var self = this;
 
-      // Additionally change the indicator as well.
-      Preferences.getInstance().addEventListener(this.pref,
-          function(event) {
-            self.updateIndicator();
-          });
+      // Update the UI when the pref changes.
+      Preferences.getInstance().addEventListener(
+          this.pref, this.onPrefChange_.bind(this));
 
       // Listen to user events.
-      this.addEventListener('input',
-          function(e) {
-            this.updateIndicator();
-          });
+      // TODO(jhawkins): Add onmousewheel handling once the associated WK bug is
+      // fixed.

[arv (Not doing code reviews), 2011/01/12 00:26:45]

Link to https://bugs.webkit.org/show_bug.cgi?id=52256

[James Hawkins, 2011/01/12 00:40:07]

Done.

+      this.onchange = this.onChange_.bind(this);
+      this.onkeyup = this.onKeyUp_.bind(this);
+      this.onmouseup = this.onMouseUp_.bind(this);
     },
 
-    updateIndicator: function() {
-      if ($(this.id + '-value')) {
-        $(this.id + '-value').textContent = this.value;
-      }
-    }
+    /**
+     * Event listener that updates the UI when the underlying pref changes.
+     * @param {Event} event The event that details the pref change.
+     * @private
+     */
+    onPrefChange_: function(event) {
+      var value = event.value && event.value['value'] != undefined ?
+          event.value['value'] : event.value;
+      if (value != undefined)
+        this.value = this.valueMap ? this.valueMap.indexOf(value) : value;
+    },
+
+    /**
+     * onchange handler that sets the pref when the user changes the value of
+     * the input element.
+     * @private
+     */
+    onChange_: function(event) {
+      if (this.continuous)
+        this.setRangePref_();
+
+      this.notifyChange(this, this.mapValueToRange_(this.value));
+    },
+
+    /**
+     * Sets the integer value of |pref| to the value of this element.
+     * @private
+     */
+    setRangePref_: function() {
+      Preferences.setIntegerPref(
+          this.pref, this.mapValueToRange_(this.value), this.metric);
+    },
+
+    /**
+     * onkeyup handler that modifies the pref if |continuous| is false and the
+     * key being released is the left or right arrow.
+     * @private
+     */
+    onKeyUp_: function(event) {
+      // Left, right arrow keys.
+      if (!this.continuous && (event.keyCode == 37 || event.keyCode == 39))

[arv (Not doing code reviews), 2011/01/12 00:26:45]

Can you use keyIdentifier instead?

[arv (Not doing code reviews), 2011/01/12 00:26:45]

This caused me to file another WebKit bug:

https://bugs.webkit.org/show_bug.cgi?id=52262

The value of the slider should be changable in more ways than just left and
right.


Maybe we should just do this on any keyup if the value has changed?

[James Hawkins, 2011/01/12 00:40:07]

Per off-list discussion, changing this to set the pref on any keyup, no matter
the value.

+        this.setRangePref_();
+    },
+
+    /**
+     * onmouseup handler that modifies the pref if |continuous| is false.
+     * @private
+     */
+    onMouseUp_: function() {
+      if (!this.continuous)
+        this.setRangePref_();
+    },
+
+    /**
+     * Maps the value of this element into the range provided by the client,
+     * represented by |valueMap|.
+     * @param {number} value The value to map.
+     * @private
+     */
+    mapValueToRange_: function(value) {
+      return this.valueMap ? this.valueMap[value] : value;
+    },
+
+    /**
+     * Called when the client has specified non-continuous mode and the value of
+     * the range control changes.
+     * @param {Element} el This element.
+     * @param {number} value The value of this element.
+     */
+    notifyChange: function(el, value) {
+    },
   };
 
+  /**
+   * The preference name.
+   * @type {string}
+   */
+  cr.defineProperty(PrefRange, 'pref', cr.PropertyKind.ATTR);
+
+  /**
+   * The user metric string.
+   * @type {string}
+   */
+  cr.defineProperty(PrefRange, 'metric', cr.PropertyKind.ATTR);
+
   /////////////////////////////////////////////////////////////////////////////
   // PrefSelect class:
 
   // Define a constructor that uses an select element as its underlying element.
   var PrefSelect = cr.ui.define('select');
 
   PrefSelect.prototype = {
     // Set up the prototype chain
     __proto__: HTMLSelectElement.prototype,
 
@@ skipping 45 matching lines @@
               case 'number':
                 Preferences.setIntegerPref(self.pref,
                     self.options[self.selectedIndex].value, self.metric);
                 break;
               case 'boolean':
                 var option = self.options[self.selectedIndex];
                 var value = (option.value == 'true') ? true : false;
                 Preferences.setBooleanPref(self.pref, value, self.metric);
                 break;
               case 'string':
+              case undefined:  // Assume the pref is a string.
                 Preferences.setStringPref(self.pref,
                     self.options[self.selectedIndex].value, self.metric);
                 break;
             }
           });
     },
   };
 
   /**
    * The preference name.
@@ skipping 69 matching lines @@
     PrefCheckbox: PrefCheckbox,
     PrefNumber: PrefNumber,
     PrefNumeric: PrefNumeric,
     PrefRadio: PrefRadio,
     PrefRange: PrefRange,
     PrefSelect: PrefSelect,
     PrefTextField: PrefTextField
   };
 
 });