Commit 9501cbc6 authored by jer.noble@apple.com's avatar jer.noble@apple.com

Source/WebCore: Source/WebCore: Mac: Media Controls always hide time display elements

https://bugs.webkit.org/show_bug.cgi?id=113355

Reviewed by Eric Carlson.

No new tests; rebaselined existing tests against correct behavior.

A prior commit set the "min-width:0" property on the time display elements, which, combined
with the "-webkit-flex-box:0 0" setting, caused the flex-box container to collapse the width
of the elements to zero. To achieve the desired effect of hiding the time display elements,
first set the elements' min-width to the desired width, as the new flex-box spec treats the
default value of "min-width:auto" as the intrinsic width, and will collapse the text display
elements to the intrinsic width of its contained text node.

The above allows the timeline container to collapse beyond the sum of its childrens'
intrinsic width. Create a custom renderer that detects when this happens, and hide the time
display controls.

* css/mediaControls.css:
* css/mediaControlsQuickTime.css:
(audio::-webkit-media-controls-current-time-display, video::-webkit-media-controls-current-time-display):
    Set the "min-width:" property to equal the "width:" property.
(audio::-webkit-media-controls-time-remaining-display, video::-webkit-media-controls-time-remaining-display):
    Ditto.
* css/mediaControlsChromium.css:
(audio::-webkit-media-controls-time-remaining-display, video::-webkit-media-controls-time-remaining-display):
    Chromium assumes the time display controls are flex-boxes, so make that explicit.
* html/shadow/MediaControlElementTypes.cpp: Removed MediaControlTimeDisplayElement::createRenderer().
* html/shadow/MediaControlElementTypes.h:
(MediaControlTimeDisplayElement): Ditto.
* html/shadow/MediaControlElements.cpp:
(WebCore::MediaControlTimelineContainerElement::setTimeDisplaysHidden): Added, walks through the
    container's children and shows or hides time display elements.
(WebCore::MediaControlTimelineContainerElement::createRenderer): Added, creates a RenderMediaControlTimelineContainer.
(WebCore::getMediaControlTimeRemainingDisplayElementShadowPseudoId): Added, allow setTimeDisplaysHidden to
    query against children's shadowPseudoId().
(WebCore::MediaControlTimeRemainingDisplayElement::shadowPseudoId): Moved contents to getMediaControlTimeRemainingDisplayElementShadowPseudoId.
(WebCore::getMediaControlCurrentTimeDisplayElementShadowPseudoId): Added, allow setTimeDisplaysHidden to
    query against children's shadowPseudoId().
(WebCore::MediaControlCurrentTimeDisplayElement::shadowPseudoId): Moved contents to getMediaControlCurrentTimeDisplayElementShadowPseudoId.
* html/shadow/MediaControlElements.h:
(MediaControlTimelineContainerElement):
* rendering/RenderMediaControlElements.cpp:
(WebCore::RenderMediaControlTimelineContainer::RenderMediaControlTimelineContainer): Added, simple constructor.
(WebCore::RenderMediaControlTimelineContainer::layout): Detect when the controller's width is greater than
    a certain value, and show or hide the time display elements in response.
* rendering/RenderMediaControlElements.h:
(RenderMediaControlTimelineContainer):

LayoutTests: Mac: Media Controls always hide time display elements
https://bugs.webkit.org/show_bug.cgi?id=113355

Reviewed by Eric Carlson.

Rebaseline mac results.

* platform/mac/media/audio-controls-rendering-expected.png:
* platform/mac/media/audio-controls-rendering-expected.txt:
* platform/mac/media/controls-after-reload-expected.png:
* platform/mac/media/controls-after-reload-expected.txt:
* platform/mac/media/controls-strict-expected.png:
* platform/mac/media/controls-strict-expected.txt:
* platform/mac/media/controls-styling-strict-expected.png: Added.
* platform/mac/media/controls-styling-strict-expected.txt:
* platform/mac/media/controls-without-preload-expected.png:
* platform/mac/media/controls-without-preload-expected.txt:
* platform/mac/media/video-controls-rendering-expected.png:
* platform/mac/media/video-controls-rendering-expected.txt:
* platform/mac/media/video-display-toggle-expected.png:
* platform/mac/media/video-display-toggle-expected.txt:
* platform/mac/media/video-no-audio-expected.png:
* platform/mac/media/video-no-audio-expected.txt:
* platform/mac/media/video-playing-and-pause-expected.png:
* platform/mac/media/video-playing-and-pause-expected.txt:

git-svn-id: http://svn.webkit.org/repository/webkit/trunk@146992 268f45cc-cd09-0410-ab3c-d52691b4dbfc
parent b9b0c431
2013-03-27 Jer Noble <jer.noble@apple.com>
Mac: Media Controls always hide time display elements
https://bugs.webkit.org/show_bug.cgi?id=113355
Reviewed by Eric Carlson.
Rebaseline mac results.
* platform/mac/media/audio-controls-rendering-expected.png:
* platform/mac/media/audio-controls-rendering-expected.txt:
* platform/mac/media/controls-after-reload-expected.png:
* platform/mac/media/controls-after-reload-expected.txt:
* platform/mac/media/controls-strict-expected.png:
* platform/mac/media/controls-strict-expected.txt:
* platform/mac/media/controls-styling-strict-expected.png: Added.
* platform/mac/media/controls-styling-strict-expected.txt:
* platform/mac/media/controls-without-preload-expected.png:
* platform/mac/media/controls-without-preload-expected.txt:
* platform/mac/media/video-controls-rendering-expected.png:
* platform/mac/media/video-controls-rendering-expected.txt:
* platform/mac/media/video-display-toggle-expected.png:
* platform/mac/media/video-display-toggle-expected.txt:
* platform/mac/media/video-no-audio-expected.png:
* platform/mac/media/video-no-audio-expected.txt:
* platform/mac/media/video-playing-and-pause-expected.png:
* platform/mac/media/video-playing-and-pause-expected.txt:
2013-03-27 Chris Fleizach <cfleizach@apple.com>
Regression in tests due to https://bugs.webkit.org/show_bug.cgi?id=113339
......@@ -35,11 +35,21 @@ layer at (8,85) size 320x25
RenderButton {INPUT} at (6,3) size 18x18
RenderButton {INPUT} at (32,4) size 16x17
RenderFlexibleBox {DIV} at (49,5) size 246x15
RenderSlider {INPUT} at (0,2) size 246x13
RenderFlexibleBox {DIV} at (0,0) size 246x13
RenderBlock {DIV} at (0,2) size 246x9
RenderSlider {INPUT} at (45,2) size 156x13
RenderFlexibleBox {DIV} at (0,0) size 156x13
RenderBlock {DIV} at (0,2) size 156x9
RenderBlock {DIV} at (0,0) size 10x8
RenderBlock {DIV} at (295,6) size 25x13
layer at (57,92) size 45x11
RenderFlexibleBox {DIV} at (0,2) size 45x11 [color=#FFFFFF]
RenderBlock (anonymous) at (9,0) size 27x11
RenderText {#text} at (0,0) size 26x11
text run at (0,0) width 26: "00:00"
layer at (258,92) size 45x11
RenderFlexibleBox {DIV} at (201,2) size 45x11 [color=#FFFFFF]
RenderBlock (anonymous) at (7,0) size 31x11
RenderText {#text} at (0,0) size 31x11
text run at (0,0) width 31: "-00:07"
layer at (305,92) size 14x12
RenderButton zI: 1 {INPUT} at (2,0) size 14x12
layer at (8,128) size 320x100
......@@ -51,10 +61,20 @@ layer at (8,203) size 320x25
RenderButton {INPUT} at (6,3) size 18x18
RenderButton {INPUT} at (32,4) size 16x17
RenderFlexibleBox {DIV} at (49,5) size 246x15
RenderSlider {INPUT} at (0,2) size 246x13
RenderFlexibleBox {DIV} at (0,0) size 246x13
RenderBlock {DIV} at (0,2) size 246x9
RenderSlider {INPUT} at (45,2) size 156x13
RenderFlexibleBox {DIV} at (0,0) size 156x13
RenderBlock {DIV} at (0,2) size 156x9
RenderBlock {DIV} at (0,0) size 10x8
RenderBlock {DIV} at (295,6) size 25x13
layer at (57,210) size 45x11
RenderFlexibleBox {DIV} at (0,2) size 45x11 [color=#FFFFFF]
RenderBlock (anonymous) at (9,0) size 27x11
RenderText {#text} at (0,0) size 26x11
text run at (0,0) width 26: "00:00"
layer at (258,210) size 45x11
RenderFlexibleBox {DIV} at (201,2) size 45x11 [color=#FFFFFF]
RenderBlock (anonymous) at (7,0) size 31x11
RenderText {#text} at (0,0) size 31x11
text run at (0,0) width 31: "-00:07"
layer at (305,210) size 14x12
RenderButton zI: 1 {INPUT} at (2,0) size 14x12
......@@ -17,11 +17,21 @@ layer at (8,257) size 320x25
RenderButton {INPUT} at (6,3) size 18x18
RenderButton {INPUT} at (32,4) size 16x17
RenderFlexibleBox {DIV} at (49,5) size 216x15
RenderSlider {INPUT} at (0,2) size 216x13
RenderFlexibleBox {DIV} at (0,0) size 216x13
RenderBlock {DIV} at (0,2) size 216x9
RenderSlider {INPUT} at (45,2) size 126x13
RenderFlexibleBox {DIV} at (0,0) size 126x13
RenderBlock {DIV} at (0,2) size 126x9
RenderBlock {DIV} at (0,0) size 10x8
RenderButton {INPUT} at (297,4) size 16x17
RenderBlock {DIV} at (265,6) size 25x13
layer at (57,264) size 45x11
RenderFlexibleBox {DIV} at (0,2) size 45x11 [color=#FFFFFF]
RenderBlock (anonymous) at (9,0) size 27x11
RenderText {#text} at (0,0) size 26x11
text run at (0,0) width 26: "00:00"
layer at (228,264) size 45x11
RenderFlexibleBox {DIV} at (171,2) size 45x11 [color=#FFFFFF]
RenderBlock (anonymous) at (7,0) size 31x11
RenderText {#text} at (0,0) size 31x11
text run at (0,0) width 31: "-00:06"
layer at (275,264) size 14x12
RenderButton zI: 1 {INPUT} at (2,0) size 14x12
......@@ -17,11 +17,21 @@ layer at (8,265) size 320x25
RenderButton {INPUT} at (6,3) size 18x18
RenderButton {INPUT} at (32,4) size 16x17
RenderFlexibleBox {DIV} at (49,5) size 216x15
RenderSlider {INPUT} at (0,2) size 216x13
RenderFlexibleBox {DIV} at (0,0) size 216x13
RenderBlock {DIV} at (0,2) size 216x9
RenderSlider {INPUT} at (45,2) size 126x13
RenderFlexibleBox {DIV} at (0,0) size 126x13
RenderBlock {DIV} at (0,2) size 126x9
RenderBlock {DIV} at (0,0) size 10x8
RenderButton {INPUT} at (297,4) size 16x17
RenderBlock {DIV} at (265,6) size 25x13
layer at (57,272) size 45x11
RenderFlexibleBox {DIV} at (0,2) size 45x11 [color=#FFFFFF]
RenderBlock (anonymous) at (9,0) size 27x11
RenderText {#text} at (0,0) size 26x11
text run at (0,0) width 26: "00:00"
layer at (228,272) size 45x11
RenderFlexibleBox {DIV} at (171,2) size 45x11 [color=#FFFFFF]
RenderBlock (anonymous) at (7,0) size 31x11
RenderText {#text} at (0,0) size 31x11
text run at (0,0) width 31: "-00:06"
layer at (275,272) size 14x12
RenderButton zI: 1 {INPUT} at (2,0) size 14x12
......@@ -21,12 +21,22 @@ layer at (8,265) size 320x25
RenderButton {INPUT} at (6,3) size 18x18
RenderButton {INPUT} at (32,4) size 16x17
RenderFlexibleBox {DIV} at (49,5) size 216x15
RenderSlider {INPUT} at (0,2) size 216x13
RenderFlexibleBox {DIV} at (0,0) size 216x13
RenderBlock {DIV} at (0,2) size 216x9
RenderSlider {INPUT} at (45,2) size 126x13
RenderFlexibleBox {DIV} at (0,0) size 126x13
RenderBlock {DIV} at (0,2) size 126x9
RenderBlock {DIV} at (0,0) size 10x8
RenderButton {INPUT} at (297,4) size 16x17
RenderBlock {DIV} at (265,6) size 25x13
layer at (57,272) size 45x11
RenderFlexibleBox {DIV} at (0,2) size 45x11 [color=#FFFFFF]
RenderBlock (anonymous) at (9,0) size 27x11
RenderText {#text} at (0,0) size 26x11
text run at (0,0) width 26: "00:00"
layer at (228,272) size 45x11
RenderFlexibleBox {DIV} at (171,2) size 45x11 [color=#FFFFFF]
RenderBlock (anonymous) at (7,0) size 31x11
RenderText {#text} at (0,0) size 31x11
text run at (0,0) width 31: "-00:06"
layer at (275,272) size 14x12
RenderButton zI: 1 {INPUT} at (2,0) size 14x12
layer at (332,50) size 320x240
......@@ -36,11 +46,21 @@ layer at (332,265) size 320x25
RenderButton {INPUT} at (6,3) size 18x18
RenderButton {INPUT} at (32,4) size 16x17
RenderFlexibleBox {DIV} at (49,5) size 216x15
RenderSlider {INPUT} at (0,2) size 216x13
RenderFlexibleBox {DIV} at (0,0) size 216x13
RenderBlock {DIV} at (0,2) size 216x9
RenderSlider {INPUT} at (45,2) size 126x13
RenderFlexibleBox {DIV} at (0,0) size 126x13
RenderBlock {DIV} at (0,2) size 126x9
RenderBlock {DIV} at (0,0) size 10x8
RenderButton {INPUT} at (297,4) size 16x17
RenderBlock {DIV} at (265,6) size 25x13
layer at (381,272) size 45x11
RenderFlexibleBox {DIV} at (0,2) size 45x11 [color=#FFFFFF]
RenderBlock (anonymous) at (9,0) size 27x11
RenderText {#text} at (0,0) size 26x11
text run at (0,0) width 26: "00:00"
layer at (552,272) size 45x11
RenderFlexibleBox {DIV} at (171,2) size 45x11 [color=#FFFFFF]
RenderBlock (anonymous) at (7,0) size 31x11
RenderText {#text} at (0,0) size 31x11
text run at (0,0) width 31: "-00:06"
layer at (599,272) size 14x12
RenderButton zI: 1 {INPUT} at (2,0) size 14x12
......@@ -17,11 +17,21 @@ layer at (8,257) size 320x25
RenderButton {INPUT} at (6,3) size 18x18
RenderButton {INPUT} at (32,4) size 16x17
RenderFlexibleBox {DIV} at (49,5) size 216x15
RenderSlider {INPUT} at (0,2) size 216x13
RenderFlexibleBox {DIV} at (0,0) size 216x13
RenderBlock {DIV} at (0,2) size 216x9
RenderSlider {INPUT} at (45,2) size 126x13
RenderFlexibleBox {DIV} at (0,0) size 126x13
RenderBlock {DIV} at (0,2) size 126x9
RenderBlock {DIV} at (0,0) size 10x8
RenderButton {INPUT} at (297,4) size 16x17
RenderBlock {DIV} at (265,6) size 25x13
layer at (57,264) size 45x11
RenderFlexibleBox {DIV} at (0,2) size 45x11 [color=#FFFFFF]
RenderBlock (anonymous) at (9,0) size 27x11
RenderText {#text} at (0,0) size 26x11
text run at (0,0) width 26: "00:00"
layer at (228,264) size 45x11
RenderFlexibleBox {DIV} at (171,2) size 45x11 [color=#FFFFFF]
RenderBlock (anonymous) at (7,0) size 31x11
RenderText {#text} at (0,0) size 31x11
text run at (0,0) width 31: "-00:06"
layer at (275,264) size 14x12
RenderButton zI: 1 {INPUT} at (2,0) size 14x12
......@@ -22,12 +22,22 @@ layer at (8,257) size 320x25
RenderButton {INPUT} at (6,3) size 18x18
RenderButton {INPUT} at (32,4) size 16x17
RenderFlexibleBox {DIV} at (49,5) size 216x15
RenderSlider {INPUT} at (0,2) size 216x13
RenderFlexibleBox {DIV} at (0,0) size 216x13
RenderBlock {DIV} at (0,2) size 216x9
RenderSlider {INPUT} at (45,2) size 126x13
RenderFlexibleBox {DIV} at (0,0) size 126x13
RenderBlock {DIV} at (0,2) size 126x9
RenderBlock {DIV} at (0,0) size 10x8
RenderButton {INPUT} at (297,4) size 16x17
RenderBlock {DIV} at (265,6) size 25x13
layer at (57,264) size 45x11
RenderFlexibleBox {DIV} at (0,2) size 45x11 [color=#FFFFFF]
RenderBlock (anonymous) at (9,0) size 27x11
RenderText {#text} at (0,0) size 26x11
text run at (0,0) width 26: "00:00"
layer at (228,264) size 45x11
RenderFlexibleBox {DIV} at (171,2) size 45x11 [color=#FFFFFF]
RenderBlock (anonymous) at (7,0) size 31x11
RenderText {#text} at (0,0) size 31x11
text run at (0,0) width 31: "-00:06"
layer at (275,264) size 14x12
RenderButton zI: 1 {INPUT} at (2,0) size 14x12
layer at (8,282) size 320x240
......@@ -37,12 +47,22 @@ layer at (8,497) size 320x25
RenderButton {INPUT} at (6,3) size 18x18
RenderButton {INPUT} at (32,4) size 16x17
RenderFlexibleBox {DIV} at (49,5) size 216x15
RenderSlider {INPUT} at (0,2) size 216x13
RenderFlexibleBox {DIV} at (0,0) size 216x13
RenderBlock {DIV} at (0,2) size 216x9
RenderSlider {INPUT} at (45,2) size 126x13
RenderFlexibleBox {DIV} at (0,0) size 126x13
RenderBlock {DIV} at (0,2) size 126x9
RenderBlock {DIV} at (0,0) size 10x8
RenderButton {INPUT} at (297,4) size 16x17
RenderBlock {DIV} at (265,6) size 25x13
layer at (57,504) size 45x11
RenderFlexibleBox {DIV} at (0,2) size 45x11 [color=#FFFFFF]
RenderBlock (anonymous) at (9,0) size 27x11
RenderText {#text} at (0,0) size 26x11
text run at (0,0) width 26: "00:00"
layer at (228,504) size 45x11
RenderFlexibleBox {DIV} at (171,2) size 45x11 [color=#FFFFFF]
RenderBlock (anonymous) at (7,0) size 31x11
RenderText {#text} at (0,0) size 31x11
text run at (0,0) width 31: "-00:06"
layer at (275,504) size 14x12
RenderButton zI: 1 {INPUT} at (2,0) size 14x12
layer at (8,522) size 320x240
......@@ -54,11 +74,21 @@ layer at (8,737) size 320x25
RenderButton {INPUT} at (6,3) size 18x18
RenderButton {INPUT} at (32,4) size 16x17
RenderFlexibleBox {DIV} at (49,5) size 216x15
RenderSlider {INPUT} at (0,2) size 216x13
RenderFlexibleBox {DIV} at (0,0) size 216x13
RenderBlock {DIV} at (0,2) size 216x9
RenderSlider {INPUT} at (45,2) size 126x13
RenderFlexibleBox {DIV} at (0,0) size 126x13
RenderBlock {DIV} at (0,2) size 126x9
RenderBlock {DIV} at (0,0) size 10x8
RenderButton {INPUT} at (297,4) size 16x17
RenderBlock {DIV} at (265,6) size 25x13
layer at (57,744) size 45x11
RenderFlexibleBox {DIV} at (0,2) size 45x11 [color=#FFFFFF]
RenderBlock (anonymous) at (9,0) size 27x11
RenderText {#text} at (0,0) size 26x11
text run at (0,0) width 26: "00:00"
layer at (228,744) size 45x11
RenderFlexibleBox {DIV} at (171,2) size 45x11 [color=#FFFFFF]
RenderBlock (anonymous) at (7,0) size 31x11
RenderText {#text} at (0,0) size 31x11
text run at (0,0) width 31: "-00:06"
layer at (275,744) size 14x12
RenderButton zI: 1 {INPUT} at (2,0) size 14x12
......@@ -16,11 +16,21 @@ layer at (8,241) size 320x25
RenderButton {INPUT} at (6,3) size 18x18
RenderButton {INPUT} at (32,4) size 16x17
RenderFlexibleBox {DIV} at (49,5) size 216x15
RenderSlider {INPUT} at (0,2) size 216x13
RenderFlexibleBox {DIV} at (0,0) size 216x13
RenderBlock {DIV} at (0,2) size 216x9
RenderSlider {INPUT} at (45,2) size 126x13
RenderFlexibleBox {DIV} at (0,0) size 126x13
RenderBlock {DIV} at (0,2) size 126x9
RenderBlock {DIV} at (0,0) size 10x8
RenderButton {INPUT} at (297,4) size 16x17
RenderBlock {DIV} at (265,6) size 25x13
layer at (57,248) size 45x11
RenderFlexibleBox {DIV} at (0,2) size 45x11 [color=#FFFFFF]
RenderBlock (anonymous) at (9,0) size 27x11
RenderText {#text} at (0,0) size 26x11
text run at (0,0) width 26: "00:00"
layer at (228,248) size 45x11
RenderFlexibleBox {DIV} at (171,2) size 45x11 [color=#FFFFFF]
RenderBlock (anonymous) at (7,0) size 31x11
RenderText {#text} at (0,0) size 31x11
text run at (0,0) width 31: "-00:06"
layer at (275,248) size 14x12
RenderButton zI: 1 {INPUT} at (2,0) size 14x12
......@@ -17,9 +17,19 @@ layer at (8,305) size 352x25
RenderButton {INPUT} at (6,3) size 18x18
RenderButton {INPUT} at (32,4) size 16x17
RenderFlexibleBox {DIV} at (49,5) size 273x15
RenderSlider {INPUT} at (0,2) size 273x13
RenderFlexibleBox {DIV} at (0,0) size 273x13
RenderBlock {DIV} at (0,2) size 273x9
RenderSlider {INPUT} at (45,2) size 183x13
RenderFlexibleBox {DIV} at (0,0) size 183x13
RenderBlock {DIV} at (0,2) size 183x9
RenderBlock {DIV} at (0,0) size 10x8
RenderButton {INPUT} at (329,4) size 16x17
RenderBlock {DIV} at (322,12) size 0x1
layer at (57,312) size 45x11
RenderFlexibleBox {DIV} at (0,2) size 45x11 [color=#FFFFFF]
RenderBlock (anonymous) at (9,0) size 27x11
RenderText {#text} at (0,0) size 26x11
text run at (0,0) width 26: "00:00"
layer at (285,312) size 45x11
RenderFlexibleBox {DIV} at (228,2) size 45x11 [color=#FFFFFF]
RenderBlock (anonymous) at (7,0) size 31x11
RenderText {#text} at (0,0) size 31x11
text run at (0,0) width 31: "-00:09"
......@@ -18,11 +18,21 @@ layer at (8,283) size 320x25
RenderButton {INPUT} at (6,3) size 18x18
RenderButton {INPUT} at (32,4) size 16x17
RenderFlexibleBox {DIV} at (49,5) size 216x15
RenderSlider {INPUT} at (0,2) size 216x13
RenderFlexibleBox {DIV} at (0,0) size 216x13
RenderBlock {DIV} at (0,2) size 216x9
RenderSlider {INPUT} at (45,2) size 126x13
RenderFlexibleBox {DIV} at (0,0) size 126x13
RenderBlock {DIV} at (0,2) size 126x9
RenderBlock {DIV} at (0,0) size 10x8
RenderButton {INPUT} at (297,4) size 16x17
RenderBlock {DIV} at (265,6) size 25x13
layer at (57,290) size 45x11
RenderFlexibleBox {DIV} at (0,2) size 45x11 [color=#FFFFFF]
RenderBlock (anonymous) at (9,0) size 27x11
RenderText {#text} at (0,0) size 26x11
text run at (0,0) width 26: "00:00"
layer at (228,290) size 45x11
RenderFlexibleBox {DIV} at (171,2) size 45x11 [color=#FFFFFF]
RenderBlock (anonymous) at (7,0) size 31x11
RenderText {#text} at (0,0) size 31x11
text run at (0,0) width 31: "-00:06"
layer at (275,290) size 14x12
RenderButton zI: 1 {INPUT} at (2,0) size 14x12
2013-03-26 Jer Noble <jer.noble@apple.com>
Mac: Media Controls always hide time display elements
https://bugs.webkit.org/show_bug.cgi?id=113355
Reviewed by Eric Carlson.
No new tests; rebaselined existing tests against correct behavior.
A prior commit set the "min-width:0" property on the time display elements, which, combined
with the "-webkit-flex-box:0 0" setting, caused the flex-box container to collapse the width
of the elements to zero. To achieve the desired effect of hiding the time display elements,
first set the elements' min-width to the desired width, as the new flex-box spec treats the
default value of "min-width:auto" as the intrinsic width, and will collapse the text display
elements to the intrinsic width of its contained text node.
The above allows the timeline container to collapse beyond the sum of its childrens'
intrinsic width. Create a custom renderer that detects when this happens, and hide the time
display controls.
* css/mediaControls.css:
* css/mediaControlsQuickTime.css:
(audio::-webkit-media-controls-current-time-display, video::-webkit-media-controls-current-time-display):
Set the "min-width:" property to equal the "width:" property.
(audio::-webkit-media-controls-time-remaining-display, video::-webkit-media-controls-time-remaining-display):
Ditto.
* css/mediaControlsChromium.css:
(audio::-webkit-media-controls-time-remaining-display, video::-webkit-media-controls-time-remaining-display):
Chromium assumes the time display controls are flex-boxes, so make that explicit.
* html/shadow/MediaControlElementTypes.cpp: Removed MediaControlTimeDisplayElement::createRenderer().
* html/shadow/MediaControlElementTypes.h:
(MediaControlTimeDisplayElement): Ditto.
* html/shadow/MediaControlElements.cpp:
(WebCore::MediaControlTimelineContainerElement::setTimeDisplaysHidden): Added, walks through the
container's children and shows or hides time display elements.
(WebCore::MediaControlTimelineContainerElement::createRenderer): Added, creates a RenderMediaControlTimelineContainer.
(WebCore::getMediaControlTimeRemainingDisplayElementShadowPseudoId): Added, allow setTimeDisplaysHidden to
query against children's shadowPseudoId().
(WebCore::MediaControlTimeRemainingDisplayElement::shadowPseudoId): Moved contents to getMediaControlTimeRemainingDisplayElementShadowPseudoId.
(WebCore::getMediaControlCurrentTimeDisplayElementShadowPseudoId): Added, allow setTimeDisplaysHidden to
query against children's shadowPseudoId().
(WebCore::MediaControlCurrentTimeDisplayElement::shadowPseudoId): Moved contents to getMediaControlCurrentTimeDisplayElementShadowPseudoId.
* html/shadow/MediaControlElements.h:
(MediaControlTimelineContainerElement):
* rendering/RenderMediaControlElements.cpp:
(WebCore::RenderMediaControlTimelineContainer::RenderMediaControlTimelineContainer): Added, simple constructor.
(WebCore::RenderMediaControlTimelineContainer::layout): Detect when the controller's width is greater than
a certain value, and show or hide the time display elements in response.
* rendering/RenderMediaControlElements.h:
(RenderMediaControlTimelineContainer):
2013-03-27 Ilya Tikhonovsky <loislo@chromium.org>
Web Inspector: CPU profiler. Swap FlameChart with Data Grid.
......@@ -112,7 +112,7 @@ audio::-webkit-media-controls-time-remaining-display, video::-webkit-media-contr
-webkit-appearance: media-current-time-display;
-webkit-user-select: none;
-webkit-flex: none;
display: block;
display: -webkit-flex;
border: none;
cursor: default;
......
......@@ -82,7 +82,7 @@ audio::-webkit-media-controls-current-time-display, video::-webkit-media-control
font-size: 9px;
overflow: hidden;
width: 45px;
min-width: 0; /* needed due to flexbox */
min-width: 45px;
color: white;
text-shadow: black 0px 1px 1px;
......@@ -105,7 +105,7 @@ audio::-webkit-media-controls-time-remaining-display, video::-webkit-media-contr
font-size: 9px;
overflow: hidden;
width: 45px;
min-width: 0; /* needed due to flexbox */
min-width: 45px;
color: white;
text-shadow: black 0px 1px 1px;
......
......@@ -159,11 +159,6 @@ void MediaControlTimeDisplayElement::setCurrentValue(float time)
m_currentValue = time;
}
RenderObject* MediaControlTimeDisplayElement::createRenderer(RenderArena* arena, RenderStyle*)
{
return new (arena) RenderMediaControlTimeDisplay(this);
}
// ----------------------------
MediaControlMuteButtonElement::MediaControlMuteButtonElement(Document* document, MediaControlElementType displayType)
......
......@@ -141,8 +141,6 @@ protected:
explicit MediaControlTimeDisplayElement(Document*, MediaControlElementType);
private:
virtual RenderObject* createRenderer(RenderArena*, RenderStyle*) OVERRIDE;
float m_currentValue;
};
......
......@@ -67,6 +67,9 @@ namespace WebCore {
using namespace HTMLNames;
static const AtomicString& getMediaControlCurrentTimeDisplayElementShadowPseudoId();
static const AtomicString& getMediaControlTimeRemainingDisplayElementShadowPseudoId();
#if ENABLE(VIDEO_TRACK)
static const char* textTracksOffAttrValue = "-1"; // This must match HTMLMediaElement::textTracksOffIndex()
#endif
......@@ -318,6 +321,30 @@ const AtomicString& MediaControlTimelineContainerElement::shadowPseudoId() const
return id;
}
void MediaControlTimelineContainerElement::setTimeDisplaysHidden(bool hidden)
{
for (unsigned i = 0; i < childNodeCount(); ++i) {
Node* child = childNode(i);
if (!child || !child->isElementNode())
continue;
Element* element = static_cast<Element*>(child);
if (element->shadowPseudoId() != getMediaControlTimeRemainingDisplayElementShadowPseudoId()
&& element->shadowPseudoId() != getMediaControlCurrentTimeDisplayElementShadowPseudoId())
continue;
MediaControlTimeDisplayElement* timeDisplay = static_cast<MediaControlTimeDisplayElement*>(element);
if (hidden)
timeDisplay->hide();
else
timeDisplay->show();
}
}
RenderObject* MediaControlTimelineContainerElement::createRenderer(RenderArena* arena, RenderStyle*)
{
return new (arena) RenderMediaControlTimelineContainer(this);
}
// ----------------------------
MediaControlVolumeSliderContainerElement::MediaControlVolumeSliderContainerElement(Document* document)
......@@ -1141,12 +1168,17 @@ PassRefPtr<MediaControlTimeRemainingDisplayElement> MediaControlTimeRemainingDis
return adoptRef(new MediaControlTimeRemainingDisplayElement(document));
}
const AtomicString& MediaControlTimeRemainingDisplayElement::shadowPseudoId() const
static const AtomicString& getMediaControlTimeRemainingDisplayElementShadowPseudoId()
{
DEFINE_STATIC_LOCAL(AtomicString, id, ("-webkit-media-controls-time-remaining-display", AtomicString::ConstructFromLiteral));
return id;
}
const AtomicString& MediaControlTimeRemainingDisplayElement::shadowPseudoId() const
{
return getMediaControlTimeRemainingDisplayElementShadowPseudoId();
}
// ----------------------------
MediaControlCurrentTimeDisplayElement::MediaControlCurrentTimeDisplayElement(Document* document)
......@@ -1159,12 +1191,17 @@ PassRefPtr<MediaControlCurrentTimeDisplayElement> MediaControlCurrentTimeDisplay
return adoptRef(new MediaControlCurrentTimeDisplayElement(document));
}
const AtomicString& MediaControlCurrentTimeDisplayElement::shadowPseudoId() const
static const AtomicString& getMediaControlCurrentTimeDisplayElementShadowPseudoId()
{
DEFINE_STATIC_LOCAL(AtomicString, id, ("-webkit-media-controls-current-time-display", AtomicString::ConstructFromLiteral));
return id;
}
const AtomicString& MediaControlCurrentTimeDisplayElement::shadowPseudoId() const
{
return getMediaControlCurrentTimeDisplayElementShadowPseudoId();
}
// ----------------------------
#if ENABLE(VIDEO_TRACK)
......
......@@ -106,9 +106,13 @@ class MediaControlTimelineContainerElement : public MediaControlDivElement {
public:
static PassRefPtr<MediaControlTimelineContainerElement> create(Document*);
void setTimeDisplaysHidden(bool);
private:
explicit MediaControlTimelineContainerElement(Document*);
virtual const AtomicString& shadowPseudoId() const OVERRIDE;
virtual RenderObject* createRenderer(RenderArena*, RenderStyle*) OVERRIDE;
};
// ----------------------------
......
......@@ -59,7 +59,7 @@ void RenderMediaVolumeSliderContainer::layout()
// ----------------------------
RenderMediaControlTimeDisplay::RenderMediaControlTimeDisplay(Element* element)
RenderMediaControlTimelineContainer::RenderMediaControlTimelineContainer(Element* element)
: RenderFlexibleBox(element)
{
}
......@@ -68,15 +68,13 @@ RenderMediaControlTimeDisplay::RenderMediaControlTimeDisplay(Element* element)
// FIXME: Eliminate hard-coded widths altogether.
static const int minWidthToDisplayTimeDisplays = 45 + 100 + 45;
void RenderMediaControlTimeDisplay::layout()
void RenderMediaControlTimelineContainer::layout()
{
RenderFlexibleBox::layout();
RenderBox* timelineContainerBox = parentBox();
while (timelineContainerBox && timelineContainerBox->isAnonymous())
timelineContainerBox = timelineContainerBox->parentBox();
if (timelineContainerBox && timelineContainerBox->width() < minWidthToDisplayTimeDisplays)
setWidth(0);
LayoutStateDisabler layoutStateDisabler(view());
MediaControlTimelineContainerElement* container = static_cast<MediaControlTimelineContainerElement*>(node());
container->setTimeDisplaysHidden(width().toInt() < minWidthToDisplayTimeDisplays);
}
// ----------------------------
...