[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.
+/**
+ * This Polymer element contains the entire media router interface. It handles
+ * hiding and showing specific components.
+ * @implements {MediaRouterContainerInterface}
+ */
 Polymer({
   is: 'media-router-container',
 
   properties: {
     /**
      * The list of available sinks.
      * @type {!Array<!media_router.Sink>}
      */
     allSinks: {
       type: Array,
@@ skipping 363 matching lines @@
     /**
      * Sinks to show for the currently selected cast mode.
      * @private {!Array<!media_router.Sink>|undefined}
      */
     sinksToShow_: {
       type: Array,
       observer: 'updateElementPositioning_',
     },
 
     /**
+     * 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}
      */
     userHasSelectedCastMode_: {
       type: Boolean,
       value: false,
     },
 
     /**
      * Whether the user has already taken an action.
@@ skipping 456 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 195 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} 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();
+    }
   },
 
   /**
    * 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 659 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 491 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;
+    if (this.useWebUiRouteControls) {
+      media_router.browserApi.onMediaControllerAvailable(route.id);
+    }
+    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_();
   },
 });