Revert of Revert "Typecheck JS files for chrome://extensions"

chrome/browser/resources/extensions/extension_error_overlay.js

 // Copyright 2013 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+/**
+ * The type of the stack trace object. The definition is based on
+ * extensions/browser/extension_error.cc:RuntimeError::ToValue().
+ * @typedef {{columnNumber: number,
+ *            functionName: string,
+ *            lineNumber: number,
+ *            url: string}}
+ */
+var StackTrace;
+
+/**
+ * The type of the extension error trace object. The definition is based on
+ * extensions/browser/extension_error.cc:RuntimeError::ToValue().
+ * @typedef {{canInspect: (boolean|undefined),
+ *            contextUrl: (string|undefined),
+ *            extensionId: string,
+ *            fromIncognito: boolean,
+ *            level: number,
+ *            manifestKey: string,
+ *            manifestSpecific: string,
+ *            message: string,
+ *            renderProcessId: (number|undefined),
+ *            renderViewId: (number|undefined),
+ *            source: string,
+ *            stackTrace: (Array.<StackTrace>|undefined),
+ *            type: number}}
+ */
+var RuntimeError;
+
 cr.define('extensions', function() {
   'use strict';
 
   /**
    * Clear all the content of a given element.
    * @param {HTMLElement} element The element to be cleared.
    */
   function clearElement(element) {
     while (element.firstChild)
       element.removeChild(element.firstChild);
@@ skipping 63 matching lines @@
       chrome.developerPrivate.openDevTools(args);
     else
       assertNotReached('Cannot call either openDevTools function.');
   };
 
   RuntimeErrorContent.prototype = {
     __proto__: HTMLDivElement.prototype,
 
     /**
      * The underlying error whose details are being displayed.
-     * @type {Object}
+     * @type {?RuntimeError}
      * @private
      */
-    error_: undefined,
+    error_: null,
 
     /**
      * The URL associated with this extension, i.e. chrome-extension://<id>/.
-     * @type {string}
+     * @type {?string}
      * @private
      */
-    extensionUrl_: undefined,
+    extensionUrl_: null,
 
     /**
      * The node of the stack trace which is currently active.
-     * @type {HTMLElement}
+     * @type {?HTMLElement}
      * @private
      */
-    currentFrameNode_: undefined,
+    currentFrameNode_: null,
 
     /**
      * Initialize the RuntimeErrorContent for the first time.
      */
     init: function() {
       /**
        * The stack trace element in the overlay.
        * @type {HTMLElement}
        * @private
        */
-      this.stackTrace_ =
-          this.querySelector('.extension-error-overlay-stack-trace-list');
+      this.stackTrace_ = /** @type {HTMLElement} */(
+          this.querySelector('.extension-error-overlay-stack-trace-list'));
       assert(this.stackTrace_);
 
       /**
        * The context URL element in the overlay.
        * @type {HTMLElement}
        * @private
        */
-      this.contextUrl_ =
-          this.querySelector('.extension-error-overlay-context-url');
+      this.contextUrl_ = /** @type {HTMLElement} */(
+          this.querySelector('.extension-error-overlay-context-url'));
       assert(this.contextUrl_);
     },
 
     /**
      * Sets the error for the content.
-     * @param {Object} error The error whose content should be displayed.
+     * @param {RuntimeError} error The error whose content should
+     *     be displayed.
      * @param {string} extensionUrl The URL associated with this extension.
      */
     setError: function(error, extensionUrl) {
       this.error_ = error;
       this.extensionUrl_ = extensionUrl;
       this.contextUrl_.textContent = error.contextUrl ?
           getRelativeUrl(error.contextUrl, this.extensionUrl_) :
           loadTimeData.getString('extensionErrorOverlayContextUnknown');
       this.initStackTrace_();
     },
 
     /**
      * Wipe content associated with a specific error.
      */
     clearError: function() {
-      this.error_ = undefined;
-      this.extensionUrl_ = undefined;
-      this.currentFrameNode_ = undefined;
+      this.error_ = null;
+      this.extensionUrl_ = null;
+      this.currentFrameNode_ = null;
       clearElement(this.stackTrace_);
       this.stackTrace_.hidden = true;
     },
 
     /**
      * Makes |frame| active and deactivates the previously active frame (if
      * there was one).
-     * @param {HTMLElement} frame The frame to activate.
+     * @param {HTMLElement} frameNode The frame to activate.
      * @private
      */
     setActiveFrame_: function(frameNode) {
       if (this.currentFrameNode_) {
         this.currentFrameNode_.classList.remove(
             RuntimeErrorContent.ACTIVE_CLASS_NAME);
       }
 
       this.currentFrameNode_ = frameNode;
       this.currentFrameNode_.classList.add(
@@ skipping 13 matching lines @@
           continue;
 
         var frameNode = document.createElement('li');
         // Attach the index of the frame to which this node refers (since we
         // may skip some, this isn't a 1-to-1 match).
         frameNode.indexIntoTrace = i;
 
         // The description is a human-readable summation of the frame, in the
         // form "<relative_url>:<line_number> (function)", e.g.
         // "myfile.js:25 (myFunction)".
-        var description = getRelativeUrl(frame.url, this.extensionUrl_) +
-                          ':' + frame.lineNumber;
+        var description = getRelativeUrl(frame.url,
+            assert(this.extensionUrl_)) + ':' + frame.lineNumber;
         if (frame.functionName) {
           var functionName = frame.functionName == '(anonymous function)' ?
               loadTimeData.getString('extensionErrorOverlayAnonymousFunction') :
               frame.functionName;
           description += ' (' + functionName + ')';
         }
         frameNode.textContent = description;
 
         // When the user clicks on a frame in the stack trace, we should
         // highlight that overlay in the list, display the appropriate source
         // code with the line highlighted, and link the "Open DevTools" button
         // with that frame.
         frameNode.addEventListener('click', function(frame, frameNode, e) {
-          if (this.currStackFrame_ == frameNode)
-            return;
-
           this.setActiveFrame_(frameNode);
 
           // Request the file source with the section highlighted; this will
           // call ExtensionErrorOverlay.requestFileSourceResponse() when
           // completed, which in turn calls setCode().
           ExtensionErrorOverlay.requestFileSource(
               {extensionId: this.error_.extensionId,
                message: this.error_.message,
                pathSuffix: getRelativeUrl(frame.url, this.extensionUrl_),
                lineNumber: frame.lineNumber});
         }.bind(this, frame, frameNode));
 
         this.stackTrace_.appendChild(frameNode);
       }
 
       // Set the current stack frame to the first stack frame and show the
       // trace, if one exists. (We can't just check error.stackTrace, because
       // it's possible the trace was purely internal, and we don't show
       // internal frames.)
       if (this.stackTrace_.children.length > 0) {
         this.stackTrace_.hidden = false;
-        this.setActiveFrame_(this.stackTrace_.firstChild);
+        this.setActiveFrame_(assertInstanceof(this.stackTrace_.firstChild,
+            HTMLElement));
       }
     },
 
     /**
      * Open the developer tools for the active stack frame.
      */
     openDevtools: function() {
       var stackFrame =
           this.error_.stackTrace[this.currentFrameNode_.indexIntoTrace];
 
@@ skipping 95 matching lines @@
     } else {
       assertNotReached('Cannot call either requestFileSource function.');
     }
   };
 
   cr.addSingletonGetter(ExtensionErrorOverlay);
 
   ExtensionErrorOverlay.prototype = {
     /**
      * The underlying error whose details are being displayed.
-     * @type {Object}
+     * @type {?RuntimeError}
      * @private
      */
-    error_: undefined,
+    error_: null,
 
     /**
      * Initialize the page.
      * @param {function(HTMLDivElement)} showOverlay The function to show or
      *     hide the ExtensionErrorOverlay; this should take a single parameter
      *     which is either the overlay Div if the overlay should be displayed,
      *     or null if the overlay should be hidden.
      */
     initializePage: function(showOverlay) {
       var overlay = $('overlay');
       cr.ui.overlay.setupOverlay(overlay);
       cr.ui.overlay.globalInitialization();
       overlay.addEventListener('cancelOverlay', this.handleDismiss_.bind(this));
 
       $('extension-error-overlay-dismiss').addEventListener(
           'click', this.handleDismiss_.bind(this));
 
       /**
        * The element of the full overlay.
        * @type {HTMLDivElement}
        * @private
        */
-      this.overlayDiv_ = $('extension-error-overlay');
+      this.overlayDiv_ = /** @type {HTMLDivElement} */(
+          $('extension-error-overlay'));
 
       /**
        * The portion of the overlay which shows the code relating to the error
        * and the corresponding line numbers.
-       * @type {ExtensionCode}
+       * @type {extensions.ExtensionCode}
        * @private
        */
       this.codeDiv_ =
           new extensions.ExtensionCode($('extension-error-overlay-code'));
 
       /**
        * The function to show or hide the ExtensionErrorOverlay.
-       * @type {function}
        * @param {boolean} isVisible Whether the overlay should be visible.
        */
       this.setVisible = function(isVisible) {
         showOverlay(isVisible ? this.overlayDiv_ : null);
         if (isVisible)
           this.codeDiv_.scrollToError();
       };
 
       /**
        * The button to open the developer tools (only available for runtime
        * errors).
        * @type {HTMLButtonElement}
        * @private
        */
-      this.openDevtoolsButton_ = $('extension-error-overlay-devtools-button');
+      this.openDevtoolsButton_ = /** @type {HTMLButtonElement} */(
+          $('extension-error-overlay-devtools-button'));
       this.openDevtoolsButton_.addEventListener('click', function() {
           this.runtimeErrorContent_.openDevtools();
       }.bind(this));
     },
 
     /**
      * Handles a click on the dismiss ("OK" or close) buttons.
      * @param {Event} e The click event.
      * @private
      */
@@ skipping 10 matching lines @@
       this.codeDiv_.clear();
 
       this.openDevtoolsButton_.hidden = true;
 
       if (this.error_.type == ExtensionErrorOverlay.RUNTIME_ERROR_TYPE_) {
         this.overlayDiv_.querySelector('.content-area').removeChild(
             this.runtimeErrorContent_);
         this.runtimeErrorContent_.clearError();
       }
 
-      this.error_ = undefined;
+      this.error_ = null;
     },
 
     /**
      * Associate an error with the overlay. This will set the error for the
      * overlay, and, if possible, will populate the code section of the overlay
      * with the relevant file, load the stack trace, and generate links for
      * opening devtools (the latter two only happen for runtime errors).
-     * @param {Object} error The error to show in the overlay.
+     * @param {RuntimeError} error The error to show in the overlay.
      * @param {string} extensionUrl The URL of the extension, in the form
      *     "chrome-extension://<extension_id>".
      */
     setErrorAndShowOverlay: function(error, extensionUrl) {
       this.error_ = error;
 
       if (this.error_.type == ExtensionErrorOverlay.RUNTIME_ERROR_TYPE_) {
         this.runtimeErrorContent_.setError(this.error_, extensionUrl);
         this.overlayDiv_.querySelector('.content-area').insertBefore(
             this.runtimeErrorContent_,
@@ skipping 17 matching lines @@
           requestFileSourceArgs.lineNumber =
               error.stackTrace && error.stackTrace[0] ?
                   error.stackTrace[0].lineNumber : 0;
         }
         ExtensionErrorOverlay.requestFileSource(requestFileSourceArgs);
       } else {
         ExtensionErrorOverlay.requestFileSourceResponse(null);
       }
     },
 
+
     /**
      * Set the code to be displayed in the code portion of the overlay.
      * @see ExtensionErrorOverlay.requestFileSourceResponse().
-     * @param {?Object} code The code to be displayed. If |code| is null, then
+     * @param {?ExtensionHighlight} code The code to be displayed. If |code| is
+     *     null, then
      *     a "Could not display code" message will be displayed instead.
      */
     setCode: function(code) {
       document.querySelector(
           '#extension-error-overlay .extension-error-overlay-title').
               textContent = code.title;
 
       this.codeDiv_.populate(
           code,
           loadTimeData.getString('extensionErrorOverlayNoCodeToDisplay'));
     },
   };
 
   /**
    * Called by the ExtensionErrorHandler responding to the request for a file's
    * source. Populate the content area of the overlay and display the overlay.
-   * @param {Object?} result An object with four strings - the title,
-   *     beforeHighlight, afterHighlight, and highlight. The three 'highlight'
-   *     strings represent three portions of the file's content to display - the
-   *     portion which is most relevant and should be emphasized (highlight),
-   *     and the parts both before and after this portion. These may be empty.
+   * @param {?ExtensionHighlight} result The three 'highlight' strings represent
+   *     three portions of the file's content to display - the portion which is
+   *     most relevant and should be emphasized (highlight), and the parts both
+   *     before and after this portion. These may be empty.
    */
   ExtensionErrorOverlay.requestFileSourceResponse = function(result) {
     var overlay = extensions.ExtensionErrorOverlay.getInstance();
     overlay.setCode(result);
     overlay.setVisible(true);
   };
 
   // Export
   return {
     ExtensionErrorOverlay: ExtensionErrorOverlay
   };
 });