1177849 - [Gallery] Editing a photo, 'Exposure' slider is an improper graphic

Status: VERIFIED FIXED

(Firefox OS Graveyard :: Gaia::Gallery, defect)

Description

[Oliver Nelson [:oliverthor]]

Attachment: gallery_exposure_icon.png

Description:
Editing a photo and adjusting it's exposure, will reveal and an improper graphic for the slider. The icon would be similar to the brightness slider (a fully revealed circle that may be slid left to right), but we have a square that doesn't seem to fit well. May be interesting to note, that the nature of this icon makes it difficult to tell what actual value the slider is resting on. 

PreReq:
* photo in gallery
Repro Steps:
1) Update a Aries to 20150626120208
2) Open Gallery app
3) Tap on a photo
4) Tap 'Edit' button
5) Tap sun-icon to adjust 'Exposure'
6) Observe slider icon

Actual:
Slider icon is a square, appears improper; hard to tell actual value

Expected:
Slider icon is a circle with a defined center; similar to brightness slider in display.



Environmental Variables:
Device: Aries 3.0
Build ID: 20150626120208
Gaia: 8a1e4ae522c121c5cacd39b20a5386ec9055db82
Gecko: 56e207dbb3bd
Gonk: 2916e2368074b5383c80bf5a0fba3fc83ba310bd
Version: 41.0a1 (3.0)
Firmware Version: D5803_23.1.A.1.28_NCB.ftf
User Agent: Mozilla/5.0 (Mobile; rv:41.0) Gecko/41.0 Firefox/41.0
*************************************

Similar Results: Icon is a circle, but does not fit in slider range
Device: Flame 3.0
BuildID: 20150624160209
Gaia: eb0d4aefa62b20420d6fa0642515a110daca5d97
Gecko: 7b0df70e27ea
Gonk: a4f6f31d1fe213ac935ca8ede7d05e47324101a4
Version: 41.0a1 (3.0) 
Firmware Version: v18D-1
User Agent: Mozilla/5.0 (Mobile; rv:41.0) Gecko/41.0 Firefox/41.0

Device: Flame 2.2
BuildID: 20150626002504
Gaia: 1f8981d7872e3c0053571c26fb3edaf401844d75
Gecko: 2f8b845e5fa3
Gonk: bd9cb3af2a0354577a6903917bc826489050b40d
Version: 37.0 (2.2) 
Firmware Version: v18D-1
User Agent: Mozilla/5.0 (Mobile; rv:37.0) Gecko/37.0 Firefox/37.0
-----------------------------------

Repro frequency: 5/5
See attached: 
screenshot

Comment 1

[Peter Bylenga [:PBylenga]]

[Blocking Requested - why for this release]:
The way it appears on Spark/Aries device is worse than flame, this is a good piece to have for quality on 2.5.

Comment 2

[Punam Dahiya [:pdahiya]]

Taking bug to investigate and submit fix

Comment 3

[Punam Dahiya [:pdahiya]]

On investigating this issue is regression for devices with GAIA_DEV_PIXELS_PER_PX > 1, for flame it's 1.5 and Aries it's 2.25 causing slider thumb to pick image [e-mail] (45x39) and [e-mail] (68 x 59).

The slider thumb container by default fits slider-scrubber.png (30x 26)

We added @1.5x, @2x and @2.25x images for slider-scrubber as part of fix of Bug 1020010. Removing these images should fix the issue. I will submit the patch for ui review.

Comment 4

[GitHub Autolander Bot]

Attachment: [gaia] punamdahiya:Bug1177849 > mozilla-b2g:master

Comment 5

[Punam Dahiya [:pdahiya]]

Comment on attachment 8637374 [details] [review]
[gaia] punamdahiya:Bug1177849 > mozilla-b2g:master

Pavel: Asking for your review as you are familiar with the Bug 1020010 changes. Please review. Thanks!


Tif: Please ui-review attached patch for how slider scrubber looks on different devices Flame, Aries. Thanks!

Comment 6

[Pavel Ivanov [:ivanovpavel][:pivanov] UX]

Comment on attachment 8637374 [details] [review]
[gaia] punamdahiya:Bug1177849 > mozilla-b2g:master

LGTM :) r+

Comment 7

[Tiffanie Shakespeare [:tif]]

Comment on attachment 8637374 [details] [review]
[gaia] punamdahiya:Bug1177849 > mozilla-b2g:master

Going to move ui-review to Amy. Thanks!

Comment 8

[Hema Koka [:hema]]

Lets gets this in for 2.5 once Amy reviews it.

Comment 9

[Amy Lee [:amylee] UX]

Comment on attachment 8637374 [details] [review]
[gaia] punamdahiya:Bug1177849 > mozilla-b2g:master

Hi, 

I checked the patch and the handler is fuzzy. Is the correct 2.25x graphic being used?

Comment 10

[Punam Dahiya [:pdahiya]]

(In reply to Amy Lee [:amylee] from comment #9)
> Comment on attachment 8637374 [details] [review]
> [gaia] punamdahiya:Bug1177849 > mozilla-b2g:master
> 
> Hi, 
> 
> I checked the patch and the handler is fuzzy. Is the correct 2.25x graphic
> being used?

Hi Amy,
[e-mail] existing image is of size 68x59 and when used is causing the issue reported in this bug, Patch attached is removing 2.25x and other @x images and using default size slider-scrubber.png (30x 26) (#comment 3).

Please attach 2.25x image that should be used to fix fuzziness seen in 2.25x devices.

Is the handler looking good in Flame (1.5x) device, if not we need correct handler images for @1.5x and @2x as well.

Thanks!

Comment 11

[Amy Lee [:amylee] UX]

Attachment: [e-mail]

Hi, 

Here's the 2.25x scaled graphic. Cheers!

Comment 12

[Amy Lee [:amylee] UX]

(In reply to Punam Dahiya from comment #10)
> (In reply to Amy Lee [:amylee] from comment #9)
> > Comment on attachment 8637374 [details] [review]
> > [gaia] punamdahiya:Bug1177849 > mozilla-b2g:master
> > 
> > Hi, 
> > 
> > I checked the patch and the handler is fuzzy. Is the correct 2.25x graphic
> > being used?
> 
> Hi Amy,
> [e-mail] existing image is of size 68x59 and when used is
> causing the issue reported in this bug, Patch attached is removing 2.25x and
> other @x images and using default size slider-scrubber.png (30x 26)
> (#comment 3).
> 
> Please attach 2.25x image that should be used to fix fuzziness seen in 2.25x
> devices.
> 
> Is the handler looking good in Flame (1.5x) device, if not we need correct
> handler images for @1.5x and @2x as well.
> 
> Thanks!

The handler on the flame device looks fine (without the patch).

Comment 13

[David Flanagan [:djf]]

Punam,

While playing around with my aries device, I noticed that it is reporting window.devicePixelRatio as 2, not 2.25.  So if we're using @2.25x images on the device, then it makes sense that they would be too big...

Note, though, that I'm not using a Spark device, I ran make reset-gaia on the phone so now it is non-spark, and maybe that affects things somehow. Anyway, you might want to check what devicePixelRatio number you're seeing.

Comment 14

[Punam Dahiya [:pdahiya]]

(In reply to David Flanagan [:djf] from comment #13)
> Punam,
> 
> While playing around with my aries device, I noticed that it is reporting
> window.devicePixelRatio as 2, not 2.25.  So if we're using @2.25x images on
> the device, then it makes sense that they would be too big...
> 
> Note, though, that I'm not using a Spark device, I ran make reset-gaia on
> the phone so now it is non-spark, and maybe that affects things somehow.
> Anyway, you might want to check what devicePixelRatio number you're seeing.

I checked devicepixelratio on my Aries device (both before and after make reset) and it shows up 2 (using devicepixelratio.com) which indicates something is amiss from gecko for spark devices where the default scale for Aries is coming 2.25.

If I set devicepixel to 2 using make install-gaia GAIA_DEV_PIXELS_PER_PX= 2 , the image (60x 52) still shows square and doesn't help on Aries.

Comment 15

[Punam Dahiya [:pdahiya]]

Comment on attachment 8637374 [details] [review]
[gaia] punamdahiya:Bug1177849 > mozilla-b2g:master

Hi David
I have removed previous file delete changes and updated patch with CSS fix.
It tries setting background-size to 100% width so that the image fits containing box in that dimension which fixes improper display of slider thumb for Aries. Please review. Thanks!

Comment 16

[David Flanagan [:djf]]

Comment on attachment 8637374 [details] [review]
[gaia] punamdahiya:Bug1177849 > mozilla-b2g:master

A couple of questions/comments on github, but this looks fine to land as is, or with minor nits addressed.

Comment 17

[Punam Dahiya [:pdahiya]]

Thanks David, addressed comments and updated patch with feedback. Patch landed on master

https://github.com/mozilla-b2g/gaia/commit/dbeb9ec53cb2e79220fba906347ad386ce38ada3

Comment 18

[Shally Li（leave from Mozilla）]

This bug has been verified as "pass" on the latest Aires KK 2.5 by the STR in comment 0.

Actual results: Slider icon is a circle with a defined center, similar to brightness slider in display.
See attachment: verified_aries_v2.5.png
Reproduce rate: 0/10


Device: Aries KK 2.5(Pass)
Build ID               20150806003241
Gaia Revision          581de383687dc441a878d2c91a0167c6ec688fef
Gaia Date              2015-08-05 01:48:40
Gecko Revision         https://hg.mozilla.org/mozilla-central/rev/9801f91760d9
Gecko Version          42.0a1
Device Name            aries
Firmware(Release)      4.4.2
Firmware(Incremental)  eng.worker.20150805.235801
Firmware Date          Wed Aug  5 23:58:08 UTC 2015
Bootloader             s1

Comment 19

[Shally Li（leave from Mozilla）]

Attachment: verified_aries_v2.5.png

Comment 20

[Punam Dahiya [:pdahiya]]

Created Bug 1192328 , to look into 2.25x assets chosen for Aries when window.devicePixelRatio is 2