Focus-android: Find in page

[bbinto]

_Added by @bbinto_

Why/User Benefit

• User can find more quickly what they are looking for on a website
• User have communicate they'd like this feature

What

• "Find in page" functionality

Acceptance Criteria (how do I know when I’m done?)

• User can find and access "find in page" functionality
• Probe that tracks how often and by how many users this feature is being triggered

---

Especially useful if you set Focus as your default on Android.

I haven't confirmed this doesn't exist on iOS.

[antlam]

Can confirm, this doesn't exist on Firefox Focus for iOS.

[briankung]

Ah, I meant to post here and not in iOS, but yes, I would really like this feature!

[antlam]

@bbinto I'm going to move this to Granite* since Folly is a non-UX release and already has "What's New?"

Let me know if you disagree! happy to discuss more when you're back :)

[TPS]

A little confused by all the label-changing ↑: Is this _planned_ or just _considering_?

[antlam]

@TPS not to worry, the labels are more for our team to co-ordinate the work necessary for a release.

ATM, this feature is being planned for our Granite release milestone. But as it is with software development, that could still change.

[vext01]

I find myself having to open the full firefox app all the time, just to search for a string in the page.

[brampitoyo]

Assigning this issue to myself so it’s present on my to-do list.

[brampitoyo]

TL;DR – our approach is sound because it doesn’t obscure the URL bar, but our styling has to match Photon Design System (previous/next arrow icons) and has some issues (text alignment).

Here are the find in page UIs of various Android browsers. Have a look!

Firefox

Chrome

Opera

Samsung Internet

UC

Yandex

Dolphin

Puffin

CM Browser

APUS

[brampitoyo]

Here’s my first attempt at desining a find in page UI. It’s what Fennec’s UI would’ve looked like if it was Photonised:

I’m still trying to think of the right colour combination to use.

Currently, Firefox for desktop uses cyan for highlighted text, and magenta for the other highlights. Fennec uses a more muted shade of cyan and no colour for the other highlights. We’ll need to pick a colour from the Photon palette, and make sure that it plays well with the website, no matter what colour it’s displayed on.

[bbinto]

I assume (no pressure) UX is not finalized yet, correct? @brampitoyo

[brampitoyo]

Not finished, but nearly there!

I still need to think about:

• Entry point (ie. order of placement in the menu)
• Visual design (ie. how much does it need to match vs. differ from Fennec?)

[brampitoyo]

@aminalhazwani had designed something really usable and good-looking, that we can apply to Focus (and will eventually be applied to Fennec one day).

1. Find in page is a menu item. Note the placement: above “Request desktop site”.
2. We switch to a flat-looking text box for the find bar. This makes it consistent with the Fennec’s URL bar.
   
   
   
   • What about low affordance? The flashing blue cursor gives the user a very strong that the text is editable.
   
   
   • Suddenly, the design of our URL bar looks outdated, so it will be updated. I’m thinking of rolling out a bunch of design changes that will make us align closer to Fennec and Photon Design System. That’s coming soon.
   
   
3. Press down to find the next occurrence of the phrase, and the keyboard will slide down to make room for more content.
4. All matching phrase is coloured cyan-50. The currently highlighted phrase is coloured yellow-50.

Spec

[brampitoyo]

The UX is now finalised and ready for Engineering breakdown.

[boek]

Focus

• [x] Menu Item to toggle find in page (s) (#2625)
• [x] Find in page UI (above keyboard) (m) (#2626)
• [x] Connect UI to WebView APIs (m)

Component

• [ ] ~JavaScript to find, highlight and jump to search query (m) (mozilla-mobile/android-components#192)~
• [ ] ~Communication layer between Kotlin and JavaScript (m) (mozilla-mobile/android-components#192)~

[pocmo]

@boek WebView has APIs for find-in-page. You will not need to write JavaScript :)

• https://developer.android.com/reference/android/webkit/WebView.html#findAllAsync(java.lang.String)
• https://developer.android.com/reference/android/webkit/WebView#setFindListener(android.webkit.WebView.FindListener)
• https://developer.android.com/reference/android/webkit/WebView.FindListener

[bbinto]

Given that exciting news, @boek any updates/revisions on the T-shirt size?

[boek]

@bbinto This is still a large, was able to combine the two M's into one though :)

[bbinto]

@boek - thanks. So should this be moved (and achievable) to be worked on in 6.0 sprint or 5.2?

[boek]

@bbinto 6.0 sounds good. I have a few of the breakdown tickets that I’ve put into 5.2 and completed. I might get this done in 5.2 but I have a few other tickets I need to finish up first

[TPS]

What version should we expect this?

& thanks very much, @all. :bow:

[boek]

@TPS 6.0 (the next release) 😊

[TPS]

I hoped perhaps if a 5.× release was scheduled, it'd make that, but if 6.0 is next, I hope to use a β pretty soon. I wouldn't _need_ anything else from this. 😁