Detailed documentation of selectors for easier maintenance

[aryomuzakki]

Is your feature request related to a problem? Please describe.

I'm sure WhatsApp would update it's selector again.

This recent update made me realize that I don't know which element was this selectors referring to, because of how deep the html structure or that the selectors are actually reused in other similar element. Example: last message preview and about section in contact list.

Also, what is the intended behavior of a toggle. Example: last message preview should blur notif number or not. Users might have different opinion here. (Based on issue #68)

Current description is not enough, and maybe because WhatsApp have new features like poll, community, business account, channel, etc.

Describe the solution you'd like I think it would be great to have a detailed documentation. What I think we would need in the documentation is a list with this information:

1. The selectors
2. The html structure, a screenshot or code of selected element along with it's parent and child (full or only some level of the tree)
3. Screen of the selected element. maybe in 2 state. before and after blurred.

markdown format might not be enough for this when there is a lot of screenshot for element

Describe alternatives you've considered I considered to made a table of the selectors, the html screenshot in inspect element, then WhatsApp screenshot in google spreadsheet. I haven't do this yet.

Additional context I was thinking about what the solution is, and @Tgentil comment in this pr give some inspiration.

EDIT I think this should also included list of scenario or case, because I need to use particular chat to send all kind of message to test (and I still missing something 😐 ). Or perhaps someone would like to made the manual test case document 🙂

[Tgentil]

@aryomuzakki, I completely agree that detailed documentation is crucial, especially as it could significantly enhance new contributors' ability to engage with the project. This would not only maintain the project's current effectiveness but also facilitate quicker updates and bug fixes in response to changes in WhatsApp Web or browser updates. Implementing standard documentation files like SECURITY.md, CODE_OF_CONDUCT.md, and CONTRIBUTING.md would provide clear guidance for new developers on how to contribute effectively. This structured approach would certainly make the project more accessible and maintainable. But I also agree with @aryomuzakki that more detailed documentation, which may extend beyond Markdown to better organize visual aids like screenshots, would be beneficial as well.

[aryomuzakki]

I would prioritizes on selectors documentation first for quicker updates and bug fixes like you said, maybe contributing.md too.

I actually lack of experience for that standard md files.

I currently work on blur adjustment feature, and it almost finish. After that, I will started documenting bit by bit to spreadsheet, anyone help is greatly appreciated. Or maybe any better idea to finish this quickly?

[UsmanAhmadSaeed]

I'd be happy to help around the end of next month and onward. Have some exams coming up, so after that, I'll take some time to add and improve. I'd previously added multiple tweaks and privately published for my own use, like blurring names on "Status" list screen and while the status is open, blurring the captions under "Statuses" etc, as well as confirming that name blur blurs name in all possible places, like group lists, contact lists, when forwarding a message, blurring business and normal profile names, profile photos blur in voice messages, groups etc.

So yeah, there's a lot of small adjustments that'd improve the functionality and features. I've wanted to further breakdown the on/off buttons to provide even more control to user over specific elements to blur, as well as that long due blur intensity enhancement.

@aryomuzakki I think it's better to comment the code, in sentences if needed, instead of keeping separate selector documentation as selectors keep changing and it'd be uncomfortable to go back and forth between two files to identify selectors during dev. The code can be minified for release, but kept fully commented with details for dev.

I agree on the functionality being prioritized, since the documentation and markdowns would be easier then.

Edit: Nevermind, just saw some of the PRs y'all made. That's awesome. 🥳

[aryomuzakki]

Thanks for the feedback @UsmanAhmadSaeed

Well, the actual problem I found is that comments wasn't enough to tell me which element to used, because describing the element into comments is hard, and even harder to understand the comments. (even those that I comment myself).

When new whatsapp version released, and selectors changed, I won't be able to know which element was used. I can't make sure to have an old version of whatsapp to see which element was selected.

And some element can have similar selectors, like profile picture and archive message icon in left panel list. Or when we actually want to select profile picture only in left panel, but instead, affected profile picture in group member list. (of course this could be intentional).

I'm hoping that any contributor will have easier time to understand what element to blur and decide which selectors to use.

[LukasLen]

An idea I had regarding this: why not keep the specific selectors out of the documentation but rather define a label for what we want to blur and using this in a comment in the code and documentation.

For example: In the css files:

.abc123, /* text_input_chat */

In the documentation:

• text_input_chat Selecting the text input when writing a new message at the bottom of the chat [image for further explanation]