Changeset 128075 in webkit


Ignore:
Timestamp:
Sep 10, 2012 10:15:41 AM (12 years ago)
Author:
commit-queue@webkit.org
Message:

[Chromium] Handle smaller sizes of media elements in media controls.
​https://bugs.webkit.org/show_bug.cgi?id=89344

Patch by Silvia Pfeiffer <​silviapf@chromium.org> on 2012-09-10
Reviewed by Eric Carlson.

The redesign of the Chrome video controls calls for successive removal of individual
elements in the Chrome video and audio controls as the element becomes smaller in width.
It also requires decreasing padding on the enclosure element of videos.

Source/WebCore:

This patch introduces a layout() function into the MediaControlRootElementChromium to
react to any changes of the media controls width and appropriately hide/show the
interactive elements and apply the correct padding on video elements.

Tests: platform/chromium/media/controls-audio-sizes.html

platform/chromium/media/controls-video-sizes-padding.html
platform/chromium/media/controls-video-sizes.html

  • html/shadow/MediaControlRootElementChromium.cpp:

(WebCore):
(RenderMediaControlPanelEnclosureElement):
Introduce a renderer for the MediaControlPanelEnclosureElement in which to deal with the layout changes.
Following the pattern in MediaControlElements.cpp .
(WebCore::RenderMediaControlPanelEnclosureElement::RenderMediaControlPanelEnclosureElement):
Definition of the new RenderMediaControlPanelEnclosureElement class.
(WebCore::RenderMediaControlPanelEnclosureElement::layout):
Definition of the layout() function for the renderer. This does most of the actual work.
(WebCore::MediaControlPanelEnclosureElement::createRenderer):
Create the renderer for the MediaControlPanelEnclosureElement.
(WebCore::MediaControlPanelEnclosureElement::updatePadding):
Update padding as part of the MediaControlPanelEnclosureElement functions.
(WebCore::MediaControlRootElementChromium::MediaControlRootElementChromium):
Add a class property to store whether the duration and current time display are hidden.
(WebCore::MediaControlRootElementChromium::reset):
Include the hiding/showing of the timeline into the updateTimeDisplay() function to reduce code duplication.
(WebCore::MediaControlRootElementChromium::playbackStarted):
Include the hiding/showing of the timeline and time display into the updateTimeDisplay() function
to reduce code duplication.
(WebCore::MediaControlRootElementChromium::playbackProgressed):
Include the hiding/showing of the timeline into the updateTimeDisplay() function to reduce code duplication.
(WebCore::MediaControlRootElementChromium::playbackStopped):
Include the hiding/showing of the timeline into the updateTimeDisplay() function to reduce code duplication.
(WebCore::MediaControlRootElementChromium::updateTimeDisplay):
Only show time display if not hidden. Add timeline update here to reduce code duplication/
(WebCore::MediaControlRootElementChromium::hideVolumeSlider):
New function to allow layout() function to hide the volume slider.
(WebCore::MediaControlRootElementChromium::showTimeDisplay):
New function to allow layout() function to show the time display.
(WebCore::MediaControlRootElementChromium::hideTimeDisplay):
New function to allow layout() function to hide the time display.
(WebCore::MediaControlRootElementChromium::showMuteButton):
New function to allow layout() function to show the mute button.
(WebCore::MediaControlRootElementChromium::hideMuteButton):
New function to allow layout() function to hide the mute button.
(WebCore::MediaControlRootElementChromium::showFullscreenButton):
New function to allow layout() function to show the fullscreen button.
(WebCore::MediaControlRootElementChromium::hideFullscreenButton):
New function to allow layout() function to hide the fullscreen button.
(WebCore::MediaControlRootElementChromium::showTimeline):
New function to allow layout() function to show the timeline.
(WebCore::MediaControlRootElementChromium::hideTimeline):
New function to allow layout() function to hide the timeline.

  • html/shadow/MediaControlRootElementChromium.h:

(MediaControlPanelEnclosureElement):
Add a createRender() and a updatePadding() function to the MediaControlPanelEnclosureElement class.
(MediaControlRootElementChromium):
Add hide/show functions for volume slider, time display, mute button, fullscreen button and timeline.
Add a class property to store whether the duration and current time display are hidden.

LayoutTests:

These platform-specific tests check if the correct interactive elements are shown for
different video and audio element widths and the correct padding is applied for videos.

  • platform/chromium/TestExpectations: Mark failing tests for later rebaseline.
  • platform/chromium/media/controls-audio-sizes-expected.txt: Added.
  • platform/chromium/media/controls-audio-sizes.html: Added. Tests if the correct elements are shown for audio elements.
  • platform/chromium/media/controls-video-sizes-expected.txt: Added.
  • platform/chromium/media/controls-video-sizes.html: Added.
  • platform/chromium-mac/platform/chromium/media/controls-video-sizes-expected.png: Added. Tests if the correct elements are shown for video elements.
  • platform/chromium/media/controls-video-sizes-padding-expected.txt: Added.
  • platform/chromium/media/controls-video-sizes-padding.html: Added. Tests if the correct padding is applied to the enclosure of the video controls.
Location:
trunk
Files:
7 added
5 edited

Legend:

Unmodified
Added
Removed

  • trunk/LayoutTests/ChangeLog

    r128073 r128075  
     12012-09-10  Silvia Pfeiffer  <silviapf@chromium.org>
     2
     3        [Chromium] Handle smaller sizes of media elements in media controls.
     4        https://bugs.webkit.org/show_bug.cgi?id=89344
     5
     6        Reviewed by Eric Carlson.
     7
     8        The redesign of the Chrome video controls calls for successive removal of individual
     9        elements in the Chrome video and audio controls as the element becomes smaller in width.
     10        It also requires decreasing padding on the enclosure element of videos.
     11
     12        These platform-specific tests check if the correct interactive elements are shown for
     13        different video and audio element widths and the correct padding is applied for videos.
     14
     15        * platform/chromium/TestExpectations:
     16          Mark failing tests for later rebaseline.
     17        * platform/chromium/media/controls-audio-sizes-expected.txt: Added.
     18        * platform/chromium/media/controls-audio-sizes.html: Added.
     19          Tests if the correct elements are shown for audio elements.
     20        * platform/chromium/media/controls-video-sizes-expected.txt: Added.
     21        * platform/chromium/media/controls-video-sizes.html: Added.
     22        * platform/chromium-mac/platform/chromium/media/controls-video-sizes-expected.png: Added.
     23          Tests if the correct elements are shown for video elements.
     24        * platform/chromium/media/controls-video-sizes-padding-expected.txt: Added.
     25        * platform/chromium/media/controls-video-sizes-padding.html: Added.
     26          Tests if the correct padding is applied to the enclosure of the video controls.
     27
    1282012-09-10  Tony Chang  <tony@chromium.org>
    229

  • trunk/LayoutTests/platform/chromium/TestExpectations

    r128073 r128075  
    33223322BUGWK94242 DEBUG : media/track/track-cues-sorted-before-dispatch.html = PASS TIMEOUT
    33233323
     3324// Need rebaseline.
     3325BUGWK89344 : media/audio-controls-rendering.html = IMAGE+TEXT
     3326BUGWK89344 : media/audio-repaint.html = IMAGE+TEXT
     3327BUGWK89344 : media/controls-after-reload.html = IMAGE+TEXT
     3328BUGWK89344 : media/controls-layout-direction.html = IMAGE
     3329BUGWK89344 : media/controls-strict.html = IMAGE+TEXT
     3330BUGWK89344 : media/controls-styling-strict.html = IMAGE+TEXT
     3331BUGWK89344 : media/controls-styling.html = IMAGE+TEXT
     3332BUGWK89344 : media/controls-without-preload.html = IMAGE+TEXT
     3333BUGWK89344 : media/media-controls-clone.html = IMAGE+TEXT
     3334BUGWK89344 : media/media-document-audio-repaint.html = IMAGE+TEXT
     3335BUGWK89344 : media/track/track-cue-rendering-horizontal.html = IMAGE+TEXT
     3336BUGWK89344 : media/track/track-cue-rendering-vertical.html = IMAGE+TEXT
     3337BUGWK89344 : media/video-controls-rendering.html = IMAGE+TEXT
     3338BUGWK89344 : media/video-display-toggle.html = IMAGE+TEXT
     3339BUGWK89344 : media/video-empty-source.html = IMAGE+TEXT
     3340BUGWK89344 : media/video-no-audio.html = IMAGE+TEXT
     3341BUGWK89344 : media/video-playing-and-pause.html = IMAGE+TEXT
     3342BUGWK89344 : media/video-zoom-controls.html = IMAGE+TEXT
     3343BUGWK89344 : http/tests/media/video-buffered-range-contains-currentTime.html = IMAGE
     3344BUGWK89344 : fast/hidpi/video-controls-in-hidpi.html = IMAGE+TEXT
     3345BUGWK89344 : fast/layers/video-layer.html = IMAGE+TEXT
     3346BUGWK89344 : compositing/video/video-controls-layer-creation.html = IMAGE
     3347BUGWK89344 LINUX ANDROID WIN : platform/chromium/media/controls-video-sizes.html = IMAGE
     3348
    33243349// Supposedly started failing between CR r140760 and CR r141216.  The failures
    33253350// look like they involve antialiasing; the fact that the test clearly expects

  • trunk/Source/WebCore/ChangeLog

    r128074 r128075  
     12012-09-10  Silvia Pfeiffer  <silviapf@chromium.org>
     2
     3        [Chromium] Handle smaller sizes of media elements in media controls.
     4        https://bugs.webkit.org/show_bug.cgi?id=89344
     5
     6        Reviewed by Eric Carlson.
     7
     8        The redesign of the Chrome video controls calls for successive removal of individual
     9        elements in the Chrome video and audio controls as the element becomes smaller in width.
     10        It also requires decreasing padding on the enclosure element of videos.
     11
     12        This patch introduces a layout() function into the MediaControlRootElementChromium to
     13        react to any changes of the media controls width and appropriately hide/show the
     14        interactive elements and apply the correct padding on video elements.
     15
     16        Tests: platform/chromium/media/controls-audio-sizes.html
     17               platform/chromium/media/controls-video-sizes-padding.html
     18               platform/chromium/media/controls-video-sizes.html
     19
     20        * html/shadow/MediaControlRootElementChromium.cpp:
     21        (WebCore):
     22        (RenderMediaControlPanelEnclosureElement):
     23        Introduce a renderer for the MediaControlPanelEnclosureElement in which to deal with the layout changes.
     24        Following the pattern in MediaControlElements.cpp .
     25        (WebCore::RenderMediaControlPanelEnclosureElement::RenderMediaControlPanelEnclosureElement):
     26        Definition of the new RenderMediaControlPanelEnclosureElement class.
     27        (WebCore::RenderMediaControlPanelEnclosureElement::layout):
     28        Definition of the layout() function for the renderer. This does most of the actual work.
     29        (WebCore::MediaControlPanelEnclosureElement::createRenderer):
     30        Create the renderer for the MediaControlPanelEnclosureElement.
     31        (WebCore::MediaControlPanelEnclosureElement::updatePadding):
     32        Update padding as part of the MediaControlPanelEnclosureElement functions.
     33        (WebCore::MediaControlRootElementChromium::MediaControlRootElementChromium):
     34        Add a class property to store whether the duration and current time display are hidden.
     35        (WebCore::MediaControlRootElementChromium::reset):
     36        Include the hiding/showing of the timeline into the updateTimeDisplay() function to reduce code duplication.
     37        (WebCore::MediaControlRootElementChromium::playbackStarted):
     38        Include the hiding/showing of the timeline and time display into the updateTimeDisplay() function
     39        to reduce code duplication.
     40        (WebCore::MediaControlRootElementChromium::playbackProgressed):
     41        Include the hiding/showing of the timeline into the updateTimeDisplay() function to reduce code duplication.
     42        (WebCore::MediaControlRootElementChromium::playbackStopped):
     43        Include the hiding/showing of the timeline into the updateTimeDisplay() function to reduce code duplication.
     44        (WebCore::MediaControlRootElementChromium::updateTimeDisplay):
     45        Only show time display if not hidden. Add timeline update here to reduce code duplication/
     46        (WebCore::MediaControlRootElementChromium::hideVolumeSlider):
     47        New function to allow layout() function to hide the volume slider.
     48        (WebCore::MediaControlRootElementChromium::showTimeDisplay):
     49        New function to allow layout() function to show the time display.
     50        (WebCore::MediaControlRootElementChromium::hideTimeDisplay):
     51        New function to allow layout() function to hide the time display.
     52        (WebCore::MediaControlRootElementChromium::showMuteButton):
     53        New function to allow layout() function to show the mute button.
     54        (WebCore::MediaControlRootElementChromium::hideMuteButton):
     55        New function to allow layout() function to hide the mute button.
     56        (WebCore::MediaControlRootElementChromium::showFullscreenButton):
     57        New function to allow layout() function to show the fullscreen button.
     58        (WebCore::MediaControlRootElementChromium::hideFullscreenButton):
     59        New function to allow layout() function to hide the fullscreen button.
     60        (WebCore::MediaControlRootElementChromium::showTimeline):
     61        New function to allow layout() function to show the timeline.
     62        (WebCore::MediaControlRootElementChromium::hideTimeline):
     63        New function to allow layout() function to hide the timeline.
     64
     65        * html/shadow/MediaControlRootElementChromium.h:
     66        (MediaControlPanelEnclosureElement):
     67        Add a createRender() and a updatePadding() function to the MediaControlPanelEnclosureElement class.
     68        (MediaControlRootElementChromium):
     69        Add hide/show functions for volume slider, time display, mute button, fullscreen button and timeline.
     70        Add a class property to store whether the duration and current time display are hidden.
     71
    1722012-09-10  Joanmarie Diggs  <jdiggs@igalia.com>
    273

  • trunk/Source/WebCore/html/shadow/MediaControlRootElementChromium.cpp

    r127035 r128075  
    3030#include "MediaControlRootElementChromium.h"
    3131
     32#include "CSSValueKeywords.h"
    3233#include "HTMLDivElement.h"
    3334#include "HTMLMediaElement.h"
    … …  
    3637#include "MouseEvent.h"
    3738#include "Page.h"
     39#include "RenderMedia.h"
    3840#include "RenderTheme.h"
     41#include "RenderView.h"
     42#include "StyleResolver.h"
    3943#include "Text.h"
    4044
    … …  
    6064}
    6165
     66
     67class RenderMediaControlPanelEnclosureElement : public RenderBlock {
     68public:
     69    RenderMediaControlPanelEnclosureElement(Node*);
     70
     71private:
     72    virtual void layout() OVERRIDE;
     73};
     74
     75RenderMediaControlPanelEnclosureElement::RenderMediaControlPanelEnclosureElement(Node* node)
     76    : RenderBlock(node)
     77{
     78}
     79
     80static const int hideTimeDisplayWidth = 350;
     81static const int hideVolumeDisplayWidth = 275;
     82static const int hideMuteButtonWidth = 210;
     83static const int hideFullscreenButtonWidth = 150;
     84static const int hideTimelineWidth = 100;
     85
     86void RenderMediaControlPanelEnclosureElement::layout()
     87{
     88    HTMLMediaElement* mediaElement = toParentMediaElement(this);
     89    if (!mediaElement || !mediaElement->renderer())
     90    return;
     91
     92    float mediaWidthFloat = toRenderMedia(mediaElement->renderer())->contentBoxRect().width().toFloat();
     93    int mediaWidth = round(adjustFloatForAbsoluteZoom(mediaWidthFloat, style()));
     94
     95    MediaControlRootElementChromium* elementShadow = (MediaControlRootElementChromium *) mediaElement->mediaControls();
     96
     97    if (mediaWidth < hideTimeDisplayWidth)
     98        elementShadow->hideTimeDisplay();
     99    else
     100        elementShadow->showTimeDisplay();
     101
     102    if (mediaWidth < hideVolumeDisplayWidth)
     103        elementShadow->hideVolumeSlider();
     104    else
     105        elementShadow->showVolumeSlider();
     106
     107    if (mediaWidth < hideMuteButtonWidth)
     108        elementShadow->hideMuteButton();
     109    else
     110        elementShadow->showMuteButton();
     111
     112    if (mediaWidth < hideFullscreenButtonWidth)
     113        elementShadow->hideFullscreenButton();
     114    else
     115        elementShadow->showFullscreenButton();
     116
     117    if (mediaWidth < hideTimelineWidth)
     118        elementShadow->hideTimeline();
     119    else
     120        elementShadow->showTimeline();
     121
     122    if (mediaElement->renderer()->isVideo())
     123        // Update padding according to video width.
     124        static_cast<MediaControlPanelEnclosureElement*>(node())->updatePadding(mediaWidth);
     125
     126    RenderBlock::layout();
     127}
     128
    62129MediaControlPanelEnclosureElement::MediaControlPanelEnclosureElement(Document* document)
    63130    : MediaControlChromiumEnclosureElement(document)
    … …  
    70137}
    71138
     139RenderObject* MediaControlPanelEnclosureElement::createRenderer(RenderArena* arena, RenderStyle*)
     140{
     141    return new (arena) RenderMediaControlPanelEnclosureElement(this);
     142}
     143
    72144const AtomicString& MediaControlPanelEnclosureElement::shadowPseudoId() const
    73145{
    74146    DEFINE_STATIC_LOCAL(AtomicString, id, ("-webkit-media-controls-enclosure"));
    75147    return id;
     148}
     149
     150// Make sure to keep these values in sync with the ones in mediaControlsChromium.css.
     151static const int videoControlsHeight = 30;
     152static const int maxPadding = 5;
     153static const int minPadding = 0;
     154static const int minPaddingAtWidth = 160;
     155static const int decreaseStep = 60;
     156
     157void MediaControlPanelEnclosureElement::updatePadding(int mediaWidth)
     158{
     159    // Scale padding linearly between minPadding and maxPadding depending on mediaWidth.
     160    float padding = round((mediaWidth - minPaddingAtWidth) / decreaseStep);
     161    if (padding < minPadding)
     162        padding = minPadding;
     163    else if (padding > maxPadding)
     164        padding = maxPadding;
     165
     166    setInlineStyleProperty(CSSPropertyPaddingRight, padding, CSSPrimitiveValue::CSS_PX);
     167    setInlineStyleProperty(CSSPropertyPaddingBottom, padding, CSSPrimitiveValue::CSS_PX);
     168    setInlineStyleProperty(CSSPropertyPaddingLeft, padding, CSSPrimitiveValue::CSS_PX);
     169    setInlineStyleProperty(CSSPropertyHeight, padding + videoControlsHeight, CSSPrimitiveValue::CSS_PX);
    76170}
    77171
    … …  
    95189    , m_isMouseOverControls(false)
    96190    , m_isFullscreen(false)
     191    , m_hiddenTimeDisplay(false)
    97192{
    98193}
    … …  
    258353    float duration = m_mediaController->duration();
    259354    m_timeline->setDuration(duration);
    260     m_timeline->show();
    261355
    262356    m_durationDisplay->setInnerText(page->theme()->formatMediaControlsTime(duration), ASSERT_NO_EXCEPTION);
    263357    m_durationDisplay->setCurrentValue(duration);
    264358
    265     m_timeline->setPosition(m_mediaController->currentTime());
    266359    updateTimeDisplay();
    267 
    268     m_panelMuteButton->show();
    269360
    270361    if (m_volumeSlider) {
    … …  
    284375    }
    285376
    286     if (m_mediaController->supportsFullscreen() && m_mediaController->hasVideo())
    287         m_fullscreenButton->show();
    288     else
    289         m_fullscreenButton->hide();
     377    showFullscreenButton();
     378
    290379    makeOpaque();
    291380}
    … …  
    294383{
    295384    m_playButton->updateDisplayType();
    296     m_timeline->setPosition(m_mediaController->currentTime());
    297     m_currentTimeDisplay->show();
    298     m_durationDisplay->hide();
    299385    updateTimeDisplay();
    300386
    … …  
    305391void MediaControlRootElementChromium::playbackProgressed()
    306392{
    307     m_timeline->setPosition(m_mediaController->currentTime());
    308393    updateTimeDisplay();
    309394
    … …  
    315400{
    316401    m_playButton->updateDisplayType();
    317     m_timeline->setPosition(m_mediaController->currentTime());
    318402    updateTimeDisplay();
    319403    makeOpaque();
    … …  
    331415        return;
    332416
    333     // After seek, hide duration display and show current time.
    334     if (now > 0) {
     417    // After seek or playback start, hide duration display and show current time.
     418    if (!m_hiddenTimeDisplay && now > 0) {
    335419        m_currentTimeDisplay->show();
    336420        m_durationDisplay->hide();
    … …  
    341425    m_currentTimeDisplay->setInnerText(page->theme()->formatMediaControlsCurrentTime(now, duration), ec);
    342426    m_currentTimeDisplay->setCurrentValue(now);
     427
     428    m_timeline->setPosition(m_mediaController->currentTime());
    343429}
    344430
    … …  
    479565}
    480566
     567void MediaControlRootElementChromium::hideVolumeSlider()
     568{
     569    m_volumeSlider->hide();
     570}
     571
     572void MediaControlRootElementChromium::showTimeDisplay()
     573{
     574    m_hiddenTimeDisplay = false;
     575    m_durationDisplay->show();
     576    updateTimeDisplay();
     577}
     578
     579void MediaControlRootElementChromium::hideTimeDisplay()
     580{
     581    m_hiddenTimeDisplay = true;
     582    m_durationDisplay->hide();
     583    m_currentTimeDisplay->hide();
     584}
     585
     586void MediaControlRootElementChromium::showMuteButton()
     587{
     588    if (!m_mediaController->hasAudio())
     589        return;
     590
     591    m_panelMuteButton->show();
     592}
     593
     594void MediaControlRootElementChromium::hideMuteButton()
     595{
     596    m_panelMuteButton->hide();
     597}
     598
     599void MediaControlRootElementChromium::showFullscreenButton()
     600{
     601    if (!m_mediaController->supportsFullscreen() || !m_mediaController->hasVideo())
     602        return;
     603
     604    m_fullscreenButton->show();
     605}
     606
     607void MediaControlRootElementChromium::hideFullscreenButton()
     608{
     609    m_fullscreenButton->hide();
     610}
     611
     612void MediaControlRootElementChromium::showTimeline()
     613{
     614    m_timeline->show();
     615}
     616
     617void MediaControlRootElementChromium::hideTimeline()
     618{
     619    m_timeline->hide();
     620}
     621
    481622#if ENABLE(VIDEO_TRACK)
    482623void MediaControlRootElementChromium::createTextTrackDisplay()

  • trunk/Source/WebCore/html/shadow/MediaControlRootElementChromium.h

    r127035 r128075  
    7575public:
    7676    static PassRefPtr<MediaControlPanelEnclosureElement> create(Document*);
     77    virtual RenderObject* createRenderer(RenderArena*, RenderStyle*) OVERRIDE;
     78    void updatePadding(int mediaWidth);
    7779
    7880private:
    … …  
    110112
    111113    void showVolumeSlider();
     114    void hideVolumeSlider();
     115    void showTimeDisplay();
     116    void hideTimeDisplay();
     117    void showMuteButton();
     118    void hideMuteButton();
     119    void showFullscreenButton();
     120    void hideFullscreenButton();
     121    void showTimeline();
     122    void hideTimeline();
     123
    112124    void updateTimeDisplay();
    113125    void updateStatusDisplay();
    … …  
    160172    bool m_isMouseOverControls;
    161173    bool m_isFullscreen;
     174    bool m_hiddenTimeDisplay;
    162175};
    163176
Note: See TracChangeset for help on using the changeset viewer.