Add date subtitles and styling.

data/about-you.html

@@ -61,6 +61,7 @@
             <tr>
               <th>Rank</th>
               <th>Category</th>
+              <th></th>
               <th>Recent Activity</th>
               <th></th>
             </tr>

data/about-you.js

@@ -52,8 +52,9 @@ self.port.on("init", function() {
     "paging":         false,
     "searching":      false,
     "columns": [
-      { "width": "64px" },
-      { "width": "250px" },
+      { "width": "74px" },
+      { "width": "231px" },
+      { "width": "0px" },
       { "width": "400px" },
       { "width": "40px" }
     ]

data/charts/InterestDashboard.js

@@ -36,17 +36,17 @@ function InterestDashboard() {
 InterestDashboard.prototype = {
   _getMaxDate: function(days) {
     let max = 0;
-    for (let day in days) {
-      if (Number(day) > max) {
-        max = Number(day);
+    for (let day of days) {
+      if (day.timestamp > max) {
+        max = day.timestamp;
       }
     }
-    return d3.time.format('%A, %B %e, %Y')(new Date(days[max].x));
+    return d3.time.format('%A, %B %e, %Y')(new Date(max / 1000));
   },
 
   _computeTimeString: function(timestamp) {
     let AMorPM = "am";
-    let date = new Date(timestamp);
+    let date = new Date(timestamp / 1000);
     let hours = date.getHours();
     let minutes = date.getMinutes() < 10 ? ("0" + date.getMinutes()) : date.getMinutes();
     if (hours > 12) {
@@ -63,7 +63,8 @@ InterestDashboard.prototype = {
         "<div class='rank-container'>" + (i + 1) + "</div>",
         "<div class='category-name'>" + categoryObj.name + "</div>" +
         "<div class='category-count'> (" + categoryObj.visitCount + ")</div>",
-        this._getMaxDate(categoryObj.days),
+        "<div class='subtitleCircle'></div>",
+        this._getMaxDate(data.historyVisits[categoryObj.name]),
         null
       ]).draw();
 
@@ -84,17 +85,39 @@ InterestDashboard.prototype = {
     $scope.dailyAvg = data.totalDailyAvg.toFixed(0);
   },
 
+  _isNewDay: function(currentTimestamp, newTimestamp) {
+    let currDate = new Date(currentTimestamp / 1000);
+    let newDate = new Date(newTimestamp / 1000);
+
+    return (currDate.getDate() != newDate.getDate()) ||
+           (currDate.getMonth() != newDate.getMonth()) ||
+           (currDate.getYear() != newDate.getYear());
+  },
+
   _formatSubtable: function(historyVisits) {
+    let currentDay = historyVisits[0].timestamp;
+
     let table = '<div id="subtable"><table cellpadding="5" cellspacing="0" border="0">';
     for (let visitIndex = 0; visitIndex < historyVisits.length; visitIndex++) {
       let visit = historyVisits[visitIndex];
       let time = this._computeTimeString(visit.timestamp);
       let lastVisitString = visitIndex == (historyVisits.length - 1) ? 'lastVisit' : '';
 
+      if (this._isNewDay(currentDay, visit.timestamp)) {
+        table += '<tr>' +
+          '<td></td>' +
+          '<td><div class="subtitleCircle alwaysVisible"></div></td>' +
+          '<td colspan = "2" class="date-subheader">' + d3.time.format('%A, %B %e, %Y')(new Date(visit.timestamp / 1000)); + '</td>' +
+          '<td></td>' +
+          '<td></td>' +
+        '</tr>';
+        currentDay = visit.timestamp;
+      }
+
       table += '<tr>' +
         '<td class="time historyVisit">' + time + '</td>' +
         '<td><div class="timelineCircle ' + lastVisitString + '"></div></td>' +
-        '<td><img class="favicon historyVisitFavicon" src="' + visit.favicon + '"></img></td>' +
+        '<td><img class="favicon" src="' + visit.favicon + '"></img></td>' +
         '<td><div class="domain">' + visit.url + '</div>' +
         '<div class="visitTitle historyVisit"> - ' + visit.title + '</div></td>'
       '</tr>';

data/css/devmenu/styles.css

@@ -236,7 +236,7 @@ table.dataTable thead th {
 
 .time {
   width: 55px;
-  padding-left: 260px !important;
+  padding-left: 270px !important;
 }
 .domain {
   font-size: 13px;
@@ -261,23 +261,34 @@ table.dataTable thead th {
   font-size: 13px;
   color: #AFAFAF;
 }
+.subtitleCircle {
+  width: 12px;
+  height: 12px;
+  margin-left: 4px;
+  margin-right: 5px;
+  background-color: #FFFFFF;
+  border: 2px solid #6A7B86;;
+  border-radius: 50%;
+  box-shadow: 0 0 2px #888;
+  visibility: hidden;
+}
 .timelineCircle {
   background: #6A7B86;
   width: 10px;
   height: 10px;
   border-radius: 50%;
+  margin-left: 5px;
+  margin-right: 5px;
 }
-.timelineCircle:not(.lastVisit):after {
+.timelineCircle:not(.lastVisit):after,
+.subtitleCircle:after {
   content: "";
+  top:10px;
   border-left: solid 2px #6A7B86;
   left: 40%;
   position: relative;
   display: block;
-  height: 55px;
-}
-.historyVisitFavicon {
-  margin-left: 5px;
-  margin-right: 5px;
+  height: 40px;
 }
 #subtable {
   background: linear-gradient(#FFFFFF, #F9F9F9);
@@ -288,7 +299,12 @@ table.dataTable thead th {
   background: transparent;
   border-top: none;
 }
-
+tr.shown .subtitleCircle, .alwaysVisible {
+  visibility: visible !important;
+}
+tr:not(.shown) .subtitleCircle {
+  visibility: hidden;
+}
 
 
 /* Sidebar */

lib/PlacesInterestsUtils.js

@@ -101,7 +101,8 @@ let PlacesInterestsUtils = {
       query += id + ", ";
     }
     query = query.substring(0, query.length - 2); // Remove extra comma.
-    query += ")";
+    query += ") " +
+    "ORDER BY timestamp DESC";
 
     return this._execute(query, {
       columns: ["timestamp", "title", "url", "favicon"],

lib/streams/interestDashboardDataProcessorBolt.js

@@ -70,8 +70,9 @@ let InterestDashboardDataProcessorBolt = {
         return Task.spawn(function() {
           let kMaxVisits = 50;
           for (let category of categoryList) {
+            let visitIDLength = category.visitIDs.length;
             let visitQueryList = category.visitIDs.length > kMaxVisits ?
-                                 category.visitIDs.slice(0, kMaxVisits) :
+                                 category.visitIDs.slice(visitIDLength - 1 - kMaxVisits, visitIDLength) :
                                  category.visitIDs;
             yield getHistoryDetails(category.name, visitQueryList);
           }