Compile chrome://settings, part 2: reduce from 950 to 400 errors

R=dbeam@chromium.org
BUG=393873
TEST=GYP_GENERATORS=ninja gyp --depth . chrome/browser/resources/options/compiled_resources.gyp && ninja -C out/Default | grep ERROR | wc -l

Review URL: https://codereview.chromium.org/543493002

Cr-Commit-Position: refs/heads/master@{#294690}

68 files changed, 337 insertions, 257 deletions

diff --git a/chrome/browser/resources/chromeos/user_images_grid.js b/chrome/browser/resources/chromeos/user_images_grid.js
index c89d159f..6bbc5a5 100644
--- a/chrome/browser/resources/chromeos/user_images_grid.js
+++ b/chrome/browser/resources/chromeos/user_images_grid.js
@@ -26,9 +26,10 @@ cr.define('options', function() {
 
   /**
    * Creates a new user images grid item.
-   * @param {{url: string, title: string=, decorateFn: function=,
-   *     clickHandler: function=}} imageInfo User image URL, optional title,
-   *     decorator callback and click handler.
+   * @param {{url: string, title: (string|undefined),
+   *     decorateFn: (!Function|undefined),
+   *     clickHandler: (!Function|undefined)}} imageInfo User image URL,
+   *     optional title, decorator callback and click handler.
    * @constructor
    * @extends {cr.ui.GridItem}
    */
@@ -241,7 +242,7 @@ cr.define('options', function() {
      * Handles successful camera check.
      * @param {function(): boolean} onAvailable Callback to call. If it returns
      *     |true|, capture is started immediately.
-     * @param {MediaStream} stream Stream object as returned by getUserMedia.
+     * @param {!MediaStream} stream Stream object as returned by getUserMedia.
      * @private
      */
     handleCameraAvailable_: function(onAvailable, stream) {
@@ -312,7 +313,7 @@ cr.define('options', function() {
     /**
      * Current image captured from camera as data URL. Setting to null will
      * return to the live camera stream.
-     * @type {string=}
+     * @type {(string|undefined)}
      */
     get cameraImage() {
       return this.cameraImage_;
@@ -460,7 +461,8 @@ cr.define('options', function() {
     takePhoto: function() {
       if (!this.cameraOnline)
         return false;
-      var canvas = document.createElement('canvas');
+      var canvas = /** @type {HTMLCanvasElement} */(
+          document.createElement('canvas'));
       canvas.width = CAPTURE_SIZE.width;
       canvas.height = CAPTURE_SIZE.height;
       this.captureFrame_(
@@ -591,7 +593,7 @@ cr.define('options', function() {
           imageIndex,
           imageInfo.decorateFn);
       // Update image data with the reset of the keys from the old data.
-      for (k in imageInfo) {
+      for (var k in imageInfo) {
         if (!(k in newInfo))
           newInfo[k] = imageInfo[k];
       }
diff --git a/chrome/browser/resources/options/autofill_edit_address_overlay.js b/chrome/browser/resources/options/autofill_edit_address_overlay.js
index 2ecbea3..f81bb94 100644
--- a/chrome/browser/resources/options/autofill_edit_address_overlay.js
+++ b/chrome/browser/resources/options/autofill_edit_address_overlay.js
@@ -10,7 +10,8 @@ cr.define('options', function() {
   /**
    * AutofillEditAddressOverlay class
    * Encapsulated handling of the 'Add Page' overlay page.
-   * @class
+   * @constructor
+   * @extends {cr.ui.pageManager.Page}
    */
   function AutofillEditAddressOverlay() {
     Page.call(this, 'autofillEditAddress',
@@ -206,7 +207,7 @@ cr.define('options', function() {
 
     /**
      * Sets the value of each input field according to |address|.
-     * @param {object} address The object with values to use.
+     * @param {Object} address The object with values to use.
      * @private
      */
     setInputFields_: function(address) {
diff --git a/chrome/browser/resources/options/autofill_edit_creditcard_overlay.js b/chrome/browser/resources/options/autofill_edit_creditcard_overlay.js
index 5f1091c..3a77590 100644
--- a/chrome/browser/resources/options/autofill_edit_creditcard_overlay.js
+++ b/chrome/browser/resources/options/autofill_edit_creditcard_overlay.js
@@ -127,7 +127,7 @@ cr.define('options', function() {
       expirationYear.options.length = 0;
 
       var date = new Date();
-      var year = parseInt(date.getFullYear());
+      var year = parseInt(date.getFullYear(), 10);
       for (var i = 0; i < 10; ++i) {
         var text = year + i;
         var option = document.createElement('option');
@@ -170,7 +170,7 @@ cr.define('options', function() {
 
       expYear = creditCard.expirationYear;
       var date = new Date();
-      var year = parseInt(date.getFullYear());
+      var year = parseInt(date.getFullYear(), 10);
       for (var i = 0; i < 10; ++i) {
         var text = year + i;
         if (expYear == String(text))
diff --git a/chrome/browser/resources/options/autofill_options.js b/chrome/browser/resources/options/autofill_options.js
index 2507c24..8d7bd0f 100644
--- a/chrome/browser/resources/options/autofill_options.js
+++ b/chrome/browser/resources/options/autofill_options.js
@@ -27,14 +27,14 @@ cr.define('options', function() {
 
     /**
      * The address list.
-     * @type {DeletableItemList}
+     * @type {options.DeletableItemList}
      * @private
      */
     addressList_: null,
 
     /**
      * The credit card list.
-     * @type {DeletableItemList}
+     * @type {options.DeletableItemList}
      * @private
      */
     creditCardList_: null,
diff --git a/chrome/browser/resources/options/autofill_options_list.js b/chrome/browser/resources/options/autofill_options_list.js
index 8fd7fdb..aa3198d 100644
--- a/chrome/browser/resources/options/autofill_options_list.js
+++ b/chrome/browser/resources/options/autofill_options_list.js
@@ -8,6 +8,9 @@ cr.define('options.autofillOptions', function() {
   /** @const */ var InlineEditableItem = options.InlineEditableItem;
   /** @const */ var InlineEditableItemList = options.InlineEditableItemList;
 
+  /**
+   * @return {!HTMLButtonElement}
+   */
   function AutofillEditProfileButton(guid, edit) {
     var editButtonEl = document.createElement('button');
     editButtonEl.className = 'list-inline-button custom-appearance';
@@ -55,7 +58,7 @@ cr.define('options.autofillOptions', function() {
       this.contentElement.appendChild(label);
 
       // The 'Edit' button.
-      var editButtonEl = new AutofillEditProfileButton(
+      var editButtonEl = AutofillEditProfileButton(
         this.guid,
         AutofillOptions.loadAddressEditor);
       this.contentElement.appendChild(editButtonEl);
@@ -100,7 +103,7 @@ cr.define('options.autofillOptions', function() {
       this.contentElement.appendChild(icon);
 
       // The 'Edit' button.
-      var editButtonEl = new AutofillEditProfileButton(
+      var editButtonEl = AutofillEditProfileButton(
         this.guid,
         AutofillOptions.loadCreditCardEditor);
       this.contentElement.appendChild(editButtonEl);
@@ -219,8 +222,9 @@ cr.define('options.autofillOptions', function() {
 
   /**
    * Creates a new name value list item.
-   * @param {AutofillNameValuesList} list The parent list of this item.
-   * @param {array} entry An array of [first, middle, last] names.
+   * @param {options.autofillOptions.AutofillNameValuesList} list The parent
+   *     list of this item.
+   * @param {Array.<string>} entry An array of [first, middle, last] names.
    * @constructor
    * @extends {options.ValuesListItem}
    */
diff --git a/chrome/browser/resources/options/browser_options.js b/chrome/browser/resources/options/browser_options.js
index 77ecd44..c67ef90 100644
--- a/chrome/browser/resources/options/browser_options.js
+++ b/chrome/browser/resources/options/browser_options.js
@@ -1130,7 +1130,7 @@ cr.define('options', function() {
 
    /**
     * Shows the autoLaunch preference and initializes its checkbox value.
-    * @param {bool} enabled Whether autolaunch is enabled or or not.
+    * @param {boolean} enabled Whether autolaunch is enabled or or not.
     * @private
     */
     updateAutoLaunchState_: function(enabled) {
@@ -1513,9 +1513,10 @@ cr.define('options', function() {
     /**
      * Set network prediction checkbox value.
      *
-     * @param {Object} pref Information about network prediction options.
-     * @param {number} pref.value The value of network prediction options.
-     * @param {boolean} pref.disabled If the pref is not user modifiable.
+     * @param {{value: number, disabled: boolean}} pref Information about
+     *     network prediction options. |pref.value| is the value of network
+     *     prediction options. |pref.disabled| shows if the pref is not user
+     *     modifiable.
      * @private
      */
     setNetworkPredictionValue_: function(pref) {
@@ -1533,11 +1534,12 @@ cr.define('options', function() {
      * Set the font size selected item. This item actually reflects two
      * preferences: the default font size and the default fixed font size.
      *
-     * @param {Object} pref Information about the font size preferences.
-     * @param {number} pref.value The value of the default font size pref.
-     * @param {boolean} pref.disabled True if either pref not user modifiable.
-     * @param {string} pref.controlledBy The source of the pref value(s) if
-     *     either pref is currently not controlled by the user.
+     * @param {{value: number, disabled: boolean, controlledBy: string}} pref
+     *     Information about the font size preferences. |pref.value| is the
+     *     value of the default font size pref. |pref.disabled| is true if
+     *     either pref not user modifiable. |pref.controlledBy| is the source of
+     *     the pref value(s) if either pref is currently not controlled by the
+     *     user.
      * @private
      */
     setFontSize_: function(pref) {
diff --git a/chrome/browser/resources/options/browser_options_profile_list.js b/chrome/browser/resources/options/browser_options_profile_list.js
index 515d38d..87542ae 100644
--- a/chrome/browser/resources/options/browser_options_profile_list.js
+++ b/chrome/browser/resources/options/browser_options_profile_list.js
@@ -11,7 +11,7 @@ cr.define('options.browser_options', function() {
    * Creates a new profile list item.
    * @param {Object} profileInfo The profile this item represents.
    * @constructor
-   * @extends {cr.ui.DeletableItem}
+   * @extends {options.DeletableItem}
    */
   function ProfileListItem(profileInfo) {
     var el = cr.doc.createElement('div');
diff --git a/chrome/browser/resources/options/certificate_import_error_overlay.js b/chrome/browser/resources/options/certificate_import_error_overlay.js
index 48fd899..2e29185 100644
--- a/chrome/browser/resources/options/certificate_import_error_overlay.js
+++ b/chrome/browser/resources/options/certificate_import_error_overlay.js
@@ -44,10 +44,10 @@ cr.define('options', function() {
     $('certificateImportErrorOverlayTitle').textContent = title;
     $('certificateImportErrorOverlayMessage').textContent = message;
 
-    ul = $('certificateImportErrorOverlayCertErrors');
+    var ul = $('certificateImportErrorOverlayCertErrors');
     ul.innerHTML = '';
     for (var i = 0; i < certErrors.length; ++i) {
-      li = document.createElement('li');
+      var li = document.createElement('li');
       li.textContent = loadTimeData.getStringF('certificateImportErrorFormat',
                                                certErrors[i].name,
                                                certErrors[i].error);
diff --git a/chrome/browser/resources/options/certificate_manager.js b/chrome/browser/resources/options/certificate_manager.js
index 9a78954..8b8287a 100644
--- a/chrome/browser/resources/options/certificate_manager.js
+++ b/chrome/browser/resources/options/certificate_manager.js
@@ -14,6 +14,7 @@ cr.define('options', function() {
    * blah
    * @param {!string} id The id of this tab.
    * @param {boolean} isKiosk True if dialog is shown during CrOS kiosk launch.
+   * @constructor
    */
   function CertificateManagerTab(id, isKiosk) {
     this.tree = $(id + '-tree');
@@ -169,6 +170,7 @@ cr.define('options', function() {
   /**
    * Encapsulated handling of ChromeOS accounts options page.
    * @constructor
+   * @extends {cr.ui.pageManager.Page}
    */
   function CertificateManager(model) {
     Page.call(this, 'certificates',
diff --git a/chrome/browser/resources/options/chromeos/accounts_options.js b/chrome/browser/resources/options/chromeos/accounts_options.js
index 4b80afc..3524861 100644
--- a/chrome/browser/resources/options/chromeos/accounts_options.js
+++ b/chrome/browser/resources/options/chromeos/accounts_options.js
@@ -12,6 +12,7 @@ cr.define('options', function() {
   /**
    * Encapsulated handling of ChromeOS accounts options page.
    * @constructor
+   * @extends {cr.ui.pageManager.Page}
    */
   function AccountsOptions(model) {
     Page.call(this, 'accounts', loadTimeData.getString('accountsPageTabTitle'),
diff --git a/chrome/browser/resources/options/chromeos/accounts_user_list.js b/chrome/browser/resources/options/chromeos/accounts_user_list.js
index 419ab3b..6288de4 100644
--- a/chrome/browser/resources/options/chromeos/accounts_user_list.js
+++ b/chrome/browser/resources/options/chromeos/accounts_user_list.js
@@ -98,7 +98,6 @@ cr.define('options.accounts', function() {
 
   /**
    * Whether the user list is disabled. Only used for display purpose.
-   * @type {boolean}
    */
   cr.defineProperty(UserList, 'disabled', cr.PropertyKind.BOOL_ATTR);
 
diff --git a/chrome/browser/resources/options/chromeos/accounts_user_name_edit.js b/chrome/browser/resources/options/chromeos/accounts_user_name_edit.js
index 88d2878..f26a3b6 100644
--- a/chrome/browser/resources/options/chromeos/accounts_user_name_edit.js
+++ b/chrome/browser/resources/options/chromeos/accounts_user_name_edit.js
@@ -67,7 +67,8 @@ cr.define('options.accounts', function() {
      *       more times in a row.)
      *
      * @param {string} str A string to parse.
-     * @return {{name: string, email: string}} User info parsed from the string.
+     * @return {?{name: string, email: string}} User info parsed from the
+     *     string.
      */
     parse: function(str) {
       /** @const */ var format1 = new RegExp(format1String);
diff --git a/chrome/browser/resources/options/chromeos/bluetooth_add_device_overlay.js b/chrome/browser/resources/options/chromeos/bluetooth_add_device_overlay.js
index fc9a8f6..5eac144 100644
--- a/chrome/browser/resources/options/chromeos/bluetooth_add_device_overlay.js
+++ b/chrome/browser/resources/options/chromeos/bluetooth_add_device_overlay.js
@@ -9,6 +9,7 @@ cr.define('options', function() {
   /**
    * Encapsulated handling of the Bluetooth options page.
    * @constructor
+   * @extends {cr.ui.pageManager.Page}
    */
   function BluetoothOptions() {
     Page.call(this, 'bluetooth',
diff --git a/chrome/browser/resources/options/chromeos/bluetooth_device_list.js b/chrome/browser/resources/options/chromeos/bluetooth_device_list.js
index ede390f..a7cadb83 100644
--- a/chrome/browser/resources/options/chromeos/bluetooth_device_list.js
+++ b/chrome/browser/resources/options/chromeos/bluetooth_device_list.js
@@ -21,10 +21,10 @@ cr.define('options.system.bluetooth', function() {
    *          connected: boolean,
    *          connecting: boolean,
    *          connectable: boolean,
-   *          pairing: string|undefined,
-   *          passkey: number|undefined,
-   *          pincode: string|undefined,
-   *          entered: number|undefined}} device
+   *          pairing: (string|undefined),
+   *          passkey: (number|undefined),
+   *          pincode: (string|undefined),
+   *          entered: (number|undefined)}} device
    *    Description of the Bluetooth device.
    * @constructor
    * @extends {options.DeletableItem}
@@ -112,7 +112,7 @@ cr.define('options.system.bluetooth', function() {
     /**
      * Width of a list entry in px.
      * @type {number}
-     * @private.
+     * @private
      */
     itemWidth_: 400,
 
@@ -260,9 +260,9 @@ cr.define('options.system.bluetooth', function() {
     /**
      * Override the default implementation to return a predetermined size,
      * which in turns allows proper layout of items even if the list is hidden.
-     * @return {height: number, width: number} Dimensions of a single item in
+     * @return {{height: number, width: number}} Dimensions of a single item in
      *     the list of bluetooth device.
-     * @private.
+     * @private
      */
     getDefaultItemSize_: function() {
       return {
diff --git a/chrome/browser/resources/options/chromeos/bluetooth_pair_device_overlay.js b/chrome/browser/resources/options/chromeos/bluetooth_pair_device_overlay.js
index 7fa1a73..f8bfa60 100644
--- a/chrome/browser/resources/options/chromeos/bluetooth_pair_device_overlay.js
+++ b/chrome/browser/resources/options/chromeos/bluetooth_pair_device_overlay.js
@@ -42,6 +42,7 @@ cr.define('options', function() {
   /**
    * Encapsulated handling of the Bluetooth device pairing page.
    * @constructor
+   * @extends {cr.ui.pageManager.Page}
    */
   function BluetoothPairing() {
     Page.call(this, 'bluetoothPairing',
@@ -62,10 +63,10 @@ cr.define('options', function() {
      *         connected: boolean,
      *         connecting: boolean,
      *         connectable: boolean,
-     *         pairing: string|undefined,
-     *         passkey: number|undefined,
-     *         pincode: string|undefined,
-     *         entered: number|undefined}}
+     *         pairing: (string|undefined),
+     *         passkey: (number|undefined),
+     *         pincode: (string|undefined),
+     *         entered: (number|undefined)}}
      * @private
      */
     device_: null,
@@ -170,7 +171,7 @@ cr.define('options', function() {
      */
     update: function(device) {
       this.device_ = {};
-      for (key in device)
+      for (var key in device)
         this.device_[key] = device[key];
       // Update the pairing instructions.
       var instructionsEl = $('bluetooth-pairing-instructions');
@@ -330,9 +331,9 @@ cr.define('options', function() {
 
   /**
    * Displays a message from the Bluetooth adapter.
-   * @param {Object} data Data for constructing the message.
-   * @param {string} data.message Name of message to show.
-   * @param {string} data.address Device address.
+   * @param {{message: string, address: string}} data Data for constructing the
+   *     message. |data.message| is the name of message to show. |data.address|
+   *     is the device address.
    */
   BluetoothPairing.showMessage = function(data) {
     var name = data.address;
diff --git a/chrome/browser/resources/options/chromeos/change_picture_options.js b/chrome/browser/resources/options/chromeos/change_picture_options.js
index e41e504..678b95d 100644
--- a/chrome/browser/resources/options/chromeos/change_picture_options.js
+++ b/chrome/browser/resources/options/chromeos/change_picture_options.js
@@ -24,6 +24,7 @@ cr.define('options', function() {
   /**
    * Encapsulated handling of ChromeOS change picture options page.
    * @constructor
+   * @extends {cr.ui.pageManager.Page}
    */
   function ChangePictureOptions() {
     Page.call(this, 'changePicture',
diff --git a/chrome/browser/resources/options/chromeos/consumer_management_overlay.js b/chrome/browser/resources/options/chromeos/consumer_management_overlay.js
index 3994a86..c9d7a88 100644
--- a/chrome/browser/resources/options/chromeos/consumer_management_overlay.js
+++ b/chrome/browser/resources/options/chromeos/consumer_management_overlay.js
@@ -9,8 +9,8 @@ cr.define('options', function() {
   /**
    * ConsumerManagementOverlay class
    * Dialog that allows users to enroll/unenroll consumer management service.
-   * @extends {SettingsDialog}
    * @constructor
+   * @extends {cr.ui.pageManager.Page}
    */
   function ConsumerManagementOverlay() {
     Page.call(this, 'consumer-management-overlay',
diff --git a/chrome/browser/resources/options/chromeos/display_options.js b/chrome/browser/resources/options/chromeos/display_options.js
index a68c721..b113ebd 100644
--- a/chrome/browser/resources/options/chromeos/display_options.js
+++ b/chrome/browser/resources/options/chromeos/display_options.js
@@ -74,6 +74,7 @@ cr.define('options', function() {
   /**
    * Encapsulated handling of the 'Display' page.
    * @constructor
+   * @extends {cr.ui.pageManager.Page}
    */
   function DisplayOptions() {
     Page.call(this, 'display',
@@ -401,7 +402,7 @@ cr.define('options', function() {
           this.layout_ = this.dragging_.display.isPrimary ?
               SecondaryDisplayLayout.LEFT : SecondaryDisplayLayout.RIGHT;
         else if (newPosition.x + draggingDiv.offsetWidth <
-                   baseDiv.offstLeft)
+                   baseDiv.offsetLeft)
           this.layout_ = this.dragging_.display.isPrimary ?
               SecondaryDisplayLayout.RIGHT : SecondaryDisplayLayout.LEFT;
       }
diff --git a/chrome/browser/resources/options/chromeos/display_overscan.js b/chrome/browser/resources/options/chromeos/display_overscan.js
index 6151b54..c09f3b4 100644
--- a/chrome/browser/resources/options/chromeos/display_overscan.js
+++ b/chrome/browser/resources/options/chromeos/display_overscan.js
@@ -9,6 +9,7 @@ cr.define('options', function() {
   /**
    * Encapsulated handling of the 'DisplayOverscan' page.
    * @constructor
+   * @extends {cr.ui.pageManager.Page}
    */
   function DisplayOverscan() {
     Page.call(this, 'displayOverscan',
diff --git a/chrome/browser/resources/options/chromeos/internet_detail.js b/chrome/browser/resources/options/chromeos/internet_detail.js
index bccacee..81c5888 100644
--- a/chrome/browser/resources/options/chromeos/internet_detail.js
+++ b/chrome/browser/resources/options/chromeos/internet_detail.js
@@ -11,6 +11,24 @@
 //   networkingPrivate API. See network_config.js.
 // See crbug.com/279351 for more info.
 
+/** @typedef {{activationState: (string|undefined),
+ *             carriers: Array,
+ *             currentCarrierIndex; (number|undefined),
+ *             ipAutoConfig: boolean,
+ *             ipconfig: Object,
+ *             nameServerType: string,
+ *             restrictedPool: (string|undefined),
+ *             roamingState: (string|undefined),
+ *             savedIP: Object,
+ *             showActivateButton: (boolean|undefined)
+ *             showViewAccountButton: (boolean|undefined),
+ *             staticIP: Object}}
+ * Only the keys which had caused problems are declared in this typedef.
+ * There are many more of them.
+ * @see chrome/browser/ui/webui/options/chromeos/internet_options_handler.cc
+ */
+var InternetDetailedInfo;
+
 cr.define('options.internet', function() {
   var OncData = cr.onc.OncData;
   var Page = cr.ui.pageManager.Page;
@@ -22,7 +40,7 @@ cr.define('options.internet', function() {
   /**
    * Helper function to set hidden attribute for elements matching a selector.
    * @param {string} selector CSS selector for extracting a list of elements.
-   * @param {bool} hidden New hidden value.
+   * @param {boolean} hidden New hidden value.
    */
   function updateHidden(selector, hidden) {
     var elements = cr.doc.querySelectorAll(selector);
@@ -63,7 +81,7 @@ cr.define('options.internet', function() {
   /**
    * Simple helper method for converting a field to a string. It is used to
    * easily assign an empty string from fields that may be unknown or undefined.
-   * @param {object} value that should be converted to a string.
+   * @param {Object} value that should be converted to a string.
    * @return {string} the result.
    */
   function stringFromValue(value) {
@@ -115,6 +133,7 @@ cr.define('options.internet', function() {
   /**
    * Encapsulated handling of ChromeOS internet details overlay page.
    * @constructor
+   * @extends {cr.ui.pageManager.Page}
    */
   function DetailsInternetPage() {
     // Cached Apn properties
@@ -126,7 +145,7 @@ cr.define('options.internet', function() {
     this.showProxy_ = false;
     // TODO(stevenjb): Use networkingPrivate.getNetworks to set this.
     this.deviceConnected_ = false;
-    Page.call(this, 'detailsInternetPage', null, 'details-internet-page');
+    Page.call(this, 'detailsInternetPage', '', 'details-internet-page');
   }
 
   cr.addSingletonGetter(DetailsInternetPage);
@@ -137,17 +156,16 @@ cr.define('options.internet', function() {
     /** @override */
     initializePage: function() {
       Page.prototype.initializePage.call(this);
-      var params = parseQueryParams(window.location);
-      this.initializePageContents_(params);
-      this.showNetworkDetails_(params);
+      this.initializePageContents_();
+      this.showNetworkDetails_();
     },
 
     /**
      * Auto-activates the network details dialog if network information
      * is included in the URL.
      */
-    showNetworkDetails_: function(params) {
-      var servicePath = params.servicePath;
+    showNetworkDetails_: function() {
+      var servicePath = parseQueryParams(window.location).servicePath;
       if (!servicePath || !servicePath.length)
         return;
       var networkType = '';  // ignored for 'options'
@@ -157,7 +175,7 @@ cr.define('options.internet', function() {
     /**
      * Initializes the contents of the page.
      */
-    initializePageContents_: function(params) {
+    initializePageContents_: function() {
       $('details-internet-dismiss').addEventListener('click', function(event) {
         DetailsInternetPage.setDetails();
       });
@@ -476,9 +494,8 @@ cr.define('options.internet', function() {
      * Handler for when the user clicks on the checkbox to allow a
      * single proxy usage.
      * @private
-     * @param {Event} e Click Event.
      */
-    toggleSingleProxy_: function(e) {
+    toggleSingleProxy_: function() {
       if ($('proxy-all-protocols').checked) {
         $('multi-proxy').hidden = true;
         $('single-proxy').hidden = false;
@@ -492,9 +509,8 @@ cr.define('options.internet', function() {
      * Handler for when the user clicks on the checkbox to enter
      * auto configuration URL.
      * @private
-     * @param {Event} e Click Event.
      */
-    handleAutoConfigProxy_: function(e) {
+    handleAutoConfigProxy_: function() {
       $('proxy-pac-url').disabled = !$('proxy-use-pac-url').checked;
     },
 
@@ -502,9 +518,8 @@ cr.define('options.internet', function() {
      * Handler for selecting a radio button that will disable the manual
      * controls.
      * @private
-     * @param {Event} e Click event.
      */
-    disableManualProxy_: function(e) {
+    disableManualProxy_: function() {
       $('ignored-host-list').disabled = true;
       $('new-host').disabled = true;
       $('remove-host').disabled = true;
@@ -534,9 +549,8 @@ cr.define('options.internet', function() {
      * Handler for selecting a radio button that will enable the manual
      * controls.
      * @private
-     * @param {Event} e Click event.
      */
-    enableManualProxy_: function(e) {
+    enableManualProxy_: function() {
       $('ignored-host-list').redraw();
       var allDisabled = $('manual-proxy').disabled;
       $('ignored-host-list').disabled = allDisabled;
@@ -974,21 +988,22 @@ cr.define('options.internet', function() {
     var servicePath = detailsPage.servicePath_;
     if (type == 'WiFi') {
       sendCheckedIfEnabled(servicePath, 'setPreferNetwork',
-                           $('prefer-network-wifi'));
+          assertInstanceof($('prefer-network-wifi'), HTMLInputElement));
       sendCheckedIfEnabled(servicePath, 'setAutoConnect',
-                           $('auto-connect-network-wifi'));
+          assertInstanceof($('auto-connect-network-wifi'), HTMLInputElement));
     } else if (type == 'Wimax') {
       sendCheckedIfEnabled(servicePath, 'setAutoConnect',
-                           $('auto-connect-network-wimax'));
+          assertInstanceof($('auto-connect-network-wimax'), HTMLInputElement));
     } else if (type == 'Cellular') {
       sendCheckedIfEnabled(servicePath, 'setAutoConnect',
-                           $('auto-connect-network-cellular'));
+          assertInstanceof($('auto-connect-network-cellular'),
+                           HTMLInputElement));
     } else if (type == 'VPN') {
       chrome.send('setServerHostname',
                   [servicePath,
                    $('inet-server-hostname').value]);
       sendCheckedIfEnabled(servicePath, 'setAutoConnect',
-                           $('auto-connect-network-vpn'));
+          assertInstanceof($('auto-connect-network-vpn'), HTMLInputElement));
     }
 
     var nameServerTypes = ['automatic', 'google', 'user'];
@@ -1071,6 +1086,9 @@ cr.define('options.internet', function() {
     detailsPage.updateDetails_(update);
   };
 
+  /**
+   * @param {InternetDetailedInfo} data
+   */
   DetailsInternetPage.showDetailedInfo = function(data) {
     var onc = new OncData(data);
 
diff --git a/chrome/browser/resources/options/chromeos/internet_detail_ip_address_field.js b/chrome/browser/resources/options/chromeos/internet_detail_ip_address_field.js
index d0a096c..d4cd42a 100644
--- a/chrome/browser/resources/options/chromeos/internet_detail_ip_address_field.js
+++ b/chrome/browser/resources/options/chromeos/internet_detail_ip_address_field.js
@@ -16,6 +16,7 @@ cr.define('options.internet', function() {
   /**
    * Creates a new field specifically for entering IP addresses.
    * @constructor
+   * @extends {options.EditableTextField}
    */
   function IPAddressField() {
     var el = cr.doc.createElement('div');
diff --git a/chrome/browser/resources/options/chromeos/keyboard_overlay.js b/chrome/browser/resources/options/chromeos/keyboard_overlay.js
index 0e2d56d..74680db 100644
--- a/chrome/browser/resources/options/chromeos/keyboard_overlay.js
+++ b/chrome/browser/resources/options/chromeos/keyboard_overlay.js
@@ -27,6 +27,7 @@ cr.define('options', function() {
   /**
    * Encapsulated handling of the keyboard overlay.
    * @constructor
+   * @extends {options.SettingsDialog}
    */
   function KeyboardOverlay() {
     options.SettingsDialog.call(this, 'keyboard-overlay',
diff --git a/chrome/browser/resources/options/chromeos/network_list.js b/chrome/browser/resources/options/chromeos/network_list.js
index e106c29..392a949 100644
--- a/chrome/browser/resources/options/chromeos/network_list.js
+++ b/chrome/browser/resources/options/chromeos/network_list.js
@@ -105,6 +105,7 @@ cr.define('options.network', function() {
    * connectivity.
    * @param {Object} data Description of the network list or command.
    * @constructor
+   * @extends {cr.ui.ListItem}
    */
   function NetworkListItem(data) {
     var el = cr.doc.createElement('li');
@@ -262,6 +263,8 @@ cr.define('options.network', function() {
   /**
    * Creates a control that displays a popup menu when clicked.
    * @param {Object} data  Description of the control.
+   * @constructor
+   * @extends {NetworkListItem}
    */
   function NetworkMenuItem(data) {
     var el = new NetworkListItem(data);
@@ -366,10 +369,10 @@ cr.define('options.network', function() {
   /**
    * Creates a control for selecting or configuring a network connection based
    * on the type of connection (e.g. wifi versus vpn).
-   * @param {Object} data Description of the network.
-   * @param {string} data.key Item key.
-   * @param {Array.<Object>} data.networkList Description of the network.
+   * @param {{key: string, networkList: Array.<Object>}} data Description of the
+   *     network.
    * @constructor
+   * @extends {NetworkMenuItem}
    */
   function NetworkSelectorItem(data) {
     var el = new NetworkMenuItem(data);
@@ -429,7 +432,7 @@ cr.define('options.network', function() {
     /**
      * Creates a menu for selecting, configuring or disconnecting from a
      * network.
-     * @return {Element} The newly created menu.
+     * @return {!Element} The newly created menu.
      */
     createMenu: function() {
       var menu = this.ownerDocument.createElement('div');
@@ -658,11 +661,10 @@ cr.define('options.network', function() {
 
   /**
    * Creates a button-like control for configurating internet connectivity.
-   * @param {Object} data Description of the network control.
-   * @param {string} data.key Item key.
-   * @param {string} data.subtitle Subtitle.
-   * @param {function} data.command Item callback.
+   * @param {{key: string, subtitle: string, command: Function}} data
+   *     Description of the network control.
    * @constructor
+   * @extends {NetworkListItem}
    */
   function NetworkButtonItem(data) {
     var el = new NetworkListItem(data);
@@ -696,9 +698,9 @@ cr.define('options.network', function() {
    * @param {!Element} menu Parent menu.
    * @param {!Object} data Description of the network.
    * @param {!string} label Display name for the menu item.
-   * @param {?(string|function)} command Callback function or name
+   * @param {?(string|!Function)} command Callback function or name
    *     of the command for |networkCommand|.
-   * @param {?string=} opt_iconURL Optional URL to an icon for the menu item.
+   * @param {string=} opt_iconURL Optional URL to an icon for the menu item.
    * @return {!Element} The created menu item.
    * @private
    */
@@ -728,12 +730,12 @@ cr.define('options.network', function() {
     } else if (command != null) {
       if (data) {
         callback = function() {
-          command(data);
+          (/** @type {Function} */(command))(data);
           closeMenu_();
         };
       } else {
         callback = function() {
-          command();
+          (/** @type {Function} */(command))();
           closeMenu_();
         };
       }
@@ -752,6 +754,7 @@ cr.define('options.network', function() {
   /**
    * A list of controls for manipulating network connectivity.
    * @constructor
+   * @extends {cr.ui.List}
    */
   var NetworkList = cr.ui.define('list');
 
@@ -830,8 +833,8 @@ cr.define('options.network', function() {
      * Finds the index of a network item within the data model based on
      * category.
      * @param {string} key Unique key for the item in the list.
-     * @return {number} The index of the network item, or |undefined| if it is
-     *     not found.
+     * @return {(number|undefined)} The index of the network item, or
+     *     |undefined| if it is not found.
      */
     indexOf: function(key) {
       var size = this.dataModel.length;
@@ -1021,6 +1024,7 @@ cr.define('options.network', function() {
   /**
    * Element for indicating a policy managed network.
    * @constructor
+   * @extends {options.ControlledSettingIndicator}
    */
   function ManagedNetworkIndicator() {
     var el = cr.doc.createElement('span');
@@ -1061,10 +1065,10 @@ cr.define('options.network', function() {
     },
 
     /** @override */
-    toggleBubble_: function() {
+    toggleBubble: function() {
       if (activeMenu_ && !$(activeMenu_).contains(this))
         closeMenu_();
-      ControlledSettingIndicator.prototype.toggleBubble_.call(this);
+      ControlledSettingIndicator.prototype.toggleBubble.call(this);
       if (this.showingBubble) {
         var bubble = PageManager.getVisibleBubble();
         bubble.addEventListener('mousedown', this.stopEvent);
diff --git a/chrome/browser/resources/options/chromeos/preferred_networks.js b/chrome/browser/resources/options/chromeos/preferred_networks.js
index 02bc709..a4dc77c 100644
--- a/chrome/browser/resources/options/chromeos/preferred_networks.js
+++ b/chrome/browser/resources/options/chromeos/preferred_networks.js
@@ -50,6 +50,7 @@ cr.define('options', function() {
    * @param {{Name: string, Type: string, servicePath: string}} data
    *     Description of the network.
    * @constructor
+   * @extends {options.DeletableItem}
    */
   function PreferredNetworkListItem(data) {
     var el = cr.doc.createElement('div');
diff --git a/chrome/browser/resources/options/chromeos/third_party_ime_confirm_overlay.js b/chrome/browser/resources/options/chromeos/third_party_ime_confirm_overlay.js
index 0494d6b..7b8aac54 100644
--- a/chrome/browser/resources/options/chromeos/third_party_ime_confirm_overlay.js
+++ b/chrome/browser/resources/options/chromeos/third_party_ime_confirm_overlay.js
@@ -10,7 +10,7 @@ cr.define('options', function() {
    * HomePageOverlay class
    * Dialog that allows users to set the home page.
    * @constructor
-   * @extends {SettingsDialog}
+   * @extends {options.SettingsDialog}
    */
   function ThirdPartyImeConfirmOverlay() {
     SettingsDialog.call(
diff --git a/chrome/browser/resources/options/compiled_resources.gyp b/chrome/browser/resources/options/compiled_resources.gyp
index 09bbe90..a992789 100644
--- a/chrome/browser/resources/options/compiled_resources.gyp
+++ b/chrome/browser/resources/options/compiled_resources.gyp
@@ -15,6 +15,7 @@
           '../../../../ui/webui/resources/js/cr/ui/autocomplete_list.js',
           '../../../../ui/webui/resources/js/cr/ui/bubble.js',
           '../../../../ui/webui/resources/js/cr/ui/bubble_button.js',
+          '../../../../ui/webui/resources/js/cr/ui/command.js',
           '../../../../ui/webui/resources/js/cr/ui/focus_manager.js',
           '../../../../ui/webui/resources/js/cr/ui/focus_outline_manager.js',
           '../../../../ui/webui/resources/js/cr/ui/grid.js',
@@ -27,6 +28,8 @@
           '../../../../ui/webui/resources/js/cr/ui/menu_item.js',
           '../../../../ui/webui/resources/js/cr/ui/overlay.js',
           '../../../../ui/webui/resources/js/cr/ui/position_util.js',
+          '../../../../ui/webui/resources/js/cr/ui/page_manager/page.js',
+          '../../../../ui/webui/resources/js/cr/ui/page_manager/page_manager.js',
           '../../../../ui/webui/resources/js/cr/ui/repeating_button.js',
           '../../../../ui/webui/resources/js/cr/ui/touch_handler.js',
           '../../../../ui/webui/resources/js/cr/ui/tree.js',
diff --git a/chrome/browser/resources/options/content_settings.js b/chrome/browser/resources/options/content_settings.js
index eac4d47..ebef955 100644
--- a/chrome/browser/resources/options/content_settings.js
+++ b/chrome/browser/resources/options/content_settings.js
@@ -186,7 +186,8 @@ cr.define('options', function() {
   /**
    * @param {string} type The type of exceptions (e.g. "location") to get.
    * @param {string} mode The mode of the desired exceptions list (e.g. otr).
-   * @return {?ExceptionsList} The corresponding exceptions list or null.
+   * @return {?options.contentSettings.ExceptionsList} The corresponding
+   *     exceptions list or null.
    */
   ContentSettings.getExceptionsList = function(type, mode) {
     return document.querySelector(
@@ -199,7 +200,7 @@ cr.define('options', function() {
    * @param {string} type The content type.
    * @param {string} mode The browser mode.
    * @param {string} pattern The pattern.
-   * @param {bool} valid Whether said pattern is valid in the context of
+   * @param {boolean} valid Whether said pattern is valid in the context of
    *     a content exception setting.
    */
   ContentSettings.patternValidityCheckComplete =
@@ -230,7 +231,7 @@ cr.define('options', function() {
 
   /**
    * Shows/hides the whole Web MIDI settings.
-   * @param {bool} show Wether to show the whole Web MIDI settings.
+   * @param {boolean} show Wether to show the whole Web MIDI settings.
    */
   ContentSettings.showExperimentalWebMIDISettings = function(show) {
     $('experimental-web-midi-settings').hidden = !show;
@@ -271,7 +272,7 @@ cr.define('options', function() {
 
   /**
    * Enables/disables the protected content exceptions button.
-   * @param {bool} enable Whether to enable the button.
+   * @param {boolean} enable Whether to enable the button.
    */
   ContentSettings.enableProtectedContentExceptions = function(enable) {
     var exceptionsButton = $('protected-content-exceptions');
diff --git a/chrome/browser/resources/options/content_settings_exceptions_area.js b/chrome/browser/resources/options/content_settings_exceptions_area.js
index 7f0d315..79c971e 100644
--- a/chrome/browser/resources/options/content_settings_exceptions_area.js
+++ b/chrome/browser/resources/options/content_settings_exceptions_area.js
@@ -178,7 +178,7 @@ cr.define('options.contentSettings', function() {
 
       if (controlledBy == 'policy' || controlledBy == 'extension') {
         this.querySelector('.row-delete-button').hidden = true;
-        var indicator = ControlledSettingIndicator();
+        var indicator = new ControlledSettingIndicator();
         indicator.setAttribute('content-exception', this.contentType);
         // Create a synthetic pref change event decorated as
         // CoreOptionsHandler::CreateValueForPref() does.
@@ -225,14 +225,11 @@ cr.define('options.contentSettings', function() {
      * @type {string}
      */
     get pattern() {
-      if (!this.isEmbeddingRule()) {
+      if (!this.isEmbeddingRule())
         return this.dataItem.origin;
-      } else {
-        return loadTimeData.getStringF('embeddedOnHost',
-                                       this.dataItem.embeddingOrigin);
-      }
 
-      return this.dataItem.displayPattern;
+      return loadTimeData.getStringF('embeddedOnHost',
+                                     this.dataItem.embeddingOrigin);
     },
     set pattern(pattern) {
       if (!this.editable)
@@ -400,7 +397,7 @@ cr.define('options.contentSettings', function() {
    * @param {boolean} enableAskOption Whether to show an 'ask every time' option
    *     in the select.
    * @constructor
-   * @extends {cr.ui.ExceptionsListItem}
+   * @extends {options.contentSettings.ExceptionsListItem}
    */
   function ExceptionsAddRowListItem(contentType, mode, enableAskOption) {
     var el = cr.doc.createElement('div');
@@ -533,7 +530,7 @@ cr.define('options.contentSettings', function() {
      * item to reflect this.
      *
      * @param {string} pattern The pattern.
-     * @param {bool} valid Whether said pattern is valid in the context of a
+     * @param {boolean} valid Whether said pattern is valid in the context of a
      *     content exception setting.
      */
     patternValidityCheckComplete: function(pattern, valid) {
@@ -593,6 +590,7 @@ cr.define('options.contentSettings', function() {
    * Encapsulated handling of content settings list subpage.
    *
    * @constructor
+   * @extends {cr.ui.pageManager.Page}
    */
   function ContentSettingsExceptionsArea() {
     Page.call(this, 'contentExceptions',
diff --git a/chrome/browser/resources/options/content_settings_ui.js b/chrome/browser/resources/options/content_settings_ui.js
index dc7b0c4..995b52a 100644
--- a/chrome/browser/resources/options/content_settings_ui.js
+++ b/chrome/browser/resources/options/content_settings_ui.js
@@ -30,7 +30,6 @@ cr.define('options', function() {
   /**
    * Whether the content setting is controlled by something else than the user's
    * settings (either 'policy' or 'extension').
-   * @type {string}
    */
   cr.defineProperty(ContentSettingsRadio, 'controlledBy', cr.PropertyKind.ATTR);
 
diff --git a/chrome/browser/resources/options/controlled_setting.js b/chrome/browser/resources/options/controlled_setting.js
index c8af16d..df428fa 100644
--- a/chrome/browser/resources/options/controlled_setting.js
+++ b/chrome/browser/resources/options/controlled_setting.js
@@ -10,7 +10,7 @@ cr.define('options', function() {
    * indicator that the value is controlled by some external entity such as
    * policy or an extension.
    * @constructor
-   * @extends {HTMLSpanElement}
+   * @extends {cr.ui.BubbleButton}
    */
   var ControlledSettingIndicator = cr.ui.define('span');
 
@@ -80,9 +80,9 @@ cr.define('options', function() {
 
     /**
      * Open or close a bubble with further information about the pref.
-     * @private
+     * @override
      */
-    toggleBubble_: function() {
+    toggleBubble: function() {
       if (this.showingBubble) {
         PageManager.hideBubble();
       } else {
@@ -187,7 +187,6 @@ cr.define('options', function() {
 
   /**
    * The name of the associated preference.
-   * @type {string}
    */
   cr.defineProperty(ControlledSettingIndicator, 'pref', cr.PropertyKind.ATTR);
 
@@ -197,7 +196,6 @@ cr.define('options', function() {
    * only actually committed when the user confirms the dialog. If the user
    * cancels the dialog instead, the changes are rolled back in the settings UI
    * and never committed.
-   * @type {boolean}
    */
   cr.defineProperty(ControlledSettingIndicator, 'dialogPref',
                     cr.PropertyKind.BOOL_ATTR);
@@ -215,7 +213,7 @@ cr.define('options', function() {
 
   /**
    * The status of the associated preference:
-   * - 'policy':            A specific value is enfoced by policy.
+   * - 'policy':            A specific value is enforced by policy.
    * - 'extension':         A specific value is enforced by an extension.
    * - 'recommended':       A value is recommended by policy. The user could
    *                        override this recommendation but has not done so.
@@ -226,7 +224,6 @@ cr.define('options', function() {
    * - 'shared':            A value belongs to the primary user but can be
    *                        modified (Chrome OS only).
    * - unset:               The value is controlled by the user alone.
-   * @type {string}
    */
   cr.defineProperty(ControlledSettingIndicator, 'controlledBy',
                     cr.PropertyKind.ATTR);
diff --git a/chrome/browser/resources/options/cookies_list.js b/chrome/browser/resources/options/cookies_list.js
index 29159c4..58e74c0 100644
--- a/chrome/browser/resources/options/cookies_list.js
+++ b/chrome/browser/resources/options/cookies_list.js
@@ -57,7 +57,7 @@ cr.define('options', function() {
     // Use the fixed animation target height if set, in case the element is
     // currently being animated and we'd get an intermediate height below.
     if (height && height.substr(-2) == 'px')
-      return parseInt(height.substr(0, height.length - 2));
+      return parseInt(height.substr(0, height.length - 2), 10);
     return item.getBoundingClientRect().height;
   }
 
@@ -81,7 +81,7 @@ cr.define('options', function() {
 
   /**
    * Adds information about an app that protects this data item to the
-   * @{code element}.
+   * |element|.
    * @param {Element} element The DOM element the information should be
          appended to.
    * @param {{id: string, name: string}} appInfo Information about an app.
@@ -104,9 +104,9 @@ cr.define('options', function() {
    * stateless. We cache the expanded item in @{code CookiesList} though, so it
    * can keep state. (Mostly just which item is selected.)
    * @param {Object} origin Data used to create a cookie list item.
-   * @param {CookiesList} list The list that will contain this item.
+   * @param {options.CookiesList} list The list that will contain this item.
    * @constructor
-   * @extends {DeletableItem}
+   * @extends {options.DeletableItem}
    */
   function CookieListItem(origin, list) {
     var listItem = new DeletableItem(null);
@@ -229,6 +229,7 @@ cr.define('options', function() {
       // Force relayout before enabling animation, so that if we have
       // changed things since the last layout, they will not be animated
       // during subsequent layouts.
+      /** @suppress {suspiciousCode} */
       this.itemsChild.offsetHeight;
       this.classList.remove('measure-items');
       this.itemsChild.style.height = itemsHeight + 'px';
@@ -341,7 +342,7 @@ cr.define('options', function() {
 
     /**
      * Set the currently selected cookie node ("cookie bubble") index to
-     * @{code itemIndex}, unselecting any previously selected node first.
+     * |itemIndex|, unselecting any previously selected node first.
      * @param {number} itemIndex The index to set as the selected index.
      */
     set selectedIndex(itemIndex) {
@@ -677,7 +678,7 @@ cr.define('options', function() {
    * Creates a new cookies list.
    * @param {Object=} opt_propertyBag Optional properties.
    * @constructor
-   * @extends {DeletableItemList}
+   * @extends {options.DeletableItemList}
    */
   var CookiesList = cr.ui.define('list');
 
diff --git a/chrome/browser/resources/options/cookies_view.js b/chrome/browser/resources/options/cookies_view.js
index d12c01c..c2cb530 100644
--- a/chrome/browser/resources/options/cookies_view.js
+++ b/chrome/browser/resources/options/cookies_view.js
@@ -13,6 +13,7 @@ cr.define('options', function() {
   /**
    * Encapsulated handling of the cookies and other site data page.
    * @constructor
+   * @extends {cr.ui.pageManager.Page}
    */
   function CookiesView(model) {
     Page.call(this, 'cookies',
diff --git a/chrome/browser/resources/options/deletable_item_list.js b/chrome/browser/resources/options/deletable_item_list.js
index 7b5cd03..465fde7 100644
--- a/chrome/browser/resources/options/deletable_item_list.js
+++ b/chrome/browser/resources/options/deletable_item_list.js
@@ -9,6 +9,8 @@ cr.define('options', function() {
   /**
    * Creates a deletable list item, which has a button that will trigger a call
    * to deleteItemAtIndex(index) in the list.
+   * @constructor
+   * @extends {cr.ui.ListItem}
    */
   var DeletableItem = cr.ui.define('li');
 
diff --git a/chrome/browser/resources/options/editable_text_field.js b/chrome/browser/resources/options/editable_text_field.js
index 8c57872..c1f51a6 100644
--- a/chrome/browser/resources/options/editable_text_field.js
+++ b/chrome/browser/resources/options/editable_text_field.js
@@ -3,6 +3,10 @@
 // found in the LICENSE file.
 
 cr.define('options', function() {
+  /**
+   * @constructor
+   * @extends {HTMLDivElement}
+   */
   var EditableTextField = cr.ui.define('div');
 
   /**
@@ -50,7 +54,7 @@ cr.define('options', function() {
     decorate: function() {
       this.classList.add('editable-text-field');
 
-      this.createEditableTextCell();
+      this.createEditableTextCell('');
 
       if (this.hasAttribute('i18n-placeholder-text')) {
         var identifier = this.getAttribute('i18n-placeholder-text');
@@ -227,14 +231,16 @@ cr.define('options', function() {
 
       var container = this.ownerDocument.createElement('div');
 
-      var textEl = this.ownerDocument.createElement('div');
+      var textEl = /** @type {HTMLElement} */(
+          this.ownerDocument.createElement('div'));
       textEl.className = 'static-text';
       textEl.textContent = text;
       textEl.setAttribute('displaymode', 'static');
       this.appendChild(textEl);
       this.staticText_ = textEl;
 
-      var inputEl = this.ownerDocument.createElement('input');
+      var inputEl = /** @type {HTMLElement} */(
+          this.ownerDocument.createElement('input'));
       inputEl.className = 'editable-text';
       inputEl.type = 'text';
       inputEl.value = text;
diff --git a/chrome/browser/resources/options/font_settings.js b/chrome/browser/resources/options/font_settings.js
index 84982d3..354a14b 100644
--- a/chrome/browser/resources/options/font_settings.js
+++ b/chrome/browser/resources/options/font_settings.js
@@ -155,7 +155,8 @@ cr.define('options', function() {
      * @param {Element} el The div containing the sample text.
      * @param {number} size The font size of the sample text.
      * @param {string} font The font family of the sample text.
-     * @param {bool} showSize True if the font size should appear in the sample.
+     * @param {boolean} showSize True if the font size should appear in the
+     *     sample.
      * @private
      */
     setUpFontSample_: function(el, size, font, showSize) {
@@ -179,13 +180,12 @@ cr.define('options', function() {
       element.textContent = '';
 
       // Insert new child nodes into select element.
-      var value, text, selected, option;
       for (var i = 0; i < items.length; i++) {
-        value = items[i][0];
-        text = items[i][1];
-        dir = items[i][2];
+        var value = items[i][0];
+        var text = items[i][1];
+        var dir = items[i][2];
         if (text) {
-          selected = value == selectedValue;
+          var selected = value == selectedValue;
           var option = new Option(text, value, false, selected);
           option.dir = dir;
           element.appendChild(option);
diff --git a/chrome/browser/resources/options/geolocation_options.js b/chrome/browser/resources/options/geolocation_options.js
index 073bb79..b15ee39 100644
--- a/chrome/browser/resources/options/geolocation_options.js
+++ b/chrome/browser/resources/options/geolocation_options.js
@@ -9,7 +9,7 @@ cr.define('options', function() {
    * GeolocationOptions class
    * Handles initialization of the geolocation options.
    * @constructor
-   * @class
+   * @extends {cr.ui.pageManager.Page}
    */
   function GeolocationOptions() {
     Page.call(this, 'geolocationOptions',
diff --git a/chrome/browser/resources/options/handler_options_list.js b/chrome/browser/resources/options/handler_options_list.js
index 0e15385..6e46da1 100644
--- a/chrome/browser/resources/options/handler_options_list.js
+++ b/chrome/browser/resources/options/handler_options_list.js
@@ -17,7 +17,7 @@ cr.define('options', function() {
    * @param {Object} entry A dictionary describing the handlers for a given
    *     protocol.
    * @constructor
-   * @extends {cr.ui.DeletableItemList}
+   * @extends {options.DeletableItemList}
    */
   function IgnoredHandlersListItem(entry) {
     var el = cr.doc.createElement('div');
diff --git a/chrome/browser/resources/options/hotword_search_setting_indicator.js b/chrome/browser/resources/options/hotword_search_setting_indicator.js
index 38dabea..697e63f 100644
--- a/chrome/browser/resources/options/hotword_search_setting_indicator.js
+++ b/chrome/browser/resources/options/hotword_search_setting_indicator.js
@@ -11,7 +11,7 @@ cr.define('options', function() {
    * of the hotword search setting, including a bubble to show setup errors
    * (such as failures to download extension resources).
    * @constructor
-   * @extends {HTMLSpanElement}
+   * @extends {options.ControlledSettingIndicator}
    */
   var HotwordSearchSettingIndicator = cr.ui.define('span');
 
@@ -69,8 +69,9 @@ cr.define('options', function() {
      * Toggles showing and hiding the error message bubble. An empty
      * |errorText_| indicates that there is no error message. So the bubble
      * only be shown if |errorText_| has a value.
+     * @override
      */
-    toggleBubble_: function() {
+    toggleBubble: function() {
       if (this.showingBubble) {
         PageManager.hideBubble();
         return;
diff --git a/chrome/browser/resources/options/inline_editable_list.js b/chrome/browser/resources/options/inline_editable_list.js
index 7a502fa..cc6c9f7 100644
--- a/chrome/browser/resources/options/inline_editable_list.js
+++ b/chrome/browser/resources/options/inline_editable_list.js
@@ -9,7 +9,7 @@ cr.define('options', function() {
   /**
    * Creates a new list item with support for inline editing.
    * @constructor
-   * @extends {options.DeletableListItem}
+   * @extends {options.DeletableItem}
    */
   function InlineEditableItem() {
     var el = cr.doc.createElement('div');
@@ -46,7 +46,7 @@ cr.define('options', function() {
 
     /**
      * Fields associated with edit mode.
-     * @type {array}
+     * @type {Array}
      * @private
      */
     editFields_: null,
diff --git a/chrome/browser/resources/options/language_add_language_overlay.js b/chrome/browser/resources/options/language_add_language_overlay.js
index a9484c4..643f3d4 100644
--- a/chrome/browser/resources/options/language_add_language_overlay.js
+++ b/chrome/browser/resources/options/language_add_language_overlay.js
@@ -12,6 +12,7 @@ cr.define('options', function() {
   /**
    * Encapsulated handling of ChromeOS add language overlay page.
    * @constructor
+   * @extends {cr.ui.pageManager.Page}
    */
   function AddLanguageOverlay() {
     Page.call(this, 'addLanguage',
diff --git a/chrome/browser/resources/options/language_dictionary_overlay.js b/chrome/browser/resources/options/language_dictionary_overlay.js
index 57d549e..b8ed059 100644
--- a/chrome/browser/resources/options/language_dictionary_overlay.js
+++ b/chrome/browser/resources/options/language_dictionary_overlay.js
@@ -26,7 +26,7 @@ cr.define('options', function() {
 
     /**
      * A list of words in the dictionary.
-     * @type {DictionaryWordsList}
+     * @type {options.dictionary_words.DictionaryWordsList}
      * @private
      */
     wordList_: null,
diff --git a/chrome/browser/resources/options/language_dictionary_overlay_word_list.js b/chrome/browser/resources/options/language_dictionary_overlay_word_list.js
index 611c56f..ceccb1c 100644
--- a/chrome/browser/resources/options/language_dictionary_overlay_word_list.js
+++ b/chrome/browser/resources/options/language_dictionary_overlay_word_list.js
@@ -12,7 +12,7 @@ cr.define('options.dictionary_words', function() {
    * @param {function(string)} addDictionaryWordCallback Callback for
    * adding a dictionary word.
    * @constructor
-   * @extends {cr.ui.InlineEditableItem}
+   * @extends {options.InlineEditableItem}
    */
   function DictionaryWordsListItem(dictionaryWord, addDictionaryWordCallback) {
     var el = cr.doc.createElement('div');
@@ -76,6 +76,7 @@ cr.define('options.dictionary_words', function() {
 
   /**
    * A list of words in the dictionary.
+   * @constructor
    * @extends {cr.ui.InlineEditableItemList}
    */
   var DictionaryWordsList = cr.ui.define('list');
diff --git a/chrome/browser/resources/options/language_list.js b/chrome/browser/resources/options/language_list.js
index e5f1628..79f918e 100644
--- a/chrome/browser/resources/options/language_list.js
+++ b/chrome/browser/resources/options/language_list.js
@@ -14,7 +14,7 @@ cr.define('options', function() {
    * Creates a new Language list item.
    * @param {Object} languageInfo The information of the language.
    * @constructor
-   * @extends {DeletableItem.ListItem}
+   * @extends {options.DeletableItem.ListItem}
    */
   function LanguageListItem(languageInfo) {
     var el = cr.doc.createElement('li');
diff --git a/chrome/browser/resources/options/language_options.js b/chrome/browser/resources/options/language_options.js
index 4e4e00d..9b105ca 100644
--- a/chrome/browser/resources/options/language_options.js
+++ b/chrome/browser/resources/options/language_options.js
@@ -72,6 +72,7 @@ cr.define('options', function() {
   /**
    * Encapsulated handling of ChromeOS language options page.
    * @constructor
+   * @extends {cr.ui.pageManager.Page}
    */
   function LanguageOptions(model) {
     Page.call(this, 'languages',
@@ -101,7 +102,7 @@ cr.define('options', function() {
 
     /**
      * Number of times a spell check dictionary download failed.
-     * @type {int}
+     * @type {number}
      * @private
      */
     spellcheckDictionaryDownloadFailures_: 0,
@@ -1332,7 +1333,7 @@ cr.define('options', function() {
 
   /**
    * Shows the node at |index| in |nodes|, hides all others.
-   * @param {Array<HTMLElement>} nodes The nodes to be shown or hidden.
+   * @param {Array.<HTMLElement>} nodes The nodes to be shown or hidden.
    * @param {number} index The index of |nodes| to show.
    */
   function showMutuallyExclusiveNodes(nodes, index) {
diff --git a/chrome/browser/resources/options/manage_profile_overlay.js b/chrome/browser/resources/options/manage_profile_overlay.js
index 1eab7e6..dcdcc1a 100644
--- a/chrome/browser/resources/options/manage_profile_overlay.js
+++ b/chrome/browser/resources/options/manage_profile_overlay.js
@@ -11,7 +11,7 @@ cr.define('options', function() {
    * ManageProfileOverlay class
    * Encapsulated handling of the 'Manage profile...' overlay page.
    * @constructor
-   * @class
+   * @extends {cr.ui.pageManager.Page}
    */
   function ManageProfileOverlay() {
     Page.call(this, 'manageProfile',
@@ -352,6 +352,24 @@ cr.define('options', function() {
     },
 
     /**
+     * @param {Object} supervisedUser
+     * @param {boolean} nameIsUnique
+     */
+    getImportHandler_: function(supervisedUser, nameIsUnique) {
+      return (function() {
+        if (supervisedUser.needAvatar || !nameIsUnique) {
+          PageManager.showPageByName('supervisedUserImport');
+        } else {
+          this.hideErrorBubble_('create');
+          CreateProfileOverlay.updateCreateInProgress(true);
+          chrome.send('createProfile',
+              [supervisedUser.name, supervisedUser.iconURL, false, true,
+                   supervisedUser.id]);
+        }
+      }).bind(this);
+    },
+
+    /**
      * Callback which receives the list of existing supervised users. Checks if
      * the currently entered name is the name of an already existing supervised
      * user. If yes, the user is prompted to import the existing supervised
@@ -386,22 +404,8 @@ cr.define('options', function() {
               break;
             }
           }
-          var self = this;
-          function getImportHandler(supervisedUser, nameIsUnique) {
-            return function() {
-              if (supervisedUser.needAvatar || !nameIsUnique) {
-                PageManager.showPageByName('supervisedUserImport');
-              } else {
-                self.hideErrorBubble_('create');
-                CreateProfileOverlay.updateCreateInProgress(true);
-                chrome.send('createProfile',
-                    [supervisedUser.name, supervisedUser.iconURL, false, true,
-                         supervisedUser.id]);
-              }
-            }
-          };
           $('supervised-user-import-existing').onclick =
-              getImportHandler(supervisedUsers[i], nameIsUnique);
+              this.getImportHandler_(supervisedUsers[i], nameIsUnique);
           $('create-profile-ok').disabled = true;
           return;
         }
diff --git a/chrome/browser/resources/options/options_page.js b/chrome/browser/resources/options/options_page.js
index b5fedb2..ecff736 100644
--- a/chrome/browser/resources/options/options_page.js
+++ b/chrome/browser/resources/options/options_page.js
@@ -4,7 +4,6 @@
 
 cr.define('options', function() {
   /** @const */ var FocusOutlineManager = cr.ui.FocusOutlineManager;
-  /** @const */ var PageManager = cr.ui.pageManager.PageManager;
 
   var OptionsPage = {
     /**
@@ -24,24 +23,26 @@ cr.define('options', function() {
 
     /**
      * Shows the tab contents for the given navigation tab.
-     * @param {!Element} tab The tab that the user clicked.
+     * @param {Node} tab The tab that the user clicked.
      */
     showTab: function(tab) {
       // Search parents until we find a tab, or the nav bar itself. This allows
       // tabs to have child nodes, e.g. labels in separately-styled spans.
-      while (tab && !tab.classList.contains('subpages-nav-tabs') &&
+      while (tab && tab.classList &&
+             !tab.classList.contains('subpages-nav-tabs') &&
              !tab.classList.contains('tab')) {
         tab = tab.parentNode;
       }
-      if (!tab || !tab.classList.contains('tab'))
+      if (!tab || !tab.classList || !tab.classList.contains('tab'))
         return;
 
       // Find tab bar of the tab.
       var tabBar = tab;
-      while (tabBar && !tabBar.classList.contains('subpages-nav-tabs')) {
+      while (tabBar && tabBar.classList &&
+             !tabBar.classList.contains('subpages-nav-tabs')) {
         tabBar = tabBar.parentNode;
       }
-      if (!tabBar)
+      if (!tabBar || !tabBar.classList)
         return;
 
       if (tabBar.activeNavTab != null) {
diff --git a/chrome/browser/resources/options/origin_resources_list.js b/chrome/browser/resources/options/origin_resources_list.js
index 7124c67..144ba0b 100644
--- a/chrome/browser/resources/options/origin_resources_list.js
+++ b/chrome/browser/resources/options/origin_resources_list.js
@@ -3,12 +3,14 @@
 // found in the LICENSE file.
 
 cr.define('options', function() {
-  /** @const */ List = cr.ui.List;
-  /** @const */ ListItem = cr.ui.ListItem;
+  /** @const */ var List = cr.ui.List;
+  /** @const */ var ListItem = cr.ui.ListItem;
 
   /**
    * Creates a new list item for the origin's data.
    * @param {!Object} origin Data used to create the origin list item.
+   * @constructor
+   * @extends {cr.ui.ListItem}
    */
   function OriginListItem(origin) {
     var el = cr.doc.createElement('div');
@@ -52,6 +54,10 @@ cr.define('options', function() {
     }
   };
 
+  /**
+   * @constructor
+   * @extends {cr.ui.List}
+   */
   var OriginList = cr.ui.define('list');
 
   OriginList.prototype = {
diff --git a/chrome/browser/resources/options/password_manager.js b/chrome/browser/resources/options/password_manager.js
index 4758254..8ad79a8 100644
--- a/chrome/browser/resources/options/password_manager.js
+++ b/chrome/browser/resources/options/password_manager.js
@@ -13,6 +13,7 @@ cr.define('options', function() {
   /**
    * Encapsulated handling of password and exceptions page.
    * @constructor
+   * @extends {cr.ui.pageManager.Page}
    */
   function PasswordManager() {
     this.activeNavTab = null;
@@ -28,14 +29,14 @@ cr.define('options', function() {
 
     /**
      * The saved passwords list.
-     * @type {DeletableItemList}
+     * @type {options.DeletableItemList}
      * @private
      */
     savedPasswordsList_: null,
 
     /**
      * The password exceptions list.
-     * @type {DeletableItemList}
+     * @type {options.DeletableItemList}
      * @private
      */
     passwordExceptionsList_: null,
@@ -138,7 +139,7 @@ cr.define('options', function() {
 
     /**
      * Updates the visibility of the list and empty list placeholder.
-     * @param {!List} list The list to toggle visilibility for.
+     * @param {!cr.ui.List} list The list to toggle visilibility for.
      */
     updateListVisibility_: function(list) {
       var empty = list.dataModel.length == 0;
diff --git a/chrome/browser/resources/options/password_manager_list.js b/chrome/browser/resources/options/password_manager_list.js
index 2a77ea3..266b275 100644
--- a/chrome/browser/resources/options/password_manager_list.js
+++ b/chrome/browser/resources/options/password_manager_list.js
@@ -10,7 +10,8 @@ cr.define('options.passwordManager', function() {
 
   /**
    * Creates a new passwords list item.
-   * @param {ArrayDataModel} dataModel The data model that contains this item.
+   * @param {cr.ui.ArrayDataModel} dataModel The data model that contains this
+   *     item.
    * @param {Array} entry An array of the form [url, username, password]. When
    *     the list has been filtered, a fourth element [index] may be present.
    * @param {boolean} showPasswords If true, add a button to the element to
@@ -194,7 +195,7 @@ cr.define('options.passwordManager', function() {
    * Creates a new PasswordExceptions list item.
    * @param {Array} entry A pair of the form [url, username].
    * @constructor
-   * @extends {Deletable.ListItem}
+   * @extends {options.DeletableListItem}
    */
   function PasswordExceptionsListItem(entry) {
     var el = cr.doc.createElement('div');
diff --git a/chrome/browser/resources/options/pref_ui.js b/chrome/browser/resources/options/pref_ui.js
index 98152ee..c6c49ff 100644
--- a/chrome/browser/resources/options/pref_ui.js
+++ b/chrome/browser/resources/options/pref_ui.js
@@ -124,14 +124,12 @@ cr.define('options', function() {
 
   /**
    * The name of the associated preference.
-   * @type {string}
    */
   cr.defineProperty(PrefInputElement, 'pref', cr.PropertyKind.ATTR);
 
   /**
    * The data type of the associated preference, only relevant for derived
    * classes that support different data types.
-   * @type {string}
    */
   cr.defineProperty(PrefInputElement, 'dataType', cr.PropertyKind.ATTR);
 
@@ -140,20 +138,17 @@ cr.define('options', function() {
    * in the settings UI immediately but are only actually committed when the
    * user confirms the dialog. If the user cancels the dialog instead, the
    * changes are rolled back in the settings UI and never committed.
-   * @type {boolean}
    */
   cr.defineProperty(PrefInputElement, 'dialogPref', cr.PropertyKind.BOOL_ATTR);
 
   /**
    * Whether the associated preference is controlled by a source other than the
    * user's setting (can be 'policy', 'extension', 'recommended' or unset).
-   * @type {string}
    */
   cr.defineProperty(PrefInputElement, 'controlledBy', cr.PropertyKind.ATTR);
 
   /**
    * The user metric string.
-   * @type {string}
    */
   cr.defineProperty(PrefInputElement, 'metric', cr.PropertyKind.ATTR);
 
@@ -206,7 +201,6 @@ cr.define('options', function() {
 
   /**
    * Whether the mapping between checkbox state and associated pref is inverted.
-   * @type {boolean}
    */
   cr.defineProperty(PrefCheckbox, 'inverted_pref', cr.PropertyKind.BOOL_ATTR);
 
@@ -419,7 +413,7 @@ cr.define('options', function() {
 
       // Make sure the value is a string, because the value is stored as a
       // string in the HTMLOptionElement.
-      value = String(event.value.value);
+      var value = String(event.value.value);
 
       var found = false;
       for (var i = 0; i < this.options.length; i++) {
@@ -561,14 +555,12 @@ cr.define('options', function() {
 
   /**
    * The name of the associated preference.
-   * @type {string}
    */
   cr.defineProperty(PrefButton, 'pref', cr.PropertyKind.ATTR);
 
   /**
    * Whether the associated preference is controlled by a source other than the
    * user's setting (can be 'policy', 'extension', 'recommended' or unset).
-   * @type {string}
    */
   cr.defineProperty(PrefButton, 'controlledBy', cr.PropertyKind.ATTR);
 
diff --git a/chrome/browser/resources/options/preferences.js b/chrome/browser/resources/options/preferences.js
index c74f91a..b9ac7eb0 100644
--- a/chrome/browser/resources/options/preferences.js
+++ b/chrome/browser/resources/options/preferences.js
@@ -10,6 +10,7 @@ cr.define('options', function() {
   /**
    * Preferences class manages access to Chrome profile preferences.
    * @constructor
+   * @extends {cr.EventTarget}
    */
   function Preferences() {
     // Map of registered preferences.
@@ -23,16 +24,16 @@ cr.define('options', function() {
    * @param {string} name Preference name.
    * @param {boolean} value New preference value.
    * @param {boolean} commit Whether to commit the change to Chrome.
-   * @param {string} metric User metrics identifier.
+   * @param {string=} opt_metric User metrics identifier.
    */
-  Preferences.setBooleanPref = function(name, value, commit, metric) {
+  Preferences.setBooleanPref = function(name, value, commit, opt_metric) {
     if (!commit) {
       Preferences.getInstance().setPrefNoCommit_(name, 'bool', Boolean(value));
       return;
     }
 
     var argumentList = [name, Boolean(value)];
-    if (metric != undefined) argumentList.push(metric);
+    if (opt_metric != undefined) argumentList.push(opt_metric);
     chrome.send('setBooleanPref', argumentList);
   };
 
@@ -132,16 +133,16 @@ cr.define('options', function() {
    * value.
    * @param {string} name Preference name.
    * @param {boolean} commit Whether to commit the change to Chrome.
-   * @param {string} metric User metrics identifier.
+   * @param {string=} opt_metric User metrics identifier.
    */
-  Preferences.clearPref = function(name, commit, metric) {
+  Preferences.clearPref = function(name, commit, opt_metric) {
     if (!commit) {
       Preferences.getInstance().clearPrefNoCommit_(name);
       return;
     }
 
     var argumentList = [name];
-    if (metric != undefined) argumentList.push(metric);
+    if (opt_metric != undefined) argumentList.push(opt_metric);
     chrome.send('clearPref', argumentList);
   };
 
@@ -178,7 +179,7 @@ cr.define('options', function() {
      * Helper function for flattening of dictionary passed via fetchPrefs
      * callback.
      * @param {string} prefix Preference name prefix.
-     * @param {object} dict Map with preference values.
+     * @param {Object} dict Map with preference values.
      * @private
      */
     flattenMapAndDispatchEvent_: function(prefix, dict) {
@@ -308,7 +309,7 @@ cr.define('options', function() {
 
   /**
    * Callback for fetchPrefs method.
-   * @param {object} dict Map of fetched property values.
+   * @param {Object} dict Map of fetched property values.
    */
   Preferences.prefsFetchedCallback = function(dict) {
     Preferences.getInstance().flattenMapAndDispatchEvent_('', dict);
@@ -316,14 +317,14 @@ cr.define('options', function() {
 
   /**
    * Callback for observePrefs method.
-   * @param {array} notification An array defining changed preference values.
-   * notification[0] contains name of the change preference while its new value
-   * is stored in notification[1].
+   * @param {Array} notification An array defining changed preference values.
+   *     notification[0] contains name of the change preference while its new
+   *     value is stored in notification[1].
    */
   Preferences.prefsChangedCallback = function(notification) {
     var event = new Event(notification[0]);
     event.value = notification[1];
-    prefs = Preferences.getInstance();
+    var prefs = Preferences.getInstance();
     prefs.registeredPreferences_[notification[0]] = {orig: notification[1]};
     if (event.value)
       prefs.dispatchEvent(event);
diff --git a/chrome/browser/resources/options/search_engine_manager.js b/chrome/browser/resources/options/search_engine_manager.js
index d23163a..c3e8971 100644
--- a/chrome/browser/resources/options/search_engine_manager.js
+++ b/chrome/browser/resources/options/search_engine_manager.js
@@ -10,6 +10,7 @@ cr.define('options', function() {
   /**
    * Encapsulated handling of search engine management page.
    * @constructor
+   * @extends {cr.ui.pageManager.Page}
    */
   function SearchEngineManager() {
     this.activeNavTab = null;
@@ -61,7 +62,7 @@ cr.define('options', function() {
 
     /**
      * Sets up the given list as a search engine list
-     * @param {List} list The list to set up.
+     * @param {cr.ui.List} list The list to set up.
      * @private
      */
     setUpList_: function(list) {
diff --git a/chrome/browser/resources/options/search_engine_manager_engine_list.js b/chrome/browser/resources/options/search_engine_manager_engine_list.js
index d81258e..04a6eee 100644
--- a/chrome/browser/resources/options/search_engine_manager_engine_list.js
+++ b/chrome/browser/resources/options/search_engine_manager_engine_list.js
@@ -180,7 +180,7 @@ cr.define('options.search_engines', function() {
       } else {
         this.editable = false;
         this.querySelector('.row-delete-button').hidden = true;
-        var indicator = ControlledSettingIndicator();
+        var indicator = new ControlledSettingIndicator();
         indicator.setAttribute('setting', 'search-engine');
         // Create a synthetic pref change event decorated as
         // CoreOptionsHandler::CreateValueForPref() does.
@@ -248,7 +248,7 @@ cr.define('options.search_engines', function() {
      * Returns the input field values as an array suitable for passing to
      * chrome.send. The order of the array is important.
      * @private
-     * @return {array} The current input field values.
+     * @return {Array} The current input field values.
      */
     getInputFieldValues_: function() {
       return [this.nameField_.value,
diff --git a/chrome/browser/resources/options/search_page.js b/chrome/browser/resources/options/search_page.js
index 9441bf1..d6a8695 100644
--- a/chrome/browser/resources/options/search_page.js
+++ b/chrome/browser/resources/options/search_page.js
@@ -9,6 +9,7 @@ cr.define('options', function() {
   /**
    * Encapsulated handling of a search bubble.
    * @constructor
+   * @extends {HTMLDivElement}
    */
   function SearchBubble(text) {
     var el = cr.doc.createElement('div');
@@ -120,6 +121,7 @@ cr.define('options', function() {
   /**
    * Encapsulated handling of the search page.
    * @constructor
+   * @extends {cr.ui.pageManager.Page}
    */
   function SearchPage() {
     Page.call(this, 'search',
@@ -364,7 +366,7 @@ cr.define('options', function() {
       $('searchPageNoMatches').hidden = foundMatches;
 
       // Create search balloons for sub-page results.
-      length = bubbleControls.length;
+      var length = bubbleControls.length;
       for (var i = 0; i < length; i++)
         this.createSearchBubble_(bubbleControls[i], text);
 
diff --git a/chrome/browser/resources/options/settings_dialog.js b/chrome/browser/resources/options/settings_dialog.js
index fb0d509..9c26c1d 100644
--- a/chrome/browser/resources/options/settings_dialog.js
+++ b/chrome/browser/resources/options/settings_dialog.js
@@ -19,7 +19,7 @@ cr.define('options', function() {
    * @param {string} pageDivName See Page constructor.
    * @param {HTMLInputElement} okButton The confirmation button element.
    * @param {HTMLInputElement} cancelButton The cancellation button element.
-   * @extends {Page}
+   * @extends {cr.ui.pageManager.Page}
    */
   function SettingsDialog(name, title, pageDivName, okButton, cancelButton) {
     Page.call(this, name, title, pageDivName);
diff --git a/chrome/browser/resources/options/startup_overlay.js b/chrome/browser/resources/options/startup_overlay.js
index c3d794b..0eb54cb 100644
--- a/chrome/browser/resources/options/startup_overlay.js
+++ b/chrome/browser/resources/options/startup_overlay.js
@@ -10,7 +10,7 @@ cr.define('options', function() {
    * StartupOverlay class
    * Encapsulated handling of the 'Set Startup pages' overlay page.
    * @constructor
-   * @class
+   * @extends {options.SettingsDialog}
    */
   function StartupOverlay() {
     SettingsDialog.call(this, 'startup',
diff --git a/chrome/browser/resources/options/supervised_user_create_confirm.js b/chrome/browser/resources/options/supervised_user_create_confirm.js
index 7728093b..08687a5 100644
--- a/chrome/browser/resources/options/supervised_user_create_confirm.js
+++ b/chrome/browser/resources/options/supervised_user_create_confirm.js
@@ -11,7 +11,7 @@ cr.define('options', function() {
    * Encapsulated handling of the confirmation overlay page when creating a
    * supervised user.
    * @constructor
-   * @class
+   * @extends {cr.ui.pageManager.Page}
    */
   function SupervisedUserCreateConfirmOverlay() {
     Page.call(this, 'supervisedUserCreateConfirm',
diff --git a/chrome/browser/resources/options/supervised_user_import.js b/chrome/browser/resources/options/supervised_user_import.js
index a002051..86d5cc4 100644
--- a/chrome/browser/resources/options/supervised_user_import.js
+++ b/chrome/browser/resources/options/supervised_user_import.js
@@ -12,7 +12,7 @@ cr.define('options', function() {
    * Encapsulated handling of the 'Import existing supervised user' overlay
    * page.
    * @constructor
-   * @class
+   * @extends {cr.ui.pageManager.Page}
    */
   function SupervisedUserImportOverlay() {
     var title = loadTimeData.getString('supervisedUserImportTitle');
diff --git a/chrome/browser/resources/options/supervised_user_learn_more.js b/chrome/browser/resources/options/supervised_user_learn_more.js
index dd69feb..6b589f3 100644
--- a/chrome/browser/resources/options/supervised_user_learn_more.js
+++ b/chrome/browser/resources/options/supervised_user_learn_more.js
@@ -9,7 +9,7 @@ cr.define('options', function() {
    * SupervisedUserLearnMore class.
    * Encapsulated handling of the 'Learn more...' overlay page.
    * @constructor
-   * @class
+   * @extends {cr.ui.pageManager.Page}
    */
   function SupervisedUserLearnMoreOverlay() {
     Page.call(this, 'supervisedUserLearnMore',
diff --git a/chrome/browser/resources/options/website_settings.js b/chrome/browser/resources/options/website_settings.js
index 4c909ac..0f59a24 100644
--- a/chrome/browser/resources/options/website_settings.js
+++ b/chrome/browser/resources/options/website_settings.js
@@ -26,6 +26,7 @@ cr.define('options', function() {
   /**
    * Encapsulated handling of the website settings page.
    * @constructor
+   * @extends {cr.ui.pageManager.Page}
    */
   function WebsiteSettingsManager() {
     Page.call(this, 'websiteSettings',
@@ -40,7 +41,7 @@ cr.define('options', function() {
 
     /**
      * The saved allowed origins list.
-     * @type {OriginList}
+     * @type {options.OriginList}
      * @private
      */
     allowedList_: null,
diff --git a/chrome/browser/resources/options/website_settings_edit_page.js b/chrome/browser/resources/options/website_settings_edit_page.js
index 86d9980..63b3e9b 100644
--- a/chrome/browser/resources/options/website_settings_edit_page.js
+++ b/chrome/browser/resources/options/website_settings_edit_page.js
@@ -11,6 +11,7 @@ cr.define('options.WebsiteSettings', function() {
   /**
    * Encapsulated handling of the website settings editor page.
    * @constructor
+   * @extends {cr.ui.pageManager.Page}
    */
   function WebsiteSettingsEditor() {
     Page.call(this, 'websiteEdit',
diff --git a/chrome/browser/resources/sync_setup_overlay.js b/chrome/browser/resources/sync_setup_overlay.js
index 6d6dc9d..6182e13 100644
--- a/chrome/browser/resources/sync_setup_overlay.js
+++ b/chrome/browser/resources/sync_setup_overlay.js
@@ -2,6 +2,19 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+cr.exportPath('options');
+
+/**
+ * The user's selection in the synced data type drop-down menu, as an index.
+ * @enum {number}
+ * @const
+ */
+options.DataTypeSelection = {
+  SYNC_EVERYTHING: 0,
+  CHOOSE_WHAT_TO_SYNC: 1,
+  SYNC_NOTHING: 2
+};
+
 cr.define('options', function() {
   /** @const */ var Page = cr.ui.pageManager.Page;
   /** @const */ var PageManager = cr.ui.pageManager.PageManager;
@@ -39,17 +52,6 @@ cr.define('options', function() {
   var customizePageVisible_ = false;
 
   /**
-   * The user's selection in the synced data type drop-down menu, as an index.
-   * @enum {number}
-   * @const
-   */
-  var DataTypeSelection = {
-    SYNC_EVERYTHING: 0,
-    CHOOSE_WHAT_TO_SYNC: 1,
-    SYNC_NOTHING: 2
-  };
-
-  /**
    * SyncSetupOverlay class
    * Encapsulated handling of the 'Sync Setup' overlay page.
    * @class
@@ -162,7 +164,7 @@ cr.define('options', function() {
      * @private
      */
     restoreDataTypeCheckboxes_: function() {
-      for (dataType in dataTypeBoxesChecked_) {
+      for (var dataType in dataTypeBoxesChecked_) {
         $(dataType).checked = dataTypeBoxesChecked_[dataType];
       }
     },
@@ -183,17 +185,18 @@ cr.define('options', function() {
      * Sets the state of the sync data type checkboxes based on whether "Sync
      * everything", "Choose what to sync", or "Sync nothing" are selected in the
      * drop-down menu of the advanced settings dialog.
-     * @param {cr.DataTypeSelection} selectedIndex Index of user's selection.
+     * @param {options.DataTypeSelection} selectedIndex Index of user's
+     *     selection.
      * @private
      */
     setDataTypeCheckboxes_: function(selectedIndex) {
-      if (selectedIndex == DataTypeSelection.CHOOSE_WHAT_TO_SYNC) {
+      if (selectedIndex == options.DataTypeSelection.CHOOSE_WHAT_TO_SYNC) {
         this.setDataTypeCheckboxesEnabled_(true);
         this.restoreDataTypeCheckboxes_();
       } else {
         this.setDataTypeCheckboxesEnabled_(false);
-        this.checkAllDataTypeCheckboxes_(selectedIndex ==
-                                         DataTypeSelection.SYNC_EVERYTHING);
+        this.checkAllDataTypeCheckboxes_(
+            selectedIndex == options.DataTypeSelection.SYNC_EVERYTHING);
       }
     },
 
@@ -264,9 +267,9 @@ cr.define('options', function() {
       // These values need to be kept in sync with where they are read in
       // SyncSetupFlow::GetDataTypeChoiceData().
       var syncAll = $('sync-select-datatypes').selectedIndex ==
-                    DataTypeSelection.SYNC_EVERYTHING;
+                    options.DataTypeSelection.SYNC_EVERYTHING;
       var syncNothing = $('sync-select-datatypes').selectedIndex ==
-                        DataTypeSelection.SYNC_NOTHING;
+                        options.DataTypeSelection.SYNC_NOTHING;
       var result = JSON.stringify({
         'syncAllDataTypes': syncAll,
         'syncNothing': syncNothing,
@@ -307,7 +310,7 @@ cr.define('options', function() {
       $('customize-link').disabled = disabled;
       $('customize-link').onclick = disabled ? null : function() {
         SyncSetupOverlay.showCustomizePage(self.syncConfigureArgs_,
-                                           DataTypeSelection.SYNC_EVERYTHING);
+            options.DataTypeSelection.SYNC_EVERYTHING);
         return false;
       };
     },
@@ -323,8 +326,8 @@ cr.define('options', function() {
     setChooseDataTypesCheckboxes_: function(args) {
       var datatypeSelect = $('sync-select-datatypes');
       datatypeSelect.selectedIndex = args.syncAllDataTypes ?
-                                         DataTypeSelection.SYNC_EVERYTHING :
-                                         DataTypeSelection.CHOOSE_WHAT_TO_SYNC;
+          options.DataTypeSelection.SYNC_EVERYTHING :
+          options.DataTypeSelection.CHOOSE_WHAT_TO_SYNC;
 
       $('bookmarks-checkbox').checked = args.bookmarksSynced;
       dataTypeBoxesChecked_['bookmarks-checkbox'] = args.bookmarksSynced;
@@ -450,11 +453,11 @@ cr.define('options', function() {
       // data type checkboxes, and restore their checked state to the last time
       // the "Choose what to sync" was selected while the dialog was still up.
       datatypeSelect.onchange = function() {
-        if (this.selectedIndex == DataTypeSelection.SYNC_NOTHING) {
+        if (this.selectedIndex == options.DataTypeSelection.SYNC_NOTHING) {
           self.showSyncNothingPage_();
         } else {
           self.showCustomizePage_(self.syncConfigureArgs_, this.selectedIndex);
-          if (this.selectedIndex == DataTypeSelection.SYNC_EVERYTHING)
+          if (this.selectedIndex == options.DataTypeSelection.SYNC_EVERYTHING)
             self.checkAllDataTypeCheckboxes_(true);
           else
             self.restoreDataTypeCheckboxes_();
@@ -483,8 +486,8 @@ cr.define('options', function() {
         if (args.showSyncEverythingPage == false || this.usePassphrase_ ||
             args.syncAllDataTypes == false || args.showPassphrase) {
           var index = args.syncAllDataTypes ?
-                          DataTypeSelection.SYNC_EVERYTHING :
-                          DataTypeSelection.CHOOSE_WHAT_TO_SYNC;
+                          options.DataTypeSelection.SYNC_EVERYTHING :
+                          options.DataTypeSelection.CHOOSE_WHAT_TO_SYNC;
           this.showCustomizePage_(args, index);
         } else {
           this.showSyncEverythingPage_();
@@ -518,7 +521,7 @@ cr.define('options', function() {
       $('sync-select-datatypes').selectedIndex = 0;
 
       // The default state is to sync everything.
-      this.setDataTypeCheckboxes_(DataTypeSelection.SYNC_EVERYTHING);
+      this.setDataTypeCheckboxes_(options.DataTypeSelection.SYNC_EVERYTHING);
 
       if (!this.usePassphrase_)
         $('sync-custom-passphrase').hidden = true;
@@ -539,7 +542,8 @@ cr.define('options', function() {
      */
     showSyncNothingPage_: function() {
       // Reset the selection to 'Sync nothing'.
-      $('sync-select-datatypes').selectedIndex = DataTypeSelection.SYNC_NOTHING;
+      $('sync-select-datatypes').selectedIndex =
+          options.DataTypeSelection.SYNC_NOTHING;
 
       // Uncheck and disable the individual data type checkboxes.
       this.checkAllDataTypeCheckboxes_(false);
@@ -599,7 +603,7 @@ cr.define('options', function() {
     /**
      * Displays the advanced sync setting dialog, and pre-selects either the
      * "Sync everything" or the "Choose what to sync" drop-down menu item.
-     * @param {cr.DataTypeSelection} index Index of item to pre-select.
+     * @param {options.DataTypeSelection} index Index of item to pre-select.
      * @private
      */
     showCustomizePage_: function(args, index) {
@@ -619,7 +623,7 @@ cr.define('options', function() {
 
       $('sync-select-datatypes').selectedIndex = index;
       this.setDataTypeCheckboxesEnabled_(
-          index == DataTypeSelection.CHOOSE_WHAT_TO_SYNC);
+          index == options.DataTypeSelection.CHOOSE_WHAT_TO_SYNC);
 
       // Give the OK button focus only when the dialog wasn't already visible.
       if (wasCustomizePageHidden)
@@ -646,7 +650,7 @@ cr.define('options', function() {
     /**
      * Shows the appropriate sync setup page.
      * @param {string} page A page of the sync setup to show.
-     * @param {object} args Data from the C++ to forward on to the right
+     * @param {Object} args Data from the C++ to forward on to the right
      *     section.
      */
     showSyncSetupPage_: function(page, args) {
@@ -709,7 +713,7 @@ cr.define('options', function() {
      * initial state.
      * The initial state is specified by adding a class to the descendant
      * element in sync_setup_overlay.html.
-     * @param {HTMLElement} pageElementId The root page element id.
+     * @param {string} pageElementId The root page element id.
      * @private
      */
     resetPage_: function(pageElementId) {
diff --git a/ui/webui/resources/js/cr/ui/autocomplete_list.js b/ui/webui/resources/js/cr/ui/autocomplete_list.js
index 5d690ef..ab74955 100644
--- a/ui/webui/resources/js/cr/ui/autocomplete_list.js
+++ b/ui/webui/resources/js/cr/ui/autocomplete_list.js
@@ -216,7 +216,7 @@ cr.define('cr.ui', function() {
 
     /**
      * syncWidthAndPositionToInput function bound to |this|.
-     * @type {Function}
+     * @type {!Function|undefined}
      * @private
      */
     boundSyncWidthAndPositionToInput_: undefined,
diff --git a/ui/webui/resources/js/cr/ui/bubble_button.js b/ui/webui/resources/js/cr/ui/bubble_button.js
index 7216a2d..fa1d8a8 100644
--- a/ui/webui/resources/js/cr/ui/bubble_button.js
+++ b/ui/webui/resources/js/cr/ui/bubble_button.js
@@ -8,6 +8,7 @@ cr.define('cr.ui', function() {
    * keyboard or mouse.
    * @constructor
    * @extends {HTMLSpanElement}
+   * @implements {EventListener}
    */
   var BubbleButton = cr.ui.define('span');
 
@@ -71,10 +72,19 @@ cr.define('cr.ui', function() {
           event.preventDefault();
           return;
       }
-      this.toggleBubble_();
+      this.toggleBubble();
       event.preventDefault();
       event.stopPropagation();
     },
+
+    /**
+     * Abstract method: subclasses should overwrite it. There is no way to mark
+     *     method as abstract for Closure Compiler, as of
+     *     https://github.com/google/closure-compiler/issues/104.
+     * @type {!Function|undefined}
+     * @protected
+     */
+    toggleBubble: assertNotReached,
   };
 
   // Export.
diff --git a/ui/webui/resources/js/cr/ui/grid.js b/ui/webui/resources/js/cr/ui/grid.js
index ecfc56e..54ca960 100644
--- a/ui/webui/resources/js/cr/ui/grid.js
+++ b/ui/webui/resources/js/cr/ui/grid.js
@@ -37,7 +37,7 @@ cr.define('cr.ui', function() {
      * Called when an element is decorated as a grid item.
      */
     decorate: function() {
-      ListItem.prototype.decorate.call(this, arguments);
+      ListItem.prototype.decorate.apply(this, arguments);
       this.textContent = this.dataItem;
     }
   };
@@ -63,7 +63,7 @@ cr.define('cr.ui', function() {
 
     /**
      * Function used to create grid items.
-     * @type {function(): !GridItem}
+     * @type {function(new:cr.ui.GridItem, Object)}
      * @override
      */
     itemConstructor_: GridItem,
@@ -250,13 +250,12 @@ cr.define('cr.ui', function() {
      * puts spacers on the right places.
      * @param {number} firstIndex The index of first item, inclusively.
      * @param {number} lastIndex The index of last item, exclusively.
-     * @param {Object.<string, ListItem>} cachedItems Old items cache.
-     * @param {Object.<string, ListItem>} newCachedItems New items cache.
+     * @param {Object.<string, cr.ui.ListItem>} cachedItems Old items cache.
+     * @param {Object.<string, cr.ui.ListItem>} newCachedItems New items cache.
      * @override
      */
     mergeItems: function(firstIndex, lastIndex, cachedItems, newCachedItems) {
-      List.prototype.mergeItems.call(this,
-          firstIndex, lastIndex, cachedItems, newCachedItems);
+      List.prototype.mergeItems.call(this, firstIndex, lastIndex);
 
       var afterFiller = this.afterFiller_;
       var columns = this.columns;
@@ -342,7 +341,7 @@ cr.define('cr.ui', function() {
    *     interact with.
    * @param {cr.ui.Grid} grid The grid to interact with.
    * @constructor
-   * @extends {!cr.ui.ListSelectionController}
+   * @extends {cr.ui.ListSelectionController}
    */
   function GridSelectionController(selectionModel, grid) {
     this.selectionModel_ = selectionModel;
diff --git a/ui/webui/resources/js/cr/ui/list_single_selection_model.js b/ui/webui/resources/js/cr/ui/list_single_selection_model.js
index 1637691..70f39eda 100644
--- a/ui/webui/resources/js/cr/ui/list_single_selection_model.js
+++ b/ui/webui/resources/js/cr/ui/list_single_selection_model.js
@@ -12,7 +12,7 @@ cr.define('cr.ui', function() {
    * @param {number=} opt_length The number items in the selection.
    *
    * @constructor
-   * @extends {!cr.EventTarget}
+   * @extends {cr.EventTarget}
    */
   function ListSingleSelectionModel(opt_length) {
     this.length_ = opt_length || 0;
diff --git a/ui/webui/resources/js/cr/ui/position_util.js b/ui/webui/resources/js/cr/ui/position_util.js
index 0f86bbf..14b29d9 100644
--- a/ui/webui/resources/js/cr/ui/position_util.js
+++ b/ui/webui/resources/js/cr/ui/position_util.js
@@ -211,13 +211,14 @@ cr.define('cr.ui', function() {
    *     to.
    * @param {!HTMLElement} popupElement The popup element we are positioning.
    * @param {cr.ui.AnchorType} type The type of anchoring we want.
-   * @param {boolean} invertLeftRight Whether to invert the right/left
+   * @param {boolean=} opt_invertLeftRight Whether to invert the right/left
    *     alignment.
    */
   function positionPopupAroundElement(anchorElement, popupElement, type,
-                                      invertLeftRight) {
+                                      opt_invertLeftRight) {
     var anchorRect = anchorElement.getBoundingClientRect();
-    positionPopupAroundRect(anchorRect, popupElement, type, invertLeftRight);
+    positionPopupAroundRect(anchorRect, popupElement, type,
+                            !!opt_invertLeftRight);
   }
 
   /**
diff --git a/ui/webui/resources/js/cr/ui/repeating_button.js b/ui/webui/resources/js/cr/ui/repeating_button.js
index 35f2356..696ff9f 100644
--- a/ui/webui/resources/js/cr/ui/repeating_button.js
+++ b/ui/webui/resources/js/cr/ui/repeating_button.js
@@ -38,22 +38,22 @@ cr.define('cr.ui', function() {
     holdRepeatIntervalTime_: 50,
 
     /**
-     * Callback function when repeated intervals trigger. Initialized when the
-     * button is held for an initial delay period and cleared when the button
-     * is released.
-     * @type {function}
+     * Callback function ID when repeated intervals trigger. Initialized when
+     * the button is held for an initial delay period and cleared when the
+     * button is released.
+     * @type {number|undefined}
      * @private
      */
-    intervalCallback_: undefined,
+    intervalCallbackId_: undefined,
 
     /**
      * Callback function to arm the repeat timer. Initialized when the button
      * is pressed and cleared when the interval timer is set or the button is
      * released.
-     * @type {function}
+     * @type {number|undefined}
      * @private
      */
-    armRepeaterCallback_: undefined,
+    armRepeaterCallbackId_: undefined,
 
     /**
      * Initializes the button.
@@ -97,18 +97,19 @@ cr.define('cr.ui', function() {
       //               initial delay and repeat interval.
       this.buttonHeld_();
       var self = this;
-      this.armRepeaterCallback_ = function() {
+      var armRepeaterCallback = function() {
         // In the event of a click/tap operation, this button has already been
         // released by the time this timeout triggers. Test to ensure that the
         // button is still being held (i.e. clearTimeout has not been called).
-        if (self.armRepeaterCallback_) {
-          self.armRepeaterCallback_ = undefined;
+        if (typeof self.armRepeaterCallbackId_ != 'undefined') {
+          self.armRepeaterCallbackId_ = undefined;
           self.buttonHeld_();
-          self.intervalCallback_ = setInterval(self.buttonHeld_.bind(self),
-                                               self.holdRepeatIntervalTime_);
+          self.intervalCallbackId_ = setInterval(self.buttonHeld_.bind(self),
+                                                 self.holdRepeatIntervalTime_);
         }
       };
-      setTimeout(this.armRepeaterCallback_, this.holdDelayTime_);
+      this.armRepeaterCallbackId_ = setTimeout(armRepeaterCallback,
+                                               this.holdDelayTime_);
     },
 
     /**
@@ -125,13 +126,13 @@ cr.define('cr.ui', function() {
      * @private
      */
     clearTimeout_: function() {
-      if (this.armRepeaterCallback_) {
-        clearTimeout(this.armRepeaterCallback_);
-        this.armRepeaterCallback_ = undefined;
+      if (typeof this.armRepeaterCallbackId_ != 'undefined') {
+        clearTimeout(this.armRepeaterCallbackId_);
+        this.armRepeaterCallbackId_ = undefined;
       }
-      if (this.intervalCallback_) {
-        clearInterval(this.intervalCallback_);
-        this.intervalCallback_ = undefined;
+      if (typeof this.intervalCallbackId_ != 'undefined') {
+        clearInterval(this.intervalCallbackId_);
+        this.intervalCallbackId_ = undefined;
       }
     },