<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1252">
<link href="chrome://translator/skin/floatingPanel.css"
type="text/css" rel="stylesheet">
</head>
<body smarttemplateinserted="true" text="#000000" bgcolor="#FFFFFF">
<div id="smartTemplate4-template">Dear Bron,
<br>
<br>
yeah I think that is (the start of) a good solution, one question
is obviously when to do this? On inserting the style (and keep a
track of UUID / or use messageid in Composer), when sending or
(like so many email clients) on receiving?<br>
<br>
From the point of view of reusing the old layouts in an email
thread (so when I reply to a reply), should it be possible to
reuse my own layouts as a starting point? <br>
<br>
Or at least we should be able to pre-define our styles (which we
currently already have a drop-down for) in a "Style template"
sheet. This might just be a simple HTML file with a style block in
the <head> section and some preview examples for each style.
Also semantic as such as <h1> would probably need a new
attribute "styleBase" that could be used for inheriting certain
parts such as font-family and margins. In Word processors you
usually also have a rule of what tag follows next (e.g. if you hit
enter after h1,h2,h3 etc you expect a <p>, <li>
expects another <li>) so I wonder if this is something that
should/could be built in as well, or is the current (hard-coded)
way good enough.<br>
<br>
Another tool that is BADLY needed is the format painter which can
be used to apply an ad-hoc format of one section to another.
Finally I think it would be great if block and line level outlines
of the currently focused elements could be made visible in order
to see where a style definition starts and ends. Nested Font tags
seem to be especially designed to endlessly confuse the users, as
they add a huge amount of unpredictability when you are using the
cursor to navigate between different parts of the text. I think
all of this needs a big amount of conceptual work before we even
think of implementing any of this.<br>
<br>
If you have an archive of the list, you can also see my
suggestions in <br>
<br>
"Google Summer of Code 2014 - Proposal to Improve Composer UI"<br>
<br>
where I did some ground work on what could be done to improve
Thunderbird's Email Editor, so I don't want to repeat a lot of
things I have mentioned there. Particularly an email I wrote on
07/Feb/2014 which has a ton of screenshots and ideas, if you want
a copy of it please email me off-list... at that stage I still
"abused" the <head> section of the email to carry my styles
but I now think this is a bad idea is it often discarded.<br>
<br>
<br>
thanks,<br>
Axel<br>
-- <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;}
.myLogo {
transition: all .4s ease-out;
}
/*
.myLogo:not(:hover) {
-moz-animation-delay: 1s;
-moz-animation-duration: 3s;
-moz-animation-name: qfIconRotateX;
-moz-animation-iteration-count: infinite;
}
*/
.myLogo:hover {
transform: scale(3) translate(-30px,-5px);
}
@keyframes qfIconRotateX {
from { transform: rotateX(0deg); }
to { transform: rotateX(359deg); }
}
</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 Grude</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 <img style="margin-top: 1em; float: right;
box-shadow: 1px 1px 2px rgba(20, 20, 20, 0.4);"
moz-do-not-send="false" class="myLogo"
src="cid:part2.06020005.01030900@gmail.com" alt="Get
Thunderbird!" height="15" width="94">
</div>
</div>
<div id="smartTemplate4-quoteHeader">
<style type="text/css">
#newHeader b { font-weight:bold; color: #990033; }
</style><br>
<blockquote type="cite" style="margin-bottom: -30px !important;
padding-bottom:30px !important;">
<div id="newHeader" style="font-size: x-small; padding:1em;
background-color:rgba(220,220,240,0.4); border-radius:3px;"> <b>Subject:</b>
Re: The infamous Mozilla core editor<br>
<b>To:</b> <a class="moz-txt-link-abbreviated" href="mailto:axel.grude@gmail.com">axel.grude@gmail.com</a>, <a class="moz-txt-link-abbreviated" href="mailto:tb-planning@mozilla.org">tb-planning@mozilla.org</a> <br>
<b>From: </b>Bron Gondwana<br>
<b>Sent: </b>Sunday, 08/03/2015 23:06:37 23:06 GMT ST +0000
[Week 10]<br>
</div>
</blockquote>
</div>
<blockquote class=" cite"
id="mid_1425855997_890381_237597493_65C6AE0E_webmail_messagingengine_com"
cite="mid:1425855997.890381.237597493.65C6AE0E@webmail.messagingengine.com"
type="cite">
<title></title>
<div>The "obvious" solution is to prepend a UUID to every class
within a message, in the same way that MIME part separators are
generated.<br>
</div>
<div> </div>
<div>The downside is that everybody[tm] is not doing to trust that
your classes aren't going to leak outside your message, so they
will defang your classes by adding more to them as well. That's
what we do at FastMail to stop classes leaking. It's a mess.<br>
</div>
<div> </div>
<div>The big advantage of just putting the font elements on
everything is that it's simple, and it works everywhere. Sadly,
that's sometimes better than perfect.<br>
</div>
<div> </div>
<div>Bron.<br>
</div>
<div> </div>
<div>On Sat, Mar 7, 2015, at 11:17 PM, Axel Grude wrote:<br>
</div>
<blockquote class=" cite" id="Cite_1111239" type="cite">
<div>
<div>Dear Bron, <br>
</div>
<div> </div>
<div> Of course I know these features all work via using
<font> tags and other inline code, but the problem is
if you want to define style (e.g. blue large headers) this
is best implemented via CSS classes. One of the problems
with CSS classes ist that they are in the global namespace
which means that they may affect quotes material as well as
follow on emails.<br>
</div>
<div> </div>
<div> One of my users has defined his reply texts to be in
blue, however this also now affects my replies to him to
also show up in blue. SO this is not a trivial request.<br>
</div>
<div> </div>
<div> on the other hand using font tags is not very efficient
as you need to replicate your styles on each individual
element / passage. The real trick is come up with a style /
template strategy that is both robust (does not change its
properties when quoted in another email) and easy to ise
(such as predefined paragraph styles).<br>
</div>
<div> </div>
<div> As regards building better frontend for CSS this is a
relatively easy task that I want to look into in the future;
however the "persistent paragraph styles surviving the
global namespace" has to be solved first. Ideally the CSS
should be scoped to one quote-level only (also, the bug
about the encoded child selector ">" within style tags is
still open).<br>
</div>
<div> </div>
<div> regards,<br>
</div>
<div> Axel<br>
</div>
<div> </div>
<div> </div>
<div> -- <br>
</div>
<div 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
style="text-shadow: 1px 1px 2px #DDD; transition:font-size
0.5s;"><a moz-do-not-send="true" defang_rel="noreferrer"
style="transition: font-size 0.5s ease 0s; cursor:
pointer;" href="mailto:axel.grude@gmail.com">Axel Grude</a></b>
<br>
</div>
<div 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%);">
Software Developer <br>
</div>
<div 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%);">
Thunderbird Add-ons Developer <span style="color:rgb(102,
102, 102)" class="colour"><span style="font-size:xx-small"
class="size">(QuickFolders, quickFilters,
QuickPasswords, Zombie Keys, SmartTemplate4)</span></span>
<br>
</div>
<div 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%);"> AMO
Editor <img style="margin-top: 1em; float: right;
box-shadow: 1px 1px 2px rgba(20, 20, 20, 0.4); transition:
all 0.4s ease-out 0s;"
src="cid:part4.00030008.07040404@gmail.com" alt="Get
Thunderbird!" height="15" width="94"><br>
</div>
</div>
<div>
<div> </div>
<blockquote class=" cite" id="Cite_7216780" type="cite"
style="padding-bottom:30px !important;">
<div style="font-size: x-small; padding:1em;
background-color:rgba(220,220,240,0.4);
border-radius:3px;"><b style="color: rgb(153, 0, 51);
font-weight: bold;">Subject:</b> Re: The infamous
Mozilla core editor<br>
</div>
<div style="font-size: x-small; padding:1em;
background-color:rgba(220,220,240,0.4);
border-radius:3px;"> <b style="color: rgb(153, 0, 51);
font-weight: bold;">To:</b> <a moz-do-not-send="true"
defang_rel="noreferrer"
href="mailto:tb-planning@mozilla.org">tb-planning@mozilla.org</a>
<br>
</div>
<div style="font-size: x-small; padding:1em;
background-color:rgba(220,220,240,0.4);
border-radius:3px;"> <b style="color: rgb(153, 0, 51);
font-weight: bold;">From: </b>Bron Gondwana<br>
</div>
<div style="font-size: x-small; padding:1em;
background-color:rgba(220,220,240,0.4);
border-radius:3px;"> <b style="color: rgb(153, 0, 51);
font-weight: bold;">Sent: </b>Saturday, 07/03/2015
04:25:29 04:25 GMT ST +0000 [Week 9]<br>
</div>
</blockquote>
</div>
<blockquote class=" cite"
id="mid_1425702329_3943422_236757797_46C0A2FD_webmail_messagingengine_com"
cite="mid:1425702329.3943422.236757797.46C0A2FD@webmail.messagingengine.com"
type="cite">
<div>On Fri, Mar 6, 2015, at 07:24 PM, Aceman wrote:<br>
</div>
<div>> Is this actually a full featured editor with
equivalent features to the code editor? At 11KB in size of
JS, it looks to me it mainly allows text formatting.<br>
</div>
<div>> But what about images, tables, lists, indents?<br>
</div>
<div> </div>
<ul>
<li>
<div><u>Lists and indents work fine.</u><br>
</div>
</li>
<li>
<div>Image inclusion works<br>
</div>
</li>
</ul>
<div style="position: relative; margin: 1em auto; max-width:
720px;"> </div>
<div> </div>
<div>You can even<br>
</div>
<ul>
<li>
<div>create indented<br>
</div>
<ol>
<li>
<div>lists<br>
</div>
</li>
<li>
<div>with numbers<br>
</div>
</li>
<li>
<div>and stuff<br>
</div>
</li>
</ol>
</li>
</ul>
<div>I'm not so sure about tables though...<br>
</div>
<div> </div>
<div><span
style="font-family:helvetica,arial,sans-serif,sans-serif"
class="font"><span style="font-size:22px" class="size">Certainly
changing fonts is<i><span style="color:rgb(178, 34, 34)"
class="colour">definitely</span></i> supported.</span></span><br>
</div>
<div> </div>
<div> </div>
<div>> (Am sure somebody would like CSS insertion, but I am
not sure that is in the base TB editor now).<br>
</div>
<div> </div>
<div dir="ltr">I would have to ask Neil about that. It's
pretty good about taking existing HTML and keeping it
working in quoted messages too.<br>
</div>
<div> </div>
<div>--<br>
</div>
<div>Bron Gondwana<br>
</div>
<div><a moz-do-not-send="true" defang_rel="noreferrer"
href="mailto:brong@fastmail.fm">brong@fastmail.fm</a><br>
</div>
<div> </div>
<div> </div>
<pre>_______________________________________________
tb-planning mailing list
<a moz-do-not-send="true" defang_rel="noreferrer" href="mailto:tb-planning@mozilla.org">tb-planning@mozilla.org</a> <a moz-do-not-send="true" defang_rel="noreferrer" href="https://mail.mozilla.org/listinfo/tb-planning">https://mail.mozilla.org/listinfo/tb-planning</a>
</pre>
</blockquote>
<div> </div>
<div> </div>
<div><img src="cid:part4.00030008.07040404@gmail.com"
style="max-width:100%; height:auto;"><br>
</div>
<p>Email had 1 attachment:<br>
</p>
<ul>
<li><code>thunderbird_blog2.png</code><br>
1k (image/png)</li>
</ul>
</blockquote>
<div> </div>
<div id="sig567075">
<div class="signature">--<br>
</div>
<div class="signature">Bron Gondwana<br>
</div>
<div class="signature"><a class="moz-txt-link-abbreviated" href="mailto:brong@fastmail.fm">brong@fastmail.fm</a><br>
</div>
<div class="signature"> </div>
</div>
<div> </div>
</blockquote>
<br>
<br>
<div style="bottom: auto; left: 975px; right: auto; top: 295px;
display: none;" class="translator-theme-default"
id="translator-floating-panel">
<div title="Click to translate"
id="translator-floating-panel-button"></div>
</div>
</body>
</html>