[MD settings] adding font settings files

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

Index: chrome/browser/resources/settings/appearance_page/appearance_font_menu.js
diff --git a/chrome/browser/resources/settings/appearance_page/appearance_font_menu.js b/chrome/browser/resources/settings/appearance_page/appearance_font_menu.js
new file mode 100644
index 0000000000000000000000000000000000000000..23b8784a6248e431bf3f8ce6a0129c7cc1dd5a64
--- /dev/null
+++ b/chrome/browser/resources/settings/appearance_page/appearance_font_menu.js
@@ -0,0 +1,175 @@
+// Copyright 2015 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.
+
+/**
+ * 'settings-appearance-font-menu' is a control for displaying font options
+ * in the appearance settings.
+ *
+ * Example:
+ *
+ *   <settings-appearance-font-menu pref="{{prefs.foo}}">
+ *   </settings-appearance-font-menu>
+ *
+ * @group Chrome Settings Elements
+ * @element settings-appearance-font-menu
+ */
+Polymer({
+  is: 'settings-appearance-font-menu',
+
+  properties: {
+    /**
+     * A text label for the dropdown menu.
+     */
+    label: {
+      type: String,
+    },
+
+    /**
+     * Either loading text or the label for the dropdown menu.
+     * @private
+     */
+    menuLabel_: {

[stevenjb, 2015/10/28 00:17:16]

nit: private properties after public ones

[dschuyler, 2015/10/28 22:22:21]

Done.

+      type: String,
+      value: function() { return loadTimeData.getString('loading'); },
+    },
+
+     /**
+     * A reverse lookup from the menu value back to the index in the
+     * menuOptions array.
+     * @private {!Object<string, string>}
+     */
+    menuMap_: {
+      type: Object,
+      value: function() { return {}; },
+    },
+
+    /**
+     * List of options for the dropdown menu.
+     * @type {!Array<{0: (Object|number|string), 1: string,
+     *   2: (string|undefined)}>}
+     */
+    menuOptions: {
+      notify: true,
+      type: Array,
+      value: function() { return []; },
+    },
+
+    /**
+     * Preferences state.

[stevenjb, 2015/10/28 00:17:16]

This is just a single pref right? Also, can we typedef it?

[dschuyler, 2015/10/28 22:22:21]

I can roughly @type it.  Michael had a good idea to generate
a typedef from the white-listed prefs.

+     */
+    pref: {
+      type: Object,
+      notify: true,
+    },
+
+    /**
+     * The current selected item (an index number as a string).
+     * @private
+     */
+    selected_: {
+      notify: true,
+      observer: 'onSelectedChanged_',
+      type: String,
+    },
+
+    /**
+     * The current selected pref value.
+     * @private
+     */
+    selectedValue_: {
+      type: String,
+    },
+
+    /**
+     * Whether to show the custom font size menu item.
+     * @private
+     */
+    showNotFoundValue_: {
+      type: Boolean,
+    },
+  },
+
+  behaviors: [
+    I18nBehavior
+  ],
+
+  observers: [
+    'checkSetup_(menuOptions, selectedValue_)',
+    'prefChanged_(pref.value)',
+  ],
+
+  /**
+   * Check to see if we have all the pieces needed to enable the control.

[stevenjb, 2015/10/28 00:17:16]

@param for menuOptions, selectedValue_

[dschuyler, 2015/10/28 22:22:21]

Done.

+   * @private
+   */
+  checkSetup_: function(menuOptions, selectedValue_) {
+    if (!this.menuOptions.length) {
+      return;
+    }
+
+    if (!Object.keys(this.menuMap_).length) {
+      // Create a map from index value [0] back to the index i.
+      var result = {};
+      for (var i = 0; i < this.menuOptions.length; ++i)
+        result[JSON.stringify(this.menuOptions[i][0])] = i.toString();
+      this.menuMap_ = result;
+    }
+
+    // We need the menuOptions and the selectedValue_.  They may arrive
+    // at different times (each is asynchronous).
+    if (this.selectedValue_ !== undefined) {

[stevenjb, 2015/10/28 00:17:16]

This should not be possible, checkSetup_ will only be called once menuOptions
and selectedValue_ are defined.

[dschuyler, 2015/10/28 22:22:21]

Done.

+      this.selected_ = this.getItemIndex(this.selectedValue_);
+      this.menuLabel_ = this.label;
+      this.$.dropdownMenu.disabled = false;
+    }
+  },
+
+  /**
+   * @param {string} item A value from the menuOptions array.
+   * @return {string}
+   * @private
+   */
+  getItemIndex: function(item) {
+    var result = this.menuMap_[item];
+    if (result)
+      return result;
+    this.showNotFoundValue_ = true;
+    // The 'not found' item is added as the last of the options.
+    return (this.menuOptions.length).toString();
+  },
+
+  /**
+   * @param {string} index An index into the menuOptions array.
+   * @return {Object|number|string|undefined}
+   * @private
+   */
+  getItemValue: function(index) {
+    if (this.menuOptions.length) {
+      var result = this.menuOptions[index];
+      if (result)
+        return result[0];
+    }
+    return undefined;
+  },
+
+  /**
+   * Pass the selection change to the pref value.
+   * @private
+   */
+  onSelectedChanged_: function() {
+    var prefValue = this.getItemValue(this.selected_);
+    if (prefValue !== undefined) {
+      this.selectedValue_ = JSON.stringify(prefValue);
+      this.set('pref.value', prefValue);
+    }
+  },
+
+  /**
+   * @param {number|string} value A value from the menuOptions array.
+   * @private
+   */
+  prefChanged_: function(value) {
+    this.selectedValue_ = JSON.stringify(value);
+  },
+});