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

chrome/browser/resources/media_router/media_router_ui_interface.js

Index: chrome/browser/resources/media_router/media_router_ui_interface.js
diff --git a/chrome/browser/resources/media_router/media_router_ui_interface.js b/chrome/browser/resources/media_router/media_router_ui_interface.js
index a8ec54461a248a242f5475c160923d50dc85ccfd..abe9a27f3ce22556415a3646c0a0950a914f4a23 100644
--- a/chrome/browser/resources/media_router/media_router_ui_interface.js
+++ b/chrome/browser/resources/media_router/media_router_ui_interface.js
@@ -13,6 +13,9 @@ cr.define('media_router.ui', function() {
   // The media-router-header element.
   var header = null;
 
+  // The route-controls element. Is null if the route details view isn't open.
+  var routeControls = null;
+
   /**
    * Handles response of previous create route attempt.
    *
@@ -27,6 +30,14 @@ cr.define('media_router.ui', function() {
   }
 
   /**
+   * Called when the route controller for the route that is currently selected
+   * is invalidated.
+   */
+  function onRouteControllerInvalidated() {
+    container.onRouteControllerInvalidated();
+  }
+
+  /**
    * Handles the search response by forwarding |sinkId| to the container.
    *
    * @param {string} sinkId The ID of the sink found by search.
@@ -47,7 +58,7 @@ cr.define('media_router.ui', function() {
   /**
    * Sets |container| and |header|.
    *
-   * @param {!MediaRouterContainerElement} mediaRouterContainer
+   * @param {!MediaRouterContainerInterface} mediaRouterContainer
    * @param {!MediaRouterHeaderElement} mediaRouterHeader
    */
   function setElements(mediaRouterContainer, mediaRouterHeader) {
@@ -75,10 +86,8 @@ cr.define('media_router.ui', function() {
   function setFirstRunFlowData(data) {
     container.firstRunFlowCloudPrefLearnMoreUrl =
         data['firstRunFlowCloudPrefLearnMoreUrl'];
-    container.firstRunFlowLearnMoreUrl =
-        data['firstRunFlowLearnMoreUrl'];
-    container.showFirstRunFlowCloudPref =
-        data['showFirstRunFlowCloudPref'];
+    container.firstRunFlowLearnMoreUrl = data['firstRunFlowLearnMoreUrl'];
+    container.showFirstRunFlowCloudPref = data['showFirstRunFlowCloudPref'];
     // Some users acknowledged the first run flow before the cloud prefs
     // setting was implemented. These users will see the first run flow
     // again.
@@ -102,6 +111,7 @@ cr.define('media_router.ui', function() {
    * Parameters in data:
    *   deviceMissingUrl - url to be opened on "Device missing?" clicked.
    *   sinksAndIdentity - list of sinks to be displayed and user identity.
+   *   useWebUiRouteControls - whether new WebUI route controls should be used.
    *   routes - list of routes that are associated with the sinks.
    *   castModes - list of available cast modes.
    *   useTabMirroring - whether the cast mode should be set to TAB_MIRROR.
@@ -110,6 +120,7 @@ cr.define('media_router.ui', function() {
     container.deviceMissingUrl = data['deviceMissingUrl'];
     container.castModeList = data['castModes'];
     this.setSinkListAndIdentity(data['sinksAndIdentity']);
+    container.useWebUiRouteControls = !!data['useWebUiRouteControls'];
     container.routeList = data['routes'];
     container.maybeShowRouteDetailsOnOpen();
     if (data['useTabMirroring'])
@@ -128,6 +139,16 @@ cr.define('media_router.ui', function() {
   }
 
   /**
+   * Sets |routeControls|. The argument may be null if the route details view is
+   * getting closed.
+   *
+   * @param {?RouteControlsInterface} mediaRouterRouteControls
+   */
+  function setRouteControls(mediaRouterRouteControls) {
+    routeControls = mediaRouterRouteControls;
+  }
+
+  /**
    * Sets the list of currently active routes.
    *
    * @param {!Array<!media_router.Route>} routeList
@@ -166,263 +187,30 @@ cr.define('media_router.ui', function() {
     container.updateMaxDialogHeight(height);
   }
 
+  /**
+   * Updates the route status shown in the route controls.
+   *
+   * @param {!media_router.RouteStatus} status
+   */
+  function updateRouteStatus(status) {
+    if (routeControls) {
+      routeControls.routeStatus = status;
+    }
+  }
+
   return {
     onCreateRouteResponseReceived: onCreateRouteResponseReceived,
+    onRouteControllerInvalidated: onRouteControllerInvalidated,
     receiveSearchResult: receiveSearchResult,
     setCastModeList: setCastModeList,
     setElements: setElements,
     setFirstRunFlowData: setFirstRunFlowData,
     setInitialData: setInitialData,
     setIssue: setIssue,
+    setRouteControls: setRouteControls,
     setRouteList: setRouteList,
     setSinkListAndIdentity: setSinkListAndIdentity,
     updateMaxHeight: updateMaxHeight,
-  };
-});
-
-// API invoked by this UI to communicate with the browser WebUI message handler.
-cr.define('media_router.browserApi', function() {
-  'use strict';
-
-  /**
-   * Indicates that the user has acknowledged the first run flow.
-   *
-   * @param {boolean} optedIntoCloudServices Whether or not the user opted into
-   *                  cloud services.
-   */
-  function acknowledgeFirstRunFlow(optedIntoCloudServices) {
-    chrome.send('acknowledgeFirstRunFlow', [optedIntoCloudServices]);
-  }
-
-  /**
-   * Acts on the given issue.
-   *
-   * @param {number} issueId
-   * @param {number} actionType Type of action that the user clicked.
-   * @param {?number} helpPageId The numeric help center ID.
-   */
-  function actOnIssue(issueId, actionType, helpPageId) {
-    chrome.send('actOnIssue', [{issueId: issueId, actionType: actionType,
-                                helpPageId: helpPageId}]);
-  }
-
-  /**
-   * Modifies |route| by changing its source to the one identified by
-   * |selectedCastMode|.
-   *
-   * @param {!media_router.Route} route The route being modified.
-   * @param {number} selectedCastMode The value of the cast mode the user
-   *   selected.
-   */
-  function changeRouteSource(route, selectedCastMode) {
-    chrome.send('requestRoute',
-                [{sinkId: route.sinkId, selectedCastMode: selectedCastMode}]);
-  }
-
-  /**
-   * Closes the dialog.
-   *
-   * @param {boolean} pressEscToClose Whether the user pressed ESC to close the
-   *                  dialog.
-   */
-  function closeDialog(pressEscToClose) {
-    chrome.send('closeDialog', [pressEscToClose]);
-  }
-
-  /**
-   * Closes the given route.
-   *
-   * @param {!media_router.Route} route
-   */
-  function closeRoute(route) {
-    chrome.send('closeRoute', [{routeId: route.id, isLocal: route.isLocal}]);
-  }
-
-  /**
-   * Joins the given route.
-   *
-   * @param {!media_router.Route} route
-   */
-  function joinRoute(route) {
-    chrome.send('joinRoute', [{sinkId: route.sinkId, routeId: route.id}]);
-  }
-
-  /**
-   * Indicates that the initial data has been received.
-   */
-  function onInitialDataReceived() {
-    chrome.send('onInitialDataReceived');
-  }
-
-  /**
-   * Reports when the user clicks outside the dialog.
-   */
-  function reportBlur() {
-    chrome.send('reportBlur');
-  }
-
-  /**
-   * Reports the index of the selected sink.
-   *
-   * @param {number} sinkIndex
-   */
-  function reportClickedSinkIndex(sinkIndex) {
-    chrome.send('reportClickedSinkIndex', [sinkIndex]);
-  }
-
-  /**
-   * Reports that the user used the filter input.
-   */
-  function reportFilter() {
-    chrome.send('reportFilter');
-  }
-
-  /**
-   * Reports the initial dialog view.
-   *
-   * @param {string} view
-   */
-  function reportInitialState(view) {
-    chrome.send('reportInitialState', [view]);
-  }
-
-  /**
-   * Reports the initial action the user took.
-   *
-   * @param {number} action
-   */
-  function reportInitialAction(action) {
-    chrome.send('reportInitialAction', [action]);
-  }
-
-  /**
-   * Reports the navigation to the specified view.
-   *
-   * @param {string} view
-   */
-  function reportNavigateToView(view) {
-    chrome.send('reportNavigateToView', [view]);
-  }
-
-  /**
-   * Reports whether or not a route was created successfully.
-   *
-   * @param {boolean} success
-   */
-  function reportRouteCreation(success) {
-    chrome.send('reportRouteCreation', [success]);
-  }
-
-  /**
-   * Reports the outcome of a create route response.
-   *
-   * @param {number} outcome
-   */
-  function reportRouteCreationOutcome(outcome) {
-    chrome.send('reportRouteCreationOutcome', [outcome]);
-  }
-
-  /**
-   * Reports the cast mode that the user selected.
-   *
-   * @param {number} castModeType
-   */
-  function reportSelectedCastMode(castModeType) {
-    chrome.send('reportSelectedCastMode', [castModeType]);
-  }
-
-  /**
-   * Reports the current number of sinks.
-   *
-   * @param {number} sinkCount
-   */
-  function reportSinkCount(sinkCount) {
-    chrome.send('reportSinkCount', [sinkCount]);
-  }
-
-  /**
-   * Reports the time it took for the user to select a sink after the sink list
-   * is populated and shown.
-   *
-   * @param {number} timeMs
-   */
-  function reportTimeToClickSink(timeMs) {
-    chrome.send('reportTimeToClickSink', [timeMs]);
-  }
-
-  /**
-   * Reports the time, in ms, it took for the user to close the dialog without
-   * taking any other action.
-   *
-   * @param {number} timeMs
-   */
-  function reportTimeToInitialActionClose(timeMs) {
-    chrome.send('reportTimeToInitialActionClose', [timeMs]);
-  }
-
-  /**
-   * Requests data to initialize the WebUI with.
-   * The data will be returned via media_router.ui.setInitialData.
-   */
-  function requestInitialData() {
-    chrome.send('requestInitialData');
-  }
-
-  /**
-   * Requests that a media route be started with the given sink.
-   *
-   * @param {string} sinkId The sink ID.
-   * @param {number} selectedCastMode The value of the cast mode the user
-   *   selected.
-   */
-  function requestRoute(sinkId, selectedCastMode) {
-    chrome.send('requestRoute',
-                [{sinkId: sinkId, selectedCastMode: selectedCastMode}]);
-  }
-
-  /**
-   * Requests that the media router search all providers for a sink matching
-   * |searchCriteria| that can be used with the media source associated with the
-   * cast mode |selectedCastMode|. If such a sink is found, a route is also
-   * created between the sink and the media source.
-   *
-   * @param {string} sinkId Sink ID of the pseudo sink generating the request.
-   * @param {string} searchCriteria Search criteria for the route providers.
-   * @param {string} domain User's current hosted domain.
-   * @param {number} selectedCastMode The value of the cast mode to be used with
-   *   the sink.
-   */
-  function searchSinksAndCreateRoute(
-      sinkId, searchCriteria, domain, selectedCastMode) {
-    chrome.send('searchSinksAndCreateRoute',
-                [{sinkId: sinkId,
-                  searchCriteria: searchCriteria,
-                  domain: domain,
-                  selectedCastMode: selectedCastMode}]);
-  }
-
-  return {
-    acknowledgeFirstRunFlow: acknowledgeFirstRunFlow,
-    actOnIssue: actOnIssue,
-    changeRouteSource: changeRouteSource,
-    closeDialog: closeDialog,
-    closeRoute: closeRoute,
-    joinRoute: joinRoute,
-    onInitialDataReceived: onInitialDataReceived,
-    reportBlur: reportBlur,
-    reportClickedSinkIndex: reportClickedSinkIndex,
-    reportFilter: reportFilter,
-    reportInitialAction: reportInitialAction,
-    reportInitialState: reportInitialState,
-    reportNavigateToView: reportNavigateToView,
-    reportRouteCreation: reportRouteCreation,
-    reportRouteCreationOutcome: reportRouteCreationOutcome,
-    reportSelectedCastMode: reportSelectedCastMode,
-    reportSinkCount: reportSinkCount,
-    reportTimeToClickSink: reportTimeToClickSink,
-    reportTimeToInitialActionClose: reportTimeToInitialActionClose,
-    requestInitialData: requestInitialData,
-    requestRoute: requestRoute,
-    searchSinksAndCreateRoute: searchSinksAndCreateRoute,
+    updateRouteStatus: updateRouteStatus,
   };
 });