Skip to content

Commit

Permalink
Drop support for the old GitHub layout (#3951)
Browse files Browse the repository at this point in the history
  • Loading branch information
@yakov116
yakov116 committed Jun 1, 2021
1 parent a413558 commit addd5ab
Show file tree
Hide file tree
Showing 18 changed files with 75 additions and 272 deletions.
28 changes: 9 additions & 19 deletions source/features/bugs-tab.tsx
View file
Expand Up @@ -74,25 +74,15 @@ async function init(): Promise<void | false> {
issuesTab.removeAttribute('data-selected-links');

// Update its appearance
const bugsTabTitle = select('[data-content]', bugsTab);
if (bugsTabTitle) {
bugsTabTitle.dataset.content = 'Bugs';
bugsTabTitle.textContent = 'Bugs';
select('.octicon', bugsTab)!.replaceWith(<BugIcon className="UnderlineNav-octicon d-none d-sm-inline"/>);

// Un-select one of the tabs if necessary
const selectedTab = !isBugsPage || pageDetect.isPRList() ? bugsTab : issuesTab;
selectedTab.classList.remove('selected');
selectedTab.removeAttribute('aria-current');
} else {
// Pre "Repository refresh" layout
select('[itemprop="name"]', bugsTab)!.textContent = 'Bugs';
select('.octicon', bugsTab)!.replaceWith(<BugIcon/>);

// Change the Selected tab if necessary
bugsTab.classList.toggle('selected', isBugsPage && !pageDetect.isPRList());
select('.selected', issuesTab)?.classList.toggle('selected', !isBugsPage);
}
const bugsTabTitle = select('[data-content]', bugsTab)!;
bugsTabTitle.dataset.content = 'Bugs';
bugsTabTitle.textContent = 'Bugs';
select('.octicon', bugsTab)!.replaceWith(<BugIcon className="UnderlineNav-octicon d-none d-sm-inline"/>);

// Un-select one of the tabs if necessary
const selectedTab = !isBugsPage || pageDetect.isPRList() ? bugsTab : issuesTab;
selectedTab.classList.remove('selected');
selectedTab.removeAttribute('aria-current');

// Set temporary counter
const bugsCounter = select('.Counter', bugsTab)!;
Expand Down
1 change: 0 additions & 1 deletion source/features/ci-link.tsx
View file
Expand Up @@ -10,7 +10,6 @@ import {buildRepoURL} from '../github-helpers';
// Look for the CI icon in the latest 2 days of commits #2990
const getIcon = onetime(async () => fetchDom(
buildRepoURL('commits'), [
'.commit-group:nth-of-type(-n+2) .commit-build-statuses', // Pre "Repository refresh" layout
'.TimelineItem--condensed:nth-of-type(-n+2) .commit-build-statuses', // TODO[2022-04-29]: GHE
'.TimelineItem--condensed:nth-of-type(-n+2) batch-deferred-content[data-url$="checks-statuses-rollups"]'
].join()
Expand Down
6 changes: 1 addition & 5 deletions source/features/clone-branch.tsx
View file
Expand Up @@ -71,12 +71,8 @@ async function cloneBranch({delegateTarget: cloneButton}: delegate.Event): Promi

async function init(): Promise<void | false> {
await api.expectToken();
const deleteIconClass = [
'branch-filter-item-controller .octicon-trashcan', // Pre "Repository refresh" layout
'branch-filter-item .octicon-trash'
].join();

observe(deleteIconClass, {
observe('branch-filter-item .octicon-trash', {
add(deleteIcon) {
// Branches with open PRs use `span`, the others use `form`
deleteIcon.closest('form, span')!.before(
Expand Down
5 changes: 1 addition & 4 deletions source/features/comments-time-machine-links.tsx
View file
Expand Up @@ -91,10 +91,7 @@ async function showTimemachineBar(): Promise<void | false> {
return false;
}

const lastCommitDate = await elementReady([
'.repository-content .Box.Box--condensed relative-time',
'[itemprop="dateModified"] relative-time' // "Repository refresh" layout
].join(), {waitForChildren: false});
const lastCommitDate = await elementReady('[itemprop="dateModified"] relative-time', {waitForChildren: false});
if (lastCommitDate && date > lastCommitDate.getAttribute('datetime')!) {
return false;
}
Expand Down
6 changes: 0 additions & 6 deletions source/features/default-branch-button.tsx
View file
Expand Up @@ -43,15 +43,9 @@ async function init(): Promise<false | void> {
</a>
);

if (branchSelector.classList.contains('btn-sm')) {
// Pre "Repository refresh" layout
defaultLink.classList.add('btn-sm');
}

branchSelector.parentElement!.before(defaultLink);
branchSelector.parentElement!.style.zIndex = 'auto'; // For #4240
groupButtons([defaultLink, branchSelector.parentElement!]).classList.add('d-flex');
branchSelector.style.float = 'none'; // Pre "Repository refresh" layout
}

void features.add(__filebasename, {
Expand Down
21 changes: 4 additions & 17 deletions source/features/download-folder-button.tsx
View file
Expand Up @@ -9,25 +9,12 @@ function init(): void {
const downloadUrl = new URL('https://download-directory.github.io/');
downloadUrl.searchParams.set('url', location.href);

const folderButtonGroup = select('.file-navigation .BtnGroup.float-right');
if (folderButtonGroup) {
folderButtonGroup.prepend(
<a
className="btn btn-sm BtnGroup-item"
href={downloadUrl.href}
>
Download
for (const deleteButton of select.all(`form[action^="/${getRepo()!.nameWithOwner}/tree/delete"]`)) {
deleteButton.before(
<a className="dropdown-item rgh-download-folder" href={downloadUrl.href}>
Download directory
</a>
);
} else {
// "Repository refresh" layout
for (const deleteButton of select.all(`form[action^="/${getRepo()!.nameWithOwner}/tree/delete"]`)) {
deleteButton.before(
<a className="dropdown-item rgh-download-folder" href={downloadUrl.href}>
Download directory
</a>
);
}
}
}

Expand Down
7 changes: 2 additions & 5 deletions source/features/follow-file-renames.tsx
View file
Expand Up @@ -23,12 +23,9 @@ async function linkify(button: HTMLButtonElement, url: GitHubURL): Promise<void

const fromKey = isNewer ? 'previous_filename' : 'filename';
const toKey = isNewer ? 'filename' : 'previous_filename';
const sha = (isNewer ? select : select.last)([
'.commit .sha', // Pre "Repository refresh" layout
'[aria-label="Copy the full SHA"] + a'
])!;
const sha = (isNewer ? select : select.last)('[aria-label="Copy the full SHA"]')!;

const files = await findRename(sha.textContent!.trim());
const files = await findRename(sha.getAttribute('value')!);

for (const file of files) {
if (file[fromKey] === url.filePath) {
Expand Down
13 changes: 3 additions & 10 deletions source/features/mark-merge-commits-in-list.tsx
View file
Expand Up @@ -34,23 +34,16 @@ const filterMergeCommits = async (commits: string[]): Promise<string[]> => {

// eslint-disable-next-line import/prefer-default-export
export function getCommitHash(commit: HTMLElement): string {
return commit.dataset.channel!.split(':')[3] ?? // Pre "Repository refresh" layout
commit.querySelector('a[href]')!.pathname.split('/').pop()!;
return commit.querySelector('a[href]')!.pathname.split('/').pop()!;
}

async function init(): Promise<void> {
const pageCommits = select.all([
'li.commit', // Pre "Repository refresh" layout
'li.js-commits-list-item'
]);
const pageCommits = select.all('li.js-commits-list-item');
const mergeCommits = await filterMergeCommits(pageCommits.map(getCommitHash));
for (const commit of pageCommits) {
if (mergeCommits.includes(getCommitHash(commit))) {
commit.classList.add('rgh-merge-commit');
select([
'.commit-title', // Pre "Repository refresh" layout
'div > p'
], commit)!.prepend(<GitPullRequestIcon/>);
select('div > p', commit)!.prepend(<GitPullRequestIcon/>);
}
}
}
Expand Down
84 changes: 10 additions & 74 deletions source/features/more-dropdown.tsx
View file
Expand Up @@ -3,29 +3,11 @@ import React from 'dom-chef';
import select from 'select-dom';
import elementReady from 'element-ready';
import * as pageDetect from 'github-url-detection';
import {DiffIcon, GitBranchIcon, HistoryIcon, PackageIcon} from '@primer/octicons-react';

import features from '.';
import {appendBefore} from '../helpers/dom-utils';
import getDefaultBranch from '../github-helpers/get-default-branch';
import {buildRepoURL, getCurrentCommittish} from '../github-helpers';

function createDropdown(): void {
// Markup copied from native GHE dropdown
appendBefore(
// GHE doesn't have `reponav > ul`
select('.reponav > ul') ?? select('.reponav')!,
'[data-selected-links^="repo_settings"]',
<details className="reponav-dropdown details-overlay details-reset">
<summary className="btn-link reponav-item" aria-haspopup="menu">
{'More '}
<span className="dropdown-caret"/>
</summary>
<details-menu className="dropdown-menu dropdown-menu-se"/>
</details>
);
}

/* eslint-disable-next-line import/prefer-default-export */
export function createDropdownItem(label: string, url: string, attributes?: Record<string, string>): Element {
return (
Expand Down Expand Up @@ -54,72 +36,26 @@ function onlyShowInDropdown(id: string): void {

async function init(): Promise<void> {
// Wait for the tab bar to be loaded
await elementReady([
'.pagehead', // Pre "Repository refresh" layout
'.UnderlineNav-body'
].join());
const repoNavigationBar = (await elementReady('.UnderlineNav-body'))!;

const reference = getCurrentCommittish() ?? await getDefaultBranch();
const compareUrl = buildRepoURL('compare', reference);
const commitsUrl = buildRepoURL('commits', reference);
const branchesUrl = buildRepoURL('branches');
const dependenciesUrl = buildRepoURL('network/dependencies');

const nav = select('.js-responsive-underlinenav .UnderlineNav-body');
if (nav) {
// "Repository refresh" layout
nav.parentElement!.classList.add('rgh-has-more-dropdown');
select('.js-responsive-underlinenav-overflow ul')!.append(
<li className="dropdown-divider" role="separator"/>,
createDropdownItem('Compare', compareUrl),
pageDetect.isEnterprise() ? '' : createDropdownItem('Dependencies', dependenciesUrl),
createDropdownItem('Commits', commitsUrl),
createDropdownItem('Branches', branchesUrl)
);

onlyShowInDropdown('security-tab');
onlyShowInDropdown('insights-tab');
return;
}

// Pre "Repository refresh" layout
if (!select.exists('.reponav-dropdown')) {
createDropdown();
}

const menu = select('.reponav-dropdown .dropdown-menu')!;
menu.append(
<a href={compareUrl} className="rgh-reponav-more dropdown-item">
<DiffIcon/> Compare
</a>,

pageDetect.isEnterprise() ? '' : (
<a href={dependenciesUrl} className="rgh-reponav-more dropdown-item">
<PackageIcon/> Dependencies
</a>
),
repoNavigationBar.parentElement!.classList.add('rgh-has-more-dropdown');

<a href={commitsUrl} className="rgh-reponav-more dropdown-item">
<HistoryIcon/> Commits
</a>,

<a href={branchesUrl} className="rgh-reponav-more dropdown-item">
<GitBranchIcon/> Branches
</a>
select('.js-responsive-underlinenav-overflow ul')!.append(
<li className="dropdown-divider" role="separator"/>,
createDropdownItem('Compare', compareUrl),
pageDetect.isEnterprise() ? '' : createDropdownItem('Dependencies', dependenciesUrl),
createDropdownItem('Commits', commitsUrl),
createDropdownItem('Branches', branchesUrl)
);

// Selector only affects desktop navigation
for (const tab of select.all(`
.hx_reponav a[data-selected-links~="pulse"],
.hx_reponav a[data-selected-links~="security"]
`)) {
tab.remove();
menu.append(
<a href={tab.href} className="rgh-reponav-more dropdown-item">
{[...tab.childNodes]}
</a>
);
}
onlyShowInDropdown('security-tab');
onlyShowInDropdown('insights-tab');
}

void features.add(__filebasename, {
Expand Down
10 changes: 2 additions & 8 deletions source/features/pull-request-hotkey.tsx
View file
Expand Up @@ -4,14 +4,8 @@ import * as pageDetect from 'github-url-detection';
import features from '.';

function init(): void {
const tabs = select.all([
'.tabnav-pr .tabnav-tab', // Pre "Repository refresh" layout
'.tabnav-tabs .tabnav-tab'
]);
const selectedIndex = tabs.indexOf(select([
'.tabnav-pr .selected', // Pre "Repository refresh" layout
'.tabnav-tabs .selected'
])!);
const tabs = select.all('.tabnav-tabs .tabnav-tab');
const selectedIndex = tabs.indexOf(select('.tabnav-tabs .selected')!);
const lastTab = tabs.length - 1;

for (const [index, tab] of tabs.entries()) {
Expand Down

0 comments on commit addd5ab

Please sign in to comment.