<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<style>
p tt, li tt {
background-image: linear-gradient(to bottom, rgba(230,240,163,1) 0%,rgba(210,230,56,1) 50%,rgba(195,216,37,1) 51%,rgba(219,240,67,1) 100%);
border-radius: 0.3em;
display: inline-block;
border: 1px solid #bbb;
padding: 2px 4px;
font-size: 10pt !important;
}
h1 {
color: #3366aa;
font-size: 13pt;
font-family: calibri,sans-serif;
}
</style>
</head>
<body smarttemplateinserted="true" text="#000000" bgcolor="#FFFFFF">
<div id="smartTemplate4-template">
<p>All,</p>
<p>I think some UI work on composer would be great. Maybe a
Ribbon-Style / extended Formatting Bar interface, plus fixing
the bugs around [Enter], so that writing paragraphs would be
more consistent. </p>
<p>
</p>
</div>
<p>So I am following up here to ask if this would be a good project
to mentor. If I had time I would write this as an Addon, but
sadly...<br>
</p>
<h1>Rationale</h1>
<p>To make it easier to compose great looking emails and encourage
users to use semantic tags for formatting.<br>
</p>
<h1>User Definable Styles</h1>
<p>in particular I like these widgets as they are very easy to use
(1 click) and show that styles can be expandable:<br>
<img shrunked:resized="false"
src="cid:part1.03060607.04080608@gmail.com" alt=""></p>
<p>"normal" this is actually the style that is assigned to<tt>
<p></tt> and adds a <tt><p></tt> mark if the text
is pure body. [Enter] should split the paragraph into 2. I would
like to design an easy to use interface for defining the styles
which would inject the css styles (either on class level or inline
on send). The implementation should allow for some downwards
compatibility but not too much (since we are using semantic styles
such as <tt>p</tt> <tt>h1</tt> <tt>h2</tt> etc style
deterioration on lesser mail clients would be something expected
anyway. I would aim for being at least "Broad strokes" compatible
with capable HTML clients such as outlook, so that largely font
sizes, colors, and very important formats in quoted mails stay
largely persistent. (This is not easy)</p>
<p>Each style should have a "follow on" rule, e.g. <tt><h1></tt>
=> <tt><p></tt>, <tt><p></tt> => <tt><p></tt>,
etc. and a broad selection of typographical attributes, e.g.</p>
<p>Font specific</p>
<ul>
<li>font family</li>
<li>font size</li>
<li>font weight<br>
</li>
<li>font decoration / formatting<br>
</li>
<li>color</li>
<li>background color</li>
<li>text shadow<br>
</li>
</ul>
<p>Block specific<br>
</p>
<ul>
<li>alignment<br>
</li>
<li>line distance</li>
<li>Spacing before & after (padding)<br>
</li>
<li>indentation</li>
<li>line width</li>
<li>border styles</li>
<li>box-shadow</li>
<li>gradients<br>
</li>
</ul>
<p>Inline / Character Styles</p>
<ul>
<li>these would be injected via <tt><span></tt> and would
allow stuff like the html entities in this mail (I am using <tt><tt></tt>
blocks which are defined as inline-block). the hardest thing
with these is to come up with a non-technical description (or
does one ues CSS terms). I think the benefit is pretty much
visible instantly once you come up with some examples.<br>
</li>
</ul>
<p>Most rich text editing users are familiar with the concept of
user defined styles. One thing to solve would how to persist the
style definitions, would the be only stored in the email and / or
globally. It should also be extendable in the form of a style
template so that a bunch of style definitions can be stored
together under a common name. I wouldn't attempt to implement the
template management as part of this project but make it extendable
so that the overarching template structure already exists.</p>
<h1>A panel for table styles</h1>
<p><img shrunked:resized="false"
src="cid:part2.00050601.04020908@gmail.com" alt=""></p>
<p>..at the moment the inclusion of tables in Composer is also
somewhat lackluster (if you ever try to paste an Excel formatted
table into a html mail you can see the sorry effects of this). So
at least we should provide a tool to quickly format the table with
a colored style and a heading.</p>
<p>As you can see there is support for odd and even rows (also
columns) and especially the header row and first column, I think
this pretty basic stuff and should be implementable via nth-row
etc.</p>
<img shrunked:resized="false"
src="cid:part3.07080400.09040504@gmail.com" alt=""><br>
<h1>List styles</h1>
should they be separate?<br>
<br>
<h1>Style Persistence</h1>
<p>There are 3 levels of style persistance: In the mail client /
profile, in the individual email and after sending on the
recipient's system. With persistence I mean the answer to the
question "where and how are these styles stored".<br>
</p>
<p>On the program level, of course we can (and probably should)
persist the styles in the config database, so that they can be
used again and again (Similar to Word's "Default template"). Then
these styles could be copied into the composed emails using CSS
classes, e.g. by injection into the <tt><head></tt>
section. Of course the epxectation of the users is that if I
modify my style while composing the email, it will automatically
be updated (and stored) in my composed email. Likewise, if I
re-open the email from my drafts folder (or via "Edit as New") i
would expect my style selections to reflect these styles (provided
I have created the mail with the same system = current
Thunderbird); if I have chosen to make my headings blue, I want
them to be blue again when I continue editing.<br>
</p>
<p>The next question is whether changes to for example the <tt><p></tt>
style will then atuomatically affect all following emails, or how
to create an easy to understand interface<br>
</p>
<p>There should be an option to persist these styles down to the
inline level for "lesser" mail clients. We need to have some
clever way of optionally pushing down styles from the class level
(maybe on send or save) but we should also be able to change the
style on class level later. This means, in this mode, that inline
styles must somehow be marked for deletion (or ignored) while
composing.</p>
<p>I think using inline styles this is the biggest challenge for
actually implementing a proper styling system, therefore I would
be happy if we could implement CSS class (or element level)
styling first so at least non mail-mangling clients display the
html content in "Hi-Fidelity".<br>
<br>
</p>
<h1>Clipboard and Format Painter</h1>
<p><img shrunked:resized="false"
src="cid:part4.09080308.07050307@gmail.com" alt=""></p>
<p>a more helpful panel when dealing with pasting and can support
things like</p>
<ul>
<li>Paste</li>
<li>Paste without Formatting</li>
<li>Paste as Quote<br>
---------------------<br>
</li>
<li>Paste as Code Snippet (if we can select a quickStyle when
pasting this will be very handy for developers and other
specialists)</li>
<li>Paste as <tt><User defined Style 1></tt><br>
</li>
</ul>
<p>Format Painter: can be used to transfer<span> or
<block> level style depending on what is selected.</p>
<p>To make it easier for the user to understand the style
application I would suggest a "x-ray" mode which shows paragraph
and spanned outlines of the currently active element.</p>
<p>Also an Fx inspector style breadcrumb panel might be helpful:</p>
<p><img shrunked:resized="false"
src="cid:part5.01040902.02020503@gmail.com" alt=""></p>
<p>interestingly in a standard email the nesting would typically not
be very deep (maybe 3 to 5 levels), clicking trhe container would
tightly outline it on screen - also an advantage when
troubleshooting <tt><spanned></tt> font attributes. do you
think this might be a helpful tool for formatting HTML mail?<br>
</p>
<h1>Scope<br>
</h1>
<p>Well that's the one I am worried about. Might all be a bit much
for a 3 months project...<br>
</p>
<p>PS: Ludovic, I am just watching the <a
href="http://mirror.as35701.net/video.fosdem.org//2014/UD2218A/Saturday/State_of_Thunderbird.webm">State_of_Thunderbird
video from FOSDEM</a>, you just uploaded - good stuff. If you
want somebody who is excited about UI, just look my way. I
definitely think we should aim for a slice of the OUtlook market
and I think Improving UI is the way to go. We HTML heads know that
we can create awesome looking emails (using Source(HTML) view via
plugins), but I want to make this accessible to all users.<br>
</p>
<p>PPS: For those of you who read this email in HTML, you might
notice the relatively pleasant spacings between paragraphs, there
were achieved by simply highlighting the text and choosing the
Paragraph style. What is problematic that the default style is
"Body text" which forces an over-abundant use of the <tt><br></tt>
tag which is bad for layout. And I had to remove a bunch of
them... I feel this is something Composer should do automatically
-<br>
</p>
<p>I am hoping to address the issue soon by fixing the long-standing
<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=330891">[Bug
330891]</a>. The expectation in HTML mode (to our non HTML
understanding users, more like Rich text, layout mode), the
expectation is that [Enter] starts a new paragraph (see numerous
Rich Text editors for this behavior). It think this (defaulting to
<tt><p></tt> on Enter) would be a lot friendlier to most
users. Hope it is not too difficult...<br>
</p>
<br>
<div class="moz-signature">-- <br>
<style type="text/css">
.myName:hover, .myName > a:hover { font-size:13pt; text-shadow: 3px 3px 4px rgba(200,250,200,0.7);}
.moz-signature {opacity: 1.0 !important;}
.myName a { cursor: pointer !important; transition:font-size 0.5s;}
</style>
<div id="mySignature" style="width: 65%; padding: 0.8em 1.2em;
font:x-small verdana; color: #444; box-shadow: 4px 4px 9px -2px
rgba(0,0,0,0.65); border-radius: 1em; padding: 0.4em 2em;
border: 1px dashed #444; background: rgb(230,240,163);
background: linear-gradient(to bottom, rgba(230,240,163,1)
0%,rgba(210,230,56,1) 50%,rgba(195,216,37,1)
51%,rgba(219,240,67,1) 100%);">
<b class="myName" style="text-shadow: 1px 1px 2px #DDD;
transition:font-size 0.5s;"><a
href="mailto:axel.grude@gmail.com">Axel</a></b>
<br>
Software Developer
<br>
Thunderbird Add-ons Developer
<span style="color:#666666; font-size:xx-small">(QuickFolders,
quickFilters, QuickPasswords, Zombie Keys, SmartTemplate4)</span>
<br>
AMO Editor </div>
</div>
<div id="smartTemplate4-quoteHeader"><br>
<div style="display:inline-block;border:1px rgb(210,210,210)
solid;font-size:small;padding:0.8em;background-color:rgba(210,210,210,0.15);box-shadow:
4px 4px 1px rgba(50,50,50,0.15);border-radius:3px;"><b>Subject:</b>
Google Summer of Code 2014
<b>To:</b> <a class="moz-txt-link-abbreviated" href="mailto:tb-planning@mozilla.org">tb-planning@mozilla.org</a> - tb-planning [<a>tb-planning@mozilla.org</a>]<br>
<b>From:</b> Patrick Cloke <a class="moz-txt-link-rfc2396E" href="mailto:clokep@gmail.com"><clokep@gmail.com></a> - Patrick
Cloke <a href="mailto:clokep@gmail.com">clokep@gmail.com</a><br>
<b>Sent: </b>Friday, 07/02/2014 16:26:33 16:26 GMT Standard
Time {GMT ST} +0000 [Week 6]<br>
<b>Subject:</b> Re: Google Summer of Code 2014 </div>
</div>
<blockquote class=" cite"
id="mid_CAC4yyp_CZwSCx8_b_8CHbPALpHEzbu2CQqPp7hPUw7K7Y8Tbpw_mail_gmail_com"
cite="mid:CAC4yyp=CZwSCx8-b-8CHbPALpHEzbu2CQqPp7hPUw7K7Y8Tbpw@mail.gmail.com"
type="cite">
<div dir="ltr">
<div>
<div>
<div>
<div>Not sure if people say Florian's post about GSoC 2014
[1], but we should put up some ideas for ideas on the
brainstorming page [2]. Thunderbird had a couple of
students last year (mconley had someone working on the
address book stuff, I had a student working on Yahoo!
chat protocol support).<br>
<br>
</div>
So if there are people with interesting projects (i.e. 6
week projects that won't be blocking the path ahead for
Thunderbird) or if someone is willing to mentor, not would
be a great time to step forward! (I'm sure if someone is
willing to mentor, but doesn't have a specific project
idea in mind...something will be found.)<br>
<br>
I think this is a good opportunity for us to try to get:<br>
</div>
1. Some bugs fixed or new features added.<br>
</div>
2. Some new blood into the community.<br>
<br>
</div>
Thanks,<br>
Patrick<br>
<div>
<div>
<div>
<div><br>
[1] <a moz-do-not-send="true"
href="http://blog.queze.net/post/2014/01/24/Project-ideas-for-Summer-of-Code-2014">http://blog.queze.net/post/2014/01/24/Project-ideas-for-Summer-of-Code-2014</a><br>
[2] <a moz-do-not-send="true"
href="https://wiki.mozilla.org/Community:SummerOfCode14:Brainstorming">https://wiki.mozilla.org/Community:SummerOfCode14:Brainstorming</a><br>
</div>
</div>
</div>
</div>
</div>
<br>
<fieldset class="mimeAttachmentHeader"></fieldset>
<br>
<pre wrap="">_______________________________________________
tb-planning mailing list
<a class="moz-txt-link-abbreviated" href="mailto:tb-planning@mozilla.org">tb-planning@mozilla.org</a>
<a class="moz-txt-link-freetext" href="https://mail.mozilla.org/listinfo/tb-planning">https://mail.mozilla.org/listinfo/tb-planning</a>
</pre>
</blockquote>
<br>
<br>
</body>
</html>