history: announce search/time ranges.

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">
 <include src="history_focus_manager.js">
 
 ///////////////////////////////////////////////////////////////////////////////
 // Globals:
 /** @const */ var RESULTS_PER_PAGE = 150;
@@ skipping 1293 matching lines @@
 /**
  * Clear the results in the view.  Since we add results piecemeal, we need
  * to clear them out when we switch to a new page or reload.
  * @private
  */
 HistoryView.prototype.clear_ = function() {
   var alertOverlay = $('alertOverlay');
   if (alertOverlay && alertOverlay.classList.contains('showing'))
     hideConfirmationOverlay();
 
-  this.resultDiv_.textContent = '';
+  // Remove everything but <h3 id="results-header"> (the first child).
+  while (this.resultDiv_.children.length > 1) {
+    this.resultDiv_.removeChild(this.resultDiv_.lastElementChild);
+  }
+  $('results-header').textContent = '';
 
   this.currentVisits_.forEach(function(visit) {
     visit.isRendered = false;
   });
   this.currentVisits_ = [];
 
   document.body.classList.remove('has-results');
 };
 
 /**
@@ skipping 241 matching lines @@
   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');

[Dan Beam, 2014/11/20 03:32:22]

one of the reasons why VoiceOver doesn't read this <h3> is that it's dynamically
added:
http://jsfiddle.net/s4176eh5/ doesn't work in Safari
http://jsfiddle.net/s4176eh5/1/ works in Safari

however, when I moved this <h3> to the HTML (so it's always in the DOM)
VoiceOver still doesn't read it 99% of the time (sometimes is does, seems like a
race somewhere...).

for now, should I replace aria-{controls,live} with:

  announceAccessibleMessage($('results-header').textContent);

(more or less) as it works in all screenreaders?

-      header.textContent = loadTimeData.getStringF('searchResultsFor',
-                                                   searchText);
-      this.resultDiv_.appendChild(header);
+    var headerText;
+    if (!doneLoading) {
+      headerText = loadTimeData.getStringF('searchResultsFor', searchText);
+    } else if (results.length == 0) {
+      headerText = loadTimeData.getString('noSearchResults');
+    } else {
+      var resultId = results.length == 1 ? 'searchResult' : 'searchResults';
+      headerText = loadTimeData.getStringF('foundSearchResults',
+                                           results.length,
+                                           loadTimeData.getString(resultId),
+                                           searchText);
     }
+    $('results-header').textContent = headerText;
 
     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 {
+    if (doneLoading) {
       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();
 
     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);
+    var noResults = results.length == 0 && doneLoading;
+    $('results-header').textContent = noResults ?
+        loadTimeData.getString('noResults') : '';
+
+    if (noResults)
       return;
-    }
 
     if (this.getRangeInDays() == HistoryModel.Range.MONTH &&
         groupByDomain) {
       // Group everything together in the month view.
       this.addMonthResults_(results, resultsFragment);
     } else {
       var dayStart = 0;
       var dayEnd = 0;
       // Go through all of the visits and process them in chunks of one day.
       while (dayEnd < results.length) {
@@ skipping 691 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;
 });