<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[161280] trunk/Source/WebCore</title>
</head>
<body>
<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; }
#msg dl a { font-weight: bold}
#msg dl a:link { color:#fc3; }
#msg dl a:active { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta">
<dt>Revision</dt> <dd><a href="http://trac.webkit.org/projects/webkit/changeset/161280">161280</a></dd>
<dt>Author</dt> <dd>jer.noble@apple.com</dd>
<dt>Date</dt> <dd>2014-01-03 12:50:49 -0800 (Fri, 03 Jan 2014)</dd>
</dl>
<h3>Log Message</h3>
<pre>[MediaControls][iOS] Enable JavaScript Media Controls on iOS.
https://bugs.webkit.org/show_bug.cgi?id=126440
Reviewed by Eric Carlson.
Drive-by misspelling fix, and add a convenience function to check if the
controls are currently hidden:
* Modules/mediacontrols/mediaControlsApple.js:
(Controller.prototype.handleWrapperMouseMove):
(Controller.prototype.handleWrapperMouseOut):
(Controller.prototype.updatePlaying):
(Controller.prototype.controlsAreHidden): Added.
Add a new subclass of Controller for iOS and a matching CSS:
* Modules/mediacontrols/mediaControlsiOS.css: Added.
* Modules/mediacontrols/mediaControlsiOS.js: Added.
(createControls): Override the createControls() in mediaControlsApple.js.
(ControllerIOS): Define a new class.
(ControllerIOS.prototype.inheritFrom): Convenience method to mixin parent
prototype methods.
(ControllerIOS.prototype.createBase): Override, listen for touches instead of mouse events.
(ControllerIOS.prototype.createControls): Ditto.
(ControllerIOS.prototype.configureInlineControls): Override, only add play, timeline, and full
screen butttons.
(ControllerIOS.prototype.configureFullScreenControls): Override, and add no buttons.
(ControllerIOS.prototype.handlePlayButtonTouchStart): Activate.
(ControllerIOS.prototype.handlePlayButtonTouchEnd): De-activate and do action.
(ControllerIOS.prototype.handlePlayButtonTouchCancel): De-activate and cancel.
(ControllerIOS.prototype.handleWrapperTouchStart): Show controls.
(ControllerIOS.prototype.handlePanelTouchStart): Disable video selection.
(ControllerIOS.prototype.handlePanelTouchEnd): Re-enable video selection.
(ControllerIOS.prototype.handlePanelTouchCancel): Ditto.
Drive-by fix to enable the JavaScript controls when the plugin is disabled:
* html/HTMLMediaElement.cpp:
(WebCore::HTMLMediaElement::parseAttribute):
Add the iOS JavaScript by appending it to the generic (Apple) JavaScript:
* rendering/RenderThemeIOS.mm:
(WebCore::RenderThemeIOS::mediaControlsScript):
Add new files to project:
* DerivedSources.make:
* WebCore.xcodeproj/project.pbxproj:</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkSourceWebCoreChangeLog">trunk/Source/WebCore/ChangeLog</a></li>
<li><a href="#trunkSourceWebCoreDerivedSourcesmake">trunk/Source/WebCore/DerivedSources.make</a></li>
<li><a href="#trunkSourceWebCoreModulesmediacontrolsmediaControlsApplejs">trunk/Source/WebCore/Modules/mediacontrols/mediaControlsApple.js</a></li>
<li><a href="#trunkSourceWebCoreWebCorexcodeprojprojectpbxproj">trunk/Source/WebCore/WebCore.xcodeproj/project.pbxproj</a></li>
<li><a href="#trunkSourceWebCorehtmlHTMLMediaElementcpp">trunk/Source/WebCore/html/HTMLMediaElement.cpp</a></li>
<li><a href="#trunkSourceWebCorerenderingRenderThemeIOSmm">trunk/Source/WebCore/rendering/RenderThemeIOS.mm</a></li>
</ul>
<h3>Added Paths</h3>
<ul>
<li><a href="#trunkSourceWebCoreModulesmediacontrolsmediaControlsiOScss">trunk/Source/WebCore/Modules/mediacontrols/mediaControlsiOS.css</a></li>
<li><a href="#trunkSourceWebCoreModulesmediacontrolsmediaControlsiOSjs">trunk/Source/WebCore/Modules/mediacontrols/mediaControlsiOS.js</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkSourceWebCoreChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/ChangeLog (161279 => 161280)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/ChangeLog 2014-01-03 20:45:24 UTC (rev 161279)
+++ trunk/Source/WebCore/ChangeLog 2014-01-03 20:50:49 UTC (rev 161280)
</span><span class="lines">@@ -1,3 +1,50 @@
</span><ins>+2014-01-03 Jer Noble <jer.noble@apple.com>
+
+ [MediaControls][iOS] Enable JavaScript Media Controls on iOS.
+ https://bugs.webkit.org/show_bug.cgi?id=126440
+
+ Reviewed by Eric Carlson.
+
+ Drive-by misspelling fix, and add a convenience function to check if the
+ controls are currently hidden:
+ * Modules/mediacontrols/mediaControlsApple.js:
+ (Controller.prototype.handleWrapperMouseMove):
+ (Controller.prototype.handleWrapperMouseOut):
+ (Controller.prototype.updatePlaying):
+ (Controller.prototype.controlsAreHidden): Added.
+
+ Add a new subclass of Controller for iOS and a matching CSS:
+ * Modules/mediacontrols/mediaControlsiOS.css: Added.
+ * Modules/mediacontrols/mediaControlsiOS.js: Added.
+ (createControls): Override the createControls() in mediaControlsApple.js.
+ (ControllerIOS): Define a new class.
+ (ControllerIOS.prototype.inheritFrom): Convenience method to mixin parent
+ prototype methods.
+ (ControllerIOS.prototype.createBase): Override, listen for touches instead of mouse events.
+ (ControllerIOS.prototype.createControls): Ditto.
+ (ControllerIOS.prototype.configureInlineControls): Override, only add play, timeline, and full
+ screen butttons.
+ (ControllerIOS.prototype.configureFullScreenControls): Override, and add no buttons.
+ (ControllerIOS.prototype.handlePlayButtonTouchStart): Activate.
+ (ControllerIOS.prototype.handlePlayButtonTouchEnd): De-activate and do action.
+ (ControllerIOS.prototype.handlePlayButtonTouchCancel): De-activate and cancel.
+ (ControllerIOS.prototype.handleWrapperTouchStart): Show controls.
+ (ControllerIOS.prototype.handlePanelTouchStart): Disable video selection.
+ (ControllerIOS.prototype.handlePanelTouchEnd): Re-enable video selection.
+ (ControllerIOS.prototype.handlePanelTouchCancel): Ditto.
+
+ Drive-by fix to enable the JavaScript controls when the plugin is disabled:
+ * html/HTMLMediaElement.cpp:
+ (WebCore::HTMLMediaElement::parseAttribute):
+
+ Add the iOS JavaScript by appending it to the generic (Apple) JavaScript:
+ * rendering/RenderThemeIOS.mm:
+ (WebCore::RenderThemeIOS::mediaControlsScript):
+
+ Add new files to project:
+ * DerivedSources.make:
+ * WebCore.xcodeproj/project.pbxproj:
+
</ins><span class="cx"> 2014-01-03 Simon Fraser <simon.fraser@apple.com>
</span><span class="cx">
</span><span class="cx"> Allow the ChromeClient to provide a custom ScrollingCoordinator
</span></span></pre></div>
<a id="trunkSourceWebCoreDerivedSourcesmake"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/DerivedSources.make (161279 => 161280)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/DerivedSources.make 2014-01-03 20:45:24 UTC (rev 161279)
+++ trunk/Source/WebCore/DerivedSources.make 2014-01-03 20:50:49 UTC (rev 161280)
</span><span class="lines">@@ -848,7 +848,10 @@
</span><span class="cx">
</span><span class="cx"> ifeq ($(findstring ENABLE_MEDIA_CONTROLS_SCRIPT,$(FEATURE_DEFINES)), ENABLE_MEDIA_CONTROLS_SCRIPT)
</span><span class="cx"> USER_AGENT_STYLE_SHEETS := $(USER_AGENT_STYLE_SHEETS) $(WebCore)/Modules/mediacontrols/mediaControlsApple.css
</span><ins>+ifeq ($(WTF_PLATFORM_IOS), 1)
+ USER_AGENT_STYLE_SHEETS := $(USER_AGENT_STYLE_SHEETS) $(WebCore)/Modules/mediacontrols/mediaControlsiOS.css
</ins><span class="cx"> endif
</span><ins>+endif
</ins><span class="cx">
</span><span class="cx"> ifeq ($(OS),MACOS)
</span><span class="cx"> USER_AGENT_STYLE_SHEETS := $(USER_AGENT_STYLE_SHEETS) $(WebCore)/Modules/plugins/QuickTimePluginReplacement.css
</span><span class="lines">@@ -865,7 +868,10 @@
</span><span class="cx">
</span><span class="cx"> ifeq ($(findstring ENABLE_MEDIA_CONTROLS_SCRIPT,$(FEATURE_DEFINES)), ENABLE_MEDIA_CONTROLS_SCRIPT)
</span><span class="cx"> USER_AGENT_SCRIPTS := $(USER_AGENT_SCRIPTS) $(WebCore)/Modules/mediacontrols/mediaControlsApple.js
</span><ins>+ifeq ($(WTF_PLATFORM_IOS), 1)
+ USER_AGENT_SCRIPTS := $(USER_AGENT_SCRIPTS) $(WebCore)/Modules/mediacontrols/mediaControlsiOS.js
</ins><span class="cx"> endif
</span><ins>+endif
</ins><span class="cx">
</span><span class="cx"> ifeq ($(OS),MACOS)
</span><span class="cx"> USER_AGENT_SCRIPTS := $(USER_AGENT_SCRIPTS) $(WebCore)/Modules/plugins/QuickTimePluginReplacement.js
</span></span></pre></div>
<a id="trunkSourceWebCoreModulesmediacontrolsmediaControlsApplejs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/Modules/mediacontrols/mediaControlsApple.js (161279 => 161280)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/Modules/mediacontrols/mediaControlsApple.js 2014-01-03 20:45:24 UTC (rev 161279)
+++ trunk/Source/WebCore/Modules/mediacontrols/mediaControlsApple.js 2014-01-03 20:50:49 UTC (rev 161280)
</span><span class="lines">@@ -57,7 +57,7 @@
</span><span class="cx"> volumechange: 'handleVolumeChange',
</span><span class="cx"> webkitfullscreenchange: 'handleFullscreenChange',
</span><span class="cx"> },
</span><del>- HideContrtolsDelay: 4 * 1000,
</del><ins>+ HideControlsDelay: 4 * 1000,
</ins><span class="cx"> RewindAmount: 30,
</span><span class="cx"> MaximumSeekRate: 8,
</span><span class="cx"> SeekDelay: 1500,
</span><span class="lines">@@ -547,7 +547,7 @@
</span><span class="cx"> this.showControls();
</span><span class="cx"> if (this.hideTimer)
</span><span class="cx"> clearTimeout(this.hideTimer);
</span><del>- this.hideTimer = setTimeout(this.hideControls.bind(this), this.HideContrtolsDelay);
</del><ins>+ this.hideTimer = setTimeout(this.hideControls.bind(this), this.HideControlsDelay);
</ins><span class="cx">
</span><span class="cx"> if (!this.isDragging)
</span><span class="cx"> return;
</span><span class="lines">@@ -559,7 +559,7 @@
</span><span class="cx">
</span><span class="cx"> handleWrapperMouseOut: function(event)
</span><span class="cx"> {
</span><del>- this.controls.panel.classList.remove(this.ClassNames.show);
</del><ins>+ this.hideControls();
</ins><span class="cx"> if (this.hideTimer)
</span><span class="cx"> clearTimeout(this.hideTimer);
</span><span class="cx"> },
</span><span class="lines">@@ -836,10 +836,10 @@
</span><span class="cx"> this.controls.playButton.classList.remove(this.ClassNames.paused);
</span><span class="cx"> this.controls.playButton.setAttribute('aria-label', this.UIString('Pause'));
</span><span class="cx">
</span><del>- this.controls.panel.classList.remove(this.ClassNames.show);
</del><ins>+ this.hideControls();
</ins><span class="cx"> if (this.hideTimer)
</span><span class="cx"> clearTimeout(this.hideTimer);
</span><del>- this.hideTimer = setTimeout(this.hideControls.bind(this), this.HideContrtolsDelay);
</del><ins>+ this.hideTimer = setTimeout(this.hideControls.bind(this), this.HideControlsDelay);
</ins><span class="cx"> }
</span><span class="cx"> },
</span><span class="cx">
</span><span class="lines">@@ -854,6 +854,11 @@
</span><span class="cx"> this.controls.panel.classList.remove(this.ClassNames.show);
</span><span class="cx"> },
</span><span class="cx">
</span><ins>+ controlsAreHidden: function()
+ {
+ return !this.controls.panel.classList.contains(this.ClassNames.show) || this.controls.panel.classList.contains(this.ClassNames.hidden);
+ },
+
</ins><span class="cx"> removeControls: function()
</span><span class="cx"> {
</span><span class="cx"> if (this.controls.panel.parentNode)
</span></span></pre></div>
<a id="trunkSourceWebCoreModulesmediacontrolsmediaControlsiOScss"></a>
<div class="addfile"><h4>Added: trunk/Source/WebCore/Modules/mediacontrols/mediaControlsiOS.css (0 => 161280)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/Modules/mediacontrols/mediaControlsiOS.css (rev 0)
+++ trunk/Source/WebCore/Modules/mediacontrols/mediaControlsiOS.css 2014-01-03 20:50:49 UTC (rev 161280)
</span><span class="lines">@@ -0,0 +1,279 @@
</span><ins>+/*
+ * Copyright (C) 2012, 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ * notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ * notice, this list of conditions and the following disclaimer in the
+ * documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE COMPUTER, INC. ``AS IS'' AND ANY
+ * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+ * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE COMPUTER, INC. OR
+ * CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
+ * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
+ * PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY
+ * OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+ * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+audio {
+ width: 200px;
+ height: 44px;
+}
+
+body:-webkit-full-page-media {
+ background-color: rgb(38, 38, 38);
+}
+
+video:-webkit-full-page-media {
+ margin: auto;
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+}
+
+video:-webkit-full-page-media::-webkit-media-controls-panel {
+ bottom: 0px;
+}
+
+::-webkit-media-controls {
+ width: inherit;
+ height: inherit;
+ position: relative;
+ display: -webkit-flex;
+ -webkit-align-items: stretch;
+ -webkit-justify-content: flex-end;
+ -webkit-flex-direction: column;
+}
+
+video::-webkit-media-text-track-container,
+audio::-webkit-media-text-track-container {
+ position: relative;
+ -webkit-flex: 1 1 auto;
+}
+
+video::-webkit-media-controls-panel,
+audio::-webkit-media-controls-panel {
+ box-sizing: border-box;
+ position: relative;
+ bottom: 0;
+ width: 100%;
+ padding-top: 1px;
+ height: 44px;
+ line-height: 44px;
+ -webkit-user-select: none;
+ background-color: rgba(255, 255, 255, .5);
+
+ display: -webkit-flex;
+ -webkit-flex-direction: row;
+ -webkit-align-items: center;
+ -webkit-user-select: none;
+
+ transition: opacity 0.25s linear;
+}
+
+video::-webkit-media-controls-panel {
+ opacity: 0;
+}
+
+video::-webkit-media-controls-panel.show,
+video::-webkit-media-controls-panel.paused,
+video::-webkit-media-controls-panel:hover {
+ opacity: 1;
+}
+
+
+video::-webkit-media-controls-rewind-button,
+audio::-webkit-media-controls-rewind-button,
+video::-webkit-media-controls-panel .mute-box,
+audio::-webkit-media-controls-panel .mute-box,
+video::-webkit-media-controls-mute-button,
+audio::-webkit-media-controls-mute-button,
+video::-webkit-media-controls-volume-max-button,
+video::-webkit-media-controls-panel .volume-box,
+audio::-webkit-media-controls-panel .volume-box,
+audio::-webkit-media-controls-volume-slider,
+video::-webkit-media-controls-volume-slider {
+ display: none !important;
+}
+
+video::-webkit-media-controls-play-button,
+audio::-webkit-media-controls-play-button,
+video::-webkit-media-controls-fullscreen-button,
+audio::-webkit-media-controls-fullscreen-button {
+ -webkit-appearance: none;
+ display: block;
+ padding: 0;
+ border: 0;
+ background-color: black;
+ -webkit-mask-origin: content-box;
+ -webkit-mask-repeat: no-repeat;
+ -webkit-mask-size: contain;
+ -webkit-user-select: none;
+}
+
+video::-webkit-media-controls-play-button:active,
+audio::-webkit-media-controls-play-button:active,
+video::-webkit-media-controls-fullscreen-button:active,
+audio::-webkit-media-controls-fullscreen-button:active, {
+ background-color: white;
+}
+
+video::-webkit-media-controls-play-button,
+audio::-webkit-media-controls-play-button {
+ margin-left: 34px;
+ margin-right: 13px;
+ width: 18px;
+ height: 16px;
+ -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 16"><rect x="1" y="0" width="5" height="16" fill="white"/><rect x="12" y="0" width="5" height="16" fill="white"/></svg>');
+}
+
+video::-webkit-media-controls-play-button.paused,
+audio::-webkit-media-controls-play-button.paused {
+ -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 16"><path d="M 0,0 18,8 0,16 z" fill="white"/></svg>');
+}
+
+video::-webkit-media-controls-fullscreen-button,
+audio::-webkit-media-controls-fullscreen-button {
+ margin-right: 34px;
+ margin-left: 13px;
+ width: 16px;
+ height: 16px;
+ -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16px" height="16px"><g stroke="white" fill="transparent"><path d="M .5,5 v -4.5 h 4.5M .5,.5 l 5.5,5.5" /> <path d="M 15.5,11 v 4.5 h -4.5 M 15.5,15.5 l -5.5,-5.5" /></g></svg>')
+}
+
+/* Retina images */
+@media only screen and (-webkit-min-device-pixel-ratio: 2) {
+ video::-webkit-media-controls-fullscreen-button,
+ audio::-webkit-media-controls-fullscreen-button {
+ -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"><g stroke="white" stroke-width="2" fill="transparent"><path d="M 1,9 v -8 h 8 M 1,1 l 11,11" /> <path d="M 29,21 v 8 h -8 M 29,29 l -11,-11" /></g></svg>');
+ }
+}
+
+video::-webkit-media-controls-timeline,
+audio::-webkit-media-controls-timeline {
+ -webkit-appearance: none;
+ -webkit-flex: 1 1 0;
+ height: 3px;
+ margin: 0;
+
+ border-radius: 1.5px;
+ background-color: black;
+}
+
+video::-webkit-media-controls-timeline::-webkit-slider-thumb,
+audio::-webkit-media-controls-timeline::-webkit-slider-thumb {
+ -webkit-appearance: none;
+ width: 15px;
+ height: 15px;
+ border: 0;
+ border-radius: 7.5px;
+ background-color: white !important;
+ color: white;
+ box-shadow: 0 0 1px rgba(0, 0, 0, .5);
+
+ /* rotateZ() forces the layer into compositing mode. Slider
+ thumbs are small, so forcing a compositing layer is inexpensive,
+ and it keeps the slider from having to repaint while sliding. */
+ -webkit-transform: rotateZ(0deg);
+}
+
+video::-webkit-media-controls-current-time-display,
+video::-webkit-media-controls-time-remaining-display,
+audio::-webkit-media-controls-current-time-display,
+audio::-webkit-media-controls-time-remaining-display {
+ -webkit-user-select: none;
+ -webkit-flex: 0 0 0;
+ display: -webkit-flex;
+ -webkit-justify-content: center;
+ -webkit-align-items: center;
+ cursor: default;
+ font: -webkit-small-control;
+ font-size: 10px;
+ overflow-y: hidden;
+ overflow-x: hidden;
+ width: 45px;
+ min-width: 45px;
+ color: black;
+ letter-spacing: normal;
+ word-spacing: normal;
+ line-height: normal;
+ text-transform: none;
+ text-indent: 0px;
+ text-decoration: none;
+}
+
+video::-webkit-media-controls-timeline-container,
+audio::-webkit-media-controls-timeline-container {
+ display: -webkit-flex;
+ -webkit-flex-direction: row;
+ -webkit-align-items: center;
+ -webkit-user-select: none;
+ -webkit-flex: 1 1 0;
+ position: relative;
+ padding: 0;
+}
+
+video::-webkit-media-controls-panel .hidden,
+audio::-webkit-media-controls-panel .hidden {
+ display: none;
+}
+
+video::-webkit-media-text-track-container {
+ position: relative;
+ width: 100%;
+ overflow: hidden;
+ padding-bottom: 5px;
+
+ text-align: center;
+ color: rgba(255, 255, 255, 1);
+
+ letter-spacing: normal;
+ word-spacing: normal;
+ text-transform: none;
+ text-indent: 0;
+ text-decoration: none;
+ pointer-events: none;
+ -webkit-user-select: none;
+ word-break: break-word;
+
+ -webkit-flex: 1 1;
+
+ -webkit-line-box-contain: block inline-box replaced;
+}
+
+video::cue {
+ background-color: rgba(0, 0, 0, 0.8);
+}
+
+video::-webkit-media-text-track-display {
+ position: absolute;
+ overflow: hidden;
+ white-space: pre-wrap;
+ -webkit-box-sizing: border-box;
+ font: 22px sans-serif;
+}
+
+video::cue(:future) {
+ color: gray;
+}
+
+video::-webkit-media-text-track-container b {
+ font-weight: bold;
+}
+
+video::-webkit-media-text-track-container u {
+ text-decoration: underline;
+}
+
+video::-webkit-media-text-track-container i {
+ font-style: italic;
+}
</ins></span></pre></div>
<a id="trunkSourceWebCoreModulesmediacontrolsmediaControlsiOSjs"></a>
<div class="addfile"><h4>Added: trunk/Source/WebCore/Modules/mediacontrols/mediaControlsiOS.js (0 => 161280)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/Modules/mediacontrols/mediaControlsiOS.js (rev 0)
+++ trunk/Source/WebCore/Modules/mediacontrols/mediaControlsiOS.js 2014-01-03 20:50:49 UTC (rev 161280)
</span><span class="lines">@@ -0,0 +1,102 @@
</span><ins>+function createControls(root, video, host)
+{
+ return new ControllerIOS(root, video, host);
+};
+
+function ControllerIOS(root, video, host)
+{
+ Controller.call(this, root, video, host);
+};
+
+ControllerIOS.prototype = {
+ inheritFrom: function(parent) {
+ for (var property in parent) {
+ if (!this.hasOwnProperty(property))
+ this[property] = parent[property];
+ }
+ },
+
+ createBase: function() {
+ Controller.prototype.createBase.call(this);
+
+ this.listenFor(this.base, 'touchstart', this.handleWrapperTouchStart);
+ this.stopListeningFor(this.base, 'mousemove', this.handleWrapperMouseMove);
+ this.stopListeningFor(this.base, 'mouseout', this.handleWrapperMouseOut);
+
+ },
+
+ createControls: function() {
+ Controller.prototype.createControls.call(this);
+
+ this.listenFor(this.controls.panel, 'touchstart', this.handlePanelTouchStart);
+ this.listenFor(this.controls.panel, 'touchend', this.handlePanelTouchEnd);
+ this.listenFor(this.controls.panel, 'touchcancel', this.handlePanelTouchCancel);
+ this.listenFor(this.controls.playButton, 'touchstart', this.handlePlayButtonTouchStart);
+ this.listenFor(this.controls.playButton, 'touchend', this.handlePlayButtonTouchEnd);
+ this.listenFor(this.controls.playButton, 'touchcancel', this.handlePlayButtonTouchCancel);
+ this.stopListeningFor(this.controls.playButton, 'click', this.handlePlayButtonClicked);
+ },
+
+ configureInlineControls: function() {
+ this.controls.panel.appendChild(this.controls.playButton);
+ this.controls.panel.appendChild(this.controls.statusDisplay);
+ this.controls.panel.appendChild(this.controls.timelineBox);
+ this.controls.timelineBox.appendChild(this.controls.currentTime);
+ this.controls.timelineBox.appendChild(this.controls.timeline);
+ this.controls.timelineBox.appendChild(this.controls.remainingTime);
+ if (!this.isAudio())
+ this.controls.panel.appendChild(this.controls.fullscreenButton);
+ },
+
+ configureFullScreenControls: function() {
+ // Do nothing
+ },
+
+ handlePlayButtonTouchStart: function() {
+ this.controls.playButton.classList.add('active');
+ },
+
+ handlePlayButtonTouchEnd: function(event) {
+ this.controls.playButton.classList.remove('active');
+
+ if (this.canPlay())
+ this.video.play();
+ else
+ this.video.pause();
+
+ event.stopPropagation();
+ },
+
+ handlePlayButtonTouchCancel: function(event) {
+ this.controls.playButton.classList.remove('active');
+ event.stopPropagation();
+ },
+
+ handleWrapperTouchStart: function(event) {
+ if (event.target != this.base)
+ return;
+
+ if (this.controlsAreHidden()) {
+ this.showControls();
+ if (this.hideTimer)
+ clearTimeout(this.hideTimer);
+ this.hideTimer = setTimeout(this.hideControls.bind(this), this.HideControlsDelay);
+ } else if (!this.canPlay())
+ this.hideControls();
+ },
+
+ handlePanelTouchStart: function(event) {
+ this.video.style.webkitUserSelect = 'none';
+ },
+
+ handlePanelTouchEnd: function(event) {
+ this.video.style.removeProperty('-webkit-user-select');
+ },
+
+ handlePanelTouchCancel: function(event) {
+ this.video.style.removeProperty('-webkit-user-select');
+ },
+};
+
+ControllerIOS.prototype.inheritFrom(Object.create(Controller.prototype));
+Object.defineProperty(ControllerIOS.prototype, 'constructor', { enumerable:false, value:ControllerIOS });
</ins></span></pre></div>
<a id="trunkSourceWebCoreWebCorexcodeprojprojectpbxproj"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/WebCore.xcodeproj/project.pbxproj (161279 => 161280)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/WebCore.xcodeproj/project.pbxproj 2014-01-03 20:45:24 UTC (rev 161279)
+++ trunk/Source/WebCore/WebCore.xcodeproj/project.pbxproj 2014-01-03 20:50:49 UTC (rev 161280)
</span><span class="lines">@@ -12470,6 +12470,7 @@
</span><span class="cx"> CD27F6E3145767580078207D /* JSMediaController.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = JSMediaController.h; sourceTree = "<group>"; };
</span><span class="cx"> CD27F6E4145767870078207D /* MediaController.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = MediaController.h; sourceTree = "<group>"; };
</span><span class="cx"> CD27F6E6145770D30078207D /* MediaController.cpp */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.cpp.cpp; path = MediaController.cpp; sourceTree = "<group>"; };
</span><ins>+ CD32A189184EB46A0029B1BB /* mediaControlsiOS.js */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.javascript; path = mediaControlsiOS.js; sourceTree = "<group>"; };
</ins><span class="cx"> CD336F5F17F9F64700DDDCD0 /* AVTrackPrivateAVFObjCImpl.mm */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.cpp.objcpp; path = AVTrackPrivateAVFObjCImpl.mm; sourceTree = "<group>"; };
</span><span class="cx"> CD336F6017F9F64700DDDCD0 /* AVTrackPrivateAVFObjCImpl.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = AVTrackPrivateAVFObjCImpl.h; sourceTree = "<group>"; };
</span><span class="cx"> CD336F6317FA0A4D00DDDCD0 /* VideoTrackPrivateAVF.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = VideoTrackPrivateAVF.h; sourceTree = "<group>"; };
</span><span class="lines">@@ -12565,6 +12566,7 @@
</span><span class="cx"> CDA98E0C1603CF3C00FEA3B1 /* CDMPrivate.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = CDMPrivate.h; sourceTree = "<group>"; };
</span><span class="cx"> CDAA8D0714D385600061EA60 /* PlatformClockCM.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = PlatformClockCM.h; sourceTree = "<group>"; };
</span><span class="cx"> CDAA8D0814D385600061EA60 /* PlatformClockCM.mm */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.cpp.objcpp; path = PlatformClockCM.mm; sourceTree = "<group>"; };
</span><ins>+ CDAAF45D1869094E003C1717 /* mediaControlsiOS.css */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.css; path = mediaControlsiOS.css; sourceTree = "<group>"; };
</ins><span class="cx"> CDAB6D2517C7DE5700C60B34 /* MediaControlsHost.idl */ = {isa = PBXFileReference; lastKnownFileType = text; path = MediaControlsHost.idl; sourceTree = "<group>"; };
</span><span class="cx"> CDAB6D2617C7DE6C00C60B34 /* MediaControlsHost.cpp */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.cpp.cpp; path = MediaControlsHost.cpp; sourceTree = "<group>"; };
</span><span class="cx"> CDAB6D2717C7DE6C00C60B34 /* MediaControlsHost.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = MediaControlsHost.h; sourceTree = "<group>"; };
</span><span class="lines">@@ -20501,9 +20503,11 @@
</span><span class="cx"> children = (
</span><span class="cx"> CDC1DD4117CC2C48008CB55D /* mediaControlsApple.css */,
</span><span class="cx"> CDE6560E17CA6E7600526BA7 /* mediaControlsApple.js */,
</span><del>- CDAB6D2517C7DE5700C60B34 /* MediaControlsHost.idl */,
</del><span class="cx"> CDAB6D2617C7DE6C00C60B34 /* MediaControlsHost.cpp */,
</span><span class="cx"> CDAB6D2717C7DE6C00C60B34 /* MediaControlsHost.h */,
</span><ins>+ CDAB6D2517C7DE5700C60B34 /* MediaControlsHost.idl */,
+ CDAAF45D1869094E003C1717 /* mediaControlsiOS.css */,
+ CD32A189184EB46A0029B1BB /* mediaControlsiOS.js */,
</ins><span class="cx"> );
</span><span class="cx"> path = mediacontrols;
</span><span class="cx"> sourceTree = "<group>";
</span></span></pre></div>
<a id="trunkSourceWebCorehtmlHTMLMediaElementcpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/html/HTMLMediaElement.cpp (161279 => 161280)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/html/HTMLMediaElement.cpp 2014-01-03 20:45:24 UTC (rev 161279)
+++ trunk/Source/WebCore/html/HTMLMediaElement.cpp 2014-01-03 20:50:49 UTC (rev 161280)
</span><span class="lines">@@ -5652,9 +5652,9 @@
</span><span class="cx"> {
</span><span class="cx"> #if ENABLE(PLUGIN_PROXY_FOR_VIDEO)
</span><span class="cx"> // JavaScript controls are not enabled with the video plugin proxy.
</span><del>- UNUSED_PARAM(root);
- return;
-#else
</del><ins>+ if (shouldUseVideoPluginProxy())
+ return;
+#endif
</ins><span class="cx"> Page* page = document().page();
</span><span class="cx"> if (!page)
</span><span class="cx"> return;
</span><span class="lines">@@ -5691,7 +5691,6 @@
</span><span class="cx"> JSC::call(exec, overlay, callType, callData, globalObject, argList);
</span><span class="cx"> if (exec->hadException())
</span><span class="cx"> exec->clearException();
</span><del>-#endif
</del><span class="cx"> }
</span><span class="cx"> #endif // ENABLE(MEDIA_CONTROLS_SCRIPT)
</span><span class="cx">
</span></span></pre></div>
<a id="trunkSourceWebCorerenderingRenderThemeIOSmm"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/rendering/RenderThemeIOS.mm (161279 => 161280)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/rendering/RenderThemeIOS.mm 2014-01-03 20:45:24 UTC (rev 161279)
+++ trunk/Source/WebCore/rendering/RenderThemeIOS.mm 2014-01-03 20:50:49 UTC (rev 161280)
</span><span class="lines">@@ -1205,7 +1205,10 @@
</span><span class="cx"> String RenderThemeIOS::mediaControlsScript()
</span><span class="cx"> {
</span><span class="cx"> #if ENABLE(MEDIA_CONTROLS_SCRIPT)
</span><del>- return String(mediaControlsAppleJavaScript, sizeof(mediaControlsAppleJavaScript));
</del><ins>+ StringBuilder scriptBuilder;
+ scriptBuilder.append(mediaControlsAppleJavaScript, sizeof(mediaControlsAppleJavaScript));
+ scriptBuilder.append(mediaControlsIOSJavaScript, sizeof(mediaControlsIOSJavaScript));
+ return scriptBuilder.toString();
</ins><span class="cx"> #else
</span><span class="cx"> return emptyString();
</span><span class="cx"> #endif
</span></span></pre>
</div>
</div>
</body>
</html>