Page MenuHomePhabricator

ContactPage is incompatible with MobileFrontend
Closed, ResolvedPublic

Description

Hi,

When using the ContactPage extension in MediaWiki I found that it did not work correctly in MobileFrontend (the input fields are all white and blend in with the white background).

After posting a request on the MobileFrontend-Talk-page I was asked to point you to ResourceLoader/Writing a MobileFrontend friendly ResourceLoader module, to fix the problem.

https://www.mediawiki.org/wiki/Topic:Tnvzhzak9f3bxibf

Hope somebody can fix this.

Thanks

Event Timeline

Fredrilj created this task.Apr 9 2017, 4:40 AM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptApr 9 2017, 4:40 AM
SamanthaNguyen renamed this task from Bug in relation to ResourceLoader to ContactPage is incompatible with MobileFrontend.Apr 9 2017, 5:20 AM
SamanthaNguyen added a subscriber: SamanthaNguyen.
Reedy added a comment.EditedApr 9 2017, 11:27 AM

Well, considering the extension doesn't actually define any resource loader modules; it doesn't add any JS or any CSS of it's own... It feels a bit crap that it has to do so itself because Mobile decided that resetting all styles was a good idea

Change 347535 had a related patch set uploaded (by Jdlrobson):
[mediawiki/extensions/ContactPage@master] ContactForm should use OOUI for form rendering

https://gerrit.wikimedia.org/r/347535

Jdlrobson edited projects, added OOUI; removed MobileFrontend.EditedApr 10 2017, 11:29 PM
Jdlrobson added a subscriber: Jdlrobson.

@Reedy it might feel a little crap, but I assure you it's also crap to have to go through every extension and try to work out why they don't render nicely on mobile or have broken layouts :).

A quick look shows MobileFrontend is not to blame and this shouldn't be too hard to fix.
The extension is assuming that the browser will provide some default styles which isn't the case for the Minerva skin - it explicitly aims for consistency by not allowing any inconsistent styling via the browser or by incompatible code.

Using OOUI or MediaWiki UI would make this more mobile friendly and consistent with other forms.

It's strange HTMLForm doesn't default to ooui out of the box.
I tried to update the contact form to use OOUI but it seems OOUIHTMLForm does not support the 'cols' parameter for textareas. I don't know enough about the extension to know if that's important.

[7e26064ca9950aa0093cae64] /w/index.php?title=Special:Contact&mobileaction=toggle_view_mobile Exception from line 71 of /Users/jrobson/git/core/includes/htmlform/fields/HTMLTextAreaField.php: 
Backtrace:

#0 /Users/jrobson/git/core/includes/htmlform/HTMLFormField.php(583): HTMLTextAreaField->getInputOOUI(NULL)
#1 /Users/jrobson/git/core/includes/htmlform/HTMLForm.php(1654): HTMLFormField->getOOUI(NULL)
#2 /Users/jrobson/git/core/includes/htmlform/HTMLForm.php(1240): HTMLForm->displaySection(array, string)
#3 /Users/jrobson/git/core/includes/htmlform/OOUIHTMLForm.php(243): HTMLForm->getBody()
#4 /Users/jrobson/git/core/includes/htmlform/HTMLForm.php(1030): OOUIHTMLForm->getBody()
#5 /Users/jrobson/git/core/includes/htmlform/HTMLForm.php(1010): HTMLForm->getHTML(boolean)
#6 /Users/jrobson/git/core/includes/htmlform/HTMLForm.php(575): HTMLForm->displayForm(boolean)
#7 /Users/jrobson/git/core/extensions/ContactPage/ContactPage_body.php(229): HTMLForm->show()
#8 /Users/jrobson/git/core/includes/specialpage/SpecialPage.php(522): SpecialContact->execute(NULL)
#9 /Users/jrobson/git/core/includes/specialpage/SpecialPageFactory.php(576): SpecialPage->run(NULL)
#10 /Users/jrobson/git/core/includes/MediaWiki.php(286): SpecialPageFactory::executePath(Title, RequestContext)
#11 /Users/jrobson/git/core/includes/MediaWiki.php(861): MediaWiki->performRequest()
#12 /Users/jrobson/git/core/includes/MediaWiki.php(522): MediaWiki->main()
#13 /Users/jrobson/git/core/index.php(43): MediaWiki->run()
#14 {main}

OOUIHTMLForm does not support the 'cols' parameter for textareas. Maybe @matmarex or one of the OOUI guys can feedback on why it doesn't support.

with OOUI applied the form looks great:


Before:

I agree it's pretty weird for MobileFrontend/Minerva to remove all the default <input> styling and not provide its own… Surely this breaks a lot of other things too? And how does it help consistency if each extension has to provide its own styles?

Can I actually see ContactPage in action somewhere?

OOUIHTMLForm does not support the 'cols' parameter because OOjs UI expects you to set the field width with CSS (assuming that you need to customize it at all, which you probably don't). I suppose it could silently ignore the parameter instead of throwing an exception? (HTMLForm doesn't default to the OOUI style because of minor incompatibilities like this.) A simplest fix would be for ContactPage to just not provide this parameter.

A form styled by the browsers default styles is not consistent with a form styled via ooui.

HTMLForm should ship some default styles, not expect a skin to do it.

I'm sorry but that is ridiculous. Ever since the invention of browsers, the <input> element has been styled to look like you can type text into it. It may not be consistent with anything, but it looks like a text input field. HTMLForm depends on this behavior. MobileFrontend is breaking it. If you want the skin to remove the default browsers' styles, that's fine by me, but you have to provide a replacement.

It's strange HTMLForm doesn't default to ooui out of the box.

That's planned once T107037: Convert all MW core special pages to OOUI is complete (so it doesn't break other things).

Patch fixes issue so I'll work on that with @Reedy

Change 347535 merged by jenkins-bot:
[mediawiki/extensions/ContactPage@master] ContactForm should use OOUI for form rendering

https://gerrit.wikimedia.org/r/347535

matmarex removed a subscriber: matmarex.Jul 12 2017, 5:31 PM
Jdforrester-WMF closed this task as Resolved.Jul 12 2017, 9:49 PM
Jdforrester-WMF removed a project: Patch-For-Review.

At least for prod this will be fixed next week.