Merge lp:~allenap/launchpad/localpackagediffs-filter-by-package-set-bug-809786-split-formwidgets into lp:launchpad

[Gavin Panella]

[r=allenap][bug=809786] Split out the non-DistroSeries-specific widgets from lp.registry.distroseries.widgets into a new lp.all.formwidgets module.

This splits out the non-DistroSeries-specific widgets from the lp.registry.distroseries.widgets module into a new lp.all.formwidgets module. It also rearranges the on-disk layout of the .initseries and .widgets modules in Registry.

[Gavin Panella (allenap)]

review: Approve

=== added directory 'lib/lp/app/javascript/formwidgets'
=== added file 'lib/lp/app/javascript/formwidgets/formwidgets.js'
--- lib/lp/app/javascript/formwidgets/formwidgets.js	1970-01-01 00:00:00 +0000
+++ lib/lp/app/javascript/formwidgets/formwidgets.js	2011-07-18 11:56:36 +0000
@@ -0,0 +1,626 @@
+/**
+ * Copyright 2011 Canonical Ltd. This software is licensed under the
+ * GNU Affero General Public License version 3 (see the file LICENSE).
+ *
+ * Form Widgets.
+ *
+ * @module lp.app
+ * @submodule formwidgets
+ */
+
+YUI.add('lp.app.formwidgets', function(Y) {
+
+Y.log('loading lp.app.formwidgets');
+
+var namespace = Y.namespace('lp.app.formwidgets');
+
+
+/**
+ * A form row matching that which LaunchpadForm presents, containing a
+ * field (defined in a subclass), and an optional label and
+ * description.
+ *
+ * @class FormRowWidget
+ */
+var FormRowWidget;
+
+FormRowWidget = function() {
+    FormRowWidget.superclass.constructor.apply(this, arguments);
+};
+
+Y.mix(FormRowWidget, {
+
+    NAME: 'formRowWidget',
+
+    ATTRS: {
+
+        /**
+         * The field name.
+         *
+         * @property name
+         */
+        name: {
+            setter: function(value, name) {
+                this.fieldNode.all("input, select").set("name", value);
+            }
+        },
+
+        /**
+         * The top label for the field.
+         *
+         * @property label
+         */
+        label: {
+            getter: function() {
+                return this.labelNode.get("text");
+            },
+            setter: function(value, name) {
+                this.labelNode.set("text", value);
+            }
+        },
+
+        /**
+         * A dictionary {link:link, text:text} to populate
+         * the pop-up help for the field.
+         *
+         * @property help
+         */
+        help: {
+            getter: function() {
+                return {link:this.helpNode.one('a')
+                            .get("href"),
+                        text:this.helpNode
+                            .one('.invisible-link')
+                            .get("text")};
+            },
+            setter: function(value, name) {
+                if ((value.link !== undefined) &&
+                    (value.text !== undefined)) {
+                    this.helpNode.one('a').set("href", value.link);
+                    this.helpNode.one('.invisible-link')
+                        .set("text", value.text);
+                    this.helpNode.removeClass('unseen');
+                }
+                else {
+                    this.helpNode.addClass('unseen');
+                }
+            }
+        },
+
+        /**
+         * A description shown near the field.
+         *
+         * @label description
+         */
+        description: {
+            getter: function() {
+                return this.descriptionNode.get("text");
+            },
+            setter: function(value, name) {
+                this.descriptionNode.set("text", value);
+            }
+        }
+    }
+
+});
+
+Y.extend(FormRowWidget, Y.Widget, {
+
+    BOUNDING_TEMPLATE: "<tr></tr>",
+
+    CONTENT_TEMPLATE: '<td colspan="2"></td>',
+
+    initializer: function(config) {
+        this.labelNode = Y.Node.create("<label />");
+        this.helpNode = Y.Node.create(('<span class="helper unseen">'+
+            '&nbsp;<a href=""' +
+            'target="help" class="sprite maybe">&nbsp;' +
+            '<span class="invisible-link"></span></a></span>'));
+        this.fieldNode = Y.Node.create("<div></div>");
+        this.descriptionNode = Y.Node.create('<p class="formHelp" />');
+        this.spinnerNode = Y.Node.create(
+            '<img src="/@@/spinner" alt="Loading..." />');
+    },
+
+    renderUI: function() {
+        this.get("contentBox")
+            .append(this.labelNode)
+            .append(this.helpNode)
+            .append(this.fieldNode)
+            .append(this.descriptionNode);
+    },
+
+    /**
+     * Show the spinner.
+     *
+     * @method showSpinner
+     */
+    showSpinner: function() {
+        this.fieldNode.empty().append(this.spinnerNode);
+    },
+
+    /**
+     * Hide the spinner.
+     *
+     * @method hideSpinner
+     */
+    hideSpinner: function() {
+        this.spinnerNode.remove();
+    },
+
+    /**
+     * Display an error.
+     *
+     * @method showError
+     */
+    showError: function(error) {
+        var message = Y.Node.create('<p />').set("text", error);
+        this.fieldNode.empty().append(message);
+        Y.lazr.anim.red_flash({node: message}).run();
+    }
+
+});
+
+namespace.FormRowWidget = FormRowWidget;
+
+
+/**
+ * A form row matching that which LaunchpadForm presents, containing a
+ * list of checkboxes, and an optional label and description.
+ *
+ * @class ChoiceListWidget
+ */
+var ChoiceListWidget;
+
+ChoiceListWidget = function() {
+    ChoiceListWidget.superclass.constructor.apply(this, arguments);
+};
+
+Y.mix(ChoiceListWidget, {
+
+    NAME: 'choiceListWidget',
+
+    ATTRS: {
+
+        /**
+         * An array of strings from which to choose.
+         *
+         * @property choices
+         */
+        choices: {
+            getter: function() {
+                return this.fieldNode.all("li > input").get("value");
+            },
+            setter: function(value, name) {
+                var choices = Y.Array.unique(value).sort();
+                var list = Y.Node.create("<ul />");
+                var self = this;
+                choices.forEach(
+                    function(choice) {
+                       var item = self._createChoice(choice);
+                       list.append(item);
+                    }
+                );
+                this.fieldNode.empty().append(list);
+            }
+        },
+
+        /**
+         * The current selection.
+         *
+         * @property choice
+         */
+        choice: {
+            setter: function(value, name) {
+                if (!Y.Lang.isArray(value)) {
+                    value = [value];
+                }
+                this.fieldNode.all("li > input").each(
+                    function(node) {
+                        node.set(
+                            "checked",
+                            value.indexOf(node.get("value")) >= 0);
+                    }
+                );
+            },
+            getter: function() {
+                var choice = [];
+                this.fieldNode.all("li > input").each(
+                    function(node) {
+                        if (node.get("checked")) {
+                            choice.push(node.get("value"));
+                        }
+                    }
+                );
+                if (this.get("type") === "radio") {
+                    if (choice.length === 0) {
+                        choice = null;
+                    }
+                    else if (choice.length === 1) {
+                        choice = choice[0];
+                    }
+                    else {
+                        choice = undefined;
+                    }
+                }
+                return choice;
+            }
+        },
+
+        /**
+         * The input type to display. Choose from "checkbox" or "radio".
+         *
+         * @property type
+         */
+        type: {
+            value: "checkbox",
+            setter: function(value, name) {
+                this.fieldNode.all("li > input").set("type", value);
+            }
+        }
+
+    }
+
+});
+
+Y.extend(ChoiceListWidget, FormRowWidget, {
+
+    /**
+     * Helper method to create an entry for the select widget.
+     *
+     * @method _createChoice
+     */
+    _createChoice: function(choice) {
+         var field_name = this.get("name");
+         var field_type = this.get("type");
+         var item = Y.Node.create(
+            "<li><input /> <label /></li>");
+        item.one("input")
+            .set("type", field_type)
+            .set("name", field_name)
+            .set("value", choice);
+        item.one("label")
+            .setAttribute(
+                "for", item.one("input").generateID())
+            .setStyle("font-weight", "normal")
+            .set("text", choice);
+        return item;
+    },
+
+   /**
+     * Remove a list of choices from the possible widget's choices.
+     *
+     * @method remove_choices
+     */
+    remove_choices: function(choices) {
+        choices.forEach(
+            function(choice) {
+                this.fieldNode.all("select > option").each(
+                    function(option) { options.push(option); });
+                this.fieldNode.all(
+                    "li input[value=" + choice + "]").each(
+                        function(li_input) {
+                            li_input.get('parentNode').remove();
+                        }
+                );
+            },
+            this
+        );
+        Y.lazr.anim.green_flash({node: this.fieldNode}).run();
+    },
+
+    _sorted_position: function(choice) {
+        var options = [];
+        this.fieldNode.all("input").each(
+            function(node) {
+                options.push(node.get('value'));
+            }
+        );
+        options.push(choice);
+        return options.sort().indexOf(choice);
+    },
+
+   /**
+     * Add new choices (if they are not already present).
+     *
+     * @method add_choices
+     */
+    add_choices: function(new_choices) {
+        new_choices.forEach(
+            function(choice) {
+                if (this.fieldNode.all(
+                    "li > input[value=" + choice + "]").isEmpty()) {
+                    var list = this.fieldNode.one('ul');
+                    if (list === null) {
+                        list = Y.Node.create("<ul />");
+                        this.fieldNode.empty().append(list);
+                    }
+                    var option = this._createChoice(choice);
+                    var options = list.all('input');
+                    if (options.isEmpty()) {
+                        list.append(option);
+                    }
+                    else {
+                        var pos = this._sorted_position(choice);
+                        if (pos === 0) {
+                            list.prepend(option);
+                        }
+                        else {
+                            list.insertBefore(option, options.item(pos));
+                        }
+                    }
+                }
+            }, this
+        );
+        Y.lazr.anim.green_flash({node: this.fieldNode}).run();
+    }
+
+});
+
+
+namespace.ChoiceListWidget = ChoiceListWidget;
+
+
+/**
+ * A special form of FormRowWidget, containing a select control.
+ *
+ * @class SelectWidget
+ */
+var SelectWidget;
+
+SelectWidget = function() {
+    SelectWidget.superclass.constructor.apply(this, arguments);
+};
+
+Y.mix(SelectWidget, {
+
+    NAME: 'selectWidget',
+
+    ATTRS: {
+
+        /**
+         * An array of objects from which to choose. Each object
+         * should contain a value for "value", "text" and "data".
+         *
+         * @property choices
+         */
+        choices: {
+            getter: function() {
+                /* I think this is a YUI3 wart; I can't see any way to
+                   map() over a NodeList, so I must push the elements
+                   one by one into an array first. */
+                var options = Y.Array([]);
+                this.fieldNode.all("select > option").each(
+                    function(option) { options.push(option); });
+                return options.map(
+                    function(option) {
+                        return {
+                            value: option.get("value"),
+                            text: option.get("text"),
+                            data: option.getData("data")
+                        };
+                    }
+                );
+            },
+            setter: function(value, name) {
+                var select = Y.Node.create("<select />");
+                select.set("name", this.get("name"))
+                      .set("size", this.get("size"));
+                if (this.get("multiple")) {
+                    select.set("multiple", "multiple");
+                }
+                var choices = Y.Array(value);
+                choices.forEach(
+                    function(choice) {
+                        var option = Y.Node.create("<option />");
+                        option.set("value", choice.value)
+                              .set("text", choice.text)
+                              .setData("data", choice.data);
+                        select.append(option);
+                    }
+                );
+                if (choices.length > 0) {
+                    this.fieldNode.empty().append(select);
+                }
+                else {
+                    this.fieldNode.empty();
+                }
+            }
+        },
+
+        /**
+         * The current selection.
+         *
+         * @property choice
+         */
+        choice: {
+            setter: function(value, name) {
+                if (!Y.Lang.isArray(value)) {
+                    value = [value];
+                }
+                this.fieldNode.all("select > option").each(
+                    function(node) {
+                        node.set(
+                            "selected",
+                            value.indexOf(node.get("value")) >= 0);
+                    }
+                );
+            },
+            getter: function() {
+                var choice = [];
+                this.fieldNode.all("select > option").each(
+                    function(node) {
+                        if (node.get("selected")) {
+                            choice.push(node.get("value"));
+                        }
+                    }
+                );
+                return choice;
+            }
+        },
+
+        /**
+         * The number of rows to show in the select widget.
+         *
+         * @property size
+         */
+        size: {
+            value: 1,
+            setter: function(value, name) {
+                this.fieldNode.all("select").set("size", value);
+            }
+        },
+
+        /**
+         * Whether multiple rows can be selected.
+         *
+         * @property multiple
+         */
+        multiple: {
+            value: false,
+            setter: function(value, name) {
+                value = value ? true : false;
+                this.fieldNode.all("select").set("multiple", value);
+                return value;
+            }
+        }
+
+    }
+
+});
+
+Y.extend(SelectWidget, FormRowWidget, {
+
+    _sorted_position: function(choice) {
+        var options = [];
+        this.fieldNode.all("option").each(
+            function(node) {
+                options.push(node.get('text'));
+            }
+        );
+        options.push(choice);
+        return options.sort().indexOf(choice);
+    },
+
+    /**
+     * Choose a size for the select control based on the number of
+     * choices, up to an optional maximum size.
+     *
+     * @method autoSize
+     */
+    autoSize: function(maxSize) {
+        var choiceCount = this.fieldNode.all("select > option").size();
+        if (choiceCount === 0) {
+            this.set("size", 1);
+        }
+        else if (maxSize === undefined) {
+            this.set("size", choiceCount);
+        }
+        else if (choiceCount < maxSize) {
+            this.set("size", choiceCount);
+        }
+        else {
+            this.set("size", maxSize);
+        }
+        return this;
+    }
+
+});
+
+namespace.SelectWidget = SelectWidget;
+
+
+/**
+ * A widget to encapsulate functionality around the form actions.
+ *
+ * @class FormActionsWidget
+ */
+var FormActionsWidget;
+
+FormActionsWidget = function() {
+    FormActionsWidget
+        .superclass.constructor.apply(this, arguments);
+};
+
+FormActionsWidget.ATTRS = {
+    duration: {
+        value: 1.0
+    },
+
+    height: {
+        value: 0
+    },
+
+    opacity: {
+        value: 0
+    }
+};
+
+
+Y.mix(FormActionsWidget, {
+
+    NAME: 'formActionsWidget',
+
+    HTML_PARSER: {
+        submitButtonNode: "input[type=submit]"
+    }
+
+});
+
+Y.extend(FormActionsWidget, Y.Widget, {
+
+    initializer: function(config) {
+        this.client = new Y.lp.client.Launchpad();
+        this.error_handler = new Y.lp.client.ErrorHandler();
+        this.error_handler.clearProgressUI = Y.bind(this.hideSpinner, this);
+        this.error_handler.showError = Y.bind(this.showError, this);
+        this.submitButtonNode = config.submitButtonNode;
+        this.spinnerNode = Y.Node.create(
+            '<img src="/@@/spinner" alt="Loading..." />');
+    },
+
+    /**
+     * Show the spinner, and hide the submit button.
+     *
+     * @method showSpinner
+     */
+    showSpinner: function() {
+        this.submitButtonNode.replace(this.spinnerNode);
+    },
+
+    /**
+     * Hide the spinner, and show the submit button again.
+     *
+     * @method hideSpinner
+     */
+    hideSpinner: function() {
+        this.spinnerNode.replace(this.submitButtonNode);
+    },
+
+    /**
+     * Display an error.
+     *
+     * @method showError
+     */
+    showError: function(error) {
+        Y.Node.create('<p class="error message" />')
+            .appendTo(this.get("contentBox"))
+            .set("text", error);
+    },
+
+    /**
+     * Remove all errors that have been previously displayed by showError.
+     *
+     * @method hideErrors
+     */
+    hideErrors: function(error) {
+        this.get("contentBox").all("p.error.message").remove();
+    }
+
+});
+
+namespace.FormActionsWidget = FormActionsWidget;
+
+
+}, "0.1", {"requires": ["node", "dom", "io", "widget", "lp.client",
+                        "lazr.anim", "array-extras", "transition"]});

=== added directory 'lib/lp/app/javascript/formwidgets/tests'
=== added file 'lib/lp/app/javascript/formwidgets/tests/test_formwidgets.html'
--- lib/lp/app/javascript/formwidgets/tests/test_formwidgets.html	1970-01-01 00:00:00 +0000
+++ lib/lp/app/javascript/formwidgets/tests/test_formwidgets.html	2011-07-18 11:56:36 +0000
@@ -0,0 +1,47 @@
+<!DOCTYPE
+   HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
+   "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+  <head>
+  <title>Launchpad Form Widgets</title>
+
+  <!-- YUI and test setup -->
+  <link rel="stylesheet" href="../../testing/test.css" />
+  <script type="text/javascript"
+          src="../../../../../canonical/launchpad/icing/yui/yui/yui.js"></script>
+  <script type="text/javascript"
+          src="../../testing/testrunner.js"></script>
+
+  <!-- Required modules -->
+  <script type="text/javascript"
+          src="../../client.js"></script>
+  <script type="text/javascript"
+          src="../../activator/activator.js"></script>
+  <script type="text/javascript"
+          src="../../anim/anim.js"></script>
+  <script type="text/javascript"
+          src="../../lazr/lazr.js"></script>
+  <script type="text/javascript"
+          src="../../overlay/overlay.js"></script>
+  <!-- <script type="text/javascript" -->
+  <!--         src="../../picker/picker.js"></script> -->
+  <!-- <script type="text/javascript" -->
+  <!--         src="../../picker/person_picker.js"></script> -->
+  <!-- <script type="text/javascript" -->
+  <!--         src="../../picker/picker_patcher.js"></script> -->
+
+  <!-- The module under test -->
+  <script type="text/javascript"
+          src="../formwidgets.js"></script>
+
+  <!-- The test suite -->
+  <script type="text/javascript"
+          src="test_formwidgets.js"></script>
+
+  </head>
+  <body class="yui3-skin-sam">
+    <ul id="suites">
+      <li>lp.app.formwidgets.test</li>
+    </ul>
+  </body>
+</html>

=== added file 'lib/lp/app/javascript/formwidgets/tests/test_formwidgets.js'
--- lib/lp/app/javascript/formwidgets/tests/test_formwidgets.js	1970-01-01 00:00:00 +0000
+++ lib/lp/app/javascript/formwidgets/tests/test_formwidgets.js	2011-07-18 11:56:36 +0000
@@ -0,0 +1,605 @@
+/**
+ * Copyright 2011 Canonical Ltd. This software is licensed under the
+ * GNU Affero General Public License version 3 (see the file LICENSE).
+ *
+ * Tests for Form Widgets.
+ *
+ * @module lp.app.formwidgets
+ * @submodule test
+ */
+
+YUI.add('lp.app.formwidgets.test', function(Y) {
+
+    var namespace = Y.namespace('lp.app.formwidgets.test');
+
+    var Assert = Y.Assert;
+    var ArrayAssert = Y.ArrayAssert;
+
+    var suite = new Y.Test.Suite("formwidgets Tests");
+    var widgets = Y.lp.app.formwidgets;
+
+    var attrgetter = function(name) {
+        return function(thing) {
+            return thing[name];
+        };
+    };
+
+    var attrselect = function(name) {
+        return function(things) {
+            return Y.Array(things).map(attrgetter(name));
+        };
+    };
+
+    var testFormRowWidget = {
+        name: 'TestFormRowWidget',
+
+        setUp: function() {
+            this.container = Y.Node.create("<div />");
+            this.widget = new widgets.FormRowWidget();
+        },
+
+        tearDown: function() {
+            this.container.remove(true);
+        },
+
+        testRender: function() {
+            this.widget.render(this.container);
+            Assert.isTrue(
+                this.container.contains(
+                    this.widget.get("boundingBox")));
+        },
+
+        testRenderWithName: function() {
+            this.widget.fieldNode.append(
+                Y.Node.create("<input /><input />"));
+            this.widget.set("name", "field");
+            this.widget.render(this.container);
+            ArrayAssert.itemsAreEqual(
+                ["field", "field"],
+                this.container.all("input").get("name"));
+        },
+
+        testRenderWithNameChange: function() {
+            this.widget.fieldNode.append(
+                Y.Node.create("<input /><input />"));
+            this.widget.set("name", "field");
+            this.widget.render(this.container);
+            this.widget.set("name", "plain");
+            ArrayAssert.itemsAreEqual(
+                ["plain", "plain"],
+                this.container.all("input").get("name"));
+        },
+
+        testRenderLabel: function() {
+            this.widget.set("label", "Test label");
+            this.widget.render(this.container);
+            Assert.areEqual(
+                "Test label",
+                this.container.one("label").get("text"));
+        },
+
+        testRenderLabelChange: function() {
+            this.widget.set("label", "Test label");
+            this.widget.render(this.container);
+            this.widget.set("label", "Another label");
+            Assert.areEqual(
+                "Another label",
+                this.container.one("label").get("text"));
+        },
+
+        testRenderDescription: function() {
+            this.widget.set("description", "Test description.");
+            this.widget.render(this.container);
+            Assert.areEqual(
+                "Test description.",
+                this.container.one("p.formHelp").get("text"));
+        },
+
+        testRenderDescriptionChange: function() {
+            this.widget.set("description", "Test description.");
+            this.widget.render(this.container);
+            this.widget.set("description", "Another description.");
+            Assert.areEqual(
+                "Another description.",
+                this.container.one("p.formHelp").get("text"));
+        },
+
+        testRenderHelp: function() {
+            this.widget.set("help",
+                {link: "http://test.com/test.html", text: "Help text"});
+            this.widget.render(this.container);
+            Assert.isFalse(this.container
+                .one('span.helper').hasClass("unseen"));
+            Assert.areEqual(
+                "Help text",
+                this.container.one("a")
+                   .one('span.invisible-link').get("text"));
+            Assert.areEqual(
+                "http://test.com/test.html",
+                this.container.one("a").get('href'));
+        },
+
+        testGetHelp: function() {
+            this.widget.set("help",
+                {link: "http://test.com/test.html", text: "Help text"});
+            this.widget.render(this.container);
+            Assert.areEqual(
+                "http://test.com/test.html",
+                this.widget.get("help").link);
+            Assert.areEqual(
+                "Help text",
+                this.widget.get("help").text);
+         },
+
+        testChangeHelp: function() {
+            this.widget.set("help",
+                {link: "http://test.com/test.html", text: "Help text"});
+            this.widget.render(this.container);
+            this.widget.set(
+                "help",
+                {link: "http://test.com/test2.html", text: "Help text2"});
+            Assert.areEqual(
+                "Help text2",
+                this.container.one("a")
+                    .one('span.invisible-link').get("text"));
+            Assert.areEqual(
+                "http://test.com/test2.html",
+                this.container.one("a").get('href'));
+        },
+
+        testChangeHelpUndefined: function() {
+            this.widget.set("help",
+                {link: "http://test.com/test.html", text: "Help text"});
+            this.widget.render(this.container);
+            this.widget.set("help", {});
+            Assert.isTrue(this.container
+                .one('span.helper').hasClass("unseen"));
+        },
+
+        testSpinner: function() {
+            Assert.isFalse(
+                this.widget.fieldNode.contains(this.widget.spinnerNode));
+            this.widget.showSpinner();
+            Assert.isTrue(
+                this.widget.fieldNode.contains(this.widget.spinnerNode));
+            this.widget.hideSpinner();
+            Assert.isFalse(
+                this.widget.fieldNode.contains(this.widget.spinnerNode));
+        },
+
+        testShowError: function() {
+            this.widget.showError("Unrealistic expectations.");
+            Assert.areEqual(
+                "Unrealistic expectations.",
+                this.widget.fieldNode.one("p").get("text"));
+        }
+
+    };
+
+    suite.add(new Y.Test.Case(testFormRowWidget));
+
+    var testChoiceListWidget = {
+        name: 'TestChoiceListWidget',
+
+        setUp: function() {
+            this.container = Y.Node.create("<div />");
+            this.widget = new widgets.ChoiceListWidget();
+        },
+
+        tearDown: function() {
+            this.container.remove(true);
+        },
+
+        testRenderChoices: function() {
+            this.widget.set("choices", ["a", "b"]);
+            this.widget.render(this.container);
+            ArrayAssert.itemsAreEqual(
+                ["a", "b"],
+                this.container.all("li > input").get("value"));
+            ArrayAssert.itemsAreEqual(
+                ["a", "b"],
+                this.container.all("li > label").get("text"));
+            ArrayAssert.itemsAreEqual(
+                ["checkbox", "checkbox"],
+                this.container.all("li > input").getAttribute("type"));
+        },
+
+        testRenderChoicesChange: function() {
+            this.widget.set("choices", ["a", "b"]);
+            this.widget.render(this.container);
+            this.widget.set("choices", ["c", "d", "e"]);
+            ArrayAssert.itemsAreEqual(
+                ["c", "d", "e"],
+                this.container.all("li > input").get("value"));
+            ArrayAssert.itemsAreEqual(
+                ["c", "d", "e"],
+                this.container.all("li > label").get("text"));
+        },
+
+       testRenderAddChoices: function() {
+            this.widget.add_choices(["a", "b"]);
+            this.widget.render(this.container);
+            ArrayAssert.itemsAreEqual(
+                ["a", "b"],
+                this.container.all("li > input").get("value"));
+            ArrayAssert.itemsAreEqual(
+                ["a", "b"],
+                this.container.all("li > label").get("text"));
+            ArrayAssert.itemsAreEqual(
+                ["checkbox", "checkbox"],
+                this.container.all("li > input").getAttribute("type"));
+        },
+
+        testRenderRemoveChoices: function() {
+            this.widget.add_choices(["a", "b", "c", "d"]);
+            this.widget.render(this.container);
+            this.widget.remove_choices(["b", "d"]);
+            ArrayAssert.itemsAreEqual(
+                ["a", "c"],
+                this.container.all("li > input").get("value"));
+            ArrayAssert.itemsAreEqual(
+                ["a", "c"],
+                this.container.all("li > label").get("text"));
+        },
+
+        testRenderChoicesChangeType: function() {
+            this.widget.set("choices", ["a", "b"]);
+            this.widget.render(this.container);
+            this.widget.set("type", "radio");
+            ArrayAssert.itemsAreEqual(
+                ["radio", "radio"],
+                this.container.all("li > input").getAttribute("type"));
+
+        },
+
+        testChoiceWithCheckBox: function() {
+            this.widget
+                .set("type", "checkbox")
+                .set("choices", ["a", "b"]);
+            ArrayAssert.itemsAreEqual(
+                [], this.widget.get("choice"));
+            this.widget.fieldNode.one("input[value=a]")
+                .set("checked", "checked");
+            ArrayAssert.itemsAreEqual(
+                ["a"], this.widget.get("choice"));
+        },
+
+        testChoiceWithRadio: function() {
+            // When both radio buttons are checked (this is possible in some
+            // broken DOMs/JS engined), choice is undefined.
+            this.widget
+                .set("type", "radio")
+                .set("choices", ["a", "b"]);
+            Assert.isNull(this.widget.get("choice"));
+            this.widget.fieldNode.one("input[value=a]")
+                .set("checked", "checked");
+            Assert.areEqual("a", this.widget.get("choice"));
+            this.widget.fieldNode.one("input[value=b]")
+                .set("checked", "checked");
+            if (this.widget.fieldNode.one("input[value=a]").get("checked")) {
+                // This assertion can only be made if the DOM/JS is broken
+                // in the host browser.
+                Assert.isUndefined(this.widget.get("choice"));
+            }
+            else {
+                // The host browser's DOM/JS is sane.
+                ArrayAssert.itemsAreEqual(
+                    ["b"], this.widget.get("choice"));
+            }
+        },
+
+        testSetChoiceWithCheckBox: function() {
+            this.widget
+                .set("type", "checkbox")
+                .set("choices", ["a", "b"])
+                .set("choice", "a");
+            ArrayAssert.itemsAreEqual(
+                ["a"], this.widget.get("choice"));
+            this.widget.set("choice", ["a"]);
+            ArrayAssert.itemsAreEqual(
+                ["a"], this.widget.get("choice"));
+            this.widget.set("choice", ["a", "b"]);
+            ArrayAssert.itemsAreEqual(
+                ["a", "b"], this.widget.get("choice"));
+            this.widget.set("choice", ["b", "c"]);
+            ArrayAssert.itemsAreEqual(
+                ["b"], this.widget.get("choice"));
+        },
+
+        testSetChoiceWithRadio: function() {
+            this.widget
+                .set("type", "radio")
+                .set("choices", ["a", "b"])
+                .set("choice", "a");
+            ArrayAssert.itemsAreEqual(
+                "a", this.widget.get("choice"));
+            this.widget.set("choice", ["a"]);
+            ArrayAssert.itemsAreEqual(
+                "a", this.widget.get("choice"));
+            this.widget.set("choice", "b");
+            ArrayAssert.itemsAreEqual(
+                "b", this.widget.get("choice"));
+        }
+
+    };
+
+    testChoiceListWidget = Y.merge(
+        testFormRowWidget, testChoiceListWidget);
+    suite.add(new Y.Test.Case(testChoiceListWidget));
+
+    var testSelectWidget = {
+        name: 'TestSelectWidget',
+
+        choices: [
+            {value: "a", text: "A", data: 123},
+            {value: "b", text: "B", data: 456},
+            {value: "c", text: "C", data: 789}
+        ],
+
+        setUp: function() {
+            this.container = Y.Node.create("<div />");
+            this.widget = new widgets.SelectWidget();
+        },
+
+        tearDown: function() {
+            this.container.remove(true);
+        },
+
+        testNameChange: function() {
+            this.widget
+                .set("name", "foo")
+                .set("choices", this.choices);
+            var select = this.widget.fieldNode.one("select");
+            Assert.areEqual("foo", select.get("name"));
+            this.widget
+                .set("name", "bar");
+            Assert.areEqual("bar", select.get("name"));
+        },
+
+        testChoices: function() {
+            this.widget.set("choices", this.choices);
+            var choices_observed = this.widget.get("choices");
+            /* We have to compare bit by bit ourselves because
+               Javascript is a language born in hell. */
+            ArrayAssert.itemsAreEqual(
+                attrselect("value")(this.choices),
+                attrselect("value")(choices_observed));
+            ArrayAssert.itemsAreEqual(
+                attrselect("text")(this.choices),
+                attrselect("text")(choices_observed));
+            ArrayAssert.itemsAreEqual(
+                attrselect("data")(this.choices),
+                attrselect("data")(choices_observed));
+        },
+
+        testRenderChoices: function() {
+            this.widget.set("choices", this.choices);
+            this.widget.render(this.container);
+            ArrayAssert.itemsAreEqual(
+                ["a", "b", "c"],
+                this.container.all("select > option").get("value"));
+            ArrayAssert.itemsAreEqual(
+                ["A", "B", "C"],
+                this.container.all("select > option").get("text"));
+        },
+
+        testRenderEmptyChoices: function() {
+            this.widget.fieldNode.append("something");
+            this.widget.set("choices", []);
+            this.widget.render(this.container);
+            Assert.isNull(this.container.one("select"));
+            Assert.isFalse(this.widget.fieldNode.hasChildNodes());
+        },
+
+        testRenderChoicesChange: function() {
+            var choices1 = [
+                {value: "a", text: "A", data: 123}
+            ];
+            this.widget.set("choices", choices1);
+            this.widget.render(this.container);
+            var choices2 = [
+                {value: "b", text: "B", data: 456},
+                {value: "c", text: "C", data: 789}
+            ];
+            this.widget.set("choices", choices2);
+            ArrayAssert.itemsAreEqual(
+                ["b", "c"],
+                this.container.all("select > option").get("value"));
+            ArrayAssert.itemsAreEqual(
+                ["B", "C"],
+                this.container.all("select > option").get("text"));
+        },
+
+        testChoice: function() {
+            this.widget
+                .set("choices", this.choices)
+                .set("multiple", true);
+            /* It would be better to deselect all options by default,
+               but this appears impossible; the browser seems to
+               select the first option when rendering. */
+            this.widget.fieldNode.all("option").set("selected", false);
+            ArrayAssert.itemsAreEqual(
+                [], this.widget.get("choice"));
+            this.widget.fieldNode.one("option[value=a]")
+                .set("selected", true);
+            ArrayAssert.itemsAreEqual(
+                ["a"], this.widget.get("choice"));
+            this.widget.fieldNode.one("option[value=c]")
+                .set("selected", true);
+            ArrayAssert.itemsAreEqual(
+                ["a", "c"], this.widget.get("choice"));
+        },
+
+        testSetChoice: function() {
+            this.widget
+                .set("multiple", true)
+                .set("choices", this.choices)
+                .set("choice", "a");
+            ArrayAssert.itemsAreEqual(
+                ["a"], this.widget.get("choice"));
+            this.widget.set("choice", ["a"]);
+            ArrayAssert.itemsAreEqual(
+                ["a"], this.widget.get("choice"));
+            this.widget.set("choice", ["a", "b"]);
+            ArrayAssert.itemsAreEqual(
+                ["a", "b"], this.widget.get("choice"));
+            this.widget.set("choice", ["b", "z"]);
+            ArrayAssert.itemsAreEqual(
+                ["b"], this.widget.get("choice"));
+        },
+
+        testSize: function() {
+            Assert.areEqual(1, this.widget.get("size"));
+        },
+
+        testRenderSize: function() {
+            this.widget
+                .set("choices", this.choices)
+                .set("size", 7)
+                .render(this.container);
+            Assert.areEqual(
+                7, this.widget.fieldNode.one("select").get("size"));
+        },
+
+        testRenderSizeChange: function() {
+            this.widget
+                .set("choices", this.choices)
+                .set("size", 3)
+                .render(this.container)
+                .set("size", 5);
+            Assert.areEqual(
+                5, this.widget.fieldNode.one("select").get("size"));
+        },
+
+        testAutoSize: function() {
+            this.widget.set("choices", this.choices);
+            /* Without argument, autoSize() sets the size to the same
+               as the number of choices. */
+            this.widget.autoSize();
+            Assert.areEqual(3, this.widget.get("size"));
+        },
+
+        testAutoSizeMoreChoicesThanMaxiumum: function() {
+            this.widget.set("choices", this.choices);
+            /* autoSize() sets the size to the same as the number of
+               choices unless there are more than the specified
+               maximum. */
+            this.widget.autoSize(2);
+            Assert.areEqual(2, this.widget.get("size"));
+        },
+
+        testAutoSizeFewerChoicesThanMaxiumum: function() {
+            this.widget.set("choices", this.choices);
+            /* autoSize() sets the size to the same as the number of
+               choices. */
+            this.widget.autoSize(5);
+            Assert.areEqual(3, this.widget.get("size"));
+        },
+
+        testMultiple: function() {
+            Assert.areEqual(false, this.widget.get("multiple"));
+        },
+
+        testRenderMultiple: function() {
+            this.widget
+                .set("choices", this.choices)
+                .set("multiple", true)
+                .render(this.container);
+            Assert.isTrue(
+                this.widget.fieldNode.one("select")
+                    .hasAttribute("multiple"));
+        },
+
+        testRenderMultipleChange: function() {
+            this.widget
+                .set("choices", this.choices)
+                .set("multiple", true)
+                .render(this.container)
+                .set("multiple", false);
+            Assert.isFalse(
+                this.widget.fieldNode.one("select")
+                    .hasAttribute("multiple"));
+        }
+
+    };
+
+    testSelectWidget = Y.merge(
+        testFormRowWidget, testSelectWidget);
+    suite.add(new Y.Test.Case(testSelectWidget));
+
+    var testFormActionsWidget = {
+        name: 'TestFormActionsWidget',
+
+        makeActionsDiv: function() {
+            var submit = Y.Node.create("<input />")
+                .set("type", "submit")
+                .set("value", "Initialize Series");
+            var cancel = Y.Node.create("<a>Cancel</a>");
+            var div = Y.Node.create("<div />")
+                .addClass("actions")
+                .append(submit)
+                .append(cancel);
+            return div;
+        },
+
+        setUp: function() {
+            this.actions = this.makeActionsDiv();
+            this.widget = new widgets.FormActionsWidget(
+                {srcNode: this.actions});
+        },
+
+        tearDown: function() {
+            this.actions.remove(true);
+        },
+
+        testInitializer: function() {
+            Assert.isTrue(
+                this.actions.one("input").compareTo(
+                    this.widget.submitButtonNode));
+        },
+
+        testSpinner: function() {
+            Assert.isTrue(
+                this.actions.contains(this.widget.submitButtonNode));
+            Assert.isFalse(
+                this.actions.contains(this.widget.spinnerNode));
+            this.widget.showSpinner();
+            Assert.isFalse(
+                this.actions.contains(this.widget.submitButtonNode));
+            Assert.isTrue(
+                this.actions.contains(this.widget.spinnerNode));
+            this.widget.hideSpinner();
+            Assert.isTrue(
+                this.actions.contains(this.widget.submitButtonNode));
+            Assert.isFalse(
+                this.actions.contains(this.widget.spinnerNode));
+        },
+
+        testShowError: function() {
+            this.widget.showError("The Man From U.N.C.L.E.");
+            Assert.areEqual(
+                "The Man From U.N.C.L.E.",
+                this.actions.one("p.error.message").get("text"));
+        },
+
+        testHideErrors: function() {
+            this.widget.showError("The Man From U.N.C.L.E.");
+            this.widget.showError("The Woman From A.U.N.T.I.E.");
+            this.widget.hideErrors();
+            Assert.isNull(this.actions.one("p.error.message"));
+        }
+
+    };
+
+    suite.add(new Y.Test.Case(testFormActionsWidget));
+
+    // Exports.
+    namespace.testFormRowWidget = testFormRowWidget;
+    namespace.testChoiceListWidget = testChoiceListWidget;
+    namespace.testSelectWidget = testSelectWidget;
+    namespace.testFormActionsWidget = testFormActionsWidget;
+    namespace.suite = suite;
+
+}, "0.1", {"requires": [
+               'test', 'console', 'node-event-simulate',
+               'lp.app.formwidgets']});

=== added directory 'lib/lp/registry/javascript/distroseries'
=== renamed file 'lib/lp/registry/javascript/distroseries.initseries.js' => 'lib/lp/registry/javascript/distroseries/initseries.js'
--- lib/lp/registry/javascript/distroseries.initseries.js	2011-07-18 11:56:35 +0000
+++ lib/lp/registry/javascript/distroseries/initseries.js	2011-07-18 11:56:36 +0000
@@ -2,10 +2,10 @@
  * Copyright 2011 Canonical Ltd. This software is licensed under the
  * GNU Affero General Public License version 3 (see the file LICENSE).
  *
- * DistroSeries related stuff.
+ * DistroSeries Initialization.
  *
- * @module registry
- * @submodule distroseries
+ * @module lp.registry.distroseries
+ * @submodule initseries
  */
 
 YUI.add('lp.registry.distroseries.initseries', function(Y) {
@@ -15,6 +15,7 @@
 var namespace = Y.namespace('lp.registry.distroseries.initseries');
 
 var widgets = Y.lp.registry.distroseries.widgets;
+var formwidgets = Y.lp.app.formwidgets;
 
 
 /**
@@ -35,7 +36,7 @@
 
 });
 
-Y.extend(DeriveDistroSeriesActionsWidget, widgets.FormActionsWidget, {
+Y.extend(DeriveDistroSeriesActionsWidget, formwidgets.FormActionsWidget, {
 
     initializer: function(config) {
         this.context = config.context;
@@ -206,7 +207,7 @@
                 .render(form_table_body);
     }
     var package_copy_options =
-        new widgets.ChoiceListWidget()
+        new formwidgets.ChoiceListWidget()
             .set("name", "field.package_copy_options")
             .set("type", "radio")
             .set("label", "Copy options:")
@@ -305,4 +306,4 @@
 
 }, "0.1", {"requires": ["node", "dom", "io", "widget", "array-extras",
                         "transition", "lp.registry.distroseries.widgets",
-                        "lp.app.picker"]});
+                        "lp.app.formwidgets", "lp.app.picker"]});

=== added directory 'lib/lp/registry/javascript/distroseries/tests'
=== renamed file 'lib/lp/registry/javascript/tests/test_distroseries.initseries.html' => 'lib/lp/registry/javascript/distroseries/tests/test_initseries.html'
--- lib/lp/registry/javascript/tests/test_distroseries.initseries.html	2011-07-18 11:56:35 +0000
+++ lib/lp/registry/javascript/distroseries/tests/test_initseries.html	2011-07-18 11:56:36 +0000
@@ -3,46 +3,48 @@
    "http://www.w3.org/TR/html4/strict.dtd">
 <html>
   <head>
-  <title>Launchpad DistroSeries</title>
+  <title>Launchpad DistroSeries Initialiazation</title>
 
   <!-- YUI and test setup -->
-  <link rel="stylesheet" href="../../../app/javascript/testing/test.css" />
-  <script type="text/javascript"
-          src="../../../../canonical/launchpad/icing/yui/yui/yui.js"></script>
-  <script type="text/javascript"
-          src="../../../app/javascript/testing/testrunner.js"></script>
+  <link rel="stylesheet" href="../../../../app/javascript/testing/test.css" />
+  <script type="text/javascript"
+          src="../../../../../canonical/launchpad/icing/yui/yui/yui.js"></script>
+  <script type="text/javascript"
+          src="../../../../app/javascript/testing/testrunner.js"></script>
 
   <!-- Required modules -->
   <script type="text/javascript"
-          src="../../../app/javascript/client.js"></script>
-  <script type="text/javascript"
-          src="../../../app/javascript/activator/activator.js"></script>
-  <script type="text/javascript"
-          src="../../../app/javascript/anim/anim.js"></script>
-  <script type="text/javascript"
-          src="../../../app/javascript/lazr/lazr.js"></script>
-  <script type="text/javascript"
-          src="../../../app/javascript/overlay/overlay.js"></script>
-  <script type="text/javascript"
-          src="../../../app/javascript/picker/picker.js"></script>
-  <script type="text/javascript"
-          src="../../../app/javascript/picker/person_picker.js"></script>
-  <script type="text/javascript"
-          src="../../../app/javascript/picker/picker_patcher.js"></script>
-  <script type="text/javascript"
-          src="../distroseries.widgets.js"></script>
+          src="../../../../app/javascript/client.js"></script>
+  <script type="text/javascript"
+          src="../../../../app/javascript/activator/activator.js"></script>
+  <script type="text/javascript"
+          src="../../../../app/javascript/anim/anim.js"></script>
+  <script type="text/javascript"
+          src="../../../../app/javascript/lazr/lazr.js"></script>
+  <script type="text/javascript"
+          src="../../../../app/javascript/overlay/overlay.js"></script>
+  <script type="text/javascript"
+          src="../../../../app/javascript/picker/picker.js"></script>
+  <script type="text/javascript"
+          src="../../../../app/javascript/picker/person_picker.js"></script>
+  <script type="text/javascript"
+          src="../../../../app/javascript/picker/picker_patcher.js"></script>
+  <script type="text/javascript"
+          src="../../../../app/javascript/formwidgets/formwidgets.js"></script>
+  <script type="text/javascript"
+          src="../widgets.js"></script>
 
   <!-- The module under test -->
   <script type="text/javascript"
-          src="../distroseries.initseries.js"></script>
+          src="../initseries.js"></script>
 
   <!-- Required test modules -->
   <script type="text/javascript"
-          src="test_distroseries.widgets.js"></script>
+          src="../../../../app/javascript/formwidgets/tests/test_formwidgets.js"></script>
 
   <!-- The test suite -->
   <script type="text/javascript"
-          src="test_distroseries.initseries.js"></script>
+          src="test_initseries.js"></script>
 
   </head>
   <body class="yui3-skin-sam">

=== renamed file 'lib/lp/registry/javascript/tests/test_distroseries.initseries.js' => 'lib/lp/registry/javascript/distroseries/tests/test_initseries.js'
--- lib/lp/registry/javascript/tests/test_distroseries.initseries.js	2011-07-18 11:56:35 +0000
+++ lib/lp/registry/javascript/distroseries/tests/test_initseries.js	2011-07-18 11:56:36 +0000
@@ -2,9 +2,9 @@
  * Copyright 2011 Canonical Ltd. This software is licensed under the
  * GNU Affero General Public License version 3 (see the file LICENSE).
  *
- * Tests for DistroSeries related stuff.
+ * Tests for DistroSeries Initialization.
  *
- * @module lp.registry.distroseries
+ * @module lp.registry.distroseries.initseries
  * @submodule test
  */
 
@@ -137,7 +137,7 @@
     };
 
     testDeriveDistroSeriesActionsWidget = Y.merge(
-        Y.lp.registry.distroseries.widgets.test.testFormActionsWidget,
+        Y.lp.app.formwidgets.test.testFormActionsWidget,
         testDeriveDistroSeriesActionsWidget);
     suite.add(new Y.Test.Case(testDeriveDistroSeriesActionsWidget));
 
@@ -228,5 +228,5 @@
 
 }, "0.1", {"requires": [
                'test', 'console', 'node-event-simulate',
-               'lp.registry.distroseries.widgets.test',
+               'lp.app.formwidgets.test',
                'lp.registry.distroseries.initseries']});

=== renamed file 'lib/lp/registry/javascript/tests/test_distroseries.widgets.html' => 'lib/lp/registry/javascript/distroseries/tests/test_widgets.html'
--- lib/lp/registry/javascript/tests/test_distroseries.widgets.html	2011-07-18 11:56:35 +0000
+++ lib/lp/registry/javascript/distroseries/tests/test_widgets.html	2011-07-18 11:56:36 +0000
@@ -3,40 +3,46 @@
    "http://www.w3.org/TR/html4/strict.dtd">
 <html>
   <head>
-  <title>Launchpad DistroSeries</title>
+  <title>Launchpad DistroSeries Widgets</title>
 
   <!-- YUI and test setup -->
-  <link rel="stylesheet" href="../../../app/javascript/testing/test.css" />
-  <script type="text/javascript"
-          src="../../../../canonical/launchpad/icing/yui/yui/yui.js"></script>
-  <script type="text/javascript"
-          src="../../../app/javascript/testing/testrunner.js"></script>
+  <link rel="stylesheet" href="../../../../app/javascript/testing/test.css" />
+  <script type="text/javascript"
+          src="../../../../../canonical/launchpad/icing/yui/yui/yui.js"></script>
+  <script type="text/javascript"
+          src="../../../../app/javascript/testing/testrunner.js"></script>
 
   <!-- Required modules -->
   <script type="text/javascript"
-          src="../../../app/javascript/client.js"></script>
-  <script type="text/javascript"
-          src="../../../app/javascript/activator/activator.js"></script>
-  <script type="text/javascript"
-          src="../../../app/javascript/anim/anim.js"></script>
-  <script type="text/javascript"
-          src="../../../app/javascript/lazr/lazr.js"></script>
-  <script type="text/javascript"
-          src="../../../app/javascript/overlay/overlay.js"></script>
-  <script type="text/javascript"
-          src="../../../app/javascript/picker/picker.js"></script>
-  <script type="text/javascript"
-          src="../../../app/javascript/picker/person_picker.js"></script>
-  <script type="text/javascript"
-          src="../../../app/javascript/picker/picker_patcher.js"></script>
+          src="../../../../app/javascript/client.js"></script>
+  <script type="text/javascript"
+          src="../../../../app/javascript/activator/activator.js"></script>
+  <script type="text/javascript"
+          src="../../../../app/javascript/anim/anim.js"></script>
+  <script type="text/javascript"
+          src="../../../../app/javascript/lazr/lazr.js"></script>
+  <script type="text/javascript"
+          src="../../../../app/javascript/overlay/overlay.js"></script>
+  <script type="text/javascript"
+          src="../../../../app/javascript/picker/picker.js"></script>
+  <script type="text/javascript"
+          src="../../../../app/javascript/picker/person_picker.js"></script>
+  <script type="text/javascript"
+          src="../../../../app/javascript/picker/picker_patcher.js"></script>
+  <script type="text/javascript"
+          src="../../../../app/javascript/formwidgets/formwidgets.js"></script>
 
   <!-- The module under test -->
   <script type="text/javascript"
-          src="../distroseries.widgets.js"></script>
+          src="../widgets.js"></script>
+
+  <!-- Required test modules -->
+  <script type="text/javascript"
+          src="../../../../app/javascript/formwidgets/tests/test_formwidgets.js"></script>
 
   <!-- The test suite -->
   <script type="text/javascript"
-          src="test_distroseries.widgets.js"></script>
+          src="test_widgets.js"></script>
 
   </head>
   <body class="yui3-skin-sam">

=== renamed file 'lib/lp/registry/javascript/tests/test_distroseries.widgets.js' => 'lib/lp/registry/javascript/distroseries/tests/test_widgets.js'
--- lib/lp/registry/javascript/tests/test_distroseries.widgets.js	2011-07-18 11:56:35 +0000
+++ lib/lp/registry/javascript/distroseries/tests/test_widgets.js	2011-07-18 11:56:36 +0000
@@ -2,9 +2,9 @@
  * Copyright 2011 Canonical Ltd. This software is licensed under the
  * GNU Affero General Public License version 3 (see the file LICENSE).
  *
- * Tests for DistroSeries related stuff.
+ * Tests for DistroSeries Widgets.
  *
- * @module lp.registry.distroseries
+ * @module lp.registry.distroseries.widgets
  * @submodule test
  */
 
@@ -17,6 +17,7 @@
 
     var suite = new Y.Test.Suite("distroseries.widgets Tests");
     var widgets = Y.lp.registry.distroseries.widgets;
+    var formwidgets = Y.lp.app.formwidgets;
 
     var attrgetter = function(name) {
         return function(thing) {
@@ -30,303 +31,6 @@
         };
     };
 
-    var testFormRowWidget = {
-        name: 'TestFormRowWidget',
-
-        setUp: function() {
-            this.container = Y.Node.create("<div />");
-            this.widget = new widgets.FormRowWidget();
-        },
-
-        tearDown: function() {
-            this.container.remove(true);
-        },
-
-        testRender: function() {
-            this.widget.render(this.container);
-            Assert.isTrue(
-                this.container.contains(
-                    this.widget.get("boundingBox")));
-        },
-
-        testRenderWithName: function() {
-            this.widget.fieldNode.append(
-                Y.Node.create("<input /><input />"));
-            this.widget.set("name", "field");
-            this.widget.render(this.container);
-            ArrayAssert.itemsAreEqual(
-                ["field", "field"],
-                this.container.all("input").get("name"));
-        },
-
-        testRenderWithNameChange: function() {
-            this.widget.fieldNode.append(
-                Y.Node.create("<input /><input />"));
-            this.widget.set("name", "field");
-            this.widget.render(this.container);
-            this.widget.set("name", "plain");
-            ArrayAssert.itemsAreEqual(
-                ["plain", "plain"],
-                this.container.all("input").get("name"));
-        },
-
-        testRenderLabel: function() {
-            this.widget.set("label", "Test label");
-            this.widget.render(this.container);
-            Assert.areEqual(
-                "Test label",
-                this.container.one("label").get("text"));
-        },
-
-        testRenderLabelChange: function() {
-            this.widget.set("label", "Test label");
-            this.widget.render(this.container);
-            this.widget.set("label", "Another label");
-            Assert.areEqual(
-                "Another label",
-                this.container.one("label").get("text"));
-        },
-
-        testRenderDescription: function() {
-            this.widget.set("description", "Test description.");
-            this.widget.render(this.container);
-            Assert.areEqual(
-                "Test description.",
-                this.container.one("p.formHelp").get("text"));
-        },
-
-        testRenderDescriptionChange: function() {
-            this.widget.set("description", "Test description.");
-            this.widget.render(this.container);
-            this.widget.set("description", "Another description.");
-            Assert.areEqual(
-                "Another description.",
-                this.container.one("p.formHelp").get("text"));
-        },
-
-        testRenderHelp: function() {
-            this.widget.set("help",
-                {link: "http://test.com/test.html", text: "Help text"});
-            this.widget.render(this.container);
-            Assert.isFalse(this.container
-                .one('span.helper').hasClass("unseen"));
-            Assert.areEqual(
-                "Help text",
-                this.container.one("a")
-                   .one('span.invisible-link').get("text"));
-            Assert.areEqual(
-                "http://test.com/test.html",
-                this.container.one("a").get('href'));
-        },
-
-        testGetHelp: function() {
-            this.widget.set("help",
-                {link: "http://test.com/test.html", text: "Help text"});
-            this.widget.render(this.container);
-            Assert.areEqual(
-                "http://test.com/test.html",
-                this.widget.get("help").link);
-            Assert.areEqual(
-                "Help text",
-                this.widget.get("help").text);
-         },
-
-        testChangeHelp: function() {
-            this.widget.set("help",
-                {link: "http://test.com/test.html", text: "Help text"});
-            this.widget.render(this.container);
-            this.widget.set(
-                "help",
-                {link: "http://test.com/test2.html", text: "Help text2"});
-            Assert.areEqual(
-                "Help text2",
-                this.container.one("a")
-                    .one('span.invisible-link').get("text"));
-            Assert.areEqual(
-                "http://test.com/test2.html",
-                this.container.one("a").get('href'));
-        },
-
-        testChangeHelpUndefined: function() {
-            this.widget.set("help",
-                {link: "http://test.com/test.html", text: "Help text"});
-            this.widget.render(this.container);
-            this.widget.set("help", {});
-            Assert.isTrue(this.container
-                .one('span.helper').hasClass("unseen"));
-        },
-
-        testSpinner: function() {
-            Assert.isFalse(
-                this.widget.fieldNode.contains(this.widget.spinnerNode));
-            this.widget.showSpinner();
-            Assert.isTrue(
-                this.widget.fieldNode.contains(this.widget.spinnerNode));
-            this.widget.hideSpinner();
-            Assert.isFalse(
-                this.widget.fieldNode.contains(this.widget.spinnerNode));
-        },
-
-        testShowError: function() {
-            this.widget.showError("Unrealistic expectations.");
-            Assert.areEqual(
-                "Unrealistic expectations.",
-                this.widget.fieldNode.one("p").get("text"));
-        }
-
-    };
-
-    suite.add(new Y.Test.Case(testFormRowWidget));
-
-    var testChoiceListWidget = {
-        name: 'TestChoiceListWidget',
-
-        setUp: function() {
-            this.container = Y.Node.create("<div />");
-            this.widget = new widgets.ChoiceListWidget();
-        },
-
-        tearDown: function() {
-            this.container.remove(true);
-        },
-
-        testRenderChoices: function() {
-            this.widget.set("choices", ["a", "b"]);
-            this.widget.render(this.container);
-            ArrayAssert.itemsAreEqual(
-                ["a", "b"],
-                this.container.all("li > input").get("value"));
-            ArrayAssert.itemsAreEqual(
-                ["a", "b"],
-                this.container.all("li > label").get("text"));
-            ArrayAssert.itemsAreEqual(
-                ["checkbox", "checkbox"],
-                this.container.all("li > input").getAttribute("type"));
-        },
-
-        testRenderChoicesChange: function() {
-            this.widget.set("choices", ["a", "b"]);
-            this.widget.render(this.container);
-            this.widget.set("choices", ["c", "d", "e"]);
-            ArrayAssert.itemsAreEqual(
-                ["c", "d", "e"],
-                this.container.all("li > input").get("value"));
-            ArrayAssert.itemsAreEqual(
-                ["c", "d", "e"],
-                this.container.all("li > label").get("text"));
-        },
-
-       testRenderAddChoices: function() {
-            this.widget.add_choices(["a", "b"]);
-            this.widget.render(this.container);
-            ArrayAssert.itemsAreEqual(
-                ["a", "b"],
-                this.container.all("li > input").get("value"));
-            ArrayAssert.itemsAreEqual(
-                ["a", "b"],
-                this.container.all("li > label").get("text"));
-            ArrayAssert.itemsAreEqual(
-                ["checkbox", "checkbox"],
-                this.container.all("li > input").getAttribute("type"));
-        },
-
-        testRenderRemoveChoices: function() {
-            this.widget.add_choices(["a", "b", "c", "d"]);
-            this.widget.render(this.container);
-            this.widget.remove_choices(["b", "d"]);
-            ArrayAssert.itemsAreEqual(
-                ["a", "c"],
-                this.container.all("li > input").get("value"));
-            ArrayAssert.itemsAreEqual(
-                ["a", "c"],
-                this.container.all("li > label").get("text"));
-        },
-
-        testRenderChoicesChangeType: function() {
-            this.widget.set("choices", ["a", "b"]);
-            this.widget.render(this.container);
-            this.widget.set("type", "radio");
-            ArrayAssert.itemsAreEqual(
-                ["radio", "radio"],
-                this.container.all("li > input").getAttribute("type"));
-
-        },
-
-        testChoiceWithCheckBox: function() {
-            this.widget
-                .set("type", "checkbox")
-                .set("choices", ["a", "b"]);
-            ArrayAssert.itemsAreEqual(
-                [], this.widget.get("choice"));
-            this.widget.fieldNode.one("input[value=a]")
-                .set("checked", "checked");
-            ArrayAssert.itemsAreEqual(
-                ["a"], this.widget.get("choice"));
-        },
-
-        testChoiceWithRadio: function() {
-            // When both radio buttons are checked (this is possible in some
-            // broken DOMs/JS engined), choice is undefined.
-            this.widget
-                .set("type", "radio")
-                .set("choices", ["a", "b"]);
-            Assert.isNull(this.widget.get("choice"));
-            this.widget.fieldNode.one("input[value=a]")
-                .set("checked", "checked");
-            Assert.areEqual("a", this.widget.get("choice"));
-            this.widget.fieldNode.one("input[value=b]")
-                .set("checked", "checked");
-            if (this.widget.fieldNode.one("input[value=a]").get("checked")) {
-                // This assertion can only be made if the DOM/JS is broken
-                // in the host browser.
-                Assert.isUndefined(this.widget.get("choice"));
-            }
-            else {
-                // The host browser's DOM/JS is sane.
-                ArrayAssert.itemsAreEqual(
-                    ["b"], this.widget.get("choice"));
-            }
-        },
-
-        testSetChoiceWithCheckBox: function() {
-            this.widget
-                .set("type", "checkbox")
-                .set("choices", ["a", "b"])
-                .set("choice", "a");
-            ArrayAssert.itemsAreEqual(
-                ["a"], this.widget.get("choice"));
-            this.widget.set("choice", ["a"]);
-            ArrayAssert.itemsAreEqual(
-                ["a"], this.widget.get("choice"));
-            this.widget.set("choice", ["a", "b"]);
-            ArrayAssert.itemsAreEqual(
-                ["a", "b"], this.widget.get("choice"));
-            this.widget.set("choice", ["b", "c"]);
-            ArrayAssert.itemsAreEqual(
-                ["b"], this.widget.get("choice"));
-        },
-
-        testSetChoiceWithRadio: function() {
-            this.widget
-                .set("type", "radio")
-                .set("choices", ["a", "b"])
-                .set("choice", "a");
-            ArrayAssert.itemsAreEqual(
-                "a", this.widget.get("choice"));
-            this.widget.set("choice", ["a"]);
-            ArrayAssert.itemsAreEqual(
-                "a", this.widget.get("choice"));
-            this.widget.set("choice", "b");
-            ArrayAssert.itemsAreEqual(
-                "b", this.widget.get("choice"));
-        }
-
-    };
-
-    testChoiceListWidget = Y.merge(
-        testFormRowWidget, testChoiceListWidget);
-    suite.add(new Y.Test.Case(testChoiceListWidget));
-
     var testParentSeriesListWidget = {
         name: 'TestParentSeriesListWidget',
 
@@ -367,6 +71,7 @@
         },
 
         testAddParentAddsLine: function() {
+            var parent;
             parent = {value: "4", title: "Hoary", api_uri: "ubuntu/hoary"};
             Assert.areEqual(
                 0,
@@ -382,6 +87,7 @@
         },
 
         testAddDuplicateParent: function() {
+            var parent;
             parent = {value: "4", title: "Hoary", api_uri: "ubuntu/hoary"};
             Assert.isTrue(
                 this.widget.add_parent(parent),
@@ -396,6 +102,7 @@
         },
 
         testParentOrdering: function() {
+            var parent;
             parent = {value: "4", title: "Hoary", api_uri: "ubuntu/hoary"};
             this.widget.add_parent(parent);
             parent = {value: "3", title: "Warty", api_uri: "ubuntu/warty"};
@@ -418,6 +125,7 @@
         },
 
         testRemoveParent: function() {
+            var parent;
             parent = {value: "4", title: "Hoary", api_uri: "ubuntu/hoary"};
             this.widget.add_parent(parent);
             parent = {value: "3", title: "Warty", api_uri: "ubuntu/warty"};
@@ -460,7 +168,7 @@
     };
 
     testParentSeriesListWidget = Y.merge(
-        testFormRowWidget, testParentSeriesListWidget);
+        formwidgets.test.testFormRowWidget, testParentSeriesListWidget);
     suite.add(new Y.Test.Case(testParentSeriesListWidget));
 
    var testArchitecturesChoiceListWidget = {
@@ -561,209 +269,10 @@
     };
 
     testArchitecturesChoiceListWidget = Y.merge(
-        testChoiceListWidget, testArchitecturesChoiceListWidget);
+        formwidgets.test.testChoiceListWidget,
+        testArchitecturesChoiceListWidget);
     suite.add(new Y.Test.Case(testArchitecturesChoiceListWidget));
 
-    var testSelectWidget = {
-        name: 'TestSelectWidget',
-
-        choices: [
-            {value: "a", text: "A", data: 123},
-            {value: "b", text: "B", data: 456},
-            {value: "c", text: "C", data: 789}
-        ],
-
-        setUp: function() {
-            this.container = Y.Node.create("<div />");
-            this.widget = new widgets.SelectWidget();
-        },
-
-        tearDown: function() {
-            this.container.remove(true);
-        },
-
-        testNameChange: function() {
-            this.widget
-                .set("name", "foo")
-                .set("choices", this.choices);
-            var select = this.widget.fieldNode.one("select");
-            Assert.areEqual("foo", select.get("name"));
-            this.widget
-                .set("name", "bar");
-            Assert.areEqual("bar", select.get("name"));
-        },
-
-        testChoices: function() {
-            this.widget.set("choices", this.choices);
-            var choices_observed = this.widget.get("choices");
-            /* We have to compare bit by bit ourselves because
-               Javascript is a language born in hell. */
-            ArrayAssert.itemsAreEqual(
-                attrselect("value")(this.choices),
-                attrselect("value")(choices_observed));
-            ArrayAssert.itemsAreEqual(
-                attrselect("text")(this.choices),
-                attrselect("text")(choices_observed));
-            ArrayAssert.itemsAreEqual(
-                attrselect("data")(this.choices),
-                attrselect("data")(choices_observed));
-        },
-
-        testRenderChoices: function() {
-            this.widget.set("choices", this.choices);
-            this.widget.render(this.container);
-            ArrayAssert.itemsAreEqual(
-                ["a", "b", "c"],
-                this.container.all("select > option").get("value"));
-            ArrayAssert.itemsAreEqual(
-                ["A", "B", "C"],
-                this.container.all("select > option").get("text"));
-        },
-
-        testRenderEmptyChoices: function() {
-            this.widget.fieldNode.append("something");
-            this.widget.set("choices", []);
-            this.widget.render(this.container);
-            Assert.isNull(this.container.one("select"));
-            Assert.isFalse(this.widget.fieldNode.hasChildNodes());
-        },
-
-        testRenderChoicesChange: function() {
-            var choices1 = [
-                {value: "a", text: "A", data: 123}
-            ];
-            this.widget.set("choices", choices1);
-            this.widget.render(this.container);
-            var choices2 = [
-                {value: "b", text: "B", data: 456},
-                {value: "c", text: "C", data: 789}
-            ];
-            this.widget.set("choices", choices2);
-            ArrayAssert.itemsAreEqual(
-                ["b", "c"],
-                this.container.all("select > option").get("value"));
-            ArrayAssert.itemsAreEqual(
-                ["B", "C"],
-                this.container.all("select > option").get("text"));
-        },
-
-        testChoice: function() {
-            this.widget
-                .set("choices", this.choices)
-                .set("multiple", true);
-            /* It would be better to deselect all options by default,
-               but this appears impossible; the browser seems to
-               select the first option when rendering. */
-            this.widget.fieldNode.all("option").set("selected", false);
-            ArrayAssert.itemsAreEqual(
-                [], this.widget.get("choice"));
-            this.widget.fieldNode.one("option[value=a]")
-                .set("selected", true);
-            ArrayAssert.itemsAreEqual(
-                ["a"], this.widget.get("choice"));
-            this.widget.fieldNode.one("option[value=c]")
-                .set("selected", true);
-            ArrayAssert.itemsAreEqual(
-                ["a", "c"], this.widget.get("choice"));
-        },
-
-        testSetChoice: function() {
-            this.widget
-                .set("multiple", true)
-                .set("choices", this.choices)
-                .set("choice", "a");
-            ArrayAssert.itemsAreEqual(
-                ["a"], this.widget.get("choice"));
-            this.widget.set("choice", ["a"]);
-            ArrayAssert.itemsAreEqual(
-                ["a"], this.widget.get("choice"));
-            this.widget.set("choice", ["a", "b"]);
-            ArrayAssert.itemsAreEqual(
-                ["a", "b"], this.widget.get("choice"));
-            this.widget.set("choice", ["b", "z"]);
-            ArrayAssert.itemsAreEqual(
-                ["b"], this.widget.get("choice"));
-        },
-
-        testSize: function() {
-            Assert.areEqual(1, this.widget.get("size"));
-        },
-
-        testRenderSize: function() {
-            this.widget
-                .set("choices", this.choices)
-                .set("size", 7)
-                .render(this.container);
-            Assert.areEqual(
-                7, this.widget.fieldNode.one("select").get("size"));
-        },
-
-        testRenderSizeChange: function() {
-            this.widget
-                .set("choices", this.choices)
-                .set("size", 3)
-                .render(this.container)
-                .set("size", 5);
-            Assert.areEqual(
-                5, this.widget.fieldNode.one("select").get("size"));
-        },
-
-        testAutoSize: function() {
-            this.widget.set("choices", this.choices);
-            /* Without argument, autoSize() sets the size to the same
-               as the number of choices. */
-            this.widget.autoSize();
-            Assert.areEqual(3, this.widget.get("size"));
-        },
-
-        testAutoSizeMoreChoicesThanMaxiumum: function() {
-            this.widget.set("choices", this.choices);
-            /* autoSize() sets the size to the same as the number of
-               choices unless there are more than the specified
-               maximum. */
-            this.widget.autoSize(2);
-            Assert.areEqual(2, this.widget.get("size"));
-        },
-
-        testAutoSizeFewerChoicesThanMaxiumum: function() {
-            this.widget.set("choices", this.choices);
-            /* autoSize() sets the size to the same as the number of
-               choices. */
-            this.widget.autoSize(5);
-            Assert.areEqual(3, this.widget.get("size"));
-        },
-
-        testMultiple: function() {
-            Assert.areEqual(false, this.widget.get("multiple"));
-        },
-
-        testRenderMultiple: function() {
-            this.widget
-                .set("choices", this.choices)
-                .set("multiple", true)
-                .render(this.container);
-            Assert.isTrue(
-                this.widget.fieldNode.one("select")
-                    .hasAttribute("multiple"));
-        },
-
-        testRenderMultipleChange: function() {
-            this.widget
-                .set("choices", this.choices)
-                .set("multiple", true)
-                .render(this.container)
-                .set("multiple", false);
-            Assert.isFalse(
-                this.widget.fieldNode.one("select")
-                    .hasAttribute("multiple"));
-        }
-
-    };
-
-    testSelectWidget = Y.merge(
-        testFormRowWidget, testSelectWidget);
-    suite.add(new Y.Test.Case(testSelectWidget));
-
     var testPackagesetPickerWidget = {
         name: 'TestPackagesetPickerWidget',
 
@@ -968,79 +477,14 @@
     };
 
     testPackagesetPickerWidget = Y.merge(
-        testSelectWidget, testPackagesetPickerWidget);
+        formwidgets.test.testSelectWidget, testPackagesetPickerWidget);
     suite.add(new Y.Test.Case(testPackagesetPickerWidget));
 
-    var testFormActionsWidget = {
-        name: 'TestFormActionsWidget',
-
-        makeActionsDiv: function() {
-            var submit = Y.Node.create("<input />")
-                .set("type", "submit")
-                .set("value", "Initialize Series");
-            var cancel = Y.Node.create("<a>Cancel</a>");
-            var div = Y.Node.create("<div />")
-                .addClass("actions")
-                .append(submit)
-                .append(cancel);
-            return div;
-        },
-
-        setUp: function() {
-            this.actions = this.makeActionsDiv();
-            this.widget = new widgets.FormActionsWidget(
-                {srcNode: this.actions});
-        },
-
-        tearDown: function() {
-            this.actions.remove(true);
-        },
-
-        testInitializer: function() {
-            Assert.isTrue(
-                this.actions.one("input").compareTo(
-                    this.widget.submitButtonNode));
-        },
-
-        testSpinner: function() {
-            Assert.isTrue(
-                this.actions.contains(this.widget.submitButtonNode));
-            Assert.isFalse(
-                this.actions.contains(this.widget.spinnerNode));
-            this.widget.showSpinner();
-            Assert.isFalse(
-                this.actions.contains(this.widget.submitButtonNode));
-            Assert.isTrue(
-                this.actions.contains(this.widget.spinnerNode));
-            this.widget.hideSpinner();
-            Assert.isTrue(
-                this.actions.contains(this.widget.submitButtonNode));
-            Assert.isFalse(
-                this.actions.contains(this.widget.spinnerNode));
-        },
-
-        testShowError: function() {
-            this.widget.showError("The Man From U.N.C.L.E.");
-            Assert.areEqual(
-                "The Man From U.N.C.L.E.",
-                this.actions.one("p.error.message").get("text"));
-        },
-
-        testHideErrors: function() {
-            this.widget.showError("The Man From U.N.C.L.E.");
-            this.widget.showError("The Woman From A.U.N.T.I.E.");
-            this.widget.hideErrors();
-            Assert.isNull(this.actions.one("p.error.message"));
-        }
-
-    };
-
-    suite.add(new Y.Test.Case(testFormActionsWidget));
 
     // Exports.
-    namespace.testFormActionsWidget = testFormActionsWidget;
     namespace.suite = suite;
 
 }, "0.1", {"requires": [
                'test', 'console', 'node-event-simulate',
-               'lp.registry.distroseries.widgets']});
+               'lp.registry.distroseries.widgets', 'lp.app.formwidgets',
+               'lp.app.formwidgets.test']});

=== renamed file 'lib/lp/registry/javascript/distroseries.widgets.js' => 'lib/lp/registry/javascript/distroseries/widgets.js'
--- lib/lp/registry/javascript/distroseries.widgets.js	2011-07-18 11:56:35 +0000
+++ lib/lp/registry/javascript/distroseries/widgets.js	2011-07-18 11:56:36 +0000
@@ -2,10 +2,10 @@
  * Copyright 2011 Canonical Ltd. This software is licensed under the
  * GNU Affero General Public License version 3 (see the file LICENSE).
  *
- * DistroSeries related stuff.
+ * DistroSeries Widgets.
  *
- * @module registry
- * @submodule distroseries
+ * @module lp.registry.distroseries
+ * @submodule widgets
  */
 
 YUI.add('lp.registry.distroseries.widgets', function(Y) {
@@ -14,154 +14,8 @@
 
 var namespace = Y.namespace('lp.registry.distroseries.widgets');
 
-
-/**
- * A form row matching that which LaunchpadForm presents, containing a
- * field (defined in a subclass), and an optional label and
- * description.
- *
- * @class FormRowWidget
- */
-var FormRowWidget;
-
-FormRowWidget = function() {
-    FormRowWidget.superclass.constructor.apply(this, arguments);
-};
-
-Y.mix(FormRowWidget, {
-
-    NAME: 'formRowWidget',
-
-    ATTRS: {
-
-        /**
-         * The field name.
-         *
-         * @property name
-         */
-        name: {
-            setter: function(value, name) {
-                this.fieldNode.all("input, select").set("name", value);
-            }
-        },
-
-        /**
-         * The top label for the field.
-         *
-         * @property label
-         */
-        label: {
-            getter: function() {
-                return this.labelNode.get("text");
-            },
-            setter: function(value, name) {
-                this.labelNode.set("text", value);
-            }
-        },
-
-        /**
-         * A dictionary {link:link, text:text} to populate
-         * the pop-up help for the field.
-         *
-         * @property help
-         */
-        help: {
-            getter: function() {
-                return {link:this.helpNode.one('a')
-                            .get("href"),
-                        text:this.helpNode
-                            .one('.invisible-link')
-                            .get("text")};
-            },
-            setter: function(value, name) {
-                if ((value.link !== undefined) &&
-                    (value.text !== undefined)) {
-                    this.helpNode.one('a').set("href", value.link);
-                    this.helpNode.one('.invisible-link')
-                        .set("text", value.text);
-                    this.helpNode.removeClass('unseen');
-                }
-                else {
-                    this.helpNode.addClass('unseen');
-                }
-            }
-        },
-
-        /**
-         * A description shown near the field.
-         *
-         * @label description
-         */
-        description: {
-            getter: function() {
-                return this.descriptionNode.get("text");
-            },
-            setter: function(value, name) {
-                this.descriptionNode.set("text", value);
-            }
-        }
-    }
-
-});
-
-Y.extend(FormRowWidget, Y.Widget, {
-
-    BOUNDING_TEMPLATE: "<tr></tr>",
-
-    CONTENT_TEMPLATE: '<td colspan="2"></td>',
-
-    initializer: function(config) {
-        this.labelNode = Y.Node.create("<label />");
-        this.helpNode = Y.Node.create(('<span class="helper unseen">'+
-            '&nbsp;<a href=""' +
-            'target="help" class="sprite maybe">&nbsp;' +
-            '<span class="invisible-link"></span></a></span>'));
-        this.fieldNode = Y.Node.create("<div></div>");
-        this.descriptionNode = Y.Node.create('<p class="formHelp" />');
-        this.spinnerNode = Y.Node.create(
-            '<img src="/@@/spinner" alt="Loading..." />');
-    },
-
-    renderUI: function() {
-        this.get("contentBox")
-            .append(this.labelNode)
-            .append(this.helpNode)
-            .append(this.fieldNode)
-            .append(this.descriptionNode);
-    },
-
-    /**
-     * Show the spinner.
-     *
-     * @method showSpinner
-     */
-    showSpinner: function() {
-        this.fieldNode.empty().append(this.spinnerNode);
-    },
-
-    /**
-     * Hide the spinner.
-     *
-     * @method hideSpinner
-     */
-    hideSpinner: function() {
-        this.spinnerNode.remove();
-    },
-
-    /**
-     * Display an error.
-     *
-     * @method showError
-     */
-    showError: function(error) {
-        var message = Y.Node.create('<p />').set("text", error);
-        this.fieldNode.empty().append(message);
-        Y.lazr.anim.red_flash({node: message}).run();
-    }
-
-});
-
-namespace.FormRowWidget = FormRowWidget;
+var formwidgets = Y.lp.app.formwidgets;
+
 
 /**
  * A table to display, order, delete the selected parent series. Each parent
@@ -249,7 +103,7 @@
     }
 });
 
-Y.extend(ParentSeriesListWidget, FormRowWidget, {
+Y.extend(ParentSeriesListWidget, formwidgets.FormRowWidget, {
 
     initializer: function() {
         ParentSeriesListWidget.superclass.initializer();
@@ -465,203 +319,6 @@
 
 
 /**
- * A form row matching that which LaunchpadForm presents, containing a
- * list of checkboxes, and an optional label and description.
- *
- * @class ChoiceListWidget
- */
-var ChoiceListWidget;
-
-ChoiceListWidget = function() {
-    ChoiceListWidget.superclass.constructor.apply(this, arguments);
-};
-
-Y.mix(ChoiceListWidget, {
-
-    NAME: 'choiceListWidget',
-
-    ATTRS: {
-
-        /**
-         * An array of strings from which to choose.
-         *
-         * @property choices
-         */
-        choices: {
-            getter: function() {
-                return this.fieldNode.all("li > input").get("value");
-            },
-            setter: function(value, name) {
-                var choices = Y.Array.unique(value).sort();
-                var list = Y.Node.create("<ul />");
-                var self = this;
-                choices.forEach(
-                    function(choice) {
-                       var item = self._createChoice(choice);
-                       list.append(item);
-                    }
-                );
-                this.fieldNode.empty().append(list);
-            }
-        },
-
-        /**
-         * The current selection.
-         *
-         * @property choice
-         */
-        choice: {
-            setter: function(value, name) {
-                if (!Y.Lang.isArray(value)) {
-                    value = [value];
-                }
-                this.fieldNode.all("li > input").each(
-                    function(node) {
-                        node.set(
-                            "checked",
-                            value.indexOf(node.get("value")) >= 0);
-                    }
-                );
-            },
-            getter: function() {
-                var choice = [];
-                this.fieldNode.all("li > input").each(
-                    function(node) {
-                        if (node.get("checked")) {
-                            choice.push(node.get("value"));
-                        }
-                    }
-                );
-                if (this.get("type") === "radio") {
-                    if (choice.length === 0) {
-                        choice = null;
-                    }
-                    else if (choice.length === 1) {
-                        choice = choice[0];
-                    }
-                    else {
-                        choice = undefined;
-                    }
-                }
-                return choice;
-            }
-        },
-
-        /**
-         * The input type to display. Choose from "checkbox" or "radio".
-         *
-         * @property type
-         */
-        type: {
-            value: "checkbox",
-            setter: function(value, name) {
-                this.fieldNode.all("li > input").set("type", value);
-            }
-        }
-
-    }
-
-});
-
-Y.extend(ChoiceListWidget, FormRowWidget, {
-
-    /**
-     * Helper method to create an entry for the select widget.
-     *
-     * @method _createChoice
-     */
-    _createChoice: function(choice) {
-         var field_name = this.get("name");
-         var field_type = this.get("type");
-         var item = Y.Node.create(
-            "<li><input /> <label /></li>");
-        item.one("input")
-            .set("type", field_type)
-            .set("name", field_name)
-            .set("value", choice);
-        item.one("label")
-            .setAttribute(
-                "for", item.one("input").generateID())
-            .setStyle("font-weight", "normal")
-            .set("text", choice);
-        return item;
-    },
-
-   /**
-     * Remove a list of choices from the possible widget's choices.
-     *
-     * @method remove_choices
-     */
-    remove_choices: function(choices) {
-        choices.forEach(
-            function(choice) {
-                this.fieldNode.all("select > option").each(
-                    function(option) { options.push(option); });
-                this.fieldNode.all(
-                    "li input[value=" + choice + "]").each(
-                        function(li_input) {
-                            li_input.get('parentNode').remove();
-                        }
-                );
-            },
-            this
-        );
-        Y.lazr.anim.green_flash({node: this.fieldNode}).run();
-    },
-
-    _sorted_position: function(choice) {
-        var options = [];
-        this.fieldNode.all("input").each(
-            function(node) {
-                options.push(node.get('value'));
-            }
-        );
-        options.push(choice);
-        return options.sort().indexOf(choice);
-    },
-
-   /**
-     * Add new choices (if they are not already present).
-     *
-     * @method add_choices
-     */
-    add_choices: function(new_choices) {
-        new_choices.forEach(
-            function(choice) {
-                if (this.fieldNode.all(
-                    "li > input[value=" + choice + "]").isEmpty()) {
-                    var list = this.fieldNode.one('ul');
-                    if (list === null) {
-                        list = Y.Node.create("<ul />");
-                        this.fieldNode.empty().append(list);
-                    }
-                    var option = this._createChoice(choice);
-                    var options = list.all('input');
-                    if (options.isEmpty()) {
-                        list.append(option);
-                    }
-                    else {
-                        var pos = this._sorted_position(choice);
-                        if (pos === 0) {
-                            list.prepend(option);
-                        }
-                        else {
-                            list.insertBefore(option, options.item(pos));
-                        }
-                    }
-                }
-            }, this
-        );
-        Y.lazr.anim.green_flash({node: this.fieldNode}).run();
-    }
-
-});
-
-
-namespace.ChoiceListWidget = ChoiceListWidget;
-
-
-/**
  * A special form of ChoiceListWidget for choosing architecture tags.
  *
  * @class ArchitecturesChoiceListWidget
@@ -682,7 +339,7 @@
 
 });
 
-Y.extend(ArchitecturesChoiceListWidget, ChoiceListWidget, {
+Y.extend(ArchitecturesChoiceListWidget, formwidgets.ChoiceListWidget, {
 
     initializer: function(config) {
         this.client = new Y.lp.client.Launchpad();
@@ -787,175 +444,6 @@
 
 
 /**
- * A special form of FormRowWidget, containing a select control.
- *
- * @class SelectWidget
- */
-var SelectWidget;
-
-SelectWidget = function() {
-    SelectWidget.superclass.constructor.apply(this, arguments);
-};
-
-Y.mix(SelectWidget, {
-
-    NAME: 'selectWidget',
-
-    ATTRS: {
-
-        /**
-         * An array of objects from which to choose. Each object
-         * should contain a value for "value", "text" and "data".
-         *
-         * @property choices
-         */
-        choices: {
-            getter: function() {
-                /* I think this is a YUI3 wart; I can't see any way to
-                   map() over a NodeList, so I must push the elements
-                   one by one into an array first. */
-                var options = Y.Array([]);
-                this.fieldNode.all("select > option").each(
-                    function(option) { options.push(option); });
-                return options.map(
-                    function(option) {
-                        return {
-                            value: option.get("value"),
-                            text: option.get("text"),
-                            data: option.getData("data")
-                        };
-                    }
-                );
-            },
-            setter: function(value, name) {
-                var select = Y.Node.create("<select />");
-                select.set("name", this.get("name"))
-                      .set("size", this.get("size"));
-                if (this.get("multiple")) {
-                    select.set("multiple", "multiple");
-                }
-                var choices = Y.Array(value);
-                choices.forEach(
-                    function(choice) {
-                        var option = Y.Node.create("<option />");
-                        option.set("value", choice.value)
-                              .set("text", choice.text)
-                              .setData("data", choice.data);
-                        select.append(option);
-                    }
-                );
-                if (choices.length > 0) {
-                    this.fieldNode.empty().append(select);
-                }
-                else {
-                    this.fieldNode.empty();
-                }
-            }
-        },
-
-        /**
-         * The current selection.
-         *
-         * @property choice
-         */
-        choice: {
-            setter: function(value, name) {
-                if (!Y.Lang.isArray(value)) {
-                    value = [value];
-                }
-                this.fieldNode.all("select > option").each(
-                    function(node) {
-                        node.set(
-                            "selected",
-                            value.indexOf(node.get("value")) >= 0);
-                    }
-                );
-            },
-            getter: function() {
-                var choice = [];
-                this.fieldNode.all("select > option").each(
-                    function(node) {
-                        if (node.get("selected")) {
-                            choice.push(node.get("value"));
-                        }
-                    }
-                );
-                return choice;
-            }
-        },
-
-        /**
-         * The number of rows to show in the select widget.
-         *
-         * @property size
-         */
-        size: {
-            value: 1,
-            setter: function(value, name) {
-                this.fieldNode.all("select").set("size", value);
-            }
-        },
-
-        /**
-         * Whether multiple rows can be selected.
-         *
-         * @property multiple
-         */
-        multiple: {
-            value: false,
-            setter: function(value, name) {
-                value = value ? true : false;
-                this.fieldNode.all("select").set("multiple", value);
-                return value;
-            }
-        }
-
-    }
-
-});
-
-Y.extend(SelectWidget, FormRowWidget, {
-
-    _sorted_position: function(choice) {
-        var options = [];
-        this.fieldNode.all("option").each(
-            function(node) {
-                options.push(node.get('text'));
-            }
-        );
-        options.push(choice);
-        return options.sort().indexOf(choice);
-    },
-
-    /**
-     * Choose a size for the select control based on the number of
-     * choices, up to an optional maximum size.
-     *
-     * @method autoSize
-     */
-    autoSize: function(maxSize) {
-        var choiceCount = this.fieldNode.all("select > option").size();
-        if (choiceCount === 0) {
-            this.set("size", 1);
-        }
-        else if (maxSize === undefined) {
-            this.set("size", choiceCount);
-        }
-        else if (choiceCount < maxSize) {
-            this.set("size", choiceCount);
-        }
-        else {
-            this.set("size", maxSize);
-        }
-        return this;
-    }
-
-});
-
-namespace.SelectWidget = SelectWidget;
-
-
-/**
  * A special form of SelectWidget for choosing packagesets.
  *
  * @class PackagesetPickerWidget
@@ -1001,7 +489,7 @@
 });
 
 
-Y.extend(PackagesetPickerWidget, SelectWidget, {
+Y.extend(PackagesetPickerWidget, formwidgets.SelectWidget, {
 
     /**
      * Add a distroseries: add its packagesets to the packageset picker.
@@ -1152,96 +640,7 @@
 namespace.PackagesetPickerWidget = PackagesetPickerWidget;
 
 
-/**
- * A widget to encapsulate functionality around the form actions.
- *
- * @class FormActionsWidget
- */
-var FormActionsWidget;
-
-FormActionsWidget = function() {
-    FormActionsWidget
-        .superclass.constructor.apply(this, arguments);
-};
-
-FormActionsWidget.ATTRS = {
-    duration: {
-        value: 1.0
-    },
-
-    height: {
-        value: 0
-    },
-
-    opacity: {
-        value: 0
-    }
-};
-
-
-Y.mix(FormActionsWidget, {
-
-    NAME: 'formActionsWidget',
-
-    HTML_PARSER: {
-        submitButtonNode: "input[type=submit]"
-    }
-
-});
-
-Y.extend(FormActionsWidget, Y.Widget, {
-
-    initializer: function(config) {
-        this.client = new Y.lp.client.Launchpad();
-        this.error_handler = new Y.lp.client.ErrorHandler();
-        this.error_handler.clearProgressUI = Y.bind(this.hideSpinner, this);
-        this.error_handler.showError = Y.bind(this.showError, this);
-        this.submitButtonNode = config.submitButtonNode;
-        this.spinnerNode = Y.Node.create(
-            '<img src="/@@/spinner" alt="Loading..." />');
-    },
-
-    /**
-     * Show the spinner, and hide the submit button.
-     *
-     * @method showSpinner
-     */
-    showSpinner: function() {
-        this.submitButtonNode.replace(this.spinnerNode);
-    },
-
-    /**
-     * Hide the spinner, and show the submit button again.
-     *
-     * @method hideSpinner
-     */
-    hideSpinner: function() {
-        this.spinnerNode.replace(this.submitButtonNode);
-    },
-
-    /**
-     * Display an error.
-     *
-     * @method showError
-     */
-    showError: function(error) {
-        Y.Node.create('<p class="error message" />')
-            .appendTo(this.get("contentBox"))
-            .set("text", error);
-    },
-
-    /**
-     * Remove all errors that have been previously displayed by showError.
-     *
-     * @method hideErrors
-     */
-    hideErrors: function(error) {
-        this.get("contentBox").all("p.error.message").remove();
-    }
-
-});
-
-namespace.FormActionsWidget = FormActionsWidget;
-
-}, "0.1", {"requires": ["node", "dom", "io", "widget", "lp.client",
-                        "lazr.anim", "array-extras", "transition"]});
+}, "0.1", {"requires": [
+               "node", "dom", "io", "widget", "lp.client",
+               "lp.app.formwidgets", "lazr.anim", "array-extras",
+               "transition"]});