[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 369 matching lines @@
     /**
      * Sinks to show for the currently selected cast mode.
      * @private {!Array<!media_router.Sink>|undefined}
      */
     sinksToShow_: {
       type: Array,
       observer: 'updateElementPositioning_',
     },
 
     /**
+     * Whether the new web UI route controls should be shown instead of the
+     * extension view in the route details view.
+     * @type {boolean}
+     */
+    useWebUiRouteControls: {
+      type: Boolean,
+      value: false,
+    },
+
+    /**
      * Whether the user has explicitly selected a cast mode.
      * @private {boolean}
      */
     userHasSelectedCastMode_: {
       type: Boolean,
       value: false,
     },
 
     /**
      * Whether the user has already taken an action.
@@ skipping 663 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) {
+      media_router.browserApi.onMediaControllerClosed();
+      if (this.$$('route-details'))
+        this.$$('route-details').onClosed();
+    }
   },
 
   /**
    * 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 648 matching lines @@
         this.pseudoSinkSearchState_.checkForRealSink(this.allSinks);
     this.rebuildSinksToShow_();
     // If we're in filter view, make sure the |sinksToShow_| change is picked
     // up.
     if (this.currentView_ == media_router.MediaRouterView.FILTER) {
       this.filterSinks_(this.searchInputText_);
     }
   },
 
   /**
+   * 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.
    * @private
    */
   onSinkClick_: function(event) {
     var clickedSink =
         (this.currentView_ == media_router.MediaRouterView.FILTER) ?
         this.$$('#searchResults').itemForElement(event.target).sinkItem :
         this.$$('#sinkList').itemForElement(event.target);
@@ skipping 490 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;
+    media_router.browserApi.onMediaControllerAvailable(route.id);

[imcheng, 2017/05/05 21:36:40]

Shouldn't this only be called if we are using the webui based controller?

I was going to suggest that we move this call inside route-details onOpened(),
but I wasn't sure if this.$$('route-details') will be non-null if we are
stamping route-details. Maybe route-details could have a ready method that also
calls onOpened()?

[takumif, 2017/05/09 00:14:57]

Yes, ready() should call onOpened() as well, since on the first pass
this.$$('route-details') wouldn't exist yet. The problem with calling
onMediaControllerAvailable() from onOpened() is that we can't guarantee that
|route| is set when onOpened() gets called. Checking for
|this.useWebUiRouteControls| in showRouteDetails_() should work instead.

+    if (this.$$('route-details')) {
+      this.$$('route-details').onOpened();
+    }
   },
 
   /**
    * Shows the search results.
    *
    * @private
    */
   showSearchResults_: function() {
     if (this.currentView_ != media_router.MediaRouterView.FILTER) {
       this.currentView_ = media_router.MediaRouterView.FILTER;
@@ skipping 97 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_();
   },
 });