Agora/Engineering

Munaf, spage, and Trevor talked about Agora, CSS, Userlogin and VE.

Everyone so far has rolled their own blue buttons: AFT, VE, and E3.

Agora extension
This sends CSS and JS to the client. It's not shipped or enabled on any wiki yet.

If a page element has new style mw-ui-button, then it gets the new-look button appearance; .mw-ui-button-constructive and .mw-ui-button-destructive make the button green and red. But no buttons have these styles yet.

It also has a one-liner JS that modifies all buttons to add this class. TODO: Make this an optional function.

Munaf will add CSS to this for the new Userlogin appearance, then merge in the similar CSS for the new Account Creation experience.

What is Agora?
Trevor has mostly focused on the button look, but it encompasses the cleaner forms and different typography that E3 is developing.

It's not just Vector 1.5 or 2.0.

Nobody has decided whether the enhancements should apply to other skins. The way the extension is implemented so far it will affect all other skins.

rollout
Trevor was thinking of rolling Agora extension out in the new year, due to him working on VE stuff in his real job.

To actually see the new buttons across all MediaWiki pages there would be a monster platform commit that applies the style to buttons everywhere.

E3's Userlogin enhancement will depend on this extension If E3 deploys the extension, then VE will require it as well instead of their own CSS

E3 wants to roll out new Userlogin form with button changes to every wiki.

If/when we're confident it does the right thing we can change all existing styles.
 * the Agora extension could add a .agora style to the &lt;body> tag of all pages, thereby changing all pages where the Agora CSS changes existing styles.
 * or we simply remove .agora from CSS selectors in agora.css, thereby changeing all pages.

The extension could make its addition of the .agora style to pages dependent on a user pref, so that users can opt out of it. Trevor thinks this is easy to do, he's done it before.

Organizing the CSS
Munaf wants to use less. Fine, use a Makefile to build CSS. RL one day could do this for us.

less or sass? sass has better PHP integration so maybe that.

Changing core forms
Could choose different templates in the special page, rather than having a conditional in the template itself.

PHP implementation
TODO: Use HTML form class Userlogin and Usercreate don't use HTMLForm, they're just QuickTemplate. HTMLForm is better.

Trevor suggestion: Modify the template to optimize for Agora but have a mode where CSS changes make it look like the old version.
 * this would be hard, have to add spans and divs within the &lt;li> elements and then table-ize them.

CSS naming
Munaf leans towards the latter. It makes it possible to transition site over to new style and/or eventually remove the .agora
 * Should the new Userlogin/Usercreate form layouts add meaningful mw-form-stacked, etc. class names similar to Trevor's Agora mw-ui-button class, and when Agora is loaded these trigger the new appearance?
 * Or should the Userlogin/Usercreate form layouts just apply .agora style to an enclosing div, so that when Agora extension is loaded everything picks up Agora styling?

Reviewers
Reedy or Chad on platform should review, or Timo/Krinkle. ''Need to socialize'

Examples

 * Buttons and form fields
 * Modal dialogs