Typecheck JS files for chrome://history

chrome/browser/resources/history/history.js

Index: chrome/browser/resources/history/history.js
diff --git a/chrome/browser/resources/history/history.js b/chrome/browser/resources/history/history.js
index 7b149c6933233863bba14139803dd7f48f46855d..5969e37e49e4def283b28c0f929180837e1c7528 100644
--- a/chrome/browser/resources/history/history.js
+++ b/chrome/browser/resources/history/history.js
@@ -38,12 +38,45 @@ var activeVisit = null;
  * supervised_user_url_filter.h.
  * @enum {number}
  */
-SupervisedUserFilteringBehavior = {
+var SupervisedUserFilteringBehavior = {
   ALLOW: 0,
   WARN: 1,
   BLOCK: 2
 };
 
+/**
+ * The type of the history result object. The definition is based on
+ * chrome/browser/ui/webui/history_ui.cc:
+ *     BrowsingHistoryHandler::HistoryEntry::ToValue()
+ * @typedef {{allTimestamps: Array.<Number>,

[Dan Beam, 2014/08/19 00:31:53]

Number -> number

[Vitaly Pavlenko, 2014/08/19 18:30:27]

Done.

+ *            blockedVisit: (boolean|undefined),
+ *            dateRelativeDay: (string|undefined),
+ *            dateShort: string,
+ *            dateTimeOfDay: (string|undefined),
+ *            deviceName: string,
+ *            deviceType: string,
+ *            domain: string,
+ *            hostFilteringBehavior: (number|undefined),
+ *            snippet: (string|undefined),
+ *            starred: boolean,
+ *            time: number,
+ *            title: string,
+ *            url: string}}
+ */
+var BackendHistoryResultObject;

[Dan Beam, 2014/08/19 00:31:53]

nit: HistoryEntry

[Vitaly Pavlenko, 2014/08/19 18:30:26]

Done.

+
+/**
+ * The type of the history results info object. The definition is based on
+ * chrome/browser/ui/webui/history_ui.cc:
+ *     BrowsingHistoryHandler::QueryComplete()
+ * @typedef {{finished: boolean,
+ *            hasSyncedResults: (boolean|undefined),
+ *            queryEndTime: string,
+ *            queryStartTime: string,
+ *            term: string}}
+ */
+var BackendHistoryResultsInfoObject;

[Dan Beam, 2014/08/19 00:31:53]

nit: HistoryQuery or HistoryQueryResult

[Vitaly Pavlenko, 2014/08/19 18:30:26]

Done.

+
 MenuButton.createDropDownArrows();
 
 /**
@@ -66,8 +99,8 @@ function recordUmaAction(actionDesc) {
  * Record a histogram value in UMA. If specified value is larger than the max
  * bucket value, record the value in the largest bucket.
  * @param {string} histogram The name of the histogram to be recorded in.
- * @param {integer} maxBucketValue The max value for the last histogram bucket.
- * @param {integer} value The value to record in the histogram.
+ * @param {number} maxBucketValue The max value for the last histogram bucket.
+ * @param {number} value The value to record in the histogram.
  */
 function recordUmaHistogram(histogram, maxBucketValue, value) {
   chrome.send('metricsHandler:recordInHistogram',
@@ -81,7 +114,8 @@ function recordUmaHistogram(histogram, maxBucketValue, value) {
 
 /**
  * Class to hold all the information about an entry in our model.
- * @param {Object} result An object containing the visit's data.
+ * @param {BackendHistoryResultObject} result An object containing the visit's
+ *     data.
  * @param {boolean} continued Whether this visit is on the same day as the
  *     visit before it.
  * @param {HistoryModel} model The model object this entry belongs to.
@@ -204,7 +238,8 @@ Visit.prototype.getResultDOM = function(propertyBag) {
   }
   entryBox.appendChild(bookmarkSection);
 
-  var visitEntryWrapper = entryBox.appendChild(document.createElement('div'));
+  var visitEntryWrapper = /** @type {HTMLDivElement} */(

[Dan Beam, 2014/08/19 00:31:53]

HTMLDivElement -> HTMLElement

[Vitaly Pavlenko, 2014/08/19 18:30:26]

Done.

+      entryBox.appendChild(document.createElement('div')));
   if (addTitleFavicon || this.blockedVisit)
     visitEntryWrapper.classList.add('visit-entry');
   if (this.blockedVisit) {
@@ -300,25 +335,25 @@ Visit.prototype.removeFromHistory = function() {
 };
 
 Object.defineProperty(Visit.prototype, 'checkBox', {
-  get: function() {
+  get: /** @this {Visit} */function() {

[Dan Beam, 2014/08/19 00:31:53]

can you add a comment to the github issue about implementing defineProperties
support?

[Vitaly Pavlenko, 2014/08/19 18:30:27]

Done.

     return this.domNode_.querySelector('input[type=checkbox]');
   },
 });
 
 Object.defineProperty(Visit.prototype, 'bookmarkStar', {
-  get: function() {
+  get: /** @this {Visit} */function() {
     return this.domNode_.querySelector('.bookmark-section.starred');
   },
 });
 
 Object.defineProperty(Visit.prototype, 'titleLink', {
-  get: function() {
+  get: /** @this {Visit} */function() {
     return this.domNode_.querySelector('.title a');
   },
 });
 
 Object.defineProperty(Visit.prototype, 'dropDown', {
-  get: function() {
+  get: /** @this {Visit} */function() {
     return this.domNode_.querySelector('button.drop-down');
   },
 });
@@ -560,8 +595,9 @@ HistoryModel.prototype.requestPage = function(page) {
 
 /**
  * Receiver for history query.
- * @param {Object} info An object containing information about the query.
- * @param {Array} results A list of results.
+ * @param {BackendHistoryResultsInfoObject} info An object containing
+ *     information about the query.
+ * @param {Array.<BackendHistoryResultObject>} results A list of results.
  */
 HistoryModel.prototype.addResults = function(info, results) {
   // If no requests are in flight then this was an old request so we drop the
@@ -623,7 +659,7 @@ HistoryModel.prototype.hasMoreResults = function() {
 /**
  * Removes a list of visits from the history, and calls |callback| when the
  * removal has successfully completed.
- * @param {Array<Visit>} visits The visits to remove.
+ * @param {Array.<Visit>} visits The visits to remove.
  * @param {Function} callback The function to call after removal succeeds.
  */
 HistoryModel.prototype.removeVisitsFromHistory = function(visits, callback) {
@@ -657,10 +693,10 @@ HistoryModel.prototype.deleteComplete = function() {
 
 // Getter and setter for HistoryModel.rangeInDays_.
 Object.defineProperty(HistoryModel.prototype, 'rangeInDays', {
-  get: function() {
+  get: /** @this {HistoryModel} */function() {
     return this.rangeInDays_;
   },
-  set: function(range) {
+  set: /** @this {HistoryModel} */function(range) {
     this.rangeInDays_ = range;
   }
 });
@@ -673,17 +709,17 @@ Object.defineProperty(HistoryModel.prototype, 'rangeInDays', {
  * calendar month, 1 to the previous one, etc.
  */
 Object.defineProperty(HistoryModel.prototype, 'offset', {
-  get: function() {
+  get: /** @this {HistoryModel} */function() {
     return this.offset_;
   },
-  set: function(offset) {
+  set: /** @this {HistoryModel} */function(offset) {
     this.offset_ = offset;
   }
 });
 
 // Setter for HistoryModel.requestedPage_.
 Object.defineProperty(HistoryModel.prototype, 'requestedPage', {
-  set: function(page) {
+  set: /** @this {HistoryModel} */function(page) {
     this.requestedPage_ = page;
   }
 });
@@ -821,7 +857,10 @@ HistoryModel.prototype.getGroupByDomain = function() {
 ///////////////////////////////////////////////////////////////////////////////
 // HistoryFocusObserver:
 
-/** @implements {cr.ui.FocusRow.Observer} */
+/**
+ * @constructor
+ * @implements {cr.ui.FocusRow.Observer}
+ */
 function HistoryFocusObserver() {}
 
 HistoryFocusObserver.prototype = {
@@ -897,7 +936,8 @@ function HistoryView(model) {
 
   var handleRangeChange = function(e) {
     // Update the results and save the last state.

[Dan Beam, 2014/08/19 00:31:53]

nit: assuming this the same as your code, splitting into a var helps with
readability, I'd say:

var value = parseInt(e.target.value, 10);
self.setRangeInDays(/** @type {HistoryModel.Range.<number>} */(value));

[Vitaly Pavlenko, 2014/08/19 18:30:26]

Done.

-    self.setRangeInDays(parseInt(e.target.value, 10));
+    self.setRangeInDays(/** @type {HistoryModel.Range.<number>} */(
+        parseInt(e.target.value, 10)));
   };
 
   // Add handlers for the range options.
@@ -995,7 +1035,8 @@ HistoryView.prototype.getPage = function() {
 
 /**
  * Set the current range for grouped results.
- * @param {string} range The number of days to which the range should be set.
+ * @param {HistoryModel.Range} 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.
@@ -1004,7 +1045,7 @@ HistoryView.prototype.setRangeInDays = function(range) {
 
 /**
  * Get the current range in days.
- * @return {number} Current range in days from the model.
+ * @return {HistoryModel.Range} Current range in days from the model.
  */
 HistoryView.prototype.getRangeInDays = function() {
   return this.model_.rangeInDays;
@@ -1362,15 +1403,15 @@ HistoryView.prototype.groupVisitsByDomain_ = function(visits, results) {
 /**
  * Adds the results for a month.
  * @param {Array} visits Visits returned by the query.
- * @param {Element} parentElement Element to which to add the results to.
+ * @param {Node} parentNode Node to which to add the results to.
  * @private
  */
-HistoryView.prototype.addMonthResults_ = function(visits, parentElement) {
+HistoryView.prototype.addMonthResults_ = function(visits, parentNode) {
   if (visits.length == 0)
     return;
 
-  var monthResults = parentElement.appendChild(
-      createElementWithClassName('ol', 'month-results'));
+  var monthResults = /** @type {HTMLOListElement} */(parentNode.appendChild(
+      createElementWithClassName('ol', 'month-results')));
   // Don't add checkboxes if entries can not be edited.
   if (!this.model_.editingEntriesAllowed)
     monthResults.classList.add('no-checkboxes');
@@ -1382,22 +1423,22 @@ HistoryView.prototype.addMonthResults_ = function(visits, parentElement) {
  * 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.
+ * @param {Node} parentNode Node to which to add the results to.
  * @private
  */
-HistoryView.prototype.addDayResults_ = function(visits, parentElement) {
+HistoryView.prototype.addDayResults_ = function(visits, parentNode) {
   if (visits.length == 0)
     return;
 
   var firstVisit = visits[0];
-  var day = parentElement.appendChild(createElementWithClassName('h3', 'day'));
+  var day = parentNode.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'));
+  var dayResults = /** @type {HTMLOListElement} */(parentNode.appendChild(

[Dan Beam, 2014/08/19 00:31:53]

HTMLElement unless you actually use the derived class' interface (e.g.
HTMLSelectElement#options or HTMLInputElement#type)

[Vitaly Pavlenko, 2014/08/19 18:30:26]

Done.

+      createElementWithClassName('ol', 'day-results')));
 
   // Don't add checkboxes if entries can not be edited.
   if (!this.model_.editingEntriesAllowed)
@@ -1426,7 +1467,7 @@ HistoryView.prototype.addDayResults_ = function(visits, parentElement) {
 /**
  * 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
+ * @param {Node} resultsFragment The element to which the interval will be
  *     added to.
  * @private
  */
@@ -1526,7 +1567,7 @@ HistoryView.prototype.displayResults_ = function(doneLoading) {
           ++dayEnd;
 
         this.addDayResults_(
-            results.slice(dayStart, dayEnd), resultsFragment, groupByDomain);
+            results.slice(dayStart, dayEnd), resultsFragment);
       }
     }
 
@@ -1535,7 +1576,7 @@ HistoryView.prototype.displayResults_ = function(doneLoading) {
   }
   // After the results have been added to the DOM, determine the size of the
   // time column.
-  this.setTimeColumnWidth_(this.resultDiv_);
+  this.setTimeColumnWidth_();
 };
 
 var focusGridRowSelector = [
@@ -1629,11 +1670,12 @@ HistoryView.prototype.setTimeColumnWidth_ = function() {
 
 /**
  * Toggles an element in the grouped history.
- * @param {Element} e The element which was clicked on.
+ * @param {Event} e The event with element |e.target| which was clicked on.
  * @private
  */
 HistoryView.prototype.toggleGroupedVisits_ = function(e) {
-  var entry = findAncestorByClass(e.target, 'site-entry');
+  var entry = findAncestorByClass(/** @type {Element} */(e.target),
+                                  'site-entry');
   var innerResultList = entry.querySelector('.site-results');
 
   if (entry.classList.contains('expand')) {
@@ -1786,7 +1828,8 @@ function load() {
   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 range = /** @type {HistoryModel.Range} */(parseInt(hashData.range, 10)) ||
+      historyView.getRangeInDays();
   var offset = parseInt(hashData.offset, 10) || historyView.getOffset();
   historyView.setPageState(hashData.q, page, range, offset);
 
@@ -1860,6 +1903,7 @@ function load() {
     $('history-page').appendChild($('clear-browsing-data'));
   } else {
     window.addEventListener('message', function(e) {
+      e = /** @type{!MessageEvent.<!{method: string}>} */(e);

[Dan Beam, 2014/08/19 00:31:53]

@type {

[Vitaly Pavlenko, 2014/08/19 18:30:27]

Done.

       if (e.data.method == 'frameSelected')
         searchField.focus();
     });
@@ -1933,9 +1977,9 @@ function hideConfirmationOverlay() {
 /**
  * Shows the confirmation alert for history deletions and permits browser tests
  * to override the dialog.
- * @param {function=} okCallback A function to be called when the user presses
+ * @param {function()=} okCallback A function to be called when the user presses
  *     the ok button.
- * @param {function=} cancelCallback A function to be called when the user
+ * @param {function()=} cancelCallback A function to be called when the user
  *     presses the cancel button.
  */
 function confirmDeletion(okCallback, cancelCallback) {
@@ -2021,7 +2065,8 @@ function removeItems() {
  * @param {Event} e The click event.
  */
 function checkboxClicked(e) {
-  handleCheckboxStateChange(e.currentTarget, e.shiftKey);
+  handleCheckboxStateChange(/** @type {!HTMLInputElement} */(e.currentTarget),
+                            e.shiftKey);
 }
 
 /**
@@ -2041,10 +2086,10 @@ function handleCheckboxStateChange(checkbox, shiftKey) {
     var begin = Math.min(id, selectionAnchor);
     var end = Math.max(id, selectionAnchor);
     for (var i = begin; i <= end; i++) {
-      var checkbox = document.querySelector('#checkbox-' + i);
-      if (checkbox) {
-        checkbox.checked = checked;
-        updateParentCheckbox(checkbox);
+      var ithCheckbox = document.querySelector('#checkbox-' + i);
+      if (ithCheckbox) {
+        ithCheckbox.checked = checked;
+        updateParentCheckbox(ithCheckbox);
       }
     }
   }
@@ -2059,7 +2104,8 @@ function handleCheckboxStateChange(checkbox, shiftKey) {
  * @param {Event} e The click event.
  */
 function domainCheckboxClicked(e) {
-  var siteEntry = findAncestorByClass(e.currentTarget, 'site-entry');
+  var siteEntry = findAncestorByClass(/** @type {Element} */(e.currentTarget),
+                                      'site-entry');
   var checkboxes =
       siteEntry.querySelectorAll('.site-results input[type=checkbox]');
   for (var i = 0; i < checkboxes.length; i++)
@@ -2096,9 +2142,10 @@ function entryBoxMousedown(event) {
 
 /**
  * Handle click event for entryBox labels.
- * @param {!MouseEvent} event A click event.
+ * @param {!Event} event A click event.
  */
 function entryBoxClick(event) {
+  event = /** @type {!MouseEvent} */(event);
   // Do nothing if a bookmark star is clicked.
   if (event.defaultPrevented)
     return;
@@ -2173,8 +2220,9 @@ function getFilteringStatusDOM(filteringBehavior) {
 
 /**
  * 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.
+ * @param {BackendHistoryResultsInfoObject} info An object containing
+ *     information about the query.
+ * @param {Array.<BackendHistoryResultObject>} results A list of results.
  */
 function historyResult(info, results) {
   historyModel.addResults(info, results);