Page MenuHomePhabricator

Change styling for Minerva/MobileFrontend section headings to use flexbox instead of table-cells
Open, Needs TriagePublic3 Estimated Story Points

Description

When investigating topic containers for mobile (T303362), we've noticed that the styling of section headings is currently implemented using display: table and display: table-cell, which makes it difficult to add content associated with the heading that would display on a separate line. It seems like they could be implemented using display: flex instead, which was not widely supported by browsers when this code was originally written, but it is now. A flexbox version would be easier to maintain in the long term, and it would also allow us to remove some workarounds in VE code (e.g. T202991).

Testing

This should result in no changes (regressions) to the look and behaviour of section headings on mobile, which usually consist of:

  • An expand/collapse icon on the left (^/v), clicking on this or the heading should toggle the section
  • The section title
  • And section edit link (pencil icon), right aligned, which launches an editor at that section

Test on a few mobile devices (Android/iOS)

Scenarios to test:

  • Normal page view
  • Normal page view with non-collapsible sections (e.g. wrapped in <div>) (https://meta.m.wikimedia.org/wiki/Community_Wishlist_Survey/FAQ)
  • Normal page view with non-editable sections (e.g. fully protected) (https://en.m.wikipedia.org/wiki/Latvia)
  • Normal page view loading with slow connection (no content shifts/jumps)
  • No-JS page view
  • Visual editor (headings look the same as view mode, togglers and edit links are hidden)
  • Editor loading animation (smooth transition from view to visual edit mode)
  • Wikitext editor preview (togglers are hidden)
  • Desktop Minerva (togglers are hidden, multiple edit links appear correctly)
  • Other skins on mobile (sections are collapsible, nothing looks wildly broken)
  • No regressions related to these issues: T106347 T202991 T229744

Event Timeline

Change 779527 had a related patch set uploaded (by Bartosz Dziewoński; author: Bartosz Dziewoński):

[mediawiki/extensions/MobileFrontend@master] Style section headings using flexbox

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

Change 779528 had a related patch set uploaded (by Bartosz Dziewoński; author: Bartosz Dziewoński):

[mediawiki/skins/MinervaNeue@master] Style section headings using flexbox

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

Scenarios to test: (moved to description)

We have historically used display: table for section headings in the mobile skin due to browser support. It would help going into the Thursday meeting to know what we imagine the impact would be to older devices if any in terms of page views.

The impact would be small: the headings would look slightly different, but the rendering would be acceptable; see mockup below. This is only a mockup though, because I don't have any mobile devices old enough to not support flexbox, but new enough to connect to our wikis using HTTPS.

(Page used as the example: https://en.m.wikipedia.org/wiki/The_Fighting_Temeraire#In_popular_culture_and_on_currency)

Expected (identical before and after the changes)How it would look like with no flexbox support
image.png (932×750 px, 124 KB)
image.png (932×750 px, 124 KB)

I also want to note that the mobile site already uses flexbox widely for prominent elements of the page, so the browser support must be good enough. I would not be proposing this if it wasn't a technique you're already using. For example, the header with flex elements highlighted:

image.png (932×750 px, 112 KB)
nray set the point value for this task to 3.Apr 13 2022, 4:53 PM

The proposal here is to use display: flex which has the following browser support:
https://caniuse.com/?search=flex

Any browsers not supporting flex box would presumably display headings like so:

Screen Shot 2022-04-12 at 11.43.14 AM.png (560×1 px, 120 KB)

This is presumably fine given the declined task T296551 and web team is fine with that.

We checked in with editing team and they do not need code review support for this change, and web team feels comfortable with that.

Change 779528 merged by jenkins-bot:

[mediawiki/skins/MinervaNeue@master] Style section headings using flexbox

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

Change 779527 merged by jenkins-bot:

[mediawiki/extensions/MobileFrontend@master] Style section headings using flexbox

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

Test wiki created on Patch demo by JKlein (WMF) using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/65d33f5a9f/w/