[MD settings] change dropdown to accept array of objects rather than array of tuples

This is an optional CL.  There was a question from Micael about using named keys
for the menu options rather than an array index.  This CL shows what that would
look like.

Performance side-effect: inconsequential (measured by hand).

BUG=531786

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

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

chrome/browser/resources/settings/appearance_page/appearance_fonts_page.js

@@ -185,11 +185,20 @@ Polymer({
    * @private
    */
   setFontsData_: function(fontList, encodingList) {
-    this.$.standardFont.menuOptions = fontList;
-    this.$.serifFont.menuOptions = fontList;
-    this.$.sansSerifFont.menuOptions = fontList;
-    this.$.fixedFont.menuOptions = fontList;
-    this.$.encoding.menuOptions = encodingList;
+    var fontMenuOptions = [];
+    for (var i = 0; i < fontList.length; ++i)
+      fontMenuOptions.push({value: fontList[i][0], name: fontList[i][1]});
+    this.$.standardFont.menuOptions = fontMenuOptions;
+    this.$.serifFont.menuOptions = fontMenuOptions;
+    this.$.sansSerifFont.menuOptions = fontMenuOptions;
+    this.$.fixedFont.menuOptions = fontMenuOptions;
+
+    var encodingMenuOptions = [];
+    for (var i = 0; i < encodingList.length; ++i) {
+      encodingMenuOptions.push({
+          value: encodingList[i][0], name: encodingList[i][1]});
+    }
+    this.$.encoding.menuOptions = encodingMenuOptions;
   },
 
   /**

chrome/browser/resources/settings/appearance_page/appearance_page.html

@@ -5,6 +5,7 @@
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-radio-button/paper-radio-button.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-toggle-button/paper-toggle-button.html">
+<link rel="import" href="chrome://md-settings/controls/settings_dropdown_menu.html">
 <link rel="import" href="chrome://md-settings/controls/settings_input.html">
 <link rel="import" href="chrome://md-settings/controls/settings_radio_group.html">
 <link rel="import" href="chrome://md-settings/settings_page/settings_animated_pages.html">
@@ -85,7 +86,7 @@
         <div class="settings-box split">
           <div class="start" i18n-content="pageZoom"></div>
           <settings-dropdown-menu id="pageZoom"
-              pref="{{prefs.partition.default_zoom_level}}"
+              pref="{{defaultZoomLevel_}}"
               menu-options="[[pageZoomOptions_]]">
           </settings-dropdown-menu>
         </div>

chrome/browser/resources/settings/appearance_page/appearance_page.js

@@ -29,6 +29,14 @@ Polymer({
       type: Object,
     },
 
+    /**
+     * Preferences state.
+     */
+    prefs: {
+      type: Object,
+      notify: true,
+    },
+
     /**
      * @private
      */
@@ -38,33 +46,79 @@ Polymer({
       value: false,
     },
 
+    /**
+     * @private
+     */
+    defaultZoomLevel_: {
+      notify: true,
+      type: Object,
+      value: function() {
+        return {
+          type: chrome.settingsPrivate.PrefType.NUMBER,
+        };
+      },
+    },
+
     /**
      * List of options for the font size drop-down menu.
-     * The order of entries in this array matches the
-     * prefs.browser.clear_data.time_period.value enum.
-     * @private {!Array<!Array<{0: number, 1: string}>>}
+     * @type {!DropdownMenuOptionList}
      */
     fontSizeOptions_: {
       readOnly: true,
       type: Array,
       value: function() {
         return [
-          [9, loadTimeData.getString('verySmall')],
-          [12, loadTimeData.getString('small')],
-          [16, loadTimeData.getString('medium')],
-          [20, loadTimeData.getString('large')],
-          [24, loadTimeData.getString('veryLarge')],
+          {value: 9, name: loadTimeData.getString('verySmall')},
+          {value: 12, name: loadTimeData.getString('small')},
+          {value: 16, name: loadTimeData.getString('medium')},
+          {value: 20, name: loadTimeData.getString('large')},
+          {value: 24, name: loadTimeData.getString('veryLarge')},
         ];
       },
     },
+
+    /**
+     * List of options for the page zoom drop-down menu.
+     * @type {!DropdownMenuOptionList}
+     */
+    pageZoomOptions_: {
+      readOnly: true,
+      type: Array,
+      value: [
+        {value: 25, name: '25%'},
+        {value: 33, name: '33%'},
+        {value: 50, name: '50%'},
+        {value: 67, name: '67%'},
+        {value: 75, name: '75%'},
+        {value: 90, name: '90%'},
+        {value: 100, name: '100%'},
+        {value: 110, name: '110%'},
+        {value: 125, name: '125%'},
+        {value: 150, name: '150%'},
+        {value: 175, name: '175%'},
+        {value: 200, name: '200%'},
+        {value: 300, name: '300%'},
+        {value: 400, name: '400%'},
+        {value: 500, name: '500%'},
+      ],
+    },
   },
 
   behaviors: [
     I18nBehavior,
   ],
 
+  observers: [
+    'zoomLevelChanged_(defaultZoomLevel_.value)',
+  ],
+
   ready: function() {
     this.$.defaultFontSize.menuOptions = this.fontSizeOptions_;
+    this.$.pageZoom.menuOptions = this.pageZoomOptions_;
+    // TODO(dschuyler): Look into adding a listener for the
+    // default zoom percent.
+    chrome.settingsPrivate.getDefaultZoomPercent(
+        this.zoomPrefChanged_.bind(this));
   },
 
   /** @override */
@@ -104,4 +158,23 @@ Polymer({
   showFontsPage_: function() {
     return this.currentRoute.subpage[0] == 'appearance-fonts';
   },
+
+  /**
+   * @param {number} percent The integer percentage of the page zoom.
+   * @private
+   */
+  zoomPrefChanged_: function(percent) {
+    this.set('defaultZoomLevel_.value', percent);
+  },
+
+  /**
+   * @param {number} percent The integer percentage of the page zoom.
+   * @private
+   */
+  zoomLevelChanged_: function(percent) {
+    // The |percent| may be undefined on startup.
+    if (percent === undefined)
+      return;
+    chrome.settingsPrivate.setDefaultZoomPercent(percent);
+  },
 });

chrome/browser/resources/settings/appearance_page/compiled_resources.gyp

@@ -20,6 +20,8 @@
           '../../../../../third_party/polymer/v1_0/components-chromium/paper-behaviors/paper-ripple-behavior-extracted.js',
           '../../../../../third_party/polymer/v1_0/components-chromium/paper-ripple/paper-ripple-extracted.js',
           '../../../../../third_party/polymer/v1_0/components-chromium/paper-slider/paper-slider-extracted.js',
+          '../controls/settings_dropdown_menu.js',
+          '../prefs/pref_util.js'
         ],
         'externs': [
           '../../../../../third_party/closure_compiler/externs/settings_private.js'
@@ -35,6 +37,8 @@
           '../../../../../ui/webui/resources/js/compiled_resources.gyp:load_time_data',
           '../../../../../ui/webui/resources/js/cr.js',
           '../../../../../ui/webui/resources/js/i18n_behavior.js',
+          '../controls/settings_dropdown_menu.js',
+          '../prefs/pref_util.js',
           '../settings_page/settings_animated_pages.js'
         ],
         'externs': [

chrome/browser/resources/settings/clear_browsing_data_page/clear_browsing_data_page.html

@@ -15,7 +15,7 @@
       <span i18n-content="clearFollowingItemsFrom"></span>
       <settings-dropdown-menu id="clearFrom"
           pref="{{prefs.browser.clear_data.time_period}}"
-          menu-options="[[clearFromOptions_]]" disabled>
+          menu-options="[[clearFromOptions_]]">
       </settings-dropdown-menu>
       <settings-checkbox id="browsingCheckbox"
           pref="{{prefs.browser.clear_data.browsing_history}}"

chrome/browser/resources/settings/clear_browsing_data_page/clear_browsing_data_page.js

@@ -40,19 +40,17 @@ Polymer({
 
     /**
      * List of options for the dropdown menu.
-     * The order of entries in this array matches the
-     * prefs.browser.clear_data.time_period.value enum.
-     * @private {!Array<!Array<number, string>>}
+     * @private {!DropdownMenuOptionList>}
      */
     clearFromOptions_: {
       readOnly: true,
       type: Array,
       value: [
-        [0, loadTimeData.getString('clearDataHour')],
-        [1, loadTimeData.getString('clearDataDay')],
-        [2, loadTimeData.getString('clearDataWeek')],
-        [3, loadTimeData.getString('clearData4Weeks')],
-        [4, loadTimeData.getString('clearDataEverything')],
+        {value: 0, name: loadTimeData.getString('clearDataHour')},
+        {value: 1, name: loadTimeData.getString('clearDataDay')},
+        {value: 2, name: loadTimeData.getString('clearDataWeek')},
+        {value: 3, name: loadTimeData.getString('clearData4Weeks')},
+        {value: 4, name: loadTimeData.getString('clearDataEverything')},
       ],
     },
   },

chrome/browser/resources/settings/controls/compiled_resources.gyp

@@ -7,10 +7,10 @@
       'target_name': 'settings_checkbox',
       'variables': {
         'depends': [
-          '../../../../../ui/webui/resources/js/compiled_resources.gyp:assert',
-          '../../../../../ui/webui/resources/js/compiled_resources.gyp:load_time_data',
           '../../../../../ui/webui/resources/cr_elements/policy/cr_policy_indicator_behavior.js',
           '../../../../../ui/webui/resources/cr_elements/policy/cr_policy_pref_behavior.js',
+          '../../../../../ui/webui/resources/js/compiled_resources.gyp:assert',
+          '../../../../../ui/webui/resources/js/compiled_resources.gyp:load_time_data',
         ],
         'externs': [
           '../../../../../third_party/closure_compiler/externs/settings_private.js'
@@ -38,10 +38,10 @@
       'target_name': 'settings_input',
       'variables': {
         'depends': [
-          '../../../../../ui/webui/resources/js/compiled_resources.gyp:assert',
-          '../../../../../ui/webui/resources/js/compiled_resources.gyp:load_time_data',
           '../../../../../ui/webui/resources/cr_elements/policy/cr_policy_indicator_behavior.js',
           '../../../../../ui/webui/resources/cr_elements/policy/cr_policy_pref_behavior.js',
+          '../../../../../ui/webui/resources/js/compiled_resources.gyp:assert',
+          '../../../../../ui/webui/resources/js/compiled_resources.gyp:load_time_data',
         ],
         'externs': [
           '../../../../../third_party/closure_compiler/externs/settings_private.js'

chrome/browser/resources/settings/controls/settings_dropdown_menu.html

@@ -15,7 +15,7 @@
       <paper-menu class="dropdown-content" selected="{{selected_}}"
           attr-for-selected="data-value">
         <template is="dom-repeat" items="[[menuOptions]]">
-          <paper-item data-value$="[[item.0]]">[[item.1]]</paper-item>
+          <paper-item data-value$="[[item.value]]">[[item.name]]</paper-item>
         </template>
         <paper-item data-value$="[[notFoundValue_]]"
             hidden$="[[!isSelectedNotFound_(selected_)]]">

chrome/browser/resources/settings/controls/settings_dropdown_menu.js

@@ -2,14 +2,12 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
- /**
- * This tuple is made up of a (value, name, attribute). The value and name are
- * used by the dropdown menu. The attribute is optional 'user data' that is
- * ignored by the dropdown menu.
+/**
+ * The |name| is shown in the gui.  The |value| us use to set or compare with
+ * the preference value.
  * @typedef {{
- *   0: (number|string),
- *   1: string,
- *   2: (string|undefined)
+ *   name: string,
+ *   value: (number|string)
  * }}
  */
 var DropdownMenuOption;
@@ -40,7 +38,6 @@ Polymer({
 
     /**
      * List of options for the drop-down menu.
-     * TODO(michaelpg): use named properties instead of indices.
      * @type {DropdownMenuOptionList}
      */
     menuOptions: {
@@ -139,7 +136,7 @@ Polymer({
       return;
     var prefValue = this.pref.value;
     var option = this.menuOptions.find(function(menuItem) {
-      return menuItem[0] == prefValue;
+      return menuItem.value == prefValue;
     });
     if (option == undefined)
       this.selected_ = this.notFoundValue_;

chrome/test/data/webui/settings/dropdown_menu_tests.js

@@ -37,8 +37,10 @@ cr.define('settings_dropdown_menu', function() {
           type: chrome.settingsPrivate.PrefType.NUMBER,
           value: 100,
         };
-        dropdown.menuOptions = [[100, 'Option 100'], [200, 'Option 200'],
-                                [300, 'Option 300'], [400, 'Option 400']];
+        dropdown.menuOptions = [{value: 100, name: 'Option 100'},
+                                {value: 200, name: 'Option 200'},
+                                {value: 300, name: 'Option 300'},
+                                {value: 400, name: 'Option 400'}];
 
         // IronSelectable uses a DOM observer, which uses a debouncer.
         Polymer.dom.flush();
@@ -62,7 +64,10 @@ cr.define('settings_dropdown_menu', function() {
           value: 'c',
         };
         dropdown.menuOptions =
-            [['a', 'AAA'], ['b', 'BBB'], ['c', 'CCC'], ['d', 'DDD']];
+            [{value: 'a', name: 'AAA'},
+             {value: 'b', name: 'BBB'},
+             {value: 'c', name: 'CCC'},
+             {value: 'd', name: 'DDD'}];
         Polymer.dom.flush();
 
         // Initially selected item.
@@ -84,7 +89,10 @@ cr.define('settings_dropdown_menu', function() {
           value: 'f',
         };
         dropdown.menuOptions =
-            [['a', 'AAA'], ['b', 'BBB'], ['c', 'CCC'], ['d', 'DDD']];
+            [{value: 'a', name: 'AAA'},
+             {value: 'b', name: 'BBB'},
+             {value: 'c', name: 'CCC'},
+             {value: 'd', name: 'DDD'}];
         Polymer.dom.flush();
 
         // "Custom" initially selected.