Giter VIP home page Giter VIP logo

arcwtf's Introduction

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 | Vertical tab sidebar setup derived from arcticfox-theme by Sirlan-ff00ff.

Any suggestions or concerns? Submit new issues or contact me on Reddit.

Previews

Screenshot 1 with tab sidebar pinned Screenshot 2, new tab panel setup Screenshot 3 with tab sidebar unpinned Screenshot 4 with popup searchbar activated

Compability

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.

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

For Floorp, there's several incompability I currently have since it might clashed with several parts of the built-in theme they had, like:
  • I haven't been able to modify URL font size
  • Userchrome Toggle hasn't working yet, so the vertical tab sidebar is either a) autohidden but you can't toggle it to be in fixed position, or b) can be switched on to be shown/hidden, but it can't be automated.
  • Advanced configurations from this theme in about:config doesn't worked, so the sidebar tab (either in Sidebery, TST or their default vertical tab) tend to mimic the window background instead of mimicking tab/toolbar background to blend with the toolbar and browser border. So far I can only fix this in Sidebery - you will have to grab toolbar's hex/RGB color and apply it to --frame-bg parameter, as shown in screenshots below.
  • Hiding tabs bar, turning on browser border frame is applicable only through Floorp's settings instead of through the theme + about:config configurations.
  • Otherwise, the theme are working quite well! Split view is available too, but since the devs haven't put the option in right-click context menu, you will have to use their default vertical tab to do it. Though it doesn't look as good as Sidebery.
Condition Screenshot
Original vertical tab bar + Split view gambar
Original Sidebery (with CSS styling) gambar
Sidebery (with CSS styling) after --frame-bg parameter modified, the panel blend better in Floorp gambar

Applying the theme

(1/3) Installing addons and choosing theme

  • Install Sidebery and 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

  • Click extension button (puzzle icon), right click on Userchrome Toggle icon, click 'Pin to Toolbar'.

    Pin to Toolbar

  • Open Sidebery settings, go to the Style Editor and paste the CSS config, or go to Help section and click import my backup JSON file. Go to Navigation Bar settings and add tab panels to use as Spaces to your liking. Personally I use History panel as the first item to mimic 'Recently closed' button on Arc so applying custom icon on the CSS config would be easier.

Sidebery navigation bar setting

(2/3) Applying the CSS theme

  • Download - for Firefox; for Floorp - or clone this repo locally
  • Go to about:profiles
  • Check 'Root Directory' and click 'Open Folder'/'Show in Finder'
  • Click and open 'chrome' folder (or create the folder if it isn't existed yet)
  • Paste folders and files from this repo to the chrome folder
  • Go to about:config, paste toolkit.legacyUserProfileCustomizations.stylesheets into the bar and set its value to true/choose Boolean and click + (plus) icon.
  • After that, paste svg.context-properties.content.enabled into the bar and set its value to true/choose Boolean and click + (plus) icon.
  • Restart Firefox

(3/3) How to use this theme?

  • Hover to browser left corner to show the vertical tabs.
  • Right-click navigation toolbar and click 'Customize Toolbar'. Move Userchrome Toggle button to the left position, before back-forward-reload buttons. Put flexible spaces before and after the URL bar. Take a look on screenshots below for guides: Toolbar configuration for "vertical bar always on" Toolbar configuration for "vertical bar autohide"
  • Use the Userchrome Toggle to turn sidebar on (fixed positions) or off (autohidden, hover to show tabs).

Bonus!

Tweaks Screenshot
Replace Firefox icon on Start Menu and Taskbar gambar
Download 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
Go to about:config and add new Boolean entry: uc.tweak.popup-search
Hide header sidebar, containing space/tab panel name Go to about:config and add new Boolean entry: uc.tweak.hide-sidebar-header
Extend sidebar length to 250px (original: 200px) Go to about:config and add new Boolean entry: uc.tweak.longer-sidebar
Other tweaks (some might've already preapplied here) Check bmFtZQ/edge-frfox theme page 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, install and uncomment the related settings on userchrome.css and Sidebery style configurations (sidebery-css-style)
Additional addons for theming Adaptive Tab Bar Colour & Firefox Color extension

Changelogs

v1.2-firefox (Feb 29, 2024)
  • 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.tweak.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.
v1.1-firefox (Feb 13, 2024)
  • 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

Current Issues/Things to Improve

  • Improving Floorp compability.
  • Recently added support for translucency in Mac, still on early trial mode. (thanks to artsyfriedchicken)
  • Add support to apply MacOS default icons (optional), replacing Fluent icons used on ArcWTF.
  • 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 addon. credit to LuanderFarias & Enigma1309

Credits

arcwtf's People

Contributors

heblushabus avatar ishid4 avatar jacksonsamuelmoore avatar kikaraage avatar pixsaoj avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar

arcwtf's Issues

help regarding horizontal tabs

hello i loving this firefox theme but the thing is that the vertical tabs are working fine but the horizontal tabs are still there I have a userchrome.css file which can remove horizontal tabs but i don't know how to use it with this theme please help.

thanks

Missing Firefox View button?

Hey, thanks for you hard work, the reskin is great! I just want to know if you see your "Firefow View" button on your Firefox with ArcWTF? I looked a bit in the source code, and it doesn't look like you're hiding it. I'm looking for the reason for its absence on my side, whether it's the redesign or perhaps some preferences in "config" that need adjusting, since "Firefow View" got upgraded in v123.

Floorp integration

Would it be possible to make pinned tabs for Floorp look and function the same way pinned tabs do using Sidebery? Floorp has native vertical tabs that can be resized. Also hidding tabs with userChrome Toggle is not working. Here is what i managed to so far.
image

Flickering sidebar when hovering

`#main-window[sizemode="maximized"] #sidebar-box{
--uc-sidebar-width: 0.6rem;
}

#main-window[sizemode="fullscreen"] #sidebar-box{ --uc-sidebar-width: 0.6rem; }`
tweaks/sidebar.css

For fixing the flickering, 0.6rem is hot spot for me.

Show bookmarks only on new tab issue

Hey, so first of all, absolutely in love with this theme!

So, the issue I faced was when I tried to enable to show the bookmarks tab only on the new tab. It looks like there's only 2 options: show bookmarks tab for every page or don't show it at all. When I did click the "Show only on new tab", it didn't work and continued to never show up at all. Just wanted to bring this to light and ask if this is an issue just for me or this might've not been addressed yet.

Shortcut key and Sidebar plugin's conflict

Hello author, I am a user using Sidebar and I would like to provide the following feedback: the shortcut Ctrl+B in Firefox browser will cause the functionality of UserChrome to fail (the solution is to open the Sidebar plugin again, I guess you can use the shortcut key to replace the browser's original functionality); Secondly, regarding the image you displayed on Floorp with a side toolbar on the right, I also want to achieve such an effect. Is there a solution? Finally, the activation pop-up search/address bar startup version you showed me is something I really don't know how to enable. Can you explain it in the issue? Here, I am very grateful for your reply!!!!

[Minor-Bug] Search popup window

Hi again :)

In the how-to enable popup window when searching there is a typo (I guess):
image
image

I guess it should be "uc.tweak.popup-search" in the documentation.

Custom CSS

the custom css for sideberry didnt seem to work before, incase it doesnt, uninstall and reinstalling the extension works

Can't click "minimize, close, make bigger"

When sidebery is active, i can't click those buttons

Screenshot 2024-02-20 204145

But if i click on sidebery and return to horizontal tabs, those buttons are clickable

is there a way to solve that?

--toolbar-bgcolor makes the url suggestion bar have transparent background

Hello!

I'm running the main branch and while playing around with it I found that URL suggestion pop-out has a transparent background.

This is most probably due to the use of --toolbar-bgcolor when setting the background, variable which on default configuration of Adaptive Tab Bar Color is set to be transparent. I believe ATBC has a separate CSS variable that can be used only for the URL bar, but I'm not sure.

This issue was introduced in commit 5441390

[Feature Request] Blur

It would be very nice to be able to blur everything but the page contents, I think WaveFox's implementation could be adaptd to work
image
Image is on Arch with blur

[BUG] Opening a context menu sometimes hangs the browser

Hello! I love your FirefoxCSS theme, in fact it is the first time in a long time to use a proper theme without applying extra tweaks from the FirefoxCSS-hacks (or something) repo myself. (that's how good it is!)

But, there is one regression that is making using this theme a pain in the ass. Sometimes, nay, most of the time if I try to open the context menu via pressing the right-button key, the whole Firefox UI freezes, albeit it showing up after a while. It doesn't happen when I don't use the theme.

NixOS, Hyprland (Wayland, shouldn't matter TBH), Firefox v123

Bigger hover zone for sidebar?

Hi @KiKaraage,

Theme is absolutely amazing, thanks for sharing it!

Description

One thing I struggle with now is hovering over the left side to show the tab sidebar. On macOS, it seems like there's only couple of pixels worth of width to be able to show the hidden sidebar.
When I have the windows maximised (not fullscreen) and go to the left side of the screen, I get the arrow for resizing the window – the desktop environment takes over, and Firefox doesn't consider the cursor being "in the window".
The workaround is to have the sidebar on at all times, sure – but on small screens that eats into the available screen real estate a fair bit.

Any ideas on how to tackle this?

Environment:

macOS Monterey 12.7.3 (21H1015)
Firefox 124.0b8 (64-bit)
Latest ArcWTF version (git master), also happens with release v1.2-firefox

Details:

  • Severity: 3 - Basic function loss, with workaround
  • Ease of reproduction: Everytime

Repro video:

Screen.Recording.2024-03-07.at.13.47.06.mov

Librewolf Support

Librewolf is same as firefox but with privacy features enabled, i installed this theme and everything seems to work out of the box.....sideberry, icons and everything else just worked fine...
except when i turned off Adaptive tab bar color in the extensions menu my config break kinda. in firefox if i turned off the adaptive tab bar color it just works see
image
everything seems to be perfect

but when i do the same in librewolf
image
the consisency seems to break, if i re-enable it just works, but i don't wanna use adaptive tabbar color always

your theme works when i install the setup, but it breaks after enabling and disabling the adaptive tabbar color.

Also is there any way to turn this off, this only gets enabled if i use adaptive tabbar color (i'm on linux Hyprland i don't want close button like windows)
image

Sorry for my bad english
Thanks in advance ❤️

Tab sidebar using window unfocused background color on kde plasma

The sidebar uses the color it's supposed to use while the window is not focused, so it doesn't match with the rest of the window when it's focused. When the window is unfocused it matches. The bar should either always use the focused color or change automatically depending on the state
image

How to change the accent

Hi. I just want to know how to change the color accent like you did in the preview image?
I tried Firefox color but it only change the background color not the navigation bar. Thanks
image

Tab panel on the wrong side

Hi! Everything seems to work great, expect that sidebery is displayed on the right side of the window. How do I change it to the left without breaking anything? ;)

Fullscreen with all ArcWTF interface

Hello. Would it be possible to add or fix the interface? because when I maximize ArcWTF, MyDockFinder application still shows me, and when I go full screen, the ArcWTF interface disappears, which I would rather see.....
sshot-1

Problem with toolbar buttons

Sorry for multiple issues! :p
image

How can I remove titlebar buttons? (red)
How can i move sidebar toggle to the left (blue)

image


Toggling sidebar with hotkey doesn't work and brings up the original tab bar. Heres what happens when i press the keybind. After the original tab bar comes back the sidebar doesnt work anymore, it only works again when you press the keybind again.
image

Toggling the sidebar button (userchrome) works as intended:
image

Do you know of anyway these can be fixed?

Improvement: Single installation script

I believe it would be possible, but if there is a way to configure a user's Firefox config through their profile via a single script, it would be far easier to set up at least the options for this theme. I would also recommend using this utility for your users to apply your theme more simply https://github.com/ryanccn/nyoom

No Dark Mode support?

The icons for the different ui elements which should change to white are not doing so when using this theme
eg :
image

Not Working

I have everything downloaded but it still doesn't work on windows 11

Extra comments in Floorp CSS

The Floorp version of ArcWTF 1.2 has a extra comments in the userChrome.css file which prevents the sidebar from being resized. Adjusting the comments fixes the issue. Forgive me if something else is wrong, it's been a long time since I used CSS.

Code_I2r6KIi5ps

How to always keep sidebar opened, and hide with a key press?

I've set everything up, and works fine. Now, I want to Hide the sidebar (f1 key right now). If I press to hide it, it will hide, then the top navbar will appear. If I press again f1, it will hide the top navbar, and the sidebar now has to be hovered to be shown...

2024-04-11.13-24-23.mp4

[Question] Which sideberry-css-style to use?

In the readme description, there is a link for the SideBery CSS file, when you click on it the page opens with a 404 (not found) error message.
So should we use the file in the image or open the sidebery folder?
image

Sidebery navbar panel icons are displayed as flipped unless "Show in one line" is turned on

Description

Panel icons on Sidebery navbar are displayed as flipped if the setting is "horizontal + 'Show navigation bar in one line' turned off" or "vertical". It doesn't happen with "horizontal + 'Show navigation bar in one line' turned on" settings.

What especially doesn't make sense to me is that the navbar layout shown in the preview screenshot on the README seems to be possible only when the "Show in one line" option is turned off, because one-lined navbar seems it doesn't really respect the elements list on the settings.

The screenshots below are taken with a slightly modified CSS config, but the issue occurs with the official config too.

Environment

  • Floorp 11.10.1 (Firefox 115.8.0)
  • Sidebery 5.1.1

Screenshots

image
image
image

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.