Improve UI for unpacked extensions failing to load

chrome/browser/resources/extensions/extension_util.js

Index: chrome/browser/resources/extensions/extension_util.js
diff --git a/chrome/browser/resources/extensions/extension_util.js b/chrome/browser/resources/extensions/extension_util.js
new file mode 100644
index 0000000000000000000000000000000000000000..cf97edb345380c8bb1a5d73a702c5609facb1cda
--- /dev/null
+++ b/chrome/browser/resources/extensions/extension_util.js
@@ -0,0 +1,95 @@
+// Copyright 2014 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';
+
+  /**
+   * An object which holds util methods used by more than one extensions module.
+   */
+  var ExtensionUtil = {};
+

[not at google - send to devlin, 2014/04/25 20:15:52]

util is a bit of a misnomer at the moment since it's specifically used for
augmenting the shared functionality between the manifest and the error console.

can you attach this logic to a webui-custom-element-type-thing and not have it
be a util at all?

[Devlin, 2014/04/25 20:48:40]

Done.

+  /**
+   * Clear all the content of a given element.
+   * @param {HTMLElement} element The element to be cleared.
+   */
+  ExtensionUtil.clearElement = function(element) {
+    while (element.firstChild)
+      element.removeChild(element.firstChild);
+  };
+
+  /**
+   * Populate the content area of the code div with the given code. This will
+   * highlight the erroneous section (if any).
+   * @param {HTMLDivElement} div The div element to populate.
+   * @param {Object} code An object with four strings: beforeHighlight,
+   *     afterHighlight, highlight, and the message. The 'highlight' strings
+   *     represent the 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. The message is the
+   *     error message, which will be the mouseover hint for the highlighted
+   *     region. These may be empty.
+   *  @param {string} emptyMessage The message to post to the div if the code
+   *     object is empty (e.g., 'could not load code').
+   */
+  ExtensionUtil.populateCodeDiv = function(div, code, emptyMessage) {
+    // Clear any remnant content, so we don't have multiple code listed.
+    ExtensionUtil.clearElement(div);
+
+    var sourceDiv = document.createElement('div');
+    sourceDiv.classList.add('extension-code-source');
+    div.appendChild(sourceDiv);
+
+    // If there's no code, then display an appropriate message.
+    if (!code) {
+      var span = document.createElement('span');
+      span.textContent = emptyMessage;
+      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 ? 'extension-code-highlighted-source' :
+                                       'extension-code-normal-source';
+      span.textContent = source;
+      return span;
+    };
+
+    if (code.beforeHighlight)
+      sourceDiv.appendChild(createSpan(code.beforeHighlight, false));
+
+    if (code.highlight) {
+      var highlightSpan = createSpan(code.highlight, true);
+      highlightSpan.title = code.message;
+      sourceDiv.appendChild(highlightSpan);
+    }
+
+    if (code.afterHighlight)
+      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;
+
+    var linesDiv = document.createElement('div');
+    linesDiv.classList.add('extension-code-line-numbers');
+    linesDiv.appendChild(span);
+    div.insertBefore(linesDiv, div.firstChild);
+
+    // Ensure the div is visible.
+    div.hidden = false;
+  };
+
+  // Export
+  return {
+    ExtensionUtil: ExtensionUtil
+  };
+});