[Bug 1885504] Improve automatic click events for nested elements

[abhi-agg]

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

Pull Request checklist

• Quality: Make sure this PR builds and runs cleanly.
  • Inside the glean/ folder, run:
    • npm run test Runs all tests
    • npm run lint Runs all linters
• Tests: This PR includes thorough tests or an explanation of why it does not
• Changelog: This PR includes a changelog entry to CHANGELOG.md or an explanation of why it does not need one
• Documentation: This PR includes documentation changes, an explanation of why it does not need that or a follow-up bug has been filed to do that work
  • Documentation should be added to The Glean Book when making changes to Glean's user facing API
    • When changes to the Glean Book are necessary, link to the corresponding PR on the mozilla/glean repository
  • Documentation should be added to the Glean.js developer documentation when making internal code changes

[abhi-agg]

Tested this change in following apps:

1. Glean Debug Ping View: Please see Test https://github.com/mozilla/glean.js/pull/1895 debug-ping-view#164 for details
2. Glean Dictionary: Please see Test https://github.com/mozilla/glean.js/pull/1895 glean-dictionary#2157 for details

With the approach proposed in this PR, I was able to remove pointer-events:none from all places in both these apps except one which is theme toggle button in Debug Ping View.

As per my understanding, the theme toggle button in Debug Ping View is a special case. As per the theme toggler code:

<button style={{ all: 'unset', cursor: 'pointer' }} data-glean-label='Theme' onClick={toggleTheme}>
    {isDarkMode ? <SunIcon /> : <MoonIcon />}
</button>

This means, when the current theme is "dark", the document is:

<button style={{ all: 'unset', cursor: 'pointer' }} data-glean-label='Theme' onClick={toggleTheme}>
    <SunIcon />
</button>

When user clicks the button to toggle the theme from "dark" to "light", the target of the click event becomes SunIcon and the document changes to:

<button style={{ all: 'unset', cursor: 'pointer' }} data-glean-label='Theme' onClick={toggleTheme}>
    <MoonIcon />
</button>

As SunIcon detaches from the document, there is no ancestor of the SunIcon that has any of the data-glean-* attributes set.

[rosahbruno]

I left a few comments here. Nothing too major, just a few callouts and different ways to do stuff.

[abhi-agg]

Hey @rosahbruno Thanks a lot for review. I submitted new commits to address your comments 👍🏾

Btw, do you have any opinion on this 👇🏾 ?

With the approach proposed in this PR, I was able to remove pointer-events:none from all places in both these apps except one which is theme toggle button in Debug Ping View.

As per my understanding, the theme toggle button in Debug Ping View is a special case. As per the theme toggler code:

<button style={{ all: 'unset', cursor: 'pointer' }} data-glean-label='Theme' onClick={toggleTheme}>
    {isDarkMode ? <SunIcon /> : <MoonIcon />}
</button>

This means, when the current theme is "dark", the document is:

<button style={{ all: 'unset', cursor: 'pointer' }} data-glean-label='Theme' onClick={toggleTheme}>
    <SunIcon />
</button>

When user clicks the button to toggle the theme from "dark" to "light", the target of the click event becomes SunIcon and the document changes to:

<button style={{ all: 'unset', cursor: 'pointer' }} data-glean-label='Theme' onClick={toggleTheme}>
    <MoonIcon />
</button>

As SunIcon detaches from the document, there is no ancestor of the SunIcon that has any of the data-glean-* attributes set.

[rosahbruno]

@abhi-agg

With the approach proposed in this PR, I was able to remove pointer-events:none from all places in both these apps except one which is theme toggle button in Debug Ping View.

I think this is fine. The theme toggle is a bit of an odd set up since it toggles between two separate components. I think having to use a small workaround for something like that still, as long as these changes fix other things, then it should be ok

[abhi-agg]

Great. As I mentioned above, this change enables us to remove pointer-events:none from all places in both these apps except from theme toggle button in Debug Ping View. So, we are good to go.

[rosahbruno]

LGTM, nice job

I tested this on the Glean samples/browser/web app and it is working as expected. I think we should add this by default to this sample project. I will make a bug and a PR for this since I already have it done.

[abhi-agg]

Thanks @rosahbruno 👍🏾