- Revision
- 218877
- Author
- grao...@webkit.org
- Date
- 2017-06-28 09:05:58 -0700 (Wed, 28 Jun 2017)
Log Message
Media controls volume glyph does not have the correct material
https://bugs.webkit.org/show_bug.cgi?id=173918
<rdar://problem/33012697>
Reviewed by Eric Carlson.
Source/WebCore:
Test: media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-mute-button-in-bottom-or-top-right-controls-bar.html
All buttons were hosted in a ControlsBar save for the MuteButton, so we now host it in a controls bar as well
to ensure compositing is similar to all other buttons.
* Modules/modern-media-controls/controls/inline-media-controls.css:
(.media-controls.inline > .controls-bar.top-right):
(.media-controls.inline > button.mute): Deleted.
* Modules/modern-media-controls/controls/inline-media-controls.js:
(InlineMediaControls):
(InlineMediaControls.prototype.layout):
(InlineMediaControls.prototype._addTopRightBarWithMuteButtonToChildren):
* Modules/modern-media-controls/controls/macos-inline-media-controls.js:
(MacOSInlineMediaControls.prototype.handleEvent):
LayoutTests:
Add a new test to check the mute button is correctly hosted in the top-right controls bar
when width becomes scarce.
* media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-mute-button-in-bottom-or-top-right-controls-bar-expected.txt: Added.
* media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-mute-button-in-bottom-or-top-right-controls-bar.html: Added.
* platform/mac/TestExpectations:
Modified Paths
Added Paths
Diff
Modified: trunk/LayoutTests/ChangeLog (218876 => 218877)
--- trunk/LayoutTests/ChangeLog 2017-06-28 15:55:51 UTC (rev 218876)
+++ trunk/LayoutTests/ChangeLog 2017-06-28 16:05:58 UTC (rev 218877)
@@ -1,3 +1,18 @@
+2017-06-28 Antoine Quint <grao...@apple.com>
+
+ Media controls volume glyph does not have the correct material
+ https://bugs.webkit.org/show_bug.cgi?id=173918
+ <rdar://problem/33012697>
+
+ Reviewed by Eric Carlson.
+
+ Add a new test to check the mute button is correctly hosted in the top-right controls bar
+ when width becomes scarce.
+
+ * media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-mute-button-in-bottom-or-top-right-controls-bar-expected.txt: Added.
+ * media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-mute-button-in-bottom-or-top-right-controls-bar.html: Added.
+ * platform/mac/TestExpectations:
+
2017-06-28 Fujii Hironori <hironori.fu...@sony.com>
[GTK] LayoutTest webaudio/silent-audio-interrupted-in-background.html makes its subsequent test flaky crash
Added: trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-mute-button-in-bottom-or-top-right-controls-bar-expected.txt (0 => 218877)
--- trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-mute-button-in-bottom-or-top-right-controls-bar-expected.txt (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-mute-button-in-bottom-or-top-right-controls-bar-expected.txt 2017-06-28 16:05:58 UTC (rev 218877)
@@ -0,0 +1,17 @@
+Testing the mute button for inline media controls correctly displays in the bottom controls bar when there is enough space and switches to display in the top right controls bar when there isn't.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+width = 600
+PASS mediaControls.muteButton.parent.parent is mediaControls.bottomControlsBar
+PASS mediaControls.topRightControlsBar.parent is null
+
+width = 250
+PASS mediaControls.muteButton.parent.parent is mediaControls.topRightControlsBar
+PASS mediaControls.topRightControlsBar.parent is mediaControls
+
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
Added: trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-mute-button-in-bottom-or-top-right-controls-bar.html (0 => 218877)
--- trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-mute-button-in-bottom-or-top-right-controls-bar.html (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-mute-button-in-bottom-or-top-right-controls-bar.html 2017-06-28 16:05:58 UTC (rev 218877)
@@ -0,0 +1,25 @@
+<script src=""
+<script src="" type="text/_javascript_"></script>
+<script src="" type="text/_javascript_"></script>
+<body>
+<script type="text/_javascript_">
+
+description("Testing the mute button for inline media controls correctly displays in the bottom controls bar when there is enough space and switches to display in the top right controls bar when there isn't.");
+
+const mediaControls = new MacOSInlineMediaControls({ width: 600, height: 300 });
+
+debug("width = 600");
+shouldBe("mediaControls.muteButton.parent.parent", "mediaControls.bottomControlsBar");
+shouldBe("mediaControls.topRightControlsBar.parent", "null");
+
+debug("")
+debug("width = 250");
+mediaControls.width = 250;
+shouldBe("mediaControls.muteButton.parent.parent", "mediaControls.topRightControlsBar");
+shouldBe("mediaControls.topRightControlsBar.parent", "mediaControls");
+
+debug("");
+
+</script>
+<script src=""
+</body>
Modified: trunk/LayoutTests/platform/mac/TestExpectations (218876 => 218877)
--- trunk/LayoutTests/platform/mac/TestExpectations 2017-06-28 15:55:51 UTC (rev 218876)
+++ trunk/LayoutTests/platform/mac/TestExpectations 2017-06-28 16:05:58 UTC (rev 218877)
@@ -1555,6 +1555,7 @@
media/modern-media-controls/layout-node [ Pass ]
media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-drag-is-prevented-over-button.html [ Pass ]
media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-drag.html [ Pass ]
+media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-mute-button-in-bottom-or-top-right-controls-bar.html [ Pass ]
media/modern-media-controls/media-documents [ Pass ]
media/modern-media-controls/mute-button [ Pass ]
media/modern-media-controls/mute-support [ Pass ]
Modified: trunk/Source/WebCore/ChangeLog (218876 => 218877)
--- trunk/Source/WebCore/ChangeLog 2017-06-28 15:55:51 UTC (rev 218876)
+++ trunk/Source/WebCore/ChangeLog 2017-06-28 16:05:58 UTC (rev 218877)
@@ -1,3 +1,26 @@
+2017-06-28 Antoine Quint <grao...@apple.com>
+
+ Media controls volume glyph does not have the correct material
+ https://bugs.webkit.org/show_bug.cgi?id=173918
+ <rdar://problem/33012697>
+
+ Reviewed by Eric Carlson.
+
+ Test: media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-mute-button-in-bottom-or-top-right-controls-bar.html
+
+ All buttons were hosted in a ControlsBar save for the MuteButton, so we now host it in a controls bar as well
+ to ensure compositing is similar to all other buttons.
+
+ * Modules/modern-media-controls/controls/inline-media-controls.css:
+ (.media-controls.inline > .controls-bar.top-right):
+ (.media-controls.inline > button.mute): Deleted.
+ * Modules/modern-media-controls/controls/inline-media-controls.js:
+ (InlineMediaControls):
+ (InlineMediaControls.prototype.layout):
+ (InlineMediaControls.prototype._addTopRightBarWithMuteButtonToChildren):
+ * Modules/modern-media-controls/controls/macos-inline-media-controls.js:
+ (MacOSInlineMediaControls.prototype.handleEvent):
+
2017-06-28 Carlos Garcia Campos <cgar...@igalia.com>
REGRESSION(r218799): [GTK][WPE] Critical warning at exit
Modified: trunk/Source/WebCore/Modules/modern-media-controls/controls/inline-media-controls.css (218876 => 218877)
--- trunk/Source/WebCore/Modules/modern-media-controls/controls/inline-media-controls.css 2017-06-28 15:55:51 UTC (rev 218876)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/inline-media-controls.css 2017-06-28 16:05:58 UTC (rev 218877)
@@ -34,6 +34,12 @@
top: var(--inline-controls-inside-margin);
}
+.media-controls.inline > .controls-bar.top-right {
+ left: auto;
+ right: var(--inline-controls-inside-margin);
+ top: var(--inline-controls-inside-margin);
+}
+
.media-controls.inline.audio > .controls-bar {
top: auto;
left: auto;
@@ -45,15 +51,6 @@
/* Controls placement */
-.media-controls.inline > button.mute {
- /* We override the left property here since the mute button might have
- been hosted in a controls bar before (for instance if we used audio
- layout) and set to an absolute value. */
- left: auto !important;
- right: var(--inline-controls-inside-margin);
- top: var(--inline-controls-inside-margin);
-}
-
.media-controls.inline > button.play-pause.corner {
left: var(--inline-controls-inside-margin) !important;
top: auto;
Modified: trunk/Source/WebCore/Modules/modern-media-controls/controls/inline-media-controls.js (218876 => 218877)
--- trunk/Source/WebCore/Modules/modern-media-controls/controls/inline-media-controls.js 2017-06-28 15:55:51 UTC (rev 218876)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/inline-media-controls.js 2017-06-28 16:05:58 UTC (rev 218877)
@@ -43,6 +43,9 @@
this.topLeftControlsBar = new ControlsBar("top-left");
this._topLeftControlsBarContainer = this.topLeftControlsBar.addChild(new ButtonsContainer);
+ this.topRightControlsBar = new ControlsBar("top-right");
+ this._topRightControlsBarContainer = this.topRightControlsBar.addChild(new ButtonsContainer);
+
this.leftContainer = new ButtonsContainer({ cssClassName: "left" });
this.rightContainer = new ButtonsContainer({ cssClassName: "right" });
@@ -144,8 +147,8 @@
if (this.bottomControlsBar.width < minimumControlsBarWidthForCenterControl) {
this.playPauseButton.style = Button.Styles.Corner;
if (!this._shouldUseSingleBarLayout && this.height >= 82) {
- this.muteButton.style = Button.Styles.Corner;
- children.push(this.topLeftControlsBar, this.muteButton);
+ children.push(this.topLeftControlsBar);
+ this._addTopRightBarWithMuteButtonToChildren(children);
}
this.children = children.concat(this.playPauseButton);
return;
@@ -207,10 +210,8 @@
if (!this._shouldUseAudioLayout && !this._shouldUseSingleBarLayout)
children.push(this.topLeftControlsBar);
children.push(this.bottomControlsBar);
- if (this.muteButton.style === Button.Styles.Corner || (this.muteButton.dropped && !this._shouldUseAudioLayout && !this._shouldUseSingleBarLayout)) {
- children.push(this.muteButton);
- this.muteButton.style = Button.Styles.Corner;
- }
+ if (this.muteButton.style === Button.Styles.Corner || (this.muteButton.dropped && !this._shouldUseAudioLayout && !this._shouldUseSingleBarLayout))
+ this._addTopRightBarWithMuteButtonToChildren(children);
this.children = children;
}
@@ -272,4 +273,14 @@
return buttons;
}
+ _addTopRightBarWithMuteButtonToChildren(children)
+ {
+ delete this.muteButton.dropped;
+ this.muteButton.style = Button.Styles.Bar;
+ this._topRightControlsBarContainer.buttons = [this.muteButton];
+ this._topRightControlsBarContainer.layout();
+ this.topRightControlsBar.width = this._topRightControlsBarContainer.width;
+ children.push(this.topRightControlsBar);
+ }
+
}
Modified: trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-inline-media-controls.js (218876 => 218877)
--- trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-inline-media-controls.js 2017-06-28 15:55:51 UTC (rev 218876)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-inline-media-controls.js 2017-06-28 16:05:58 UTC (rev 218877)
@@ -71,7 +71,7 @@
handleEvent(event)
{
if (event.type === "mouseenter" && event.currentTarget === this.muteButton.element) {
- if (this.muteButton.style === Button.Styles.Bar)
+ if (this.muteButton.parent === this.rightContainer)
this.addChild(this._volumeSliderContainer);
} else if (event.type === "mouseleave" && (event.currentTarget === this.muteButton.element || event.currentTarget === this._volumeSliderContainer.element)) {
if (!this._volumeSliderContainer.element.contains(event.relatedTarget))
