[Bug 1882747] Replace glean's manual click event recording with automatic one

[abhi-agg]

Fixes https://bugzilla.mozilla.org/show_bug.cgi?id=1882747

#154 had introduced Glean's manual click event recording at some place.
We are using Glean's automatic click event recording at all places now.

[Dexterp37]

Have you tried, instead, setting the label here?

[abhi-agg]

Yes, I have. The click events never get fired on <button> element that you linked.

[Dexterp37]

It's quite a bit odd that we need to tag all the sub-elements that make a React element: this is not going to be possible when using other things we don't own. I wonder if the problem lies elsewhere.

[rosahbruno]

It is weird that events aren't fired on the button. I agree that if we have to tag elements really far down in the DOM tree it might get really hard for users to figure out how to tag their elements.

I also wonder if there is someway we can fix our side so that we can get the button element clicks to register

[abhi-agg]

We are capturing clicks only on those elements that have data-glean-* attributes set.

One approach that @badboy suggested is to add "click" event listeners for all those elements that have data-glean-* attributes set (instead of a general click listener on the entire document and then filtering which ones have these attributes set) in the document and using the event bubbling to capture events on the parent of the outermost svg element.

This might work but I will have to test it to say for sure.

[rosahbruno]

For the specific issue above, I was able to get the button click working by setting pointerEvents: 'none' on the SVG elements instead.

It would be nice if we could somehow walk the tree of elements to check for the data-glean-label rather than having to rely on that one specific element having it. Event bubbling looks like what we may need, I am going to look into any ways to see if we can walk the DOM tree at all

[rosahbruno]

Is this behavior only happening with SVGs? Did we try this with other types of elements and see if we are running into the same issues? I think if this works generally across the board and we have to include some caveats for SVGs or tell the users to just use the built-in click event that wouldn't be a terrible UX.

[Dexterp37]

For the specific issue above, I was able to get the button click working by setting pointerEvents: 'none' on the SVG elements instead.

I think this is the right path: let's not over-tweak this for this specific use-case, but rather just add the pointerEvents properties to the icons we have committed in tree.

[rosahbruno]

r+wc

If we make the changes in the thread to just use pointer-events, that should be good for now. We can callout in our docs that there are certain elements where this may be an issue, like SVGs.

[abhi-agg]

@rosahbruno Thanks a lot for your review.

I made the changes pertaining to pointer-events=none. I am merging this change to move ahead with DPV deployment. If you feel that there is still something that needs to be changed, please feel free to let me know and I will create a followup PR 👍🏾