From c226a39601e6a8d0caf274580416a17b7a10e8dc Mon Sep 17 00:00:00 2001 From: Justin Dolske Date: Sun, 12 Apr 2009 23:09:22 -0700 Subject: [PATCH] Bug 475318 - video controls should display numeric position and duration. r=enn, ui-r=boriss --- .../tests/widgets/test_videocontrols.html | 9 +- toolkit/content/widgets/videocontrols.css | 4 + toolkit/content/widgets/videocontrols.xml | 128 +++++++++++++++--- toolkit/themes/pinstripe/global/jar.mn | 1 + .../pinstripe/global/media/scrubberThumb.png | Bin 167 -> 312 bytes .../global/media/scrubberThumbWide.png | Bin 0 -> 389 bytes .../pinstripe/global/media/videocontrols.css | 49 +++++-- toolkit/themes/winstripe/global/jar.mn | 2 + .../winstripe/global/media/scrubberThumb.png | Bin 167 -> 312 bytes .../global/media/scrubberThumbWide.png | Bin 0 -> 389 bytes .../winstripe/global/media/videocontrols.css | 49 +++++-- 11 files changed, 200 insertions(+), 42 deletions(-) create mode 100644 toolkit/themes/pinstripe/global/media/scrubberThumbWide.png create mode 100644 toolkit/themes/winstripe/global/media/scrubberThumbWide.png diff --git a/toolkit/content/tests/widgets/test_videocontrols.html b/toolkit/content/tests/widgets/test_videocontrols.html index 985c831b931..d7bb032c0cc 100644 --- a/toolkit/content/tests/widgets/test_videocontrols.html +++ b/toolkit/content/tests/widgets/test_videocontrols.html @@ -10,6 +10,9 @@

+ +
@@ -46,9 +49,9 @@ const playButtonWidth = 28; const playButtonHeight = 28; const muteButtonWidth = 33; const muteButtonHeight = 28; -const scrubberWidth = videoWidth - playButtonWidth - muteButtonWidth; +const durationWidth = 34; +const scrubberWidth = videoWidth - playButtonWidth - muteButtonWidth - durationWidth; const scrubberHeight = 28; -const thumbWidth = 11; // Play button is on the bottom-left const playButtonCenterX = 0 + Math.round(playButtonWidth / 2); @@ -176,7 +179,7 @@ function runTest(event) { // Bug 477434 -- sometimes we get 0.098999 here instead of 0! // is(video.currentTime, 0.0, "checking playback position"); - var beginDragX = scrubberOffsetX + (thumbWidth / 2); + var beginDragX = scrubberOffsetX; var endDragX = scrubberOffsetX + (scrubberWidth / 2); synthesizeMouse(video, beginDragX, scrubberCenterY, { type: "mousedown", button: 0 }); synthesizeMouse(video, endDragX, scrubberCenterY, { type: "mousemove", button: 0 }); diff --git a/toolkit/content/widgets/videocontrols.css b/toolkit/content/widgets/videocontrols.css index 84805f52705..9bf173fb127 100644 --- a/toolkit/content/widgets/videocontrols.css +++ b/toolkit/content/widgets/videocontrols.css @@ -3,3 +3,7 @@ .scrubber { -moz-binding: url("chrome://global/content/bindings/videocontrols.xml#suppressChangeEvent"); } + +.scrubber .scale-thumb { + -moz-binding: url("chrome://global/content/bindings/videocontrols.xml#timeThumb"); +} diff --git a/toolkit/content/widgets/videocontrols.xml b/toolkit/content/widgets/videocontrols.xml index 0a01b244558..523888df93b 100644 --- a/toolkit/content/widgets/videocontrols.xml +++ b/toolkit/content/widgets/videocontrols.xml @@ -6,9 +6,82 @@ xmlns:xbl="http://www.mozilla.org/xbl" xmlns:svg="http://www.w3.org/2000/svg"> + + + + + + + + + null + + + + + + + + + + + + + + + + + + + + + + + + null + + + + @@ -20,6 +93,9 @@ // just calls the videocontrol's seekToPosition() method directly. switch (which) { case "curpos": + // Update the time shown in the thumb. + this.thumb.setTime(newValue); + // The value of userChanged is true when changing the position with the mouse, // but not when pressing an arrow key. However, the base binding sets // ._userChanged in its keypress handlers, so we just need to check both. @@ -66,6 +142,9 @@ + +