Merge lp:~jcsackett/launchpad/cleanup-pickers-with-base-create into lp:launchpad

[j.c.sackett]

Cleans up picker and personpicker code with Y.Base.create.

Summary
=======
The picker javascript code is a mess of competing styles, showing its long
history in the LP code tree.

As part of general tech-debt cleanup and updating our JS to more modern uses
of YUI, we need to start cleaning this up. Using Y.Base.create where possible
is one step in so doing.

Preimp
======
Spoke with Rick Harding about c-style constants and how best to replace them.

Implementation
==============
A bunch of constants, seemingly influenced by c-style coding have been removed
from the base picker.

The base picker, as well as the person picker, have been updated to use
Y.Base.create.

Both have been updated to define their own render/bind/syncUI methods rather
than chaining event calls after the normal cycle--this is in accordance with
standard means of writing yui widgets.

A number of attributes have been created as part of the ATTR block for both,
simplifying the initializers. More of this could probably be done, but the
diff is getting big, and this will not be my last branch on this effort.

Tests
=====
bin/test -vvct picker --layer=YUI

QA
==
Go play with all instances of the picker, esp the person picker. They should
function as they always have.

LoC
===
This removes 100+ LoC.

Lint
====

Checking for conflicts and issues in changed files.

Linting changed files:
  lib/lp/app/javascript/picker/tests/test_personpicker.html
  lib/lp/app/javascript/picker/person_picker.js
  lib/lp/app/javascript/picker/tests/test_personpicker.js
  lib/lp/app/javascript/picker/picker_patcher.js
  lib/lp/app/javascript/picker/picker.js

[Richard Harding (rharding)]

Thank you so much for cleaning this up. I know it's a big chunk, but really think the LoC going down as it gets cleaned up and more readable is a great sign.

I'm going to mark needs fixing just because I want to chat on the event driven methods and their use of the explicit calling of the parent class before it lands. It could just be a case of 'that is the way it has to be' to avoid needing to rework a bunch of other things, but want to check.

#24
Can you test if everything still works without the parent call in the initializer? If I recall correctly, YUI will stack the initializer methods for you properly so that they don't need to be manually called for classes extending other classes.

Example Fiddle: http://jsfiddle.net/NdTHr/1/

#71
Can you not just call: this.hide() vs the full parent method: Y.lazr.picker.Picker.prototype.hide.call(this);
Is this not called from an instance perhaps? So it's meant to be called this way as if it was some sort of static method?

#82
In _update_button_text: how about using an else statement after the if == team check. It avoids an accessor to the remove_person_text.

#95
Do we need the value: null? In the calling code if it's using Y.Lang.isValue() either undefined or null will return false. I guess this requires a quick check on the subscribers to see what they're doing with the value.

#342
The properties should just be outside the initializer method, they'd be on the same line as the initializer itself.

Sample fiddle: http://jsfiddle.net/jSpWL/1/

#457
Any ATTR value that is passed into the initializer(cfg) will automatically get set to that ATTR as the current value. Lines that only check if it's set and if so, run a this.set('someattr', 'somevalue') can just be removed. I think this holds true for the next two attribute setters as well.

Sample fiddle: http://jsfiddle.net/X3ERp/1/

#913
Another case of wondering if you can just do this._defaultCancel(). If this is event based, can we check where the cancel event is fired from and see if it's calling the fire correctly? on the instance for example?

#1197
If the default is null, you can just leave the value bit out.

I notice you doc these ATTRS, but not the ones in the PersonPicker. As I one day dream of running YUIDoc against our code to help generate nice docs for our JS modules, it'd be great if you could add it in. One of the good ones for ATTRS is the @default null which would indicate a default value of null in the docs.

If you're using Vim and snipmate, I've got a series of snippets for doing YUI doc blocks.
http://paste.mitechie.com/show/701/

#1185
You can shortcut this using the setAttrs(). It allows you to change that to something more like

    this.get('host').setAttrs({
        'selected_value_metadata': result.metadata,
        'selected_value', result.value
    });

#1468
Looks like you killed a line on accident there.

review: Needs Fixing

[j.c.sackett (jcsackett)]

> #24
> Can you test if everything still works without the parent call in the
> initializer? If I recall correctly, YUI will stack the initializer methods for
> you properly so that they don't need to be manually called for classes
> extending other classes.

Done.

> #71
> Can you not just call: this.hide() vs the full parent method:
> Y.lazr.picker.Picker.prototype.hide.call(this);
> Is this not called from an instance perhaps? So it's meant to be called this
> way as if it was some sort of static method?

A quick test shows this doesn't work. This is defined in this.hide(), which may be part of the problem, and the object inheritance in this isn't entirely fixed. In truth, I want to not have new hide/show functions and move this extra stuff into a bindUI after('visibleChange') call, but that's happening in a subsequent branch.

> #82
> In _update_button_text: how about using an else statement after the if == team
> check. It avoids an accessor to the remove_person_text.

Done.

> #95
> Do we need the value: null? In the calling code if it's using Y.Lang.isValue()
> either undefined or null will return false. I guess this requires a quick
> check on the subscribers to see what they're doing with the value.

Not all subscribers for this are cleaned up yet--in fact, it's not entirely clear what all the possible subscribers *are*, and I'm not convinced they're adequately tested for me to just change and be comforted by tests passing. I've made a note of this for a follow up branch.

> #342
> The properties should just be outside the initializer method, they'd be on the
> same line as the initializer itself.

Ah, dig. Wasn't sure with the Y.Base.create where those went. Done.

> #457
> Any ATTR value that is passed into the initializer(cfg) will automatically get
> set to that ATTR as the current value. Lines that only check if it's set and
> if so, run a this.set('someattr', 'somevalue') can just be removed. I think
> this holds true for the next two attribute setters as well.

Done.

> #913
> Another case of wondering if you can just do this._defaultCancel(). If this is
> event based, can we check where the cancel event is fired from and see if it's
> calling the fire correctly? on the instance for example?

I've made a note again to look at this in followup, but this falls into the "I'm not yet confident to change here" category, so I've just preserved what's known to work.

> #1197
> If the default is null, you can just leave the value bit out.
>
> I notice you doc these ATTRS, but not the ones in the PersonPicker. As I one
> day dream of running YUIDoc against our code to help generate nice docs for
> our JS modules, it'd be great if you could add it in. One of the good ones for
> ATTRS is the @default null which would indicate a default value of null in the
> docs.
>
> If you're using Vim and snipmate, I've got a series of snippets for doing YUI
> doc blocks.
> http://paste.mitechie.com/show/701/

If you're alright with it, I'll tackle this in another follow up to clean up docs. This branch was slack time and expanded beyond that time allotment, so I'd like to get it landed and handle smaller bits in subsequent slack time.

> #1185
> ...

[Richard Harding (rharding)]

Thanks for taking the time to update. I understand it's not a perfect refactor, but every step along the way is good stuff.

review: Approve

=== modified file 'lib/lp/app/javascript/picker/person_picker.js'
--- lib/lp/app/javascript/picker/person_picker.js	2011-09-19 00:35:49 +0000
+++ lib/lp/app/javascript/picker/person_picker.js	2012-06-21 15:03:22 +0000
@@ -6,73 +6,35 @@
  */
 YUI.add('lazr.person-picker', function(Y) {
 
+var ns = Y.namespace('lazr.picker');
 /*
  * Extend the picker into the PersonPicker
  */
-var PersonPicker;
-
-PersonPicker = function() {
-    PersonPicker.superclass.constructor.apply(this, arguments);
-    this._extra_buttons = Y.Node.create('<div class="extra-form-buttons"/>');
-    Y.after(this._renderPersonPickerUI, this, 'renderUI');
-};
-
-Y.extend(PersonPicker, Y.lazr.picker.Picker, {
+
+ns.PersonPicker = Y.Base.create('picker', Y.lazr.picker.Picker, [], {
+
     initializer: function(cfg) {
-        PersonPicker.superclass.initializer.apply(this, arguments);
-
-        var show_assign_me_button = true;
-        var show_remove_button = true;
-        var assign_me_text = 'Pick me';
-        var remove_person_text = 'Remove person';
-        var remove_team_text = 'Remove team';
-        var min_search_chars = 2;
-        if (cfg !== undefined) {
-            if (cfg.show_assign_me_button !== undefined) {
-                show_assign_me_button = cfg.show_assign_me_button;
-            }
-            if (cfg.show_remove_button !== undefined) {
-                show_remove_button = cfg.show_remove_button;
-            }
-            if (cfg.assign_me_text !== undefined) {
-                assign_me_text = cfg.assign_me_text;
-            }
-            if (cfg.remove_person_text !== undefined) {
-                remove_person_text = cfg.remove_person_text;
-            }
-            if (cfg.remove_team_text !== undefined) {
-                remove_team_text = cfg.remove_team_text;
-            }
-            if (cfg.min_search_chars !== undefined) {
-                min_search_chars = cfg.min_search_chars;
-            }
+        // If the user isn't logged in, override the show_assign_me value.
+        if (!Y.Lang.isValue(LP.links.me)) {
+            this.set('show_assign_me_button', false); 
         }
-        this.set('min_search_chars', min_search_chars);
-
-        /* Only show assign-me when the user is logged-in. */
-        show_assign_me_button = (
-            show_assign_me_button && Y.Lang.isValue(LP.links.me));
-        this._show_assign_me_button = show_assign_me_button;
-        this._show_remove_button = show_remove_button;
-        this._assign_me_text = assign_me_text;
-        this._remove_person_text = remove_person_text;
-        this._remove_team_text = remove_team_text;
     },
 
     hide: function() {
         this.get('boundingBox').setStyle('display', 'none');
-        this.constructor.superclass.hide.call(this);
+        Y.lazr.picker.Picker.prototype.hide.call(this);
     },
 
     show: function() {
         this.get('boundingBox').setStyle('display', 'block');
-        this.constructor.superclass.show.call(this);
+        Y.lazr.picker.Picker.prototype.show.call(this);
     },
 
     _update_button_text: function() {
-        var link_text = this._remove_person_text;
         if (this.get('selected_value_metadata') === 'team') {
-            link_text = this._remove_team_text;
+            var link_text = this.get('remove_team_text');
+        } else {
+            var link_text = this.get('remove_person_text');
         }
         this.remove_button.set('text', link_text);
     },
@@ -100,12 +62,12 @@
 
     remove: function () {
         this.hide();
-        this.fire(Y.lazr.picker.Picker.SAVE, {value: null});
+        this.fire('save', {value: null});
     },
 
     assign_me: function () {
         var name = LP.links.me.replace('/~', '');
-        this.fire(Y.lazr.picker.Picker.SAVE, {
+        this.fire('save', {
             image: '/@@/person',
             title: 'Me',
             api_uri: LP.links.me,
@@ -113,40 +75,52 @@
         });
     },
 
-    _renderPersonPickerUI: function() {
+    renderUI: function() {
+        Y.lazr.picker.Picker.prototype.renderUI.apply(this, arguments);
+        var extra_buttons = this.get('extra_buttons');
         var remove_button, assign_me_button;
 
-        if (this._show_remove_button) {
+        if (this.get('show_remove_button')) {
             remove_button = Y.Node.create(
                 '<a class="yui-picker-remove-button bg-image" ' +
                 'href="javascript:void(0)" ' +
                 'style="background-image: url(/@@/remove); padding-right: ' +
-                '1em">' + this._remove_person_text + '</a>');
+                '1em">' + this.get('remove_person_text') + '</a>');
             remove_button.on('click', this.remove, this);
-            this._extra_buttons.appendChild(remove_button);
+            extra_buttons.appendChild(remove_button);
             this.remove_button = remove_button;
         }
 
-        if (this._show_assign_me_button) {
+        if (this.get('show_assign_me_button')) {
             assign_me_button = Y.Node.create(
                 '<a class="yui-picker-assign-me-button bg-image" ' +
                 'href="javascript:void(0)" ' +
                 'style="background-image: url(/@@/person)">' +
-                this._assign_me_text + '</a>');
+                this.get('assign_me_text') + '</a>');
             assign_me_button.on('click', this.assign_me, this);
-            this._extra_buttons.appendChild(assign_me_button);
+            extra_buttons.appendChild(assign_me_button);
             this.assign_me_button = assign_me_button;
         }
         this._search_input.insert(
-            this._extra_buttons, this._search_input.get('parentNode'));
+            extra_buttons, this._search_input.get('parentNode'));
         this._show_hide_buttons();
         this.after("selected_valueChange", function(e) {
             this._show_hide_buttons();
         });
     }
+}, {
+    ATTRS: {
+        extra_buttons: {
+            valueFn: function () {
+                return Y.Node.create('<div class="extra-form-buttons"/>')
+            } 
+        },
+        show_assign_me_button: { value: true },
+        show_remove_button: {value: true },
+        assign_me_text: {value: 'Pick me'},
+        remove_person_text: {value: 'Remove person'},
+        remove_team_text: {value: 'Remove team'},
+        min_search_chars: {value: 2}
+    }
 });
-PersonPicker.NAME = 'picker';
-var namespace = Y.namespace('lazr.picker');
-namespace.PersonPicker = PersonPicker;
-
-}, "0.1", {"requires": ["lazr.picker"]});
+}, "0.1", {"requires": ["base", "node", "lazr.picker"]});

=== modified file 'lib/lp/app/javascript/picker/picker.js'
--- lib/lp/app/javascript/picker/picker.js	2012-03-22 22:38:09 +0000
+++ lib/lp/app/javascript/picker/picker.js	2012-06-21 15:03:22 +0000
@@ -1,6 +1,7 @@
 /* Copyright (c) 2009, Canonical Ltd. All rights reserved. */
 
 YUI.add('lazr.picker', function(Y) {
+var ns = Y.namespace('lazr.picker');
 
 /**
  * Module containing the Lazr searchable picker.
@@ -9,78 +10,20 @@
  * @namespace lazr.picker
  */
 
+
+// Alias getClassName to minimize line wrapping gymnastics later.
+var getCN = Y.ClassNameManager.getClassName;
+
 /**
  * A picker is a pop-up widget containing a search field and displaying a list
  * of found results.
- *
- * @class Picker
- * @extends lazr.PrettyOverlay
- * @constructor
  */
-
-var PICKER  = 'picker',
-    BOUNDING_BOX = 'boundingBox',
-    CONTENT_BOX  = 'contentBox',
-
-    // Local aliases
-    getCN = Y.ClassNameManager.getClassName,
-
-    // CSS Classes
-    C_SEARCH = getCN(PICKER, 'search'),
-    C_SEARCH_BOX = getCN(PICKER, 'search-box'),
-    C_SEARCH_SLOT = getCN(PICKER, 'search-slot'),
-    C_FOOTER_SLOT = getCN(PICKER, 'footer-slot'),
-    C_SEARCH_MODE = getCN(PICKER, 'search-mode'),
-    C_FILTER = getCN(PICKER, 'filter'),
-    C_RESULTS = getCN(PICKER, 'results'),
-    C_RESULT_TITLE = getCN(PICKER, 'result-title'),
-    C_RESULT_DESCRIPTION = getCN(PICKER, 'result-description'),
-    C_ERROR = getCN(PICKER, 'error'),
-    C_ERROR_MODE = getCN(PICKER, 'error-mode'),
-    C_NO_RESULTS = getCN(PICKER, 'no-results'),
-    C_BATCHES = getCN(PICKER, 'batches'),
-    C_SELECTED_BATCH = getCN(PICKER, 'selected-batch'),
-
-    // Events
-    SAVE = 'save',
-    SEARCH = 'search',
-    VALIDATE = 'validate',
-
-    // Property constants
-    MIN_SEARCH_CHARS = 'min_search_chars',
-    CURRENT_SEARCH_STRING = 'current_search_string',
-    ERROR = 'error',
-    RESULTS = 'results',
-    BATCHES = 'batches',
-    BATCH_COUNT = 'batch_count',
-    SEARCH_SLOT = 'search_slot',
-    FOOTER_SLOT = 'footer_slot',
-    SELECTED_BATCH = 'selected_batch',
-    SEARCH_MODE = 'search_mode',
-    NO_RESULTS_SEARCH_MESSAGE = 'no_results_search_message',
-    RENDERUI = "renderUI",
-    BINDUI = "bindUI",
-    ASSOCIATED_FIELD_ID = 'associated_field_id',
-    SELECTED_VALUE = 'selected_value',
-    SELECTED_VALUE_METADATA = 'selected_value_metadata',
-    FILTER_OPTIONS = 'filter_options',
-    CURRENT_FILTER_VALUE = 'current_filter_value';
-
-
-var Picker;
-Picker = function () {
-    Picker.superclass.constructor.apply(this, arguments);
-
-    Y.after(this._renderUIPicker, this, RENDERUI);
-    Y.after(this._bindUIPicker, this, BINDUI);
-    Y.after(this._syncUIPicker, this, BINDUI);
-};
-
-Y.extend(Picker, Y.lazr.PrettyOverlay, {
-    /**
-     * The search input box node.
+ns.Picker = Y.Base.create('picker', Y.lazr.PrettyOverlay, [], {
+
+    /** 
+     * The search input node.
      *
-     * @property _search_input
+     * @property _search_button
      * @type Node
      * @private
      */
@@ -129,7 +72,7 @@
      * @type Node
      * @private
      */
-    _batches_box: null,
+     _batches_box: null,
 
     /**
      * The node containing the previous batch button.
@@ -173,7 +116,7 @@
          * @event search
          * @preventable _defaultSearch
          */
-        this.publish(SEARCH, { defaultFn: this._defaultSearch });
+        this.publish('search', { defaultFn: this._defaultSearch });
 
         /**
          * Fires when the user selects one of the result. The event details
@@ -182,7 +125,7 @@
          * @event validate
          * @preventable _defaultValidate
          */
-        this.publish(VALIDATE, { defaultFn: this._defaultValidate } );
+        this.publish('validate', { defaultFn: this._defaultValidate } );
 
         /**
          * Fires on successful validation of the selected result.
@@ -192,7 +135,7 @@
          * @event save
          * @preventable _defaultSave
          */
-        this.publish(SAVE, { defaultFn: this._defaultSave } );
+        this.publish('save', { defaultFn: this._defaultSave } );
 
 
         // Subscribe to the cancel event so that we can clear the widget when
@@ -210,27 +153,10 @@
 
         if (!Y.Lang.isUndefined(cfg)) {
             // The picker's associated field.
-            if (Y.Lang.isValue(cfg[ASSOCIATED_FIELD_ID])) {
+            if (Y.Lang.isValue(cfg.associated_field_id)) {
                 this.plug(TextFieldPickerPlugin,
                             {input_element:
-                                '[id="'+cfg[ASSOCIATED_FIELD_ID]+'"]'});
-            }
-            // Meta information associated with the picker's associated
-            // field's current value.
-            if (Y.Lang.isValue(cfg[SELECTED_VALUE_METADATA])) {
-                this.set(
-                    SELECTED_VALUE_METADATA, cfg[SELECTED_VALUE_METADATA]);
-            }
-            // The value of the picker's associated field.
-            if (Y.Lang.isValue(cfg[SELECTED_VALUE])) {
-                this.set(SELECTED_VALUE, cfg[SELECTED_VALUE]);
-            }
-            // Optional filter support
-            if (Y.Lang.isValue(cfg[FILTER_OPTIONS])) {
-                this.set(FILTER_OPTIONS, cfg[FILTER_OPTIONS]);
-                if (Y.Lang.isValue(cfg[CURRENT_FILTER_VALUE])) {
-                    this.set(CURRENT_FILTER_VALUE, cfg[CURRENT_FILTER_VALUE]);
-                }
+                                '[id="'+cfg.associated_field_id+'"]'});
             }
         }
     },
@@ -242,7 +168,7 @@
      * @protected
      */
     _syncSearchSlotUI: function() {
-        var search_slot = this.get(SEARCH_SLOT);
+        var search_slot = this.get('search_slot');
 
         // Clear previous slot contents.
         this._search_slot_box.set('innerHTML', '');
@@ -259,7 +185,7 @@
      * @protected
      */
     _syncFooterSlotUI: function() {
-        var footer_slot = this.get(FOOTER_SLOT);
+        var footer_slot = this.get('footer_slot');
 
         // Clear previous slot contents.
         this._footer_slot_box.set('innerHTML', '');
@@ -276,10 +202,10 @@
      * @protected
      */
     _getBatches: function() {
-        var batches = this.get(BATCHES);
+        var batches = this.get('batches');
 
         if (batches === null) {
-            var batch_count = this.get(BATCH_COUNT);
+            var batch_count = this.get('batch_count');
             if (batch_count === null) {
                 batches = [];
             }
@@ -320,10 +246,10 @@
         // in _syncSelectedBatchUI.
         this._prev_button = Y.Node.create(Y.lazr.ui.PREVIOUS_BUTTON);
         this._prev_button.on('click', function (e) {
-            var selected = this.get(SELECTED_BATCH) - 1;
-            this.set(SELECTED_BATCH, selected);
+            var selected = this.get('selected_batch') - 1;
+            this.set('selected_batch', selected);
             this.fire(
-                SEARCH, this.get(CURRENT_SEARCH_STRING),
+                'search', this.get('current_search_string'),
                 batches[selected].value);
         }, this);
         this._batches_box.appendChild(this._prev_button);
@@ -335,19 +261,19 @@
             this._batches_box.appendChild(batch_item);
 
             batch_item.on('click', function (e) {
-                this.set(SELECTED_BATCH, i);
+                this.set('selected_batch', i);
                 this.fire(
-                    SEARCH, this.get(CURRENT_SEARCH_STRING), data.value);
+                    'search', this.get('current_search_string'), data.value);
             }, this);
         }, this);
 
         this._next_button = Y.Node.create(Y.lazr.ui.NEXT_BUTTON);
         this._batches_box.appendChild(this._next_button);
         this._next_button.on('click', function (e) {
-            var selected = this.get(SELECTED_BATCH) + 1;
-            this.set(SELECTED_BATCH, selected);
+            var selected = this.get('selected_batch') + 1;
+            this.set('selected_batch', selected);
             this.fire(
-                SEARCH, this.get(CURRENT_SEARCH_STRING),
+                'search', this.get('current_search_string'),
                 batches[selected].value);
         }, this);
     },
@@ -359,12 +285,13 @@
      * @protected
      */
     _syncSelectedBatchUI: function() {
-        var idx = this.get(SELECTED_BATCH);
+        var idx = this.get('selected_batch');
         var items = this._batches_box.all('span');
         if (items.size()) {
+            var selected_batch_class = getCN('picker', 'selected-batch');
             this._prev_button.set('disabled', idx === 0);
-            items.removeClass(C_SELECTED_BATCH);
-            items.item(idx).addClass(C_SELECTED_BATCH);
+            items.removeClass(selected_batch_class);
+            items.item(idx).addClass(selected_batch_class);
             this._next_button.set('disabled', idx+1 === items.size());
         }
     },
@@ -403,7 +330,7 @@
      */
     _renderTitleUI: function(data) {
         var li_title = Y.Node.create('<a href="#"></a>')
-            .addClass(C_RESULT_TITLE)
+            .addClass(getCN('picker', 'result-title'))
             .addClass('js-action');
         li_title.on('click', function (e, value) {
                 e.preventDefault();
@@ -486,7 +413,8 @@
      */
     _renderDescriptionUI: function(data) {
         var li_desc = Y.Node.create(
-            '<div><br /></div>').addClass(C_RESULT_DESCRIPTION);
+            '<div><br /></div>').addClass(
+                getCN('picker', 'result-description'));
         if (data.description) {
             li_desc.replaceChild(
                 document.createTextNode(data.description),
@@ -505,7 +433,7 @@
         }
         var details_node = Y.Node.create('<div></div>')
             .addClass('sprite')
-            .addClass(C_RESULT_DESCRIPTION);
+            .addClass(getCN('picker', 'result-description'));
         if (Y.Lang.isArray(data.details)) {
             var data_node = Y.Node.create('<div></div>');
             var escaped_details = [];
@@ -542,7 +470,7 @@
                 .set('text', 'Select ' + data.title));
         links[0].on('click', function (e, value) {
             e.preventDefault();
-            this.fire(VALIDATE, value);
+            this.fire('validate', value);
             }, this, data);
         links.push(this._text_or_link(
             'View details', data.alt_title_link, data.link_css));
@@ -564,14 +492,14 @@
      * @protected
      */
     _syncResultsUI: function() {
-        var results = this.get(RESULTS);
+        var results = this.get('results');
 
         // Remove any previous results.
         Y.Event.purgeElement(this._results_box, true);
         this._results_box.set('innerHTML', '');
         this._filter_box.set('innerHTML', '');
 
-        var expander_id = this.get(BOUNDING_BOX).get('id');
+        var expander_id = this.get('boundingBox').get('id');
         Y.Array.each(results, function(data, i) {
             // Sort out the badges div.
             var li_badges = this._renderTitleBadgesUI(data);
@@ -606,12 +534,12 @@
                     li_desc, li_details, {group_id: expander_id});
                 li.expander.setUp(true);
                 li_title.on('click', function (e, value) {
-                    this.fire(VALIDATE, value);
+                    this.fire('validate', value);
                     }, this, data);
             } else {
                 // Attach implicit valdate/save handler.
                 li.on('click', function (e, value) {
-                    this.fire(VALIDATE, value);
+                    this.fire('validate', value);
                     }, this, data);
             }
 
@@ -620,23 +548,24 @@
 
         // If the user has entered a search and there ain't no results,
         // display the message about no items matching.
+        var no_results_class = getCN('picker', 'no-results');
         if (this._search_input.get('value') && !results.length) {
             var msg = Y.Node.create('<li></li>');
             msg.appendChild(
                 document.createTextNode(
-                    Y.substitute(this.get(NO_RESULTS_SEARCH_MESSAGE),
+                    Y.substitute(this.get('no_results_search_message'),
                     {query: this._search_input.get('value')})));
             this._results_box.appendChild(msg);
-            this._results_box.addClass(C_NO_RESULTS);
+            this._results_box.addClass(no_results_class);
             this._syncFilterUI();
         } else {
-            this._results_box.removeClass(C_NO_RESULTS);
+            this._results_box.removeClass(no_results_class);
             if (results.length) {
-                var filters = this.get(FILTER_OPTIONS);
-                var current_filter_value = this.get(CURRENT_FILTER_VALUE);
+                var filters = this.get('filter_options');
+                var current_filter_value = this.get('current_filter_value');
                 if (filters.length  > 0 &&
                         !Y.Lang.isValue(current_filter_value)) {
-                    this.set(CURRENT_FILTER_VALUE, filters[0].title);
+                    this.set('current_filter_value', filters[0].title);
                 }
                 this._syncFilterUI();
             }
@@ -650,7 +579,7 @@
      * @protected
      */
     _syncProgressUI: function() {
-        var results = this.get(RESULTS);
+        var results = this.get('results');
         if (results.length) {
             // Set PrettyOverlay's green progress bar to 100%.
             this.set('progress', 100);
@@ -666,11 +595,11 @@
      */
     _syncFilterUI: function() {
         // Check that we need to display the filter UI.
-        var filters = this.get(FILTER_OPTIONS);
+        var filters = this.get('filter_options');
         if( filters.length === 0 ) {
             return;
         }
-        var current_filter_value = this.get(CURRENT_FILTER_VALUE);
+        var current_filter_value = this.get('current_filter_value');
         if (!Y.Lang.isValue(current_filter_value)) {
             return;
         }
@@ -696,7 +625,7 @@
                 // event.
                 filter_link.on('click', function (e) {
                     e.halt();
-                    picker.set(CURRENT_FILTER_VALUE, filter.title);
+                    picker.set('current_filter_value', filter.title);
                     var search_string = Y.Lang.trim(
                         picker._search_input.get('value'));
                     picker._performSearch(search_string, filter.name);
@@ -719,13 +648,14 @@
      * @protected
      */
     _syncSearchModeUI: function() {
-        var search_mode = this.get(SEARCH_MODE);
+        var search_mode = this.get('search_mode');
         this._search_input.set('disabled', search_mode);
         this._search_button.set('disabled', search_mode);
+        var search_class = getCN('picker', 'search-mode');
         if (search_mode) {
-            this.get(BOUNDING_BOX).addClass(C_SEARCH_MODE);
+            this.get('boundingBox').addClass(search_class);
         } else {
-            this.get(BOUNDING_BOX).removeClass(C_SEARCH_MODE);
+            this.get('boundingBox').removeClass(search_class);
             // If the search input isn't blurred before it is focused,
             // then the I-beam disappears.
             this._search_input.blur();
@@ -740,27 +670,23 @@
      * @protected
      */
     _syncErrorUI: function() {
-        var error = this.get(ERROR);
+        var error = this.get('error');
         this._error_box.set('innerHTML', '');
+        var error_class = getCN('picker', 'error-mode');
         if (error === null) {
-            this.get(BOUNDING_BOX).removeClass(C_ERROR_MODE);
+            this.get('boundingBox').removeClass(error_class);
         } else {
             this._error_box.appendChild(document.createTextNode(error));
-            this.get(BOUNDING_BOX).addClass(C_ERROR_MODE);
+            this.get('boundingBox').addClass(error_class);
         }
     },
 
     /**
      * Create the widget's HTML components.
-     * <p>
-     * This method is invoked after renderUI is invoked for the Widget class
-     * using YUI's aop infrastructure.
-     * </p>
      *
-     * @method _renderUIPicker
-     * @protected
+     * @method renderUI
      */
-    _renderUIPicker: function() {
+    renderUI: function() {
         this._search_button = Y.Node.create(Y.lazr.ui.SEARCH_BUTTON);
 
         var search_box = Y.Node.create([
@@ -770,31 +696,31 @@
             '<div></div></div>'].join(""));
 
         this._search_input = search_box.one('input');
-        this._search_input.addClass(C_SEARCH);
+        this._search_input.addClass(getCN('picker', 'search'));
 
         this._error_box = search_box.one('div');
-        this._error_box.addClass(C_ERROR);
+        this._error_box.addClass(getCN('picker', 'error'));
 
         // The search button is floated right to avoid problems with
         // the input width in Safari 3.
         search_box.insertBefore(this._search_button, this._search_input);
-        search_box.addClass(C_SEARCH_BOX);
+        search_box.addClass(getCN('picker', 'search-box'));
 
         this._search_slot_box = Y.Node.create('<div></div>');
-        this._search_slot_box.addClass(C_SEARCH_SLOT);
+        this._search_slot_box.addClass(getCN('picker', 'search-slot'));
         search_box.appendChild(this._search_slot_box);
 
         this._filter_box = Y.Node.create('<div></div>');
-        this._filter_box.addClass(C_FILTER);
+        this._filter_box.addClass(getCN('picker', 'filter'));
 
         this._results_box = Y.Node.create('<ul></ul>');
-        this._results_box.addClass(C_RESULTS);
+        this._results_box.addClass(getCN('picker', 'results'));
 
         this._batches_box = Y.Node.create('<div></div>');
-        this._batches_box.addClass(C_BATCHES);
+        this._batches_box.addClass(getCN('picker', 'batches'));
 
         this._footer_slot_box = Y.Node.create('<div></div>');
-        this._footer_slot_box.addClass(C_FOOTER_SLOT);
+        this._footer_slot_box.addClass(getCN('picker', 'footer-slot'));
 
         var body = Y.Node.create('<div></div>');
         body.appendChild(search_box);
@@ -810,15 +736,10 @@
 
     /**
      * Bind the widget's DOM elements to their event handlers.
-     * <p>
-     * This method is invoked after bindUI is invoked for the Widget class
-     * using YUI's aop infrastructure.
-     * </p>
      *
-     * @method _bindUIPicker
-     * @protected
+     * @method bindUI
      */
-    _bindUIPicker: function() {
+    bindUI: function() {
         Y.on('click', this._defaultSearchUserAction, this._search_button,
              this);
 
@@ -845,7 +766,7 @@
         this.after('resultsChange', function (e) {
             this._syncResultsUI();
             this._syncProgressUI();
-            this.set(SEARCH_MODE, false);
+            this.set('search_mode', false);
         }, this);
 
         // Update the search slot box whenever the "search_slot" property
@@ -888,15 +809,10 @@
 
     /**
      * Synchronize the search box, error message and results with the UI.
-     * <p>
-     * This method is invoked after syncUI is invoked for the Widget class
-     * using YUI's aop infrastructure.
-     * </p>
      *
-     * @method _syncUIPicker
-     * @protected
+     * @method syncUI
      */
-    _syncUIPicker: function() {
+    syncUI: function() {
         this._syncResultsUI();
         this._syncProgressUI();
         this._syncSearchModeUI();
@@ -914,13 +830,13 @@
      * @protected
      */
     _clear: function() {
-        this.set(CURRENT_SEARCH_STRING, '');
-        this.set(ERROR, '');
-        this.set(RESULTS, []);
-        this.set(BATCHES, null);
-        this.set(BATCH_COUNT, null);
-        this.set(SELECTED_BATCH, 0);
-        this.set(CURRENT_FILTER_VALUE, null);
+        this.set('current_search_string', '');
+        this.set('error', '');
+        this.set('results', []);
+        this.set('batches', null);
+        this.set('batch_count', null);
+        this.set('selected_batch', 0);
+        this.set('current_filter_value', null);
         this._search_input.set('value', '');
         this._results_box.set('innerHTML', '');
         this._filter_box.set('innerHTML', '');
@@ -936,7 +852,7 @@
      */
     _defaultSearchUserAction: function(e) {
         e.preventDefault();
-        this.set(CURRENT_FILTER_VALUE, null);
+        this.set('current_filter_value', null);
         var search_string = Y.Lang.trim(this._search_input.get('value'));
         this._performSearch(search_string);
     },
@@ -949,19 +865,19 @@
      * @param filter_name The name of a filter to use to limit the results.
      */
     _performSearch: function(search_string, filter_name) {
-        if (search_string.length < this.get(MIN_SEARCH_CHARS)) {
+        if (search_string.length < this.get('min_search_chars')) {
             var msg =  Y.substitute(
                 "Please enter at least {min} characters.",
-                {min: this.get(MIN_SEARCH_CHARS)});
-            this.set(ERROR, msg);
+                {min: this.get('min_search_chars')});
+            this.set('error', msg);
         } else {
             // Reset the selected batch for new searches.
-            var current_search_string = this.get(CURRENT_SEARCH_STRING);
+            var current_search_string = this.get('current_search_string');
             if (current_search_string !== search_string) {
-                this.set(SELECTED_BATCH, 0);
+                this.set('selected_batch', 0);
             }
-            this.set(CURRENT_SEARCH_STRING, search_string);
-            this.fire(SEARCH, search_string, undefined, undefined,
+            this.set('current_search_string', search_string);
+            this.fire('search', search_string, undefined, undefined,
                 filter_name);
         }
     },
@@ -975,8 +891,8 @@
      * @protected
      */
     _defaultSearch: function(e) {
-        this.set(ERROR, null);
-        this.set(SEARCH_MODE, true);
+        this.set('error', null);
+        this.set('search_mode', true);
     },
 
     /**
@@ -988,8 +904,8 @@
      * @protected
      */
     _defaultCancel : function(e) {
-        Picker.superclass._defaultCancel.apply(this, arguments);
-        this.set(SEARCH_MODE, false);
+        Y.lazr.PrettyOverlay.prototype._defaultCancel.apply(this, arguments);
+        this.set('search_mode', false);
         if ( this.get('clear_on_cancel') ) {
             this._clear();
         }
@@ -1020,7 +936,7 @@
      * @protected
      */
     _defaultValidate : function(e) {
-        this.fire(SAVE, e);
+        this.fire('save', e);
     },
 
     /**
@@ -1031,243 +947,213 @@
      * @protected
      */
     _defaultSelectBatch: function(e) {
-        this.set(SEARCH_MODE, true);
-    }
-    });
-
-/**
- * Some constants.
- */
-Picker.NAME = PICKER;
-Picker.SAVE = SAVE;
-Picker.SEARCH = SEARCH;
-Picker.VALIDATE = VALIDATE;
-
-/**
- * The details index of the save result.
- *
- * @static
- * @property SAVE_RESULT
- */
-Picker.SAVE_RESULT = 0;
-
-/**
- * The details index of the search string.
- *
- * @static
- * @property SEARCH_STRING
- */
-Picker.SEARCH_STRING = 0;
-
-/**
- * The details index of the selected batch value.
- *
- * @static
- * @property SELECTED_BATCH_VALUE
- */
-Picker.SELECTED_BATCH_VALUE = 1;
-
-
-Picker.ATTRS = {
-    /**
-     * Whether or not the search box and result list should be cleared when
-     * the save event is fired.
-     *
-     * @attribute clear_on_save
-     * @type Boolean
-     */
-    clear_on_save: { value: true },
-
-    /**
-     * Whether or not the search box and result list should be cleared when
-     * the cancel event is fired.
-     *
-     * @attribute clear_on_cancel
-     * @type Boolean
-     */
-    clear_on_cancel: { value: false },
-
-    /**
-     * A CSS selector for the DOM element that will activate (show) the picker
-     * once clicked.
-     *
-     * @attribute picker_activator
-     * @type String
-     */
-    picker_activator: { value: null },
-
-    /**
-     * An extra CSS class to be added to the picker_activator, generally used
-     * to distinguish regular links from js-triggering ones.
-     *
-     * @attribute picker_activator_css_class
-     * @type String
-     */
-    picker_activator_css_class: { value: 'js-action' },
-
-    /**
-     * Minimum number of characters that need to be entered in the search
-     * string input before a search event will be fired. The search string
-     * will be trimmed before testing the length.
-     *
-     * @attribute min_search_chars
-     * @type Integer
-     */
-    min_search_chars: { value: 3 },
-
-    /**
-     * The current search string, which is needed when clicking on a different
-     * batch if the search input has been modified.
-     *
-     * @attribute current_search_string
-     * @type String
-     */
-    current_search_string: {value: ''},
-
-    /**
-     * The string representation of the current filter.
-     *
-     * @attribute current_filter_value
-     * @type String
-     */
-    current_filter_value: {value: null},
-
-    /**
-     * A list of attribute name values used to construct the filtering options
-     * for this picker..
-     *
-     * @attribute filter_options
-     * @type Object
-     */
-    filter_options: {value: []},
-
-    /**
-     * The string representation of the value selected by using this picker.
-     *
-     * @attribute selected_value
-     * @type String
-     */
-    selected_value: {value: null},
-
-    /**
-     * Meta information about the current state of the associated field,
-     * whose value is selected by using this picker.
-     *
-     * @attribute selected_value_metadata
-     * @type String
-     */
-    selected_value_metadata: {value: null},
-
-    /**
-     * Results currently displayed by the widget. Updating this value
-     * automatically updates the display.
-     *
-     * @attribute results
-     * @type Array
-     */
-    results: { value: [] },
-
-    /**
-     * This adds any form fields you want below the search field.
-     * Updating this value automatically updates the display, but only
-     * if the widget has already been rendered. Otherwise, the change
-     * event never fires.
-     *
-     * @attribute search_slot
-     * @type Node
-     */
-    search_slot: {value: null},
-
-    /**
-     * A place for custom html at the bottom of the widget. When there
-     * are no search results the search_slot and the footer_slot are
-     * right next to each other.
-     * Updating this value automatically updates the display, but only
-     * if the widget has already been rendered. Otherwise, the change
-     * event never fires.
-     *
-     * @attribute footer_slot
-     * @type Node
-     */
-    footer_slot: {value: null},
-
-    /**
-     * Batches currently displayed in the widget, which can be
-     * clicked to change the batch of results being displayed. Updating
-     * this value automatically updates the display.
-     *
-     * This an array of object containing the two keys, name (used as
-     * the batch label) and value (used as additional details to SEARCH
-     * event).
-     *
-     * @attribute batches
-     * @type Array
-     */
-    batches: {value: null},
-
-    /**
-     * For simplified batch creation, you can set this to the number of
-     * batches in the search results.  In this case, the batch labels
-     * and values are automatically calculated.  The batch name (used as the
-     * batch label) will be the batch number starting from 1.  The batch value
-     * (used as additional details to the SEARCH event) will be the batch
-     * number, starting from zero.
-     *
-     * If 'batches' is set (see above), batch_count is ignored.
-     *
-     * @attribute batch_count
-     * @type Integer
-     */
-    batch_count: {value: null},
-
-    /**
-     * Batch currently selected.
-     *
-     * @attribute selected_batch
-     * @type Integer
-     */
-    selected_batch: {
-        value: 0,
-        getter: function (value) {
-            return value || 0;
-        },
-        validator: function (value) {
-            var batches = this._getBatches();
-            return Y.Lang.isNumber(value) &&
-                   value >= 0 &&
-                   value < batches.length;
-        }},
-
-    /**
-     * Flag indicating if the widget is currently in search mode (so users
-     * has triggered a search and we are waiting for results.)
-     *
-     * @attribute search_mode
-     * @type Boolean
-     */
-    search_mode: { value: false },
-
-    /**
-     * The current error message. This puts the widget in 'error-mode',
-     * setting this value to null clears that state.
-     *
-     * @attribute error
-     * @type String
-     */
-    error: { value: null },
-
-    /**
-     * The message to display when the search returned no results. This string
-     * can contain a 'query' placeholder
-     *
-     * @attribute no_results_search_message
-     * @type String
-     * @default No items matched "{query}".
-     */
-    no_results_search_message: {
-        value: 'No items matched "{query}".'
-    }
-};
+        this.set('search_mode', true);
+    }
+}, {
+    ATTRS:  {
+        /**
+         * Whether or not the search box and result list should be cleared when
+         * the save event is fired.
+         *
+         * @attribute clear_on_save
+         * @type Boolean
+         */
+        clear_on_save: { value: true },
+
+        /**
+         * Whether or not the search box and result list should be cleared when
+         * the cancel event is fired.
+         *
+         * @attribute clear_on_cancel
+         * @type Boolean
+         */
+        clear_on_cancel: { value: false },
+
+        /**
+         * A CSS selector for the DOM element that will activate (show) the picker
+         * once clicked.
+         *
+         * @attribute picker_activator
+         * @type String
+         */
+        picker_activator: {},
+
+        /**
+         * An extra CSS class to be added to the picker_activator, generally used
+         * to distinguish regular links from js-triggering ones.
+         *
+         * @attribute picker_activator_css_class
+         * @type String
+         */
+        picker_activator_css_class: { value: 'js-action' },
+
+        /**
+         * Minimum number of characters that need to be entered in the search
+         * string input before a search event will be fired. The search string
+         * will be trimmed before testing the length.
+         *
+         * @attribute min_search_chars
+         * @type Integer
+         */
+        min_search_chars: { value: 3 },
+
+        /**
+         * The current search string, which is needed when clicking on a different
+         * batch if the search input has been modified.
+         *
+         * @attribute current_search_string
+         * @type String
+         */
+        current_search_string: {value: ''},
+
+        /**
+         * The string representation of the current filter.
+         *
+         * @attribute current_filter_value
+         * @type String
+         */
+        current_filter_value: {value: null},
+
+        /**
+         * A list of attribute name values used to construct the filtering options
+         * for this picker..
+         *
+         * @attribute filter_options
+         * @type Object
+         */
+        filter_options: {value: []},
+
+        /**
+         * The string representation of the value selected by using this picker.
+         *
+         * @attribute selected_value
+         * @type String
+         */
+        selected_value: {value: null},
+
+        /**
+         * Meta information about the current state of the associated field,
+         * whose value is selected by using this picker.
+         *
+         * @attribute selected_value_metadata
+         * @type String
+         */
+        selected_value_metadata: {value: null},
+
+        /**
+         * Results currently displayed by the widget. Updating this value
+         * automatically updates the display.
+         *
+         * @attribute results
+         * @type Array
+         */
+        results: { value: [] },
+
+        /**
+         * This adds any form fields you want below the search field.
+         * Updating this value automatically updates the display, but only
+         * if the widget has already been rendered. Otherwise, the change
+         * event never fires.
+         *
+         * @attribute search_slot
+         * @type Node
+         */
+        search_slot: {value: null},
+
+        /**
+         * A place for custom html at the bottom of the widget. When there
+         * are no search results the search_slot and the footer_slot are
+         * right next to each other.
+         * Updating this value automatically updates the display, but only
+         * if the widget has already been rendered. Otherwise, the change
+         * event never fires.
+         *
+         * @attribute footer_slot
+         * @type Node
+         */
+        footer_slot: {value: null},
+
+        /**
+         * Batches currently displayed in the widget, which can be
+         * clicked to change the batch of results being displayed. Updating
+         * this value automatically updates the display.
+         *
+         * This an array of object containing the two keys, name (used as
+         * the batch label) and value (used as additional details to 'search' 
+         * event).
+         *
+         * @attribute batches
+         * @type Array
+         */
+        batches: {value: null},
+
+        /**
+         * For simplified batch creation, you can set this to the number of
+         * batches in the search results.  In this case, the batch labels
+         * and values are automatically calculated.  The batch name (used as the
+         * batch label) will be the batch number starting from 1.  The batch value
+         * (used as additional details to the 'search' event) will be the batch
+         * number, starting from zero.
+         *
+         * If 'batches' is set (see above), batch_count is ignored.
+         *
+         * @attribute batch_count
+         * @type Integer
+         */
+        batch_count: {value: null},
+
+        /**
+         * Batch currently selected.
+         *
+         * @attribute selected_batch
+         * @type Integer
+         */
+        selected_batch: {
+            value: 0,
+            getter: function (value) {
+                return value || 0;
+            },
+            validator: function (value) {
+                var batches = this._getBatches();
+                return Y.Lang.isNumber(value) &&
+                       value >= 0 &&
+                       value < batches.length;
+            }},
+
+        /**
+         * Flag indicating if the widget is currently in search mode (so users
+         * has triggered a search and we are waiting for results.)
+         *
+         * @attribute search_mode
+         * @type Boolean
+         */
+        search_mode: { value: false },
+
+        /**
+         * The current error message. This puts the widget in 'error-mode',
+         * setting this value to null clears that state.
+         *
+         * @attribute error
+         * @type String
+         */
+        error: { value: null },
+
+        /**
+         * The message to display when the search returned no results. This string
+         * can contain a 'query' placeholder
+         *
+         * @attribute no_results_search_message
+         * @type String
+         * @default No items matched "{query}".
+         */
+        no_results_search_message: {
+            value: 'No items matched "{query}".'
+        }
+    }
+});
+
+
+ns.Picker.SAVE_RESULT = 0;
 
 
 /**
@@ -1296,9 +1182,11 @@
     initializer: function(config) {
         var input = Y.one(config.input_element);
         this.doAfter('save', function (e) {
-            var result = e.details[Picker.SAVE_RESULT];
-            this.get('host').set(SELECTED_VALUE_METADATA, result.metadata);
-            this.get('host').set(SELECTED_VALUE, result.value);
+            var result = e.details[ns.Picker.SAVE_RESULT];
+            this.get('host').setAttrs({
+                selected_value_metadata: result.metadata,
+                selected_value: result.value
+            })
             input.set("value",  result.value || '');
             // If the search input isn't blurred before it is focused,
             // then the I-beam disappears.
@@ -1313,17 +1201,15 @@
             // IE doesn't like setting the value to null, so use ''
             // instead.
             this.get('host')._search_input.set('value', selected_value || '');
-            this.get('host').set(SELECTED_VALUE, selected_value);
+            this.get('host').set('selected_value', selected_value);
         });
     }
 });
 
-var namespace = Y.namespace('lazr.picker');
-namespace.Picker = Picker;
-namespace.TextFieldPickerPlugin = TextFieldPickerPlugin;
+ns.TextFieldPickerPlugin = TextFieldPickerPlugin;
 
 }, "0.1", {"skinnable": true,
-           "requires": ["oop", "escape", "event", "event-focus", "node",
+           "requires": ["oop", "escape", "event", "event-focus", "base", "node",
                         "plugin", "substitute", "widget", "widget-stdmod",
                         "lazr.overlay", "lp.anim", "lazr.base",
                         "lp.app.widgets.expander"]

=== modified file 'lib/lp/app/javascript/picker/picker_patcher.js'
--- lib/lp/app/javascript/picker/picker_patcher.js	2012-03-21 01:26:45 +0000
+++ lib/lp/app/javascript/picker/picker_patcher.js	2012-06-21 15:03:22 +0000
@@ -177,7 +177,7 @@
         if (!show_search_box) {
           config.temp_spinner.removeClass('unseen');
           picker.set('min_search_chars', 0);
-          picker.fire(Y.lazr.picker.Picker.SEARCH, '');
+          picker.fire('search', '');
           picker.get('contentBox').one(
               '.yui3-picker-search-box').addClass('unseen');
         }
@@ -520,7 +520,7 @@
         }
         picker._defaultSave(e);
     };
-    picker.after(Y.lazr.picker.Picker.SAVE, save_handler);
+    picker.after('save', save_handler);
 
     picker.subscribe('cancel', function (e) {
         Y.log('Got cancel event.');
@@ -666,7 +666,7 @@
         }
     };
 
-    picker.after(Y.lazr.picker.Picker.SEARCH, search_handler);
+    picker.after('search', search_handler);
 
     picker.render();
     picker.hide();

=== modified file 'lib/lp/app/javascript/picker/tests/test_personpicker.html'
--- lib/lp/app/javascript/picker/tests/test_personpicker.html	2012-04-25 18:17:08 +0000
+++ lib/lp/app/javascript/picker/tests/test_personpicker.html	2012-06-21 15:03:22 +0000
@@ -60,10 +60,6 @@
 
     </head>
     <body class="yui3-skin-sam">
-        <ul id="suites">
-            <!-- <li>lp.large_indicator.test</li> -->
-            <li>lp.person_picker.test</li>
-        </ul>
 
         <div class="yui3-widget yui3-activator yui3-activator-focused">
             <span id="picker_id" class="yui3-activator-content yui3-activator-success">

=== modified file 'lib/lp/app/javascript/picker/tests/test_personpicker.js'
--- lib/lp/app/javascript/picker/tests/test_personpicker.js	2012-02-06 18:16:06 +0000
+++ lib/lp/app/javascript/picker/tests/test_personpicker.js	2012-06-21 15:03:22 +0000
@@ -1,5 +1,4 @@
-/* Copyright 2011 Canonical Ltd.  This software is licensed under the
- * GNU Affero General Public License version 3 (see the file LICENSE).
+/* Copyright 2011 Canonical Ltd.  This software is licensed under the * GNU Affero General Public License version 3 (see the file LICENSE).
  */
 
 YUI().use('test', 'console', 'plugin',
@@ -286,6 +285,7 @@
                     "test_link",
                     "picker_id",
                     config);
+            console.log(this.picker);
         },
 
         test_picker_assign_me_button_hide_on_save: function() {