Handler settings page.

chrome/browser/resources/options/handler_options_list.js

+// Copyright (c) 2010 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() {
+  const ArrayDataModel = cr.ui.ArrayDataModel;
+  const List = cr.ui.List;
+  const ListItem = cr.ui.ListItem;
+  const HandlerOptions = options.HandlerOptions;
+
+  const localStrings = new LocalStrings();
+
+  /**
+   * Creates a new protocol / content handler list item.
+   *
+   * Accepts values in the form
+   * { protocol: 'mailto',
+   *   handlers: [
+   *     ['http://www.thesite.com/%s', 'The title of the protocol'],
+   *     ...,
+   *   ],
+   * }
+   * @param {Object} entry A dictionary describing the handlers for a given
+   * protocol.
+   * @constructor
+   * @extends {cr.ui.ListItem}
+   */
+  function HandlerListItem(entry) {
+    var el = cr.doc.createElement('div');
+    el.dataItem = entry;
+    el.__proto__ = HandlerListItem.prototype;
+    el.decorate();
+
+    return el;
+  }
+
+  function makeDiv(text) {

[Evan Stade, 2011/05/19 17:08:42]

I don't think there's much point to this function. Just use
document.createElement on L55 and then set the inner text on L75.

[koz (OOO until 15th September), 2011/05/19 21:07:52]

Done.

+    var result = document.createElement('div');
+    if (text) {

[Evan Stade, 2011/05/19 17:08:42]

no curlies

[koz (OOO until 15th September), 2011/05/19 21:07:52]

Done.

+      result.innerText = text;
+    }
+    return result;
+  }
+
+  HandlerListItem.prototype = {
+    __proto__: ListItem.prototype,
+
+    buildWidget_: function(data, delegate) {
+      // Protocol.
+      var protocolElement = makeDiv(data.protocol);
+      protocolElement.classList.add('handlers-type-column');
+      this.appendChild(protocolElement);
+
+      // Handler selection.
+      var handlerElement;
+      var selectElement;
+      if (data.handlers.length > 1) {
+        selectElement = document.createElement('select');
+        for (var i in data.handlers) {

[Evan Stade, 2011/05/19 17:08:42]

don't use for...in for lists

[koz (OOO until 15th September), 2011/05/19 21:07:52]

Done.

+          var optionElement = document.createElement('option');
+          if (i == data.default_handler) {
+            optionElement.selected = true;
+          }
+          optionElement.innerText = data.handlers[i][1];
+          optionElement.value = i;
+          selectElement.appendChild(optionElement);
+        }
+        selectElement.addEventListener('change', function (e) {
+          var index = e.target.value;
+          delegate.setDefault([data.protocol].concat(data.handlers[index]));
+        });
+        handlerElement = makeDiv();
+        handlerElement.appendChild(selectElement);
+      } else {
+        handlerElement = makeDiv(data.handlers[0][1]);
+      }
+      handlerElement.classList.add('handlers-site-column');

[Evan Stade, 2011/05/19 17:08:42]

handlerElement.classname = 'handlers-site-column';

[koz (OOO until 15th September), 2011/05/19 21:07:52]

Done.

+      this.appendChild(handlerElement);
+
+      // Remove link.
+      var removeElement =
+        makeDiv(localStrings.getString('handlers_remove_link'));

[Evan Stade, 2011/05/19 17:08:42]

2 more spaces indent

[koz (OOO until 15th September), 2011/05/19 21:07:52]

Done.

+      removeElement.addEventListener('click', function (e) {
+        var value = selectElement ? selectElement.value : 0;
+        delegate.removeHandler(value,
+            [data.protocol].concat(data.handlers[value]));
+      });
+      removeElement.classList.add('handlers-remove-column');

[Evan Stade, 2011/05/19 17:08:42]

removeElement.className = 'handlers-remove-column handlers-remove-link';

[koz (OOO until 15th September), 2011/05/19 21:07:52]

Done.

+      removeElement.classList.add('handlers-remove-link');
+      this.appendChild(removeElement);
+    },
+
+    /** @inheritDoc */
+    decorate: function() {
+      ListItem.prototype.decorate.call(this);
+
+      var self = this;
+      var delegate = {
+        removeHandler: function(index, handler) {
+          HandlerOptions.removeHandler(index, handler);
+        },
+        setDefault: function(handler) {
+          HandlerOptions.setDefault(handler);
+        },
+      };
+
+      this.buildWidget_(this.dataItem, delegate);
+    },
+  };
+
+  /**
+   * Create a new passwords list.
+   * @constructor
+   * @extends {cr.ui.List}
+   */
+  var HandlersList = cr.ui.define('list');
+
+  HandlersList.prototype = {
+    __proto__: List.prototype,
+
+    /** @inheritDoc */
+    createItem: function(entry) {
+      return new HandlerListItem(entry);
+    },
+
+    /**
+     * The length of the list.
+     */
+    get length() {
+      return this.dataModel.length;
+    },
+
+    setHandlers: function(list) {

[Evan Stade, 2011/05/19 17:08:42]

function comment

[koz (OOO until 15th September), 2011/05/19 21:07:52]

Done.

+      this.dataModel = new ArrayDataModel(list);
+    },
+  };
+
+  return {
+    HandlerListItem: HandlerListItem,
+    HandlersList: HandlersList,
+  };
+});