[Media Router] Dropdown for media remoting controls.

The dropdown will replace the checkbox that is currently in place to
control whether media remoting is enabled.

Note that this is not meant to be the final iteration of the UX; it is
however an improvement over the existing checkbox and is a reasonable
interim solution (while we gather feedback + do another UX study)

Screenshots:
LTR: https://screenshot.googleplex.com/dSPAZY4yHd5
RTL: https://screenshot.googleplex.com/apBUWUvp74q

BUG=774245

Cq-Include-Trybots: master.tryserver.chromium.linux:closure_compilation
Change-Id: I296c47cae0ecf4d16b5b645f92af00a2e1161d4f
Reviewed-on: https://chromium-review.googlesource.com/804138
Commit-Queue: Derek Cheng <imcheng@chromium.org>
Reviewed-by: mark a. foltz <mfoltz@chromium.org>
Cr-Commit-Position: refs/heads/master@{#521604}

chrome/app/media_router_strings.grdp

@@ -185,7 +185,7 @@
     Always use mirroring
   </message>
   <message name="IDS_MEDIA_ROUTER_ROUTE_DETAILS_FULLSCREEN_VIDEOS_DROPDOWN_TITLE" desc="The title for a toggle setting to choose whether fullscreen videos should always be mirrored (played locally and remotely), or played only remotely.">
-    Show fullscreen videos on:
+    Show fullscreen videos on
   </message>
   <message name="IDS_MEDIA_ROUTER_ROUTE_DETAILS_FULLSCREEN_VIDEOS_BOTH_SCREENS" desc="Settings option to play fullscreen videos both locally and remotely.">
     Both screens

chrome/browser/resources/media_router/elements/route_controls/route_controls.css

@@ -84,12 +84,9 @@ paper-checkbox {
 }
 
 #hangouts-local-present-controls {
-  -webkit-font-smoothing: antialiased;
-  -webkit-tap-highlight-color: transparent;
   cursor: pointer;
   display: inline-block;
   float: right;
-  font-family: 'Roboto', 'Noto', sans-serif;
   padding-top: 10.5px;
   white-space: nowrap;
 }
@@ -105,16 +102,14 @@ paper-checkbox {
   width: 249px;
 }
 
-#always-use-mirroring-checkbox {
-  --paper-checkbox-vertical-align: middle;
-  --paper-checkbox-label-spacing: 10%;
-  padding: 0.3em 0 0.3em 0;
-  width: 100%;
-}
-
-#media-remoting-enabled-controls {
+#mirroring-fullscreen-video-controls {
   display: inline-block;
   font-size: 0.8em;
-  margin: 2px 8px;
-  width: 100%;
+  margin: 15px 8px 3px 8px;
+  vertical-align: middle;
+  white-space: nowrap;
+}
+
+#mirroring-fullscreen-video-dropdown {
+  width: auto;
 }

chrome/browser/resources/media_router/elements/route_controls/route_controls.html

+<link rel="import" href="chrome://resources/html/md_select_css.html">
 <link rel="import" href="chrome://resources/html/polymer.html">
 <link rel="import" href="chrome://resources/html/i18n_behavior.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icons/av-icons.html">
@@ -7,6 +8,7 @@
   <link rel="import" type="css" href="../../media_router_common.css">
   <link rel="import" type="css" href="route_controls.css">
   <template>
+    <style include="md-select"></style>
     <div id="media-controls">
       <div class="ellipsis" id="route-description"
            title="[[routeDescription_]]">
@@ -81,14 +83,22 @@
             </paper-checkbox>
           </div>
         </div>
-        <div id="media-remoting-enabled-controls"
+        <div id="mirroring-fullscreen-video-controls"
              hidden="[[!routeStatus.mirroringExtraData]]">
-          <paper-checkbox
-              checked="[[!mediaRemotingEnabled_]]"
-              id="always-use-mirroring-checkbox"
-              on-change="onMediaRemotingEnabledChange_">
-            <span>[[i18n('alwaysUseMirroringTitle')]]</span>
-          </paper-checkbox>
+          [[i18n('fullscreenVideosDropdownTitle')]]
+          <span class="md-select-wrapper">
+            <select class="md-select"
+                    id="mirroring-fullscreen-video-dropdown"
+                    on-change="onFullscreenVideoDropdownChange_">
+                <option value="[[FullscreenVideoOption_.REMOTE_SCREEN]]">
+                  [[i18n('fullscreenVideosRemoteScreen')]]
+                </option>
+                <option value="[[FullscreenVideoOption_.BOTH_SCREENS]]">
+                  [[i18n('fullscreenVideosBothScreens')]]
+                </option>
+            </select>
+            <span class="md-select-underline"></span>
+          </span>
         </div>
       </div>
     </div>

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

@@ -11,6 +11,20 @@ Polymer({
   is: 'route-controls',
 
   properties: {
+    /**
+     * Set of possible options for playing fullscreen videos when mirroring.
+     * @private {!Object}
+     */
+    FullscreenVideoOption_: {
+      type: Object,
+      value: {
+        // Play on remote screen only.
+        REMOTE_SCREEN: 'remote_screen',
+        // Play on both remote and local screens.
+        BOTH_SCREENS: 'both_screens'
+      }
+    },
+
     /**
      * The current time displayed in seconds, before formatting.
      * @private {number}
@@ -371,8 +385,16 @@ Polymer({
     }
     this.hangoutsLocalPresent_ = !!newRouteStatus.hangoutsExtraData &&
         newRouteStatus.hangoutsExtraData.localPresent;
-    this.mediaRemotingEnabled_ = !!newRouteStatus.mirroringExtraData &&
-        newRouteStatus.mirroringExtraData.mediaRemotingEnabled;
+    if (newRouteStatus.mirroringExtraData) {
+      // Manually update the selected value on the
+      // mirroring-fullscreen-video-dropdown dropbox.
+      // TODO(imcheng): Avoid doing this by wrapping the dropbox in a Polymer
+      // template, or introduce <paper-dropdown-menu> to the Polymer library.
+      this.$['mirroring-fullscreen-video-dropdown'].value =
+          newRouteStatus.mirroringExtraData.mediaRemotingEnabled ?
+          this.FullscreenVideoOption_.REMOTE_SCREEN :
+          this.FullscreenVideoOption_.BOTH_SCREENS;
+    }
   },
 
   /**
@@ -446,13 +468,16 @@ Polymer({
   },
 
   /**
-   * Called when the "always use mirroring" box is changed by the user.
-   * @param {!Event} e "always use mirroring" paper-checkbox's change event
+   * Called when the value on the mirroring-fullscreen-video-dropdown dropdown
+   * menu changes.
+   * @param {!Event} e
    * @private
    */
-  onMediaRemotingEnabledChange_: function(e) {
-    this.mediaRemotingEnabled_ = !e.target.checked;
-    media_router.browserApi.setMediaRemotingEnabled(this.mediaRemotingEnabled_);
+  onFullscreenVideoDropdownChange_: function(e) {
+    /** @const */ var dropdownValue =
+        this.$['mirroring-fullscreen-video-dropdown'].value;
+    media_router.browserApi.setMediaRemotingEnabled(
+        dropdownValue == this.FullscreenVideoOption_.REMOTE_SCREEN);
   },
 
   /**

chrome/browser/resources/media_router/media_router.css

@@ -3,7 +3,6 @@
  * found in the LICENSE file. */
 
 body {
-  font-family: Roboto;
   font-size: 0.75em;
   margin: 0;
 }

chrome/browser/resources/media_router/media_router_common.css

@@ -8,6 +8,9 @@
   --dialog-width: 340px;
   --navigation-icon-button-size: 36px;
   --non-navigation-icon-size: 16px;
+  -webkit-font-smoothing: antialiased;
+  -webkit-tap-highlight-color: transparent;
+  font-family: 'Roboto', 'Noto', sans-serif;
 }
 
 .button {

chrome/browser/ui/webui/media_router/media_router_localized_strings_provider.cc

@@ -62,6 +62,15 @@ void AddRouteDetailsStrings(content::WebUIDataSource* html_source) {
   html_source->AddLocalizedString(
       "alwaysUseMirroringTitle",
       IDS_MEDIA_ROUTER_ROUTE_DETAILS_ALWAYS_USE_MIRRORING_TITLE);
+  html_source->AddLocalizedString(
+      "fullscreenVideosDropdownTitle",
+      IDS_MEDIA_ROUTER_ROUTE_DETAILS_FULLSCREEN_VIDEOS_DROPDOWN_TITLE);
+  html_source->AddLocalizedString(
+      "fullscreenVideosRemoteScreen",
+      IDS_MEDIA_ROUTER_ROUTE_DETAILS_FULLSCREEN_VIDEOS_REMOTE_SCREEN);
+  html_source->AddLocalizedString(
+      "fullscreenVideosBothScreens",
+      IDS_MEDIA_ROUTER_ROUTE_DETAILS_FULLSCREEN_VIDEOS_BOTH_SCREENS);
 }
 
 void AddIssuesStrings(content::WebUIDataSource* html_source) {

chrome/test/data/webui/media_router/route_controls_tests.js

@@ -273,24 +273,29 @@ cr.define('route_controls', function() {
       });
 
       test('set media remoting enabled', function(done) {
-        assertElementHidden('media-remoting-enabled-controls');
+        assertElementHidden('mirroring-fullscreen-video-controls');
         let routeStatus = createRouteStatus();
         controls.routeStatus = routeStatus;
-        assertElementHidden('media-remoting-enabled-controls');
+        assertElementHidden('mirroring-fullscreen-video-controls');
 
         routeStatus = createRouteStatus();
         routeStatus.mirroringExtraData = {mediaRemotingEnabled: true};
         controls.routeStatus = routeStatus;
-        assertElementShown('media-remoting-enabled-controls');
-        assertFalse(controls.$$('#always-use-mirroring-checkbox').checked);
+        assertElementShown('mirroring-fullscreen-video-controls');
+        assertEquals(controls.FullscreenVideoOption_.REMOTE_SCREEN,
+            controls.$$('#mirroring-fullscreen-video-dropdown').value);
 
         document.addEventListener('mock-set-media-remoting-enabled',
             function(e) {
+              assertFalse(e.detail.enabled);
               done();
             });
 
-        MockInteractions.tap(controls.$$('#always-use-mirroring-checkbox'));
-        assertTrue(controls.$$('#always-use-mirroring-checkbox').checked);
+        // Simulate changing the dropdown menu value.
+        controls.$$('#mirroring-fullscreen-video-dropdown').value =
+            controls.FullscreenVideoOption_.BOTH_SCREENS;
+        controls.$$('#mirroring-fullscreen-video-dropdown').dispatchEvent(
+            new Event('change'));
       });
 
       test('hangouts local present mode', function(done) {