Skip to content

Commit

Permalink
Update and improve README.md based on v1.2-firefox, fixing links #20
Browse files Browse the repository at this point in the history
  • Loading branch information
@KiKaraage
KiKaraage authored Feb 29, 2024
1 parent 08423c9 commit 69ee325
Showing 1 changed file with 80 additions and 14 deletions.
94 changes: 80 additions & 14 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,20 @@
# Arc Windows to Firefox / Floorp
For you who want to try new, shiny Arc Browser on Windows! No registration needed, compatible for all Windows versions ✨

Based on [edge-frfox theme by bmFtZQ](https://github.com/bmFtZQ/edge-frfox).

Vertical tab sidebar setup derived from [arcticfox-theme by Sirlan-ff00ff](https://github.com/sirlan-ff00ff/arcticfox-theme).
Based on [edge-frfox theme by bmFtZQ](https://github.com/bmFtZQ/edge-frfox) | Vertical tab sidebar setup derived from [arcticfox-theme by Sirlan-ff00ff](https://github.com/sirlan-ff00ff/arcticfox-theme).

Any suggestions or concerns? [Submit new issues](https://github.com/KiKaraage/ArcWTF/issues/new/choose) or [contact me on Reddit](https://www.reddit.com/r/FirefoxCSS/comments/1acgx8c/arcftw_attempt_to_replicate_arc_browser_sleek/).

## Previews
![Screenshot 1 with tab sidebar on](https://github.com/KiKaraage/ArcWTF/assets/10529881/58260699-1373-4532-b29e-2a6133008618)
![Screenshot 2 with tab sidebar off](https://github.com/KiKaraage/ArcWTF/assets/10529881/a31d486b-5dbd-4a50-83aa-0598d28102ae)
![Screenshot 1 with tab sidebar pinned](https://github.com/KiKaraage/ArcWTF/assets/10529881/0f280fd2-2049-4ed2-8bf2-41e25f381f65)
![Screenshot 2, new tab panel setup](https://github.com/KiKaraage/ArcWTF/assets/10529881/d9288422-8a54-4493-b90b-56a6ebea4ed5)
![Screenshot 3 with tab sidebar unpinned](https://github.com/KiKaraage/ArcWTF/assets/10529881/aa3b66c2-1aee-46a0-8ad8-14e1320c6508)
![Screenshot 4 with popup searchbar activated](https://github.com/KiKaraage/ArcWTF/assets/10529881/3be1ab66-c9c6-44bc-a557-e26b2136b29d)

## Compability
I modify, made and test this theme on Firefox 122, Windows 10. Based on edge-frfox's compability, this theme can work with Linux and MacOS too.
I modify, made and test this theme on Firefox 123, Windows 10. This theme can work with Linux and MacOS too.

ArcWTF will clash with the default Firefox system theme, dark themes that have light toolbar/light URL bar, and light themes with dark toolbar/dark URL bar.
ArcWTF will **clash with the default Firefox system theme**, dark themes that have light toolbar/light URL bar, and light themes with dark toolbar/dark URL bar.

Vertical tabs are currently disabled in Private Browsing Mode due to behaviour clashes with window controls.

Expand All @@ -40,9 +40,22 @@ Vertical tabs are currently disabled in Private Browsing Mode due to behaviour c
* Install [Sidebery](https://github.com/mbnuqw/sidebery) and [Userchrome Toggle](https://addons.mozilla.org/id/firefox/addon/userchrome-toggle/).
* Open `about:addons`, click 'Userchrome Toggle', go to 'Options' tab.
* Disable 'Display a notification', Go to 'Style Toggle 1', put `|| ` in prefix (should also have the ending space) and apply changes.

![Userchrome Toggle settings](https://github.com/KiKaraage/ArcWTF/assets/10529881/dde05450-f53b-497f-8107-865289b3be84)
* Click extension button (puzzle icon), right click on Userchrome Toggle icon, click 'Pin to Toolbar'.
* Open Sidebery settings, go to the Style Editor and paste the [CSS config](sidebery/sidebery-css).
* Additional addons for theming: [Adaptive Tab Bar Colour](https://addons.mozilla.org/id/firefox/addon/adaptive-tab-bar-colour/) & [Firefox Color](https://color.firefox.com) [extension](https://addons.mozilla.org/id/firefox/addon/firefox-color)

![Pin to Toolbar](https://github.com/KiKaraage/ArcWTF/assets/10529881/8a72dc0c-7f40-4d34-a3d3-ca9e8820b127)
* Open Sidebery settings, go to the Style Editor and paste the [CSS config](./sidebery-css-style), or go to Help section and click import [my backup JSON file](./sidebery.json).
* <details>
<summary>Some of my favourites Firefox themes to apply with ArcWTF:</summary>

* [Nord Polar](https://addons.mozilla.org/en-US/firefox/addon/nord-polar/), [Nord Dark](https://addons.mozilla.org/en-US/firefox/addon/nord-dark)
* [Arc Dark Theme](https://addons.mozilla.org/en-US/firefox/addon/arc-dark-theme-we), [Arc Theme](https://addons.mozilla.org/en-US/firefox/addon/arc-theme-we)
* [Activist - Soft](https://addons.mozilla.org/en-US/firefox/addon/activist-soft)
* [Foto - Bold](https://addons.mozilla.org/en-US/firefox/addon/foto-bold)
* [Plum Torte](https://addons.mozilla.org/en-US/firefox/addon/plum-torte)
* [Dark Teal (chrome-like)](https://addons.mozilla.org/en-US/firefox/addon/dark-teal-chrome)
</details>

<b>(2/3) Applying the CSS theme</b>
* Download - [for Firefox](https://github.com/KiKaraage/ArcWTF/archive/refs/heads/main.zip); [for Floorp](https://github.com/KiKaraage/ArcWTF/archive/refs/heads/floorp.zip) - or clone this repo locally
Expand All @@ -62,14 +75,67 @@ Vertical tabs are currently disabled in Private Browsing Mode due to behaviour c
* Use the Userchrome Toggle to turn sidebar on (fixed positions) or off (autohidden, hover to show tabs).

<b>Bonus!</b>
* <b>Replace Firefox icon on Start Menu and Taskbar</b>: Download [Arc.ico](https://github.com/KiKaraage/ArcWTF/blob/main/Arc.ico), open `C:\ProgramData\Microsoft\Windows\Start Menu\Programs` directory, right click Firefox shorcut, click 'Properties', click 'Change Icon...' and use the ICO file for maximum Arc feel. Pin to taskbar too.
* <b>Check interesting tweaks</b> from [bmFtZQ/edge-frfox theme page](https://github.com/bmFtZQ/edge-frfox?tab=readme-ov-file#tweaks) - Some of them are already pre-applied in ArcWTF.
| Tweaks | Screenshot |
| --- | --- |
| Replace Firefox icon on Start Menu and Taskbar | ![gambar](https://github.com/KiKaraage/ArcWTF/assets/10529881/3f67829e-91b2-4496-a31c-0d6326478eb4) <br> Download [Arc.ico](https://github.com/KiKaraage/ArcWTF/blob/main/Arc.ico), open `C:\ProgramData\Microsoft\Windows\Start Menu\Programs` directory, right click Firefox shorcut, click 'Properties', click 'Change Icon...' and use the ICO file for maximum Arc feel. Pin to taskbar too. |
| Activate popup search/URL bar launchpad | ![gambar](https://github.com/KiKaraage/ArcWTF/assets/10529881/29bea83d-231a-45d2-8118-769885d87d88) <br> Go to `about:config` and add new Boolean entry: `uc.tweaks.popup-search` |
| Hide header sidebar, containing space/tab panel name | Go to `about:config` and add new Boolean entry: `uc.tweaks.hide-sidebar-header` |
| Extend sidebar length to 250px (original: 200px) | Go to `about:config` and add new Boolean entry: `uc.tweaks.longer-sidebar` |
| Other tweaks (some might've already preapplied here) | Check [bmFtZQ/edge-frfox theme page](https://github.com/bmFtZQ/edge-frfox?tab=readme-ov-file#tweaks) and add to `about:config` |
| Use Segoe UI Variable (Windows 11 default font) as Firefox UI font, as shown on preview screenshots | Download from [CufonFonts](https://www.cufonfonts.com/font/segoe-ui-variable), install and uncomment the related settings on userchrome.css and Sidebery style configurations (sidebery-css-style) |
| Additional addons for theming | [Adaptive Tab Bar Colour](https://addons.mozilla.org/id/firefox/addon/adaptive-tab-bar-colour/) & [Firefox Color](https://color.firefox.com) [extension](https://addons.mozilla.org/id/firefox/addon/firefox-color) |

### Changelogs

<details>
<summary><b>v1.2-firefox</b> (Feb 29, 2024)</summary>

* IMPORTANT: Fix missing window controls in FF123+ *credit to bmFtZQ/edge-frfox*
* NEW: Option to make URL bar popped up like command bar in Arc. Add "uc.tweaks-popup-search" in about:config! *credit to Naezr/ShyFox*
* Improving inactive window behaviour - instead of lighter navbar color, opacity of navbar icons, URL bar and window controls would be decreased. *credit to MrOtherGuy*
* Improving Sidebery look: Now icons for Sidebery settings, history, and new tab panels are replaced with Fluent icons as used in Arc on Windows
* Improving Sidebery look: Inactive tab panels would be rendered on smaller size with monochrome colors (depend on theme) to mimic Arc.
* Improving Sidebery look: New tab button now have similar design to Arc on Windows. It would still exist below all tabs tho, unlike in Arc where new tab button is located after pinned tabs, before regular tabs.
* Improving Sidebery look: Fixing hidden panels popup layer, now it's correctly popped upwards. And remove dark overlay for all Sidebery popup. *partial credit to cherrynoize*
* Improving Sidebery look: Fixing pinned tab, now active pinned tabs has light overlay to distinguished it from non-active pinned tabs.
* Added rounded corners to the devtools. *credit to bmFtZQ/edge-frfox*
* Added rounded corners to sidebar and sidebar header and fixing sidebar hover flickering. *credit to anoshione, and ishid4 for fixing it*
* Now showed Space/tab panel name by enabling (and tidying) the sidebar header. *thanks to mbnuqw/Sidebery*
* Changing unified extensions menu to grid layout.
* Pre-applied Segoe UI Variable in Firefox UI and Sidebery - Uncomment the respective codes on userchrome.css and Sidebery style editor to activate it.
</details>
<details>
<summary>v1.1-firefox (Feb 13, 2024)</summary>

* Tab bar is now hidden by default.
* Rounded corners are now implemented by default. (no about:config entry required)
* Fix rounded corners issue on some websites, like Twitter/X. _credit to bmFtZQ/edge-frfox_
* Fix PiP controls not showing. _credit to bmFtZQ/edge-frfox_
* Fix window controls visibility when hiding the tab bar on Linux. _credit to bmFtZQ/edge-frfox_
* Fix window controls visibility in fullscreen mode. _credit to bmFtZQ/edge-frfox_
* Simplified find bar and navigation bar CSS codes.
* Improved find bar look.
* Improved in-browser notification look.
* Adding option to extend sidebar size (from default 200px to 250px) easily: Go to about:config and enable uc.tweak.longer-sidebar (create new Boolean entry)
* Moved Sidebery navigation bar to bottom. Now Sidebery fully worked like Arc Spaces! _credit to u/themacuser90_
* Pinned tab width in Sidebery is now resized automatically depend on sidebar size and preferred pinned tabs columns. (I set 3 columns as default, you can customize it from Sidebery Styles Editor)
* Changed unified extensions menu styling to horizontal-styled list like Microsoft Edge
</details>

### Current Issues/Things to Improve

* Improving Floorp compability.
* Window controls not working in Private Browsing Mode when tab bar are hidden. Current solution: Don't enable Sidebery and Userchrome Toggle on Private Browsing; the script will automatically show tab bar when you go on Private Browsing Mode. _credit to bmFtZQ/edge-frfox_ _(low priority)_
* Bookmarks bar not showing bookmarks even when enabled. Current solution: Click Menu (Arc logo) > Bookmarks, or use Sidebery bookmarks panel to access bookmarks. _(low priority)_
* Firefox alternative window controls are shown overlapping GTK window controls when using Adaptive Tab Bar Color addon in Linux. Current solution: Install [Browser Adaptation Dynamic Theme](https://github.com/linonetwo/browser-adaptation-dynamic-theme) addon. _credit to LuanderFarias & Enigma1309_


### Credits
### Credits
* [bmFtZQ - edge-frfox](https://github.com/bmFtZQ/edge-frfox)
* [ssirlan-ff00ff - arcticfox-theme](https://github.com/sirlan-ff00ff/arcticfox-theme)
* [The Browser Company](https://arc.net)
* [Javisperez on SVGRepo - base of sidebar & split tabs icons](https://www.svgrepo.com/collection/toe-basic-line-interface-icons/)
* [Microsoft - Fluent UI system icons]([https://github.com/aminomancer/uc.css.js/blob/master/uc-extensions.css](https://github.com/microsoft/fluentui-system-icons))
* [MrOtherGuy - several CSS hacks](https://mrotherguy.github.io/firefox-csshacks/)
* [Aminomancer - Extension icon replacement tweak](https://github.com/aminomancer/uc.css.js/blob/master/uc-extensions.css)
* [DatGuyPiko - Compact extensions menu](https://github.com/datguypiko/Firefox-Mod-Blur/tree/master/EXTRA%20MODS/Compact%20extensions%20menu)
* [DatGuyPiko - compact extensions menu](https://github.com/datguypiko/Firefox-Mod-Blur/tree/master/EXTRA%20MODS/Compact%20extensions%20menu)
* [mbnuqw - support on Sidebery customizations](https://github.com/mbnuqw/sidebery/issues/1481)

0 comments on commit 69ee325

Please sign in to comment.