Improved UI/UX of find bar

[paanvaannd]

Simply a request for cleaning up the find dialog popup! As mentioned of the bookmark popup in issue #2894, the find dialog has an unfinished look to it.

I am using Brave on a Mac (running macOS Sierra Beta 4), so I am not sure if this looks the same on other operating systems as well. However, I have noticed that the dialog is a more muted shade of gray than the rest of the interface and its blockines and sharp edges clash with the rounded corners of the rest of the interface as well. I believe that a dialog that is i) not transparent ii) has the same shade as the rest of the interface and iii) has rounded edges like the rest of the interface would give it a much cleaner look than what it currently has.

Furthermore, it would be nice to dismiss the dialog through the same keyboard shortcut used to summon it.

e: proposed labels [design] and [suggestion]

[bbondy]

@bradleyrichter I think you might have a design for this.

[jfgoncalves]

Also that would be nice to add a count to the search results, like 2/23, 3/23 etc. and highlight the line on the right column with the same orange used for highlighting the current result, that way we know where we are on the page.

[bradleyrichter]

Let me know what you guys think of this approach:

Normal View for light colored tabs and if tab-theme-color is OFF.

If tab theme color is enabled, and if color is darker than a set threshold:

CC @bbondy

[paanvaannd]

@bradleyrichter @bbondy Woah! That design looks slick; I would really appreciate seeing that incorporated as the new look for the find dialog.

[jfgoncalves]

This is great. On your second screen, having two ways to close the search dialog (the cross on the left and the close button on the right) might be confusing in the long run, and I think the dialog needs to be separated from the page (to make sure the dialog does not look like a part of the page), with a line or a shadow but apart from that I think it's a nice improvement.

[bbondy]

@diracdeltas previously noted that you could sometimes trick users by making a webpage that rendered one of our components at the top of their content, and the user would think it was browser chrome. It's not super serious in terms of the find dialog, but still I guess you could trick users into thinking what you are typing won't be passed to the page. As a policy we might want to keep everything above the tab bar. I like using the theme color more though. Thoughts Yan?

[diracdeltas]

i think that concern is not super important here since all the functionality is already doable by the page. as bbondy mentioned, the worst case is making the user think that our search functionality is broken

[bbondy]

there is one difference in that the user thinks what he is typing in the find bar is private to him/her and not shared with the page. But it's not a big thing. Still, maybe better to avoid?

[paanvaannd]

As @jfgoncalves suggests, why not add a vertical indicator on the scrollbar to show where within a page highlighted terms are located as well as the current result's location, as Vivaldi does (refer to boxed area over the scroll bar in the screenshot below)?

That way, if the yellow strips show up after a search term is entered, the user would know that it is actually the browser's search function and not the website itself. I would presume that websites can't overlay anything onto the scrollbars, can they?

That being said, this would allow the users to check that source of the find bar only after they enter something in the search field. Perhaps retaining the transparency along the bar instead of making it entirely opaque may help indicate that it's the browser and not the site before users enter search terms?

e: Or, if you go with above the tab, you could merge the find bar with the tab so that i) the user knows that the find bar is from the browser and ii) the page's theme could be used for the find bar as well for a more unified look.

What I mean by merging the bar and tab is having the active tab look like a bridge between the web page and the find bar above the tabs. To prevent the bridge from being spaced out too much, perhaps situate the tab set indicators above the find bar, if present, so that the layout might look like so (without the strokes around each element, which I added just for ease of reference):

[bradleyrichter]

The find bar does appear when they ask for it by hitting Command + F. Still potentially spoofable but unlikely.

I do think it looks better/more organized below the tabs bar but as @paanvaannd sketched out, this would be the next best thing when the tab theme color is used.

Scroll stripes are already implemented in the latest build so that helps with spoofing.

And, I will omit the left side close button as @jfgoncalves noted.

Thanks for the feedback everyone!

[bbondy]

Yan says we're ok to use the original so let's go with that.

[bradleyrichter]

quick spec/definition of the "final" UI elements

Let's do the "fits all" version first and then attempt to add a style-swap that works for the color-themed tabs later.

(It needs a matching BG color (or clear) in all elements with text and border colors changing to white at a given threshold of the BG value.)

[jkup]

@bradleyrichter What happens to the "Match case" with this new design?

[bradleyrichter]

@jkup I updated the spec image above. tx...

[jkup]

@bradleyrichter I'm not seeing the new image? Also I created #3245 to track the creation/implementation of the "recent searches" feature.

[bradleyrichter]

weird. It failed to update. Here is a new paste:

[bbondy]

Moving this up to the next milestone.