1100507 - [fennec] Time elapsed and time remaining in browser media player appear as though they are same number when in portrait mode

Status: RESOLVED WONTFIX

(Toolkit :: Video/Audio Controls, defect)

Description

[Brogan Zumwalt [Inactive]]

Attachment: Screenshot

Description:
When user is using browser media player to view or listen to a file that is longer than 1 hour, viewing the screen in portrait mode shows time elapsed and time remaining for media file very close together as though they were a single number.
   
Repro Steps:
1) Update a Flame device to BuildID: 20141117001201
2) Launch Browser in portrait mode
3) Navigate to media file URL that is longer than 1 hour (e.g. http://bit.ly/1wP6JtZ)
  
Actual:
Time elapsed and time remaining display close enough together to appear as one number.
  
Expected: 
There is sufficient space between the time elapsed and time remaining to tell the two numbers apart.
  
Environmental Variables:
Device: Flame 2.1 (319mb)(Kitkat Base)(Shallow Flash)
BuildID: 20141117001201
Gaia: 81160ad79e5b4c21967418dd63f1a1d08d77924e
Gecko: 3572aa3e6766
Version: 34.0 (2.1)
Firmware: V188-1
User Agent: Mozilla/5.0 (Mobile; rv:34.0) Gecko/34.0 Firefox/34.0

Repro frequency: 3/3, 100%
See attached: screenshot & logcat

Comment 1

[Brogan Zumwalt [Inactive]]

Issue DOES occur on Flame 2.0 and Flame 2.2

Actual Results: Time elapsed and time remaining display close enough together to appear as one number.

Device: Flame 2.0 (319mb)(Kitkat Base)(Shallow Flash)
BuildID: 20141117000200
Gaia: 086a668942292168f312b3bb53e275fa0886fab1
Gecko: a57b299c5cf2
Version: 32.0 (2.0)
Firmware: V188-1
User Agent: Mozilla/5.0 (Mobile; rv:32.0) Gecko/32.0 Firefox/32.0

Device: Flame 2.2 (319mb)(Kitkat Base)(Shallow Flash)
Build ID: 20141117040203
Gaia: ddf5b92f43ec27c93ad4fea4fd1207da8936b8e7
Gecko: 21b745197618
Version: 36.0a1 (2.2)
Firmware Version: v188-1
User Agent: Mozilla/5.0 (Mobile; rv:36.0) Gecko/36.0 Firefox/36.0

Comment 2

[Brogan Zumwalt [Inactive]]

Attachment: Logcat

Comment 3

[Derek Harris [:DerekH] - Dont need info. Last day 6/5/15]

[Blocking Requested - why for this release]:

The user is completely unable to read the time elapsed, or the time remaining this looks poor. Especially for users who would be listening to something like an audio book that is almost always more than an hour long.

Comment 4

[KTucker [:KTucker][Inactive 3/4/2016]]

[Blocking Requested - why for this release]:

Comment 5

[Gregor Wagner [:gwagner]]

Hema, is this your team or do you know where this bug belongs to?

Comment 6

[Hema Koka [:hema]]

assuming this is coming from common media controls -- may be dolske or roc would know.

Comment 7

[Justin Dolske [:Dolske]]

I don't know how FirefoxOS does videocontrols. If they are the default controls, the fix would be to make the touch controls hide elements when space-constrained. (For example, only show the current position but not the duration). We already do something like this for the desktop video controls.

Comment 8

[Robert O'Callahan (:roc) (email my personal email if necessary)]

I think wesj was at least partly responsible for the FxOS video controls.

Another option to fix this bug would be to reduce the font size of the time values when they exceed one hour.

Comment 9

[bhavana bajaj [:bajaj]]

Ken, can you help find the right owner here ? I know CJ owned this at some point but not sure who the right owner is at this point.

This is an ugly issue especially if you have long audio books on your phone.

Comment 10

[Ken Chang[:kenkai]]

Randy, please check this bug to see if you can take it.

Comment 11

[Randy Lin [:rlin] - Be Mozillian on 2015/01/26]

Hi Ken, 
Sorry, I can't help it because it may related to layout stuff.

Comment 12

[Bobby Chien]

hi peter, it looks like graphic or layout problem. could help to find someone's help?

Comment 13

[Peter Chang[:pchang]]

As mentioned in comment 8, I think it is related to the CSS configuration about video control. Clear the ni for graphic.

Comment 14

[Ken Chang[:kenkai]]

Hi Jet, do you have the idea of who can check this bug first? Thanks.

Comment 15

[howie [:howie]]

Seems like toolkit and video control issue, same owner with bug 1005031 ? ni Jared for more feedback, thanks.

Comment 16

[Jared Wein [:jaws] (please needinfo? me)]

Attachment: Patch

Yeah, roc is right here that we just need to tweak the CSS for small sized videos.

This patch should fix it, but I don't have a mobile/touch build available. Wes, does this look good to you?

Comment 17

[Wesley Johnston (:wesj)]

Comment on attachment 8530052 [details] [diff] [review]
Patch

Review of attachment 8530052 [details] [diff] [review]:
-----------------------------------------------------------------

I think I would rather use some margin/padding (1em?) on the durationLabel here. Font size just lets the audio controls get even smaller, but the labels still run together.

Comment 18

[Jared Wein [:jaws] (please needinfo? me)]

Unassigning since I don't currently have an environment set up to test these changes. Hopefully someone who has an environment set up can take this bug. It should be a pretty quick fix, especially if you look at the patch that I put up to see where the changes need to be made.

Comment 19

[Steven Yang [:styang]]

Hi Ben, do you recommend anyone can help on this issue? thanks.

Comment 20

[Josh Cheng [:josh]]

Hi Ben,
Could you help? Thanks!

Comment 21

[Ben Francis [:benfrancis]]

This CSS code lives in B2G, Vivien & Fabrice are listed as module owners.

https://github.com/mozilla/gecko-dev/blob/master/b2g/chrome/content/touchcontrols.css

It looks like some JavaScript is manually resetting the width of the video element to 66% though, which is causing the compressed UI. Making the font smaller as in Jared's patch would work, although this CSS looks a little bit broken in general.

Vivien/Fabrice, any idea where this is being set in JavaScript?

Comment 22

[[:fabrice] Fabrice Desré]

The JS part is in the video control binding: http://mxr.mozilla.org/mozilla-central/source/toolkit/content/widgets/videocontrols.xml

touchcontrols.css is an override of videocontrols.css.

I haven't looked in detail, but http://mxr.mozilla.org/mozilla-central/source/toolkit/content/widgets/videocontrols.xml#357 matches your 66% resizing Ben!

Comment 23

[Josh Cheng [:josh]]

[Blocking Requested - why for this release]:
Hi Ben,
Could you help to check comment 22 from Fabrice?
Thanks!

Comment 24

[Mahendra Potharaju [:mahe]]

Nice to fix, not a blocker

Comment 25

[Mahendra Potharaju [:mahe]]

[Tracking Requested - why for this release]:

Comment 26

[Jared Wein [:jaws] (please needinfo? me)]

Closing old needinfo requests. This bug now only affects Firefox for Android (since B2G has been deprioritized), and in small video sizes.

Comment 27

[kpatenio]

Fennec is no longer supported either. I'm going to close this bug since it doesn't seem relevant anymore.