Interface improvements (+ bring back Catch Text Links)

[tarihci]

Hey man,
The issue I am writing for is the disappearance of "Catch Text Links" option. I was making use of it often and really liked it. Could you instate this option, if it won't be too much of a hassle?

As for my view on the new improvements, I like your effort and endeavor in updating and improving this addon. I really appreciate it. However, the interface can be improved for simplifying the general user base understanding and usage.

• Perhaps, you can indent and/or color code filter type and actions, instead of having them separately on the top. This could eliminate a lot of buttons and let us understand -which link cleaning action is taken for what reason- better. Also, based on new indent/color coded filter info, we can perhaps have better info for using selecting which of the filter buttons located below. EDIT: Maybe indents show parent-child for certain filter types and color codes show actions?

One example: I updated addon, browsed to my homepage (google search main page), clicked on top right google apps dots left of sign in button. It does not work, addon filters it. Yeah, fine, but I could not understand and find which of the filtered links is the one I am supposed to whitelist. Maybe a color code or indentation would help me understand?
I went back to old version, it only showed me a single link (https://ogs.google.com/widget/app/...) and I could whitelist that and move on. I know that new version does more and shows more, but I could not see which was a parent/child cleaning action and I could not differentiate which cleaned link to whitelist or allow. EDIT: I really didn't want to whitelist google completely and could not find out which filtered action is parent and which is child. I tested again and now I understand that it was a redirect filter, which is a higher degree of importance than tracking filter actions.
EDIT: When I open the same page in private mode, whitelisted action is gone and whitelist button was not actionable for re-whitelisting.

• Tab based allow/ban might be a bit much. URL based is better. I can stop addon for certain URLs or whitelist for them. Same URL, different actions for different tabs is a bit much. Though, I saw this option yesterday and cannot find it now, maybe you thought the same too and removed it? Or maybe I am mistaken and this was not a case.

• Although I like clean and simple interfaces, colored buttons for allow, whitelist, ban can be better for visual cues. For example, people use firewalls and understand red ban, green allow, white whitelist.

• Related to that, the buttons at the bottom have very hardly distinguishable tones of gray. I could not understand why I could not click on whitelist or allow once for certain links/actions at first and realized that not all buttons are not actionable for all link types. But I could not see that from going over the button because the gray shading (for actionable/doable or not) was not enough.

Anyway, this is what comes to me naturally now. I will try to respond as time allows and if/when you comment/reply on my general thoughts. EDIT: I wrote this hastily without realizing that addon has a wiki now. I skimmed through quickly; it is well written and nice to have, but I still think that better visual cues are needed for the interface for more intuitive understanding and usage of the addon for general/less-code-savy users.
Thank you again for still caring for and working on this addon. The new version needs some work. We might get there in time and with some more work. Don't lose hope or be discouraged with peoples' quick decisions and harsh remarks. People just wish things to work from get go and it is often not the case, but they don't wish to be the one doing the work. :)

I look forward to hearing your response.
All the best,

[Cimbali]

Hi @tarihci thanks a lot for the feedback and support ! Let me try and answer with some quick initial thoughts

Catch Text Links

I can have a look at putting the text links option back. The hassle is detecting the link from a random click position, it didn’t even work that well I think. It’s a bit further from the core add-on functionality let’s say, which is why it got removed. You can still copy cleaned text links from selected text though. Please tell me if that’s enough for you of you’d rather see the catch text links option come back.

Interface visual cues

I agree that the interface should be as easy to understand as possible. However there’s three different dimensions to display for each link, and I’m not entirely sure how to display those:

1. link type (click / request / header)
2. cleaning action (embedded URL extracted, parameters removed, path rewritten, javascript action removed)
3. consequences of cleaning (clean link loaded, or request cancelled)

Currently 1 and 2 are filters and 3 is color-coded and has a utf icon.

Buttons not actionable

That should be an easy fix. I’ll try some greyer greys.

Tab-based behaviour

Same URL, different actions for different tabs is a bit much

Only toggling the add-on on or off is per-tab, the cleaning behaviour is the same for all tabs. If it’s not, that’s a bug.

[Cimbali]

I’ll see if we can do some sort of hierarchical display of what document the requests are related to. That’s not going to be an easy one, but I see how it could help getting an idea of what’s going on.

[tarihci]

Thanks for the quick response. :)

I do use Catch Text Links frequently and rarely seen it not work. That's why I have been happy with and came asking for it, if possible. But, I understand that development is management of (time, mental energy, money, etc) resources, so I would understand if it is lower on your to-do list.

I understand the complexity of visualizing several types and layers of things, but IMO the current layout is rather too flat and doesn't provide enough visual cues to understand types and layers. Hence, it is harder to chose type or layer to act on (ban, allow, or investigate).

Currently we are all stuck at home, so I have some spare time. If you have time to work on it and don't mind an outsider's comments, I would be glad to give feedback on any visuals you would be willing to share.

[Cimbali]

Any feedback will definitely be welcome!

Here’s what I’m thinking right now:

1. hierarchical display of cleaned links, under parent document. This also means the need to display the parent even if it is not cleaned in a neutral style. Think something like the tree bash command

> https://closed.parent.url/here
v https://open.parent.url/here
├── https://dirty.link?rdirect=https://embed.link
│   [icons] the clean version
└── … another dirty link …
    [icons] the clean version
> https://cleaned.parent.url/another?one
  [icons] the clean version

Where the dirty link / icons + clean version are boxes similar to what is in the history today.

2. Change the icons display
   Instead of having a single icon for dropped/redirect, put one icon per filter that matches this link.

A clicked link where cleaning removed javascript
A cleaned request where we removed params and detected an embedded URL

Then have a stop sign icon to show when requests are dropped (and maintain the red-ish background).

Maybe the request type in front of the original link, the cleaning actions in front of the cleaned version?

[Cimbali]

For the Catch Text Links, I can probably put it back pretty easily by fishing the code back out from the history, the new version of the code is now more modular.

To sum up just so I’m clear, the exact feature you’re after is opening a cleaned text link when single-clicking it, without selecting it, right?
Right now to achieve the same functionality, you would have to select the text link, and either

• use “Copy Clean Link”, then to address bar, “Paste & Go”, or
• use the Firefox “Open Link” option from the context menu, and CleanLinks will clean it behind the scene, as every request that goes through the browser.

[Cimbali]

This is what the icon displays could look like. More work needed for the hierarchy. Any feedback (from you @tarihci or anyone else) is more than welcome.

[Cimbali]

Attempt at showing hierarchy

[tarihci]

I apologize for not acting on my promise yesterday. I got buried in my own study-at-home project and forgot to check back with the thread. Just woke up, saw the emails from the thread, now here.

To sum up just so I’m clear, the exact feature you’re after is opening a cleaned text link when single-clicking it, without selecting it, right?

My past habit was as such: I used to click on a text link with left mouse button while holding ctrl, and would have the link opened in another tab. No highlighting or selecting the text was needed. It used to work just clicking anywhere on the link. And surprisingly well at capturing the link in full even if I clicked any part of it.

Yes, currently it is quite cumbersome with extra steps.
Admittedly, CleanLinks' main job is cleaning links, but would be nice to carry on the old feature without making the user need to look for another addon for such a simple task.
I really appreciate your work. Thank you.

[tarihci]

I read the visual changes explanation comment and looked at the images.

• I understand your response to my first comment better now: The complexity (of visualization) you are having is due to any given document might be having multiple actions taken. But, I think your solution is rather simple and effective: visualizing parent document > child actions with separate icons for different actions. I like it.
• I think this image shows it well.

Further comments on the same image with my annotations:

• I really like your idea to visualize filter types and actions for each document with icons. For example, it is easy to understand user's clicked link document resulted in tracking parameters removed and redirected to embedded url actions shown in number3.
  For number2, 3 separate cleaning actions are taken and the result is https://google.com/.
  For number4, 3 separate cleaning actions are shown and can't see the result.

I think this reports the addon's activity much clearer and in a much understandable visual way to the user. You can put multiple example images in the wiki with numbered sections for filter types and actions, and explain what is being done. So, people can visually understand and map what the addon is doing.

• The visual/icon for documents shown as number1: can it be minus-expanded/plus-retracted for a better visual? Or a plus icon/sign when retracted and a document/page icon when expanded? It's a bit "what the heck is that?" right now.

I think this is really good. The addon's activity is properly visualized and mapped, so that users can see each filter action for each filter type separately.

An additional idea:

• Is it possible to use different text colors for different sections and reflect those in icon colors for filter types/actions? Different text colors for the inputs (parent documents), actioned upons (filter type and actions), and end results?
  For example, green text color for all cleaned end results?
  You are visualizing filter actions in raw link/text input with red cross-text and blue-highlight and that's good, but the cleaned end result is the same black text color with the raw text/link input. If you don't see any need for text color change for filter type or actions, at least the cleaned end result text/link could be a better differentiable popping color for each parent document.

[Cimbali]

Yes the parent items will obviously get better indicators it’s work in progress right now. :)

I think the “request type” filter as it is becomes slightly useless now: clicked items are always parents, requests always children, and header redirects are always childless items. One option is to use the classification you see in other logs and requests filters (maybe not icons just text): script / image / media / XHR / frame / etc.

[tarihci]

Yeah, you can decide on not showing these finer details of the process to the user. You can put them in the logs for technical scrutiny purposes, but choose not to show them to the average user.
The most a user cares for is clicking on which link got him/her where in the end. Whether it worked, or did not. The user doesn't care for types, just that taken relevant actions for them take him/her to the relevant end result.
But this should not take away too much from the info table, so that users are still able to make informed decisions on banning, whitelisting, etc. sites.
If you can provide another image of what you are thinking of doing for further improvement, I can comment on that too. :)
Or, if you think the issue is resolved and you've got enough feedback on the visuals, we can close the thread too. :)

Also, in combination with #106, you may reconsider what CL is really for. My initial reason to search for and find CL was to eliminate unnecessary ad pages I had to go through while clicking on links. These blogs were putting file hosting links behind intermediary ad pages. With CL, I was able to jump the middle process and skip to the desired hosting pages.
To be honest, I use UBlockOrigin for blocking or eliminating other stuff. So, as @Rtizer-9 indicates, you may want to look into setting a clearer line between CL and adblocking addons. Thus, CL would get a (maybe) smaller mission statement specific to itself, instead of trying to do its own job in addition to some of others too. (Although I must say that having multiple layers of protection (even if redundant after some point) proves to be useful sometimes, namely one layer catching stuff another layer missed.)
BTW, this is not a criticism at all, just a reminder that CL would better shine by focusing on its own mission statement tasks. I read #106 and I should say I don't know the details of web development side too well, so it might not be easy to do within how FF handles different addon processes, but focusing CL on its own job is the right thing to do in principle. I hope I am able to clarify what I mean by all this wall of text. :)

[Rtizer-9]

I think @tarihci is right, colorful icons are more visible and interactive. This can be a possiblity:

Green=allowed
Red=blocked
Yellow/Orange/Saffron etc=temporarily whitelisted
White=completely whitelisted

Disable and refresh/reload button can also be shifted to somewhere top.

[Cimbali]

I think I’ll release a version with all the fixes so far pretty soon, and without the hierachical display yet.

Hoewever, here's a step by step guide to test this (unfinished) display yourself:

• get the source code
  • either using the zip download from the "Clone or download" button on the repo’s main page
  • or by cloning the repository
• disable your current cleanlinks in your browser
• type about:debugging#addons in your firefox address bar
• tick "Enable add-on debugging"
• click "Load Temporary Addon"
• select the manifest.json file from the source code you just extracted or cloned

[tarihci]

I checked it out.

• Is it possible to do this: whenever user moves on to a new page (by clicking on a link or writing a new address on the bar) on the same tab, retract the hierarchy of cleaned document remaining from the past page. Currently, cleaned document hierarchies remain expanded and it can cause confusion if past pages and forward pages are with similar domains. EDIT: Also that forces user to move the scroll bar down to see the most recent cleaning actions.
• I could not see the Catch Text Links function in the settings, I guess you haven't added that yet.
• On a more general suggestion: I realized you have a colored legend in the Link Cleaning Rules section of Options tab. Would you consider employing that colored legend in the cleaned link texts of the main display?
• I could not see too much difference of color/tone in the lower right hand buttons of the main display. Maybe you haven't implemented that yet either. :)
• EDIT: Sometimes cleaning action hierarchies of the past page do not show until you move (click or write on address bar) on to the next page.

I will continue checking it further whenever you implement a new commit.

[Cimbali]

Working on the text links. Can you add a screenshot of the buttons so I can see what’s unclear? For now they’re only greyed out if unavailable (e.g. no link selected).

[tarihci]

I meant to say, the buttons on the lower right of the main display are not darker when clicked and do not have shade on them when I hover over them with my mouse.
But, I think I misunderstood you above, 3a6a628.
With 3a6a628, you made the addon icon's disable phase darker grey and I can see that really made a difference.

[tarihci]

I tested after f99fe39 and could not get CL to recognize and click unclickable text links.
One of the test pages is here. All plain text links in code boxes work (redirect and open that text link page) with the CL 3.2.8 and none of them work with f99fe39.
I enabled the function box "clean and open non-clickable text links by clicking them" at options too.
Am I doing it wrong?

[Cimbali]

Apparently my test swallowed a bug in computing the offset. Should be fixed now.

[Cimbali]

So @tarihci and @Rtizer-9 you both brought up colour coding and I’m trying to look into it but it’s in fact not trivial.

• only cleaned links (modified or dropped) appear in history,
  • so in particular, no links that are allowed/completely whitelisted/1-time whitelisted appear
• a number of different actions can be taken on a single link, so it’s hard to apply colouring based on that (beyond modified or dropped).
• currently there is in-text colouring for actions applied to the dirty link:
  • red: removed or replaced
  • green: inserted
  • blue: embedded URL
  • light grey: whitelisted parts of the URL
• any cleaned link can be the simultaneous result of user and default rules (legend in the Link Cleaning Rules section of Options tab), so these colours would be hard to re-use.

Actually when testing some of the websites reported by @Rtizer-9 in #106 without an ad-blocker, the information was drowned out by ads/tracking/metrics requests that leaked the current pages’ URL. I think actually the best way to hide that would be to group requests per domain, so that a full ads/metrics/etc. domain can be collapsed.

I still think there is value in modifying links from the previous page − e.g. when clicking a cleaned javascript link, it gets reported in the page in which it is clicked. You can only access that information from the next page. That probably means that we need a 2-level hierarchical display?

[Rtizer-9]

I'm sorry for not making it more clear earlier itself; I was only talking about implementing color coding for the lower right buttons and not urls in the log and even that ONLY if you think it'll be a good idea.

Also, IMO the urls in log looked more distinguishable with darker coding in earlier versions but frankly speaking the current implementation is completely fine.

[tarihci]

Apparently my test swallowed a bug in computing the offset. Should be fixed now.

It works wonderfully now.
Even better at catching and highlighting only the link than v3.2.8 I should say. Good job!

[tarihci]

you both brought up colour coding and I’m trying to look into it but it’s in fact not trivial.

I should have indicated that this was mostly a suggestion depending on a) doable with ease or not and b) if you also see that this could be an improvement to visualizing what the addon was doing to the user.
If it is too much of a hassle compared to its benefit, it is better to count it unsaid and move on. :)

was only talking about implementing color coding for the lower right buttons

I agree with @Rtizer-9 on more colorful buttons on the lower right bottom in main display. But you may opt for a more subtle color palette as the developer.
Moreover, with your efforts, I think CL's rule book got better since the first day of the new version release and I don't feel the need to fiddle with exceptions (and the buttons) anymore.

[Cimbali]

How about these buttons:

• open un-cleaned link (“allow once”)
• allow embedded link parameter (or in path)
• remove embedded link parameter
• allow javascript to modify links
• edit rules for selected URL

The reuse the applied actions icons, in particular the “skip embedded link” arrows.
The checkmark placement feels a little weird but this is due to the javascript logo. Bottom right would make it cover fully the JS letters.

Any feedback welcome. (We can go for brighter greens or more padding around the checkmarks, but apart from that?)

[Rtizer-9]

Great Improvement 😊

[tarihci]

First, if you don't mind sharing, I would appreciate a full view image of the main display window showing the whole icons set. My reason for this request is, color and design congruity within the whole set can only be judged by looking at the whole set.

Secondly, although I like the colors and the green check mark, I agree with you in it becoming problematic in its placement within the icon box in comparison to the other elements, e.g. JS.

Thirdly, that's why I suggest a frame, colored according to the meaning, around (some or all) icons. IMO, a frame around icons colored in green, orange, and red showing the decisions, would help the check mark problem. By employing a frame, you can decrease the size of the check mark. A smaller check mark would still make its point, but also render itself less problematic with other elements, such as JS.

I took the liberty of making some amateurish adjustments: 1, 2, 3, 4, 5, and alltogether.
I think number 2 and 4 benefited the most from the addition of a frame.
Number 1 is so so. I think it looks good, but you can leave it as before if you also decide against a frame for number 5 too. Then those two would be of same/similar design.
No need for number 3, because it already has a red circle within the icon itself, similar to a frame.
Black frame for number 5 is rather optional, does not make much of a difference. But, a frame would place it within the same design view of the other framed icons, if you go with a frame for number 1 and 5 too.
These don't have a smaller check mark because I couldn't do that much change that quickly in Paint, but I am sure that would make them better.

I made the changes hastily in Paint, so there could be several mistakes.
I am not a designer per se, so... go easy on me. :)

[Cimbali]

Here’s a recent screenshot of the popup with colour-coded buttons and hierarchical display of links in pages:

I almost put the double arrow with an orange “1” and orange border for “allow once” but decided against it, as it does whitelist once the full link, including all removed parameters etc., and not just the redirect. Colour values are taken from the Mozilla style guide.

[Cimbali]

Closing this issue now, as there is hierarchical display of cleaned links, and colouring on buttons. Let’s open new issues with more focused suggestions for further improvements.