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

chrome/browser/resources/media_router/elements/route_details/route_details.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 shows information from media that is currently cast
 // to a device.
 Polymer({
   is: 'route-details',
 
   properties: {
     /**
      * The text for the current casting activity status.
      * @private {string|undefined}
      */
     activityStatus_: {
       type: String,
     },
 
     /**
      * Whether the external container will accept change-route-source-click
      * events.
      * @private {boolean}
      */
     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.

+
+    /**
      * Whether a sink is currently launching in the container.
      * @type {boolean}
      */
     isAnySinkCurrentlyLaunching: {
       type: Boolean,
       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_',
     },
 
     /**
      * The cast mode shown to the user. Initially set to auto mode. (See
      * media_router.CastMode documentation for details on auto mode.)
      * @type {number}
      */
     shownCastModeValue: {
       type: Number,
       value: media_router.AUTO_CAST_MODE.type,
     },
 
     /**
      * Sink associated with |route|.
      * @type {?media_router.Sink}
      */
     sink: {
       type: Object,
       value: null,
     },
 
     /**
-     * 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,
     },
   },
 
   behaviors: [
     I18nBehavior,
   ],
 
   /**
    * Fires a close-route event. This is called when the button to close
    * the current route is clicked.
@@ skipping 37 matching lines @@
     if (!route.currentCastMode) {
       return true;
     }
     var selectedCastMode =
         this.computeSelectedCastMode_(shownCastModeValue, sink);
     return (selectedCastMode != 0) &&
         (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.
    * @return {number} The selected cast mode when |castMode| is selected in the
    *     dialog and casting to |sink|.  Returning 0 means there is no cast mode
    *     available to |sink| and therefore the start-casting-to-route button
    *     will not be shown.
    */
   computeSelectedCastMode_: function(castMode, sink) {
     // |sink| can be null when there is a local route, which is shown in the
     // dialog, but the sink to which it is connected isn't in the current set of
     // sinks known to the dialog.  This can happen, for example, with DIAL
     // devices.  A route is created to a DIAL device, but opening the dialog on
     // a tab that only supports mirroring will not show the DIAL device.  The
     // route will be shown in route details if it is the only local route, so
     // you arrive at this function with a null |sink|.
     if (!sink) {
       return 0;
     }
     if (castMode == media_router.CastModeType.AUTO) {
       return sink.castModes & -sink.castModes;
     }
     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
    * current route. This may cause the current route to be closed and a new
    * route to be started. This is called when the button to start casting to the
    * current route is clicked.
    *
    * @private
    */
   startCastingToRoute_: function() {
     if (this.route.canJoin) {
       this.fire('join-route-click', {route: this.route});
     } else {
       this.fire('change-route-source-click', {
         route: this.route,
         selectedCastMode:
             this.computeSelectedCastMode_(this.shownCastModeValue, this.sink)
       });
     }
   },
-
-  /**
-   * 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;
-    });
-  },
 });