Changeset 202694 in webkit
- Timestamp:
- Jun 30, 2016 12:10:36 PM (8 years ago)
- Location:
- trunk
- Files:
-
- 2 added
- 10 edited
Legend:
- Unmodified
- Added
- Removed
-
trunk/LayoutTests/ChangeLog
r202692 r202694 1 2016-06-30 Antoine Quint <graouts@apple.com> 2 3 [iOS] Media controls are too cramped with small video 4 https://bugs.webkit.org/show_bug.cgi?id=158815 5 <rdar://problem/26824238> 6 7 Reviewed by Eric Carlson. 8 9 Adjust the output of a couple of tests to account for the time label clones, ensure the video 10 is wide enough to always have its timeline visible for tests that rely on the timeline being 11 visible to drag and seek, and finally add a new test. 12 13 * media/controls-drag-timebar.html: 14 * media/media-controls-drag-timeline-set-controls-property.html: 15 * media/video-controls-drop-and-restore-timeline-expected.txt: Added. 16 * media/video-controls-drop-and-restore-timeline.html: Added. 17 * platform/mac-yosemite/http/tests/media/hls/video-controls-live-stream-expected.txt: 18 * platform/mac/http/tests/media/hls/video-controls-live-stream-expected.txt: 19 1 20 2016-06-30 Ryan Haddad <ryanhaddad@apple.com> 2 21 -
trunk/LayoutTests/media/controls-drag-timebar.html
r120416 r202694 80 80 <body onload="start()"> 81 81 <p>Test that dragging the timebar thumb causes seeks.</p> 82 <video controls ></video>82 <video controls style="width: 500px"></video> 83 83 </body> 84 84 </html> -
trunk/LayoutTests/media/media-controls-drag-timeline-set-controls-property.html
r195671 r202694 75 75 <body onload="runTest()"> 76 76 <p>Test that dragging the timeline slider after setting video.controls=true causes seeks.</p> 77 <video controls ></video>77 <video controls style="width: 500px"></video> 78 78 </body> 79 79 </html> -
trunk/LayoutTests/platform/mac-yosemite/http/tests/media/hls/video-controls-live-stream-expected.txt
r202682 r202694 5 5 -webkit-media-text-track-container: classes: [hidden] 6 6 -webkit-media-show-controls: classes: [] 7 -webkit-media-controls-current-time-display: classes: [clone six-digit-time] 8 -webkit-media-controls-time-remaining-display: classes: [clone six-digit-time] 7 9 -webkit-media-controls-wireless-playback-status: classes: [hidden] 8 10 -webkit-media-controls-wireless-playback-text: classes: [] -
trunk/LayoutTests/platform/mac/http/tests/media/hls/video-controls-live-stream-expected.txt
r202682 r202694 5 5 -webkit-media-text-track-container: classes: [hidden] 6 6 -webkit-media-show-controls: classes: [] 7 -webkit-media-controls-current-time-display: classes: [clone six-digit-time] 8 -webkit-media-controls-time-remaining-display: classes: [clone six-digit-time] 7 9 -webkit-media-controls-wireless-playback-status: classes: [hidden] 8 10 -webkit-media-controls-wireless-playback-text: classes: [] -
trunk/Source/WebCore/ChangeLog
r202688 r202694 1 2016-06-30 Antoine Quint <graouts@apple.com> 2 3 [iOS] Media controls are too cramped with small video 4 https://bugs.webkit.org/show_bug.cgi?id=158815 5 <rdar://problem/26824238> 6 7 Reviewed by Eric Carlson. 8 9 In updateLayoutForDisplayedWidth(), we try to ensure a minimum width is guaranteed 10 for the progress indicator. However, we were not accounting for the width used by 11 the current and remaining time labels on either side of it, so we would incorrectly 12 conclude that we were guaranteeing the minimum time and yield incorrect layouts since 13 we were trying to fit more buttons than we had room for. 14 15 In order to correctly compute the available width for the progress indicator, we now 16 have clones of the current and remaining time labels, hidden from video and VoiceOver, 17 that we update along with the originals. The same styles apply to both clones and 18 originals, so we may measure the clones to determine the space used by the time labels. 19 The reason we need to use clones is that if the time labels had previously been hidden 20 from view, precisely because there was not enough space to display them along with the 21 progress indicator, then trying to obtain metrics from them would yield 0 since they had 22 "display: none" styles applied. In order to avoid extra layouts and possible flashing, we 23 use the clones so that we never have to toggle the "display" property of the originals 24 just to obtain their measurements. 25 26 As a result of this change, we adjust the constant used to set the minimum required 27 width available to display the progress indicator after all other essential controls 28 and labels have been measured. That constant used to account for the width of the 29 time labels, and this is no longer correct. 30 31 Test: media/video-controls-drop-and-restore-timeline.html 32 33 * Modules/mediacontrols/mediaControlsApple.css: 34 (::-webkit-media-controls-time-remaining-display.clone): 35 * Modules/mediacontrols/mediaControlsApple.js: 36 (Controller): 37 (Controller.prototype.createTimeClones): 38 (Controller.prototype.removeTimeClass): 39 (Controller.prototype.addTimeClass): 40 (Controller.prototype.updateDuration): 41 (Controller.prototype.updateLayoutForDisplayedWidth): 42 (Controller.prototype.updateTime): 43 (Controller.prototype.updateControlsWhileScrubbing): 44 * Modules/mediacontrols/mediaControlsiOS.css: 45 (::-webkit-media-controls-time-remaining-display.clone): 46 * Modules/mediacontrols/mediaControlsiOS.js: 47 1 48 2016-06-30 Brian Burg <bburg@apple.com> 2 49 -
trunk/Source/WebCore/Modules/mediacontrols/mediaControlsApple.css
r202682 r202694 1143 1143 margin-left: 0px; 1144 1144 } 1145 1146 /* Time display clones that we use in updateLayoutForDisplayedWidth(). */ 1147 ::-webkit-media-controls-current-time-display.clone, 1148 ::-webkit-media-controls-time-remaining-display.clone { 1149 position: absolute; 1150 display: inline; 1151 top: 100%; 1152 mix-blend-mode: normal; 1153 } -
trunk/Source/WebCore/Modules/mediacontrols/mediaControlsApple.js
r202682 r202694 26 26 this.createBase(); 27 27 this.createControls(); 28 this.createTimeClones(); 28 29 this.updateBase(); 29 30 this.updateControls(); … … 133 134 down: 40 134 135 }, 135 MinimumTimelineWidth: 1 50,136 MinimumTimelineWidth: 100, 136 137 ButtonWidth: 32, 137 138 … … 529 530 if (!Controller.gSimulateWirelessPlaybackTarget) 530 531 wirelessTargetPicker.classList.add(this.ClassNames.hidden); 532 }, 533 534 createTimeClones: function() 535 { 536 var currentTimeClone = this.currentTimeClone = document.createElement('div'); 537 currentTimeClone.setAttribute('pseudo', '-webkit-media-controls-current-time-display'); 538 currentTimeClone.setAttribute('aria-hidden', 'true'); 539 currentTimeClone.classList.add('clone'); 540 this.base.appendChild(currentTimeClone); 541 542 var remainingTimeClone = this.remainingTimeClone = document.createElement('div'); 543 remainingTimeClone.setAttribute('pseudo', '-webkit-media-controls-time-remaining-display'); 544 remainingTimeClone.setAttribute('aria-hidden', 'true'); 545 remainingTimeClone.classList.add('clone'); 546 this.base.appendChild(remainingTimeClone); 531 547 }, 532 548 … … 1279 1295 this.setIsLive(duration === Number.POSITIVE_INFINITY); 1280 1296 1297 var timeControls = [this.controls.currentTime, this.controls.remainingTime, this.currentTimeClone, this.remainingTimeClone]; 1298 1299 function removeTimeClass(className) { 1300 for (let element of timeControls) 1301 element.classList.remove(className); 1302 } 1303 1304 function addTimeClass(className) { 1305 for (let element of timeControls) 1306 element.classList.add(className); 1307 } 1308 1281 1309 // Reset existing style. 1282 this.controls.currentTime.classList.remove(this.ClassNames.threeDigitTime); 1283 this.controls.currentTime.classList.remove(this.ClassNames.fourDigitTime); 1284 this.controls.currentTime.classList.remove(this.ClassNames.fiveDigitTime); 1285 this.controls.currentTime.classList.remove(this.ClassNames.sixDigitTime); 1286 this.controls.remainingTime.classList.remove(this.ClassNames.threeDigitTime); 1287 this.controls.remainingTime.classList.remove(this.ClassNames.fourDigitTime); 1288 this.controls.remainingTime.classList.remove(this.ClassNames.fiveDigitTime); 1289 this.controls.remainingTime.classList.remove(this.ClassNames.sixDigitTime); 1290 1291 if (duration >= 60*60*10) { 1292 this.controls.currentTime.classList.add(this.ClassNames.sixDigitTime); 1293 this.controls.remainingTime.classList.add(this.ClassNames.sixDigitTime); 1294 } else if (duration >= 60*60) { 1295 this.controls.currentTime.classList.add(this.ClassNames.fiveDigitTime); 1296 this.controls.remainingTime.classList.add(this.ClassNames.fiveDigitTime); 1297 } else if (duration >= 60*10) { 1298 this.controls.currentTime.classList.add(this.ClassNames.fourDigitTime); 1299 this.controls.remainingTime.classList.add(this.ClassNames.fourDigitTime); 1300 } else { 1301 this.controls.currentTime.classList.add(this.ClassNames.threeDigitTime); 1302 this.controls.remainingTime.classList.add(this.ClassNames.threeDigitTime); 1303 } 1310 removeTimeClass(this.ClassNames.threeDigitTime); 1311 removeTimeClass(this.ClassNames.fourDigitTime); 1312 removeTimeClass(this.ClassNames.fiveDigitTime); 1313 removeTimeClass(this.ClassNames.sixDigitTime); 1314 1315 if (duration >= 60*60*10) 1316 addTimeClass(this.ClassNames.sixDigitTime); 1317 else if (duration >= 60*60) 1318 addTimeClass(this.ClassNames.fiveDigitTime); 1319 else if (duration >= 60*10) 1320 addTimeClass(this.ClassNames.fourDigitTime); 1321 else 1322 addTimeClass(this.ClassNames.threeDigitTime); 1304 1323 }, 1305 1324 … … 1627 1646 var visibleButtonWidth = this.ButtonWidth * visibleButtons.length; 1628 1647 1648 var currentTimeWidth = this.currentTimeClone.getBoundingClientRect().width; 1649 var remainingTimeWidth = this.remainingTimeClone.getBoundingClientRect().width; 1650 1629 1651 // Check if there is enough room for the scrubber. 1630 var shouldDropTimeline = (visibleWidth - visibleButtonWidth ) < this.MinimumTimelineWidth;1652 var shouldDropTimeline = (visibleWidth - visibleButtonWidth - currentTimeWidth - remainingTimeWidth) < this.MinimumTimelineWidth; 1631 1653 this.controls.timeline.classList.toggle(this.ClassNames.dropped, shouldDropTimeline); 1632 1654 this.controls.currentTime.classList.toggle(this.ClassNames.dropped, shouldDropTimeline); … … 1682 1704 var currentTime = this.video.currentTime; 1683 1705 var timeRemaining = currentTime - this.video.duration; 1684 this.c ontrols.currentTime.innerText = this.formatTime(currentTime);1706 this.currentTimeClone.innerText = this.controls.currentTime.innerText = this.formatTime(currentTime); 1685 1707 this.controls.timeline.value = this.video.currentTime; 1686 this. controls.remainingTime.innerText = this.formatTime(timeRemaining);1708 this.remainingTimeClone.innerText = this.controls.remainingTime.innerText = this.formatTime(timeRemaining); 1687 1709 }, 1688 1710 … … 1694 1716 var currentTime = (this.controls.timeline.value / this.controls.timeline.max) * this.video.duration; 1695 1717 var timeRemaining = currentTime - this.video.duration; 1696 this.c ontrols.currentTime.innerText = this.formatTime(currentTime);1697 this. controls.remainingTime.innerText = this.formatTime(timeRemaining);1718 this.currentTimeClone.innerText = this.controls.currentTime.innerText = this.formatTime(currentTime); 1719 this.remainingTimeClone.innerText = this.controls.remainingTime.innerText = this.formatTime(timeRemaining); 1698 1720 this.drawTimelineBackground(); 1699 1721 }, -
trunk/Source/WebCore/Modules/mediacontrols/mediaControlsiOS.css
r202682 r202694 724 724 } 725 725 726 /* Time display clones that we use in updateLayoutForDisplayedWidth(). */ 727 ::-webkit-media-controls-current-time-display.clone, 728 ::-webkit-media-controls-time-remaining-display.clone { 729 position: absolute; 730 display: inline; 731 top: 100%; 732 mix-blend-mode: normal; 733 } -
trunk/Source/WebCore/Modules/mediacontrols/mediaControlsiOS.js
r202682 r202694 28 28 ControllerIOS.prototype = { 29 29 /* Constants */ 30 MinimumTimelineWidth: 200,30 MinimumTimelineWidth: 150, 31 31 ButtonWidth: 42, 32 32
Note: See TracChangeset
for help on using the changeset viewer.