Reordering media controls to match the new spec.

BUG=601247

Review-Url: https://codereview.chromium.org/2301823002
Cr-Commit-Position: refs/heads/master@{#419196}

chrome/android/javatests/src/org/chromium/chrome/browser/media/remote/CastTestBase.java

@@ -535,7 +535,7 @@ public abstract class CastTestBase extends ChromeActivityTestCaseBase<ChromeActi
         return new Rect(left, bar.top, right, bar.bottom);
     }
 
-    private Rect downloadButton(Rect videoRect) {
+    private Rect castButton(Rect videoRect) {
         Rect bar = controlBar(videoRect);
         int right = bar.right - BUTTON_RIGHT_MARGIN;
         int left = right - BUTTON_WIDTH;
@@ -549,11 +549,11 @@ public abstract class CastTestBase extends ChromeActivityTestCaseBase<ChromeActi
         return new Rect(left, downloadButton.top, right, downloadButton.bottom);
     }
 
-    private Rect castButton(Rect videoRect) {
-        Rect fullscreenButton = fullscreenButton(videoRect);
-        int right = fullscreenButton.left;
+    private Rect downloadButton(Rect videoRect) {
+        Rect castButton = castButton(videoRect);
+        int right = castButton.right - BUTTON_RIGHT_MARGIN;
         int left = right - BUTTON_WIDTH;
-        return new Rect(left, fullscreenButton.top, right, fullscreenButton.bottom);
+        return new Rect(left, castButton.top, right, castButton.bottom);
     }
 
     private void tapButton(Tab tab, Rect rect) {

third_party/WebKit/LayoutTests/media/controls-cast-button.html

@@ -35,9 +35,9 @@ async_test(function(t) {
         var overlayButton = overlayCastButton(video);
         assert_equals(overlayButton.style.display, "none", "Overlay button should not be visible with controls");
 
-        // And to the left of the fullscreen button
+        // And to the right of the fullscreen button
         var fullscreenPosition = mediaControlsButtonCoordinates(video, "fullscreen-button");
-        assert_less_than(x, fullscreenPosition[0], "button should be to left of fullscreen button");
+        assert_greater_than(x, fullscreenPosition[0], "button should be to right of fullscreen button");
 
         // Remove cast device - cast button should go away
         internals.mediaPlayerRemoteRouteAvailabilityChanged(video, false);
@@ -60,4 +60,4 @@ async_test(function(t) {
         return button;
     }
 });
-</script>
\ No newline at end of file
+</script>

third_party/WebKit/LayoutTests/media/overflow-menu.js

 // We expect the items in the overflow to appear in the following ordering.
 var overflowButtonsCSS = [
+    "-webkit-media-controls-play-button",
+    "-webkit-media-controls-fullscreen-button",
+    "-internal-download-button",
     "-webkit-media-controls-mute-button",
     "-internal-media-controls-cast-button",
-    "-webkit-media-controls-toggle-closed-captions-button",
-    "-webkit-media-controls-fullscreen-button",
-    "-webkit-media-controls-play-button",
-    "-internal-download-button"];
+    "-webkit-media-controls-toggle-closed-captions-button"];
 //  PseudoID for the overflow button
 var menuID = "-internal-overflow-menu-button";
 //  PseudoID for the overflow list
@@ -23,14 +23,14 @@ function getOverflowList(media) {
 
 // Location of media control element in the overflow button
 var OverflowMenuButtons = {
-  MUTE: 0,
-  CAST: 1,
-  CLOSED_CAPTIONS: 2,
-  FULLSCREEN: 3,
-  PLAY: 4,
-  DOWNLOAD: 5,
+  PLAY: 0,
+  FULLSCREEN: 1,
+  DOWNLOAD: 2,
+  MUTE: 3,
+  CAST: 4,
+  CLOSED_CAPTIONS: 5,
 };
 
 // Default text within the overflow menu
-var overflowMenuText = ["Mute", "Cast", "Captions", "Fullscreen", "Play", "Download"];
+var overflowMenuText = ["Play", "Fullscreen", "Download", "Mute", "Cast", "Captions"];
 

third_party/WebKit/LayoutTests/media/track/text-track-selection-menu-add-track.html

@@ -4,7 +4,8 @@
 <script src="../../resources/testharnessreport.js"></script>
 <script src="../media-file.js"></script>
 <script src="../media-controls.js"></script>
-<video controls>
+<!-- Width should be large enough to display closed captions button. -->
+<video controls style="width: 500px">
     <track src="captions-webvtt/captions.vtt" kind="captions" label="English" srclang="en" default>
 </video>
 <script>
@@ -32,4 +33,4 @@ async_test(function(t) {
 
     video.src = findMediaFile("video", "../content/test");
 })
-</script>
\ No newline at end of file
+</script>

third_party/WebKit/LayoutTests/media/track/text-track-selection-menu-multiple-tracks.html

@@ -4,7 +4,8 @@
 <script src="../../resources/testharnessreport.js"></script>
 <script src="../media-file.js"></script>
 <script src="../media-controls.js"></script>
-<video controls></video>
+<!-- Width should be large enough to display closed captions button. -->
+<video controls style="width: 500px"></video>
 <script>
 async_test(function(t) {
     var video = document.querySelector("video");
@@ -33,4 +34,4 @@ async_test(function(t) {
 
     video.src = findMediaFile("video", "../content/test");
 });
-</script>
\ No newline at end of file
+</script>

third_party/WebKit/LayoutTests/media/video-controls-overflow-menu-updates-appropriately.html

@@ -28,7 +28,7 @@ async_test(function(t) {
     // Cast option in overflow should no longer be visible, but the other
     // options should all be.
     var buttonsWithoutCast = overflowButtonsCSS;
-    buttonsWithoutCast[1] = undefined;
+    buttonsWithoutCast[OverflowMenuButtons.CAST] = undefined;
     internals.mediaPlayerRemoteRouteAvailabilityChanged(video, false);
 
     var children = overflowList.children;
@@ -42,12 +42,12 @@ async_test(function(t) {
       }
     }
     internals.mediaPlayerRemoteRouteAvailabilityChanged(video, true);
-    assert_not_equals(getComputedStyle(children[1]).display, "none");
+    assert_not_equals(getComputedStyle(children[OverflowMenuButtons.CAST]).display, "none");
 
     // Removing closed captions hides button in overflow menu
-    assert_not_equals(getComputedStyle(children[2]).display, "none");
+    assert_not_equals(getComputedStyle(children[OverflowMenuButtons.CLOSED_CAPTIONS]).display, "none");
     video.removeChild(trackElement);
-    assert_equals(getComputedStyle(children[2]).display, "none");
+    assert_equals(getComputedStyle(children[OverflowMenuButtons.CLOSED_CAPTIONS]).display, "none");
   });
 });
 </script>

third_party/WebKit/LayoutTests/media/video-controls-track-selection-menu.html

@@ -5,7 +5,8 @@
 <script src="track/track-helpers.js"></script>
 <script src="media-file.js"></script>
 <script src="media-controls.js"></script>
-<video controls>
+<!-- Width should be large enough to display closed captions button. -->
+<video controls style="width: 500px">
     <track src="track/captions-webvtt/captions.vtt" kind="captions" label="Track1">
     <track src="track/captions-webvtt/long-word.vtt" kind="captions" label="Track2">
 </video>
@@ -47,4 +48,4 @@ async_test(function(t) {
         video.src = findMediaFile("video", "content/test");
     }
 });
-</script>
\ No newline at end of file
+</script>

third_party/WebKit/Source/core/html/shadow/MediaControls.cpp

@@ -223,14 +223,6 @@ void MediaControls::initializeControls()
     if (m_allowHiddenVolumeControls && preferHiddenVolumeControls(document()))
         m_volumeSlider->setIsWanted(false);
 
-    MediaControlToggleClosedCaptionsButtonElement* toggleClosedCaptionsButton = MediaControlToggleClosedCaptionsButtonElement::create(*this);
-    m_toggleClosedCaptionsButton = toggleClosedCaptionsButton;
-    panel->appendChild(toggleClosedCaptionsButton);
-
-    MediaControlCastButtonElement* castButton = MediaControlCastButtonElement::create(*this, false);
-    m_castButton = castButton;
-    panel->appendChild(castButton);
-
     MediaControlFullscreenButtonElement* fullscreenButton = MediaControlFullscreenButtonElement::create(*this);
     m_fullscreenButton = fullscreenButton;
     panel->appendChild(fullscreenButton);
@@ -239,6 +231,14 @@ void MediaControls::initializeControls()
     m_downloadButton = downloadButton;
     panel->appendChild(downloadButton);
 
+    MediaControlCastButtonElement* castButton = MediaControlCastButtonElement::create(*this, false);
+    m_castButton = castButton;
+    panel->appendChild(castButton);
+
+    MediaControlToggleClosedCaptionsButtonElement* toggleClosedCaptionsButton = MediaControlToggleClosedCaptionsButtonElement::create(*this);
+    m_toggleClosedCaptionsButton = toggleClosedCaptionsButton;
+    panel->appendChild(toggleClosedCaptionsButton);
+
     m_panel = panel;
     enclosure->appendChild(panel);
 
@@ -257,13 +257,15 @@ void MediaControls::initializeControls()
     m_overflowList = overflowList;
     appendChild(overflowList);
 
-    // The order in which we append elements to the overflow list does matter.
+    // The order in which we append elements to the overflow list is significant
+    // because it determines how the elements show up in the overflow menu relative to each other.
+    // The first item appended appears at the top of the overflow menu.
+    m_overflowList->appendChild(m_playButton->createOverflowElement(*this, MediaControlPlayButtonElement::create(*this)));
+    m_overflowList->appendChild(m_fullscreenButton->createOverflowElement(*this, MediaControlFullscreenButtonElement::create(*this)));
+    m_overflowList->appendChild(m_downloadButton->createOverflowElement(*this, MediaControlDownloadButtonElement::create(*this)));
     m_overflowList->appendChild(m_muteButton->createOverflowElement(*this, MediaControlMuteButtonElement::create(*this)));
     m_overflowList->appendChild(m_castButton->createOverflowElement(*this, MediaControlCastButtonElement::create(*this, false)));
     m_overflowList->appendChild(m_toggleClosedCaptionsButton->createOverflowElement(*this, MediaControlToggleClosedCaptionsButtonElement::create(*this)));
-    m_overflowList->appendChild(m_fullscreenButton->createOverflowElement(*this, MediaControlFullscreenButtonElement::create(*this)));
-    m_overflowList->appendChild(m_playButton->createOverflowElement(*this, MediaControlPlayButtonElement::create(*this)));
-    m_overflowList->appendChild(m_downloadButton->createOverflowElement(*this, MediaControlDownloadButtonElement::create(*this)));
 }
 
 void MediaControls::reset()
@@ -716,12 +718,12 @@ void MediaControls::computeWhichControlsFit()
         m_playButton.get(),
         m_fullscreenButton.get(),
         m_downloadButton.get(),
-        m_toggleClosedCaptionsButton.get(),
         m_timeline.get(),
-        m_currentTimeDisplay.get(),
+        m_muteButton.get(),
         m_volumeSlider.get(),
+        m_toggleClosedCaptionsButton.get(),
         m_castButton.get(),
-        m_muteButton.get(),
+        m_currentTimeDisplay.get(),
         m_durationDisplay.get(),
     };