Default JS include should hide login button until login event is bound

[Osmose]

@jsocol pointed out that if JS loads slowly, users may attempt to click the login button before the click event for launching the BrowserID popup is bound.

MDN handles this by hiding the button with CSS and showing it after the event is bound. Our default JS and code example should do something similar to encourage good behavior.

[callahad]

If you use the new "Observer" API (available in production now, but semi-broken in IE8), you can do this by registering an onready callback that will fire once BrowserID is all set up and happy.

Docs for the Observer API are at https://developer.mozilla.org/en/DOM/navigator.id

We should have the IE8 bug fixed by the end of July at the absolute latest, and we'll be deprecating the current API as soon as that happens.

[Osmose]

@callahad onready isn't documented on MDN, is it still in the Observer API?

[callahad]

It is, MDN docs should be updated by Monday.

Here's a wip-branch description of it:

A callback that will be invoked when the user agent is initialized and able to process calls to id.request and id.logout. The onready callback will be invoked immediately after any automatic invocations of onlogin, onlogout, or onmatch. By waiting to display UI until onready is called, relying parties can avoid UI flicker in cases where the user agent's preferred state is out of sync with the site's session.

[peterbe]

There's still nothing on https://developer.mozilla.org/en-US/docs/Web/API/navigator.id?redirectlocale=en-US&redirectslug=DOM%2Fnavigator.id about onready.

[callahad]

Woah, wtf, I'm a jerk.

[Osmose]

Did a bit of noodling on this, and I'm not convinced that hiding and showing should be default behavior. If we make login buttons hidden by default we introduce edge cases like login buttons injected into the page after the page has finished loading.

Instead, I think the real thing here is to just add support for onready and document that support. That way a site like MDN can still add their optimization without losing the ability to use the JavaScript API.