History: Add range navigation control for grouped visits

chrome/browser/resources/history/history.js

 // Copyright (c) 2012 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 <include src="../uber/uber_utils.js">
 
 ///////////////////////////////////////////////////////////////////////////////
 // Globals:
 /** @const */ var RESULTS_PER_PAGE = 150;
 
@@ skipping 304 matching lines @@
  * @constructor
  */
 function HistoryModel() {
   this.clearModel_();
 }
 
 // HistoryModel, Public: ------------------------------------------------------
 
 /** @enum {number} */
 HistoryModel.Range = {
-  ALLTIME: 0,
+  ALL_TIME: 0,
   WEEK: 1,
   MONTH: 2
 };
 
 /**
  * Sets our current view that is called when the history model changes.
  * @param {HistoryView} view The view to set our current view to.
  */
 HistoryModel.prototype.setView = function(view) {
   this.view_ = view;
@@ skipping 20 matching lines @@
 };
 
 /**
  * Reload our model with the current parameters.
  */
 HistoryModel.prototype.reload = function() {
   // Save user-visible state, clear the model, and restore the state.
   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_();
 };
 
 /**
  * @return {string} The current search text.
  */
 HistoryModel.prototype.getSearchText = function() {
   return this.searchText_;
 };
@@ skipping 90 matching lines @@
 // Getter and setter for HistoryModel.rangeInDays_.
 Object.defineProperty(HistoryModel.prototype, 'rangeInDays', {
   get: function() {
     return this.rangeInDays_;
   },
   set: function(range) {
     this.rangeInDays_ = range;
   }
 });
 
+/**
+ * Getter and setter for HistoryModel.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.
+ */
+Object.defineProperty(HistoryModel.prototype, 'offset', {
+  get: function() {
+    return this.offset_;
+  },
+  set: function(offset) {
+    this.offset_ = offset;
+  }
+});
+
 // HistoryModel, Private: -----------------------------------------------------
 
 /**
  * Clear the history model.
  * @private
  */
 HistoryModel.prototype.clearModel_ = function() {
   this.inFlight_ = false;  // Whether a query is inflight.
   this.searchText_ = '';
   // Flag to show that the results are grouped by domain or not.
   this.groupByDomain_ = false;
 
   this.visits_ = [];  // Date-sorted list of visits (most recent first).
   this.nextVisitId_ = 0;
   selectionAnchor = -1;
 
   // The page that the view wants to see - we only fetch slightly past this
   // point. If the view requests a page that we don't have data for, we try
   // to fetch it and call back when we're done.
   this.requestedPage_ = 0;
 
   // The range of history to view or search over.
-  this.rangeInDays_ = HistoryModel.Range.ALLTIME;
+  this.rangeInDays_ = HistoryModel.Range.ALL_TIME;
+
+  // Skip |offset_| * weeks/months from the begining.
+  this.offset_ = 0;
 
   // Keeps track of whether or not there are more results available than are
   // currently held in |this.visits_|.
   this.isQueryFinished_ = false;
 
   // An opaque value that is returned with the query results. This is used to
   // fetch the next page of results for a query.
   this.queryCursor_ = null;
 
   // A map of URLs of visits on the same day as the last known visit.
@@ skipping 11 matching lines @@
  * we're ready to show something. This only applies to the daily time-based
  * view.
  * @private
  */
 HistoryModel.prototype.updateSearch_ = function() {
   var doneLoading = this.isQueryFinished_ ||
                     this.canFillPage_(this.requestedPage_);
 
   // Try to fetch more results if more results can arrive and the page is not
   // full.
-  if (this.rangeInDays_ == HistoryModel.Range.ALLTIME &&
+  if (this.rangeInDays_ == HistoryModel.Range.ALL_TIME &&
       !doneLoading && !this.inFlight_) {
     this.queryHistory_();
   }
 
   // Show the result or a message if no results were returned.
   this.view_.onModelReady();
 };
 
 /**
  * Query for history, either for a search or time-based browsing.
  * @private
  */
 HistoryModel.prototype.queryHistory_ = function() {
   var max_results =
-      (this.rangeInDays_ == HistoryModel.Range.ALLTIME) ? RESULTS_PER_PAGE : 0;
+      (this.rangeInDays_ == HistoryModel.Range.ALL_TIME) ? RESULTS_PER_PAGE : 0;
 
   $('loading-spinner').hidden = false;
   this.inFlight_ = true;
   chrome.send('queryHistory',
-      [this.searchText_, this.rangeInDays_, this.queryCursor_, max_results]);
+      [this.searchText_, this.offset_, this.rangeInDays_, this.queryCursor_,
+       max_results]);
 };
 
 /**
  * Check to see if we have data for the given page.
  * @param {number} page The page number.
  * @return {boolean} Whether we have any data for the given page.
  * @private
  */
 HistoryModel.prototype.haveDataForPage_ = function(page) {
   return (page * RESULTS_PER_PAGE < this.getSize());
 };
 
 /**
  * Check to see if we have data to fill the given page.
  * @param {number} page The page number.
  * @return {boolean} Whether we have data to fill the page.
  * @private
  */
 HistoryModel.prototype.canFillPage_ = function(page) {
   return ((page + 1) * RESULTS_PER_PAGE <= this.getSize());
 };
 
 /**
  * Enables or disables grouping by domain.
  * @param {boolean} groupByDomain New groupByDomain_ value.
  */
 HistoryModel.prototype.setGroupByDomain = function(groupByDomain) {
   this.groupByDomain_ = groupByDomain;
+  this.offset_ = 0;
 };
 
 /**
  * Gets whether we are grouped by domain.
  * @return {boolean} Whether the results are grouped by domain.
  */
 HistoryModel.prototype.getGroupByDomain = function() {
   return this.groupByDomain_;
 };
 
@@ skipping 37 matching lines @@
   });
 
   // Add handlers for the range options.
   $('timeframe-filter').addEventListener('change', function(e) {
     self.setRangeInDays(parseInt(e.target.value, 10));
   });
 
   $('display-filter-sites').addEventListener('click', function(e) {
     self.setGroupByDomain($('display-filter-sites').checked);
   });
+
+  $('range-previous').addEventListener('click', function(e) {
+    if (self.getRangeInDays() == HistoryModel.Range.ALL_TIME)
+      self.setPage(self.pageIndex_ + 1);
+    else
+      self.setOffset(self.getOffset() + 1);
+  });
+  $('range-next').addEventListener('click', function(e) {
+    if (self.getRangeInDays() == HistoryModel.Range.ALL_TIME)
+      self.setPage(self.pageIndex_ - 1);
+    else
+      self.setOffset(self.getOffset() - 1);
+  });
+  $('range-today').addEventListener('click', function(e) {
+    if (self.getRangeInDays() == HistoryModel.Range.ALL_TIME)
+      self.setPage(0);
+    else
+      self.setOffset(0);
+  });
 }
 
 // HistoryView, public: -------------------------------------------------------
 /**
  * Do a search and optionally view a certain page.
  * @param {string} term The string to search for.
  * @param {number} opt_page The page we wish to view, only use this for
  *     setting up initial views, as this triggers a search.
  */
 HistoryView.prototype.setSearch = function(term, opt_page) {
   this.pageIndex_ = parseInt(opt_page || 0, 10);
   window.scrollTo(0, 0);
   this.model_.setSearchText(term, this.pageIndex_);
   pageState.setUIState(term, this.pageIndex_, this.model_.getGroupByDomain(),
-                       this.getRangeInDays());
+                       this.getRangeInDays(), this.getOffset());
 };
 
 /**
  * Enable or disable results as being grouped by domain.
  * @param {boolean} groupedByDomain Whether to group by domain or not.
  */
 HistoryView.prototype.setGroupByDomain = function(groupedByDomain) {
   // Group by domain is not currently supported for search results, so reset
   // the search term if there was one.
   this.model_.clearSearchText();
   this.model_.setGroupByDomain(groupedByDomain);
   this.model_.reload();
   pageState.setUIState(this.model_.getSearchText(),
                        this.pageIndex_,
                        this.model_.getGroupByDomain(),
-                       this.getRangeInDays());
+                       this.getRangeInDays(),
+                       this.getOffset());
 };
 
 /**
  * Reload the current view.
  */
 HistoryView.prototype.reload = function() {
   this.model_.reload();
   this.updateRemoveButton();
 };
 
 /**
  * Switch to a specified page.
  * @param {number} page The page we wish to view.
  */
 HistoryView.prototype.setPage = function(page) {
   this.clear_();
   this.pageIndex_ = parseInt(page, 10);
   window.scrollTo(0, 0);
   this.model_.requestPage(page);
   pageState.setUIState(this.model_.getSearchText(),
                        this.pageIndex_,
                        this.model_.getGroupByDomain(),
-                       this.getRangeInDays());
+                       this.getRangeInDays(),
+                       this.getOffset());
 };
 
 /**
  * @return {number} The page number being viewed.
  */
 HistoryView.prototype.getPage = function() {
   return this.pageIndex_;
 };
 
 /**
  * Set the current range for grouped results.
  * @param {string} range The number of days to which the range should be set.
  */
 HistoryView.prototype.setRangeInDays = function(range) {
-  // Set the range and reset the page
+  // Set the range, offset and reset the page
   this.model_.rangeInDays = range;
+  this.model_.offset = 0;
   this.pageIndex_ = 0;
   this.model_.reload();
   pageState.setUIState(this.model_.getSearchText(), this.pageIndex_,
-      this.model_.getGroupByDomain(), range);
+      this.model_.getGroupByDomain(), range, this.getOffset());
 };
 
 /**
  * Get the current range in days.
  * @return {number} Current range in days from the model.
  */
 HistoryView.prototype.getRangeInDays = function() {
   return this.model_.rangeInDays;
 };
 
 /**
+ * Set the current offset for grouped results.
+ * @param {number} offset Offset to set.
+ */
+HistoryView.prototype.setOffset = function(offset) {
+  // If there is another query already in flight wait for that to complete.
+  if (this.model_.inFlight_)
+    return;
+  this.model_.offset = offset;
+  this.model_.reload();
+  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_.offset;
+};
+
+/**
  * Callback for the history model to let it know that it has data ready for us
  * to view.
  */
 HistoryView.prototype.onModelReady = function() {
   this.displayResults_();
   this.updateNavBar_();
 };
 
 /**
  * Enables or disables the 'Remove selected items' button as appropriate.
@@ skipping 70 matching lines @@
   var isMonthGroupedResult = this.getRangeInDays() == HistoryModel.Range.MONTH;
   for (var j = 0, visit; visit = domainVisits[j]; j++) {
     resultsList.appendChild(visit.getResultDOM({
       useMonthDate: isMonthGroupedResult
     }));
     this.setVisitRendered_(visit);
   }
 };
 
 /**
+ * Enables or disables the time range buttons.
+ * @private
+ */
+HistoryView.prototype.updateRangeButtons_ = function() {
+  // The enabled state for the previous, today and next buttons.
+  var previousState = false;
+  var todayState = false;
+  var nextState = false;
+  var usePage = (this.getRangeInDays() == HistoryModel.Range.ALL_TIME);
+
+  // Use pagination for most recent visits, offset otherwise.
+  // TODO(sergiu): Maybe send just one variable in the future.
+  if (usePage) {
+    if (this.getPage() != 0) {
+      nextState = true;
+      todayState = true;
+    }
+    previousState = this.model_.hasMoreResults();
+  } else {
+    if (this.getOffset() != 0) {
+      nextState = true;
+      todayState = true;
+    }
+    previousState = !this.model_.isQueryFinished_;
+  }
+
+  $('range-previous').disabled = !previousState;
+  $('range-today').disabled = !todayState;
+  $('range-next').disabled = !nextState;
+};
+
+/**
  * Groups visits by domain, sorting them by the number of visits.
  * @param {Array} visits Visits received from the query results.
  * @param {Element} results Object where the results are added to.
  * @private
  */
 HistoryView.prototype.groupVisitsByDomain_ = function(visits, results) {
   var visitsByDomain = {};
   var domains = [];
 
   // Group the visits into a dictionary and generate a list of domains.
@@ skipping 72 matching lines @@
 };
 
 /**
  * Update the page with results.
  * @private
  */
 HistoryView.prototype.displayResults_ = function() {
   // Either show a page of results received for the all time results or all the
   // received results for the weekly and monthly view.
   var results = this.model_.visits_;
-  if (this.getRangeInDays() == HistoryModel.Range.ALLTIME) {
+  if (this.getRangeInDays() == HistoryModel.Range.ALL_TIME) {
     var rangeStart = this.pageIndex_ * RESULTS_PER_PAGE;
     var rangeEnd = rangeStart + RESULTS_PER_PAGE;
     results = this.model_.getNumberedRange(rangeStart, rangeEnd);
   }
   var searchText = this.model_.getSearchText();
   var groupByDomain = this.model_.getGroupByDomain();
 
   if (searchText) {
     // Add a header for the search results, if there isn't already one.
     if (!this.resultDiv_.querySelector('h3')) {
@@ skipping 16 matching lines @@
             addTitleFavicon: true
           }));
           this.setVisitRendered_(visit);
         }
       }
     }
     this.resultDiv_.appendChild(searchResults);
   } else {
     var resultsFragment = document.createDocumentFragment();
 
-    if (this.getRangeInDays() != HistoryModel.Range.ALLTIME) {
+    if (this.getRangeInDays() != HistoryModel.Range.ALL_TIME) {
       // If this is a time range result add some text that shows what is the
       // time range for the results the user is viewing.
       var timeFrame = resultsFragment.appendChild(
           createElementWithClassName('h2', 'timeframe'));
       // TODO(sergiu): Figure the best way to show this for the first day of
       // the month.
       timeFrame.appendChild(document.createTextNode(loadTimeData.getStringF(
           'historyinterval',
           this.model_.queryStartTime,
           this.model_.queryEndTime)));
@@ skipping 33 matching lines @@
     this.resultDiv_.appendChild(resultsFragment);
   }
   this.updateNavBar_();
 };
 
 /**
  * Update the visibility of the page navigation buttons.
  * @private
  */
 HistoryView.prototype.updateNavBar_ = function() {
+  this.updateRangeButtons_();
   $('newest-button').hidden = this.pageIndex_ == 0;
   $('newer-button').hidden = this.pageIndex_ == 0;
   $('older-button').hidden =
-      this.model_.rangeInDays_ != HistoryModel.Range.ALLTIME ||
+      this.model_.rangeInDays_ != HistoryModel.Range.ALL_TIME ||
       !this.model_.hasMoreResults();
 };
 
 ///////////////////////////////////////////////////////////////////////////////
 // State object:
 /**
  * An 'AJAX-history' implementation.
  * @param {HistoryModel} model The model we're representing.
  * @param {HistoryView} view The view we're representing.
  * @constructor
@@ skipping 17 matching lines @@
     var hashData = state_obj.getHashData();
     var isGroupedByDomain = (hashData.g == 'true');
     if (hashData.q != state_obj.model.getSearchText()) {
       state_obj.view.setSearch(hashData.q, parseInt(hashData.p, 10));
     } else if (parseInt(hashData.p, 10) != state_obj.view.getPage()) {
       state_obj.view.setPage(hashData.p);
     } else if (isGroupedByDomain != state_obj.view.model_.getGroupByDomain()) {
       state_obj.view.setGroupByDomain(isGroupedByDomain);
     } else if (parseInt(hashData.r, 10) != state_obj.model.rangeInDays) {
       state_obj.view.setRangeInDays(parseInt(hashData.r, 10));
+    } else if (parseInt(hashData.o, 10) != state_obj.model.offset) {
+      state_obj.view.setOffset(parseInt(hashData.o, 10));
     }
   }), 50, this);
 }
 
 /**
  * Holds the singleton instance.
  */
 PageState.instance = null;
 
 /**
  * @return {Object} An object containing parameters from our window hash.
  */
 PageState.prototype.getHashData = function() {
   var result = {
     e: 0,
     q: '',
     p: 0,
     g: false,
-    r: 0
+    r: 0,
+    o: 0
   };
 
   if (!window.location.hash)
     return result;
 
   var hashSplit = window.location.hash.substr(1).split('&');
   for (var i = 0; i < hashSplit.length; i++) {
     var pair = hashSplit[i].split('=');
     if (pair.length > 1) {
       result[pair[0]] = decodeURIComponent(pair[1].replace(/\+/g, ' '));
     }
   }
 
   return result;
 };
 
 /**
  * Set the hash to a specified state, this will create an entry in the
  * session history so the back button cycles through hash states, which
  * are then picked up by our listener.
  * @param {string} term The current search string.
  * @param {number} page The page currently being viewed.
  * @param {boolean} grouped Whether the results are grouped or not.
  * @param {HistoryModel.Range} range The range to view or search over.
+ * @param {number} offset Set the begining of the query to the specific offset.
  */
-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;
   $('display-filter-sites').checked = grouped;
   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);
   }
 };
 
 /**
  * Static method to get the hash string for a specified state
  * @param {string} term The current search string.
  * @param {number} page The page currently being viewed.
  * @param {boolean} grouped Whether the results are grouped or not.
  * @param {HistoryModel.Range} range The range to view or search over.
+ * @param {number} offset Set the begining of the query to the specific offset.
  * @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 = [];
 
   if (term)
     newHash.push('q=' + encodeURIComponent(term));
 
   if (page)
     newHash.push('p=' + page);
 
   if (grouped)
     newHash.push('g=' + grouped);
 
   if (range)
     newHash.push('r=' + range);
 
+  if (offset)
+    newHash.push('o=' + offset);
+
   return newHash.join('&');
 };
 
 ///////////////////////////////////////////////////////////////////////////////
 // Document Functions:
 /**
  * Window onload handler, sets up the page.
  */
 function load() {
   uber.onContentFrameLoaded();
@@ skipping 292 matching lines @@
     historyView.reload();
 }
 
 // Add handlers to HTML elements.
 document.addEventListener('DOMContentLoaded', load);
 
 // This event lets us enable and disable menu items before the menu is shown.
 document.addEventListener('canExecute', function(e) {
   e.canExecute = true;
 });