[Notification Menu][Music Widget] Descenders (letters with 'tails') are slightly cut off when viewing song titles on the music widget on the notification menu.

VERIFIED FIXED in 2.2 S9 (3apr)

Status

defect
VERIFIED FIXED
4 years ago
4 years ago

People

(Reporter: jmitchell, Assigned: dkuo)

Tracking

({polish, regression})

unspecified
2.2 S9 (3apr)
ARM
Gonk (Firefox OS)

Firefox Tracking Flags

(blocking-b2g:2.2+, b2g-v2.0 unaffected, b2g-v2.1 affected, b2g-v2.2 verified, b2g-master verified)

Details

(Whiteboard: [3.0-Daily-Testing])

Attachments

(9 attachments)

Reporter

Description

4 years ago
Description:
When you have music playing through the music app and access the notification menu there will be a music widget present (just above the usage tracking section). On this widget letters with descenders are cut off on the bottom. This is MOST noticeable with the letter g, but also apparent with y,p,q and j 
This ALSO happens on the music widget that appears on the lockscreen

Repro Prereq: Have music on device with lower case g in title

Repro Steps:
1) Update a Flame to 20150121010204
2) Launch Music App and play a song with lower case g in title
3) Access notification menu

Actual:
lower case descenders are cut-off at the bottom

Expected:
letters will appear complete

Environmental Variables:
Device: Flame 3.0 (KK - Nightly - Full Flash)
Build ID: 20150121010204
Gaia: 5e98dc164b17fd6decb48a9eaddef0e55b82e249
Gecko: 540077a30866
Gonk: a814b2e2dfdda7140cb3a357617dc4fbb1435e76
Version: 38.0a1 (3.0)
Firmware Version: v18D-1
User Agent: Mozilla/5.0 (Mobile; rv:38.0) Gecko/38.0 Firefox/38.0

Repro frequency: 5/5
See attached: screenshot

--------------------------------------------------------------------------------------------------
This also occurs on Flame 2.2 (v18d-1), 2.2 (v18d), 2.1 (v18d-1),


Device: Flame 2.2 (KK - Nightly - Full Flash)
Build ID: 20150121002607
Gaia: e4f9b5da3751798f9cc5d95f302c30722cc11fca
Gecko: 75a462a58d7a
Gonk: e7c90613521145db090dd24147afd5ceb5703190
Version: 37.0a2 (2.2)
Firmware Version: v18D-1
User Agent: Mozilla/5.0 (Mobile; rv:37.0) Gecko/37.0 Firefox/37.0

Device: Flame 2.2 (KK - Nightly - Full Flash)
Build ID: 20150120002507
Gaia: f5b3d1b6cfa3e702033f613915ae637cb735cbfb
Gecko: 5d7497ce4cc7
Gonk: e7c90613521145db090dd24147afd5ceb5703190
Version: 37.0a2 (2.2)
Firmware Version: v18D
User Agent: Mozilla/5.0 (Mobile; rv:37.0) Gecko/37.0 Firefox/37.0

Device: Flame 2.1 (KK - Nightly - Full Flash)
Build ID: 20150120001202
Gaia: 77c57eb8a985d5cbd34a597fb1b978ba6e205af6
Gecko: f05d0a2d2378
Gonk: e7c90613521145db090dd24147afd5ceb5703190
Version: 34.0 (2.1)
Firmware Version: v18D-1
User Agent: Mozilla/5.0 (Mobile; rv:34.0) Gecko/34.0 Firefox/34.0
---------------------------------------------------------------------------------

This issue does NOT appear in 2.0

Actual results: descender letters are not cut-off

Device: Flame 2.0 (KK - Nightly - Full Flash)
Build ID: 20150120000224
Gaia: 736933b25ded904f0cb935a0d48f1f3cf91d33ad
Gecko: 6ff30f9ba931
Gonk: e7c90613521145db090dd24147afd5ceb5703190
Version: 32.0 (2.0)
Firmware Version: v18D-1
User Agent: Mozilla/5.0 (Mobile; rv:32.0) Gecko/32.0 Firefox/32.0
Reporter

Updated

4 years ago
QA Whiteboard: [QAnalyst-Triage?]
Flags: needinfo?(pbylenga)
Not nominating to block, minor graphical issue.  It is a regression, nominating for polish work.
QA Whiteboard: [QAnalyst-Triage?] → [QAnalyst-Triage+]
Flags: needinfo?(pbylenga)
Keywords: polish
NI System developer
Flags: needinfo?(alive)
Need UX input. Switch ni to dkuo.
Flags: needinfo?(firefoxos-ux-bugzilla)
Flags: needinfo?(dkuo)
Flags: needinfo?(alive)

Comment 4

4 years ago
Assigning to Tif for music.
Flags: needinfo?(firefoxos-ux-bugzilla) → needinfo?(tshakespeare)
Did something change between the two releases that would cause this regression? Otherwise, can we not just make it how it was?
Flags: needinfo?(tshakespeare)
Assignee

Comment 6

4 years ago
Assignee

Comment 7

4 years ago
Looks fine on my flame with master build, according to attachment 8569072 [details].
Flags: needinfo?(dkuo)
Odd - I just checked it on my flame and I still see the issue.

Gaia-Rev        7894b929f1b0394f3c997f72a6482bc7813e758d
Gecko-Rev       https://hg.mozilla.org/mozilla-central/rev/0a8b3b67715a
Build-ID        20150225010244
Version         39.0a1
Device-Name     flame
FW-Release      4.4.2
FW-Incremental  eng.cltbld.20150225.043702
FW-Date         Wed Feb 25 04:37:14 EST 2015
Bootloader      L1TC00011880
Use below engineer build and still has this issue.

Build ID               20150310162504
Gaia Revision          5af6f8d5d6161dea02002634c6d0a570a122e5dd
Gaia Date              2015-03-10 19:17:12
Gecko Revision         https://hg.mozilla.org/releases/mozilla-b2g37_v2_2/rev/ec87adb8cf13
Gecko Version          37.0
Device Name            flame
Firmware(Release)      4.4.2
Firmware(Incremental)  eng.cltbld.20150310.200728
Firmware Date          Tue Mar 10 20:07:39 EDT 2015
Bootloader             L1TC000118D0
Flags: needinfo?(dkuo)
Assignee

Comment 11

4 years ago
Though I cannot reproduce this bug on my flame with master build, but I traced the music widget styles, I found the current css could possibly cause this issue so I tried to modify them in a proper way, and patch attached but I need some helps to confirm the patch does work.
Flags: needinfo?(dkuo)
Assignee

Comment 12

4 years ago
Comment on attachment 8579903 [details] [review]
[gaia] dominickuo:bug-1124305 > mozilla-b2g:master

Tif, would you please check my patch and see if it works(since you are able to repro it)? thanks!
Attachment #8579903 - Flags: ui-review?(tshakespeare)
Assignee

Comment 13

4 years ago
or Hermes could you please help on testing the patch? since you ni me and you should know how to reproduce it, thanks.
Flags: needinfo?(hcheng)
Hi Dominic, I tried your patch but still got this issue. Beside, it also exists on lockscreen music playback.
Flags: needinfo?(hcheng)
It is not really clear because of the background color, but it is the same issue on Lockscreen.
Sorry for the delay! Unfortunately, I still see the issue :-/

Here's what I used to test.

Build ID               20150323010204
Gaia Revision          c44790956c685d4e0eaef629dad212d7b4fdd7a0
Gaia Date              2015-03-19 09:14:52
Gecko Revision         https://hg.mozilla.org/mozilla-central/rev/e730012260a4
Gecko Version          39.0a1
Device Name            flame
Firmware(Release)      4.4.2
Firmware(Incremental)  eng.cltbld.20150313.041854
Firmware Date          Fri Mar 13 04:19:06 EDT 2015
Bootloader             L1TC00011880
Dominic, could you take a look? Thanks. ;)
Flags: needinfo?(dkuo)
Assignee

Comment 18

4 years ago
While I was waiting the test result, I found the necessary step to reproduce this, that's, I have to flash the image file instead of replacing gaia+gecko only, it's probably the font files but anyway, I am able to reproduce this and should have a patch later.
Assignee

Comment 19

4 years ago
Comment on attachment 8579903 [details] [review]
[gaia] dominickuo:bug-1124305 > mozilla-b2g:master

Okay, this should fix both the music playback widgets in utility tray and lockscreen.

Jim, would you please review this?

Tif, if you get a chance to test the updated patch again, the issue should be gone with it and please let me know if it's not.

Thanks all!
Flags: needinfo?(dkuo)
Attachment #8579903 - Flags: review?(squibblyflabbetydoo)
Comment on attachment 8579903 [details] [review]
[gaia] dominickuo:bug-1124305 > mozilla-b2g:master

I suppose this is ok, although it seems kind of complex for something that should be really simple. I'd recommend having a system/lockscreen reviewer look at this too.
Attachment #8579903 - Flags: review?(squibblyflabbetydoo) → review+
Assignee

Comment 21

4 years ago
(In reply to Jim Porter (:squib) from comment #20)
> Comment on attachment 8579903 [details] [review]
> [gaia] dominickuo:bug-1124305 > mozilla-b2g:master
> 
> I suppose this is ok, although it seems kind of complex for something that
> should be really simple. I'd recommend having a system/lockscreen reviewer
> look at this too.

The root cause is, the track title's |line-height| and |font-size| are set to a same value(1.4rem), this caused issues because theoretically line-height includes text height and row spacing, so by default it should be larger than the font-size if line-height is not set, but we set it wrong.

So I removed the line-height style and let gecko calculate for us, then I found the previous author tried to use padding-top to align the track title to bottom, it's also not a proper way to do that. And to keep the div original height I use |display: table-cell| and |vertical-align: bottom| to solve the align bottom problem, and that's why the patch looks not-so-simple but with two corrections.
Assignee

Comment 22

4 years ago
Comment on attachment 8579903 [details] [review]
[gaia] dominickuo:bug-1124305 > mozilla-b2g:master

Alive, would you please review this patch? thanks. (comment 21 explained why the patch looks like that)
Attachment #8579903 - Flags: review?(alive)
Comment on attachment 8579903 [details] [review]
[gaia] dominickuo:bug-1124305 > mozilla-b2g:master

css only change, r=me
Attachment #8579903 - Flags: review?(alive) → review+
Assignee

Updated

4 years ago
Keywords: checkin-needed
Status: NEW → RESOLVED
Last Resolved: 4 years ago
Resolution: --- → FIXED
Assignee

Updated

4 years ago
Assignee: nobody → dkuo
According to the STR of Comment 0,this bug has been successfully verified on latest Nightly Flame v3.0.
See attachment: verified_v3.0.png
Reproduce rate: 0/5

Device: Flame 3.0 build(Pass)
Build ID               20150326160206
Gaia Revision          525c341254e08f07f90da57a4d1cd5971a3cc668
Gaia Date              2015-03-26 16:34:16
Gecko Revision         https://hg.mozilla.org/mozilla-central/rev/59554288b4eb
Gecko Version          39.0a1
Device Name            flame
Firmware(Release)      4.4.2
Firmware(Incremental)  eng.cltbld.20150326.193247
Firmware Date          Thu Mar 26 19:32:58 EDT 2015
Bootloader             L1TC000118D0

Leaving "verifyme" keywords for Flame v2.1&2.2.
QA Whiteboard: [QAnalyst-Triage+] → [QAnalyst-Triage+][MGSEI-Triage+]

Updated

4 years ago
Duplicate of this bug: 1136429

Comment 28

4 years ago
Blocking as regression.
blocking-b2g: --- → 2.2+
Assignee

Comment 29

4 years ago
Comment on attachment 8579903 [details] [review]
[gaia] dominickuo:bug-1124305 > mozilla-b2g:master

[Approval Request Comment]
[Bug caused by] (feature/regressing bug #): Bug 1038723.
[User impact] if declined: Bad ux with song titles cut off.
[Testing completed]: CSS changes only so no tests needed, but verified with human eyes.
[Risk to taking this patch] (and alternatives if risky): Low.
[String changes made]: None.
Attachment #8579903 - Flags: ui-review?(tshakespeare) → approval-gaia-v2.2?
Attachment #8579903 - Flags: approval-gaia-v2.2? → approval-gaia-v2.2+
Assignee

Updated

4 years ago
Duplicate of this bug: 1148241
This issue is verified fixed on 3.0 and 2.2. Because of bug 1148241 being duped to this I had to check that this is fixed in Arabic, and indeed it is.

See attached screenshots for verified behavior.

Device: Flame 3.0 Master (full flash 319MB mem)
BuildID: 20150401010204
Gaia: 03164bd160809747e6a198e0dba1b7c3ee7789f5
Gecko: 18a8ea7c2c62
Gonk: b83fc73de7b64594cd74b33e498bf08332b5d87b
Version: 40.0a1 (3.0 Master)
Firmware Version: v18D-1
User Agent: Mozilla/5.0 (Mobile; rv:40.0) Gecko/40.0 Firefox/40.0

Device: Flame 2.2
BuildID: 20150401002624
Gaia: 8b3086ad3963f1707e2bee9094baccafffe161c4
Gecko: 20b67213a047
Gonk: ebad7da532429a6f5efadc00bf6ad8a41288a429
Version: 37.0 (2.2) 
Firmware Version: v18D-1
User Agent: Mozilla/5.0 (Mobile; rv:37.0) Gecko/37.0 Firefox/37.0
Status: RESOLVED → VERIFIED
QA Whiteboard: [QAnalyst-Triage+][MGSEI-Triage+] → [QAnalyst-Triage?][MGSEI-Triage+]
Flags: needinfo?(ktucker)
Keywords: verifyme
QA Whiteboard: [QAnalyst-Triage?][MGSEI-Triage+] → [QAnalyst-Triage+][MGSEI-Triage+]
Flags: needinfo?(ktucker)
You need to log in before you can comment on or make changes to this bug.