Add DPI option selection to Print Preview.

chrome/browser/resources/print_preview/settings/media_size_settings.js

 // Copyright 2014 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('print_preview', function() {
   'use strict';
 
   /**
    * Encapsulates all settings and logic related to the media size selection UI.
    * @param {!print_preview.ticket_items.MediaSize} ticketItem Used to read and
    *     write the media size ticket item.
    * @constructor
-   * @extends {print_preview.SettingsSection}
+   * @extends {print_preview.SettingsSectionSelect}
    */
   function MediaSizeSettings(ticketItem) {
-    print_preview.SettingsSection.call(this);
-
-    /** @private {!print_preview.ticket_items.MediaSize} */
-    this.ticketItem_ = ticketItem;
+    print_preview.SettingsSectionSelect.call(this, ticketItem);
   };
 
   MediaSizeSettings.prototype = {
-    __proto__: print_preview.SettingsSection.prototype,
+    __proto__: print_preview.SettingsSectionSelect.prototype,
 
     /** @override */
-    isAvailable: function() {
-      return this.ticketItem_.isCapabilityAvailable();
-    },
-
-    /** @override */
-    hasCollapsibleContent: function() {
-      return this.isAvailable();
-    },
-
-    /** @override */
-    set isEnabled(isEnabled) {
-      this.select_.disabled = !isEnabled;
-    },
-
-    /** @override */
-    enterDocument: function() {
-      print_preview.SettingsSection.prototype.enterDocument.call(this);
-      this.tracker.add(this.select_, 'change', this.onSelectChange_.bind(this));
-      this.tracker.add(
-          this.ticketItem_,
-          print_preview.ticket_items.TicketItem.EventType.CHANGE,
-          this.onTicketItemChange_.bind(this));
-    },
-
-    /**
-     * @return {HTMLSelectElement} Select element containing media size options.
-     * @private
-     */
-    get select_() {
-      return this.getElement().getElementsByClassName(
-          'media-size-settings-select')[0];
-    },
-
-    /**
-     * Makes sure the content of the select element matches the capabilities of
-     * the destination.
-     * @private
-     */
-    updateSelect_: function() {
-      var select = this.select_;
-      if (!this.isAvailable()) {
-        select.innerHTML = '';
-        return;
-      }
-      // Should the select content be updated?
-      var sameContent =
-          this.ticketItem_.capability.option.length == select.length &&
-          this.ticketItem_.capability.option.every(function(option, index) {
-            return select.options[index].value == JSON.stringify(option);
-          });
-      var indexToSelect = select.selectedIndex;
-      if (!sameContent) {
-        select.innerHTML = '';
-        // TODO: Better heuristics for the display name and options grouping.
-        this.ticketItem_.capability.option.forEach(function(option, index) {
-          var selectOption = document.createElement('option');
-          var displayName = option.custom_display_name;
-          if (!displayName && option.custom_display_name_localized) {
-            var getLocaleToCompare =
-                /** @type {function(string, boolean=): string} */
-                (function(locale, opt_languageOnly) {
-              var code = opt_languageOnly ? locale.split('-')[0] : locale;
-              return code.toLowerCase();
-            });
-            var getItemForLocale = function(items, locale, languageOnly) {
-              locale = getLocaleToCompare(locale, languageOnly);
-              for (var i = 0; i < items.length; i++) {
-                if (getLocaleToCompare(items[i].locale) == locale)
-                  return items[i].value;
-              }
-              return '';
-            };
-            var items = option.custom_display_name_localized;
-            displayName =
-                getItemForLocale(items, navigator.language, false) ||
-                getItemForLocale(items, navigator.language, true);
-          }
-          selectOption.text = displayName || option.name;
-          selectOption.value = JSON.stringify(option);
-          select.appendChild(selectOption);
-          if (option.is_default) {
-            indexToSelect = index;
-          }
-        });
-      }
-      // Try to select current ticket item.
-      var valueToSelect = JSON.stringify(this.ticketItem_.getValue());
-      for (var i = 0, option; option = select.options[i]; i++) {
-        if (option.value == valueToSelect) {
-          indexToSelect = i;
-          break;
-        }
-      }
-      select.selectedIndex = indexToSelect;
-      this.onSelectChange_();
-    },
-
-    /**
-     * Called when the select element is changed. Updates the print ticket.
-     * @private
-     */
-    onSelectChange_: function() {
-      var select = this.select_;
-      var mediaSize = JSON.parse(select.options[select.selectedIndex].value);
-      this.ticketItem_.updateValue(mediaSize);
-    },
-
-    /**
-     * Called when the print ticket store changes. Selects the corresponding
-     * select option.
-     * @private
-     */
-    onTicketItemChange_: function() {
-      this.updateSelect_();
-      this.updateUiStateInternal();
+    getDefaultDisplayName_: function(option) {
+      return option.name;
     }
   };
 
   // Export
   return {
     MediaSizeSettings: MediaSizeSettings
   };
 });