Page MenuHomePhabricator

[Epic] Build the new Vue.js search experience
Closed, ResolvedPublic

Description

This (currently placeholder) Epic captures, given more or less all the tools needed, building the new search experience.

Acceptance Criteria

  • Drop down results are suggested and updated on user input.
  • Results must include: page name, image (if available), Wikidata description (if available), and access to search results page.
  • If a user presses enter or taps the "search pages containing..." result, Special:Search is shown.
  • Vue.js lessons learned are documented.
  • If any shareable components (e.g., buttons) are made as part of this work, they're shareable (or a task is written to make them shareable).
  • Results must include an intelligent loading state (e.g., show placeholder cards when content is loading).
  • Search is featurized so that its deployment is distinct from Desktop Improvements.
  • Don't break UniversalLanguageSelector input tools (note: mw.config.get( 'wgULSImeSelectors' ))
    image.png (1×1 px, 604 KB)

Open questions

  • What is the minimal catalog of components needed to build the new search experience?
    • Layout changes: Header
    • Components: Search form, Input, Button, LanguageSwitcher, Menu/List, SearchResults, Dropdown, LanguageMenu
    • Mixin: Icons, Thumbnails...?
    • This will helps us tighten the scope of the project rather trying to build a complete component library out the gate.
  • What to do with the existing search widget on Special:Search?
  • Do we want a more button-like presentation for "search pages containing" or should it look like a result as it does in the mock?
  • Do we need to provide an API for DWIM or will this be covered by Core API? We don't want to break it. We can flip between the new and old APIs using skin version if necessary.
  • What JavaScript API should we use to throttle queries made after each key input? Is jquery.throttle-debounce the most practical option?
  • Does the random link in the sidebar need to be moved? What about no-JS?

References

Related Objects

StatusSubtypeAssignedTask
OpenNone
Resolvedovasileva
ResolvedVolker_E
Resolvedphuedx
Resolved eprodromou
ResolvedEvanProdromou
ResolvedPeter.ovchyn
ResolvedPeter.ovchyn
ResolvedPeter.ovchyn
Resolved eprodromou
ResolvedPeter.ovchyn
Resolveddaniel
Resolveddaniel
Resolveddaniel
Resolvedholger.knust
Resolvedholger.knust
Resolvedholger.knust
OpenNone
OpenNone
OpenNone
ResolvedSpikeovasileva
Resolvedphuedx
ResolvedJdrewniak
Resolvedalexhollender
Resolvedovasileva
ResolvedJdlrobson
ResolvedJdrewniak
ResolvedJdrewniak
ResolvedNiedzielski
ResolvedVolker_E
ResolvedMNeisler
ResolvedMNeisler
Resolvedovasileva
Resolvedphuedx
Resolvedovasileva
Resolvedovasileva
Openovasileva
Resolvedovasileva
Resolvedovasileva
Resolvednray
OpenNone
Resolvedovasileva
ResolvedVolker_E
OpenNone
OpenNone

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes
Niedzielski renamed this task from [Epic] Build the new search experience to [Epic] Build the new Vue.js search experience.Apr 5 2020, 4:23 PM

Change 593881 had a related patch set uploaded (by Niedzielski; owner: Stephen Niedzielski):
[mediawiki/skins/Vector@master] [dev][JavaScript] allow clients to be version

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

Change 593881 abandoned by Niedzielski:
[dev][JavaScript] allow clients to be versioned

Reason:
Thanks for the comments all. I'm going to try a different approach for now.

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

  • Are we starting with the base components (Button, Input, ...) from ContentTranslation? Is the approach to styling acceptable? If not, why and what can we reuse? /cc @santhosh @Volker_E @Jdrewniak @holger.knust

Component baseline decision moved to T253933. See also related styling baseline in T253953.

Jdlrobson added a subscriber: Jdlrobson.

Alex what you see on https://patchdemo.wmflabs.org/wikis/c50ab4287a5dd7dfd60ef612b0ee8f87/w/index.php/Main_Page is now what's going to be shipped, so now would be a good time to begin design review the search experience using that URL.

Already mentioned in chat with peers, we need to ensure right base font-size to have component rendered in correct dimension.

@Jdlrobson super exciting! It's looking great. Here's what I've got so far:

Input box

Layout

image.png (182×663 px, 18 KB)

Current issues:

  • height of input box should be 32px
  • font-size for placeholder & input text should be 14px
  • search icon is slightly too large
  • search icon right & left padding doesn't match spec
  • placeholder text should say "Search Wikipedia"
  • remove invisible button at the end of the input box
    Screen Shot 2020-12-10 at 1.14.35 PM.png (134×760 px, 29 KB)
Interactivity

Hover state

correctcurrent
hover
image.png (73×500 px, 6 KB)
image.png (94×505 px, 13 KB)
hover (after having focused the input field)(same as above)
image.png (97×472 px, 12 KB)

Current issues:

  • the search button is not showing when hovering (before having focused the field)
  • the search box gets less wide after it has been focused
  • upon hover (after having focused) the search button appears "outside" of the box rather than inside

Active & focus states

The initial transition into the active/hover state has some slight issues. I suspect this is due to with swapping the Vue component in. Going frame-by-frame here are the issues I'm seeing:

frame #screenshotissue(s)
1
image.png (57×509 px, 15 KB)
2
image.png (57×509 px, 16 KB)
input text shifts right by ~5px, end of input text gets clipped slightly, search button doesn't appear immediately
3
image.png (57×509 px, 15 KB)
blue border goes away
4
image.png (57×509 px, 16 KB)

Final state:

correct
image.png (54×524 px, 5 KB)
current
image.png (70×521 px, 8 KB)

Current issues:

  • too much spacing around the icon
  • icon opacity should switch to 1
  • there seems to be a slight delay in the border/outline thickening, please reference OOUI demo (link)

Search button

Current issues:

  • font-size should be 14px

Results list

Layout

image.png (662×827 px, 129 KB)

Current issues:

  • image thumbnails are too large (41x41px), should be 36x36px
  • rows are too tall (57px), should be 54px -- I think this will resolve itself when we reduce the size of the image thumbnails
Interactivity

Current issues

  • remove text underlines when hovering a row
"Search for pages containing"

Current issues

  • hover highlight color should be gray (same as other rows)
  • text should say "Search for pages containing [x]", currently it says "containing [x]"

Change 647799 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/core@master] i18n: The translation for the search within pages will change

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

Change 647799 merged by jenkins-bot:
[mediawiki/core@master] i18n: The translation for the search within pages will change

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

Fjalapeno added a subscriber: Fjalapeno.

Added this the new Tech Forum tag to mark the progress of the Vue Task Force in the decision making process (if any ticket drivers would rather associate this with a different task, please do so!)

Just a note: The Vue short term decision is on the final step of the process, publication. This was blocked on the Tech Forum being officially kicked off. We are making the place on Wiki for this and will update the ticket when this exist!

The remainign subtasks that are open concern the API and I think should be considered separately. I think this ticket should be resolved.

ovasileva added a subscriber: ovasileva.

@Volker_E - resolving this for right now to make space on the board. Feel free to add any thoughts and re-open if necessary when you have time for a review.

Volker_E updated the task description. (Show Details)

Resolving, new vue is live on all desktop imrovements pilot wiks

I am guessing Volker reopened because some of the acceptancr criteria are unticked items

That said it looks like the unticked items in acceptance criteria either look like they can be ticked, are done, or are missing a task meaning they might not be relevant.

I suggest the creation of a new goal card tracking any remaining/descoped work.