Add media size select element and ticket item. Do not expose in the UI yet.

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.Component}
+   */
+  function MediaSizeSettings(ticketItem) {
+    print_preview.Component.call(this);
+
+    /** @private {!print_preview.ticket_items.MediaSize} */
+    this.ticketItem_ = ticketItem;
+  };
+
+  MediaSizeSettings.prototype = {
+    __proto__: print_preview.Component.prototype,
+
+    /** @param {boolean} isEnabled Whether this component is enabled. */
+    set isEnabled(isEnabled) {
+      this.select_.disabled = !isEnabled;
+    },
+
+    /** @override */
+    enterDocument: function() {
+      print_preview.Component.prototype.enterDocument.call(this);
+      fadeOutOption(this.getElement(), true);
+      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.ticketItem_.isCapabilityAvailable()) {
+        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');
+          selectOption.text = option.custom_display_name || option.name;
+          selectOption.value = JSON.stringify(option);
+          select.add(selectOption);
+          if (option.is_default) {
+            indexToSelect = index;
+          }
+        });
+      } else {
+        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;
+    },
+
+    /**
+     * 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() {
+      if (this.ticketItem_.isCapabilityAvailable()) {
+        this.updateSelect_();
+        fadeInOption(this.getElement());
+      } else {
+        fadeOutOption(this.getElement());
+      }
+    }
+  };
+
+  // Export
+  return {
+    MediaSizeSettings: MediaSizeSettings
+  };
+});