Changeset 164782 in webkit


Ignore:
Timestamp:
Feb 27, 2014 1:16:18 AM (10 years ago)
Author:
calvaris@igalia.com
Message:

[GTK] Improve JavaScript multimedia controls
​https://bugs.webkit.org/show_bug.cgi?id=129044

Reviewed by Jer Noble.

Source/WebCore:

After webkit.org/b/123097 a follow up was needed to improve
accessibily and some other cosmetic problems, like cleaner CSS and
new missing baselines.

No new tests because of no new functionality.

  • Modules/mediacontrols/mediaControlsApple.js:

Added hiding class name.

  • Modules/mediacontrols/mediaControlsGtk.js:

(ControllerGtk.prototype.createControls): Set remaining time as
hidden by default and turned volumebox hidden into hiding.
(ControllerGtk.prototype.updateTime): Simplified the hiding and
showing by removing the show class and using hidden only.
(ControllerGtk.prototype.handleMuteButtonMouseOver):
(ControllerGtk.prototype.handleVolumeBoxMouseOut): Turned hidden
into hiding.
(ControllerGtk.prototype.updateReadyState): Changed coding style
and added down class for the panel too.
(ControllerGtk.prototype.updatePlaying): Change for coding style
coherence.
(ControllerGtk.prototype.handleCaptionButtonClicked): Call
handleCaptionButtonShowMenu.
(ControllerGtk.prototype.handleCaptionButtonMouseOver): Call
handleCaptionButtonShowMenu.
(ControllerGtk.prototype.handleCaptionButtonShowMenu): Created
with the former behavior of handleCaptionButtonMouseOver.

  • css/mediaControlsGtk.css:

(.hidden): Set display none for all objects with hidden class.
(audio::-webkit-media-controls-panel *:focus):
(audio::-webkit-media-controls-panel.down *:focus): Added gradient
for the active and focus status.
(audio::-webkit-media-controls-time-remaining-display)
(video::-webkit-media-controls-time-remaining-display): Set
display block.
(audio::-webkit-media-controls-volume-slider-container)
(video::-webkit-media-controls-volume-slider-container): Set
display flex.
(video::-webkit-media-controls-volume-slider-container.hiding):
Changed from hidden.
(video::-webkit-media-controls-panel .hiding.down): Changed from
hidden.

  • platform/gtk/RenderThemeGtk.cpp:

(WebCore::RenderThemeGtk::paintMediaButton): Returning true to
allow CSS painting the gradient.

LayoutTests:

  • media/controls-without-preload.html: Fixed.
  • platform/gtk/accessibility/media-controls-panel-title-expected.txt:
  • platform/gtk/accessibility/media-controls-panel-title.html:
  • platform/gtk/accessibility/media-emits-object-replacement-expected.txt:
  • platform/gtk/media/video-volume-slider-expected.png:
  • platform/gtk/media/video-volume-slider-expected.txt:
  • platform/gtk/media/video-zoom-controls-expected.txt: Rebaseline.
Location:
trunk
Files:
13 edited

Legend:

Unmodified
Added
Removed

  • trunk/LayoutTests/ChangeLog

    r164770 r164782  
     12014-02-27  Xabier Rodriguez Calvar  <calvaris@igalia.com>
     2
     3        [GTK] Improve JavaScript multimedia controls
     4        https://bugs.webkit.org/show_bug.cgi?id=129044
     5
     6        Reviewed by Jer Noble.
     7
     8        * media/controls-without-preload.html: Fixed.
     9        * platform/gtk/accessibility/media-controls-panel-title-expected.txt:
     10        * platform/gtk/accessibility/media-controls-panel-title.html:
     11        * platform/gtk/accessibility/media-emits-object-replacement-expected.txt:
     12        * platform/gtk/media/video-volume-slider-expected.png:
     13        * platform/gtk/media/video-volume-slider-expected.txt:
     14        * platform/gtk/media/video-zoom-controls-expected.txt: Rebaseline.
     15
    1162014-02-26  Ryosuke Niwa  <rniwa@webkit.org>
    217

  • trunk/LayoutTests/media/controls-without-preload.html

    r120416 r164782  
    1010            function start()
    1111            {
     12                internals.suspendAnimations();
    1213                setSrcByTagName("video", findMediaFile("video", "content/test"));
    1314                video = document.getElementsByTagName('video')[0];

  • trunk/LayoutTests/platform/gtk/accessibility/media-controls-panel-title-expected.txt

    r158841 r164782  
    1010PASS element.title is 'AXTitle: '
    1111PASS element.role is 'AXRole: AXToolbar'
    12 PASS element.title is 'AXTitle: video playback'
     12PASS element.title is 'AXTitle: Video Playback'
    1313PASS element.role is 'AXRole: AXEmbedded'
    1414PASS element.title is 'AXTitle: '
    1515PASS element.role is 'AXRole: AXToolbar'
    16 PASS element.title is 'AXTitle: audio playback'
     16PASS element.title is 'AXTitle: Audio Playback'
    1717PASS successfullyParsed is true
    1818

  • trunk/LayoutTests/platform/gtk/accessibility/media-controls-panel-title.html

    r158841 r164782  
    2424    element = element.childAtIndex(0);
    2525    shouldBe("element.role", "'AXRole: AXToolbar'");
    26     shouldBe("element.title", "'AXTitle: video playback'");
     26    shouldBe("element.title", "'AXTitle: Video Playback'");
    2727
    2828    // Audio element.
    … …  
    3232    element = element.childAtIndex(0);
    3333    shouldBe("element.role", "'AXRole: AXToolbar'");
    34     shouldBe("element.title", "'AXTitle: audio playback'");
     34    shouldBe("element.title", "'AXTitle: Audio Playback'");
    3535}
    3636

  • trunk/LayoutTests/platform/gtk/accessibility/media-emits-object-replacement-expected.txt

    r160323 r164782  
    77        AXRole: AXEmbedded
    88            AXRole: AXToolbar
    9                 AXRole: AXToolbar
    10                     AXRole: AXButton
    11                     AXRole: AXSlider
     9                AXRole: AXButton
     10                AXRole: AXSlider
     11                AXRole: AXTimer AXValue: 00:00
    1212    AXRole: AXGroup AXValue: <\n>
    1313    AXRole: AXSection AXValue: a <obj> b
    1414        AXRole: AXEmbedded
    1515            AXRole: AXToolbar
    16                 AXRole: AXToolbar
    17                     AXRole: AXButton
    18                     AXRole: AXSlider
     16                AXRole: AXButton
     17                AXRole: AXSlider
     18                AXRole: AXTimer AXValue: 00:00
    1919    AXRole: AXSection AXValue: End of test
    2020This tests ensures that if video or audio tags are used, they will emit an object replacement character in a range for string operation.

  • trunk/LayoutTests/platform/gtk/media/video-volume-slider-expected.txt

    r164024 r164782  
    77        text run at (0,0) width 433: "Tests if the volume slider is rendererd properly. This test assumes the"
    88      RenderBR {BR} at (433,14) size 0x0
    9       RenderText {#text} at (0,18) size 453x17
    10         text run at (0,18) width 453: "volume slider is implemented and mouse over the right bottom corner of"
    11       RenderBR {BR} at (453,32) size 0x0
    12       RenderText {#text} at (0,36) size 270x17
    13         text run at (0,36) width 270: "video element will show the volume slider."
    14       RenderBR {BR} at (270,50) size 0x0
     9      RenderText {#text} at (0,17) size 453x17
     10        text run at (0,17) width 453: "volume slider is implemented and mouse over the right bottom corner of"
     11      RenderBR {BR} at (453,31) size 0x0
     12      RenderText {#text} at (0,34) size 270x17
     13        text run at (0,34) width 270: "video element will show the volume slider."
     14      RenderBR {BR} at (270,48) size 0x0
    1515      RenderText {#text} at (0,0) size 0x0
    16 layer at (8,62) size 320x240
    17   RenderVideo {VIDEO} at (0,54) size 320x240
    18 layer at (8,62) size 320x240
     16layer at (8,59) size 320x240
     17  RenderVideo {VIDEO} at (0,51) size 320x240
     18layer at (8,59) size 320x240
    1919  RenderFlexibleBox {DIV} at (0,0) size 320x240
    2020    RenderBlock {DIV} at (0,200) size 320x40
    21 layer at (13,267) size 310x30
     21layer at (13,264) size 310x30
    2222  RenderFlexibleBox {DIV} at (5,5) size 310x30 [bgcolor=#141414CC]
    2323    RenderButton {BUTTON} at (9,0) size 30x30
    … …  
    3232    RenderFlexibleBox {DIV} at (271,0) size 30x30
    3333      RenderButton {BUTTON} at (0,0) size 30x30
    34 layer at (284,167) size 30x100
    35   RenderBlock (positioned) zI: 2 {DIV} at (271,-100) size 30x100 [bgcolor=#141414CC]
     34layer at (284,164) size 30x100
     35  RenderFlexibleBox zI: 2 {DIV} at (271,-100) size 30x100 [bgcolor=#141414CC]
    3636    RenderSlider {INPUT} at (11,10) size 8x80 [color=#E6E6E659]
    3737      RenderFlexibleBox {DIV} at (0,0) size 8x80 [border: (1px solid #E6E6E659)]

  • trunk/LayoutTests/platform/gtk/media/video-zoom-controls-expected.txt

    r164024 r164782  
    1616    RenderButton {BUTTON} at (13,0) size 46x45
    1717    RenderSlider {INPUT} at (73,16) size 38x13 [color=#E6E6E659]
    18       RenderFlexibleBox {DIV} at (0,0) size 38x12 [border: (1px solid #E6E6E659)]
    19         RenderBlock {DIV} at (1,-3) size 57x18
     18      RenderFlexibleBox {DIV} at (0,0) size 38x12 [border: (1.50px solid #E6E6E659)]
     19        RenderBlock {DIV} at (1,-3) size 56x18
    2020          RenderBlock {DIV} at (-11,0) size 19x18 [color=#FFFFFF]
    2121    RenderBlock {DIV} at (133,0) size 109x45 [color=#FFFFFF]
    … …  
    3434    RenderButton {BUTTON} at (13,0) size 46x45
    3535    RenderSlider {INPUT} at (73,16) size 38x13 [color=#E6E6E659]
    36       RenderFlexibleBox {DIV} at (0,0) size 38x12 [border: (1px solid #E6E6E659)]
    37         RenderBlock {DIV} at (1,-3) size 57x18
     36      RenderFlexibleBox {DIV} at (0,0) size 38x12 [border: (1.50px solid #E6E6E659)]
     37        RenderBlock {DIV} at (1,-3) size 56x18
    3838          RenderBlock {DIV} at (-11,0) size 19x18 [color=#FFFFFF]
    3939    RenderBlock {DIV} at (133,0) size 109x45 [color=#FFFFFF]

  • trunk/Source/WebCore/ChangeLog

    r164780 r164782  
     12014-02-27  Xabier Rodriguez Calvar  <calvaris@igalia.com>
     2
     3        [GTK] Improve JavaScript multimedia controls
     4        https://bugs.webkit.org/show_bug.cgi?id=129044
     5
     6        Reviewed by Jer Noble.
     7
     8        After webkit.org/b/123097 a follow up was needed to improve
     9        accessibily and some other cosmetic problems, like cleaner CSS and
     10        new missing baselines.
     11
     12        No new tests because of no new functionality.
     13
     14        * Modules/mediacontrols/mediaControlsApple.js:
     15        Added hiding class name.
     16        * Modules/mediacontrols/mediaControlsGtk.js:
     17        (ControllerGtk.prototype.createControls): Set remaining time as
     18        hidden by default and turned volumebox hidden into hiding.
     19        (ControllerGtk.prototype.updateTime): Simplified the hiding and
     20        showing by removing the show class and using hidden only.
     21        (ControllerGtk.prototype.handleMuteButtonMouseOver):
     22        (ControllerGtk.prototype.handleVolumeBoxMouseOut): Turned hidden
     23        into hiding.
     24        (ControllerGtk.prototype.updateReadyState): Changed coding style
     25        and added down class for the panel too.
     26        (ControllerGtk.prototype.updatePlaying): Change for coding style
     27        coherence.
     28        (ControllerGtk.prototype.handleCaptionButtonClicked): Call
     29        handleCaptionButtonShowMenu.
     30        (ControllerGtk.prototype.handleCaptionButtonMouseOver): Call
     31        handleCaptionButtonShowMenu.
     32        (ControllerGtk.prototype.handleCaptionButtonShowMenu): Created
     33        with the former behavior of handleCaptionButtonMouseOver.
     34        * css/mediaControlsGtk.css:
     35        (.hidden): Set display none for all objects with hidden class.
     36        (audio::-webkit-media-controls-panel *:focus):
     37        (audio::-webkit-media-controls-panel.down *:focus): Added gradient
     38        for the active and focus status.
     39        (audio::-webkit-media-controls-time-remaining-display)
     40        (video::-webkit-media-controls-time-remaining-display): Set
     41        display block.
     42        (audio::-webkit-media-controls-volume-slider-container)
     43        (video::-webkit-media-controls-volume-slider-container): Set
     44        display flex.
     45        (video::-webkit-media-controls-volume-slider-container.hiding):
     46        Changed from hidden.
     47        (video::-webkit-media-controls-panel .hiding.down): Changed from
     48        hidden.
     49        * platform/gtk/RenderThemeGtk.cpp:
     50        (WebCore::RenderThemeGtk::paintMediaButton): Returning true to
     51        allow CSS painting the gradient.
     52
    1532014-02-27  Zan Dobersek  <zdobersek@igalia.com>
    254

  • trunk/Source/WebCore/Modules/mediacontrols/mediaControlsApple.js

    r164661 r164782  
    7070        exit: 'exit',
    7171        hidden: 'hidden',
     72        hiding: 'hiding',
    7273        list: 'list',
    7374        muteBox: 'mute-box',

  • trunk/Source/WebCore/Modules/mediacontrols/mediaControlsGtk.js

    r164711 r164782  
    2525
    2626        this.controls.currentTime.classList.add(this.ClassNames.hidden);
     27        this.controls.remainingTime.classList.add(this.ClassNames.hidden);
    2728
    2829        this.controls.volumeBox.setAttribute('pseudo', '-webkit-media-controls-volume-slider-container');
    29         this.controls.volumeBox.classList.add(this.ClassNames.hidden);
     30        this.controls.volumeBox.classList.add(this.ClassNames.hiding);
    3031
    3132        this.listenFor(this.controls.muteBox, 'mouseout', this.handleVolumeBoxMouseOut);
    … …  
    6667        this.controls.currentTime.innerText = this.formatTime(currentTime);
    6768        this.controls.timeline.value = currentTime;
    68         if (duration === Infinity || duration === NaN) {
    69             this.controls.remainingTime.classList.remove(this.ClassNames.show);
    70         } else {
     69        if (duration === Infinity || duration === NaN)
     70            this.controls.remainingTime.classList.add(this.ClassNames.hidden);
     71        else {
    7172            this.controls.currentTime.innerText += " / " + this.formatTime(duration);
    7273            this.controls.remainingTime.innerText = this.formatTime(duration);
    73             this.controls.remainingTime.classList.add(this.ClassNames.show);
     74            if (this.controls.currentTime.classList.contains(this.ClassNames.hidden))
     75                this.controls.remainingTime.classList.remove(this.ClassNames.hidden);
    7476        }
    7577
    … …  
    9799    handleMuteButtonMouseOver: function(event)
    98100    {
    99         this.controls.volumeBox.classList.remove(this.ClassNames.hidden);
     101        this.controls.volumeBox.classList.remove(this.ClassNames.hiding);
    100102    },
    101103
    102104    handleVolumeBoxMouseOut: function(event)
    103105    {
    104         this.controls.volumeBox.classList.add(this.ClassNames.hidden);
     106        this.controls.volumeBox.classList.add(this.ClassNames.hiding);
    105107    },
    106108
    … …  
    112114    updateReadyState: function()
    113115    {
    114         if (this.host.supportsFullscreen && this.video.videoTracks.length) {
     116        if (this.host.supportsFullscreen && this.video.videoTracks.length)
    115117            this.controls.fullscreenButton.classList.remove(this.ClassNames.hidden);
     118        else
     119            this.controls.fullscreenButton.classList.add(this.ClassNames.hidden);
     120        if (this.video.offsetTop + this.controls.enclosure.offsetTop < 105) {
     121            this.controls.volumeBox.classList.add(this.ClassNames.down);
     122            this.controls.panel.classList.add(this.ClassNames.down);
    116123        } else {
    117             this.controls.fullscreenButton.classList.add(this.ClassNames.hidden);
     124            this.controls.volumeBox.classList.remove(this.ClassNames.down);
     125            this.controls.panel.classList.remove(this.ClassNames.down);
    118126        }
    119         if (this.video.offsetTop + this.controls.enclosure.offsetTop < 105)
    120             this.controls.volumeBox.classList.add(this.ClassNames.down);
    121         else
    122             this.controls.volumeBox.classList.remove(this.ClassNames.down);
    123127        this.updateVolume();
    124128    },
    … …  
    136140    {
    137141        Controller.prototype.updatePlaying.apply(this, arguments);
    138         if (!this.canPlay()) {
     142        if (!this.canPlay())
    139143            this.showControls();
    140         }
    141144    },
    142145
    143146    handleCaptionButtonClicked: function(event)
    144147    {
    145         // Handled with mouseover and mouseout.
     148        this.handleCaptionButtonShowMenu(event)
    146149    },
    147150
    … …  
    187190    handleCaptionButtonMouseOver: function(event)
    188191    {
     192        this.handleCaptionButtonShowMenu(event);
     193    },
     194
     195    handleCaptionButtonShowMenu: function(event)
     196    {
    189197        if (!this.captionMenu)
    190198            this.buildCaptionMenu();

  • trunk/Source/WebCore/css/mediaControlsGtk.css

    r164024 r164782  
    2828/* These are based on the Chromium media controls */
    2929
     30.hidden {
     31    display: none !important;
     32}
     33
     34video::-webkit-media-controls-panel *:active,
     35video::-webkit-media-controls-panel *:focus,
     36audio::-webkit-media-controls-panel *:active,
     37audio::-webkit-media-controls-panel *:focus {
     38    background-image: linear-gradient(rgba(0, 0, 0, .05), rgba(255, 255, 255, .05)) !important;
     39}
     40
     41audio::-webkit-media-controls-panel.down *:active,
     42audio::-webkit-media-controls-panel.down *:focus {
     43    background-image: linear-gradient(rgba(255, 255, 255, .05), rgba(0, 0, 0, .05)) !important;
     44}
     45
    3046body:-webkit-full-page-media {
    3147    background-color: rgb(0, 0, 0);
    … …  
    87103}
    88104
     105audio::-webkit-media-controls-panel,
     106video:-webkit-full-page-media::-webkit-media-controls-panel.no-video,
     107video::-webkit-media-controls-panel:hover,
    89108video::-webkit-media-controls-panel.show,
    90109video::-webkit-media-controls-panel.paused {
    … …  
    100119    height: 30px;
    101120    margin: 0 9px 0 -7px;
    102 }
    103 
    104 video::-webkit-media-controls-panel div.mute-box.hidden,
    105 audio::-webkit-media-controls-panel div.mute-box.hidden {
    106     display: none;
    107121}
    108122
    … …  
    137151    -webkit-user-select: none;
    138152    -webkit-flex: none;
     153    display: block;
    139154    border: none;
    140155    cursor: default;
    … …  
    156171    text-shadow: none;
    157172    text-decoration: none;
    158 }
    159 
    160 audio::-webkit-media-controls-current-time-display, video::-webkit-media-controls-current-time-display {
    161     display: block;
    162 }
    163 
    164 audio::-webkit-media-controls-time-remaining-display,
    165 video::-webkit-media-controls-time-remaining-display {
    166     display: none;
    167 }
    168 
    169 audio::-webkit-media-controls-time-remaining-display.show,
    170 video::-webkit-media-controls-time-remaining-display.show {
    171     display: block;
    172 }
    173 
    174 audio::-webkit-media-controls-current-time-display.hidden,
    175 video::-webkit-media-controls-current-time-display.hidden,
    176 audio::-webkit-media-controls-time-remaining-display.hidden,
    177 video::-webkit-media-controls-time-remaining-display.hidden {
    178     display: none;
    179173}
    180174
    … …  
    195189audio::-webkit-media-controls-volume-slider-container, video::-webkit-media-controls-volume-slider-container {
    196190    -webkit-appearance: media-volume-slider-container;
     191    display: -webkit-flex;
    197192    overflow: hidden;
    198193    position: absolute;
    … …  
    208203}
    209204
    210 audio::-webkit-media-controls-volume-slider-container.hidden,
    211 video::-webkit-media-controls-volume-slider-container.hidden {
     205audio::-webkit-media-controls-volume-slider-container.hiding,
     206video::-webkit-media-controls-volume-slider-container.hiding {
    212207    height: 0;
    213208}
    … …  
    220215}
    221216
    222 audio::-webkit-media-controls-panel .hidden.down,
    223 video::-webkit-media-controls-panel .hidden.down {
     217audio::-webkit-media-controls-panel .hiding.down,
     218video::-webkit-media-controls-panel .hiding.down {
    224219    bottom: 0;
    225220}
    … …  
    355350    outline: none;
    356351}
    357 
    358 video::-webkit-media-controls-panel button.hidden,
    359 audio::-webkit-media-controls-panel button.hidden {
    360     display: none;
    361 }

  • trunk/Source/WebCore/platform/gtk/RenderThemeGtk.cpp

    r164277 r164782  
    514514        gtkTextDirection(renderObject->style().direction()), gtkIconState(this, renderObject), iconRect.width());
    515515    paintGdkPixbuf(context, icon.get(), iconRect);
    516     return false;
     516    return true;
    517517}
    518518
Note: See TracChangeset for help on using the changeset viewer.