Page MenuHomePhabricator

Sticky header: Add article title to sticky header
Closed, ResolvedPublic2 Estimated Story Points

Description

Background

In T289716: Create sticky header skeleton we are building the skeleton for the sticky header. This task will cover adding the article title to the stick headery

Acceptance criteria

Add the following items to the sticky header as per the prototype below:

  • Page title

Prototype

https://di-community-round-2.web.app/Audre_Lorde

Mock

image.png (174×1 px, 29 KB)

Developer notes

The title doesn't change so we should be able to set directly in the sticky header on startup using the existing template data(html-title). Do not introduce a new one).

Title's are generally HTML and can contain formatting and be different from the page name. You'll probably want to test both:

Beware long titles! Use the fade out:

image.png (472×2 px, 99 KB)

QA steps

QA Results - Beta

ACStatusDetails
1T289814#7388552
2T289814#7388552
3T289814#7446459 T289814#7487920 - This is the follow-up QA Step

QA Results - Prod

ACStatusDetails
1T289814#7388566
2T289814#7388566
3T289814#7487924 - This is the follow-up QA Step

Follow up QA steps:

Screen Shot 2021-10-26 at 10.24.27 AM.png (836×1 px, 201 KB)

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes

Change 720828 had a related patch set uploaded (by Clare Ming; author: Clare Ming):

[mediawiki/skins/Vector@master] Add page title to sticky header

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

cjming added a subscriber: cjming.

Change 720828 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Add page title to sticky header

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

nray added a subscriber: Edtadros.

Moving this back to needs more work as I have pending questions on the patch

Change 721087 had a related patch set uploaded (by Clare Ming; author: Clare Ming):

[mediawiki/skins/Vector@master] Clean up for adding title to sticky header

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

cjming assigned this task to nray.

Change 721087 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Clean up for adding title to sticky header

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

Test Result - Beta

Status: ✅ PASS
Environment: beta
OS: macOS Big Sur
Browser: Chrome
Device: MBP
Emulated Device: NA

Test Artifact(s):

QA Steps

Pull up an article locally or on Beta cluster in modern Vector as a logged in user.
AC1: Scroll down to trigger sticky header and note that the article title is in the sticky header.

Screen Shot 2021-09-29 at 9.19.01 AM.png (419×1 px, 208 KB)

AC2: Test fade out of article titles longer than 500px - i.e. https://en.wikipedia.org/wiki/Constituency_election_results_in_the_1923_United_Kingdom_general_election (may need MobileFrontendContentProvider extension enabled locally in order to scroll)
Screen Shot 2021-09-29 at 9.23.05 AM.png (419×1 px, 104 KB)

Test Result - Prod

Status: ✅ PASS
Environment: enwiki
OS: macOS Big Sur
Browser: Chrome
Device: MBP
Emulated Device: NA

Test Artifact(s):

QA Steps

Pull up an article locally or on Beta cluster in modern Vector as a logged in user.
AC1: Scroll down to trigger sticky header and note that the article title is in the sticky header.

Screen Shot 2021-09-29 at 9.24.40 AM.png (419×1 px, 163 KB)

AC2: Test fade out of article titles longer than 500px - i.e. https://en.wikipedia.org/wiki/Constituency_election_results_in_the_1923_United_Kingdom_general_election (may need MobileFrontendContentProvider extension enabled locally in order to scroll)
Screen Shot 2021-09-29 at 9.25.08 AM.png (419×1 px, 156 KB)

There are two different mocks in the description. The first one uses a shadow, the second one not. I'm not a big fan of shadows, but if the background color of both the header and the page are exactly the same, then the shadow helps readers understanding that this is sticky and will be there. Which of the images is correct?

Change 731830 had a related patch set uploaded (by Clare Ming; author: Clare Ming):

[mediawiki/skins/Vector@master] Fix article title in sticky header template.

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

Test wiki created on Patch Demo by CMing (WMF) using patch(es) linked to this task:

https://patchdemo.wmflabs.org/wikis/e7ea82b0b2/w/

Change 731830 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Fix article title in sticky header template.

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

Test Result - Beta

Status: ❌ Fail
Environment: beta
OS: macOS Big Sur
Browser: Chrome
Device: MBP
Emulated Device: NA

Test Artifact(s):

QA Steps

❌ AC3: To test for example italicized titles, navigate to https://patchdemo.wmflabs.org/wikis/e7ea82b0b2/wiki/Test_Italic_Title?vectorstickyheader=1, login, and verify that the italicized page title is reflected in the sticky header.

I couldn't get the sticky header to appear on Patch Demo.

Screen Recording 2021-10-20 at 4.13.09 PM.mov.gif (722×1 px, 3 MB)

I found a page on beta and it does show up as italic, but the last character is cropped.
Screen Recording 2021-10-20 at 4.03.25 PM.mov.gif (1×1 px, 2 MB)

Screen Shot 2021-10-20 at 4.04.48 PM.png (198×996 px, 41 KB)

Edtadros updated the task description. (Show Details)
Edtadros updated the task description. (Show Details)
Jdlrobson added a subscriber: Jdlrobson.

hi @Edtadros - thanks for your thorough testing - I was able to replicate the cutting off in beta but not on my patchdemo link:

Screen Shot 2021-10-21 at 10.50.20 AM.png (396×2 px, 209 KB)

I'm not sure what changes happened recently that would have introduced that regression - I'll take a look

Change 734445 had a related patch set uploaded (by Clare Ming; author: Clare Ming):

[mediawiki/skins/Vector@master] Fix title getting cut off in sticky header.

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

Change 734445 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Fix title getting cut off in sticky header.

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

I'm trying to make a new article at the beta cluster but it seems that's impossible. Have you tried something like "Storia d'amore", to see if the ' is working as '?

Test Result - Beta

Status: ✅ PASS
Environment: beta
OS: macOS Big Sur
Browser: Chrome
Device: MBP
Emulated Device: NA

Test Artifact(s):

QA Steps

✅ AC3: To test for example italicized titles, navigate to https://en.wikipedia.beta.wmflabs.org/wiki/Italic_title, login, and verify that the italicized page title is reflected in the sticky header and is not cut off.

Screen Shot 2021-11-07 at 7.05.07 AM.png (1×971 px, 410 KB)

Test Result - Prod

Status: ✅ PASS
Environment: enwiki
OS: macOS Big Sur
Browser: Chrome
Device: MBP
Emulated Device: NA

Test Artifact(s):

QA Steps

✅ AC3: To test for example italicized titles, navigate to https://en.wikipedia.org/wiki/Where_the_Red_Fern_Grows?vectorstickyheader=1, login, and verify that the italicized page title is reflected in the sticky header and is not cut off.

Screen Shot 2021-11-07 at 7.12.36 AM.png (1×928 px, 588 KB)

Looks good. Noting that I'm not 100% sure if the styling here is what we expect, but that's something @alexhollender can take a look at in T294924: Sticky header: full feature design review