HN user

black7375

524 karma
Posts5
Comments29
View on HN

In the middle of the article, there is a brief discussion about icons and colors. I also think that well-coordinated color icons are good for readability and usability.

https://github.com/black7375/Firefox-UI-Fix/wiki/%5BArticle%...

However, it is difficult to apply it universally to support a variety of colors. If it is similar to the background color, it is difficult to distinguish and there may be contrast issues depending on the light/dark theme. I think it's just the ease of development of a solid color icon that matches the color of the text.

The UI is definitely a matter of taste, which is why I created the distribution in three different shapes.

However, it was confusing that when muting, there was no indication that it was loading or there was no tab separator.

- Option

As a first anniversary update, an option system is introduced.

Everything can be configured with 100+ options and changes to a unopinionated theme.

- Customize

To enhance customization, we changed the folder structure and updated the installation script.

If there are any changes: Run `git stash` and `git stash pop` before and after `git pull`. If there are `user-overrides.js`, `userChrome-overrides.css`, and `userContent-overrides.css` files, proceed with override

- Developement

The Pure CSS file has been changed to SCSS. Therefore, it becomes more structured, and the compatibility response has become easier.

Developer documents have been added to facilitate development, and discussions have been activated.

The default value is always necessary, so it is worth studying. However, I agree that the different preferences should not undermine the possibility of customization.

I'm making a firefox custom theme, and researching the UI/UX history of Firefox.

1. Early (v1 ~ v3)

v1~v3 are classic UI that we remember when we were in the early 2000s.

Features

- Clear as the icons do only one thing

- Unique color for each icon

Limits

- Not fused with OS UI

- UI height

- Contrary to the modern interface philosophy as there is no abstraction

- Inconsistent icon size and texture

2. Classic (v4, 2016.10)

Thus, v4.0 was released after a large-scale UI reconstruction project was launched!!

It is the longest-lived UI and loved by many people.

Commonly called a Classic theme.

Features

- Orange app button at the top left like the symbol

- Calmer tone

- Win7 Aero Glass support

- Stop / Reload / Go with one button

- Tab moved to the top

Limits

- Unfamiliar interface with large-scale changes

3. Australis (v29, 2014.04)

Australis, which had a lot of likes and dislikes compared to Proton UI.

It was a change that put a lot of effort into simplicity.

Features

- Curved Tab

- Drag & Drop customizing UI

- Change settings UI pop-up to contents(tab) format

- Animation

Limits

- Panel UI that looks like a tablet

- Remove status bar

4. Photon (v57, 2017)

Photon was a generally well-received update to the UI that was used until June of this year(2021), when Proton appeared.

Features

- Components: List based panel and page actions, library menu

- Animation: Add animation to actions of buttons, tabs, panels, etc.

- Visual redesign: tabs, icons, density, etc.

- Performance: improved initialization, synchronization reflow, etc.

Limits

- It looks a bit complicated

- Only light weight themes are allowed.

5. Proton (v89, 2021.06)

This is the moment I started working on themes.

Features

- Neatly organized menu

- Icon that are pretty enough to remind of the edge

- Some of animations that I like & skeleton screens

- Stylish color scheme

- Moderate rounding

- Meticulous implementation

Limits

- Excessively wide padding

- Remove icons from menu

- Feels like a button rather than a tab with a connected look

- Confusion of tab indicators

- Remove page action menu in address bar

- Delete bookmarks / library animations and illustrations

- The icon size of the new tab contents

- Changed the search bar of the new tab to be performed on the URL bar.

Yes. I am it's author. Thank you for your interest

=== Some introduction about this.

Proton(https://wiki.mozilla.org/Firefox/Proton)Firefox’s new design released June.01 Photon is 88 or lower design.

Proton’s overall feel is good, but there were a few things I didn’t like and wanted to improve.

- Padding gaps are wide

- Remove icons from panel

- A tab that looks like a button

- Tab indicators (Ex. Only one of the favicon and sound icon is displayed)

I've improved all of these things.

- Padding & Icon: https://github.com/black7375/Firefox-UI-Fix#padding-comparis...

- Tab Indicators: https://github.com/black7375/Firefox-UI-Fix/wiki/Screenshots...

I've also provided a version for those who like Photon.

- https://github.com/black7375/Firefox-UI-Fix/tree/photon-styl...

Experimental legacy edge like hover effect feature: https://user-images.githubusercontent.com/25581533/118779970...

- https://github.com/black7375/Firefox-UI-Fix/tree/interactive...