[WIP] Improved UI/UX of find bar

[jkup]

• Submitted a ticket for my issue if one did not already exist.
• Used Github auto-closing keywords in the commit message.
• Ran git rebase -i to squash commits if needed.

Fix #3159

cc @bradleyrichter @bbondy

Wanted to put up a work in progress of my ticket so far with a few comments/questions I had.

• I'd love any design feedback, I tried to stick closely to the mocks in Improved UI/UX of find bar #3159
• I have a failing test "urlbar should be selectable if findbar is active" which doesn't fail if I run it by itself, but fails if I run the whole "findbar" suite.
• I still need to implement a custom background color for custom tab colors.
• What should the focus look like on the input? Right now it looks like this:
  

This is how the whole thing looks right now:

[bbondy]

Looking good so far, here's some feedback:

• It looks like the urlbar is being hidden for some reason when the findbar is opened and you switch tabs back and forth
• If you Command+F, do a search, close and then open and find again the match count doesn’t update. For example it will stay at “6 of 7” matches even know it’s going to the next match.
• There needs to be a bit more padding on the left when the finder is focused since the text is blued to the blue border.
• Would be nice to add a css animation when the bar is opening and closing like safari
• Theme color should be used in the same way as it is in tab.js (pass to the find component via props)
• The little x to the right of the findbar input should clear the input instead of closing the whole findbar.
• To debug the failing test just use .debug() as described here: http://webdriver.io/api/utility/debug.html This will pause the browser then you can see why the thing that fails fails before it fails. It's best to make tests independent but you can debug it by running all of those tests for now.

[jkup]

It looks like the urlbar is being hidden for some reason when the findbar is opened and you switch tabs back and forth

I'm having a really tough time figuring this one out. The findbar in production is position:absolute so it doesn't cause this problem but essentially what's happening is if you navigate to another tab and come back to one with the findbar it's pushing the urlbar out of the viewport. If you, for example, remove overflow:hidden from #window you'll see it's still there, just being pushed out of view.

Anyone have an idea on how to fix?

I'll update the PR with the rest of the fixes but this bug is also what's causing the test to fail.

[bbondy]

@bsclifton do you think you could take a look?

[bbondy]

Fixed in your branch, the main problem is the UI structure changed so it needed to be reflected in the component hierarchy. In particular it should be part of the top bar now but before it was overlaid on top of the frame.

Minor tweaks may be needed but I did some testing and the basics work. I think the above points other than the issue with urlbar hiding needs to be still fixed though.

[bsclifton]

Nice fix @bbondy 😄 def makes sense in retrospect moving it out of frame and into main. The same find bar at can be used across multiple frames