Page MenuHomePhabricator

Move the existing search to the header in preparation for Vue.js search development
Open, HighPublic8 Estimated Story Points

Description

User story

As a wiki reader or editor, I would like easy access to the search bar, so that I can find the content I am looking for or discover new content

Reasoning

Building the new search experience will take some time and broadly speaking, the work is iterative and never-before-done at the Foundation. For this reason, it makes sense to isolate the risk. This task helps do that by moving the old search experience to the new search bar where it will be ready to iterate on independently of the rest of Desktop Improvements.

Acceptance criteria

  • No new functionality. This is about moving the existing search experience to the new header.
  • Only the style changes needed to ship. Subsequent search work will be feature flagged after this task until the new experience is ready to ship to the test wikis.
  • We will be A/B testing this so a feature flag would be preferable so that we can deploy when the instrumentation is ready
  • The search is hidden in print mode (see T253842)
  • The layout will define a minimum width to clarify which browser displays we can support and avoid display issues on screen widths we currently don't support to avoid problems like T256373

Sign-off criteria

  • Test move menu and determine whether it is still necessary

Design spec

Prototype: https://di-search.web.app/Tangerine

logged-outlogged-in
wider window
narrower window (user links wrap)
below 1095px (or similar)
Alignment details

User link wrapping

One aspect of moving the search bar to the header is dealing with the wrapping of the user links. The current thinking is that the search input will have a min-width, and once the min-width is hit the user links will start wrapping. However we want to avoid the user links wrapping to more than two lines, so either using a breakpoint or some flexbox magic we want to wrap the entire menu at that point. Example of state we want to avoid:

Original design spec task: T249641

Additional prototypes

DEMO latest spec as of May 6
Demo: Search in the middle + new drop-down personal menu (patch 589809, login: "Guest" pass: "guestguest")
Demo: Search on left + old personal menu (patch 585851)

QA steps

The following tests should be done on a variety of browsers, screen sizes, and languages.

  • Basic usability test — type something in, wait for results list to appear, make sure you can a) click on a search result, b) click on the icon, c) press the enter key. All three options should submit the search.
  • Advanced search page – make sure that clicking on the search icon, with nothing entered in the search box, takes you to the advanced search page
  • Alignment check – there are only two positions the search box should ever appear in, depending upon screen size. For larger screens the search box should always be anchored to the right of the logo, approximately 58px apart. As the screen gets smaller the userlinks should start to wrap and stack. At a certain point the links should move below the search box, and the search box should move to the right side of the screen, anchored to the right.
  • Max-width check – the search box should never be wider than 450px
  • Input tools – check that if the input tools setting is on the little keyboard icon/button appears in the bottom corner of the search box
  • Tablet devices – Verify the new header is usable on iPad with portrait mode and not broken - where broken is defined as no overlapping elements

Example of "broken"

Browser list

Spot-check only:
Chrome 85, 84
Firefox 77
Safari 13
Opera 68
Edge 18

QA Results - Beta

Related Objects

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes
Demian added a comment.EditedJul 7 2020, 2:31 AM

As far as I see this should be 2 patches 1) to cleanup Search layout rules and 2) to move the search box.

Splitting would be helpful, I agree.
There is a 3rd part that is missing (also from the .diff): making it responsive as required by the spec.
The 3 steps together add up to the complexity of my patch.

What about feature-flagging?

This should be stalled on the fixed width work though IMO. I can pick this conversation up after that's done.

It's not dependent technically - the areas are distinct -, though from a resource-management perspective it's reasonable to finish the fixed width work and then focus on the search.

Change 610187 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/skins/Vector@master] WIP: Move the personal tools and search into header

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

Jdlrobson updated the task description. (Show Details)Jul 10 2020, 9:38 PM
Jdlrobson updated the task description. (Show Details)

I've put this on the agenda for SHDT on Monday to discuss the two approaches in Aron and my patch. I see no advantage in splitting out the personal tools change from search so I'm also going to make a case for merging T256893 into this task.

Didn't have time to talk about it today, so punted to next week's meeting.

Change 610143 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/skins/Vector@master] [Refactor] Move Searchbox layout rules to layout

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

Change 605304 merged by jenkins-bot:
[mediawiki/skins/Vector@master] Split Searchbox layout styles for legacy and modern

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

I cannot find a way to do this without moving the personal tools as well, and moving them separately seems far riskier, I therefore suggest we merge T256893 into this task.

Change 610143 merged by jenkins-bot:
[mediawiki/skins/Vector@master] [Refactor] Simplify searchbox layout rules

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

Any ETA on this?
Since I have some gadgets (like Twinkle) enabled, my top part is pretty compact now:

Change 619588 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[operations/mediawiki-config@master] Beta cluster: Enable search in header on Vector

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

Change 619588 merged by jenkins-bot:
[operations/mediawiki-config@master] Beta cluster: Enable search in header on Vector

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

Change 610187 merged by jenkins-bot:
[mediawiki/skins/Vector@master] Move the personal tools and search into header

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

I've enabled the first version on the beta cluster https://en.wikipedia.beta.wmflabs.org/ (don't worry it's not going to production yet !)

@alexhollender I want to pull you in at this point to work out all the follow up work required.

Change 602848 abandoned by Jdlrobson:
[mediawiki/skins/Vector@master] [modern] Move Searchbox into Header

Reason:
Done in https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/ /610187

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

Change 619825 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/skins/Vector@master] Vertical baseline of personal tools should match search when in header

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

Nux added a subscriber: Nux.Aug 12 2020, 7:38 PM
Nux added a comment.Aug 12 2020, 7:57 PM

The search bar looks better in this version, but the sidebar toggle looks awkward in this version. The toggle don't seem to be connected with the sidebar in any way. And also the icon ("<<") don't seem like something that you can naturally recognise as a menu thingy.

Also note that If sidebar is opened in the prototype then it takes up even more space then it did in plain Vector. And also right and left margins around the content are not equal (with sidebar opened).

Note that users have custom buttons in the personal area. In practice it will be much worse then in "User link wrapping" section of this task. So it would be better to disconnect search bar from the personal bar. And also collapsing the personal bar (you discussed) is probably a bad idea anyway. Personal bar is traditionally a place to add buttons for tools you want to have on top and visible.

See also another possible layout that solves all this:

Known problem: Bug at 1 1184px width:

Change 620789 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/skins/Vector@master] Search in header: fix break point

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

Change 620794 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/skins/Vector@master] Allow personal tools to span 2 lines

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

Change 620789 merged by jenkins-bot:
[mediawiki/skins/Vector@master] Search in header: fix break point

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

Change 619825 abandoned by Jdlrobson:
[mediawiki/skins/Vector@master] Vertical baseline of personal tools should match search when in header

Reason:
The issue is actually the line-height: 1.16666667;

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

Change 620794 merged by jenkins-bot:
[mediawiki/skins/Vector@master] Allow personal tools to span 2 lines

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

@Jdlrobson nice, definitely getting closer. Two notes:

  1. we want to avoid this state, even if it means starting to wrap the user links prematurely. Currently the links seem to start wrapping when we hit the @media screen and (max-width: 74.75em) breakpoint. Can we increase this so it kicks in sooner (i.e. at a wider width)? I know the number of links in the user menu is variable so this is tricky, but again I'd rather be too early than too late.
    we instead would want this:
  1. once the user links drop beneath the search bar, the search bar should shift over to the right edge of the container

Change 622662 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/skins/Vector@master] Include @padding-horizontal-page-container in header adjustment calculations

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

Jdlrobson added a subscriber: Jdrewniak.

Above patch should fix 1. As for 2, I'm going to have to check in with @Jdrewniak - it might make sense to wait till we're not using absolute positioning.

Update: From what I can see the issue here is that I'm clamping the search to the maximum width per the acceptance criteria and the margin between the space and personal tools.

I can somewhat get the desired effect using justify-content but that also moves the logo:

Personally I'd wait for the absolute positioning changes

Change 622662 merged by jenkins-bot:
[mediawiki/skins/Vector@master] Include @padding-horizontal-page-container in header adjustment calculations

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

Please can you take another look? Note the issue with the search will be dealt with in a follow up task - T261686 - it wasn't as straightforward as I would have liked.

Change 623639 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/skins/Vector@master] Accommodate longer user names in personal tools

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

Change 623645 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/skins/Vector@master] A/B test of search in header for logged in users

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

Change 623639 merged by jenkins-bot:
[mediawiki/skins/Vector@master] Accommodate longer user names in personal tools

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

alexhollender removed alexhollender as the assignee of this task.Wed, Sep 9, 6:04 PM
alexhollender updated the task description. (Show Details)

@ovasileva @Jdlrobson I've added some QA tasks. Please feel free to add others. Also @ovasileva can you add the list of browsers to check?

ovasileva updated the task description. (Show Details)Thu, Sep 10, 11:54 AM

Change 623645 merged by jenkins-bot:
[mediawiki/skins/Vector@master] A/B test of search in header for logged in users

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

Test Result - Beta

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

Test Artifact(s):

QA steps

The following tests should be done on a variety of browsers, screen sizes, and languages.

✅ AC1: Basic usability test — type something in, wait for the results list to appear, make sure you can a) click on a search result, b) click on the icon, c) press the enter key. All three options should submit the search.

✅ AC2: Advanced search page – make sure that clicking on the search icon, with nothing entered in the search box, takes you to the advanced search page

✅ AC3: Alignment check – there are only two positions the search box should ever appear in, depending upon screen size. For larger screens the search box should always be anchored to the right of the logo, approximately 58px apart. As the screen gets smaller the user links should start to wrap and stack. At a certain point, the links should move below the search box, and the search box should move to the right side of the screen, anchored to the right.

✅ AC4: Max-width check – the search box should never be wider than 450px
The search bar reaches the maximum width of 450px when the screen width is narrow and the tools are displayed below the search bar as well as when the page width is very large.

✅ AC5: Input tools – check that if the input tools setting is on the little keyboard icon/button appears in the bottom corner of the search box

✅ AC6: Tablet devices – Verify the new header is usable on iPad with portrait mode and not broken - where broken is defined as no overlapping elements

✅ AC7: Spot Check the following list of browsers:
Chrome 85, 84
Firefox 77
Safari 13
Opera 68
Edge 18

Edtadros updated the task description. (Show Details)Tue, Sep 22, 4:31 PM