- Revision
- 265709
- Author
- [email protected]
- Date
- 2020-08-14 15:14:22 -0700 (Fri, 14 Aug 2020)
Log Message
RTL: volume slider and icons are backwards
https://bugs.webkit.org/show_bug.cgi?id=215482
<rdar://problem/65730749>
Reviewed by Eric Carlson.
Source/WebCore:
* Modules/modern-media-controls/controls/inline-media-controls.js:
(InlineMediaControls.prototype.layout):
Flip the inline volume button when not in LTR.
* Modules/modern-media-controls/controls/macos-fullscreen-media-controls.js:
(MacOSFullscreenMediaControls.prototype.layout):
(MacOSFullscreenMediaControls.prototype._volumeControlsForCurrentDirection): Added.
Reverse the order of the fullscreen volume controls when not in LTR.
* Modules/modern-media-controls/controls/macos-fullscreen-media-controls.css:
(.media-controls.mac.fullscreen:not(.uses-ltr-user-interface-layout-direction) :is(.volume-down, .volume.slider, .volume-up)): Added.
(.media-controls.mac.fullscreen:not(.uses-ltr-user-interface-layout-direction) .volume.slider): Deleted.
Also flip the fullscreen volume up and volume down buttons.
LayoutTests:
`MacOSFullscreenMediaControls` defaults to having `usesLTRUserInterfaceLayoutDirection` be
`false`, so flip the order of the volume controls to match the non-LTR UI.
* 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-constructor-expected.txt:
* media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-volume-styles.html:
Modified Paths
Diff
Modified: trunk/LayoutTests/ChangeLog (265708 => 265709)
--- trunk/LayoutTests/ChangeLog 2020-08-14 22:06:42 UTC (rev 265708)
+++ trunk/LayoutTests/ChangeLog 2020-08-14 22:14:22 UTC (rev 265709)
@@ -1,3 +1,18 @@
+2020-08-14 Devin Rousso <[email protected]>
+
+ RTL: volume slider and icons are backwards
+ https://bugs.webkit.org/show_bug.cgi?id=215482
+ <rdar://problem/65730749>
+
+ Reviewed by Eric Carlson.
+
+ `MacOSFullscreenMediaControls` defaults to having `usesLTRUserInterfaceLayoutDirection` be
+ `false`, so flip the order of the volume controls to match the non-LTR UI.
+
+ * 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-constructor-expected.txt:
+ * media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-volume-styles.html:
+
2020-08-14 Kenneth Russell <[email protected]>
[WebGL2] expando-loss and expando-loss-2 conformance tests are failing
Modified: trunk/LayoutTests/media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-constructor-expected.txt (265708 => 265709)
--- trunk/LayoutTests/media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-constructor-expected.txt 2020-08-14 22:06:42 UTC (rev 265708)
+++ trunk/LayoutTests/media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-constructor-expected.txt 2020-08-14 22:14:22 UTC (rev 265709)
@@ -14,7 +14,7 @@
PASS mediaControls.bottomControlsBar.children[3] instanceof ButtonsContainer is true
Left container
-PASS mediaControls.bottomControlsBar.children[1].children is [mediaControls.volumeDownButton, mediaControls.volumeSlider, mediaControls.volumeUpButton]
+PASS mediaControls.bottomControlsBar.children[1].children is [mediaControls.volumeUpButton, mediaControls.volumeSlider, mediaControls.volumeDownButton]
PASS mediaControls.bottomControlsBar.children[1].element.className is "buttons-container left"
PASS mediaControls.bottomControlsBar.children[1].leftMargin is 12
PASS mediaControls.bottomControlsBar.children[1].rightMargin is 0
Modified: trunk/LayoutTests/media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-constructor.html (265708 => 265709)
--- trunk/LayoutTests/media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-constructor.html 2020-08-14 22:06:42 UTC (rev 265708)
+++ trunk/LayoutTests/media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-constructor.html 2020-08-14 22:14:22 UTC (rev 265709)
@@ -20,7 +20,7 @@
debug("");
debug("Left container");
-shouldBe("mediaControls.bottomControlsBar.children[1].children", "[mediaControls.volumeDownButton, mediaControls.volumeSlider, mediaControls.volumeUpButton]");
+shouldBe("mediaControls.bottomControlsBar.children[1].children", "[mediaControls.volumeUpButton, mediaControls.volumeSlider, mediaControls.volumeDownButton]");
shouldBeEqualToString("mediaControls.bottomControlsBar.children[1].element.className", "buttons-container left");
shouldBe("mediaControls.bottomControlsBar.children[1].leftMargin", "12");
shouldBe("mediaControls.bottomControlsBar.children[1].rightMargin", "0");
Modified: trunk/LayoutTests/media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-volume-styles.html (265708 => 265709)
--- trunk/LayoutTests/media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-volume-styles.html 2020-08-14 22:06:42 UTC (rev 265708)
+++ trunk/LayoutTests/media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-volume-styles.html 2020-08-14 22:14:22 UTC (rev 265709)
@@ -9,6 +9,8 @@
window.jsTestIsAsync = true;
const mediaControls = new MacOSFullscreenMediaControls;
+mediaControls.usesLTRUserInterfaceLayoutDirection = true;
+
document.body.appendChild(mediaControls.element);
shouldBecomeEqualToString("window.getComputedStyle(mediaControls.volumeSlider.element).left", "30px", () => {
Modified: trunk/Source/WebCore/ChangeLog (265708 => 265709)
--- trunk/Source/WebCore/ChangeLog 2020-08-14 22:06:42 UTC (rev 265708)
+++ trunk/Source/WebCore/ChangeLog 2020-08-14 22:14:22 UTC (rev 265709)
@@ -1,3 +1,25 @@
+2020-08-14 Devin Rousso <[email protected]>
+
+ RTL: volume slider and icons are backwards
+ https://bugs.webkit.org/show_bug.cgi?id=215482
+ <rdar://problem/65730749>
+
+ Reviewed by Eric Carlson.
+
+ * Modules/modern-media-controls/controls/inline-media-controls.js:
+ (InlineMediaControls.prototype.layout):
+ Flip the inline volume button when not in LTR.
+
+ * Modules/modern-media-controls/controls/macos-fullscreen-media-controls.js:
+ (MacOSFullscreenMediaControls.prototype.layout):
+ (MacOSFullscreenMediaControls.prototype._volumeControlsForCurrentDirection): Added.
+ Reverse the order of the fullscreen volume controls when not in LTR.
+
+ * Modules/modern-media-controls/controls/macos-fullscreen-media-controls.css:
+ (.media-controls.mac.fullscreen:not(.uses-ltr-user-interface-layout-direction) :is(.volume-down, .volume.slider, .volume-up)): Added.
+ (.media-controls.mac.fullscreen:not(.uses-ltr-user-interface-layout-direction) .volume.slider): Deleted.
+ Also flip the fullscreen volume up and volume down buttons.
+
2020-08-14 Kenneth Russell <[email protected]>
[WebGL2] expando-loss and expando-loss-2 conformance tests are failing
Modified: trunk/Source/WebCore/Modules/modern-media-controls/controls/inline-media-controls.js (265708 => 265709)
--- trunk/Source/WebCore/Modules/modern-media-controls/controls/inline-media-controls.js 2020-08-14 22:06:42 UTC (rev 265708)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/inline-media-controls.js 2020-08-14 22:14:22 UTC (rev 265709)
@@ -166,7 +166,7 @@
this.rightContainer.children = this._rightContainerButtons();
this.rightContainer.children.concat(this.leftContainer.children).forEach(button => delete button.dropped);
this.muteButton.style = this.preferredMuteButtonStyle;
- this.muteButton.usesRTLIconVariant = false;
+ this.muteButton.usesRTLIconVariant = !this.usesLTRUserInterfaceLayoutDirection;
for (let button of this._droppableButtons()) {
// If the button is not enabled, we can skip it.
Modified: trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-fullscreen-media-controls.css (265708 => 265709)
--- trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-fullscreen-media-controls.css 2020-08-14 22:06:42 UTC (rev 265708)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-fullscreen-media-controls.css 2020-08-14 22:14:22 UTC (rev 265709)
@@ -40,9 +40,9 @@
height: var(--fullscreen-controls-bar-height);
}
-/* Volume slider */
+/* Volume controls */
-.media-controls.mac.fullscreen:not(.uses-ltr-user-interface-layout-direction) .volume.slider {
+.media-controls.mac.fullscreen:not(.uses-ltr-user-interface-layout-direction) :is(.volume-down, .volume.slider, .volume-up) {
transform: scaleX(-1);
}
Modified: trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-fullscreen-media-controls.js (265708 => 265709)
--- trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-fullscreen-media-controls.js 2020-08-14 22:06:42 UTC (rev 265708)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-fullscreen-media-controls.js 2020-08-14 22:14:22 UTC (rev 265709)
@@ -51,7 +51,7 @@
this.volumeSlider.width = 60;
this._leftContainer = new ButtonsContainer({
- children: [this.volumeDownButton, this.volumeSlider, this.volumeUpButton],
+ children: this._volumeControlsForCurrentDirection(),
cssClassName: "left",
leftMargin: 12,
rightMargin: 0,
@@ -124,6 +124,7 @@
this._rightContainer.buttonMargin = buttonMargin;
this._leftContainer.visible = this.muteButton.enabled;
+ this._leftContainer.children = this._volumeControlsForCurrentDirection();
this._leftContainer.layout();
this._centerContainer.layout();
@@ -143,6 +144,11 @@
// Private
+ _volumeControlsForCurrentDirection()
+ {
+ return this.usesLTRUserInterfaceLayoutDirection ? [this.volumeDownButton, this.volumeSlider, this.volumeUpButton] : [this.volumeUpButton, this.volumeSlider, this.volumeDownButton];
+ }
+
_handleMousedown(event)
{
// We don't allow dragging when the interaction is initiated on an interactive element.
