Minor codebase updates and fixes #4008

Hi, I'm taking on this

• Replace more hardcoded CSS colors and variables with GitHub’s official variables (fixed by #4121)
• This selector is too broad, it also selects conversation titles, for example on this very page (fixed by #4135) https://github.com/sindresorhus/refined-github/blob/b2ed57009f704f48a0c2b99c51013161fe42944b/source/features/parse-backticks.tsx#L45
• Wrong indentation https://github.com/sindresorhus/refined-github/blob/10d08987fae5fe87cca1a58a1b94807fd4a4d181/source/features/comment-fields-keyboard-shortcuts.tsx#L15-L18
• Use mem.decorator wherever possible https://github.com/sindresorhus/mem/pull/61

- const foo = mem(() => {return something});
+ @mem.decorator();
+ function foo() {return something}

Use mem.decorator wherever possible sindresorhus/mem#61

Sadly, TypeScript decorators can only be used inside classes: https://www.typescriptlang.org/docs/handbook/decorators.html#decorators

• Change every GHE-related comments to /* GHE #issue */ so that they're easily trackable and removed once old enough. Never "GitHub Enterprise" but always GHE, example: https://github.com/sindresorhus/refined-github/blob/3aadf2f9141107d7ca92e8753f2a66cbc10ebd9d/source/features/safer-destructive-actions.css#L4
• Possibly review and remove such comments if they're older than 1 year

The last 2 I have included in my june refresh PR (un committed). If you want I can commit them now. But I would rather wait for then so we know that we are breaking GHE in one PR 😄

• use .base-ref instead of :not(.head-ref) 🤷‍♂️ https://github.com/sindresorhus/refined-github/blob/1a0d254f87e235dd7991c1b8f4034326dc822800/source/features/clean-conversation-headers.tsx#L32:L32

• Change

https://github.com/sindresorhus/refined-github/blob/ee8b6422d2ddd1199f557594d03e7ee850e843f0/source/features/enable-file-links-in-compare-view.tsx#L62-L63

To pageDetect.isClosedPR. Depends on https://github.com/fregante/github-url-detection/issues/67

• Move negative exclusions to their own list of required tests

https://github.com/sindresorhus/refined-github/blob/936eedbb0bb37a30fc44a2cc7e5f3af31f24a3fc/source/features/fork-source-link-same-view.tsx#L24-L32

Could be

    required: [ // name TBD
        pageDetect.isForkedRepo
    ],
    include: [
        pageDetect.isSingleFile,
        pageDetect.isRepoTree,
        pageDetect.isEditingFile
    ],
    exclude: [
        pageDetect.isRepoRoot
    ],

Side note: https://github.com/sindresorhus/refined-github/pull/4797/files#r711719028

• Maybe rewrite most selector-observer usage to use deinit instead of onetime as described in https://github.com/sindresorhus/refined-github/pull/4072#issuecomment-792402458
• init could also just return VoidFunction | VoidFunction[] directly and they can be treated exactly like deinit

- const deinit: VoidFunction[] = [];

function init(): void {
    const listener = delegate(…);
    const observer = observe(…);
-    deinit.push(listener.destroy, observer.abort);
+    return [listener.destroy, observer.abort];
}

void features.add(__filebasename, {
    init,
-     deinit
});

• Use https://github.com/g-plane/typed-query-selector in fetch-dom

• These should be 4 checkboxes as originally intended:

<img width="593" alt="Screen Shot 2021-04-04 at 00 46 42" src="https://user-images.githubusercontent.com/1402241/113486909-40295300-94df-11eb-8efd-98b1a570d00c.png">

This makes it clearer to users that a no-scope token is still fine for read-only operations. Currently instead no error is shown, but the user still sees

❌ ❌ ❌

Instead of

✅ ❌ ❌ ❌

• Replace

https://github.com/sindresorhus/refined-github/blob/a94b69550dde2e9a75001470dc75d17e6cf50401/source/features/table-input.tsx#L51-L53

With octoicon-table https://github.com/primer/octicons/releases/tag/v13.0.0

Seems like GitHub moved the tooltips orientation in the editor's toolbar, and now RGH's tooltips don't match: Worth fixing?

Yes

• Replace exclude: [isEmptyRepo] and related exclusions with a check in the try init() catch block in features/index.

Instead of having to explicitly specify these exclusions, RG should just understand that the current page is incomplete and ignore every error. Maybe it should just show once a log: “This page is incomplete. Some features have been disabled.”

The feature logger might also display a log with a 💢 emoji or similar.

Edit: Same goes for features that fail when you’re logged out.

• Use typed-query-selector for closest as well, follows https://github.com/sindresorhus/refined-github/pull/3831

This means we can stop using unnecessary generics like .closest<HMTLElement>('.hi')

Edit: closest is already typed, but it defaults to Element instead of HTMLElement: https://github.com/g-plane/typed-query-selector/issues/16

It should updated

• Add a direct "rate" link to the options page, to encourage the user to rate the extension in the Mac App Store / Chrome Store / Firefox Addons.

Maybe this: https://github.com/sindresorhus/refined-github/blob/2d165c692e2fcdd5b0a01a01ee0bc37af7acefd1/source/features/clean-repo-sidebar.css#L13 could be replaced by .mt-n3 (source: https://primer.style/css/utilities/margin#negative-margins)

<details> <summary>Same for others negative margin/paddings:</summary>

$ rg '(margin|padding)-.+?: -'

source/features/clean-conversation-sidebar.css
3:margin-bottom: -5px;

source/features/hide-readme-header.css
6:margin-bottom: -40px;

source/features/remove-label-faster.css
4:margin-right: -7px;

source/features/quick-mention.css
7:margin-bottom: -30px; /* Avoids pushing app badges down #2630 */

source/features/reactions-avatars.css
9:margin-bottom: -1px; /* Makes up for `order-bottom` */
13:margin-top: -1px; /* Makes up for `.reaction-summary-item {border-top}` */
20:margin-top: -0.3em;
21:margin-left: -0.5em;
37:margin-top: -1px;

source/features/clean-dashboard.css
45:margin-top: -5px;
46:margin-bottom: -5px;

source/features/forked-to.css
3:margin-left: -1px;

source/features/clean-mergeability-box.css
25:margin-top: -4px;
29:margin-top: -6px;

source/features/fix-first-tab-length.css
16:margin-left: -37px !important; /* GitHub sets this to -28px */

source/features/clean-pinned-issues.css
37:margin-top: -2px;
42:margin-left: -10px;

source/features/dim-bots.css
39:margin-bottom: -1.6em;
46:margin-bottom: -2em;

source/features/toggle-files-button.css
3:margin-right: -10px;

source/features/clean-repo-sidebar.css
13:margin-top: -16px !important;

</details>

Exclusively if we already create/alter the element via JS

• Add updateRepoNavigation function export to more-dropdown so that other features like releases-tab and bugs-tab can call it when they update the content. Occasionally I still see https://github.com/sindresorhus/refined-github/issues/3347, probably due to bugs-tab

@fregante what updates should I know about for typescript 4.3?

@fregante what updates should I know about for typescript 4.3?

🤷‍♂️

• Use on-details-menu-selected in conversation-activity-filter and remove the await delay(1) in the event handler (originally mentioned in https://github.com/sindresorhus/refined-github/pull/4526#discussion_r660522833)

• Add https://github.blog/changelog/2021-07-02-github-actions-setup-node-now-supports-dependency-caching?

• Replace manual deduplication checks with deduplicate

https://github.com/sindresorhus/refined-github/blob/40ed43f6cdd23178b6c6ee7c04a5731cb2342012/source/features/clean-conversation-sidebar.tsx#L60-L63

This should just be deduplicate: '.rgh-clean-sidebar' I think

Nope deduplucate will not work on additionalListeners

Darn it, again 😃

• Add a general spellchecker? I wish there was a simple solution to spellcheck text in comments, markdown and ideally even in phrase-like strings. Example: https://github.com/marketplace/actions/github-spellcheck

I think that tool lets us extend the dictionary by editing a file at the root of the repo. It would be ok if it worked out of the box or with a dozen of new words in the dictionary, but if it requires us to add a hundred words then it’s not worth it anymore.

• Fix some TODOs 😅

From https://github.com/sindresorhus/refined-github/issues/4197#issuecomment-820954304

• Rewrite copy-file so that it uses the native clipboard-copy element.

I'm not sure if this is possible, but I'm imagining that if we use a "capture: true" we can run before their event and set the required attribute:

1. Onclick -> button.setAttribute('value', blob.innerText)
2. clipboard-copy takes care of showing the tooltip and actually copying to the clipboard

Also our onclick handler only needs to run once (if this optimization is possible)

• Fix every instance of unicorn/no-array-callback-reference and make it an error in XO’s config

Can I post here as well? Would like to add back the username in reaction-avatars: https://github.com/sindresorhus/refined-github/pull/4608#discussion_r678439504

You can, but this issue is about refactoring and other meta improvements, not fixes/changes to specific features. That specific tooltip was removed at some point, so it's worth blaming the line and opening a new issue, if you want.

• Add .prettierignore file to disable "prettier on save" feature of every editor: https://prettier.io/docs/en/ignore.html

The content would probably be just *.* but it needs to be tested

• Probably revert https://github.com/sindresorhus/refined-github/commit/bfdad4b4ea240c93ab0c51ff4e2a71a5b3849c94

The solution seems awkward, it needs to be reconsidered.