Changeset 228462 in webkit


Ignore:
Timestamp:
Feb 13, 2018 10:57:41 PM (6 years ago)
Author:
jmarcell@apple.com
Message:

Cherry-pick r228445. rdar://problem/37523940

Location:
branches/safari-605-branch
Files:
25 edited

Legend:

Unmodified
Added
Removed

  • branches/safari-605-branch/LayoutTests/ChangeLog

    r228450 r228462  
     12018-02-13  Jason Marcell  <jmarcell@apple.com>
     2
     3        Cherry-pick r228445. rdar://problem/37523940
     4
     5    2018-02-13  Antoine Quint  <graouts@apple.com>
     6
     7            Removing the controls attribute from a <video> element does not tear down the controls shadow DOM nor cancel event listeners.
     8            https://bugs.webkit.org/show_bug.cgi?id=182668
     9
     10            Reviewed by Jer Noble.
     11
     12            Ensure controls are turned on for a number of tests that would fail otherwise since media events would not be handled by media
     13            controls without it.
     14
     15            * http/tests/media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-live-broadcast.html:
     16            * http/tests/media/modern-media-controls/pip-support/pip-support-live-broadcast.html:
     17            * http/tests/media/modern-media-controls/skip-back-support/skip-back-support-button-click.html:
     18            * http/tests/media/modern-media-controls/skip-back-support/skip-back-support-live-broadcast.html:
     19            * http/tests/media/modern-media-controls/status-support/status-support-live-broadcast.html:
     20            * http/tests/media/modern-media-controls/status-support/status-support-loading.html:
     21            * media/modern-media-controls/airplay-support/airplay-support.html:
     22            * media/modern-media-controls/mute-support/mute-support-media-api.html:
     23            * media/modern-media-controls/playback-support/playback-support-autoplay.html:
     24            * media/modern-media-controls/playback-support/playback-support-media-api.html:
     25            * media/modern-media-controls/start-support/start-support-error.html:
     26            * media/modern-media-controls/start-support/start-support-lowPowerMode.html:
     27            * media/modern-media-controls/start-support/start-support-manual-play.html:
     28            * media/modern-media-controls/status-support/status-support-error.html:
     29            * media/modern-media-controls/time-labels-support/elapsed-time.html:
     30            * media/modern-media-controls/time-labels-support/remaining-time.html:
     31            * media/modern-media-controls/tracks-support/tracks-support-audio-tracks.html:
     32            * media/modern-media-controls/tracks-support/tracks-support-text-tracks.html:
     33            * media/modern-media-controls/volume-support/volume-support-media-api-mute.html:
     34            * media/modern-media-controls/volume-support/volume-support-media-api.html:
     35
    1362018-02-13  Jason Marcell  <jmarcell@apple.com>
    237

  • branches/safari-605-branch/LayoutTests/http/tests/media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-live-broadcast.html

    r213920 r228462  
    33<script src="/media-resources/modern-media-controls/resources/media-controls-utils.js"></script>
    44<body>
    5 <video src="../../resources/hls/test-live.php" style="width: 800px;" autoplay></video>
     5<video src="../../resources/hls/test-live.php" style="width: 800px;" autoplay controls></video>
    66<div id="shadow"></div>
    77<script type="text/javascript">

  • branches/safari-605-branch/LayoutTests/http/tests/media/modern-media-controls/pip-support/pip-support-live-broadcast.html

    r211687 r228462  
    22<script src="/media-resources/modern-media-controls/resources/media-controls-loader.js"></script>
    33<body>
    4 <video src="../../resources/hls/test-live.php" style="width: 800px;" autoplay></video>
     4<video src="../../resources/hls/test-live.php" style="width: 800px;" autoplay controls></video>
    55<div id="shadow"></div>
    66<script type="text/javascript">

  • branches/safari-605-branch/LayoutTests/http/tests/media/modern-media-controls/skip-back-support/skip-back-support-button-click.html

    r208226 r228462  
    22<script src="/media-resources/modern-media-controls/resources/media-controls-loader.js"></script>
    33<body>
    4 <video src="../../resources/hls/generate-vod.php?duration=8000" style="width: 320px; height: 240px;"></video>
     4<video src="../../resources/hls/generate-vod.php?duration=8000" style="width: 320px; height: 240px;" controls></video>
    55<div id="shadow"></div>
    66<script type="text/javascript">

  • branches/safari-605-branch/LayoutTests/http/tests/media/modern-media-controls/skip-back-support/skip-back-support-live-broadcast.html

    r211641 r228462  
    22<script src="/media-resources/modern-media-controls/resources/media-controls-loader.js"></script>
    33<body>
    4 <video src="../../resources/hls/test-live.php" style="width: 800px;" autoplay></video>
     4<video src="../../resources/hls/test-live.php" style="width: 800px;" autoplay controls></video>
    55<div id="shadow"></div>
    66<script type="text/javascript">

  • branches/safari-605-branch/LayoutTests/http/tests/media/modern-media-controls/status-support/status-support-live-broadcast.html

    r208491 r228462  
    22<script src="/media-resources/modern-media-controls/resources/media-controls-loader.js"></script>
    33<body>
    4 <video src="../../resources/hls/test-live.php" style="width: 320px; height: 240px;" autoplay></video>
     4<video src="../../resources/hls/test-live.php" style="width: 320px; height: 240px;" autoplay controls></video>
    55<div id="shadow"></div>
    66<script type="text/javascript">

  • branches/safari-605-branch/LayoutTests/http/tests/media/modern-media-controls/status-support/status-support-loading.html

    r208491 r228462  
    22<script src="/media-resources/modern-media-controls/resources/media-controls-loader.js"></script>
    33<body>
    4 <video src="http://127.0.0.1:8000/resources/load-and-stall.cgi?name=../../../media/content/test.mp4&mimeType=video/mp4&stallAt=1&stallFor=4" style="width: 320px; height: 240px;"></video>
     4<video src="http://127.0.0.1:8000/resources/load-and-stall.cgi?name=../../../media/content/test.mp4&mimeType=video/mp4&stallAt=1&stallFor=4" style="width: 320px; height: 240px;" controls></video>
    55<div id="shadow"></div>
    66<script type="text/javascript">

  • branches/safari-605-branch/LayoutTests/media/modern-media-controls/airplay-support/airplay-support.html

    r219412 r228462  
    22<script src="../resources/media-controls-loader.js" type="text/javascript"></script>
    33<body>
    4 <video src="../../content/test.mp4" style="width: 320px; height: 240px;" autoplay></video>
     4<video src="../../content/test.mp4" style="width: 320px; height: 240px;" autoplay controls></video>
    55<div id="host"></div>
    66<script type="text/javascript">

  • branches/safari-605-branch/LayoutTests/media/modern-media-controls/mute-support/mute-support-media-api.html

    r208226 r228462  
    22<script src="../resources/media-controls-loader.js" type="text/javascript"></script>
    33<body>
    4 <video src="../../content/test.mp4" style="width: 320px; height: 240px;"></video>
     4<video src="../../content/test.mp4" style="width: 320px; height: 240px;" controls></video>
    55<div id="shadow"></div>
    66<script type="text/javascript">

  • branches/safari-605-branch/LayoutTests/media/modern-media-controls/playback-support/playback-support-autoplay.html

    r208226 r228462  
    22<script src="../resources/media-controls-loader.js" type="text/javascript"></script>
    33<body>
    4 <video src="../../content/test.mp4" style="width: 320px; height: 240px;" autoplay></video>
     4<video src="../../content/test.mp4" style="width: 320px; height: 240px;" autoplay controls></video>
    55<div id="shadow"></div>
    66<script type="text/javascript">

  • branches/safari-605-branch/LayoutTests/media/modern-media-controls/playback-support/playback-support-media-api.html

    r215916 r228462  
    22<script src="../resources/media-controls-loader.js" type="text/javascript"></script>
    33<body>
    4 <video src="../../content/test.mp4" style="width: 320px; height: 240px;"></video>
     4<video src="../../content/test.mp4" style="width: 320px; height: 240px;" controls></video>
    55<div id="shadow"></div>
    66<script type="text/javascript">

  • branches/safari-605-branch/LayoutTests/media/modern-media-controls/start-support/start-support-error.html

    r208226 r228462  
    22<script src="../resources/media-controls-loader.js" type="text/javascript"></script>
    33<body>
    4 <video src="404.mp4" style="width: 320px; height: 240px;"></video>
     4<video src="404.mp4" style="width: 320px; height: 240px;" controls></video>
    55<div id="shadow"></div>
    66<script type="text/javascript">

  • branches/safari-605-branch/LayoutTests/media/modern-media-controls/start-support/start-support-lowPowerMode.html

    r219710 r228462  
    4646    }
    4747});
     48
     49setTimeout(finishJSTest, 5000);
     50
    4851</script>
    4952<script src="../../../resources/js-test-post.js"></script>

  • branches/safari-605-branch/LayoutTests/media/modern-media-controls/start-support/start-support-manual-play.html

    r215916 r228462  
    22<script src="../resources/media-controls-loader.js" type="text/javascript"></script>
    33<body>
    4 <video src="../../content/test.mp4" style="width: 320px; height: 240px;"></video>
     4<video src="../../content/test.mp4" style="width: 320px; height: 240px;" controls></video>
    55<div id="shadow"></div>
    66<script type="text/javascript">

  • branches/safari-605-branch/LayoutTests/media/modern-media-controls/status-support/status-support-error.html

    r208491 r228462  
    22<script src="../resources/media-controls-loader.js" type="text/javascript"></script>
    33<body>
    4 <video src="404.mp4" style="width: 320px; height: 240px;"></video>
     4<video src="404.mp4" style="width: 320px; height: 240px;" controls></video>
    55<div id="shadow"></div>
    66<script type="text/javascript">

  • branches/safari-605-branch/LayoutTests/media/modern-media-controls/time-labels-support/elapsed-time.html

    r219715 r228462  
    22<script src="../resources/media-controls-loader.js" type="text/javascript"></script>
    33<body>
    4 <video src="../../content/test.mp4" style="width: 320px; height: 240px;"></video>
     4<video src="../../content/test.mp4" style="width: 320px; height: 240px;" controls></video>
    55<div id="shadow"></div>
    66<script type="text/javascript">

  • branches/safari-605-branch/LayoutTests/media/modern-media-controls/time-labels-support/remaining-time.html

    r219715 r228462  
    22<script src="../resources/media-controls-loader.js" type="text/javascript"></script>
    33<body>
    4 <video src="../../content/test.mp4" style="width: 320px; height: 240px;"></video>
     4<video src="../../content/test.mp4" style="width: 320px; height: 240px;" controls></video>
    55<div id="shadow"></div>
    66<script type="text/javascript">

  • branches/safari-605-branch/LayoutTests/media/modern-media-controls/tracks-support/tracks-support-audio-tracks.html

    r208585 r228462  
    22<script src="../resources/media-controls-loader.js" type="text/javascript"></script>
    33<body>
    4 <video src="../../content/audio-tracks.mp4" style="width: 320px; height: 240px;"></video>
     4<video src="../../content/audio-tracks.mp4" style="width: 320px; height: 240px;" controls></video>
    55<div id="shadow"></div>
    66<script type="text/javascript">

  • branches/safari-605-branch/LayoutTests/media/modern-media-controls/tracks-support/tracks-support-text-tracks.html

    r208585 r228462  
    22<script src="../resources/media-controls-loader.js" type="text/javascript"></script>
    33<body>
    4 <video src="../../content/counting-subtitled.m4v" style="width: 320px; height: 240px;"></video>
     4<video src="../../content/counting-subtitled.m4v" style="width: 320px; height: 240px;" controls></video>
    55<div id="shadow"></div>
    66<script type="text/javascript">

  • branches/safari-605-branch/LayoutTests/media/modern-media-controls/volume-support/volume-support-media-api-mute.html

    r208226 r228462  
    22<script src="../resources/media-controls-loader.js" type="text/javascript"></script>
    33<body>
    4 <video src="../../content/test.mp4" style="width: 320px; height: 240px;"></video>
     4<video src="../../content/test.mp4" style="width: 320px; height: 240px;" controls></video>
    55<div id="shadow"></div>
    66<script type="text/javascript">

  • branches/safari-605-branch/LayoutTests/media/modern-media-controls/volume-support/volume-support-media-api.html

    r208226 r228462  
    22<script src="../resources/media-controls-loader.js" type="text/javascript"></script>
    33<body>
    4 <video src="../../content/test.mp4" style="width: 320px; height: 240px;"></video>
     4<video src="../../content/test.mp4" style="width: 320px; height: 240px;" controls></video>
    55<div id="shadow"></div>
    66<script type="text/javascript">

  • branches/safari-605-branch/Source/WebCore/ChangeLog

    r228461 r228462  
     12018-02-13  Jason Marcell  <jmarcell@apple.com>
     2
     3        Cherry-pick r228445. rdar://problem/37523940
     4
     5    2018-02-13  Antoine Quint  <graouts@apple.com>
     6
     7            Removing the controls attribute from a <video> element does not tear down the controls shadow DOM nor cancel event listeners.
     8            https://bugs.webkit.org/show_bug.cgi?id=182668
     9            <rdar://problem/33793004>
     10
     11            Reviewed by Jer Noble.
     12
     13            When controls were turned off for inline media players, we would remove all media controls elements from the shadow root,
     14            but we would nevertheless continue to listen to media events and, as a result, update properties of the media controls
     15            which would lead to requestAnimationFrame() calls that would update the detached DOM nodes.
     16
     17            We now only listent to media events if controls are turned on.
     18
     19            * Modules/modern-media-controls/media/controls-visibility-support.js:
     20            (ControlsVisibilitySupport.prototype.enable): Remove the mutation observer from ControlsVisibilitySupport since observing
     21            changes to the controls attribute is now performed directly in MediaController. We need to make sure that we update the
     22            controls however since fadesWhileIdle is turned off in the disable() call to ensure that the auto-hide behavior is disabled
     23            as well.
     24            (ControlsVisibilitySupport.prototype.disable): Disable the auto-hide controller as well.
     25            (ControlsVisibilitySupport.prototype._updateControls): Remove code that has now been moved into MediaController._updateControlsAvailability().
     26            * Modules/modern-media-controls/media/media-controller.js:
     27            (MediaController): Listen to the "play" event on the media so that we call _updateControlsAvailability() in this situation to account for
     28            shouldForceControlsDisplay on MediaControlsHost. We also register for a mutation observer to track when the controls attribute availability
     29            changes in which case we want to call _updateControlsAvailability() as well.
     30            (MediaController.prototype.handleEvent): Call _updateControlsAvailability() instead of _updateiOSFullscreenProperties() which has been renamed
     31            and expanded.
     32            (MediaController.prototype._updateControlsIfNeeded): Call _updateControlsAvailability() after controls have been updated.
     33            (MediaController.prototype._updateControlsAvailability): We now disable supporting media controller objects when we know that controls should
     34            be hidden in all cases except when in fullscreen on macOS.
     35            (MediaController.prototype._updateiOSFullscreenProperties): Deleted.
     36            * Modules/modern-media-controls/media/placard-support.js:
     37            (PlacardSupport.prototype.disable): Only allow the media events required to track when to show placards when in fullscreen since inline media
     38            players need to show the AirPlay and picture-in-picture placards even when controls are disabled.
     39
    1402018-02-13  Jason Marcell  <jmarcell@apple.com>
    241

  • branches/safari-605-branch/Source/WebCore/Modules/modern-media-controls/media/controls-visibility-support.js

    r225279 r228462  
    3939    {
    4040        super.enable();
    41 
    42         if (this._controlsAttributeObserver)
    43             return;
    44 
    45         this._controlsAttributeObserver = new MutationObserver(this._updateControls.bind(this));
    46         this._controlsAttributeObserver.observe(this.mediaController.media, { attributes: true, attributeFilter: ["controls"] });
     41        this._updateControls();
    4742    }
    4843
    … …  
    5045    {
    5146        super.disable();
    52 
    53         if (!this._controlsAttributeObserver)
    54             return;
    55 
    56         this._controlsAttributeObserver.disconnect();
    57         delete this._controlsAttributeObserver;
     47        this.mediaController.controls.autoHideController.fadesWhileIdle = false;
    5848    }
    5949
    … …  
    7868    {
    7969        const media = this.mediaController.media;
    80         const host = this.mediaController.host;
    81         const shouldShowControls = !!(media.controls || (host && host.shouldForceControlsDisplay) || this.mediaController.isFullscreen);
    8270        const isVideo = media instanceof HTMLVideoElement && media.videoTracks.length > 0;
    83 
    84         const controls = this.mediaController.controls;
    85         controls.visible = shouldShowControls;
    86         controls.autoHideController.fadesWhileIdle = isVideo ? !media.paused && !media.webkitCurrentPlaybackTargetIsWireless : false;
     71        this.mediaController.controls.autoHideController.fadesWhileIdle = isVideo ? !media.paused && !media.webkitCurrentPlaybackTargetIsWireless : false;
    8772    }
    8873

  • branches/safari-605-branch/Source/WebCore/Modules/modern-media-controls/media/media-controller.js

    r226872 r228462  
    5757        media.videoTracks.addEventListener("removetrack", this);
    5858
     59        media.addEventListener("play", this);
    5960        media.addEventListener(this.fullscreenChangeEventType, this);
    6061
    6162        window.addEventListener("keydown", this);
     63
     64        new MutationObserver(this._updateControlsAvailability.bind(this)).observe(this.media, { attributes: true, attributeFilter: ["controls"] });
    6265    }
    6366
    … …  
    165168        } else if (event.currentTarget === this.media) {
    166169            this._updateControlsIfNeeded();
    167             this._updateiOSFullscreenProperties();
     170            this._updateControlsAvailability();
    168171            if (event.type === "webkitpresentationmodechanged")
    169172                this._returnMediaLayerToInlineIfNeeded();
    … …  
    215218
    216219        this.controls.shouldUseSingleBarLayout = this.controls instanceof InlineMediaControls && this.isYouTubeEmbedWithTitle;
     220
     221        this._updateControlsAvailability();
    217222    }
    218223
    … …  
    301306    }
    302307
    303     _updateiOSFullscreenProperties()
    304     {
    305         // On iOS, we want to make sure not to update controls when we're in fullscreen since the UI
    306         // will be completely invisible.
    307         if (!(this.layoutTraits & LayoutTraits.iOS))
    308             return;
    309 
    310         const isFullscreen = this.isFullscreen;
    311         if (isFullscreen)
     308    _updateControlsAvailability()
     309    {
     310        const shouldControlsBeAvailable = !!(this.media.controls || (this.host && this.host.shouldForceControlsDisplay) || ((this.layoutTraits & LayoutTraits.macOS) && this.isFullscreen));
     311
     312        if (!shouldControlsBeAvailable)
    312313            this._supportingObjects.forEach(supportingObject => supportingObject.disable());
    313314        else
    314315            this._supportingObjects.forEach(supportingObject => supportingObject.enable());
    315316
    316         this.controls.visible = !isFullscreen;
     317        this.controls.visible = shouldControlsBeAvailable;
    317318    }
    318319

  • branches/safari-605-branch/Source/WebCore/Modules/modern-media-controls/media/placard-support.js

    r218400 r228462  
    4545    }
    4646
     47    disable()
     48    {
     49        // We should not allow disabling Placard support when playing inline as it would prevent the
     50        // PiP placard from being shown if the controls are disabled.
     51        if (this.mediaController.isFullscreen)
     52            super.disable();
     53    }
     54
    4755    // Private
    4856
Note: See TracChangeset for help on using the changeset viewer.