[webkit-changes] [183839] trunk/Source/WebCore

Tue, 05 May 2015 16:23:18 -0700

Title: [183839] trunk/Source/WebCore
Revision
183839
Author
[email protected]
Date
2015-05-05 16:22:39 -0700 (Tue, 05 May 2015)

Log Message

Blurry media control icons on non retina displays.
https://bugs.webkit.org/show_bug.cgi?id=144638.
<rdar://problem/20526166>

Reviewed by Dean Jackson.

* Modules/mediacontrols/mediaControlsApple.css:
Adjust fullscreen buttons so that they look good on both 1x and 2x displays.
(audio::-webkit-media-controls-fullscreen-button):
(audio::-webkit-media-controls-fullscreen-button.exit):
(audio::-webkit-media-controls-fullscreen-button:active):
(audio::-webkit-media-controls-panel button.exit:active):
Handle wireless playback picker button background in mediaControlsApple.js
(audio::-webkit-media-controls-wireless-playback-picker-button):
(audio::-webkit-media-controls-wireless-playback-picker-button.playing): Deleted.

* Modules/mediacontrols/mediaControlsApple.js:
Update wireless playback picker button based on display type.
(Controller.prototype.UIString):
(Controller.prototype.handleReadyStateChange):
(Controller.prototype.updateWirelessTargetPickerButton):
(Controller.prototype.updateWirelessPlaybackStatus):

Modified Paths

Diff

Modified: trunk/Source/WebCore/ChangeLog (183838 => 183839)


--- trunk/Source/WebCore/ChangeLog	2015-05-05 23:08:10 UTC (rev 183838)
+++ trunk/Source/WebCore/ChangeLog	2015-05-05 23:22:39 UTC (rev 183839)
@@ -1,3 +1,28 @@
+2015-05-05  Roger Fong  <[email protected]>
+
+        Blurry media control icons on non retina displays.
+        https://bugs.webkit.org/show_bug.cgi?id=144638.
+        <rdar://problem/20526166>
+
+        Reviewed by Dean Jackson.
+
+        * Modules/mediacontrols/mediaControlsApple.css:
+        Adjust fullscreen buttons so that they look good on both 1x and 2x displays.
+        (audio::-webkit-media-controls-fullscreen-button):
+        (audio::-webkit-media-controls-fullscreen-button.exit):
+        (audio::-webkit-media-controls-fullscreen-button:active):
+        (audio::-webkit-media-controls-panel button.exit:active):
+        Handle wireless playback picker button background in mediaControlsApple.js
+        (audio::-webkit-media-controls-wireless-playback-picker-button):
+        (audio::-webkit-media-controls-wireless-playback-picker-button.playing): Deleted.
+
+        * Modules/mediacontrols/mediaControlsApple.js:
+        Update wireless playback picker button based on display type.
+        (Controller.prototype.UIString):
+        (Controller.prototype.handleReadyStateChange):
+        (Controller.prototype.updateWirelessTargetPickerButton):
+        (Controller.prototype.updateWirelessPlaybackStatus):
+
 2015-05-05  Joseph Pecoraro  <[email protected]>
 
         Web Inspector: Crash under WebCore::domWindowFromExecState reloading page with inspector open

Modified: trunk/Source/WebCore/Modules/mediacontrols/mediaControlsApple.css (183838 => 183839)


--- trunk/Source/WebCore/Modules/mediacontrols/mediaControlsApple.css	2015-05-05 23:08:10 UTC (rev 183838)
+++ trunk/Source/WebCore/Modules/mediacontrols/mediaControlsApple.css	2015-05-05 23:22:39 UTC (rev 183839)
@@ -307,7 +307,6 @@
 
 video::-webkit-media-controls-wireless-playback-picker-button,
 audio::-webkit-media-controls-wireless-playback-picker-button {
-    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 15" stroke="rgba(255,255,255,0.45)"><defs> <clipPath fill-rule="evenodd" id="cut-hole"><path d="M 0,0.5 L 16,0.5 L 16,15.5 L 0,15.5 z M 0,14.5 L 16,14.5 L 8,5 z"/></clipPath></defs><rect fill="none" clip-path="url(#cut-hole)" x="0.5" y="2" width="15" height="8"/><path stroke="none" fill="rgba(255,255,255,0.45)" d="M 3.5,13.25 L 12.5,13.25 L 8,8 z"/></svg>');
     margin-right: 16px;
     width: 16px;
     min-width: 16px;
@@ -315,7 +314,7 @@
 
 video::-webkit-media-controls-wireless-playback-picker-button.playing,
 audio::-webkit-media-controls-wireless-playback-picker-button.playing {
-    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 15" stroke="rgb(0,172,245)"><defs> <clipPath fill-rule="evenodd" id="cut-hole"><path d="M 0,0.5 L 16,0.5 L 16,15.5 L 0,15.5 z M 0,14.5 L 16,14.5 L 8,5 z"/></clipPath></defs><rect fill="none" clip-path="url(#cut-hole)" x="0.5" y="2" width="15" height="8"/><path stroke="none" fill="rgb(0,172,245)" d="M 3.5,13.25 L 12.5,13.25 L 8,8 z"/></svg>');
+    mix-blend-mode: normal;
 }
 
 video::-webkit-media-controls-toggle-closed-captions-button,
@@ -419,7 +418,7 @@
 
 video::-webkit-media-controls-fullscreen-button,
 audio::-webkit-media-controls-fullscreen-button {
-    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 15" stroke="rgba(255,255,255,0.45)" stroke-width="1.25" fill="none"><path d="M 7,1.5 L 12.5,1.5 L 12.5,7"/><path d="M 0.5,8 L 0.5,13.5 L 6,13.5"/><path stroke-linecap="round" d="M 12.5,1.5 L 7.5,6.5"/><path stroke-linecap="round" d="M 0.5,13.5 L 5.5,8.5"/></svg>');
+    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 15" stroke="rgba(255,255,255,0.45)" fill="none"><path d="M 7,1.5 L 12.5,1.5 L 12.5,7"/><path d="M 0.5,8 L 0.5,13.5 L 6,13.5"/><path stroke-linecap="round" d="M 12.5,1.5 L 7.5,6.5"/><path stroke-linecap="round" d="M 0.5,13.5 L 5.5,8.5"/></svg>');
     margin-right: 7px;
     width: 14px;
     min-width: 14px;
@@ -427,7 +426,7 @@
 
 video::-webkit-media-controls-fullscreen-button.exit,
 audio::-webkit-media-controls-fullscreen-button.exit {
-    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 15" stroke="rgba(255,255,255,0.45)" stroke-width="1.25" fill="none"><path d="M 7.5,0.5 L 7.5,6 L 13,6"/><path d="M 0,8 L 5.5,8 L 5.5,13.5"/><path stroke-linecap="round" d="M 7.5,6 L 12.5,1"/><path stroke-linecap="round" d="M 5.5,8 L 0.5,13"/></svg>');
+    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 15" stroke="rgba(255,255,255,0.45)" fill="none"><path d="M 7.5,1 L 7.5,6.5 L 13,6.5"/><path d="M 0,8.5 L 5.5,8.5 L 5.5,14"/><path stroke-linecap="round" d="M 7.5,6.5 L 12.5,1.5"/><path stroke-linecap="round" d="M 5.5,8.5 L 0.5,13.5"/></svg>');
     margin-right: 11px;
     margin-top: 6px;
 }
@@ -907,12 +906,12 @@
 
 video::-webkit-media-controls-fullscreen-button:active,
 audio::-webkit-media-controls-fullscreen-button:active {
-    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 15" stroke="white" stroke-width="1.25" fill="none"><path d="M 7,1.5 L 12.5,1.5 L 12.5,7"/><path d="M 0.5,8 L 0.5,13.5 L 6,13.5"/><path stroke-linecap="round" d="M 12.5,1.5 L 7.5,6.5"/><path stroke-linecap="round" d="M 0.5,13.5 L 5.5,8.5"/></svg>');
+    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 15" stroke="white" fill="none"><path d="M 7,1.5 L 12.5,1.5 L 12.5,7"/><path d="M 0.5,8 L 0.5,13.5 L 6,13.5"/><path stroke-linecap="round" d="M 12.5,1.5 L 7.5,6.5"/><path stroke-linecap="round" d="M 0.5,13.5 L 5.5,8.5"/></svg>');
 }
 
 video::-webkit-media-controls-panel button.exit:active,
 audio::-webkit-media-controls-panel button.exit:active {
-    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 15" stroke="white" stroke-width="1.25" fill="none"><path d="M 7.5,0.5 L 7.5,6 L 13,6"/><path d="M 0,8 L 5.5,8 L 5.5,13.5"/><path stroke-linecap="round" d="M 7.5,6 L 12.5,1"/><path stroke-linecap="round" d="M 5.5,8 L 0.5,13"/></svg>');
+    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 15" stroke="white" fill="none"><path d="M 7.5,1 L 7.5,6.5 L 13,6.5"/><path d="M 0,8.5 L 5.5,8.5 L 5.5,14"/><path stroke-linecap="round" d="M 7.5,6.5 L 12.5,1.5"/><path stroke-linecap="round" d="M 5.5,8.5 L 0.5,13.5"/></svg>');
 }
 
 video::-webkit-media-controls-wireless-playback-picker-button:active,

Modified: trunk/Source/WebCore/Modules/mediacontrols/mediaControlsApple.js (183838 => 183839)


--- trunk/Source/WebCore/Modules/mediacontrols/mediaControlsApple.js	2015-05-05 23:08:10 UTC (rev 183838)
+++ trunk/Source/WebCore/Modules/mediacontrols/mediaControlsApple.js	2015-05-05 23:22:39 UTC (rev 183839)
@@ -655,6 +655,7 @@
         this.updateCaptionButton();
         this.updateCaptionContainer();
         this.updateFullscreenButtons();
+        this.updateWirelessTargetPickerButton();
         this.updateProgress();
     },
 
@@ -1006,6 +1007,18 @@
             this.video.webkitEnterFullscreen();
         return true;
     },
+    
+    updateWirelessTargetPickerButton: function() {
+        var wirelessTargetPickerColor;
+        if (this.controls.wirelessTargetPicker.classList.contains('playing'))
+            wirelessTargetPickerColor = "-apple-system-blue";
+        else
+            wirelessTargetPickerColor = "rgba(255,255,255,0.45)";
+        if (window.devicePixelRatio == 2)
+            this.controls.wirelessTargetPicker.style.backgroundImage = "url(\"data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 15' stroke='" + wirelessTargetPickerColor + "'><defs> <clipPath fill-rule='evenodd' id='cut-hole'><path d='M 0,0.5 L 16,0.5 L 16,15.5 L 0,15.5 z M 0,14.5 L 16,14.5 L 8,5 z'/></clipPath></defs><rect fill='none' clip-path='url(#cut-hole)' x='0.5' y='2' width='15' height='8'/><path stroke='none' fill='" + wirelessTargetPickerColor +"' d='M 3.5,13.25 L 12.5,13.25 L 8,8 z'/></svg>\")";
+        else
+            this.controls.wirelessTargetPicker.style.backgroundImage = "url(\"data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 15' stroke='" + wirelessTargetPickerColor + "'><defs> <clipPath fill-rule='evenodd' id='cut-hole'><path d='M 0,1 L 16,1 L 16,16 L 0,16 z M 0,15 L 16,15 L 8,5.5 z'/></clipPath></defs><rect fill='none' clip-path='url(#cut-hole)' x='0.5' y='2.5' width='15' height='8'/><path stroke='none' fill='" + wirelessTargetPickerColor +"' d='M 2.75,14 L 13.25,14 L 8,8.75 z'/></svg>\")";
+    },
 
     handleControlsChange: function()
     {
@@ -1832,6 +1845,7 @@
             else
                 this.controls.muteBox.style.display = "-webkit-flex";
         }
+        this.updateWirelessTargetPickerButton();
     },
 
     updateWirelessTargetAvailable: function() {

_______________________________________________
webkit-changes mailing list
[email protected]
https://lists.webkit.org/mailman/listinfo/webkit-changes

Reply via email to