Diff
Modified: trunk/LayoutTests/ChangeLog (213114 => 213115)
--- trunk/LayoutTests/ChangeLog 2017-02-28 02:24:56 UTC (rev 213114)
+++ trunk/LayoutTests/ChangeLog 2017-02-28 03:24:37 UTC (rev 213115)
@@ -1,5 +1,32 @@
2017-02-27 Antoine Quint <[email protected]>
+ [Modern Media Controls] Use compact mode by default on macOS
+ https://bugs.webkit.org/show_bug.cgi?id=168958
+ <rdar://problem/30748638>
+
+ 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 <[email protected]>
+
[Modern Media Controls] Adhere to tight padding on iOS
https://bugs.webkit.org/show_bug.cgi?id=168949
<rdar://problem/30746164>
Modified: trunk/LayoutTests/media/modern-media-controls/ios-inline-media-controls/ios-inline-media-controls-tight-padding.html (213114 => 213115)
--- 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)
@@ -6,7 +6,7 @@
description("Testing <code>IOSInlineMediaControls</code> with tight padding.");
-const mediaControls = new MacOSInlineMediaControls({ width: 400 });
+const mediaControls = new IOSInlineMediaControls({ width: 400 });
mediaControls.layoutTraits = LayoutTraits.iOS | LayoutTraits.TightPadding;
shouldBe("mediaControls.leftContainer.leftMargin", "12");
Modified: trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-compact-expected.txt (213114 => 213115)
--- 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)
@@ -4,7 +4,6 @@
PASS mediaControls.element.classList.contains('compact') is true
-PASS mediaControls.rightContainer.buttons is [mediaControls.muteButton, mediaControls.fullscreenButton]
PASS mediaControls.leftContainer.leftMargin is 8
PASS mediaControls.leftContainer.rightMargin is 12
PASS mediaControls.leftContainer.buttonMargin is 12
Modified: trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-compact.html (213114 => 213115)
--- 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)
@@ -10,7 +10,6 @@
mediaControls.layoutTraits = LayoutTraits.macOS | LayoutTraits.Compact;
shouldBeTrue("mediaControls.element.classList.contains('compact')");
-shouldBe("mediaControls.rightContainer.buttons", "[mediaControls.muteButton, mediaControls.fullscreenButton]");
shouldBe("mediaControls.leftContainer.leftMargin", "8");
shouldBe("mediaControls.leftContainer.rightMargin", "12");
shouldBe("mediaControls.leftContainer.buttonMargin", "12");
Deleted: trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-reduced-padding-expected.txt (213114 => 213115)
--- 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)
@@ -1,16 +0,0 @@
-Testing MacOSInlineMediaControls with reduced 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 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
-
Deleted: trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-reduced-padding.html (213114 => 213115)
--- 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)
@@ -1,22 +0,0 @@
-<script src=""
-<script src="" type="text/_javascript_"></script>
-<script src="" type="text/_javascript_"></script>
-<body>
-<script type="text/_javascript_">
-
-description("Testing <code>MacOSInlineMediaControls</code> with reduced padding.");
-
-const mediaControls = new MacOSInlineMediaControls({ width: 300 });
-mediaControls.layoutTraits = LayoutTraits.macOS | LayoutTraits.ReducedPadding;
-
-shouldBe("mediaControls.leftContainer.leftMargin", "12");
-shouldBe("mediaControls.leftContainer.rightMargin ", "16");
-shouldBe("mediaControls.leftContainer.buttonMargin", "16");
-shouldBe("mediaControls.rightContainer.leftMargin ", "0");
-shouldBe("mediaControls.rightContainer.rightMargin", "12");
-shouldBe("mediaControls.rightContainer.buttonMargin ", "16");
-debug("");
-
-</script>
-<script src=""
-</body>
Deleted: trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-tight-padding-expected.txt (213114 => 213115)
--- 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)
@@ -1,16 +0,0 @@
-Testing MacOSInlineMediaControls 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
-
Deleted: trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-tight-padding.html (213114 => 213115)
--- 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)
@@ -1,22 +0,0 @@
-<script src=""
-<script src="" type="text/_javascript_"></script>
-<script src="" type="text/_javascript_"></script>
-<body>
-<script type="text/_javascript_">
-
-description("Testing <code>MacOSInlineMediaControls</code> with tight padding.");
-
-const mediaControls = new MacOSInlineMediaControls({ width: 400 });
-mediaControls.layoutTraits = LayoutTraits.macOS | 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/LayoutTests/media/modern-media-controls/media-controller/media-controller-compact.html (213114 => 213115)
--- 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)
@@ -6,8 +6,8 @@
position: absolute;
left: 0;
top: 0;
- width: 240px;
- height: 180px;
+ width: 800px;
+ height: 600px;
}
</style>
Modified: trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-fullscreen-change-expected.txt (213114 => 213115)
--- 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)
@@ -8,7 +8,7 @@
PASS mediaController.controls instanceof MacOSFullscreenMediaControls is true
Media exited fullscreen
-PASS mediaController.layoutTraits is LayoutTraits.macOS
+PASS mediaController.layoutTraits is LayoutTraits.macOS | LayoutTraits.Compact
PASS mediaController.controls instanceof MacOSInlineMediaControls is true
PASS successfullyParsed is true
Modified: trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-fullscreen-change.html (213114 => 213115)
--- 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)
@@ -46,7 +46,7 @@
media.webkitExitFullscreen()
} else {
debug("Media exited fullscreen");
- shouldBe("mediaController.layoutTraits", "LayoutTraits.macOS");
+ shouldBe("mediaController.layoutTraits", "LayoutTraits.macOS | LayoutTraits.Compact");
shouldBeTrue("mediaController.controls instanceof MacOSInlineMediaControls");
debug("");
Deleted: trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-reduced-padding-expected.txt (213114 => 213115)
--- 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)
@@ -1,10 +0,0 @@
-Testing the MediaController sizing behavior with reduced padding mode.
-
-On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
-
-
-PASS !!(mediaController.controls.layoutTraits & LayoutTraits.ReducedPadding) became true
-PASS successfullyParsed is true
-
-TEST COMPLETE
-
Deleted: trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-reduced-padding.html (213114 => 213115)
--- 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)
@@ -1,31 +0,0 @@
-<script src=""
-<script src="" type="text/_javascript_"></script>
-<style type="text/css" media="screen">
-
- video, #shadow {
- position: absolute;
- left: 0;
- top: 0;
- width: 300px;
- height: 225px;
- }
-
-</style>
-<body>
-<video src="" controls autoplay></video>
-<div id="shadow"></div>
-<script type="text/_javascript_">
-
-window.jsTestIsAsync = true;
-
-description("Testing the <code>MediaController</code> sizing behavior with reduced padding mode.");
-
-const shadowRoot = document.querySelector("div#shadow").attachShadow({ mode: "open" });
-const media = document.querySelector("video");
-const mediaController = createControls(shadowRoot, media, null);
-
-shouldBecomeEqual("!!(mediaController.controls.layoutTraits & LayoutTraits.ReducedPadding)", "true", finishJSTest);
-
-</script>
-<script src=""
-</body>
Deleted: trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-toggle-compact-mode-expected.txt (213114 => 213115)
--- 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)
@@ -1,18 +0,0 @@
-Testing we toggle compact mode as we move past the threshold.
-
-On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
-
-
-Controls width = 600px
-mediaControls.classList.contains("compact") = false
-
-Controls width = 241px
-mediaControls.classList.contains("compact") = true
-
-Controls width = 242px
-mediaControls.classList.contains("compact") = false
-
-PASS successfullyParsed is true
-
-TEST COMPLETE
-
Deleted: trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-toggle-compact-mode.html (213114 => 213115)
--- 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)
@@ -1,45 +0,0 @@
-<!DOCTYPE html>
-<script src=""
-<body>
-<video src="" style="width: 600px; height: 240px;" controls autoplay></video>
-<script type="text/_javascript_">
-
-window.jsTestIsAsync = true;
-
-description("Testing we toggle compact mode as we move past the threshold.");
-
-const media = document.querySelector("video");
-const shadowRoot = window.internals.shadowRoot(media);
-let mediaControls;
-
-media.addEventListener("play", event => {
- media.pause();
- controlsResized();
- shadowRoot.addEventListener("resize", controlsResized);
-});
-
-let numberOfResizeEvents = 0;
-function controlsResized(event)
-{
- window.requestAnimationFrame(() => {
- numberOfResizeEvents++;
- mediaControls = shadowRoot.lastElementChild.lastElementChild
-
- debug(`Controls width = ${mediaControls.style.width}`);
- debug(`mediaControls.classList.contains("compact") = ${mediaControls.classList.contains("compact")}`);
- debug("");
-
- if (numberOfResizeEvents === 1)
- window.requestAnimationFrame(() => media.style.width = "241px");
- else if (numberOfResizeEvents === 2)
- window.requestAnimationFrame(() => media.style.width = "242px");
- else if (numberOfResizeEvents === 3) {
- media.remove();
- finishJSTest();
- }
- });
-}
-
-</script>
-<script src=""
-</body>
Modified: trunk/LayoutTests/platform/mac/TestExpectations (213114 => 213115)
--- 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)
@@ -1477,6 +1477,7 @@
media/modern-media-controls/ios-inline-media-controls/ios-inline-media-controls-audio-background.html [ Skip ]
media/modern-media-controls/media-controller/media-controller-ios-only-enable-tap-gesture-recognizer-with-fades-when-idle.html [ Skip ]
media/modern-media-controls/media-controller/media-controller-ios-do-not-hide-controls-when-tapping-button.html [ Skip ]
+media/modern-media-controls/media-controller/media-controller-tight-padding.html [ Skip ]
# This one always times out on the bots, cannot reproduce locally.
webkit.org/b/165234 media/modern-media-controls/audio/audio-controls-buttons.html [ Skip ]
Modified: trunk/Source/WebCore/ChangeLog (213114 => 213115)
--- 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)
@@ -1,5 +1,36 @@
2017-02-27 Antoine Quint <[email protected]>
+ [Modern Media Controls] Use compact mode by default on macOS
+ https://bugs.webkit.org/show_bug.cgi?id=168958
+ <rdar://problem/30748638>
+
+ 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 <[email protected]>
+
[Modern Media Controls] Adhere to tight padding on iOS
https://bugs.webkit.org/show_bug.cgi?id=168949
<rdar://problem/30746164>
Modified: trunk/Source/WebCore/Modules/modern-media-controls/controls/layout-item.js (213114 => 213115)
--- 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)
@@ -29,8 +29,7 @@
iOS : 1 << 1,
Fullscreen : 1 << 2,
Compact : 1 << 3,
- ReducedPadding : 1 << 4,
- TightPadding : 1 << 5
+ TightPadding : 1 << 4
};
class LayoutItem extends LayoutNode
Modified: trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-compact-inline-media-controls.css (213114 => 213115)
--- 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)
@@ -39,10 +39,6 @@
-webkit-mask-position-y: 6px;
}
-.media-controls.mac.inline.compact .scrubber.slider {
- top: 12px;
-}
-
.media-controls.mac.inline.compact button.mute {
-webkit-mask-position-y: 6px;
}
@@ -55,10 +51,16 @@
.media-controls.mac.inline.compact .time-label,
.media-controls.mac.inline.compact .status-label {
- top: 5px;
+ top: 4px;
font-size: 12px;
}
+/* Scrubber */
+
+.media-controls.mac.inline.compact .scrubber.slider {
+ top: 5px;
+}
+
/* Volume slider */
.media-controls.mac.inline.compact .volume-slider-container {
Modified: trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-inline-media-controls.js (213114 => 213115)
--- 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)
@@ -40,6 +40,7 @@
});
this.rightContainer = new ButtonsContainer({
+ buttons: [this.muteButton, this.airplayButton, this.pipButton, this.tracksButton, this.fullscreenButton],
cssClassName: "right"
});
@@ -115,20 +116,6 @@
this.rightContainer.leftMargin = 12;
this.rightContainer.rightMargin = 8;
this.rightContainer.buttonMargin = 12;
- } else if (layoutTraits & 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 & 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;
} else {
this.leftContainer.leftMargin = 24;
this.leftContainer.rightMargin = 24;
@@ -138,13 +125,9 @@
this.rightContainer.buttonMargin = 24;
}
- if (layoutTraits & LayoutTraits.Compact)
- this.rightContainer.buttons = [this.muteButton, this.fullscreenButton];
- else
- this.rightContainer.buttons = [this.muteButton, this.airplayButton, this.pipButton, this.tracksButton, this.fullscreenButton];
-
this.leftContainer.buttons.forEach(button => button.layoutTraitsDidChange());
this.rightContainer.buttons.forEach(button => button.layoutTraitsDidChange());
+ this.timeControl.scrubber.layoutTraitsDidChange();
this.element.classList.toggle("compact", layoutTraits & LayoutTraits.Compact);
}
Modified: trunk/Source/WebCore/Modules/modern-media-controls/controls/scrubber.js (213114 => 213115)
--- 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)
@@ -33,7 +33,7 @@
layoutDelegate
});
- this.height = 23;
+ this.layoutTraitsDidChange();
// Add the element used to draw the track on iOS.
if (this.layoutTraits & LayoutTraits.iOS)
@@ -58,6 +58,11 @@
this.needsLayout = true;
}
+ layoutTraitsDidChange()
+ {
+ this.height = (this.layoutTraits & LayoutTraits.Compact) ? 15 : 23;
+ }
+
// Protected
draw(ctx)
Modified: trunk/Source/WebCore/Modules/modern-media-controls/controls/time-control.js (213114 => 213115)
--- 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)
@@ -23,7 +23,8 @@
* OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*/
-const MinimumScrubberWidth = 168;
+const MinimumScrubberWidthDefault = 168;
+const MinimumScrubberWidthCompact = 124;
const ElapsedTimeLabelLeftMargin = -2;
const ElapsedTimeLabelWidth = 40;
const RemainingTimeLabelWidth = 49;
@@ -87,7 +88,7 @@
get isSufficientlyWide()
{
- return this.scrubber.width >= MinimumScrubberWidth;
+ return this.scrubber.width >= ((this.layoutTraits & LayoutTraits.Compact) ? MinimumScrubberWidthCompact : MinimumScrubberWidthDefault);
}
}
Modified: trunk/Source/WebCore/Modules/modern-media-controls/media/media-controller.js (213114 => 213115)
--- 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)
@@ -23,8 +23,6 @@
* OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*/
-const CompactModeMaxWidth = 241;
-const ReducedPaddingMaxWidth = 300;
const AudioTightPaddingMaxWidth = 400;
class MediaController
@@ -74,17 +72,12 @@
} else if (this.media.webkitDisplayingFullscreen)
return traits | LayoutTraits.Fullscreen;
- const controlsWidth = this._controlsWidth();
- if (controlsWidth <= CompactModeMaxWidth)
+ if (traits & LayoutTraits.macOS)
return traits | LayoutTraits.Compact;
- const isAudio = this.isAudio;
- if (isAudio && controlsWidth <= AudioTightPaddingMaxWidth)
+ if (this.isAudio && this._controlsWidth() <= AudioTightPaddingMaxWidth)
return traits | LayoutTraits.TightPadding;
- if (!isAudio && controlsWidth <= ReducedPaddingMaxWidth)
- return traits | LayoutTraits.ReducedPadding;
-
return traits;
}
