Add pr-easy-toggle-files feature - #3750
Conversation
pr-easy-toggle-files featurepr-easy-toggle-files feature
fregante
left a comment
There was a problem hiding this comment.
Thanks for the PR! Here's a few suggestions
|
Updated according to your suggestions @fregante. |
|
Thanks! Generally here force pushing is not necessary and it makes reviewing only the changes harder |
You are welcome! Your extension is great and brings a lot of convenience. @fregante no offense at all but for the "it makes reviewing only the changes harder" when I see some commits simply titled "shorten" and "lint" 😅 ... |
pr-easy-toggle-files featurepr-easy-toggle-files feature
I use "lint" generously to describe "obvious" changes that are only meant to make the build, types or linter pass. As for the "shorter" I just followed what my previous review suggested + I left a comment there explaining why We squash commits in the end, so my comment was more about being able to tell the difference between a review and the next, so that I don't need to review the same piece of code twice. |
|
|
||
| // The clicked element is either the bar itself or one of its 2 children | ||
| if (elementClicked === headerBar || elementClicked.parentElement === headerBar) { | ||
| select('.file-info > button', headerBar)!.click(); |
There was a problem hiding this comment.
| select('.file-info > button', headerBar)!.click(); | |
| select('[aria-label="Toggle diff contents"]', headerBar)!.click(); |
There was a problem hiding this comment.
Are you sure? I thought relying on an attribute so "unstable"/volatile (I mean his value could change more easily and more quickly than the others) would not be a good idea.
I also thought about using [aria-expanded] to discriminate the button, as in the left part of the bar only this element would have this attribute.
I think using [aria-label="Toggle diff contents"] would require us/you to keep this selector up-to-date more often.
There was a problem hiding this comment.
Are you sure? I thought relying on an attribute so "unstable"/volatile (I mean his value could change more easily and more quickly than the others) would not be a good idea.
heheh welcome to the world of "hacking on content you don't own."
Anything we use can change with any frequency, so it's best to use the most unique identifiers rather than loose selectors, because GitHub might change the order of elements and suddenly .file-info > button does something you don't expect at all.
If [aria-label="Toggle diff contents"] changes, the click will do nothing (with a console error) and that's still preferable to "doing the unexpected."
GitHub has been removing many unique classes so we're left with fickle position-based selectors. Where possible, even if it requires more code, it's best to still select the most unique part of the page and then traverse the DOM from there, for example:
data-ga-click and aria-label are the attributes that are less likely to change, whereas even .file-info could be gone one day and replaced with .box.position-relative.px-2
Either way, it's best to keep our code readable, and with the suggested selector you know exactly what we're looking for.
There was a problem hiding this comment.
And I completely understand. In this direction I still think [aria-expanded] would be a better choice, but I will update the selector like your suggestion then.
|
Thanks Mr Pan au Chocolate |
Noooo, damn it! How is that possible 😄 ?! |
LINKED ISSUES:
Fixes Pull request / Tab Files - Toggle files by clicking on their header bar #3738.
TEST URLS:
https://github.com/microsoft/TypeScript/pull/12114/files
https://github.com/sindresorhus/refined-github/pull/3750/files
SCREENSHOT: