Sweet Pop Save

Sweet_Pop! Beautify, Customize Firefox. Minimalist animated oneliner theme for Firefox perfectly matching Sweet Dark.

Project README

Sweet_Pop!

A minimalist animated oneliner theme for Firefox perfectly matching Sweet Dark

Auto-hide Scrollbars

Library

Folder structure

 .
├──  assets
│  └──  preview images
├──  css
│  ├──  myChanges.css
│  ├──  icons.css
│  ├──  reddit.css
│  ├──  discordCatppuccin.css
│  ├──  responsiveNavbar.css
│  └──  other .css files
├──  icons
│  ├──  animation.svg
│  └──  many icons in .svg format
├──  LICENSE
├──  programs
│  ├──  install-cfg.sh
│  ├──  install-curl.sh
│  ├──  install.sh
│  ├──  install-curl.bat
│  ├──  install.bat
│  ├──  local-settings.js
│  ├──  mozilla.cfg
│  └──  user.js
├──  README.md
├──  script
│  ├──  floatingToolbox.uc.js
│  └──  hideScrollbar.uc.js
├──  userChrome.css
├──  userContent.css
└──  utils
   ├──  boot.jsm
   └──  chrome.manifest

`userChrome.css`

This helps to customize Firefox User Interface.

`userContent.css`

This helps to customize web content like a specific site.

`floatingToolbox.css`

Makes the toolbox float. Can be accessed via hovering over top of browser.
All imports are present in css folder as well.

`hideScrollbar.uc.js`

It's now possible to autohide scrollbars.

`floatingToolbox.uc.js`

Enable disable floating toolbox from menubar/about:config.

As this is a one-liner theme, one must drop some buttons to add sufficient space for urlbar and tabbar. That's why I mentioned in issue 2 to move the add-ons to overflow menu. But this messed up with their widths. Take a look here. I did some temporary fix(which was not that good). But u/MotherStylus came up with an awesome uc.js script.
So basically this adds a button slider to navbar toolbar. This is how it looks. Read the file description to configure it properly.

`user.js`

Contains required user preferences. Change these before copying it to it's location because your default preferences will be overridden by this once you restart your browser.

But how does it work?

Custom startup-script (aka mozilla.cfg here) is loaded using local-settings.js. This startup-script adds "loader" scripts from utils folder that loads arbitrary javascript files from the script folder into Firefox
mozilla.cfg also helps in setting local webpage as your homepage. Details in Installation.

Note

Firefox team has removed XBL from Firefox starting with version 72, so userChrome.js would not work :/

Installation

Note

If you are planning to set a local page as home page then in mozilla.cfg, uncomment line 12, 13, 14 and at line 13 change newTabURL_ to the local page location or any other URL.

Script Installation

Clone the repository and enter folder:

$ git clone https://github.com/PROxZIMA/Sweet-Pop.git && cd Sweet-Pop

Run installation script

This script will lookup default Firefox profile location and install the theme with default configurations.
Linux/MacOS
```
$ ./programs/install.sh # Standard
$ ./programs/install.sh -f ~/.var/app/org.mozilla.firefox/.mozilla/firefox # Flatpak
```
Windows
```
> programs\install.bat REM Standard
> programs\install.bat -e -b "C:\Program Files (x86)\Mozilla Firefox" REM Disable fx-autoconfig and Custom binary folder
```
Script options
- -b <binary_folder> optional
  - Set custom Firefox binary folder path, for example /usr/lib32/firefox
  - Default: Auto detects in linux. C:\Program Files\Mozilla Firefox in windows
- -f <firefox_folder> optional
  - Set custom Firefox folder path, for example ~/.mozilla/icecat/
  - Default: ~/.mozilla/firefox/ in linux. %APPDATA%\Mozilla\Firefox in windows
- -p <profile_name> optional
  - Set custom profile name, for example 4htgy4pu.app
  - Default: Profile folder name found in profiles.ini at ->
```
[Install4F96D1932A9F858E]
Default=1yrah0xg.default-release
Locked=1
```
- -e optional
  - Install fx-autoconfig
  - Runs sudo to copy mozilla.cfg and local-settings.js to Application Binary folder
  - Default: True
- -h optional
  - Shows help message with flags info

Curl based Installation

You can also install this theme with one command:

Linux/MacOS

$ curl -s -o- https://raw.githubusercontent.com/PROxZIMA/Sweet-Pop/master/programs/install-curl.sh | bash # Standard
$ curl -s -o- https://raw.githubusercontent.com/PROxZIMA/Sweet-Pop/master/programs/install-curl.sh | bash -s -- -f ~/.var/app/org.mozilla.firefox/.mozilla/firefox # Flatpak

Windows

> curl -sL "https://raw.githubusercontent.com/PROxZIMA/Sweet-Pop/master/programs/install-curl.bat" > %TEMP%\install-curl.bat && %TEMP%\install-curl.bat REM Standard
> curl -sL "https://raw.githubusercontent.com/PROxZIMA/Sweet-Pop/master/programs/install-curl.bat" > %TEMP%\install-curl.bat && %TEMP%\install-curl.bat -b "C:\Program Files (x86)\Mozilla Firefox" REM Custom binary folder

This will download the master branch and run the installation script. mozilla.cfg can be configured after complete installation

Manual Installation

Open about:support in new tab and click Open Directory near Profile Directory.
Open this directory in terminal and clone the repository

Note: If you already have a chrome folder under Profile Directory, rename it to chrome_bak or anything else to preserve your old theme.
```
$ cd {Your profile directory}

$ git clone https://github.com/PROxZIMA/Sweet-Pop.git chrome

$ cd chrome
```

Install boot.jsm file from fx-autoconfig in the chrome/utils folder (make sure it matches above Folder Structure).

$ curl -sL "https://raw.githubusercontent.com/MrOtherGuy/fx-autoconfig/master/profile/chrome/utils/boot.jsm" > "utils/boot.jsm"

Move user.js, mozilla.cfg and local-settings.js to their destination.

Linux

about:support > Application Binary > {Installation folder}firefox-bin
Generally Installation folder is /usr/lib/firefox/

$ ln -s "`pwd`/programs/user.js" ../user.js

$ cp ./programs/mozilla.cfg /usr/lib/firefox/

$ cp ./programs/local-settings.js /usr/lib/firefox/defaults/pref/

MacOS

about:support > Application Binary > {Installation folder}firefox
Generally Installation folder is /Applications/Firefox.app/Contents/MacOS/ (Firefox Nightly for Nightly version)

For MacOS, our destination folder is /Applications/Firefox.app/Contents/Resources/

$ ln -s "`pwd`/programs/user.js" ../user.js

$ cp ./programs/mozilla.cfg /Applications/Firefox.app/Contents/Resources/

$ cp ./programs/local-settings.js /Applications/Firefox.app/Contents/Resources/defaults/pref/

Windows

about:support > Application Binary > {Installation folder}firefox.exe
Generally Installation folder is C:\Program Files\Mozilla Firefox\

> mklink ..\user.js "%cd%\programs\user.js"

> copy .\programs\mozilla.cfg "C:\Program Files\Mozilla Firefox\"

> copy .\programs\local-settings.js "C:\Program Files\Mozilla Firefox\defaults\pref\"

Download navbarToolbarButtonSlider.uc.js and place it in script folder along with hideScrollbar.uc.js.

$ curl -sL "https://raw.githubusercontent.com/aminomancer/uc.css.js/master/JS/navbarToolbarButtonSlider.uc.js" > "script/navbarToolbarButtonSlider.uc.js"

Follow-up changes

In Firefox
- Right click hamburger button > customize toolbar disable Title Bar, Drag Space.
- Remove Flexible Space from urlbar.
- Set Density to Compact/Normal/Touch and Themes to Dark or Light (Compact is buggy in Windows).
Open about:support > Clear startup cache... > Restart twice
Voilà

Configuration

programs/user.js contains user preferences that are automatically loaded at startup. So no need to manually set them during installation
You can set any background in the toolbox. Edit --tabbar-gradient-color in userChrome.css to a static color or linear-background or any SVG ¯\_༼ •́ ͜ʖ •̀ ༽_/¯.
You can change --tab-radius and --tab-border-width to increase/decrease tab border radius and width respectively to match normal and touch density.
Hide menu icons by commenting Line 9 in userChrome.css.
You can disable any of the script/*.uc.js from Toolbar Menu > Tools > userscripts > script. Restart twice, every time you enable/disable the script.
You can also edit hideScrollbar.uc.js to customize the scrollbars according to your taste.
For adding your own customizations make changes in myChanges.css file under css folder.
If something breaks on your system then please raise a issue
@ArataKamikaze mentioned in #5 that Firefox Color breaks/overwrite existing theme so disable the extension if you face similar issue.

Credits

I started with this amazing material theme : MaterialFox by muckSponge
One of the best dark theme for Firefox : ShadowFox by overdodactyl
Floating Toolbox : u/oldworlds
Theme inspiration by u/SENDMEJUDES
u/It_Was_The_Other_Guy helped me a lot on r/FirefoxCSS
Also this theme uses his fx-autoconfig to load the javascripts files.
navbarToolbarButtonSlider.uc.js script by u/MotherStylus adds button slider to navbar toolbar. More details here
Setting local page as homepage
Auto hide scrollbars : details here by u/mimecry
Prism: A minimalist, beautiful startpage forked from Prismatic Night
Installation script details.

Stargazers over time

Made with ❤️

ARIGATOU

Open Source Agenda is not affiliated with "Sweet Pop" Project. README Source: PROxZIMA/Sweet-Pop

Stars

240

Open Issues

Last Commit

1 year ago

Repository

PROxZIMA/Sweet-Pop

License

MIT

Homepage

https://proxzima.dev/Sweet-Pop/

Open Source Agenda Badge

<a href="https://www.opensourceagenda.com/projects/sweet-pop"><img src="https://www.opensourceagenda.com/projects/sweet-pop/reviews/badge.svg" alt="Open Source Agenda"></a>

Submit Review Review Your Favorite Project

Submit Resource Articles, Courses, Videos

Submit Article Submit a post to our blog