[Media Router] Custom Controls 4 - Implement details view WebUI

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 48a1d0ee376b4a48679079f60808fde666859460..0c6928ad1b79298c80a9fca68d21eb779cefc7b0 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
@@ -2,8 +2,11 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-// This Polymer element contains the entire media router interface. It handles
-// hiding and showing specific components.
+/**
+ * This Polymer element contains the entire media router interface. It handles
+ * hiding and showing specific components.
+ * @implements {MediaRouterContainerInterface}
+ */
 Polymer({
   is: 'media-router-container',
 
@@ -387,6 +390,16 @@ Polymer({
     },
 
     /**
+     * Whether the WebUI route controls should be shown instead of the
+     * extensionview in the route details view.
+     * @type {boolean}
+     */
+    useWebUiRouteControls: {
+      type: Boolean,
+      value: false,
+    },
+
+    /**
      * Whether the user has explicitly selected a cast mode.
      * @private {boolean}
      */
@@ -863,8 +876,8 @@ Polymer({
    * @return {boolean} Whether the search results list should be hidden.
    * @private
    */
-  computeSearchResultsHidden_: function(searchResultsToShow,
-                                        isSearchListHidden) {
+  computeSearchResultsHidden_: function(
+      searchResultsToShow, isSearchListHidden) {
     return isSearchListHidden || searchResultsToShow.length == 0;
   },
 
@@ -1080,14 +1093,22 @@ Polymer({
    * filter action here.
    * @param {?media_router.MediaRouterView} currentView The current view of the
    *     dialog.
+   * @param {?media_router.MediaRouterView} previousView The previous
+   *     |currentView|.
    * @private
    */
-  currentViewChanged_: function(currentView) {
+  currentViewChanged_: function(currentView, previousView) {
     if (currentView == media_router.MediaRouterView.FILTER) {
       this.reportFilterOnInput_ = true;
       this.maybeReportFilter_();
     }
     this.updateElementPositioning_();
+
+    if (previousView == media_router.MediaRouterView.ROUTE_DETAILS) {
+      media_router.browserApi.onMediaControllerClosed();
+      if (this.$$('route-details'))
+        this.$$('route-details').onClosed();
+    }
   },
 
   /**
@@ -1767,6 +1788,18 @@ Polymer({
   },
 
   /**
+   * Called when the connection to the route controller is invalidated. Switches
+   * from route details view to the sink list view.
+   */
+  onRouteControllerInvalidated: function() {
+    if (this.useWebUiRouteControls &&
+        this.currentView_ == media_router.MediaRouterView.ROUTE_DETAILS) {
+      this.currentRoute_ = null;
+      this.showSinkList_();
+    }
+  },
+
+  /**
    * Called when a sink is clicked.
    *
    * @param {!Event} event The event object.
@@ -2278,6 +2311,12 @@ Polymer({
   showRouteDetails_: function(route) {
     this.currentRoute_ = route;
     this.currentView_ = media_router.MediaRouterView.ROUTE_DETAILS;
+    if (this.useWebUiRouteControls) {
+      media_router.browserApi.onMediaControllerAvailable(route.id);
+    }
+    if (this.$$('route-details')) {
+      this.$$('route-details').onOpened();
+    }
   },
 
   /**