libredirect / browser_extension

A browser extension that redirects popular sites to alternative privacy friendly frontends
https://libredirect.github.io
GNU General Public License v3.0
3.29k stars 122 forks source link

UI improvements #961

Closed tEctutoRIt closed 3 months ago

tEctutoRIt commented 3 months ago

I like your extension, but this new update has made it really difficult to change settings and involves a lot of scrolling. It was much easier to see which services were active earlier; now it's impossible without going into the menu bar of each item, and it involves a lot of repetitive tasks.

ManeraKai commented 3 months ago

The Old UI was written in Vanilla JS. It was unmaintainable. The sidebar was going to explode at any minute. The new UI is written in Svelte. I can think of a way to show the enabled instances.

IkelAtomig commented 3 months ago

@tEctutoRIt - There is an idea, how about you just scroll over the dropdown menu when you hover the mouse over it, so you don't need to repetitively click ?

ManeraKai commented 3 months ago

Now I need to make it transparent or something... btw it also works when hovering with the mouse.

https://github.com/user-attachments/assets/297301dc-05b9-4e72-b639-866b1307e589

tEctutoRIt commented 3 months ago

I believe this is an improvement. However, I feel that anything less than a fully visible grid with clear differentiation of on and off options may not be ideal. These are simply my preferences. The app is already quite stable, so I don’t think it’s necessary to make too many changes. I understand that you’re investing your free time in this project and that it’s not feasible to make significant alterations.

I might just be being a bit picky, or it could be because of the sudden change, but I’m sure I’ll get adapted. Either way, we can see all the options in the toolbar with toggles.

Thank you for all your hard work and dedication! I’ll close this issue now.

image

tobika commented 3 months ago

I came to this issue because I couldn't figure out that you have to click on service and a list popup opens up. Maybe you could add an down arrow to make it clear for the user that this is a list.

ManeraKai commented 3 months ago

This hovering is giving a lot of errors, there needs to be other solution like the popup in the settings page.

tEctutoRIt commented 3 months ago

I wanted to reach out and let you know that after giving it some more thought, I’ve realized that my original request for changing the UI might actually introduce more complications than benefits. I sincerely appreciate the effort you’ve already put into considering it.

That being said, I think it would be best to keep the extension as it was initially. I don't want to cause any unnecessary trouble or additional work for you.

Thank you again for your hard work and dedication to improving this tool. I look forward to using it as it is!

octaveuranus commented 3 months ago

I agree with tEctutoRIt. It might be good to also acknowledge the differences in priorities between users and developers. I think it makes sense that the extension could look on the verge of collapse from the perspective of its developers, when it seems perfectly fine to users.

However, you must understand that you're basically asking us to accept an apparently inferior product because of a concern that many of us do not share.

If you meant it was going to explode if you tried to tamper with the code (something most users wouldn't do), then I think most people would prefer to keep the old version and turn updates off. If you meant it would explode on us, then I think a sizeable, if smaller, proportion of users would still prefer the old version, at least until they experienced that for themselves.

I'm not sure if any of this was helpful. Just trying to add some perspective.

EDIT: Actually, the more I think about it, most users are probably lazy and will just take what they get. So, instead of downgrading the extension, those users could just be frustrated and annoyed instead. That laziness angle might not apply to the Linux/FOSS community though.

ManeraKai commented 3 months ago

I meant explode in the sense that we have over 40 services in a sidebar that is not searchable and is always expanding. I rewrote the UI in Svelte in order to simplify the code, in order to add more complex UI components easily. I didn't close this issue because I want to find a solution to it.

tEctutoRIt commented 3 months ago

The current interface is more difficult to navigate compared to earlier versions. However, I realize that the need to access the full settings is rare—mainly when changing the preferred instance for a service. Most functions, like redirecting to the original site or switching instances, can be easily managed from the toolbar icon or via keyboard shortcuts.

Given this, my issue isn't a priority compared to the essential functionality and performance improvements you need to focus on. I understand your time is limited, and it's crucial to prioritize development efforts on more critical features and fixes.

AlexBlandin commented 3 months ago

Yes, having 40 services in the sidebar is not "searchable", but neither is scrolling the Service list (arguably, the limited window makes it harder to see 'at a glance' if something is available). While the Service list's text box is searchable, sadly it's not obvious that you can, since the caret can easily disappear behind the logo of whichever service is default (e.g. youtube), so I hadn't even realised you could type in it for a while...

Caret is easily overlooked in Service list

Meanwhile, all this is compounded by not knowing where to look, i.e. that we need to go to General (2) → Service. This discoverability especially hurts as the links to configure in the pop-up are stale (there's no page for each service now). Having two "General" tabs doesn't read correctly, plus configuring each service seems like something that should be the default and at the top, which would mean there's more of a chance that someone realises "Oh, this is where we change instances" vs. thinking it's some spill-over or secondary General Settings tab, as the name implies.

Two General tabs, and the 'wrong' one is the default for changing redirects

So, for immediate and quick things that would improve the UI:

  1. Rename the "General" (service) tab to something like "Redirect", and maybe have it as the default settings tab?
  2. Improve the Service selection in simple ways, shift the logo/name across to the right just a little more (so the caret is easier to see), definitely clearer indication it's a text box and thus searchable (plenty of space to just say "Type to search", etc, and it's using the same design language as other non-searchable / not-text-input lists, so some visual distinguishing would be useful), and perhaps a larger window to scroll in,
  3. A little more work, but something that's really just needed in some capacity as it's otherwise breaking existing functionality, is having the popup menu's links back to the settings work (e.g. chrome-extension://oladmjdebphlnjjcnomfhhbfdldiimaf/https://github.com); though I can appreciate that changing the framework means this is going to probably require some shift in process.

Clickable link in popup doesn't resolve to page

I feel this really is pertinent given that 2.9 is, according to the settings import/export, at least partially incompatible with 2.8's settings.

There are nice-to-haves, like ways of putting things on the sidebar that are relevant (perhaps filtered to only the enabled services/redirects), but those are things that need to come after the fundamentals, such as ensuring people can change their settings (so config link in popup really should work), know where they can change their settings (not having two "General" tabs)... and know that they need to change their settings (some way to communicate that the update is (partially) incompatible with previous settings, perhaps offering to at least save a backup so they can recreate them, but that's a stretch goal).

As an aside/addendum, I'd definitely want to think about how long, on-page lists is already the UI/visual language of libredirect, namely via the instance lists! I imagine improving those would be a significant amount of not necessary work, though. Still, having something similar (40 services) in the sidebar wasn't incongruent with libredirect, at least in principle.

However, if we're wanting improvements in searchability, readability, and discoverability, then perhaps the Service list already demonstrates exactly what we needed, but that it should go in the sidebar itself, then just redirecting to the specific page for each service like before; would give the popup simple pages to link to again. I'm not certain what the situation is with the framework, as frontend isn't my domain, but that does feel like a tidy way to resolve almost all of the above issues in one go! Perhaps this does mean a move back towards separate pages like before, which may have been something you were forced into on technical grounds, but I wouldn't know. Still, that would probably be a non-trivial amount of work, hence why this is an addendum, as there's much simpler little changes that would also help (and are not necessarily incompatible with this) which I wanted to outline above.

ManeraKai commented 3 months ago

The two General tabs was a typo. It's fixed now in the source code.

ManeraKai commented 3 months ago

This should now solve the "disable hint" problem

https://github.com/user-attachments/assets/1333b788-a1ac-473f-bea1-ecd1acf8ca28

ManeraKai commented 3 months ago

Settings button near each Service in the popup:

https://github.com/user-attachments/assets/6f2c234c-b09b-493f-87cc-3771b8821900

ManeraKai commented 3 months ago

Indicating that the dropdown is searchable:

https://github.com/user-attachments/assets/4c28f895-f1e1-41b3-a93d-4388ba2d3e53

ManeraKai commented 3 months ago

I don't want to add the service list to the sidebar. It will be inconsistent with the UI. The settings button right to each service in the popup should be enough in not making service options too deep.

IkelAtomig commented 3 months ago

This is a great idea than the Magnifying glass.

Aug 18, 2024, by @.***:

Indicating that the dropdown is searchable:

https://github.com/user-attachments/assets/4c28f895-f1e1-41b3-a93d-4388ba2d3e53

— Reply to this email directly, > view it on GitHub https://github.com/libredirect/browser_extension/issues/961#issuecomment-2294943488> , or > unsubscribe https://github.com/notifications/unsubscribe-auth/AYJXNKDTOT67YGCMEVQSJOTZR6MJFAVCNFSM6AAAAABL7AH6MCVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDEOJUHE2DGNBYHA> . You are receiving this because you commented.> Message ID: > <libredirect/browser_extension/issues/961/2294943488> @> github> .> com>

ManeraKai commented 3 months ago

Rewrote the version updating process, and allowed importing from previous versions. Hopefully it won't cause any problems.

IkelAtomig commented 3 months ago

Upto how may versions does it support in backwards previously it was one or two.

And this is some great improvements for v3.0. Should have refined things further before releasing v2.9 and gave a thought or brainstorming regarding usability. 18 Aug 2024, by @.***:

Rewrote the version updating process, and allowed importing from previous versions. Hopefully it won't cause any problems.

— Reply to this email directly, > view it on GitHub https://github.com/libredirect/browser_extension/issues/961#issuecomment-2295203340> , or > unsubscribe https://github.com/notifications/unsubscribe-auth/AYJXNKATZ2MIUINK5YR52XTZSBWMDAVCNFSM6AAAAABL7AH6MCVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDEOJVGIYDGMZUGA> . You are receiving this because you commented.> Message ID: > <libredirect/browser_extension/issues/961/2295203340> @> github> .> com>

ManeraKai commented 3 months ago

It's ok. We can release after some days.