Improve UI for unpacked extensions failing to load

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.
-   */
-  function clearElement(element) {
-    while (element.firstChild)
-      element.removeChild(element.firstChild);
-  }
-
-  /**
    * 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;
@@ skipping 113 matching lines @@
       this.initStackTrace_();
     },
 
     /**
      * Wipe content associated with a specific error.
      */
     clearError: function() {
       this.error_ = undefined;
       this.extensionUrl_ = undefined;
       this.currentFrameNode_ = undefined;
-      clearElement(this.stackTrace_);
+      extensions.ExtensionUtil.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.
      * @private
      */
     setActiveFrame_: function(frameNode) {
@@ skipping 211 matching lines @@
       this.overlayDiv_ = $('extension-error-overlay');
 
       /**
        * The portion of the overlay which shows the code relating to the error
        * and the corresponding line numbers.
        * @type {HTMLElement}
        * @private
        */
       this.codeDiv_ = $('extension-error-overlay-code');
 
-      // Also initialize two properties of codeDiv for the section for the pure
-      // file content and the section for the line numbers.
-      this.codeDiv_.sourceDiv =
-          this.codeDiv_.querySelector('#extension-error-overlay-source');
-      this.codeDiv_.linesDiv =
-          this.codeDiv_.querySelector('#extension-error-overlay-line-numbers');
-
       /**
        * 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);
       };
 
       /**
@@ skipping 16 matching lines @@
     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_)
         return;
 
       // Remove all previous content.
-      clearElement(this.codeDiv_.sourceDiv);
-      clearElement(this.codeDiv_.linesDiv);
+      extensions.ExtensionUtil.clearElement(this.codeDiv_);
 
       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;
@@ skipping 46 matching lines @@
      * 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(
           '#extension-error-overlay .extension-error-overlay-title').
               textContent = code.title;
 
-      // Remove all previous content. This should be done on close, but, just in
-      // case we crashed, do it again.
-      clearElement(this.codeDiv_.sourceDiv);
-      clearElement(this.codeDiv_.linesDiv);
-
-      // If there's no code, then display an appropriate message.
-      if (!code) {
-        var span = document.createElement('span');
-        span.textContent =
-            loadTimeData.getString('extensionErrorOverlayNoCodeToDisplay');
-        this.codeDiv_.sourceDiv.appendChild(span);
-        return;
-      }
-
-      var lineCount = 0;
-      var createSpan = function(source, isHighlighted) {
-        lineCount += source.split('\n').length - 1;
-        var span = document.createElement('span');
-        span.className = isHighlighted ? 'highlighted-source' : 'normal-source';
-        span.textContent = source;
-        return span;
-      };
-
-      if (code.beforeHighlight) {
-        this.codeDiv_.sourceDiv.appendChild(
-            createSpan(code.beforeHighlight, false));
-      }
-
-      if (code.highlight) {
-        var highlightSpan = createSpan(code.highlight, true);
-        highlightSpan.title = code.message;
-        this.codeDiv_.sourceDiv.appendChild(highlightSpan);
-      }
-
-      if (code.afterHighlight) {
-        this.codeDiv_.sourceDiv.appendChild(
-            createSpan(code.afterHighlight, false));
-      }
-
-      // Make the line numbers. This should be the number of line breaks + 1
-      // (the last line doesn't break, but should still be numbered).
-      var content = '';
-      for (var i = 1; i < lineCount + 1; ++i)
-        content += i + '\n';
-      var span = document.createElement('span');
-      span.textContent = content;
-      this.codeDiv_.linesDiv.appendChild(span);
+      extensions.ExtensionUtil.populateCodeDiv(
+          this.codeDiv_,
+          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.
    */
   ExtensionErrorOverlay.requestFileSourceResponse = function(result) {
     var overlay = extensions.ExtensionErrorOverlay.getInstance();
     overlay.setCode(result);
     overlay.setVisible(true);
   };
 
   // Export
   return {
     ExtensionErrorOverlay: ExtensionErrorOverlay
   };
 });