a) a fair bit of reorg/css tweaks for the message display, to make them look closer to andreas' mockup.

(still TBD: decide whether to expose the email addresses of contacts -- i'm not convinced it's as important
in a search context).

b) move some templating utilities into their own JS module.

c) fix drag-and-drop in quciksearch (note: it don't work in the old widget).  There's still a bug about
_showing_ the value that's dropped, but the search does occur.

--HG--
branch : gloda-facet

mail/base/content/glodaFacetBindings.xml

@@ -938,16 +938,23 @@
         <html:div anonid="oldestMessageDate" class="message-oldestMessageDate"></html:div>
         <html:div anonid="attachments" class="message-attachments"></html:div>
       </html:div>
-      <html:div anonid="subject" class="message-subject"></html:div>
-      <html:div class="message-addressing">
-        <html:span anonid="author" class="message-author"></html:span>
-        <html:span anonid="writes" class="message-writes"></html:span>
-        <html:div anonid="recipients" class="message-recipients"/>
-        <html:span anonid="date" class="message-date"></html:span>
+      <html:div class="message-line">
+        <html:div anonid="addresses-group" class="message-addresses-group">
+          <html:div anonid="author-group" class="message-author-group">
+            <html:span anonid="from" class="message-from-label"></html:span>
+            <html:span anonid="author" class="message-author"></html:span>
+          </html:div>
+          <html:div anonid="recipients-group" class="message-recipients-group">
+            <html:span anonid="to" class="message-to-label"></html:span>
+            <html:div anonid="recipients" class="message-recipients"/>
+          </html:div>
+        </html:div>
+        <html:div anonid="subject" class="message-subject"></html:div>
       </html:div>
       <html:div anonid="tags" class="message-tags"></html:div>
     </html:div>
     <html:pre anonid="snippet" class="message-body"></html:pre>
+    <html:span anonid="date" class="message-date"></html:span>
   </content>
   <implementation>
     <constructor><![CDATA[
@@ -968,14 +975,18 @@
                                              aEvent.button == 1);
         }
 
-        // -- l10n poking
-        anonElem("writes").textContent =
-          glodaFacetStrings.get("glodaFacetView.result.message.writesLabel");
-
         // -- Content Poking
         anonElem("subject").textContent = message.subject;
-        anonElem("author").textContent = message.from.toLocaleString();
-        anonElem("date").textContent = message.date.toLocaleString();
+        let authorNode = anonElem("author");
+        authorNode.setAttribute("title", message.from.value);
+        authorNode.textContent = message.from.contact.name
+        let fromNode = anonElem("from");
+        fromNode.textContent = glodaFacetStrings.get("glodaFacetView.result.message.fromLabel");
+        let toNode = anonElem("to");
+        toNode.textContent = glodaFacetStrings.get("glodaFacetView.result.message.toLabel");
+        
+        //anonElem("author").textContent = ;
+        anonElem("date").textContent = makeFriendlyDateAgo(message.date);
 
         // - Recipients
         let recipientsNode = anonElem("recipients");
@@ -983,10 +994,12 @@
           for each (let [, recip] in Iterator(message.recipients)) {
             let recipNode = document.createElement("span");
             recipNode.setAttribute("class", "message-recipient");
-            recipNode.textContent = recip.toLocaleString();
+            recipNode.textContent = recip.contact.name;
+            recipNode.setAttribute("title", "BARGH");
             recipientsNode.appendChild(recipNode);
           }
         }
+
         // - Tags
         let tagsNode = anonElem("tags");
         if ("tags" in message && message.tags.length) {

mail/base/content/glodaFacetView.css

@@ -413,7 +413,6 @@ h1, h2, h3 {
 
 .message-header,
 .message-body {
-  margin-left: 24px;
   font-size: 95%;
 }
 
@@ -441,20 +440,27 @@ h1, h2, h3 {
 .message-attachments:after {
   content: ")";
 }
-.message-writes {
-  font-size: 90%;
-  color: #777;
-}
-.message-date {
-  color: #999; font-size: 90%; }
-.message-date:before {
-  content: "\2014  ";
+
+.message-line {
+  position: relative;
 }
 
-.message-recipients {
+.message-addresses-group {
+  float: right;
+  text-align: right;
+}
+
+.message-date {
+  color: #999;
+  font-size: 90%;
+}
+
+.message-author, .message-recipients {
+  text-align: right;
   display: inline;
   color: #222;
 }
+
 .message-recipient:first-child:before {
   content: "";
 }
@@ -466,8 +472,8 @@ h1, h2, h3 {
 }
 
 .message-subject {
-  white-space: nowrap;
-  overflow: hidden;
+/*  white-space: nowrap; */
+  /* overflow: hidden; */
   font-size: 115%;
   font-weight: bold;
   color: #555;

mail/base/content/glodaFacetView.js

@@ -54,6 +54,7 @@ Cu.import("resource://app/modules/gloda/log4moz.js");
 Cu.import("resource://app/modules/StringBundle.js");
 Cu.import("resource://app/modules/PluralForm.jsm");
 Cu.import("resource://app/modules/errUtils.js");
+Cu.import("resource://app/modules/templateUtils.js");
 
 Cu.import("resource://app/modules/gloda/public.js");
 Cu.import("resource://app/modules/gloda/facet.js");

mail/base/content/search.xml

@@ -170,7 +170,7 @@
         ]]></handler>
 
 
-      <handler event="dragdrop" phase="capturing">
+      <handler event="drop" phase="capturing">
         nsDragAndDrop.drop(event, this.searchInputDNDObserver);
       </handler>
     </handlers>
@@ -215,10 +215,16 @@
         inputSearch: this,
 
         onDrop: function (aEvent, aXferData, aDragSession) {
-          if (aXferData.data) {
-            this.inputSearch.focus();
-            this.input.value = aXferData.data;
-            this.doSearch(true);
+          try {
+            if (aXferData.data) {
+              this.inputSearch.focus();
+              this.inputSearch.value = aXferData.data;
+              // XXX for some reason the input field is _cleared_ even though
+              // the search works.
+              this.inputSearch.doSearch();
+            }
+          } catch (e) {
+            logException(e);
           }
         },
 

mail/base/content/selectionsummaries.js

@@ -37,6 +37,7 @@
 
 
 Components.utils.import("resource://gre/modules/DownloadUtils.jsm");
+Components.utils.import("resource://gre/modules/templateUtils.js");
 Components.utils.import("resource://gre/modules/PluralForm.jsm");
 Components.utils.import("resource://app/modules/gloda/mimemsg.js");
 Components.utils.import("resource://app/modules/gloda/connotent.js");
@@ -653,83 +654,6 @@ function summarizeMultipleSelection(aSelectedMessages)
   }
 }
 
-/**
- * Helper function to generate a localized "friendly" representation of
- * time relative to the present.  If the time input is "today", it returns
- * a string corresponding to just the time.  If it's yesterday, it returns
- * "yesterday" (localized).  If it's in the last week, it returns the day
- * of the week. If it's before that, it returns the date.
- *
- * @param time
- *        the time (better be in the past!)
- * @return The string with a "human-friendly" representation of that time
- *        relative to now.
- */
-function makeFriendlyDateAgo(time)
-{
-  let dts = Components.classes["@mozilla.org/intl/scriptabledateformat;1"]
-                      .getService(Components.interfaces.nsIScriptableDateFormat);
-
-  // Figure out when today begins
-  let now = new Date();
-  let today = new Date(now.getFullYear(), now.getMonth(),
-                       now.getDate());
-
-  // Get the end time to display
-  let end = time;
-
-  // Figure out if the end time is from today, yesterday,
-  // this week, etc.
-  let dateTime;
-  let kDayInMsecs = 24 * 60 * 60 * 1000;
-  let k6DaysInMsecs = 6 * kDayInMsecs;
-  if (end >= today) {
-    // activity finished after today started, show the time
-    dateTime = dts.FormatTime("", dts.timeFormatNoSeconds,
-                                  end.getHours(), end.getMinutes(),0);
-  } else if (today - end < kDayInMsecs) {
-    // activity finished after yesterday started, show yesterday
-    dateTime = gSelectionSummaryStrings.yesterday;
-  } else if (today - end < k6DaysInMsecs) {
-    // activity finished after last week started, show day of week
-    dateTime = end.toLocaleFormat("%A");
-  } else if (now.getFullYear() == end.getFullYear()) {
-    // activity must have been from some time ago.. show month/day
-    let month = end.toLocaleFormat("%B");
-    // Remove leading 0 by converting the date string to a number
-    let date = Number(end.toLocaleFormat("%d"));
-    //dateTime = replaceInsert(this.text.monthDate, 1, month);
-    dateTime = replaceInsert("#1 #2", 1, month);
-    dateTime = replaceInsert(dateTime, 2, date);
-  } else {
-    // not this year, so show year as wel
-    let month = end.toLocaleFormat("%B");
-    let year = end.toLocaleFormat("%Y");
-    // Remove leading 0 by converting the date string to a number
-    let date = Number(end.toLocaleFormat("%d"));
-    //dateTime = replaceInsert(this.text.monthDate, 1, month);
-    dateTime = replaceInsert("#1 #2 #3", 1, month);
-    dateTime = replaceInsert(dateTime, 2, date);
-    dateTime = replaceInsert(dateTime, 3, year);
-  }
-  return dateTime;
-}
-
-/**
- * Helper function to replace a placeholder string with a real string
- *
- * @param aText
- *        Source text containing placeholder (e.g., #1)
- * @param aIndex
- *        Index number of placeholder to replace
- * @param aValue
- *        New string to put in place of placeholder
- * @return The string with placeholder replaced with the new string
- */
-function replaceInsert(aText, aIndex, aValue)
-{
-  return aText.replace("#" + aIndex, aValue);
-}
 
 /**
  * Helper function to escape some XML chars, so they display properly in

mail/locales/en-US/chrome/messenger/glodaFacetView.properties

@@ -83,10 +83,15 @@ glodaFacetView.facets.noneLabel=None
 #  The label to use when all types of attachments are being displayed.
 glodaFacetView.facets.filter.attachmentTypes.allLabel=Any Kind
 
-# LOCALIZATION NOTE (glodaFacetView.result.message.writesLabel): Used in the
-#  faceted search message display to delinate the author of a message and the
-#  recipients.  An example usage is  "Alice writes Bob, Chuck, Don".
-glodaFacetView.result.message.writesLabel=writes
+# LOCALIZATION NOTE (glodaFacetView.result.message.fromLabel): Used in the
+#  faceted search message display to indicate the author of a message.
+# An example usage is  "from: Bob".
+glodaFacetView.result.message.fromLabel=from:
+
+# LOCALIZATION NOTE (glodaFacetView.result.message.toLabel): Used in the
+#  faceted search message display to indicate the recipients of a message.
+# An example usage is  "to: Bob, Chuck, Don".
+glodaFacetView.result.message.toLabel=to:
 
 # LOCALIZATION NOTE(glodaFacetView.results.message.countLabel): Displays the
 #  number of messages displayed in the result area out of the number of

mailnews/base/util/Makefile.in

@@ -135,6 +135,7 @@ EXTRA_JS_MODULES = \
 		traceHelper.js \
 		autoconfigUtils.jsm \
 		StringBundle.js \
+		templateUtils.js \
 		$(NULL)
 
 ifndef MOZ_STATIC_MAIL_BUILD

mailnews/base/util/templateUtils.js

@@ -0,0 +1,120 @@
+/* ***** BEGIN LICENSE BLOCK *****
+ * Version: MPL 1.1/GPL 2.0/LGPL 2.1
+ *
+ * The contents of this file are subject to the Mozilla Public License Version
+ * 1.1 (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ * http://www.mozilla.org/MPL/
+ *
+ * Software distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License
+ * for the specific language governing rights and limitations under the
+ * License.
+ *
+ * The Original Code is templateUtils.
+ *
+ * The Initial Developer of the Original Code is Mozilla.
+ * Portions created by the Initial Developer are Copyright (C) 2009
+ * the Initial Developer. All Rights Reserved.
+ *
+ * Contributor(s):
+ *   David Ascher <dascher@mozillamessaging.com>
+ *
+ * Alternatively, the contents of this file may be used under the terms of
+ * either the GNU General Public License Version 2 or later (the "GPL"), or
+ * the GNU Lesser General Public License Version 2.1 or later (the "LGPL"),
+ * in which case the provisions of the GPL or the LGPL are applicable instead
+ * of those above. If you wish to allow use of your version of this file only
+ * under the terms of either the GPL or the LGPL, and not to allow others to
+ * use your version of this file under the terms of the MPL, indicate your
+ * decision by deleting the provisions above and replace them with the notice
+ * and other provisions required by the GPL or the LGPL. If you do not delete
+ * the provisions above, a recipient may use your version of this file under
+ * the terms of any one of the MPL, the GPL or the LGPL.
+ *
+ * ***** END LICENSE BLOCK ***** */
+
+let EXPORTED_SYMBOLS = ["makeFriendlyDateAgo", "replaceInsert"];
+
+const Cc = Components.classes;
+const Ci = Components.interfaces;
+const Cr = Components.results;
+const Cu = Components.utils;
+
+/**
+ * Helper function to generate a localized "friendly" representation of
+ * time relative to the present.  If the time input is "today", it returns
+ * a string corresponding to just the time.  If it's yesterday, it returns
+ * "yesterday" (localized).  If it's in the last week, it returns the day
+ * of the week. If it's before that, it returns the date.
+ *
+ * @param time
+ *        the time (better be in the past!)
+ * @return The string with a "human-friendly" representation of that time
+ *        relative to now.
+ */
+function makeFriendlyDateAgo(time)
+{
+  let dts = Components.classes["@mozilla.org/intl/scriptabledateformat;1"]
+                      .getService(Components.interfaces.nsIScriptableDateFormat);
+
+  // Figure out when today begins
+  let now = new Date();
+  let today = new Date(now.getFullYear(), now.getMonth(),
+                       now.getDate());
+
+  // Get the end time to display
+  let end = time;
+
+  // Figure out if the end time is from today, yesterday,
+  // this week, etc.
+  let dateTime;
+  let kDayInMsecs = 24 * 60 * 60 * 1000;
+  let k6DaysInMsecs = 6 * kDayInMsecs;
+  if (end >= today) {
+    // activity finished after today started, show the time
+    dateTime = dts.FormatTime("", dts.timeFormatNoSeconds,
+                                  end.getHours(), end.getMinutes(),0);
+  } else if (today - end < kDayInMsecs) {
+    // activity finished after yesterday started, show yesterday
+    dateTime = gSelectionSummaryStrings.yesterday;
+  } else if (today - end < k6DaysInMsecs) {
+    // activity finished after last week started, show day of week
+    dateTime = end.toLocaleFormat("%A");
+  } else if (now.getFullYear() == end.getFullYear()) {
+    // activity must have been from some time ago.. show month/day
+    let month = end.toLocaleFormat("%B");
+    // Remove leading 0 by converting the date string to a number
+    let date = Number(end.toLocaleFormat("%d"));
+    //dateTime = replaceInsert(this.text.monthDate, 1, month);
+    dateTime = replaceInsert("#1 #2", 1, month);
+    dateTime = replaceInsert(dateTime, 2, date);
+  } else {
+    // not this year, so show year as wel
+    let month = end.toLocaleFormat("%B");
+    let year = end.toLocaleFormat("%Y");
+    // Remove leading 0 by converting the date string to a number
+    let date = Number(end.toLocaleFormat("%d"));
+    //dateTime = replaceInsert(this.text.monthDate, 1, month);
+    dateTime = replaceInsert("#1 #2 #3", 1, month);
+    dateTime = replaceInsert(dateTime, 2, date);
+    dateTime = replaceInsert(dateTime, 3, year);
+  }
+  return dateTime;
+}
+
+/**
+ * Helper function to replace a placeholder string with a real string
+ *
+ * @param aText
+ *        Source text containing placeholder (e.g., #1)
+ * @param aIndex
+ *        Index number of placeholder to replace
+ * @param aValue
+ *        New string to put in place of placeholder
+ * @return The string with placeholder replaced with the new string
+ */
+function replaceInsert(aText, aIndex, aValue)
+{
+  return aText.replace("#" + aIndex, aValue);
+}