Page MenuHomePhabricator

Sticky header search component shifts position when search is toggled
Closed, ResolvedPublic3 Estimated Story Points

Description

Currently, the search component in the sticky header noticeably shifts its position when

  1. Clicking on the search icon toggle in the sticky header to show the search input
  2. Clicking outside of the search input to hide it again

Both of these can be observed on https://en.wikipedia.beta.wmflabs.org/wiki/Dog?vectorstickyheader=1&useskinversion=2:

Screen_Recording_2021-12-09_at_4.12.44_PM.mov.gif (384×868 px, 175 KB)

Developer notes

There are two different causes of the shifts and therefore two different solutions are needed:

  1. In T296318, margin styles were introduced and applied to the WVUI search component but not to the search box that is present before WVUI loads and that WVUI replaces. Therefore, the search component experiences a margin shift when WVUI loads.

https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/745590 should address this problem and should also eliminate the shifts in position that occur when the search toggle is clicked. Note, this won't address the shift that occurs when the input loses focus (problem #2), but is required to eliminate one of the two causes for the shifts.

https://patchdemo.wmflabs.org/wikis/2e2d968398/wiki/Tree?useskinversion=2&vectorstickyheader=1

  1. When thumbnails are enabled, the WVUI search component expands when the input is focused to accommodate the thumbnails and contracts when the input loses focus to save space:
$wgVectorWvuiSearchOptions = [
	"showThumbnail" => true
];

This can cause a shift both when the search toggle is clicked and when the search input loses focus (which will need a patch in both WVUI and Vector).

When the search toggle is clicked, it is possible for the input to be painted before or after the input is focused and therefore appear in its expanded or contracted state:

paint-before.png (357×2 px, 79 KB)

paint-after.png (446×1 px, 91 KB)

https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/745590 uses requestAnimationFrame to ensure the input is painted in its focused state.

To fix the shift that occurs when the input loses focus, work is needed in WVUI. Ideally, the WVUI typeahead search component would accept a prop (e.g. :autoexpand=false) to turn off the expanding behavior for usages like the sticky header where it isn't needed. Instead, it would always be in its expanded state if thumbnails were enabled and its expanding behavior was disabled regardless of its focus state.

Testing Environment for QA

  1. Visit https://en.wikipedia.beta.wmflabs.org/wiki/Dog?vectorstickyheader=1&useskinversion=2:
  2. Click the search toggle icon (magnifying glass) to show the search input. The magnifying glass icon/search input should not shift its position.
  3. Click outside of the search input to hide it. The search input should become hidden but it should not shift its position. The magnifying glass icon should not shift positions

Acceptance Criteria

  • The sticky header's search input should not shift its position when clicking on the search icon or when clicking outside of the search input. QA steps should pass

QA Results - Beta

ACStatusDetails
1T297531#7635097
2T297531#7635097

QA Results - Prod

ACStatusDetails
1T297531#7635171
2T297531#7635171

Event Timeline

nray removed nray as the assignee of this task.
nray updated the task description. (Show Details)

Change 745590 had a related patch set uploaded (by Nray; author: Nray):

[mediawiki/skins/Vector@master] Reduce layout shift when toggling sticky header search

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

Change 747931 had a related patch set uploaded (by Nray; author: Nray):

[mediawiki/skins/Vector@master] Add auto-expand-width prop to search component

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

Change 747932 had a related patch set uploaded (by Nray; author: Nray):

[wvui@master] Refactor input expand

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

Change 745590 abandoned by Nray:

[mediawiki/skins/Vector@master] Reduce layout shift when toggling sticky header search

Reason:

merged into I194a97805b10906eb97d2c4fc29b4d7993d085dd

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

Change 745590 restored by Nray:

[mediawiki/skins/Vector@master] Reduce layout shift when toggling sticky header search

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

Change 745590 abandoned by Nray:

[mediawiki/skins/Vector@master] Reduce layout shift when toggling sticky header search

Reason:

Merged into Id8d3bd4aa74113b91ecaf66cb58cf5625db8a302*

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

Change 748223 had a related patch set uploaded (by Nray; author: Nray):

[mediawiki/skins/Vector@master] Use .vector-search-box-auto-expand-width class to style intermediate search components

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

Change 747932 merged by jenkins-bot:

[wvui@master] [typeahead-search] Refactor expanding width on focus behavior and add `autoExpandWidth` prop

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

Jdlrobson subscribed.

Once https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/747931 is merged this can move to blocked on others and wait on the next release.

nray assigned this task to bwang.

Change 747931 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Refactor search component expand behavior and add auto-expand-width prop to search component

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

This is blocked on the following ordered steps :

  1. Deployment of https://gerrit.wikimedia.org/r/747931 and subsequent caching of the .vector-search-box-auto-expand-width class in anon HTML
  2. Release of WVUI (T298171)

Change 752742 had a related patch set uploaded (by VolkerE; author: Catrope):

[mediawiki/core@master] Update WVUI to 0.3.5

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

Change 752742 merged by jenkins-bot:

[mediawiki/core@master] Update WVUI to 0.3.5

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

Change 748223 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Use .vector-search-box-auto-expand-width class to style intermediate search components

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

@alexhollender This is now on beta at https://en.wikipedia.beta.wmflabs.org/wiki/Dog if you want to take a look. It is expected to be deployed next week

@alexhollender This is now on beta at https://en.wikipedia.beta.wmflabs.org/wiki/Dog if you want to take a look. It is expected to be deployed next week

awesome, looks great in beta. you can consider this design reviewed.

Test Result - Beta

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

Test Artifact(s):

QA Steps

Visit https://en.wikipedia.beta.wmflabs.org/wiki/Dog?vectorstickyheader=1&useskinversion=2:
✅ AC1: Click the search toggle icon (magnifying glass) to show the search input. The magnifying glass icon/search input should not shift its position.
✅ AC2: Click outside of the search input to hide it. The search input should become hidden but it should not shift its position. The magnifying glass icon should not shift positions

Screen Recording 2022-01-19 at 3.20.23 PM.mov.gif (290×800 px, 337 KB)

Edtadros subscribed.

Test Result - Prod

Status: ✅ PASS
Environment: cawiki, hewiki
OS: macOS Monterey
Browser: Chrome
Device: MBP
Emulated Device:NA

Test Artifact(s):

QA Steps

Visit https://en.wikipedia.beta.wmflabs.org/wiki/Dog?vectorstickyheader=1&useskinversion=2:
✅ AC1: Click the search toggle icon (magnifying glass) to show the search input. The magnifying glass icon/search input should not shift its position.
✅ AC2: Click outside of the search input to hide it. The search input should become hidden but it should not shift its position. The magnifying glass icon should not shift positions

Screen Recording 2022-01-19 at 3.24.39 PM.mov.gif (290×800 px, 499 KB)

Screen Recording 2022-01-19 at 4.02.57 PM.mov.gif (326×858 px, 428 KB)

Looks good, resolving