search

uBlockOrigin / uBlock-issues

This is the community-maintained issue tracker for uBlock Origin
https://github.com/gorhill/uBlock
937 stars 79 forks source link

UI modernization #792

Closed alectrocute closed 4 years ago

alectrocute commented 4 years ago

Prerequisites

Description

Hi uBlock Origin team & contributors!

Having read the past issue history regarding UI changes, refactoring and all associated debate - I am carefully treading into a UI modernization project. My work, if accepted by the status quo, is not aimed at giving the UI a makeover. This is just giving the UI some advice on how to apply its "makeup". ;)

My PR's will be done in small chunks, facelifting on a per-component basis. For example, buttons. Or tabs. I am NOT modifying any Javascript source, and the only HTML modified is the addition of CSS classes / stylesheet tags only if absolutely necessary. If possible, I will try to reduce classes in favor of semantic styles, via the tag itself. For example, all <input> tags automatically have the style applied. No external libraries. No frameworks. No bloat.

The current production release UI works. I like it. You like it. The CSS just needs small tweaks to bring it up to speed for year 2020. My goal with this project, is to make uBlock Origin's UI as beautiful as possible without sacrificing its familiar layout, to both the user and developers. My secondary goal is to simplify the source CSS as much as possible and introduce a semantic mindset (to reduce amount of style classes, ID's, etc.). Eventually, this will allow the contributors to write (or generate via JS) simple, plain HTML and not worry about styling, as the stylesheets will automatically apply to tags without the use of classes.

Most users won't notice this change, but over the course of a year or two - we could gradually ease in a really beautiful design overhaul!

Currently, the first PR would only be the settings UI:

The biggest change would be the usage of the fantastic open-source interface-focused typeface, Inter. It's so legible, nicely spaced and feels native!

9

Note the modernized tabs (flat, simple, accessible, spaced out to pixel perfection) -

1

The checkboxes are redesigned with pure CSS, accessible-first, featuring a small animated (via CSS's transition) micro-interaction and feature uBlock Origin's iconic red color accent -

The buttons have a new coat of paint and are simplified -

And here's a preview of all the pages which have a visual facelift -

2 3 4 5

Cleaned up the about page and added branding -

6

Minor spacing tweaks for advanced settings -

7

Obviously, it's crucial that it scales nicely -

8

The repo for a proposed PR can be found here: https://github.com/alectrocute/uBlock-ui-facelift

Let me know what I can do to move forward, if possible! Thank you so much, contributors and @gorhill! Cheers.

A specific URL where the issue occurs

[N/A]

Steps to Reproduce

  1. Have free time.
  2. Love web design.
  3. Be longtime fan of uBlock and wish to contribute.
  4. ???
  5. Profit!

Expected behavior:

[N/A]

Actual behavior:

[N/A]

Your environment

gwarser commented 4 years ago

First thing I noticed - do not change coding style - brackets, colors, indentation representation - this only creates noise in your changes.

alectrocute commented 4 years ago

First thing I noticed - do not change coding style - brackets, colors representation - this only creates noise in your changes.

Whoops. Good call, I apparently had formatOnSave enabled on my IDE. I'll disable for any future change!

gwarser commented 4 years ago

Lots of new fonts - this is completely unacceptable.

alectrocute commented 4 years ago

Lots of new fonts - this is completely unacceptable.

Yes, that is the Inter font family. I can limit the bundled fonts to three weights if there is concern over the added load.

gwarser commented 4 years ago

Right now package size increased from 2.5 to 7.5 megabytes - you should definitely do cleaning.

alectrocute commented 4 years ago

Right now package size increased from 2.5 to 7.5 megabytes - you should definitely do cleaning.

Absolutely, I'll get that done today and will readjust the formatting back to its pre-re-formatted glory!

alectrocute commented 4 years ago

@gwarser I've pushed the changes. Please kindly let me know your thoughts and any further instructions on getting it up to speed. Cheers!

ahydronous commented 4 years ago

It might just be me, but why not just use the system/browser default font instead of a custom font? Many people find it slightly jarring when one sub-part of their system suddenly uses a different font than the rest, and you gain some space savings as well!

gwarser commented 4 years ago

~Your repo is completely desynchronized. What happened? I cannot compare changes.~

My mistake - wrong repo.

Vagmer commented 4 years ago

My feedback on future UI work:

gwarser commented 4 years ago

@alectrocute code formatting is still broken. Reformat to gorhill style or reapply your changes on original code.

Sorry guys, but don't get your hopes up about these changes. There are more important things to do in uBO code than subjective look.

uBlock-user commented 4 years ago

That's why I kept the label as something to address instead of enhancement as I don't think this willget merged as the "version" OP intended.

Vagmer commented 4 years ago

Sorry guys, but don't get your hopes up about these changes. There are more important things to do in uBO code than subjective look.

This does make sense, so I fully understand. Though, if other volunteers are willing to do this work...?

3rd option I had mentioned might allow a relatively quick and easy out here, to essentially 'fix' this issue with little dev effort (allow user a custom advanced-settings box to freely apply his own desired CSS with, at own peril). At most you could edit the UI HTML a bit to make it easier to identify some elements by adding some classes and ids to simplify new CSS, though even that is not strictly necessary considering how powerful CSS selector usage can be. I saw that Violentmonkey already includes this approach in its settings, so not really my idea... this might very well be a simple net plus to just about every extension.

uBlock-user commented 4 years ago

allow user a custom advanced-settings box to freely apply his own desired CSS with, at own peril)

Yes, that's the one me and gwarser are on the side of in team discussion about this. Just like the option ViolentMonkey offers but only for advanced users, so they know what they're doing and if they mess up, they will be responsible for undoing it.

alectrocute commented 4 years ago

I'd be willing to contribute the night color schema & detection functionality when I fix the code formatting. Let me know if that would be desirable. Cheers!

jawz101 commented 4 years ago

I don't like giving feedback because everyone has an opinion which is hard for a designer to contend with sometimes.... but I will. And I'm not a web designer but whatever.

Personally, when I see filled boxes instead of checkmarks I think it's what is called an "intermediate checkbox". That is, I need to click it an extra time because it's not completely enabled or some things underneath it are checked while others are not. example, another, other image examples. At some point I would accept it as normal but it's not consistent with "standard" user interface practices.

I'm usually a fan of ui improvements but I do like the utility look of uBO. If it looked too native I wouldn't think it's bolted on and doing something. If there is a technical benefit - go for it. But if it blends in with the browser's ui too well, subconsciously it feels like it doesn't do as much if that makes sense. Tools are a little ugly.

But I don't want to discourage because I do like that shiny new car feel. If we're going for look, I prefer something that feels like "function over form." Like between this and this for some reason I think MSE looks more serious.

alectrocute commented 4 years ago

@jawz101 Thank you for your input. I feel that you bring up a valid point regarding the intermediate checkbox. I will start researching the best and most accessible practices for the checkbox component and rebuild.

Regarding your point of uBO's look, I slightly disagree. My idea of blending into the web browser would be detecting the browser brand, hijacking the browser's CSS files and copying the menu layouts, elements, etc. so it actually looks native. The look and style provided here are different and individual to the proposed brand "look". Of course, design is subjective and you're fully within your rights to think my work is walrus manure, but I don't believe in the "tools are a little ugly" philosophy. I think they can be pretty. Perhaps the current CSS is of sentimental value (as it is to myself included)?

jawz101 commented 4 years ago

Oh please don't take it negatively. I think your work looks great. I just wanted to give a little bit of opinion. The checkbox thingy was a critique and the rest was just food for thought. I like seeing where people take things. I'm in the ui probably 30 times a day tinkering or looking at logs. With any ui change I always get feedback for a couple of weeks until people get used to the new thing. It really doesn't matter what I think as it does to the person who is happy with what they make. After a couple of weeks on it I might think "this needs more cowbell."

I kinda wish you'd tackle NoScript's ui as well. There's looks like a turd and a couple of years ago after the rerelease I was on their forums providing crude scratchpad mockups and someone stepped in with this beautiful, native-looking mockup that unfortunately didn't catch Maone's eye.

I could be wrong and if it was pulling in native ui elements that might be a cool thing to see in an add-on. Especially with uBlock's popularity, it might inspire other addons to wonder "hey how did you do that?" which would be a nice development for a lot of extensions. Looking at it again, yours doesn't really stray from the original design at all. It's just looks like a subtle change in look but, more importantly, gives room for better maintenance.

h1z1 commented 4 years ago

It's one of the "busiest" interfaces I've ever seen tbh and I wouldn't have it any other way. The main dashboard afaic intentionally allows direct access to many things and in a compact form so people do not have to click around.

One other really important thing is addons should NOT "blend in" with the browser both from a security perspective and quite simply it's a slap in the face since half the reason addons exist at all is because of stupid decisions made by vendors.

Having said that there certainly are some things that could be tweaked especially wrt scaling. The checkmark on checkboxes for example do not.

1Untitled

Jookia commented 4 years ago

I'm a random Internet stranger, but I use uBlock and if this is merged I imagine I'd complain later so it's better now while changes can be made ;)

  1. I don't understand what you've replaced checkboxes with. Do they work the same? What wrong wrong with the original checkboxes?
  2. Reducing contrast makes it harder to read. I have to strain to read some of the buttons now or see that there are checkboxes since they blend in with the background as there's no square border. I can barely see some of them depending on the viewing angle of my screen, and it hurts in general.
  3. I haven't tried the version of your add-on, but will the checkbox animations slow down on low-end systems without GPU acceleration?
Jap2-0 commented 4 years ago

My thoughts:

jarching commented 4 years ago

It doesn't look any different to a layman, sorry

alectrocute commented 4 years ago

@Jap2-0 Great thoughts. I've had a month, or two, to dwell over this PR and I think I'm going to take your checkbox idea into mind. It definitely looks like a half check, as mentioned by others. It's bad UI practice. I'll fix it accordingly. Thank you!

alectrocute commented 4 years ago

@Jookia Re: animations & rendering: The resources used would be negligible and I'd be impressed if one could even calculate the difference in speed between the native transitions in the browser's default stylesheet and the non-native one.

Your contrast point is a good one that I, and other designers, need to take into account. The contrast isn't quite there in my PR, and I'll change this accordingly. Cheers.

loligans commented 4 years ago

I would reconsider using red as it is not a good option for people who are colorblind (If you are colorblind please share your thoughts). Also I would focus the UI Changes to quality of life changes. My two suggestions are as follows:

  1. A dark theme should be applied when a browser prefers the dark theme. As a user I would like the uBlock Origin UI to adapt its theme to whatever the browsers prefers-color-scheme has been set to. Find out more about prefers-color-scheme here. It is supported by all major browsers.

  2. A button should be added to the top of each Filter List group, when it is clicked it will apply all filters in that group. As a user I would like to be able to quickly apply groups of Filters. image

resynth1943 commented 4 years ago

If you're looking to decrease the file size of your fonts, would subfont be of any use to you? It removes unnecessary glpyhs from your fonts. Just thought I'd chime in, take it or leave it. :stuck_out_tongue_closed_eyes:

resynth1943 commented 4 years ago

That's a shame, it was a nice offer and a really good idea. Thank you, OP, for taking the time to create this issue, and this idea. ♥️ Appreciate it.

liamengland1 commented 4 years ago

Why closed...

uBlock-user commented 4 years ago

Months ago gorhill addressed in team discussion, that he's not going to address any UI redesign suggestions, so there's no point in keeping it open.