Page MenuHomePhabricator

Enable collapsible templates (including infoboxes) on mobile
Open, MediumPublic

Description

NOTE: The code that provides collapsible content currently resides in mediawiki.page.ready which also provides functionality for sortable tables which is captured in the sister task T233340

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
  • 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.
  • Enable the config option inside the PageReady hook

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)May 7 2018, 9:28 PM
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 Medium to Low.Apr 9 2019, 4:14 PM

Reflecting reality

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

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

Restricted Application added a subscriber: Masumrezarock100. · View Herald TranscriptNov 14 2019, 10:56 PM
Jdlrobson renamed this task from Enable mediawiki.page.ready on Minerva (collapsible templates (including infoboxes) to [EPIC] Enable mediawiki.page.ready on Minerva (collapsible templates (including infoboxes) and sortable tables).Jan 17 2020, 10:31 PM
Krinkle added a comment.EditedFeb 24 2020, 4:42 PM

How close are we to letting jquery.makeCollapsible work on Minerva? This is currently blocking some simplification logic in core (merging mediawiki.page.startup and mediawiki.page.ready). This is up for review at https://gerrit.wikimedia.org/r/#/c/mediawiki/core/+/574133/, where the combined entity will be part of modules[core][] instead of modules[content][]`.

In its current state it would effectively bypass the code in Minerva that is currently dequeuing this module (source).

There are a few challenges with getting these features working. IF that's the goal it's a little trickier. If the goal is simply to get the module loaded in the page that's a different story...

Could we enable this module but disable the code from running on Minerva by using packageFiles and a function that returns whether the feature is enabled or not? That way product work would not block your work and I think we could check a quick solution.

If we need to get the feature working it's mostly an issue of reading web priorities. I advise you make a formal request via the performance team to Olga if this needs to happen. Table sorting on mobile has some serious UX problems on mobile they we've been unable to find solutions for yet (T233340) and I don't see any quick fix.
Solving makeCollapsible is much clearer and I could do that given the time (which due to desktop refresh is currently lacking).

Jdlrobson renamed this task from [EPIC] Enable mediawiki.page.ready on Minerva (collapsible templates (including infoboxes) and sortable tables) to Enable mediawiki.page.ready on Minerva (collapsible templates (including infoboxes) and sortable tables).Mar 17 2020, 4:29 PM

Possibly might be helpful in fixing T247701: Make sure COVID19 page to be readable on all form factors.

Jdlrobson removed the point value for this task.Mar 17 2020, 6:20 PM

(Also resetting estimation as this is essentially 2 subtasks now and the collapsing is one of those (sortable tables is the other)

Volker_E updated the task description. (Show Details)Mar 17 2020, 7:30 PM
Volker_E removed a subscriber: bzimport.
Jdlrobson renamed this task from Enable mediawiki.page.ready on Minerva (collapsible templates (including infoboxes) and sortable tables) to Enable collapsible templates (including infoboxes) on mobile.Mar 18 2020, 12:07 AM
Jdlrobson updated the task description. (Show Details)

Why don't we use summary tag to make collapsable element?. It's HTML5 built-in feature, and supported by all browsers. And the good thing about it that this tag doesn't need Javascript to work.

Why don't we use summary tag to make collapsable element?. It's HTML5 built-in feature, and supported by all browsers.

When it comes to IE/Edge, I think only Edge from this year (version 79–) supports the summary-tag, and according to the included link, it doesn't work with screen readers. So, it doesn't really seem to be a viable option.

@ASammour it's a really good idea but since infoboxes are defined in templates such an idea would have to happen inside a template. The summary tag can be used in older browsers and will render fine in IE11 - it just won't be collapsible which IMO is acceptable.

However it looks like the parser doesn't support summary and details elements. We'd need to add that first by requesting it at MediaWiki-Parser

https://caniuse.com/#search=summary

Jdlrobson updated the task description. (Show Details)Fri, Jul 31, 4:00 PM