Bug 391918 - Section headers in new DM should look more like mockup. Patch by Michael Ventnor <ventnor.bugzilla@yahoo.com.au>. r=sdwilsh, r=mano

toolkit/mozapps/downloads/content/DownloadProgressListener.js

@@ -63,7 +63,7 @@ DownloadProgressListener.prototype =
     switch (aDownload.state) {
       case Ci.nsIDownloadManager.DOWNLOAD_NOTSTARTED:
         // We'll have at least one active download now
-        gDownloadsActiveLabel.hidden = false;
+        gDownloadsActiveTitle.hidden = false;
       case Ci.nsIDownloadManager.DOWNLOAD_DOWNLOADING:
         // if dl is non-null, the download is already added to the UI, so we
         // just make sure it is where it is supposed to be
@@ -81,7 +81,7 @@ DownloadProgressListener.prototype =
                                   aDownload.percentComplete,
                                   Math.round(aDownload.startTime / 1000));
         }
-        gDownloadsView.insertBefore(dl, gDownloadsActiveLabel.nextSibling);
+        gDownloadsView.insertBefore(dl, gDownloadsActiveTitle.nextSibling);
         break;
       case Ci.nsIDownloadManager.DOWNLOAD_FAILED:
       case Ci.nsIDownloadManager.DOWNLOAD_CANCELED:
@@ -123,11 +123,11 @@ DownloadProgressListener.prototype =
                                    aDownload.source.spec,
                                    aDownload.state,
                                    aDownload.percentComplete);
-      download = gDownloadsView.insertBefore(itm, gDownloadsActiveLabel.nextSibling);
+      download = gDownloadsView.insertBefore(itm, gDownloadsActiveTitle.nextSibling);
     }
 
     // any activity means we should have active downloads!
-    gDownloadsActiveLabel.hidden = false;
+    gDownloadsActiveTitle.hidden = false;
 
     // Update this download's progressmeter
     if (aDownload.percentComplete == -1)

toolkit/mozapps/downloads/content/downloads.js

@@ -58,8 +58,9 @@ var gDownloadManager  = Cc["@mozilla.org/download-manager;1"].
                         getService(Ci.nsIDownloadManager);
 var gDownloadListener     = null;
 var gDownloadsView        = null;
-var gDownloadsActiveLabel = null;
+var gDownloadsActiveTitle = null;
 var gDownloadsOtherLabel  = null;
+var gDownloadsOtherTitle  = null;
 var gDownloadInfoPopup    = null;
 var gUserInterfered       = false;
 var gSearching            = false;
@@ -120,7 +121,7 @@ function downloadCompleted(aDownload)
     // If we are displaying search results, we do not want to add it to the list
     // of completed downloads
     if (!gSearching)
-      gDownloadsView.insertBefore(dl, gDownloadsOtherLabel.nextSibling);
+      gDownloadsView.insertBefore(dl, gDownloadsOtherTitle.nextSibling);
     else
       gDownloadsView.removeChild(dl);
 
@@ -140,7 +141,7 @@ function downloadCompleted(aDownload)
     } catch (e) { }
 
     if (gDownloadManager.activeDownloadCount == 0) {
-      gDownloadsActiveLabel.hidden = true;
+      gDownloadsActiveTitle.hidden = true;
       document.title = document.documentElement.getAttribute("statictitle");
     }
   }
@@ -387,8 +388,9 @@ function onUpdateProgress()
 function Startup() 
 {
   gDownloadsView        = document.getElementById("downloadView");
-  gDownloadsActiveLabel = document.getElementById("active-downloads");
+  gDownloadsActiveTitle = document.getElementById("active-downloads-title");
   gDownloadsOtherLabel  = document.getElementById("other-downloads");
+  gDownloadsOtherTitle  = document.getElementById("other-downloads-title");
   gDownloadInfoPopup    = document.getElementById("information");
 
   buildDefaultView();
@@ -624,7 +626,7 @@ function buildDefaultView()
  */
 function buildDownloadList(aStmt, aRef)
 {
-  while (aRef.nextSibling && aRef.nextSibling.tagName != "label")
+  while (aRef.nextSibling && aRef.nextSibling.tagName == "richlistitem")
     gDownloadsView.removeChild(aRef.nextSibling);
 
   while (aStmt.executeStep()) {
@@ -656,7 +658,7 @@ function buildActiveDownloadsList()
     return;
 
   // unhide the label
-  gDownloadsActiveLabel.hidden = false;
+  gDownloadsActiveTitle.hidden = false;
 
   // repopulate the list
   var db = gDownloadManager.DBConnection;
@@ -675,7 +677,7 @@ function buildActiveDownloadsList()
     stmt.bindInt32Parameter(0, Ci.nsIDownloadManager.DOWNLOAD_NOTSTARTED);
     stmt.bindInt32Parameter(1, Ci.nsIDownloadManager.DOWNLOAD_DOWNLOADING);
     stmt.bindInt32Parameter(2, Ci.nsIDownloadManager.DOWNLOAD_PAUSED);
-    buildDownloadList(stmt, gDownloadsActiveLabel);
+    buildDownloadList(stmt, gDownloadsActiveTitle);
   } finally {
     stmt.reset();
   }
@@ -709,7 +711,7 @@ function buildDownloadListWithTime(aTime)
     stmt.bindInt32Parameter(1, Ci.nsIDownloadManager.DOWNLOAD_FINISHED);
     stmt.bindInt32Parameter(2, Ci.nsIDownloadManager.DOWNLOAD_FAILED);
     stmt.bindInt32Parameter(3, Ci.nsIDownloadManager.DOWNLOAD_CANCELED);
-    buildDownloadList(stmt, gDownloadsOtherLabel);
+    buildDownloadList(stmt, gDownloadsOtherTitle);
   } finally {
     stmt.reset();
   }
@@ -757,7 +759,7 @@ function buildDownloadListWithSearch(aTerms)
   var stmt = db.createStatement(sql);
 
   try {
-    buildDownloadList(stmt, gDownloadsOtherLabel);
+    buildDownloadList(stmt, gDownloadsOtherTitle);
   } finally {
     stmt.reset();
   }

toolkit/mozapps/downloads/content/downloads.xul

@@ -156,10 +156,16 @@
   <richlistbox id="downloadView" flex="1" context="downloadContextMenu"
                ondragover="nsDragAndDrop.dragOver(event, gDownloadDNDObserver);"
                ondragdrop="nsDragAndDrop.drop(event, gDownloadDNDObserver);">
-    <label id="active-downloads" value="&activeDownloads.label;" hidden="true"/>
-    <label id="other-downloads" value="&completedDownloads.label;"
-           completedlabel="&completedDownloads.label;"
-           searchlabel="&searchResults.label;"/>
+    <hbox id="active-downloads-title" align="center" hidden="true">
+      <label id="active-downloads" value="&activeDownloads.label;"/>
+      <hbox class="title-line" flex="1"/>
+    </hbox>
+    <hbox id="other-downloads-title" align="center">
+      <label id="other-downloads" value="&completedDownloads.label;"
+             completedlabel="&completedDownloads.label;"
+             searchlabel="&searchResults.label;"/>
+      <hbox class="title-line" flex="1"/>
+    </hbox>
   </richlistbox>
 
   <hbox id="search">

toolkit/themes/pinstripe/mozapps/downloads/downloads.css

@@ -82,3 +82,10 @@ richlistitem[type="download"] button,
   min-height: 32px;
   min-width: 32px;
 }
+
+.title-line {
+  height: 1px;
+  background-color: ThreeDDarkShadow;
+  -moz-margin-end: 15px;
+  -moz-margin-start: 5px;
+}

toolkit/themes/winstripe/mozapps/downloads/downloads.css

@@ -86,3 +86,10 @@ richlistitem[type="download"] .name {
   min-height: 32px;
   min-width: 32px;
 }
+
+.title-line {
+  height: 1px;
+  background-color: ThreeDDarkShadow;
+  -moz-margin-end: 15px;
+  -moz-margin-start: 5px;
+}