Closed Bug 1011014 Opened 6 years ago Closed 3 years ago

Implement redesigned sidebar style

Categories

(Firefox :: Theme, defect)

defect
Not set
normal

Tracking

()

RESOLVED DUPLICATE of bug 1355328

People

(Reporter: ntim, Unassigned)

References

()

Details

Attachments

(4 files, 1 obsolete file)

The bug is about implementing the style specified here : http://people.mozilla.org/~sfranks/Sidebars/Improving%20History%20Sidebar.pdf
Blocks: 856307
Assignee: nobody → ntim007
Status: NEW → ASSIGNED
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 :)
Flags: needinfo?(sfranks)
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.
Flags: needinfo?(sfranks)
(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
Added Row highlight. Same colour as the upper and lower bands, and the text should be white.

http://cl.ly/image/1R401e2p3K09
Attached image Screenshot of userstyle (obsolete) —
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.
What do you think ?
Flags: needinfo?(sfranks)
You can still try it yourself at the same URL btw.
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!
Flags: needinfo?(sfranks)
Does this also influence the bookmarks sidebar?
(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.
(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?
(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
Depends on: 1048887
Assignee: ntim007 → nobody
Status: ASSIGNED → NEW
Duplicate of this bug: 983819
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 ?
Flags: needinfo?(sfranks)
Attached image Light theme screenshot
Attachment #8429596 - Attachment is obsolete: true
Attached image Dark theme screenshot
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.
Flags: needinfo?(sfranks) → needinfo?(philipp)
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 :)
Flags: needinfo?(sfranks)
Flags: needinfo?(philipp)
Flags: needinfo?(ntim.bugs)
(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 :)
Flags: needinfo?(ntim.bugs) → needinfo?(philipp)
(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 ?
Attached file 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?
Flags: needinfo?(shorlander)
Flags: needinfo?(sfranks)
Flags: needinfo?(philipp)
We have a new Photon design for sidebars.
Status: NEW → RESOLVED
Closed: 3 years ago
Flags: needinfo?(shorlander)
Resolution: --- → DUPLICATE
Duplicate of bug: 1355328
You need to log in before you can comment on or make changes to this bug.