Script works great, thanks for creating it! It's really nice being able to toggle comments by clicking anywhere in the header.
I had a few tiny quality of life CSS ideas for your consideration: 1. For the user's avatar, the `figure` element, instead of applying `display: none;`, if you apply `visibility: hidden;`, it will still hide the avatar (including the height the avatar takes up), but it will retain the width that the avatar occupies, meaning the entire comment header bar will not move, which is nice.
2. Occasionally if you click to toggle too quickly, you may accidentally select/highlight some text. Setting `it.style['user-select'] = 'none';` this CSS on the element you're creating will ensure the user can't highlight the show/hide text, meaning they will never accidentally select some text.
3. If you do #1, it has the minor negative of making it slightly more difficult to differentiate collapsed comments from uncollapsed. One alternative, while still retaining the benefits of #1, would be to change the `header` opacity to `0.5`. (down from 0.75) `var header = parent.querySelector('header');` is sufficient to target the header.
See attached pic to see what the #1 and #3 visual changes look like.
Script works great, thanks for creating it! It's really nice being able to toggle comments by clicking anywhere in the header.
I had a few tiny quality of life CSS ideas for your consideration:
1. For the user's avatar, the `figure` element, instead of applying `display: none;`, if you apply `visibility: hidden;`, it will still hide the avatar (including the height the avatar takes up), but it will retain the width that the avatar occupies, meaning the entire comment header bar will not move, which is nice.
2. Occasionally if you click to toggle too quickly, you may accidentally select/highlight some text. Setting `it.style['user-select'] = 'none';` this CSS on the element you're creating will ensure the user can't highlight the show/hide text, meaning they will never accidentally select some text.
3. If you do #1, it has the minor negative of making it slightly more difficult to differentiate collapsed comments from uncollapsed. One alternative, while still retaining the benefits of #1, would be to change the `header` opacity to `0.5`. (down from 0.75) `var header = parent.querySelector('header');` is sufficient to target the header.
See attached pic to see what the #1 and #3 visual changes look like.