Shows a launch spinner next to a sink once it is selected to create a route. The launch spinner sur…

chrome/browser/resources/media_router/elements/media_router_container/media_router_container.js

Index: chrome/browser/resources/media_router/elements/media_router_container/media_router_container.js
diff --git a/chrome/browser/resources/media_router/elements/media_router_container/media_router_container.js b/chrome/browser/resources/media_router/elements/media_router_container/media_router_container.js
index ff566f583129aad761bf0199ceea26b151900380..f18175a14e0f162ea8ebb04282692079e6f9fcda 100644
--- a/chrome/browser/resources/media_router/elements/media_router_container/media_router_container.js
+++ b/chrome/browser/resources/media_router/elements/media_router_container/media_router_container.js
@@ -200,7 +200,7 @@ Polymer({
 
   ready: function() {
     this.addEventListener('close-route-click', this.removeRoute);
-    this.currentView_ = this.CONTAINER_VIEW_.SINK_LIST;
+    this.showSinkList_();
   },
 
   attached: function() {
@@ -211,11 +211,20 @@ Polymer({
   },
 
   /**
-   * Adds |route| to |routeList|.
+   * Handles response of previous create route attempt.
    *
-   * @param {!media_router.Route} route The route to add.
+   * @param {string} sinkId The ID of the sink to which the Media Route was
+   *     creating a route.
+   * @param {?media_router.Route} route The newly created route to the sink
+   *     if succeeded; null otherwise.
    */
-  addRoute: function(route) {
+  onCreateRouteResponseReceived: function(sinkId, route) {

[apacible, 2015/08/12 20:51:49]

nit: alphabetize. Also, can you move propogateExtensionId_() so that it's also
listed alphabetically?

[haibinlu, 2015/08/12 21:15:30]

moved many methods around.

+    this.setLaunchState_(sinkId, false);
+    if (!route) {
+      // TODO(apacible) Show launch failure.
+      return;
+    }
+
     // Check if |route| already exists or if its associated sink
     // does not exist.
     if (this.routeMap_[route.id] || !this.sinkMap_[route.sinkId])
@@ -225,6 +234,7 @@ Polymer({
     // |sinkToRouteMap_| entry will be overwritten with that of the new route,
     // which results in the correct sink to route mapping.
     this.routeList.push(route);
+    this.showRouteDetails_(route);
   },
 
   /**
@@ -383,7 +393,7 @@ Polymer({
    * @private
    */
   computeSinkIconClass_: function(sinkId, sinkToRouteMap) {
-    return sinkToRouteMap[sinkId] ? 'active-sink' : '';
+    return sinkToRouteMap[sinkId] ? 'sink-icon active-sink' : 'sink-icon';
   },
 
   /**
@@ -416,6 +426,17 @@ Polymer({
   },
 
   /**
+   * Checks if there is a sink whose isLaunching is true.
+   *
+   * @param {!Array<!media_router.Sink>} sinks
+   * @return {boolean}
+   * @private
+   */
+  isLaunching_: function(sinks) {
+    return sinks.some(function(sink) { return sink.isLaunching; });
+  },
+
+  /**
    * Updates |currentView_| if the dialog had just opened and there's
    * only one local route.
    *
@@ -423,24 +444,24 @@ Polymer({
    * @private
    */
   maybeShowRouteDetailsOnOpen_: function(route) {
-    if (this.localRouteCount_ == 1 && this.justOpened_ && route) {
-      this.currentRoute_ = route;
-      this.currentView_ = this.CONTAINER_VIEW_.ROUTE_DETAILS;
-    }
+    if (this.localRouteCount_ == 1 && this.justOpened_ && route)
+      this.showRouteDetails_(route);
   },
 
   /**
-   * Creates a new route if |route| is null. Otherwise, shows the route
-   * details.
+   * Creates a new route if there is no route to the |sink| . Otherwise,
+   * shows the route details.
    *
    * @param {!media_router.Sink} sink The sink to use.
-   * @param {?media_router.Route} route The current route tied to |sink|.
    * @private
    */
-  showOrCreateRoute_: function(sink, route) {
+  showOrCreateRoute_: function(sink) {
+    var route = this.sinkToRouteMap_[sink.id];
     if (route) {
-      this.showRouteDetails_();
-    } else {
+      this.showRouteDetails_(route);
+    } else if (!this.isLaunching_(this.sinkList)) {
+      // Allow one launch at a time.
+      this.setLaunchState_(sink.id, true);
       this.fire('create-route', {
         sinkId: sink.id,
         selectedCastModeValue: this.selectedCastModeValue_
@@ -480,15 +501,13 @@ Polymer({
   },
 
   /**
-   * Called when a sink is clicked. Updates |currentRoute_|.
+   * Called when a sink is clicked.
    *
    * @param {!Event} event The event object.
    * @private
    */
   onSinkClick_: function(event) {
-    var clickedSink = this.$.sinkList.itemForElement(event.target);
-    this.currentRoute_ = this.sinkToRouteMap_[clickedSink.id];
-    this.showOrCreateRoute_(clickedSink, this.currentRoute_);
+    this.showOrCreateRoute_(this.$.sinkList.itemForElement(event.target));
   },
 
   /**
@@ -540,20 +559,40 @@ Polymer({
   },
 
   /**
+   * Temporarily overrides the "isLaunching" bit for a sink.
+   *
+   * @param {string} sinkId The ID of the sink.
+   * @param {boolean} isLaunching Whether or not the media router is creating
+   *    a route to the sink.
+   * @private
+   */
+  setLaunchState_: function(sinkId, isLaunching) {
+    for (var index = 0; index < this.sinkList.length; index++) {
+      if (this.sinkList[index].id == sinkId) {
+        this.set(['sinkList', index, 'isLaunching'], isLaunching);
+        return;
+      }
+    }
+  },
+
+  /**
    * Shows the cast mode list.
    *
    * @private
    */
   showCastModeList_: function() {
+    this.currentRoute_ = null;
     this.currentView_ = this.CONTAINER_VIEW_.CAST_MODE_LIST;
   },
 
   /**
    * Shows the route details.
    *
+   * @param {?media_router.Route} route The route to show.
    * @private
    */
-  showRouteDetails_: function() {
+  showRouteDetails_: function(route) {
+    this.currentRoute_ = route;
     this.currentView_ = this.CONTAINER_VIEW_.ROUTE_DETAILS;

[apacible, 2015/08/12 20:51:49]

Add a check here to update currentView_ only if route isn't null?

[haibinlu, 2015/08/12 21:15:30]

It is a precondition. Update the param type to require non-null route.

   },
 
@@ -563,6 +602,7 @@ Polymer({
    * @private
    */
   showSinkList_: function() {
+    this.currentRoute_ = null;
     this.currentView_ = this.CONTAINER_VIEW_.SINK_LIST;
   },
 
@@ -577,4 +617,5 @@ Polymer({
     else
       this.showCastModeList_();
   },
+

[apacible, 2015/08/12 20:51:49]

nit: remove newline

[haibinlu, 2015/08/12 21:15:30]

Done.

 });