├── .editorconfig
├── .gitignore
├── .prettierignore
├── .prettierrc.json
├── .vscode
├── extensions.json
└── settings.json
├── CONTRIBUTING.md
├── LICENSE
├── README.md
├── Restart-Firefox.ps1
├── docs
├── .nojekyll
└── index.html
├── img
├── feature-buttons-false.dark.png
├── feature-buttons-false.light.png
├── feature-buttons-grouped.dark.png
├── feature-buttons-grouped.light.png
├── feature-buttons-true.dark.png
├── feature-buttons-true.light.png
├── feature-float-false.dark.png
├── feature-float-false.light.png
├── feature-float-true.dark.png
├── feature-float-true.light.png
├── feature-hide-close-button.dark.png
├── feature-hide-close-button.light.png
├── feature-order.dark.png
└── feature-order.light.png
├── package.json
├── pnpm-lock.yaml
└── src
└── refined-findbar.scss
/.editorconfig:
--------------------------------------------------------------------------------
1 | root = true
2 |
3 | [*]
4 | charset = utf-8
5 | indent_style = tab
6 | insert_final_newline = true
7 | trim_trailing_whitespace = true
8 |
9 | [*.md]
10 | indent_style = unset
11 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | dist/
3 |
--------------------------------------------------------------------------------
/.prettierignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | dist/
3 | LICENSE
4 | pnpm-lock.yaml
5 |
--------------------------------------------------------------------------------
/.prettierrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "printWidth": 100,
3 | "singleQuote": true,
4 | "proseWrap": "always",
5 | "endOfLine": "auto",
6 | "overrides": [
7 | {
8 | "files": [".vscode/*.json"],
9 | "options": {
10 | "parser": "json5",
11 | "trailingComma": "all",
12 | "quoteProps": "preserve",
13 | "singleQuote": false
14 | }
15 | }
16 | ]
17 | }
18 |
--------------------------------------------------------------------------------
/.vscode/extensions.json:
--------------------------------------------------------------------------------
1 | {
2 | "recommendations": [
3 | "EditorConfig.EditorConfig",
4 | "SomewhatStationery.some-sass",
5 | "esbenp.prettier-vscode",
6 | "ms-vscode.powershell",
7 | ],
8 | }
9 |
--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 | "files.exclude": {
3 | "**/node_modules": true,
4 | },
5 | "editor.defaultFormatter": "esbenp.prettier-vscode",
6 | "editor.formatOnSave": true,
7 | "files.trimFinalNewlines": true,
8 | }
9 |
--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
1 | # Contributing
2 |
3 | ## Tools
4 |
5 | - This project uses [PNPM](https://pnpm.io/).
6 |
7 | - Consider using [Visual Studio Code](https://code.visualstudio.com/) to make your changes. The repo
8 | includes a [workspace configuration](./.vscode/) that runs [Prettier](https://prettier.io/) on
9 | save.
10 |
11 | If you prefer to use a different text editor, please run the `pretty` script and resolve any
12 | issues reported before committing your changes.
13 |
14 | ## Scripts
15 |
16 | | Name | Description |
17 | | -------- | ----------------------------------------------------------------------------------------------- |
18 | | `build` | Compile the SCSS to the `./dist` folder. |
19 | | `watch` | Similar to build, but compile every time the SCSS changes. |
20 | | `clean` | Clean the build output. |
21 | | `site` | Starts an HTTP server at the root of the project. View the site at http://localhost:8080/docs/. |
22 | | `pretty` | Run Prettier. |
23 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2022 Ravindu Liyanapathirana
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Refined find bar for Firefox
2 |
3 | `userChrome.css`[^userchrome] styles that improve the Firefox find bar by repositioning it,
4 | adjusting spacing and styling its elements.
5 |
6 | [^userchrome]:
7 | Learn more about `userChrome.css` at: https://kb.mozillazine.org/UserChrome.css,
8 | https://old.reddit.com/r/firefox/wiki/userchrome,
9 | https://old.reddit.com/r/FirefoxCSS/wiki/index/tutorials
10 |
11 |
12 |
13 | ## Features
14 |
15 |
16 |
17 |
18 |
Variable
19 |
Description
20 |
21 |
22 |
23 |
24 |
25 |
26 |
$float
27 |
28 |
29 | If `true`, detaches the find bar from the toolbar, and positions it floating above the contents of
30 | web page,
31 |
32 |
33 |
34 |
35 |
36 |
37 | If `false`, positions the find bar towards the top right-hand corner of the browser window, docked
38 | to the toolbar,
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
$float-alignment
51 |
52 |
53 | Vertically positions the floating find bar. Either `top` or `bottom`.
54 |
55 |
56 |
57 |
58 |
59 |
60 |
$float-distance
61 |
62 |
63 | Distance between the floating find bar and the respective window corner.
64 |
65 |
66 |
67 |
68 |
69 |
70 |
$buttons
71 |
72 |
73 | If `true`, styles the find bar checkboxes to resemble buttons,
74 |
75 |
76 |
77 |
78 |
79 |
80 | If `false`, leaves them as is,
81 |
82 |
83 |
84 |
85 |
86 |
87 |
88 |
89 |
90 |
91 |
92 |
$buttons-grouped
93 |
94 |
95 | If `true`, groups find bar buttons together,
96 |
97 |
98 |
99 |
100 |
101 |
102 |
103 |
104 |
105 |
106 |
107 |
$hide-close-button
108 |
109 |
110 | If `true`, hides the close button.
111 |
112 | > [!IMPORTANT]
113 | >
114 | > With this option enabled, the only way to close the find bar would be to press Esc when
115 | > its textbox or buttons are focused. To focus the textbox, press the find shortcut
116 | > Ctrl/Cmd+F.
117 |
118 |
119 |
120 |
121 |
122 |
123 |
124 |
125 |
126 |
127 |
128 |
$hide-when-unfocused
129 |
130 |
131 | If `true`, hides the find bar when its elements (textbox or buttons) are not in focus.
132 |
133 | > [!IMPORTANT]
134 | >
135 | > With this option enabled, press Ctrl/Cmd+F to reopen/focus the find bar, if
136 | > it loses focus (and is therefore, hidden).
137 |
138 |
139 |
140 |
141 |
142 |
143 |
$opacity-when-unfocused
144 |
145 |
146 | Transparency of the find bar when its elements (textbox or buttons) are not in focus. Excepts a
147 | number between 0 (fully transparent) and 1 (fully opaque).
148 |
149 |
150 |
151 |
152 |
153 |
154 |
$order
155 |
156 |
157 | Reorders elements of the find bar.
158 |
159 | This is a list that contains all of the following tokens (listed here in the default order), in any
160 | order: `TEXT_BOX`, `CHECKBOX_HIGHLIGHT_ALL`, `CHECKBOX_MATCH_CASE`, `CHECKBOX_MATCH_DIACRITICS`,
161 | `CHECKBOX_WHOLE_WORDS`, `LABELS`, `DESCRIPTION`.
162 |
163 | e.g., If the order is specified as `DESCRIPTION`, `LABELS`, `TEXT_BOX`, `CHECKBOX_HIGHLIGHT_ALL`,
164 | `CHECKBOX_MATCH_CASE`, `CHECKBOX_WHOLE_WORDS`, `CHECKBOX_MATCH_DIACRITICS`,
165 |
166 |
167 |
168 |
169 |
170 |
171 |
172 |
173 |
174 |
175 |
176 |
177 |
178 |
179 | ## Usage
180 |
181 | This style is authored as an [SCSS mixin][sassMixin] and must be transpiled to CSS first.
182 |
183 | - **The quickest way to get started** is to,
184 |
185 | 1. Visit https://ravindUwU.github.io/firefox-refined-findbar, which will automatically generate a
186 | link to the [Sass Playground][sassPlay].
187 |
188 | 2. Visit the generated link, modify the SCSS as necessary (specifically, the highlighted
189 | `@include` statement).
190 |
191 | 3. Copy the CSS output into your `userChrome.css` file and restart Firefox.
192 |
193 |
194 | If that didn't work,
195 |
196 | 1. Open an online transpiler (e.g., [Sass Playground][sassPlay] or
197 | [SassMeister](https://www.sassmeister.com/)).
198 |
199 | 2. Copy the contents of [`refined-findbar.scss`][src] into the SCSS pane.
200 |
201 | 3. Add the line `@include refined-findbar()` after the copied contents, and override variables as
202 | necessary. The default values can be found in the `@mixin refined-findbar` declaration near the
203 | top of the contents copied in step 2.
204 |
205 | ```scss
206 | //
207 |
208 | // prettier-ignore
209 | @include refined-findbar(
210 | $float: true,
211 | $float-alignment: top,
212 | // etc..
213 | );
214 | ```
215 |
216 | 4. Copy the CSS output into your `userChrome.css` file and restart Firefox.
217 |
218 |
219 |
220 | - **To transpile locally**, [`@use`][sassUse] the [`refined-findbar.scss`][src] file,
221 | [`@include`][sassMixin] the mixin changing any variables as necessary, and use [`sass`][npmSass]
222 | to transpile to CSS.
223 |
224 |
225 |
226 | [src]: ./src/refined-findbar.scss
227 | [sassUse]: https://sass-lang.com/documentation/at-rules/use/
228 | [sassMixin]: https://sass-lang.com/documentation/at-rules/mixin/
229 | [sassPlay]: https://sass-lang.com/playground/
230 | [npmSass]: https://www.npmjs.com/package/sass
231 |
--------------------------------------------------------------------------------
/Restart-Firefox.ps1:
--------------------------------------------------------------------------------
1 | <#
2 | .SYNOPSIS
3 | Stops currently running Firefox processes, stops them, and starts one.
4 | #>
5 | [CmdletBinding()]
6 | param (
7 | # Only affects Firefox developer edition (by checking whether "Developer" exists in path to the
8 | # process binary.
9 | [switch]
10 | $Dev
11 | )
12 |
13 | function main {
14 | $foxxos = Get-Process firefox -ErrorAction Ignore | Where-Object { $null -ne $_.Path }
15 |
16 | if ($Dev) {
17 | $foxxos = $foxxos | Where-Object { $_.Path.Contains('Developer') }
18 | }
19 |
20 | logMeh "Found $($foxxos.Count) foxxos"
21 |
22 | if ($foxxos.Count -eq 0) {
23 | kthxbai👋
24 | }
25 |
26 | $foxxo = ($foxxos | Select-Object Path -Unique).Path
27 |
28 | if ($foxxo.Count -eq 1) {
29 | logYay "Using foxxo at ``$foxxo`` :3"
30 | } else {
31 | logNay "Found $($foxxo.Count) unique foxxos; not sure which one to use :3"
32 | kthxbai👋
33 | }
34 |
35 | logYay 'Stopping foxxos'
36 | $foxxos | stoppppp😭
37 |
38 | logYay 'Starting Firefox'
39 | omghai❤️ $foxxo
40 | }
41 |
42 | function logYay($huh) {
43 | Write-Host -NoNewline -ForegroundColor Green '^_^ '
44 | Write-Host $huh
45 | }
46 |
47 | function logMeh($huh) {
48 | Write-Host -NoNewline -ForegroundColor Blue '-_- '
49 | Write-Host $huh
50 | }
51 |
52 | function logNay($huh) {
53 | Write-Host -NoNewline -ForegroundColor Red '>_< '
54 | Write-Host $huh
55 | }
56 |
57 | function stoppppp😭 {
58 | param(
59 | [Parameter(ValueFromPipeline)]
60 | $fox
61 | )
62 |
63 | process {
64 | $fox | Stop-Process
65 | }
66 | }
67 |
68 | function omghai❤️ {
69 | param($fox)
70 |
71 | & $fox
72 | }
73 |
74 | function kthxbai👋 {
75 | exit
76 | }
77 |
78 | main
79 |
--------------------------------------------------------------------------------
/docs/.nojekyll:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ravindUwU/firefox-refined-findbar/616ca6aa94e28c779b0ce0011ab768221797f210/docs/.nojekyll
--------------------------------------------------------------------------------
/docs/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
36 |
37 |
38 |
39 |
40 |
45 | This page fetches the refined find bar mixin, adds a corresponding
46 | @include rule with default arguments, and generates a link to open it in the
47 | Sass playground.
48 |
35 | 
43 | 
78 | 
85 | 
100 | 
121 | 
169 |