Finding a text in the page

[mlajtos]

Motivation

Finding specific text in the page is a must-have feature. Without it, one can't use Mosaic on a daily basis, hence can't take advantage of the tiling in every situation.

Design

Proposal A

Search bar for a specific text in a page can be integrated into the omnibar. !bangs are an extremely good abstraction for the search queries, and searching text in a page fits this category. Having a !page or !inpage pseudo bang would trigger a special mode for omnibar (or toolbar) that would add necessary buttons (previous match, next match).

Proposal B

Copy and refine existing design from prior art.

Prior art

Firefox

Searchbar takes full width of the view below the website.

(source: https://techdows.com/2016/09/disable-firefox-find-bar-page-dimming-highlight-all-features.html)

Safari

Search bar takes full width of the view and pushes the website down.

(source: https://browserhow.com/how-to-search-text-and-find-on-page-in-safari-mac/)

Chrome

Search bar is compact and floating above the page.

(source: https://rocketfiles.com/articles/how-to-search-for-a-word-on-a-web-page-chrome)

Vivaldi

Search bar takes whole width of the view and is aligned to the center.

(source: https://rocketfiles.com/articles/how-to-search-for-a-word-on-a-web-page-chrome)

Relevant documentation

• event found-in-page
• method findInPage
• method stopFindInPage

[marc2332]

I am working on this in https://github.com/marc2332/mosaic.

So far:

• Ctrl+F opens a floating search box ( that's my design, it can be obviously discussed)
• Esc closes it
• The floating box has a input where you can write and a button to close next to it

Result:

Ideas:

• Add an option to search Up/Down
• Add an option to toggle case sensitive

Note: I have never used recoil, but I am trying my best 👍🏻

[michalklempa]

May I suggest some key binding to 'jump to next search result' and 'jump to previous?', what are the usual bindings on these (not n and N as in less :D)

[marc2332]

Yep!

In Firefox these shortcuts are (pretty bad in my opinion): Ctrl+G -> Next result Shift F3 -> Previous result

I would definitely use ones more friendly, specially for the 'previous' one. And also add some Up and Down arrows to do the same

[mlajtos]

Hey @marc2332,

I tried your Find in Page implementation and it works quite okay. Go ahead and make a PR.

Don't worry about Recoil.js, I jumped on it because I wanted to try out something new, so we are in the same boat being beginners. 🙂 So far I can see it has shortcomings (especially for this project 😅), but I hope they will be worked out as we go further.

About keybindings – I use Enter for next and Shift-Enter for previous. These only makes sense. At least for me.

Btw nice touch adding animation. 🙂

[marc2332]

The PR is https://github.com/mlajtos/mosaic/pull/12 Feel free to review it ^^

[mlajtos]

Fixed by #14