UI modernization

[alectrocute]

Prerequisites

• I verified that this is not a filter issue
  • Filter issues MUST be reported at filter issue tracker
• This is not a support issue or a question
  • Support issues and questions are handled at /r/uBlockOrigin
• I performed a cursory search of the issue tracker to avoid opening a duplicate issue
  • Your issue may already be reported.
• I tried to reproduce the issue when...
  • uBlock Origin is the only extension
  • uBlock Origin with default lists/settings
  • using a new, unmodified browser profile
• I am running the latest version of uBlock Origin
• I checked the documentation to understand that the issue I report is not a normal behavior

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!

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

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 -

Cleaned up the about page and added branding -

Minor spacing tweaks for advanced settings -

Obviously, it's crucial that it scales nicely -

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

• uBlock Origin version: v1.23.0
• Browser Name and version: Google Chrome, Version 78.0.3904.97 (Official Build) (64-bit)
• Operating System and version: Microsoft Windows 10, latest

[gwarser]

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

[alectrocute]

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]

Lots of new fonts - this is completely unacceptable.

[alectrocute]

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]

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

[alectrocute]

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]

@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]

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!

[Vagmer]

My feedback on future UI work:

• There should be a dark theme, implicitly (automatically) activated if the user prefers it, via prefers-color-scheme, along with a user setting in uBo options that allows explicitly overriding that and choosing a theme. If we're actually going ahead with mentioning keywords like "modern", "up to speed" and "2020", then this is already needed, as browsers and OSs already widely include native dark themes. It doesn't need to be anything fancy or special, just prevent "eye blinding" of users by white or near-white colors at night who have everything else on their screen already displayed as dark. It's possible to also offer separate "dark" and "black" themes if you wish.

• I've no real problem with using or including custom fonts, as long as they are lightweight (issue already discussed) and still fairly "normal looking"/non-jarring. But if you do then there needs to be a simple option in settings to turn them off and revert to other font / default / system font. This alleviates ahydronous' concern above.

• uBo: hidden away somewhere under 'advanced user' or 'advanced options', there should be a checkbox to enable the use of an additional textarea labelled "Custom CSS". Valid CSS (might be a consideration to sanitize to make sure it's only CSS or care taken if needed to reduce potential use for JS execution, CSS vulnerabilties or malware behavior enabled by "copy & paste social engineering attacks") entered here would be injected at the end of all or almost all uBo extension pages, popups, etc. This would be provided with little or no (official uBo) warranty and will come with such a warning, just a quick, great boon to the end-user with little effort.
  To be explicit, the effect here is that (advanced) users are all enabled to create their own whole custom themes (and potentially layouts) or just small style overrides, and all users can share or use others' custom styles. Unfortunately even for a user with extensions like Violentmonkey or Stylus installed this is not currently possible as it is on webpages, as the browser prevents such an extension from running on other extensions' pages for security reasons.

[gwarser]

@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]

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]

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]

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]

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]

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]

@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]

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]

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.

[Jookia]

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]

My thoughts:

• Most of the changes I like.
• I'm not against changing the font, but I'm not sure of the necessity.
• I definitely prefer the checkboxes as they are, because the new design both looks like a "partially checked" box (as mentioned above) and because it just seems less clear that it's a checkbox. Or, maybe that's just me trying to explain personal preference.

[jarching]

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

[alectrocute]

@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]

@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]

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.
   

[resynth1943]

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

[resynth1943]

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]

Why closed...

[uBlock-user]

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.