Changeset 145214 in webkit


Ignore:
Timestamp:
Mar 8, 2013 6:23:01 AM (11 years ago)
Author:
allan.jensen@digia.com
Message:

[Qt] HTML5 video - sound volume bar out of widget
https://bugs.webkit.org/show_bug.cgi?id=108213

Reviewed by Jocelyn Turcotte.

Since we use Safari shadow DOM for media controls, follow
the overall layout of Safari media control CSS.

  • css/mediaControlsQt.css:

(audio::-webkit-media-controls-panel, video::-webkit-media-controls-panel):
(audio::-webkit-media-controls-mute-button, video::-webkit-media-controls-mute-button):
(audio::-webkit-media-controls-play-button, video::-webkit-media-controls-play-button):
(audio::-webkit-media-controls-timeline-container, video::-webkit-media-controls-timeline-container):
(audio::-webkit-media-controls-current-time-display, video::-webkit-media-controls-current-time-display):
(audio::-webkit-media-controls-time-remaining-display, video::-webkit-media-controls-time-remaining-display):
(audio::-webkit-media-controls-timeline, video::-webkit-media-controls-timeline):
(audio::-webkit-media-controls-volume-slider-container, video::-webkit-media-controls-volume-slider-container):
(audio::-webkit-media-controls-volume-slider, video::-webkit-media-controls-volume-slider):
(audio::-webkit-media-controls-seek-back-button, video::-webkit-media-controls-seek-back-button):
(audio::-webkit-media-controls-seek-forward-button, video::-webkit-media-controls-seek-forward-button):
(audio::-webkit-media-controls-rewind-button, video::-webkit-media-controls-rewind-button):
(audio::-webkit-media-controls-return-to-realtime-button, video::-webkit-media-controls-return-to-realtime-button):
(audio::-webkit-media-controls-toggle-closed-captions-button, video::-webkit-media-controls-toggle-closed-captions-button):

Location:
trunk/Source/WebCore
Files:
2 edited

Legend:

Unmodified
Added
Removed
  • trunk/Source/WebCore/ChangeLog

    r145210 r145214  
     12013-03-08  Allan Sandfeld Jensen  <allan.jensen@digia.com>
     2
     3        [Qt] HTML5 video - sound volume bar out of widget
     4        https://bugs.webkit.org/show_bug.cgi?id=108213
     5
     6        Reviewed by Jocelyn Turcotte.
     7
     8        Since we use Safari shadow DOM for media controls, follow
     9        the overall layout of Safari media control CSS.
     10
     11        * css/mediaControlsQt.css:
     12        (audio::-webkit-media-controls-panel, video::-webkit-media-controls-panel):
     13        (audio::-webkit-media-controls-mute-button, video::-webkit-media-controls-mute-button):
     14        (audio::-webkit-media-controls-play-button, video::-webkit-media-controls-play-button):
     15        (audio::-webkit-media-controls-timeline-container, video::-webkit-media-controls-timeline-container):
     16        (audio::-webkit-media-controls-current-time-display, video::-webkit-media-controls-current-time-display):
     17        (audio::-webkit-media-controls-time-remaining-display, video::-webkit-media-controls-time-remaining-display):
     18        (audio::-webkit-media-controls-timeline, video::-webkit-media-controls-timeline):
     19        (audio::-webkit-media-controls-volume-slider-container, video::-webkit-media-controls-volume-slider-container):
     20        (audio::-webkit-media-controls-volume-slider, video::-webkit-media-controls-volume-slider):
     21        (audio::-webkit-media-controls-seek-back-button, video::-webkit-media-controls-seek-back-button):
     22        (audio::-webkit-media-controls-seek-forward-button, video::-webkit-media-controls-seek-forward-button):
     23        (audio::-webkit-media-controls-rewind-button, video::-webkit-media-controls-rewind-button):
     24        (audio::-webkit-media-controls-return-to-realtime-button, video::-webkit-media-controls-return-to-realtime-button):
     25        (audio::-webkit-media-controls-toggle-closed-captions-button, video::-webkit-media-controls-toggle-closed-captions-button):
     26
    1272013-03-08  Allan Sandfeld Jensen  <allan.jensen@digia.com>
    228
  • trunk/Source/WebCore/css/mediaControlsQt.css

    r142947 r145214  
    22 * QtWebKit specific overrides for HTML5 media elements.
    33 *
    4  * Copyright (C) 2009 Apple Inc.  All rights reserved.
     4 * Copyright (C) 2009, 2011 Apple Inc.  All rights reserved.
    55 * Copyright (C) 2008 Nokia Corporation and/or its subsidiary(-ies)
     6 * Copyright (C) 2013 Digia Plc. and/or its subsidiary(-ies)
    67 *
    78 * Redistribution and use in source and binary forms, with or without
     
    3334}
    3435
    35 audio::-webkit-media-controls-panel {
    36     display: -webkit-flex;
    37     -webkit-flex-direction: row;
    38     -webkit-align-items: flex-end;
    39     -webkit-user-select: none;
    40     position: absolute;
    41     bottom: 0;
    42     width: 100%;
    43     z-index: 0;
     36audio::-webkit-media-controls-panel, video::-webkit-media-controls-panel {
    4437    overflow: visible;
    45     height: 100%;
    46     text-align: right;
     38    height: 34px;
     39    max-width: 800px;
     40    margin-left: auto;
     41    margin-right: auto;
    4742}
    4843
    49 video::-webkit-media-controls-panel {
    50     display: -webkit-flex;
    51     -webkit-flex-direction: row;
    52     -webkit-align-items: flex-end;
    53     -webkit-user-select: none;
    54     position: absolute;
    55     bottom: 0;
    56     width: 100%;
    57     z-index: 0;
    58     overflow: hidden;
    59     height: 100%;
    60     text-align: right;
    61 }
    62 
    63 video:-webkit-full-page-media::-webkit-media-controls-panel {
    64     bottom: 0px;
    65 }
    66 
    67 audio::-webkit-media-controls-mute-button {
     44audio::-webkit-media-controls-mute-button, video::-webkit-media-controls-mute-button  {
    6845    width: 12px;
    6946    height: 12px;
    7047    padding: 6px;
    71     margin: 5px 5px 5px 3px;
     48    margin-left: 6px;
     49    margin-right: 3px;
     50    border: none !important;
     51
     52    position: relative;
     53    z-index: 1;
     54}
     55
     56audio::-webkit-media-controls-play-button, video::-webkit-media-controls-play-button {
     57    width: 9px;
     58    height: 12px;
     59    padding: 6px 12px 6px 11px;
     60    margin-left: 5px;
     61    margin-right: 3px;
    7262    border: none !important;
    7363}
    7464
    75 video::-webkit-media-controls-mute-button {
    76     width: 12px;
    77     height: 12px;
    78     padding: 6px;
    79     margin: 5px 5px 5px 3px;
    80     border: none !important;
    81 }
    82 
    83 audio::-webkit-media-controls-play-button {
    84     width: 9px;
    85     height: 12px;
    86     padding: 6px 12px 6px 11px;
    87     margin: 5px 3px 5px 5px;
    88     border: none !important;
    89 }
    90 
    91 video::-webkit-media-controls-play-button {
    92     width: 9px;
    93     height: 12px;
    94     padding: 6px 12px 6px 11px;
    95     margin: 5px 3px 5px 5px;
    96     border: none !important;
    97 }
    98 
    99 audio::-webkit-media-controls-timeline-container {
     65audio::-webkit-media-controls-timeline-container, video::-webkit-media-controls-timeline-container {
    10066    height: 34px;
    10167}
    10268
    103 video::-webkit-media-controls-timeline-container {
    104     height: 34px;
    105 }
    106 
    107 audio::-webkit-media-controls-current-time-display {
     69audio::-webkit-media-controls-current-time-display, video::-webkit-media-controls-current-time-display {
    10870    -webkit-appearance: media-current-time-display;
    10971    -webkit-user-select: none;
     
    11173    height: 12px;
    11274    padding: 6px;
    113     margin: 5px 3px;
     75    margin-left: 3px;
     76    margin-right: 5px;
    11477
    11578    overflow: hidden;
     
    11780
    11881    text-align: center;
     82    font: -webkit-small-control;
    11983    font-size: 10px;
    120     font-family: Verdana;
    12184    font-weight: bold;
    12285    color: white;
    12386}
    12487
    125 video::-webkit-media-controls-current-time-display {
    126     -webkit-appearance: media-current-time-display;
    127     -webkit-user-select: none;
    128     display: inline-block;
    129     height: 12px;
    130     padding: 6px;
    131     margin: 5px 3px;
    132 
    133     overflow: hidden;
    134     cursor: default;
    135 
    136     text-align: center;
    137     font-size: 10px;
    138     font-family: Verdana;
    139     font-weight: bold;
    140     color: white;
    141 }
    142 
    143 audio::-webkit-media-controls-time-remaining-display {
     88audio::-webkit-media-controls-time-remaining-display, video::-webkit-media-controls-time-remaining-display {
    14489    display: none;
    14590}
    14691
    147 video::-webkit-media-controls-time-remaining-display {
    148     display: none;
     92audio::-webkit-media-controls-timeline, video::-webkit-media-controls-timeline {
     93    display: -webkit-flex;
     94    -webkit-flex: 1 1;
     95    height: 12px; /* See RenderThemeQt::adjustSliderThumbSize(). */
     96    padding: 6px 8px;
    14997}
    15098
    151 audio::-webkit-media-controls-timeline {
    152     height: 12px; /* See RenderThemeQt::adjustSliderThumbSize(). */
    153     padding: 6px 8px;
    154     margin: 5px 3px;
     99audio::-webkit-media-controls-volume-slider-container, video::-webkit-media-controls-volume-slider-container  {
     100    -webkit-appearance: media-volume-slider-container;
     101    position: absolute;
     102    bottom: 29px;
     103    z-index: 2;
     104
     105    width: 24px;
     106    height: 103px;
    155107}
    156108
    157 video::-webkit-media-controls-timeline {
    158     height: 12px; /* See RenderThemeQt::adjustSliderThumbSize(). */
    159     padding: 6px 8px;
    160     margin: 5px 3px;
    161 }
    162 
    163 audio::-webkit-media-controls-volume-slider-container {
    164     -webkit-appearance: media-volume-slider-container;
    165     position: absolute;
    166     height: 103px;
    167     width: 24px;
    168 }
    169 
    170 video::-webkit-media-controls-volume-slider-container {
    171     -webkit-appearance: media-volume-slider-container;
    172     position: absolute;
    173     height: 103px;
    174     width: 24px;
    175 }
    176 
    177 audio::-webkit-media-controls-volume-slider {
     109audio::-webkit-media-controls-volume-slider, video::-webkit-media-controls-volume-slider  {
    178110    -webkit-appearance: media-volume-slider;
    179111    display: inline;
    180112    position: absolute;
    181113
    182     width: 12px; /* See RenderThemeQt::adjustSliderThumbSize(). */
    183     padding: 6px;
    184     height: 88px;
    185     margin: 0 0 3px 0;
    186 }
    187 
    188 video::-webkit-media-controls-volume-slider {
    189     -webkit-appearance: media-volume-slider;
    190     display: inline;
    191     position: absolute;
     114    top: 0px;
     115    left: 6px;
    192116
    193117    width: 12px; /* See RenderThemeQt::adjustSliderThumbSize(). */
    194118    padding: 6px;
    195119    height: 88px;
    196     margin: 0 0 3px 0;
     120
    197121}
    198122
    199 audio::-webkit-media-controls-seek-back-button {
     123audio::-webkit-media-controls-seek-back-button, video::-webkit-media-controls-seek-back-button {
    200124    display: none;
    201125}
    202126
    203 video::-webkit-media-controls-seek-back-button {
    204     display: none;
    205 }
    206 
    207 audio::-webkit-media-controls-seek-forward-button {
    208     display: none;
    209 }
    210 
    211 video::-webkit-media-controls-seek-forward-button {
     127audio::-webkit-media-controls-seek-forward-button, video::-webkit-media-controls-seek-forward-button {
    212128    display: none;
    213129}
     
    227143}
    228144
    229 audio::-webkit-media-controls-rewind-button {
     145audio::-webkit-media-controls-rewind-button, video::-webkit-media-controls-rewind-button {
    230146    display: none;
    231147}
    232148
    233 video::-webkit-media-controls-rewind-button {
     149audio::-webkit-media-controls-return-to-realtime-button, video::-webkit-media-controls-return-to-realtime-button {
    234150    display: none;
    235151}
    236152
    237 audio::-webkit-media-controls-return-to-realtime-button {
    238     display: none;
    239 }
    240 
    241 video::-webkit-media-controls-return-to-realtime-button {
    242     display: none;
    243 }
    244 
    245 audio::-webkit-media-controls-toggle-closed-captions-button {
    246     display: none;
    247 }
    248 
    249 video::-webkit-media-controls-toggle-closed-captions-button {
     153audio::-webkit-media-controls-toggle-closed-captions-button, video::-webkit-media-controls-toggle-closed-captions-button {
    250154    display: none;
    251155}
Note: See TracChangeset for help on using the changeset viewer.