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

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.

Details

	Subject	Repo	Branch	Lines +/-
	Switch to navigation-first DOM order under `$wgVectorIsSearchInHeader` feature flag	mediawiki/skins/Vector	master	+131 -107

Customize query in gerrit

Related Objects
Search...

Status	Subtype	Assigned	Task
Resolved	Goal	ovasileva	T242131 [GOAL] Deploy new header to at least one test wiki
Resolved		Jdlrobson	T240856 [EPIC] New header for desktop improvements project
Resolved		ovasileva	T236176 [EPIC] Build opt-in/opt-out mechanism for desktop improvements project
Resolved	Spike	ovasileva	T237561 [SPIKE 10hrs] Investigate how skin suboptions can be presented in Special:Preferences
Resolved	Spike	phuedx	T237635 [SPIKE] What should feature management look like in desktop improvements?
Resolved		ovasileva	T237636 [SPIKE 10hrs] Build new header within the Vector skin
Resolved	Spike	Volker_E	T240489 [Epic] Determine the optimum Vector DOM structure for a11y and performance
Resolved	Spike	ovasileva	T242419 [SPIKE] Instrument opt-in/opt-out mechanism for desktop improvements project
Resolved		ovasileva	T242381 Add a Vector skin version preference
Resolved	BUG REPORT	matmarex	T245793 [Firefox 73] Infusing a RadioOptionWidget changes first-child alignment
Resolved		ovasileva	T243281 Build opt-out link for logged-in users with new vector on
Resolved		Jdlrobson	T245456 [Dev] Adopt template partials in Vector and revise sidebar component
Resolved		phuedx	T113095 A cached server-side HTML template should update when you change a partial template which it includes
Resolved		• nray	T250093 Add title attribute to opt-out link
Resolved		Mayakp.wiki	T243071 Update PrefUpdate schema to include edit count
Resolved		Mayakp.wiki	T246028 Data QA for Editcount on PrefUpdate schema
Stalled		ovasileva	T242835 RFC: Standard method for feature-management in skins/extensions
Declined		None	T249918 Desktop Improvements opt-out takes multiple user actions and network roundtrips
Resolved		Edtadros	T248644 Cannot link to subsections on Special:Preferences
Invalid		None	T251405 Change description of desktop improvements opt-in preference
Declined		None	T260570 Improve opt-out functionality in sidebar
Resolved		ovasileva	T262207 Deploy new search location and DOM order to officewiki and testwiki
Resolved		• nray	T261802 Switch to header-first DOM
Resolved		ovasileva	T265993 Heading structure & ordering in (new) DOM structure

Event Timeline

Jdlrobson created this task.Sep 1 2020, 10:34 PM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptSep 1 2020, 10:34 PM

Jdlrobson triaged this task as High priority.Sep 1 2020, 10:34 PM

Jdlrobson mentioned this in T260412: [Spike 10hrs] Determine steps necessary for switch to header-first DOM.

Jdlrobson added a project: Web-Team-Backlog (Kanbanana-FY-2020-21).

Jdlrobson moved this task from Needs Analysis to Upcoming on the Web-Team-Backlog (Kanbanana-FY-2020-21) board.

Mainframe98 subscribed.Sep 2 2020, 5:27 AM

ovasileva set the point value for this task to 8.Sep 3 2020, 6:04 PM

ovasileva moved this task from Upcoming to Ready for Development on the Web-Team-Backlog (Kanbanana-FY-2020-21) board.

• nray updated the task description. (Show Details)Sep 3 2020, 6:44 PM

• nray updated the task description. (Show Details)

• nray updated the task description. (Show Details)Sep 3 2020, 8:22 PM

ovasileva mentioned this in T262207: Deploy new search location and DOM order to officewiki and testwiki.Sep 7 2020, 1:49 PM

ovasileva added a parent task: T262207: Deploy new search location and DOM order to officewiki and testwiki.

• nray claimed this task.Sep 7 2020, 4:32 PM

• nray moved this task from Ready for Development to Doing on the Web-Team-Backlog (Kanbanana-FY-2020-21) board.

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

gerritbot added a project: Patch-For-Review.Sep 8 2020, 11:31 PM

• nray moved this task from Doing to Code Review on the Web-Team-Backlog (Kanbanana-FY-2020-21) board.Sep 9 2020, 1:32 AM

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:

Testwiki
OfficeWiki
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.
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.

Jdlrobson moved this task from Code Review to Ready for Signoff on the Web-Team-Backlog (Kanbanana-FY-2020-21) board.Sep 9 2020, 6:45 PM

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

Maintenance_bot removed a project: Patch-For-Review.Sep 9 2020, 7:10 PM

ReleaseTaggerBot added a project: MW-1.36-notes (1.36.0-wmf.9; 2020-09-15).Sep 9 2020, 8:00 PM

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

In T261802#6458968, @Volker_E wrote:

@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 claimed this task.Sep 14 2020, 5:06 PM

• Niedzielski updated the task description. (Show Details)Sep 14 2020, 8:14 PM

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?

• nray mentioned this in T262872: [Spike] Determine best approach for focusing from the sidebar button into the sidebar .Sep 14 2020, 10:38 PM

@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.