[Extensions] Update Error Console UI

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';
 
   /**
    * Clear all the content of a given element.
    * @param {HTMLElement} element The element to be cleared.
@@ skipping 98 matching lines @@
       assert(this.contextUrl_);
     },
 
     /**
      * Sets the error for the content.
      * @param {(RuntimeError|ManifestError)} error The error whose content
      *     should be displayed.
      * @param {string} extensionUrl The URL associated with this extension.
      */
     setError: function(error, extensionUrl) {
+      this.clearError();
+
       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.
@@ skipping 110 matching lines @@
     /**
      * 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 file.substr(0, extensionUrl.length) == extensionUrl ||
            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;
-  };
-
   cr.addSingletonGetter(ExtensionErrorOverlay);
 
   ExtensionErrorOverlay.prototype = {
     /**
      * The underlying error whose details are being displayed.
      * @type {?(RuntimeError|ManifestError)}
      * @private
      */
-    error_: null,
+    selectedError_: 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');
@@ skipping 48 matching lines @@
      * Handles a click on the dismiss ("OK" or close) buttons.
      * @param {Event} e The click event.
      * @private
      */
     handleDismiss_: function(e) {
       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_)
+      if (!this.selectedError_)
         return;
 
       // Remove all previous content.
       this.codeDiv_.clear();
 
-      this.openDevtoolsButton_.hidden = true;
+      this.overlayDiv_.querySelector('.extension-error-list').onRemoved();
 
-      if (this.error_.type == ExtensionErrorOverlay.RUNTIME_ERROR_TYPE_) {
-        this.overlayDiv_.querySelector('.content-area').removeChild(
+      this.clearRuntimeContent_();
+
+      this.selectedError_ = null;
+    },
+
+    /**
+     * Clears the current content.
+     * @private
+     */
+    clearRuntimeContent_: function() {
+      if (this.runtimeErrorContent_.parentNode) {
+        this.runtimeErrorContent_.parentNode.removeChild(
             this.runtimeErrorContent_);
         this.runtimeErrorContent_.clearError();
       }
-
-      this.error_ = null;
+      this.openDevtoolsButton_.hidden = true;
     },
 
     /**
-     * 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 {(RuntimeError|ManifestError)} error The error to show in the
-     *     overlay.
-     * @param {string} extensionUrl The URL of the extension, in the form
-     *     "chrome-extension://<extension_id>".
-     * TODO(dbeam): add URL externs and re-enable typechecking in this method.
-     * @suppress {missingProperties}

[Dan Beam, 2015/04/28 17:08:07]

add this back

[Devlin, 2015/04/29 16:08:37]

Done.

+     * Sets the active error for the overlay.
+     * @param {?(ManifestError|RuntimeError)} error The error to make active.
+     * @private
      */
-    setErrorAndShowOverlay: function(error, extensionUrl) {
-      this.error_ = error;
+    setActiveError_: function(error) {
+      this.selectedError_ = error;
 
-      if (this.error_.type == ExtensionErrorOverlay.RUNTIME_ERROR_TYPE_) {
-        this.runtimeErrorContent_.setError(this.error_, extensionUrl);
+      // If there is no error (this can happen if, e.g., the user deleted all
+      // the errors), then clear the content.
+      if (!error) {
+        this.codeDiv_.populate(
+            null, loadTimeData.getString('extensionErrorNoErrorsCodeMessage'));
+        this.clearRuntimeContent_();
+        return;
+      }
+
+      var extensionUrl = 'chrome-extension://' + error.extensionId + '/';
+      // Set or hide runtime content.
+      if (error.type == chrome.developerPrivate.ErrorType.RUNTIME) {
+        this.runtimeErrorContent_.setError(error, extensionUrl);
         this.overlayDiv_.querySelector('.content-area').insertBefore(
             this.runtimeErrorContent_,
             this.codeDiv_.nextSibling);
         this.openDevtoolsButton_.hidden = false;
         this.openDevtoolsButton_.disabled = !error.canInspect;
+      } else {
+        this.clearRuntimeContent_();
       }
 
+      // Read the file source to populate the code section, or set it to null if
+      // the file is unreadable.
       if (ExtensionErrorOverlay.canLoadFileSource(error.source, extensionUrl)) {
-        // slice(1) because pathname starts with a /.
-        var pathname = new URL(error.source).pathname.slice(1);
-
         // Use pathname instead of relativeUrl.
         var requestFileSourceArgs = {extensionId: error.extensionId,
-                                     message: error.message,
-                                     pathSuffix: pathname};
-
-        if (pathname.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;
+                                     message: error.message};
+        switch (error.type) {
+          case chrome.developerPrivate.ErrorType.MANIFEST:
+            requestFileSourceArgs.pathSuffix = error.source;
+            requestFileSourceArgs.manifestKey = error.manifestKey;
+            requestFileSourceArgs.manifestSpecific = error.manifestSpecific;
+            break;
+          case chrome.developerPrivate.ErrorType.RUNTIME:
+            // slice(1) because pathname starts with a /.
+            var pathname = new URL(error.source).pathname.slice(1);
+            requestFileSourceArgs.pathSuffix = pathname;
+            requestFileSourceArgs.lineNumber =
+                error.stackTrace && error.stackTrace[0] ?
+                    error.stackTrace[0].lineNumber : 0;
+            break;
+          default:
+            assertNotReached();
         }
         this.requestFileSource(requestFileSourceArgs);
       } else {
         this.onFileSourceResponse_(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 {Array<(RuntimeError|ManifestError)>} errors The error to show in
+     *     the overlay.
+     * @param {string} extensionId The id of the extension.
+     * @param {string} extensionName The name of the extension.
+     */
+    setErrorsAndShowOverlay: function(errors, extensionId, extensionName) {
+      document.querySelector(
+          '#extension-error-overlay .extension-error-overlay-title').
+              textContent = extensionName;
+      var errorsDiv = this.overlayDiv_.querySelector('.extension-error-list');
+      var extensionErrors =
+          new extensions.ExtensionErrorList(errors, extensionId);
+      errorsDiv.parentNode.replaceChild(extensionErrors, errorsDiv);
+      extensionErrors.addEventListener('activeExtensionErrorChanged',
+                                       function(e) {
+        this.setActiveError_(e.detail);
+      }.bind(this));
+
+      if (errors.length > 0)
+        this.setActiveError_(errors[0]);
+      this.setVisible(true);
+    },
+
+    /**
      * Requests a file's source.
      * @param {RequestFileSourceProperties} args The arguments for the call.
      */
     requestFileSource: function(args) {
       chrome.developerPrivate.requestFileSource(
           args, this.onFileSourceResponse_.bind(this));
     },
 
     /**
      * Set the code to be displayed in the code portion of the overlay.
      * @see ExtensionErrorOverlay.requestFileSourceResponse().
      * @param {?RequestFileSourceResponse} response The response from the
      *     request file source call, which will be shown as code. If |response|
      *     is null, then a "Could not display code" message will be displayed
      *     instead.
      */
     onFileSourceResponse_: function(response) {
-      if (response) {
-        document.querySelector(
-            '#extension-error-overlay .extension-error-overlay-title').
-                textContent = response.title;
-      }
       this.codeDiv_.populate(
           response,  // ExtensionCode can handle a null response.
           loadTimeData.getString('extensionErrorOverlayNoCodeToDisplay'));
       this.setVisible(true);
     },
   };
 
   // Export
   return {
     ExtensionErrorOverlay: ExtensionErrorOverlay
   };
 });