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

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

Index: chrome/browser/resources/media_router/elements/route_details/route_details.js
diff --git a/chrome/browser/resources/media_router/elements/route_details/route_details.js b/chrome/browser/resources/media_router/elements/route_details/route_details.js
index ae7ebcca5e1d63a66b704f13ce420e12c896879c..cf055738fb750ab2d7511d97ee97178f0575e872 100644
--- a/chrome/browser/resources/media_router/elements/route_details/route_details.js
+++ b/chrome/browser/resources/media_router/elements/route_details/route_details.js
@@ -24,7 +24,17 @@ Polymer({
     changeRouteSourceAvailable_: {
       type: Boolean,
       computed: 'computeChangeRouteSourceAvailable_(route, sink,' +
-                    'isAnySinkCurrentlyLaunching, shownCastModeValue)',
+          'isAnySinkCurrentlyLaunching, shownCastModeValue)',
+    },
+
+    /**
+     * An enum value to represent the controller to show.
+     * @private {number}
+     */
+    controllerType_: {
+      type: Number,
+      computed: 'computeControllerType_(useWebUiRouteControls,' +
+          'isExtensionViewReady)',
     },
 
     /**
@@ -36,13 +46,22 @@ Polymer({
       value: false,
     },
 
+    /**
+     * Whether the custom controller extensionview is ready to be shown.
+     * @type {boolean}
+     */
+    isExtensionViewReady: {
+      type: Boolean,
+      value: false,
+    },
+
     /**
      * The route to show.
      * @type {?media_router.Route|undefined}
      */
     route: {
       type: Object,
-      observer: 'maybeLoadCustomController_',
+      observer: 'onRouteChange_',
     },
 
     /**
@@ -65,14 +84,13 @@ Polymer({
     },
 
     /**
-     * Whether the custom controller should be hidden.
-     * A custom controller is shown iff |route| specifies customControllerPath
-     * and the view can be loaded.
-     * @private {boolean}
+     * Whether we should use the new route controls. This value is used for
+     * updating |controllerType_|,
+     * @type {boolean}
      */
-    isCustomControllerHidden_: {
+    useWebUiRouteControls: {
       type: Boolean,
-      value: true,
+      value: false,
     },
   },
 
@@ -129,6 +147,23 @@ Polymer({
         (selectedCastMode != route.currentCastMode);
   },
 
+  /**
+   * @param {boolean} useWebUiRouteControls
+   * @param {boolean} isExtensionViewReady
+   * @return {number} An enum value to represent the controller to show.
+   * @private
+   */
+  computeControllerType_: function(useWebUiRouteControls,
+                                   isExtensionViewReady) {
+    if (useWebUiRouteControls) {
+      return media_router.ControllerType.WEBUI;
+    }
+    if (isExtensionViewReady) {
+      return media_router.ControllerType.EXTENSION;
+    }
+    return media_router.ControllerType.NONE;
+  },
+
   /**
    * @param {number} castMode User selected cast mode or AUTO.
    * @param {?media_router.Sink} sink Sink to which we will cast.
@@ -154,6 +189,88 @@ Polymer({
     return castMode & sink.castModes;
   },
 
+  /**
+   * Updates |activityStatus_| for the default view.
+   *
+   * @private
+   */
+  updateActivityStatus_: function() {
+    this.activityStatus_ = this.route ?
+        loadTimeData.getStringF('castingActivityStatus',
+                                this.route.description) :
+        '';

[apacible, 2017/05/17 21:52:17]

I feel this is an awkward placement for this line, but defer to the formatter.

[takumif, 2017/05/18 18:01:56]

Since "git cl format" doesn't format JS, I copied over this function to a
google3 repo to see how it gets formatted there :) Interestingly the lines above
this got changed but not this one.

+  },
+
+  /**
+   * Called when the route details view is closed.

[apacible, 2017/05/17 21:52:17]

For onClosed/onOpened -- prefer comments be something like, "Resets
route-controls when details view is closed"

[takumif, 2017/05/18 18:01:55]

Done.

+   */
+  onClosed: function() {
+    if (this.controllerType_ === media_router.ControllerType.WEBUI) {
+      this.$['route-controls'].reset();
+    }
+  },
+
+  /**
+   * Called when the route details view is opened.
+   */
+  onOpened: function() {
+    if (this.controllerType_ === media_router.ControllerType.WEBUI) {
+      media_router.ui.setRouteControls(this.$['route-controls']);
+    }
+  },
+
+  /**
+   * Updates either the extensionview or the new route controller, depending on
+   * which should be shown.
+   * @private
+   */
+  onRouteChange_: function(newRoute) {
+    if (this.controllerType_ !== media_router.ControllerType.WEBUI) {
+      this.updateActivityStatus_();
+    }
+    if (newRoute &&
+        this.controllerType_ === media_router.ControllerType.WEBUI) {
+      this.$['route-controls'].onRouteUpdated(newRoute);
+    }
+  },
+
+  /**
+   * Called by Polymer when this element is ready.
+   */
+  ready: function() {

[apacible, 2017/05/17 21:52:17]

nit: Move this to right after the list of behaviors as this is a Polymer called
function.

[takumif, 2017/05/18 18:01:55]

Moving this functionality to ready() in route-controls since it's going to be
loaded dynamically.

+    this.onOpened();
+  },
+
+  /**
+   * @param {number} controllerType
+   * @return {boolean} Whether the extensionview should be shown instead of the
+   *     default route info element or the new WebUI route controller.
+   * @private
+   */
+  shouldShowExtensionView_: function(controllerType) {
+    return controllerType === media_router.ControllerType.EXTENSION;
+  },
+
+  /**
+   * @param {number} controllerType
+   * @return {boolean} Whether the route info element should be shown instead of
+   *     the extensionview or the new WebUI route controller.
+   * @private
+   */
+  shouldShowRouteInfoOnly_: function(controllerType) {
+    return controllerType === media_router.ControllerType.NONE;
+  },
+
+  /**
+   * @param {number} controllerType
+   * @return {boolean} Whether new WebUI route controller should be shown
+   *     instead of the default route info element or the extensionview.
+   * @private
+   */
+  shouldShowWebUiControls_: function(controllerType) {
+    return controllerType === media_router.ControllerType.WEBUI;
+  },
+
   /**
    * Fires a join-route-click event if the current route is joinable, otherwise
    * it fires a change-route-source-click event, which changes the source of the
@@ -174,41 +291,4 @@ Polymer({
       });
     }
   },
-
-  /**
-   * Loads the custom controller if |route.customControllerPath| exists.
-   * Falls back to the default route details view otherwise, or if load fails.
-   * Updates |activityStatus_| for the default view.
-   *
-   * @private
-   */
-  maybeLoadCustomController_: function() {
-    this.activityStatus_ = this.route ?
-        loadTimeData.getStringF('castingActivityStatus',
-                                this.route.description) :
-        '';
-
-    if (!this.route || !this.route.customControllerPath) {
-      this.isCustomControllerHidden_ = true;
-      return;
-    }
-
-    // Show custom controller
-    var extensionview = this.$['custom-controller'];
-
-    // Do nothing if the url is the same and the view is not hidden.
-    if (this.route.customControllerPath == extensionview.src &&
-        !this.isCustomControllerHidden_)
-      return;
-
-    var that = this;
-    extensionview.load(this.route.customControllerPath)
-    .then(function() {
-      // Load was successful; show the custom controller.
-      that.isCustomControllerHidden_ = false;
-    }, function() {
-      // Load was unsuccessful; fall back to default view.
-      that.isCustomControllerHidden_ = true;
-    });
-  },
 });