<!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>[213115] 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/213115">213115</a></dd>
<dt>Author</dt> <dd>graouts@webkit.org</dd>
<dt>Date</dt> <dd>2017-02-27 19:24:37 -0800 (Mon, 27 Feb 2017)</dd>
</dl>

<h3>Log Message</h3>
<pre>[Modern Media Controls] Use compact mode by default on macOS
https://bugs.webkit.org/show_bug.cgi?id=168958
&lt;rdar://problem/30748638&gt;

Reviewed by Jon Lee.

Source/WebCore:

We now use the compact layout mode by default on macOS.

* Modules/modern-media-controls/controls/layout-item.js: Remove the ReducedPadding trait.
* Modules/modern-media-controls/controls/macos-compact-inline-media-controls.css:
(.media-controls.mac.inline.compact .time-label,): Vertically align the time label with
the scrubber in compact mode.
(.media-controls.mac.inline.compact .scrubber.slider): Correctly position the scrubber in
compact mode so that it's vertically aligned.
* Modules/modern-media-controls/controls/macos-inline-media-controls.js:
(MacOSInlineMediaControls.prototype.layoutTraitsDidChange): Remove handling of tight and
reduced padding traits since these do not apply to macOS anymore. We also notify the
scrubber of a layout trait change so that it may adjust its height.
* Modules/modern-media-controls/controls/scrubber.js:
(Scrubber):
(Scrubber.prototype.layoutTraitsDidChange): Adjust the height of the scrubber to match
compact layout traits.
* Modules/modern-media-controls/controls/time-control.js:
(TimeControl.prototype.get isSufficientlyWide): Adjust the minimum scrubber width for
TimeControl visibility to match compact layout traits.
* Modules/modern-media-controls/media/media-controller.js:
(MediaController.prototype.get layoutTraits): Use the compact layout trait by default
on macOS and make the tight padding specific to iOS.

LayoutTests:

Rebaseline tests to account for compact mode being the default mode for macOS
and remove tests that would check dynamically applying compact mode at some
threshold and the reduced padding mode.

* media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-compact-expected.txt:
* media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-compact.html:
* media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-reduced-padding-expected.txt: Removed.
* media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-reduced-padding.html: Removed.
* media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-tight-padding-expected.txt: Removed.
* media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-tight-padding.html: Removed.
* media/modern-media-controls/media-controller/media-controller-compact.html:
* media/modern-media-controls/media-controller/media-controller-fullscreen-change-expected.txt:
* media/modern-media-controls/media-controller/media-controller-fullscreen-change.html:
* media/modern-media-controls/media-controller/media-controller-reduced-padding-expected.txt: Removed.
* media/modern-media-controls/media-controller/media-controller-reduced-padding.html: Removed.
* media/modern-media-controls/media-controller/media-controller-toggle-compact-mode-expected.txt: Removed.
* media/modern-media-controls/media-controller/media-controller-toggle-compact-mode.html: Removed.
* platform/mac/TestExpectations:</pre>

<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsChangeLog">trunk/LayoutTests/ChangeLog</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolsiosinlinemediacontrolsiosinlinemediacontrolstightpaddinghtml">trunk/LayoutTests/media/modern-media-controls/ios-inline-media-controls/ios-inline-media-controls-tight-padding.html</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolsmacosinlinemediacontrolsmacosinlinemediacontrolscompactexpectedtxt">trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-compact-expected.txt</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolsmacosinlinemediacontrolsmacosinlinemediacontrolscompacthtml">trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-compact.html</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolsmediacontrollermediacontrollercompacthtml">trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-compact.html</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolsmediacontrollermediacontrollerfullscreenchangeexpectedtxt">trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-fullscreen-change-expected.txt</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolsmediacontrollermediacontrollerfullscreenchangehtml">trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-fullscreen-change.html</a></li>
<li><a href="#trunkLayoutTestsplatformmacTestExpectations">trunk/LayoutTests/platform/mac/TestExpectations</a></li>
<li><a href="#trunkSourceWebCoreChangeLog">trunk/Source/WebCore/ChangeLog</a></li>
<li><a href="#trunkSourceWebCoreModulesmodernmediacontrolscontrolslayoutitemjs">trunk/Source/WebCore/Modules/modern-media-controls/controls/layout-item.js</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="#trunkSourceWebCoreModulesmodernmediacontrolscontrolsmacosinlinemediacontrolsjs">trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-inline-media-controls.js</a></li>
<li><a href="#trunkSourceWebCoreModulesmodernmediacontrolscontrolsscrubberjs">trunk/Source/WebCore/Modules/modern-media-controls/controls/scrubber.js</a></li>
<li><a href="#trunkSourceWebCoreModulesmodernmediacontrolscontrolstimecontroljs">trunk/Source/WebCore/Modules/modern-media-controls/controls/time-control.js</a></li>
<li><a href="#trunkSourceWebCoreModulesmodernmediacontrolsmediamediacontrollerjs">trunk/Source/WebCore/Modules/modern-media-controls/media/media-controller.js</a></li>
</ul>

<h3>Removed Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolsmacosinlinemediacontrolsmacosinlinemediacontrolsreducedpaddingexpectedtxt">trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-reduced-padding-expected.txt</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolsmacosinlinemediacontrolsmacosinlinemediacontrolsreducedpaddinghtml">trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-reduced-padding.html</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolsmacosinlinemediacontrolsmacosinlinemediacontrolstightpaddingexpectedtxt">trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-tight-padding-expected.txt</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolsmacosinlinemediacontrolsmacosinlinemediacontrolstightpaddinghtml">trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-tight-padding.html</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolsmediacontrollermediacontrollerreducedpaddingexpectedtxt">trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-reduced-padding-expected.txt</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolsmediacontrollermediacontrollerreducedpaddinghtml">trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-reduced-padding.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>
</ul>

</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkLayoutTestsChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/ChangeLog (213114 => 213115)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/ChangeLog        2017-02-28 02:24:56 UTC (rev 213114)
+++ trunk/LayoutTests/ChangeLog        2017-02-28 03:24:37 UTC (rev 213115)
</span><span class="lines">@@ -1,5 +1,32 @@
</span><span class="cx"> 2017-02-27  Antoine Quint  &lt;graouts@apple.com&gt;
</span><span class="cx"> 
</span><ins>+        [Modern Media Controls] Use compact mode by default on macOS
+        https://bugs.webkit.org/show_bug.cgi?id=168958
+        &lt;rdar://problem/30748638&gt;
+
+        Reviewed by Jon Lee.
+
+        Rebaseline tests to account for compact mode being the default mode for macOS
+        and remove tests that would check dynamically applying compact mode at some
+        threshold and the reduced padding mode.
+
+        * media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-compact-expected.txt:
+        * media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-compact.html:
+        * media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-reduced-padding-expected.txt: Removed.
+        * media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-reduced-padding.html: Removed.
+        * media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-tight-padding-expected.txt: Removed.
+        * media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-tight-padding.html: Removed.
+        * media/modern-media-controls/media-controller/media-controller-compact.html:
+        * media/modern-media-controls/media-controller/media-controller-fullscreen-change-expected.txt:
+        * media/modern-media-controls/media-controller/media-controller-fullscreen-change.html:
+        * media/modern-media-controls/media-controller/media-controller-reduced-padding-expected.txt: Removed.
+        * media/modern-media-controls/media-controller/media-controller-reduced-padding.html: Removed.
+        * media/modern-media-controls/media-controller/media-controller-toggle-compact-mode-expected.txt: Removed.
+        * media/modern-media-controls/media-controller/media-controller-toggle-compact-mode.html: Removed.
+        * platform/mac/TestExpectations:
+
+2017-02-27  Antoine Quint  &lt;graouts@apple.com&gt;
+
</ins><span class="cx">         [Modern Media Controls] Adhere to tight padding on iOS
</span><span class="cx">         https://bugs.webkit.org/show_bug.cgi?id=168949
</span><span class="cx">         &lt;rdar://problem/30746164&gt;
</span></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolsiosinlinemediacontrolsiosinlinemediacontrolstightpaddinghtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/media/modern-media-controls/ios-inline-media-controls/ios-inline-media-controls-tight-padding.html (213114 => 213115)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/ios-inline-media-controls/ios-inline-media-controls-tight-padding.html        2017-02-28 02:24:56 UTC (rev 213114)
+++ trunk/LayoutTests/media/modern-media-controls/ios-inline-media-controls/ios-inline-media-controls-tight-padding.html        2017-02-28 03:24:37 UTC (rev 213115)
</span><span class="lines">@@ -6,7 +6,7 @@
</span><span class="cx"> 
</span><span class="cx"> description(&quot;Testing &lt;code&gt;IOSInlineMediaControls&lt;/code&gt; with tight padding.&quot;);
</span><span class="cx"> 
</span><del>-const mediaControls = new MacOSInlineMediaControls({ width: 400 });
</del><ins>+const mediaControls = new IOSInlineMediaControls({ width: 400 });
</ins><span class="cx"> mediaControls.layoutTraits = LayoutTraits.iOS | LayoutTraits.TightPadding;
</span><span class="cx"> 
</span><span class="cx"> shouldBe(&quot;mediaControls.leftContainer.leftMargin&quot;, &quot;12&quot;);
</span></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolsmacosinlinemediacontrolsmacosinlinemediacontrolscompactexpectedtxt"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-compact-expected.txt (213114 => 213115)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-compact-expected.txt        2017-02-28 02:24:56 UTC (rev 213114)
+++ trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-compact-expected.txt        2017-02-28 03:24:37 UTC (rev 213115)
</span><span class="lines">@@ -4,7 +4,6 @@
</span><span class="cx"> 
</span><span class="cx"> 
</span><span class="cx"> PASS mediaControls.element.classList.contains('compact') is true
</span><del>-PASS mediaControls.rightContainer.buttons is [mediaControls.muteButton, mediaControls.fullscreenButton]
</del><span class="cx"> PASS mediaControls.leftContainer.leftMargin is 8
</span><span class="cx"> PASS mediaControls.leftContainer.rightMargin is 12
</span><span class="cx"> PASS mediaControls.leftContainer.buttonMargin is 12
</span></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolsmacosinlinemediacontrolsmacosinlinemediacontrolscompacthtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-compact.html (213114 => 213115)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-compact.html        2017-02-28 02:24:56 UTC (rev 213114)
+++ trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-compact.html        2017-02-28 03:24:37 UTC (rev 213115)
</span><span class="lines">@@ -10,7 +10,6 @@
</span><span class="cx"> mediaControls.layoutTraits = LayoutTraits.macOS | LayoutTraits.Compact;
</span><span class="cx"> 
</span><span class="cx"> shouldBeTrue(&quot;mediaControls.element.classList.contains('compact')&quot;);
</span><del>-shouldBe(&quot;mediaControls.rightContainer.buttons&quot;, &quot;[mediaControls.muteButton, mediaControls.fullscreenButton]&quot;);
</del><span class="cx"> shouldBe(&quot;mediaControls.leftContainer.leftMargin&quot;, &quot;8&quot;);
</span><span class="cx"> shouldBe(&quot;mediaControls.leftContainer.rightMargin&quot;, &quot;12&quot;);
</span><span class="cx"> shouldBe(&quot;mediaControls.leftContainer.buttonMargin&quot;, &quot;12&quot;);
</span></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolsmacosinlinemediacontrolsmacosinlinemediacontrolsreducedpaddingexpectedtxt"></a>
<div class="delfile"><h4>Deleted: trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-reduced-padding-expected.txt (213114 => 213115)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-reduced-padding-expected.txt        2017-02-28 02:24:56 UTC (rev 213114)
+++ trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-reduced-padding-expected.txt        2017-02-28 03:24:37 UTC (rev 213115)
</span><span class="lines">@@ -1,16 +0,0 @@
</span><del>-Testing MacOSInlineMediaControls with reduced padding.
-
-On success, you will see a series of &quot;PASS&quot; messages, followed by &quot;TEST COMPLETE&quot;.
-
-
-PASS mediaControls.leftContainer.leftMargin is 12
-PASS mediaControls.leftContainer.rightMargin  is 16
-PASS mediaControls.leftContainer.buttonMargin is 16
-PASS mediaControls.rightContainer.leftMargin  is 0
-PASS mediaControls.rightContainer.rightMargin is 12
-PASS mediaControls.rightContainer.buttonMargin  is 16
-
-PASS successfullyParsed is true
-
-TEST COMPLETE
-
</del></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolsmacosinlinemediacontrolsmacosinlinemediacontrolsreducedpaddinghtml"></a>
<div class="delfile"><h4>Deleted: trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-reduced-padding.html (213114 => 213115)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-reduced-padding.html        2017-02-28 02:24:56 UTC (rev 213114)
+++ trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-reduced-padding.html        2017-02-28 03:24:37 UTC (rev 213115)
</span><span class="lines">@@ -1,22 +0,0 @@
</span><del>-&lt;script src=&quot;../../../resources/js-test-pre.js&quot;&gt;&lt;/script&gt;
-&lt;script src=&quot;../resources/media-controls-loader.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
-&lt;script src=&quot;../resources/media-controls-utils.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
-&lt;body&gt;
-&lt;script type=&quot;text/javascript&quot;&gt;
-
-description(&quot;Testing &lt;code&gt;MacOSInlineMediaControls&lt;/code&gt; with reduced padding.&quot;);
-
-const mediaControls = new MacOSInlineMediaControls({ width: 300 });
-mediaControls.layoutTraits = LayoutTraits.macOS | LayoutTraits.ReducedPadding;
-
-shouldBe(&quot;mediaControls.leftContainer.leftMargin&quot;, &quot;12&quot;);
-shouldBe(&quot;mediaControls.leftContainer.rightMargin &quot;, &quot;16&quot;);
-shouldBe(&quot;mediaControls.leftContainer.buttonMargin&quot;, &quot;16&quot;);
-shouldBe(&quot;mediaControls.rightContainer.leftMargin &quot;, &quot;0&quot;);
-shouldBe(&quot;mediaControls.rightContainer.rightMargin&quot;, &quot;12&quot;);
-shouldBe(&quot;mediaControls.rightContainer.buttonMargin &quot;, &quot;16&quot;);
-debug(&quot;&quot;);
-
-&lt;/script&gt;
-&lt;script src=&quot;../../../resources/js-test-post.js&quot;&gt;&lt;/script&gt;
-&lt;/body&gt;
</del></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolsmacosinlinemediacontrolsmacosinlinemediacontrolstightpaddingexpectedtxt"></a>
<div class="delfile"><h4>Deleted: trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-tight-padding-expected.txt (213114 => 213115)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-tight-padding-expected.txt        2017-02-28 02:24:56 UTC (rev 213114)
+++ trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-tight-padding-expected.txt        2017-02-28 03:24:37 UTC (rev 213115)
</span><span class="lines">@@ -1,16 +0,0 @@
</span><del>-Testing MacOSInlineMediaControls with tight padding.
-
-On success, you will see a series of &quot;PASS&quot; messages, followed by &quot;TEST COMPLETE&quot;.
-
-
-PASS mediaControls.leftContainer.leftMargin is 12
-PASS mediaControls.leftContainer.rightMargin  is 12
-PASS mediaControls.leftContainer.buttonMargin is 12
-PASS mediaControls.rightContainer.leftMargin  is 12
-PASS mediaControls.rightContainer.rightMargin is 12
-PASS mediaControls.rightContainer.buttonMargin  is 12
-
-PASS successfullyParsed is true
-
-TEST COMPLETE
-
</del></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolsmacosinlinemediacontrolsmacosinlinemediacontrolstightpaddinghtml"></a>
<div class="delfile"><h4>Deleted: trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-tight-padding.html (213114 => 213115)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-tight-padding.html        2017-02-28 02:24:56 UTC (rev 213114)
+++ trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-tight-padding.html        2017-02-28 03:24:37 UTC (rev 213115)
</span><span class="lines">@@ -1,22 +0,0 @@
</span><del>-&lt;script src=&quot;../../../resources/js-test-pre.js&quot;&gt;&lt;/script&gt;
-&lt;script src=&quot;../resources/media-controls-loader.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
-&lt;script src=&quot;../resources/media-controls-utils.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
-&lt;body&gt;
-&lt;script type=&quot;text/javascript&quot;&gt;
-
-description(&quot;Testing &lt;code&gt;MacOSInlineMediaControls&lt;/code&gt; with tight padding.&quot;);
-
-const mediaControls = new MacOSInlineMediaControls({ width: 400 });
-mediaControls.layoutTraits = LayoutTraits.macOS | LayoutTraits.TightPadding;
-
-shouldBe(&quot;mediaControls.leftContainer.leftMargin&quot;, &quot;12&quot;);
-shouldBe(&quot;mediaControls.leftContainer.rightMargin &quot;, &quot;12&quot;);
-shouldBe(&quot;mediaControls.leftContainer.buttonMargin&quot;, &quot;12&quot;);
-shouldBe(&quot;mediaControls.rightContainer.leftMargin &quot;, &quot;12&quot;);
-shouldBe(&quot;mediaControls.rightContainer.rightMargin&quot;, &quot;12&quot;);
-shouldBe(&quot;mediaControls.rightContainer.buttonMargin &quot;, &quot;12&quot;);
-debug(&quot;&quot;);
-
-&lt;/script&gt;
-&lt;script src=&quot;../../../resources/js-test-post.js&quot;&gt;&lt;/script&gt;
-&lt;/body&gt;
</del></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolsmediacontrollermediacontrollercompacthtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-compact.html (213114 => 213115)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-compact.html        2017-02-28 02:24:56 UTC (rev 213114)
+++ trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-compact.html        2017-02-28 03:24:37 UTC (rev 213115)
</span><span class="lines">@@ -6,8 +6,8 @@
</span><span class="cx">         position: absolute;
</span><span class="cx">         left: 0;
</span><span class="cx">         top: 0;
</span><del>-        width: 240px;
-        height: 180px;
</del><ins>+        width: 800px;
+        height: 600px;
</ins><span class="cx">     }
</span><span class="cx">     
</span><span class="cx"> &lt;/style&gt;
</span></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolsmediacontrollermediacontrollerfullscreenchangeexpectedtxt"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-fullscreen-change-expected.txt (213114 => 213115)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-fullscreen-change-expected.txt        2017-02-28 02:24:56 UTC (rev 213114)
+++ trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-fullscreen-change-expected.txt        2017-02-28 03:24:37 UTC (rev 213115)
</span><span class="lines">@@ -8,7 +8,7 @@
</span><span class="cx"> PASS mediaController.controls instanceof MacOSFullscreenMediaControls is true
</span><span class="cx"> 
</span><span class="cx"> Media exited fullscreen
</span><del>-PASS mediaController.layoutTraits is LayoutTraits.macOS
</del><ins>+PASS mediaController.layoutTraits is LayoutTraits.macOS | LayoutTraits.Compact
</ins><span class="cx"> PASS mediaController.controls instanceof MacOSInlineMediaControls is true
</span><span class="cx"> 
</span><span class="cx"> PASS successfullyParsed is true
</span></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolsmediacontrollermediacontrollerfullscreenchangehtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-fullscreen-change.html (213114 => 213115)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-fullscreen-change.html        2017-02-28 02:24:56 UTC (rev 213114)
+++ trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-fullscreen-change.html        2017-02-28 03:24:37 UTC (rev 213115)
</span><span class="lines">@@ -46,7 +46,7 @@
</span><span class="cx">         media.webkitExitFullscreen()
</span><span class="cx">     } else {
</span><span class="cx">         debug(&quot;Media exited fullscreen&quot;);
</span><del>-        shouldBe(&quot;mediaController.layoutTraits&quot;, &quot;LayoutTraits.macOS&quot;);
</del><ins>+        shouldBe(&quot;mediaController.layoutTraits&quot;, &quot;LayoutTraits.macOS | LayoutTraits.Compact&quot;);
</ins><span class="cx">         shouldBeTrue(&quot;mediaController.controls instanceof MacOSInlineMediaControls&quot;);
</span><span class="cx"> 
</span><span class="cx">         debug(&quot;&quot;);
</span></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolsmediacontrollermediacontrollerreducedpaddingexpectedtxt"></a>
<div class="delfile"><h4>Deleted: trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-reduced-padding-expected.txt (213114 => 213115)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-reduced-padding-expected.txt        2017-02-28 02:24:56 UTC (rev 213114)
+++ trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-reduced-padding-expected.txt        2017-02-28 03:24:37 UTC (rev 213115)
</span><span class="lines">@@ -1,10 +0,0 @@
</span><del>-Testing the MediaController sizing behavior with reduced padding mode.
-
-On success, you will see a series of &quot;PASS&quot; messages, followed by &quot;TEST COMPLETE&quot;.
-
-
-PASS !!(mediaController.controls.layoutTraits &amp; LayoutTraits.ReducedPadding) became true
-PASS successfullyParsed is true
-
-TEST COMPLETE
-
</del></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolsmediacontrollermediacontrollerreducedpaddinghtml"></a>
<div class="delfile"><h4>Deleted: trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-reduced-padding.html (213114 => 213115)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-reduced-padding.html        2017-02-28 02:24:56 UTC (rev 213114)
+++ trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-reduced-padding.html        2017-02-28 03:24:37 UTC (rev 213115)
</span><span class="lines">@@ -1,31 +0,0 @@
</span><del>-&lt;script src=&quot;../../../resources/js-test-pre.js&quot;&gt;&lt;/script&gt;
-&lt;script src=&quot;../resources/media-controls-loader.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
-&lt;style type=&quot;text/css&quot; media=&quot;screen&quot;&gt;
-    
-    video, #shadow {
-        position: absolute;
-        left: 0;
-        top: 0;
-        width: 300px;
-        height: 225px;
-    }
-    
-&lt;/style&gt;
-&lt;body&gt;
-&lt;video src=&quot;../../content/test.mp4&quot; controls autoplay&gt;&lt;/video&gt;
-&lt;div id=&quot;shadow&quot;&gt;&lt;/div&gt;
-&lt;script type=&quot;text/javascript&quot;&gt;
-
-window.jsTestIsAsync = true;
-
-description(&quot;Testing the &lt;code&gt;MediaController&lt;/code&gt; sizing behavior with reduced padding mode.&quot;);
-
-const shadowRoot = document.querySelector(&quot;div#shadow&quot;).attachShadow({ mode: &quot;open&quot; });
-const media = document.querySelector(&quot;video&quot;);
-const mediaController = createControls(shadowRoot, media, null);
-
-shouldBecomeEqual(&quot;!!(mediaController.controls.layoutTraits &amp; LayoutTraits.ReducedPadding)&quot;, &quot;true&quot;, finishJSTest);
-
-&lt;/script&gt;
-&lt;script src=&quot;../../../resources/js-test-post.js&quot;&gt;&lt;/script&gt;
-&lt;/body&gt;
</del></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolsmediacontrollermediacontrollertogglecompactmodeexpectedtxt"></a>
<div class="delfile"><h4>Deleted: trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-toggle-compact-mode-expected.txt (213114 => 213115)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-toggle-compact-mode-expected.txt        2017-02-28 02:24:56 UTC (rev 213114)
+++ trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-toggle-compact-mode-expected.txt        2017-02-28 03:24:37 UTC (rev 213115)
</span><span class="lines">@@ -1,18 +0,0 @@
</span><del>-Testing we toggle compact mode as we move past the threshold.
-
-On success, you will see a series of &quot;PASS&quot; messages, followed by &quot;TEST COMPLETE&quot;.
-
-
-Controls width = 600px
-mediaControls.classList.contains(&quot;compact&quot;) = false
-
-Controls width = 241px
-mediaControls.classList.contains(&quot;compact&quot;) = true
-
-Controls width = 242px
-mediaControls.classList.contains(&quot;compact&quot;) = false
-
-PASS successfullyParsed is true
-
-TEST COMPLETE
-
</del></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolsmediacontrollermediacontrollertogglecompactmodehtml"></a>
<div class="delfile"><h4>Deleted: trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-toggle-compact-mode.html (213114 => 213115)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-toggle-compact-mode.html        2017-02-28 02:24:56 UTC (rev 213114)
+++ trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-toggle-compact-mode.html        2017-02-28 03:24:37 UTC (rev 213115)
</span><span class="lines">@@ -1,45 +0,0 @@
</span><del>-&lt;!DOCTYPE html&gt;
-&lt;script src=&quot;../../../resources/js-test-pre.js&quot;&gt;&lt;/script&gt;
-&lt;body&gt;
-&lt;video src=&quot;../../content/test.mp4&quot; style=&quot;width: 600px; height: 240px;&quot; controls autoplay&gt;&lt;/video&gt;
-&lt;script type=&quot;text/javascript&quot;&gt;
-
-window.jsTestIsAsync = true;
-
-description(&quot;Testing we toggle compact mode as we move past the threshold.&quot;);
-
-const media = document.querySelector(&quot;video&quot;);
-const shadowRoot = window.internals.shadowRoot(media);
-let mediaControls;
-
-media.addEventListener(&quot;play&quot;, event =&gt; {
-    media.pause();
-    controlsResized();
-    shadowRoot.addEventListener(&quot;resize&quot;, controlsResized);
-});
-
-let numberOfResizeEvents = 0;
-function controlsResized(event)
-{
-    window.requestAnimationFrame(() =&gt; {
-        numberOfResizeEvents++;
-        mediaControls = shadowRoot.lastElementChild.lastElementChild
-
-        debug(`Controls width = ${mediaControls.style.width}`);
-        debug(`mediaControls.classList.contains(&quot;compact&quot;) = ${mediaControls.classList.contains(&quot;compact&quot;)}`);
-        debug(&quot;&quot;);
-
-        if (numberOfResizeEvents === 1)
-            window.requestAnimationFrame(() =&gt; media.style.width = &quot;241px&quot;);
-        else if (numberOfResizeEvents === 2)
-            window.requestAnimationFrame(() =&gt; media.style.width = &quot;242px&quot;);
-        else if (numberOfResizeEvents === 3) {
-            media.remove();
-            finishJSTest();
-        }
-    });
-}
-
-&lt;/script&gt;
-&lt;script src=&quot;../../../resources/js-test-post.js&quot;&gt;&lt;/script&gt;
-&lt;/body&gt;
</del></span></pre></div>
<a id="trunkLayoutTestsplatformmacTestExpectations"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/platform/mac/TestExpectations (213114 => 213115)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/platform/mac/TestExpectations        2017-02-28 02:24:56 UTC (rev 213114)
+++ trunk/LayoutTests/platform/mac/TestExpectations        2017-02-28 03:24:37 UTC (rev 213115)
</span><span class="lines">@@ -1477,6 +1477,7 @@
</span><span class="cx"> media/modern-media-controls/ios-inline-media-controls/ios-inline-media-controls-audio-background.html [ Skip ]
</span><span class="cx"> media/modern-media-controls/media-controller/media-controller-ios-only-enable-tap-gesture-recognizer-with-fades-when-idle.html [ Skip ]
</span><span class="cx"> media/modern-media-controls/media-controller/media-controller-ios-do-not-hide-controls-when-tapping-button.html [ Skip ]
</span><ins>+media/modern-media-controls/media-controller/media-controller-tight-padding.html [ Skip ]
</ins><span class="cx"> 
</span><span class="cx"> # This one always times out on the bots, cannot reproduce locally.
</span><span class="cx"> webkit.org/b/165234 media/modern-media-controls/audio/audio-controls-buttons.html [ Skip ]
</span></span></pre></div>
<a id="trunkSourceWebCoreChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/ChangeLog (213114 => 213115)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/ChangeLog        2017-02-28 02:24:56 UTC (rev 213114)
+++ trunk/Source/WebCore/ChangeLog        2017-02-28 03:24:37 UTC (rev 213115)
</span><span class="lines">@@ -1,5 +1,36 @@
</span><span class="cx"> 2017-02-27  Antoine Quint  &lt;graouts@apple.com&gt;
</span><span class="cx"> 
</span><ins>+        [Modern Media Controls] Use compact mode by default on macOS
+        https://bugs.webkit.org/show_bug.cgi?id=168958
+        &lt;rdar://problem/30748638&gt;
+
+        Reviewed by Jon Lee.
+
+        We now use the compact layout mode by default on macOS.
+
+        * Modules/modern-media-controls/controls/layout-item.js: Remove the ReducedPadding trait.
+        * Modules/modern-media-controls/controls/macos-compact-inline-media-controls.css: 
+        (.media-controls.mac.inline.compact .time-label,): Vertically align the time label with
+        the scrubber in compact mode.
+        (.media-controls.mac.inline.compact .scrubber.slider): Correctly position the scrubber in
+        compact mode so that it's vertically aligned.
+        * Modules/modern-media-controls/controls/macos-inline-media-controls.js:
+        (MacOSInlineMediaControls.prototype.layoutTraitsDidChange): Remove handling of tight and
+        reduced padding traits since these do not apply to macOS anymore. We also notify the
+        scrubber of a layout trait change so that it may adjust its height.
+        * Modules/modern-media-controls/controls/scrubber.js:
+        (Scrubber):
+        (Scrubber.prototype.layoutTraitsDidChange): Adjust the height of the scrubber to match
+        compact layout traits.
+        * Modules/modern-media-controls/controls/time-control.js:
+        (TimeControl.prototype.get isSufficientlyWide): Adjust the minimum scrubber width for
+        TimeControl visibility to match compact layout traits.
+        * Modules/modern-media-controls/media/media-controller.js:
+        (MediaController.prototype.get layoutTraits): Use the compact layout trait by default
+        on macOS and make the tight padding specific to iOS.
+
+2017-02-27  Antoine Quint  &lt;graouts@apple.com&gt;
+
</ins><span class="cx">         [Modern Media Controls] Adhere to tight padding on iOS
</span><span class="cx">         https://bugs.webkit.org/show_bug.cgi?id=168949
</span><span class="cx">         &lt;rdar://problem/30746164&gt;
</span></span></pre></div>
<a id="trunkSourceWebCoreModulesmodernmediacontrolscontrolslayoutitemjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/Modules/modern-media-controls/controls/layout-item.js (213114 => 213115)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/Modules/modern-media-controls/controls/layout-item.js        2017-02-28 02:24:56 UTC (rev 213114)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/layout-item.js        2017-02-28 03:24:37 UTC (rev 213115)
</span><span class="lines">@@ -29,8 +29,7 @@
</span><span class="cx">     iOS            : 1 &lt;&lt; 1,
</span><span class="cx">     Fullscreen     : 1 &lt;&lt; 2,
</span><span class="cx">     Compact        : 1 &lt;&lt; 3,
</span><del>-    ReducedPadding : 1 &lt;&lt; 4,
-    TightPadding   : 1 &lt;&lt; 5
</del><ins>+    TightPadding   : 1 &lt;&lt; 4
</ins><span class="cx"> };
</span><span class="cx"> 
</span><span class="cx"> class LayoutItem extends LayoutNode
</span></span></pre></div>
<a id="trunkSourceWebCoreModulesmodernmediacontrolscontrolsmacoscompactinlinemediacontrolscss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-compact-inline-media-controls.css (213114 => 213115)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-compact-inline-media-controls.css        2017-02-28 02:24:56 UTC (rev 213114)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-compact-inline-media-controls.css        2017-02-28 03:24:37 UTC (rev 213115)
</span><span class="lines">@@ -39,10 +39,6 @@
</span><span class="cx">     -webkit-mask-position-y: 6px;
</span><span class="cx"> }
</span><span class="cx"> 
</span><del>-.media-controls.mac.inline.compact .scrubber.slider {
-    top: 12px;
-}
-
</del><span class="cx"> .media-controls.mac.inline.compact button.mute {
</span><span class="cx">     -webkit-mask-position-y: 6px;
</span><span class="cx"> }
</span><span class="lines">@@ -55,10 +51,16 @@
</span><span class="cx"> 
</span><span class="cx"> .media-controls.mac.inline.compact .time-label,
</span><span class="cx"> .media-controls.mac.inline.compact .status-label {
</span><del>-    top: 5px;
</del><ins>+    top: 4px;
</ins><span class="cx">     font-size: 12px;
</span><span class="cx"> }
</span><span class="cx"> 
</span><ins>+/* Scrubber */
+
+.media-controls.mac.inline.compact .scrubber.slider {
+    top: 5px;
+}
+
</ins><span class="cx"> /* Volume slider */
</span><span class="cx"> 
</span><span class="cx"> .media-controls.mac.inline.compact .volume-slider-container {
</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 (213114 => 213115)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-inline-media-controls.js        2017-02-28 02:24:56 UTC (rev 213114)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-inline-media-controls.js        2017-02-28 03:24:37 UTC (rev 213115)
</span><span class="lines">@@ -40,6 +40,7 @@
</span><span class="cx">         });
</span><span class="cx"> 
</span><span class="cx">         this.rightContainer = new ButtonsContainer({
</span><ins>+            buttons: [this.muteButton, this.airplayButton, this.pipButton, this.tracksButton, this.fullscreenButton],
</ins><span class="cx">             cssClassName: &quot;right&quot;
</span><span class="cx">         });
</span><span class="cx"> 
</span><span class="lines">@@ -115,20 +116,6 @@
</span><span class="cx">             this.rightContainer.leftMargin = 12;
</span><span class="cx">             this.rightContainer.rightMargin = 8;
</span><span class="cx">             this.rightContainer.buttonMargin = 12;
</span><del>-        } else if (layoutTraits &amp; LayoutTraits.TightPadding) {
-            this.leftContainer.leftMargin = 12;
-            this.leftContainer.rightMargin = 12;
-            this.leftContainer.buttonMargin = 12;
-            this.rightContainer.leftMargin = 12;
-            this.rightContainer.rightMargin = 12;
-            this.rightContainer.buttonMargin = 12;
-        } else if (layoutTraits &amp; LayoutTraits.ReducedPadding) {
-            this.leftContainer.leftMargin = 12;
-            this.leftContainer.rightMargin = 16;
-            this.leftContainer.buttonMargin = 16;
-            this.rightContainer.leftMargin = 0;
-            this.rightContainer.rightMargin = 12;
-            this.rightContainer.buttonMargin = 16;
</del><span class="cx">         } else {
</span><span class="cx">             this.leftContainer.leftMargin = 24;
</span><span class="cx">             this.leftContainer.rightMargin = 24;
</span><span class="lines">@@ -138,13 +125,9 @@
</span><span class="cx">             this.rightContainer.buttonMargin = 24;
</span><span class="cx">         }
</span><span class="cx"> 
</span><del>-        if (layoutTraits &amp; LayoutTraits.Compact)
-            this.rightContainer.buttons = [this.muteButton, this.fullscreenButton];
-        else
-            this.rightContainer.buttons = [this.muteButton, this.airplayButton, this.pipButton, this.tracksButton, this.fullscreenButton];
-
</del><span class="cx">         this.leftContainer.buttons.forEach(button =&gt; button.layoutTraitsDidChange());
</span><span class="cx">         this.rightContainer.buttons.forEach(button =&gt; button.layoutTraitsDidChange());
</span><ins>+        this.timeControl.scrubber.layoutTraitsDidChange();
</ins><span class="cx"> 
</span><span class="cx">         this.element.classList.toggle(&quot;compact&quot;, layoutTraits &amp; LayoutTraits.Compact);
</span><span class="cx">     }
</span></span></pre></div>
<a id="trunkSourceWebCoreModulesmodernmediacontrolscontrolsscrubberjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/Modules/modern-media-controls/controls/scrubber.js (213114 => 213115)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/Modules/modern-media-controls/controls/scrubber.js        2017-02-28 02:24:56 UTC (rev 213114)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/scrubber.js        2017-02-28 03:24:37 UTC (rev 213115)
</span><span class="lines">@@ -33,7 +33,7 @@
</span><span class="cx">             layoutDelegate
</span><span class="cx">         });
</span><span class="cx"> 
</span><del>-         this.height = 23;
</del><ins>+        this.layoutTraitsDidChange();
</ins><span class="cx"> 
</span><span class="cx">         // Add the element used to draw the track on iOS.
</span><span class="cx">         if (this.layoutTraits &amp; LayoutTraits.iOS)
</span><span class="lines">@@ -58,6 +58,11 @@
</span><span class="cx">         this.needsLayout = true;
</span><span class="cx">     }
</span><span class="cx"> 
</span><ins>+    layoutTraitsDidChange()
+    {
+        this.height = (this.layoutTraits &amp; LayoutTraits.Compact) ? 15 : 23; 
+    }
+
</ins><span class="cx">     // Protected
</span><span class="cx"> 
</span><span class="cx">     draw(ctx)
</span></span></pre></div>
<a id="trunkSourceWebCoreModulesmodernmediacontrolscontrolstimecontroljs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/Modules/modern-media-controls/controls/time-control.js (213114 => 213115)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/Modules/modern-media-controls/controls/time-control.js        2017-02-28 02:24:56 UTC (rev 213114)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/time-control.js        2017-02-28 03:24:37 UTC (rev 213115)
</span><span class="lines">@@ -23,7 +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><del>-const MinimumScrubberWidth = 168;
</del><ins>+const MinimumScrubberWidthDefault = 168;
+const MinimumScrubberWidthCompact = 124;
</ins><span class="cx"> const ElapsedTimeLabelLeftMargin = -2;
</span><span class="cx"> const ElapsedTimeLabelWidth = 40;
</span><span class="cx"> const RemainingTimeLabelWidth = 49;
</span><span class="lines">@@ -87,7 +88,7 @@
</span><span class="cx"> 
</span><span class="cx">     get isSufficientlyWide()
</span><span class="cx">     {
</span><del>-        return this.scrubber.width &gt;= MinimumScrubberWidth;
</del><ins>+        return this.scrubber.width &gt;= ((this.layoutTraits &amp; LayoutTraits.Compact) ? MinimumScrubberWidthCompact : MinimumScrubberWidthDefault);
</ins><span class="cx">     }
</span><span class="cx"> 
</span><span class="cx"> }
</span></span></pre></div>
<a id="trunkSourceWebCoreModulesmodernmediacontrolsmediamediacontrollerjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/Modules/modern-media-controls/media/media-controller.js (213114 => 213115)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/Modules/modern-media-controls/media/media-controller.js        2017-02-28 02:24:56 UTC (rev 213114)
+++ trunk/Source/WebCore/Modules/modern-media-controls/media/media-controller.js        2017-02-28 03:24:37 UTC (rev 213115)
</span><span class="lines">@@ -23,8 +23,6 @@
</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 CompactModeMaxWidth = 241;
-const ReducedPaddingMaxWidth = 300;
</del><span class="cx"> const AudioTightPaddingMaxWidth = 400;
</span><span class="cx"> 
</span><span class="cx"> class MediaController
</span><span class="lines">@@ -74,17 +72,12 @@
</span><span class="cx">         } else if (this.media.webkitDisplayingFullscreen)
</span><span class="cx">             return traits | LayoutTraits.Fullscreen;
</span><span class="cx"> 
</span><del>-        const controlsWidth = this._controlsWidth();
-        if (controlsWidth &lt;= CompactModeMaxWidth)
</del><ins>+        if (traits &amp; LayoutTraits.macOS)
</ins><span class="cx">             return traits | LayoutTraits.Compact;
</span><span class="cx"> 
</span><del>-        const isAudio = this.isAudio;
-        if (isAudio &amp;&amp; controlsWidth &lt;= AudioTightPaddingMaxWidth)
</del><ins>+        if (this.isAudio &amp;&amp; this._controlsWidth() &lt;= AudioTightPaddingMaxWidth)
</ins><span class="cx">             return traits | LayoutTraits.TightPadding;
</span><span class="cx"> 
</span><del>-        if (!isAudio &amp;&amp; controlsWidth &lt;= ReducedPaddingMaxWidth)
-            return traits | LayoutTraits.ReducedPadding;
-
</del><span class="cx">         return traits;
</span><span class="cx">     }
</span><span class="cx"> 
</span></span></pre>
</div>
</div>

</body>
</html>