Firefox-UI-Fix

Firefox-UI-Fix copied to clipboard

• Lepton (old name: Proton Fix) :PROPERTIES: :TOC: :include all :END:

Table of Contents :CONTENTS:

• [[#lepton-old-name-proton-fix][Lepton (old name: Proton Fix)]]
  • [[#introduction][Introduction]]
  • [[#installation-guide][Installation Guide]]
  • [[#why-proton][WHY Proton?]]
  • [[#why-not-proton][WHY Not Proton?]]
  • [[#padding-comparisons][Padding Comparisons]]
  • [[#contributors][Contributors]]
  • [[#faq][FAQ]] :END:

🔔🔔 Did you set a custom, but not work?

You should copy [[./user.js][ ~user.js~ ]] file before the theme works.

The option system depends on user configuration, and nothing applies without settings. \ Also, real-time changes are difficult for [[./docs/Restrictions.md#supports][technical limitations]] and require restarts.

Some settings [[https://github.com/black7375/Firefox-UI-Fix/wiki/Options#using-userjs][can be conflict]] and should be explicitly =false=.

** Introduction [[https://wiki.mozilla.org/Firefox/Proton][Proton]] is Firefox's new design, starting from Firefox 89. \ [[https://design.firefox.com/photon/][Photon]] is the old design of Firefox which was used until version 88.

Proton's [[#why-proton][overall feel is good]], but there were a few things I [[#why-not-proton][didn't like]] and wanted to improve. \ That's why this project was born, and Lepton to denote light theme layer.

/Disclaimer:/ It works on Firefox 89 and above!! | Wiki | | | | | | [[https://github.com/black7375/Firefox-UI-Fix/wiki/Installation-Guide][Installation Guide]] | [[https://github.com/black7375/Firefox-UI-Fix/wiki/Screenshots][Screenshots]] | [[https://github.com/black7375/Firefox-UI-Fix/wiki/Options][Options]] | [[https://github.com/black7375/Firefox-UI-Fix/wiki/Compatibility-Issues-Solution][Compatibility Issues Solution]] | [[https://github.com/black7375/Firefox-UI-Fix/wiki/Tips][Tips]] |

[[https://user-images.githubusercontent.com/25581533/119774062-20942280-beb1-11eb-80aa-c18dd52f18d7.png]]

(Lepton's design :arrow_up:)

@@html:

• Color
  • Default light/dark theme contrast enhancement
  • Colorful context menu
  • More dark mode support
  • GTK system theme support
  • Windows system theme support
  • Mac system theme support
  • Windows7 compatibility
• Icons
  • Panel
  • Context Menu
  • Global Menu
  • Library's open context
  • Video Player
• Padding Narrower
  • Tab
  • Panel
  • Menu
  • Density
  • Others...
• Tab Design
  • General:
    • Connect with toolbar(Buttons like tabs)
  • Selected:
    • Box Shadow: Highlight the selected tab
    • Bottom Rounding: Natural
  • MultiSelected
    • Adjust Color: Easily recognizable.
  • Unselect:
    • Divide Line: React to hover like chrome
  • Unloaded:
    • Dimmed: Looks like inactive
  • Clipped:
    • Clearer Text: Adjusted clipped gradation
    • Closed Button: Visible on hover
  • Sound:
    • Remove Second Label
    • Show Favicon: Always show favicon
    • PIP Icon
  • Container Tab:
    • Highlight line position: Displayed under tab.
• Button Design
  • New tab: Looks like tab
• Activity Stream Design
  • Search Bar:
    • Focused Shadow: Same as the accent color
    • Hand off to Awesomebar
  • Icons:
    • Size: Fill(Changes dynamically to your size)
• Error Page Design
  • Illustrations: Restore error page illustrations
• Video Player
  • Background Style
  • Size at fullscreen
• Fullscreen
  • Overlap mode
• Others
  • Animations
  • Activate calculator at address bar
  • Mouse pointer for each context

@@html:@@

** Installation Guide

Script Installation (experimental)

Linux, mac users: #+BEGIN_SRC bash bash -c "$(curl -fsSL https://raw.githubusercontent.com/black7375/Firefox-UI-Fix/master/install.sh)" #+END_SRC

Windows users: Run with powershell ([[https://github.com/black7375/Firefox-UI-Fix/wiki/Compatibility-Issues-Solution#windows-7-powershell-script-not-works][Does not work at Win7?]]) #+BEGIN_SRC powershell Powershell -c "Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iwr https://raw.githubusercontent.com/black7375/Firefox-UI-Fix/master/install.ps1 -useb | iex" #+END_SRC

Manual Installation

You can see the [[https://github.com/black7375/Firefox-UI-Fix/wiki/Installation-Guide][installation guide]] with screenshots on the wiki.

1. Download files
   • Click the green ":arrow_down: Code"-button above
   • Select ":package: Download Zip"
2. Find your profile directory
   • Open =about:support= in a new tab
   • Find the =Profile Folder= entry and click the =Open Folder= button
3. Copy downloaded files
   • Extract the downloaded zip file
   • Copy the =user.js= file to the previously opened profile directory
   • Create a new directory inside your profile directory called =chrome=
   • Copy the remaining files from the extracted zip-file into previously created the =chrome= directory
4. Restart Firefox
   • Click the =Clear startup cache...= at the top of =about:support=

If you prefer Photon, see [[https://github.com/black7375/Firefox-UI-Fix/tree/photon-style][Lepton's photon-style]].\ If you prefer Proton, see [[https://github.com/black7375/Firefox-UI-Fix/tree/proton-style][Lepton's proton-style]].

** WHY Proton? I think a lot has improved.

[[https://user-images.githubusercontent.com/25581533/119773764-a6639e00-beb0-11eb-8023-498b6293c4b2.png]]

(Proton's design :arrow_up:)

• Neatly organized menu
• Icon beautiful enough to remind you of Edge
• Nice color scheme
• Satisfied Rounding
• Modal window & Scrollbar!!

** WHY Not Proton? However, there are also many flaws.

[[https://user-images.githubusercontent.com/25581533/119773812-b5e2e700-beb0-11eb-923c-55ae1a8ca249.png]]

(Photon's design :arrow_up:)

• Is it a tab or a button?
• Where are the menu icons?
• Icons in ActivityStream are too small
• Padding gaps are wide
• :warning: Address bar 3-point menu, screenshot moves to toolbar (can't fix)

** Padding Comparisons [[https://user-images.githubusercontent.com/25581533/120262626-8c97d180-c289-11eb-87a6-68e285d6d77c.png]] [[https://user-images.githubusercontent.com/25581533/120253257-6ae11f00-c276-11eb-93cf-393f9845f30b.png]] [[https://user-images.githubusercontent.com/25581533/118402352-1e33fc00-b659-11eb-89fc-3cb38207fe39.png]] [[https://user-images.githubusercontent.com/25581533/124066951-0eb21c00-da29-11eb-9ac4-c6b82a268c6f.png]]

• Photon (Quantum)
• Proton
• Lepton

** Contributors

Thanks to all contributors to this project for providing help and developing features!

[[https://github.com/black7375/Firefox-UI-Fix/graphs/contributors][@@html:@@]]

A list of all contributors can be found in [[./CREDITS][CREDITS]].

** FAQ

• Black pixels around the selected tab bottom corners \ [[https://user-images.githubusercontent.com/5571586/120401980-edf58a00-c2f5-11eb-9e64-ce50c5b189b2.png]]

Please follow the [[https://github.com/black7375/Firefox-UI-Fix/wiki/Installation-Guide][Installation Guide]], \ or set =about:config='s =svg.context-properties.content.enabled= to =true= .

• The closed button and some panel menu icons are not visible. \ [[https://user-images.githubusercontent.com/77958663/130395848-7af58241-bbbf-4273-bb62-14382c44098d.png]] [[https://user-images.githubusercontent.com/25581533/120487528-93b40200-c3a5-11eb-98ad-3498beb9f38e.png]]

Please follow the [[https://github.com/black7375/Firefox-UI-Fix/wiki/Installation-Guide][Installation Guide]], \ or copy the =icons= directory to =chrome= .

• Less icons in the panel with photon-style\ [[https://user-images.githubusercontent.com/25581533/123761424-5746c980-d8b1-11eb-9a0f-83fb305f9f08.png]] [[https://user-images.githubusercontent.com/25581533/123762962-d4bf0980-d8b2-11eb-8492-d497d330c72a.png]]

  I didn't put all the icons like before.\ [[https://user-images.githubusercontent.com/25581533/123602947-dd4b0d80-d7e8-11eb-93a6-2b263bdd99f7.png]]