Print Preview Print Destination Search Widget

chrome/browser/resources/print_preview/search/destination_list_item.js

Index: chrome/browser/resources/print_preview/search/destination_list_item.js
diff --git a/chrome/browser/resources/print_preview/search/destination_list_item.js b/chrome/browser/resources/print_preview/search/destination_list_item.js
new file mode 100644
index 0000000000000000000000000000000000000000..bd6535128d8c957c7c4c259206857248282e5771
--- /dev/null
+++ b/chrome/browser/resources/print_preview/search/destination_list_item.js
@@ -0,0 +1,125 @@
+// Copyright (c) 2012 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';
+
+  /**
+   * Component that renders a destination item in a destination list.
+   * @param {!cr.EventTarget} eventTarget Event target to dispatch selection
+   *     events to.
+   * @param {!print_preview.Destination} destination Destination data object to
+   *     render.
+   * @constructor
+   * @extends {print_preview.Component}
+   */
+  function DestinationListItem(eventTarget, destination) {
+    print_preview.Component.call(this);
+
+    /**
+     * Event target to dispatch selection events to.
+     * @type {!cr.EventTarget}
+     * @private
+     */
+    this.eventTarget_ = eventTarget;
+
+    /**
+     * Destination that the list item renders.
+     * @type {!print_preview.Destination}
+     * @private
+     */
+    this.destination_ = destination;
+  };
+
+  /**
+   * Event types dispatched by the destination list item.
+   * @enum {string}
+   */
+  DestinationListItem.EventType = {
+    // Dispatched when the list item is activated.
+    SELECT: 'print_preview.DestinationListItem.SELECT'
+  };
+
+  /**
+   * CSS classes used by the destination list item.
+   * @enum {string}
+   * @private
+   */
+  DestinationListItem.Classes_ = {
+    ICON: 'destination-list-item-icon',
+    NAME: 'destination-list-item-name'
+  };
+
+  /**
+   * URLs of the various destination list item icons.
+   * @enum {string}
+   * @private
+   */
+  DestinationListItem.Icons_ = {
+    CLOUD: 'images/cloud_printer_32.png',
+    CLOUD_SHARED: 'images/cloud_printer_shared_32.png',
+    LOCAL: 'images/classic_printer_32.png',
+    MOBILE: 'images/mobile_32.png',
+    MOBILE_SHARED: 'images/mobile_shared_32.png',
+    GOOGLE_PROMOTED: 'images/google_promoted_printer_32.png'
+  },
+
+  DestinationListItem.prototype = {
+    __proto__: print_preview.Component.prototype,
+
+    /** @override */
+    createDom: function() {
+      this.setElementInternal(this.cloneTemplateInternal(
+          'destination-list-item-template'));
+
+      var iconUrl;
+      if (this.destination_.isGooglePromoted) {
+        iconUrl = DestinationListItem.Icons_.GOOGLE_PROMOTED;
+      } else if (this.destination_.type ==

[dpapad, 2012/05/29 16:41:02]

I think that there are helpers now, this.destination_.isLocal, right? Consider
adding helpers for isMobile, isGooglePromoted if they don't already exist.

[Robert Toscano, 2012/05/29 18:00:43]

I had isLocal from before, but now that I've introduced the "type" field for
destinations, I think it's simpler if we just check that field. I'll leave the
isLocal getter since it was already there.

[dpapad, 2012/05/29 18:15:08]

I am fine with that. But I do feel that the "type" is kind of implementation
detail (and therefore should be private) and that it would be a bit cleaner and
less verbose to have 
isLocal, isMobile, isGoolgePromoted etc and use all of them here.
Do you use the type field outside the Destination class anywhere else?

+          print_preview.Destination.Type.LOCAL) {
+        iconUrl = DestinationListItem.Icons_.LOCAL;
+      } else if (this.destination_.type ==
+          print_preview.Destination.Type.MOBILE && this.destination_.isOwned) {
+        iconUrl = DestinationListItem.Icons_.MOBILE;
+      } else if (this.destination_.type ==
+          print_preview.Destination.Type.MOBILE && !this.destination_.isOwned) {
+        iconUrl = DestinationListItem.Icons_.MOBILE_SHARED;
+      } else if (this.destination_.type ==
+          print_preview.Destination.Type.GOOGLE && this.destination_.isOwned) {
+        iconUrl = DestinationListItem.Icons_.CLOUD;
+      } else {
+        iconUrl = DestinationListItem.Icons_.CLOUD_SHARED;
+      }
+
+      var iconImg = this.getElement().getElementsByClassName(
+          print_preview.DestinationListItem.Classes_.ICON)[0];
+      iconImg.src = iconUrl;
+      var nameEl = this.getElement().getElementsByClassName(
+          DestinationListItem.Classes_.NAME)[0];
+      nameEl.textContent = this.destination_.displayName;
+    },
+
+    /** @override */
+    enterDocument: function() {
+      print_preview.Component.prototype.enterDocument.call(this);
+      this.tracker.add(this.getElement(), 'click', this.onActivate_.bind(this));
+    },
+
+    /**
+     * Called when the destination item is activated. Dispatches a SELECT event
+     * on the given event target.
+     * @private
+     */
+    onActivate_: function() {
+      var selectEvt = new cr.Event(DestinationListItem.EventType.SELECT);
+      selectEvt.destination = this.destination_;
+      this.eventTarget_.dispatchEvent(selectEvt);
+    }
+  };
+
+  // Export
+  return {
+    DestinationListItem: DestinationListItem
+  };
+});