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.