Request (and offer) update UI to a more modern look

[elioqoshi]

Hi there,
I actually love Conversations and use it for most quick emails I need to write.
As a designer however, it has a bit of an outdated UI, which I'd love to contribute to, its just that I'm not a coder :)
Looking forward to your thoughts!

[protz]

Sure! It's actually "fairly" simple to contribute to the UI.

• Setup a development environment (see https://developer.mozilla.org/en-US/Add-ons/Setting_up_extension_development_environment)
• Then, hack on the files called content/stub.xhtml (mostly handlebars templates) and skin/conversation.css
• You'll be better off if you setup remote debugging to use the Firefox dev tools https://developer.mozilla.org/en-US/docs/Tools/Remote_Debugging/Thunderbird (otherwise, it's most likely to be a pain).

I'm definitely open to suggestions / pull requests! But if you're committed about fixing this, I think it's better to iterate on mockups first, before moving on to the actual hacking on the code?

Cheers,

Jonathan

[blerner]

Potentially related to this: when updating to Tb38 on Windows today, I noticed that everything has gotten very, very white. Apparently, the background-color: window decoration on the body of the multimessage window, and on the #conversationHeader, now means "white". I changed them locally to be transparent, and got back the Tb37 look...

[blerner]

Er, transparent doesn't work for the header, because scrolling content underneath it will show through. But setting the background color to rgb(248,248,248) (which seems to be the computed result) does work.

[boscharun]

The earlier blue background/gray header was really much better. Would it be possible to add something like a theme option from the plugin options?

P.S. Thanks a lot for this amazing plugin.

[blerner]

In the meantime, I "fixed" it with a Stylish extension:

@media all and (-moz-windows-default-theme) {
  browser#multimessage {
    background-color: rgb(248, 248, 248) !important;
  }

  @-moz-document url(chrome://conversations/content/stub.xhtml) {
    body { background-color: rgb(248, 248, 248) !important; }

    div#conversationHeaderWrapper > div#conversationHeader {
      background-color: #dddde0 !important;
    }
  }
}

[boscharun]

Hi Blerner, would really appreciate if you could guide on where and how to put this code in. I am pretty sure a lot of people would want to use this.

Thanks in advance.

[protz]

Ben, do you know any special moz-specific CSS color that would look good both on Windows and Linux?

Otherwise, I'm up for a pull request with a @media -moz-windows-default-theme in it.

[blerner]

Not offhand, no. I had tried using a moz- color, but couldn't find one that worked, so I dug back through older versions of mxr's history to find that rgb(248,248,248) color above.

[ctlajoie]

Did you try these in addition to the moz colors?

[blerner]

I think I'd tried a couple of them, and I think they all wound up rendering as pure white, so I gave up looking for the "right" solution and switched to looking for a working "solution" :)

[ctlajoie]

I don't run Windows but I spun up a VM to mess with the colors. I think "Menu" works well enough. Thoughts?

[protz]

I think that'll be alright.

Remember that you can play with the opacity: CSS property (e.g. on the
background layer) to have the background of the body be a shade of the
menu color. Do you think that would help?

On 7/11/2015 12:38 AM, Chris Lajoie wrote:

I don't run Windows but I spun up a VM to mess with the colors. I
think "Menu" works well enough. Thoughts?
headerwrapper
https://cloud.githubusercontent.com/assets/247708/8630939/06de1af0-272a-11e5-9ebe-929c6f24ed80.png

—
Reply to this email directly or view it on GitHub
#967 (comment).

[ctlajoie]

I'm not sure how it used to look, so I don't know what look you're going for. If I could see what it is "supposed" to look like I could try to get it as close as possible to that using the standard named colors like menu, window, etc.

[ctlajoie]

@protz, do you have an old version of the plugin?

[msprotz]

Sure. Older versions are at https://addons.mozilla.org/en-US/developers/addon/gmail-conversation-view/versions ; the previous one (2.8.1) needs Thunderbird 31 to run, though.

Thanks!

[ctlajoie]

So here is what it looked like in 2.8.1. And now I'm confused as to what exactly people are complaining about. The current version looks virtually identical (without my modification that made the #conversationHeader gray).

In any case I think the gray looks better and it makes it easier to tell where the list ends and the preview pane begins.. If you agree I'll go ahead and submit a pull request with that modification.

As to the OP's suggestion that the UI is "outdated", I don't see any merit in that. As long as everything is readable and conforms to system themes, I think that's all you could ever want. IMHO of course.

[blerner]

It's not GConv that changed -- it's Thunderbird. Try running the same extension in Tb37 and Tb38, and the colors should be different. (In particular, the subject line where the buttons are should be the same background gray.) That's why I specifically mentioned the Tb versions ;-) The menu color you found looks about right to me...

[ctlajoie]

I see, thanks Ben. I'll go ahead and put in a PR for the gray #conversationHeader

[protz]

@elioqoshi Hey there! What is the current status of this?

The default theme recently broke again on Linux-trunk (due to Gtk3 builds). Now would be a great time to look into the refresh :)

Cheers,

Jonathan

Ps: if the generated HTML is hard to theme / modify, I can also tweak the HTML generation so that it's easier to make it look good

[apertureless]

+1

If you need help ping me.

I really like the way postbox visualized conversations. It's pretty simple and modern.

[elioqoshi]

@protz Oh dear, I'm a GitHub noob and completely forgot about this in the Notifications (designer problems)
We (me and some other guys at Mozilla) actually are creating a fork of this called Convo. Would love if we can get some changes upstream. Maybe we could call the addon in overall Convo, so we don't need to seperate? I actually did the logo for the redesign project (attached)
https://github.com/ThunderbirdConvo

Currently working on some mockups for the UI using Material Design from Google, will keep you updated.

[elioqoshi]

Finished the first mockup of the conversation view with collapsed emails. Heavily Material Design used here. What do you think?

[elioqoshi]

And here is one with all the names in the same default color

[msprotz]

Just a quick reply as I'm at work, but if it's just about a re-design of the app, I'm all in favor of integrating! I think forking would be a very bad idea, and you probably want to benefit from the 100,000+ user-base of Conversations. Let me review this more closely once I'm back home. Is there anywhere I can look at your current patch?

[elioqoshi]

Again, I'm not a developer so I don't know what's best in terms of software development. I just think that the addon deserves more attention by having a better UI/UX and eventually a smarter name/branding than Gmail Conversation view.
We have not coded much yet, the mockups you see are pretty much what we at Mozilla have hacked on in the last days, so once we decide on the design, we can go on with coding it.

Basically it's all about the redesign of the UI and I personally would think the addon could benefit from a new name. What do you think?

[msprotz]

The name is actually Thunderbird Conversations (see https://addons.mozilla.org/en-US/thunderbird/addon/gmail-conversation-view/). "gmail-conversation-view" is the old name that still hangs around in some URLs.

I thought you had already started writing some CSS. I think the mockups look good, and I'd be happy to help you integrate them (via pull requests) once you start the coding phase!

[blerner]

Personally -- I think using Material Design on any platform that isn't a recent Android is as out-of-place as using Windows Metro on OS X, or Gtk+ on Windows. The point is to feel native and integrated into the host environment, not to force another model of UI design.

That said -- I rather like the screenshots above :) I prefer the first one, with multiple colors for multiple authors, but I'm not a huge fan of solidly-colored flat icons (they feel a bit out of place to me). I'm also not sure what they mean: in the conversation header, from right to left I see "delete, archive, no, chat, find a mailman, and crop a picture"... ;-) What will the UI look like to indicate "there are unread messages in this thread"? Currently, it's a blue star in the button, but here every icon is already blue...

What I'd really like to see in a refresh of this addon is something motivated by an incredibly long (and ongoing) email thread -- the "accordion" view in Gmail that hides even the message headers of anything but the first and last messages in a thread, and hopefully with it the ability to make TBConv even lazier about loading and rendering messages, so that accessing the newest email in a thread won't immediately hang TB for a few seconds while all 100+ messages are rendered. (The behavior in Gmail is that once you click on the accordion it expands to all the collapsed headers, and once you click on a header it expands that message.)

[xi]

So, I did some quick experiments (see https://github.com/xi/GMail-Conversation-View/tree/feature-ui). I found a major issue with the design approach taken by @elioqoshi:

Material design and flat design in general uses few borders and instead depends on color contrast completely. However, since we are using system colors, we do not have control over these colors I found that with my theme the contrast is insufficient and the UI gets really messy.

I am not sure how to go on. I will see if I can cherry-pick some details from the mockups. Apart from that I will wait for feedback.

[protz]

Excellent! Any screenshots?

…

On 1/5/17 11:08 PM, Tobias Bengfort wrote: So, I did some quick experiments (see https://github.com/xi/GMail-Conversation-View/tree/feature-ui). I found a major issue with the design approach taken by @elioqoshi <https://github.com/elioqoshi>: Material design and flat design in general uses few borders and instead depends on color contrast completely. However, since we are using system colors, we do not have control over these colors I found that with my theme the contrast is insufficient and the UI gets really messy. I am not sure how to go on. I will see if I can cherry-pick some details from the mockups. Apart from that I will wait for feedback. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#967 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AANGs5BlDe7p1APKoIQDVHJi71c07mfKks5rPXfrgaJpZM4E7WEf>.

[fllp]

Had this on the radar for the last few months and actually tonight i wanted to give it a try. Seems @xi beat me to it by mere hours 😄
It looks great so far, i took the liberty of taking some screens. Contrast is a little low though.
Running on 45.6.0 on Linux Mint (Cinnamon 3.2 with a variant of the NUMIX GTK-Theme).

Message details

Actions menu

Contact popup

[elioqoshi]

Getting there! Small but helpful steps! Let me know if I can help with anything. Do you need the source files? I have done them in Adobe Illustrator.

ping @AleksanderKoko to chime in as well

[xi]

Hi @elioqoshi, nice that you are still interested! There are some things you could do! Most important would be to figure out how your mocks relate to thunderbird themes, i.e. which colors should we use? (see https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#System_Colors for a list of available colors)

And then there is the issue that nobody seems to have enough time to implement a whole design on their own, so it could be helpful to split this into several tasks. This gets easier if you can provide some background information:

• What are the changes you individual propose? (e.g. remove round borders, change colors, ...)
• How do they relate to each other? Are their dependencies between them?
• Which one is the most important in your opinion (and why)?

Do you need the source files? I have done them in Adobe Illustrator.

I think I cannot open illustrator files. But a color scheme (for the non-system colors) and individual components would be a great addition to the comps you already provided.

[AleksanderKoko]

Hi @elioqoshi . Thanks for the ping. Saw a draft of design a couple of days ago and I have some time on my open source hours calendar to work with something useful and cool. Have to read this thread, really long.

[fllp]

@protz, @xi: I could provide testing/screens for TB 50.0b3 if need be.
There are a few things that look out of place in the beta. But i guess that might not be top priority right now?

[xi]

@fllp if it is not too much of a hassle it would be great if you could just upload it here.

[fllp]

Sure, i'll post them as soon as i can.
But wouldn't that be worth opening another issue?

[xi]

Here is a screenshot of the current state, including #1142:

Next steps:

• rework some colors (I need input from @elioqoshi / @AleksanderKoko for this)
  • make sure that user colors work on both light and dark backgrounds
  • use better color for link in case chrome background is light and composition background is dark (as in my case)
  • use nicer colors for notification bars
  • some grays do not currently work well with both light and dark themes
• message header
  • add user initials
  • use icons for default action, "show details", and "more"
• message footer (potentially a lot to do here because of quick reply)
  • I am not really fimiliar with this feature, so I would gladly leave this task for someone else (@fllp still interested?).

Also, there is still the question of what to do with borders (see #967 (comment)).

[msprotz]

Screenshot on OSX:

[elioqoshi]

Its getting there!

make sure that user colors work on both light and dark backgrounds

Not suggesting that. Material Design Colors aren't designed for that. We can find a compromise however.

Also, your current theme settings are pretty inconsistent with Material Design, so not sure how good it would be to base changes on that.

[xi]

make sure that user colors work on both light and dark backgrounds

Not suggesting that. Material Design Colors aren't designed for that. We can find a compromise however.

Also, your current theme settings are pretty inconsistent with Material Design, so not sure how good it would be to base changes on that.

I don't really understand what you are saying. This plugin uses theme colors for all the chrome, not material design colors. Are you suggesting to change that?

I am strongly in favor of using theme colors. Consistency across applications for me as a user is hugely important.

So if we stick to theme colors we have to ensure that colors work with both light and dark themes.

[elioqoshi]

Sorry, I don't really follow you here. Might be a bit difficult for me via written text.

@jancborchardt might have an idea for colors which work well on white and black?

[fllp]

Hi @protz, @xi and @elioqoshi.
First: Danke Tobias! 👍

I took some screenshots of d7da612a for linux (GTK3/Linux Mint), using TB 45 and 51b1. See below.
It seems TB 50 made the white 'canvas' color transparent or removed it alltogether, only the text itself has white background now.
Also i noticed that the tags are not yet back to what they looked like in @xi's first quickdraft.

Current state stable

Current state Beta

[fllp]

@elioqoshi: Oh and i think what @xi means by keeping theme colors: It seems to me right now Conversations inherits the color palette from TB which in turn inherits it from the currently used color theme of the OS. (Theme colors might rarely/never change on Windows or OS X for a regular user but Linux is a different case.)
Using a custom color palette complying with material would 'break' the native look.
So the decision to make would be: follow the material design color scheme or keep a native color palette consistent with the OS's look.

[Standard8]

So I think most of the plans here were completed. As it was a while ago, and we've not had much activity since, I'm going to close this out.