Page MenuHomePhabricator

[Minerva TOC] floating action button bugs
Closed, ResolvedPublic

Description

A few bugs came up while doing the visual design review of the floating action button ToC:

  1. The bold text should be an on-state giving user feedback for which section they're in. A reader's current section should be bold text and have the base colour. What happens now: the [Top] item in the Toc stays bold regardless of where you are on the article and what you've clicked. What should happen: the current section that the readers is on should have the active styling. Clicking on a link in the ToC should make that item have the active style. Scrolling should "move" the active style down the ToC link list. -> Moved to T413403
  2. Something about our implementation seems to have broken our lead paragraph hoisting logic. The first thing in the content view on Minerva should always be the lead paragraph, not the infobox. The logic is handled by MoveLeadParagraphTransform in MobileFrontend. The legacy parser incorrectly places the infobox before the leading paragraph. ---> Moved to T416405
  3. At wider viewport sizes, the ToC window should be centre aligned, not left aligned. ---> Addressed in this patch / T413402 / patchdemo: https://cbf2720cb4.catalyst.wmcloud.org/w/index.php?title=Alfalfa&mpo=minerva-toc-button:treatment#toc
  4. The open ToC menu doesn't work in dark mode and has hard-coded colours.

Event Timeline

cc @lwatson Let me know if you have any questions about these. Also probably worth flagging @Jdlrobson-WMF for the paragraph hoisting bug.

lwatson renamed this task from FAB ToC bugs to [Minerva TOC] floating action button bugs.Feb 2 2026, 10:13 PM
lwatson updated the task description. (Show Details)

What is "FAB"?

Thanks! I changed the FAB acronym to floating action button in the task description

matthiasmullie subscribed.

#1 - I did not realize the intended behavior that was expected here. I've crossed it out from this ticket and moved it to T413403, where I'm currently working on handling the scroll position; seems fitting there.

@matthiasmullie thanks for picking up bug #1! The design intent wasn't clear to me either when I added the bold styles to the top link.

Addressed bug #3 center floating button TOC on wider screens in this patch from T413402. Here's the patchdemo using #toc URL hash: https://cbf2720cb4.catalyst.wmcloud.org/w/index.php?title=Alfalfa&mpo=minerva-toc-button:treatment#toc

At wider viewport sizes, the ToC window should be centre aligned, not left aligned.

I aligned the sticky header TOC to the left on wider screens. Patchdemo: https://cbf2720cb4.catalyst.wmcloud.org/w/index.php?title=Alfalfa&mpo=minerva-toc-sticky:treatment#toc
Let me know what you think @JScherer-WMF (maybe this task can capture all bugs and design tweaks for both implementations)

Something about our implementation seems to have broken our lead paragraph hoisting logic. The first thing in the content view on Minerva should always be the lead paragraph, not the infobox. The logic is handled by LeadParagraphTransform in MobileFrontend. Parsoid incorrectly places the infobox before the leading paragraph.

How are you inserting your table of contents? It might be as simple as using a different hook to insert that HTML. You'll want to use a hook that runs after the parser has parsed wikitext and after MobileFrontend has done its transformations. Let me know how I can help.

I think you are using https://www.mediawiki.org/wiki/Manual:Hooks/ArticleViewHeader.
This hook is called before the parser cache is about to be tried for article viewing so is dangerous for an experiment since the result can be cached. Using OutputPageParserOutput or OutputPageBeforeHTML is likely better if you can.

The open ToC menu doesn't work in dark mode and has hard-coded colours.

Confirming that the table of contents works in light and dark mode

Screenshot 2026-02-12 at 8.53.29 PM.png (1×750 px, 142 KB)
Screenshot 2026-02-12 at 8.52.56 PM.png (1×748 px, 135 KB)

Resolving this task because everything else has been resolved or moved to another task.