UI improvements for Firefox add-on running on Android

[shytikov]

Describe the issue

This is cosmetic issue I'm using uBlock Origin on Android Firefox. I don't know, is it possible come up with some adjustments on how uBlock elements look like on mobile, but it would be nice to have them optimized for mobile use.

Now I have FullHD screen and I can live with it, but previously with smaller screens it was unbelievably painful.

Note huge white space areas, and some missing descriptions for a checkboxes. Also on status popup you can see elements that could not be used for mobile phone, like eyedropper. Ok, they could be used... probably, but due to small screen it would be painful. So on my opinion they should not be displayed at all.

I don't know is it supported, but it would be nice to have add-on determine, is it running on mobile or desktop and provide user corresponding UI.

Screenshot in which the issue can be seen

Steps for anyone to reproduce the issue

1. Install Firefox on Android phone;
2. Install uBlock Origin to Firefox;
3. Open uBlock Origin settings
4. Open uBlock Origin popup showing number of adds blocked.

Your settings

• Browser/version: Firefox 48 for Android / MIUI 7 over Android 6 / Xiaomi Mi4
• uBlock Origin version: 1.8.4

[klaasb]

It's even harder with the advanced mode, where you can use the different colors to allow/passthrough/block certain other domains/objects. After using it for quite some time now, I'm able to reliably hit the "grey" that I use to allow images/etc. from certain other domains, but still not always.

uBlock Origin in general really works very well on Firefox on Android, but the UI is a bit difficult to use with touch.

[shytikov]

I think Firefox + uBlock Origin is the only way to get distraction free browsing experience on Android. All other browsers either not support add-ons, or shipped with none-customizable blocker, which is not a option for many cases.

I've just tried ABP for Firefox, since remember, that it is also possible option... I must admit I not happy with ABP performance on mobile... It almost killed the device...

Though ABP exposes almost no options at all, so it could fall into the category of none-customizable blockers...

[jjohns71]

I would agree, a specific UI for mobile would be awesome. I know for example, just to be able to select the element picker on Firefox for Android I have to zoom in like 500x into the small area where the dropper icon is to get a finger touch to register on that particular element. There is definitely a lot of "white space" that isn't really optimized for a small mobile screen.

@gorhill How could the community help implement & test a better mobile UI?

[kazzkiq]

I've got so excited about uBlock Origin, and it run so much better than ABP that I got really into helping making this tool work better for mobile (and desktop) devices. Here is a (tiny tiny) sneak peek of what I've been thinking for it:

(Some labels are not in english because I only had a portuguese version of uBlock running on my machine)

Also, a desktop version:

I would create a new Issue to propose some UI improvements, but just noticed that @gorhill do not accept "design proposals" as Issues, so I'm really not sure if the project is open to new UI ideas at all. But anyways, if there is some space to work on the code to make this happen, I would gladly help build it (most of the current DOM structure and JS plugins remain the same, so it should not take much effort to make those visual changes).

[gorhill]

@kazzkiq I like what I am seeing in your pics. I am willing to bring in your design -- as long as for now the redesign is limited to the dashboard. Is this really just CSS work?

[kazzkiq]

@gorhill Yep. I would say 4/5 CSS work, 1/5 HTML or JS changes.

As the core behaviors (tabs/views, collapse-panel, etc) already work pretty well, I think the work would be put mostly into styling the dashboard and adding some classes to some elements. Small HTML rearrangement would be needed to make a prettier mobile menu, but analyzing the Dashboard code, I can't see any other considerable HTML change besides the mobile menu.

If you want to go forward with this I can show some other screens from the dashboard and start implementing it this week.

[klaasb]

For me, the most important UI improvements for mobile (which the original issue was about) could be done to the panel in the second screenshot in the original post and especially the advanced view of that:

This is really hard to use by touch on a 4.7" 1080p phone screen - especially selecting red/grey/green.
I don't need to access the dashboard on mobile very often/at all.

[Hrxn]

Speaking of the dashboard (and UI/UX improvements):

One thing that always felt a bit strange somehow and not really intuitive, is that the default dashboard tab (i.e. where you always land when accessing the dashboard) is the settings pane. Because in normal usage, normal browsing etc. it is never my actual destination. I open the dashboard and switch to 'My Filters' or '3rd Party Filters' immediately. I basically use the settings tab only once, to pick my preferences, and then I'd never go there again. I don't know what you guys are doing there or how you are using the extension, but I don't really get the thought process behind this. Maybe it's just me..

So, I would propose to either...

• A: The no work involved solution: Just rearrange the tabs in the dashboard.
• B: The work involved solution: Use a simple overview/status page as the default dashboard pane
  (This could basically just show the same stats as displayed right now on different panes, for example)

I don't know. Just my two cents..

[jjohns71]

@Hrxn just to add a little to your discussion point, the only thing I use on the landing page frequently is the 'Backup to file' option. Honestly though, this could be moved to the 'About' tab to mirror uMatrix functionality and I would have no problem with that. I agree that most of the other Settings are probably set once and then never changed for the average user. (That is the case for me at least).

It does seem to me that the majority of users would find the '3rd-party filters' or 'My filters' tab more useful as the default landing page.

One additional thought if we are thinking of UI improvements for uBlock, does it make sense to include a link to the logger on one of the landing tabs? Not sure if this would change the resources needed to run the extension but another idea is to just incorporate the logger as a tab from the dashboard. From monitoring the issues submitted here over the last few months I think a lot of people who use uBlock have no idea the logger even exists because it is hidden behind a graphic icon that doesn't always even pop up the "alt text" when you hover over it.

[spectatorBH]

Let me mention a bit of my ideas, too:

1. @Hrxn I agree the initial default tab might be changed or even created a new special one, but I would also suggest to remember the last open dashboard tab (also between browser sessions?), so it would be easier to switch back and forth while tweaking some page;
2. remember pages/lists scroll positions when swithing tabs until the dashboard is closed -- imho, especially critical for My Filters list and to a lesser extent for 3d Party Filters tab when troubleshooting/experimenting/setting up;
3. add icons or buttons for quick jump to the top or bottom of the current page or list" -- for more convenient navigation especially on mobile screens;
4. @klaasb advanced view of popup panel on mobiles should be split into 2 parts (now left and right) as either 2 distinct tabs or windows, to accomodate for limited horizontal space (maybe only if current horizontal resolution is less than some predefined const);
5. @klaasb color coded regions of the advanced view popup (at least on mobiles) should continiously cycle-switch their state when touched/clicked (green->dark-grey->red->default->green->...) -- this would effectively triple the active width of these controls and make it easy to operate them with fingers not only on Android, but also on touch-enabled Windows tablets/hybrids;
6. @jjohns71 if a logger tab proposal is ever implemented (nice idea!) I guess it should open in 2 different modes: a) instantly active (enabled) when open via direct icon on the popup panel and b) passive (disabled) when any other dashboard tab was meant to be opened first. Later on throughout the session it could be started/stopped (enabled/disabled) manually via some dedicated control on its tab. This way the logger would be both more accessable/visible and not suck any resources when not exactly needed.

P.S. @kazzkiq I'm quite impressed with your initial sketch design, please show us other parts! Also, do you have any ideas for popup panel UI improvements?

[gorhill]

To be clear: I am opened for a re-skin of the dashboard for now. To keep a possible re-skin of the dashboard as simple as possible, I prefer everybody hold onto all their ideas of what everything should look like, etc., that is an endless debate and will drown out what the narrow "reskin dashboard" issue with minimal code changes.

For the popup panel, it's set in stone, I may investigate what helps for mobile, but no grand redesign or grand re-skin.

[kazzkiq]

@spectatorBH Here are other screen samples:

I agree with @gorhill. Perhaps we should start only with dashboard and then in the future, once dashboard is finished, and once the changes are accepted, then maybe we look forward to change other parts with the project owner's approval. For now, dashboard is a good (and ambitious) challenge.

@gorhill I can make a fork and start working on the code already, once its stable enough I can send a PR for your approval. Its that ok for you?

[gorhill]

In 3rd-party filter lists, I like it better if the visual emphasis is more on the checkbox and the name of the list (I still prefer a checkbox than a switch-like UI). The visual for the purge-cache and out-of-date buttons need to be less prominent -- these are secondary information, the primary one being the list name and whether it is selected.

[FatOrangutan]

Is the dashboard redesign still on the cards? I ask because I like it a lot and because a fork or any other discussion hasn't happened for a little while now.

[UserNaem]

@kazzkiq Please don't use those switch-like checkboxes. They are not "modern", they are just bad. Normal checkboxes serve the same purpose while occupying less space, and are not any harder to hit with fingers either.

[Hrxn]

Visual Recognizability > Occupying Space

[UserNaem]

Yes, they are also ugly. And side vision won't tell you their current state, you have to actually look at them to see their state.

[FatOrangutan]

As proof of concept, decided to make some quick and dirty CSS only changes to the dashboard. I made some progress on the first two panes:

In action: https://u.pomf.is/irapyz.gif (~3MB gif)

[Hrxn]

Yes, they are also ugly.

100% subjective.

Side vision

?
Not sure what you mean here, but increased size of the UI element, plus use of color, plus use of increased contrast, is definitely better for vision than tiny greyish-on-greyish checkboxes.

[SW1FT]

@FatOrangutan Good job on that PoC, could you make a repository for it?

[UserNaem]

@FatOrangutan Good stuff, please post the CSS.
@Hrxn

100% subjective.

Indeed.

tiny greyish-on-greyish checkboxes

Normal checkboxes were made with mouse and keyboard in mind, whereas "slider" checkboxes were made for touch devices to prevent the user from accidentally switching them. With mouse that's never been a problem.

[gwarser]

whereas "slider" checkboxes were made for touch devices to prevent the user from accidentally switching them

How?

[UserNaem]

If you try to swipe them in the wrong direction they won't work. Not all touch applications behave like that, though.

[kazzkiq]

Sorry folks, I've been deeply engaged in a project these weeks and couldn't start working on the implementation until now.

@gorhill I've made little changes to the 3rd-party filter lists with more focus on the names instead of the secondary information:

Checkboxes vs Switchers

While I agree that for desktops a checkbox might be enough (and maybe even better for UX, as users are already used to it), on mobile-devices switches are way more used. This is better for user recognition, and easier to deal with a finger than a mainstream checkbox (better usability).

So I would say the best option would to keep checkboxes in desktop devices, while showing switches to mobile users. Note that this also can be easily achievable with only CSS (and maybe a little change in the checkboxes HTML).

@FatOrangutan Neat! Could you please make the code available so we can also help implementing it? Perhaps we should define an oficial repo-branch to start working/testing the new design?

[FatOrangutan]

I have attached the CSS code / userstyle. I worked a bit on the remaining pages in the dashboard and made some slight improvements to the ones in my previous comment. Here's how it looks like now: http://imgur.com/a/oGmox

Please bear in mind that I'm new to CSS and the code is very messy. It was originally meant just for my personal use so it wouldn't scale very well at all. I am on 1366x768, and it should look mostly fine at this resolution and maybe even resolutions close to it. I was using this with Stylish, so accordingly the !important declarative has been freely abused. The code for some of the things - like making #externalListsDiv seem to be within the #lists element on the 3rd Party Filters page - is outright hacky but doing that cleanly requires changes to the HTML. To make things quicker, I made the 'i' and '?' icons as png's and embedded them as base64. These probably need to be SVG or stylized text elements. Lastly, to make the styling easier, I kept the code for each of the pages completely separated. I realise that some of this code is common across all the pages.

@SW1FT , @kazzkiq : I don't know much about how to do things at Github. I think it would be best if one of you handle the repo.

Dashboard Reskin.txt

[gorhill]

So I would say the best option would to keep checkboxes in desktop devices, while showing switches to mobile users

I personally like the Fontawesome switches, I used them in uMatrix. I wouldn't mind if these were used for both desktop and mobile. See:

• http://fontawesome.io/icon/toggle-off/
• http://fontawesome.io/icon/toggle-on/

There is a good enough difference between on/off, so that it makes it easy to see at a glance what is selected or not.

Btw I like the trash can to purge cache -- probably makes it easier for everybody to understand what the button does.

[UserNaem]

@gorhill At least please consider leaving an option to use classic checkboxes, not everyone is fond of them. I personally feel like they were made for the tech illiterate who would be confused when looking at an empty checkbox.

[SW1FT]

@FatOrangutan First of all, thanks for sharing the code, I really like the design.

I did find some issues with the scaling of #externalListsDiv (at 3p-filters.html) mostly because I feel like it looks too small and max-width should scale with the body width. Also if you change the height enough, it will go out of the background which is something that doesn't happen on the whitelist.html and 1p-filters.html (probably requires some html fixing like you said). I also noticed that you didn't re-skin #cloudWidget yet which is where it's shown the cloud backup data information, but that can be worked on later of course. Great job so far.

Regarding who should make the repo, it should probably be done by the person who is gonna do most of the work on this, or just @gorhill as he has the final say on everything.

[kazzkiq]

@SW1FT @FatOrangutan @gorhill

I took the liberty to fork the project and start implementing the new design. You can check the status (and build it locally) here:

https://github.com/kazzkiq/uBlock/

I've added SASS as a CSS pre-processor to make DRY a reality in CSS (and help with the development speed). While this don't affect the final CSS, the build process do get affected a little bit. So if you wanna build the project by yourself while the new UI is on development, you may have to follow this small guide:

https://github.com/kazzkiq/uBlock/blob/master/BUILDING-NEW-UI.md

P.s. Please keep in mind this fork is in DEVELOPMENT status and may end up breaking UI and/or functionalities from uBlock Origin until finished. This mean you should not build an extension from this fork and use it "for production" in your browser. Things will break. Use only for testing/developing purposes. You've been advised. 🚨

[geokis]

Hey guys, first thank you @kazzkiq for your work on the UI.
I am not sure how the other user are thinking about this, but for me it is uncomfortable how the secondary information are placed.
In my opinion it is confusing that the placement is related to the width of the filter name.
So my suggestion is to bring a little bit more calmness in it.

E.g.:

[gorhill]

I think it could be better to not display "permanent rules" & "temporary rules" side-to-side, but instead display them one below the other,

This needs redesign. Looking at it again, I should eliminate the redundancy of showing twice the same rules. One line per rule with a padlock + remove icons for each rule should be sufficient. The padlock tells whether the rule is in the permanent ruleset, the remove icon allows to remove the rule from the temporary ruleset.

[nicole-ashley]

@gwarser Bear in mind that UX designers are moving away from hamburger menus wherever possible because of the discoverability issues they create, not to mention they're very fiddly to open on large screens. It's better to have your menu in plain sight.

[Serkan-devel]

@kazzkiq might the new colorful UI impact performance? My only HTML knowledge comes from an old HTML 3.2 book that was randomly in a bookshelf in my room.
@gorhill when will kazz's design be available in a stable ublock release?

[Serkan-devel]

bump

[kazzkiq]

@Serkan-devel No it shouldn't. For CSS to have real impact in painting/rendering performance, the number of rules and/or visual effects must be ridiculously high. This isn't achieved in ordinary browser pages, unless you're doing something smelly on your page (like rendering tens of thousands of elements at once using animations and slow visual effects like box-shadow).

Sadly, the new visual isn't fully finished yet. There are some corners to be polished (you can see what is pending here), and I've been extremely quite busy with lots of things in the last months. If anyone knows SASS and wants to help, any help is appreciated. Next week I will have some free time due to lay-off in my job, so you could see some progress on what is still to be done.

[bershan2]

@kazzkiq Great work!

First of all, when do you plan to merge the main repository changes into your repository? Unfortunately, your repo is a bit behind the main repo (by 471 commits at time of writing), but automatic merging resolves almost all differences. However, problematic files include src/whitelist.html, src/settings.html, src/dashboard.html, and src/3p-filters.html (as well as almost all src/css/* which, of course, was expected). Most differences are pretty minimal (e.g. indentation) and fixing them would take 15 min at most, but they would steel need to be resolved and tested before merging in with the main repository. When do you plan on doing that? If I resolved these issues and submitted a pull request would you accept it? (I'd like to test the new design with the contemporary uBlock Origin version.)

Secondly, may I use your style sheets for a website? Probably, "yes", because it is under GPLv3, but wanted to double-check.
I was thinking dreaming of porting the uBlock Origin Wiki to a Markdown (probably GFMD) site with address like gorhill.github.io/uBlock or uBlockOrigin.github.io. That would make it more (non-programmer) user-friendly and help new users "discover" uBlock.

[uniquePWD]

@kazzkiq I notice one of the issues you've laid out is that you feel the iconography regarding synchronisation needs to be swapped/updated. But given that such large changes are being made in regards to the look and feel of uBO, wouldn't it make sense to change that iconography later rather than sooner in order for users to maintain familiarity .

Also I quite like what you've done with the mobile version. It's a vast improvement in terms of usability, but I noticed that there are some aspects where the information icon seems to drop to the line below the element. That doesn't seem right.

[kazzkiq]

@bershan2 Just merged. Now the repositories are synced.

Secondly, may I use your style sheets for a website?

Of course! The code is under GPLv3 but honestly all my changes should go to the WTFPL. Do/copy/modify whatever you want.

I also updated some styles missing (like the cloud-storage panel).

Following @sabret00the tip, I'm not going to update all the icons. That would impact other areas of uBlock that also use them, and its out of scope right now.

The only screens that still need working are:

• Settings (mobile)
• 3rd Party Filters (mobile)

All the other pages are production-ready.

As always, instructions for building and testing locally can be found here.

[uniquePWD]

@kazzkiq did you submit a pull request? I'm not sure @gorhill is keeping an eye on this thread.

[Serkan-devel]

I think gorhill merged it by himself, I can't find the PR though

[gorhill]

@kazzkiq did you submit a pull request? I'm not sure @gorhill is keeping an eye on this thread.

I just looked at the result and I will not merge the changes.

[kazzkiq]

@sabret00the there are still some minor tweaks to get to 100% before submitting a PR.

@gorhill Any specific reasons, so we can work on it?

[gorhill]

Any specific reasons, so we can work on it?

Too much subjective changes -- some may like the changes, others will dislike the changes. Where subjectivity is involved, status quo prevails.

[ghost]

some may like the changes, others will dislike the changes

@gorhill I think almost everyone can agree that @kazzkiq design is better than the current. So what exactly is the problem? I cannot follow the logic on having no design whatsoever.

[uniquePWD]

While we may all feel that it's a vast improvement in terms of aesthetics and perceptive usability, Raymond is the one that has built and maintained this extension, if he's not happy with it then that's his decision and we must respect that.

[kazzkiq]

What I've noticed is that the new CSS ends up "leaking" to other parts of the extension like the popup, events window, etc, perhaps those are examples of subjective changes @gorhill commented? The options page CSS shouldn't affect other parts of the extension, but is relatively simple to solve.

[Serkan-devel]

How will this actually work as web-extension?

[heubergen]

Too much subjective changes -- some may like the changes, others will dislike the changes. Where subjectivity is involved, status quo prevails.

@gorhill I can understand the argumentation, but I have to disagree strongly. The design is something never everyone will agree but that doesn't mean you should not change it at all. Let's make an official test build and then receive the feedback from the user.

[kazzkiq]

Its up to @gorhill and community. If its decided to give it a chance, development will be retaken.

[shytikov]

Hi All,

I'm the original topic starter from 2016, I haven't been an active participant so far but latest comments made me feel worried.

Please scroll up to my first post. I'm not complaining about design, which would be indeed very subjective. And subjectively I would definitely appreciate re-design according to most modern UX practices.

But my complaints were about USABILITY on mobile devices. And this is objective. On a smaller vertical screen dealing with uBlock Origin UI is not easy. The control elements just too small and their positions not very accessible!

Can we at least make an effort to make UI adoptive to user screen size? Currently, there are more mobile internet users than desktop, so it would be nice to make uBlock Origin more friendly to smaller screens.

[gorhill]

Here is what I would like to approach this issue:

• Suggested changes committed in a github fork constantly kept up to date with current master so that this can easily be tested by everyone at any time.
• Very focused, incremental changes which improve obvious specific usability issue.
  • No grand redesign, it has to be incremental so that I can manage the changes and to eliminate chances of regressions.
  • First focus on usability issues which affects the wide majority of users, not the fraction of percent which uses the "My rules" pane for example.
• Changes to the look and feel must be incremental -- uBO has to still look familiar enough at every single iteration.
• Avoid javascript code changes as much as possible.
• Mind repercussions of changes on all supported platforms.

[jspenguin2017]

Anyone wants to have another look at this in Nano?

I'm planning a complete remake of Dashboard (for look and feel) and Logger (for performance and usability, I'm confident that I can make it to be able to handle 10k logs with ease).
I already did a remake of Assets Viewer (for performance and usability, 45 times shorter first meaningful paint time on EasyList), My Filter Editor (for usability), and Whitelist Editor (for usability)

NanoAdblocker#33

[Serkan-devel]

Have issues just been unlocked here?

[gwarser]

This should probably be closed now.

[gorhill]

Closing as suggested. The UI work is still ongoing but it's not done as per this specific issue (which has be stale for years now), it's done with input from Mozilla's @brampitoyo and the end goal is to make uBO's UI fits Firefox Preview's own design.