[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,' +
+          'isExtensionViewReady_)',
+    },
+
+    /**
      * 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.
+     * @private {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.

[imcheng, 2017/05/05 21:36:40]

@type {boolean}

[takumif, 2017/05/09 00:14:57]

Done.

      */
-    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 36 matching lines @@
     if (!route.currentCastMode) {
       return true;
     }
     var selectedCastMode =
         this.computeSelectedCastMode_(shownCastModeValue, sink);
     return (selectedCastMode != 0) &&
         (selectedCastMode != route.currentCastMode);
   },
 
   /**
+   * @param {bool} useWebUiRouteControls

[imcheng, 2017/05/05 21:36:41]

s/bool/boolean here and below

[takumif, 2017/05/09 00:14:57]

Done.

+   * @param {bool} 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;
   },
 
   /**
-   * 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() {
+  maybeLoadExtensionView_: function() {
     this.activityStatus_ = this.route ?
         loadTimeData.getStringF('castingActivityStatus',
                                 this.route.description) :
         '';
 
     if (!this.route || !this.route.customControllerPath) {
-      this.isCustomControllerHidden_ = true;
+      this.isExtensionViewReady_ = false;
       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_)
+        this.shouldShowExtensionView_) {
       return;
+    }
 
     var that = this;
     extensionview.load(this.route.customControllerPath)
     .then(function() {
       // Load was successful; show the custom controller.
-      that.isCustomControllerHidden_ = false;
+      that.isExtensionViewReady_ = true;
     }, function() {
       // Load was unsuccessful; fall back to default view.
-      that.isCustomControllerHidden_ = true;
+      that.isExtensionViewReady_ = false;
     });
   },
+
+  /**
+   * Called when the route details view is closed.
+   */
+  onClosed: function() {
+    if (this.$$('route-controls')) {
+      this.$$('route-controls').onRouteDetailsClosed();
+    }
+  },
+
+  /**
+   * Called when the route details view is opened.
+   */
+  onOpened: function() {
+    media_router.ui.setRouteControls(this.$$('route-controls'));

[imcheng, 2017/05/05 21:36:40]

Similar comment to the one in media_router_container.js -- this should only be
called if we are using the webui controller. So maybe this coudld be:

if (this.$$('route-controls')) {
  this.$$('route-controls').attach();
}

(where attach() would call media_router.ui.setRouteControls(this);, and is also
called on ready())

[takumif, 2017/05/09 00:14:57]

Thinking about this, since route-controls isn't a dom-if, it should always
exist. So there's no need to check for existence (and we can use $[] instead of
$$() ). We can use this.useWebUiRouteControls to check if we should call this.

+  },
+
+  /**
+   * Updates either the extension view or the new route controller, depending on
+   * which should be shown.
+   * @private
+   */
+  onRouteChange_: function(newRoute) {
+    if (!this.useWebUiRouteControls) {
+      this.maybeLoadExtensionView_();
+    }
+    if (newRoute && this.$$('route-controls')) {
+      this.$$('route-controls').onRouteUpdated(newRoute);
+    }
+  },
+
+  /**
+   * @param {number} controllerType
+   * @return {bool} 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 {bool} 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 {bool} 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)
+      });
+    }
+  },
 });