[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 6580294638ba2f3ab524a089e1d75703735d21cc..da0e2d34ebcbdd1e2a21fdfce4ee0909dc3d3a0d 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
@@ -853,8 +853,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;
   },
 
@@ -1068,14 +1068,20 @@ Polymer({
    * filter action here.
    * @param {?media_router.MediaRouterView} currentView The current view of the
    *     dialog.
+   * @param {?media_router.MediaRouterView} oldCurrentView The old current view
+   *     of the dialog.
    * @private
    */
-  currentViewChanged_: function(currentView) {
+  currentViewChanged_: function(currentView, oldCurrentView) {
     if (currentView == media_router.MediaRouterView.FILTER) {
       this.reportFilterOnInput_ = true;
       this.maybeReportFilter_();
     }
     this.updateElementPositioning_();
+
+    if (oldCurrentView == media_router.MediaRouterView.ROUTE_DETAILS) {
+      this.fire('close-route-details');
+    }
   },
 
   /**
@@ -2254,6 +2260,7 @@ Polymer({
   showRouteDetails_: function(route) {
     this.currentRoute_ = route;
     this.currentView_ = media_router.MediaRouterView.ROUTE_DETAILS;
+    this.fire('open-route-details', {routeId: route.id});
   },
 
   /**
@@ -2370,4 +2377,16 @@ Polymer({
     this.dialogHeight_ = height;
     this.updateElementPositioning_();
   },
+
+  /**
+   * Updates the route status shown in the details view.
+   *
+   * @param {!media_router.RouteStatus} status
+   */
+  updateRouteStatus: function(status) {

[imcheng, 2017/03/02 02:25:47]

Can the media status be passed to the route details element from the entry point
without going through the container first?

[takumif, 2017/03/08 23:34:58]

To do that, the route details must register/unregister itself with
media_router.ui whenever it's created/destroyed. I think it's simpler for the
container to go inbetween.

[imcheng, 2017/03/11 21:57:38]

My thinking is that the WebUI needs to signal to the browser that the
route-details/controller is being opened, so that's when it can pass the element
itself to the top level WebUI where media commands can be directed to.

[takumif, 2017/03/16 20:16:02]

Okay, giving media_router.ui a |routeControls| attribute that gets set/unset
when the details view is opened/closed.

+    var routeDetails = this.$$('route-details');
+    if (routeDetails) {
+      routeDetails.routeStatus = status;
+    }
+  },
 });