History: Update managed user history page

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;
 
 // Amount of time between pageviews that we consider a 'break' in browsing,
 // measured in milliseconds.
 /** @const */ var BROWSING_GAP_TIME = 15 * 60 * 1000;
 
 // TODO(glen): Get rid of these global references, replace with a controller
 //     or just make the classes own more of the page.
 var historyModel;
 var historyView;
 var pageState;
 var selectionAnchor = -1;
 var activeVisit = null;
 
 /** @const */ var Command = cr.ui.Command;
 /** @const */ var Menu = cr.ui.Menu;
 /** @const */ var MenuButton = cr.ui.MenuButton;
 
 /**
- * Enum that shows whether a manual exception is set in managed mode for a
- * host or URL.
- * Must behave like the ManualBehavior enum from managed_user_service.h.
+ * Enum that shows the filtering behavior for a host or URL to a managed user.
+ * Must behave like the FilteringBehavior enum from managed_mode_url_filter.h.
  * @enum {number}
  */
-ManagedModeManualBehavior = {
-  NONE: 0,
-  ALLOW: 1,
+ManagedModeFilteringBehavior = {
+  ALLOW: 0,
+  WARN: 1,
   BLOCK: 2
 };
 
 MenuButton.createDropDownArrows();
 
 /**
  * Returns true if the mobile (non-desktop) version is being shown.
  * @return {boolean} true if the mobile version is being shown.
  */
 function isMobileVersion() {
@@ skipping 33 matching lines @@
   // two items easily.
 
   this.date = new Date(result.time);
 
   // See comment in BrowsingHistoryHandler::QueryComplete - we won't always
   // get all of these.
   this.dateRelativeDay = result.dateRelativeDay || '';
   this.dateTimeOfDay = result.dateTimeOfDay || '';
   this.dateShort = result.dateShort || '';
 
-  // These values represent indicators shown to users in managed mode.
-  // |*manualBehavior| shows whether the user has manually added an exception
-  // for that URL or host while |*inContentPack| shows whether that URL or host
-  // is in a content pack or not.
-  this.urlManualBehavior = result.urlManualBehavior ||
-                           ManagedModeManualBehavior.NONE;
-  this.hostManualBehavior = result.hostManualBehavior ||
-                            ManagedModeManualBehavior.NONE;
-  this.urlInContentPack = result.urlInContentPack || false;
-  this.hostInContentPack = result.hostInContentPack || false;
+  // Shows the filtering behavior for that host (only used for managed users).
+  // A value of |ManagedModeFilteringBehavior.ALLOW| is not displayed so it is
+  // used as the default value.
+  this.hostFilteringBehavior = ManagedModeFilteringBehavior.ALLOW;
+  if (typeof result.hostFilteringBehavior != 'undefined')
+    this.hostFilteringBehavior = result.hostFilteringBehavior;
+
   this.blockedVisit = result.blockedVisit || false;
 
   // Whether this is the continuation of a previous day.
   this.continued = continued;
 
   this.allTimestamps = result.allTimestamps;
 }
 
 // Visit, public: -------------------------------------------------------------
 
@@ skipping 52 matching lines @@
     bookmarkSection.classList.add('starred');
     bookmarkSection.addEventListener('click', function f(e) {
       bookmarkSection.classList.remove('starred');
       chrome.send('removeBookmark', [self.url_]);
       bookmarkSection.removeEventListener('click', f);
       e.preventDefault();
     });
   }
   entryBox.appendChild(bookmarkSection);
 
-  var titleAndDomainWrapper = entryBox.appendChild(
-      createElementWithClassName('div', 'title-and-domain'));
+  var visitEntryWrapper = entryBox.appendChild(document.createElement('div'));
+  if (addTitleFavicon || this.blockedVisit)
+    visitEntryWrapper.classList.add('visit-entry');
   if (this.blockedVisit) {
-    titleAndDomainWrapper.classList.add('blocked-indicator');
-    titleAndDomainWrapper.appendChild(this.getVisitAttemptDOM_());
+    visitEntryWrapper.classList.add('blocked-indicator');
+    visitEntryWrapper.appendChild(this.getVisitAttemptDOM_());
   } else {
-    titleAndDomainWrapper.appendChild(this.getTitleDOM_());
+    visitEntryWrapper.appendChild(this.getTitleDOM_());
     if (addTitleFavicon)
-      this.addFaviconToElement_(titleAndDomainWrapper);
+      this.addFaviconToElement_(visitEntryWrapper);
+    visitEntryWrapper.appendChild(domain);
   }
-  titleAndDomainWrapper.appendChild(domain);
 
   if (isMobileVersion()) {
     var removeButton = createElementWithClassName('button', 'remove-entry');
     removeButton.classList.add('custom-appearance');
     removeButton.addEventListener('click', function(e) {
       self.removeFromHistory();
       e.stopPropagation();
       e.preventDefault();
     });
     entryBox.appendChild(removeButton);
@@ skipping 22 matching lines @@
     this.classList.add('contains-focus');
   }, true);
   entryBox.addEventListener('blur', function() {
     this.classList.remove('contains-focus');
   }, true);
 
   var entryBoxContainer =
       createElementWithClassName('div', 'entry-box-container');
   node.appendChild(entryBoxContainer);
   entryBoxContainer.appendChild(entryBox);
-  if (!isSearchResult && this.model_.isManagedProfile &&
-      this.model_.getGroupByDomain()) {
-    entryBoxContainer.appendChild(
-        getManagedStatusDOM(this.urlManualBehavior, this.urlInContentPack));
-  }
 
   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 if (useMonthDate) {
     // Show the day instead of the time.
@@ skipping 88 matching lines @@
 };
 
 /**
  * Returns the DOM element containing the text for a blocked visit attempt.
  * @return {Element} DOM representation of the visit attempt.
  * @private
  */
 Visit.prototype.getVisitAttemptDOM_ = function() {
   var node = createElementWithClassName('div', 'title');
   node.innerHTML = loadTimeData.getStringF('blockedVisitText',
-                                           this.url_, this.id_);
+                                           this.url_,
+                                           this.id_,
+                                           this.getDomainFromURL_(this.url_));
   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) {
   var url = isMobileVersion() ?
@@ skipping 225 matching lines @@
  */
 HistoryModel.prototype.clearModel_ = function() {
   this.inFlight_ = false;  // Whether a query is inflight.
   this.searchText_ = '';
   // Whether this user is a managed user.
   this.isManagedProfile = loadTimeData.getBoolean('isManagedProfile');
   this.deletingHistoryAllowed = loadTimeData.getBoolean('allowDeletingHistory');
 
   // Only create checkboxes for editing entries if they can be used either to
   // delete an entry or to block/allow it.
-  this.editingEntriesAllowed = this.deletingHistoryAllowed ||
-                               this.isManagedProfile;
+  this.editingEntriesAllowed = this.deletingHistoryAllowed;
 
   // Flag to show that the results are grouped by domain or not.
   this.groupByDomain_ = false;
-  // Group domains by default for managed users.
-  if (this.isManagedProfile)
-    this.groupByDomain_ = true;
 
   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;
 
@@ skipping 125 matching lines @@
   $('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);
   });
 
+  var handleRangeChange = function(e) {
+    // Update the results and save the last state.
+    self.setRangeInDays(parseInt(e.target.value, 10));
+  };
+
   // Add handlers for the range options.
-  $('timeframe-filter').addEventListener('change', function(e) {
-    self.setRangeInDays(parseInt(e.target.value, 10));
-  });
-
-  $('group-by-domain').addEventListener('click', function(e) {
-    self.setGroupByDomain($('group-by-domain').checked);
-  });
+  $('timeframe-filter-all').addEventListener('change', handleRangeChange);
+  $('timeframe-filter-week').addEventListener('change', handleRangeChange);
+  $('timeframe-filter-month').addEventListener('change', handleRangeChange);
 
   $('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 on a specific term.
  * @param {string} term The string to search for.
  */
 HistoryView.prototype.setSearch = function(term) {
   window.scrollTo(0, 0);
-  this.setPageState(term, 0, this.model_.getGroupByDomain(),
-                    this.getRangeInDays(), this.getOffset());
+  this.setPageState(term, 0, 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.setPageState('', this.pageIndex_, groupedByDomain, this.getRangeInDays(),
-                    this.getOffset());
-};
-
-/**
  * Reload the current view.
  */
 HistoryView.prototype.reload = function() {
   this.model_.reload();
   this.updateSelectionEditButtons();
   this.updateRangeButtons_();
 };
 
 /**
  * Sets all the parameters for the history page and then reloads the view to
  * update the results.
  * @param {string} searchText The search string to set.
  * @param {number} page The page to be viewed.
- * @param {boolean} groupByDomain 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.
  */
-HistoryView.prototype.setPageState = function(searchText, page, groupByDomain,
-    range, offset) {
+HistoryView.prototype.setPageState = function(searchText, page, range, offset) {
   this.clear_();
   this.model_.searchText_ = searchText;
   this.pageIndex_ = page;
   this.model_.requestedPage_ = page;
-  this.model_.groupByDomain_ = groupByDomain;
   this.model_.rangeInDays_ = range;
+  this.model_.groupByDomain_ = false;
+  if (range != HistoryModel.Range.ALL_TIME)
+    this.model_.groupByDomain_ = true;
   this.model_.offset_ = offset;
   this.reload();
   pageState.setUIState(this.model_.getSearchText(),
                        this.pageIndex_,
-                       this.model_.getGroupByDomain(),
                        this.getRangeInDays(),
                        this.getOffset());
 };
 
 /**
  * Switch to a specified page.
  * @param {number} page The page we wish to view.
  */
 HistoryView.prototype.setPage = function(page) {
   // TODO(sergiu): Move this function to setPageState as well and see why one
   // of the tests fails when using setPageState.
   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.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, offset and reset the page.
-  this.setPageState(this.model_.getSearchText(), 0,
-                    this.model_.getGroupByDomain(), range, 0);
+  this.setPageState(this.model_.getSearchText(), 0, range, 0);
 };
 
 /**
  * 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.setPageState(this.model_.getSearchText(),
                     this.pageIndex_,
-                    this.model_.getGroupByDomain(),
                     this.getRangeInDays(),
                     offset);
 };
 
 /**
  * Get the current offset.
  * @return {number} Current offset from the model.
  */
 HistoryView.prototype.getOffset = function() {
   return this.model_.offset;
@@ skipping 140 matching lines @@
 
   numberOfVisits.textContent = loadTimeData.getStringF('numberVisits',
                                                        domainVisits.length);
   siteDomain.appendChild(numberOfVisits);
 
   domainVisits[0].addFaviconToElement_(siteDomain);
 
   siteDomainWrapper.addEventListener('click', toggleHandler);
 
   if (this.model_.isManagedProfile) {
-    // Visit attempts don't make sense for domains so set the last parameter to
-    // false.
-    siteDomainWrapper.appendChild(getManagedStatusDOM(
-        domainVisits[0].hostManualBehavior, domainVisits[0].hostInContentPack));
+    siteDomainWrapper.appendChild(
+        getManagedStatusDOM(domainVisits[0].hostFilteringBehavior));
   }
 
   siteResults.appendChild(siteDomainWrapper);
   var resultsList = siteResults.appendChild(
       createElementWithClassName('ol', 'site-results'));
 
   // Collapse until it gets toggled.
   resultsList.style.height = 0;
 
   // Add the results for each of the domain.
   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() {
-  // Update the range button to the current value.
-  $('timeframe-filter').value = this.getRangeInDays();
-
   // 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) {
@@ skipping 47 matching lines @@
  * @param {Array} visits Visits returned by the query.
  * @param {Element} parentElement Element to which to add the results to.
  * @private
  */
 HistoryView.prototype.addMonthResults_ = function(visits, parentElement) {
   if (visits.length == 0)
     return;
 
   var monthResults = parentElement.appendChild(
       createElementWithClassName('ol', 'month-results'));
+  // Don't add checkboxes if entries can not be edited.
+  if (!this.model_.editingEntriesAllowed)
+    monthResults.classList.add('no-checkboxes');
+
   this.groupVisitsByDomain_(visits, monthResults);
 };
 
 /**
  * Adds the results for a certain day. This includes a title with the day of
  * the results and the results themselves, grouped or not.
  * @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'));
 
+  // Don't add checkboxes if entries can not be edited.
+  if (!this.model_.editingEntriesAllowed)
+    dayResults.classList.add('no-checkboxes');
+
   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;
     }
   }
 };
 
 /**
+ * Adds the text that shows the current interval, used for week and month
+ * results.
+ * @param {Element} resultsFragment The element to which the interval will be
+ *     added to.
+ * @private
+ */
+HistoryView.prototype.addTimeframeInterval_ = function(resultsFragment) {
+  if (this.getRangeInDays() == HistoryModel.Range.ALL_TIME)
+    return;
+
+  // 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)));
+};
+
+/**
  * Update the page with results.
  * @param {boolean} doneLoading Whether the current request is complete.
  * @private
  */
 HistoryView.prototype.displayResults_ = function(doneLoading) {
   // 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.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')) {
       var header = document.createElement('h3');
       header.textContent = loadTimeData.getStringF('searchResultsFor',
                                                    searchText);
       this.resultDiv_.appendChild(header);
     }
 
+    this.addTimeframeInterval_(this.resultDiv_);
+
     var searchResults = createElementWithClassName('ol', 'search-results');
+
+    // Don't add checkboxes if entries can not be edited.
+    if (!this.model_.editingEntriesAllowed)
+      searchResults.classList.add('no-checkboxes');
+
     if (results.length == 0 && doneLoading) {
       var noSearchResults = searchResults.appendChild(
           createElementWithClassName('div', 'no-results-message'));
       noSearchResults.textContent = loadTimeData.getString('noSearchResults');
     } else {
       for (var i = 0, visit; visit = results[i]; i++) {
         if (!visit.isRendered) {
           searchResults.appendChild(visit.getResultDOM({
             isSearchResult: true,
             addTitleFavicon: true
           }));
           this.setVisitRendered_(visit);
         }
       }
     }
     this.resultDiv_.appendChild(searchResults);
   } else {
     var resultsFragment = document.createDocumentFragment();
 
-    if (this.getRangeInDays() == HistoryModel.Range.WEEK ||
-        this.getRangeInDays() == HistoryModel.Range.MONTH) {
-      // 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)));
-    }
+    this.addTimeframeInterval_(resultsFragment);
 
     if (results.length == 0 && doneLoading) {
       var noResults = resultsFragment.appendChild(
           createElementWithClassName('div', 'no-results-message'));
       noResults.textContent = loadTimeData.getString('noResults');
       this.resultDiv_.appendChild(resultsFragment);
       this.updateNavBar_();
       return;
     }
 
@@ skipping 23 matching lines @@
   }
   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.ALL_TIME ||
-      !this.model_.hasMoreResults();
+  if (!loadTimeData.getBoolean('isManagedProfile')) {
+    // Managed users have the control bar on top, don't show it on the bottom
+    // as well.
+    $('newest-button').hidden = this.pageIndex_ == 0;
+    $('newer-button').hidden = this.pageIndex_ == 0;
+    $('older-button').hidden =
+        this.model_.rangeInDays_ != HistoryModel.Range.ALL_TIME ||
+        !this.model_.hasMoreResults();
+  }
 };
 
 /**
  * Updates the visibility of the 'Clear browsing data' button.
  * Only used on mobile platforms.
  * @private
  */
 HistoryView.prototype.updateClearBrowsingDataButton_ = function() {
   // Ideally, we should hide the 'Clear browsing data' button whenever the
   // soft keyboard is visible. This is not possible, so instead, hide the
@@ skipping 20 matching lines @@
   this.view = view;
 
   if (typeof this.checker_ != 'undefined' && this.checker_) {
     clearInterval(this.checker_);
   }
 
   // TODO(glen): Replace this with a bound method so we don't need
   //     public model and view.
   this.checker_ = window.setInterval(function(stateObj) {
     var hashData = stateObj.getHashData();
-    var isGroupedByDomain = hashData.grouped == 'true';
     var page = parseInt(hashData.page, 10);
     var range = parseInt(hashData.range, 10);
     var offset = parseInt(hashData.offset, 10);
     if (hashData.q != stateObj.model.getSearchText() ||
         page != stateObj.view.getPage() ||
-        isGroupedByDomain != stateObj.view.model_.getGroupByDomain() ||
         range != stateObj.model.rangeInDays ||
         offset != stateObj.model.offset) {
-      stateObj.view.setPageState(hashData.q, page, isGroupedByDomain,
-                                 range, offset);
+      stateObj.view.setPageState(hashData.q, page, range, offset);
     }
   }, 50, this);
 }
 
 /**
  * Holds the singleton instance.
  */
 PageState.instance = null;
 
 /**
@@ skipping 21 matching lines @@
 
   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, offset) {
+PageState.prototype.setUIState = function(term, page, range, offset) {
   // Make sure the form looks pretty.
   $('search-field').value = term;
-  $('group-by-domain').checked = grouped;
   var hash = this.getHashData();
-  if (hash.q != term || hash.page != page || hash.grouped != grouped ||
-      hash.range != range || hash.offset != offset) {
-    window.location.hash = PageState.getHashString(
-        term, page, grouped, range, offset);
+  if (hash.q != term || hash.page != page || hash.range != range ||
+      hash.offset != offset) {
+    window.location.hash = PageState.getHashString(term, page, 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, offset) {
+PageState.getHashString = function(term, page, range, offset) {
   // Omit elements that are empty.
   var newHash = [];
 
   if (term)
     newHash.push('q=' + encodeURIComponent(term));
 
   if (page)
     newHash.push('page=' + page);
 
-  if (grouped)
-    newHash.push('grouped=' + grouped);
-
   if (range)
     newHash.push('range=' + range);
 
   if (offset)
     newHash.push('offset=' + offset);
 
   return newHash.join('&');
 };
 
 ///////////////////////////////////////////////////////////////////////////////
 // Document Functions:
 /**
  * Window onload handler, sets up the page.
  */
 function load() {
   uber.onContentFrameLoaded();
 
   var searchField = $('search-field');
 
   historyModel = new HistoryModel();
   historyView = new HistoryView(historyModel);
   pageState = new PageState(historyModel, historyView);
 
   // Create default view.
   var hashData = pageState.getHashData();
   var grouped = (hashData.grouped == 'true') || historyModel.getGroupByDomain();
   var page = parseInt(hashData.page, 10) || historyView.getPage();
   var range = parseInt(hashData.range, 10) || historyView.getRangeInDays();
   var offset = parseInt(hashData.offset, 10) || historyView.getOffset();
-  historyView.setPageState(hashData.q, page, grouped, range, offset);
+  historyView.setPageState(hashData.q, page, range, offset);
 
   if ($('overlay'))
     cr.ui.overlay.setupOverlay($('overlay'));
 
   var doSearch = function(e) {
-    // Disable the group by domain control when a search is active.
-    $('group-by-domain').disabled = (searchField.value != '');
     historyView.setSearch(searchField.value);
 
     if (isMobileVersion())
       searchField.blur();  // Dismiss the keyboard.
   };
 
   var mayRemoveVisits = loadTimeData.getBoolean('allowDeletingHistory');
   $('remove-visit').disabled = !mayRemoveVisits;
 
   if (mayRemoveVisits) {
     $('remove-visit').addEventListener('activate', function(e) {
       activeVisit.removeFromHistory();
       activeVisit = null;
     });
   }
 
   searchField.addEventListener('search', doSearch);
   $('search-button').addEventListener('click', doSearch);
 
   $('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('groupByDomain') ||
       loadTimeData.getBoolean('isManagedProfile')) {
+    // Hide the top container which has the "Clear browsing data" and "Remove
+    // selected entries" buttons since they're unavailable in managed mode
+    $('top-container').hidden = true;
+    $('history-page').classList.add('big-topbar-page');
     $('filter-controls').hidden = false;
   }
 
   var title = loadTimeData.getString('title');
   uber.invokeMethodOnParent('setTitle', {title: title});
 
   // Adjust the position of the notification bar when the window size changes.
   window.addEventListener('resize',
       historyView.positionNotificationBar.bind(historyView));
 
@@ skipping 19 matching lines @@
   } else {
     window.addEventListener('message', function(e) {
       if (e.data.method == 'frameSelected')
         searchField.focus();
     });
     searchField.focus();
   }
 }
 
 /**
- * Updates the whitelist status labels of a host/URL entry to the current
+ * Updates the managed filter status labels of a host/URL entry to the current
  * value.
  * @param {Element} statusElement The div which contains the status labels.
- * @param {Object} newStatus A dictionary with two entries:
- *     - |inContentPack|: whether the current domain/URL is allowed by a
- *     content pack.
- *     - |manualBehavior|: The manual status of the current domain/URL.
+ * @param {ManagedModeFilteringBehavior} newStatus The filter status of the
+ *     current domain/URL.
  */
 function updateHostStatus(statusElement, newStatus) {
-  var inContentPackDiv = statusElement.querySelector('.in-content-pack');
-  inContentPackDiv.className = 'in-content-pack';
-
-  if (newStatus['inContentPack']) {
-    if (newStatus['manualBehavior'] != ManagedModeManualBehavior.NONE)
-      inContentPackDiv.classList.add('in-content-pack-passive');
-    else
-      inContentPackDiv.classList.add('in-content-pack-active');
-  }
-
-  if ('manualBehavior' in newStatus) {
-    var manualBehaviorDiv = statusElement.querySelector('.manual-behavior');
-    // Reset to the base class first, then add modifier classes if needed.
-    manualBehaviorDiv.className = 'manual-behavior';
-    switch (newStatus['manualBehavior']) {
-    case ManagedModeManualBehavior.NONE:
-      manualBehaviorDiv.textContent = '';
-      break;
-    case ManagedModeManualBehavior.ALLOW:
-      manualBehaviorDiv.textContent = loadTimeData.getString('filterAllowed');
-      manualBehaviorDiv.classList.add('filter-allowed');
-      break;
-    case ManagedModeManualBehavior.BLOCK:
-      manualBehaviorDiv.textContent = loadTimeData.getString('filterBlocked');
-      manualBehaviorDiv.classList.add('filter-blocked');
-      break;
-    }
+  var filteringBehaviorDiv =
+      statusElement.querySelector('.filtering-behavior');
+  // Reset to the base class first, then add modifier classes if needed.
+  filteringBehaviorDiv.className = 'filtering-behavior';
+  if (newStatus == ManagedModeFilteringBehavior.BLOCK) {
+    filteringBehaviorDiv.textContent =
+        loadTimeData.getString('filterBlocked');
+    filteringBehaviorDiv.classList.add('filter-blocked');
+  } else {
+    filteringBehaviorDiv.textContent = '';
   }
 }
 
 /**
  * Click handler for the 'Clear browsing data' dialog.
  * @param {Event} e The click event.
  */
 function openClearBrowsingData(e) {
   chrome.send('clearBrowsingData');
 }
@@ skipping 219 matching lines @@
     innerArrow.classList.add('expand');
   } else {
     innerResultList.style.height = 0;
     innerArrow.classList.remove('expand');
     innerArrow.classList.add('collapse');
   }
 }
 
 /**
  * Builds the DOM elements to show the managed status of a domain/URL.
- * @param {ManagedModeManualBehavior} manualBehavior The manual behavior for
- *     this item.
- * @param {boolean} inContentPack Whether this element is in a content pack or
- *     not.
+ * @param {ManagedModeFilteringBehavior} filteringBehavior The filter behavior
+ *     for this item.
  * @return {Element} Returns the DOM elements which show the status.
  */
-function getManagedStatusDOM(manualBehavior, inContentPack) {
+function getManagedStatusDOM(filteringBehavior) {
   var filterStatusDiv = createElementWithClassName('div', 'filter-status');
-  var inContentPackDiv = createElementWithClassName('div', 'in-content-pack');
-  inContentPackDiv.textContent = loadTimeData.getString('inContentPack');
-  var manualBehaviorDiv = createElementWithClassName('div', 'manual-behavior');
-  filterStatusDiv.appendChild(inContentPackDiv);
-  filterStatusDiv.appendChild(manualBehaviorDiv);
+  var filteringBehaviorDiv =
+      createElementWithClassName('div', 'filtering-behavior');
+  filterStatusDiv.appendChild(filteringBehaviorDiv);
 
-  updateHostStatus(filterStatusDiv, {
-    'inContentPack' : inContentPack,
-    'manualBehavior' : manualBehavior
-  });
+  updateHostStatus(filterStatusDiv, filteringBehavior);
   return filterStatusDiv;
 }
 
 
 ///////////////////////////////////////////////////////////////////////////////
 // Chrome callbacks:
 
 /**
  * Our history system calls this function with results from searches.
  * @param {Object} info An object containing information about the query.
@@ skipping 28 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;
 });