Improve UI for unpacked extensions failing to load

chrome/browser/resources/extensions/extension_loader.js

+// 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';
+
+  /**
+   * 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);
+  }
+
+  /**
+   * Construct an ExtensionLoadError around the given |div|.
+   * @param {HTMLDivElement} div The HTML div for the extension load error.
+   * @constructor
+   */
+  function ExtensionLoadError(div) {
+    div.__proto__ = ExtensionLoadError.prototype;
+    div.init();
+    return div;
+  }
+
+  ExtensionLoadError.prototype = {
+    __proto__: HTMLDivElement.prototype,
+
+    init: function() {
+      this.path_ = this.querySelector('#extension-load-error-path');
+      this.reason_ = this.querySelector('#extension-load-error-reason');
+      this.manifest_ = this.querySelector('#extension-load-error-manifest');
+
+      console.log('initd');
+      this.querySelector('#extension-load-error-retry-button').addEventListener(
+          'click', function(e) {
+        chrome.send('extensionLoaderRetry');
+        console.log('Retry Clicked!');
+        this.hide_();
+      }.bind(this));
+
+      this.querySelector('#extension-load-error-give-up-button').
+          addEventListener('click', function(e) {
+        this.hide_();
+      }.bind(this));
+    },
+
+    show: function(path, reason, manifest) {
+      this.path_.textContent = path;
+      this.reason_.textContent = reason;
+
+      clearElement(this.manifest_);
+      if (manifest.highlight) {
+        var createSpan = function(source, isHighlighted) {
+          var span = document.createElement('span');
+          span.className =
+              isHighlighted ? 'highlighted-source' : 'normal-source';
+          span.textContent = source;
+          return span;
+        };
+
+        if (manifest.beforeHighlight) {
+          this.manifest_.appendChild(
+              createSpan(manifest.beforeHighlight, false));
+        }
+
+        if (manifest.highlight) {
+          this.manifest_.appendChild(
+              createSpan(manifest.highlight, true));
+        }
+
+        if (manifest.afterHighlight) {
+          this.manifest_.appendChild(
+              createSpan(manifest.afterHighlight, false));
+        }
+        this.manifest_.hidden = false;
+      } else {
+        this.manifest_.hidden = true;
+      }
+
+      this.hidden = false;
+    },
+
+    hide_: function() {
+      this.hidden = true;
+    }
+  };
+
+  function ExtensionLoader() {
+    this.__proto__ = ExtensionLoader.prototype;
+    this.init();
+  }
+
+  cr.addSingletonGetter(ExtensionLoader);
+
+  /**
+   * The class in charge of loading unpacked extensions.
+   */
+  ExtensionLoader.prototype = {
+    /**
+     * Perform first-time initialization.
+     */
+    init: function() {
+      console.log('Initing ExtensionLoader');
+      /**
+       * The ExtensionLoadError to show any errors from loading an unpacked
+       * extension.
+       * @type {ExtensionLoadError}
+       * @private
+       */
+      this.loadError_ = new ExtensionLoadError($('extension-load-error'));
+    },
+
+    /**
+     * Begin the sequence of loading an unpacked extension. If an error is
+     * encountered, this object will get notified via notifyFailed().
+     */
+    loadUnpacked: function() {
+      chrome.send('extensionLoaderLoadUnpacked');
+    },
+
+    /**
+     * Notify the ExtensionLoader that loading an unpacked extension failed.
+     * Show the ExtensionLoadError.
+     * @param {string} filePath The path to the unpacked extension.
+     * @param {string} reason The reason the extension failed to load.
+     * @param {Object} manifest An object with three strings: beforeHighlight,
+     *     afterHighlight, and highlight. These 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.
+     */
+    notifyFailed: function(filePath, reason, manifest) {
+      this.loadError_.show(filePath, reason, manifest);
+    }
+  };
+
+  /*
+   * A static forwarding function for ExtensionLoader.notifyFailed.
+   * @param {string} filePath The path to the unpacked extension.
+   * @param {string} reason The reason the extension failed to load.
+   * @param {Object} manifest The manifest of the failed extension.
+   * @see ExtensionLoader.notifyFailed
+   */
+  ExtensionLoader.notifyLoadFailed = function(filePath, reason, manifest) {
+    ExtensionLoader.getInstance().notifyFailed(filePath, reason, manifest);
+  };
+
+  return {
+    ExtensionLoader: ExtensionLoader
+  };
+});