[Feature Request]: Floating Findbar

[Crunchbits]

Description

Would be great to have a floating Findbar similar to Chrome. I'm not very well versed in css but I was able to implement it using the css from firefox-refined-findbar . This was my result:

Obviously it can be altered to look better, but I'd say this is already a big upgrade. I don't know if there's any interest in implementing this to the theme but at the very least I'll outline the steps for what I did if there's any interest:

(For context this was done on material-fox-updated v1.2.4)

1. Go to user-chrome.css and remove/comment-out the lines starting from the first .browserContainer>findbar all the way right before the .tabbable line. Necessary otherwise the css conflicts. Honestly there might be more lines that might be able to be kept but this is what I tested and so far nothing I've not noticed anything break.

2. Using the readme from firefox-refined-findbar open the mentioned https://ravinduwu.github.io/firefox-refined-findbar link. On the website's left side that says SCSS scroll all the way down to the @include section and modify the variables to your liking (readme describes variables). My settings from the screenshot were:

   $float: false,
   $float-alignment: top,
   $float-distance: 18px,
   
   $buttons: true,
   $buttons-grouped: true,
   
   $order: (
       DESCRIPTION,
       LABELS,
       TEXT_BOX,
       CHECKBOX_HIGHLIGHT_ALL,
       CHECKBOX_WHOLE_WORDS,
       CHECKBOX_MATCH_CASE,
       CHECKBOX_MATCH_DIACRITICS,
   )

   On the website's right side that says CSS, copy all of that into the css file in chrome folder.

3. In the newly added CSS:

To fix the weird findbar corners, in the first findbar {} section add the 3 lines:

  border-radius: 10px !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;

To make the findbar hiding animation less choppy change animation: 0.1s findbar-scale-out; to

  animation: 0.2s findbar-scale-out;

To fix the circle-overlays being too big/getting cut out on the findbar checkboxes I added the following to the end:

.findbar-container checkbox::after {
    width: 23px;
    height: 23px;
    left: 0px; !important
}

4. Done

Summary: Removed ~122 lines from the original user-chrome.css. Added the css obtained from firefox-refined-findbar and from that Altered/Added 9 lines to it.

Obviously if implemented it doesn't need to use firefox-refined-findbar, but I just wanted to at least showcase one way of doing it.

Additional info (Optional)

Firefox 129.0.1 (64-bit) Windows 10

[edelvarden]

@Crunchbits, looks interesting, but the key differences I see are only the control positions and replacing checkboxes with a button group. Here's how I recreated it:

[Crunchbits]

Control positions & replacing checkboxes with a button group are not that big of a deal to me, but the fact that the findbar now doesn't take the whole browser width and doesn't cover up so much is really great. Now I don't need to manually close it most of the time after I don't need it.

Just tried out your version, that looks much better. I replaced my entire chrome folder with it. Very small detail: I don't know if it's just me but strangely for whatever reason the top part of the findbar is being cutoff by around 1-3 pixels.

Tested with userChrome.ui-compact-url-bar on and off and also with the bookmarks bar on and off and same results.

[edelvarden]

@Crunchbits , I also found this issue on the new tab page, applied fixes.

[Crunchbits]

That definitely fixed the cutoff but now the search box is in the wrong order

[edelvarden]

@Crunchbits , 😅

Fixes have been applied.

[Crunchbits]

All working!

This theme has been so helpful to me in transitioning away from Chrome to Firefox🙏.