[Modern Media Controls] Improve media documents across macOS, iPhone and iPad
authorcommit-queue@webkit.org <commit-queue@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Sat, 4 Mar 2017 01:12:40 +0000 (01:12 +0000)
committercommit-queue@webkit.org <commit-queue@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Sat, 4 Mar 2017 01:12:40 +0000 (01:12 +0000)
commit280d436caf9ce416d49bf8cdb393cbb803a09f46
tree3e14c16191df5d8c6bce81412dec030bdac8fc07
parentc3d9e3c6bc0e14a2a60cc206058c51997d93a5e3
[Modern Media Controls] Improve media documents across macOS, iPhone and iPad
https://bugs.webkit.org/show_bug.cgi?id=169145
<rdar://problem/17048858>

Patch by Antoine Quint <graouts@apple.com> on 2017-03-03
Reviewed by Dean Jackson.

Source/WebCore:

There were a variety of issues with media documents, some longstanding, and some specifically
about modern media controls.

One issue was that fullscreen and picture-in-picture buttons would show for audio media documents,
due to using a <video> element to load the audio file. We now have additional logic in MediaController
to identify if the loaded media is really an audio file, and using this information to hide the
fullscreen and picture-in-picture buttons.

Another issue was that we would inject style in MediaDocument.cpp that was specific to modern media
controls when we could have the modern-media-controls module injected CSS handle this styling. We now
use the injected style in the shadow root to size media documents based on the device characteristics
and ensuring that page styles are overridden.

We also simplify how MediaDocument.cpp sets the source of the media element to simply use the "src"
attribute and not a <source> element.

Finally, we introduce a MediaDocumentController class that is instantiated when we're dealing with
a media document to hide the controls while we determine the type of media we're loading (audio vs.
video) in order to apply the appropriate styling without flashes.

As a result of the new styles applied by the modern-media-controls module, media documents have a
similar behavior on macOS and iPad, where we only enforce a min-width for video allowing them
to play at their natural size otherwise, and enforcing a fixed width for audio. On iPhone however,
we want to always play the media at full width, with some padding in the case of audio.

Tests: media/modern-media-controls/fullscreen-support/fullscreen-support-disabled-video-with-audio-tracks-only.html
       media/modern-media-controls/media-documents/ipad/media-document-audio-ios-sizing.html
       media/modern-media-controls/media-documents/ipad/media-document-video-ios-sizing.html
       media/modern-media-controls/media-documents/media-document-audio-ios-sizing.html
       media/modern-media-controls/media-documents/media-document-audio-mac-sizing.html
       media/modern-media-controls/media-documents/media-document-video-ios-sizing.html
       media/modern-media-controls/media-documents/media-document-video-mac-sizing.html
       media/modern-media-controls/pip-support/pip-support-disabled-video-with-audio-tracks-only.html

* Modules/modern-media-controls/controls/ios-inline-media-controls.css:
(:host(audio) .media-controls.ios.inline > .controls-bar:before,):
(:host(audio) .media-controls.ios.inline > .controls-bar:before): Deleted.
* Modules/modern-media-controls/controls/macos-media-controls.css:
(:host(audio) .media-controls.mac.inline > .controls-bar,):
(:host(audio) .media-controls.mac.inline > .controls-bar > .background-tint,):
(:host(audio) .media-controls.mac.inline > .controls-bar): Deleted.
(:host(audio) .media-controls.mac.inline > .controls-bar > .background-tint): Deleted.
* Modules/modern-media-controls/controls/media-document.css: Added.
(:host(.media-document)):
(:host(.media-document.ready)):
(:host(.media-document.audio.mac)):
(:host(.media-document.audio.ipad)):
(:host(.media-document.audio.iphone)):
(:host(.media-document.video.mac)):
(:host(.media-document.video.ipad)):
(:host(.media-document.video.iphone)):
* Modules/modern-media-controls/js-files:
* Modules/modern-media-controls/media/fullscreen-support.js:
(FullscreenSupport.prototype.syncControl):
(FullscreenSupport):
* Modules/modern-media-controls/media/media-controller.js:
(MediaController):
(MediaController.prototype.get isAudio):
* Modules/modern-media-controls/media/media-document-controller.js: Added.
(MediaDocumentController):
(MediaDocumentController.prototype.handleEvent):
(MediaDocumentController.prototype._mediaDocumentHasMetadata):
(MediaDocumentController.prototype._mediaDocumentHasSize):
* Modules/modern-media-controls/media/pip-support.js:
(PiPSupport.prototype.syncControl):
(PiPSupport):
* html/MediaDocument.cpp:
(WebCore::MediaDocumentParser::createDocumentStructure):

LayoutTests:

We add new tests for media documents and related features that cover the following cases:

    - checking <video> with only audio tracks does not show the fullscreen button
    - checking <video> with only audio tracks does not show the picture-in-picture button
    - checking the size used in media documents for audio and video across macOS, iPhone and iPad

* media/modern-media-controls/fullscreen-support/fullscreen-support-disabled-video-with-audio-tracks-only-expected.txt: Added.
* media/modern-media-controls/fullscreen-support/fullscreen-support-disabled-video-with-audio-tracks-only.html: Added.
* media/modern-media-controls/media-documents/ipad/media-document-audio-ios-sizing-expected.txt: Added.
* media/modern-media-controls/media-documents/ipad/media-document-audio-ios-sizing.html: Added.
* media/modern-media-controls/media-documents/ipad/media-document-video-ios-sizing-expected.txt: Added.
* media/modern-media-controls/media-documents/ipad/media-document-video-ios-sizing.html: Added.
* media/modern-media-controls/media-documents/media-document-audio-ios-sizing-expected.txt: Added.
* media/modern-media-controls/media-documents/media-document-audio-ios-sizing.html: Added.
* media/modern-media-controls/media-documents/media-document-audio-mac-sizing-expected.txt: Added.
* media/modern-media-controls/media-documents/media-document-audio-mac-sizing.html: Added.
* media/modern-media-controls/media-documents/media-document-video-ios-sizing-expected.txt: Added.
* media/modern-media-controls/media-documents/media-document-video-ios-sizing.html: Added.
* media/modern-media-controls/media-documents/media-document-video-mac-sizing-expected.txt: Added.
* media/modern-media-controls/media-documents/media-document-video-mac-sizing.html: Added.
* media/modern-media-controls/pip-support/pip-support-disabled-video-with-audio-tracks-only-expected.txt: Added.
* media/modern-media-controls/pip-support/pip-support-disabled-video-with-audio-tracks-only.html: Added.
* platform/ios-simulator/TestExpectations:
* platform/mac/TestExpectations:

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@213400 268f45cc-cd09-0410-ab3c-d52691b4dbfc
29 files changed:
LayoutTests/ChangeLog
LayoutTests/media/modern-media-controls/fullscreen-support/fullscreen-support-disabled-video-with-audio-tracks-only-expected.txt [new file with mode: 0644]
LayoutTests/media/modern-media-controls/fullscreen-support/fullscreen-support-disabled-video-with-audio-tracks-only.html [new file with mode: 0644]
LayoutTests/media/modern-media-controls/media-documents/ipad/media-document-audio-ios-sizing-expected.txt [new file with mode: 0644]
LayoutTests/media/modern-media-controls/media-documents/ipad/media-document-audio-ios-sizing.html [new file with mode: 0644]
LayoutTests/media/modern-media-controls/media-documents/ipad/media-document-video-ios-sizing-expected.txt [new file with mode: 0644]
LayoutTests/media/modern-media-controls/media-documents/ipad/media-document-video-ios-sizing.html [new file with mode: 0644]
LayoutTests/media/modern-media-controls/media-documents/media-document-audio-ios-sizing-expected.txt [new file with mode: 0644]
LayoutTests/media/modern-media-controls/media-documents/media-document-audio-ios-sizing.html [new file with mode: 0644]
LayoutTests/media/modern-media-controls/media-documents/media-document-audio-mac-sizing-expected.txt [new file with mode: 0644]
LayoutTests/media/modern-media-controls/media-documents/media-document-audio-mac-sizing.html [new file with mode: 0644]
LayoutTests/media/modern-media-controls/media-documents/media-document-video-ios-sizing-expected.txt [new file with mode: 0644]
LayoutTests/media/modern-media-controls/media-documents/media-document-video-ios-sizing.html [new file with mode: 0644]
LayoutTests/media/modern-media-controls/media-documents/media-document-video-mac-sizing-expected.txt [new file with mode: 0644]
LayoutTests/media/modern-media-controls/media-documents/media-document-video-mac-sizing.html [new file with mode: 0644]
LayoutTests/media/modern-media-controls/pip-support/pip-support-disabled-video-with-audio-tracks-only-expected.txt [new file with mode: 0644]
LayoutTests/media/modern-media-controls/pip-support/pip-support-disabled-video-with-audio-tracks-only.html [new file with mode: 0644]
LayoutTests/platform/ios-simulator/TestExpectations
LayoutTests/platform/mac/TestExpectations
Source/WebCore/ChangeLog
Source/WebCore/Modules/modern-media-controls/controls/ios-inline-media-controls.css
Source/WebCore/Modules/modern-media-controls/controls/macos-media-controls.css
Source/WebCore/Modules/modern-media-controls/controls/media-document.css [new file with mode: 0644]
Source/WebCore/Modules/modern-media-controls/js-files
Source/WebCore/Modules/modern-media-controls/media/fullscreen-support.js
Source/WebCore/Modules/modern-media-controls/media/media-controller.js
Source/WebCore/Modules/modern-media-controls/media/media-document-controller.js [new file with mode: 0644]
Source/WebCore/Modules/modern-media-controls/media/pip-support.js
Source/WebCore/html/MediaDocument.cpp