Regression: Mobile talk page shows links in overlay header
Closed, ResolvedPublic2 Estimated Story Points
Actions

Description

If there's a wikilink in a talk page section heading, when that section is opened on mobile the link has display: block; in the overlay header. This makes the header taller than usual, and covers up the first part of the section's content.

Example with the heading Testing [[foobar]] wikilink
https://en.m.wikipedia.org/wiki/User_talk:The_wub/mobile_section_test#Testing_foobar_wikilink

Developer notes

See T243650#5839417

QA Steps

Visit https://en.m.wikipedia.beta.wmflabs.org/wiki/Talk:Test_ascii_toc
There is a section titled "this is a title with bold text but it should not appear in overlay title" section. Notice that the "bold" word in that title is bolded. Click on this section.
After clicking the section, verify that the title in Overlay does not contain any bolded characters and that it appears okay (no weird spacing).

QA Results

AC	Status	Details
1	✅	T243650#5898221
2	✅	T243650#5898221

Details

	Project	Branch	Lines +/-	Subject
	mediawiki/skins/MinervaNeue	master	+2 -1	Do not allow raw HTML in talk page overlay header

Customize query in gerrit

Related Objects
Search...

Status	Assigned	Task
Resolved	ovasileva	T232593 [EPIC] Transfer certain AMC functionality to all logged-in users
Resolved	ovasileva	T232594 Add article and discussion tabs to all logged-in users on mobile
Resolved	Jdlrobson	T230695 Render talk page as a tab (rather than a modal)
Open	Shubham656jain	T240254 Talk page as tab, small layout fixes
Resolved	ovasileva	T243650 Regression: Mobile talk page shows links in overlay header

Event Timeline

Pcoombe created this task.Jan 25 2020, 12:24 AM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJan 25 2020, 12:24 AM

Masumrezarock100 edited projects, added Readers-Web-Backlog (Design); removed Talk Pages, MobileFrontend.Jan 25 2020, 8:38 AM

Masumrezarock100 added a parent task: T240254: Talk page as tab, small layout fixes.

Masumrezarock100 edited projects, added Readers-Web-Backlog (Kanbanana-2019-20-Q3); removed Readers-Web-Backlog (Design).Jan 25 2020, 8:40 AM

This is a regression caused by T240487.
The behaviour was correct before but it needs to do that while avoiding the XSS that it tried to fix.
I dont think we should support HTML in overlay headers. Having a link or any styling in their is unnecessarily confusing.

I'd recommend using

			section: new mobile.Section( {
				line: $('<span>').text( $($headline).text() )[0].outerHTML,
				text: $heading.next().html()
			} ),

Jdlrobson renamed this task from Mobile talk page: display issues with wikilink in section heading to Regression: Mobile talk page shows links in overlay header.Jan 30 2020, 3:18 AM

Jdlrobson updated the task description. (Show Details)

Ah, okay. However I notice such links are visible but not clickable in the section title when it's collapsed, the action to open the overlay takes precedence. That makes sense, but if the link is removed from the overlay header then it will leave no way to open such a link at all.

Yeh section headings are pretty problematic on mobile due to the fact that clicking on one is what toggles open sections. I'd love to understand why they are used in place of a link/hatnote at the top of the section.

Jdlrobson triaged this task as Medium priority.Feb 3 2020, 1:59 PM

MBinder_WMF renamed this task from Regression: Mobile talk page shows links in overlay header to [S] Regression: Mobile talk page shows links in overlay header.Feb 12 2020, 5:49 PM

ovasileva renamed this task from [S] Regression: Mobile talk page shows links in overlay header to Regression: Mobile talk page shows links in overlay header.Feb 17 2020, 2:05 PM

ovasileva set the point value for this task to 2.

ovasileva moved this task from Upcoming to Ready for Development on the Readers-Web-Backlog (Kanbanana-2019-20-Q3) board.

Jdlrobson moved this task from Ready for Development to Doing on the Readers-Web-Backlog (Kanbanana-2019-20-Q3) board.Feb 17 2020, 7:09 PM

Change 572730 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/skins/MinervaNeue@master] Do not allow raw HTML in talk page overlay header

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

gerritbot added a project: Patch-For-Review.Feb 17 2020, 7:20 PM

Fix pushed.

That makes sense, but if the link is removed from the overlay header then it will leave no way to open such a link at all.

The "read as wiki page" option still allows access to the link.

ovasileva lowered the priority of this task from Medium to Low.Feb 18 2020, 11:44 AM

ovasileva raised the priority of this task from Low to Medium.

Patch has been +2'd, I just need to add QA steps which I'm doing now...

nray updated the task description. (Show Details)Feb 18 2020, 11:47 PM

Change 572730 merged by jenkins-bot:
[mediawiki/skins/MinervaNeue@master] Do not allow raw HTML in talk page overlay header

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

ReleaseTaggerBot added a project: MW-1.35-notes (1.35.0-wmf.21; 2020-02-25).Feb 19 2020, 12:00 AM

Maintenance_bot removed a project: Patch-For-Review.Feb 19 2020, 12:10 AM

Test Result

Status: ✅ PASS
OS: macOS Catalina
Browser: Chrome
Device: MBP
Emulated Device: iPhoneX

Test Artifact(s):

QA Steps

Visit https://en.m.wikipedia.beta.wmflabs.org/wiki/Talk:Test_ascii_toc
✅ AC1: There is a section titled "this is a title with bold text but it should not appear in overlay title" section. Notice that the "bold" word in that title is bolded. Click on this section.

✅ AC2: After clicking the section, verify that the title in Overlay does not contain any bolded characters and that it appears okay (no weird spacing).