1265337 - Redesign the Downloads Panel to use similar styles across platforms

Status: RESOLVED FIXED

(Firefox :: Downloads Panel, defect, P3)

Description

[:Paolo Amadini]

Implementing the proposed redesigning the Downloads Panel to use similar styles across platforms will also allow us to make changes more easily and move faster.

Comment 1

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

Is there a link to the design spec for this?

Comment 2

[:Paolo Amadini]

(In reply to Jared Wein [:jaws] (please needinfo? me) from comment #1)
> Is there a link to the design spec for this?

I think UX has a PNG somewhere ;-) Sevaan, do you have a link to the latest thinking?

Comment 3

[Sevaan Franks [:sevaan]]

Full interaction spec: http://people.mozilla.org/~sfranks/Malware/
Simplified interaction spec being implemented first (I beleive): http://i.sevaan.com/1g2w10132r1y

Comment 4

[Marco Bonardo [:mak]]

side note, we also had this pending redesign that was never done (click on the downloads button)
http://people.mozilla.org/~shorlander/mockups-interactive/australis-interactive-mockups/windows8.html

While comment 3 is more about blocked downloads, this is rather the graphical mock-up we were planning to be cross platform.
The point was mostly we wanted to reduce padding, add back download speed, and make single items look more consistent.

Clearly, this could also happen later in time, once the style is unified it may be easier.

Comment 5

[:Paolo Amadini]

Thanks Marco, that's the link I was looking for!

I think Sevaan had in mind the designs on which I'm working on right now, but I have to say that, for that reason, at least I knew where they were! :-)

Comment 6

[Sevaan Franks [:sevaan]]

Ah, my mistake!

Comment 7

[u428464]

http://people.mozilla.org/~shorlander/styleguide/ui-elements/panel-download.html

Comment 8

[Wesly Huang (EPM)]

(following the discussion in Bug 1269957 Comment#20)

Hi Paolo:

Like mentioned in Bug 1269957 Comment#20, would you help us understand more about this bug, like the expected scope, UX's design concept (saw some UX material there), and relevant offline discussion/history we should know before implementation? For example, during project's offline discussion, team has questions raised including:

1. besides "updating the colors and the button icons keeping the current item structure" and "expanding the click target of the buttons", what are the other areas expected to be covered in this bug (or its "depends on" bugs)?

2. There could be reasons to have different styles across platforms, will this work conflicts those previous considerations? (we lack that history information)

3. Is "to use similar styles across platforms" a direction Firefox plans to go? Is it ok if we only apply this concept on "Download Panel"?

Guess those may not be real "problems" (but still valid "questions" for us) since UX materials are in above already, would you kindly advise? We could talk about this topic in our coming Vidyo call as well. 

Thanks for all your support till now, and I'm sure we'll still need that in both the near and far future :)

Comment 9

[:Paolo Amadini]

(In reply to Wesly Huang (Firefox EPM) from comment #8)
> Like mentioned in Bug 1269957 Comment#20, would you help us understand more
> about this bug, like the expected scope

I think this bugs and its dependencies will mostly be about covering those visual improvements that are not already covered by other bugs. Small adjustments, like margins and paddings, may be already part of existing bugs.

> 1. besides "updating the colors and the button icons keeping the current
> item structure" and "expanding the click target of the buttons", what are
> the other areas expected to be covered in this bug (or its "depends on"
> bugs)?

Looking at the design specification and the other bugs, those are the main two areas that come to my mind. I've filed bug 1289139 for the icons and we can reuse bug 950058 for the button area and margins. Feel free to add other bugs if I've left anything out.

I've also filed bug 1289142 to remove keyboard interaction from the Downloads Panel. This is not strictly required for an MVP but it simplifies the states we have to handle, allowing us to remove some code while working on other bugs, so you may consider whether you want to include this bug now or later.

It's not clear if we want the progress bar style to be exactly like in the visual design mockup, or retain the platform style for it. If it's the former, which might be probable given that we're unifying the other styles, we could file a separate bug just for the progress bar.

Bug 1288747 is one I'm investigating in the background that doesn't block any progress here. When it's done, we might be able to simplify some CSS styles.

> 2. There could be reasons to have different styles across platforms, will
> this work conflicts those previous considerations? (we lack that history
> information)
> 3. Is "to use similar styles across platforms" a direction Firefox plans to
> go? Is it ok if we only apply this concept on "Download Panel"?

If I understand correctly, correct me if I'm wrong, now this has been discussed with Stephen who clarified that this is the direction.

Comment 10

[Wesly Huang (EPM)]

Thanks Paolo for those detail! Also I think it's a great alternative that you've helped us list down all bug IDs so we got the overall picture at once, thanks! Now all tasks mentioned here are:

a. Bug 1289139 + Bug 950058
b. Progress bar style: depends on UX's plan, if yes then a separate bug that "blocks" this one
c. Bug 1289142 (optional, but it can bring us benefit for the future work, if we include it now)
d. Bug 1288747, *NOT* belongs to our project scope since you are working on it offline.

Assuming my read is correct, then if we decide to move dev resource from current work (mainly UX flow) to this (focus on UX style), the MVP scope here would be only (a) or (a)+(b), depends on UX's call. And based on team's preference we can put (c) in either CHE-MVP or CHE-BACKLOG. Do I miss anything?

And you are right, I heard Carol had some discussion with Stephen with regards to the design direction, will let her add here.

@Carol: Would you help clarify (b) above, and share your discussion (about the design direction thing below) result with Stephen here? Thanks!x 


(In reply to :Paolo Amadini from comment #9)
> (In reply to Wesly Huang (Firefox EPM) from comment #8)
> > 3. Is "to use similar styles across platforms" a direction Firefox plans to
> > go? Is it ok if we only apply this concept on "Download Panel"?
> 
> If I understand correctly, correct me if I'm wrong, now this has been
> discussed with Stephen who clarified that this is the direction.

Comment 11

[:Paolo Amadini]

(In reply to Wesly Huang (Firefox EPM) from comment #10)
> Do I miss anything?

All correct! :-)

Comment 12

[Carol Huang [:Carol]]

(In reply to Wesly Huang (Firefox EPM) from comment #10)
> Thanks Paolo for those detail! Also I think it's a great alternative that
> you've helped us list down all bug IDs so we got the overall picture at
> once, thanks! Now all tasks mentioned here are:
> 
> a. Bug 1289139 + Bug 950058
> b. Progress bar style: depends on UX's plan, if yes then a separate bug that
> "blocks" this one
> c. Bug 1289142 (optional, but it can bring us benefit for the future work,
> if we include it now)
> d. Bug 1288747, *NOT* belongs to our project scope since you are working on
> it offline.
> 
> Assuming my read is correct, then if we decide to move dev resource from
> current work (mainly UX flow) to this (focus on UX style), the MVP scope
> here would be only (a) or (a)+(b), depends on UX's call. And based on team's
> preference we can put (c) in either CHE-MVP or CHE-BACKLOG. Do I miss
> anything?
> 
> And you are right, I heard Carol had some discussion with Stephen with
> regards to the design direction, will let her add here.
> 
> @Carol: Would you help clarify (b) above, and share your discussion (about
> the design direction thing below) result with Stephen here? Thanks!x 

Had a discussion with Stephen last week. For Visual style alignment, he suggests we could have the same style for the icons on the download panel. But for the progress bar we will retain each the platform's style. Thanks! 

> 
> 
> (In reply to :Paolo Amadini from comment #9)
> > (In reply to Wesly Huang (Firefox EPM) from comment #8)
> > > 3. Is "to use similar styles across platforms" a direction Firefox plans to
> > > go? Is it ok if we only apply this concept on "Download Panel"?
> > 
> > If I understand correctly, correct me if I'm wrong, now this has been
> > discussed with Stephen who clarified that this is the direction.

Comment 13

[Wesly Huang (EPM)]

Thanks Paolo and Carol, so per comment 11 and comment 12 if we decide to move resource to here then the confirmed MVP is Bug 1289139 + Bug 950058, and we should consider to include Bug 1289142 into MVP or set it as backlog item. I will follow with team for a decision. Thanks!

Comment 14

[Carol Huang [:Carol]]

I list down more detail the component on Download panel and meet with Stephen last week. Our goal is to make Firefox look more consistent on each platform. Therefore, Highlight color, icon color,progress bar and downloading visuals(Arrow color) should be in the same visual style on download panel. Stephen will help on progress bar component design. 
I had a discussion with Sean and Rex today. They will study to see how much effort they will need to accomplish the goal. Thanks

Comment 15

[:Paolo Amadini]

Closing this meta-bug since all the planned work for it has been completed.