• Firefox UI FIX
  • How to Install?
  • WHY Proton?
  • WHY Not Proton?
  • Padding Comparisons

Firefox UI FIX

proton is firefox's new design.
I want to fix some flaws.

Wiki:Compatibility Issues Solution

(Fixed proton design)

• Padding Narrower

  • Tab
  • Panel
  • Menu

• Tab Design

  • General:

    • Connect with toolbar(Buttons like tabs)

  • Selected:

    • Box Shadow: Highlight the selected tab

  • Unselect:

    • Divide Line: React to hover like chrome

  • Clipped:

    • Cleary Text: Adjusted clipped gradation

  • Sound:

    • Show Favicon: Always show favicon

• Activity Stream Design

  • Search Bar:

    • Focused Shadow: Same as the accent color

  • Icons:

    • Size: Fill it up

How to Install?

1. Enable userChrome.css Support.

   • Go to about:config
   • toolkit.legacyUserProfileCustomizations.stylesheets to true
   • svg.context-properties.content.enabled to true

2. Find Profile Directory.

   • Go to about:support
   • Open Profile Directory

3. Copy File

   • create chrome directory at profile
   • copy files
4. Restart

WHY Proton?

I think a lot has improved.

(pure proton design)

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

WHY Not Proton?

However, there are also many flaws.

(proton before design)

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

Padding Comparisons

• Photon (Quantum)
• Proton
• Proton Fix