REGRESSION: Update volume and scrubbing slider to match HI designs
authorgraouts@webkit.org <graouts@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 14 Feb 2017 08:11:34 +0000 (08:11 +0000)
committergraouts@webkit.org <graouts@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 14 Feb 2017 08:11:34 +0000 (08:11 +0000)
commit0021820893c3e8199a6bbce4b3d066ad7fb3db5b
tree92b9f12a4ad51fcc132f282a0e1ce7811da7b9aa
parent95ef46c195918a1ea58a87dd71d572c950a90821
REGRESSION: Update volume and scrubbing slider to match HI designs
https://bugs.webkit.org/show_bug.cgi?id=168170
<rdar://problem/28095266>

Reviewed by Dean Jackson.

Source/WebCore:

We bring the designs of the control's background materials, scrubber and
volume slider up to spec.

The first important set of changes is that, on macOS, the materials and colors
were incorrect. Buttons and time labels now set a mix-blend-mode to correctly
appear vibrant against the media, and the controls bar, volume container
and tracks menu now use a new BackgroundTint node to correctly apply both
a backdrop-filter and blended tint above it.

The second important set of changes is the rendering of the sliders. Up to now
we would simply style the <input type="range"> track and thumb, applying solid
fills and strokes. We now draw sliders in two ways depending on the platform.

On macOS, we draw the whole slider with a <canvas> element with "mix-blend-mode"
set to "plus-lighter". On iOS, we draw the track as a <div> with "mix-blend-mode"
set to "plus-darker" and draw the fill (up to the thumb) in the <canvas> with
no blend mode to obtain a pure white color, finally the thumb is rendered by the
<input> element. We couldn't draw the pure white color with the track in the
same <canvas> due to the "plus-darker" blend mode.

Test: media/modern-media-controls/background-tint/background-tint.html

* Modules/modern-media-controls/controls/airplay-button.css:
(button.airplay.on):
* Modules/modern-media-controls/controls/background-tint.css: Added.
(.background-tint):
(.background-tint,):
(.background-tint > .blur):
(.background-tint > .tint):
* Modules/modern-media-controls/controls/background-tint.js: Added.
(BackgroundTint):
* Modules/modern-media-controls/controls/ios-inline-media-controls.css:
(.media-controls.ios.inline .scrubber.slider):
(.media-controls.ios.inline .scrubber.slider > div):
(.media-controls.ios.inline .scrubber.slider > input::-webkit-slider-thumb):
(.media-controls.ios.inline .scrubber.slider > .fill): Deleted.
* Modules/modern-media-controls/controls/macos-compact-inline-media-controls.css:
(.media-controls.mac.inline.compact .volume-slider-container):
(.media-controls.mac.inline.compact .volume.slider):
(.media-controls.mac.inline.compact .scrubber.slider > input::-webkit-slider-thumb): Deleted.
* Modules/modern-media-controls/controls/macos-fullscreen-media-controls.css:
(.media-controls.mac.fullscreen > .controls-bar):
(.media-controls.mac.fullscreen > .controls-bar > .background-tint > div):
(.media-controls.mac.fullscreen .volume.slider):
(.media-controls.mac.fullscreen button.volume-up):
(.media-controls.mac.fullscreen button.rewind):
(.media-controls.mac.fullscreen button.forward):
(.media-controls.mac.fullscreen .buttons-container.right button):
(.media-controls.mac.fullscreen .scrubber):
(.media-controls.mac.fullscreen > .controls-bar button): Deleted.
(.media-controls.mac.fullscreen button.airplay): Deleted.
(.media-controls.mac.fullscreen button.aspect-ratio): Deleted.
(.media-controls.mac.fullscreen button.pip): Deleted.
(.media-controls.mac.fullscreen button.tracks): Deleted.
(.media-controls.mac.fullscreen button.fullscreen): Deleted.
* Modules/modern-media-controls/controls/macos-fullscreen-media-controls.js:
* Modules/modern-media-controls/controls/macos-inline-media-controls.css:
(.media-controls.mac.inline .scrubber.slider):
(.media-controls.mac.inline .volume-slider-container):
(.media-controls.mac.inline .volume-slider-container > .background-tint):
(.media-controls.mac.inline .volume-slider-container > .background-tint > div):
(.media-controls.mac.inline .volume.slider):
(.media-controls.mac.inline button): Deleted.
(.media-controls.mac.inline button:active): Deleted.
(.media-controls.mac.inline > .controls-bar button): Deleted.
(.media-controls.mac.inline > .controls-bar,): Deleted.
(.media-controls.mac.inline .volume-slider-container:before): Deleted.
* Modules/modern-media-controls/controls/macos-inline-media-controls.js:
(MacOSInlineMediaControls.prototype.layout):
* Modules/modern-media-controls/controls/macos-media-controls.css: Added.
(.media-controls.mac button:active):
(.media-controls.mac > .controls-bar button):
(.media-controls.mac > .controls-bar .time-label):
(.media-controls.mac > .controls-bar .slider > canvas):
(.media-controls.mac > .controls-bar .slider > input::-webkit-slider-thumb):
* Modules/modern-media-controls/controls/scrubber.css: Removed.
* Modules/modern-media-controls/controls/scrubber.js:
(Scrubber):
(Scrubber.prototype.get buffered):
(Scrubber.prototype.set buffered):
(Scrubber.prototype.draw):
(Scrubber.prototype._drawMacOS):
(Scrubber.prototype._drawiOS):
* Modules/modern-media-controls/controls/slider.css:
(.slider):
(.slider > canvas,):
(.slider > canvas):
(.slider > input):
(.slider > input,): Deleted.
(.slider > .fill): Deleted.
(.slider > input::-webkit-slider-thumb): Deleted.
* Modules/modern-media-controls/controls/slider.js:
(Slider.prototype.set value):
(Slider.prototype.set width):
(Slider.prototype.commitProperty):
(Slider.prototype.layout):
(Slider.prototype.draw):
(Slider.prototype._handleInputEvent):
(Slider.prototype._handleChangeEvent):
(addRoundedRect):
(Slider.prototype._updateFill): Deleted.
* Modules/modern-media-controls/controls/start-button.css:
(button.start):
* Modules/modern-media-controls/controls/time-control.js:
* Modules/modern-media-controls/controls/time-label.css:
(.time-label):
* Modules/modern-media-controls/controls/tracks-panel.css:
(.tracks-panel):
(.tracks-panel > .background-tint > div):
(.tracks-panel > section):
(.tracks-panel > section:first-of-type):
(.tracks-panel > section > h3):
(.tracks-panel > section > ul):
(.tracks-panel > section > ul > li):
(.tracks-panel > section > ul > li:focus):
(.tracks-panel > section > ul > li.selected:before):
(.tracks-panel > section > ul > li.animated):
(.tracks-panel-section): Deleted.
(.tracks-panel-section:first-of-type): Deleted.
(.tracks-panel-section > h3): Deleted.
(.tracks-panel-section > ul): Deleted.
(.tracks-panel-section > ul > li): Deleted.
(.tracks-panel-section > ul > li:focus): Deleted.
(.tracks-panel-section > ul > li.selected:before): Deleted.
(.tracks-panel-section > ul > li.animated): Deleted.
* Modules/modern-media-controls/controls/tracks-panel.js:
(TracksPanel.prototype._childrenFromDataSource):
(TracksPanel.prototype._childrenFromDataSource.): Deleted.
* Modules/modern-media-controls/controls/volume-slider.js:
(VolumeSlider):
(VolumeSlider.prototype.handleEvent):
(VolumeSlider.prototype.draw):
* Modules/modern-media-controls/js-files:
* Modules/modern-media-controls/media/scrubbing-support.js:
(ScrubbingSupport.prototype.get mediaEvents):
(ScrubbingSupport.prototype.syncControl):
(ScrubbingSupport):

LayoutTests:

Rebaselining a host of existing tests to account for new DOM structure, metrics,
colors, blend modes, etc. We're also adding a new test for the BackgroundTint
class and removing one for the slider fill which is no longer appopriate since
we're drawing the slider's fill with a <canvas> element rather than a DOM element.

* media/modern-media-controls/background-tint/background-tint-expected.txt: Added.
* media/modern-media-controls/background-tint/background-tint.html: Added.
* media/modern-media-controls/ios-inline-media-controls/ios-inline-media-controls-time-control-styles-expected.txt:
* media/modern-media-controls/ios-inline-media-controls/ios-inline-media-controls-time-control-styles.html:
* media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-buttons-containers-styles.html:
* media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-buttons-styles-expected.txt:
* media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-buttons-styles.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-constructor.html:
* media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-controls-bar-styles-expected.txt:
* media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-controls-bar-styles.html:
* media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-right-container-margin.html:
* media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-time-control-styles-expected.txt:
* media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-time-control-styles.html:
* media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-volume-styles-expected.txt:
* media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-volume-styles.html:
* media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-buttons-styles-expected.txt:
* media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-buttons-styles.html:
* media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-constructor-expected.txt:
* media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-constructor.html:
* media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-controls-bar-styles-expected.txt:
* media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-controls-bar-styles.html:
* media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-layout-expected.txt:
* media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-layout.html:
* media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-resize-with-hidden-controls-bar.html:
* media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-time-control-styles-expected.txt:
* media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-time-control-styles.html:
* media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-volume-styles-expected.txt:
* media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-volume-styles.html:
* media/modern-media-controls/resources/media-controls-loader.js:
* media/modern-media-controls/scrubber/scrubber.html:
* media/modern-media-controls/slider/slider-constructor-expected.txt:
* media/modern-media-controls/slider/slider-constructor.html:
* media/modern-media-controls/slider/slider-fill-expected.txt: Removed.
* media/modern-media-controls/slider/slider-fill.html: Removed.
* media/modern-media-controls/slider/slider-styles-expected.txt:
* media/modern-media-controls/slider/slider-styles.html:
* media/modern-media-controls/time-label/time-label-expected.txt:
* media/modern-media-controls/time-label/time-label.html:
* media/modern-media-controls/tracks-panel/tracks-panel-population-expected.txt:
* media/modern-media-controls/tracks-panel/tracks-panel-population.html:
* media/modern-media-controls/tracks-support/tracks-support-show-and-populate-panel.html:
* media/modern-media-controls/volume-slider/volume-slider-value-expected.txt:
* media/modern-media-controls/volume-slider/volume-slider-value.html:
* media/modern-media-controls/volume-slider/volume-slider.html:
* media/modern-media-controls/volume-support/volume-support-click-expected.txt:
* media/modern-media-controls/volume-support/volume-support-click.html:
* media/modern-media-controls/volume-support/volume-support-drag-expected.txt:
* media/modern-media-controls/volume-support/volume-support-drag.html:

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@212280 268f45cc-cd09-0410-ab3c-d52691b4dbfc
72 files changed:
LayoutTests/ChangeLog
LayoutTests/media/modern-media-controls/background-tint/background-tint-expected.txt [new file with mode: 0644]
LayoutTests/media/modern-media-controls/background-tint/background-tint.html [new file with mode: 0644]
LayoutTests/media/modern-media-controls/ios-inline-media-controls/ios-inline-media-controls-time-control-styles-expected.txt
LayoutTests/media/modern-media-controls/ios-inline-media-controls/ios-inline-media-controls-time-control-styles.html
LayoutTests/media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-buttons-containers-styles.html
LayoutTests/media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-buttons-styles-expected.txt
LayoutTests/media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-buttons-styles.html
LayoutTests/media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-constructor-expected.txt
LayoutTests/media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-constructor.html
LayoutTests/media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-controls-bar-styles-expected.txt
LayoutTests/media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-controls-bar-styles.html
LayoutTests/media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-right-container-margin.html
LayoutTests/media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-time-control-styles-expected.txt
LayoutTests/media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-time-control-styles.html
LayoutTests/media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-volume-styles-expected.txt
LayoutTests/media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-volume-styles.html
LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-buttons-styles-expected.txt
LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-buttons-styles.html
LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-constructor-expected.txt
LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-constructor.html
LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-controls-bar-styles-expected.txt
LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-controls-bar-styles.html
LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-layout-expected.txt
LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-layout.html
LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-resize-with-hidden-controls-bar.html
LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-time-control-styles-expected.txt
LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-time-control-styles.html
LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-volume-styles-expected.txt
LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-volume-styles.html
LayoutTests/media/modern-media-controls/resources/media-controls-loader.js
LayoutTests/media/modern-media-controls/scrubber/scrubber.html
LayoutTests/media/modern-media-controls/slider/slider-constructor-expected.txt
LayoutTests/media/modern-media-controls/slider/slider-constructor.html
LayoutTests/media/modern-media-controls/slider/slider-fill-expected.txt [deleted file]
LayoutTests/media/modern-media-controls/slider/slider-fill.html [deleted file]
LayoutTests/media/modern-media-controls/slider/slider-styles-expected.txt
LayoutTests/media/modern-media-controls/slider/slider-styles.html
LayoutTests/media/modern-media-controls/time-label/time-label-expected.txt
LayoutTests/media/modern-media-controls/time-label/time-label.html
LayoutTests/media/modern-media-controls/tracks-panel/tracks-panel-population-expected.txt
LayoutTests/media/modern-media-controls/tracks-panel/tracks-panel-population.html
LayoutTests/media/modern-media-controls/tracks-support/tracks-support-show-and-populate-panel.html
LayoutTests/media/modern-media-controls/volume-slider/volume-slider-value-expected.txt
LayoutTests/media/modern-media-controls/volume-slider/volume-slider-value.html
LayoutTests/media/modern-media-controls/volume-slider/volume-slider.html
LayoutTests/media/modern-media-controls/volume-support/volume-support-click-expected.txt
LayoutTests/media/modern-media-controls/volume-support/volume-support-click.html
LayoutTests/media/modern-media-controls/volume-support/volume-support-drag-expected.txt
LayoutTests/media/modern-media-controls/volume-support/volume-support-drag.html
Source/WebCore/ChangeLog
Source/WebCore/Modules/modern-media-controls/controls/airplay-button.css
Source/WebCore/Modules/modern-media-controls/controls/background-tint.css [new file with mode: 0644]
Source/WebCore/Modules/modern-media-controls/controls/background-tint.js [moved from Source/WebCore/Modules/modern-media-controls/controls/scrubber.css with 84% similarity]
Source/WebCore/Modules/modern-media-controls/controls/ios-inline-media-controls.css
Source/WebCore/Modules/modern-media-controls/controls/macos-compact-inline-media-controls.css
Source/WebCore/Modules/modern-media-controls/controls/macos-fullscreen-media-controls.css
Source/WebCore/Modules/modern-media-controls/controls/macos-fullscreen-media-controls.js
Source/WebCore/Modules/modern-media-controls/controls/macos-inline-media-controls.css
Source/WebCore/Modules/modern-media-controls/controls/macos-inline-media-controls.js
Source/WebCore/Modules/modern-media-controls/controls/macos-media-controls.css [new file with mode: 0644]
Source/WebCore/Modules/modern-media-controls/controls/scrubber.js
Source/WebCore/Modules/modern-media-controls/controls/slider.css
Source/WebCore/Modules/modern-media-controls/controls/slider.js
Source/WebCore/Modules/modern-media-controls/controls/start-button.css
Source/WebCore/Modules/modern-media-controls/controls/time-control.js
Source/WebCore/Modules/modern-media-controls/controls/time-label.css
Source/WebCore/Modules/modern-media-controls/controls/tracks-panel.css
Source/WebCore/Modules/modern-media-controls/controls/tracks-panel.js
Source/WebCore/Modules/modern-media-controls/controls/volume-slider.js
Source/WebCore/Modules/modern-media-controls/js-files
Source/WebCore/Modules/modern-media-controls/media/scrubbing-support.js