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

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!

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.

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!

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

My mistake - wrong repo.

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

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