Page MenuHomePhabricator

Switch to header-first DOM
Closed, ResolvedPublic8 Estimated Story Points

Description

Following on from @nray's analysis in T260412#6419741 we will switch to a header-first DOM
We will tie the move to the existing $wgVectorIsSearchInHeader feature flag. This means that the rollout of the DOM changes will not impact cached HTML.

As part of this change, the jump links also change:

  • "Jump to navigation" and "Jump to search" links were removed with the reasoning that the navigation/search was now placed first/early in the DOM order making these links no longer necessary.
  • "Jump to content" was added so that users can skip the navigation and jump to the content.

Acceptance criteria

  • When VectorIsSearchInHeader is enabled, a header-first DOM will be used
  • When VectorIsSearchInHeader is disabled, the existing DOM will be used
  • All CSS required by the existing layout that is not needed by the new layout will be tied to the body class skin-vector-search-header-legacy which is currently used on all pages.
  • All CSS required by the new DOM based layout that is not needed by the new layout will be tied to the new body class skin-vector-search-header which will only appear when we enable the feature flag
  • On first deploy, VectorIsSearchInHeader feature flag should be disabled so that the new CSS gets cached before DOM changes. When new CSS is cached, the feature flag can then be enabled.--false is the default.

QA

  • A developer should verify that the HTML layout when $wgVectorIsSearchInHeader = false is not changed by the patch that introduces the header-first DOM
  • No difference in legacy mode.
  • #mw-page-base is gone. This is intended.

Sign off

  • With this change, the sidebar is planned to be moved out of the header and into the .mw-workspace-container. One negative side effect of this change is that users will no longer be able to tab from the sidebar button into the sidebar without us using JavaScript. Create a task for implementing the ability to tab from the sidebar button into the sidebar -- See T262872.

Related Objects

StatusSubtypeAssignedTask
ResolvedGoalovasileva
ResolvedJdlrobson
Resolvedovasileva
ResolvedSpikeovasileva
ResolvedSpikephuedx
Resolvedovasileva
ResolvedSpikeVolker_E
ResolvedSpikeovasileva
Resolvedovasileva
ResolvedBUG REPORTmatmarex
Resolvedovasileva
ResolvedJdlrobson
Resolvedphuedx
Resolvednray
ResolvedMayakp.wiki
ResolvedMayakp.wiki
Stalledovasileva
OpenNone
ResolvedEdtadros
OpenNone
OpenNone
Resolvedovasileva
Resolvednray
OpenNone

Event Timeline

nray updated the task description. (Show Details)
nray updated the task description. (Show Details)

Change 626008 had a related patch set uploaded (by Nray; owner: Nray):
[mediawiki/skins/Vector@master] Switch to navigation-first DOM order under $wgVectorIsSearchInHeader feature flag

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

Update on this task as I'm leaving on vacation tomorrow (and come back next Monday the 14th):

I think the above patch is most of the way there if not entirely complete. It reorders the DOM, and I think fulfills the goals of this task. I haven't noticed any regressions with any mode yet. Having said that, I wouldn't be surprised if some more tweaks were discovered/could be made. If anyone wants to tweak it some more while I'm out, please feel free to! /cc @Jdlrobson @ovasileva

We'll have two milestones where we need to take two challenges, accessibility and performance, into focus.
Rollout wikis:

  1. Testwiki
  2. OfficeWiki
  3. When Design is good and HTML is pretty stable: Hebrew, Farsi, French. This is when accessibility consulting and maybe volunteer outreach needs to come in for testing.
  4. Further wikis

Performance comparisons and staying within our baselines and not causing negative rendering impacts, discussed in T240489 (T240489#6434019 specifically), should be follow along the way. Yet, 3. and 4. will be crucial for it.

Change 626008 merged by jenkins-bot:
[mediawiki/skins/Vector@master] Switch to navigation-first DOM order under $wgVectorIsSearchInHeader feature flag

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

@Jdlrobson @nray I'd suggest adding an additional body class aside of skin-vector-search-header-legacy to separate concerns in code better.

@Jdlrobson @nray I'd suggest adding an additional body class aside of skin-vector-search-header-legacy to separate concerns in code better.

There is - the class is skin-vector-search-header and is not additional but a replacement class meaning it's very easy to determine which mode is being rendered. The search in header and DOM order changes are pretty tied to each other at this point and enabled in the same way.

nray removed nray as the assignee of this task.Sep 14 2020, 4:55 PM
Niedzielski updated the task description. (Show Details)
Niedzielski added a subscriber: Niedzielski.

Everything looks good to me @nray, can you tell me if #mw-page-base is expected to be missing? Also, who is the best person to write the mw-workspace-container task mentioned in sign-off?

@Niedzielski the removal of mw-page-base was intentional. It used to push down the content with its height, but now that the absolute positioning is removed from most of the elements, it serves no logical function. If we kept it in the DOM it would be an empty div without any styles.

Thanks for reminding me about the sign-off task - I created a spike task at T262872 to cover that so I think we are good there.

Niedzielski updated the task description. (Show Details)

@nray, thank you 👍