[iOS] Media controls are too cramped with small video
authorcommit-queue@webkit.org <commit-queue@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 30 Jun 2016 19:10:36 +0000 (19:10 +0000)
committercommit-queue@webkit.org <commit-queue@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 30 Jun 2016 19:10:36 +0000 (19:10 +0000)
commita1ba0f37cb2bfa3c767839e9cd0bdcaf9544352c
treeadcc3f69b36e6360a67c42f8e8f66b11d4e78e3d
parentd5003350bd6499e98f4fd3029de8040067cd1c66
[iOS] Media controls are too cramped with small video
https://bugs.webkit.org/show_bug.cgi?id=158815
<rdar://problem/26824238>

Patch by Antoine Quint <graouts@apple.com> on 2016-06-30
Reviewed by Eric Carlson.

Source/WebCore:

In updateLayoutForDisplayedWidth(), we try to ensure a minimum width is guaranteed
for the progress indicator. However, we were not accounting for the width used by
the current and remaining time labels on either side of it, so we would incorrectly
conclude that we were guaranteeing the minimum time and yield incorrect layouts since
we were trying to fit more buttons than we had room for.

In order to correctly compute the available width for the progress indicator, we now
have clones of the current and remaining time labels, hidden from video and VoiceOver,
that we update along with the originals. The same styles apply to both clones and
originals, so we may measure the clones to determine the space used by the time labels.
The reason we need to use clones is that if the time labels had previously been hidden
from view, precisely because there was not enough space to display them along with the
progress indicator, then trying to obtain metrics from them would yield 0 since they had
"display: none" styles applied. In order to avoid extra layouts and possible flashing, we
use the clones so that we never have to toggle the "display" property of the originals
just to obtain their measurements.

As a result of this change, we adjust the constant used to set the minimum required
width available to display the progress indicator after all other essential controls
and labels have been measured. That constant used to account for the width of the
time labels, and this is no longer correct.

Test: media/video-controls-drop-and-restore-timeline.html

* Modules/mediacontrols/mediaControlsApple.css:
(::-webkit-media-controls-time-remaining-display.clone):
* Modules/mediacontrols/mediaControlsApple.js:
(Controller):
(Controller.prototype.createTimeClones):
(Controller.prototype.removeTimeClass):
(Controller.prototype.addTimeClass):
(Controller.prototype.updateDuration):
(Controller.prototype.updateLayoutForDisplayedWidth):
(Controller.prototype.updateTime):
(Controller.prototype.updateControlsWhileScrubbing):
* Modules/mediacontrols/mediaControlsiOS.css:
(::-webkit-media-controls-time-remaining-display.clone):
* Modules/mediacontrols/mediaControlsiOS.js:

LayoutTests:

Adjust the output of a couple of tests to account for the time label clones, ensure the video
is wide enough to always have its timeline visible for tests that rely on the timeline being
visible to drag and seek, and finally add a new test.

* media/controls-drag-timebar.html:
* media/media-controls-drag-timeline-set-controls-property.html:
* media/video-controls-drop-and-restore-timeline-expected.txt: Added.
* media/video-controls-drop-and-restore-timeline.html: Added.
* platform/mac-yosemite/http/tests/media/hls/video-controls-live-stream-expected.txt:
* platform/mac/http/tests/media/hls/video-controls-live-stream-expected.txt:

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@202694 268f45cc-cd09-0410-ab3c-d52691b4dbfc
12 files changed:
LayoutTests/ChangeLog
LayoutTests/media/controls-drag-timebar.html
LayoutTests/media/media-controls-drag-timeline-set-controls-property.html
LayoutTests/media/video-controls-drop-and-restore-timeline-expected.txt [new file with mode: 0644]
LayoutTests/media/video-controls-drop-and-restore-timeline.html [new file with mode: 0644]
LayoutTests/platform/mac-yosemite/http/tests/media/hls/video-controls-live-stream-expected.txt
LayoutTests/platform/mac/http/tests/media/hls/video-controls-live-stream-expected.txt
Source/WebCore/ChangeLog
Source/WebCore/Modules/mediacontrols/mediaControlsApple.css
Source/WebCore/Modules/mediacontrols/mediaControlsApple.js
Source/WebCore/Modules/mediacontrols/mediaControlsiOS.css
Source/WebCore/Modules/mediacontrols/mediaControlsiOS.js