1195358 - Use proper graphics for installer

Status: RESOLVED FIXED

(Firefox OS Graveyard :: B2gInstaller, defect)

Comment 1

[Dale Harvey (:daleharvey)]

Attached to https://bugzilla.mozilla.org/show_bug.cgi?id=1166276

Comment 2

[Dale Harvey (:daleharvey)]

Hey Amy

I have started working on this, however the sizing is a bit problematic, http://i.imgur.com/4oHULx3.png is what it looks like on my machine and we have like 90% of the horizontal space used up by graphics and the user has to scroll (on a default resolution macbook) to see the actual UI.

Is there any way to get the UI to be higher up? 

Cheers
Dale

Comment 3

[Amy Lee [:amylee] UX]

Attachment: Header_Graphic_1333x320.png

Hi Dale, 

I don't think we can get the UI completely above the fold which I don't think is a big issue. I've reduced the height of the header graphic though. Let me know if this works better.

Comment 4

[Dale Harvey (:daleharvey)]

Amy

It doesnt help a bunch, its pushing the content down 60 pixels less which means everything is still going to pushed off the bottom of the screen for anyone that isnt using a fairly huge resolution. I think its reasonably big deal since people are opening that page to use the UI and we are pushing the UI off the screen for a header graphic.

Its probably also worth mentioning this add on is for the whole of Firefox OS and is not part of 'spark' so the graphic may not be the most suitable anyway.

Without the graphic I think it works pretty well, http://i.imgur.com/DezTIAF.png and I think it would be best to either go with that, or do something that doesnt push the UI down any further at the least, what do you think?

Comment 5

[Amy Lee [:amylee] UX]

(In reply to Dale Harvey (:daleharvey) from comment #4)
> Amy
> 
> It doesnt help a bunch, its pushing the content down 60 pixels less which
> means everything is still going to pushed off the bottom of the screen for
> anyone that isnt using a fairly huge resolution. I think its reasonably big
> deal since people are opening that page to use the UI and we are pushing the
> UI off the screen for a header graphic.
> 
> Its probably also worth mentioning this add on is for the whole of Firefox
> OS and is not part of 'spark' so the graphic may not be the most suitable
> anyway.
> 
> Without the graphic I think it works pretty well,
> http://i.imgur.com/DezTIAF.png and I think it would be best to either go
> with that, or do something that doesnt push the UI down any further at the
> least, what do you think?

Hi Dale, 

What would the height of the graphic have to be if we want to keep it and have the UI visible? I could also shrink the circle graphics as well. I just think it looks really bare without it. The wallpaper isn't necessarily a "spark" wallpaper.

Comment 6

[Dale Harvey (:daleharvey)]

Yeh reducing the circle graphics size helps a lot, how about http://i.imgur.com/Etm5KvT.png? If thats good and there are any other font / margin / sizing questions then now would be a good time.

Also is there any chance whatever made the graphic can export a linear gradient to match it, trying to make one myself (see the lines where the gradient doesnt match) and its crazy hard

Cheers

Comment 7

[Amy Lee [:amylee] UX]

(In reply to Dale Harvey (:daleharvey) from comment #6)
> Yeh reducing the circle graphics size helps a lot, how about
> http://i.imgur.com/Etm5KvT.png? If thats good and there are any other font /
> margin / sizing questions then now would be a good time.
> 
> Also is there any chance whatever made the graphic can export a linear
> gradient to match it, trying to make one myself (see the lines where the
> gradient doesnt match) and its crazy hard
> 
> Cheers

Hi Dale, 

What size do you need the linear graphic at? Also, is there a link you can give me to the flashing tool? It would help me review font sizes/margins etc.

Comment 8

[Amy Lee [:amylee] UX]

Attachment: Header_Gradient.png

Attached is the background gradient as requested. Let me know if you need anything else.

Comment 9

[Dale Harvey (:daleharvey)]

Attachment: https://github.com/mozilla-b2g/b2g-installer/pull/6

Comment 10

[Dale Harvey (:daleharvey)]

Attachment: Screen Shot 2015-08-24 at 19.10.50.png

Hey Amy

Will upload a screenshot as well as the addon in case you have a problem installing the addon (this is at full screen on my mbp)

I think the header graphic has a slight gradient that is stopping it from repeating well (also if you need to upload another gradient, could you make it the same height from the top as the header graphic, this one was ~40px shorter)

Cheers

Comment 11

[Dale Harvey (:daleharvey)]

Attachment: b2g-installer-0.3-mac64.xpi

And here is the addon, for now there are still bugs so I dont recommend going through the full flash process until we get them fixed

Comment 12

[Amy Lee [:amylee] UX]

Hi Dale, 

I installed the Add-On on nightly but it doesn't give me an option to enable the add-on when I go into about:addons. Can you provide me instructions on how to enable and view it? 

Thanks

Comment 13

[:gerard-majax]

Comment on attachment 8651849 [details] [review]
https://github.com/mozilla-b2g/b2g-installer/pull/6

Looks good ! Shipit!

Comment 14

[:gerard-majax]

(In reply to Amy Lee [:amylee] UX from comment #12)
> Hi Dale, 
> 
> I installed the Add-On on nightly but it doesn't give me an option to enable
> the add-on when I go into about:addons. Can you provide me instructions on
> how to enable and view it? 
> 
> Thanks

There is nothing to do to enable the addon. Maybe you need to turn off XPI signatures prefs before installing it.

Once it is installed, you can browse to: about:b2g-installer

Comment 15

[:gerard-majax]

confere comment 14

Comment 16

[Dale Harvey (:daleharvey)]

We got this fixed over IRC

Comment 17

[Amy Lee [:amylee] UX]

Comment on attachment 8651860 [details]
b2g-installer-0.3-mac64.xpi

Adding Jacqueline for UI review

Comment 18

[Dale Harvey (:daleharvey)]

So this is having a bunch of work being done and dont want to let things bitrot, so landing now and any follow ups to the UX can be filed seperately, cheers

https://github.com/mozilla-b2g/b2g-installer/commit/c4a43270816ff44629b328aaba5f6e8b39e90d91