Page MenuHomePhabricator

Enable mediawiki.page.ready on Minerva (collapsible templates (including infoboxes)
Open, NormalPublic8 Story Points

Description

Problem

On the desktop, Same-sex marriage in Kentucky (and other US states) looks fine. Template:Same-sex unions runs down the right-hand side of the page, taking only about one-third of the width available for text (on my laptop at a size comfortable for my old eyes), and only its first section, Marriage, is expanded; the other three, Civil unions and registered partnerships, Unregistered cohabitation, and See also, are initially collapsed, with a "[Show]" button.

On my smartphone,* though, the template comes up fully expanded at almost the very top of the page, with only the title and the lead graphic above it. I have to scroll five full screens to reach the first line of text. Need I say how awkward this is? especially with the risk of tapping a link as I tap-scroll down.


* Samsung Verizon Android Galaxy S-3, model SCH-I535, OS v4.4.2

Infoboxes

On desktop, if an article has multiple infoboxes, we collapse each subsequent infobox after the first:


We don't do this on mobile and it takes up a lot of space
https://en.m.wikipedia.org/wiki/California

Plan

MinervaNeue should

  • Load mediawiki.page.ready /Users/jrobson/git/core/resources/src/mediawiki/page/ready.js
  • Provide styling (see Design) for collapsing as a skinStyle for the jquery.makeCollapsible module

Design

  • bg color remains the same #f8f9fa
  • subtle box-shadow to indicate collapsed state box-shadow: 0px 0px 10px -4px rgba(0,0,0,0.6)
  • icon is a small version of mw-ui-icon-mf-arrow (same as toggle) but in blue color. (see related T198770)
  • "Show more" button is 14px, blue, normal weight. Note, that the text of the button comes from editors so don't worry about the copy text here. We cannot change it.

Acceptance criteria

  • Update SkinMinerva::getDefaultModules to include jquery.makeCollapsible when requested - see https://gerrit.wikimedia.org/r/431662 POC: Enable collapsible elements on Minerva is a proof of concept.)
  • Add new styles for Minerva, ensuring they do not cause FOUC when loaded and collapsed elements begin collapsed.
  • This is used in various ways by editors (see T199924: Hidden images in vector arwiki display in Minerva) some community outreach/testing as part of deployment would be advisable.

Developer notes

https://gerrit.wikimedia.org/r/431662 POC: Enable collapsible elements on Minerva is a proof of concept.

Related Objects

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes
Jdlrobson updated the task description. (Show Details)Jun 28 2017, 11:29 PM
Jdlrobson updated the task description. (Show Details)
Jdlrobson renamed this task from Make collapsible templates (including infoboxes) collapse in Mobile Frontend to Enable collapsible templates (including infoboxes) collapse in Mobile Frontend and table sorting.Nov 29 2017, 6:29 PM
Jdlrobson updated the task description. (Show Details)
Jdlrobson updated the task description. (Show Details)Nov 29 2017, 6:39 PM
Jdlrobson renamed this task from Enable collapsible templates (including infoboxes) collapse in Mobile Frontend and table sorting to Enable mediawiki.page.ready on Minerva (collapsible templates (including infoboxes) + table sorting ).Nov 29 2017, 7:31 PM
Jdlrobson added a project: Google-Code-in-2017.

Might want to block this on T42812 (and by extent, the various bugs that would fix). Otherwise we'd also be adding FOUCs and non-trivial JS-execution cost to mobile page loads.

Jdlrobson changed the task status from Stalled to Open.May 3 2018, 7:47 PM
Jdlrobson added a subscriber: alexhollender.

No longer blocked.
@alexhollender want to take a look at the proposed design?

Change 431656 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/core@master] Allow tablesorter to run on mobile

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

Jdlrobson updated the task description. (Show Details)
Jdlrobson removed a project: patch-welcome.

Change 431656 merged by jenkins-bot:
[mediawiki/core@master] jquery.tablesorter: Allow this module to load on mobile

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

@Jdlrobson design looks good 👍

Jdlrobson updated the task description. (Show Details)Jun 13 2018, 8:08 PM
Jdlrobson renamed this task from Enable mediawiki.page.ready on Minerva (collapsible templates (including infoboxes) + table sorting ) to Enable mediawiki.page.ready on Minerva (collapsible templates (including infoboxes).Jun 13 2018, 8:13 PM
Jdlrobson updated the task description. (Show Details)
Jdlrobson updated the task description. (Show Details)Jun 13 2018, 8:55 PM
alexhollender updated the task description. (Show Details)Jul 3 2018, 8:58 PM
alexhollender updated the task description. (Show Details)

@Jdlrobson just updated the design section of the description with details. Lmk if further clarification is needed 🙂

Jdlrobson updated the task description. (Show Details)Jul 3 2018, 10:14 PM
Jdlrobson updated the task description. (Show Details)

This is also relevant for Wikimedia Commons, where we now have infoboxes in categories that can take up quite a few screen-pages on mobile, e.g. try https://commons.m.wikimedia.org/wiki/Category:Barack_Obama . See T199931 for details.

Jdlrobson updated the task description. (Show Details)Jul 24 2018, 7:12 AM
Jdlrobson updated the task description. (Show Details)Jul 30 2018, 9:05 AM
Jdlrobson set the point value for this task to 8.Jul 30 2018, 11:51 PM
Jdlrobson added subscribers: nray, pmiazga, Stephen.

We did an async estimation. Here's the conversation:

jdlrobson [15 hours ago]

haha, so I'll kick this one off as the odd one out. I can definitely be talked down to an 8 as I think there are ways to de-risk this, but I'm a little concerned that while the California use case should be straightforward, editors use these in all sorts of crazy ways and our design changes may break other use cases. If we feature flag it, we'd allow us flexibility to respond to any breakages, but I still think this task carries some risk, so I'd push for an 8 to cover that. Interested to hear others thoughts.

@pmiazga want to reflect on your 3, here?

pmiazga [9 hours ago]

yeah, I didn't expect the styling to be so difficult, it looked straightforward and honestly I didn't focus too much on the styling part. The JS part looks kinda easy - we're already using jquery.collapsible in different parts of the code. But now, when I think a bit more about it, it will require bit more testing as we do not use too many collapsible elements on Mobile. I'm happy to bump to 5. I'm more than sure we will break some infoboxes but thats something we cannot foresee - user-generated content never stops surprising me. 13 points is IMHO bit too far, I'm more than sure there will be a follow-up work and we will estimate that work separately (when real issues happen on production). @Jdlrobson if you think that styling might be problematic I'm happy to bump to 8, but with 8 points I'd like to see some ui tests, even with our old framework.

jdlrobson [8 hours ago]

I can go down to 5, provided we feature flag the addition of the style/script modules. We should bear in mind that when enabling, reverting/disabling is highly likely (it has been with similar changes) as we can't possibly know all the way our wikis use these scripts. When working on removing the FOUC in desktop collapsing, with my minor style changes there were lots of UI regressions relating to user content. @Stephen in @nray absence can you tie break? Looks like we're on a 5 or 8.

stephen [8 hours ago]

I'm happy to go to an 8 based on the difficulty of getting the CSS animations in for collapsible elements which seems similar and the risk of wiki content.

pmiazga [8 hours ago]

ok, I'll be tie breaker - 8 - styles are usually bit more difficult than expected (at least to me)

Is there anything we can do to make this task less risky?

<snip /> but I'm a little concerned that while the California use case should be straightforward, editors use these in all sorts of crazy ways and our design changes may break other use cases.

Would enumerating these cases make this task less risky, for example?

Is there anything we can do to make this task less risky?

Other than feature flag, to allow easy reverting in the situation of a notable disaster, not really, As I found in the parent task (T42812) there are many undocumented and unusual usages. https://www.mediawiki.org/wiki/Manual:Collapsible_elements only covers the common ones. While we can use that page to test the main most widely cases, I think we will have to learn on bug reports to identify where our approach doesn't work.

See https://www.mediawiki.org/wiki/Manual:Collapsible_elements/Demo/Advanced for the more advanced use cases. This page has been used each time major changes were made to the jquery.makeCollapsible plugin as acceptable criteria to detect regressions (the page was recently moved from testwiki where I used it since 2011).

24pm added a subscriber: 24pm.Sep 4 2018, 4:06 AM

What is the status of this task? There was a note in the Tech news in the middle of this year, but still every collapsed element is fully unwrapped on mobile.

What is the status of this task? There was a note in the Tech news in the middle of this year, but still every collapsed element is fully unwrapped on mobile.

I'm not sure what was reported on tech news, but the only thing that's changed is that the flash of unstyled content has been removed (T42812) which was a blocker for working on this task.

The task is ready to go (with design attached) so just needs a volunteer to work towards enabling it on mobile.

I see. Hopefully someone will work on this soon. This makes also a buggy behavior, as sections wrapped in collapsible div (Collapse top template) are not folded (and can not be folded) by Minerva section folding feature.

Pcj added a subscriber: Pcj.Apr 1 2019, 12:57 PM
Restricted Application added a subscriber: Liuxinyu970226. · View Herald TranscriptApr 1 2019, 12:57 PM
Jdlrobson lowered the priority of this task from Normal to Low.Apr 9 2019, 4:14 PM

Reflecting reality

Jdlrobson raised the priority of this task from Low to Normal.Wed, Aug 14, 8:37 PM

Bumped as I think this will be important for desktop refresh and AMC.