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

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

 // Copyright 2015 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.
 
 // This Polymer element contains the entire media router interface. It handles
 // hiding and showing specific components.
 Polymer({
   is: 'media-router-container',
 
   properties: {
@@ skipping 835 matching lines @@
 
   /**
    * Computes whether the search results list should be hidden.
    * @param {!Array<!{sinkItem: !media_router.Sink,
    *                  substrings: Array<!Array<number>>}>} searchResultsToShow
    *     The sinks currently matching the search text.
    * @param {boolean} isSearchListHidden Whether the search list is hidden.
    * @return {boolean} Whether the search results list should be hidden.
    * @private
    */
-  computeSearchResultsHidden_: function(searchResultsToShow,
-                                        isSearchListHidden) {
+  computeSearchResultsHidden_: function(
+      searchResultsToShow, isSearchListHidden) {
     return isSearchListHidden || searchResultsToShow.length == 0;
   },
 
   /**
    * @param {!Array<!media_router.CastMode>} castModeList The current list of
    *     cast modes.
    * @return {boolean} Whether or not to hide the share screen subheading text.
    * @private
    */
   computeShareScreenSubheadingHidden_: function(castModeList) {
@@ skipping 193 matching lines @@
     return Math.min(contentHeight, maxHeight) + searchOffsetHeight;
   },
 
   /**
    * Updates element positioning when the view changes and possibly triggers
    * reporting of a user filter action. If there is no filter text, it defers
    * the reporting until some text is entered, but otherwise it reports the
    * 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');
+    }
   },
 
   /**
    * Filters all sinks based on fuzzy matching to the currently entered search
    * text.
    * @param {string} searchInputText The currently entered search text.
    * @private
    */
   filterSinks_: function(searchInputText) {
     if (searchInputText.length == 0) {
@@ skipping 1158 matching lines @@
 
   /**
    * Shows the route details.
    *
    * @param {!media_router.Route} route The route to show.
    * @private
    */
   showRouteDetails_: function(route) {
     this.currentRoute_ = route;
     this.currentView_ = media_router.MediaRouterView.ROUTE_DETAILS;
+    this.fire('open-route-details', {routeId: route.id});
   },
 
   /**
    * Shows the search results.
    *
    * @private
    */
   showSearchResults_: function() {
     if (this.currentView_ != media_router.MediaRouterView.FILTER) {
       this.currentView_ = media_router.MediaRouterView.FILTER;
@@ skipping 96 matching lines @@
 
   /**
    * Update the max dialog height and update the positioning of the elements.
    *
    * @param {number} height The max height of the Media Router dialog.
    */
   updateMaxDialogHeight: function(height) {
     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;
+    }
+  },
 });