Skip to content

GitLab

T
tangled
Commit d94db169 authored by Becca Hughes's avatar Becca Hughes Committed by Commit Bot
Browse files
Options

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: default avatarBecca Hughes <beccahughes@chromium.org>
Reviewed-by: default avatarMounir Lamouri <mlamouri@chromium.org>
Cr-Commit-Position: refs/heads/master@{#504095}
parent a5d3a9cf
Hide whitespace changes
Inline Side-by-side
Showing with 292 additions and 23 deletions
content/child/blink_platform_impl.cc
View file @ d94db169
...@@ -559,7 +559,7 @@ const DataResource kDataResources[] = { ...@@ -559,7 +559,7 @@ const DataResource kDataResources[] = {
{"svg.css", IDR_UASTYLE_SVG_CSS, ui::SCALE_FACTOR_NONE, true}, {"svg.css", IDR_UASTYLE_SVG_CSS, ui::SCALE_FACTOR_NONE, true},
{"mathml.css", IDR_UASTYLE_MATHML_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, {"mediaControls.css", IDR_UASTYLE_MEDIA_CONTROLS_CSS, ui::SCALE_FACTOR_NONE,
true}, false},
{"fullscreen.css", IDR_UASTYLE_FULLSCREEN_CSS, ui::SCALE_FACTOR_NONE, true}, {"fullscreen.css", IDR_UASTYLE_FULLSCREEN_CSS, ui::SCALE_FACTOR_NONE, true},
{"xhtmlmp.css", IDR_UASTYLE_XHTMLMP_CSS, ui::SCALE_FACTOR_NONE, true}, {"xhtmlmp.css", IDR_UASTYLE_XHTMLMP_CSS, ui::SCALE_FACTOR_NONE, true},
{"viewportAndroid.css", IDR_UASTYLE_VIEWPORT_ANDROID_CSS, {"viewportAndroid.css", IDR_UASTYLE_VIEWPORT_ANDROID_CSS,
......
third_party/WebKit/LayoutTests/media/controls/closed-captions-single-track.html
View file @ d94db169
...@@ -36,6 +36,7 @@ async_test(t => { ...@@ -36,6 +36,7 @@ async_test(t => {
// Captions track should become visible after the closed caption button is pressed. // Captions track should become visible after the closed caption button is pressed.
checkCaptionsVisible(video, captions); checkCaptionsVisible(video, captions);
checkButtonHasClass(toggleClosedCaptionsButton(video), "visible");
// Click the closed captions button again and make sure the menu does not appear. // Click the closed captions button again and make sure the menu does not appear.
clickCaptionButton(video); clickCaptionButton(video);
...@@ -43,6 +44,7 @@ async_test(t => { ...@@ -43,6 +44,7 @@ async_test(t => {
// Captions track should become invisible after the closed caption button is pressed. // Captions track should become invisible after the closed caption button is pressed.
checkCaptionsHidden(video); checkCaptionsHidden(video);
checkButtonNotHasClass(toggleClosedCaptionsButton(video), "visible");
})); }));
}); });
......
third_party/WebKit/LayoutTests/media/controls/toggle-class-with-state-cast.html 0 → 100644
View file @ d94db169
<!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 0 → 100644
View file @ d94db169
<!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 0 → 100644
View file @ d94db169
<!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 0 → 100644
View file @ d94db169
<!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 0 → 100644
View file @ d94db169
<!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 @ d94db169
...@@ -163,6 +163,18 @@ function isClosedCaptionsButtonVisible(currentMediaElement) ...@@ -163,6 +163,18 @@ function isClosedCaptionsButtonVisible(currentMediaElement)
return false; 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) function clickAtCoordinates(x, y)
{ {
eventSender.mouseMoveTo(x, y); eventSender.mouseMoveTo(x, y);
......
third_party/WebKit/LayoutTests/platform/mac/paint/invalidation/video-mute-repaint-expected.txt
View file @ d94db169
...@@ -61,7 +61,7 @@ ...@@ -61,7 +61,7 @@
"reason": "full" "reason": "full"
}, },
{ {
"object": "LayoutButton INPUT", "object": "LayoutButton INPUT class='muted'",
"rect": [530, 493, 32, 32], "rect": [530, 493, 32, 32],
"reason": "full" "reason": "full"
} }
...@@ -86,7 +86,7 @@ ...@@ -86,7 +86,7 @@
"reason": "geometry" "reason": "geometry"
}, },
{ {
"object": "LayoutButton INPUT", "object": "LayoutButton INPUT class='muted'",
"reason": "full" "reason": "full"
}, },
{ {
......
third_party/WebKit/LayoutTests/platform/win/paint/invalidation/video-mute-repaint-expected.txt
View file @ d94db169
...@@ -61,7 +61,7 @@ ...@@ -61,7 +61,7 @@
"reason": "full" "reason": "full"
}, },
{ {
"object": "LayoutButton INPUT", "object": "LayoutButton INPUT class='muted'",
"rect": [530, 493, 32, 32], "rect": [530, 493, 32, 32],
"reason": "full" "reason": "full"
} }
...@@ -86,7 +86,7 @@ ...@@ -86,7 +86,7 @@
"reason": "geometry" "reason": "geometry"
}, },
{ {
"object": "LayoutButton INPUT", "object": "LayoutButton INPUT class='muted'",
"reason": "full" "reason": "full"
}, },
{ {
......
third_party/WebKit/Source/modules/media_controls/elements/MediaControlCastButtonElement.cpp
View file @ d94db169
...@@ -68,6 +68,7 @@ void MediaControlCastButtonElement::UpdateDisplayType() { ...@@ -68,6 +68,7 @@ void MediaControlCastButtonElement::UpdateDisplayType() {
} }
} }
UpdateOverflowString(); UpdateOverflowString();
SetClass("on", IsPlayingRemotely());
} }
bool MediaControlCastButtonElement::WillRespondToMouseClickEvents() { bool MediaControlCastButtonElement::WillRespondToMouseClickEvents() {
......
third_party/WebKit/Source/modules/media_controls/elements/MediaControlFullscreenButtonElement.cpp
View file @ d94db169
...@@ -26,6 +26,7 @@ MediaControlFullscreenButtonElement::MediaControlFullscreenButtonElement( ...@@ -26,6 +26,7 @@ MediaControlFullscreenButtonElement::MediaControlFullscreenButtonElement(
void MediaControlFullscreenButtonElement::SetIsFullscreen(bool is_fullscreen) { void MediaControlFullscreenButtonElement::SetIsFullscreen(bool is_fullscreen) {
SetDisplayType(is_fullscreen ? kMediaExitFullscreenButton SetDisplayType(is_fullscreen ? kMediaExitFullscreenButton
: kMediaEnterFullscreenButton); : kMediaEnterFullscreenButton);
SetClass("fullscreen", is_fullscreen);
} }
bool MediaControlFullscreenButtonElement::WillRespondToMouseClickEvents() { bool MediaControlFullscreenButtonElement::WillRespondToMouseClickEvents() {
......
third_party/WebKit/Source/modules/media_controls/elements/MediaControlInputElement.cpp
View file @ d94db169
...@@ -4,6 +4,7 @@ ...@@ -4,6 +4,7 @@
#include "modules/media_controls/elements/MediaControlInputElement.h" #include "modules/media_controls/elements/MediaControlInputElement.h"
#include "core/dom/DOMTokenList.h"
#include "core/dom/events/Event.h" #include "core/dom/events/Event.h"
#include "core/html/HTMLLabelElement.h" #include "core/html/HTMLLabelElement.h"
#include "core/html/HTMLMediaElement.h" #include "core/html/HTMLMediaElement.h"
...@@ -178,6 +179,14 @@ void MediaControlInputElement::RecordCTREvent(CTREvent event) { ...@@ -178,6 +179,14 @@ void MediaControlInputElement::RecordCTREvent(CTREvent event) {
ctr_histogram.Count(static_cast<int>(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) { DEFINE_TRACE(MediaControlInputElement) {
HTMLInputElement::Trace(visitor); HTMLInputElement::Trace(visitor);
MediaControlElementBase::Trace(visitor); MediaControlElementBase::Trace(visitor);
......
third_party/WebKit/Source/modules/media_controls/elements/MediaControlInputElement.h
View file @ d94db169
...@@ -59,6 +59,9 @@ class MODULES_EXPORT MediaControlInputElement : public HTMLInputElement, ...@@ -59,6 +59,9 @@ class MODULES_EXPORT MediaControlInputElement : public HTMLInputElement,
// Returns whether this element is used for the overflow menu. // Returns whether this element is used for the overflow menu.
bool IsOverflowElement() const; 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: private:
friend class MediaControlInputElementTest; friend class MediaControlInputElementTest;
......
third_party/WebKit/Source/modules/media_controls/elements/MediaControlMuteButtonElement.cpp
View file @ d94db169
...@@ -28,9 +28,9 @@ void MediaControlMuteButtonElement::UpdateDisplayType() { ...@@ -28,9 +28,9 @@ void MediaControlMuteButtonElement::UpdateDisplayType() {
// TODO(mlamouri): checking for volume == 0 because the mute button will look // 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 // 'muted' when the volume is 0 even if the element is not muted. This allows
// the painting and the display type to actually match. // the painting and the display type to actually match.
SetDisplayType((MediaElement().muted() || MediaElement().volume() == 0) bool muted = MediaElement().muted() || MediaElement().volume() == 0;
? kMediaUnMuteButton SetDisplayType(muted ? kMediaUnMuteButton : kMediaMuteButton);
: kMediaMuteButton); SetClass("muted", muted);
UpdateOverflowString(); UpdateOverflowString();
} }
......
third_party/WebKit/Source/modules/media_controls/elements/MediaControlPlayButtonElement.cpp
View file @ d94db169
...@@ -28,6 +28,7 @@ bool MediaControlPlayButtonElement::WillRespondToMouseClickEvents() { ...@@ -28,6 +28,7 @@ bool MediaControlPlayButtonElement::WillRespondToMouseClickEvents() {
void MediaControlPlayButtonElement::UpdateDisplayType() { void MediaControlPlayButtonElement::UpdateDisplayType() {
SetDisplayType(MediaElement().paused() ? kMediaPlayButton SetDisplayType(MediaElement().paused() ? kMediaPlayButton
: kMediaPauseButton); : kMediaPauseButton);
SetClass("pause", MediaElement().paused());
UpdateOverflowString(); UpdateOverflowString();
} }
......
third_party/WebKit/Source/modules/media_controls/elements/MediaControlToggleClosedCaptionsButtonElement.cpp
View file @ d94db169
...@@ -31,6 +31,7 @@ void MediaControlToggleClosedCaptionsButtonElement::UpdateDisplayType() { ...@@ -31,6 +31,7 @@ void MediaControlToggleClosedCaptionsButtonElement::UpdateDisplayType() {
bool captions_visible = MediaElement().TextTracksVisible(); bool captions_visible = MediaElement().TextTracksVisible();
SetDisplayType(captions_visible ? kMediaHideClosedCaptionsButton SetDisplayType(captions_visible ? kMediaHideClosedCaptionsButton
: kMediaShowClosedCaptionsButton); : kMediaShowClosedCaptionsButton);
SetClass("visible", captions_visible);
} }
WebLocalizedString::Name WebLocalizedString::Name
......
third_party/WebKit/Source/modules/media_controls/resources/mediaControls.css
View file @ d94db169
...@@ -107,7 +107,12 @@ video:-webkit-full-page-media::-webkit-media-controls-panel { ...@@ -107,7 +107,12 @@ video:-webkit-full-page-media::-webkit-media-controls-panel {
} }
audio::-webkit-media-controls-mute-button, video::-webkit-media-controls-mute-button { audio::-webkit-media-controls-mute-button, video::-webkit-media-controls-mute-button {
-webkit-appearance: media-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;
display: flex; display: flex;
flex: none; flex: none;
box-sizing: border-box; box-sizing: border-box;
...@@ -119,6 +124,12 @@ audio::-webkit-media-controls-mute-button, video::-webkit-media-controls-mute-bu ...@@ -119,6 +124,12 @@ audio::-webkit-media-controls-mute-button, video::-webkit-media-controls-mute-bu
color: inherit; 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 { audio::-webkit-media-controls-overlay-enclosure {
display: none; display: none;
} }
...@@ -141,7 +152,12 @@ video::-webkit-media-controls-overlay-enclosure { ...@@ -141,7 +152,12 @@ video::-webkit-media-controls-overlay-enclosure {
} }
video::-webkit-media-controls-overlay-play-button { video::-webkit-media-controls-overlay-play-button {
-webkit-appearance: media-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;
display: flex; display: flex;
position: absolute; position: absolute;
top: 0; top: 0;
...@@ -186,7 +202,13 @@ video::-internal-media-remoting-background-image { ...@@ -186,7 +202,13 @@ video::-internal-media-remoting-background-image {
} }
video::-internal-media-remoting-cast-icon { video::-internal-media-remoting-cast-icon {
-webkit-appearance: -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;
display: flex; display: flex;
position: absolute; position: absolute;
margin: 0px; margin: 0px;
...@@ -243,7 +265,12 @@ video::-internal-media-remoting-disable-button:hover { ...@@ -243,7 +265,12 @@ video::-internal-media-remoting-disable-button:hover {
} }
video::-internal-media-controls-overlay-cast-button { video::-internal-media-controls-overlay-cast-button {
-webkit-appearance: -internal-media-overlay-cast-off-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;
display: flex; display: flex;
position: absolute; position: absolute;
top: 8px; top: 8px;
...@@ -258,8 +285,18 @@ video::-internal-media-controls-overlay-cast-button { ...@@ -258,8 +285,18 @@ video::-internal-media-controls-overlay-cast-button {
transition: opacity 0.3s; 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 { audio::-webkit-media-controls-play-button, video::-webkit-media-controls-play-button {
-webkit-appearance: media-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;
display: flex; display: flex;
flex: none; flex: none;
box-sizing: border-box; box-sizing: border-box;
...@@ -271,6 +308,12 @@ audio::-webkit-media-controls-play-button, video::-webkit-media-controls-play-bu ...@@ -271,6 +308,12 @@ audio::-webkit-media-controls-play-button, video::-webkit-media-controls-play-bu
color: inherit; 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 { audio::-webkit-media-controls-timeline-container, video::-webkit-media-controls-timeline-container {
-webkit-appearance: media-controls-background; -webkit-appearance: media-controls-background;
display: flex; display: flex;
...@@ -398,7 +441,12 @@ input[type="range" i]::-webkit-media-slider-thumb { ...@@ -398,7 +441,12 @@ input[type="range" i]::-webkit-media-slider-thumb {
} }
audio::-webkit-media-controls-fullscreen-button, video::-webkit-media-controls-fullscreen-button { audio::-webkit-media-controls-fullscreen-button, video::-webkit-media-controls-fullscreen-button {
-webkit-appearance: media-enter-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;
display: flex; display: flex;
flex: none; flex: none;
overflow: hidden; overflow: hidden;
...@@ -411,8 +459,19 @@ audio::-webkit-media-controls-fullscreen-button, video::-webkit-media-controls-f ...@@ -411,8 +459,19 @@ audio::-webkit-media-controls-fullscreen-button, video::-webkit-media-controls-f
color: inherit; 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 { audio::-internal-media-controls-cast-button, video::-internal-media-controls-cast-button {
-webkit-appearance: -internal-media-cast-off-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;
display: flex; display: flex;
flex: none; flex: none;
box-sizing: border-box; box-sizing: border-box;
...@@ -426,12 +485,23 @@ audio::-internal-media-controls-cast-button, video::-internal-media-controls-cas ...@@ -426,12 +485,23 @@ audio::-internal-media-controls-cast-button, video::-internal-media-controls-cas
color: inherit; 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 { audio::-webkit-media-controls-toggle-closed-captions-button {
display: none; display: none;
} }
video::-webkit-media-controls-toggle-closed-captions-button { video::-webkit-media-controls-toggle-closed-captions-button {
-webkit-appearance: media-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;
display: flex; display: flex;
flex: none; flex: none;
box-sizing: border-box; box-sizing: border-box;
...@@ -445,6 +515,11 @@ video::-webkit-media-controls-toggle-closed-captions-button { ...@@ -445,6 +515,11 @@ video::-webkit-media-controls-toggle-closed-captions-button {
color: inherit; 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 { video::-internal-media-controls-text-track-list, video::-internal-media-controls-overflow-menu-list, audio::-internal-media-controls-overflow-menu-list {
position: fixed; position: fixed;
background-color: #fafafa; background-color: #fafafa;
...@@ -475,7 +550,12 @@ video::-internal-media-controls-text-track-list-item:hover, video::-internal-med ...@@ -475,7 +550,12 @@ video::-internal-media-controls-text-track-list-item:hover, video::-internal-med
} }
video::-internal-media-controls-text-track-list-item-input { video::-internal-media-controls-text-track-list-item-input {
-webkit-appearance: -internal-media-track-selection-checkmark; -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;
visibility: hidden; visibility: hidden;
left: 0; left: 0;
vertical-align: middle; vertical-align: middle;
...@@ -490,7 +570,12 @@ video::-internal-media-controls-text-track-list-item-input:checked { ...@@ -490,7 +570,12 @@ video::-internal-media-controls-text-track-list-item-input:checked {
} }
video::-internal-media-controls-text-track-list-kind-captions { video::-internal-media-controls-text-track-list-kind-captions {
-webkit-appearance: -internal-media-closed-captions-icon; -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;
height: 20px; height: 20px;
width: 20px; width: 20px;
margin-left: 10px; margin-left: 10px;
...@@ -498,7 +583,12 @@ video::-internal-media-controls-text-track-list-kind-captions { ...@@ -498,7 +583,12 @@ video::-internal-media-controls-text-track-list-kind-captions {
} }
video::-internal-media-controls-text-track-list-kind-subtitles { video::-internal-media-controls-text-track-list-kind-subtitles {
-webkit-appearance: -internal-media-subtitles-icon; -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;
height: 20px; height: 20px;
width: 20px; width: 20px;
margin-left: 10px; margin-left: 10px;
...@@ -506,7 +596,12 @@ video::-internal-media-controls-text-track-list-kind-subtitles { ...@@ -506,7 +596,12 @@ video::-internal-media-controls-text-track-list-kind-subtitles {
} }
video::-internal-media-controls-overflow-button, audio::-internal-media-controls-overflow-button { video::-internal-media-controls-overflow-button, audio::-internal-media-controls-overflow-button {
-webkit-appearance: -internal-media-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;
display: flex; display: flex;
flex: none; flex: none;
box-sizing: border-box; box-sizing: border-box;
...@@ -521,7 +616,12 @@ video::-internal-media-controls-overflow-button, audio::-internal-media-controls ...@@ -521,7 +616,12 @@ video::-internal-media-controls-overflow-button, audio::-internal-media-controls
} }
video::-internal-media-controls-download-button, audio::-internal-media-controls-download-button { video::-internal-media-controls-download-button, audio::-internal-media-controls-download-button {
-webkit-appearance: -internal-media-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;
display: flex; display: flex;
flex: none; flex: none;
box-sizing: border-box; box-sizing: border-box;
...@@ -624,3 +724,11 @@ video::cue(u) { ...@@ -624,3 +724,11 @@ video::cue(u) {
video::cue(i) { video::cue(i) {
font-style: italic; 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 @ d94db169
...@@ -30,10 +30,10 @@ ...@@ -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_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_DOWNLOAD_ICON" file="mediaplayer_download.png" />
<structure type="chrome_scaled_image" name="IDR_MEDIAPLAYER_SUBTITLES_ICON" file="mediaplayer_subtitles_icon.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> </structures>
<includes> <includes>
<include name="IDR_UASTYLE_MEDIA_CONTROLS_ANDROID_CSS" file="mediaControlsAndroid.css" type="chrome_html" compress="gzip" /> <include name="IDR_UASTYLE_MEDIA_CONTROLS_ANDROID_CSS" file="mediaControlsAndroid.css" type="BINDATA" compress="gzip" />
<include name="IDR_UASTYLE_MEDIA_CONTROLS_CSS" file="mediaControls.css" type="chrome_html" compress="gzip" />
</includes> </includes>
</release> </release>
</grit> </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