History: Add option to group visits by domain

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 52 matching lines @@
   this.dateShort = result.dateShort || '';
 
   // Whether this is the continuation of a previous day.
   this.continued = continued;
 }
 
 // Visit, public: -------------------------------------------------------------
 
 /**
  * Returns a dom structure for a browse page result or a search page result.
- * @param {boolean} searchResultFlag Indicates whether the result is a search
- *     result or not.
+ * @param {Object} propertyBag A bag of configuration properties, false by
+ * default:
+ * <ul>
+ * <li>isSearchResult: Whether or not the result is a search result.</li>
+ * <li>addTitleFavicon: Whether or not the favicon should be added.</li>
+ * </ul>
  * @return {Node} A DOM node to represent the history entry or search result.
  */
-Visit.prototype.getResultDOM = function(searchResultFlag) {
+Visit.prototype.getResultDOM = function(propertyBag) {
+  var isSearchResult = propertyBag.isSearchResult || false;
+  var addTitleFavicon = propertyBag.addTitleFavicon || false;
   var node = createElementWithClassName('li', 'entry');
   var time = createElementWithClassName('div', 'time');
   var entryBox = createElementWithClassName('label', 'entry-box');
   var domain = createElementWithClassName('div', 'domain');
 
   var dropDown = createElementWithClassName('button', 'drop-down');
   dropDown.value = 'Open action menu';
   dropDown.title = loadTimeData.getString('actionMenuDescription');
   dropDown.setAttribute('menu', '#action-menu');
   cr.ui.decorate(dropDown, MenuButton);
@@ skipping 18 matching lines @@
 
   domain.textContent = this.getDomainFromURL_(this.url_);
 
   // Clicking anywhere in the entryBox will check/uncheck the checkbox.
   entryBox.setAttribute('for', checkbox.id);
   entryBox.addEventListener('mousedown', entryBoxMousedown);
 
   // Prevent clicks on the drop down from affecting the checkbox.
   dropDown.addEventListener('click', function(e) { e.preventDefault(); });
 
-  // We use a wrapper div so that the entry contents will be shinkwrapped.
+  // We use a wrapper div so that the entry contents will be shrinkwrapped.
   entryBox.appendChild(time);
-  entryBox.appendChild(this.getTitleDOM_());
+  entryBox.appendChild(this.getTitleDOM_(addTitleFavicon));
   entryBox.appendChild(domain);
   entryBox.appendChild(dropDown);
 
   // Let the entryBox be styled appropriately when it contains keyboard focus.
   entryBox.addEventListener('focus', function() {
     this.classList.add('contains-focus');
   }, true);
   entryBox.addEventListener('blur', function() {
     this.classList.remove('contains-focus');
   }, true);
 
   node.appendChild(entryBox);
 
-  if (searchResultFlag) {
+  if (isSearchResult) {
     time.appendChild(document.createTextNode(this.dateShort));
     var snippet = createElementWithClassName('div', 'snippet');
     this.addHighlightedText_(snippet,
                              this.snippet_,
                              this.model_.getSearchText());
     node.appendChild(snippet);
   } else {
     time.appendChild(document.createTextNode(this.dateTimeOfDay));
   }
 
@@ skipping 41 matching lines @@
       var b = document.createElement('b');
       b.textContent = content.substring(match.index, i);
       node.appendChild(b);
     }
   }
   if (i < content.length)
     node.appendChild(document.createTextNode(content.slice(i)));
 };
 
 /**
- * @return {DOMObject} DOM representation for the title block.
+ * Returns the DOM element containing a link on the title of the URL for the
+ * current visit. Optionally sets the favicon as well.
+ * @param {boolean} addFavicon Whether to add a favicon or not.
+ * @return {Element} DOM representation for the title block.
  * @private
  */
-Visit.prototype.getTitleDOM_ = function() {
+Visit.prototype.getTitleDOM_ = function(addFavicon) {
   var node = createElementWithClassName('div', 'title');
-  node.style.backgroundImage = getFaviconImageSet(this.url_);
-  node.style.backgroundSize = '16px';
+  if (addFavicon) {
+    node.style.backgroundImage = getFaviconImageSet(this.url_);
+    node.style.backgroundSize = '16px';
+  }
 
   var link = document.createElement('a');
   link.href = this.url_;
   link.id = 'id-' + this.id_;
   link.target = '_top';
 
   // Add a tooltip, since it might be ellipsized.
   // TODO(dubroy): Find a way to show the tooltip only when necessary.
   link.title = this.title_;
 
   this.addHighlightedText_(link, this.title_, this.model_.getSearchText());
   node.appendChild(link);
 
   if (this.starred_) {
     var star = createElementWithClassName('div', 'starred');
     node.appendChild(star);
     star.addEventListener('click', this.starClicked_.bind(this));
   }
 
   return node;
 };
 
 /**
+ * Set the favicon for an element.
+ * @param {Element} el The DOM element to which to add the icon.
+ * @private
+ */
+Visit.prototype.addFaviconToElement_ = function(el) {
+  el.style.backgroundImage = getFaviconImageSet(this.url_);
+};
+
+/**
  * Launch a search for more history entries from the same domain.
  * @private
  */
 Visit.prototype.showMoreFromSite_ = function() {
   setSearch(this.getDomainFromURL_(this.url_));
 };
 
 /**
  * Remove a single entry from the history.
  * @private
@@ skipping 67 matching lines @@
  *     up an initial view, use #requestPage otherwise.
  */
 HistoryModel.prototype.setSearchText = function(searchText, opt_page) {
   this.clearModel_();
   this.searchText_ = searchText;
   this.requestedPage_ = opt_page ? opt_page : 0;
   this.queryHistory_();
 };
 
 /**
+ * Clear the search text.
+ */
+HistoryModel.prototype.clearSearchText = function() {
+  this.searchText_ = '';
+};
+
+/**
  * 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 groupByDomain = this.groupByDomain_;
+
   this.clearModel_();
   this.searchText_ = search;
   this.requestedPage_ = page;
+  this.groupByDomain_ = groupByDomain;
   this.queryHistory_();
 };
 
 /**
  * @return {string} The current search text.
  */
 HistoryModel.prototype.getSearchText = function() {
   return this.searchText_;
 };
 
@@ skipping 12 matching lines @@
  * Receiver for history query.
  * @param {Object} info An object containing information about the query.
  * @param {Array} results A list of results.
  */
 HistoryModel.prototype.addResults = function(info, results) {
   $('loading-spinner').hidden = true;
   this.inFlight_ = false;
   this.isQueryFinished_ = info.finished;
   this.queryCursor_ = info.cursor;
 
-  // If there are no results, or they're not for the current search term,
-  // there's nothing more to do.
-  if (!results || !results.length || info.term != this.searchText_)
+  // If the results are not for the current search term there's nothing more
+  // to do.
+  if (info.term != this.searchText_)
     return;
 
   // If necessary, sort the results from newest to oldest.
   if (!results.sorted)
     results.sort(function(a, b) { return b.time - a.time; });
 
   var lastVisit = this.visits_.slice(-1)[0];
   var lastDay = lastVisit ? lastVisit.dateRelativeDay : null;
 
   for (var i = 0, thisResult; thisResult = results[i]; i++) {
@@ skipping 44 matching lines @@
 
 // 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;
 
@@ skipping 10 matching lines @@
   // visit to a URL on any day.
   this.urlsFromLastSeenDay_ = {};
 
   if (this.view_)
     this.view_.clear_();
 };
 
 /**
  * Figure out if we need to do more queries to fill the currently requested
  * page. If we think we can fill the page, call the view and let it know
- * we're ready to show something.
+ * we're ready to show something. This only applies to the daily time-based
+ * view.
  * @private
  */
 HistoryModel.prototype.updateSearch_ = function() {
-  var doneLoading =
-      this.canFillPage_(this.requestedPage_) || this.isQueryFinished_;
+  var doneLoading = this.isQueryFinished_ ||
+                    this.canFillPage_(this.requestedPage_);
 
-  // Try to fetch more results if the current page isn't full.
+  // Try to fetch more results if the results are not grouped by domain and
+  // the current page isn't full.
   if (!doneLoading && !this.inFlight_)
     this.queryHistory_();
 
-  // If we have any data for the requested page, show it.
-  if (this.changed && this.haveDataForPage_(this.requestedPage_)) {
-    this.view_.onModelReady();
-    this.changed = false;
-  }
+  // 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 endTime = 0;
-
+  // Do the time-based search.
   // If there are already some visits, pick up the previous query where it
   // left off.
   if (this.visits_.length > 0) {
     var lastVisit = this.visits_.slice(-1)[0];
     endTime = lastVisit.date.getTime();
     cursor = this.queryCursor_;
   }
 
   $('loading-spinner').hidden = false;
   this.inFlight_ = true;
@@ skipping 14 matching lines @@
 /**
  * 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;
+};
+
+/**
+ * Gets whether we are grouped by domain.
+ * @return {boolean} Whether the results are grouped by domain.
+ */
+HistoryModel.prototype.getGroupByDomain = function() {
+  return this.groupByDomain_;
+};
+
 ///////////////////////////////////////////////////////////////////////////////
 // HistoryView:
 
 /**
  * Functions and state for populating the page with HTML. This should one-day
  * contain the view and use event handlers, rather than pushing HTML out and
  * getting called externally.
  * @param {HistoryModel} model The model backing this view.
  * @constructor
  */
@@ skipping 18 matching lines @@
   // Add handlers for the page navigation buttons at the bottom.
   $('newest-button').addEventListener('click', function() {
     self.setPage(0);
   });
   $('newer-button').addEventListener('click', function() {
     self.setPage(self.pageIndex_ - 1);
   });
   $('older-button').addEventListener('click', function() {
     self.setPage(self.pageIndex_ + 1);
   });
+
+  $('display-filter-sites').addEventListener('click', function(e) {
+    self.setGroupByDomain($('display-filter-sites').checked);
+  });
 }
 
 // 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_);
+  pageState.setUIState(term, this.pageIndex_, this.model_.getGroupByDomain());
 };
 
 /**
+ * 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());
+};
+
+/**
  * 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_);
+  pageState.setUIState(this.model_.getSearchText(),
+                       this.pageIndex_,
+                       this.model_.getGroupByDomain());
 };
 
 /**
  * @return {number} The page number being viewed.
  */
 HistoryView.prototype.getPage = function() {
   return this.pageIndex_;
 };
 
 /**
@@ skipping 33 matching lines @@
  * Record that the given visit has been rendered.
  * @param {Visit} visit The visit that was rendered.
  * @private
  */
 HistoryView.prototype.setVisitRendered_ = function(visit) {
   visit.isRendered = true;
   this.currentVisits_.push(visit);
 };
 
 /**
+ * This function generates and adds the grouped visits DOM for a certain
+ * domain. This includes the clickable arrow and domain name and the visit
+ * entries for that domain.
+ * @param {Element} results DOM object to which to add the elements.
+ * @param {string} domain Current domain name.
+ * @param {Array} domainVisits Array of visits for this domain.
+ * @private
+ */
+HistoryView.prototype.getGroupedVisitsDOM_ = function(
+    results, domain, domainVisits) {
+  // Add a new domain entry.
+  var siteResults = results.appendChild(
+      createElementWithClassName('li', 'site-entry'));
+  // Make a wrapper that will contain the arrow, the favicon and the domain.
+  var siteDomainWrapper = siteResults.appendChild(
+      createElementWithClassName('div', 'site-domain-wrapper'));
+  var siteArrow = siteDomainWrapper.appendChild(
+      createElementWithClassName('div', 'site-domain-arrow collapse'));
+  var siteDomain = siteDomainWrapper.appendChild(
+      createElementWithClassName('div', 'site-domain'));
+  var numberOfVisits = createElementWithClassName('span', 'number-visits');
+  numberOfVisits.textContent = loadTimeData.getStringF('numbervisits',
+                                                       domainVisits.length);
+  siteDomain.textContent = domain;
+  siteDomain.appendChild(numberOfVisits);
+  siteResults.appendChild(siteDomainWrapper);
+  var resultsList = siteResults.appendChild(
+      createElementWithClassName('ol', 'site-results'));
+
+  domainVisits[0].addFaviconToElement_(siteDomain);
+
+  siteDomainWrapper.addEventListener('click', toggleHandler);
+  // Collapse until it gets toggled.
+  resultsList.style.height = 0;
+
+  // Add the results for each of the domain.
+  for (var j = 0, visit; visit = domainVisits[j]; j++) {
+    resultsList.appendChild(visit.getResultDOM({}));
+    this.setVisitRendered_(visit);
+  }
+};
+
+/**
+ * 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.
+  for (var i = 0, visit; visit = visits[i]; i++) {
+    var domain = visit.getDomainFromURL_(visit.url_);
+    if (!visitsByDomain[domain]) {
+      visitsByDomain[domain] = [];
+      domains.push(domain);
+    }
+    visitsByDomain[domain].push(visit);
+  }
+  var sortByVisits = function(a, b) {
+    return visitsByDomain[b].length - visitsByDomain[a].length;
+  };
+  domains.sort(sortByVisits);
+
+  for (var i = 0, domain; domain = domains[i]; i++) {
+    this.getGroupedVisitsDOM_(results, domain, visitsByDomain[domain]);
+  }
+};
+
+/**
+ * Adds the results grouped by days, grouping them if needed.
+ * @param {Array} visits Visits returned by the query.
+ * @param {Element} parentElement Element to which to add the results to.
+ * @private
+ */
+HistoryView.prototype.addDayResults_ = function(visits, parentElement) {
+  if (visits.length == 0)
+    return;
+
+  var firstVisit = visits[0];
+  var day = parentElement.appendChild(createElementWithClassName('h3', 'day'));
+  day.appendChild(document.createTextNode(firstVisit.dateRelativeDay));
+  if (firstVisit.continued) {
+    day.appendChild(document.createTextNode(' ' +
+                                            loadTimeData.getString('cont')));
+  }
+  var dayResults = parentElement.appendChild(
+      createElementWithClassName('ol', 'day-results'));
+
+  if (this.model_.getGroupByDomain()) {
+    this.groupVisitsByDomain_(visits, dayResults);
+  } else {
+    var lastTime;
+
+    for (var i = 0, visit; visit = visits[i]; i++) {
+      // If enough time has passed between visits, indicate a gap in browsing.
+      var thisTime = visit.date.getTime();
+      if (lastTime && lastTime - thisTime > BROWSING_GAP_TIME)
+        dayResults.appendChild(createElementWithClassName('li', 'gap'));
+
+      // Insert the visit into the DOM.
+      dayResults.appendChild(visit.getResultDOM({
+        addTitleFavicon: true
+      }));
+      this.setVisitRendered_(visit);
+
+      lastTime = thisTime;
+    }
+  }
+};
+
+/**
  * Update the page with results.
  * @private
  */
 HistoryView.prototype.displayResults_ = function() {
   var rangeStart = this.pageIndex_ * RESULTS_PER_PAGE;
   var rangeEnd = rangeStart + RESULTS_PER_PAGE;
   var 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')) {
       var header = document.createElement('h3');
       header.textContent = loadTimeData.getStringF('searchresultsfor',
                                                    searchText);
       this.resultDiv_.appendChild(header);
     }
 
     var searchResults = createElementWithClassName('ol', 'search-results');
     if (results.length == 0) {
       var noResults = document.createElement('div');
       noResults.textContent = loadTimeData.getString('noresults');
       searchResults.appendChild(noResults);
     } else {
       for (var i = 0, visit; visit = results[i]; i++) {
         if (!visit.isRendered) {
-          searchResults.appendChild(visit.getResultDOM(true));
+          searchResults.appendChild(visit.getResultDOM({
+            isSearchResult: true,
+            addTitleFavicon: true
+          }));
           this.setVisitRendered_(visit);
         }
       }
     }
     this.resultDiv_.appendChild(searchResults);
   } else {
+    if (results.length == 0) {
+      var noResults = document.createElement('div');
+      noResults.textContent = loadTimeData.getString('noresultsinterval');

[Patrick Dubroy, 2013/01/21 09:42:40]

This message doesn't make sense for the normal history page that has no concept
of an "interval".

[Sergiu, 2013/01/21 10:38:29]

Done, renamed all the strings related to "no results found" to make more sense.

+      this.resultDiv_.appendChild(noResults);
+      this.updateNavBar_();
+      return;
+    }
+
     var resultsFragment = document.createDocumentFragment();
-    var lastTime = Math.infinity;
-    var dayResults;
 
-    for (var i = 0, visit; visit = results[i]; i++) {
-      if (visit.isRendered)
-        continue;
+    var dayStart = 0;
+    var dayEnd = 0;
+    // Go through all of the visits and process them in chunks of one day.
+    while (dayEnd < results.length) {
+      // Skip over the ones that are already rendered.
+      while (dayStart < results.length && results[dayStart].isRendered)
+        ++dayStart;
+      var dayEnd = dayStart + 1;
+      while (dayEnd < results.length && results[dayEnd].continued)
+        ++dayEnd;
 
-      var thisTime = visit.date.getTime();
+      this.addDayResults_(
+          results.slice(dayStart, dayEnd), resultsFragment, groupByDomain);
+    }
 
-      // Break across day boundaries and insert gaps for browsing pauses.
-      // Create a dayResults element to contain results for each day.
-      if ((i == 0 && visit.continued) || !visit.continued) {
-        // It's the first visit of the day, or the day is continued from
-        // the previous page. Create a header for the day on the current page.
-        var day = createElementWithClassName('h3', 'day');
-        day.appendChild(document.createTextNode(visit.dateRelativeDay));
-        if (visit.continued) {
-          day.appendChild(document.createTextNode(' ' +
-              loadTimeData.getString('cont')));
-        }
-
-        resultsFragment.appendChild(day);
-        dayResults = createElementWithClassName('ol', 'day-results');
-        resultsFragment.appendChild(dayResults);
-      } else if (dayResults && lastTime - thisTime > BROWSING_GAP_TIME) {
-        dayResults.appendChild(createElementWithClassName('li', 'gap'));
-      }
-      lastTime = thisTime;
-
-      // Add the entry to the appropriate day.
-      dayResults.appendChild(visit.getResultDOM(false));
-      this.setVisitRendered_(visit);
-    }
+    // Add all the days and their visits to the page.
     this.resultDiv_.appendChild(resultsFragment);
   }
+  this.updateNavBar_();
 };
 
 /**
  * Update the visibility of the page navigation buttons.
  * @private
  */
 HistoryView.prototype.updateNavBar_ = function() {
   $('newest-button').hidden = this.pageIndex_ == 0;
   $('newer-button').hidden = this.pageIndex_ == 0;
   $('older-button').hidden = !this.model_.hasMoreResults();
@@ skipping 21 matching lines @@
   }
 
   // TODO(glen): Replace this with a bound method so we don't need
   //     public model and view.
   this.checker_ = setInterval((function(state_obj) {
     var hashData = state_obj.getHashData();
     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 ((hashData.g == 'true') !=
+               state_obj.view.model_.getGroupByDomain()) {
+      state_obj.view.setGroupByDomain(hashData.g);
     }
   }), 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
+    p: 0,
+    g: false
   };
 
-  if (!window.location.hash) {
+  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 {string} page The page currently being viewed.
+ * @param {number} page The page currently being viewed.
+ * @param {boolean} grouped Whether the results are grouped or not.
  */
-PageState.prototype.setUIState = function(term, page) {
+PageState.prototype.setUIState = function(term, page, grouped) {
   // Make sure the form looks pretty.
   $('search-field').value = term;
-  var currentHash = this.getHashData();
-  if (currentHash.q != term || currentHash.p != page) {
-    window.location.hash = PageState.getHashString(term, page);
+  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) {
+    window.location.hash = PageState.getHashString(
+        term, page, grouped);
   }
 };
 
 /**
  * Static method to get the hash string for a specified state
  * @param {string} term The current search string.
- * @param {string} page The page currently being viewed.
+ * @param {number} page The page currently being viewed.
+ * @param {boolean} grouped Whether the results are grouped or not.
  * @return {string} The string to be used in a hash.
  */
-PageState.getHashString = function(term, page) {
+PageState.getHashString = function(term, page, grouped) {
+  // Omit elements that are empty.
   var newHash = [];
-  if (term) {
+
+  if (term)
     newHash.push('q=' + encodeURIComponent(term));
-  }
-  if (page != undefined) {
+
+  if (page)
     newHash.push('p=' + page);
-  }
+
+  if (grouped)
+    newHash.push('g=' + grouped);
 
   return newHash.join('&');
 };
 
 ///////////////////////////////////////////////////////////////////////////////
 // Document Functions:
 /**
  * Window onload handler, sets up the page.
  */
 function load() {
@@ skipping 17 matching lines @@
 
   $('remove-visit').addEventListener('activate', function(e) {
     activeVisit.removeFromHistory_();
     activeVisit = null;
   });
   $('more-from-site').addEventListener('activate', function(e) {
     activeVisit.showMoreFromSite_();
     activeVisit = null;
   });
 
+  // Only show the controls if the command line switch is activated.
+  if (loadTimeData.getBoolean('historyGroupEnabled')) {
+    $('filter-controls').hidden = false;
+  }
+
   var title = loadTimeData.getString('title');
   uber.invokeMethodOnParent('setTitle', {title: title});
 
   window.addEventListener('message', function(e) {
     if (e.data.method == 'frameSelected')
       searchField.focus();
   });
 }
 
 /**
@@ skipping 169 matching lines @@
     removeNode(previousEntry);
   }
 
   // if both the next and previous entries are gaps, remove one
   if (nextEntry && nextEntry.className == 'gap' &&
       previousEntry && previousEntry.className == 'gap') {
     removeNode(nextEntry);
   }
 }
 
+/**
+ * Toggles an element in the grouped history.
+ * @param {Element} e The element which was clicked on.
+ */
+function toggleHandler(e) {
+  var innerResultList = e.currentTarget.parentElement.querySelector(
+      '.site-results');
+  var innerArrow = e.currentTarget.parentElement.querySelector(
+      '.site-domain-arrow');
+  if (innerArrow.classList.contains('collapse')) {
+    innerResultList.style.height = 'auto';
+    // -webkit-transition does not work on height:auto elements so first set
+    // the height to auto so that it is computed and then set it to the
+    // computed value in pixels so the transition works properly.
+    var height = innerResultList.clientHeight;
+    innerResultList.style.height = height + 'px';
+    innerArrow.classList.remove('collapse');
+    innerArrow.classList.add('expand');
+  } else {
+    innerResultList.style.height = 0;
+    innerArrow.classList.remove('expand');
+    innerArrow.classList.add('collapse');
+  }
+}
+
 ///////////////////////////////////////////////////////////////////////////////
 // Chrome callbacks:
 
 /**
  * Our history system calls this function with results from searches.
  * @param {Object} info An object containing information about the query.
  * @param {Array} results A list of results.
  */
 function historyResult(info, results) {
   historyModel.addResults(info, results);
@@ skipping 37 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;
 });