Improve UI for unpacked extensions failing to load

chrome/browser/resources/extensions/extension_error_overlay.js

Index: chrome/browser/resources/extensions/extension_error_overlay.js
diff --git a/chrome/browser/resources/extensions/extension_error_overlay.js b/chrome/browser/resources/extensions/extension_error_overlay.js
index da71f9a088308b5ee6beaf4ab2d1bd6592d24831..418791701895fb535004e7275c14de839c6499c0 100644
--- a/chrome/browser/resources/extensions/extension_error_overlay.js
+++ b/chrome/browser/resources/extensions/extension_error_overlay.js
@@ -6,15 +6,6 @@ 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.
@@ -148,7 +139,7 @@ cr.define('extensions', function() {
       this.error_ = undefined;
       this.extensionUrl_ = undefined;
       this.currentFrameNode_ = undefined;
-      clearElement(this.stackTrace_);
+      extensions.ExtensionUtil.clearElement(this.stackTrace_);
       this.stackTrace_.hidden = true;
     },
 
@@ -380,13 +371,6 @@ cr.define('extensions', function() {
        */
       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}
@@ -423,8 +407,7 @@ cr.define('extensions', function() {
         return;
 
       // Remove all previous content.
-      clearElement(this.codeDiv_.sourceDiv);
-      clearElement(this.codeDiv_.linesDiv);
+      extensions.ExtensionUtil.clearElement(this.codeDiv_);
 
       this.openDevtoolsButton_.hidden = true;
 
@@ -491,53 +474,10 @@ cr.define('extensions', function() {
           '#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'));
     },
   };