[Media] Reduce style updates (painting) in controls
authordino@apple.com <dino@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 16 Oct 2014 02:25:34 +0000 (02:25 +0000)
committerdino@apple.com <dino@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 16 Oct 2014 02:25:34 +0000 (02:25 +0000)
https://bugs.webkit.org/show_bug.cgi?id=137763
<rdar://problem/17833045>

Reviewed by Simon Fraser.

Media controls were causing a lot of repaints they were
constantly updating the style of the widgets, the value
of the forms, or the text in the display.

This is necessary when the controls are visible, but not
necessary when they are hidden. Return immediately in that case.

* Modules/mediacontrols/mediaControlsApple.js:
(Controller.prototype.createControls): Initialise the slider to a zero value.
(Controller.prototype.handleDurationChange): Force an update even though we might be hidden.
(Controller.prototype.updateProgress): Don't update if we're hidden.
(Controller.prototype.updateTime): Ditto.
* Modules/mediacontrols/mediaControlsiOS.js:
(ControllerIOS.prototype.updateProgress): Ditto.

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@174756 268f45cc-cd09-0410-ab3c-d52691b4dbfc

Source/WebCore/ChangeLog
Source/WebCore/Modules/mediacontrols/mediaControlsApple.js
Source/WebCore/Modules/mediacontrols/mediaControlsiOS.js

index 138fb2f9962ee5120791f01edbf240327079abd2..d5916321ae9f41df455a300a360efd433252d8d2 100644 (file)
@@ -1,3 +1,26 @@
+2014-10-15  Dean Jackson  <dino@apple.com>
+
+        [Media] Reduce style updates (painting) in controls
+        https://bugs.webkit.org/show_bug.cgi?id=137763
+        <rdar://problem/17833045>
+
+        Reviewed by Simon Fraser.
+
+        Media controls were causing a lot of repaints they were
+        constantly updating the style of the widgets, the value
+        of the forms, or the text in the display.
+
+        This is necessary when the controls are visible, but not
+        necessary when they are hidden. Return immediately in that case.
+
+        * Modules/mediacontrols/mediaControlsApple.js:
+        (Controller.prototype.createControls): Initialise the slider to a zero value.
+        (Controller.prototype.handleDurationChange): Force an update even though we might be hidden.
+        (Controller.prototype.updateProgress): Don't update if we're hidden.
+        (Controller.prototype.updateTime): Ditto.
+        * Modules/mediacontrols/mediaControlsiOS.js:
+        (ControllerIOS.prototype.updateProgress): Ditto.
+
 2014-10-15  Chris Dumez  <cdumez@apple.com>
 
         [Mac] Fix inefficiencies in ResourceResponse::platformLazyInit(InitLevel) - Part 2
index e864ab0770a5dddeb6d8af030dda74164da92c72..44a1ebdcac652092cc6ec99d339bb682b94b1216 100644 (file)
@@ -333,6 +333,7 @@ Controller.prototype = {
         timeline.setAttribute('pseudo', '-webkit-media-controls-timeline');
         timeline.setAttribute('aria-label', this.UIString('Duration'));
         timeline.type = 'range';
+        timeline.value = 0;
         this.listenFor(timeline, 'input', this.handleTimelineChange);
         this.listenFor(timeline, 'mouseover', this.handleTimelineMouseOver);
         this.listenFor(timeline, 'mouseout', this.handleTimelineMouseOut);
@@ -567,8 +568,8 @@ Controller.prototype = {
     handleDurationChange: function(event)
     {
         this.updateDuration();
-        this.updateTime();
-        this.updateProgress();
+        this.updateTime(true);
+        this.updateProgress(true);
     },
 
     handlePlay: function(event)
@@ -956,8 +957,11 @@ Controller.prototype = {
         return gradient;
     },
 
-    updateProgress: function()
+    updateProgress: function(forceUpdate)
     {
+        if (!forceUpdate && this.controlsAreHidden())
+            return;
+
         this.updateTimelineMetricsIfNeeded();
 
         var background = 'url(\'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1" preserveAspectRatio="none"><linearGradient id="gradient" x2="0" y2="100%" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="rgb(2, 2, 2)"/><stop offset="1" stop-color="rgb(23, 23, 23)"/></linearGradient><g style="fill:url(#gradient)">'
@@ -1050,8 +1054,11 @@ Controller.prototype = {
         this.setNeedsTimelineMetricsUpdate();
     },
 
-    updateTime: function()
+    updateTime: function(forceUpdate)
     {
+        if (!forceUpdate && this.controlsAreHidden())
+            return;
+
         var currentTime = this.video.currentTime;
         var timeRemaining = currentTime - this.video.duration;
         this.controls.currentTime.innerText = this.formatTime(currentTime);
index 080a84e3daed7701505d6ef38d2ec71bd18aa9bd..a95d76b7b117a8de3eb1e536f420da452745548d 100644 (file)
@@ -238,8 +238,11 @@ ControllerIOS.prototype = {
         return 'rgba(0, 0, 0, 0.5)';
     },
 
-    updateProgress: function() {
-        Controller.prototype.updateProgress.call(this);
+    updateProgress: function(forceUpdate) {
+        Controller.prototype.updateProgress.call(this, forceUpdate);
+
+        if (!forceUpdate && this.controlsAreHidden())
+            return;
 
         var width = this.timelineWidth;
         var height = this.timelineHeight;