Integrate ErrorConsole with Apps Dev Tool

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.
 
 cr.define('extensions', function() {
   'use strict';
 
   /**
+   * Get the url relative to the main extension url. If the url is
+   * unassociated with the extension, this will be the full url.
+   * @param {string} url The url to make relative.
+   * @param {string} extensionUrl The url for the extension resources, in the
+   *     form "chrome-etxension://<extension_id>/".
+   * @return {string} The url relative to the host.
+   */
+  function getRelativeUrl(url, extensionUrl) {
+    return url.substring(0, extensionUrl.length) == extensionUrl ?
+        url.substring(extensionUrl.length) : url;
+  }
+
+  /**
    * The RuntimeErrorContent manages all content specifically associated with
    * runtime errors; this includes stack frames and the context url.
    * @constructor
    * @extends {HTMLDivElement}
    */
   function RuntimeErrorContent() {
     var contentArea = $('template-collection-extension-error-overlay').
         querySelector('.extension-error-overlay-runtime-content').
         cloneNode(true);
     contentArea.__proto__ = RuntimeErrorContent.prototype;
@@ skipping 14 matching lines @@
    * want to include any of our own code in stack traces.
    * @param {string} url The url in question.
    * @return {boolean} True if the url should be displayed, and false
    *     otherwise (i.e., if it is an internal script).
    */
   RuntimeErrorContent.shouldDisplayForUrl = function(url) {
     // All our internal scripts are in the 'extensions::' namespace.
     return !/^extensions::/.test(url);
   };
 
+  /**
+   * Send a call to chrome to open the developer tools for an error.
+   * This will call either the bound function in ExtensionErrorHandler or the
+   * API function from developerPrivate, depending on whether this is being
+   * used in the native chrome:extensions page or the Apps Developer Tool.
+   * @see chrome/browser/ui/webui/extensions/extension_error_ui_util.h
+   * @param {Object} args The arguments to pass to openDevTools.
+   * @private
+   */
+  RuntimeErrorContent.openDevtools_ = function(args) {
+    if (chrome.send) {
+      chrome.send('extensionErrorOpenDevTools', [args]);
+    } else if (chrome.developerPrivate) {
+      chrome.developerPrivate.openDevTools(args);
+    } else {
+      console.error('Cannot call either openDevTools function.');

[Dan Beam, 2014/02/11 02:43:49]

when do you expect this to ever happen?

[Devlin, 2014/02/11 18:41:16]

Ideally, _never_.  Would it be best to remove it, assert instead, or...?  (I'm
not sure how we usually spell NOTREACHED() in JS...)

+    }

[Dan Beam, 2014/02/11 02:43:49]

no curlies

[Devlin, 2014/02/11 18:41:16]

Done.

+  };
+
   RuntimeErrorContent.prototype = {
     __proto__: HTMLDivElement.prototype,
 
     /**
      * The underlying error whose details are being displayed.
      * @type {Object}
      * @private
      */
     error_: undefined,
 
     /**
-     * The URL associated with this extension, i.e. chrome-extension://<id>.
+     * The URL associated with this extension, i.e. chrome-extension://<id>/.
      * @type {string}
      * @private
      */
     extensionUrl_: undefined,
 
     /**
      * The node of the stack trace which is currently active.
      * @type {HTMLElement}
      * @private
      */
@@ skipping 18 matching lines @@
        * @private
        */
       this.contextUrl_ =
           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 {string} extensionUrl The URL associated with this extension.
      */
-    setError: function(error) {
+    setError: function(error, extensionUrl) {
       this.error_ = error;
-      this.extensionUrl_ = 'chrome-extension://' + error.extensionId + '/';
+      this.extensionUrl_ = extensionUrl;
       this.contextUrl_.textContent = error.contextUrl ?
-          this.getRelativeUrl_(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.stackTrace_.innerHTML = '';
       this.stackTrace_.hidden = true;
     },
 
     /**
-     * Returns whether or not a given |url| is associated with the current
-     * extension.
-     * @param {string} url The url to examine.
-     * @return {boolean} Whether or not the url is associated with the extension
-     * @private
-     */
-    isRelatedUrl_: function(url) {
-      return url.substring(0, this.extensionUrl_.length) == this.extensionUrl_;
-    },
-
-    /**
-     * Get the url relative to the main extension url. If the url is
-     * unassociated with the extension, this will be the full url.
-     * @param {string} url The url to make relative.
-     * @return {string} The url relative to the host.
-     * @private
-     */
-    getRelativeUrl_: function(url) {
-      return this.isRelatedUrl_(url, this.extensionUrl_) ?
-          url.substring(this.extensionUrl_.length) : url;
-    },
-
-    /**
      * Makes |frame| active and deactivates the previously active frame (if
      * there was one).
      * @param {HTMLElement} frame The frame to activate.
      * @private
      */
     setActiveFrame_: function(frameNode) {
       if (this.currentFrameNode_) {
         this.currentFrameNode_.classList.remove(
             RuntimeErrorContent.ACTIVE_CLASS_NAME);
       }
@@ skipping 16 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 =
-            this.getRelativeUrl_(frame.url) + ':' + frame.lineNumber;
+        var description = getRelativeUrl(frame.url, this.extensionUrl_) +
+                          ':' + frame.lineNumber;

[Dan Beam, 2014/02/11 02:43:49]

nit: arguably, revert the style difference

[Devlin, 2014/02/11 18:41:16]

Doesn't fit on one line anymore (needs the new parameter |extensionUrl|). :/

         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().
-          chrome.send('extensionErrorRequestFileSource',
-                      [{extensionId: this.error_.extensionId,
-                        message: this.error_.message,
-                        pathSuffix: this.getRelativeUrl_(frame.url),
-                        lineNumber: frame.lineNumber}]);
+          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);
       }
     },
 
     /**
      * Open the developer tools for the active stack frame.
      */
     openDevtools: function() {
       var stackFrame =
           this.error_.stackTrace[this.currentFrameNode_.indexIntoTrace];
 
-      chrome.send('extensionErrorOpenDevTools',
-                  [{renderProcessId: this.error_.renderProcessId,
-                    renderViewId: this.error_.renderViewId,
-                    url: stackFrame.url,
-                    lineNumber: stackFrame.lineNumber || 0,
-                    columnNumber: stackFrame.columnNumber || 0}]);
+      RuntimeErrorContent.openDevtools_(
+          {renderProcessId: this.error_.renderProcessId,
+           renderViewId: this.error_.renderViewId,
+           url: stackFrame.url,
+           lineNumber: stackFrame.lineNumber || 0,
+           columnNumber: stackFrame.columnNumber || 0});
     }
   };
 
   /**
    * The ExtensionErrorOverlay will show the contents of a file which pertains
    * to the ExtensionError; this is either the manifest file (for manifest
    * errors) or a source file (for runtime errors). If possible, the portion
    * of the file which caused the error will be highlighted.
    * @constructor
    */
   function ExtensionErrorOverlay() {
     /**
      * The content section for runtime errors; this is re-used for all
      * runtime errors and attached/detached from the overlay as needed.
      * @type {RuntimeErrorContent}
      * @private
      */
     this.runtimeErrorContent_ = new RuntimeErrorContent();
   }
 
   /**
    * Value of ExtensionError::RUNTIME_ERROR enum.
    * @see extensions/browser/extension_error.h
    * @type {number}
    * @const
    * @private
    */
   ExtensionErrorOverlay.RUNTIME_ERROR_TYPE_ = 1;
 
+  /**
+   * The manifest filename.
+   * @type {string}
+   * @const
+   * @private
+   */
+  ExtensionErrorOverlay.MANIFEST_FILENAME_ = 'manifest.json';
+
+  /**
+   * Determine whether or not chrome can load the source for a given file; this
+   * can only be done if the file belongs to the extension.
+   * @param {string} file The file to load.
+   * @param {string} extensionUrl The url for the extension, in the form
+   *     chrome-extension://<extension-id>/.
+   * @return {boolean} True if the file can be loaded, false otherwise.
+   * @private
+   */
+  ExtensionErrorOverlay.canLoadFileSource = function(file, extensionUrl) {
+    return RegExp('^' + extensionUrl).test(file) ||

[Dan Beam, 2014/02/11 02:43:49]

nit: arguably just re-use the .substr(0, extensionUrl.length) = extensionUrl

[Devlin, 2014/02/11 18:41:16]

Done.

+           file.toLowerCase() == ExtensionErrorOverlay.MANIFEST_FILENAME_;
+  };
+
+  /**
+   * Determine whether or not we can show an overlay with more details for
+   * the given extension error.
+   * @param {Object} error The extension error.
+   * @param {string} extensionUrl The url for the extension, in the form
+   *     "chrome-extension://<extension-id>/".
+   * @return {boolean} True if we can show an overlay for the error,
+   *     false otherwise.
+   */
+  ExtensionErrorOverlay.canShowOverlayForError = function(error, extensionUrl) {
+    if (ExtensionErrorOverlay.canLoadFileSource(error.source, extensionUrl))
+      return true;
+
+    if (error.stackTrace) {
+      for (var i = 0; i < error.stackTrace.length; ++i) {
+        if (RuntimeErrorContent.shouldDisplayForUrl(error.stackTrace[i].url))
+          return true;
+      }
+    }
+
+    return false;
+  };
+
+  /**
+   * Send a call to chrome to request the source of a given file.
+   * This will call either the bound function in ExtensionErrorHandler or the
+   * API function from developerPrivate, depending on whether this is being
+   * used in the native chrome:extensions page or the Apps Developer Tool.
+   * @see chrome/browser/ui/webui/extensions/extension_error_ui_util.h
+   * @param {Object} args The arguments to pass to requestFileSource.
+   */
+  ExtensionErrorOverlay.requestFileSource = function(args) {
+    if (chrome.send) {
+      chrome.send('extensionErrorRequestFileSource', [args]);
+    } else if (chrome.developerPrivate) {
+      chrome.developerPrivate.requestFileSource(args, function(result) {
+          extensions.ExtensionErrorOverlay.requestFileSourceResponse(result);

[Dan Beam, 2014/02/11 02:43:49]

-2\s

[Devlin, 2014/02/11 18:41:16]

Done.

+      });
+    } else {
+      console.error('Cannot call either requestFileSource function.');

[Dan Beam, 2014/02/11 02:43:49]

why will this happen?

[Devlin, 2014/02/11 18:41:16]

Again, ideally never (see above).

+    }
+  };
+
   cr.addSingletonGetter(ExtensionErrorOverlay);
 
   ExtensionErrorOverlay.prototype = {
     /**
      * The underlying error whose details are being displayed.
      * @type {Object}
      * @private
      */
     error_: undefined,
 
     /**
      * Initialize the page.
+     * @param {function} showOverlay The function to show or hide the

[Dan Beam, 2014/02/11 02:43:49]

@param {function(HTMLDivElement)} showOverlay

[Devlin, 2014/02/11 18:41:16]

Done.

+     *     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() {
+    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');
 
       /**
+       * 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);
+      };

[Dan Beam, 2014/02/11 02:43:49]

please move this out of the ctor

[Devlin, 2014/02/11 18:41:16]

This uses the showOverlay parameter passed into the ctor, so we'd have to set
this.showOverlay_ = showOverlay and then use it in setVisible, so I'm not sure
this would make it any cleaner...? (If it does, happy to change it, just want to
make sure you saw the reason it was in here to begin.)

+
+      /**
        * The portion of the overlay which shows the code relating to the error.
        * @type {HTMLElement}
        * @private
        */
       this.codeDiv_ = $('extension-error-overlay-code');
 
       /**
        * The button to open the developer tools (only available for runtime
        * errors).
        * @type {HTMLButtonElement}
        * @private
        */
       this.openDevtoolsButton_ = $('extension-error-overlay-devtools-button');
       this.openDevtoolsButton_.addEventListener('click', function() {
           this.runtimeErrorContent_.openDevtools();
       }.bind(this));
     },
 

[Dan Beam, 2014/02/11 02:43:49]

to somewhere like here:

  /* ... */
  setVisible: function(...) {
    ...
  },

[Devlin, 2014/02/11 18:41:16]

See above.

     /**
      * Handles a click on the dismiss ("OK" or close) buttons.
      * @param {Event} e The click event.
      * @private
      */
     handleDismiss_: function(e) {
-      extensions.ExtensionSettings.showOverlay(null);
+      this.setVisible(false);
 
       // There's a chance that the overlay receives multiple dismiss events; in
       // this case, handle it gracefully and return (since all necessary work
       // will already have been done).
       if (!this.error_)
         return;
 
       this.codeDiv_.innerHTML = '';
       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;
     },
 
     /**
      * 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 {string} extensionUrl The URL of the extension, in the form
+     *     "chrome-extension://<extension_id>".
      */
-    setError: function(error) {
+    setErrorAndShowOverlay: function(error, extensionUrl) {
       this.error_ = error;
 
       if (this.error_.type == ExtensionErrorOverlay.RUNTIME_ERROR_TYPE_) {
-        this.runtimeErrorContent_.setError(this.error_);
+        this.runtimeErrorContent_.setError(this.error_, extensionUrl);
         this.overlayDiv_.querySelector('.content-area').insertBefore(
             this.runtimeErrorContent_,
             this.codeDiv_.nextSibling);
         this.openDevtoolsButton_.hidden = false;
         this.openDevtoolsButton_.disabled = !error.canInspect;
       }
+
+      if (ExtensionErrorOverlay.canLoadFileSource(error.source, extensionUrl)) {
+        var relativeUrl = getRelativeUrl(error.source, extensionUrl);
+
+        var requestFileSourceArgs = {extensionId: error.extensionId,
+                                     message: error.message,
+                                     pathSuffix: relativeUrl};
+
+        if (relativeUrl.toLowerCase() ==
+                ExtensionErrorOverlay.MANIFEST_FILENAME_) {
+          requestFileSourceArgs.manifestKey = error.manifestKey;
+          requestFileSourceArgs.manifestSpecific = error.manifestSpecific;
+        } else {
+          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
      *     a "Could not display code" message will be displayed instead.
      */
     setCode: function(code) {
       document.querySelector(
@@ skipping 35 matching lines @@
   /**
    * 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.
    */
   ExtensionErrorOverlay.requestFileSourceResponse = function(result) {
-    extensions.ExtensionErrorOverlay.getInstance().setCode(result);
-    extensions.ExtensionSettings.showOverlay($('extension-error-overlay'));
+    var overlay = extensions.ExtensionErrorOverlay.getInstance();
+    overlay.setCode(result);
+    overlay.setVisible(true);
   };
 
   // Export
   return {
     ExtensionErrorOverlay: ExtensionErrorOverlay
   };
 });