Changeset 202682 in webkit

Timestamp:

Jun 30, 2016 9:19:32 AM (8 years ago)

Author:

commit-queue@webkit.org

Message:

Unreviewed, rolling out r202679.
​https://bugs.webkit.org/show_bug.cgi?id=159302

Still causing timeouts on media/controls-drag-timebar.html
(Requested by ap on #webkit).

Reverted changeset:

"[iOS] Media controls are too cramped with small video"
​https://bugs.webkit.org/show_bug.cgi?id=158815
​http://trac.webkit.org/changeset/202679

Location:

trunk

Files:

• LayoutTests/ChangeLog (modified) (1 diff)
• LayoutTests/media/video-controls-drop-and-restore-timeline-expected.txt (deleted)
• LayoutTests/media/video-controls-drop-and-restore-timeline.html (deleted)
• LayoutTests/platform/mac-yosemite/http/tests/media/hls/video-controls-live-stream-expected.txt (modified) (1 diff)
• LayoutTests/platform/mac/http/tests/media/hls/video-controls-live-stream-expected.txt (modified) (1 diff)
• Source/WebCore/ChangeLog (modified) (1 diff)
• Source/WebCore/Modules/mediacontrols/mediaControlsApple.css (modified) (1 diff)
• Source/WebCore/Modules/mediacontrols/mediaControlsApple.js (modified) (7 diffs)
• Source/WebCore/Modules/mediacontrols/mediaControlsiOS.css (modified) (1 diff)
• Source/WebCore/Modules/mediacontrols/mediaControlsiOS.js (modified) (1 diff)

trunk/LayoutTests/ChangeLog

@@ +1 @@
+2016-06-30  Commit Queue  <commit-queue@webkit.org>
+
+        Unreviewed, rolling out r202679.
+        https://bugs.webkit.org/show_bug.cgi?id=159302
+
+        Still causing timeouts on media/controls-drag-timebar.html
+        (Requested by ap on #webkit).
+
+        Reverted changeset:
+
+        "[iOS] Media controls are too cramped with small video"
+        https://bugs.webkit.org/show_bug.cgi?id=158815
+        http://trac.webkit.org/changeset/202679
+
 2016-06-30  Joseph Pecoraro  <pecoraro@apple.com> and Yusuke Suzuki  <utatane.tea@gmail.com>
 

trunk/LayoutTests/platform/mac-yosemite/http/tests/media/hls/video-controls-live-stream-expected.txt

@@ -5 +5 @@
 -webkit-media-text-track-container: classes: [hidden]
 -webkit-media-show-controls: classes: []
--webkit-media-controls-current-time-display: classes: [clone six-digit-time]
--webkit-media-controls-time-remaining-display: classes: [clone six-digit-time]
 -webkit-media-controls-wireless-playback-status: classes: [hidden]
 -webkit-media-controls-wireless-playback-text: classes: []

trunk/LayoutTests/platform/mac/http/tests/media/hls/video-controls-live-stream-expected.txt

@@ -5 +5 @@
 -webkit-media-text-track-container: classes: [hidden]
 -webkit-media-show-controls: classes: []
--webkit-media-controls-current-time-display: classes: [clone six-digit-time]
--webkit-media-controls-time-remaining-display: classes: [clone six-digit-time]
 -webkit-media-controls-wireless-playback-status: classes: [hidden]
 -webkit-media-controls-wireless-playback-text: classes: []

trunk/Source/WebCore/ChangeLog

@@ +1 @@
+2016-06-30  Commit Queue  <commit-queue@webkit.org>
+
+        Unreviewed, rolling out r202679.
+        https://bugs.webkit.org/show_bug.cgi?id=159302
+
+        Still causing timeouts on media/controls-drag-timebar.html
+        (Requested by ap on #webkit).
+
+        Reverted changeset:
+
+        "[iOS] Media controls are too cramped with small video"
+        https://bugs.webkit.org/show_bug.cgi?id=158815
+        http://trac.webkit.org/changeset/202679
+
 2016-06-30  Antoine Quint  <graouts@apple.com>
 

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

@@ -1143 +1143 @@
     margin-left: 0px;
 }
-
-/* Time display clones that we use in updateLayoutForDisplayedWidth(). */
-::-webkit-media-controls-current-time-display.clone,
-::-webkit-media-controls-time-remaining-display.clone {
-    position: absolute;
-    display: inline;
-    top: 100%;
-    mix-blend-mode: normal;
-}

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

@@ -26 +26 @@
     this.createBase();
     this.createControls();
-    this.createTimeClones();
     this.updateBase();
     this.updateControls();
@@ -134 +133 @@
         down: 40
     },
-    MinimumTimelineWidth: 100,
+    MinimumTimelineWidth: 150,
     ButtonWidth: 32,
 
@@ -530 +529 @@
         if (!Controller.gSimulateWirelessPlaybackTarget)
             wirelessTargetPicker.classList.add(this.ClassNames.hidden);
-    },
-
-    createTimeClones: function()
-    {
-        var currentTimeClone = this.currentTimeClone = document.createElement('div');
-        currentTimeClone.setAttribute('pseudo', '-webkit-media-controls-current-time-display');
-        currentTimeClone.setAttribute('aria-hidden', 'true');
-        currentTimeClone.classList.add('clone');
-        this.base.appendChild(currentTimeClone);
-
-        var remainingTimeClone = this.remainingTimeClone = document.createElement('div');
-        remainingTimeClone.setAttribute('pseudo', '-webkit-media-controls-time-remaining-display');
-        remainingTimeClone.setAttribute('aria-hidden', 'true');
-        remainingTimeClone.classList.add('clone');
-        this.base.appendChild(remainingTimeClone);
     },
 
@@ -1295 +1279 @@
         this.setIsLive(duration === Number.POSITIVE_INFINITY);
 
-        var timeControls = [this.controls.currentTime, this.controls.remainingTime, this.currentTimeClone, this.remainingTimeClone];
-
-        function removeTimeClass(className) {
-            for (let element of timeControls)
-                element.classList.remove(className);
-        }
-
-        function addTimeClass(className) {
-            for (let element of timeControls)
-                element.classList.add(className);
-        }
-
         // Reset existing style.
-        removeTimeClass(this.ClassNames.threeDigitTime);
-        removeTimeClass(this.ClassNames.fourDigitTime);
-        removeTimeClass(this.ClassNames.fiveDigitTime);
-        removeTimeClass(this.ClassNames.sixDigitTime);
-
-        if (duration >= 60*60*10)
-            addTimeClass(this.ClassNames.sixDigitTime);
-        else if (duration >= 60*60)
-            addTimeClass(this.ClassNames.fiveDigitTime);
-        else if (duration >= 60*10)
-            addTimeClass(this.ClassNames.fourDigitTime);
-        else
-            addTimeClass(this.ClassNames.threeDigitTime);
+        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);
+        }
     },
 
@@ -1646 +1627 @@
         var visibleButtonWidth = this.ButtonWidth * visibleButtons.length;
 
-        var currentTimeWidth = this.currentTimeClone.getBoundingClientRect().width;
-        var remainingTimeWidth = this.remainingTimeClone.getBoundingClientRect().width;
-
         // Check if there is enough room for the scrubber.
-        var shouldDropTimeline = (visibleWidth - visibleButtonWidth - currentTimeWidth - remainingTimeWidth) < this.MinimumTimelineWidth;
+        var shouldDropTimeline = (visibleWidth - visibleButtonWidth) < this.MinimumTimelineWidth;
         this.controls.timeline.classList.toggle(this.ClassNames.dropped, shouldDropTimeline);
         this.controls.currentTime.classList.toggle(this.ClassNames.dropped, shouldDropTimeline);
@@ -1704 +1682 @@
         var currentTime = this.video.currentTime;
         var timeRemaining = currentTime - this.video.duration;
-        this.currentTimeClone.innerText = this.controls.currentTime.innerText = this.formatTime(currentTime);
+        this.controls.currentTime.innerText = this.formatTime(currentTime);
         this.controls.timeline.value = this.video.currentTime;
-        this.remainingTimeClone.innerText = this.controls.remainingTime.innerText = this.formatTime(timeRemaining);
+        this.controls.remainingTime.innerText = this.formatTime(timeRemaining);
     },
     
@@ -1716 +1694 @@
         var currentTime = (this.controls.timeline.value / this.controls.timeline.max) * this.video.duration;
         var timeRemaining = currentTime - this.video.duration;
-        this.currentTimeClone.innerText = this.controls.currentTime.innerText = this.formatTime(currentTime);
-        this.remainingTimeClone.innerText = this.controls.remainingTime.innerText = this.formatTime(timeRemaining);
+        this.controls.currentTime.innerText = this.formatTime(currentTime);
+        this.controls.remainingTime.innerText = this.formatTime(timeRemaining);
         this.drawTimelineBackground();
     },

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

@@ -724 +724 @@
 }
 
-/* Time display clones that we use in updateLayoutForDisplayedWidth(). */
-::-webkit-media-controls-current-time-display.clone,
-::-webkit-media-controls-time-remaining-display.clone {
-    position: absolute;
-    display: inline;
-    top: 100%;
-    mix-blend-mode: normal;
-}

trunk/Source/WebCore/Modules/mediacontrols/mediaControlsiOS.js

@@ -28 +28 @@
 ControllerIOS.prototype = {
     /* Constants */
-    MinimumTimelineWidth: 150,
+    MinimumTimelineWidth: 200,
     ButtonWidth: 42,