[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..719c808422c39d12517a4bedacbf6934ce310d9e 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,' +

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

Can the parameters be pulled from the element instead of being passed in here?
Mostly for readability.

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

They are passed in here so that when they change, the value of |controllerType_|
is updated.

[mark a. foltz, 2017/05/15 20:43:22]

Acknowledged.

+          'isExtensionViewReady)',
     },

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

Do you need an observer to update this value if isExtensionViewReady changes?
Or is this the controller that *eventually* will be shown regardless of what is
currently displayed (i.e. is EXTENSION_VIEW while the extensionview is loading).

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

The method in the "computed" attribute gets called every time its arguments
(useWebUiRouteControls, isExtensionViewReady) change, so no observer is
necessary. This is also why they need to be passed in here.

[mark a. foltz, 2017/05/15 20:43:22]

Acknowledged.

 
     /**
@@ -36,13 +46,22 @@ Polymer({
       value: false,
     },
 
+    /**
+     * Whether the custom controller extension view 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. If false, we use the
+     * extension view.
+     * @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,87 @@ Polymer({
     return castMode & sink.castModes;
   },
 
+  /**
+   * Updates |activityStatus_| for the default view.
+   *
+   * @private
+   */
+  updateActivityStatus_: function() {

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

This seems to duplicate displayedDescription_. What is the difference?

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

|activityStatus_| is the fallback route description that is shown when we
attempt but fail to load the extensionview. |displayedDescription_| in the new
controller shows the same thing if a description isn't provided by route status
updates.

+    this.activityStatus_ = this.route ?
+        loadTimeData.getStringF('castingActivityStatus',
+                                this.route.description) :
+        '';
+  },
+
+  /**
+   * Called when the route details view is closed.
+   */
+  onClosed: function() {
+    if (this.useWebUiRouteControls) {

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

This could use controllerType_ == WEBUI as logically that represents the current
state of the controls, and assuming it's maintained. It also makes it clearer in
some places what code is mutually exclusive.  Of course it depends on the
meaning of controllerType_.
(comment applies throughout)

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

Done.

+      this.$['route-controls'].reset();
+    }
+  },
+
+  /**
+   * Called when the route details view is opened.
+   */
+  onOpened: function() {
+    if (this.useWebUiRouteControls) {
+      media_router.ui.setRouteControls(this.$['route-controls']);
+    }
+  },
+
+  /**
+   * Updates either the extension view or the new route controller, depending on
+   * which should be shown.
+   * @private
+   */
+  onRouteChange_: function(newRoute) {
+    if (!this.useWebUiRouteControls) {
+      this.updateActivityStatus_();
+    }
+    if (newRoute && this.useWebUiRouteControls) {
+      this.$['route-controls'].onRouteUpdated(newRoute);
+    }
+  },
+
+  /**
+   * Called by Polymer when this element is ready.
+   */
+  ready: function() {
+    this.onOpened();
+  },
+
+  /**
+   * @param {number} controllerType
+   * @return {boolean} Whether the extension view should be shown instead of the
+   *     default route info element or the new web UI 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 extension view or the new web UI route controller.
+   * @private
+   */
+  shouldShowRouteInfoOnly_: function(controllerType) {
+    return controllerType === media_router.ControllerType.NONE;
+  },
+
+  /**
+   * @param {number} controllerType
+   * @return {boolean} Whether new web UI route controller should be shown
+   *     instead of the default route info element or the extension view.
+   * @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 +290,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;
-    });
-  },
 });