Changeset 180893 in webkit


Ignore:
Timestamp:
Mar 2, 2015 1:07:33 PM (9 years ago)
Author:
roger_fong@apple.com
Message:

Update inline media element controls appearance Part 1.
​https://bugs.webkit.org/show_bug.cgi?id=142138.
<rdar://problem/19997384>

Reviewed by Dean Jackson.

Update positioning, sizes, and background colors media control elements.
Volume and timeline sliders will be drawn in a separate patch via 2d canvases.

  • Modules/mediacontrols/mediaControlsApple.css:

(audio::-webkit-media-controls-panel):
(video::-webkit-media-controls-panel):
(audio::-webkit-media-controls-rewind-button):
(audio::-webkit-media-controls-play-button):
(audio::-webkit-media-controls-panel .mute-box):
(video::-webkit-media-controls-volume-max-button):
(audio::-webkit-media-controls-panel .volume-box):
(audio::-webkit-media-controls-panel .volume-box:active):
(video::-webkit-media-controls-volume-slider):
(audio::-webkit-media-controls-toggle-closed-captions-button):
(audio::-webkit-media-controls-fullscreen-button):
(audio::-webkit-media-controls-current-time-display):
(audio::-webkit-media-controls-time-remaining-display):
(audio::-webkit-media-controls-timeline-container .hour-long-time): Deleted.

Skip media control tests for now while new look is being finalized.

  • platform/mac/TestExpectations:
Location:
trunk
Files:
4 edited

Legend:

Unmodified
Added
Removed

  • trunk/LayoutTests/ChangeLog

    r180890 r180893  
     12015-02-28  Roger Fong  <roger_fong@apple.com>
     2
     3        Skip media control tests for now while new look is being finalized.
     4        https://bugs.webkit.org/show_bug.cgi?id=142138.
     5
     6        Reviewed by Dean Jackson.
     7
     8        * platform/mac/TestExpectations:
     9
    1102015-03-02  Brent Fulgham  <bfulgham@apple.com>
    211

  • trunk/LayoutTests/platform/mac/TestExpectations

    r180888 r180893  
    12711271
    12721272webkit.org/b/141534 [ Yosemite ] media/video-load-networkState.html [ Pass Crash ]
     1273
     1274# Skip media control tests until new controls are finalized
     1275webkit.org/b/142142 media/video-no-audio.html [ Skip ]
     1276webkit.org/b/142142 media/controls-strict.html [ Skip ]
     1277webkit.org/b/142142 media/video-volume-slider.html [ Skip ]
     1278webkit.org/b/142142 media/controls-styling.html [ Skip ]
     1279webkit.org/b/142142 media/video-display-toggle.html [ Skip ]
     1280webkit.org/b/142142 media/audio-controls-rendering.html [ Skip ]
     1281webkit.org/b/142142 media/video-zoom-controls.html [ Skip ]
     1282webkit.org/b/142142 fast/hidpi/video-controls-in-hidpi.html [ Skip ]
     1283webkit.org/b/142142 media/video-controls-rendering.html [ Skip ]
     1284webkit.org/b/142142 accessibility/media-element.html [ Skip ]
     1285webkit.org/b/142142 media/controls-without-preload.html [ Skip ]
     1286webkit.org/b/142142 media/media-controls-clone.html [ Skip ]
     1287webkit.org/b/142142 fast/layers/video-layer.html [ Skip ]
     1288webkit.org/b/142142 media/video-empty-source.html [ Skip ]
     1289webkit.org/b/142142 media/audio-delete-while-slider-thumb-clicked.html [ Skip ]
     1290webkit.org/b/142142 media/controls-after-reload.html [ Skip ]

  • trunk/Source/WebCore/ChangeLog

    r180883 r180893  
     12015-03-01  Roger Fong  <roger_fong@apple.com>
     2
     3        Update inline media element controls appearance Part 1.
     4        https://bugs.webkit.org/show_bug.cgi?id=142138.
     5        <rdar://problem/19997384>
     6
     7        Reviewed by Dean Jackson.
     8
     9        Update positioning, sizes, and background colors media control elements.
     10        Volume and timeline sliders will be drawn in a separate patch via 2d canvases.
     11
     12        * Modules/mediacontrols/mediaControlsApple.css:
     13        (audio::-webkit-media-controls-panel):
     14        (video::-webkit-media-controls-panel):
     15        (audio::-webkit-media-controls-rewind-button):
     16        (audio::-webkit-media-controls-play-button):
     17        (audio::-webkit-media-controls-panel .mute-box):
     18        (video::-webkit-media-controls-volume-max-button):
     19        (audio::-webkit-media-controls-panel .volume-box):
     20        (audio::-webkit-media-controls-panel .volume-box:active):
     21        (video::-webkit-media-controls-volume-slider):
     22        (audio::-webkit-media-controls-toggle-closed-captions-button):
     23        (audio::-webkit-media-controls-fullscreen-button):
     24        (audio::-webkit-media-controls-current-time-display):
     25        (audio::-webkit-media-controls-time-remaining-display):
     26        (audio::-webkit-media-controls-timeline-container .hour-long-time): Deleted.
     27
    1282015-03-02  David Kilzer  <ddkilzer@apple.com>
    229

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

    r175715 r180893  
    7878    -webkit-user-select: none;
    7979    -webkit-user-drag: element;
    80     background-color: transparent;
    81     background-image: -webkit-linear-gradient(top,
    82         rgba(0,  0,  0,  .92) 0,
    83         rgba(0,  0,  0,  .92) 1px,
    84         rgba(89, 89, 89, .92) 1px,
    85         rgba(89, 89, 89, .92) 2px,
    86         rgba(60, 60, 60, .92) 2px,
    87         rgba(35, 35, 35, .92) 12px,
    88         rgba(30, 30, 30, .92) 12px,
    89         rgba(30, 30, 30, .92) 13px,
    90         rgba(25, 25, 25, .92) 13px,
    91         rgba(17, 17, 17, .92) 100%
    92     );
     80    background-color: black !important;
    9381
    9482    display: -webkit-flex;
    … …  
    10492video::-webkit-media-controls-panel {
    10593    cursor: none;
    106     opacity: 0;
    10794}
    10895
    … …  
    141128    height: 18px;
    142129    margin-bottom: 1px;
    143     margin-left: 6px;
    144     margin-right: 4px;
     130    margin-left: 8px;
    145131}
    146132
    … …  
    148134audio::-webkit-media-controls-play-button {
    149135    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 15"><linearGradient id="gradient" x2="0" y2="100%" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="rgb(216, 216, 216)"/><stop offset="0.4375" stop-color="rgb(216, 216, 216)"/><stop offset="0.4375" stop-color="rgb(208, 208, 208)"/><stop offset="0.5" stop-color="rgb(208, 208, 208)"/><stop offset="0.5" stop-color="rgb(200, 200, 200)"/><stop offset="1" stop-color="rgb(208, 208, 208)"/></linearGradient><path d="M 0,0 v 16 h 6 v -16 h -6 z" fill="url(#gradient)"/><path d="M 9,0 v 16 h 6 v -16 h -6 z" fill="url(#gradient)"/></svg>');
    150     margin-left: 6px;
    151     margin-right: 1px;
     136    margin-left: 16px;
    152137}
    153138
    … …  
    159144video::-webkit-media-controls-panel .mute-box,
    160145audio::-webkit-media-controls-panel .mute-box {
    161     width: 22px;
    162     height: 22px;
    163     margin-right: 2px;
    164 
     146    width: 16px;
     147    height: 16px;
     148    margin-right: 16px;
    165149    position: relative;
    166150    display: -webkit-flex;
    … …  
    174158video::-webkit-media-controls-volume-max-button {
    175159    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 15"><linearGradient id="gradient" x2="0" y2="100%" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="rgb(216, 216, 216)"/><stop offset="0.4375" stop-color="rgb(216, 216, 216)"/><stop offset="0.4375" stop-color="rgb(208, 208, 208)"/><stop offset="0.5" stop-color="rgb(208, 208, 208)"/><stop offset="0.5" stop-color="rgb(200, 200, 200)"/><stop offset="1" stop-color="rgb(208, 208, 208)"/></linearGradient><path d="m 0,9 0,-4 3,0 3,-3 0,10 -3,-3 -3,0 z" style="fill:url(#gradient) "/><path d="m 10.449,1.087 c 1.963,1.055 3.322,3.291 3.322,5.881 0,2.642 -1.402,4.913 -3.424,5.945" style="fill:none;stroke:url(#gradient);stroke-width:1.25;stroke-linecap:round;"/><path d="m 9.13,3.134 c 1.289,0.681 2.181,2.142 2.181,3.835 0,1.743001 -0.939,3.24 -2.285,3.897" style="fill:none;stroke:url(#gradient);stroke-width:1.25;stroke-linecap:round;"/><path d="M 7.794,5.175 C 8.403001,5.491 8.827001,6.167 8.827001,6.971 8.827001,7.818 8.356,8.537001 7.688,8.826" style="fill:none;stroke:url(#gradient);stroke-width:1.25;stroke-linecap:round;"/></svg>');
    176     width: 14px;
    177160}
    178161
    … …  
    181164    position: absolute;
    182165    box-sizing: border-box;
    183     height: 22px;
     166    height: 23px;
    184167    bottom: 0;
    185168    left: 0;
    186169
    187     -webkit-transform: rotate(-90deg);
     170    -webkit-transform: rotate(-90deg) translateY(-4px) translateX(-5px);
    188171    -webkit-transform-origin: 11px 11px;
    189172
    190     background-color: transparent;
    191     background-image: -webkit-linear-gradient(
    192         left,
    193         rgba(17, 17, 17,  0.92),
    194         rgba(42, 42, 42, 0.92)
    195     );
    196     border: 1px solid rgba(0, 0, 0, 0.95);
    197     border-radius: 12px;
     173    background-color: black;
     174    border-radius: 4px;
    198175
    199176    display: -webkit-flex;
    … …  
    204181    opacity: 0;
    205182    /* make zero width (rather than display:none) for AX and FKA */
    206     width: 0; /* will become 114px when shown */
     183    width: 0; /* will become 101px when shown */
    207184
    208185}
    … …  
    217194    opacity: 1;
    218195    /* resize to usable amount (rather than display:none) for AX and FKA */
    219     width: 114px;
     196    width: 101px;
    220197}
    221198
    … …  
    224201    -webkit-appearance: none !important;
    225202    box-sizing: border-box !important;
    226     height: 10px !important;
    227     width: 80px !important;
     203    height: 9px !important;
     204    width: 64px !important;
    228205    padding: 0 !important;
    229     margin-right: 6px !important;
    230 
    231     border-radius: 5px !important;
     206    margin-right: 10px !important;
     207
    232208    background-color: transparent !important;
    233209    background-image: -webkit-linear-gradient(
    … …  
    280256    width: 16px;
    281257    height: 16px;
    282     margin: 0 7px;
     258    margin-right: 16px;
    283259    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 102 105"><linearGradient id="gradient" x2="0" y2="100%" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="rgb(216, 216, 216)"/><stop offset="0.46875" stop-color="rgb(216, 216, 216)"/><stop offset="0.46875" stop-color="rgb(208, 208, 208)"/><stop offset="0.53125" stop-color="rgb(208, 208, 208)"/><stop offset="0.53125" stop-color="rgb(200, 200, 200)"/><stop offset="1" stop-color="rgb(208, 208, 208)"/></linearGradient><path d="M98.766,43.224c0-23.163-21.775-41.94-48.637-41.94c-26.859,0-48.635,18.777-48.635,41.94c0,18.266,13.546,33.796,32.444,39.549c1.131,8.356,26.037,24.255,22.864,19.921c-4.462-6.096-5.159-13.183-5.07-17.566C77.85,84.397,98.766,65.923,98.766,43.224z" fill="url(#gradient)"/></svg>');
    284260    outline: 0;
    … …  
    384360audio::-webkit-media-controls-fullscreen-button {
    385361    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 15" transform="rotate(90,0,0)"><linearGradient id="gradient" x2="0" y2="100%" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="rgb(216, 216, 216)"/><stop offset="0.4375" stop-color="rgb(216, 216, 216)"/><stop offset="0.4375" stop-color="rgb(208, 208, 208)"/><stop offset="0.5" stop-color="rgb(208, 208, 208)"/><stop offset="0.5" stop-color="rgb(200, 200, 200)"/><stop offset="1" stop-color="rgb(208, 208, 208)"/></linearGradient><path d="M 14,1 m 0,6 -2,-2 -2,2 c 0,0 -1,1 -2,0 -1,-1 0,-2 0,-2 l 2,-2 -2,-2 6,0 z" style="fill:url(#gradient) "/><path d="M 1,14 m 0,-6 2,2 2,-2 c 0,0 1,-1 2,0 1,1 0,2 0,2 l -2,2 2,2 -6,0 z" style="fill:url(#gradient) "/></svg>');
    386     margin: 0 7px;
     362    margin-right: 8px;
    387363}
    388364video::-webkit-media-controls-fullscreen-button.exit,
    … …  
    487463}
    488464
    489 video::-webkit-media-controls-timeline-container .hour-long-time,
    490 audio::-webkit-media-controls-timeline-container .hour-long-time {
    491     min-width: 67px;
     465video::-webkit-media-controls-current-time-display,
     466audio::-webkit-media-controls-current-time-display {
     467    margin-left: 16px;
     468    margin-right: 8px;
     469}
     470
     471video::-webkit-media-controls-time-remaining-display,
     472audio::-webkit-media-controls-time-remaining-display {
     473    margin-left: 8px;
     474    margin-right: 16px;
    492475}
    493476
    … …  
    654637    position: absolute;
    655638
    656 
    657639    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 15"><linearGradient id="gradient" x2="0" y2="100%" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="rgb(216, 216, 216)"/><stop offset="0.4375" stop-color="rgb(216, 216, 216)"/><stop offset="0.4375" stop-color="rgb(208, 208, 208)"/><stop offset="0.5" stop-color="rgb(208, 208, 208)"/><stop offset="0.5" stop-color="rgb(200, 200, 200)"/><stop offset="1" stop-color="rgb(208, 208, 208)"/></linearGradient><path d="M 22,0 11,7 22,15 z" fill="url(#gradient)"/><path d="M 11,0 0,7 11,15 z" fill="url(#gradient)"/></svg>');
    658640
Note: See TracChangeset for help on using the changeset viewer.