History: Add range navigation control for grouped visits

chrome/browser/resources/history/history.js

Index: chrome/browser/resources/history/history.js
diff --git a/chrome/browser/resources/history/history.js b/chrome/browser/resources/history/history.js
index 151d3c4eb48ad3cd189f63578671feef0e7f7e77..2e8704537eb4472da90f269e8559d483253c5338 100644
--- a/chrome/browser/resources/history/history.js
+++ b/chrome/browser/resources/history/history.js
@@ -357,12 +357,14 @@ HistoryModel.prototype.reload = function() {
   var search = this.searchText_;
   var page = this.requestedPage_;
   var range = this.rangeInDays_;
+  var offset = this.offset_;
   var groupByDomain = this.groupByDomain_;
 
   this.clearModel_();
   this.searchText_ = search;
   this.requestedPage_ = page;
   this.rangeInDays_ = range;
+  this.offset_ = offset;
   this.groupByDomain_ = groupByDomain;
   this.queryHistory_();
 };
@@ -473,6 +475,26 @@ HistoryModel.prototype.setRangeInDays = function(days) {
   this.rangeInDays_ = days;
 };
 
+/**
+ * Returns the current offset. The offset moves the current query 'window'
+ * |range| days behind. As such for range set to WEEK an offset of 0 refers to
+ * the last 7 days, an offset of 1 refers to the 7 day period that ended 7 days
+ * ago, etc. For MONTH an offset of 0 refers to the current calendar month,
+ * 1 to the previous one, etc.
+ * @return {number} The current offset.
+ */
+HistoryModel.prototype.getOffset = function() {

[Bernhard Bauer, 2013/01/18 16:08:27]

Use get/set accessors?

[Sergiu, 2013/01/21 14:05:24]

Done.

+  return this.offset_;
+};
+
+/**
+ * Sets the offset.
+ * @param {Number} value Either the new value or the relative change.
+ */
+HistoryModel.prototype.setOffset = function(value) {
+  this.offset_ = value;
+};
+
 // HistoryModel, Private: -----------------------------------------------------
 
 /**
@@ -494,6 +516,9 @@ HistoryModel.prototype.clearModel_ = function() {
   // to fetch it and call back when we're done.
   this.requestedPage_ = 0;
 
+  // Skip |offset_| * weeks/months from the begining.
+  this.offset_ = 0;
+
   // The range of history to view or search over, WEEK by default.
   this.rangeInDays_ = HistoryModel.Range.WEEK;
 
@@ -540,7 +565,8 @@ HistoryModel.prototype.updateSearch_ = function() {
  */
 HistoryModel.prototype.queryHistory_ = function() {
   var endTime = 0;
-  // Set the range to the values from the interface.
+  // Set the range and offset to the values from the interface.
+  var offset = this.offset_;
   var range = this.rangeInDays_;
   if (!this.getGroupByDomain()) {
     // Do the time-based search.
@@ -556,7 +582,7 @@ HistoryModel.prototype.queryHistory_ = function() {
   $('loading-spinner').hidden = false;
   this.inFlight_ = true;
   chrome.send('queryHistory',
-      [this.searchText_, range, endTime, this.queryCursor_,
+      [this.searchText_, offset, range, endTime, this.queryCursor_,
        RESULTS_PER_PAGE]);
 };
 
@@ -586,6 +612,7 @@ HistoryModel.prototype.canFillPage_ = function(page) {
  */
 HistoryModel.prototype.setGroupByDomain = function(groupByDomain) {
   this.groupByDomain_ = groupByDomain;
+  this.offset_ = 0;
 };
 
 /**
@@ -643,6 +670,16 @@ function HistoryView(model) {
   $('display-filter-sites').addEventListener('click', function(e) {
     self.setGroupByDomain($('display-filter-sites').checked);
   });
+
+  $('range-previous').addEventListener('click', function(e) {
+    self.setOffset(self.getOffset() + 1);
+  });
+  $('range-next').addEventListener('click', function(e) {
+    self.setOffset(self.getOffset() - 1);
+  });
+  $('range-today').addEventListener('click', function(e) {
+    self.setOffset(0);
+  });
 }
 
 // HistoryView, public: -------------------------------------------------------
@@ -657,7 +694,7 @@ HistoryView.prototype.setSearch = function(term, opt_page) {
   window.scrollTo(0, 0);
   this.model_.setSearchText(term, this.pageIndex_);
   pageState.setUIState(term, this.pageIndex_, this.model_.getGroupByDomain(),
-                       this.getRangeInDays());
+                       this.getRangeInDays(), this.getOffset());
 };
 
 /**
@@ -669,12 +706,13 @@ HistoryView.prototype.setGroupByDomain = function(groupedByDomain) {
   // the search term if there was one.
   this.model_.clearSearchText();
   this.model_.setGroupByDomain(groupedByDomain);
-  $('timeframe-filter').disabled = !groupedByDomain;
+  setRangeButtonsState(groupedByDomain, this);
   this.model_.reload();
   pageState.setUIState(this.model_.getSearchText(),
                        this.pageIndex_,
                        this.model_.getGroupByDomain(),
-                       this.getRangeInDays());
+                       this.getRangeInDays(),
+                       this.getOffset());
 };
 
 /**
@@ -697,7 +735,8 @@ HistoryView.prototype.setPage = function(page) {
   pageState.setUIState(this.model_.getSearchText(),
                        this.pageIndex_,
                        this.model_.getGroupByDomain(),
-                       this.getRangeInDays());
+                       this.getRangeInDays(),
+                       this.getOffset());
 };
 
 /**
@@ -714,10 +753,11 @@ HistoryView.prototype.getPage = function() {
 HistoryView.prototype.setRangeInDays = function(range) {
   window.scrollTo(0, 0);
   // Set the range and reset the offset.
+  this.model_.setOffset(0);
   this.model_.setRangeInDays(range);
   this.model_.reload();
   pageState.setUIState(this.model_.getSearchText(), this.pageIndex_,
-      this.model_.getGroupByDomain(), range);
+      this.model_.getGroupByDomain(), range, this.getOffset());
 };
 
 /**
@@ -729,6 +769,30 @@ HistoryView.prototype.getRangeInDays = function() {
 };
 
 /**
+ * Set the current offset for grouped results.
+ * @param {number} offset Offset to set.
+ */
+HistoryView.prototype.setOffset = function(offset) {
+  window.scrollTo(0, 0);
+  this.model_.setOffset(offset);
+  this.model_.reload();
+  setRangeButtonsState(true, this);
+  pageState.setUIState(this.model_.getSearchText(),
+                       this.pageIndex_,
+                       this.model_.getGroupByDomain(),
+                       this.getRangeInDays(),
+                       this.getOffset());
+};
+
+/**
+ * Get the current offset.
+ * @return {number} Current offset from the model.
+ */
+HistoryView.prototype.getOffset = function() {
+  return this.model_.getOffset();
+};
+
+/**
  * Callback for the history model to let it know that it has data ready for us
  * to view.
  */
@@ -1059,6 +1123,8 @@ function PageState(model, view) {
       state_obj.view.setGroupByDomain(hashData.g);
     } else if (parseInt(hashData.r, 10) != state_obj.model.getRangeInDays()) {
       state_obj.view.setRangeInDays(parseInt(hashData.r, 10));
+    } else if (parseInt(hashData.o, 10) != state_obj.model.getOffset()) {
+      state_obj.view.setOffset(parseInt(hashData.o, 10));
     }
   }), 50, this);
 }
@@ -1077,7 +1143,8 @@ PageState.prototype.getHashData = function() {
     q: '',
     p: 0,
     g: false,
-    r: 0
+    r: 0,
+    o: 0
   };
 
   if (!window.location.hash)
@@ -1103,8 +1170,9 @@ PageState.prototype.getHashData = function() {
  * @param {boolean} grouped Whether the results are grouped or not.
  * @param {number} range The range in days to view or search over. If 0, use
  *     the entire history.
+ * @param {number} offset Set the begining of the query to range * offset days.
  */
-PageState.prototype.setUIState = function(term, page, grouped, range) {
+PageState.prototype.setUIState = function(term, page, grouped, range, offset) {
   // Make sure the form looks pretty.
   $('search-field').value = term;
   if (grouped) {
@@ -1116,9 +1184,9 @@ PageState.prototype.setUIState = function(term, page, grouped, range) {
   }
   var hash = this.getHashData();
   if (hash.q != term || hash.p != page || hash.g != grouped ||
-      hash.r != range) {
+      hash.r != range || hash.o != offset) {
     window.location.hash = PageState.getHashString(
-        term, page, grouped, range);
+        term, page, grouped, range, offset);
   }
 };
 
@@ -1128,9 +1196,10 @@ PageState.prototype.setUIState = function(term, page, grouped, range) {
  * @param {number} page The page currently being viewed.
  * @param {boolean} grouped Whether the results are grouped or not.
  * @param {number} range The range in days to view or search over.
+ * @param {number} offset Set the begining of the query to range * offset days.
  * @return {string} The string to be used in a hash.
  */
-PageState.getHashString = function(term, page, grouped, range) {
+PageState.getHashString = function(term, page, grouped, range, offset) {
   // Omit elements that are empty.
   var newHash = [];
 
@@ -1143,6 +1212,9 @@ PageState.getHashString = function(term, page, grouped, range) {
   if (range > 0)
     newHash.push('r=' + range);
 
+  if (offset > 0)
+    newHash.push('o=' + offset);
+
   if (grouped)
     newHash.push('g=' + grouped);
 
@@ -1376,6 +1448,36 @@ function removeEntryFromView(entry) {
   }
 }
 
+/**
+ * Enables or disables the time range buttons.
+ * @param {boolean} groupByDomain Whether grouping by domain is active
+ * @param {HistoryView} view The current history view.
+ */
+function setRangeButtonsState(groupByDomain, view) {
+  // The enabled state for the previous, today and next buttons.
+  var buttonsState = [false, false, false];
+  var start = 0;
+  var isQueryFinished = view.model_.isQueryFinished_;
+  var offset = view.getOffset();
+
+  // Set today button.
+  if (offset != start) {
+    buttonsState[2] = true;
+    buttonsState[1] = true;
+  }
+
+  // TODO(sergiu): isQueryFinished does not return the correct value now but
+  // ideally it would return false when there are no older results available.
+  // Until then allow to go back in time as much as the user wants.
+  // See http://crbug.com/167363.
+  buttonsState[0] = true;
+
+  $('range-previous').disabled = !(groupByDomain && buttonsState[0]);
+  $('range-today').disabled = !(groupByDomain && buttonsState[1]);
+  $('range-next').disabled = !(groupByDomain && buttonsState[2]);
+  $('timeframe-filter').disabled = !groupByDomain;
+}
+
 ///////////////////////////////////////////////////////////////////////////////
 // Chrome callbacks: