/Firefox-Proton-Square

Makes Firefox Proton UI look and feel like Quantum

Primary LanguageCSSGNU General Public License v3.0GPL-3.0

Firefox Proton Square

Below is adapted from a fork of Lepton. All contents belong to the original owners, with additional tweaks added to my own preference, and allowing updates from Lepton to be merged.

https://github.com/leadweedy/Firefox-Proton-Square/blob/main/ff_protonbutquantum.png If you are like me and hate rounded tabs, this is for you.

Overall I understand why Mozilla went the direction they did with Proton to “modernize” the UI, but not to say that I have to like it.

These tweaks attempt to recreate the feel of Quantum with its squared tabs and menus, but in the Proton UI.

Introduction

Proton is Firefox’s new design, starting from Firefox 89.
Photon is the old design of Firefox which was used until version 88.

Proton’s overall feel is good, but there were a few things I didn’t like and wanted to improve.
That’s why this project was born, and Lepton to denote light theme layer.

Disclaimer: It works Firefox 89 and above!!

Wiki
Installation GuideScreenshotsCompatibility Issues SolutionTips

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

(Lepton’s design ⬆️)

  • Color
    • Windows system theme support
  • Icons
    • Panel
  • Padding Narrower
    • Tab
    • Panel
    • Menu
    • Density
  • Tab Design
    • General:
      • Connect with toolbar(Buttons like tabs)
      • Square corners
      • No spacer on left tab bar when windowed
    • Selected:
      • Add colored tab context line above selected tab
    • Unselected:
      • Divide Line: full height and colored like Quantum
      • Remove white space between tabs
  • Menu Design
    • General:
      • Square corners on most popup menus

Suggested Tweaks (about:config)

  • set browser.tabs.tabMinWidth to 150 px or desired width
  • set widget.non-native-theme.gtk.scrollbar.round-thumb to false to square the scrollbar (linux only)
  • change layout.css.devPixelsPerPx to scale the whole browser (1.0 represents 100% scaling)

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/116781623-930d1080-aa73-11eb-8fc7-14c238b73bfe.png

  • Photon (Quantum)
  • Proton
  • Lepton