[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 ff9296814a7eeddcf8752044bf520113b037fe76..f8f9d0cbdbcb28ba23c2544df928c66bb89a94ce 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
@@ -386,6 +386,16 @@ Polymer({
       observer: 'updateElementPositioning_',
     },
 
+    /**
+     * Whether the new web UI route controls should be shown instead of the

[mark a. foltz, 2017/05/12 00:02:46]

Nit: WebUI here and elsewhere.

[takumif, 2017/05/15 17:13:12]

Done.

+     * extension view in the route details view.

[mark a. foltz, 2017/05/12 00:02:46]

extensionview

[takumif, 2017/05/15 17:13:12]

Done.

+     * @type {boolean}
+     */
+    useWebUiRouteControls: {
+      type: Boolean,
+      value: false,
+    },
+
     /**
      * Whether the user has explicitly selected a cast mode.
      * @private {boolean}
@@ -1070,14 +1080,22 @@ Polymer({
    * filter action here.
    * @param {?media_router.MediaRouterView} currentView The current view of the
    *     dialog.
+   * @param {?media_router.MediaRouterView} oldCurrentView The old current view

[mark a. foltz, 2017/05/12 00:02:46]

previousView ?

[takumif, 2017/05/15 17:13:12]

Done.

+   *     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();
+    }
   },
 
   /**
@@ -1745,6 +1763,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.
    *
@@ -2256,6 +2286,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();
+    }
   },
 
   /**