Diff
Modified: trunk/LayoutTests/ChangeLog (213083 => 213084)
--- trunk/LayoutTests/ChangeLog 2017-02-27 19:16:33 UTC (rev 213083)
+++ trunk/LayoutTests/ChangeLog 2017-02-27 19:55:09 UTC (rev 213084)
@@ -1,3 +1,16 @@
+2017-02-27 Antoine Quint <grao...@apple.com>
+
+ [Modern Media Controls] Status text does not appear on iOS
+ https://bugs.webkit.org/show_bug.cgi?id=168918
+ <rdar://problem/30737644>
+
+ Reviewed by Dean Jackson.
+
+ Add a new test checking that we correctly display the status label on iOS.
+
+ * media/modern-media-controls/ios-inline-media-controls/ios-inline-media-controls-status-label-expected.txt: Added.
+ * media/modern-media-controls/ios-inline-media-controls/ios-inline-media-controls-status-label.html: Added.
+
2017-02-27 Jiewen Tan <jiewen_...@apple.com>
[CredentialManagement] Add IDL definitions for Credential, SiteBoundCredential, and PasswordCredential
Added: trunk/LayoutTests/media/modern-media-controls/ios-inline-media-controls/ios-inline-media-controls-status-label-expected.txt (0 => 213084)
--- trunk/LayoutTests/media/modern-media-controls/ios-inline-media-controls/ios-inline-media-controls-status-label-expected.txt (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/ios-inline-media-controls/ios-inline-media-controls-status-label-expected.txt 2017-02-27 19:55:09 UTC (rev 213084)
@@ -0,0 +1,17 @@
+Testing the IOSInlineMediaControls layout with the statusLabel property set.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+Default state
+PASS mediaControls.controlsBar.children.includes(mediaControls.statusLabel) is false
+PASS mediaControls.controlsBar.children.includes(mediaControls.timeControl) is true
+
+After setting statusLabel.enabled = true
+PASS mediaControls.controlsBar.children.includes(mediaControls.statusLabel) is true
+PASS mediaControls.controlsBar.children.includes(mediaControls.timeControl) is false
+
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
Added: trunk/LayoutTests/media/modern-media-controls/ios-inline-media-controls/ios-inline-media-controls-status-label.html (0 => 213084)
--- trunk/LayoutTests/media/modern-media-controls/ios-inline-media-controls/ios-inline-media-controls-status-label.html (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/ios-inline-media-controls/ios-inline-media-controls-status-label.html 2017-02-27 19:55:09 UTC (rev 213084)
@@ -0,0 +1,37 @@
+<script src=""
+<script src="" type="text/_javascript_"></script>
+<script src="" type="text/_javascript_"></script>
+<body>
+<script type="text/_javascript_">
+
+description("Testing the <code>IOSInlineMediaControls</code> layout with the <code>statusLabel</code> property set.");
+
+window.jsTestIsAsync = true;
+
+const mediaControls = new IOSInlineMediaControls({ width: 680, height: 50 });
+
+let numberOfFrames = 0;
+scheduler.frameDidFire = function()
+{
+
+ numberOfFrames++;
+
+ if (numberOfFrames == 1) {
+ debug("Default state");
+ shouldBeFalse("mediaControls.controlsBar.children.includes(mediaControls.statusLabel)");
+ shouldBeTrue("mediaControls.controlsBar.children.includes(mediaControls.timeControl)");
+ mediaControls.statusLabel.enabled = true;
+ } else if (numberOfFrames == 2) {
+ debug("");
+ debug("After setting statusLabel.enabled = true");
+ shouldBeTrue("mediaControls.controlsBar.children.includes(mediaControls.statusLabel)");
+ shouldBeFalse("mediaControls.controlsBar.children.includes(mediaControls.timeControl)");
+ debug("");
+ finishMediaControlsTest();
+ }
+
+};
+
+</script>
+<script src=""
+</body>
Modified: trunk/Source/WebCore/ChangeLog (213083 => 213084)
--- trunk/Source/WebCore/ChangeLog 2017-02-27 19:16:33 UTC (rev 213083)
+++ trunk/Source/WebCore/ChangeLog 2017-02-27 19:55:09 UTC (rev 213084)
@@ -1,3 +1,29 @@
+2017-02-27 Antoine Quint <grao...@apple.com>
+
+ [Modern Media Controls] Status text does not appear on iOS
+ https://bugs.webkit.org/show_bug.cgi?id=168918
+ <rdar://problem/30737644>
+
+ Reviewed by Dean Jackson.
+
+ We refactor the layout code out of MacOSInlineMediaControls and into a new
+ InlineLayoutSupport class which IOSInlineMediaControls uses as well. Now
+ both the macOS and iOS inline media controls run the same layout logic to
+ control whether the status label or scrubber should be displayed, and which
+ controls should be dropped due to space constraints.
+
+ Test: media/modern-media-controls/ios-inline-media-controls/ios-inline-media-controls-status-label.html
+
+ * Modules/modern-media-controls/controls/inline-layout-support.js: Added.
+ (InlineLayoutSupport):
+ (InlineLayoutSupport.prototype.childrenAfterPerformingLayout):
+ * Modules/modern-media-controls/controls/ios-inline-media-controls.js:
+ (IOSInlineMediaControls.prototype.layout):
+ (IOSInlineMediaControls):
+ * Modules/modern-media-controls/controls/macos-inline-media-controls.js:
+ (MacOSInlineMediaControls.prototype.layout):
+ * Modules/modern-media-controls/js-files:
+
2017-02-27 Simon Fraser <simon.fra...@apple.com>
Add specification and status metadata to CSSProperties.json, and validate it
Added: trunk/Source/WebCore/Modules/modern-media-controls/controls/inline-layout-support.js (0 => 213084)
--- trunk/Source/WebCore/Modules/modern-media-controls/controls/inline-layout-support.js (rev 0)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/inline-layout-support.js 2017-02-27 19:55:09 UTC (rev 213084)
@@ -0,0 +1,96 @@
+/*
+ * Copyright (C) 2017 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 InlineLayoutSupport
+{
+
+ constructor(controls, droppableControls)
+ {
+ this._controls = controls;
+ this._droppableControls = droppableControls;
+ }
+
+ // Public
+
+ childrenAfterPerformingLayout()
+ {
+ const controls = this._controls;
+
+ // Reset dropped buttons.
+ controls.rightContainer.buttons.concat(controls.leftContainer.buttons).forEach(button => delete button.dropped);
+
+ controls.leftContainer.layout();
+ controls.rightContainer.layout();
+
+ let shouldShowTimeControl = !controls.statusLabel.enabled;
+
+ if (shouldShowTimeControl)
+ controls.timeControl.width = controls.width - controls.leftContainer.width - controls.rightContainer.width;
+
+ if (shouldShowTimeControl && controls.timeControl.isSufficientlyWide)
+ controls.timeControl.x = controls.leftContainer.width;
+ else {
+ let droppedControls = false;
+ shouldShowTimeControl = false;
+
+ // Since we don't have enough space to display the scrubber, we may also not have
+ // enough space to display all buttons in the left and right containers, so gradually drop them.
+ for (let button of this._droppableControls) {
+ // Nothing left to do if the combined container widths is shorter than the available width.
+ if (controls.leftContainer.width + controls.rightContainer.width < controls.width)
+ break;
+
+ droppedControls = true;
+
+ // If the button was already not participating in layout, we can skip it.
+ if (!button.visible)
+ continue;
+
+ // This button must now be dropped.
+ button.dropped = true;
+
+ controls.leftContainer.layout();
+ controls.rightContainer.layout();
+ }
+
+ // We didn't need to drop controls and we have status text to show.
+ if (!droppedControls && controls.statusLabel.enabled) {
+ controls.statusLabel.x = controls.leftContainer.width;
+ controls.statusLabel.width = controls.width - controls.leftContainer.width - controls.rightContainer.width;
+ }
+ }
+
+ controls.rightContainer.x = controls.width - controls.rightContainer.width;
+
+ const children = [controls.leftContainer];
+ if (shouldShowTimeControl)
+ children.push(controls.timeControl);
+ else if (controls.statusLabel.enabled)
+ children.push(controls.statusLabel);
+ children.push(controls.rightContainer);
+ return children;
+ }
+
+}
Modified: trunk/Source/WebCore/Modules/modern-media-controls/controls/ios-inline-media-controls.js (213083 => 213084)
--- trunk/Source/WebCore/Modules/modern-media-controls/controls/ios-inline-media-controls.js 2017-02-27 19:16:33 UTC (rev 213083)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/ios-inline-media-controls.js 2017-02-27 19:55:09 UTC (rev 213084)
@@ -32,20 +32,22 @@
super(options);
+ this._inlineLayoutSupport = new InlineLayoutSupport(this, [this.airplayButton, this.pipButton, this.skipBackButton, this.fullscreenButton]);
+
this.element.classList.add("ios");
this.element.classList.add("inline");
- this._leftContainer = new ButtonsContainer({
+ this.leftContainer = new ButtonsContainer({
buttons: [this.playPauseButton, this.skipBackButton],
cssClassName: "left"
});
- this._rightContainer = new ButtonsContainer({
+ this.rightContainer = new ButtonsContainer({
buttons: [this.airplayButton, this.pipButton, this.fullscreenButton],
cssClassName: "right"
});
- this.controlsBar.children = [this._leftContainer, this._rightContainer];
+ this.controlsBar.children = [this.leftContainer, this.rightContainer];
this._pinchGestureRecognizer = new PinchGestureRecognizer(this.element, this);
}
@@ -70,38 +72,8 @@
{
super.layout();
- // Reset dropped buttons.
- for (let button of this._rightContainer.buttons)
- delete button.dropped;
-
- this._leftContainer.layout();
- this._rightContainer.layout();
-
- this.timeControl.width = this.width - this._leftContainer.width - this._rightContainer.width;
-
- if (this.timeControl.isSufficientlyWide) {
- this.controlsBar.insertBefore(this.timeControl, this._rightContainer);
- this.timeControl.x = this._leftContainer.width;
- } else {
- this.timeControl.remove();
- // Since we don't have enough space to display the scrubber, we may also not have
- // enough space to display all buttons in the left and right containers, so gradually drop them.
- for (let control of [this.airplayButton, this.pipButton, this.skipBackButton, this.fullscreenButton]) {
- // Nothing left to do if the combined container widths is shorter than the available width.
- if (this._leftContainer.width + this._rightContainer.width < this.width)
- break;
-
- // If the control was already not participating in layout, we can skip it.
- if (!control.visible)
- continue;
-
- // This control must now be dropped.
- control.dropped = true;
-
- this._leftContainer.layout();
- this._rightContainer.layout();
- }
- }
+ if (this.controlsBar.visible)
+ this.controlsBar.children = this._inlineLayoutSupport.childrenAfterPerformingLayout();
}
}
Modified: trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-inline-media-controls.js (213083 => 213084)
--- trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-inline-media-controls.js 2017-02-27 19:16:33 UTC (rev 213083)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-inline-media-controls.js 2017-02-27 19:55:09 UTC (rev 213084)
@@ -30,6 +30,8 @@
{
super(options);
+ this._inlineLayoutSupport = new InlineLayoutSupport(this, [this.airplayButton, this.pipButton, this.tracksButton, this.muteButton, this.skipBackButton, this.fullscreenButton]);
+
this.element.classList.add("inline");
this.leftContainer = new ButtonsContainer({
@@ -81,53 +83,12 @@
if (!this.controlsBar.visible)
return;
- // Reset dropped buttons.
- this.rightContainer.buttons.concat(this.leftContainer.buttons).forEach(button => delete button.dropped);
+ const children = this._inlineLayoutSupport.childrenAfterPerformingLayout();
+ // Add the background tint as the first child.
+ children.unshift(this._backgroundTint);
+ children.push(this._volumeSliderContainer);
+ this.controlsBar.children = children;
- this.leftContainer.layout();
- this.rightContainer.layout();
-
- const middleContainer = this.statusLabel.enabled ? this.statusLabel : this.timeControl;
- this.controlsBar.children = [this._backgroundTint, this.leftContainer, middleContainer, this.rightContainer, this._volumeSliderContainer];
-
- if (middleContainer === this.timeControl)
- this.timeControl.width = this.width - this.leftContainer.width - this.rightContainer.width;
-
- if (middleContainer === this.timeControl && this.timeControl.isSufficientlyWide)
- this.timeControl.x = this.leftContainer.width;
- else {
- this.timeControl.remove();
-
- let droppedControls = false;
-
- // Since we don't have enough space to display the scrubber, we may also not have
- // enough space to display all buttons in the left and right containers, so gradually drop them.
- for (let button of [this.airplayButton, this.pipButton, this.tracksButton, this.muteButton, this.skipBackButton, this.fullscreenButton]) {
- // Nothing left to do if the combined container widths is shorter than the available width.
- if (this.leftContainer.width + this.rightContainer.width < this.width)
- break;
-
- droppedControls = true;
-
- // If the button was already not participating in layout, we can skip it.
- if (!button.visible)
- continue;
-
- // This button must now be dropped.
- button.dropped = true;
-
- this.leftContainer.layout();
- this.rightContainer.layout();
- }
-
- // We didn't need to drop controls and we have status text to show.
- if (!droppedControls && middleContainer === this.statusLabel) {
- this.statusLabel.x = this.leftContainer.width;
- this.statusLabel.width = this.width - this.leftContainer.width - this.rightContainer.width;
- }
- }
-
- this.rightContainer.x = this.width - this.rightContainer.width;
this._volumeSliderContainer.x = this.rightContainer.x + this.muteButton.x;
}
Modified: trunk/Source/WebCore/Modules/modern-media-controls/js-files (213083 => 213084)
--- trunk/Source/WebCore/Modules/modern-media-controls/js-files 2017-02-27 19:16:33 UTC (rev 213083)
+++ trunk/Source/WebCore/Modules/modern-media-controls/js-files 2017-02-27 19:55:09 UTC (rev 213084)
@@ -31,6 +31,7 @@
controls/controls-bar.js
controls/tracks-panel.js
controls/media-controls.js
+controls/inline-layout-support.js
controls/ios-inline-media-controls.js
controls/macos-media-controls.js
controls/macos-inline-media-controls.js
