Fenix: [Meta] Manually add a search engine

[vesta0]

User Story

As a user, I want to be able to add and use a custom search engine other than the ones provided by the browser, so I can have more options and choice.

Acceptance Criteria

• I can add a custom search engine in Fenix
• I can remove a custom search engine from my list of search engines
• I can see my custom added engine in the list of search shortcuts

For now, we should do the eng:ready version from Focus.

UX Mocks here: https://miro.com/app/board/o9J_kwAuqu4=/

What we're not doing

Coming up with a new user experience - we want to do this in the future, and we'd like UX to think about a better way to handle deleting new engines (without making it confusing being in the same place as bundled engines, like Google).

[liuche]

Might need some AC work, to make search shortcuts work.

Focus is already using the AC search component, so we may just be able to copy that.

[vesta0]

I spoke to mconnor and he doesn't have any concerns with implementing this similar to how it's done in Focus or Fennec.

[lime124]

i'm not sure why the bot moved this out of in design column /cc @sblatz ?

[liuche]

Related: #5884

[brampitoyo]

I’ve diagrammed the user flow of eng:ready design from Focus, and adapted the mockups to suit Fenix visual style and Search Shortcuts feature.

Focus eng:ready reference design
https://github.com/mozilla-mobile/focus-android/issues/961

Fenix user flow and mockups
https://miro.com/app/board/o9J_kwAuqu4=/

For now, I had to make a few adaptations – pending feedback from the Fenix UX team:

• To remove a user-added search engine, the user can simply long-press the item
  
  
  
  • There’s no separate three-dots menu on the top-right corner. Unfortunately, this means that it’s less obvious to select and delete user-added search engines.
  
  
  • Why no three-dots menu? Because Fenix Search settings now does a lot more than search engine selection. A three-dots menu would imply that the actions contained therein would apply to the whole page, but that’s not true.
  
  
• Only user-added search engines may be selected and deleted
  
  
  
  • Bundled search engines cannot be selected or deleted
  
  
  • Because of this, there’s no need for the menu item “Restore default search engines”
  
  

[brampitoyo]

Progress report:

• Late last week, I received feedback from the Fenix UX team
• Earlier today, I walked through the feature with Engineering

There are a lot of notable changes in the user flow and mockups:

• All search engines are now ordered alphabetically, both in Settings and inside Search shortcuts
• Added Predefined search engines (e.g. Ecosia, Startpage). Manual input is of course still possible. Doing this will:
  
  
  
  • Help avoid unnecessary manual input
  
  
  • Solve most search engine requests
  
  
  • Do both of the above, without cluttering the Search shortcuts with too many default items listed at once
  
  

• Added a way to edit self-added search engines
• Added a way to delete search engines, allowing you to add/remove any Search shortcuts item
• If a search engine is predefined, deleting it will re-add it back to the ‘Add search engine’ page. This means that:
  
  
  
  • We no longer need a ‘Restore defaults’ option, simplifying our menu
  
  
  • Any predefined search engine can be re-added in one tap. Go to the ‘Add search engine’ page to do it.
  
  

User flow and mockups are always located here:
https://miro.com/app/board/o9J_kwAuqu4=/

[brampitoyo]

After talking with @boek and @vesta0, I’ve refined the user flow and mockups further:

https://miro.com/app/board/o9J_kwAuqu4=/

And additionally, we’ve decided on an initial set of predefined search engines to include:

• Ecosia
• Reddit
• Startpage
• Yahoo
• YouTube

To reiterate, our aim with these predefined providers is to cover most of the sites that our users request and use – requiring manual entry only in rare, special cases.

With that, this issue is now ready for Engineering to work on.

[madb1lly]

Hi @brampitoyo,
Thanks for sharing the UI mockup. Maybe I've missed it in another issue, but there is a very straightforward workflow for adding a search engine which you've not included, but is working very well in Fennec:

1. Go to search engine's page
2. Select the text input box
3. Long press
4. Press on "Add search engine"

et voila!

Is this already being worked on in another issue? If not then you should definitely include it in this.

Thanks :)

[liuche]

E5 remaining for this sprint.

[brampitoyo]

Hi @madb1lly. I’ve considered your proposed workflow – which indeed was straightforward – early on in the design process.

It’s just that there are a few problems with it:

1. Not all search input box supports this technology (it’s up to each search engine to do it)
2. On search box that does support it, the user must know that it can be long-pressed (we can help teach users how to do it in Search Settings)

Because of this, adding with long press should be a way we support, but it shouldn’t be the primary/only way. So we chose a more obvious solution as MVP: provide top requested search engines on a list, and put them in a place that user expects (under Settings) with no special gesture required.

Would you help us to file another issue for adding with long press? Our team will then be able to triage it. Thanks!

[madb1lly]

Hi @brampitoyo, I agree that long-press on the search box should not the only method of adding a search engine. I created new issue #6315 for this feature as you requested.
Cheers :)

[liuche]

Replacing the "note" with this. I'll keep the E13, I'm not sure what that was for, but the note was labeled E5 so I'll...add that too.

[serovar]

I just tried this feature on the latest Nightly (build #13300629), but it does not work when %s has to be added right after a / (e.g. https://www.thefreedictionary.com/%s), giving the error Error connecting to "%s". This kind of searches does work on Fennec (where, on a side note, they also have a proper favicon instead of a letter placeholder).

[softvision-miralobontiu]

I've tested on the latest Nightly build from 11/28 with Google Pixel (Android Q), and Samsung Galaxy Tab S3 (Android 8).
The user can:

• add a custom search engine in Fenix,
• remove a custom search engine from the list of search engines,
• remove the selected search engine,
• see the custom added engine in the list of search shortcuts,
• see the initial set of predefined search engines which includes: Ecosia, Reddit, Startpage, Yahoo, and YouTube.

I will remove the "qa-needed" label until the issues blocking this Meta are fixed/closed:
#6847
#6848
#6849
#6851

[Etua]

@brampitoyo I suggest adding Qwant as one of the presets not necessarily for France only.