Lint (#5654)

Co-authored-by: cheap-glitch <[email protected]>

.github/ISSUE_TEMPLATE/2_feature_request.yml

@@ -15,9 +15,9 @@ body:
  attributes:
  label: Screenshot
  description: You can provide screenshots/mockups to better visualize your idea. Files can be dropped in this field
- - type: input
+ - type: textarea
  attributes:
- label: Example URL
+ label: Example URLs
  description: Include a REAL URL where the feature should appear. e.g. Do you want a feature to appear on the main page of a repo? Paste a link to a repo
  placeholder: https://github.com/refined-github/refined-github
  validations:

source/background.ts

@@ -44,10 +44,10 @@ browser.runtime.onMessage.addListener((message: typeof messageHandlers, sender)
  }
 });
 
-// Give the browserAction a reason to exist other than "Enable RGH on this domain"
-browser.browserAction.onClicked.addListener(async () => {
+browser.browserAction.onClicked.addListener(async tab => {
  const {actionUrl} = await optionsStorage.getAll();
  void browser.tabs.create({
+ openerTabId: tab.id,
  url: actionUrl || 'https://github.com',
  });
 });

source/features/clean-repo-filelist-actions.tsx

@@ -15,42 +15,44 @@ function addTooltipToSummary(childElement: Element, tooltip: string): void {
  );
 }
 
-function init(): Deinit {
- // `.btn` selects the desktop version
- return observe('.btn[data-hotkey="t"]:not(.rgh-repo-filelist-actions)', {
- add(searchButton) {
-  searchButton.classList.add('tooltipped', 'tooltipped-ne', 'rgh-repo-filelist-actions');
-  searchButton.setAttribute('aria-label', 'Go to file');
+function cleanFilelistActions(searchButton: Element): void {
+ searchButton.classList.add('tooltipped', 'tooltipped-ne', 'rgh-repo-filelist-actions');
+ searchButton.setAttribute('aria-label', 'Go to file');
+
+ // Replace "Go to file" with icon
+ searchButton.firstChild!.replaceWith(<SearchIcon/>);
 
- // Replace "Go to file" with icon
- searchButton.firstChild!.replaceWith(<SearchIcon/>);
+ // This button doesn't appear on `isSingleFile`
+ const addFileDropdown = searchButton.nextElementSibling!.querySelector('.dropdown-caret');
+ if (addFileDropdown) {
+ addFileDropdown.parentElement!.classList.replace('d-md-flex', 'd-md-block');
 
- // This button doesn't appear on `isSingleFile`
- const addFileDropdown = searchButton.nextElementSibling!.querySelector('.dropdown-caret');
- if (addFileDropdown) {
- addFileDropdown.parentElement!.classList.replace('d-md-flex', 'd-md-block');
+ // Replace "Add file" with icon
+ addFileDropdown.previousSibling!.replaceWith(<PlusIcon/>);
 
-  // Replace "Add file" with icon
-  addFileDropdown.previousSibling!.replaceWith(<PlusIcon/>);
+ addTooltipToSummary(addFileDropdown, 'Add file');
+ }
 
- addTooltipToSummary(addFileDropdown, 'Add file');
- }
+ const codeDropdownButton = select('get-repo summary');
+ if (codeDropdownButton) { // This dropdown doesn't appear on `isSingleFile`
+ addTooltipToSummary(codeDropdownButton, 'Clone, open or download');
 
- const codeDropdownButton = select('get-repo summary');
- if (codeDropdownButton) { // This dropdown doesn't appear on `isSingleFile`
- addTooltipToSummary(codeDropdownButton, 'Clone, open or download');
+ // Users with Codespaces enabled already have an icon in the button https://github.com/refined-github/refined-github/pull/5074#issuecomment-983251719
+ const codeIcon = select('.octicon-code', codeDropdownButton);
+ if (codeIcon) {
+ // Remove "Code" text
+ codeIcon.nextSibling!.remove();
+ } else {
+ // Replace "Code" text with icon
+ codeDropdownButton.firstChild!.replaceWith(<CodeIcon/>);
+ }
+ }
+}
 
- // Users with Codespaces enabled already have an icon in the button https://github.com/refined-github/refined-github/pull/5074#issuecomment-983251719
- const codeIcon = select('.octicon-code', codeDropdownButton);
- if (codeIcon) {
- // Remove "Code" text
- codeIcon.nextSibling!.remove();
- } else {
- // Replace "Code" text with icon
- codeDropdownButton.firstChild!.replaceWith(<CodeIcon/>);
- }
- }
- },
+function init(): Deinit {
+ // `.btn` selects the desktop version
+ return observe('.btn[data-hotkey="t"]:not(.rgh-repo-filelist-actions)', {
+ add: cleanFilelistActions,
  });
 }
 

source/features/comment-on-draft-pr-indicator.tsx

@@ -2,7 +2,7 @@ import select from 'select-dom';
 import * as pageDetect from 'github-url-detection';
 
 import features from '.';
-import onReplacedElement from '../helpers/on-replaced-element';
+import onElementReplacement from '../helpers/on-element-replacement';
 
 function addIndicator(button: HTMLElement): void {
  button.classList.add('rgh-draft-pr-indicator');
@@ -22,7 +22,7 @@ function init(signal: AbortSignal): void {
 
  if (pageDetect.isPRConversation()) {
  // The button is part of a .js-updatable-content partial
- void onReplacedElement('#partial-new-comment-form-actions .btn-primary:not(.rgh-draft-pr-indicator)', addIndicator, {runCallbackOnStart: true, signal});
+ void onElementReplacement('#partial-new-comment-form-actions .btn-primary:not(.rgh-draft-pr-indicator)', addIndicator, {runCallbackOnStart: true, signal});
  }
 }
 

source/features/conversation-links-on-repo-lists.tsx

@@ -6,35 +6,37 @@ import {GitPullRequestIcon, IssueOpenedIcon} from '@primer/octicons-react';
 
 import features from '.';
 
+function addConversationLinks(repositoryLink: HTMLAnchorElement): void {
+ repositoryLink.classList.add('rgh-discussion-links');
+ const repository = repositoryLink.closest('li')!;
+
+ // Remove the "X issues need help" link
+ select('[href*="issues?q=label%3A%22help+wanted"]', repository)?.remove();
+
+ // Place before the "Updated on" element
+ select('relative-time', repository)!.previousSibling!.before(
+ <a
+ className="Link--muted mr-3"
+ href={repositoryLink.href + '/issues?q=is%3Aissue+is%3Aopen'}
+ >
+ <IssueOpenedIcon/>
+ </a>,
+ <a
+ className="Link--muted mr-3"
+ href={repositoryLink.href + '/pulls?q=is%3Apr+is%3Aopen'}
+ >
+ <GitPullRequestIcon/>
+ </a>,
+ );
+}
+
 function init(): Deinit {
  return observe([
  '[itemprop="name codeRepository"]:not(.rgh-discussion-links)', // `isUserProfileRepoTab`
  '[data-hydro-click*=\'"model_name":"Repository"\']:not(.rgh-discussion-links)', // `isGlobalSearchResults`
  ].join(','), {
  constructor: HTMLAnchorElement,
- add(repositoryLink) {
- repositoryLink.classList.add('rgh-discussion-links');
- const repository = repositoryLink.closest('li')!;
-
- // Remove the "X issues need help" link
- select('[href*="issues?q=label%3A%22help+wanted"]', repository)?.remove();
-
- // Place before the "Updated on" element
- select('relative-time', repository)!.previousSibling!.before(
- <a
- className="Link--muted mr-3"
- href={repositoryLink.href + '/issues?q=is%3Aissue+is%3Aopen'}
- >
- <IssueOpenedIcon/>
- </a>,
- <a
- className="Link--muted mr-3"
- href={repositoryLink.href + '/pulls?q=is%3Apr+is%3Aopen'}
- >
- <GitPullRequestIcon/>
- </a>,
- );
- },
+ add: addConversationLinks,
  });
 }
 

source/features/convert-pr-to-draft-improvements.tsx

@@ -12,25 +12,27 @@ function closeModal({delegateTarget: button}: delegate.Event<MouseEvent, HTMLBut
  button.disabled = true;
 }
 
+function addConvertToDraftButton(alternativeActions: Element): void {
+ const existingButton = select('[data-url$="/convert_to_draft"]');
+ // Needs to check the existence of both to guarantee the non-draft state
+ if (!existingButton || select.exists('[action$="/ready_for_review"]')) {
+ return;
+ }
+
+ alternativeActions.classList.add('rgh-convert-pr-draft-position');
+ const convertToDraft = existingButton.closest('details')!.cloneNode(true);
+ select('.Link--muted', convertToDraft)!.classList.remove('Link--muted');
+ alternativeActions.prepend(convertToDraft);
+}
+
 function init(): Deinit[] {
  return [
  // Immediately close lightbox after click instead of waiting for the ajaxed widget to refresh
  delegate(document, '.js-convert-to-draft', 'click', closeModal),
 
  // Copy button to mergeability box
  observe('.alt-merge-options:not(.rgh-convert-pr-draft-position)', {
- add(alternativeActions) {
- const existingButton = select('[data-url$="/convert_to_draft"]');
- // Needs to check the existence of both to guarantee the non-draft state
- if (!existingButton || select.exists('[action$="/ready_for_review"]')) {
- return;
- }
-
- alternativeActions.classList.add('rgh-convert-pr-draft-position');
- const convertToDraft = existingButton.closest('details')!.cloneNode(true);
- select('.Link--muted', convertToDraft)!.classList.remove('Link--muted');
- alternativeActions.prepend(convertToDraft);
- },
+ add: addConvertToDraftButton,
  }),
  ];
 }

source/features/highlight-deleted-and-added-files-in-diffs.tsx

@@ -17,6 +17,27 @@ async function loadDeferred(jumpList: Element): Promise<void> {
  clearInterval(retrier);
 }
 
+function highlightFilename(filename: HTMLAnchorElement, sourceIcon: SVGSVGElement): void {
+ filename.classList.add('rgh-pr-file-state');
+
+ const icon = sourceIcon.cloneNode(true);
+ const action = icon.getAttribute('title')!;
+ if (action === 'added') {
+ icon.classList.add('color-text-success', 'color-fg-success');
+ } else if (action === 'removed') {
+ icon.classList.add('color-text-danger', 'color-fg-danger');
+ } else {
+ return;
+ }
+
+ icon.classList.remove('select-menu-item-icon');
+ filename.parentElement!.append(
+ <span className="tooltipped tooltipped-s ml-1" aria-label={'File ' + action}>
+ {icon}
+ </span>,
+ );
+}
+
 async function init(): Promise<Deinit> {
  const fileList = await elementReady([
  '.toc-select details-menu[src*="/show_toc?"]', // `isPR`
@@ -31,26 +52,11 @@ async function init(): Promise<Deinit> {
  return observe('.file-info .Link--primary:not(.rgh-pr-file-state)', {
  constructor: HTMLAnchorElement,
  add(filename) {
- filename.classList.add('rgh-pr-file-state');
  const sourceIcon = pageDetect.isPR()
  ? select(`[href="${filename.hash}"] svg`, fileList)!
  : select(`svg + [href="${filename.hash}"]`, fileList)?.previousElementSibling as SVGSVGElement;
- const icon = sourceIcon.cloneNode(true);
- const action = icon.getAttribute('title')!;
- if (action === 'added') {
- icon.classList.add('color-text-success', 'color-fg-success');
- } else if (action === 'removed') {
- icon.classList.add('color-text-danger', 'color-fg-danger');
- } else {
- return;
- }
 
- icon.classList.remove('select-menu-item-icon');
- filename.parentElement!.append(
- <span className="tooltipped tooltipped-s ml-1" aria-label={'File ' + action}>
- {icon}
- </span>,
- );
+ highlightFilename(filename, sourceIcon);
  },
  });
 }

source/features/link-to-github-io.tsx

@@ -7,34 +7,34 @@ import {LinkExternalIcon} from '@primer/octicons-react';
 import features from '.';
 import {getRepo} from '../github-helpers';
 
-async function initRepo(): Promise<void> {
- const repoTitle = await elementReady('[itemprop="name"]');
- repoTitle!.after(
+function getLinkToGitHubIo(repoTitle: HTMLElement): JSX.Element {
+ return (
  <a
- className="mr-2"
- href={`https://${repoTitle!.textContent!.trim()}`}
+ href={`https://${repoTitle.textContent!.trim()}`}
  target="_blank"
  rel="noopener noreferrer"
  >
  <LinkExternalIcon className="v-align-middle"/>
- </a>,
+ </a>
  );
 }
 
+async function initRepo(): Promise<void> {
+ const repoTitle = (await elementReady('[itemprop="name"]'))!;
+ const link = getLinkToGitHubIo(repoTitle);
+
+ link.classList.add('mr-2');
+ repoTitle.after(link);
+}
+
 function initRepoList(): Deinit {
  return observe('a[href$=".github.io"][itemprop="name codeRepository"]:not(.rgh-github-io)', {
  constructor: HTMLAnchorElement,
- add(repository) {
- repository.classList.add('rgh-github-io');
- repository.after(
+ add(repoTitle) {
+ repoTitle.classList.add('rgh-github-io');
+ repoTitle.after(
  ' ',
- <a
- href={`https://${repository.textContent!.trim()}`}
- target="_blank"
- rel="noopener noreferrer"
- >
- <LinkExternalIcon className="v-align-middle"/>
- </a>,
+ getLinkToGitHubIo(repoTitle),
  );
  },
  });

source/features/linkify-code.tsx

@@ -19,20 +19,22 @@ function initTitle(): void {
  }
 }
 
-function init(): Deinit {
- return observe(`:is(${codeElementsSelector}):not(.${linkifiedURLClass})`, {
- add(wrappers) {
- linkifyURLs(wrappers);
+function linkifyContent(wrapper: Element): void {
+ linkifyURLs(wrapper);
+
+ // Linkify issue refs in comments
+ const currentRepo = getRepo() ?? {};
+ for (const element of select.all('.pl-c', wrapper)) {
+ linkifyIssues(currentRepo, element);
+ }
 
- // Linkify issue refs in comments
- const currentRepo = getRepo() ?? {};
- for (const element of select.all('.pl-c', wrappers)) {
- linkifyIssues(currentRepo, element);
- }
+ // Mark code block as touched to avoid linkifying twice https://github.com/refined-github/refined-github/pull/4710#discussion_r694896008
+ wrapper.classList.add(linkifiedURLClass);
+}
 
- // Mark code block as touched to avoid linkifying twice https://github.com/refined-github/refined-github/pull/4710#discussion_r694896008
-  wrappers.classList.add(linkifiedURLClass);
- },
+function init(): Deinit {
+ return observe(`:is(${codeElementsSelector}):not(.${linkifiedURLClass})`, {
+ add: linkifyContent,
  });
 }
 

source/features/linkify-labels-on-dashboard.tsx

@@ -6,18 +6,21 @@ import * as pageDetect from 'github-url-detection';
 import {wrap} from '../helpers/dom-utils';
 import features from '.';
 
+function linkifyLabel(label: Element): void {
+ const activity = label.closest('div:not([class])')!;
+ const isPR = select.exists('.octicon-git-pull-request', activity);
+ const repository = select('a[data-hovercard-type="repository"]', activity)!;
+ const url = new URL(`${repository.href}/${isPR ? 'pulls' : 'issues'}`);
+ const labelName = label.textContent!.trim();
+
+ url.searchParams.set('q', `is:${isPR ? 'pr' : 'issue'} is:open sort:updated-desc label:"${labelName}"`);
+ wrap(label, <a href={url.href}/>);
+}
+
 function init(): Deinit {
  // A `:not(.rgh)` selector is not needed since we already check for `not(a)` #3625
  return observe('.news :not(a) > .IssueLabel', {
- add(label) {
- const activity = label.closest('div:not([class])')!;
- const isPR = select.exists('.octicon-git-pull-request', activity);
- const repository = select('a[data-hovercard-type="repository"]', activity)!;
- const url = new URL(`${repository.href}/${isPR ? 'pulls' : 'issues'}`);
- const labelName = label.textContent!.trim();
- url.searchParams.set('q', `is:${isPR ? 'pr' : 'issue'} is:open sort:updated-desc label:"${labelName}"`);
- wrap(label, <a href={url.href}/>);
- },
+ add: linkifyLabel,
  });
 }