- Revision
- 213113
- Author
- [email protected]
- Date
- 2017-02-27 18:18:17 -0800 (Mon, 27 Feb 2017)
Log Message
[Modern Media Controls] Adhere to tight padding on iOS
https://bugs.webkit.org/show_bug.cgi?id=168949
<rdar://problem/30746164>
Reviewed by Jon Lee.
Source/WebCore:
We used to only support custom margins on macOS, to support this on iOS as
well, we promote the notification when the layoutTraits property is set to
MediaControls and expose a new protected method layoutTraitsDidChange() for
subclasses to implement. IOSInlineMediaControls now implements that method
and will use tighter margins for the TightPadding layout trait.
Test: media/modern-media-controls/ios-inline-media-controls/ios-inline-media-controls-tight-padding.html
* Modules/modern-media-controls/controls/ios-inline-media-controls.js:
(IOSInlineMediaControls.prototype.layoutTraitsDidChange):
(IOSInlineMediaControls):
* Modules/modern-media-controls/controls/macos-inline-media-controls.js:
(MacOSInlineMediaControls.prototype.get layoutTraits): Deleted.
(MacOSInlineMediaControls.prototype.set layoutTraits): Deleted.
(MacOSInlineMediaControls.prototype._matchLayoutTraits): Deleted.
* Modules/modern-media-controls/controls/media-controls.js:
(MediaControls.prototype.get layoutTraits):
(MediaControls.prototype.set layoutTraits):
(MediaControls.prototype.layoutTraitsDidChange):
LayoutTests:
Adding a new test for the TightPadding layout trait on iOS.
* media/modern-media-controls/ios-inline-media-controls/ios-inline-media-controls-tight-padding-expected.txt: Added.
* media/modern-media-controls/ios-inline-media-controls/ios-inline-media-controls-tight-padding.html: Added.
Modified Paths
Added Paths
Diff
Modified: trunk/LayoutTests/ChangeLog (213112 => 213113)
--- trunk/LayoutTests/ChangeLog 2017-02-28 02:08:25 UTC (rev 213112)
+++ trunk/LayoutTests/ChangeLog 2017-02-28 02:18:17 UTC (rev 213113)
@@ -1,3 +1,16 @@
+2017-02-27 Antoine Quint <[email protected]>
+
+ [Modern Media Controls] Adhere to tight padding on iOS
+ https://bugs.webkit.org/show_bug.cgi?id=168949
+ <rdar://problem/30746164>
+
+ Reviewed by Jon Lee.
+
+ Adding a new test for the TightPadding layout trait on iOS.
+
+ * media/modern-media-controls/ios-inline-media-controls/ios-inline-media-controls-tight-padding-expected.txt: Added.
+ * media/modern-media-controls/ios-inline-media-controls/ios-inline-media-controls-tight-padding.html: Added.
+
2017-02-27 Ryan Haddad <[email protected]>
Mark compositing/video/video-poster.html as flaky on macOS release.
Added: trunk/LayoutTests/media/modern-media-controls/ios-inline-media-controls/ios-inline-media-controls-tight-padding-expected.txt (0 => 213113)
--- trunk/LayoutTests/media/modern-media-controls/ios-inline-media-controls/ios-inline-media-controls-tight-padding-expected.txt (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/ios-inline-media-controls/ios-inline-media-controls-tight-padding-expected.txt 2017-02-28 02:18:17 UTC (rev 213113)
@@ -0,0 +1,16 @@
+Testing IOSInlineMediaControls with tight padding.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+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
+
Added: trunk/LayoutTests/media/modern-media-controls/ios-inline-media-controls/ios-inline-media-controls-tight-padding.html (0 => 213113)
--- trunk/LayoutTests/media/modern-media-controls/ios-inline-media-controls/ios-inline-media-controls-tight-padding.html (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/ios-inline-media-controls/ios-inline-media-controls-tight-padding.html 2017-02-28 02:18:17 UTC (rev 213113)
@@ -0,0 +1,22 @@
+<script src=""
+<script src="" type="text/_javascript_"></script>
+<script src="" type="text/_javascript_"></script>
+<body>
+<script type="text/_javascript_">
+
+description("Testing <code>IOSInlineMediaControls</code> with tight padding.");
+
+const mediaControls = new MacOSInlineMediaControls({ width: 400 });
+mediaControls.layoutTraits = LayoutTraits.iOS | LayoutTraits.TightPadding;
+
+shouldBe("mediaControls.leftContainer.leftMargin", "12");
+shouldBe("mediaControls.leftContainer.rightMargin", "12");
+shouldBe("mediaControls.leftContainer.buttonMargin", "12");
+shouldBe("mediaControls.rightContainer.leftMargin", "12");
+shouldBe("mediaControls.rightContainer.rightMargin", "12");
+shouldBe("mediaControls.rightContainer.buttonMargin ", "12");
+debug("");
+
+</script>
+<script src=""
+</body>
Modified: trunk/Source/WebCore/ChangeLog (213112 => 213113)
--- trunk/Source/WebCore/ChangeLog 2017-02-28 02:08:25 UTC (rev 213112)
+++ trunk/Source/WebCore/ChangeLog 2017-02-28 02:18:17 UTC (rev 213113)
@@ -1,3 +1,31 @@
+2017-02-27 Antoine Quint <[email protected]>
+
+ [Modern Media Controls] Adhere to tight padding on iOS
+ https://bugs.webkit.org/show_bug.cgi?id=168949
+ <rdar://problem/30746164>
+
+ Reviewed by Jon Lee.
+
+ We used to only support custom margins on macOS, to support this on iOS as
+ well, we promote the notification when the layoutTraits property is set to
+ MediaControls and expose a new protected method layoutTraitsDidChange() for
+ subclasses to implement. IOSInlineMediaControls now implements that method
+ and will use tighter margins for the TightPadding layout trait.
+
+ Test: media/modern-media-controls/ios-inline-media-controls/ios-inline-media-controls-tight-padding.html
+
+ * Modules/modern-media-controls/controls/ios-inline-media-controls.js:
+ (IOSInlineMediaControls.prototype.layoutTraitsDidChange):
+ (IOSInlineMediaControls):
+ * Modules/modern-media-controls/controls/macos-inline-media-controls.js:
+ (MacOSInlineMediaControls.prototype.get layoutTraits): Deleted.
+ (MacOSInlineMediaControls.prototype.set layoutTraits): Deleted.
+ (MacOSInlineMediaControls.prototype._matchLayoutTraits): Deleted.
+ * Modules/modern-media-controls/controls/media-controls.js:
+ (MediaControls.prototype.get layoutTraits):
+ (MediaControls.prototype.set layoutTraits):
+ (MediaControls.prototype.layoutTraitsDidChange):
+
2017-02-27 Youenn Fablet <[email protected]>
[WebRTC] Support modern RTCStatsReport
Modified: trunk/Source/WebCore/Modules/modern-media-controls/controls/ios-inline-media-controls.js (213112 => 213113)
--- trunk/Source/WebCore/Modules/modern-media-controls/controls/ios-inline-media-controls.js 2017-02-28 02:08:25 UTC (rev 213112)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/ios-inline-media-controls.js 2017-02-28 02:18:17 UTC (rev 213113)
@@ -47,6 +47,8 @@
cssClassName: "right"
});
+ this.layoutTraitsDidChange();
+
this.controlsBar.children = [this.leftContainer, this.rightContainer];
this._pinchGestureRecognizer = new PinchGestureRecognizer(this.element, this);
@@ -66,7 +68,7 @@
this.delegate.iOSInlineMediaControlsRecognizedPinchInGesture();
}
- // Public
+ // Protected
layout()
{
@@ -76,6 +78,20 @@
this.controlsBar.children = this._inlineLayoutSupport.childrenAfterPerformingLayout();
}
+ layoutTraitsDidChange()
+ {
+ if (!this.leftContainer || !this.rightContainer)
+ return;
+
+ const margin = (this.layoutTraits & LayoutTraits.TightPadding) ? 12 : 24;
+ this.leftContainer.leftMargin = margin;
+ this.leftContainer.rightMargin = margin;
+ this.leftContainer.buttonMargin = margin;
+ this.rightContainer.leftMargin = margin;
+ this.rightContainer.rightMargin = margin;
+ this.rightContainer.buttonMargin = margin;
+ }
+
}
IOSInlineMediaControls.MinimumScaleToEnterFullscreen = 1.5;
Modified: trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-inline-media-controls.js (213112 => 213113)
--- trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-inline-media-controls.js 2017-02-28 02:08:25 UTC (rev 213112)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-inline-media-controls.js 2017-02-28 02:18:17 UTC (rev 213113)
@@ -43,7 +43,7 @@
cssClassName: "right"
});
- this._matchLayoutTraits();
+ this.layoutTraitsDidChange();
this._backgroundTint = new BackgroundTint;
@@ -62,20 +62,6 @@
// Public
- get layoutTraits()
- {
- return this._layoutTraits;
- }
-
- set layoutTraits(layoutTraits)
- {
- if (this._layoutTraits === layoutTraits)
- return;
-
- this._layoutTraits = layoutTraits;
- this._matchLayoutTraits();
- }
-
layout()
{
super.layout();
@@ -116,9 +102,7 @@
this.layout();
}
- // Private
-
- _matchLayoutTraits()
+ layoutTraitsDidChange()
{
if (!this.leftContainer || !this.rightContainer)
return;
@@ -164,4 +148,5 @@
this.element.classList.toggle("compact", layoutTraits & LayoutTraits.Compact);
}
+
}
Modified: trunk/Source/WebCore/Modules/modern-media-controls/controls/media-controls.js (213112 => 213113)
--- trunk/Source/WebCore/Modules/modern-media-controls/controls/media-controls.js 2017-02-28 02:08:25 UTC (rev 213112)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/media-controls.js 2017-02-28 02:18:17 UTC (rev 213113)
@@ -59,6 +59,20 @@
// Public
+ get layoutTraits()
+ {
+ return this._layoutTraits;
+ }
+
+ set layoutTraits(layoutTraits)
+ {
+ if (this._layoutTraits === layoutTraits)
+ return;
+
+ this._layoutTraits = layoutTraits;
+ this.layoutTraitsDidChange();
+ }
+
get showsStartButton()
{
return !!this._showsStartButton;
@@ -156,6 +170,11 @@
// Implemented by subclasses as needed.
}
+ layoutTraitsDidChange()
+ {
+ // Implemented by subclasses as needed.
+ }
+
// Private
_invalidateChildren()
