Convert chrome://extensions to a settings page within the options pages.

chrome/browser/resources/options/extension_list.js

+// Copyright (c) 2011 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('options', function() {
+  /**
+   * Creates a new list of extensions.
+   * @param {Object=} opt_propertyBag Optional properties.
+   * @constructor
+   * @extends {cr.ui.div}
+   */
+  var ExtensionsList = cr.ui.define('div');
+
+  var handleInstalled = false;
+
+  ExtensionsList.prototype = {
+    __proto__: HTMLDivElement.prototype,
+
+    /** @inheritDoc */
+    decorate: function() {
+      // Make sure developer mode section is set correctly as per saved setting.

[Aaron Boodman, 2011/08/31 18:22:44]

This is a ridiculously long function. Maybe break it up into logical pieces?

[Finnur, 2011/08/31 20:22:01]

Done.

+      var toggleButton = $('toggle-dev-on');
+      var toggleSection = $('dev');
+      if (this.data_.developerMode) {
+        toggleSection.classList.add('dev-open');
+        toggleSection.classList.remove('dev-closed');
+        toggleButton.setAttribute("checked", "");
+      } else {
+        toggleSection.classList.remove('dev-open');
+        toggleSection.classList.add('dev-closed');
+      }
+
+      // Install handler for key presses.
+      if (!handleInstalled) {
+        document.addEventListener('keyup', this.upEventHandler_.bind(this));
+        document.addEventListener('mouseup', this.upEventHandler_.bind(this));
+        handleInstalled = true;
+      }
+
+      // Delete all child nodes before adding them back and while we are at it
+      // make a note of which ones were in expanded state (and which showing
+      // the warning) so we can restore those to the same state afterwards.
+      var showingDetails = [];
+      var showingWarning = [];
+      while (this.hasChildNodes()){
+        var child = this.firstChild;
+
+        // See if the item is expanded.
+        if (child.className.indexOf('extensionListItemExpanded') >= 0) {
+          showingDetails.push(child.id);
+        }
+        // See if the butterbar is showing.
+        var butterBar = document.getElementById(child.id + "_incognitoWarning");
+        if (!(butterBar === null) && butterBar.style.display == "block") {
+          showingWarning.push(child.id);
+        }
+
+        // Now we can delete it.
+        this.removeChild(child);
+      }
+
+      var minCheckboxWidth = 999999;
+      var maxCheckboxWidth = 0;
+
+      // Iterate over the extension data and add each item to the list.
+      for (var i = 0; i < this.data_.extensions.length; ++i) {
+        var extension = this.data_.extensions[i];
+        var id = extension.id;
+
+        var wrapper = this.ownerDocument.createElement('div');
+
+        // Figure out if the item should open expanded or not based on the state
+        // of things before we deleted the items.
+        var iter = showingDetails.length;
+        var expanded = false;
+        while (iter--) {
+          if (showingDetails[iter] == id) {
+            expanded = true;
+            break;
+          }
+        }
+        // Figure out if the butterbar should be showing.
+        iter = showingWarning.length;
+        var butterbar = false;
+        while (iter--) {
+          if (showingWarning[iter] == id) {
+            butterbar = true;
+            break;
+          }
+        }
+
+        wrapper.classList.add(expanded ? 'extensionListItemExpanded' :
+                                         'extensionListItemCollapsed');
+        if (!extension.enabled) {
+          wrapper.classList.add('disabled');
+        }
+        wrapper.id = id;
+        this.appendChild(wrapper);
+
+        var vbox_outer = this.ownerDocument.createElement('div');
+        vbox_outer.classList.add('vbox');
+        vbox_outer.classList.add('extensionListItem');
+        wrapper.appendChild(vbox_outer);
+
+        var hbox = this.ownerDocument.createElement('div');
+        hbox.classList.add('hbox');
+        vbox_outer.appendChild(hbox);
+
+        // Add a container div for the zippy, so we can extend the hit area.
+        var container = this.ownerDocument.createElement('div');
+        // Clicking anywhere on the div expands/collapses the details.
+        container.classList.add('extension-zippy-container');
+        container.addEventListener('click', this.handleZippyClick_.bind(this));
+        hbox.appendChild(container);
+
+        // On the far left we have the zippy icon.
+        div = this.ownerDocument.createElement('div');
+        div.id = id + '_zippy';
+        div.classList.add('extension-zippy-default');
+        div.classList.add(expanded ? 'extension-zippy-expanded' :
+                                     'extension-zippy-collapsed');
+        container.appendChild(div);
+
+        // Next to it, we have the extension icon.
+        icon = this.ownerDocument.createElement('img');
+        icon.classList.add('extension-icon');
+        icon.src = extension.icon;
+        hbox.appendChild(icon);
+
+        // Start a vertical box for showing the details.
+        var vbox = this.ownerDocument.createElement('div');
+        vbox.classList.add('vbox');
+        vbox.classList.add('stretch');
+        hbox.appendChild(vbox);
+
+        div = this.ownerDocument.createElement('div');
+        vbox.appendChild(div);
+
+        // Title comes next.
+        var title = this.ownerDocument.createElement('span');
+        title.classList.add('extension-title');
+        title.textContent = extension.name;
+        vbox.appendChild(title);
+
+        // Followed by version.
+        var version = this.ownerDocument.createElement('span');
+        version.classList.add('extension-version');
+        version.textContent = extension.version;
+        vbox.appendChild(version);
+
+        div = this.ownerDocument.createElement('div');
+        vbox.appendChild(div);
+
+        // And below that we have description (if provided).
+        if (extension.description.length > 0) {
+          var description = this.ownerDocument.createElement('span');
+          description.classList.add('extension-description');
+          description.textContent = extension.description;
+          vbox.appendChild(description);
+        }
+
+        // Immediately following the description, we have the
+        // Options link (optional).
+        if (extension.options_url) {
+          var link = this.ownerDocument.createElement('a');
+          link.classList.add('extension-links-trailing');
+          link.textContent = localStrings.getString('options');
+          link.href = "#";
+          link.addEventListener('click', this.handleOptions_.bind(this));
+          vbox.appendChild(link);
+        }
+
+        // Then the optional Visit Website link.
+        if (extension.homepageUrl) {
+          var link = this.ownerDocument.createElement('a');
+          link.classList.add('extension-links-trailing');
+          link.textContent = localStrings.getString("visitWebsite");
+          link.href = "#";
+          link.addEventListener('click', this.handleVisitWebsite_.bind(this));
+          vbox.appendChild(link);
+        }
+
+        // And now the details section that is normally hidden.
+        var details = this.ownerDocument.createElement('div');
+        details.classList.add('vbox');
+        vbox.appendChild(details);
+
+        this.decorateDetailsSection_(details, extension, expanded, butterbar);
+
+        // And on the right of the details we have the Enable/Enabled checkbox.
+        div = this.ownerDocument.createElement('div');
+        hbox.appendChild(div);
+
+        var section = this.ownerDocument.createElement('section');
+        section.classList.add('extension-enabling');
+        div.appendChild(section);
+
+        // The Enable checkbox.
+        var input = this.ownerDocument.createElement('input');
+        input.addEventListener('click', this.handleEnable_.bind(this));
+        input.type = "checkbox";
+        input.name = "toggle-" + id;
+        if (!extension.mayDisable) {
+          input.setAttribute("disabled", "");
+        }
+        if (extension.enabled) {
+          input.setAttribute("checked", "");
+        }
+        input.id = "toggle-" + id;
+        section.appendChild(input);
+        var label = this.ownerDocument.createElement('label');
+        label.classList.add('extension-enabling-label');
+        if (extension.enabled) {
+          label.classList.add('extension-enabling-label-bold');
+        }
+        label.setAttribute("for", "toggle-" + id);
+        label.id = "toggle-" + id + "-label";
+        if (extension.enabled) {
+          label.textContent = localStrings.getString("enabled");
+        } else {
+          label.textContent = localStrings.getString("enable");
+        }
+        section.appendChild(label);
+
+        if (label.offsetWidth > maxCheckboxWidth)
+          maxCheckboxWidth = label.offsetWidth;
+        if (label.offsetWidth < minCheckboxWidth)
+          minCheckboxWidth = label.offsetWidth;
+
+        // And, on the far right we have the uninstall button.
+        var button = this.ownerDocument.createElement('button');
+        button.classList.add('extension-delete');
+        button.id = id;
+        if (!extension.mayDisable) {
+          button.setAttribute("disabled", "");
+        }
+        button.textContent = localStrings.getString("remove");
+        button.addEventListener('click', this.handleUninstall_.bind(this));
+        hbox.appendChild(button);
+      }
+
+      // Do another pass, making sure checkboxes line up.
+      var difference = maxCheckboxWidth - minCheckboxWidth;
+      for (var i = 0; i < this.data_.extensions.length; ++i) {
+        var extension = this.data_.extensions[i];
+        var id = extension.id;
+        var label = $("toggle-" + id + "-label");
+        if (label.offsetWidth < maxCheckboxWidth) {
+          label.setAttribute("style", "margin-right: " +
+              difference.toString() + "px;");
+        }
+      }
+    },
+
+    /**
+     * Handles decorating the details section.
+     * @param {Element} details The div that the details should be attached to.
+     * @param {Object} extension The extension we are shoting the details for.
+     * @param {boolean} expanded Whether to show the details expanded or not.
+     * @param {boolean} showButterbar Whether to show the incognito warning or
+     *                  not.
+     * @private
+     */
+    decorateDetailsSection_: function(details, extension,
+                                      expanded, showButterbar) {
+      // This container div is needed because vbox display
+      // overrides display:hidden.
+      var details_contents = this.ownerDocument.createElement('div');
+      details_contents.classList.add(expanded ? 'extension-details-visible' :
+                                                'extension-details-hidden');
+      details_contents.id = extension.id + '_details';
+      details.appendChild(details_contents);
+
+      var div = this.ownerDocument.createElement('div');
+      div.classList.add('gray-text');
+      details_contents.appendChild(div);
+
+      // Keep track of how many items we'll show in the details section.
+      var itemsShown = 0;
+
+      if (this.data_.developerMode) {
+        // First we have the id.
+        var content = this.ownerDocument.createElement('div');
+        content.textContent = localStrings.getString("extensionId") +
+                              " " + extension.id;
+        div.appendChild(content);
+        itemsShown++;
+
+        // Then, the path, if provided by unpacked extension.
+        if (extension.isUnpacked) {
+          content = this.ownerDocument.createElement('div');
+          content.textContent = localStrings.getString("extensionPath") +
+                                " " + extension.path;
+          div.appendChild(content);
+          itemsShown++;
+        }
+
+        // Then, the 'managed, cannot uninstall/disable' message.
+        if (!extension.mayDisable) {
+          content = this.ownerDocument.createElement('div');
+          content.textContent = localStrings.getString("policyControlled");
+          div.appendChild(content);
+          itemsShown++;
+        }
+
+        // Then active views:
+        if (extension.views.length > 0) {
+          var table = this.ownerDocument.createElement('table');
+          table.classList.add('extension-inspect-table');
+          div.appendChild(table);
+          var tr = this.ownerDocument.createElement('tr');
+          table.appendChild(tr);
+          var td = this.ownerDocument.createElement('td');
+          td.classList.add('extension-inspect-left-column');
+          tr.appendChild(td);
+          var span = this.ownerDocument.createElement('span');
+          td.appendChild(span);
+          span.textContent = localStrings.getString("inspectViews");
+
+          td = this.ownerDocument.createElement('td');
+          for (var i = 0; i < extension.views.length; ++i) {
+            // Then active views:
+            content = this.ownerDocument.createElement('div');
+            var link = this.ownerDocument.createElement('a');
+            link.classList.add('extension-links-view');
+            link.textContent = extension.views[i].path;
+            link.id = extension.id;
+            link.href = "#";
+            link.addEventListener('click', this.sendInspectMessage_.bind(this));
+            content.appendChild(link);
+            td.appendChild(content);
+            tr.appendChild(td);
+
+            itemsShown++;
+          }
+        }
+      }
+
+      content = this.ownerDocument.createElement('div');
+      details_contents.appendChild(content);
+
+      // Then Reload:
+      if (extension.enabled && extension.allow_reload) {
+        var link = this.ownerDocument.createElement('a');
+        link.classList.add('extension-links-trailing');
+        link.textContent = localStrings.getString('reload');
+        link.id = extension.id;
+        link.href = "#";
+        link.addEventListener('click', this.handleReload_.bind(this));
+        content.appendChild(link);
+        itemsShown++;
+      }
+
+      // Then Show (Browser Action) Button:
+      if (extension.enabled && extension.enable_show_button) {
+        link = this.ownerDocument.createElement('a');
+        link.classList.add('extension-links-trailing');
+        link.textContent = localStrings.getString('showButton');
+        link.id = extension.id;
+        link.href = "#";
+        link.addEventListener('click', this.handleShowButton_.bind(this));
+        content.appendChild(link);
+        itemsShown++;
+      }
+
+      if (extension.enabled && !extension.wantsFileAccess) {
+        // The 'allow in incognito' checkbox.
+        var label = this.ownerDocument.createElement('label');
+        label.classList.add('extension-checkbox-label');
+        content.appendChild(label);
+        var input = this.ownerDocument.createElement('input');
+        input.addEventListener('click',
+                               this.handleToggleEnableIncognito_.bind(this));
+        input.id = extension.id;
+        input.type = "checkbox";
+        if (extension.enabledIncognito) {
+          input.setAttribute("checked", "");
+        }
+        label.appendChild(input);
+        var span = this.ownerDocument.createElement('span');
+        span.classList.add('extension-checkbox-span');
+        span.textContent = localStrings.getString('enableIncognito');
+        label.appendChild(span);
+        itemsShown++;
+      }
+
+      if (extension.enabled && !extension.wantsFileAccess) {
+        // The 'allow access to file URLs' checkbox.
+        label = this.ownerDocument.createElement('label');
+        label.classList.add('extension-checkbox-label');
+        content.appendChild(label);
+        var input = this.ownerDocument.createElement('input');
+        input.addEventListener('click',
+                               this.handleToggleAllowFileUrls_.bind(this));
+        input.id = extension.id;
+        input.type = "checkbox";
+        if (extension.allowFileAccess) {
+          input.setAttribute("checked", "");
+        }
+        label.appendChild(input);
+        var span = this.ownerDocument.createElement('span');
+        span.classList.add('extension-checkbox-span');
+        span.textContent = localStrings.getString('allowFileAccess');
+        label.appendChild(span);
+        itemsShown++;
+      }
+
+      if (extension.enabled && !extension.is_hosted_app) {
+        // And add a hidden warning message for allowInIncognito.
+        content = this.ownerDocument.createElement('div');
+        content.id = extension.id + "_incognitoWarning";
+        content.classList.add('butter-bar');
+        content.style.display = showButterbar ? "block" : "none";
+        details_contents.appendChild(content);
+
+        var span = this.ownerDocument.createElement('span');
+        span.innerHTML = localStrings.getString('incognitoWarning');
+        content.appendChild(span);
+        itemsShown++;
+      }
+
+      var zippy = extension.id + "_zippy";
+      $(zippy).style.display = (itemsShown > 0) ? "block" : "none";
+    },
+
+    /**
+     * A lookup helper function to find an extension based on an id.
+     * @param {string} id The |id| of the extension to look up.
+     * @private
+     */
+    getExtensionWithId_: function(id) {
+      for (var i = 0; i < this.data_.extensions.length; ++i) {
+        if (this.data_.extensions[i].id == id)
+          return this.data_.extensions[i];
+      }
+      return null;
+    },
+
+    /**
+     * A lookup helper function to find the first node that has an id (starting
+     * at |node| and going up the parent chain.
+     * @param {Element} node The node to start looking at.
+     * @private
+     */
+    findIdNode_: function(node) {
+      while (node.id.length == 0) {
+        node = node.parentNode;
+        if (!node)
+          return null;
+      }
+      return node;
+    },
+
+    /**
+     * Handles the mouseclick on the zippy icon (that expands and collapses the
+     * details section).
+     * @param {Event} e Change event.
+     * @private
+     */
+    handleZippyClick_: function(e) {
+      var node = this.findIdNode_(e.target.parentNode);
+      var iter = this.firstChild;
+      while (iter) {
+        var zippy = this.ownerDocument.getElementById(iter.id + '_zippy');
+        var details = this.ownerDocument.getElementById(iter.id + '_details');
+        if (iter.id == node.id) {
+          // Toggle visibility.
+          if (iter.classList.contains('extensionListItemExpanded')) {
+            // Hide yo kids! Hide yo wife!
+            zippy.classList.remove('extension-zippy-expanded');
+            zippy.classList.add('extension-zippy-collapsed');
+            details.classList.remove('extension-details-visible');
+            details.classList.add('extension-details-hidden');
+            iter.classList.remove('extensionListItemExpanded');
+            iter.classList.add('extensionListItemCollapsed');
+
+            // Hide yo incognito warning.
+            var butterBar = this.ownerDocument.getElementById(
+                iter.id + '_incognitoWarning');
+            if (!(butterBar === null)) {
+              butterBar.style.display = "none";
+            }
+          } else {
+            // Show the contents.
+            zippy.classList.remove('extension-zippy-collapsed');
+            zippy.classList.add('extension-zippy-expanded');
+            details.classList.remove('extension-details-hidden');
+            details.classList.add('extension-details-visible');
+            iter.classList.remove('extensionListItemCollapsed');
+            iter.classList.add('extensionListItemExpanded');
+          }
+        }
+        iter = iter.nextSibling;
+      }
+    },
+
+    /**
+     * Handles the mouse-up and keyboard-up events. This is used to limit the
+     * number of items to show in the list, when the user is searching for items
+     * with the search box. Otherwise, if one match is found, the whole list of
+     * extensions would be shown when we only want the matching items to be
+     * found.
+     * @param {Event} e Change event.
+     * @private
+     */
+    upEventHandler_: function(e) {
+      var searchString =
+          document.getElementById('search-field').value.toLowerCase();
+      var child = this.firstChild;
+      while (child){
+        var extension = this.getExtensionWithId_(child.id);
+        if (searchString.length == 0) {
+          // Show all.
+          child.classList.remove('search-suppress');
+        } else {
+          // If the search string does not appear within the text of the
+          // extension, then hide it.
+          if ((extension.name.toLowerCase().indexOf(searchString) < 0) &&
+              (extension.version.toLowerCase().indexOf(searchString) < 0) &&
+              (extension.description.toLowerCase().indexOf(searchString) < 0)) {
+            // Hide yo extension!
+            child.classList.add('search-suppress');
+          } else {
+            // Show yourself!
+            child.classList.remove('search-suppress');
+          }
+        }
+        child = child.nextSibling;
+      }
+    },
+
+    /**
+     * Handles the Reload Extension functionality.
+     * @param {Event} e Change event.
+     * @private
+     */
+    handleReload_: function(e) {
+      var node = this.findIdNode_(e.target);
+      chrome.send('reload', [node.id]);
+    },
+
+    /**
+     * Handles the Show (Browser Action) Button functionality.
+     * @param {Event} e Change event.
+     * @private
+     */
+    handleShowButton_: function(e) {
+      var node = this.findIdNode_(e.target);
+      chrome.send('showButton', [node.id]);
+    },
+
+    /**
+     * Handles the Enable/Disable Extension functionality.
+     * @param {Event} e Change event.
+     * @private
+     */
+    handleEnable_: function(e) {
+      var node = this.findIdNode_(e.target.parentNode);
+      var extension = this.getExtensionWithId_(node.id);
+      chrome.send('enable',
+                  [node.id, extension.enabled ? "false" : "true"]);
+      chrome.send('requestExtensionsData');
+    },
+
+    /**
+     * Handles the Uninstall Extension functionality.
+     * @param {Event} e Change event.
+     * @private
+     */
+    handleUninstall_: function(e) {
+      var node = this.findIdNode_(e.target.parentNode);
+      chrome.send('uninstall', [node.id]);
+      chrome.send('requestExtensionsData');
+    },
+
+    /**
+     * Handles the View Options link.
+     * @param {Event} e Change event.
+     * @private
+     */
+    handleOptions_: function(e) {
+      var node = this.findIdNode_(e.target.parentNode);
+      var extension = this.getExtensionWithId_(node.id);
+      chrome.send('options', [extension.id]);
+    },
+
+    /**
+     * Handles the Visit Extension Website link.
+     * @param {Event} e Change event.
+     * @private
+     */
+    handleVisitWebsite_: function(e) {
+      var node = this.findIdNode_(e.target.parentNode);
+      var extension = this.getExtensionWithId_(node.id);
+      document.location = extension.homepageUrl;
+    },
+
+    /**
+     * Handles the Enable Extension In Incognito functionality.
+     * @param {Event} e Change event.
+     * @private
+     */
+    handleToggleEnableIncognito_: function(e) {
+      var node = this.findIdNode_(e.target);
+      var butterBar = document.getElementById(node.id + "_incognitoWarning");
+      if (e.target.checked) {
+        if (butterBar.style.display == "none") {
+          butterBar.style.display = "block";
+        }
+      } else {
+        if (butterBar.style.display == "block") {
+          butterBar.style.display = "none";
+        }
+      }
+
+      chrome.send('enableIncognito', [node.id, String(e.target.checked)]);
+    },
+
+    /**
+     * Handles the Allow On File URLs functionality.
+     * @param {Event} e Change event.
+     * @private
+     */
+    handleToggleAllowFileUrls_: function(e) {
+      var node = this.findIdNode_(e.target);
+      chrome.send('allowFileAccess', [node.id, String(e.target.checked)]);
+    },
+
+    /**
+     * Tell the C++ ExtensionDOMHandler to inspect the page detailed in
+     * |viewData|.
+     * @param {Event} e Change event.
+     * @private
+     */
+    sendInspectMessage_: function(e) {
+      var extension = this.getExtensionWithId_(e.srcElement.id);
+      for (var i = 0; i < extension.views.length; ++i) {
+        if (extension.views[i].path == e.srcElement.innerText) {
+          // TODO(aa): This is ghetto, but WebUIBindings doesn't support sending
+          // anything other than arrays of strings, and this is all going to get
+          // replaced with V8 extensions soon anyway.
+          chrome.send('inspect', [
+            String(extension.views[i].renderProcessId),
+            String(extension.views[i].renderViewId)
+          ]);
+        }
+      }
+    },
+  };
+
+  return {
+    ExtensionsList: ExtensionsList
+  };
+});