Skip to content

GitLab

T
tangled
Commit cee291fd authored by Hector Carmona's avatar Hector Carmona Committed by Commit Bot
Browse files
Options

Revert "Media Controls: Replace painter with CSS." 

This reverts commit d94db169.

Reason for revert: Seeing lots of layout failures. Suspecting this CL.
https://uberchromegw.corp.google.com/i/chromium.webkit/builders/WebKit%20Linux%20Trusty%20Leak

Original change's description:
> Media Controls: Replace painter with CSS.
> 
> Replace MediaControlPainter with CSS. Add some classes to some
> elements to allow styling by state. This is a resubmit of the
> button code only from crrev.com/c/584771.
> 
> BUG=746872
> 
> TBR=pfeldman@chromium.org
> 
> Change-Id: If79ce339a10f6671ddd02a223468bb3d7bbcd1df
> Reviewed-on: https://chromium-review.googlesource.com/657024
> Commit-Queue: Becca Hughes <beccahughes@chromium.org>
> Reviewed-by: Becca Hughes <beccahughes@chromium.org>
> Reviewed-by: Mounir Lamouri <mlamouri@chromium.org>
> Cr-Commit-Position: refs/heads/master@{#504095}

TBR=mlamouri@chromium.org,pfeldman@chromium.org,beccahughes@chromium.org

Change-Id: I698bec05d24045896e664e287415cba5f19d9f60
No-Presubmit: true
No-Tree-Checks: true
No-Try: true
Bug: 746872
Reviewed-on: https://chromium-review.googlesource.com/683434Reviewed-by: default avatarHector Carmona <hcarmona@chromium.org>
Commit-Queue: Hector Carmona <hcarmona@chromium.org>
Cr-Commit-Position: refs/heads/master@{#504238}
parent bfcf3bb0
Hide whitespace changes
Inline Side-by-side
Showing with 23 additions and 292 deletions
content/child/blink_platform_impl.cc
View file @ cee291fd
......@@ -559,7 +559,7 @@ const DataResource kDataResources[] = {
{"svg.css", IDR_UASTYLE_SVG_CSS, ui::SCALE_FACTOR_NONE, true},
{"mathml.css", IDR_UASTYLE_MATHML_CSS, ui::SCALE_FACTOR_NONE, true},
{"mediaControls.css", IDR_UASTYLE_MEDIA_CONTROLS_CSS, ui::SCALE_FACTOR_NONE,
false},
true},
{"fullscreen.css", IDR_UASTYLE_FULLSCREEN_CSS, ui::SCALE_FACTOR_NONE, true},
{"xhtmlmp.css", IDR_UASTYLE_XHTMLMP_CSS, ui::SCALE_FACTOR_NONE, true},
{"viewportAndroid.css", IDR_UASTYLE_VIEWPORT_ANDROID_CSS,
......
third_party/WebKit/LayoutTests/media/controls/closed-captions-single-track.html
View file @ cee291fd
......@@ -36,7 +36,6 @@ async_test(t => {
// Captions track should become visible after the closed caption button is pressed.
checkCaptionsVisible(video, captions);
checkButtonHasClass(toggleClosedCaptionsButton(video), "visible");
// Click the closed captions button again and make sure the menu does not appear.
clickCaptionButton(video);
......@@ -44,7 +43,6 @@ async_test(t => {
// Captions track should become invisible after the closed caption button is pressed.
checkCaptionsHidden(video);
checkButtonNotHasClass(toggleClosedCaptionsButton(video), "visible");
}));
});
......
third_party/WebKit/LayoutTests/media/controls/toggle-class-with-state-cast.html deleted 100644 → 0
View file @ bfcf3bb0
<!DOCTYPE html>
<html>
<title>Test that player state is reflected in CSS classes on the cast button.</title>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="../media-controls.js"></script>
<script src="../media-file.js"></script>
<video controls width=400></video>
<script>
async_test(t => {
var video = document.querySelector('video');
video.onloadedmetadata = t.step_func_done(function() {
// Pretend we have a cast device.
internals.mediaPlayerRemoteRouteAvailabilityChanged(video, true);
checkButtonNotHasClass(castButton(video), 'on');
// Pretend we are casting.
internals.mediaPlayerPlayingRemotelyChanged(video, true);
checkButtonHasClass(castButton(video), 'on');
});
video.src = findMediaFile("video", "../content/counting");
video.play();
});
</script>
</html>
third_party/WebKit/LayoutTests/media/controls/toggle-class-with-state-fullscreen.html deleted 100644 → 0
View file @ bfcf3bb0
<!DOCTYPE html>
<html>
<title>Test that player state is reflected in CSS classes on the fullscreen button.</title>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="../media-controls.js"></script>
<script src="../media-file.js"></script>
<video controls width=400></video>
<script>
async_test(t => {
var video = document.querySelector('video');
video.onwebkitfullscreenchange = t.step_func_done(_ => {
checkButtonHasClass(fullscreenButton(video), 'fullscreen');
});
document.onclick = t.step_func(_ => {
fullscreenButton(video).click();
});
video.onplay = t.step_func(_ => {
checkButtonNotHasClass(fullscreenButton(video), 'fullscreen');
clickAtCoordinates(1, 1);
});
video.src = findMediaFile("video", "../content/counting");
video.play();
});
</script>
</html>
third_party/WebKit/LayoutTests/media/controls/toggle-class-with-state-mute.html deleted 100644 → 0
View file @ bfcf3bb0
<!DOCTYPE html>
<html>
<title>Test that player state is reflected in CSS classes on the mute button.</title>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="../media-controls.js"></script>
<script src="../media-file.js"></script>
<video controls width=400></video>
<script>
async_test(t => {
var video = document.querySelector('video');
checkButtonNotHasClass(muteButton(video), 'muted');
t.step_func(_ => {
video.muted = true;
setTimeout(t.step_func_done(_ => {
checkButtonHasClass(muteButton(video), 'muted');
}));
})();
});
</script>
</html>
third_party/WebKit/LayoutTests/media/controls/toggle-class-with-state-overlay-cast.html deleted 100644 → 0
View file @ bfcf3bb0
<!DOCTYPE html>
<html>
<title>Test that player state is reflected in CSS classes on the overlay cast button.</title>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="../media-controls.js"></script>
<script src="../media-file.js"></script>
<video controls width=400></video>
<script>
async_test(t => {
var video = document.querySelector('video');
video.onloadedmetadata = t.step_func_done(function() {
// Pretend we have a cast device.
internals.mediaPlayerRemoteRouteAvailabilityChanged(video, true);
checkButtonNotHasClass(overlayCastButton(video), 'on');
// Pretend we are casting.
internals.mediaPlayerPlayingRemotelyChanged(video, true);
checkButtonHasClass(overlayCastButton(video), 'on');
});
video.src = findMediaFile("video", "../content/counting");
video.play();
});
</script>
</html>
third_party/WebKit/LayoutTests/media/controls/toggle-class-with-state-pause.html deleted 100644 → 0
View file @ bfcf3bb0
<!DOCTYPE html>
<html>
<title>Test that player state is reflected in CSS classes on the play button.</title>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="../media-controls.js"></script>
<script src="../media-file.js"></script>
<video controls width=400></video>
<script>
async_test(t => {
var video = document.querySelector('video');
video.onplay = t.step_func(_ => {
checkButtonNotHasClass(playButton(video), 'pause');
video.pause();
});
video.src = findMediaFile("video", "../content/counting");
video.play().catch(t.step_func_done(_ => {
checkButtonHasClass(playButton(video), 'pause');
}));
});
</script>
</html>
third_party/WebKit/LayoutTests/media/media-controls.js
View file @ cee291fd
......@@ -163,18 +163,6 @@ function isClosedCaptionsButtonVisible(currentMediaElement)
return false;
}
function toggleClosedCaptionsButton(videoElement) {
return mediaControlsButton(videoElement, 'toggle-closed-captions-button');
}
function playButton(videoElement) {
return mediaControlsButton(videoElement, 'play-button');
}
function muteButton(videoElement) {
return mediaControlsButton(videoElement, 'mute-button');
}
function clickAtCoordinates(x, y)
{
eventSender.mouseMoveTo(x, y);
......
third_party/WebKit/LayoutTests/platform/mac/paint/invalidation/video-mute-repaint-expected.txt
View file @ cee291fd
......@@ -61,7 +61,7 @@
"reason": "full"
},
{
"object": "LayoutButton INPUT class='muted'",
"object": "LayoutButton INPUT",
"rect": [530, 493, 32, 32],
"reason": "full"
}
......@@ -86,7 +86,7 @@
"reason": "geometry"
},
{
"object": "LayoutButton INPUT class='muted'",
"object": "LayoutButton INPUT",
"reason": "full"
},
{
......
third_party/WebKit/LayoutTests/platform/win/paint/invalidation/video-mute-repaint-expected.txt
View file @ cee291fd
......@@ -61,7 +61,7 @@
"reason": "full"
},
{
"object": "LayoutButton INPUT class='muted'",
"object": "LayoutButton INPUT",
"rect": [530, 493, 32, 32],
"reason": "full"
}
......@@ -86,7 +86,7 @@
"reason": "geometry"
},
{
"object": "LayoutButton INPUT class='muted'",
"object": "LayoutButton INPUT",
"reason": "full"
},
{
......
third_party/WebKit/Source/modules/media_controls/elements/MediaControlCastButtonElement.cpp
View file @ cee291fd
......@@ -68,7 +68,6 @@ void MediaControlCastButtonElement::UpdateDisplayType() {
}
}
UpdateOverflowString();
SetClass("on", IsPlayingRemotely());
}
bool MediaControlCastButtonElement::WillRespondToMouseClickEvents() {
......
third_party/WebKit/Source/modules/media_controls/elements/MediaControlFullscreenButtonElement.cpp
View file @ cee291fd
......@@ -26,7 +26,6 @@ MediaControlFullscreenButtonElement::MediaControlFullscreenButtonElement(
void MediaControlFullscreenButtonElement::SetIsFullscreen(bool is_fullscreen) {
SetDisplayType(is_fullscreen ? kMediaExitFullscreenButton
: kMediaEnterFullscreenButton);
SetClass("fullscreen", is_fullscreen);
}
bool MediaControlFullscreenButtonElement::WillRespondToMouseClickEvents() {
......
third_party/WebKit/Source/modules/media_controls/elements/MediaControlInputElement.cpp
View file @ cee291fd
......@@ -4,7 +4,6 @@
#include "modules/media_controls/elements/MediaControlInputElement.h"
#include "core/dom/DOMTokenList.h"
#include "core/dom/events/Event.h"
#include "core/html/HTMLLabelElement.h"
#include "core/html/HTMLMediaElement.h"
......@@ -179,14 +178,6 @@ void MediaControlInputElement::RecordCTREvent(CTREvent event) {
ctr_histogram.Count(static_cast<int>(event));
}
void MediaControlInputElement::SetClass(const AtomicString& class_name,
bool should_have_class) {
if (should_have_class)
classList().Add(class_name);
else
classList().Remove(class_name);
}
DEFINE_TRACE(MediaControlInputElement) {
HTMLInputElement::Trace(visitor);
MediaControlElementBase::Trace(visitor);
......
third_party/WebKit/Source/modules/media_controls/elements/MediaControlInputElement.h
View file @ cee291fd
......@@ -59,9 +59,6 @@ class MODULES_EXPORT MediaControlInputElement : public HTMLInputElement,
// Returns whether this element is used for the overflow menu.
bool IsOverflowElement() const;
// Sets/removes a CSS class from this element based on |should_have_class|.
void SetClass(const AtomicString& class_name, bool should_have_class);
private:
friend class MediaControlInputElementTest;
......
third_party/WebKit/Source/modules/media_controls/elements/MediaControlMuteButtonElement.cpp
View file @ cee291fd
......@@ -28,9 +28,9 @@ void MediaControlMuteButtonElement::UpdateDisplayType() {
// TODO(mlamouri): checking for volume == 0 because the mute button will look
// 'muted' when the volume is 0 even if the element is not muted. This allows
// the painting and the display type to actually match.
bool muted = MediaElement().muted() || MediaElement().volume() == 0;
SetDisplayType(muted ? kMediaUnMuteButton : kMediaMuteButton);
SetClass("muted", muted);
SetDisplayType((MediaElement().muted() || MediaElement().volume() == 0)
? kMediaUnMuteButton
: kMediaMuteButton);
UpdateOverflowString();
}
......
third_party/WebKit/Source/modules/media_controls/elements/MediaControlPlayButtonElement.cpp
View file @ cee291fd
......@@ -28,7 +28,6 @@ bool MediaControlPlayButtonElement::WillRespondToMouseClickEvents() {
void MediaControlPlayButtonElement::UpdateDisplayType() {
SetDisplayType(MediaElement().paused() ? kMediaPlayButton
: kMediaPauseButton);
SetClass("pause", MediaElement().paused());
UpdateOverflowString();
}
......
third_party/WebKit/Source/modules/media_controls/elements/MediaControlToggleClosedCaptionsButtonElement.cpp
View file @ cee291fd
......@@ -31,7 +31,6 @@ void MediaControlToggleClosedCaptionsButtonElement::UpdateDisplayType() {
bool captions_visible = MediaElement().TextTracksVisible();
SetDisplayType(captions_visible ? kMediaHideClosedCaptionsButton
: kMediaShowClosedCaptionsButton);
SetClass("visible", captions_visible);
}
WebLocalizedString::Name
......
third_party/WebKit/Source/modules/media_controls/resources/mediaControls.css
View file @ cee291fd
......@@ -107,12 +107,7 @@ video:-webkit-full-page-media::-webkit-media-controls-panel {
}
audio::-webkit-media-controls-mute-button, video::-webkit-media-controls-mute-button {
-webkit-appearance: -internal-media-control;
background-image: -webkit-image-set(
url(default_100_percent/mediaplayer_sound_not_muted.png) 1x);
background-size: 32px;
background-repeat: no-repeat;
background-position: center center;
-webkit-appearance: media-mute-button;
display: flex;
flex: none;
box-sizing: border-box;
......@@ -124,12 +119,6 @@ audio::-webkit-media-controls-mute-button, video::-webkit-media-controls-mute-bu
color: inherit;
}
audio::-webkit-media-controls-mute-button.muted,
video::-webkit-media-controls-mute-button.muted {
background-image: -webkit-image-set(
url(default_100_percent/mediaplayer_sound_muted.png) 1x);
}
audio::-webkit-media-controls-overlay-enclosure {
display: none;
}
......@@ -152,12 +141,7 @@ video::-webkit-media-controls-overlay-enclosure {
}
video::-webkit-media-controls-overlay-play-button {
-webkit-appearance: -internal-media-control;
background-image: -webkit-image-set(
url(default_100_percent/mediaplayer_overlay_play.png) 1x);
background-size: 48px;
background-repeat: no-repeat;
background-position: center center;
-webkit-appearance: media-overlay-play-button;
display: flex;
position: absolute;
top: 0;
......@@ -202,13 +186,7 @@ video::-internal-media-remoting-background-image {
}
video::-internal-media-remoting-cast-icon {
-webkit-appearance: none;
background-image: -webkit-image-set(
url(default_100_percent/mediaremoting_cast.png) 1x,
url(default_200_percent/mediaremoting_cast.png) 2x);
background-size: 32px;
background-repeat: no-repeat;
background-position: center center;
-webkit-appearance: -internal-media-remoting-cast-icon;
display: flex;
position: absolute;
margin: 0px;
......@@ -265,12 +243,7 @@ video::-internal-media-remoting-disable-button:hover {
}
video::-internal-media-controls-overlay-cast-button {
-webkit-appearance: none;
background-image: -webkit-image-set(
url(default_100_percent/mediaplayer_overlay_cast_off.png) 1x);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
-webkit-appearance: -internal-media-overlay-cast-off-button;
display: flex;
position: absolute;
top: 8px;
......@@ -285,18 +258,8 @@ video::-internal-media-controls-overlay-cast-button {
transition: opacity 0.3s;
}
video::-internal-media-controls-overlay-cast-button.on {
background-image: -webkit-image-set(
url(default_100_percent/mediaplayer_overlay_cast_on.png) 1x);
}
audio::-webkit-media-controls-play-button, video::-webkit-media-controls-play-button {
-webkit-appearance: -internal-media-control;
background-image: -webkit-image-set(
url(default_100_percent/mediaplayer_pause.png) 1x);
background-size: 32px;
background-repeat: no-repeat;
background-position: center center;
-webkit-appearance: media-play-button;
display: flex;
flex: none;
box-sizing: border-box;
......@@ -308,12 +271,6 @@ audio::-webkit-media-controls-play-button, video::-webkit-media-controls-play-bu
color: inherit;
}
audio::-webkit-media-controls-play-button.pause,
video::-webkit-media-controls-play-button.pause {
background-image: -webkit-image-set(
url(default_100_percent/mediaplayer_play.png) 1x);
}
audio::-webkit-media-controls-timeline-container, video::-webkit-media-controls-timeline-container {
-webkit-appearance: media-controls-background;
display: flex;
......@@ -441,12 +398,7 @@ input[type="range" i]::-webkit-media-slider-thumb {
}
audio::-webkit-media-controls-fullscreen-button, video::-webkit-media-controls-fullscreen-button {
-webkit-appearance: -internal-media-control;
background-image: -webkit-image-set(
url(default_100_percent/mediaplayer_enter_fullscreen.png) 1x);
background-size: 32px;
background-repeat: no-repeat;
background-position: center center;
-webkit-appearance: media-enter-fullscreen-button;
display: flex;
flex: none;
overflow: hidden;
......@@ -459,19 +411,8 @@ audio::-webkit-media-controls-fullscreen-button, video::-webkit-media-controls-f
color: inherit;
}
audio::-webkit-media-controls-fullscreen-button.fullscreen,
video::-webkit-media-controls-fullscreen-button.fullscreen {
background-image: -webkit-image-set(
url(default_100_percent/mediaplayer_exit_fullscreen.png) 1x);
}
audio::-internal-media-controls-cast-button, video::-internal-media-controls-cast-button {
-webkit-appearance: none;
background-image: -webkit-image-set(
url(default_100_percent/mediaplayer_cast_off.png) 1x);
background-size: 32px;
background-repeat: no-repeat;
background-position: center center;
-webkit-appearance: -internal-media-cast-off-button;
display: flex;
flex: none;
box-sizing: border-box;
......@@ -485,23 +426,12 @@ audio::-internal-media-controls-cast-button, video::-internal-media-controls-cas
color: inherit;
}
audio::-internal-media-controls-cast-button.on,
video::-internal-media-controls-cast-button.on {
background-image: -webkit-image-set(
url(default_100_percent/mediaplayer_cast_on.png) 1x);
}
audio::-webkit-media-controls-toggle-closed-captions-button {
display: none;
}
video::-webkit-media-controls-toggle-closed-captions-button {
-webkit-appearance: -internal-media-control;
background-image: -webkit-image-set(
url(default_100_percent/mediaplayer_closedcaption_disabled.png) 1x);
background-size: 32px;
background-repeat: no-repeat;
background-position: center center;
-webkit-appearance: media-toggle-closed-captions-button;
display: flex;
flex: none;
box-sizing: border-box;
......@@ -515,11 +445,6 @@ video::-webkit-media-controls-toggle-closed-captions-button {
color: inherit;
}
video::-webkit-media-controls-toggle-closed-captions-button.visible {
background-image: -webkit-image-set(
url(default_100_percent/mediaplayer_closedcaption.png) 1x);
}
video::-internal-media-controls-text-track-list, video::-internal-media-controls-overflow-menu-list, audio::-internal-media-controls-overflow-menu-list {
position: fixed;
background-color: #fafafa;
......@@ -550,12 +475,7 @@ video::-internal-media-controls-text-track-list-item:hover, video::-internal-med
}
video::-internal-media-controls-text-track-list-item-input {
-webkit-appearance: none;
background-image: -webkit-image-set(
url(default_100_percent/mediaplayer_trackselection_checkmark.png) 1x);
background-size: 32px;
background-repeat: no-repeat;
background-position: center center;
-webkit-appearance: -internal-media-track-selection-checkmark;
visibility: hidden;
left: 0;
vertical-align: middle;
......@@ -570,12 +490,7 @@ video::-internal-media-controls-text-track-list-item-input:checked {
}
video::-internal-media-controls-text-track-list-kind-captions {
-webkit-appearance: none;
background-image: -webkit-image-set(
url(default_100_percent/mediaplayer_closedcaptions_icon.png) 1x);
background-size: 32px;
background-repeat: no-repeat;
background-position: center center;
-webkit-appearance: -internal-media-closed-captions-icon;
height: 20px;
width: 20px;
margin-left: 10px;
......@@ -583,12 +498,7 @@ video::-internal-media-controls-text-track-list-kind-captions {
}
video::-internal-media-controls-text-track-list-kind-subtitles {
-webkit-appearance: none;
background-image: -webkit-image-set(
url(default_100_percent/mediaplayer_subtitles_icon.png) 1x);
background-size: 32px;
background-repeat: no-repeat;
background-position: center center;
-webkit-appearance: -internal-media-subtitles-icon;
height: 20px;
width: 20px;
margin-left: 10px;
......@@ -596,12 +506,7 @@ video::-internal-media-controls-text-track-list-kind-subtitles {
}
video::-internal-media-controls-overflow-button, audio::-internal-media-controls-overflow-button {
-webkit-appearance: none;
background-image: -webkit-image-set(
url(default_100_percent/mediaplayer_overflow_menu.png) 1x);
background-size: 32px;
background-repeat: no-repeat;
background-position: center center;
-webkit-appearance: -internal-media-overflow-button;
display: flex;
flex: none;
box-sizing: border-box;
......@@ -616,12 +521,7 @@ video::-internal-media-controls-overflow-button, audio::-internal-media-controls
}
video::-internal-media-controls-download-button, audio::-internal-media-controls-download-button {
-webkit-appearance: none;
background-image: -webkit-image-set(
url(default_100_percent/mediaplayer_download.png) 1x);
background-size: 32px;
background-repeat: no-repeat;
background-position: center center;
-webkit-appearance: -internal-media-download-button;
display: flex;
flex: none;
box-sizing: border-box;
......@@ -724,11 +624,3 @@ video::cue(u) {
video::cue(i) {
font-style: italic;
}
.state-no-source input[pseudo="-webkit-media-controls-play-button"],
.state-no-source input[pseudo="-webkit-media-controls-mute-button"],
.state-no-source input[pseudo="-webkit-media-controls-overlay-play-button"],
.state-no-source input[pseudo="-webkit-media-controls-fullscreen-button"],
.state-no-source input[pseudo="-internal-media-controls-download-button"] {
opacity: 0.4;
}
third_party/WebKit/Source/modules/media_controls/resources/media_controls_resources.grd
View file @ cee291fd
......@@ -30,10 +30,10 @@
<structure type="chrome_scaled_image" name="IDR_MEDIAPLAYER_OVERFLOW_MENU_ICON" file="mediaplayer_overflow_menu.png" />
<structure type="chrome_scaled_image" name="IDR_MEDIAPLAYER_DOWNLOAD_ICON" file="mediaplayer_download.png" />
<structure type="chrome_scaled_image" name="IDR_MEDIAPLAYER_SUBTITLES_ICON" file="mediaplayer_subtitles_icon.png" />
<structure type="chrome_html" name="IDR_UASTYLE_MEDIA_CONTROLS_CSS" file="mediaControls.css" flattenhtml="true" />
</structures>
<includes>
<include name="IDR_UASTYLE_MEDIA_CONTROLS_ANDROID_CSS" file="mediaControlsAndroid.css" type="BINDATA" compress="gzip" />
<include name="IDR_UASTYLE_MEDIA_CONTROLS_ANDROID_CSS" file="mediaControlsAndroid.css" type="chrome_html" compress="gzip" />
<include name="IDR_UASTYLE_MEDIA_CONTROLS_CSS" file="mediaControls.css" type="chrome_html" compress="gzip" />
</includes>
</release>
</grit>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment