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

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

Index: chrome/browser/resources/settings/appearance_page/appearance_page.js
diff --git a/chrome/browser/resources/settings/appearance_page/appearance_page.js b/chrome/browser/resources/settings/appearance_page/appearance_page.js
index 09a8aad321d529bf652ebfe29e5aec79b0fcb8ba..53e5957d90572d817fa99e17977b927c1f8a5c1e 100644
--- a/chrome/browser/resources/settings/appearance_page/appearance_page.js
+++ b/chrome/browser/resources/settings/appearance_page/appearance_page.js
@@ -30,6 +30,14 @@ Polymer({
     },
 
     /**
+     * Preferences state.
+     */
+    prefs: {
+      type: Object,
+      notify: true,
+    },
+
+    /**
      * @private
      */
     allowResetTheme_: {
@@ -39,32 +47,76 @@ Polymer({
     },
 
     /**
+     * @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_;
+    chrome.settingsPrivate.getDefaultZoomPercent(

[michaelpg, 2015/11/21 00:02:28]

hmm, won't we need a listener for changes to the default zoom percent in Chrome?
If that requires an API change, can you add a TODO here?

[dschuyler, 2015/11/21 01:34:41]

Done.

+        this.zoomPrefChanged_.bind(this));
   },
 
   /** @override */
@@ -99,4 +151,23 @@ Polymer({
   resetTheme_: function() {
     chrome.send('resetTheme');
   },
+
+  /**
+   * @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);
+  },
 });