New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

UI improvements for Firefox add-on running on Android #1890

Open
shytikov opened this Issue Aug 12, 2016 · 75 comments

Comments

Projects
None yet
@shytikov

shytikov commented Aug 12, 2016

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

photo815675162538125380

photo815675162538125379

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

This comment has been minimized.

Show comment
Hide comment
@klaasb

klaasb Aug 12, 2016

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.

klaasb commented Aug 12, 2016

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

This comment has been minimized.

Show comment
Hide comment
@shytikov

shytikov Aug 12, 2016

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

shytikov commented Aug 12, 2016

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

This comment has been minimized.

Show comment
Hide comment
@jjohns71

jjohns71 Aug 12, 2016

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?

jjohns71 commented Aug 12, 2016

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

This comment has been minimized.

Show comment
Hide comment
@kazzkiq

kazzkiq Aug 13, 2016

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)

1234567

Also, a desktop version:

configuration

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

kazzkiq commented Aug 13, 2016

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)

1234567

Also, a desktop version:

configuration

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

This comment has been minimized.

Show comment
Hide comment
@gorhill

gorhill Aug 13, 2016

Owner

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

Owner

gorhill commented Aug 13, 2016

@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

This comment has been minimized.

Show comment
Hide comment
@kazzkiq

kazzkiq Aug 13, 2016

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

kazzkiq commented Aug 13, 2016

@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

This comment has been minimized.

Show comment
Hide comment
@klaasb

klaasb Aug 13, 2016

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:

screenshot_20160813-092405

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.

klaasb commented Aug 13, 2016

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:

screenshot_20160813-092405

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

This comment has been minimized.

Show comment
Hide comment
@Hrxn

Hrxn Aug 13, 2016

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

Hrxn commented Aug 13, 2016

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

This comment has been minimized.

Show comment
Hide comment
@jjohns71

jjohns71 Aug 13, 2016

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

jjohns71 commented Aug 13, 2016

@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

This comment has been minimized.

Show comment
Hide comment
@spectatorBH

spectatorBH Aug 15, 2016

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?

spectatorBH commented Aug 15, 2016

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

This comment has been minimized.

Show comment
Hide comment
@gorhill

gorhill Aug 15, 2016

Owner

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.

Owner

gorhill commented Aug 15, 2016

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

This comment has been minimized.

Show comment
Hide comment
@kazzkiq

kazzkiq Aug 15, 2016

@spectatorBH Here are other screen samples:

12345

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?

kazzkiq commented Aug 15, 2016

@spectatorBH Here are other screen samples:

12345

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

This comment has been minimized.

Show comment
Hide comment
@gorhill

gorhill Aug 15, 2016

Owner

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.

Owner

gorhill commented Aug 15, 2016

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

This comment has been minimized.

Show comment
Hide comment
@FatOrangutan

FatOrangutan Sep 13, 2016

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.

FatOrangutan commented Sep 13, 2016

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

This comment has been minimized.

Show comment
Hide comment
@UserNaem

UserNaem Sep 14, 2016

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

UserNaem commented Sep 14, 2016

@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

This comment has been minimized.

Show comment
Hide comment
@Hrxn

Hrxn Sep 14, 2016

Visual Recognizability > Occupying Space

Hrxn commented Sep 14, 2016

Visual Recognizability > Occupying Space

@UserNaem

This comment has been minimized.

Show comment
Hide comment
@UserNaem

UserNaem Sep 14, 2016

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.

UserNaem commented Sep 14, 2016

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

This comment has been minimized.

Show comment
Hide comment
@FatOrangutan

FatOrangutan Sep 14, 2016

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:

chrome_ublock0_content_dashboard html settings html155435

chrome_ublock0_content_dashboard html 3p-filters html155357
In action: https://u.pomf.is/irapyz.gif (~3MB gif)

FatOrangutan commented Sep 14, 2016

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:

chrome_ublock0_content_dashboard html settings html155435

chrome_ublock0_content_dashboard html 3p-filters html155357
In action: https://u.pomf.is/irapyz.gif (~3MB gif)

@Hrxn

This comment has been minimized.

Show comment
Hide comment
@Hrxn

Hrxn Sep 14, 2016

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.

Hrxn commented Sep 14, 2016

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

This comment has been minimized.

Show comment
Hide comment
@SW1FT

SW1FT Sep 14, 2016

Contributor

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

Contributor

SW1FT commented Sep 14, 2016

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

@UserNaem

This comment has been minimized.

Show comment
Hide comment
@UserNaem

UserNaem Sep 14, 2016

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

UserNaem commented Sep 14, 2016

@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

This comment has been minimized.

Show comment
Hide comment
@gwarser

gwarser Sep 14, 2016

Contributor

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

How?

Contributor

gwarser commented Sep 14, 2016

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

How?

@UserNaem

This comment has been minimized.

Show comment
Hide comment
@UserNaem

UserNaem Sep 14, 2016

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

UserNaem commented Sep 14, 2016

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

@kazzkiq

This comment has been minimized.

Show comment
Hide comment
@kazzkiq

kazzkiq Sep 14, 2016

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:

captura de tela 2016-09-14 as 16 15 04

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

12345

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

kazzkiq commented Sep 14, 2016

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:

captura de tela 2016-09-14 as 16 15 04

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

12345

@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

This comment has been minimized.

Show comment
Hide comment
@FatOrangutan

FatOrangutan Sep 15, 2016

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

FatOrangutan commented Sep 15, 2016

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

This comment has been minimized.

Show comment
Hide comment
@gorhill

gorhill Sep 15, 2016

Owner

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:

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.

Owner

gorhill commented Sep 15, 2016

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:

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

This comment has been minimized.

Show comment
Hide comment
@UserNaem

UserNaem Sep 15, 2016

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

UserNaem commented Sep 15, 2016

@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

This comment has been minimized.

Show comment
Hide comment
@SW1FT

SW1FT Sep 15, 2016

Contributor

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

Contributor

SW1FT commented Sep 15, 2016

@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

This comment has been minimized.

Show comment
Hide comment
@kazzkiq

kazzkiq Sep 17, 2016

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

kazzkiq commented Sep 17, 2016

@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

This comment has been minimized.

Show comment
Hide comment
@geokis

geokis Sep 26, 2016

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

cebf8ae0-7a94-11e6-8249-48adfe79ef8e

geokis commented Sep 26, 2016

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

cebf8ae0-7a94-11e6-8249-48adfe79ef8e

@gorhill

This comment has been minimized.

Show comment
Hide comment
@gorhill

gorhill Mar 16, 2017

Owner

What's the screen size of your device?

Owner

gorhill commented Mar 16, 2017

What's the screen size of your device?

@jjohns71

This comment has been minimized.

Show comment
Hide comment
@jjohns71

jjohns71 Mar 16, 2017

@gorhill I have a 5.7 inch screen (2560x1440) and have the same issue. It is impossible to see or scroll to the right through the text after the first few characters in both the Permanent Rules & Temporary Rules boxes.

Screenshot below:

screenshot_20170316-101106 2-cleaned

jjohns71 commented Mar 16, 2017

@gorhill I have a 5.7 inch screen (2560x1440) and have the same issue. It is impossible to see or scroll to the right through the text after the first few characters in both the Permanent Rules & Temporary Rules boxes.

Screenshot below:

screenshot_20170316-101106 2-cleaned

@gwarser

This comment has been minimized.

Show comment
Hide comment
@gwarser

gwarser Mar 16, 2017

Contributor

4.3" 480x800 :)

Contributor

gwarser commented Mar 16, 2017

4.3" 480x800 :)

@gorhill

This comment has been minimized.

Show comment
Hide comment
@gorhill

gorhill Mar 16, 2017

Owner

I can adjust CSS rules to regain a bit more space vertically, but ultimately there is no magic trick to turn a small display into a larger one:

a

Owner

gorhill commented Mar 16, 2017

I can adjust CSS rules to regain a bit more space vertically, but ultimately there is no magic trick to turn a small display into a larger one:

a

@gwarser

This comment has been minimized.

Show comment
Hide comment
@gwarser

gwarser Mar 16, 2017

Contributor

Much better.
Cannot this be folded to single "hamburger" button?

Contributor

gwarser commented Mar 16, 2017

Much better.
Cannot this be folded to single "hamburger" button?

@krzysztof-sikorski

This comment has been minimized.

Show comment
Hide comment
@krzysztof-sikorski

krzysztof-sikorski Mar 17, 2017

I think it could be better to not display "permanent rules" & "temporary rules" side-to-side, but instead display them one below the other, with visible margins around textareas to ease vertical scrolling.

That way it would be easier to edit rules, and the only disadvantage I can think of is that it would be no longer possible to compare both panels with one glance - but the "temporary rules" panel marks visually what was added/deleted and what not, so I think it is not as big issue as cumbersome editing&scrolling.

krzysztof-sikorski commented Mar 17, 2017

I think it could be better to not display "permanent rules" & "temporary rules" side-to-side, but instead display them one below the other, with visible margins around textareas to ease vertical scrolling.

That way it would be easier to edit rules, and the only disadvantage I can think of is that it would be no longer possible to compare both panels with one glance - but the "temporary rules" panel marks visually what was added/deleted and what not, so I think it is not as big issue as cumbersome editing&scrolling.

@gorhill

This comment has been minimized.

Show comment
Hide comment
@gorhill

gorhill Mar 20, 2017

Owner

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.

Owner

gorhill commented Mar 20, 2017

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.

gorhill added a commit that referenced this issue Mar 20, 2017

@nikrolls

This comment has been minimized.

Show comment
Hide comment
@nikrolls

nikrolls Apr 2, 2017

Contributor

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

Contributor

nikrolls commented Apr 2, 2017

@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

This comment has been minimized.

Show comment
Hide comment
@Serkan-devel

Serkan-devel Apr 10, 2017

@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 commented Apr 10, 2017

@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

This comment has been minimized.

Show comment
Hide comment
@Serkan-devel

Serkan-devel commented May 10, 2017

bump

@kazzkiq

This comment has been minimized.

Show comment
Hide comment
@kazzkiq

kazzkiq May 10, 2017

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

kazzkiq commented May 10, 2017

@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

This comment has been minimized.

Show comment
Hide comment
@bershan2

bershan2 Jun 18, 2017

Contributor

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

Contributor

bershan2 commented Jun 18, 2017

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

@pwd-github

This comment has been minimized.

Show comment
Hide comment
@pwd-github

pwd-github Jun 25, 2017

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

pwd-github commented Jun 25, 2017

@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

This comment has been minimized.

Show comment
Hide comment
@kazzkiq

kazzkiq Aug 14, 2017

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

kazzkiq commented Aug 14, 2017

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

@pwd-github

This comment has been minimized.

Show comment
Hide comment
@pwd-github

pwd-github Aug 20, 2017

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

pwd-github commented Aug 20, 2017

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

@Serkan-devel

This comment has been minimized.

Show comment
Hide comment
@Serkan-devel

Serkan-devel Aug 20, 2017

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

Serkan-devel commented Aug 20, 2017

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

@gorhill

This comment has been minimized.

Show comment
Hide comment
@gorhill

gorhill Aug 20, 2017

Owner

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

Owner

gorhill commented Aug 20, 2017

@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

This comment has been minimized.

Show comment
Hide comment
@kazzkiq

kazzkiq Aug 20, 2017

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

kazzkiq commented Aug 20, 2017

@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

This comment has been minimized.

Show comment
Hide comment
@gorhill

gorhill Aug 20, 2017

Owner

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.

Owner

gorhill commented Aug 20, 2017

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

This comment has been minimized.

Show comment
Hide comment
@ghost

ghost Aug 21, 2017

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.

ghost commented Aug 21, 2017

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.

@pwd-github

This comment has been minimized.

Show comment
Hide comment
@pwd-github

pwd-github Aug 21, 2017

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.

pwd-github commented Aug 21, 2017

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

This comment has been minimized.

Show comment
Hide comment
@kazzkiq

kazzkiq Aug 21, 2017

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.

kazzkiq commented Aug 21, 2017

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

This comment has been minimized.

Show comment
Hide comment
@Serkan-devel

Serkan-devel Aug 21, 2017

How will this actually work as web-extension?

Serkan-devel commented Aug 21, 2017

How will this actually work as web-extension?

@heubergen

This comment has been minimized.

Show comment
Hide comment
@heubergen

heubergen Nov 10, 2017

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.

heubergen commented Nov 10, 2017

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

This comment has been minimized.

Show comment
Hide comment
@kazzkiq

kazzkiq Nov 10, 2017

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

kazzkiq commented Nov 10, 2017

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

@shytikov

This comment has been minimized.

Show comment
Hide comment
@shytikov

shytikov Nov 12, 2017

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.

shytikov commented Nov 12, 2017

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

This comment has been minimized.

Show comment
Hide comment
@gorhill

gorhill Nov 12, 2017

Owner

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

gorhill commented Nov 12, 2017

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.

@spectatorBH spectatorBH referenced this issue Dec 16, 2017

Open

Revamp Dashboard with Material Design #33

0 of 2 tasks complete
@jspenguin2017

This comment has been minimized.

Show comment
Hide comment
@jspenguin2017

jspenguin2017 Dec 16, 2017

Contributor

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

Contributor

jspenguin2017 commented Dec 16, 2017

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment