1011014 - Implement redesigned sidebar style

Status: RESOLVED DUPLICATE of bug 1355328

(Firefox :: Theme, defect)

Description

[Tim Nguyen :ntim]

The bug is about implementing the style specified here : http://people.mozilla.org/~sfranks/Sidebars/Improving%20History%20Sidebar.pdf

Comment 1

[Tim Nguyen :ntim]

Hey Steven,
I decided to put this into an userstyle form, until the UX design is OK for implementation. Right now, it's very buggy, and I prefer not making patches.
Once, the UX design is matched in the userstyle (except for moving stuff around, which will be done in a future bug), I'll start making patches, then request review.
So here's the userstyle : http://userstyles.org/styles/101625/sidebar-redesigned
The tree styling is quite buggy, but I don't have a spec yet for the tree items, can you provide one please ?

Thanks :)

Comment 2

[Sevaan Franks [:sevaan]]

Hey Tim,

I've installed the User Style. Can you confirm that this is how it is looks at the moment? http://cl.ly/image/3d293K0s430I

I think a lot of work can still be done to style it while I spec out the tree items.

Comment 3

[Sevaan Franks [:sevaan]]

Attachment: Colour information for sidebar

Comment 4

[Sevaan Franks [:sevaan]]

(In reply to Tim Nguyen [:ntim] from comment #1)

Great idea using Userstyles though! Keep me posted and I will keep updating to highlight any changes. Thanks very much for your help!

Here's a current state vs the mockup side-by-side to help with comparison: http://cl.ly/image/0H0O0M2b3C0A

Comment 5

[Sevaan Franks [:sevaan]]

Added Row highlight. Same colour as the upper and lower bands, and the text should be white.

http://cl.ly/image/1R401e2p3K09

Comment 6

[Tim Nguyen :ntim]

Attachment: Screenshot of userstyle

Here's a screenshot of the updated userstyle. I've done nearly everything. Except that I couldn't figure out how to add margin without screwing up the layout. Also, I don't think there's a way to detect the top level tree.

Comment 7

[Tim Nguyen :ntim]

What do you think ?

Comment 8

[Tim Nguyen :ntim]

You can still try it yourself at the same URL btw.

Comment 9

[Sevaan Franks [:sevaan]]

Sorry for the delayed reply. It's coming along, Tim! Some revisions to the tree:

1) We don't need the white box around the top level categories or any of the folders. They just need to be around favicons.

2) Let's increase the line spacing so that there is 3px between the white favicon boxes as well.

3) The font color should be #8c9195. When a tree is expanded, then the whole tree's font colour should be #ffffff, to draw the user's attention a little more. The down arrow should also be orange (#ff955a).

I'll submit a bug to get you the correct icons for the top-level dates.

Good work so far, thanks!

Comment 10

[(Currently slow to respond) Philipp Sackl [:phlsa] (Firefox UX) please use needinfo]

Does this also influence the bookmarks sidebar?

Comment 11

[Sevaan Franks [:sevaan]]

(In reply to Philipp Sackl [:phlsa] from comment #10)
> Does this also influence the bookmarks sidebar?

Yes, this also influences the bookmarks sidebar. The styling of which can be found in Bug 1007864.

Comment 12

[Sevaan Franks [:sevaan]]

(In reply to Tim Nguyen [:ntim] from comment #8)
> You can still try it yourself at the same URL btw.

Tim, when last we touched base you said there were some technical limitations to the new design. Could you please shed some light on what those were?

Comment 13

[Tim Nguyen :ntim]

(In reply to Sevaan Franks [:sevaan] from comment #12)
> (In reply to Tim Nguyen [:ntim] from comment #8)
> > You can still try it yourself at the same URL btw.
> 
> Tim, when last we touched base you said there were some technical
> limitations to the new design. Could you please shed some light on what
> those were?

Here are the limitations :
- No way to detect top level items/website favicons
- I couldn't add margin between items since it destroyed the layout

Comment 15

[Tim Nguyen :ntim]

I've been able to work around most issues.
Though, I still can't figure out how to put the white background on icons without affecting top level icons. Should I go ahead without adding a white background on icons ? or should I implement the light theme ?

Comment 16

[Tim Nguyen :ntim]

Attachment: Light theme screenshot

Comment 17

[Tim Nguyen :ntim]

Attachment: Dark theme screenshot

Comment 18

[Sevaan Franks [:sevaan]]

Sorry, this has been on my plate a long time. I'm not sure where redesigned sidebars are standing at the moment, so changing this NI to Philipp.

Comment 19

[(Currently slow to respond) Philipp Sackl [:phlsa] (Firefox UX) please use needinfo]

Just tried the User Style. Great work there!

Some nits:
- There's a bug on Mac hidpi where the close icon shows up too large (it gets to the correct size when hovering): http://cl.ly/image/3U3F3P29211n
- The white background could work, but it currently fails mostly because the boxes are touching each other. Is there a way to increase the spacing between the rows? I tried to edit the CSS but didn't find a way.
- Sevaan had some nice icons in his mockup (the calendar sheet). Could we use those? This could be a separate bug.
- Divider lines in bookmarks are super-bright on Windows. Could we make those the same color as on Mac? It's rgb(63, 74, 90) and just a one pixel line (Windows has 2 pixels, but really shouldn't).
- I made some edits to the user style to adjust some spacing and remove a border or two. Unfortunately I lost track of all the stuff I've changed, so the best I can do is to attach the full edited file: https://pastebin.mozilla.org/8830467
- The icons in the search boxes on Windows are really hard to see. I made white versions to use instead: http://cl.ly/1L0k0A210n3L
- The arrow next to the »View« button in History is really hard to see on Windows. Can we make it white there?

NI Sevaan about the icons and Tim about everything else :)

Comment 20

[Tim Nguyen :ntim]

(In reply to Philipp Sackl [:phlsa] please use needinfo from comment #19)
> Just tried the User Style. Great work there!
Thanks ! I updated the userstyle to address your comments. What do you think ?

> Some nits:
> - There's a bug on Mac hidpi where the close icon shows up too large (it
> gets to the correct size when hovering): http://cl.ly/image/3U3F3P29211n
Fixed.

> - The white background could work, but it currently fails mostly because the
> boxes are touching each other.
By white background, do you mean the light theme or the white header ?
The white header is a bug on OSX, anyway, I have fixed that.

> Is there a way to increase the spacing
> between the rows? I tried to edit the CSS but didn't find a way.
The best I can do is increase the top and bottom padding. As for the margin, I'm not sure it is possible.

> - Sevaan had some nice icons in his mockup (the calendar sheet). Could we
> use those? This could be a separate bug.
Sure, I will do that once getting to the patch phase.

> - Divider lines in bookmarks are super-bright on Windows. Could we make
> those the same color as on Mac? It's rgb(63, 74, 90) and just a one pixel
> line (Windows has 2 pixels, but really shouldn't).
I will fix that in the patch phase.

> - I made some edits to the user style to adjust some spacing and remove a
> border or two. Unfortunately I lost track of all the stuff I've changed, so
> the best I can do is to attach the full edited file:
> https://pastebin.mozilla.org/8830467
Thanks !

> - The icons in the search boxes on Windows are really hard to see. I made
> white versions to use instead: http://cl.ly/1L0k0A210n3L
Thanks for the icons !

> - The arrow next to the »View« button in History is really hard to see on
> Windows. Can we make it white there?
Will get to that in the patch phase as well :)

Comment 21

[Tim Nguyen :ntim]

(In reply to Philipp Sackl [:phlsa] please use needinfo from comment #19)
> - The icons in the search boxes on Windows are really hard to see. I made
> white versions to use instead: http://cl.ly/1L0k0A210n3L
Do you have SVG versions of these icons ?

Comment 22

[(Currently slow to respond) Philipp Sackl [:phlsa] (Firefox UX) please use needinfo]

Attachment: Search-Close-SVG.zip

Thanks Tim!
I've attached the SVG assets.

I think generally we can move towards patches here.
Stephen had one piece of feedback which was to use -moz-appearance:-moz-mac-vibrancy-dark for the sidebar background on Yosemite macs.

Stephen, do you have any other feedback?

Comment 23

[Stephen Horlander [:shorlander]]

We have a new Photon design for sidebars.