Changeset 272352 in webkit

Timestamp:

Feb 3, 2021 7:55:25 PM (18 months ago)

Author:

Devin Rousso

Message:

[macOS] update media controls time scrubber styles
​https://bugs.webkit.org/show_bug.cgi?id=221360

Reviewed by Eric Carlson.

• Modules/modern-media-controls/controls/slider.js:

(Slider):
(Slider.prototype.commit):

• Modules/modern-media-controls/controls/slider.css:

(.slider > .custom-slider > .fill):
(.slider > .custom-slider > .primary):
(.slider > .custom-slider > .secondary):
(.slider > .custom-slider > .knob):
(.slider > .custom-slider > .knob.circle): Added.
(.slider > .custom-slider > .knob.bar): Added.
(.slider > .custom-slider > .track): Deleted.
Add a new KnobStyle enum that's used to control the CSS applied to the knob. Currently
there are two values: Circle (default) and Bar.

• Modules/modern-media-controls/controls/time-control.js:

Use Slider.KnobStyle.Bar.

• Modules/modern-media-controls/controls/macos-fullscreen-media-controls.js:

(MacOSInlineMediaControls):

• Modules/modern-media-controls/controls/macos-inline-media-controls.js:

(MacOSFullscreenMediaControls):
Set the secondaryValue so that the track after the knob is visible. The default value of
secondaryValue is 0, meaning that it sets right: 100%; on the track after the knob.
By setting the secondaryValue to 1 it causes right: 0%;, which fills the space.

Location:

trunk/Source/WebCore

Files:

• ChangeLog (modified) (1 diff)
• Modules/modern-media-controls/controls/macos-fullscreen-media-controls.js (modified) (1 diff)
• Modules/modern-media-controls/controls/macos-inline-media-controls.js (modified) (1 diff)
• Modules/modern-media-controls/controls/slider.css (modified) (1 diff)
• Modules/modern-media-controls/controls/slider.js (modified) (4 diffs)
• Modules/modern-media-controls/controls/time-control.js (modified) (1 diff)

trunk/Source/WebCore/ChangeLog

@@ +1 @@
+2021-02-03  Devin Rousso  <drousso@apple.com>
+
+        [macOS] update media controls time scrubber styles
+        https://bugs.webkit.org/show_bug.cgi?id=221360
+
+        Reviewed by Eric Carlson.
+
+        * Modules/modern-media-controls/controls/slider.js:
+        (Slider):
+        (Slider.prototype.commit):
+        * Modules/modern-media-controls/controls/slider.css:
+        (.slider > .custom-slider > .fill):
+        (.slider > .custom-slider > .primary):
+        (.slider > .custom-slider > .secondary):
+        (.slider > .custom-slider > .knob):
+        (.slider > .custom-slider > .knob.circle): Added.
+        (.slider > .custom-slider > .knob.bar): Added.
+        (.slider > .custom-slider > .track): Deleted.
+        Add a new `KnobStyle` enum that's used to control the CSS applied to the knob. Currently
+        there are two values: `Circle` (default) and `Bar`.
+
+        * Modules/modern-media-controls/controls/time-control.js:
+        Use `Slider.KnobStyle.Bar`.
+
+        * Modules/modern-media-controls/controls/macos-fullscreen-media-controls.js:
+        (MacOSInlineMediaControls):
+        * Modules/modern-media-controls/controls/macos-inline-media-controls.js:
+        (MacOSFullscreenMediaControls):
+        Set the `secondaryValue` so that the track after the knob is visible. The default value of
+        `secondaryValue` is `0`, meaning that it sets `right: 100%;` on the track after the knob.
+        By setting the `secondaryValue` to `1` it causes `right: 0%;`, which fills the space.
+
 2021-02-03  Diego Pino Garcia  <dpino@igalia.com>
 

trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-fullscreen-media-controls.js

@@ -50 +50 @@
         this.volumeSlider = new Slider("volume");
         this.volumeSlider.width = 60;
+        this.volumeSlider.secondaryValue = 1;
 
         this._leftContainer = new ButtonsContainer({

trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-inline-media-controls.js

@@ -41 +41 @@
         this.volumeSlider = new Slider("volume");
         this.volumeSlider.width = 60;
+        this.volumeSlider.secondaryValue = 1;
 
         this._volumeSliderContainer = new LayoutNode(`<div class="volume-slider-container"></div>`);

trunk/Source/WebCore/Modules/modern-media-controls/controls/slider.css

@@ -48 +48 @@
     top: 0;
     height: 100%;
-    border-radius: 4.5px;
     mix-blend-mode: plus-lighter;
-}
-
-.slider > .custom-slider > .track {
-    left: 0;
-    width: 100%;
-    background-color: rgba(255, 255, 255, 0.1);
 }
 
 .slider > .custom-slider > .primary {
     left: 0;
-    background-color: rgba(255, 255, 255, 0.35);
+    background-color: rgba(255, 255, 255, 0.45);
+    border-top-left-radius: 4.5px;
+    border-bottom-left-radius: 4.5px;
 }
 
 .slider > .custom-slider > .secondary {
-    background-color: rgba(255, 255, 255, 0.08);
+    background-color: rgba(255, 255, 255, 0.18);
+    border-top-right-radius: 4.5px;
+    border-bottom-right-radius: 4.5px;
 }
 
 .slider > .custom-slider > .knob {
+    background-color: white;
+    transform: translateX(-50%);
+}
+
+.slider > .custom-slider > .knob.circle {
     top: -2px;
     width: 9px;
     height: 9px;
     border-radius: 50%;
-    background-color: white;
-    transform: translateX(-50%);
+}
+
+.slider > .custom-slider > .knob.bar {
+    top: -6px;
+    width: 4px;
+    height: 17px;
+    border-radius: 4px;
 }
 

trunk/Source/WebCore/Modules/modern-media-controls/controls/slider.js

@@ -27 +27 @@
 {
 
-    constructor(cssClassName = "")
+    constructor(cssClassName = "", knobStyle = Slider.KnobStyle.Circle)
     {
         super(`<div class="slider ${cssClassName}"></div>`);
 
         this._container = new LayoutNode(`<div class="custom-slider"></div>`);
-        this._track = new LayoutNode(`<div class="track fill"></div>`);
         this._primaryFill = new LayoutNode(`<div class="primary fill"></div>`);
         this._secondaryFill = new LayoutNode(`<div class="secondary fill"></div>`);
-        this._knob = new LayoutNode(`<div class="knob"></div>`);
-        this._container.children = [this._track, this._primaryFill, this._secondaryFill, this._knob];
+        this._knob = new LayoutNode(`<div class="knob ${knobStyle}"></div>`);
+        this._container.children = [this._primaryFill, this._secondaryFill, this._knob];
 
         this._input = new LayoutNode(`<input type="range" min="0" max="1" step="0.001" />`);
@@ -49 +48 @@
         this._secondaryValue = 0;
         this._disabled = false;
+        this._knobStyle = knobStyle;
 
         this.children = [this._container, this._input];
@@ -143 +143 @@
         super.commit();
 
-        const scrubberRadius = 4.5;
-        const scrubberCenterX = scrubberRadius + Math.round((this.width - (scrubberRadius * 2)) * this.value);
-        this._primaryFill.element.style.width = `${scrubberCenterX}px`;
-        this._secondaryFill.element.style.left = `${scrubberCenterX}px`;
+        let scrubberWidth = this._knobStyle === Slider.KnobStyle.Bar ? 4 : 9;
+        let scrubberBorder = this._knobStyle === Slider.KnobStyle.Bar ? 1 : (-1 * scrubberWidth / 2);
+        let scrubberCenterX = (scrubberWidth / 2) + Math.round((this.width - scrubberWidth) * this.value);
+        this._primaryFill.element.style.width = `${scrubberCenterX - (scrubberWidth / 2) - scrubberBorder}px`;
+        this._secondaryFill.element.style.left = `${scrubberCenterX + (scrubberWidth / 2) + scrubberBorder}px`;
         this._secondaryFill.element.style.right = `${(1 - this._secondaryValue) * 100}%`;
         this._knob.element.style.left = `${scrubberCenterX}px`;
@@ -204 +205 @@
     }
 }
+
+Slider.KnobStyle = {
+    Circle: "circle",
+    Bar: "bar",
+};

trunk/Source/WebCore/Modules/modern-media-controls/controls/time-control.js

@@ -41 +41 @@
 
         this.elapsedTimeLabel = new TimeLabel(TimeLabel.Types.Elapsed);
-        this.scrubber = new Slider("scrubber");
+        this.scrubber = new Slider("scrubber", this.layoutTraits & LayoutTraits.macOS ? Slider.KnobStyle.Bar : Slider.KnobStyle.Circle);
         this.remainingTimeLabel = new TimeLabel(TimeLabel.Types.Remaining);