Changeset 181085 in webkit


Ignore:
Timestamp:
Mar 5, 2015 10:57:46 AM (9 years ago)
Author:
dino@apple.com
Message:

[iOS Media] Small inline controls can clip the time widgets
​https://bugs.webkit.org/show_bug.cgi?id=142319

Reviewed by Eric Carlson.

Start counting the number of digits in a duration so that
we can assign classes to the time widgets that specify
a minimum width.

  • Modules/mediacontrols/mediaControlsApple.css: Replace the hour-long and ten-hour-long

classes with number of digits.
(audio::-webkit-media-controls-time-remaining-display.five-digit-time):
(audio::-webkit-media-controls-current-time-display.five-digit-time):
(audio::-webkit-media-controls-time-remaining-display.six-digit-time):
(audio::-webkit-media-controls-current-time-display.six-digit-time):
(audio::-webkit-media-controls-time-remaining-display.hour-long-time): Deleted.
(audio::-webkit-media-controls-current-time-display.hour-long-time): Deleted.
(audio::-webkit-media-controls-time-remaining-display.ten-hour-long-time): Deleted.
(audio::-webkit-media-controls-current-time-display.ten-hour-long-time): Deleted.

  • Modules/mediacontrols/mediaControlsApple.js: Add some new class names.

(Controller.prototype.updateDuration): Set the class of the time
widgets when we know how long the media runs.

  • Modules/mediacontrols/mediaControlsiOS.css: Values for iOS that

are big enough to avoid clipping.
(video::-webkit-media-controls-current-time-display):
(video::-webkit-media-controls-time-remaining-display):
(video::-webkit-media-controls-current-time-display.three-digit-time):
(video::-webkit-media-controls-time-remaining-display.three-digit-time):
(video::-webkit-media-controls-current-time-display.four-digit-time):
(video::-webkit-media-controls-time-remaining-display.four-digit-time):
(video::-webkit-media-controls-current-time-display.five-digit-time):
(video::-webkit-media-controls-time-remaining-display.five-digit-time):
(video::-webkit-media-controls-current-time-display.six-digit-time):
(video::-webkit-media-controls-time-remaining-display.six-digit-time):
(audio::-webkit-media-controls-timeline-container): Deleted.
(video::-webkit-media-text-track-container): Deleted.

Location:
trunk/Source/WebCore
Files:
4 edited

Legend:

Unmodified
Added
Removed

  • trunk/Source/WebCore/ChangeLog

    r181081 r181085  
     12015-03-04  Dean Jackson  <dino@apple.com>
     2
     3        [iOS Media] Small inline controls can clip the time widgets
     4        https://bugs.webkit.org/show_bug.cgi?id=142319
     5
     6        Reviewed by Eric Carlson.
     7
     8        Start counting the number of digits in a duration so that
     9        we can assign classes to the time widgets that specify
     10        a minimum width.
     11
     12        * Modules/mediacontrols/mediaControlsApple.css: Replace the hour-long and ten-hour-long
     13        classes with number of digits.
     14        (audio::-webkit-media-controls-time-remaining-display.five-digit-time):
     15        (audio::-webkit-media-controls-current-time-display.five-digit-time):
     16        (audio::-webkit-media-controls-time-remaining-display.six-digit-time):
     17        (audio::-webkit-media-controls-current-time-display.six-digit-time):
     18        (audio::-webkit-media-controls-time-remaining-display.hour-long-time): Deleted.
     19        (audio::-webkit-media-controls-current-time-display.hour-long-time): Deleted.
     20        (audio::-webkit-media-controls-time-remaining-display.ten-hour-long-time): Deleted.
     21        (audio::-webkit-media-controls-current-time-display.ten-hour-long-time): Deleted.
     22
     23        * Modules/mediacontrols/mediaControlsApple.js: Add some new class names.
     24        (Controller.prototype.updateDuration): Set the class of the time
     25        widgets when we know how long the media runs.
     26
     27        * Modules/mediacontrols/mediaControlsiOS.css: Values for iOS that
     28        are big enough to avoid clipping.
     29        (video::-webkit-media-controls-current-time-display):
     30        (video::-webkit-media-controls-time-remaining-display):
     31        (video::-webkit-media-controls-current-time-display.three-digit-time):
     32        (video::-webkit-media-controls-time-remaining-display.three-digit-time):
     33        (video::-webkit-media-controls-current-time-display.four-digit-time):
     34        (video::-webkit-media-controls-time-remaining-display.four-digit-time):
     35        (video::-webkit-media-controls-current-time-display.five-digit-time):
     36        (video::-webkit-media-controls-time-remaining-display.five-digit-time):
     37        (video::-webkit-media-controls-current-time-display.six-digit-time):
     38        (video::-webkit-media-controls-time-remaining-display.six-digit-time):
     39        (audio::-webkit-media-controls-timeline-container): Deleted.
     40        (video::-webkit-media-text-track-container): Deleted.
     41
    1422015-03-05  Csaba Osztrogonác  <ossy@webkit.org>
    243

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

    r181062 r181085  
    425425}
    426426
    427 video::-webkit-media-controls-time-remaining-display.hour-long-time,
    428 audio::-webkit-media-controls-time-remaining-display.hour-long-time {
     427video::-webkit-media-controls-time-remaining-display.five-digit-time,
     428audio::-webkit-media-controls-time-remaining-display.five-digit-time {
    429429    min-width: 41px;
    430430}
    431431
    432 video::-webkit-media-controls-current-time-display.hour-long-time,
    433 audio::-webkit-media-controls-current-time-display.hour-long-time {
     432video::-webkit-media-controls-current-time-display.five-digit-time,
     433audio::-webkit-media-controls-current-time-display.five-digit-time {
    434434    min-width: 37px;
    435435}
    436436
    437 video::-webkit-media-controls-time-remaining-display.ten-hour-long-time,
    438 audio::-webkit-media-controls-time-remaining-display.ten-hour-long-time {
     437video::-webkit-media-controls-time-remaining-display.six-digit-time,
     438audio::-webkit-media-controls-time-remaining-display.six-digit-time {
    439439    min-width: 48px;
    440440}
    441441
    442 video::-webkit-media-controls-current-time-display.ten-hour-long-time,
    443 audio::-webkit-media-controls-current-time-display.ten-hour-long-time {
     442video::-webkit-media-controls-current-time-display.six-digit-time,
     443audio::-webkit-media-controls-current-time-display.six-digit-time {
    444444    min-width: 44px;
    445445}

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

    r181062 r181085  
    7777        hidden: 'hidden',
    7878        hiding: 'hiding',
    79         hourLongTime: 'hour-long-time',
    80         tenHourLongTime: 'ten-hour-long-time',
     79        threeDigitTime: 'three-digit-time',
     80        fourDigitTime: 'four-digit-time',
     81        fiveDigitTime: 'five-digit-time',
     82        sixDigitTime: 'six-digit-time',
    8183        list: 'list',
    8284        muteBox: 'mute-box',
    … …  
    967969        this.setIsLive(duration === Number.POSITIVE_INFINITY);
    968970
    969         this.controls.currentTime.classList.toggle(this.ClassNames.hourLongTime, duration >= 60*60);
    970         this.controls.remainingTime.classList.toggle(this.ClassNames.hourLongTime, duration >= 60*60);
    971         this.controls.currentTime.classList.toggle(this.ClassNames.tenHourLongTime, duration >= 60*60*10);
    972         this.controls.remainingTime.classList.toggle(this.ClassNames.tenHourLongTime, duration >= 60*60*10);
     971        // Reset existing style.
     972        this.controls.currentTime.classList.remove(this.ClassNames.threeDigitTime);
     973        this.controls.currentTime.classList.remove(this.ClassNames.fourDigitTime);
     974        this.controls.currentTime.classList.remove(this.ClassNames.fiveDigitTime);
     975        this.controls.currentTime.classList.remove(this.ClassNames.sixDigitTime);
     976        this.controls.remainingTime.classList.remove(this.ClassNames.threeDigitTime);
     977        this.controls.remainingTime.classList.remove(this.ClassNames.fourDigitTime);
     978        this.controls.remainingTime.classList.remove(this.ClassNames.fiveDigitTime);
     979        this.controls.remainingTime.classList.remove(this.ClassNames.sixDigitTime);
     980
     981        if (duration >= 60*60*10) {
     982            this.controls.currentTime.classList.add(this.ClassNames.sixDigitTime);
     983            this.controls.remainingTime.classList.add(this.ClassNames.sixDigitTime);
     984        } else if (duration >= 60*60) {
     985            this.controls.currentTime.classList.add(this.ClassNames.fiveDigitTime);
     986            this.controls.remainingTime.classList.add(this.ClassNames.fiveDigitTime);
     987        } else if (duration >= 60*10) {
     988            this.controls.currentTime.classList.add(this.ClassNames.fourDigitTime);
     989            this.controls.remainingTime.classList.add(this.ClassNames.fourDigitTime);
     990        } else {
     991            this.controls.currentTime.classList.add(this.ClassNames.threeDigitTime);
     992            this.controls.remainingTime.classList.add(this.ClassNames.threeDigitTime);
     993        }
    973994    },
    974995

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

    r180906 r181085  
    396396video::-webkit-media-controls-current-time-display {
    397397    min-width: 32px;
    398     -webkit-justify-content: left;
     398    -webkit-justify-content: right;
    399399    padding-right: 6px;
    400400}
    … …  
    403403video::-webkit-media-controls-time-remaining-display {
    404404    min-width: 38px;
    405     -webkit-justify-content: right;
     405    -webkit-justify-content: left;
    406406    padding-left: 6px;
    407407    margin-right: 6px;
    … …  
    424424}
    425425
    426 video::-webkit-media-controls-timeline-container .hour-long-time,
    427 audio::-webkit-media-controls-timeline-container .hour-long-time {
    428     min-width: 67px;
     426audio::-webkit-media-controls-current-time-display.three-digit-time,
     427video::-webkit-media-controls-current-time-display.three-digit-time {
     428    min-width: 31px;
     429}
     430
     431audio::-webkit-media-controls-time-remaining-display.three-digit-time,
     432video::-webkit-media-controls-time-remaining-display.three-digit-time {
     433    min-width: 40px;
     434}
     435
     436audio::-webkit-media-controls-current-time-display.four-digit-time,
     437video::-webkit-media-controls-current-time-display.four-digit-time {
     438    min-width: 40px;
     439}
     440
     441audio::-webkit-media-controls-time-remaining-display.four-digit-time,
     442video::-webkit-media-controls-time-remaining-display.four-digit-time {
     443    min-width: 49px;
     444}
     445
     446audio::-webkit-media-controls-current-time-display.five-digit-time,
     447video::-webkit-media-controls-current-time-display.five-digit-time {
     448    min-width: 51px;
     449}
     450
     451audio::-webkit-media-controls-time-remaining-display.five-digit-time,
     452video::-webkit-media-controls-time-remaining-display.five-digit-time {
     453    min-width: 60px;
     454}
     455
     456audio::-webkit-media-controls-current-time-display.six-digit-time,
     457video::-webkit-media-controls-current-time-display.six-digit-time {
     458    min-width: 60px;
     459}
     460
     461audio::-webkit-media-controls-time-remaining-display.six-digit-time,
     462video::-webkit-media-controls-time-remaining-display.six-digit-time {
     463    min-width: 69px;
    429464}
    430465
Note: See TracChangeset for help on using the changeset viewer.