Support WMF communities in run-up to switching EditPage over to OOUI
Open, NormalPublic8 Story Points

Description

The buttons underneath the wikitext editor (Publish changes, Show preview and Show changes) will change. They will fit in with the OOUI look that is replacing the old design for all of MediaWiki.

User typeBeforeAfter (still showing Save changes button label instead of Publish changes)
Logged-out
Logged-in

This change was made in MediaWiki in T111088, and is now ready for deployment to Wikimedia wikis.

How you can help

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptApr 12 2017, 11:20 PM
He7d3r added a subscriber: He7d3r.Apr 13 2017, 5:18 PM
Qgil moved this task from Backlog to Team radar on the Community-Liaisons board.Apr 20 2017, 10:22 AM
Johan added a subscriber: Johan.

(No specific technical change related to this ticket; Tech News should and will link and to the tickets describing the technical changes. Please re-add the user-notice tag if I'm missing something here.)

Johan removed a subscriber: Johan.Apr 27 2017, 8:01 PM

After talking to prominent users in fawiki, they were all in favor of rolling this out there. just FYI. I can help out in communication if we want to start from Persian Wikipedia.

Jdforrester-WMF added a subscriber: Johan.

(No specific technical change related to this ticket; Tech News should and will link and to the tickets describing the technical changes. Please re-add the user-notice tag if I'm missing something here.)

This is the "your wiki is going to change" task; T111088: Convert EditPage.php to use OOUI rather than MW UI is just the back-end change.

Quiddity updated the task description. (Show Details)Apr 28 2017, 7:30 PM
Quiddity added a subscriber: Quiddity.

After talking to prominent users in fawiki, they were all in favor of rolling this out there. just FYI. I can help out in communication if we want to start from Persian Wikipedia.

Thanks for the offer! I'm not quite sure about the roll-out plan for this.

Why does the "Cancel" button show up in red? It shouldn't, if the screenshots in the task description are correct.

Also, it doesn't stack up cleanly if the viewport is too narrow:

On mobile, the buttons appear pill-shaped rather than like the ones above.

The screenshots in the description are from an older version.

Why does the "Cancel" button show up in red?

It's a destructive action.

It shouldn't, if the screenshots in the task description are correct.

We can do new ones.

Also, it doesn't stack up cleanly if the viewport is too narrow:

Same as previous experience.

On mobile, the buttons appear pill-shaped rather than like the ones above.

Which "on mobile" experience? JS or non-JS? Via MobileFrontend or something else? Which browser? Can you provide a screenshot? (Also, please file as a potential blocker task rather than just comment here.)

TTO updated the task description. (Show Details)Tue, May 2, 5:36 AM
TTO added a subscriber: TTO.

I created some new screenshots.

The red "Cancel" link seems like a red wikilink. It makes me think that nothing will happen if I click on it.

On iOS -Safari
Before:

After:

JS enabled.

On mobile, the buttons appear pill-shaped rather than like the ones above.

Which "on mobile" experience? JS or non-JS? Via MobileFrontend or something else? Which browser? Can you provide a screenshot? (Also, please file as a potential blocker task rather than just comment here.)

Will be happy to, if someone confirms this is a bug and not intentional.

Will be happy to, if someone confirms this is a bug and not intentional.

Filed as T164411: MediaWiki theme's ButtonInputWidget using <input> looks bad in iOS Safari, thanks! Not a blocker for this, I think, as we don't support iOS Safari for desktop (and we'll probably fix it in a week or so anyway).

Elitre added a subscriber: Elitre.Wed, May 10, 9:30 AM

Change 353339 had a related patch set uploaded (by Ladsgroup; owner: Amir Sarabadani):
[operations/mediawiki-config@master] Enable OOUI in EditPage for fawiki

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

Change 353339 merged by jenkins-bot:
[operations/mediawiki-config@master] Enable OOUI in EditPage for fawiki

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

Mentioned in SAL (#wikimedia-operations) [2017-05-11T18:47:44Z] <thcipriani@tin> Synchronized wmf-config/InitialiseSettings.php: SWAT: [[gerrit:353339|Enable OOUI in EditPage for fawiki]] T162849 (duration: 00m 42s)

I consider T165122 to be a severe blocker.

Two issues have been brought up so far.
1- It breaks any gadgets that depend on '#wpSummary' selector. I changed around ten gadgets and I still think, way more are broken. I still don't know what to do with old gadgets like this that use document.getElementById("wpSummary"). If we are going to roll this out in everywhere, this will be a big problem
2- Padding of buttons doesn't look right:


The copyright notice is too close to the buttons.

Thank you very much for this information, Ladsgroup.

I'm looking at some of your changes, such as this on fawiki. For the most part, is it as simple as "anything using '#wpSummary' instead of 'input#wpSummary, #wpSummary > input' is going to break"? If so, we could run that in Tech News for a week or two before releasing this to any other wiki.

Yeah, but in some cases it's not just that for example. This is resolved by this edit (adding a parent() to checkbox selector)

TerraCodes added a subscriber: TerraCodes.EditedSun, May 14, 2:16 AM

Thank you very much for this information, Ladsgroup.

I'm looking at some of your changes, such as this on fawiki. For the most part, is it as simple as "anything using '#wpSummary' instead of 'input#wpSummary, #wpSummary > input' is going to break"? If so, we could run that in Tech News for a week or two before releasing this to any other wiki.

Ye, a this should probably be ran in the tech news. (its also going to break enwiki's defaultsummaries gadget)

We could get a shell user to do a mwgrep for wpSummary to identify affected scripts.

Johan added a comment.EditedSun, May 14, 4:11 AM

Ye, a this should probably be ran in the tech news. (its also going to break enwiki's defaultsummaries gadget)

It was mentioned in 2017/18, which doesn't mean it can't be repeated with more detail/new information if necessary.

Ye, a this should probably be ran in the tech news. (its also going to break enwiki's defaultsummaries gadget)

It was mentioned in 2017/18, which doesn't mean it can't be repeated with more detail/new information if necessary.

Maybe just a little stronger warning that things could be broken after deploy.

We could get a shell user to do a mwgrep for wpSummary to identify affected scripts.

Just exclude wpSummaryLabel, this is a part of new look actually

Johan, I was thinking about either running a simple line in the next Tech News with information about how to identify and fix scripts (if it's really just a simple search-and-replace task). But if it's more complicated than can be communicated in two sentences, then I should probably start at page at mw.org with explanations.

@TTO, I agree with you that a list of affected scripts would be really useful. Tech News could include link to it.

Rather than changing countless uses, and also annoying downstream users and developers, why don't you let the input keep wpSummary id?
That seems a much nicer solution, instead of repurposing an id that has been used that way for nearly 12 years.

Rather than changing countless uses, and also annoying downstream users and developers, why don't you let the input keep wpSummary id?
That seems a much nicer solution, instead of repurposing an id that has been used that way for nearly 12 years.

It does seem like we should just do that.

I submitted a patch to change this (see T165854: Change OOUI EditPage inputs to keep the old 'id' attributes on the <input> elements). I hope you haven't updated too many gadgets that will need to be fixed again :( (The ones that used $( 'input#wpSummary, #wpSummary > input' ) etc. should work fine with the proposed HTML too, no further changes needed.)

Old HTML:

<input ... id="wpSummary" name="wpSummary">

Current OOUI HTML:

<div id="wpSummary" ... class="... oo-ui-textInputWidget ...">
	<input ... id="ooui-123" name="wpSummary" class="oo-ui-inputWidget-input">
	...
</div>

Proposed OOUI HTML:

<div id="wpSummaryWidget" ... class="... oo-ui-textInputWidget ...">
	<input ... id="wpSummary" name="wpSummary" class="oo-ui-inputWidget-input">
	...
</div>