<!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>[211590] trunk</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/211590">211590</a></dd>
<dt>Author</dt> <dd>graouts@webkit.org</dd>
<dt>Date</dt> <dd>2017-02-02 13:25:19 -0800 (Thu, 02 Feb 2017)</dd>
</dl>
<h3>Log Message</h3>
<pre>[Modern Media Controls] Provide a compact mode for when the controls are small
https://bugs.webkit.org/show_bug.cgi?id=167746
<rdar://problem/29565842>
Reviewed by Dean Jackson.
Source/WebCore:
When the macOS inline media controls become too narrow to display both the volume and fullscreen
buttons in their right container (width < 242), we switch to a compact mode where the controls bar
is shorter and the buttons smaller.
To facilitate this, we provide a new subclass of MacOSInlineMediaControls called MacOSCompactInlineMediaControls
which changes some of the layout properties of the buttons to have shorter margins around buttons.
We also added a new "Compact" LayoutTrait and improved IconService to provide specific icons
for this mode for the buttons that can exist in compact mode.
To correctly implement the design, we needed to add a way to provide different margins around the
left and right edges of the container, so the "padding" property is now split between "leftMargin"
and "rightMargin", and to make property naming cleaner, the "margin" property which specifies the
space between each button in a container is now called "buttonMargin". We also set the default
values for those properties to be 24 (instead of 0) which are the most widely used values, requiring
less customization.
Tests: media/modern-media-controls/macos-compact-inline-media-controls/macos-compact-inline-media-controls-buttons-styles.html
media/modern-media-controls/macos-compact-inline-media-controls/macos-compact-inline-media-controls-constructor.html
media/modern-media-controls/macos-compact-inline-media-controls/macos-compact-inline-media-controls-controls-bar-styles.html
media/modern-media-controls/macos-compact-inline-media-controls/macos-compact-inline-media-controls-layout.html
media/modern-media-controls/macos-compact-inline-media-controls/macos-compact-inline-media-controls-volume-styles.html
media/modern-media-controls/media-controller/media-controller-toggle-compact-mode.html
* Modules/modern-media-controls/controls/buttons-container.js:
(ButtonsContainer.prototype.layout): Refactor the "margin" and "padding" properties into
"leftMargin", "rightMargin" and "buttonMargin".
* Modules/modern-media-controls/controls/icon-button.js:
(IconButton.prototype._updateImage): Fix a small bug that would prevent the image source
change to occur after changing the "iconName" property should the previous and new icons
share the same metrics, which is the case for the "play" and "pause" icons in compact mode.
* Modules/modern-media-controls/controls/icon-service.js: Add support for compact variants.
(const.iconService.new.IconService.prototype._fileNameAndPlatformForIconNameAndLayoutTraits):
(const.iconService.new.IconService):
* Modules/modern-media-controls/controls/ios-inline-media-controls.js: Adopt new margin defaults.
* Modules/modern-media-controls/controls/layout-item.js: Add the new "Compact" LayoutTrait.
* Modules/modern-media-controls/controls/macos-compact-inline-media-controls.css: Added.
(.media-controls.mac.inline.compact > .controls-bar):
(.media-controls.mac.inline.compact button.play-pause):
(.media-controls.mac.inline.compact button.skip-back):
(.media-controls.mac.inline.compact .scrubber.slider):
(.media-controls.mac.inline.compact button.mute):
(.media-controls.mac.inline.compact button.fullscreen):
(.media-controls.mac.inline.compact .time-label,):
(.media-controls.mac.inline.compact .volume-slider-container):
(.media-controls.mac.inline.compact .volume.slider):
(.media-controls.mac.inline.compact .scrubber.slider > input::-webkit-slider-thumb):
* Modules/modern-media-controls/controls/macos-compact-inline-media-controls.js: Added.
(MacOSCompactInlineMediaControls):
* Modules/modern-media-controls/controls/macos-fullscreen-media-controls.js: Adopt new margin defaults.
(MacOSFullscreenMediaControls.prototype.layout):
* Modules/modern-media-controls/controls/macos-inline-media-controls.js: Adopt new margin defaults
and make the _leftContainer and _rightContainer properties public such that the MacOSCompactInlineMediaControls
subclass may customize them without accessing a private property.
(MacOSInlineMediaControls.prototype.layout):
(MacOSInlineMediaControls.prototype.showTracksPanel):
* Modules/modern-media-controls/images/macOS/enter-fullscreen-compact@1x.png: Added.
* Modules/modern-media-controls/images/macOS/enter-fullscreen-compact@2x.png: Added.
* Modules/modern-media-controls/images/macOS/interval-skip-back-compact@1x.png: Added.
* Modules/modern-media-controls/images/macOS/interval-skip-back-compact@2x.png: Added.
* Modules/modern-media-controls/images/macOS/pause-compact@1x.png: Added.
* Modules/modern-media-controls/images/macOS/pause-compact@2x.png: Added.
* Modules/modern-media-controls/images/macOS/play-compact@1x.png: Added.
* Modules/modern-media-controls/images/macOS/play-compact@2x.png: Added.
* Modules/modern-media-controls/images/macOS/volume-compact@1x.png: Added.
* Modules/modern-media-controls/images/macOS/volume-compact@2x.png: Added.
* Modules/modern-media-controls/js-files: Add the new files so they are concatenated by the build script.
* Modules/modern-media-controls/media/media-controller.js: Toggle compact mode if controls
are below the 242px width threshold.
(MediaController.prototype.get layoutTraits):
(MediaController.prototype.handleEvent):
(MediaController.prototype._updateControlsIfNeeded):
(MediaController.prototype._shouldFadeBetweenControls):
(MediaController.prototype._updateControlsSize):
(MediaController.prototype._controlsWidth):
(MediaController.prototype._controlsClass):
(MediaController):
* WebCore.xcodeproj/project.pbxproj: Add new files and perform some cleanup so that the
project accurately lists all the existing project files and remove some older ones.
LayoutTests:
Add some new tests for the compact mode and update some tests after the ButtonsContainer
"padding" and "margin" properties refactoring.
* media/modern-media-controls/buttons-container/buttons-container-buttons-property.html:
* media/modern-media-controls/buttons-container/buttons-container-constructor-expected.txt:
* media/modern-media-controls/buttons-container/buttons-container-constructor.html:
* media/modern-media-controls/buttons-container/buttons-container-layout.html:
* media/modern-media-controls/ios-inline-media-controls/ios-inline-media-controls-constructor-expected.txt:
* media/modern-media-controls/ios-inline-media-controls/ios-inline-media-controls-constructor.html:
* media/modern-media-controls/macos-compact-inline-media-controls/macos-compact-inline-media-controls-buttons-styles-expected.txt: Added.
* media/modern-media-controls/macos-compact-inline-media-controls/macos-compact-inline-media-controls-buttons-styles.html: Added.
* media/modern-media-controls/macos-compact-inline-media-controls/macos-compact-inline-media-controls-constructor-expected.txt: Added.
* media/modern-media-controls/macos-compact-inline-media-controls/macos-compact-inline-media-controls-constructor.html: Added.
* media/modern-media-controls/macos-compact-inline-media-controls/macos-compact-inline-media-controls-controls-bar-styles-expected.txt: Added.
* media/modern-media-controls/macos-compact-inline-media-controls/macos-compact-inline-media-controls-controls-bar-styles.html: Added.
* media/modern-media-controls/macos-compact-inline-media-controls/macos-compact-inline-media-controls-layout-expected.txt: Added.
* media/modern-media-controls/macos-compact-inline-media-controls/macos-compact-inline-media-controls-layout.html: Added.
* media/modern-media-controls/macos-compact-inline-media-controls/macos-compact-inline-media-controls-volume-styles-expected.txt: Added.
* media/modern-media-controls/macos-compact-inline-media-controls/macos-compact-inline-media-controls-volume-styles.html: Added.
* media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-constructor-expected.txt:
* media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-constructor.html:
* media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-right-container-margin-expected.txt:
* media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-right-container-margin.html:
* media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-constructor-expected.txt:
* media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-constructor.html:
* media/modern-media-controls/media-controller/media-controller-toggle-compact-mode-expected.txt: Added.
* media/modern-media-controls/media-controller/media-controller-toggle-compact-mode.html: Added.
* media/modern-media-controls/resources/media-controls-loader.js:
* platform/ios-simulator/TestExpectations:</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsChangeLog">trunk/LayoutTests/ChangeLog</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolsbuttonscontainerbuttonscontainerbuttonspropertyhtml">trunk/LayoutTests/media/modern-media-controls/buttons-container/buttons-container-buttons-property.html</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolsbuttonscontainerbuttonscontainerconstructorexpectedtxt">trunk/LayoutTests/media/modern-media-controls/buttons-container/buttons-container-constructor-expected.txt</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolsbuttonscontainerbuttonscontainerconstructorhtml">trunk/LayoutTests/media/modern-media-controls/buttons-container/buttons-container-constructor.html</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolsbuttonscontainerbuttonscontainerlayouthtml">trunk/LayoutTests/media/modern-media-controls/buttons-container/buttons-container-layout.html</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolsiosinlinemediacontrolsiosinlinemediacontrolsconstructorexpectedtxt">trunk/LayoutTests/media/modern-media-controls/ios-inline-media-controls/ios-inline-media-controls-constructor-expected.txt</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolsiosinlinemediacontrolsiosinlinemediacontrolsconstructorhtml">trunk/LayoutTests/media/modern-media-controls/ios-inline-media-controls/ios-inline-media-controls-constructor.html</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolsmacosfullscreenmediacontrolsmacosfullscreenmediacontrolsconstructorexpectedtxt">trunk/LayoutTests/media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-constructor-expected.txt</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolsmacosfullscreenmediacontrolsmacosfullscreenmediacontrolsconstructorhtml">trunk/LayoutTests/media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-constructor.html</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolsmacosfullscreenmediacontrolsmacosfullscreenmediacontrolsrightcontainermarginexpectedtxt">trunk/LayoutTests/media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-right-container-margin-expected.txt</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolsmacosfullscreenmediacontrolsmacosfullscreenmediacontrolsrightcontainermarginhtml">trunk/LayoutTests/media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-right-container-margin.html</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolsmacosinlinemediacontrolsmacosinlinemediacontrolsconstructorexpectedtxt">trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-constructor-expected.txt</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolsmacosinlinemediacontrolsmacosinlinemediacontrolsconstructorhtml">trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-constructor.html</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolsresourcesmediacontrolsloaderjs">trunk/LayoutTests/media/modern-media-controls/resources/media-controls-loader.js</a></li>
<li><a href="#trunkLayoutTestsplatformiossimulatorTestExpectations">trunk/LayoutTests/platform/ios-simulator/TestExpectations</a></li>
<li><a href="#trunkSourceWebCoreChangeLog">trunk/Source/WebCore/ChangeLog</a></li>
<li><a href="#trunkSourceWebCoreModulesmodernmediacontrolscontrolsbuttonscontainerjs">trunk/Source/WebCore/Modules/modern-media-controls/controls/buttons-container.js</a></li>
<li><a href="#trunkSourceWebCoreModulesmodernmediacontrolscontrolsiconbuttonjs">trunk/Source/WebCore/Modules/modern-media-controls/controls/icon-button.js</a></li>
<li><a href="#trunkSourceWebCoreModulesmodernmediacontrolscontrolsiconservicejs">trunk/Source/WebCore/Modules/modern-media-controls/controls/icon-service.js</a></li>
<li><a href="#trunkSourceWebCoreModulesmodernmediacontrolscontrolsiosinlinemediacontrolsjs">trunk/Source/WebCore/Modules/modern-media-controls/controls/ios-inline-media-controls.js</a></li>
<li><a href="#trunkSourceWebCoreModulesmodernmediacontrolscontrolslayoutitemjs">trunk/Source/WebCore/Modules/modern-media-controls/controls/layout-item.js</a></li>
<li><a href="#trunkSourceWebCoreModulesmodernmediacontrolscontrolsmacosfullscreenmediacontrolsjs">trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-fullscreen-media-controls.js</a></li>
<li><a href="#trunkSourceWebCoreModulesmodernmediacontrolscontrolsmacosinlinemediacontrolsjs">trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-inline-media-controls.js</a></li>
<li><a href="#trunkSourceWebCoreModulesmodernmediacontrolsjsfiles">trunk/Source/WebCore/Modules/modern-media-controls/js-files</a></li>
<li><a href="#trunkSourceWebCoreModulesmodernmediacontrolsmediamediacontrollerjs">trunk/Source/WebCore/Modules/modern-media-controls/media/media-controller.js</a></li>
<li><a href="#trunkSourceWebCoreWebCorexcodeprojprojectpbxproj">trunk/Source/WebCore/WebCore.xcodeproj/project.pbxproj</a></li>
</ul>
<h3>Added Paths</h3>
<ul>
<li>trunk/LayoutTests/media/modern-media-controls/macos-compact-inline-media-controls/</li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolsmacoscompactinlinemediacontrolsmacoscompactinlinemediacontrolsbuttonsstylesexpectedtxt">trunk/LayoutTests/media/modern-media-controls/macos-compact-inline-media-controls/macos-compact-inline-media-controls-buttons-styles-expected.txt</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolsmacoscompactinlinemediacontrolsmacoscompactinlinemediacontrolsbuttonsstyleshtml">trunk/LayoutTests/media/modern-media-controls/macos-compact-inline-media-controls/macos-compact-inline-media-controls-buttons-styles.html</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolsmacoscompactinlinemediacontrolsmacoscompactinlinemediacontrolsconstructorexpectedtxt">trunk/LayoutTests/media/modern-media-controls/macos-compact-inline-media-controls/macos-compact-inline-media-controls-constructor-expected.txt</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolsmacoscompactinlinemediacontrolsmacoscompactinlinemediacontrolsconstructorhtml">trunk/LayoutTests/media/modern-media-controls/macos-compact-inline-media-controls/macos-compact-inline-media-controls-constructor.html</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolsmacoscompactinlinemediacontrolsmacoscompactinlinemediacontrolscontrolsbarstylesexpectedtxt">trunk/LayoutTests/media/modern-media-controls/macos-compact-inline-media-controls/macos-compact-inline-media-controls-controls-bar-styles-expected.txt</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolsmacoscompactinlinemediacontrolsmacoscompactinlinemediacontrolscontrolsbarstyleshtml">trunk/LayoutTests/media/modern-media-controls/macos-compact-inline-media-controls/macos-compact-inline-media-controls-controls-bar-styles.html</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolsmacoscompactinlinemediacontrolsmacoscompactinlinemediacontrolslayoutexpectedtxt">trunk/LayoutTests/media/modern-media-controls/macos-compact-inline-media-controls/macos-compact-inline-media-controls-layout-expected.txt</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolsmacoscompactinlinemediacontrolsmacoscompactinlinemediacontrolslayouthtml">trunk/LayoutTests/media/modern-media-controls/macos-compact-inline-media-controls/macos-compact-inline-media-controls-layout.html</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolsmacoscompactinlinemediacontrolsmacoscompactinlinemediacontrolsvolumestylesexpectedtxt">trunk/LayoutTests/media/modern-media-controls/macos-compact-inline-media-controls/macos-compact-inline-media-controls-volume-styles-expected.txt</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolsmacoscompactinlinemediacontrolsmacoscompactinlinemediacontrolsvolumestyleshtml">trunk/LayoutTests/media/modern-media-controls/macos-compact-inline-media-controls/macos-compact-inline-media-controls-volume-styles.html</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolsmediacontrollermediacontrollertogglecompactmodeexpectedtxt">trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-toggle-compact-mode-expected.txt</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolsmediacontrollermediacontrollertogglecompactmodehtml">trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-toggle-compact-mode.html</a></li>
<li><a href="#trunkSourceWebCoreModulesmodernmediacontrolscontrolsmacoscompactinlinemediacontrolscss">trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-compact-inline-media-controls.css</a></li>
<li><a href="#trunkSourceWebCoreModulesmodernmediacontrolscontrolsmacoscompactinlinemediacontrolsjs">trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-compact-inline-media-controls.js</a></li>
<li><a href="#trunkSourceWebCoreModulesmodernmediacontrolsimagesmacOSenterfullscreencompact1xpng">trunk/Source/WebCore/Modules/modern-media-controls/images/macOS/enter-fullscreen-compact@1x.png</a></li>
<li><a href="#trunkSourceWebCoreModulesmodernmediacontrolsimagesmacOSenterfullscreencompact2xpng">trunk/Source/WebCore/Modules/modern-media-controls/images/macOS/enter-fullscreen-compact@2x.png</a></li>
<li><a href="#trunkSourceWebCoreModulesmodernmediacontrolsimagesmacOSintervalskipbackcompact1xpng">trunk/Source/WebCore/Modules/modern-media-controls/images/macOS/interval-skip-back-compact@1x.png</a></li>
<li><a href="#trunkSourceWebCoreModulesmodernmediacontrolsimagesmacOSintervalskipbackcompact2xpng">trunk/Source/WebCore/Modules/modern-media-controls/images/macOS/interval-skip-back-compact@2x.png</a></li>
<li><a href="#trunkSourceWebCoreModulesmodernmediacontrolsimagesmacOSpausecompact1xpng">trunk/Source/WebCore/Modules/modern-media-controls/images/macOS/pause-compact@1x.png</a></li>
<li><a href="#trunkSourceWebCoreModulesmodernmediacontrolsimagesmacOSpausecompact2xpng">trunk/Source/WebCore/Modules/modern-media-controls/images/macOS/pause-compact@2x.png</a></li>
<li><a href="#trunkSourceWebCoreModulesmodernmediacontrolsimagesmacOSplaycompact1xpng">trunk/Source/WebCore/Modules/modern-media-controls/images/macOS/play-compact@1x.png</a></li>
<li><a href="#trunkSourceWebCoreModulesmodernmediacontrolsimagesmacOSplaycompact2xpng">trunk/Source/WebCore/Modules/modern-media-controls/images/macOS/play-compact@2x.png</a></li>
<li><a href="#trunkSourceWebCoreModulesmodernmediacontrolsimagesmacOSvolumecompact1xpng">trunk/Source/WebCore/Modules/modern-media-controls/images/macOS/volume-compact@1x.png</a></li>
<li><a href="#trunkSourceWebCoreModulesmodernmediacontrolsimagesmacOSvolumecompact2xpng">trunk/Source/WebCore/Modules/modern-media-controls/images/macOS/volume-compact@2x.png</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkLayoutTestsChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/ChangeLog (211589 => 211590)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/ChangeLog 2017-02-02 21:24:11 UTC (rev 211589)
+++ trunk/LayoutTests/ChangeLog 2017-02-02 21:25:19 UTC (rev 211590)
</span><span class="lines">@@ -1,3 +1,41 @@
</span><ins>+2017-02-02 Antoine Quint <graouts@apple.com>
+
+ [Modern Media Controls] Provide a compact mode for when the controls are small
+ https://bugs.webkit.org/show_bug.cgi?id=167746
+ <rdar://problem/29565842>
+
+ Reviewed by Dean Jackson.
+
+ Add some new tests for the compact mode and update some tests after the ButtonsContainer
+ "padding" and "margin" properties refactoring.
+
+ * media/modern-media-controls/buttons-container/buttons-container-buttons-property.html:
+ * media/modern-media-controls/buttons-container/buttons-container-constructor-expected.txt:
+ * media/modern-media-controls/buttons-container/buttons-container-constructor.html:
+ * media/modern-media-controls/buttons-container/buttons-container-layout.html:
+ * media/modern-media-controls/ios-inline-media-controls/ios-inline-media-controls-constructor-expected.txt:
+ * media/modern-media-controls/ios-inline-media-controls/ios-inline-media-controls-constructor.html:
+ * media/modern-media-controls/macos-compact-inline-media-controls/macos-compact-inline-media-controls-buttons-styles-expected.txt: Added.
+ * media/modern-media-controls/macos-compact-inline-media-controls/macos-compact-inline-media-controls-buttons-styles.html: Added.
+ * media/modern-media-controls/macos-compact-inline-media-controls/macos-compact-inline-media-controls-constructor-expected.txt: Added.
+ * media/modern-media-controls/macos-compact-inline-media-controls/macos-compact-inline-media-controls-constructor.html: Added.
+ * media/modern-media-controls/macos-compact-inline-media-controls/macos-compact-inline-media-controls-controls-bar-styles-expected.txt: Added.
+ * media/modern-media-controls/macos-compact-inline-media-controls/macos-compact-inline-media-controls-controls-bar-styles.html: Added.
+ * media/modern-media-controls/macos-compact-inline-media-controls/macos-compact-inline-media-controls-layout-expected.txt: Added.
+ * media/modern-media-controls/macos-compact-inline-media-controls/macos-compact-inline-media-controls-layout.html: Added.
+ * media/modern-media-controls/macos-compact-inline-media-controls/macos-compact-inline-media-controls-volume-styles-expected.txt: Added.
+ * media/modern-media-controls/macos-compact-inline-media-controls/macos-compact-inline-media-controls-volume-styles.html: Added.
+ * media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-constructor-expected.txt:
+ * media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-constructor.html:
+ * media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-right-container-margin-expected.txt:
+ * media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-right-container-margin.html:
+ * media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-constructor-expected.txt:
+ * media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-constructor.html:
+ * media/modern-media-controls/media-controller/media-controller-toggle-compact-mode-expected.txt: Added.
+ * media/modern-media-controls/media-controller/media-controller-toggle-compact-mode.html: Added.
+ * media/modern-media-controls/resources/media-controls-loader.js:
+ * platform/ios-simulator/TestExpectations:
+
</ins><span class="cx"> 2017-02-02 Ryan Haddad <ryanhaddad@apple.com>
</span><span class="cx">
</span><span class="cx"> Mark imported/w3c/web-platform-tests/html/semantics/interactive-elements/the-details-element/toggleEvent.html as flaky.
</span></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolsbuttonscontainerbuttonscontainerbuttonspropertyhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/media/modern-media-controls/buttons-container/buttons-container-buttons-property.html (211589 => 211590)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/buttons-container/buttons-container-buttons-property.html 2017-02-02 21:24:11 UTC (rev 211589)
+++ trunk/LayoutTests/media/modern-media-controls/buttons-container/buttons-container-buttons-property.html 2017-02-02 21:25:19 UTC (rev 211590)
</span><span class="lines">@@ -9,8 +9,9 @@
</span><span class="cx"> window.jsTestIsAsync = true;
</span><span class="cx">
</span><span class="cx"> const container = new ButtonsContainer({
</span><del>- margin: 10,
- padding: 20
</del><ins>+ leftMargin: 20,
+ rightMargin: 20,
+ buttonMargin: 10
</ins><span class="cx"> });
</span><span class="cx">
</span><span class="cx"> container.buttons = [new Button, new Button, new Button];
</span></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolsbuttonscontainerbuttonscontainerconstructorexpectedtxt"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/media/modern-media-controls/buttons-container/buttons-container-constructor-expected.txt (211589 => 211590)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/buttons-container/buttons-container-constructor-expected.txt 2017-02-02 21:24:11 UTC (rev 211589)
+++ trunk/LayoutTests/media/modern-media-controls/buttons-container/buttons-container-constructor-expected.txt 2017-02-02 21:25:19 UTC (rev 211590)
</span><span class="lines">@@ -5,14 +5,16 @@
</span><span class="cx">
</span><span class="cx"> PASS defaultContainer.element.localName is "div"
</span><span class="cx"> PASS defaultContainer.element.className.trim() is "buttons-container"
</span><del>-PASS defaultContainer.margin is 0
-PASS defaultContainer.padding is 0
</del><ins>+PASS defaultContainer.buttonMargin is 24
+PASS defaultContainer.leftMargin is 24
+PASS defaultContainer.rightMargin is 24
</ins><span class="cx"> PASS defaultContainer.buttons is []
</span><span class="cx"> PASS containerWithParameters.element.localName is "div"
</span><span class="cx"> PASS containerWithParameters.element.classList.contains('buttons-container') is true
</span><span class="cx"> PASS containerWithParameters.element.classList.contains('foo') is true
</span><del>-PASS containerWithParameters.margin is 10
-PASS containerWithParameters.padding is 20
</del><ins>+PASS containerWithParameters.buttonMargin is 10
+PASS containerWithParameters.leftMargin is 20
+PASS containerWithParameters.rightMargin is 20
</ins><span class="cx"> PASS containerWithParameters.buttons is buttons
</span><span class="cx"> PASS successfullyParsed is true
</span><span class="cx">
</span></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolsbuttonscontainerbuttonscontainerconstructorhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/media/modern-media-controls/buttons-container/buttons-container-constructor.html (211589 => 211590)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/buttons-container/buttons-container-constructor.html 2017-02-02 21:24:11 UTC (rev 211589)
+++ trunk/LayoutTests/media/modern-media-controls/buttons-container/buttons-container-constructor.html 2017-02-02 21:25:19 UTC (rev 211590)
</span><span class="lines">@@ -8,14 +8,16 @@
</span><span class="cx"> const defaultContainer = new ButtonsContainer;
</span><span class="cx"> shouldBeEqualToString("defaultContainer.element.localName", "div");
</span><span class="cx"> shouldBeEqualToString("defaultContainer.element.className.trim()", "buttons-container");
</span><del>-shouldBe("defaultContainer.margin", "0");
-shouldBe("defaultContainer.padding", "0");
</del><ins>+shouldBe("defaultContainer.buttonMargin", "24");
+shouldBe("defaultContainer.leftMargin", "24");
+shouldBe("defaultContainer.rightMargin", "24");
</ins><span class="cx"> shouldBe("defaultContainer.buttons", "[]");
</span><span class="cx">
</span><span class="cx"> const buttons = [new Button, new Button];
</span><span class="cx"> const containerWithParameters = new ButtonsContainer({
</span><del>- margin: 10,
- padding: 20,
</del><ins>+ buttonMargin: 10,
+ leftMargin: 20,
+ rightMargin: 20,
</ins><span class="cx"> buttons: buttons,
</span><span class="cx"> cssClassName: "foo"
</span><span class="cx"> });
</span><span class="lines">@@ -22,8 +24,9 @@
</span><span class="cx"> shouldBeEqualToString("containerWithParameters.element.localName", "div");
</span><span class="cx"> shouldBeTrue("containerWithParameters.element.classList.contains('buttons-container')");
</span><span class="cx"> shouldBeTrue("containerWithParameters.element.classList.contains('foo')");
</span><del>-shouldBe("containerWithParameters.margin", "10");
-shouldBe("containerWithParameters.padding", "20");
</del><ins>+shouldBe("containerWithParameters.buttonMargin", "10");
+shouldBe("containerWithParameters.leftMargin", "20");
+shouldBe("containerWithParameters.rightMargin", "20");
</ins><span class="cx"> shouldBe("containerWithParameters.buttons", "buttons");
</span><span class="cx">
</span><span class="cx"> </script>
</span></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolsbuttonscontainerbuttonscontainerlayouthtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/media/modern-media-controls/buttons-container/buttons-container-layout.html (211589 => 211590)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/buttons-container/buttons-container-layout.html 2017-02-02 21:24:11 UTC (rev 211589)
+++ trunk/LayoutTests/media/modern-media-controls/buttons-container/buttons-container-layout.html 2017-02-02 21:25:19 UTC (rev 211590)
</span><span class="lines">@@ -25,8 +25,9 @@
</span><span class="cx"> droppedButton.dropped = true;
</span><span class="cx">
</span><span class="cx"> const container = new ButtonsContainer({
</span><del>- margin: 10,
- padding: 20,
</del><ins>+ buttonMargin: 10,
+ leftMargin: 20,
+ rightMargin: 20,
</ins><span class="cx"> buttons: [tenPtWideButton, disabledButton, twentyPtWideButton, droppedButton, thirtyPtWideButton]
</span><span class="cx"> });
</span><span class="cx">
</span></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolsiosinlinemediacontrolsiosinlinemediacontrolsconstructorexpectedtxt"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/media/modern-media-controls/ios-inline-media-controls/ios-inline-media-controls-constructor-expected.txt (211589 => 211590)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/ios-inline-media-controls/ios-inline-media-controls-constructor-expected.txt 2017-02-02 21:24:11 UTC (rev 211589)
+++ trunk/LayoutTests/media/modern-media-controls/ios-inline-media-controls/ios-inline-media-controls-constructor-expected.txt 2017-02-02 21:25:19 UTC (rev 211590)
</span><span class="lines">@@ -15,14 +15,16 @@
</span><span class="cx"> Left container
</span><span class="cx"> PASS mediaControls.controlsBar.children[0].buttons is [mediaControls.playPauseButton, mediaControls.skipBackButton]
</span><span class="cx"> PASS mediaControls.controlsBar.children[0].element.className is "buttons-container left"
</span><del>-PASS mediaControls.controlsBar.children[0].padding is 24
-PASS mediaControls.controlsBar.children[0].margin is 24
</del><ins>+PASS mediaControls.controlsBar.children[0].leftMargin is 24
+PASS mediaControls.controlsBar.children[0].rightMargin is 24
+PASS mediaControls.controlsBar.children[0].buttonMargin is 24
</ins><span class="cx">
</span><span class="cx"> Right container
</span><span class="cx"> PASS mediaControls.controlsBar.children[1].buttons is [mediaControls.airplayButton, mediaControls.pipButton, mediaControls.fullscreenButton]
</span><span class="cx"> PASS mediaControls.controlsBar.children[1].element.className is "buttons-container right"
</span><del>-PASS mediaControls.controlsBar.children[1].padding is 24
-PASS mediaControls.controlsBar.children[1].margin is 24
</del><ins>+PASS mediaControls.controlsBar.children[1].leftMargin is 24
+PASS mediaControls.controlsBar.children[1].rightMargin is 24
+PASS mediaControls.controlsBar.children[1].buttonMargin is 24
</ins><span class="cx">
</span><span class="cx"> PASS successfullyParsed is true
</span><span class="cx">
</span></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolsiosinlinemediacontrolsiosinlinemediacontrolsconstructorhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/media/modern-media-controls/ios-inline-media-controls/ios-inline-media-controls-constructor.html (211589 => 211590)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/ios-inline-media-controls/ios-inline-media-controls-constructor.html 2017-02-02 21:24:11 UTC (rev 211589)
+++ trunk/LayoutTests/media/modern-media-controls/ios-inline-media-controls/ios-inline-media-controls-constructor.html 2017-02-02 21:25:19 UTC (rev 211590)
</span><span class="lines">@@ -21,15 +21,17 @@
</span><span class="cx"> debug("Left container");
</span><span class="cx"> shouldBe("mediaControls.controlsBar.children[0].buttons", "[mediaControls.playPauseButton, mediaControls.skipBackButton]");
</span><span class="cx"> shouldBeEqualToString("mediaControls.controlsBar.children[0].element.className", "buttons-container left");
</span><del>-shouldBe("mediaControls.controlsBar.children[0].padding", "24");
-shouldBe("mediaControls.controlsBar.children[0].margin", "24");
</del><ins>+shouldBe("mediaControls.controlsBar.children[0].leftMargin", "24");
+shouldBe("mediaControls.controlsBar.children[0].rightMargin", "24");
+shouldBe("mediaControls.controlsBar.children[0].buttonMargin", "24");
</ins><span class="cx">
</span><span class="cx"> debug("");
</span><span class="cx"> debug("Right container");
</span><span class="cx"> shouldBe("mediaControls.controlsBar.children[1].buttons", "[mediaControls.airplayButton, mediaControls.pipButton, mediaControls.fullscreenButton]");
</span><span class="cx"> shouldBeEqualToString("mediaControls.controlsBar.children[1].element.className", "buttons-container right");
</span><del>-shouldBe("mediaControls.controlsBar.children[1].padding", "24");
-shouldBe("mediaControls.controlsBar.children[1].margin", "24");
</del><ins>+shouldBe("mediaControls.controlsBar.children[1].leftMargin", "24");
+shouldBe("mediaControls.controlsBar.children[1].rightMargin", "24");
+shouldBe("mediaControls.controlsBar.children[1].buttonMargin", "24");
</ins><span class="cx">
</span><span class="cx"> debug("");
</span><span class="cx">
</span></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolsmacoscompactinlinemediacontrolsmacoscompactinlinemediacontrolsbuttonsstylesexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/media/modern-media-controls/macos-compact-inline-media-controls/macos-compact-inline-media-controls-buttons-styles-expected.txt (0 => 211590)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/macos-compact-inline-media-controls/macos-compact-inline-media-controls-buttons-styles-expected.txt (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/macos-compact-inline-media-controls/macos-compact-inline-media-controls-buttons-styles-expected.txt 2017-02-02 21:25:19 UTC (rev 211590)
</span><span class="lines">@@ -0,0 +1,41 @@
</span><ins>+Testing the MacOSCompactInlineMediaControls computed styles.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+PlayPauseButton
+PASS rgba(style.backgroundColor).r is 255
+PASS rgba(style.backgroundColor).g is 255
+PASS rgba(style.backgroundColor).b is 255
+PASS rgba(style.backgroundColor).a is within 0.001 of 0.572
+PASS style.height is "25px"
+PASS style.webkitMaskPositionY is "6px"
+
+SkipBackButton
+PASS rgba(style.backgroundColor).r is 255
+PASS rgba(style.backgroundColor).g is 255
+PASS rgba(style.backgroundColor).b is 255
+PASS rgba(style.backgroundColor).a is within 0.001 of 0.572
+PASS style.height is "25px"
+PASS style.webkitMaskPositionY is "6px"
+
+MuteButton
+PASS rgba(style.backgroundColor).r is 255
+PASS rgba(style.backgroundColor).g is 255
+PASS rgba(style.backgroundColor).b is 255
+PASS rgba(style.backgroundColor).a is within 0.001 of 0.572
+PASS style.height is "25px"
+PASS style.webkitMaskPositionY is "6px"
+
+FullscreenButton
+PASS rgba(style.backgroundColor).r is 255
+PASS rgba(style.backgroundColor).g is 255
+PASS rgba(style.backgroundColor).b is 255
+PASS rgba(style.backgroundColor).a is within 0.001 of 0.572
+PASS style.height is "25px"
+PASS style.webkitMaskPositionY is "6.5px"
+
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
</ins></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolsmacoscompactinlinemediacontrolsmacoscompactinlinemediacontrolsbuttonsstyleshtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/media/modern-media-controls/macos-compact-inline-media-controls/macos-compact-inline-media-controls-buttons-styles.html (0 => 211590)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/macos-compact-inline-media-controls/macos-compact-inline-media-controls-buttons-styles.html (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/macos-compact-inline-media-controls/macos-compact-inline-media-controls-buttons-styles.html 2017-02-02 21:25:19 UTC (rev 211590)
</span><span class="lines">@@ -0,0 +1,43 @@
</span><ins>+<script src="../../../resources/js-test-pre.js"></script>
+<script src="../resources/media-controls-utils.js" type="text/javascript"></script>
+<script src="../resources/media-controls-loader.js" type="text/javascript"></script>
+<body>
+<script type="text/javascript">
+
+description("Testing the <code>MacOSCompactInlineMediaControls</code> computed styles.");
+
+window.jsTestIsAsync = true;
+
+const mediaControls = new MacOSCompactInlineMediaControls({ width: 240, height: 300 });
+
+const buttonPositions = [
+ [mediaControls.playPauseButton, 6],
+ [mediaControls.skipBackButton, 6],
+ [mediaControls.muteButton, 6],
+ [mediaControls.fullscreenButton, 6.5]
+];
+
+let style;
+scheduler.frameDidFire = function()
+{
+ document.body.appendChild(mediaControls.element);
+
+ if (buttonPositions.some(buttonPosition => buttonPosition[0].width == 0))
+ return;
+
+ for (let [button, y] of buttonPositions) {
+ style = window.getComputedStyle(button.element);
+ debug(button.constructor.name);
+ shouldBeEqualToRGBAColor("style.backgroundColor", "rgba(255, 255, 255, 0.572)");
+ shouldBeEqualToString("style.height", "25px");
+ shouldBeEqualToString("style.webkitMaskPositionY", `${y}px`);
+ debug("");
+ }
+
+ mediaControls.element.remove();
+ finishMediaControlsTest();
+};
+
+</script>
+<script src="../../../resources/js-test-post.js"></script>
+</body>
</ins></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolsmacoscompactinlinemediacontrolsmacoscompactinlinemediacontrolsconstructorexpectedtxtfromrev211589trunkLayoutTestsmediamodernmediacontrolsmacosinlinemediacontrolsmacosinlinemediacontrolsconstructorexpectedtxt"></a>
<div class="copfile"><h4>Copied: trunk/LayoutTests/media/modern-media-controls/macos-compact-inline-media-controls/macos-compact-inline-media-controls-constructor-expected.txt (from rev 211589, trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-constructor-expected.txt) (0 => 211590)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/macos-compact-inline-media-controls/macos-compact-inline-media-controls-constructor-expected.txt (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/macos-compact-inline-media-controls/macos-compact-inline-media-controls-constructor-expected.txt 2017-02-02 21:25:19 UTC (rev 211590)
</span><span class="lines">@@ -0,0 +1,39 @@
</span><ins>+Testing the MacOSCompactInlineMediaControls constructor.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+PASS mediaControls.element.localName is "div"
+PASS mediaControls.element.className is "media-controls mac inline compact"
+PASS mediaControls.layoutTraits is LayoutTraits.macOS | LayoutTraits.Compact
+
+Controls bar
+PASS mediaControls.controlsBar.children.length is 3
+PASS mediaControls.controlsBar.children[0] instanceof ButtonsContainer is true
+PASS mediaControls.controlsBar.children[1] instanceof ButtonsContainer is true
+PASS mediaControls.controlsBar.children[2] instanceof LayoutNode is true
+
+Left container
+PASS mediaControls.controlsBar.children[0].buttons is [mediaControls.playPauseButton, mediaControls.skipBackButton]
+PASS mediaControls.controlsBar.children[0].element.className is "buttons-container left"
+PASS mediaControls.controlsBar.children[0].leftMargin is 8
+PASS mediaControls.controlsBar.children[0].rightMargin is 12
+PASS mediaControls.controlsBar.children[0].buttonMargin is 12
+
+Right container
+PASS mediaControls.controlsBar.children[1].buttons is [mediaControls.muteButton, mediaControls.fullscreenButton]
+PASS mediaControls.controlsBar.children[1].element.className is "buttons-container right"
+PASS mediaControls.controlsBar.children[1].leftMargin is 12
+PASS mediaControls.controlsBar.children[1].rightMargin is 8
+PASS mediaControls.controlsBar.children[1].buttonMargin is 12
+
+Volume slider
+PASS mediaControls.controlsBar.children[2].element.className is "volume-slider-container"
+PASS mediaControls.controlsBar.children[2].children is [mediaControls.volumeSlider]
+PASS mediaControls.controlsBar.children[2].visible is false
+PASS mediaControls.volumeSlider.width is 60
+
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
</ins></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolsmacoscompactinlinemediacontrolsmacoscompactinlinemediacontrolsconstructorhtmlfromrev211589trunkLayoutTestsmediamodernmediacontrolsmacosinlinemediacontrolsmacosinlinemediacontrolsconstructorhtml"></a>
<div class="copfile"><h4>Copied: trunk/LayoutTests/media/modern-media-controls/macos-compact-inline-media-controls/macos-compact-inline-media-controls-constructor.html (from rev 211589, trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-constructor.html) (0 => 211590)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/macos-compact-inline-media-controls/macos-compact-inline-media-controls-constructor.html (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/macos-compact-inline-media-controls/macos-compact-inline-media-controls-constructor.html 2017-02-02 21:25:19 UTC (rev 211590)
</span><span class="lines">@@ -0,0 +1,48 @@
</span><ins>+<script src="../../../resources/js-test-pre.js"></script>
+<script src="../resources/media-controls-loader.js" type="text/javascript"></script>
+<body>
+<script type="text/javascript">
+
+description("Testing the <code>MacOSCompactInlineMediaControls</code> constructor.");
+
+const mediaControls = new MacOSCompactInlineMediaControls;
+
+shouldBeEqualToString("mediaControls.element.localName", "div");
+shouldBeEqualToString("mediaControls.element.className", "media-controls mac inline compact");
+shouldBe("mediaControls.layoutTraits", "LayoutTraits.macOS | LayoutTraits.Compact");
+
+debug("");
+debug("Controls bar");
+shouldBe("mediaControls.controlsBar.children.length", "3");
+shouldBeTrue("mediaControls.controlsBar.children[0] instanceof ButtonsContainer");
+shouldBeTrue("mediaControls.controlsBar.children[1] instanceof ButtonsContainer");
+shouldBeTrue("mediaControls.controlsBar.children[2] instanceof LayoutNode");
+
+debug("");
+debug("Left container");
+shouldBe("mediaControls.controlsBar.children[0].buttons", "[mediaControls.playPauseButton, mediaControls.skipBackButton]");
+shouldBeEqualToString("mediaControls.controlsBar.children[0].element.className", "buttons-container left");
+shouldBe("mediaControls.controlsBar.children[0].leftMargin", "8");
+shouldBe("mediaControls.controlsBar.children[0].rightMargin", "12");
+shouldBe("mediaControls.controlsBar.children[0].buttonMargin", "12");
+
+debug("");
+debug("Right container");
+shouldBe("mediaControls.controlsBar.children[1].buttons", "[mediaControls.muteButton, mediaControls.fullscreenButton]");
+shouldBeEqualToString("mediaControls.controlsBar.children[1].element.className", "buttons-container right");
+shouldBe("mediaControls.controlsBar.children[1].leftMargin", "12");
+shouldBe("mediaControls.controlsBar.children[1].rightMargin", "8");
+shouldBe("mediaControls.controlsBar.children[1].buttonMargin", "12");
+
+debug("");
+debug("Volume slider");
+shouldBeEqualToString("mediaControls.controlsBar.children[2].element.className", "volume-slider-container");
+shouldBe("mediaControls.controlsBar.children[2].children", "[mediaControls.volumeSlider]");
+shouldBeFalse("mediaControls.controlsBar.children[2].visible");
+shouldBe("mediaControls.volumeSlider.width", "60");
+
+debug("");
+
+</script>
+<script src="../../../resources/js-test-post.js"></script>
+</body>
</ins></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolsmacoscompactinlinemediacontrolsmacoscompactinlinemediacontrolscontrolsbarstylesexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/media/modern-media-controls/macos-compact-inline-media-controls/macos-compact-inline-media-controls-controls-bar-styles-expected.txt (0 => 211590)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/macos-compact-inline-media-controls/macos-compact-inline-media-controls-controls-bar-styles-expected.txt (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/macos-compact-inline-media-controls/macos-compact-inline-media-controls-controls-bar-styles-expected.txt 2017-02-02 21:25:19 UTC (rev 211590)
</span><span class="lines">@@ -0,0 +1,23 @@
</span><ins>+Testing the MacOSCompactInlineMediaControls computed styles.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+PASS style.left is "0px"
+PASS style.bottom is "0px"
+PASS style.width is "680px"
+PASS style.height is "25px"
+PASS bounds.left is 0
+PASS bounds.top is 275
+PASS bounds.width is 680
+PASS bounds.height is 25
+PASS rgba(style.backgroundColor).r is 30
+PASS rgba(style.backgroundColor).g is 30
+PASS rgba(style.backgroundColor).b is 30
+PASS rgba(style.backgroundColor).a is within 0.001 of 0.45
+PASS style.webkitBackdropFilter is "saturate(1.8) blur(20px)"
+
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
</ins></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolsmacoscompactinlinemediacontrolsmacoscompactinlinemediacontrolscontrolsbarstyleshtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/media/modern-media-controls/macos-compact-inline-media-controls/macos-compact-inline-media-controls-controls-bar-styles.html (0 => 211590)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/macos-compact-inline-media-controls/macos-compact-inline-media-controls-controls-bar-styles.html (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/macos-compact-inline-media-controls/macos-compact-inline-media-controls-controls-bar-styles.html 2017-02-02 21:25:19 UTC (rev 211590)
</span><span class="lines">@@ -0,0 +1,51 @@
</span><ins>+<script src="../../../resources/js-test-pre.js"></script>
+<script src="../resources/media-controls-utils.js" type="text/javascript"></script>
+<script src="../resources/media-controls-loader.js" type="text/javascript"></script>
+<body>
+<style type="text/css" media="screen">
+
+.media-controls {
+ position: absolute;
+ top: 0;
+ left: 0;
+}
+
+</style>
+<script type="text/javascript">
+
+description("Testing the <code>MacOSCompactInlineMediaControls</code> computed styles.");
+
+window.jsTestIsAsync = true;
+
+const mediaControls = new MacOSCompactInlineMediaControls({ width: 680, height: 300 });
+
+let style, bounds;
+scheduler.frameDidFire = function()
+{
+ document.body.appendChild(mediaControls.element);
+
+ style = window.getComputedStyle(mediaControls.controlsBar.element);
+ bounds = mediaControls.controlsBar.element.getBoundingClientRect();
+
+ shouldBeEqualToString("style.left", "0px");
+ shouldBeEqualToString("style.bottom", "0px");
+ shouldBeEqualToString("style.width", "680px");
+ shouldBeEqualToString("style.height", "25px");
+
+ shouldBe("bounds.left", "0");
+ shouldBe("bounds.top", "275");
+ shouldBe("bounds.width", "680");
+ shouldBe("bounds.height", "25");
+
+ shouldBeEqualToRGBAColor("style.backgroundColor", "rgba(30, 30, 30, 0.45)");
+ shouldBeEqualToString("style.webkitBackdropFilter", "saturate(1.8) blur(20px)");
+
+ mediaControls.element.remove();
+
+ debug("");
+ finishMediaControlsTest();
+};
+
+</script>
+<script src="../../../resources/js-test-post.js"></script>
+</body>
</ins></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolsmacoscompactinlinemediacontrolsmacoscompactinlinemediacontrolslayoutexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/media/modern-media-controls/macos-compact-inline-media-controls/macos-compact-inline-media-controls-layout-expected.txt (0 => 211590)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/macos-compact-inline-media-controls/macos-compact-inline-media-controls-layout-expected.txt (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/macos-compact-inline-media-controls/macos-compact-inline-media-controls-layout-expected.txt 2017-02-02 21:25:19 UTC (rev 211590)
</span><span class="lines">@@ -0,0 +1,13 @@
</span><ins>+Testing the MacOSCompactInlineMediaControls layout.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+PASS mediaControls.controlsBar.children[0] instanceof ButtonsContainer is true
+PASS mediaControls.controlsBar.children[1] instanceof ButtonsContainer is true
+PASS mediaControls.controlsBar.children[0].children is [mediaControls.playPauseButton, mediaControls.skipBackButton]
+PASS mediaControls.controlsBar.children[1].children is [mediaControls.muteButton, mediaControls.fullscreenButton]
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
</ins></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolsmacoscompactinlinemediacontrolsmacoscompactinlinemediacontrolslayouthtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/media/modern-media-controls/macos-compact-inline-media-controls/macos-compact-inline-media-controls-layout.html (0 => 211590)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/macos-compact-inline-media-controls/macos-compact-inline-media-controls-layout.html (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/macos-compact-inline-media-controls/macos-compact-inline-media-controls-layout.html 2017-02-02 21:25:19 UTC (rev 211590)
</span><span class="lines">@@ -0,0 +1,41 @@
</span><ins>+<script src="../../../resources/js-test-pre.js"></script>
+<script src="../resources/media-controls-loader.js" type="text/javascript"></script>
+<script src="../resources/media-controls-utils.js" type="text/javascript"></script>
+<body>
+<script type="text/javascript">
+
+description("Testing the <code>MacOSCompactInlineMediaControls</code> layout.");
+
+window.jsTestIsAsync = true;
+
+const mediaControls = new MacOSCompactInlineMediaControls({ width: 240, height: 25 });
+
+const iconButtons = [
+ mediaControls.playPauseButton,
+ mediaControls.skipBackButton,
+ mediaControls.muteButton,
+ mediaControls.fullscreenButton
+];
+
+// There is a 4-pixel difference in metrics between 1x and 2x due to the volume button having a different width.
+const is1x = window.devicePixelRatio == 1;
+const expectedTimeControlWidth = is1x ? 286 : 290;
+const expectedVolumeSliderContainerX = is1x ? 428 : 432;
+
+scheduler.frameDidFire = function()
+{
+ if (iconButtons.some(button => button.width == 0))
+ return;
+
+ shouldBeTrue("mediaControls.controlsBar.children[0] instanceof ButtonsContainer");
+ shouldBeTrue("mediaControls.controlsBar.children[1] instanceof ButtonsContainer");
+
+ shouldBe("mediaControls.controlsBar.children[0].children", "[mediaControls.playPauseButton, mediaControls.skipBackButton]");
+ shouldBe("mediaControls.controlsBar.children[1].children", "[mediaControls.muteButton, mediaControls.fullscreenButton]");
+
+ finishMediaControlsTest();
+};
+
+</script>
+<script src="../../../resources/js-test-post.js"></script>
+</body>
</ins></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolsmacoscompactinlinemediacontrolsmacoscompactinlinemediacontrolsvolumestylesexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/media/modern-media-controls/macos-compact-inline-media-controls/macos-compact-inline-media-controls-volume-styles-expected.txt (0 => 211590)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/macos-compact-inline-media-controls/macos-compact-inline-media-controls-volume-styles-expected.txt (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/macos-compact-inline-media-controls/macos-compact-inline-media-controls-volume-styles-expected.txt 2017-02-02 21:25:19 UTC (rev 211590)
</span><span class="lines">@@ -0,0 +1,18 @@
</span><ins>+Testing the MacOSCompactInlineMediaControls computed styles.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+PASS volumeSliderContainerStyle.position is "absolute"
+PASS volumeSliderContainerStyle.top is "0px"
+PASS volumeSliderContainerStyle.width is "21px"
+PASS volumeSliderContainerStyle.height is "81px"
+PASS volumeSliderContainerStyle.transform is "matrix(1, 0, 0, 1, -2, -81)"
+PASS volumeSliderStyle.transform is "matrix(0.00000000000000006123233995736766, -1, 1, 0.00000000000000006123233995736766, 0, 0)"
+PASS volumeSliderStyle.left is "-19.5px"
+PASS volumeSliderStyle.top is "40px"
+
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
</ins></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolsmacoscompactinlinemediacontrolsmacoscompactinlinemediacontrolsvolumestyleshtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/media/modern-media-controls/macos-compact-inline-media-controls/macos-compact-inline-media-controls-volume-styles.html (0 => 211590)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/macos-compact-inline-media-controls/macos-compact-inline-media-controls-volume-styles.html (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/macos-compact-inline-media-controls/macos-compact-inline-media-controls-volume-styles.html 2017-02-02 21:25:19 UTC (rev 211590)
</span><span class="lines">@@ -0,0 +1,39 @@
</span><ins>+<script src="../../../resources/js-test-pre.js"></script>
+<script src="../resources/media-controls-utils.js" type="text/javascript"></script>
+<script src="../resources/media-controls-loader.js" type="text/javascript"></script>
+<body>
+<script type="text/javascript">
+
+description("Testing the <code>MacOSCompactInlineMediaControls</code> computed styles.");
+
+window.jsTestIsAsync = true;
+
+const mediaControls = new MacOSCompactInlineMediaControls({ width: 240, height: 300 });
+mediaControls.volumeSlider.parent.visible = true;
+
+let volumeSliderContainerStyle, volumeSliderStyle;
+scheduler.frameDidFire = function()
+{
+ document.body.appendChild(mediaControls.element);
+
+ volumeSliderContainerStyle = window.getComputedStyle(mediaControls.volumeSlider.parent.element);
+ shouldBeEqualToString("volumeSliderContainerStyle.position", "absolute");
+ shouldBeEqualToString("volumeSliderContainerStyle.top", "0px");
+ shouldBeEqualToString("volumeSliderContainerStyle.width", "21px");
+ shouldBeEqualToString("volumeSliderContainerStyle.height", "81px");
+ shouldBeEqualToString("volumeSliderContainerStyle.transform", "matrix(1, 0, 0, 1, -2, -81)");
+
+ volumeSliderStyle = window.getComputedStyle(mediaControls.volumeSlider.element);
+ shouldBeEqualToString("volumeSliderStyle.transform", "matrix(0.00000000000000006123233995736766, -1, 1, 0.00000000000000006123233995736766, 0, 0)");
+ shouldBeEqualToString("volumeSliderStyle.left", "-19.5px");
+ shouldBeEqualToString("volumeSliderStyle.top", "40px");
+
+ mediaControls.element.remove();
+
+ debug("");
+ finishMediaControlsTest();
+};
+
+</script>
+<script src="../../../resources/js-test-post.js"></script>
+</body>
</ins></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolsmacosfullscreenmediacontrolsmacosfullscreenmediacontrolsconstructorexpectedtxt"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-constructor-expected.txt (211589 => 211590)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-constructor-expected.txt 2017-02-02 21:24:11 UTC (rev 211589)
+++ trunk/LayoutTests/media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-constructor-expected.txt 2017-02-02 21:25:19 UTC (rev 211590)
</span><span class="lines">@@ -17,14 +17,16 @@
</span><span class="cx"> Center container
</span><span class="cx"> PASS mediaControls.controlsBar.children[1].buttons is [mediaControls.rewindButton, mediaControls.playPauseButton, mediaControls.forwardButton]
</span><span class="cx"> PASS mediaControls.controlsBar.children[1].element.className is "buttons-container center"
</span><del>-PASS mediaControls.controlsBar.children[1].padding is 27
-PASS mediaControls.controlsBar.children[1].margin is 27
</del><ins>+PASS mediaControls.controlsBar.children[1].leftMargin is 27
+PASS mediaControls.controlsBar.children[1].rightMargin is 27
+PASS mediaControls.controlsBar.children[1].buttonMargin is 27
</ins><span class="cx">
</span><span class="cx"> Right container
</span><span class="cx"> PASS mediaControls.controlsBar.children[2].buttons is [mediaControls.airplayButton, mediaControls.pipButton, mediaControls.tracksButton, mediaControls.fullscreenButton]
</span><span class="cx"> PASS mediaControls.controlsBar.children[2].element.className is "buttons-container right"
</span><del>-PASS mediaControls.controlsBar.children[2].padding is 12
-PASS mediaControls.controlsBar.children[2].margin is 0
</del><ins>+PASS mediaControls.controlsBar.children[2].leftMargin is 12
+PASS mediaControls.controlsBar.children[2].rightMargin is 12
+PASS mediaControls.controlsBar.children[2].buttonMargin is 24
</ins><span class="cx">
</span><span class="cx"> PASS successfullyParsed is true
</span><span class="cx">
</span></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolsmacosfullscreenmediacontrolsmacosfullscreenmediacontrolsconstructorhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-constructor.html (211589 => 211590)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-constructor.html 2017-02-02 21:24:11 UTC (rev 211589)
+++ trunk/LayoutTests/media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-constructor.html 2017-02-02 21:25:19 UTC (rev 211590)
</span><span class="lines">@@ -23,15 +23,17 @@
</span><span class="cx"> debug("Center container");
</span><span class="cx"> shouldBe("mediaControls.controlsBar.children[1].buttons", "[mediaControls.rewindButton, mediaControls.playPauseButton, mediaControls.forwardButton]");
</span><span class="cx"> shouldBeEqualToString("mediaControls.controlsBar.children[1].element.className", "buttons-container center");
</span><del>-shouldBe("mediaControls.controlsBar.children[1].padding", "27");
-shouldBe("mediaControls.controlsBar.children[1].margin", "27");
</del><ins>+shouldBe("mediaControls.controlsBar.children[1].leftMargin", "27");
+shouldBe("mediaControls.controlsBar.children[1].rightMargin", "27");
+shouldBe("mediaControls.controlsBar.children[1].buttonMargin", "27");
</ins><span class="cx">
</span><span class="cx"> debug("");
</span><span class="cx"> debug("Right container");
</span><span class="cx"> shouldBe("mediaControls.controlsBar.children[2].buttons", "[mediaControls.airplayButton, mediaControls.pipButton, mediaControls.tracksButton, mediaControls.fullscreenButton]");
</span><span class="cx"> shouldBeEqualToString("mediaControls.controlsBar.children[2].element.className", "buttons-container right");
</span><del>-shouldBe("mediaControls.controlsBar.children[2].padding", "12");
-shouldBe("mediaControls.controlsBar.children[2].margin", "0");
</del><ins>+shouldBe("mediaControls.controlsBar.children[2].leftMargin", "12");
+shouldBe("mediaControls.controlsBar.children[2].rightMargin", "12");
+shouldBe("mediaControls.controlsBar.children[2].buttonMargin", "24");
</ins><span class="cx">
</span><span class="cx"> debug("");
</span><span class="cx">
</span></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolsmacosfullscreenmediacontrolsmacosfullscreenmediacontrolsrightcontainermarginexpectedtxt"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-right-container-margin-expected.txt (211589 => 211590)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-right-container-margin-expected.txt 2017-02-02 21:24:11 UTC (rev 211589)
+++ trunk/LayoutTests/media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-right-container-margin-expected.txt 2017-02-02 21:25:19 UTC (rev 211590)
</span><span class="lines">@@ -1,16 +1,16 @@
</span><del>-Testing the MacOSFullscreenMediaControls right container margin.
</del><ins>+Testing the MacOSFullscreenMediaControls right container buttonMargin.
</ins><span class="cx">
</span><span class="cx"> On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
</span><span class="cx">
</span><span class="cx">
</span><span class="cx"> 4 enabled buttons
</span><del>-PASS rightContainer.margin is 16
</del><ins>+PASS rightContainer.buttonMargin is 16
</ins><span class="cx">
</span><span class="cx"> 3 enabled buttons
</span><del>-PASS rightContainer.margin is 24
</del><ins>+PASS rightContainer.buttonMargin is 24
</ins><span class="cx">
</span><span class="cx"> 2 enabled buttons
</span><del>-PASS rightContainer.margin is 24
</del><ins>+PASS rightContainer.buttonMargin is 24
</ins><span class="cx">
</span><span class="cx"> PASS successfullyParsed is true
</span><span class="cx">
</span></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolsmacosfullscreenmediacontrolsmacosfullscreenmediacontrolsrightcontainermarginhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-right-container-margin.html (211589 => 211590)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-right-container-margin.html 2017-02-02 21:24:11 UTC (rev 211589)
+++ trunk/LayoutTests/media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-right-container-margin.html 2017-02-02 21:25:19 UTC (rev 211590)
</span><span class="lines">@@ -4,7 +4,7 @@
</span><span class="cx"> <body>
</span><span class="cx"> <script type="text/javascript">
</span><span class="cx">
</span><del>-description("Testing the <code>MacOSFullscreenMediaControls</code> right container margin.");
</del><ins>+description("Testing the <code>MacOSFullscreenMediaControls</code> right container buttonMargin.");
</ins><span class="cx">
</span><span class="cx"> window.jsTestIsAsync = true;
</span><span class="cx">
</span><span class="lines">@@ -18,17 +18,17 @@
</span><span class="cx">
</span><span class="cx"> if (numberOfFrames == 1) {
</span><span class="cx"> debug("4 enabled buttons")
</span><del>- shouldBe("rightContainer.margin", "16");
</del><ins>+ shouldBe("rightContainer.buttonMargin", "16");
</ins><span class="cx"> debug("");
</span><span class="cx"> mediaControls.tracksButton.enabled = false;
</span><span class="cx"> } else if (numberOfFrames == 2) {
</span><span class="cx"> debug("3 enabled buttons")
</span><del>- shouldBe("rightContainer.margin", "24");
</del><ins>+ shouldBe("rightContainer.buttonMargin", "24");
</ins><span class="cx"> mediaControls.pipButton.enabled = false;
</span><span class="cx"> debug("");
</span><span class="cx"> } else if (numberOfFrames == 3) {
</span><span class="cx"> debug("2 enabled buttons")
</span><del>- shouldBe("rightContainer.margin", "24");
</del><ins>+ shouldBe("rightContainer.buttonMargin", "24");
</ins><span class="cx"> debug("");
</span><span class="cx"> finishMediaControlsTest();
</span><span class="cx"> }
</span></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolsmacosinlinemediacontrolsmacosinlinemediacontrolsconstructorexpectedtxt"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-constructor-expected.txt (211589 => 211590)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-constructor-expected.txt 2017-02-02 21:24:11 UTC (rev 211589)
+++ trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-constructor-expected.txt 2017-02-02 21:25:19 UTC (rev 211590)
</span><span class="lines">@@ -16,14 +16,16 @@
</span><span class="cx"> Left container
</span><span class="cx"> PASS mediaControls.controlsBar.children[0].buttons is [mediaControls.playPauseButton, mediaControls.skipBackButton]
</span><span class="cx"> PASS mediaControls.controlsBar.children[0].element.className is "buttons-container left"
</span><del>-PASS mediaControls.controlsBar.children[0].padding is 24
-PASS mediaControls.controlsBar.children[0].margin is 24
</del><ins>+PASS mediaControls.controlsBar.children[0].leftMargin is 24
+PASS mediaControls.controlsBar.children[0].rightMargin is 24
+PASS mediaControls.controlsBar.children[0].buttonMargin is 24
</ins><span class="cx">
</span><span class="cx"> Right container
</span><span class="cx"> PASS mediaControls.controlsBar.children[1].buttons is [mediaControls.muteButton, mediaControls.airplayButton, mediaControls.pipButton, mediaControls.tracksButton, mediaControls.fullscreenButton]
</span><span class="cx"> PASS mediaControls.controlsBar.children[1].element.className is "buttons-container right"
</span><del>-PASS mediaControls.controlsBar.children[1].padding is 24
-PASS mediaControls.controlsBar.children[1].margin is 24
</del><ins>+PASS mediaControls.controlsBar.children[1].leftMargin is 24
+PASS mediaControls.controlsBar.children[1].rightMargin is 24
+PASS mediaControls.controlsBar.children[1].buttonMargin is 24
</ins><span class="cx">
</span><span class="cx"> Volume slider
</span><span class="cx"> PASS mediaControls.controlsBar.children[2].element.className is "volume-slider-container"
</span></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolsmacosinlinemediacontrolsmacosinlinemediacontrolsconstructorhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-constructor.html (211589 => 211590)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-constructor.html 2017-02-02 21:24:11 UTC (rev 211589)
+++ trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-constructor.html 2017-02-02 21:25:19 UTC (rev 211590)
</span><span class="lines">@@ -22,15 +22,17 @@
</span><span class="cx"> debug("Left container");
</span><span class="cx"> shouldBe("mediaControls.controlsBar.children[0].buttons", "[mediaControls.playPauseButton, mediaControls.skipBackButton]");
</span><span class="cx"> shouldBeEqualToString("mediaControls.controlsBar.children[0].element.className", "buttons-container left");
</span><del>-shouldBe("mediaControls.controlsBar.children[0].padding", "24");
-shouldBe("mediaControls.controlsBar.children[0].margin", "24");
</del><ins>+shouldBe("mediaControls.controlsBar.children[0].leftMargin", "24");
+shouldBe("mediaControls.controlsBar.children[0].rightMargin", "24");
+shouldBe("mediaControls.controlsBar.children[0].buttonMargin", "24");
</ins><span class="cx">
</span><span class="cx"> debug("");
</span><span class="cx"> debug("Right container");
</span><span class="cx"> shouldBe("mediaControls.controlsBar.children[1].buttons", "[mediaControls.muteButton, mediaControls.airplayButton, mediaControls.pipButton, mediaControls.tracksButton, mediaControls.fullscreenButton]");
</span><span class="cx"> shouldBeEqualToString("mediaControls.controlsBar.children[1].element.className", "buttons-container right");
</span><del>-shouldBe("mediaControls.controlsBar.children[1].padding", "24");
-shouldBe("mediaControls.controlsBar.children[1].margin", "24");
</del><ins>+shouldBe("mediaControls.controlsBar.children[1].leftMargin", "24");
+shouldBe("mediaControls.controlsBar.children[1].rightMargin", "24");
+shouldBe("mediaControls.controlsBar.children[1].buttonMargin", "24");
</ins><span class="cx">
</span><span class="cx"> debug("");
</span><span class="cx"> debug("Volume slider");
</span></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolsmediacontrollermediacontrollertogglecompactmodeexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-toggle-compact-mode-expected.txt (0 => 211590)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-toggle-compact-mode-expected.txt (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-toggle-compact-mode-expected.txt 2017-02-02 21:25:19 UTC (rev 211590)
</span><span class="lines">@@ -0,0 +1,18 @@
</span><ins>+Testing we toggle compact mode as we move past the threshold.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+Controls width = 600px
+mediaControls.classList.contains("compact") = false
+
+Controls width = 241px
+mediaControls.classList.contains("compact") = true
+
+Controls width = 242px
+mediaControls.classList.contains("compact") = false
+
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
</ins></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolsmediacontrollermediacontrollertogglecompactmodehtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-toggle-compact-mode.html (0 => 211590)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-toggle-compact-mode.html (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-toggle-compact-mode.html 2017-02-02 21:25:19 UTC (rev 211590)
</span><span class="lines">@@ -0,0 +1,45 @@
</span><ins>+<!DOCTYPE html>
+<script src="../../../resources/js-test-pre.js"></script>
+<body>
+<video src="../../content/test.mp4" style="width: 600px; height: 240px;" controls autoplay></video>
+<script type="text/javascript">
+
+window.jsTestIsAsync = true;
+
+description("Testing we toggle compact mode as we move past the threshold.");
+
+const media = document.querySelector("video");
+const shadowRoot = window.internals.shadowRoot(media);
+let mediaControls;
+
+media.addEventListener("play", event => {
+ media.pause();
+ controlsResized();
+ shadowRoot.addEventListener("resize", controlsResized);
+});
+
+let numberOfResizeEvents = 0;
+function controlsResized(event)
+{
+ window.requestAnimationFrame(() => {
+ numberOfResizeEvents++;
+ mediaControls = shadowRoot.lastElementChild.lastElementChild
+
+ debug(`Controls width = ${mediaControls.style.width}`);
+ debug(`mediaControls.classList.contains("compact") = ${mediaControls.classList.contains("compact")}`);
+ debug("");
+
+ if (numberOfResizeEvents === 1)
+ window.requestAnimationFrame(() => media.style.width = "241px");
+ else if (numberOfResizeEvents === 2)
+ window.requestAnimationFrame(() => media.style.width = "242px");
+ else if (numberOfResizeEvents === 3) {
+ media.remove();
+ finishJSTest();
+ }
+ });
+}
+
+</script>
+<script src="../../../resources/js-test-post.js"></script>
+</body>
</ins></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolsresourcesmediacontrolsloaderjs"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/media/modern-media-controls/resources/media-controls-loader.js (211589 => 211590)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/resources/media-controls-loader.js 2017-02-02 21:24:11 UTC (rev 211589)
+++ trunk/LayoutTests/media/modern-media-controls/resources/media-controls-loader.js 2017-02-02 21:25:19 UTC (rev 211590)
</span><span class="lines">@@ -3,7 +3,7 @@
</span><span class="cx"> const layoutTestsPath = window.location.href.substr(0, window.location.href.indexOf("/LayoutTests/"));
</span><span class="cx"> const modulePath = layoutTestsPath ? layoutTestsPath + "/Source/WebCore/Modules/modern-media-controls" : "/modern-media-controls";
</span><span class="cx">
</span><del>- ["media-controls", "scrubber", "volume-slider", "slider", "button", "start-button", "icon-button", "airplay-button", "time-label", "status-label", "macos-inline-media-controls", "macos-fullscreen-media-controls", "ios-inline-media-controls", "buttons-container", "placard", "tracks-panel"].forEach(cssFile => {
</del><ins>+ ["media-controls", "scrubber", "volume-slider", "slider", "button", "start-button", "icon-button", "airplay-button", "time-label", "status-label", "macos-inline-media-controls", "macos-compact-inline-media-controls", "macos-fullscreen-media-controls", "ios-inline-media-controls", "buttons-container", "placard", "tracks-panel"].forEach(cssFile => {
</ins><span class="cx"> document.write(`<link rel="stylesheet" type="text/css" href="${modulePath}/controls/${cssFile}.css">`);
</span><span class="cx"> });
</span><span class="cx">
</span></span></pre></div>
<a id="trunkLayoutTestsplatformiossimulatorTestExpectations"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/platform/ios-simulator/TestExpectations (211589 => 211590)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/platform/ios-simulator/TestExpectations 2017-02-02 21:24:11 UTC (rev 211589)
+++ trunk/LayoutTests/platform/ios-simulator/TestExpectations 2017-02-02 21:25:19 UTC (rev 211590)
</span><span class="lines">@@ -2826,6 +2826,9 @@
</span><span class="cx"> webkit.org/b/166062 media/modern-media-controls/placard-support/placard-support-airplay.html [ Skip ]
</span><span class="cx"> webkit.org/b/166062 media/modern-media-controls/audio/audio-controls-buttons.html [ Skip ]
</span><span class="cx">
</span><ins>+# There is no compact mode on iOS
+media/modern-media-controls/media-controller/media-controller-toggle-compact-mode.html [ Skip ]
+
</ins><span class="cx"> # New Encrypted Media API not enabled on iOS
</span><span class="cx"> media/encrypted-media/mock-navigator-requestMediaKeySystemAccess.html [ Skip ]
</span><span class="cx">
</span></span></pre></div>
<a id="trunkSourceWebCoreChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/ChangeLog (211589 => 211590)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/ChangeLog 2017-02-02 21:24:11 UTC (rev 211589)
+++ trunk/Source/WebCore/ChangeLog 2017-02-02 21:25:19 UTC (rev 211590)
</span><span class="lines">@@ -1,3 +1,91 @@
</span><ins>+2017-02-02 Antoine Quint <graouts@apple.com>
+
+ [Modern Media Controls] Provide a compact mode for when the controls are small
+ https://bugs.webkit.org/show_bug.cgi?id=167746
+ <rdar://problem/29565842>
+
+ Reviewed by Dean Jackson.
+
+ When the macOS inline media controls become too narrow to display both the volume and fullscreen
+ buttons in their right container (width < 242), we switch to a compact mode where the controls bar
+ is shorter and the buttons smaller.
+
+ To facilitate this, we provide a new subclass of MacOSInlineMediaControls called MacOSCompactInlineMediaControls
+ which changes some of the layout properties of the buttons to have shorter margins around buttons.
+
+ We also added a new "Compact" LayoutTrait and improved IconService to provide specific icons
+ for this mode for the buttons that can exist in compact mode.
+
+ To correctly implement the design, we needed to add a way to provide different margins around the
+ left and right edges of the container, so the "padding" property is now split between "leftMargin"
+ and "rightMargin", and to make property naming cleaner, the "margin" property which specifies the
+ space between each button in a container is now called "buttonMargin". We also set the default
+ values for those properties to be 24 (instead of 0) which are the most widely used values, requiring
+ less customization.
+
+ Tests: media/modern-media-controls/macos-compact-inline-media-controls/macos-compact-inline-media-controls-buttons-styles.html
+ media/modern-media-controls/macos-compact-inline-media-controls/macos-compact-inline-media-controls-constructor.html
+ media/modern-media-controls/macos-compact-inline-media-controls/macos-compact-inline-media-controls-controls-bar-styles.html
+ media/modern-media-controls/macos-compact-inline-media-controls/macos-compact-inline-media-controls-layout.html
+ media/modern-media-controls/macos-compact-inline-media-controls/macos-compact-inline-media-controls-volume-styles.html
+ media/modern-media-controls/media-controller/media-controller-toggle-compact-mode.html
+
+ * Modules/modern-media-controls/controls/buttons-container.js:
+ (ButtonsContainer.prototype.layout): Refactor the "margin" and "padding" properties into
+ "leftMargin", "rightMargin" and "buttonMargin".
+ * Modules/modern-media-controls/controls/icon-button.js:
+ (IconButton.prototype._updateImage): Fix a small bug that would prevent the image source
+ change to occur after changing the "iconName" property should the previous and new icons
+ share the same metrics, which is the case for the "play" and "pause" icons in compact mode.
+ * Modules/modern-media-controls/controls/icon-service.js: Add support for compact variants.
+ (const.iconService.new.IconService.prototype._fileNameAndPlatformForIconNameAndLayoutTraits):
+ (const.iconService.new.IconService):
+ * Modules/modern-media-controls/controls/ios-inline-media-controls.js: Adopt new margin defaults.
+ * Modules/modern-media-controls/controls/layout-item.js: Add the new "Compact" LayoutTrait.
+ * Modules/modern-media-controls/controls/macos-compact-inline-media-controls.css: Added.
+ (.media-controls.mac.inline.compact > .controls-bar):
+ (.media-controls.mac.inline.compact button.play-pause):
+ (.media-controls.mac.inline.compact button.skip-back):
+ (.media-controls.mac.inline.compact .scrubber.slider):
+ (.media-controls.mac.inline.compact button.mute):
+ (.media-controls.mac.inline.compact button.fullscreen):
+ (.media-controls.mac.inline.compact .time-label,):
+ (.media-controls.mac.inline.compact .volume-slider-container):
+ (.media-controls.mac.inline.compact .volume.slider):
+ (.media-controls.mac.inline.compact .scrubber.slider > input::-webkit-slider-thumb):
+ * Modules/modern-media-controls/controls/macos-compact-inline-media-controls.js: Added.
+ (MacOSCompactInlineMediaControls):
+ * Modules/modern-media-controls/controls/macos-fullscreen-media-controls.js: Adopt new margin defaults.
+ (MacOSFullscreenMediaControls.prototype.layout):
+ * Modules/modern-media-controls/controls/macos-inline-media-controls.js: Adopt new margin defaults
+ and make the _leftContainer and _rightContainer properties public such that the MacOSCompactInlineMediaControls
+ subclass may customize them without accessing a private property.
+ (MacOSInlineMediaControls.prototype.layout):
+ (MacOSInlineMediaControls.prototype.showTracksPanel):
+ * Modules/modern-media-controls/images/macOS/enter-fullscreen-compact@1x.png: Added.
+ * Modules/modern-media-controls/images/macOS/enter-fullscreen-compact@2x.png: Added.
+ * Modules/modern-media-controls/images/macOS/interval-skip-back-compact@1x.png: Added.
+ * Modules/modern-media-controls/images/macOS/interval-skip-back-compact@2x.png: Added.
+ * Modules/modern-media-controls/images/macOS/pause-compact@1x.png: Added.
+ * Modules/modern-media-controls/images/macOS/pause-compact@2x.png: Added.
+ * Modules/modern-media-controls/images/macOS/play-compact@1x.png: Added.
+ * Modules/modern-media-controls/images/macOS/play-compact@2x.png: Added.
+ * Modules/modern-media-controls/images/macOS/volume-compact@1x.png: Added.
+ * Modules/modern-media-controls/images/macOS/volume-compact@2x.png: Added.
+ * Modules/modern-media-controls/js-files: Add the new files so they are concatenated by the build script.
+ * Modules/modern-media-controls/media/media-controller.js: Toggle compact mode if controls
+ are below the 242px width threshold.
+ (MediaController.prototype.get layoutTraits):
+ (MediaController.prototype.handleEvent):
+ (MediaController.prototype._updateControlsIfNeeded):
+ (MediaController.prototype._shouldFadeBetweenControls):
+ (MediaController.prototype._updateControlsSize):
+ (MediaController.prototype._controlsWidth):
+ (MediaController.prototype._controlsClass):
+ (MediaController):
+ * WebCore.xcodeproj/project.pbxproj: Add new files and perform some cleanup so that the
+ project accurately lists all the existing project files and remove some older ones.
+
</ins><span class="cx"> 2017-02-02 Commit Queue <commit-queue@webkit.org>
</span><span class="cx">
</span><span class="cx"> Unreviewed, rolling out r211571 and r211582.
</span></span></pre></div>
<a id="trunkSourceWebCoreModulesmodernmediacontrolscontrolsbuttonscontainerjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/Modules/modern-media-controls/controls/buttons-container.js (211589 => 211590)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/Modules/modern-media-controls/controls/buttons-container.js 2017-02-02 21:24:11 UTC (rev 211589)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/buttons-container.js 2017-02-02 21:25:19 UTC (rev 211590)
</span><span class="lines">@@ -26,13 +26,14 @@
</span><span class="cx"> class ButtonsContainer extends LayoutNode
</span><span class="cx"> {
</span><span class="cx">
</span><del>- constructor({ buttons = [], padding = 0, margin = 0, cssClassName = "" } = {})
</del><ins>+ constructor({ buttons = [], leftMargin = 24, rightMargin = 24, buttonMargin = 24, cssClassName = "" } = {})
</ins><span class="cx"> {
</span><span class="cx"> super(`<div class="buttons-container ${cssClassName}">`);
</span><span class="cx">
</span><del>- this.margin = margin;
- this.padding = padding;
</del><span class="cx"> this.buttons = buttons;
</span><ins>+ this.leftMargin = leftMargin;
+ this.rightMargin = rightMargin;
+ this.buttonMargin = buttonMargin;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> // Public
</span><span class="lines">@@ -56,20 +57,20 @@
</span><span class="cx"> super.layout();
</span><span class="cx">
</span><span class="cx"> const children = [];
</span><del>- let x = this.padding;
</del><ins>+ let x = this.leftMargin;
</ins><span class="cx">
</span><span class="cx"> this._buttons.forEach(button => {
</span><span class="cx"> if (!button.enabled || button.dropped)
</span><span class="cx"> return;
</span><span class="cx"> button.x = x;
</span><del>- x += button.width + this.margin;
</del><ins>+ x += button.width + this.buttonMargin;
</ins><span class="cx"> children.push(button);
</span><span class="cx"> });
</span><span class="cx">
</span><span class="cx"> if (children.length)
</span><del>- this.width = x - this.margin + this.padding;
</del><ins>+ this.width = x - this.buttonMargin + this.rightMargin;
</ins><span class="cx"> else
</span><del>- this.width = this.padding * 2;
</del><ins>+ this.width = this.buttonMargin + this.rightMargin;
</ins><span class="cx">
</span><span class="cx"> this.children = children;
</span><span class="cx"> }
</span></span></pre></div>
<a id="trunkSourceWebCoreModulesmodernmediacontrolscontrolsiconbuttonjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/Modules/modern-media-controls/controls/icon-button.js (211589 => 211590)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/Modules/modern-media-controls/controls/icon-button.js 2017-02-02 21:24:11 UTC (rev 211589)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/icon-button.js 2017-02-02 21:25:19 UTC (rev 211590)
</span><span class="lines">@@ -103,6 +103,8 @@
</span><span class="cx">
</span><span class="cx"> _updateImage()
</span><span class="cx"> {
</span><ins>+ this.needsLayout = true;
+
</ins><span class="cx"> const width = this._image.width / window.devicePixelRatio;
</span><span class="cx"> const height = this._image.height / window.devicePixelRatio;
</span><span class="cx">
</span><span class="lines">@@ -112,8 +114,6 @@
</span><span class="cx"> this.width = width;
</span><span class="cx"> this.height = height;
</span><span class="cx">
</span><del>- this.needsLayout = true;
-
</del><span class="cx"> if (this.layoutDelegate)
</span><span class="cx"> this.layoutDelegate.needsLayout = true;
</span><span class="cx"> }
</span></span></pre></div>
<a id="trunkSourceWebCoreModulesmodernmediacontrolscontrolsiconservicejs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/Modules/modern-media-controls/controls/icon-service.js (211589 => 211590)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/Modules/modern-media-controls/controls/icon-service.js 2017-02-02 21:24:11 UTC (rev 211589)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/icon-service.js 2017-02-02 21:25:19 UTC (rev 211590)
</span><span class="lines">@@ -45,6 +45,7 @@
</span><span class="cx"> };
</span><span class="cx">
</span><span class="cx"> const IconsWithFullscreenVariants = [Icons.Airplay, Icons.Tracks, Icons.Pause, Icons.EnterPiP, Icons.Play];
</span><ins>+const IconsWithCompactVariants = [Icons.Play, Icons.Pause, Icons.SkipBack, Icons.Volume, Icons.VolumeMuted, Icons.EnterFullscreen];
</ins><span class="cx">
</span><span class="cx"> const iconService = new class IconService {
</span><span class="cx">
</span><span class="lines">@@ -88,6 +89,8 @@
</span><span class="cx">
</span><span class="cx"> if (layoutTraits & LayoutTraits.Fullscreen && IconsWithFullscreenVariants.includes(iconName))
</span><span class="cx"> iconName += "-fullscreen";
</span><ins>+ else if (layoutTraits & LayoutTraits.Compact && IconsWithCompactVariants.includes(iconName))
+ iconName += "-compact";
</ins><span class="cx">
</span><span class="cx"> const fileName = `${iconName}@${window.devicePixelRatio}x`;
</span><span class="cx">
</span></span></pre></div>
<a id="trunkSourceWebCoreModulesmodernmediacontrolscontrolsiosinlinemediacontrolsjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/Modules/modern-media-controls/controls/ios-inline-media-controls.js (211589 => 211590)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/Modules/modern-media-controls/controls/ios-inline-media-controls.js 2017-02-02 21:24:11 UTC (rev 211589)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/ios-inline-media-controls.js 2017-02-02 21:25:19 UTC (rev 211590)
</span><span class="lines">@@ -37,16 +37,12 @@
</span><span class="cx">
</span><span class="cx"> this._leftContainer = new ButtonsContainer({
</span><span class="cx"> buttons: [this.playPauseButton, this.skipBackButton],
</span><del>- cssClassName: "left",
- padding: 24,
- margin: 24,
</del><ins>+ cssClassName: "left"
</ins><span class="cx"> });
</span><span class="cx">
</span><span class="cx"> this._rightContainer = new ButtonsContainer({
</span><span class="cx"> buttons: [this.airplayButton, this.pipButton, this.fullscreenButton],
</span><del>- cssClassName: "right",
- padding: 24,
- margin: 24
</del><ins>+ cssClassName: "right"
</ins><span class="cx"> });
</span><span class="cx">
</span><span class="cx"> this.controlsBar.children = [this._leftContainer, this._rightContainer];
</span></span></pre></div>
<a id="trunkSourceWebCoreModulesmodernmediacontrolscontrolslayoutitemjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/Modules/modern-media-controls/controls/layout-item.js (211589 => 211590)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/Modules/modern-media-controls/controls/layout-item.js 2017-02-02 21:24:11 UTC (rev 211589)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/layout-item.js 2017-02-02 21:25:19 UTC (rev 211590)
</span><span class="lines">@@ -27,7 +27,8 @@
</span><span class="cx"> Unknown : 0,
</span><span class="cx"> macOS : 1 << 0,
</span><span class="cx"> iOS : 1 << 1,
</span><del>- Fullscreen : 1 << 2
</del><ins>+ Fullscreen : 1 << 2,
+ Compact : 1 << 3
</ins><span class="cx"> };
</span><span class="cx">
</span><span class="cx"> class LayoutItem extends LayoutNode
</span></span></pre></div>
<a id="trunkSourceWebCoreModulesmodernmediacontrolscontrolsmacoscompactinlinemediacontrolscssfromrev211589trunkSourceWebCoreModulesmodernmediacontrolscontrolslayoutitemjs"></a>
<div class="copfile"><h4>Copied: trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-compact-inline-media-controls.css (from rev 211589, trunk/Source/WebCore/Modules/modern-media-controls/controls/layout-item.js) (0 => 211590)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-compact-inline-media-controls.css (rev 0)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-compact-inline-media-controls.css 2017-02-02 21:25:19 UTC (rev 211590)
</span><span class="lines">@@ -0,0 +1,77 @@
</span><ins>+/*
+ * Copyright (C) 2016 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 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 INC. OR
+ * CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
+ * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
+ * PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
+ * 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.
+ */
+
+/* Controls bar */
+
+.media-controls.mac.inline.compact > .controls-bar {
+ height: 25px;
+}
+
+/* Controls placement */
+
+.media-controls.mac.inline.compact button.play-pause {
+ -webkit-mask-position-y: 6px;
+}
+
+.media-controls.mac.inline.compact button.skip-back {
+ -webkit-mask-position-y: 6px;
+}
+
+.media-controls.mac.inline.compact .scrubber.slider {
+ top: 12px;
+}
+
+.media-controls.mac.inline.compact button.mute {
+ -webkit-mask-position-y: 6px;
+}
+
+.media-controls.mac.inline.compact button.fullscreen {
+ -webkit-mask-position-y: 6.5px;
+}
+
+/* Labels */
+
+.media-controls.mac.inline.compact .time-label,
+.media-controls.mac.inline.compact .status-label {
+ top: 5px;
+ font-size: 12px;
+}
+
+/* Volume slider */
+
+.media-controls.mac.inline.compact .volume-slider-container {
+ width: 21px;
+ transform: translateY(-100%) translateX(-2px);
+}
+
+.media-controls.mac.inline.compact .volume.slider {
+ left: -19.5px;
+}
+
+/* Scrubber */
+
+.media-controls.mac.inline.compact .scrubber.slider > input::-webkit-slider-thumb {
+ height: 15px;
+}
</ins></span></pre></div>
<a id="trunkSourceWebCoreModulesmodernmediacontrolscontrolsmacoscompactinlinemediacontrolsjsfromrev211589trunkSourceWebCoreModulesmodernmediacontrolscontrolslayoutitemjs"></a>
<div class="copfile"><h4>Copied: trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-compact-inline-media-controls.js (from rev 211589, trunk/Source/WebCore/Modules/modern-media-controls/controls/layout-item.js) (0 => 211590)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-compact-inline-media-controls.js (rev 0)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-compact-inline-media-controls.js 2017-02-02 21:25:19 UTC (rev 211590)
</span><span class="lines">@@ -0,0 +1,47 @@
</span><ins>+/*
+ * Copyright (C) 2016 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 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 INC. OR
+ * CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
+ * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
+ * PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
+ * 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.
+ */
+
+class MacOSCompactInlineMediaControls extends MacOSInlineMediaControls
+{
+
+ constructor(options = {})
+ {
+ options.layoutTraits = LayoutTraits.macOS | LayoutTraits.Compact;
+
+ super(options);
+
+ this.element.classList.add("compact");
+
+ this.leftContainer.leftMargin = 8;
+ this.leftContainer.rightMargin = 12;
+ this.leftContainer.buttonMargin = 12;
+
+ this.rightContainer.buttons = [this.muteButton, this.fullscreenButton];
+ this.rightContainer.leftMargin = 12;
+ this.rightContainer.rightMargin = 8;
+ this.rightContainer.buttonMargin = 12;
+ }
+
+}
</ins></span></pre></div>
<a id="trunkSourceWebCoreModulesmodernmediacontrolscontrolsmacosfullscreenmediacontrolsjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-fullscreen-media-controls.js (211589 => 211590)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-fullscreen-media-controls.js 2017-02-02 21:24:11 UTC (rev 211589)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-fullscreen-media-controls.js 2017-02-02 21:25:19 UTC (rev 211590)
</span><span class="lines">@@ -23,9 +23,9 @@
</span><span class="cx"> * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
</span><span class="cx"> */
</span><span class="cx">
</span><del>-const MarginForThreeButtonsOrLess = 24;
-const MarginForFourButtons = 16;
-const MarginForFiveButtons = 12;
</del><ins>+const ButtonMarginForThreeButtonsOrLess = 24;
+const ButtonMarginForFourButtons = 16;
+const ButtonMarginForFiveButtons = 12;
</ins><span class="cx"> const FullscreenTimeControlWidth = 457;
</span><span class="cx">
</span><span class="cx"> class MacOSFullscreenMediaControls extends MacOSMediaControls
</span><span class="lines">@@ -49,14 +49,16 @@
</span><span class="cx"> this._centerContainer = new ButtonsContainer({
</span><span class="cx"> buttons: [this.rewindButton, this.playPauseButton, this.forwardButton],
</span><span class="cx"> cssClassName: "center",
</span><del>- padding: 27,
- margin: 27
</del><ins>+ leftMargin: 27,
+ rightMargin: 27,
+ buttonMargin: 27
</ins><span class="cx"> });
</span><span class="cx">
</span><span class="cx"> this._rightContainer = new ButtonsContainer({
</span><span class="cx"> buttons: [this.airplayButton, this.pipButton, this.tracksButton, this.fullscreenButton],
</span><span class="cx"> cssClassName: "right",
</span><del>- padding: 12
</del><ins>+ leftMargin: 12,
+ rightMargin: 12
</ins><span class="cx"> });
</span><span class="cx">
</span><span class="cx"> this.controlsBar.children = [this.volumeSlider, this._centerContainer, this._rightContainer, this.timeControl];
</span><span class="lines">@@ -98,13 +100,13 @@
</span><span class="cx">
</span><span class="cx"> const numberOfEnabledButtons = this._rightContainer.buttons.filter(button => button.enabled).length;
</span><span class="cx">
</span><del>- let margin = MarginForFiveButtons;
</del><ins>+ let buttonMargin = ButtonMarginForFiveButtons;
</ins><span class="cx"> if (numberOfEnabledButtons === 4)
</span><del>- margin = MarginForFourButtons;
</del><ins>+ buttonMargin = ButtonMarginForFourButtons;
</ins><span class="cx"> else if (numberOfEnabledButtons <= 3)
</span><del>- margin = MarginForThreeButtonsOrLess;
</del><ins>+ buttonMargin = ButtonMarginForThreeButtonsOrLess;
</ins><span class="cx">
</span><del>- this._rightContainer.margin = margin;
</del><ins>+ this._rightContainer.buttonMargin = buttonMargin;
</ins><span class="cx">
</span><span class="cx"> this._centerContainer.layout();
</span><span class="cx"> this._rightContainer.layout();
</span></span></pre></div>
<a id="trunkSourceWebCoreModulesmodernmediacontrolscontrolsmacosinlinemediacontrolsjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-inline-media-controls.js (211589 => 211590)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-inline-media-controls.js 2017-02-02 21:24:11 UTC (rev 211589)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-inline-media-controls.js 2017-02-02 21:25:19 UTC (rev 211590)
</span><span class="lines">@@ -32,18 +32,14 @@
</span><span class="cx">
</span><span class="cx"> this.element.classList.add("inline");
</span><span class="cx">
</span><del>- this._leftContainer = new ButtonsContainer({
</del><ins>+ this.leftContainer = new ButtonsContainer({
</ins><span class="cx"> buttons: [this.playPauseButton, this.skipBackButton],
</span><del>- cssClassName: "left",
- padding: 24,
- margin: 24
</del><ins>+ cssClassName: "left"
</ins><span class="cx"> });
</span><span class="cx">
</span><del>- this._rightContainer = new ButtonsContainer({
</del><ins>+ this.rightContainer = new ButtonsContainer({
</ins><span class="cx"> buttons: [this.muteButton, this.airplayButton, this.pipButton, this.tracksButton, this.fullscreenButton],
</span><del>- cssClassName: "right",
- padding: 24,
- margin: 24
</del><ins>+ cssClassName: "right"
</ins><span class="cx"> });
</span><span class="cx">
</span><span class="cx"> this._volumeSliderContainer = new LayoutNode(`<div class="volume-slider-container">`);
</span><span class="lines">@@ -56,7 +52,7 @@
</span><span class="cx"> this.muteButton.element.addEventListener("mouseleave", this);
</span><span class="cx"> this._volumeSliderContainer.element.addEventListener("mouseleave", this);
</span><span class="cx">
</span><del>- this.controlsBar.children = [this._leftContainer, this._rightContainer, this._volumeSliderContainer];
</del><ins>+ this.controlsBar.children = [this.leftContainer, this.rightContainer, this._volumeSliderContainer];
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> // Public
</span><span class="lines">@@ -69,19 +65,19 @@
</span><span class="cx"> return;
</span><span class="cx">
</span><span class="cx"> // Reset dropped buttons.
</span><del>- this._rightContainer.buttons.concat(this._leftContainer.buttons).forEach(button => delete button.dropped);
</del><ins>+ this.rightContainer.buttons.concat(this.leftContainer.buttons).forEach(button => delete button.dropped);
</ins><span class="cx">
</span><del>- this._leftContainer.layout();
- this._rightContainer.layout();
</del><ins>+ this.leftContainer.layout();
+ this.rightContainer.layout();
</ins><span class="cx">
</span><span class="cx"> const middleContainer = !!this.statusLabel.text ? this.statusLabel : this.timeControl;
</span><del>- this.controlsBar.children = [this._leftContainer, middleContainer, this._rightContainer, this._volumeSliderContainer];
</del><ins>+ this.controlsBar.children = [this.leftContainer, middleContainer, this.rightContainer, this._volumeSliderContainer];
</ins><span class="cx">
</span><span class="cx"> if (middleContainer === this.timeControl)
</span><del>- this.timeControl.width = this.width - this._leftContainer.width - this._rightContainer.width;
</del><ins>+ this.timeControl.width = this.width - this.leftContainer.width - this.rightContainer.width;
</ins><span class="cx">
</span><span class="cx"> if (middleContainer === this.timeControl && this.timeControl.isSufficientlyWide)
</span><del>- this.timeControl.x = this._leftContainer.width;
</del><ins>+ this.timeControl.x = this.leftContainer.width;
</ins><span class="cx"> else {
</span><span class="cx"> this.timeControl.remove();
</span><span class="cx">
</span><span class="lines">@@ -91,7 +87,7 @@
</span><span class="cx"> // enough space to display all buttons in the left and right containers, so gradually drop them.
</span><span class="cx"> for (let button of [this.airplayButton, this.pipButton, this.tracksButton, this.muteButton, this.skipBackButton, this.fullscreenButton]) {
</span><span class="cx"> // Nothing left to do if the combined container widths is shorter than the available width.
</span><del>- if (this._leftContainer.width + this._rightContainer.width < this.width)
</del><ins>+ if (this.leftContainer.width + this.rightContainer.width < this.width)
</ins><span class="cx"> break;
</span><span class="cx">
</span><span class="cx"> droppedControls = true;
</span><span class="lines">@@ -103,25 +99,25 @@
</span><span class="cx"> // This button must now be dropped.
</span><span class="cx"> button.dropped = true;
</span><span class="cx">
</span><del>- this._leftContainer.layout();
- this._rightContainer.layout();
</del><ins>+ this.leftContainer.layout();
+ this.rightContainer.layout();
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> // We didn't need to drop controls and we have status text to show.
</span><span class="cx"> if (!droppedControls && middleContainer === this.statusLabel) {
</span><del>- this.statusLabel.x = this._leftContainer.width;
- this.statusLabel.width = this.width - this._leftContainer.width - this._rightContainer.width;
</del><ins>+ this.statusLabel.x = this.leftContainer.width;
+ this.statusLabel.width = this.width - this.leftContainer.width - this.rightContainer.width;
</ins><span class="cx"> }
</span><span class="cx"> }
</span><span class="cx">
</span><del>- this._rightContainer.x = this.width - this._rightContainer.width;
- this._volumeSliderContainer.x = this._rightContainer.x + this.muteButton.x;
</del><ins>+ this.rightContainer.x = this.width - this.rightContainer.width;
+ this._volumeSliderContainer.x = this.rightContainer.x + this.muteButton.x;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> showTracksPanel()
</span><span class="cx"> {
</span><span class="cx"> super.showTracksPanel();
</span><del>- this.tracksPanel.rightX = this._rightContainer.width - this.tracksButton.x - this.tracksButton.width;
</del><ins>+ this.tracksPanel.rightX = this.rightContainer.width - this.tracksButton.x - this.tracksButton.width;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> // Protected
</span></span></pre></div>
<a id="trunkSourceWebCoreModulesmodernmediacontrolsimagesmacOSenterfullscreencompact1xpng"></a>
<div class="addfile"><h4>Added: trunk/Source/WebCore/Modules/modern-media-controls/images/macOS/enter-fullscreen-compact@1x.png (0 => 211590)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/Modules/modern-media-controls/images/macOS/enter-fullscreen-compact@1x.png (rev 0)
+++ trunk/Source/WebCore/Modules/modern-media-controls/images/macOS/enter-fullscreen-compact@1x.png 2017-02-02 21:25:19 UTC (rev 211590)
</span><span class="lines">@@ -0,0 +1,5 @@
</span><ins>+\x89PNG
+
++IHDR \xA9\xACw&sRGB\xAE\xCE \xE9\xC1IDATcT\x96W\xF8\xC3\xC0\xC0\xF0\x88 320^\xB9\xF3\xF0~\x90\x8D\xB0EA\x8A\xDF3\xFEg\xAC\xB9\xF3\xE8\xFE\xAC\xAA\xA0\x82L@\xFA\xC7?&F\xEF\xFF\x8C\xFF\xA7*+(P\xFC\xFF\xF1\xFD\xFB\xF7/222\xF83\xFEg\x98\xAB"\xA7\xE8\x8BO\NY^\xDEII^\xE1<\\x803.\xCD \xF8\xEF}\xF8\xF8\xE1 L+N\xC5B\x82\x81\xBE_\xA4O\xBE\xFB\xF0\xE1!0\x88o2\xC2ta\xA3U\xDC\xFF\xFFgX\xCC\xC8\xF0\xDF\xFF?\xE3v\xBC\x8AA\xA8(*\xBA\xFD\xFF\xF7!\x90)\x84W10\xDC/1\xFCg\x90*\xE4\xE2\xB7{Q8\x96\xF0\xF6\xC1TIEND\xAEB`\x82
</ins><span class="cx">\ No newline at end of file
</span></span></pre></div>
<a id="trunkSourceWebCoreModulesmodernmediacontrolsimagesmacOSenterfullscreencompact2xpng"></a>
<div class="addfile"><h4>Added: trunk/Source/WebCore/Modules/modern-media-controls/images/macOS/enter-fullscreen-compact@2x.png (0 => 211590)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/Modules/modern-media-controls/images/macOS/enter-fullscreen-compact@2x.png (rev 0)
+++ trunk/Source/WebCore/Modules/modern-media-controls/images/macOS/enter-fullscreen-compact@2x.png 2017-02-02 21:25:19 UTC (rev 211590)
</span><span class="lines">@@ -0,0 +1,6 @@
</span><ins>+\x89PNG
+
++IHDRĴl;sRGB\xAE\xCE \xE9\xEAIDAT8\xED\x95MK\xC3@\x86g\xD6\xFA"\x88\x8A\x8A\xADM\x9ATԂ\xFF@\x9ED\xF0\xE6Ń7\x8C?\xC1\xA3xD<\xF8\xAD\x88\x82\xE0A<\x88bc[\xA1\xE2U\xA9\x98d}\xB76u\xB5DM\xBD:\xB0\xCDdw\xE6\xD9\xD9\xC9ۄm\xC3|&\xA2\x8CZcZr\xF2\xF9\x85څ\x9Fgbi\xC6\xE0J\xE85\xBC\xEBj\x9A\xE4Ǫ \xD1Q`\xDDz\xA4'\xE6n\xEFn\xCF\xF4\xC9z|QI\xBAg\xE2\xF8\xEDB\xF8\x9Bi\xC3\xAB\xA6\xE7T\xC0\xD2O\x8Cy\x92\xB4&\x89:0\xB6R\xA9TF\x8C\xEA\xD3 \xB8\xDC\x9B%\x92;hy\x97\xF0\xE5v:\x99 \x8E
+ \xE2\xAB`5\x91\xCDf_ZK\xA5\xB8'ݒŎi\x9ACj-\xAA \xA8\xE0\x98\x98\xA8l\xC5\xE2\x93\xC74\x85v\x9Cc\xA2\xB7AҮ\x95\xB0*˿\xBE2\xABI\xB0m\xBB\x9B]\xEF\xA0b\x99u
+\x85H\xF0O\xAD\xD0\xE9\x8E\xE3<\x90\x9B\xC4\xBD\xC1\x89V\xF5\xB5\xBF\xDC\xDB01n\xA0s㻖\x84\xF68<\x89\xA7\xA1\xF34t\xBE;\x98H\xC4C\xE28T! ]\x9B\x90\xE0>\xD6M$_y\x82\xC7s\xB9\1\x88\xC7\xDBrJ\xEA\x8B\q \x9DO\x94WRRn\xC5\xE3\x9D\xD2\xCC`\xC3Ld\xB0(\xB8\x8FJ\xCEA\x8E\xA3\xAF\xB1\xC6- \xA4\xFD\x8Ef\xE97Q}\xF5\xD1\xEB=\xE4Y\xD8䴱\xA5y\xD2-\x95.\x81\xED\xFBXbYV\x92=_\xB9(\xF3'P\xEF\x96\xCE?\x83 \xFF~r=\xB7\xD5=\xCC\xFF\xFAy\x9F\xFE\xC5/>\xEB\x92x\xA4 \xEAz\xEAҦ\xA7\xD5 f@\x93\x99:\xAC\xEAKZ~&\x87\xA9B\x9E7IEND\xAEB`\x82
</ins><span class="cx">\ No newline at end of file
</span></span></pre></div>
<a id="trunkSourceWebCoreModulesmodernmediacontrolsimagesmacOSintervalskipbackcompact1xpng"></a>
<div class="addfile"><h4>Added: trunk/Source/WebCore/Modules/modern-media-controls/images/macOS/interval-skip-back-compact@1x.png (0 => 211590)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/Modules/modern-media-controls/images/macOS/interval-skip-back-compact@1x.png (rev 0)
+++ trunk/Source/WebCore/Modules/modern-media-controls/images/macOS/interval-skip-back-compact@1x.png 2017-02-02 21:25:19 UTC (rev 211590)
</span><span class="lines">@@ -0,0 +1,8 @@
</span><ins>+\x89PNG
+
++IHDR +\x9D)\x8FBsRGB\xAE\xCE \xE9\xD1IDAT(}R=hSQ>\xE7&"ZJ^q\xD0澛\xF7^K\xA1\xD4tt\xB3C *nvlQ ]\\xEA\xEC \xB8J ]Z\xB1h\xC5A' Z\xBA4\x83\xE0dӗ\xF7b\xA0P\xD2\xA5j\x9A \xBF\x9B6=p9?\xF7|\xE7\xBB\xE7\x9CKt(^\xCE\xF1]\xF7\xADu\xAD|,
+Ǻ\xF7]\x9D\xB0\x86\xA7\xCDV\xB2@\xC4~6\xED\xFC\xE2\xE7\xFC\xFC\xB1w:ݛ\x89\xEB\xDF\xEA[\xEA\xBB; 2N\xEA\x82\xFEF O\xA6\xD3\xCEf:G$\xB3\xACh:\x93r.\x9E\xE89\xF9\xBE\xD1h4\xBB\xC0\xAE\xEE0 : m\xAE{\xC7\xD7f\xCEڝ\x805|7\x8FIΓ\xD0V\xA9\xDD\xF7u\xFE\xB1\\xCB;\xB0>BOOۊ *\x9Bl\x85\xA9\xBDR\x8A\xA3\xDBĜ\x83\xABHɕ\x8D8\xBAJm\xF3H~\xACD\xA6\x8E\xA58^E\x95y!\x8A\xB4\xD6)\x80" T\xE2ϵZ-[.\x97\xD7\xC0>\xA8\x90\xB4\x89\xB0\x8AxF2\x99\xEC\xA56+ \x8CU\x86Md\xB6\x91\x83Z\x94\xB0 \x9B\xD8\xC19\xD0"\x89T\xC20\xFC*,3;۵g\xC24\xBFL\xCB\xFBh|\x98u\xDB\xEC]\xB0,\xF8_ \xDC\xFC O{\x97\x94s*\xF3 \xE7<c&\xFF\x85\xB0cE\xF5ݰ~<\x98\xF3٠O\x92\xADW~\xC79\x91X\x87[2NԾ\x86\xCE[\xBFZ\xFBc\xD5ju\xEFhA \xA7f\xF3\xA6\x8F\x82q+|\x917\xCC\xF2:\x95ͮ\x8B\xC5Ζ\xFF\x8B}\xA5㽎\xE0\xE9IEND\xAEB`\x82
</ins><span class="cx">\ No newline at end of file
</span></span></pre></div>
<a id="trunkSourceWebCoreModulesmodernmediacontrolsimagesmacOSintervalskipbackcompact2xpng"></a>
<div class="addfile"><h4>Added: trunk/Source/WebCore/Modules/modern-media-controls/images/macOS/interval-skip-back-compact@2x.png (0 => 211590)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/Modules/modern-media-controls/images/macOS/interval-skip-back-compact@2x.png (rev 0)
+++ trunk/Source/WebCore/Modules/modern-media-controls/images/macOS/interval-skip-back-compact@2x.png 2017-02-02 21:25:19 UTC (rev 211590)
</span><span class="lines">@@ -0,0 +1,15 @@
</span><ins>+\x89PNG
+
++IHDR\xAD\xBF\x9C\xF3sRGB\xAE\xCE \xE9\xD2IDATH+\x9DVkh U\xBE\xF7\xCE\xEEfm\x93lvm*\xA6\xBB3\xB3R\x82J\xD5\xED \xFFh-Z \xB4P\xB1R\x95\xAA\xA8Zj[\x8C5\xA8\x88h\xF8,\xD4RQ\xE8\xE9_\x8BD)\x92@\xB3> \x95\xB8\xD9g\x8D\x95M\x9AG\xF3\xD8Mf\xE6\xFA\x9D]\xEF浭\xC6\xC3=\xE7|\xE7uϜ9\xBB\x8C]\x87"\xA1\xC8ƨa\x9C_
+\x9B\xA0\xA8i~ oZ\x8AՒ]K\x95\xE1px\xBD\x90\xB2\x8BIgc\x9C+<\x8D\xAEe\xB6\xFD
+\x93\xECY\xE8\xEA \xC7y^a7:\xABZ\x83\xC1u\xB6\xA6\xBD\xE3}\M\xEC\xF2\xD65ڥ\xD2A)\xD9`+\xF3\xC1\xF8!\xEEX_%\xF3\xF9\xC1y\xDDrN(\x95-\xDC\x81߶08av\xB1\xB8\xC1_\xBB 8!\xF2-)\xB4$\xB51f\x9A\xF7\x91\xA6iJ9:>\x96h ߷JV\x9EqنD\xC2\xB3ه[<\xEB>\xB0\xDC\xD6(\xC4;\xF0\x94I&ws\xC6g!o\x86\xED\xFE\x80\xAF) \xF2֝\xFFkjj\xBA*U[T\xD5T-b; E
+Z&\xBC_\xAFKʧ$\xE3\x87f\xE6fo\x9A\xD6u\xDD\xEFf\xE28\xE3\xF4n\xF8ܭmK&\x93\xE5\xF3og\xCD\xE2\xF1\xB8\x8E\x8B0\xB4+j\x98E\xB4\xEC\xE2\x9D0\x8D*\xBEA\x94\xA0\xDAb\xB2C\x92\xEDHbG \xF3 \xE5\xB7Ȁ\x94\x9B\xD8&\x97ːG\xFCM\xFE/0]\xFE&\xDFz\x9F\xDF\xDF3666I8U\xBF\xDA\xED}\xD2\xEFo:\x83\xBEw\x9A|\xAC\xC5\xFC\xB50]\x98 \xBFy+2\xBF\x9F\xB3\xF0\xAEN9]6\xD2\xFB\xD1\xE3x\x89/cR\xB6r&\xDA4\xC9NTP\xC6FGF\x9E\x96\\x9EdR\x9E\xE3L\xBE}gq\xD5\xE41\x85\x97l\xBBݛB\xE5G\x95n\xD1\xD1\xCD\xC31#\xFC\x8CR\xC6\xF4\xF0n\{B\xC9Q#܇>w)\xF6\xC7 \xE7!W\xDFIL7O\xC0g&\x8B5.\xBBA*\x97y3\x99M\x9F\xA2\xD4.\x87;\x8Fµ\x9Bdr\xC0\xAD\xEEv \xF15\xC9DB\xB0\xEF;\x89DB+,\xB8< \xDE\xCB,\xEB\xFEe \x94*H\xE7\x8DL֍ީջ\xCA\xFAR\xA9'R\xFC\xA9\xEC Q\xE1\x85m\xAFQ:o}} \xD2X\x90\xEF\xBAn\xBC\x83|\xC1\x9D\x823 => cM¡ \xB8խta'\x95cp\xCE\xCB\xE9\xFA\xFB\xFB\xF1\xF2\x82t\xD8-.Tz\xD9F~Pd\x94\xCAf?\xA7k\xE0gܢ\xE77%\xC6z5)-\x8Ds\xD0< r\x98\xDA
\xCFg=\x88\xB3\x88\x84DRʾ
+\xAD\xD4o\x821\xC3)\x9B\x9F\x9B\xA3\xEF\xD8I\x9COg2\x99"l/H\xEEl! \x91d\xE2\xC9\xD8OC\xC3Me\x94\xC1c\\x9D\xAB\xF47<\xF7\xE4B\xB9;Y\x9E\xF5\xC1\xE3S8t`盨\xFCZ\xB5A\xBFO\xA7\xD3
+\xF9\xEA=\x8D\x9B\xBB0\xCE\xD3\xD5=\xC0\xA6h|x\xF8v\xE84l\xFBA\x81\x8D_\xFEQ\xE1\xC2\xDEIz\xCE<\xCE%oG\xA4\x96\xC0\xDF(\xD9s\x8F\xB2 G\xEB\xBE\xE4\x82?\x88Dn\xE0ka\xBB#\x945>"Ln\xB5 \xBCt8\xEF歺 \xB1\xB9\x80bR\x9B\xF3\xC4^U9\xAC\xE4,/?.~\x87\xCF/\x83\xD9\xCCf1\x90˥P\xED(|\xB6g\xF6\xED\x95\xABe\x8B\xCDJ{\xE8f\xDC\xFCu\xC2\xCB#f v\xFC\xED\x8D\xEAa\xF4\xFC\xFFQ\xC44\x9F\xC3@\xB5\xE39\x9D\xCCd\xBE\xA5(\xE5\x98\x8E+\xE8\xE5>\xC8xo\xF2c\xBC\xE0vWB\xB4R\xB8\x94\xEF\xC2\xE7w\xB9^R\xBE\x9Ab\xAE\x8E\x8F+`;\xCE \xFBV\xE8 \xDF\xD6\xDCP\xDF321qM\xD9\xD4:\xF1g h\xF4\x9D\x84߫\x98\x9Cw\xEC-\xA8\xFE\x8A\xB2\xE5\x8AQ'\xFDp` ?\x84܀s\xCFz\xE0\xD8-\xF1\xB1 \x8F\xB8(\xA6E\x83\xE5*n\xC0\xF8m\xC0u7 \xFDn\xF4HM<\x91J\xA5r,!\xFF\xFC\xC3\xE8D`j[\xF5\x96\x84ՠ?PP'\xE4'\xC0ʣ\xBCЦfe\x80\xED\xD9,-+\x8E\x95J\x9C,.9\xB3\xE0\xD4 \xBE\xD7\xD1xo \xF81\x91H,\xFA\xA1W\xFEt\xFE+S\x9A\xAD\x9C@6IEND\xAEB`\x82
</ins><span class="cx">\ No newline at end of file
</span></span></pre></div>
<a id="trunkSourceWebCoreModulesmodernmediacontrolsimagesmacOSpausecompact1xpng"></a>
<div class="addfile"><h4>Added: trunk/Source/WebCore/Modules/modern-media-controls/images/macOS/pause-compact@1x.png (0 => 211590)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/Modules/modern-media-controls/images/macOS/pause-compact@1x.png (rev 0)
+++ trunk/Source/WebCore/Modules/modern-media-controls/images/macOS/pause-compact@1x.png 2017-02-02 21:25:19 UTC (rev 211590)
</span><span class="lines">@@ -0,0 +1,32 @@
</span><ins>+\x89PNG
+
++IHDR +\xF5\x94;gAMA\xB1\x8F \xFCa pHYs \x9A\x9C"iTXtXML:com.adobe.xmp<x:xmpmeta xmlns:x="adobe:ns:meta/" x:xmptk="XMP Core 5.4.0">
+ <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
+ <rdf:Description rdf:about=""
+ xmlns:tiff="http://ns.adobe.com/tiff/1.0/"
+ xmlns:exif="http://ns.adobe.com/exif/1.0/"
+ xmlns:dc="http://purl.org/dc/elements/1.1/"
+ xmlns:xmp="http://ns.adobe.com/xap/1.0/">
+ <tiff:ResolutionUnit>2</tiff:ResolutionUnit>
+ <tiff:Compression>5</tiff:Compression>
+ <tiff:XResolution>72</tiff:XResolution>
+ <tiff:Orientation>1</tiff:Orientation>
+ <tiff:YResolution>72</tiff:YResolution>
+ <exif:PixelXDimension>11</exif:PixelXDimension>
+ <exif:ColorSpace>1</exif:ColorSpace>
+ <exif:PixelYDimension>13</exif:PixelYDimension>
+ <dc:subject>
+ <rdf:Bag/>
+ </dc:subject>
+ <xmp:ModifyDate>2017-02-02T15:02:79</xmp:ModifyDate>
+ <xmp:CreatorTool>Pixelmator 3.6</xmp:CreatorTool>
+ </rdf:Description>
+ </rdf:RDF>
+</x:xmpmeta>
+ZT7/EIDAT(cP\x92S\xA8W\x96W\xF8\xC2*
+
++ P\x80M\x9C\xA4\xA6D\xDF}\xF8\x80DcgI F#\x87\xD4` +FF\x86F\x98\xBB\x90\xD9\xFF\xFF34\xA0\x8Br\x98)t&\x8E;IEND\xAEB`\x82
</ins><span class="cx">\ No newline at end of file
</span></span></pre></div>
<a id="trunkSourceWebCoreModulesmodernmediacontrolsimagesmacOSpausecompact2xpng"></a>
<div class="addfile"><h4>Added: trunk/Source/WebCore/Modules/modern-media-controls/images/macOS/pause-compact@2x.png (0 => 211590)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/Modules/modern-media-controls/images/macOS/pause-compact@2x.png (rev 0)
+++ trunk/Source/WebCore/Modules/modern-media-controls/images/macOS/pause-compact@2x.png 2017-02-02 21:25:19 UTC (rev 211590)
</span><span class="lines">@@ -0,0 +1,29 @@
</span><ins>+\x89PNG
+
++IHDR\xB3v\xAC@gAMA\xB1\x8F \xFCa pHYs \x9A\x9C"iTXtXML:com.adobe.xmp<x:xmpmeta xmlns:x="adobe:ns:meta/" x:xmptk="XMP Core 5.4.0">
+ <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
+ <rdf:Description rdf:about=""
+ xmlns:tiff="http://ns.adobe.com/tiff/1.0/"
+ xmlns:exif="http://ns.adobe.com/exif/1.0/"
+ xmlns:dc="http://purl.org/dc/elements/1.1/"
+ xmlns:xmp="http://ns.adobe.com/xap/1.0/">
+ <tiff:ResolutionUnit>2</tiff:ResolutionUnit>
+ <tiff:Compression>5</tiff:Compression>
+ <tiff:XResolution>72</tiff:XResolution>
+ <tiff:Orientation>1</tiff:Orientation>
+ <tiff:YResolution>72</tiff:YResolution>
+ <exif:PixelXDimension>22</exif:PixelXDimension>
+ <exif:ColorSpace>1</exif:ColorSpace>
+ <exif:PixelYDimension>26</exif:PixelYDimension>
+ <dc:subject>
+ <rdf:Bag/>
+ </dc:subject>
+ <xmp:ModifyDate>2017-02-02T15:02:83</xmp:ModifyDate>
+ <xmp:CreatorTool>Pixelmator 3.6</xmp:CreatorTool>
+ </rdf:Description>
+ </rdf:RDF>
+</x:xmpmeta>
+M\x8FIDATH+cT\x94Steb\xFA\xDF\xCA\xF0\x9F\xC1\x9402\x9C\xFE\xF7\x8F\xB1\xFA\xFE\xA3\x{3ED1149}U\xCF\xC4\xC4\xF8:\x86\xA1 \x93\x80\x81\xE5\x90M\xB2\x89U\xCFT\xAB\x8C\xA6\x99\x8BM\x9BL\d0M\xC0\xA8\xC1\xF0` +\x8AѠ\x80\x87\x9C1\x9A*F\x83 p\xC6h\xAA\xE2Aq\xEE~L69lb0\x9Dp9\xA6\xFF3\x80\x8D\x98 \x9C5X@rh\x80X\xF5b|04,A|IEND\xAEB`\x82
</ins><span class="cx">\ No newline at end of file
</span></span></pre></div>
<a id="trunkSourceWebCoreModulesmodernmediacontrolsimagesmacOSplaycompact1xpng"></a>
<div class="addfile"><h4>Added: trunk/Source/WebCore/Modules/modern-media-controls/images/macOS/play-compact@1x.png (0 => 211590)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/Modules/modern-media-controls/images/macOS/play-compact@1x.png (rev 0)
+++ trunk/Source/WebCore/Modules/modern-media-controls/images/macOS/play-compact@1x.png 2017-02-02 21:25:19 UTC (rev 211590)
</span><span class="lines">@@ -0,0 +1,8 @@
</span><ins>+\x89PNG
+
++IHDR +\xF5\x94;sRGB\xAE\xCE \xE9\xF4IDAT(cV\x96\x97\x9F-\xC8/\xFC\xFD\xFD\xC7\xF7\xF7F\xA0\xE2\xDF \x8C, \xFF62\xFCc.\xB9\xFB\xE4\xEE \z\x98\x80
+\xFF\x83%\xFC\x98\xFF^QVP\xE8TQQ\xE1æ\xA8\xB0m(\xFB\xFF\xFB\xCFM%y\xF9$\xA0 \x8A<\xD0
+\xBF\x80\x82\xAC(Z\xE0 Ƴ \xFF\xFF\xE6\xDF}\xF4\xE8(H\x88\x80b\xB0.\x903W0\xB00\x97\xB3\x80\xB9\xF8 F\xA0t$ß?\xAA(n¡\xE7?#\xE3R\xE6\xBF\xF0\x9B\xCC\xC8p\x9A\xF1\xFF\xFF\xFC; \x84K\xF1sF\x86\xAA\xBB ,\xAA\xF9\xB3\xDD?:Y8\xD8Ձ
+ +i\x9A t\xD0 \xD8\xC0\xF8\xEFoɝǏ\xEF\x828\xD8\xC8 \xFE\xFFgZy\xEFѽ=\xD8 \x8BʒJ\xF8\xA9\xBDb\xACIEND\xAEB`\x82
</ins><span class="cx">\ No newline at end of file
</span></span></pre></div>
<a id="trunkSourceWebCoreModulesmodernmediacontrolsimagesmacOSplaycompact2xpng"></a>
<div class="addfile"><h4>Added: trunk/Source/WebCore/Modules/modern-media-controls/images/macOS/play-compact@2x.png (0 => 211590)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/Modules/modern-media-controls/images/macOS/play-compact@2x.png (rev 0)
+++ trunk/Source/WebCore/Modules/modern-media-controls/images/macOS/play-compact@2x.png 2017-02-02 21:25:19 UTC (rev 211590)
</span><span class="lines">@@ -0,0 +1,7 @@
</span><ins>+\x89PNG
+
++IHDR\xB3v\xAC@sRGB\xAE\xCE \xE9\xDBIDATH+\xB5\x96\xC1+a\xC0\xDF\xFB\xEC\xCA\xE2*Evf씒\x94Bn\xF2/(7\xB9\xCB%J\x8A\x92\x83r\xB9H\xA4 \x9C\x95\xE4 E\xCA\xD6dٙ\xB5\xA4\x90\x955\xCF\xF9j\x87 vvǻ\xBC\xEF\xBD\xEF{\xBF\xEF\xCD\xFBޫA]QڈD{(R\xBEi\xC6#$\x82\x8Fi%\x9By=\xD2U\xB5; .\xD9_\xB0f"؏\xA9\xEA\x96\xCAR\xEA\xF8\xCD!\xE8+#\x88\xC7e\xB6\xB5\xB6\xB6ʵ\xE7\xC3p\xC0\xF9$\x80S\xCFC\x8Fj\xFD|\xF3 \xFA\xCD\xE7\x961\xF5\x84\xB4 S\xD4CM\xD3:\xA5\xB3\xFDX2\xBA\x84MG\\xFF\xB5\xA6\x86\x86:\xE9\xFCM
+vY! n\xD1I~ߊ\xA0\xC0_ \xAC\xE6\x9D\xE3>\x8D7*J\xAF\xDCO\xC6.\xBF\xA6\x86\x80\xDB\\xFF=\xAE\xABk\x93\x8D\xA2\xC19\xA0 \xAE\xFFi,\xAA.\xE9\xBA^#\xFD\xC87>\xB3Q) %\xEA \xB2\x99hJ] \xFC\x99\x97i5\x88R\xFC\xF8Hz
+|\xC7=9tiY#\xA1 \xD7\xE5\xA0,\x87-\xBF\xBE\xBFO\xA7\xD3\xE9{Q2v\xC1\xA6\xD1D*u\x9E\x9BS `J \xE2X\xC24wr\x81r]L\x8D y\xB4'0 n\xF1\x82:p?\xDB\xDCFkY\x84I\xD32odf^\xBAP\xF0!\xD9b\xF8\xF2\xFA\xEA\xC4 \xF4\xDD\xFF\x98\xD20qeY \xC8\xCB\xC2\xC5 \xFC\x85\xAALf\xFE\xEC\xF6\xD6y\xDF\xE2\x80î(\x84-q<\x994-\x97ߧ\xE1\x80egą\xC0\xC1\x8Bd\xF2\xC0'#\xEF\xF1\x8F`\xC7\xFC\xB0|\xAFK\x91\xB5\xB5\xF2\xEE^IEND\xAEB`\x82
</ins><span class="cx">\ No newline at end of file
</span></span></pre></div>
<a id="trunkSourceWebCoreModulesmodernmediacontrolsimagesmacOSvolumecompact1xpng"></a>
<div class="addfile"><h4>Added: trunk/Source/WebCore/Modules/modern-media-controls/images/macOS/volume-compact@1x.png (0 => 211590)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/Modules/modern-media-controls/images/macOS/volume-compact@1x.png (rev 0)
+++ trunk/Source/WebCore/Modules/modern-media-controls/images/macOS/volume-compact@1x.png 2017-02-02 21:25:19 UTC (rev 211590)
</span><span class="lines">@@ -0,0 +1,6 @@
</span><ins>+\x89PNG
+
++IHDR+Oy\x85sRGB\xAE\xCE \xE9\x99IDAT(\x9DR;KA\x9E\xB9\xBB\x88\xD1F $\xE7\xED\xDE^
+b+\xA8\x85\x82v\x8A\xA5\xA5\xFC'6V\x8A\x82\x85\xBD\x95\xF6\xEC\xFC6r\x81$؉\x85\xE2\xF3ƙ\xF30\xB9\xA8 ~0\xEC\xCC|\xDF 3\xBB \xF0OJ\x9F\x8C\xE5\xF3Rn\xFD\xD4\xC3(Ua\xD1q'\xE7\xBAn6\x97\xCB\xF5|\xE6i\xF7\xD5q\xB6\xC4\xFF\xD6$Pj h\xB1\xB3I\xB7e\x99l\xA6\xEBP\xF2\xB5F\xE3 K\x9EgRMJ\xAE\x9Bg\xE2\x88\xCDioP\xF0\xFCe\x8E\xAD\xB0ټ\x82{\xE3\x99Y\xE1#\xC2\xFDw\xB4+\x96\x8C]P\xFAN\xEC\xDDv\xAE\x99A;\xA1l\xB4^\x8Bs\x91\xBDm!m\x8A\xAF\x9A\xEA\x9C'\x9E\x96IV\xA0_\x8C\xFDd_\x91\xB4\x80{#X\x95L\xED\xA6FD\xA3\xE2W\xA1\xFA\xC6\xA6\xD6\xE2'\x84a\xF8 \x88R\xE2\xE2$\x8C\xFE\xD4\xE4S\xCCK\xB5 u<|\x8Cx\x92\xCB$\xF8\xF5\xE0\x8B\"\x82 h\xAD\xFB\xF8x\xFC#8V\xADQ\x9F\xC1\x8C\xD3-Y8\xC5\xE4ӗ q\xC8\x89\xDEv$\xB4\x89֑\xE4\x8Ck\x8A@T?\x85\xC0\xF37\xF8ň\xFF\xCBC\x8A\xE0\x80\xA7a\xAE:s\xF1\x94\xBF\xCDS.t\xEA\xE28\xD0\xFA\x80\x9B\xDCv\x92\xC6\xAF\xA8Ը\xE4\xCBJ\xF9\xADO\xD9m\xBF\xABt\xC9\xE4\xF0po:\x93\x8E\x8C\xF2\xF7\x82\xD1`B\xB2 u\x89cE^\xF2IEND\x
AEB`\x82
</ins><span class="cx">\ No newline at end of file
</span></span></pre></div>
<a id="trunkSourceWebCoreModulesmodernmediacontrolsimagesmacOSvolumecompact2xpng"></a>
<div class="addfile"><h4>Added: trunk/Source/WebCore/Modules/modern-media-controls/images/macOS/volume-compact@2x.png (0 => 211590)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/Modules/modern-media-controls/images/macOS/volume-compact@2x.png (rev 0)
+++ trunk/Source/WebCore/Modules/modern-media-controls/images/macOS/volume-compact@2x.png 2017-02-02 21:25:19 UTC (rev 211590)
</span><span class="lines">@@ -0,0 +1,12 @@
</span><ins>+\x89PNG
+
++IHDR"\xD2n\x8EsRGB\xAE\xCE \xE9\xFFIDATH+\xBDV]h\U\x9E9\xBBۘF%`C4\xD9\xEC\xBDw\xF7&F[\xAA\xB0\xA2\xA0U!"\x82Xȋ`\xEBC\xC1J\xA1\x8A\xE0C\xC4\xA5\xA9\x9A\xEDC\xC1\xF41(
+\xFE\xBDX0\x8AHV\x91(\xED\xFEg\xF3\xA0$J\x90\xB6\x9B\xEE\xDE3~g\xEB\xA6go\x9A\xEC.i 8{\xE6\xE6Ι3g\x89\xFEgH%\xDC\xCFS\x8E\xF3A8\xAC
+3\xB6\x9Df\x9E%\xE2c\xFE\x90\xF7\xAC \xAB\xA3D\xF0%' \xEF\xF4\xB0\xEBt\x82\x9Dw\x89dV\x94\x9E\xDCݷ\xFBֆmۉ \x89\xF8\x92&9\xAC\x85>k8\xD8lO&\x93#~"q\xAF\xADs\x8E\xCE\xD5H\xE4e\xF8\xA8\xEC\xBC|\xBC!k+\xE3\x86g`\xC4+ö\xF6@\x8E\xAB\x99\x91x|\xD0\xD6ϖJix\x9A"ү\x8E \x8C\xEC2\xB2\x96\x89\xEC\xED\xEF\xEF\xE1 \x98\x86\xEE\x{DDB3}vp\xCD\xF2!\xF4\xA2A$j\xF6&\x90\x9Azߵ3\x88UQ\x9D6\xB9tK\xF7'0\xD8\xD3\xE4\xA5M\xA2`\xA6\xB7\xA0~\xC0w\xDD\xC7l\xB3\9w\xF47\xE8\x97\xC3\xD8yӊઽ\xA5\xE7m\xE1)\xD7=\x92r\xBC\xD9x<\xDEm\xEBt\xF5\xF4L\x82.\x8A\xF0\x9B6\xBF\x8E3}\x8A\xDDE\xF3?M+\xA5\xF6\x938\xFC\xBBn\xA0\xE8\xAE\xE3m\xC0\x80\xFD\xEFB\xFA\xBE *j\xBE\xD1P\x9B\x9F\x9F\xBF\x8Aj\x9C\x91\x93\xA6\xD7r\xB9܅\x86L\x94\xFA\xC7^Ӣ\xC6\xA9`\xE5{\xCD3\xBCn\xC5F\xAD\xF6L\xA1\xF03 _\xAFy\x9E\xD7o\xEBK$r\xB4VA0a\xF3\x91\xD4
+Ne\xBC}\xE6hR\xB6p+xa\xCC\x9Cw /\xDA~\xB2\xD9\xEC\x9F,\x94\xA2\xC7m\xBE\xC1\x85d \xBF\xA3\x9B\xF6Hب\x9D\xCF\xE7\xFF\x80\xCE\xF7\xA8\xECSa]$\xF1+r\xDC\xE6+\xE6E\xC8\x89\ \xC2(\x98;\xCD\xC0, \xE0\xF4\xED\xA7\xFDQ[\x82&\xBE\x84\xFE\xEAކD\xF4e|\xF9;\x98\xC1\x85\xD4Ul\p M\x89\xA0u\xB4\xE1\xDF\xFCD\x84\xE3p\xBC\x88\x86^0V1ZVm3oS"DO\xE2\xFBg\xEC`u\x9C\xEBǕ\x8E\x96\xB8\xA8\xC7m\xA0*\xA6"K\xD7\xD9[\xC3|\xCF7#@+5 \xC1\xFA%\xC4'\w\xB9\x95+>!\xEE\xF3\xD6`ll,&ZN ط\xB8=M}\xC7y\xDE\x98\xF8\xABp4\xEAh\x919\x95\xC9\xE7\xBF\xEB\xDDuG\x9FDTox\xC1oA{\xB0\xB2\xB4\xF44}\xD1\xEAX\xD8B\x98\xCD\xC3\xF6wEW\xBF\xB4e\xFE\xA0 \xC79ݍ\xAA\xFCP\xEF\xE0t:]\x85º\xAA\x8C\xBEP\x8D\xC6Ґ9\xB6\x83+\xF0\x9F\x94\xE2\xA7/\xEB\x8FٚJ2\x9E &\xD1x\xAF\xF8D\xB9\\xBE\xB2&\xA2c\xB5 :\xA6 \xF8"t\x95l5\xA2\xF3\x8B\x8B\xCBɡ\xE4+m\x9A\xAF\xABY\xDALe\x8A\xC5ߚ9\xD7(\x8E\xC8\xFB(\xFF?\x95\xA0z2$\xC7h!T\x91\xCC,,d[^\xDF\xDCBn\x96\x84\xCD+\xDC1\xF8 \
xEF \xF1 \xAD\xE3\xA8\xC6_\xB6\xFC\xE3{\xF4=H\xE6\x94\xE1\xB7L\xC4(eK\xF9\x8Fфg \xDE hӠgaڶ3\x8D+\xFE;8\x94\xB9L)?md\x9B \x8Dm\xBC\xAAkG\xBB"\xD1xO`l\xD9Fx\xAETx\xEFF\xB2\x95\xE5\xE5\xD7Ѥ\xA3Z\xF38\xE4f\xA0u \xCAu\xDD\xD1\xF0{щ\xF3\xFF'\xE5\xB8\xDF\xF1\xA6l\xBB\xB6+\xF2\x9F\x91ƈ>_h\xAF v\x9C5 \xFD~T#\x8B\xE6m\xEA\xBB\xC5\xD5EZ\xE2N[IEND\xAEB`\x82
</ins><span class="cx">\ No newline at end of file
</span></span></pre></div>
<a id="trunkSourceWebCoreModulesmodernmediacontrolsjsfiles"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/Modules/modern-media-controls/js-files (211589 => 211590)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/Modules/modern-media-controls/js-files 2017-02-02 21:24:11 UTC (rev 211589)
+++ trunk/Source/WebCore/Modules/modern-media-controls/js-files 2017-02-02 21:25:19 UTC (rev 211590)
</span><span class="lines">@@ -31,6 +31,7 @@
</span><span class="cx"> controls/ios-inline-media-controls.js
</span><span class="cx"> controls/macos-media-controls.js
</span><span class="cx"> controls/macos-inline-media-controls.js
</span><ins>+controls/macos-compact-inline-media-controls.js
</ins><span class="cx"> controls/macos-fullscreen-media-controls.js
</span><span class="cx"> controls/placard.js
</span><span class="cx"> controls/airplay-placard.js
</span></span></pre></div>
<a id="trunkSourceWebCoreModulesmodernmediacontrolsmediamediacontrollerjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/Modules/modern-media-controls/media/media-controller.js (211589 => 211590)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/Modules/modern-media-controls/media/media-controller.js 2017-02-02 21:24:11 UTC (rev 211589)
+++ trunk/Source/WebCore/Modules/modern-media-controls/media/media-controller.js 2017-02-02 21:25:19 UTC (rev 211590)
</span><span class="lines">@@ -23,6 +23,8 @@
</span><span class="cx"> * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
</span><span class="cx"> */
</span><span class="cx">
</span><ins>+const CompactModeMaxWidth = 241;
+
</ins><span class="cx"> class MediaController
</span><span class="cx"> {
</span><span class="cx">
</span><span class="lines">@@ -59,6 +61,10 @@
</span><span class="cx"> return traits | LayoutTraits.Fullscreen;
</span><span class="cx"> } else if (this.media.webkitDisplayingFullscreen)
</span><span class="cx"> return traits | LayoutTraits.Fullscreen;
</span><ins>+
+ if (this._controlsWidth() <= CompactModeMaxWidth)
+ return traits | LayoutTraits.Compact;
+
</ins><span class="cx"> return traits;
</span><span class="cx"> }
</span><span class="cx">
</span><span class="lines">@@ -77,9 +83,10 @@
</span><span class="cx">
</span><span class="cx"> handleEvent(event)
</span><span class="cx"> {
</span><del>- if (event.type === "resize" && event.currentTarget === this.shadowRoot)
</del><ins>+ if (event.type === "resize" && event.currentTarget === this.shadowRoot) {
</ins><span class="cx"> this._updateControlsSize();
</span><del>- else if (event.type === "click" && event.currentTarget === this.container)
</del><ins>+ this._updateControlsIfNeeded();
+ } else if (event.type === "click" && event.currentTarget === this.container)
</ins><span class="cx"> this._containerWasClicked(event);
</span><span class="cx"> else if (event.currentTarget === this.media) {
</span><span class="cx"> this._updateControlsIfNeeded();
</span><span class="lines">@@ -117,7 +124,8 @@
</span><span class="cx"> this.controls.controlsBar.autoHideDelay = this.shadowRoot.host.dataset.autoHideDelay;
</span><span class="cx">
</span><span class="cx"> if (previousControls) {
</span><del>- this.controls.fadeIn();
</del><ins>+ if (this._shouldFadeBetweenControls(previousControls, this.controls))
+ this.controls.fadeIn();
</ins><span class="cx"> this.container.replaceChild(this.controls.element, previousControls.element);
</span><span class="cx"> this.controls.usesLTRUserInterfaceLayoutDirection = previousControls.usesLTRUserInterfaceLayoutDirection;
</span><span class="cx"> } else
</span><span class="lines">@@ -130,12 +138,25 @@
</span><span class="cx"> }, this);
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+ _shouldFadeBetweenControls(previousControls, newControls)
+ {
+ // We don't fade when toggling between the various macOS inline modes.
+ if (previousControls instanceof MacOSInlineMediaControls && newControls instanceof MacOSInlineMediaControls)
+ return false;
+ return true;
+ }
+
</ins><span class="cx"> _updateControlsSize()
</span><span class="cx"> {
</span><del>- this.controls.width = Math.round(this.media.offsetWidth * this.controls.scaleFactor);
</del><ins>+ this.controls.width = this._controlsWidth();
</ins><span class="cx"> this.controls.height = Math.round(this.media.offsetHeight * this.controls.scaleFactor);
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+ _controlsWidth()
+ {
+ return Math.round(this.media.offsetWidth * (this.controls ? this.controls.scaleFactor : 1));
+ }
+
</ins><span class="cx"> _returnMediaLayerToInlineIfNeeded()
</span><span class="cx"> {
</span><span class="cx"> if (this.host)
</span><span class="lines">@@ -149,6 +170,8 @@
</span><span class="cx"> return IOSInlineMediaControls;
</span><span class="cx"> if (layoutTraits & LayoutTraits.Fullscreen)
</span><span class="cx"> return MacOSFullscreenMediaControls;
</span><ins>+ if (layoutTraits & LayoutTraits.Compact)
+ return MacOSCompactInlineMediaControls;
</ins><span class="cx"> return MacOSInlineMediaControls;
</span><span class="cx"> }
</span><span class="cx">
</span></span></pre></div>
<a id="trunkSourceWebCoreWebCorexcodeprojprojectpbxproj"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/WebCore.xcodeproj/project.pbxproj (211589 => 211590)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/WebCore.xcodeproj/project.pbxproj 2017-02-02 21:24:11 UTC (rev 211589)
+++ trunk/Source/WebCore/WebCore.xcodeproj/project.pbxproj 2017-02-02 21:25:19 UTC (rev 211590)
</span><span class="lines">@@ -10096,7 +10096,6 @@
</span><span class="cx"> 716FA0D81DB26591007323CC /* airplay-button.css */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.css; path = "airplay-button.css"; sourceTree = "<group>"; };
</span><span class="cx"> 716FA0D91DB26591007323CC /* airplay-button.js */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.javascript; path = "airplay-button.js"; sourceTree = "<group>"; };
</span><span class="cx"> 716FA0DA1DB26591007323CC /* airplay-placard.js */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.javascript; path = "airplay-placard.js"; sourceTree = "<group>"; };
</span><del>- 716FA0DB1DB26591007323CC /* aspect-ratio-button.js */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.javascript; path = "aspect-ratio-button.js"; sourceTree = "<group>"; };
</del><span class="cx"> 716FA0DC1DB26591007323CC /* button.css */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.css; path = button.css; sourceTree = "<group>"; };
</span><span class="cx"> 716FA0DD1DB26591007323CC /* button.js */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.javascript; path = button.js; sourceTree = "<group>"; };
</span><span class="cx"> 716FA0DE1DB26591007323CC /* buttons-container.css */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.css; path = "buttons-container.css"; sourceTree = "<group>"; };
</span><span class="lines">@@ -10137,6 +10136,22 @@
</span><span class="cx"> 7177E2461DB80D2F00919A0B /* media-controller-support.js */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.javascript; path = "media-controller-support.js"; sourceTree = "<group>"; };
</span><span class="cx"> 7177E2471DB80D2F00919A0B /* mute-support.js */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.javascript; path = "mute-support.js"; sourceTree = "<group>"; };
</span><span class="cx"> 7177E2481DB80D2F00919A0B /* start-support.js */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.javascript; path = "start-support.js"; sourceTree = "<group>"; };
</span><ins>+ 717F618B1E43D61A00F37024 /* controls-bar.css */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.css; path = "controls-bar.css"; sourceTree = "<group>"; };
+ 717F618C1E43D61A00F37024 /* macos-compact-inline-media-controls.css */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.css; path = "macos-compact-inline-media-controls.css"; sourceTree = "<group>"; };
+ 717F618D1E43D61A00F37024 /* macos-compact-inline-media-controls.js */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.javascript; path = "macos-compact-inline-media-controls.js"; sourceTree = "<group>"; };
+ 717F618E1E43D61A00F37024 /* text-tracks.css */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.css; path = "text-tracks.css"; sourceTree = "<group>"; };
+ 717F618F1E43D66500F37024 /* enter-fullscreen-compact@1x.png */ = {isa = PBXFileReference; lastKnownFileType = image.png; path = "enter-fullscreen-compact@1x.png"; sourceTree = "<group>"; };
+ 717F61901E43D66500F37024 /* enter-fullscreen-compact@2x.png */ = {isa = PBXFileReference; lastKnownFileType = image.png; path = "enter-fullscreen-compact@2x.png"; sourceTree = "<group>"; };
+ 717F61911E43D66500F37024 /* interval-skip-back-compact@1x.png */ = {isa = PBXFileReference; lastKnownFileType = image.png; path = "interval-skip-back-compact@1x.png"; sourceTree = "<group>"; };
+ 717F61921E43D66500F37024 /* interval-skip-back-compact@2x.png */ = {isa = PBXFileReference; lastKnownFileType = image.png; path = "interval-skip-back-compact@2x.png"; sourceTree = "<group>"; };
+ 717F61931E43D66500F37024 /* pause-compact@1x.png */ = {isa = PBXFileReference; lastKnownFileType = image.png; path = "pause-compact@1x.png"; sourceTree = "<group>"; };
+ 717F61941E43D66500F37024 /* pause-compact@2x.png */ = {isa = PBXFileReference; lastKnownFileType = image.png; path = "pause-compact@2x.png"; sourceTree = "<group>"; };
+ 717F61951E43D66500F37024 /* pip-in-fullscreen@1x.png */ = {isa = PBXFileReference; lastKnownFileType = image.png; path = "pip-in-fullscreen@1x.png"; sourceTree = "<group>"; };
+ 717F61961E43D66500F37024 /* pip-in-fullscreen@2x.png */ = {isa = PBXFileReference; lastKnownFileType = image.png; path = "pip-in-fullscreen@2x.png"; sourceTree = "<group>"; };
+ 717F61971E43D66500F37024 /* play-compact@1x.png */ = {isa = PBXFileReference; lastKnownFileType = image.png; path = "play-compact@1x.png"; sourceTree = "<group>"; };
+ 717F61981E43D66500F37024 /* play-compact@2x.png */ = {isa = PBXFileReference; lastKnownFileType = image.png; path = "play-compact@2x.png"; sourceTree = "<group>"; };
+ 717F61991E43D66500F37024 /* volume-compact@1x.png */ = {isa = PBXFileReference; lastKnownFileType = image.png; path = "volume-compact@1x.png"; sourceTree = "<group>"; };
+ 717F619A1E43D66500F37024 /* volume-compact@2x.png */ = {isa = PBXFileReference; lastKnownFileType = image.png; path = "volume-compact@2x.png"; sourceTree = "<group>"; };
</ins><span class="cx"> 717F90571DC40ED60006F520 /* volume-support.js */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.javascript; path = "volume-support.js"; sourceTree = "<group>"; };
</span><span class="cx"> 717F90581DC4BB600006F520 /* airplay-support.js */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.javascript; path = "airplay-support.js"; sourceTree = "<group>"; };
</span><span class="cx"> 718675431DF101AD0033D7F3 /* seek-button.js */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.javascript; path = "seek-button.js"; sourceTree = "<group>"; };
</span><span class="lines">@@ -18306,11 +18321,11 @@
</span><span class="cx"> 716FA0D81DB26591007323CC /* airplay-button.css */,
</span><span class="cx"> 716FA0D91DB26591007323CC /* airplay-button.js */,
</span><span class="cx"> 716FA0DA1DB26591007323CC /* airplay-placard.js */,
</span><del>- 716FA0DB1DB26591007323CC /* aspect-ratio-button.js */,
</del><span class="cx"> 716FA0DC1DB26591007323CC /* button.css */,
</span><span class="cx"> 716FA0DD1DB26591007323CC /* button.js */,
</span><span class="cx"> 716FA0DE1DB26591007323CC /* buttons-container.css */,
</span><span class="cx"> 716FA0DF1DB26591007323CC /* buttons-container.js */,
</span><ins>+ 717F618B1E43D61A00F37024 /* controls-bar.css */,
</ins><span class="cx"> 710FA74B1DEE576D004C715E /* controls-bar.js */,
</span><span class="cx"> 716FA0E01DB26591007323CC /* forward-button.js */,
</span><span class="cx"> 716FA0E11DB26591007323CC /* fullscreen-button.js */,
</span><span class="lines">@@ -18322,6 +18337,8 @@
</span><span class="cx"> 7152CEC21DD2235300FD5962 /* ios-inline-media-controls.js */,
</span><span class="cx"> 716FA0E51DB26591007323CC /* layout-item.js */,
</span><span class="cx"> 716FA0E61DB26591007323CC /* layout-node.js */,
</span><ins>+ 717F618C1E43D61A00F37024 /* macos-compact-inline-media-controls.css */,
+ 717F618D1E43D61A00F37024 /* macos-compact-inline-media-controls.js */,
</ins><span class="cx"> 712157C01DCCCA0700AA7A92 /* macos-fullscreen-media-controls.css */,
</span><span class="cx"> 712157C11DCCCA0700AA7A92 /* macos-fullscreen-media-controls.js */,
</span><span class="cx"> 716FA0E71DB26591007323CC /* macos-inline-media-controls.css */,
</span><span class="lines">@@ -18347,6 +18364,7 @@
</span><span class="cx"> 716FA0FA1DB26591007323CC /* start-button.js */,
</span><span class="cx"> 718C7F561DD385C500B733C8 /* status-label.css */,
</span><span class="cx"> 718C7F571DD385C500B733C8 /* status-label.js */,
</span><ins>+ 717F618E1E43D61A00F37024 /* text-tracks.css */,
</ins><span class="cx"> 716FA0FB1DB26591007323CC /* time-control.js */,
</span><span class="cx"> 716FA0FC1DB26591007323CC /* time-label.css */,
</span><span class="cx"> 716FA0FD1DB26591007323CC /* time-label.js */,
</span><span class="lines">@@ -18454,6 +18472,8 @@
</span><span class="cx"> 71D6AA931DA4EAF700B23969 /* airplay-placard@2x.png */,
</span><span class="cx"> 71D6AA941DA4EAF700B23969 /* airplay@1x.png */,
</span><span class="cx"> 71D6AA951DA4EAF700B23969 /* airplay@2x.png */,
</span><ins>+ 717F618F1E43D66500F37024 /* enter-fullscreen-compact@1x.png */,
+ 717F61901E43D66500F37024 /* enter-fullscreen-compact@2x.png */,
</ins><span class="cx"> 71D6AA961DA4EAF700B23969 /* enter-fullscreen@1x.png */,
</span><span class="cx"> 71D6AA971DA4EAF700B23969 /* enter-fullscreen@2x.png */,
</span><span class="cx"> 71D6AA981DA4EAF700B23969 /* exit-fullscreen@1x.png */,
</span><span class="lines">@@ -18460,6 +18480,8 @@
</span><span class="cx"> 71D6AA991DA4EAF700B23969 /* exit-fullscreen@2x.png */,
</span><span class="cx"> 71D6AA9A1DA4EAF700B23969 /* forward@1x.png */,
</span><span class="cx"> 71D6AA9B1DA4EAF700B23969 /* forward@2x.png */,
</span><ins>+ 717F61911E43D66500F37024 /* interval-skip-back-compact@1x.png */,
+ 717F61921E43D66500F37024 /* interval-skip-back-compact@2x.png */,
</ins><span class="cx"> 71D6AA9C1DA4EAF700B23969 /* interval-skip-back@1x.png */,
</span><span class="cx"> 71D6AA9D1DA4EAF700B23969 /* interval-skip-back@2x.png */,
</span><span class="cx"> 714F5B091DEE5F9E0075BD17 /* invalid-placard@1x.png */,
</span><span class="lines">@@ -18468,14 +18490,20 @@
</span><span class="cx"> 71D6AA9F1DA4EAF700B23969 /* media-selection-fullscreen@2x.png */,
</span><span class="cx"> 71D6AAA01DA4EAF700B23969 /* media-selection@1x.png */,
</span><span class="cx"> 71D6AAA11DA4EAF700B23969 /* media-selection@2x.png */,
</span><ins>+ 717F61931E43D66500F37024 /* pause-compact@1x.png */,
+ 717F61941E43D66500F37024 /* pause-compact@2x.png */,
</ins><span class="cx"> 71D6AAA41DA4EAF700B23969 /* pause-fullscreen@1x.png */,
</span><span class="cx"> 71D6AAA51DA4EAF700B23969 /* pause-fullscreen@2x.png */,
</span><span class="cx"> 71D6AAA61DA4EAF700B23969 /* pause@1x.png */,
</span><span class="cx"> 71D6AAA71DA4EAF700B23969 /* pause@2x.png */,
</span><ins>+ 717F61951E43D66500F37024 /* pip-in-fullscreen@1x.png */,
+ 717F61961E43D66500F37024 /* pip-in-fullscreen@2x.png */,
</ins><span class="cx"> 71D6AAA81DA4EAF700B23969 /* pip-in@1x.png */,
</span><span class="cx"> 71D6AAA91DA4EAF700B23969 /* pip-in@2x.png */,
</span><span class="cx"> 71D6AAAA1DA4EAF700B23969 /* pip-placard@1x.png */,
</span><span class="cx"> 71D6AAAB1DA4EAF700B23969 /* pip-placard@2x.png */,
</span><ins>+ 717F61971E43D66500F37024 /* play-compact@1x.png */,
+ 717F61981E43D66500F37024 /* play-compact@2x.png */,
</ins><span class="cx"> 71D6AAAC1DA4EAF700B23969 /* play-fullscreen@1x.png */,
</span><span class="cx"> 71D6AAAD1DA4EAF700B23969 /* play-fullscreen@2x.png */,
</span><span class="cx"> 71D6AAAE1DA4EAF700B23969 /* play@1x.png */,
</span><span class="lines">@@ -18488,6 +18516,8 @@
</span><span class="cx"> 71D6AAB71DA4EAF700B23969 /* scale-to-fit@2x.png */,
</span><span class="cx"> 71D6AABC1DA4EAF700B23969 /* start@1x.png */,
</span><span class="cx"> 71D6AABD1DA4EAF700B23969 /* start@2x.png */,
</span><ins>+ 717F61991E43D66500F37024 /* volume-compact@1x.png */,
+ 717F619A1E43D66500F37024 /* volume-compact@2x.png */,
</ins><span class="cx"> 71D6AABE1DA4EAF700B23969 /* volume-mute@1x.png */,
</span><span class="cx"> 71D6AABF1DA4EAF700B23969 /* volume-mute@2x.png */,
</span><span class="cx"> 71D6AAC01DA4EAF700B23969 /* volume@1x.png */,
</span></span></pre>
</div>
</div>
</body>
</html>