[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.

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@181085 268f45cc-cd09-0410-ab3c-d52691b4dbfc

diff --git a/Source/WebCore/ChangeLog b/Source/WebCore/ChangeLog
index bc5fddf..289ed9d 100644 (file)
--- a/Source/WebCore/ChangeLog
+++ b/Source/WebCore/ChangeLog
@@ -1,3 +1,44 @@
+2015-03-04  Dean Jackson  <dino@apple.com>
+
+        [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.
+
 2015-03-05  Csaba Osztrogonác  <ossy@webkit.org>
 
         [cmake] Fix the web replay build

diff --git a/Source/WebCore/Modules/mediacontrols/mediaControlsApple.css b/Source/WebCore/Modules/mediacontrols/mediaControlsApple.css
index 9084f7a..f25d98f 100644 (file)
--- a/Source/WebCore/Modules/mediacontrols/mediaControlsApple.css
+++ b/Source/WebCore/Modules/mediacontrols/mediaControlsApple.css
@@ -424,23 +424,23 @@ audio::-webkit-media-controls-time-remaining-display {
     -webkit-justify-content: flex-start;
 }
 
-video::-webkit-media-controls-time-remaining-display.hour-long-time,
-audio::-webkit-media-controls-time-remaining-display.hour-long-time {
+video::-webkit-media-controls-time-remaining-display.five-digit-time,
+audio::-webkit-media-controls-time-remaining-display.five-digit-time {
     min-width: 41px;
 }
 
-video::-webkit-media-controls-current-time-display.hour-long-time,
-audio::-webkit-media-controls-current-time-display.hour-long-time {
+video::-webkit-media-controls-current-time-display.five-digit-time,
+audio::-webkit-media-controls-current-time-display.five-digit-time {
     min-width: 37px;
 }
 
-video::-webkit-media-controls-time-remaining-display.ten-hour-long-time,
-audio::-webkit-media-controls-time-remaining-display.ten-hour-long-time {
+video::-webkit-media-controls-time-remaining-display.six-digit-time,
+audio::-webkit-media-controls-time-remaining-display.six-digit-time {
     min-width: 48px;
 }
 
-video::-webkit-media-controls-current-time-display.ten-hour-long-time,
-audio::-webkit-media-controls-current-time-display.ten-hour-long-time {
+video::-webkit-media-controls-current-time-display.six-digit-time,
+audio::-webkit-media-controls-current-time-display.six-digit-time {
     min-width: 44px;
 }
 

diff --git a/Source/WebCore/Modules/mediacontrols/mediaControlsApple.js b/Source/WebCore/Modules/mediacontrols/mediaControlsApple.js
index 24bf739..f273e96 100644 (file)
--- a/Source/WebCore/Modules/mediacontrols/mediaControlsApple.js
+++ b/Source/WebCore/Modules/mediacontrols/mediaControlsApple.js
@@ -76,8 +76,10 @@ Controller.prototype = {
         failed: 'failed',
         hidden: 'hidden',
         hiding: 'hiding',
-        hourLongTime: 'hour-long-time',
-        tenHourLongTime: 'ten-hour-long-time',
+        threeDigitTime: 'three-digit-time',
+        fourDigitTime: 'four-digit-time',
+        fiveDigitTime: 'five-digit-time',
+        sixDigitTime: 'six-digit-time',
         list: 'list',
         muteBox: 'mute-box',
         muted: 'muted',
@@ -966,10 +968,29 @@ Controller.prototype = {
 
         this.setIsLive(duration === Number.POSITIVE_INFINITY);
 
-        this.controls.currentTime.classList.toggle(this.ClassNames.hourLongTime, duration >= 60*60);
-        this.controls.remainingTime.classList.toggle(this.ClassNames.hourLongTime, duration >= 60*60);
-        this.controls.currentTime.classList.toggle(this.ClassNames.tenHourLongTime, duration >= 60*60*10);
-        this.controls.remainingTime.classList.toggle(this.ClassNames.tenHourLongTime, duration >= 60*60*10);
+        // Reset existing style.
+        this.controls.currentTime.classList.remove(this.ClassNames.threeDigitTime);
+        this.controls.currentTime.classList.remove(this.ClassNames.fourDigitTime);
+        this.controls.currentTime.classList.remove(this.ClassNames.fiveDigitTime);
+        this.controls.currentTime.classList.remove(this.ClassNames.sixDigitTime);
+        this.controls.remainingTime.classList.remove(this.ClassNames.threeDigitTime);
+        this.controls.remainingTime.classList.remove(this.ClassNames.fourDigitTime);
+        this.controls.remainingTime.classList.remove(this.ClassNames.fiveDigitTime);
+        this.controls.remainingTime.classList.remove(this.ClassNames.sixDigitTime);
+
+        if (duration >= 60*60*10) {
+            this.controls.currentTime.classList.add(this.ClassNames.sixDigitTime);
+            this.controls.remainingTime.classList.add(this.ClassNames.sixDigitTime);
+        } else if (duration >= 60*60) {
+            this.controls.currentTime.classList.add(this.ClassNames.fiveDigitTime);
+            this.controls.remainingTime.classList.add(this.ClassNames.fiveDigitTime);
+        } else if (duration >= 60*10) {
+            this.controls.currentTime.classList.add(this.ClassNames.fourDigitTime);
+            this.controls.remainingTime.classList.add(this.ClassNames.fourDigitTime);
+        } else {
+            this.controls.currentTime.classList.add(this.ClassNames.threeDigitTime);
+            this.controls.remainingTime.classList.add(this.ClassNames.threeDigitTime);
+        }
     },
 
     progressFillStyle: function(context)

diff --git a/Source/WebCore/Modules/mediacontrols/mediaControlsiOS.css b/Source/WebCore/Modules/mediacontrols/mediaControlsiOS.css
index b3b110c..ed8cb79 100644 (file)
--- a/Source/WebCore/Modules/mediacontrols/mediaControlsiOS.css
+++ b/Source/WebCore/Modules/mediacontrols/mediaControlsiOS.css
@@ -395,14 +395,14 @@ audio::-webkit-media-controls-time-remaining-display {
 audio::-webkit-media-controls-current-time-display,
 video::-webkit-media-controls-current-time-display {
     min-width: 32px;
-    -webkit-justify-content: left;
+    -webkit-justify-content: right;
     padding-right: 6px;
 }
 
 audio::-webkit-media-controls-time-remaining-display,
 video::-webkit-media-controls-time-remaining-display {
     min-width: 38px;
-    -webkit-justify-content: right;
+    -webkit-justify-content: left;
     padding-left: 6px;
     margin-right: 6px;
 }
@@ -423,9 +423,44 @@ audio::-webkit-media-controls-timeline-container {
     padding-right: 10px;
 }
 
-video::-webkit-media-controls-timeline-container .hour-long-time,
-audio::-webkit-media-controls-timeline-container .hour-long-time {
-    min-width: 67px;
+audio::-webkit-media-controls-current-time-display.three-digit-time,
+video::-webkit-media-controls-current-time-display.three-digit-time {
+    min-width: 31px;
+}
+
+audio::-webkit-media-controls-time-remaining-display.three-digit-time,
+video::-webkit-media-controls-time-remaining-display.three-digit-time {
+    min-width: 40px;
+}
+
+audio::-webkit-media-controls-current-time-display.four-digit-time,
+video::-webkit-media-controls-current-time-display.four-digit-time {
+    min-width: 40px;
+}
+
+audio::-webkit-media-controls-time-remaining-display.four-digit-time,
+video::-webkit-media-controls-time-remaining-display.four-digit-time {
+    min-width: 49px;
+}
+
+audio::-webkit-media-controls-current-time-display.five-digit-time,
+video::-webkit-media-controls-current-time-display.five-digit-time {
+    min-width: 51px;
+}
+
+audio::-webkit-media-controls-time-remaining-display.five-digit-time,
+video::-webkit-media-controls-time-remaining-display.five-digit-time {
+    min-width: 60px;
+}
+
+audio::-webkit-media-controls-current-time-display.six-digit-time,
+video::-webkit-media-controls-current-time-display.six-digit-time {
+    min-width: 60px;
+}
+
+audio::-webkit-media-controls-time-remaining-display.six-digit-time,
+video::-webkit-media-controls-time-remaining-display.six-digit-time {
+    min-width: 69px;
 }
 
 /* ================== STATUS DISPLAY ====================== */