Indicate not-found in Find in Page by Color Change

[enyap]

Firefox and Opera indicate a failing Find operation by changing the background color of the search field. This behavior is very helpful because it makes immediately obvious that the search has failed. One can detect the color change with peripheral vision and doesn't have to shift one's gaze up at the search field to learn that the string being sought is not present. It would be nice if Vivaldi took a cue from Firefox and Opera and employed a similar, graphic indication of search failure.

[dude99]

Pardon me resurrect this old request, imho this is not a difficult task to accomplish, i hope this feature will be implemented soon.

Here is my CSS mod:

/* bottom position find bar */
.find-in-page + .devtools-container .webpage {top:0 !important;}
.find-in-page {bottom:1px; border-radius:calc(var(--radius) * 1.4); border:none; max-width:580px; left:0; right:0; margin:auto;}

/* gui improvement */
.find-in-page label {font-size:80%; align-items: center;}
.find-in-page .fip-controls svg {transform:rotate(90deg);}
.find-in-page .fip-close svg {fill:crimson;}

/* compact off-focus find bar */
.active.visible.webpageview .find-in-page:not(:focus-within):not(:hover) {opacity: .5; visibility:hidden;} 
.active.visible.webpageview .find-in-page :is(#fip-input-text, .fip-results) {visibility:visible;}

/* nomatch alert */
@keyframes jump {40%, 60% {transform:translateY(5px);} 50% {transform:translateY(-4px);}}
.find-in-page.fip-nomatches:focus-within { animation: jump .2s steps(2) !important;}
@keyframes nomatch {10%, 50% {background:lightpink; color:maroon;}}
.find-in-page.fip-nomatches:focus-within #fip-input-text { animation: nomatch 3s steps(6) infinite !important;}

It would be nice if i can add alert sound for the first nomatch trigger event, but unfortunately it can only be done by V dev. And i'm sure it will work a lot better if it's build-in.

Thanks.

[Pesala]

@enyap Opera 12.18 indicates it in the same way too.

Found

Not Found

It would be good to have an audible warning on reaching the last search result on the page, before returning to the top.

[dude99]

@Pesala someone did that with a balloon via jscript: https://forum.vivaldi.net/post/177257

[dude99]

@Pesala maybe u can try this mod to make the find bar less annoying: https://forum.vivaldi.net/post/262526

Obviously u need to modify it to fit your specific need. Like remove trigger event :focus-within in off-focus section to make it so that the find bar will ONLY show up when mouseover it, else it would only show a very transparent searchfield.

Then u can also add animation with .find-in-page:not(.fip-nomatches) with opacity:.01 plus delay to hide the find bar after a few seconds.

Personally I don't prefer what you suggested, because it could be confusing when not knowing what 'word' I'm searching after hitting F3 if the search word isn't display, but it's also very annoying when an overhead find bar constantly moving the webpage down after each F3. It's really a bad GUI design which make the overall browser's GUI ecstatic feel too heavy on the top (stacked of horizontal blocks on the top section), causing weighty & stressful emotion if gazing at them for too long.

IMHO moving the find bar to bottom, & shrink it down like my mod would solved most of the problems.

[Pesala]

@dude99 I moved your post here as it would lead the Find Next without showing the toolbar Feature Request off-topic. In Opera 12.18 I don't need to show the toolbar to find again what I know I am searching for. Even with the toolbar at the top, the page content does not jump, which is one reason why I use it instead of Ctrl+F.

If I don't remember what I am searching for, or want to search for something else, then I use Ctrl+F, /, or period to show the toolbar (usually I use / unless I am editing text).

Putting the toolbar at the bottom makes for more mouse travel as the cursor is more often at the top, with the menus, tabs, and URL field at the top. An alternative solution would be to show the toolbar as floating over the page content.

[dude99]

@Pesala said in Indicate not-found in Find in Page by Color Change:

Even with the toolbar at the top, the page content does not jump, which is one reason why I use it instead of Ctrl+F.

An alternative solution would be to show the toolbar as floating over the page content.

Hmm, in that case maybe u should make request for overlay find bar too? It would be easier to solve multiple problems with a solution, no?

Putting the toolbar at the bottom makes for more mouse travel as the cursor is more often at the top, with the menus, tabs, and URL field at the top.

Ah, so that's the motive to move the find bar to the TOP! I never figure out why they did that, thanks for telling me that. Now i know WHY.

But i still prefer bottom position for ecstatic reason. Each to their own, i guess. LOL

[gworboys]

I prefer the find bar at the bottom too (or at least so that it's not constantly moving the page around as the find bar comes and goes) - so thanks for the CSS (I'll upvote that other thread). But I'm not a fan of unnecessary animation, just the colour change is sufficient.

[dude99]

@gworboys In that case simply replace the nomatch alert section with this:

.find-in-page.fip-nomatches:focus-within #fip-input-text { background:lightpink; color:maroon; transition: .1s .1s !important;}

Increased the delay time (2nd .1s) if the color change is triggered too early when u typing the first letter in find bar. I can't test it on other OS other than windows, so u will have to adjust it accordingly.

Thanks for the support.

[Pesala]

If you go to vivaldi://experiments and enable Styled find in page the background will not be dimmed if the search string is not found.

[LonM]

Vivaldi 3.3 Now has extra styling to make this more clear