- Revision
- 280477
- Author
- [email protected]
- Date
- 2021-07-30 09:21:43 -0700 (Fri, 30 Jul 2021)
Log Message
[Media Controls] Add an option for having no scrubber on the time control and parameterize margin
https://bugs.webkit.org/show_bug.cgi?id=228633
rdar://81314458
Reviewed by Tim Horton.
Source/WebCore:
Add support for a scrubber bar that does not have a knob (or, to be clear, an
invisible knob). While here, move the constant for the margin into a custom
CSS property so it can be easily overridden.
* Modules/modern-media-controls/controls/media-controls.css:
(*): Add --scrubber-margin custom property.
* Modules/modern-media-controls/controls/slider.css:
(.slider > .custom-slider > .knob.none): Add style for a "none" knob.
* Modules/modern-media-controls/controls/slider.js:
(Slider.prototype.commit): Support "none".
* Modules/modern-media-controls/controls/time-control.js: Get the margin from
the new custom property.
(TimeControl.prototype.get minimumWidth):
(TimeControl.prototype.get idealMinimumWidth):
(TimeControl.prototype.layout):
(TimeControl.prototype._performIdealLayout):
LayoutTests:
Make sure the TimeControls element is in the document so its computed style
can be read.
* media/modern-media-controls/time-control/time-control.html:
Modified Paths
Diff
Modified: trunk/LayoutTests/ChangeLog (280476 => 280477)
--- trunk/LayoutTests/ChangeLog 2021-07-30 15:47:54 UTC (rev 280476)
+++ trunk/LayoutTests/ChangeLog 2021-07-30 16:21:43 UTC (rev 280477)
@@ -1,3 +1,16 @@
+2021-07-30 Dean Jackson <[email protected]>
+
+ [Media Controls] Add an option for having no scrubber on the time control and parameterize margin
+ https://bugs.webkit.org/show_bug.cgi?id=228633
+ rdar://81314458
+
+ Reviewed by Tim Horton.
+
+ Make sure the TimeControls element is in the document so its computed style
+ can be read.
+
+ * media/modern-media-controls/time-control/time-control.html:
+
2021-07-30 Eric Hutchison <[email protected]>
[ BigSur Release wk2 arm64] imported/w3c/web-platform-tests/html/cross-origin-opener-policy/iframe-popup-unsafe-none-to-same-origin.https.html.
Modified: trunk/LayoutTests/media/modern-media-controls/time-control/time-control.html (280476 => 280477)
--- trunk/LayoutTests/media/modern-media-controls/time-control/time-control.html 2021-07-30 15:47:54 UTC (rev 280476)
+++ trunk/LayoutTests/media/modern-media-controls/time-control/time-control.html 2021-07-30 16:21:43 UTC (rev 280477)
@@ -6,6 +6,7 @@
description("Testing the <code>TimeControl</code> class.");
const timeControl = new TimeControl({ layoutTraits: new MacOSLayoutTraits(LayoutTraits.Mode.Inline) });
+document.body.appendChild(timeControl.element);
shouldBeEqualToString("timeControl.element.localName", "div");
shouldBeEqualToString("timeControl.element.className", "time-control");
@@ -87,6 +88,8 @@
debug("");
+timeControl.element.remove();
+
</script>
<script src=""
</body>
Modified: trunk/Source/WebCore/ChangeLog (280476 => 280477)
--- trunk/Source/WebCore/ChangeLog 2021-07-30 15:47:54 UTC (rev 280476)
+++ trunk/Source/WebCore/ChangeLog 2021-07-30 16:21:43 UTC (rev 280477)
@@ -1,3 +1,28 @@
+2021-07-30 Dean Jackson <[email protected]>
+
+ [Media Controls] Add an option for having no scrubber on the time control and parameterize margin
+ https://bugs.webkit.org/show_bug.cgi?id=228633
+ rdar://81314458
+
+ Reviewed by Tim Horton.
+
+ Add support for a scrubber bar that does not have a knob (or, to be clear, an
+ invisible knob). While here, move the constant for the margin into a custom
+ CSS property so it can be easily overridden.
+
+ * Modules/modern-media-controls/controls/media-controls.css:
+ (*): Add --scrubber-margin custom property.
+ * Modules/modern-media-controls/controls/slider.css:
+ (.slider > .custom-slider > .knob.none): Add style for a "none" knob.
+ * Modules/modern-media-controls/controls/slider.js:
+ (Slider.prototype.commit): Support "none".
+ * Modules/modern-media-controls/controls/time-control.js: Get the margin from
+ the new custom property.
+ (TimeControl.prototype.get minimumWidth):
+ (TimeControl.prototype.get idealMinimumWidth):
+ (TimeControl.prototype.layout):
+ (TimeControl.prototype._performIdealLayout):
+
2021-07-30 Chris Dumez <[email protected]>
postMessage() should throw if any duplicate transferable is found in transferList
Modified: trunk/Source/WebCore/Modules/modern-media-controls/controls/media-controls.css (280476 => 280477)
--- trunk/Source/WebCore/Modules/modern-media-controls/controls/media-controls.css 2021-07-30 15:47:54 UTC (rev 280476)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/media-controls.css 2021-07-30 16:21:43 UTC (rev 280477)
@@ -41,6 +41,7 @@
--fullscreen-controls-bar-height: 75px;
--primary-glyph-color: rgba(255, 255, 255, 0.75);
--secondary-glyph-color: rgba(255, 255, 255, 0.55);
+ --scrubber-margin: 5px;
}
:host(audio), :host(video.media-document.audio), * {
Modified: trunk/Source/WebCore/Modules/modern-media-controls/controls/slider.css (280476 => 280477)
--- trunk/Source/WebCore/Modules/modern-media-controls/controls/slider.css 2021-07-30 15:47:54 UTC (rev 280476)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/slider.css 2021-07-30 16:21:43 UTC (rev 280477)
@@ -89,6 +89,14 @@
border-radius: 4px;
}
+.slider > .custom-slider > .knob.none {
+ top: -2px;
+ width: 9px;
+ height: 9px;
+ border-radius: 50%;
+ background-color: transparent;
+}
+
.slider > input {
top: 0;
margin: 0;
Modified: trunk/Source/WebCore/Modules/modern-media-controls/controls/slider.js (280476 => 280477)
--- trunk/Source/WebCore/Modules/modern-media-controls/controls/slider.js 2021-07-30 15:47:54 UTC (rev 280476)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/slider.js 2021-07-30 16:21:43 UTC (rev 280477)
@@ -143,8 +143,32 @@
{
super.commit();
- let scrubberWidth = this._knobStyle === Slider.KnobStyle.Bar ? 4 : 9;
- let scrubberBorder = this._knobStyle === Slider.KnobStyle.Bar ? 1 : (-1 * scrubberWidth / 2);
+ let scrubberWidth = (style => {
+ switch (style) {
+ case Slider.KnobStyle.Bar:
+ return 4;
+ case Slider.KnobStyle.Circle:
+ return 9;
+ case Slider.KnobStyle.None:
+ return 0;
+ }
+ console.error("Unknown Slider.KnobStyle");
+ return 0;
+ })(this._knobStyle);
+
+ let scrubberBorder = (style => {
+ switch (style) {
+ case Slider.KnobStyle.Bar:
+ return 1;
+ case Slider.KnobStyle.Circle:
+ return (-1 * scrubberWidth / 2);
+ case Slider.KnobStyle.None:
+ return 0;
+ }
+ console.error("Unknown Slider.KnobStyle");
+ return 0;
+ })(this._knobStyle);
+
let scrubberCenterX = (scrubberWidth / 2) + Math.round((this.width - scrubberWidth) * this.value);
this._primaryFill.element.style.width = `${scrubberCenterX - (scrubberWidth / 2) - scrubberBorder}px`;
this._trackFill.element.style.left = `${scrubberCenterX + (scrubberWidth / 2) + scrubberBorder}px`;
@@ -210,4 +234,5 @@
Slider.KnobStyle = {
Circle: "circle",
Bar: "bar",
+ None: "none",
};
Modified: trunk/Source/WebCore/Modules/modern-media-controls/controls/time-control.js (280476 => 280477)
--- trunk/Source/WebCore/Modules/modern-media-controls/controls/time-control.js 2021-07-30 15:47:54 UTC (rev 280476)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/time-control.js 2021-07-30 16:21:43 UTC (rev 280477)
@@ -101,13 +101,15 @@
get minimumWidth()
{
this._performIdealLayout();
- return MinimumScrubberWidth + ScrubberMargin + this._durationOrRemainingTimeLabel().width;
+ const scrubberMargin = this.computedValueForStylePropertyInPx("--scrubber-margin");
+ return MinimumScrubberWidth + scrubberMargin + this._durationOrRemainingTimeLabel().width;
}
get idealMinimumWidth()
{
this._performIdealLayout();
- return this.elapsedTimeLabel.width + ScrubberMargin + MinimumScrubberWidth + ScrubberMargin + this._durationOrRemainingTimeLabel().width;
+ const scrubberMargin = this.computedValueForStylePropertyInPx("--scrubber-margin");
+ return this.elapsedTimeLabel.width + MinimumScrubberWidth + (2 * scrubberMargin) + this._durationOrRemainingTimeLabel().width;
}
// Protected
@@ -130,8 +132,9 @@
// We drop the elapsed time label if width is constrained and we can't guarantee
// the scrubber minimum size otherwise.
this.scrubber.x = 0;
- this.scrubber.width = this.width - ScrubberMargin - durationOrRemainingTimeLabel.width;
- durationOrRemainingTimeLabel.x = this.scrubber.x + this.scrubber.width + ScrubberMargin;
+ const scrubberMargin = this.computedValueForStylePropertyInPx("--scrubber-margin");
+ this.scrubber.width = this.width - scrubberMargin - durationOrRemainingTimeLabel.width;
+ durationOrRemainingTimeLabel.x = this.scrubber.x + this.scrubber.width + scrubberMargin;
this.elapsedTimeLabel.visible = false;
}
@@ -196,9 +199,10 @@
let durationOrRemainingTimeLabel = this._durationOrRemainingTimeLabel();
- this.scrubber.x = (this._loading ? this.activityIndicator.width : this.elapsedTimeLabel.width) + ScrubberMargin;
- this.scrubber.width = this.width - this.scrubber.x - ScrubberMargin - durationOrRemainingTimeLabel.width;
- durationOrRemainingTimeLabel.x = this.scrubber.x + this.scrubber.width + ScrubberMargin;
+ const scrubberMargin = this.computedValueForStylePropertyInPx("--scrubber-margin");
+ this.scrubber.x = (this._loading ? this.activityIndicator.width : this.elapsedTimeLabel.width) + scrubberMargin;
+ this.scrubber.width = this.width - this.scrubber.x - scrubberMargin - durationOrRemainingTimeLabel.width;
+ durationOrRemainingTimeLabel.x = this.scrubber.x + this.scrubber.width + scrubberMargin;
this.children = [this._loading ? this.activityIndicator : this.elapsedTimeLabel, this.scrubber, durationOrRemainingTimeLabel];
}
