Skip to content

GitLab

T
tangled
Commit 4ec49703 authored by Jazz Xu's avatar Jazz Xu Committed by Commit Bot
Browse files
Options

[Media Controls] Clean up sizing class. Remove all sizing-large classes. 

Bug: 857120

Change-Id: I8e3f9f3ca0061f03f2f28388d13936c24371828f
Reviewed-on: https://chromium-review.googlesource.com/c/1287297
Commit-Queue: Jazz Xu <jazzhsu@google.com>
Reviewed-by: default avatarTommy Steimel <steimel@chromium.org>
Cr-Commit-Position: refs/heads/master@{#600908}
parent 1381120f
Hide whitespace changes
Inline Side-by-side
Showing with 9 additions and 78 deletions
third_party/WebKit/LayoutTests/media/controls/resizing-changes-css-class.html
View file @ 4ec49703
......@@ -10,9 +10,9 @@ async_test(t => {
const video = document.querySelector('video');
const testCases = [
{ width: 500, expect: expectSmall },
{ width: 1441, expect: expectLarge },
{ width: 1441, expect: expectMedium },
{ width: 800, expect: expectMedium },
{ width: 2000, expect: expectLarge },
{ width: 2000, expect: expectMedium },
{ width: 0, expect: expectSmall },
{ width: 741, expect: expectMedium },
{ width: 308, expect: expectSmall },
......@@ -39,18 +39,14 @@ async_test(t => {
function expectSmall() {
checkControlsHasClass(video, 'sizing-small');
checkControlsDoesNotHaveClasses(video, ['sizing-medium', 'sizing-large']);
checkControlsDoesNotHaveClass(video, 'sizing-medium');
}
function expectMedium() {
checkControlsHasClass(video, 'sizing-medium');
checkControlsDoesNotHaveClasses(video, ['sizing-small', 'sizing-large']);
checkControlsDoesNotHaveClass(video, 'sizing-small');
}
function expectLarge() {
checkControlsHasClass(video, 'sizing-large');
checkControlsDoesNotHaveClasses(video, ['sizing-small', 'sizing-medium']);
}
});
</script>
</html>
third_party/blink/renderer/modules/media_controls/media_controls_impl.cc
View file @ 4ec49703
......@@ -1385,10 +1385,8 @@ void MediaControlsImpl::UpdateSizingCSSClass() {
sizing_class == MediaControlsSizingClass::kSmall);
SetClass(kMediaControlsSizingMediumCSSClass,
ShouldShowVideoControls() &&
sizing_class == MediaControlsSizingClass::kMedium);
SetClass(kMediaControlsSizingLargeCSSClass,
ShouldShowVideoControls() &&
sizing_class == MediaControlsSizingClass::kLarge);
(sizing_class == MediaControlsSizingClass::kMedium ||
sizing_class == MediaControlsSizingClass::kLarge));
}
void MediaControlsImpl::MaybeToggleControlsFromTap() {
......
third_party/blink/renderer/modules/media_controls/resources/modernMediaControls.css
View file @ 4ec49703
......@@ -100,10 +100,6 @@ video::-webkit-media-controls.sizing-medium div[pseudo="-webkit-media-controls-p
background-size: auto 200px;
}
video::-webkit-media-controls.sizing-large div[pseudo="-webkit-media-controls-panel" i] {
background-size: auto 312px;
}
/* Need dark gradient at the top of the video when the scrubbing message is
* shown */
video::-webkit-media-controls:not(.audio-only) div[pseudo="-webkit-media-controls-panel" i].scrubbing-message {
......@@ -122,10 +118,6 @@ video::-webkit-media-controls.sizing-medium div[pseudo="-webkit-media-controls-p
background-size: auto 120px, auto 200px;
}
video::-webkit-media-controls.sizing-large div[pseudo="-webkit-media-controls-panel" i].scrubbing-message {
background-size: auto 120px, auto 312px;
}
audio::-internal-media-controls-button-panel,
video::-internal-media-controls-button-panel {
-webkit-appearance: -internal-media-control;
......@@ -229,18 +221,6 @@ video::-webkit-media-controls.sizing-medium input[pseudo="-internal-media-contro
background-size: 32px;
}
/* TODO(https://crbug.com/857120): remove these rules and the sizing-large CSS class. */
video::-webkit-media-controls.sizing-large input[pseudo="-webkit-media-controls-play-button" i],
video::-webkit-media-controls.sizing-large input[pseudo="-webkit-media-controls-mute-button" i],
video::-webkit-media-controls.sizing-large input[pseudo="-webkit-media-controls-fullscreen-button" i],
video::-webkit-media-controls.sizing-large input[pseudo="-internal-media-controls-display-cutout-fullscreen-button" i],
video::-webkit-media-controls.sizing-large input[pseudo="-internal-media-controls-overflow-button" i] {
width: 64px;
height: 64px;
min-width: 64px;
background-size: 32px;
}
video::-webkit-media-controls.sizing-small div[pseudo="-internal-media-controls-button-panel" i] {
height: 48px;
line-height: 48px;
......@@ -253,13 +233,6 @@ video::-webkit-media-controls.sizing-medium div[pseudo="-internal-media-controls
padding: 0 16px 0 32px;
}
/* TODO(https://crbug.com/857120): remove these rules and the sizing-large CSS class. */
video::-webkit-media-controls.sizing-large div[pseudo="-internal-media-controls-button-panel" i] {
height: 64px;
line-height: 64px;
padding: 0 16px 0 32px;
}
audio::-webkit-media-controls-play-button,
video::-webkit-media-controls-play-button {
background-image: -webkit-image-set(url(ic_play_arrow.svg) 1x);
......@@ -465,11 +438,6 @@ video::-webkit-media-controls.sizing-medium input[pseudo="-webkit-media-controls
padding: 0 32px 20px 32px;
}
/* TODO(https://crbug.com/857120): remove these rules and the sizing-large CSS class. */
video::-webkit-media-controls.sizing-large input[pseudo="-webkit-media-controls-timeline" i] {
padding: 0 32px 20px 32px;
}
input[pseudo="-webkit-media-controls-timeline" i],
input[pseudo="-webkit-media-controls-timeline" i]::-internal-track-segment-highlight-before,
input[pseudo="-webkit-media-controls-timeline" i]::-internal-track-segment-highlight-after,
......@@ -618,8 +586,7 @@ video::-webkit-media-controls-volume-slider.closed {
transition: width 0.3s ease, opacity 0.28s step-end;
}
video::-webkit-media-controls.sizing-medium input[pseudo="-webkit-media-controls-volume-slider" i],
video::-webkit-media-controls.sizing-large input[pseudo="-webkit-media-controls-volume-slider" i] {
video::-webkit-media-controls.sizing-medium input[pseudo="-webkit-media-controls-volume-slider" i] {
padding: 30px 0; /* (64px button panel height - 4px slider height) / 2 */
}
......@@ -692,35 +659,14 @@ video::-internal-media-controls-overflow-menu-list-item {
padding-right: 16px;
}
/* TODO(https://crbug.com/857120): All these are the same, so these are unnecessary. */
video::-webkit-media-controls.sizing-small div[pseudo="-internal-media-controls-overflow-menu-list" i] {
min-width: 180px;
max-width: 180px;
max-height: 250px;
}
video::-webkit-media-controls.sizing-small div[pseudo="-internal-media-controls-overflow-menu-list" i],
video::-webkit-media-controls.sizing-medium div[pseudo="-internal-media-controls-overflow-menu-list" i] {
min-width: 180px;
max-width: 180px;
max-height: 250px;
}
video::-webkit-media-controls.sizing-large div[pseudo="-internal-media-controls-overflow-menu-list" i] {
min-width: 180px;
max-width: 180px;
max-height: 250px;
}
/* TODO(https://crbug.com/857120): All these are the same, so these are unnecessary. */
video::-webkit-media-controls.sizing-small label[pseudo="-internal-media-controls-overflow-menu-list-item" i] input {
margin-left: 0;
margin-right: 16px;
width: 24px;
height: 24px;
min-width: 24px;
background-size: 24px;
}
video::-webkit-media-controls.sizing-small label[pseudo="-internal-media-controls-overflow-menu-list-item" i] input,
video::-webkit-media-controls.sizing-medium label[pseudo="-internal-media-controls-overflow-menu-list-item" i] input {
margin-left: 0;
margin-right: 16px;
......@@ -730,15 +676,6 @@ video::-webkit-media-controls.sizing-medium label[pseudo="-internal-media-contro
background-size: 24px;
}
video::-webkit-media-controls.sizing-large label[pseudo="-internal-media-controls-overflow-menu-list-item" i] input {
margin-left: 0;
margin-right: 16px;
width: 24px;
height: 24px;
min-width: 24px;
background-size: 24px;
}
label[pseudo="-internal-media-controls-overflow-menu-list-item"] input {
margin-left: -9px;
margin-right: 6px;
......
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