This adds a webui overlay on the extensions page for showing what Extension keybindings are active.…

chrome/browser/resources/extensions/extension_command_list.js

+// Copyright (c) 2012 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() {
+  'use strict';
+
+  /**
+   * Creates a new list of extension commands.
+   * @param {Object=} opt_propertyBag Optional properties.
+   * @constructor
+   * @extends {cr.ui.div}
+   */
+  var ExtensionCommandList = cr.ui.define('div');
+
+  ExtensionCommandList.prototype = {
+    __proto__: HTMLDivElement.prototype,
+
+    /** @inheritDoc */
+    decorate: function() {
+      this.textContent = '';
+
+      // Iterate over the extension data and add each item to the list.
+      this.data_.commands.forEach(this.createExtensionNode_.bind(this));
+    },
+
+    /**
+     * Synthesizes and initializes an HTML element for the extension command
+     * metadata given in |extension|.
+     * @param {Object} extension A dictionary of extension metadata.
+     * @private
+     */
+    createExtensionNode_: function(extension) {

[Evan Stade, 2012/05/18 21:08:26]

createNodeForExtension is more apt

[Finnur, 2012/05/18 22:02:04]

Done.

+      var template = $('template-collection-extension-commands').querySelector(
+          '.extension-command-list-extension-item-wrapper');

[Evan Stade, 2012/05/18 21:08:26]

too much indent

[Finnur, 2012/05/18 22:02:04]

Wait... Continuations from previous lines have always used 4 spaces for
indentation, no?

foo +
    bar;

not

foo +
  bar;

right?

[Evan Stade, 2012/05/18 22:14:23]

oh, I guess this one is actually 4

+      var node = template.cloneNode(true);
+      node.id = extension.id;

[Evan Stade, 2012/05/18 21:08:26]

if this is the same as the extension id, I think it's a bad idea to use that as
the ID without prepending some sort of qualifier, like "extension-command-"

[Finnur, 2012/05/18 22:02:04]

This isn't used at the moment so I just removed it.

On 2012/05/18 21:08:26, Evan Stade wrote:

+
+      var title = node.querySelector('.extension-title');
+      title.textContent = extension.name;
+
+      this.appendChild(node);
+
+      // Iterate over the commands data within the extension and add each item
+      // to the list.
+      extension.commands.forEach(this.createCommandNode_.bind(this));
+    },
+
+    /**
+     * Synthesizes and initializes an HTML element for the extension command
+     * metadata given in |command|.
+     * @param {Object} command A dictionary of extension command metadata.
+     * @private
+     */
+    createCommandNode_: function(command) {
+      var template = $('template-collection-extension-commands').querySelector(
+            '.extension-command-list-command-item-wrapper');

[Evan Stade, 2012/05/18 21:08:26]

too much indent.

[Finnur, 2012/05/18 22:02:04]

Same question here.

On 2012/05/18 21:08:26, Evan Stade wrote:

[Evan Stade, 2012/05/18 22:14:23]

yea but this is 6 not 4

+      var node = template.cloneNode(true);
+
+      var description = node.querySelector('.command-description');
+      description.textContent = command.description;
+
+      var shortcut = node.querySelector('.command-shortcut');
+      if (!command.active) {
+        shortcut.textContent =
+            loadTimeData.getString('extensionCommandsInactive');
+        shortcut.classList.add('inactive-keybinding');
+      } else {
+        shortcut.textContent = command.keybinding;
+      }
+
+      this.appendChild(node);
+    },
+  };
+
+  return {
+    ExtensionCommandList: ExtensionCommandList
+  };
+});