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

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

Two considerations:

  • It is not obvious why the title has to be faded out at exactly that width; it leaves quite a lot of whitespace in the header on my screen, too much for my taste. I would have suggested to only fade titles out whenever they get too close to the icons. But I guess that could be looked at again when the header gets its final form.
  • The title behaves unexpectedly in this dewiki article. I imagine it has to do with the <wbr> tags. Should I file this bug as a new task or does it still fall within the scope of this one?

Two considerations:

  • It is not obvious why the title has to be faded out at exactly that width; it leaves quite a lot of whitespace in the header on my screen, too much for my taste. I would have suggested to only fade titles out whenever they get too close to the icons. But I guess that could be looked at again when the header gets its final form.
  • The title behaves unexpectedly in this dewiki article. I imagine it has to do with the <wbr> tags. Should I file this bug as a new task or does it still fall within the scope of this one?

@XanonymusX - thank you for raising these! The first issue, with the faded out title, will be taken care of in this task: T298885: [Sticky header] Consider removing (or increasing) max-width on page title.

@XanonymusX thanks for your feedback.

Two considerations:

  • It is not obvious why the title has to be faded out at exactly that width; it leaves quite a lot of whitespace in the header on my screen, too much for my taste. I would have suggested to only fade titles out whenever they get too close to the icons. But I guess that could be looked at again when the header gets its final form.

this is being reconsidered here: T298885

  • The title behaves unexpectedly in this dewiki article. I imagine it has to do with the <wbr> tags. Should I file this bug as a new task or does it still fall within the scope of this one?

Interesting, I have not seen that before. My initial response is that we should use CSS to achieve this wrapping rather than <wbr> tags. In the screenshot below I removed the <wbr> tags and added word-break: break-all, which as far as I can tell has the same result. Here is how it looks:

Screen Shot 2022-01-25 at 7.28.58 AM.png (1×2 px, 569 KB)

Well, the use of the <wbr> tags is part of the dewiki guide on how to use DISPLAYTITLE. There have been discussions about it in the past, but apparently this has shown to be the most efficient solution so far. Even more extreme example: Lopadotemachoselachogaleokranioleipsanodrimhypotrimmatosilphiokarabomelitokatakechymenokichlepikossyphophattoperisteralektryonoptokephalliokinklopeleiolagoosiraiobaphetraganopterygon. What you are proposing is what the mobile version is doing, right? Of course that could be used for all skins, so manual solutions wouldn't be needed anymore. Or, if we were to go for a new technical solution, imo soft hyphens would need to be allowed in DISPLAYTITLE, just breaking the title at random positions should generally be avoided (see T66528).

Anyway, for now I would suggest that the sticky header just ignore <wbr> tags!

@Theklan thanks for providing another example. Interestingly the English version of this page uses a soft-hyphen (scroll down to instead of <wbr>, with the downside of these unidentified characters appearing:

Screen Shot 2022-01-25 at 12.11.36 PM.png (652×1 px, 228 KB)

On the Basque version of the page the word-break: break-all solution seems to work again:

Screen Shot 2022-01-25 at 12.12.07 PM.png (566×2 px, 179 KB)

Anyway, for now I would suggest that the sticky header just ignore <wbr> tags!

@XanonymusX I agree. Due to the design constraints of the sticky header, page titles should be limited to one line (either by fade or ellipses) to avoid situations like below:

Screen Shot 2022-01-25 at 2.42.10 PM.png (228×1 px, 137 KB)


@Theklan for the issue of the title going outside of the content box when the word is too long:

Screen Shot 2022-01-25 at 2.52.22 PM.png (555×2 px, 169 KB)

I propose we do what we do on mobile:

Screen Shot 2022-01-25 at 2.52.59 PM.png (916×2 px, 289 KB)

and use word-break: break-word; which is similar to @alexhollender's suggestion of word-break: break-all; with the crucial difference that break-word respects the <wbr> tags if they are present.

Screen Shot 2022-01-25 at 12.56.38 PM.png (802×494 px, 88 KB)
Screen Shot 2022-01-25 at 12.53.36 PM.png (910×427 px, 85 KB)
word-break:break-all;word-break: break-word;

Whenever you restrict width, you really should just always use word-break: break-word; honestly (and nowrap is the devil)

In T289814#7649685, @alexhollender wrote:

@Theklan thanks for providing another example. Interestingly the English version of this page uses a soft-hyphen (scroll down to instead of <wbr>, with the downside of these unidentified characters appearing:

That seems like a font/glyph selection issue, where the browser/OS is not doing proper glyph fallback. I just see a hyphen as I should. Maybe your browser/OS is using a font that claims to provide this character, but doesn't actually. Lots of broken fonts out there.

Test wiki on Patch demo by CMing (WMF) using patch(es) linked to this task was deleted:

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