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;
 /** @const */ var RESULTS_MAX_LIMIT = 2000;
@@ skipping 340 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 95 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', {

[James Hawkins, 2013/01/30 16:30:09]

What is the purpose of using defineProperty?

[Sergiu, 2013/01/30 17:07:13]

Well, I didn't want to access private members from outside  so I used getters
and setters. Then bauerb@ suggested using Javascript-specific getters and
setters instead of getOffset() and setOffset(offset). There are two ways to do
that, either when defining the prototype object or using defineProperty. In our
case only defineProperty is usable.

+  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.last_id_ = 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;
 
+  // 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.RECENT;
 
   // 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;
@@ skipping 27 matching lines @@
 
   // 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() {
-  // 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_;
 
   $('loading-spinner').hidden = false;
   this.inFlight_ = true;
   chrome.send('queryHistory',
-      [this.searchText_, range, this.queryCursor_, this.getMaxResults()]);
+      [this.searchText_, offset, range, this.queryCursor_,
+       this.getMaxResults()]);
 };
 
 /**
  * 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 * this.getMaxResults() < 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) * this.getMaxResults() <= 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.RECENT)
+      self.setPage(self.pageIndex_ + 1);
+    else
+      self.setOffset(self.getOffset() + 1);
+  });
+  $('range-next').addEventListener('click', function(e) {
+    if (self.getRangeInDays() == HistoryModel.Range.RECENT)
+      self.setPage(self.pageIndex_ - 1);
+    else
+      self.setOffset(self.getOffset() - 1);
+  });
+  $('range-today').addEventListener('click', function(e) {
+    if (self.getRangeInDays() == HistoryModel.Range.RECENT)
+      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) {
+  window.scrollTo(0, 0);
+  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.setRangeButtonsState_ = 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.RECENT);
+  var offset = this.getOffset();
+  var page = this.getPage();
+
+  // Use pagination for most recent visits, offset otherwise.
+  // TODO(sergiu): Maybe send just one variable in the future.
+  if (usePage) {
+    if (page != 0) {
+      nextState = true;
+      todayState = true;
+    }
+    previousState = this.model_.hasMoreResults();
+  } else {
+    if (offset != 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 120 matching lines @@
           createElementWithClassName('h2', 'timeframe'));
       timeFrame.appendChild(document.createTextNode(loadTimeData.getStringF(
           'historyinterval',
           this.model_.queryStartTime,
           this.model_.queryEndTime)));
     }
 
     if (results.length == 0) {
       var noResults = document.createElement('div');
       noResults.textContent = loadTimeData.getString('noresults');
-      this.resultDiv_.appendChild(noResults);
+      resultsFragment.appendChild(noResults);
+      this.resultDiv_.appendChild(resultsFragment);
       this.updateNavBar_();
       return;
     }
 
     if (this.getRangeInDays() == HistoryModel.Range.MONTH &&
         groupByDomain) {
       // Group everything together in the month view.
       this.addMonthResults_(results, resultsFragment);
     } else {
       var dayStart = 0;
@@ skipping 16 matching lines @@
     this.resultDiv_.appendChild(resultsFragment);
   }
   this.updateNavBar_();
 };
 
 /**
  * Update the visibility of the page navigation buttons.
  * @private
  */
 HistoryView.prototype.updateNavBar_ = function() {
+  this.setRangeButtonsState_();
   $('newest-button').hidden = this.pageIndex_ == 0;
   $('newer-button').hidden = this.pageIndex_ == 0;
   $('older-button').hidden =
       this.model_.rangeInDays_ != HistoryModel.Range.RECENT ||
       !this.model_.hasMoreResults();
 };
 
 ///////////////////////////////////////////////////////////////////////////////
 // State object:
 /**
@@ skipping 21 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 {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)
     $('display-filter-sites').checked = true;
   else
     $('display-filter-sites').checked = false;
   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 {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 = [];
 
   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;
 });