Changeset 181091 in webkit
- Timestamp:
- Mar 5, 2015 11:52:10 AM (9 years ago)
- Location:
- trunk/Source/WebCore
- Files:
-
- 4 edited
Legend:
- Unmodified
- Added
- Removed
-
trunk/Source/WebCore/ChangeLog
r181090 r181091 1 2015-03-04 Dean Jackson <dino@apple.com> 2 3 [iOS Media] Use a blurry background for media controls 4 https://bugs.webkit.org/show_bug.cgi?id=142316 5 <rdar://problem/14911098> 6 7 Reviewed by Eric Carlson. 8 9 Start using the -webkit-appearance media-controls-light-bar-background 10 in order to get the blurry background of media controls. 11 12 * Modules/mediacontrols/mediaControlsApple.js: Keep the panel and the 13 panel background in sync when it comes to hiding and showing. It would 14 be better if this could be done on a container element in the future. 15 (Controller.prototype.handlePanelTransitionEnd): 16 (Controller.prototype.setPlaying): 17 (Controller.prototype.showControls): 18 (Controller.prototype.hideControls): 19 20 * Modules/mediacontrols/mediaControlsiOS.css: New background container 21 with the special appearance. I also renamed "composited-parent" to 22 "container", which makes more sense. 23 (video::-webkit-media-controls-panel-container): 24 (audio::-webkit-media-controls-panel-container): 25 (video::-webkit-media-controls-panel-background): 26 (audio::-webkit-media-controls-panel-background): 27 (video::-webkit-media-controls-panel-background.paused): 28 (video::-webkit-media-controls-panel): 29 (audio::-webkit-media-controls-panel): 30 (video::-webkit-media-controls-panel.paused): 31 (audio::-webkit-media-controls-optimized-fullscreen-button): 32 (audio::-webkit-media-controls-timeline): 33 (audio::-webkit-media-controls-timeline::-webkit-slider-thumb): 34 (video::-webkit-media-controls-panel-composited-parent): Deleted. 35 (video::-webkit-media-controls-panel:hover): Deleted. 36 37 * Modules/mediacontrols/mediaControlsiOS.js: 38 (ControllerIOS.prototype.createControls): Create the new background element. 39 (ControllerIOS.prototype.addControls): 40 (ControllerIOS.prototype.set pageScaleFactor): Temporarily disable 41 this because the background disappears when the zoom factor 42 is too high - we start tiling the background. This will be addressed 43 by https://bugs.webkit.org/show_bug.cgi?id=142317. 44 1 45 2015-03-05 Myles C. Maxfield <mmaxfield@apple.com> 2 46 -
trunk/Source/WebCore/Modules/mediacontrols/mediaControlsApple.js
r181085 r181091 719 719 { 720 720 var opacity = window.getComputedStyle(this.controls.panel).opacity; 721 if (parseInt(opacity) > 0) 721 if (parseInt(opacity) > 0) { 722 722 this.controls.panel.classList.remove(this.ClassNames.hidden); 723 else 723 if (this.controls.panelBackground) 724 this.controls.panelBackground.classList.remove(this.ClassNames.hidden); 725 } else { 724 726 this.controls.panel.classList.add(this.ClassNames.hidden); 727 if (this.controls.panelBackground) 728 this.controls.panelBackground.classList.add(this.ClassNames.hidden); 729 } 725 730 }, 726 731 … … 1184 1189 if (!isPlaying) { 1185 1190 this.controls.panel.classList.add(this.ClassNames.paused); 1191 if (this.controls.panelBackground) 1192 this.controls.panelBackground.classList.add(this.ClassNames.paused); 1186 1193 this.controls.playButton.classList.add(this.ClassNames.paused); 1187 1194 this.controls.playButton.setAttribute('aria-label', this.UIString('Play')); 1188 1195 } else { 1189 1196 this.controls.panel.classList.remove(this.ClassNames.paused); 1197 if (this.controls.panelBackground) 1198 this.controls.panelBackground.classList.remove(this.ClassNames.paused); 1190 1199 this.controls.playButton.classList.remove(this.ClassNames.paused); 1191 1200 this.controls.playButton.setAttribute('aria-label', this.UIString('Pause')); … … 1204 1213 this.controls.panel.classList.add(this.ClassNames.show); 1205 1214 this.controls.panel.classList.remove(this.ClassNames.hidden); 1215 1216 if (this.controls.panelBackground) { 1217 this.controls.panelBackground.classList.add(this.ClassNames.show); 1218 this.controls.panelBackground.classList.remove(this.ClassNames.hidden); 1219 } 1206 1220 }, 1207 1221 … … 1209 1223 { 1210 1224 this.controls.panel.classList.remove(this.ClassNames.show); 1225 if (this.controls.panelBackground) 1226 this.controls.panelBackground.classList.remove(this.ClassNames.show); 1211 1227 }, 1212 1228 -
trunk/Source/WebCore/Modules/mediacontrols/mediaControlsiOS.css
r181085 r181091 94 94 } 95 95 96 video::-webkit-media-controls-panel-co mposited-parent{96 video::-webkit-media-controls-panel-container { 97 97 -webkit-transform: translateZ(0); 98 98 width: 100%; 99 99 direction: ltr; 100 height: 50px; 101 position: absolute; 102 bottom: 0; 103 } 104 105 audio::-webkit-media-controls-panel-container { 106 -webkit-transform: translateZ(0); 107 width: 100%; 108 direction: ltr; 109 height: 39px; 110 position: absolute; 111 bottom: 0; 112 } 113 114 video::-webkit-media-controls-panel-background { 115 -webkit-transform: translateZ(0); 116 width: 101%; /* Due to some rounding issues we make this a little bit wider than should be necessary. */ 117 height: 51px; /* And taller. */ 118 -webkit-appearance: media-controls-light-bar-background; 119 transition: opacity 0.25s linear; 120 opacity: 0; 121 } 122 123 audio::-webkit-media-controls-panel-background { 124 display: none; 125 } 126 127 video::-webkit-media-controls-panel-background.show, 128 video::-webkit-media-controls-panel-background.paused { 129 opacity: 1; 100 130 } 101 131 … … 105 135 position: absolute; 106 136 bottom: 0; 137 width: 100%; 138 padding: 0; 107 139 108 140 -webkit-user-select: none; … … 125 157 video::-webkit-media-controls-panel { 126 158 height: 50px; 127 width: 100%;128 159 opacity: 0; 129 padding: 0; 130 background-color: rgba(255, 255, 255, 0.6); 160 -webkit-transform: translate3d(0, 0, 0); 131 161 } 132 162 133 163 audio::-webkit-media-controls-panel { 134 164 height: 39px; 135 width: 100%;136 padding: 0;137 165 background-color: rgba(228, 228, 228, 1); 138 166 } 139 167 140 168 video::-webkit-media-controls-panel.show, 141 video::-webkit-media-controls-panel.paused, 142 video::-webkit-media-controls-panel:hover { 169 video::-webkit-media-controls-panel.paused { 143 170 opacity: 1; 144 171 } … … 204 231 mix-blend-mode: plus-darker; 205 232 opacity: 0.55; 233 -webkit-transform: translate3d(0, 0, 0); 206 234 } 207 235 … … 333 361 border-radius: 0 !important; 334 362 box-sizing: content-box !important; 363 -webkit-transform: translate3d(0, 0, 0); 335 364 } 336 365 … … 353 382 background-color: transparent !important; 354 383 border: none !important; 355 356 /* rotateZ() forces the layer into compositing mode. Slider357 thumbs are small, so forcing a compositing layer is inexpensive,358 and it keeps the slider from having to repaint while sliding. */359 384 -webkit-transform: rotateZ(0deg); 360 385 } -
trunk/Source/WebCore/Modules/mediacontrols/mediaControlsiOS.js
r180906 r181091 159 159 Controller.prototype.createControls.call(this); 160 160 161 var panelCompositedParent = this.controls.panelCompositedParent = document.createElement('div'); 162 panelCompositedParent.setAttribute('pseudo', '-webkit-media-controls-panel-composited-parent'); 161 var panelContainer = this.controls.panelContainer = document.createElement('div'); 162 panelContainer.setAttribute('pseudo', '-webkit-media-controls-panel-container'); 163 164 var panelBackground = this.controls.panelBackground = document.createElement('div'); 165 panelBackground.setAttribute('pseudo', '-webkit-media-controls-panel-background'); 163 166 164 167 var spacer = this.controls.spacer = document.createElement('div'); … … 273 276 addControls: function() { 274 277 this.base.appendChild(this.controls.inlinePlaybackPlaceholder); 275 this.base.appendChild(this.controls.panelCompositedParent); 276 this.controls.panelCompositedParent.appendChild(this.controls.panel); 278 this.base.appendChild(this.controls.panelContainer); 279 this.controls.panelContainer.appendChild(this.controls.panelBackground); 280 this.controls.panelContainer.appendChild(this.controls.panel); 277 281 this.setNeedsTimelineMetricsUpdate(); 278 282 }, … … 650 654 this._pageScaleFactor = newScaleFactor; 651 655 652 if (newScaleFactor) { 653 var scaleValue = 1 / newScaleFactor; 654 var scaleTransform = "scale(" + scaleValue + ")"; 655 if (this.controls.startPlaybackButton) 656 this.controls.startPlaybackButton.style.webkitTransform = scaleTransform; 657 if (this.controls.panel) { 658 var bottomAligment = -2 * scaleValue; 659 this.controls.panel.style.bottom = bottomAligment + "px"; 660 this.controls.panel.style.paddingBottom = -(newScaleFactor * bottomAligment) + "px"; 661 this.controls.panel.style.width = Math.ceil(newScaleFactor * 100) + "%"; 662 this.controls.panel.style.webkitTransform = scaleTransform; 663 this.setNeedsTimelineMetricsUpdate(); 664 this.updateProgress(); 665 this.scheduleUpdateLayoutForDisplayedWidth(); 666 } 667 } 656 // FIXME: this should react to the scale change by 657 // unscaling the controls panel. However, this 658 // hits a bug with the backdrop blur layer getting 659 // too big and moving to a tiled layer. 660 // https://bugs.webkit.org/show_bug.cgi?id=142317 668 661 }, 669 662
Note: See TracChangeset
for help on using the changeset viewer.