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 (used by a managed user).
+  this.hostFilteringBehavior = result.hostFilteringBehavior ||
+                               ManagedModeFilteringBehavior.ALLOW;
   this.blockedVisit = result.blockedVisit || false;
 
   // Whether this is the continuation of a previous day.
   this.continued = continued;
 
   this.allTimestamps = result.allTimestamps;
 }
 
 // Visit, public: -------------------------------------------------------------
 
@@ skipping 48 matching lines @@
   entryBox.appendChild(time);
   var titleAndDomainWrapper = entryBox.appendChild(
       createElementWithClassName('div', 'title-and-domain'));
   if (this.blockedVisit) {
     titleAndDomainWrapper.classList.add('blocked-indicator');
     titleAndDomainWrapper.appendChild(this.getVisitAttemptDOM_());
   } else {
     titleAndDomainWrapper.appendChild(this.getTitleDOM_());
     if (addTitleFavicon)
       this.addFaviconToElement_(titleAndDomainWrapper);
+    else
+      titleAndDomainWrapper.classList.remove('title-and-domain');

[markusheintz_, 2013/06/05 14:49:09]

A)
Instead of removing it. Maybe you don't add it in first place?

e.g. in line 151:
var titleAndDomainWrapper = entryBox.appendChild(
    addTitleFavicon ? createElementWithClassName('div', 'title-and-
domain')	           
                    : createElement('div'));

B)
or you can also add the class name in line 158 and line 154. This means that you
have to add it twice.



The root cause of this is that the class name is bad: 'title-and-domain'. It
should be rather 'favicon' or 'had-icon' or something like this, since you seem
to only need it if there is an icon used.



I guess this makes it easier to follow the code. WDYT?

[Sergiu, 2013/06/05 20:18:42]

I agree, see what you think now of the new names and structure.

+    titleAndDomainWrapper.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 94 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 237 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);
+  var groupedByDomain = (range == HistoryModel.Range.ALL_TIME) ? false : true;
+  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 inteval, 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')) {
-    $('filter-controls').hidden = false;
+    // 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;
+    $('page').classList.add('big-topbar-page');
+  } else {
+    $('filter-controls').hidden = true;

[markusheintz_, 2013/06/05 14:14:15]

Just for the record since we already discussed this offline:
Maybe it is better to to it the other way around and display the filter controls
only if in managed mode instead of hiding them for normal mode. I assume that
normal mode will still be the more common case.

   }
 
   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));
 
   if (isMobileVersion()) {
@@ skipping 18 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

[markusheintz_, 2013/06/05 14:49:09]

Just to double check so that I don't misunderstand this: All support for content
packs is removed for now. Right?

- *     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;
 });