Changeset 116900 in webkit

Timestamp:

May 13, 2012 12:11:51 PM (12 years ago)

Author:

commit-queue@webkit.org

Message:

Volume slider needs to be displayed below the mute button
​https://bugs.webkit.org/show_bug.cgi?id=85990

Patch by Victor Carbune <​vcarbune@adobe.com> on 2012-05-13
Reviewed by Dimitri Glazkov.

Source/WebCore:

Added back code for rendering offset, but used only when the volume slider
needs to be displayed below the controls.

Test: media/media-volume-slider-rendered-below.html

• css/mediaControlsChromium.css:

(audio::-webkit-media-controls-volume-slider-container, video::-webkit-media-controls-volume-slider-container):
Changed positioning of the slider to absolute, otherwise it is not possible to position it from the layout() method.

• css/mediaControlsQuickTime.css:

Added back the double mute-button and changed the z-index of the original button. When the slider is displayed
the second mute button is actually there.
(audio::-webkit-media-controls-mute-button, video::-webkit-media-controls-mute-button):
(audio::-webkit-media-controls-volume-slider-container, video::-webkit-media-controls-volume-slider-container):
(audio::-webkit-media-controls-volume-slider-mute-button, video::-webkit-media-controls-volume-slider-mute-button):
Added copy.

• html/shadow/MediaControlElements.cpp:

(WebCore::MediaControlPanelElement::makeTransparent): Disabled the possible of hiding controls. WebVTT rendering
in the place of controls when these are visible is not possible with the current code.
(RenderMediaVolumeSliderContainer):
(WebCore):
(WebCore::RenderMediaVolumeSliderContainer::RenderMediaVolumeSliderContainer):
(WebCore::RenderMediaVolumeSliderContainer::layout):
Checked if the absolute coordinates of the corner of the slider would be rendered outside the page. This part of the
code is faulty if display:none is toggled on the controls.
(WebCore::MediaControlVolumeSliderContainerElement::createRenderer):

• html/shadow/MediaControlElements.h:

(MediaControlVolumeSliderContainerElement):

• html/shadow/MediaControlRootElement.cpp:

(WebCore::MediaControlRootElement::create):

LayoutTests:

Updated tests expectation and marked failing tests accordingly.

• media/media-volume-slider-rendered-below.html: Added.
• media/media-volume-slider-rendered-expected.txt: Added.
• platform/chromium/test_expectations.txt: Updated.
• platform/mac/media/audio-controls-rendering-expected.txt: Updated (z-index change).
• platform/mac/media/controls-after-reload-expected.txt: Same.
• platform/mac/media/controls-strict-expected.txt: Same.
• platform/mac/media/video-controls-rendering-expected.txt: Same.
• platform/mac/media/video-display-toggle-expected.txt: Same.
• platform/mac/media/video-playing-and-pause-expected.txt: Same.
• platform/mac/test_expectations.txt: Updated.

Location:

trunk

Files:

• LayoutTests/ChangeLog (modified) (1 diff)
• LayoutTests/media/media-volume-slider-rendered-below-expected.txt (added)
• LayoutTests/media/media-volume-slider-rendered-below.html (added)
• LayoutTests/platform/chromium/test_expectations.txt (modified) (1 diff)
• LayoutTests/platform/mac/media/audio-controls-rendering-expected.txt (modified) (3 diffs)
• LayoutTests/platform/mac/media/controls-after-reload-expected.txt (modified) (1 diff)
• LayoutTests/platform/mac/media/controls-strict-expected.txt (modified) (1 diff)
• LayoutTests/platform/mac/media/video-controls-rendering-expected.txt (modified) (3 diffs)
• LayoutTests/platform/mac/media/video-display-toggle-expected.txt (modified) (1 diff)
• LayoutTests/platform/mac/media/video-playing-and-pause-expected.txt (modified) (1 diff)
• LayoutTests/platform/mac/test_expectations.txt (modified) (1 diff)
• Source/WebCore/ChangeLog (modified) (1 diff)
• Source/WebCore/css/mediaControlsChromium.css (modified) (1 diff)
• Source/WebCore/css/mediaControlsQuickTime.css (modified) (3 diffs)
• Source/WebCore/html/shadow/MediaControlElements.cpp (modified) (3 diffs)
• Source/WebCore/html/shadow/MediaControlElements.h (modified) (1 diff)
• Source/WebCore/html/shadow/MediaControlRootElement.cpp (modified) (1 diff)

trunk/LayoutTests/ChangeLog

@@ +1 @@
+2012-05-13  Victor Carbune  <vcarbune@adobe.com>
+
+        Volume slider needs to be displayed below the mute button
+        https://bugs.webkit.org/show_bug.cgi?id=85990
+
+        Reviewed by Dimitri Glazkov.
+
+        Updated tests expectation and marked failing tests accordingly.
+
+        * media/media-volume-slider-rendered-below.html: Added.
+        * media/media-volume-slider-rendered-expected.txt: Added.
+        * platform/chromium/test_expectations.txt: Updated.
+        * platform/mac/media/audio-controls-rendering-expected.txt: Updated (z-index change).
+        * platform/mac/media/controls-after-reload-expected.txt: Same.
+        * platform/mac/media/controls-strict-expected.txt: Same.
+        * platform/mac/media/video-controls-rendering-expected.txt: Same.
+        * platform/mac/media/video-display-toggle-expected.txt: Same.
+        * platform/mac/media/video-playing-and-pause-expected.txt: Same.
+        * platform/mac/test_expectations.txt: Updated.
+
 2012-05-12  Abhishek Arya  <inferno@chromium.org>
 

trunk/LayoutTests/platform/chromium/test_expectations.txt

@@ -3048 +3048 @@
 BUGWK83882 : media/track/track-mode.html = PASS TEXT TIMEOUT
 
+BUGWK85990 : media/video-controls-rendering-toggle-display-none.html = TEXT
+BUGWK85990 : media/video-controls-toggling.html = TIMEOUT
+
+// Needs rebaseline.
+BUGWK85990 : media/video-volume-slider.html = TEXT
+
 BUGWK72271 MAC DEBUG : fast/loader/javascript-url-in-embed.html = PASS CRASH
 BUGWK72271 SNOWLEOPARD DEBUG : fast/dom/node-iterator-reference-node-moved-crash.html = PASS CRASH

trunk/LayoutTests/platform/mac/media/audio-controls-rendering-expected.txt

@@ -30 +30 @@
   RenderBlock (relative positioned) {DIV} at (0,0) size 10x8
 layer at (185,48) size 14x12
-  RenderButton zI: 2 {INPUT} at (2,0) size 14x12
+  RenderButton zI: 1 {INPUT} at (2,0) size 14x12
 layer at (8,85) size 320x25
   RenderDeprecatedFlexibleBox (relative positioned) {DIV} at (0,0) size 320x25
@@ -56 +56 @@
   RenderBlock (relative positioned) {DIV} at (0,0) size 10x8
 layer at (305,91) size 14x12
-  RenderButton zI: 2 {INPUT} at (2,0) size 14x12
+  RenderButton zI: 1 {INPUT} at (2,0) size 14x12
 layer at (8,128) size 320x100
   RenderMedia {AUDIO} at (8,128) size 320x100 [bgcolor=#0000FF]
@@ -84 +84 @@
   RenderBlock (relative positioned) {DIV} at (0,0) size 10x8
 layer at (305,209) size 14x12
-  RenderButton zI: 2 {INPUT} at (2,0) size 14x12
+  RenderButton zI: 1 {INPUT} at (2,0) size 14x12

trunk/LayoutTests/platform/mac/media/controls-after-reload-expected.txt

@@ -37 +37 @@
   RenderBlock (relative positioned) {DIV} at (0,0) size 10x8
 layer at (275,263) size 14x12
-  RenderButton zI: 2 {INPUT} at (2,0) size 14x12
+  RenderButton zI: 1 {INPUT} at (2,0) size 14x12

trunk/LayoutTests/platform/mac/media/controls-strict-expected.txt

@@ -37 +37 @@
   RenderBlock (relative positioned) {DIV} at (0,0) size 10x8
 layer at (275,271) size 14x12
-  RenderButton zI: 2 {INPUT} at (2,0) size 14x12
+  RenderButton zI: 1 {INPUT} at (2,0) size 14x12

trunk/LayoutTests/platform/mac/media/video-controls-rendering-expected.txt

@@ -42 +42 @@
   RenderBlock (relative positioned) {DIV} at (0,0) size 10x8
 layer at (275,263) size 14x12
-  RenderButton zI: 2 {INPUT} at (2,0) size 14x12
+  RenderButton zI: 1 {INPUT} at (2,0) size 14x12
 layer at (8,282) size 320x240
   RenderDeprecatedFlexibleBox (relative positioned) {DIV} at (0,0) size 320x240
@@ -69 +69 @@
   RenderBlock (relative positioned) {DIV} at (0,0) size 10x8
 layer at (275,503) size 14x12
-  RenderButton zI: 2 {INPUT} at (2,0) size 14x12
+  RenderButton zI: 1 {INPUT} at (2,0) size 14x12
 layer at (8,522) size 320x240
   RenderVideo {VIDEO} at (8,522) size 320x240
@@ -98 +98 @@
   RenderBlock (relative positioned) {DIV} at (0,0) size 10x8
 layer at (275,743) size 14x12
-  RenderButton zI: 2 {INPUT} at (2,0) size 14x12
+  RenderButton zI: 1 {INPUT} at (2,0) size 14x12

trunk/LayoutTests/platform/mac/media/video-display-toggle-expected.txt

@@ -36 +36 @@
   RenderBlock (relative positioned) {DIV} at (0,0) size 10x8
 layer at (275,247) size 14x12
-  RenderButton zI: 2 {INPUT} at (2,0) size 14x12
+  RenderButton zI: 1 {INPUT} at (2,0) size 14x12

trunk/LayoutTests/platform/mac/media/video-playing-and-pause-expected.txt

@@ -38 +38 @@
   RenderBlock (relative positioned) {DIV} at (0,0) size 10x8
 layer at (275,289) size 14x12
-  RenderButton zI: 2 {INPUT} at (2,0) size 14x12
+  RenderButton zI: 1 {INPUT} at (2,0) size 14x12

trunk/LayoutTests/platform/mac/test_expectations.txt

@@ -205 +205 @@
 BUGWK85689 SKIP : fast/animation/request-animation-frame-disabled.html = TEXT
 
+BUGWK85990 : media/video-controls-rendering-toggle-display-none.html = TEXT
+BUGWK85990 : media/video-controls-toggling.html = TIMEOUT TEXT
+
 BUGWK85308 : ietestcenter/css3/valuesandunits/units-000.htm = IMAGE
 BUGWK85310 : ietestcenter/css3/valuesandunits/units-010.htm = IMAGE

trunk/Source/WebCore/ChangeLog

@@ +1 @@
+2012-05-13  Victor Carbune  <vcarbune@adobe.com>
+
+        Volume slider needs to be displayed below the mute button
+        https://bugs.webkit.org/show_bug.cgi?id=85990
+
+        Reviewed by Dimitri Glazkov.
+
+        Added back code for rendering offset, but used only when the volume slider
+        needs to be displayed below the controls.
+
+        Test: media/media-volume-slider-rendered-below.html
+
+        * css/mediaControlsChromium.css:
+        (audio::-webkit-media-controls-volume-slider-container, video::-webkit-media-controls-volume-slider-container):
+        Changed positioning of the slider to absolute, otherwise it is not possible to position it from the layout() method.
+        * css/mediaControlsQuickTime.css:
+        Added back the double mute-button and changed the z-index of the original button. When the slider is displayed
+        the second mute button is actually there.
+        (audio::-webkit-media-controls-mute-button, video::-webkit-media-controls-mute-button):
+        (audio::-webkit-media-controls-volume-slider-container, video::-webkit-media-controls-volume-slider-container):
+        (audio::-webkit-media-controls-volume-slider-mute-button, video::-webkit-media-controls-volume-slider-mute-button):
+        Added copy.
+        * html/shadow/MediaControlElements.cpp:
+        (WebCore::MediaControlPanelElement::makeTransparent): Disabled the possible of hiding controls. WebVTT rendering
+        in the place of controls when these are visible is not possible with the current code.
+        (RenderMediaVolumeSliderContainer):
+        (WebCore):
+        (WebCore::RenderMediaVolumeSliderContainer::RenderMediaVolumeSliderContainer):
+        (WebCore::RenderMediaVolumeSliderContainer::layout):
+        Checked if the absolute coordinates of the corner of the slider would be rendered outside the page. This part of the
+        code is faulty if display:none is toggled on the controls.
+        (WebCore::MediaControlVolumeSliderContainerElement::createRenderer):
+        * html/shadow/MediaControlElements.h:
+        (MediaControlVolumeSliderContainerElement):
+        * html/shadow/MediaControlRootElement.cpp:
+        (WebCore::MediaControlRootElement::create):
+
 2012-05-13  Igor Oliveira  <igor.o@sisa.samsung.com>
 

trunk/Source/WebCore/css/mediaControlsChromium.css

@@ -155 +155 @@
 audio::-webkit-media-controls-volume-slider-container, video::-webkit-media-controls-volume-slider-container {
     -webkit-appearance: media-volume-slider-container;
-    position: relative;
+    position: absolute;
+    bottom: 32px;
 
     width: 34px;

trunk/Source/WebCore/css/mediaControlsQuickTime.css

@@ -51 +51 @@
 
     position: relative;
-    z-index: 2;
+    z-index: 1;
 }
 
@@ -205 +205 @@
 
     bottom: 0px;
-    z-index: 1;
+    z-index: 2;
 
     width: 22px;
@@ -222 +222 @@
     height: 80px;
 }
+
+audio::-webkit-media-controls-volume-slider-mute-button, video::-webkit-media-controls-volume-slider-mute-button {
+    -webkit-appearance: media-volume-slider-mute-button;
+    display: inline;
+
+    position: absolute;
+
+    bottom: 7px;
+    left: 0px;
+
+    width: 14px;
+    height: 12px;
+
+    margin-left: 2px;
+    margin-right: 9px;
+
+    border: none !important;
+}

trunk/Source/WebCore/html/shadow/MediaControlElements.cpp

@@ -257 +257 @@
 
     m_opaque = false;
-
-    startTimer();
 }
 
@@ -323 +321 @@
 // ----------------------------
 
+class RenderMediaVolumeSliderContainer : public RenderBlock {
+public:
+    RenderMediaVolumeSliderContainer(Node*);
+
+private:
+    virtual void layout();
+};
+
+RenderMediaVolumeSliderContainer::RenderMediaVolumeSliderContainer(Node* node)
+    : RenderBlock(node)
+{
+}
+
+void RenderMediaVolumeSliderContainer::layout()
+{
+    RenderBlock::layout();
+
+    if (style()->display() == NONE || !nextSibling() || !nextSibling()->isBox())
+        return;
+
+    RenderBox* buttonBox = toRenderBox(nextSibling());
+    int absoluteOffsetTop = buttonBox->localToAbsolute(FloatPoint(0, -size().height())).y();
+
+    LayoutStateDisabler layoutStateDisabler(view());
+
+    // If the slider would be rendered outside the page, it should be moved below the controls.
+    if (UNLIKELY(absoluteOffsetTop < 0))
+        setY(buttonBox->offsetTop() + theme()->volumeSliderOffsetFromMuteButton(buttonBox, pixelSnappedSize()).y());
+}
+
 inline MediaControlVolumeSliderContainerElement::MediaControlVolumeSliderContainerElement(Document* document)
     : MediaControlElement(document)
@@ -333 +361 @@
     element->hide();
     return element.release();
+}
+
+RenderObject* MediaControlVolumeSliderContainerElement::createRenderer(RenderArena* arena, RenderStyle*)
+{
+    return new (arena) RenderMediaVolumeSliderContainer(this);
 }
 

trunk/Source/WebCore/html/shadow/MediaControlElements.h

@@ -162 +162 @@
 private:
     MediaControlVolumeSliderContainerElement(Document*);
+    virtual RenderObject* createRenderer(RenderArena*, RenderStyle*);
     virtual void defaultEventHandler(Event*);
     virtual MediaControlElementType displayType() const;

trunk/Source/WebCore/html/shadow/MediaControlRootElement.cpp

@@ -184 +184 @@
         controls->m_volumeSlider = slider.get();
         volumeSliderContainer->appendChild(slider.release(), ec, true);
+        if (ec)
+            return 0;
+
+        // This is a duplicate mute button, which is visible in some ports at the bottom of the volume bar.
+        // It's important only when the volume bar is displayed below the controls.
+        RefPtr<MediaControlVolumeSliderMuteButtonElement> volumeSliderMuteButton = MediaControlVolumeSliderMuteButtonElement::create(document);
+        controls->m_volumeSliderMuteButton = volumeSliderMuteButton.get();
+        volumeSliderContainer->appendChild(volumeSliderMuteButton.release(), ec, true);
+
         if (ec)
             return 0;