Firefox-UI-Fix/README.org
2021-04-30 12:31:31 +09:00

1.9 KiB

Firefox UI FIX

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

Currently work only dark theme. https://user-images.githubusercontent.com/25581533/116639755-c313c100-a958-11eb-9ed4-e4366c3061cf.png

(Fixed proton design)

  • 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

WHY Proton?

I think a lot has improved.

https://user-images.githubusercontent.com/25581533/116493283-ecb3e600-a88d-11eb-8cf4-d1cf428dbb0e.png

(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.

https://user-images.githubusercontent.com/25581533/116494039-86c85e00-a88f-11eb-8bb5-986fc464a149.png

(proton before design)

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

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