Changeset 209228 in webkit


Ignore:
Timestamp:
Dec 1, 2016 6:11:05 PM (7 years ago)
Author:
graouts@webkit.org
Message:

[Modern Media Controls] Fade controls in when entering and exiting fullscreen
https://bugs.webkit.org/show_bug.cgi?id=165287

Reviewed by Dean Jackson.

Fade controls in when we enter and leave fullscreen.

Test: media/modern-media-controls/media-controller/media-controller-fade-controls-when-entering-fullscreen.html

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

(.media-controls.fade-in):
(@keyframes fade-in):
(to):

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

(MediaControls.prototype.presentInElement):

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

(FullscreenSupport.prototype.buttonWasClicked):

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

(MediaController.prototype._updateControlsIfNeeded):

Location:
trunk
Files:
2 added
8 edited

Legend:

Unmodified
Added
Removed
  • trunk/LayoutTests/ChangeLog

    r209227 r209228  
     12016-12-01  Antoine Quint  <graouts@apple.com>
     2
     3        [Modern Media Controls] Fade controls in when entering and exiting fullscreen
     4        https://bugs.webkit.org/show_bug.cgi?id=165287
     5
     6        Reviewed by Dean Jackson.
     7
     8        Add a new Mac-specific test that checks that we fade controls in when entering fullscreen.
     9
     10        * media/modern-media-controls/media-controller/media-controller-fade-controls-when-entering-fullscreen-expected.txt: Added.
     11        * media/modern-media-controls/media-controller/media-controller-fade-controls-when-entering-fullscreen.html: Added.
     12        * platform/ios-simulator/TestExpectations:
     13        * platform/mac/TestExpectations:
     14
    1152016-12-01  Antoine Quint  <graouts@apple.com>
    216
  • trunk/LayoutTests/platform/ios-simulator/TestExpectations

    r209227 r209228  
    27522752media/modern-media-controls/media-controller/media-controller-fullscreen-change.html [ Skip ]
    27532753media/modern-media-controls/media-controller/media-controller-fullscreen-ltr.html  [ Skip ]
     2754media/modern-media-controls/media-controller/media-controller-fade-controls-when-entering-fullscreen.html [ Skip ]
    27542755
    27552756# These tests are all Mac-specific, we never show the tracks menu on iOS
  • trunk/LayoutTests/platform/mac/TestExpectations

    r209227 r209228  
    14561456[ Yosemite ] media/modern-media-controls/tracks-support/tracks-support-show-and-populate-panel.html [ Skip ]
    14571457[ Yosemite ] media/modern-media-controls/tracks-support/tracks-support-click-track-in-panel.html [ Skip ]
     1458[ Yosemite ] media/modern-media-controls/media-controller/media-controller-fade-controls-when-entering-fullscreen.html
    14581459
    14591460webkit.org/b/164616 http/tests/media/modern-media-controls/skip-back-support/skip-back-support-button-click.html [ Pass Failure ]
  • trunk/Source/WebCore/ChangeLog

    r209227 r209228  
     12016-12-01  Antoine Quint  <graouts@apple.com>
     2
     3        [Modern Media Controls] Fade controls in when entering and exiting fullscreen
     4        https://bugs.webkit.org/show_bug.cgi?id=165287
     5
     6        Reviewed by Dean Jackson.
     7
     8        Fade controls in when we enter and leave fullscreen.
     9
     10        Test: media/modern-media-controls/media-controller/media-controller-fade-controls-when-entering-fullscreen.html
     11
     12        * Modules/modern-media-controls/controls/media-controls.css:
     13        (.media-controls.fade-in):
     14        (@keyframes fade-in):
     15        (to):
     16        * Modules/modern-media-controls/controls/media-controls.js:
     17        (MediaControls.prototype.presentInElement):
     18        * Modules/modern-media-controls/media/fullscreen-support.js:
     19        (FullscreenSupport.prototype.buttonWasClicked):
     20        * Modules/modern-media-controls/media/media-controller.js:
     21        (MediaController.prototype._updateControlsIfNeeded):
     22
    1232016-12-01  Antoine Quint  <graouts@apple.com>
    224
  • trunk/Source/WebCore/Modules/modern-media-controls/controls/media-controls.css

    r209194 r209228  
    4040    position: absolute;
    4141}
     42
     43.media-controls.fade-in {
     44    animation-name: fade-in;
     45    animation-duration: 350ms;
     46}
     47
     48@keyframes fade-in {
     49    from { opacity: 0 }
     50    to   { opacity: 1 }
     51}
  • trunk/Source/WebCore/Modules/modern-media-controls/controls/media-controls.js

    r209170 r209228  
    102102    }
    103103
     104    presentInElement(parentElement, animated)
     105    {
     106        if (animated)
     107            this.element.classList.add("fade-in");
     108        parentElement.appendChild(this.element);
     109    }
     110
    104111    // Private
    105112
  • trunk/Source/WebCore/Modules/modern-media-controls/media/fullscreen-support.js

    r208537 r209228  
    6161    buttonWasClicked(control)
    6262    {
     63        this.mediaController.controls.element.remove();
     64
    6365        const media = this.mediaController.media;
    6466        if (media.webkitDisplayingFullscreen)
  • trunk/Source/WebCore/Modules/modern-media-controls/media/media-controller.js

    r209227 r209228  
    101101        this.controls = new ControlsClass;
    102102
    103         if (previousControls) {
    104             this.shadowRoot.replaceChild(this.controls.element, previousControls.element);
     103        if (previousControls)
    105104            this.controls.usesLTRUserInterfaceLayoutDirection = previousControls.usesLTRUserInterfaceLayoutDirection;
    106         } else
    107             this.shadowRoot.appendChild(this.controls.element);       
     105
     106        this.controls.presentInElement(this.shadowRoot, !!previousControls);
    108107
    109108        this._updateControlsSize();
Note: See TracChangeset for help on using the changeset viewer.