From b7be0da3280757c9a0cfdbbd5fd2229282a5781c Mon Sep 17 00:00:00 2001 From: ZacharySpiel Date: Mon, 3 Aug 2020 13:30:40 -0700 Subject: [PATCH 01/26] Added complete overview link to profile page --- background.js | 17 +- content.js | 468 +++++++++++++++++++++++++++----------------------- manifest.json | 10 +- overview.html | 234 +++++++++++++++++++++++++ overview.js | 247 ++++++++++++++++++++++++++ 5 files changed, 745 insertions(+), 231 deletions(-) create mode 100644 overview.html create mode 100644 overview.js diff --git a/background.js b/background.js index e9ddcfb..bd3997b 100644 --- a/background.js +++ b/background.js @@ -1,11 +1,8 @@ -chrome.storage.onChanged.addListener(function(changes, areaName){ - chrome.storage.local.get('iconStatus', function(status){ - let iconStatus = status.iconStatus; - - if(iconStatus) { - document.getElementById('iconBtn').checked = true; - } else { - document.getElementById('iconBtn').checked = false; - } +chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) { + if (msg.type === 'ACTIVITY_HISTORY_READY') { + chrome.tabs.create({ url: chrome.runtime.getURL('overview.html') }); + sendResponse({ + type: 'NO_DATA', }); -}); \ No newline at end of file + } +}); diff --git a/content.js b/content.js index 6167e59..5de1dd6 100644 --- a/content.js +++ b/content.js @@ -1,5 +1,19 @@ const NOT_FOUND = -1; +// array of color values for graphs +const colors = [ + '#3e95cd', + '#8e5ea2', + '#3cba9f', + '#e8c3b9', + '#c45850', + '#3e95cd', + '#8e5ea2', + '#3cba9f', + '#e8c3b9', + '#c45850', +]; + class ToolTipIcon { constructor(toolTipElement, toolTipClass, toolTipText, gitHubElement) { this.toolTipElement = toolTipElement; @@ -35,39 +49,39 @@ class ToolTipIcon { function checkURL() { // check if the user wants to edit a file that they are not an owner of if (checkIsEditingForkedFile()) { - addForkToolTips(); + createForkedFileToolTips(); } // if the user is editing a markdown file else if ( window.location.href.indexOf('.md') !== NOT_FOUND && window.location.href.indexOf('edit') !== NOT_FOUND ) { - addReadMeToolTips(); + createFileEditorToolTips(); } // if the user is reviewing a pull request else if (window.location.href.indexOf('compare') !== NOT_FOUND) { - addProposeChangesToolTips(); + createConfirmPullRequestToolTips(); } else if ( window.location.href.indexOf('pull') !== NOT_FOUND && window.location.href.indexOf('quick_pull') === NOT_FOUND ) { - addReviewPullRequestTips(); + createReviewPullRequestToolTips(); } // if the user is opening a pull request else if (document.getElementsByClassName('h-card').length !== 0) { - createProfileCard(); + updateProfileCard(); } // if the user is creating a new issue else if ( window.location.href.indexOf('issues') !== NOT_FOUND && window.location.href.indexOf('new') !== NOT_FOUND ) { - addReportIssueTips(); + createReportIssueToolTips(); } else if ( window.location.href.indexOf('issues') !== NOT_FOUND && window.location.href.indexOf('new') === NOT_FOUND ) { - addReviewIssueTips(); + createReviewIssueToolTips(); } else { // do nothing } @@ -93,12 +107,12 @@ function checkIsEditingForkedFile() { /** * Function name: addProgressBar - * Adds progressBar above forms in GitHub pages to let user how far they are - * in editing files - * @param currentStep current step in process - * @param totalSteps the amount of steps in process to determine overall progress - * @param rootElement className of GitHub HTML element that the progress bar + * @param {int} currentStep - current step in process + * @param {int} totalSteps - the total amount of steps in process + * @param {string} rootElement - className of HTML element that the progress bar * will be added to + * Adds progressBar above forms in GitHub pages to let user how far they are + * in editing files */ function addProgressBar(currentStep, totalSteps, rootElement, stepsList) { // create the progress bar element @@ -116,8 +130,10 @@ function addProgressBar(currentStep, totalSteps, rootElement, stepsList) { const listItem = document.createElement('li'); listItem.innerHTML = stepsList[index - 1]; + // if all steps have been completed if (currentStep === totalSteps) { listItem.className = 'completed'; + // if the step is in progress } else if (index === currentStep) { listItem.className = 'partial'; } @@ -179,11 +195,11 @@ function createSuccessRibbon() { } /** - * Function name: addReadMeToolTips + * Function name: createFileEditorToolTips * Adds tooltips to webpage when editing markdown files - * First step in editing markdown files + * First step in editing files */ -function addReadMeToolTips() { +function createFileEditorToolTips() { const steps = ['Edit File', 'Confirm Pull Request', 'Pull Request Opened']; // progress bar above editor @@ -268,6 +284,9 @@ let iconText = ''; const pullChangesText = 'By clicking the Propose changes button you will start the submission process. You will have the chance to check your changes before finalizing it.'; +const directCommitText = + 'By clicking the Commit Changes button the changes will be directly pushed to the repo'; + $('input[name="commit-choice"]').click(() => { document.getElementsByClassName('helpIcon')[3].remove(); @@ -275,8 +294,7 @@ $('input[name="commit-choice"]').click(() => { iconText = pullChangesText; onDirectPull = false; } else { - iconText = - 'By clicking the Commit Changes button the changes will be directly pushed to the repo'; + iconText = directCommitText; onDirectPull = true; } @@ -290,11 +308,11 @@ $('input[name="commit-choice"]').click(() => { }); /** - * Function name: addProposeChangesToolTips + * Function name: createConfirmPullRequestToolTips * Adds tooltips to webpage when confirming a change to file * Second step in editing markdown files */ -function addProposeChangesToolTips() { +function createConfirmPullRequestToolTips() { const steps = ['Edit File', 'Create Pull Request', 'Pull Request Opened']; addProgressBar(2, 3, '.repository-content', steps); @@ -304,25 +322,27 @@ function addProposeChangesToolTips() { 'You can add a more detailed description here if needed.' ); + let branchName = ''; + let isComparingBranch = false; try { - var branchName = document.getElementsByClassName('branch-name')[0].innerText; - } catch { - var isComparingBranch = true; + branchName = document.getElementsByClassName('branch-name')[0].innerText; + } catch (error) { + isComparingBranch = true; } - let newHeaderText = `Finish the pull request submission below to allow others to accept the changes. These changes can be viewed later under the branch name: ' + + let newHeaderText = `Finish the pull request submission below to allow others to accept the changes. These changes can be viewed later under the branch name: ${branchName}`; if (isComparingBranch) { newHeaderText = 'Finish the pull request submission below to allow others to accept the changes'; - $('.gh-header-title').text('Create Pull Request'); + $('.Subhead-heading').text('Create Pull Request'); } - $('.gh-header-meta').text(newHeaderText); + $('.Subhead-description').text(newHeaderText); - let pullRequestTitle = document.getElementsByClassName('gh-header-title')[1]; + const pullRequestTitle = document.getElementsByClassName('Subhead-heading')[1]; pullRequestTitle.innerHTML = 'Create pull request'; const branchContainerText = @@ -332,7 +352,7 @@ function addProposeChangesToolTips() { topRibbon.style.width = '93%'; topRibbon.style.display = 'inline-block'; - // ribbon above current current branch and new pull request branch + // icon next to current branch and new pull request branch name const currentBranchIcon = new ToolTipIcon( 'H4', 'helpIcon', @@ -372,7 +392,7 @@ function addProposeChangesToolTips() { const summaryClass = '.overall-summary'; // override the container width and display to add icon - const numbersSummaryContainer = document.getElementsByClassName('overall-summary')[0]; + const numbersSummaryContainer = document.getElementsByClassName('files-bucket')[0]; numbersSummaryContainer.style.width = '93%'; numbersSummaryContainer.style.display = 'inline-block'; @@ -401,14 +421,35 @@ function addProposeChangesToolTips() { commitSummaryContainer.style.display = 'inline-block'; $(comparisonIcon.toolTipElement).insertAfter(comparisonIcon.gitHubElement); + + console.log('here'); + setTimeout(changeMergeText, 3000); + console.log('here2'); } +function changeMergeText() { + let canMerge = true; + let mergeText = ''; + try { + mergeText = document.getElementsByClassName('text-red')[0].innerText; + console.log(mergeText); + } catch (error) { + canMerge = false; + } + console.log(canMerge); + if (mergeText === 'Can’t automatically merge. ') { + console.log('here'); + $('.text-red').innerHTML( + 'There is a merge conflict, but this can be fixed by creating the pull request' + ); + } +} /** - * Function name: addReviewPullRequestTips + * Function name: createReviewPullRequestToolTips * Adds tooltips to webpage when reviewing pull requests * Third step in editing markdown files */ -function addReviewPullRequestTips() { +function createReviewPullRequestToolTips() { const steps = ['Edit File', 'Confirm Pull Request', 'Pull Request Opened']; addProgressBar(3, 3, '.gh-header-show', steps); @@ -460,18 +501,18 @@ function addReviewPullRequestTips() { } /** - * Function name: addForkToolTips + * Function name: createForkedFileToolTips * Edits tooltips when viewing a repository that you are not a contributor of */ -function addForkToolTips() { +function createForkedFileToolTips() { $('.tooltipped-nw:nth-child(2)').attr('aria-label', 'Edit Readme'); } /** - * Function name: addIssueTips - * Adds tolltips to page when opening a new issue report + * Function name: createReportIssueToolTips + * Adds tooltips to page when opening a new issue report */ -function addReportIssueTips() { +function createReportIssueToolTips() { const steps = ['Report Issue', 'confirm Issue Report', 'Issue Submitted']; // progress bar above editor @@ -489,10 +530,10 @@ function addReportIssueTips() { } /** - * Function name: addIssueTips - * Adds tolltips to page when reviewing a new issue report + * Function name: createReviewIssueToolTips + * Adds tooltips to page when reviewing a new issue report */ -function addReviewIssueTips() { +function createReviewIssueToolTips() { const issueTitle = document.getElementsByClassName('js-issue-title')[0].innerText; const steps = ['Report Issue', 'confirm Issue Report', 'Issue Submitted']; @@ -523,35 +564,138 @@ function addReviewIssueTips() { }); } +/** + * Function name: updateProfileCard + * Updates contribution graph to show icon to toggle between graphs + */ +function updateProfileCard() { + const profileCardIconText = 'Click this tooltip to show more info about the user'; + const contributionGraphClass = '.js-calendar-graph'; + + const showGraphIcon = new ToolTipIcon( + 'H4', + 'helpIcon graph-tooltip', + profileCardIconText, + contributionGraphClass + ); + + const username = document.getElementsByClassName('vcard-username')[0].innerHTML; + + createCardContainer(); + + getRepos(username); + + getApis(username); + + showGraphIcon.createIcon(); + + $(showGraphIcon.toolTipElement).insertBefore(showGraphIcon.gitHubElement); + + $('.helpIcon').click(() => { + if ($('.helpIconCircle').text() === '?') { + $('.helpIconCircle').text('X'); + $('.helpIconText').addClass('removeText'); + } else { + $('.helpIconCircle').text('?'); + $('.helpIconText').removeClass('removeText'); + } + $('.back').toggleClass('hovered'); + $('#js-contribution-activity').toggleClass('hidden'); + $('#user-activity-overview').toggleClass('hidden'); + }); +} + +/** + * Function: createCardContainer + * Creates structure of profile overview with graphs + */ +function createCardContainer() { + const outerContainer = document.getElementsByClassName('graph-before-activity-overview')[0]; + + outerContainer.className += ' card-container'; + + const cardBack = document.createElement('div'); + cardBack.className = 'back'; + + const externalLinkContainer = document.createElement('div'); + externalLinkContainer.className = 'link-row'; + + const externalLinkTitle = document.createElement('h4'); + externalLinkTitle.appendChild(document.createTextNode('View all information')); + + const externalLink = document.createElement('span'); + externalLink.className = 'complete-list-link'; + externalLink.appendChild(document.createTextNode(' here')); + + externalLinkTitle.appendChild(externalLink); + externalLinkContainer.appendChild(externalLinkTitle); + + const repoGraph = document.createElement('canvas'); + repoGraph.className = 'graph'; + repoGraph.id = 'myChart'; + + const skillGraph = document.createElement('canvas'); + skillGraph.className = 'graph'; + skillGraph.id = 'skillGraph'; + + const commitsGraph = document.createElement('canvas'); + commitsGraph.className = 'graph'; + commitsGraph.id = 'commitsGraph'; + + const languagesGraph = document.createElement('canvas'); + languagesGraph.className = 'graph'; + languagesGraph.id = 'languagesGraph'; + + cardBack.appendChild(externalLinkContainer); + cardBack.appendChild(repoGraph); + cardBack.appendChild(skillGraph); + cardBack.appendChild(commitsGraph); + cardBack.appendChild(languagesGraph); + + outerContainer.appendChild(cardBack); +} + +$('.complete-list-link').click(() => { + const username = document.getElementsByClassName('vcard-username')[0].innerHTML; + + chrome.storage.sync.set({ username: username }); + + chrome.runtime.sendMessage({ + type: 'ACTIVITY_HISTORY_READY', + }); +}); + /** * function getCommits - * @param string username - GitHub username for API + * @param {string} username - GitHub username for API * Uses GitHub API to view commit totals for user */ async function getCommits(repositories, username) { - const oAuthToken = ''; - - let repoObject = {}; - let ctx = document.getElementById('repositories'); - let skillGraphContainer = document.getElementById('skillGraph'); - const barColors = []; + const oAuthToken = '2e52399ba6855793a8829ce53966012162665344'; const headers = { - Authorization: 'Token ' + oAuthToken, + Authorization: `Token ${oAuthToken}`, }; + const repoObject = {}; + const ctx = document.getElementById('repositories'); + const skillGraphContainer = document.getElementById('skillGraph'); + let total = 0; + for (const repo of repositories) { - const commitUrl = `https://api.github.com/repos/${username}/${repo}/commits?page=1&per_page=25`; + if (total < 10) { + const commitUrl = `https://api.github.com/repos/${username}/${repo}/commits?page=1&per_page=25`; - const commitResponse = await fetch(commitUrl, { - method: 'GET', - headers: headers, - }); + const commitResponse = await fetch(commitUrl, { + method: 'GET', + headers: headers, + }); - let commitResult = await commitResponse.json(); - repoObject[repo] = commitResult.length; + let commitResult = await commitResponse.json(); + repoObject[repo] = commitResult.length; - barColors.push(getRandomColor()); + total += 1; + } } const labels = Object.keys(repoObject); @@ -561,18 +705,16 @@ async function getCommits(repositories, username) { return repoObject[b] - repoObject[a]; }); - data.sort((a, b) => { - return b - a; - }); + sortArrayInDescendingOrder(data); - myBarChart = new Chart(skillGraphContainer, { + commitGraph = new Chart(skillGraphContainer, { type: 'bar', data: { labels: labels, datasets: [ { label: 'Commits', - backgroundColor: barColors, + backgroundColor: colors, data: data, }, ], @@ -640,11 +782,11 @@ async function getCommits(repositories, username) { /** * function getRepos - * @param string username - GitHub username for API + * @param {string} username - GitHub username for API * Uses GitHub API to view programming languages for user */ async function getRepos(username) { - const oAuthToken = ''; + const oAuthToken = '2e52399ba6855793a8829ce53966012162665344'; const url = `https://api.github.com/users/${username}/repos`; const response = await fetch(url, { @@ -660,13 +802,14 @@ async function getRepos(username) { const repositoryNames = []; let labels = {}; let dataSet = {}; - const barColors = []; + + let total = 0; + result.forEach((index) => { - if (index.language != null) { + if (index.language != null && total < 10) { languages.push(index.language); repositoryNames.push(index.name); - - barColors.push(getRandomColor()); + total += 1; } }); @@ -691,18 +834,16 @@ async function getRepos(username) { return repositoriesObject[b] - repositoriesObject[a]; }); - dataSet.sort((a, b) => { - return b - a; - }); + sortArrayInDescendingOrder(dataSet); - myBarChart = new Chart(repoGraphContainer, { + repositoryGraph = new Chart(repoGraphContainer, { type: 'bar', data: { labels: labels, datasets: [ { label: 'Repositories', - backgroundColor: barColors, + backgroundColor: colors, data: dataSet, }, ], @@ -754,90 +895,10 @@ async function getRepos(username) { } /** - * Function: createCardContainer - * Creates structure of profile overview + * Function name: getApis + * @param {string} username - GitHub username + * Creates graph of contribitions with API's */ -function createCardContainer() { - const outerContainer = document.getElementsByClassName('graph-before-activity-overview')[0]; - - outerContainer.className += ' card-container'; - - const cardBack = document.createElement('div'); - cardBack.className = 'back'; - - const repoGraph = document.createElement('canvas'); - repoGraph.className = 'graph'; - repoGraph.style.borderRight = '1px solid black'; - repoGraph.style.borderBottom = '1px solid black'; - repoGraph.style.float = 'left'; - repoGraph.id = 'myChart'; - - const skillGraph = document.createElement('canvas'); - skillGraph.className = 'graph'; - skillGraph.style.borderBottom = '1px solid black'; - skillGraph.id = 'skillGraph'; - skillGraph.style.float = 'right'; - - const commitsGraph = document.createElement('canvas'); - commitsGraph.className = 'graph'; - commitsGraph.style.borderRight = '1px solid black'; - commitsGraph.style.float = 'left'; - commitsGraph.id = 'commitsGraph'; - - const languagesGraph = document.createElement('canvas'); - languagesGraph.className = 'graph'; - languagesGraph.id = 'languagesGraph'; - languagesGraph.style.float = 'right'; - - cardBack.appendChild(repoGraph); - cardBack.appendChild(skillGraph); - cardBack.appendChild(commitsGraph); - cardBack.appendChild(languagesGraph); - - outerContainer.appendChild(cardBack); -} - -/** - * Function name: createProfileCard - * Creates a 2x2 grid behind contribution graph on profile page with graphs - */ -function createProfileCard() { - const profileCardIconText = 'Click this tooltip to show more info about the user'; - const contributionGraphClass = '.js-calendar-graph'; - - const showGraphIcon = new ToolTipIcon( - 'H4', - 'helpIcon graph-tooltip', - profileCardIconText, - contributionGraphClass - ); - - const username = document.getElementsByClassName('vcard-username')[0].innerHTML; - - createCardContainer(); - - getRepos(username); - - getApis(username); - - showGraphIcon.createIcon(); - - $(showGraphIcon.toolTipElement).insertBefore(showGraphIcon.gitHubElement); - - $('.helpIcon').click(() => { - if ($('.helpIconCircle').text() === '?') { - $('.helpIconCircle').text('X'); - $('.helpIconText').addClass('removeText'); - } else { - $('.helpIconCircle').text('?'); - $('.helpIconText').removeClass('removeText'); - } - $('.back').toggleClass('hovered'); - $('#js-contribution-activity').toggleClass('hidden'); - $('#user-activity-overview').toggleClass('hidden'); - }); -} - function getApis(username) { const url = chrome.runtime.getURL('result.json'); @@ -846,61 +907,9 @@ function getApis(username) { .then((json) => createApiGraph(json, username)); } -const colors = [ - '#3e95cd', - '#8e5ea2', - '#3cba9f', - '#e8c3b9', - '#c45850', - '#3e95cd', - '#8e5ea2', - '#3cba9f', - '#e8c3b9', - '#c45850', - '#3e95cd', - '#8e5ea2', - '#3cba9f', - '#e8c3b9', - '#c45850', -]; - -function manageProgressBar() { - $('.progressbar').toggleClass('hiddenDisplay'); -} - -function manageIcons() { - $('.helpIcon').toggleClass('hiddenDisplay'); - - /* - chrome.storage.local.get('iconStatus', function(status) { - let iconStatus = status.iconStatus; - - if(iconStatus) { - document.getElementById('iconBtn').checked = true; - } else { - document.getElementById('iconBtn').checked = false; - } - }); -*/ -} - -function manageRibbon() { - $('.successRibbon').toggleClass('hiddenDisplay'); -} - -chrome.runtime.onMessage.addListener((request, sender, sendResponse) => { - if (request.message === 'progress_bar') { - manageProgressBar(); - } else if (request.message === 'icon') { - manageIcons(); - } else if (request.message === 'ribbon') { - manageRibbon(); - } -}); - /** * Function name: createApiGraph - * @param {JSON} userData + * @param {JSON} userData - GitHub user api data * creates graph on user profile card about langauges and apis */ function createApiGraph(userData, username) { @@ -927,15 +936,19 @@ function createApiGraph(userData, username) { }); }); - myBarChart = new Chart(apiGraphContainer, { + sortArrayInDescendingOrder(apis); + + sortArrayInDescendingOrder(apiTotals); + + apiGraph = new Chart(apiGraphContainer, { type: 'bar', data: { labels: apis, datasets: [ { - label: 'Total: ', - backgroundColor: colors, + label: 'Total Commits: ', data: apiTotals, + backgroundColor: colors, }, ], }, @@ -944,7 +957,7 @@ function createApiGraph(userData, username) { legend: { display: false }, title: { display: true, - text: `Api Totals for ${username}`, + text: `Total commits per api for ${username}`, }, scales: { yAxes: [ @@ -961,7 +974,7 @@ function createApiGraph(userData, username) { fontSize: 8, callback: function (value) { if (value.length > 4) { - return value.substr(0, 4) + '...'; //truncate + return value.substr(0, 4) + '...'; } else { return value; } @@ -999,11 +1012,30 @@ function createApiGraph(userData, username) { }); } -function getRandomColor() { - var letters = '0123456789ABCDEF'.split(''); - var color = '#'; - for (var i = 0; i < 6; i++) { - color += letters[Math.floor(Math.random() * 16)]; - } - return color; +function sortArrayInDescendingOrder(array) { + array.sort((a, b) => { + return b - a; + }); +} + +function manageProgressBar() { + $('.progressbar').toggleClass('hiddenDisplay'); } + +function manageIcons() { + $('.helpIcon').toggleClass('hiddenDisplay'); +} + +function manageRibbon() { + $('.successRibbon').toggleClass('hiddenDisplay'); +} + +chrome.runtime.onMessage.addListener((request, sender, sendResponse) => { + if (request.message === 'progress_bar') { + manageProgressBar(); + } else if (request.message === 'icon') { + manageIcons(); + } else if (request.message === 'ribbon') { + manageRibbon(); + } +}); diff --git a/manifest.json b/manifest.json index 2642d78..42e3f0d 100644 --- a/manifest.json +++ b/manifest.json @@ -2,7 +2,6 @@ "name": "GitHub Tool Tips", "version": "1", "manifest_version": 2, - "content_security_policy": "script-src 'self' 'sha256-h2wfw88s1v0G6TfLu2lTGsvk/fO+++3RvfDN1K262w8='; object-src 'self'", "description": "Helps newcomers navigate GitHub and successfully contribute to open source projects.", "browser_action": { "name": "GitHub Plugin Development", @@ -19,6 +18,11 @@ "run_at": "document_end" } ], - "web_accessible_resources": ["*.json"], - "permissions": ["tabs", "storage"] + + "background": { + "persistent": false, + "scripts": ["background.js"] + }, + "web_accessible_resources": ["*.json", "jquery.min.js"], + "permissions": ["tabs", "storage", "*/overview.html"] } diff --git a/overview.html b/overview.html new file mode 100644 index 0000000..bf294d8 --- /dev/null +++ b/overview.html @@ -0,0 +1,234 @@ + + + + + + + + + +
+ + + +
+ + + + diff --git a/overview.js b/overview.js new file mode 100644 index 0000000..9ba25a2 --- /dev/null +++ b/overview.js @@ -0,0 +1,247 @@ +chrome.tabs.executeScript({ file: 'jquery.min.js' }); + +chrome.storage.sync.get('username', (result) => { + getRepos(result.username); +}); + +const modal = document.getElementById('myModal'); + +const closeButton = document.getElementsByClassName('close')[0]; + +const oAuthToken = '2e52399ba6855793a8829ce53966012162665344'; + +const headers = { + Authorization: `Token ${oAuthToken}`, +}; + +const buttons = document.getElementsByClassName('card-button'); + +class Card { + constructor(repositoryName, repositoryLink, commitTotal, topLangauge, cardContainer) { + this.repositoryName = repositoryName; + this.repositoryLink = repositoryLink; + this.commitTotal = commitTotal; + this.topLangauge = topLangauge; + this.cardContainer = cardContainer; + } + + createCard() { + const cardContainer = document.createElement('div'); + cardContainer.className = 'card'; + + const cardTitleOuterContainer = document.createElement('div'); + cardTitleOuterContainer.className = 'card-text-section'; + + const cardTitleInnerContainer = document.createElement('div'); + + const repoLink = document.createElement('a'); + repoLink.href = this.repositoryLink; + repoLink.target = '_blank'; + + let repoNameText = document.createTextNode(this.repositoryName); + + repoLink.appendChild(repoNameText); + + if (this.repositoryName.length > 20) { + cardTitleInnerContainer.className = 'card-title card-title-small'; + } else { + cardTitleInnerContainer.className = 'card-title'; + } + + cardTitleInnerContainer.appendChild(repoLink); + + const overviewOutercontainer = document.createElement('div'); + overviewOutercontainer.className = 'card-text-section'; + + const commitContainer = document.createElement('div'); + commitContainer.className = 'main-text'; + commitContainer.innerHTML = `Commits: ${this.commitTotal}`; + + const topLanguageContainer = document.createElement('div'); + topLanguageContainer.className = 'main-text'; + topLanguageContainer.innerHTML = `Top Language: ${this.topLangauge}`; + + const buttonRowContainer = document.createElement('div'); + buttonRowContainer.className = 'card-actions'; + + const cardButton = document.createElement('div'); + cardButton.className = 'card-button'; + + const buttonText = document.createElement('span'); + buttonText.className = 'label'; + buttonText.id = this.repositoryName; + buttonText.innerHTML = 'View Commit Messages'; + + cardButton.appendChild(buttonText); + buttonRowContainer.appendChild(cardButton); + + overviewOutercontainer.appendChild(commitContainer); + overviewOutercontainer.appendChild(topLanguageContainer); + + cardTitleOuterContainer.appendChild(cardTitleInnerContainer); + + cardContainer.appendChild(cardTitleOuterContainer); + cardContainer.appendChild(overviewOutercontainer); + cardContainer.appendChild(buttonRowContainer); + this.cardContainer = cardContainer; + } +} + +document.body.onclick = function (ev) { + if (ev.target.getAttribute('class') === 'label') { + chrome.storage.sync.get('username', (result) => { + getAllCommitMessages(ev.srcElement.id, result.username, 1); + }); + } +}; + +closeButton.onclick = function () { + modal.style.display = 'none'; + document.querySelectorAll('.message-title').forEach((element) => element.remove()); +}; + +/** + * Function name: createCompleteOverview + * @param {JSON} userData - JSON result of all repositorys for user + * @param {string} username - GitHub username + * Creates cards containing total commits and top langauge + */ +async function createCompleteOverview(userData, username) { + let isNewPage = false; + try { + var rowElements = document.getElementsByClassName('row')[0].childElementCount; + } catch (error) { + isNewPage = true; + } + + let newRow = ''; + + if (rowElements === 4 || isNewPage) { + newRow = document.createElement('div'); + newRow.className = 'row'; + $(newRow).insertAfter('.row:last'); + } + + for (repo of userData) { + const totalCommits = await getAllCommits(repo.name, username, 1); + + let repositoryCard = new Card(repo.name, repo.html_url, totalCommits, repo.language); + + repositoryCard.createCard(); + + let totalRows = document.getElementsByClassName('row').length; + + let lastRowCardCount = 0; + + let newRow = document.createElement('div'); + newRow.className = 'row'; + + if (totalRows !== 0) { + lastRowCardCount = document.getElementsByClassName('row')[totalRows - 1].childElementCount; + } else if (totalRows === 0) { + $(newRow).appendTo('#content'); + } + + // if the row is full + if (lastRowCardCount === 4) { + $(newRow).insertAfter('.row:last'); + } + + $('.row:last').append(repositoryCard.cardContainer); + } +} + +/** + * Function name: getRepos + * @param {string} username - GitHub username + * Uses GitHub API to view programming languages for user + */ +async function getRepos(username) { + const url = `https://api.github.com/users/${username}/repos`; + const response = await fetch(url, { + method: 'GET', + headers: { + Authorization: `Token ${oAuthToken}`, + }, + }); + + const result = await response.json(); + + createCompleteOverview(result, username); +} + +/** + * Function name: getAllCommits( + * @param {string} repositoryName - GitHub repository + * @param {string} username - GitHub username + * @param {int} page - Current page in api pagination + * Returns all commits for each repository for a certain user + */ +async function getAllCommits(repositoryName, username, page) { + const commitUrl = `https://api.github.com/repos/${username}/${repositoryName}/commits?page=${page}&per_page=100`; + + const commitResponse = await fetch(commitUrl, { + method: 'GET', + headers: headers, + }); + + const commitResult = await commitResponse.json(); + + let totalCommits = commitResult.length; + + if (totalCommits % 100 === 0) { + totalCommits += await getAllCommits(repositoryName, username, page + 1); + } + + return totalCommits; +} + +/** + * Function name: getAllLanguages + * @param {string} repositoryName - GitHub repository + * @param {string} username - GitHub username + * returns object of languages for specific repository + */ +async function getAllLanguages(repository, username) { + const languageUrl = `https://api.github.com/repos/${username}/${repository}/languages`; + + const result = await fetch(languageUrl, { + method: 'GET', + headers: headers, + }); + + const langaugeData = await result.json(); + + return langaugeData; +} + +/** + * Function name: getAllCommitMessages + * @param {string} repositoryName - GitHub repository + * @param {string} username - GitHub username + * returns object of languages for specific repository + */ +async function getAllCommitMessages(repository, username, page) { + const commitsUrl = `https://api.github.com/repos/${username}/${repository}/commits?page=${page}&per_page=100`; + + const result = await fetch(commitsUrl, { + method: 'GET', + headers: headers, + }); + + const commits = await result.json(); + + if (commits.length !== 0) { + commits.forEach((commit) => { + let innerContainer = document.getElementsByClassName('modal-content')[0]; + + let messageContainer = document.createElement('p'); + messageContainer.className = 'message-title'; + messageContainer.appendChild(document.createTextNode(commit.commit.message)); + innerContainer.appendChild(messageContainer); + }); + + modal.style.display = 'block'; + } + getAllCommitMessages(repository, username, page + 1); +} From 3f389ba914bdfb72476b409daea639a3d7e306ef Mon Sep 17 00:00:00 2001 From: ZacharySpiel Date: Thu, 20 Aug 2020 10:18:07 -0700 Subject: [PATCH 02/26] Added message passing from background to content to detect page changes better --- background.js | 15 ++- content.js | 336 +++++++++++++++++++++----------------------------- index.html | 128 +++++++++---------- manifest.json | 14 ++- overview.html | 34 +---- overview.js | 2 +- 6 files changed, 224 insertions(+), 305 deletions(-) diff --git a/background.js b/background.js index bd3997b..651c059 100644 --- a/background.js +++ b/background.js @@ -1,8 +1,15 @@ chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) { - if (msg.type === 'ACTIVITY_HISTORY_READY') { + if (msg.type === 'OPEN_COMPLETE_OVERVIEW') { chrome.tabs.create({ url: chrome.runtime.getURL('overview.html') }); - sendResponse({ - type: 'NO_DATA', - }); } }); + + +chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => { + chrome.tabs.sendMessage(tabId, { + type: 'CHECK_URL', + }); + chrome.tabs.sendMessage(tabId, { + type: 'UPDATE_REPO_LAYOUT', + }); +}); diff --git a/content.js b/content.js index 5de1dd6..02a6fd5 100644 --- a/content.js +++ b/content.js @@ -1,17 +1,22 @@ -const NOT_FOUND = -1; +window.onload = () => { + const currentPageUrl = document.location.pathname; -// array of color values for graphs + checkUrl(currentPageUrl); +}; + +// Color values for graphs const colors = [ - '#3e95cd', - '#8e5ea2', - '#3cba9f', - '#e8c3b9', - '#c45850', - '#3e95cd', - '#8e5ea2', - '#3cba9f', - '#e8c3b9', - '#c45850', + '#00498D', + '#01579B', + '#00498D', + '#0277BD', + '#0288D1', + '#039BE5', + '#03A9F4', + '#29B6F6', + '#4FC3F7', + '#81D4FA', + '#B3E5FC', ]; class ToolTipIcon { @@ -26,45 +31,38 @@ class ToolTipIcon { const toolTipContainer = document.createElement('div'); toolTipContainer.className = this.toolTipClass; - const circleIcon = document.createElement('span'); - circleIcon.className = 'helpIconCircle'; - circleIcon.innerHTML = '?'; - - const toolTip = document.createElement('span'); - toolTip.className = 'helpIconText'; - toolTip.innerHTML = this.toolTipText; - - toolTipContainer.appendChild(circleIcon); - toolTipContainer.appendChild(toolTip); + toolTipContainer.innerHTML = `? + ${this.toolTipText}`; this.toolTipElement = toolTipContainer; } } /** - * Function name: checkURL - * Checks the windows current URL for keywords to determine which tooltips - * to display + * Sorts given array in descending order + * @param {int} array + */ +function sortArrayInDescendingOrder(array) { + array.sort((a, b) => { + return b - a; + }); +} + +/** + * @param {string} currentUrl - pathname of current url + * Checks the windows current URL to determine which tooltips to display */ -function checkURL() { +function checkUrl(currentUrl) { // check if the user wants to edit a file that they are not an owner of if (checkIsEditingForkedFile()) { createForkedFileToolTips(); - } - // if the user is editing a markdown file - else if ( - window.location.href.indexOf('.md') !== NOT_FOUND && - window.location.href.indexOf('edit') !== NOT_FOUND - ) { + } else if (currentUrl.includes('/edit/')) { createFileEditorToolTips(); + } else if (currentUrl.includes('/compare/')) { + createConfirmPullRequestToolTips(); } // if the user is reviewing a pull request - else if (window.location.href.indexOf('compare') !== NOT_FOUND) { - createConfirmPullRequestToolTips(); - } else if ( - window.location.href.indexOf('pull') !== NOT_FOUND && - window.location.href.indexOf('quick_pull') === NOT_FOUND - ) { + else if (currentUrl.includes('/pull/')) { createReviewPullRequestToolTips(); } // if the user is opening a pull request @@ -72,47 +70,41 @@ function checkURL() { updateProfileCard(); } // if the user is creating a new issue - else if ( - window.location.href.indexOf('issues') !== NOT_FOUND && - window.location.href.indexOf('new') !== NOT_FOUND - ) { + else if (currentUrl.includes('/issues/new')) { createReportIssueToolTips(); - } else if ( - window.location.href.indexOf('issues') !== NOT_FOUND && - window.location.href.indexOf('new') === NOT_FOUND - ) { + } else if (currentUrl.includes('/issues/')) { createReviewIssueToolTips(); } else { // do nothing } } -checkURL(); - /** - * Function name: checkIsEditingForkedFile * Checks if the user is viewing a file that they do not own */ function checkIsEditingForkedFile() { + const pencilIconLabelsList = [ + 'Edit the file in your fork of this project', + 'Fork this project and edit the file', + ]; + try { + var pencilIconLabel = document + .getElementsByClassName('tooltipped')[2] + .getAttribute('aria-label'); // check if there is a pencil icon with this aria label - return ( - document.getElementsByClassName('tooltipped')[2].getAttribute('aria-label') === - 'Edit the file in your fork of this project' - ); + return pencilIconLabelsList.includes(pencilIconLabel); } catch (error) { return false; } } /** - * Function name: addProgressBar * @param {int} currentStep - current step in process * @param {int} totalSteps - the total amount of steps in process * @param {string} rootElement - className of HTML element that the progress bar * will be added to - * Adds progressBar above forms in GitHub pages to let user how far they are - * in editing files + * Adds progressBar above forms in GitHub pages to let user how far they are in a process */ function addProgressBar(currentStep, totalSteps, rootElement, stepsList) { // create the progress bar element @@ -124,7 +116,7 @@ function addProgressBar(currentStep, totalSteps, rootElement, stepsList) { const itemList = document.createElement('ul'); - let index = 1; + let index; for (index = 1; index <= stepsList.length; index += 1) { const listItem = document.createElement('li'); @@ -156,8 +148,7 @@ function addProgressBar(currentStep, totalSteps, rootElement, stepsList) { } /** - * Function name: isComplete - * Checks if issue/ pull request was succesfully created and is open in the repo + * Checks if issue or pull request was succesfully created and is open in the repo */ function isProcessCompleted() { let status = ''; @@ -170,16 +161,13 @@ function isProcessCompleted() { } /** - * Function name: createSuccessRibbon * Creates ribbon above progress bar to inform the user that the process is successful */ function createSuccessRibbon() { - let processType = ''; + let processType = 'pull request'; - if (window.location.href.indexOf('issues') != NOT_FOUND) { + if (document.location.pathname.includes('/issues/')) { processType = 'issue'; - } else { - processType = 'pull request'; } const successRibbonContainer = document.createElement('div'); @@ -195,9 +183,7 @@ function createSuccessRibbon() { } /** - * Function name: createFileEditorToolTips - * Adds tooltips to webpage when editing markdown files - * First step in editing files + * Adds tooltips when editing files (First step) */ function createFileEditorToolTips() { const steps = ['Edit File', 'Confirm Pull Request', 'Pull Request Opened']; @@ -207,7 +193,7 @@ function createFileEditorToolTips() { // icon to right of file name input const fileNameChangeText = - 'This is the file name, changing it will create a new file with the new name'; + 'This is the file name, changing it will create a new file with the new name.'; const breadCrumbDiv = '.d-md-inline-block'; @@ -219,12 +205,11 @@ function createFileEditorToolTips() { // banner above commit message input const commitTitleText = - 'This is the title. Give a brief description of the change. Be short and objective.'; + 'This is the title of the pull request. Give a brief description of the change. Be short and objective.'; const inputTitleLabel = document.createElement('h3'); inputTitleLabel.innerHTML = 'Insert a title here'; - inputTitleLabel.style.display = 'inline-block'; - inputTitleLabel.style.marginRight = '20px'; + inputTitleLabel.className = 'label-margin-right'; $(inputTitleLabel).insertBefore('#commit-summary-input'); @@ -240,12 +225,11 @@ function createFileEditorToolTips() { $(commitMessageIcon.toolTipElement).insertAfter('#commit-summary-input'); const descriptionText = - 'Add a more detailed description if needed. Here you can present your arguments and reasoning that lead to change.'; + 'Add a more detailed description of the pull request if needed. Here you can present your arguments and reasoning that lead to change.'; const inputDescriptionLabel = document.createElement('h3'); inputDescriptionLabel.innerHTML = 'Insert a
description here'; - inputDescriptionLabel.style.display = 'inline-block'; - inputDescriptionLabel.style.marginRight = '22px'; + inputDescriptionLabel.className = 'label-margin-right'; $(inputDescriptionLabel).insertBefore('#commit-description-textarea'); @@ -260,15 +244,17 @@ function createFileEditorToolTips() { $(extendedDescIcon.toolTipElement).insertAfter(extendedDescIcon.gitHubElement); - const commitChangesDirectlyText = + let commitChangesText = 'By clicking the Commit Changes button the changes will automatically be pushed to the repo'; - const submitChangesIcon = new ToolTipIcon( - 'H4', - 'helpIcon', - commitChangesDirectlyText, - '#submit-file' - ); + const buttonText = document.getElementsByClassName('btn-primary')[1].innerText; + + if (buttonText === 'Propose changes') { + commitChangesText = + 'By clicking the Propose changes button you will start the pull request submission process. You will have the chance to check your changes before finalizing it.'; + } + + const submitChangesIcon = new ToolTipIcon('H4', 'helpIcon', commitChangesText, '#submit-file'); submitChangesIcon.createIcon(); @@ -277,12 +263,12 @@ function createFileEditorToolTips() { $(submitChangesIcon.toolTipElement).insertBefore(submitChangesIcon.gitHubElement); } -// On pull request step 1, toggle icon text to help inform user +// On step 1 for pull request, toggle icon text to help inform user let onDirectPull = true; let iconText = ''; const pullChangesText = - 'By clicking the Propose changes button you will start the submission process. You will have the chance to check your changes before finalizing it.'; + 'By clicking the Propose changes button you will start the pull request submission process. You will have the chance to check your changes before finalizing it.'; const directCommitText = 'By clicking the Commit Changes button the changes will be directly pushed to the repo'; @@ -308,9 +294,7 @@ $('input[name="commit-choice"]').click(() => { }); /** - * Function name: createConfirmPullRequestToolTips - * Adds tooltips to webpage when confirming a change to file - * Second step in editing markdown files + * Adds tooltips when confirming a change to file (Second step) */ function createConfirmPullRequestToolTips() { const steps = ['Edit File', 'Create Pull Request', 'Pull Request Opened']; @@ -319,7 +303,7 @@ function createConfirmPullRequestToolTips() { $('#pull_request_body').attr( 'placeholder', - 'You can add a more detailed description here if needed.' + 'You can add a more detailed description of the pull request here if needed.' ); let branchName = ''; @@ -346,7 +330,7 @@ function createConfirmPullRequestToolTips() { pullRequestTitle.innerHTML = 'Create pull request'; const branchContainerText = - 'This represents the origin and destination of your changes if you are not sure, leave it how it is, this is common for small changes.'; + 'This represents the origin and destination of your pull request. If you are not sure, leave it how it is, this is common for small changes.'; const topRibbon = document.getElementsByClassName('js-range-editor')[0]; topRibbon.style.width = '93%'; @@ -365,9 +349,11 @@ function createConfirmPullRequestToolTips() { $(currentBranchIcon.toolTipElement).insertAfter(currentBranchIcon.gitHubElement); // move button row to left side of editor - const buttonRow = document.getElementsByClassName('d-flex flex-justify-end m-2')[0]; - buttonRow.classList.remove('flex-justify-end'); - buttonRow.classList.add('flex-justify-start'); + if (!isComparingBranch) { + const buttonRow = document.getElementsByClassName('d-flex flex-justify-end m-2')[0]; + buttonRow.classList.remove('flex-justify-end'); + buttonRow.classList.add('flex-justify-start'); + } const confirmPullRequestText = 'By clicking this button you will create the pull request to allow others to view your changes and accept them into the repository.'; @@ -422,39 +408,36 @@ function createConfirmPullRequestToolTips() { $(comparisonIcon.toolTipElement).insertAfter(comparisonIcon.gitHubElement); - console.log('here'); - setTimeout(changeMergeText, 3000); - console.log('here2'); + setTimeout(changeMergeText, 2500); } +/** + * Updates text when there is a merge conflict in a pull request + */ function changeMergeText() { - let canMerge = true; - let mergeText = ''; + let canMerge = false; try { - mergeText = document.getElementsByClassName('text-red')[0].innerText; - console.log(mergeText); + document.getElementsByClassName('text-red')[0].innerText; } catch (error) { - canMerge = false; + // if the 'text-red' element does not exist, then the pull request can be merged automatically + canMerge = true; } - console.log(canMerge); - if (mergeText === 'Can’t automatically merge. ') { - console.log('here'); - $('.text-red').innerHTML( - 'There is a merge conflict, but this can be fixed by creating the pull request' + + if (!canMerge) { + $('.pre-mergability').html( + "There is a merge conflict, but this can be fixed by creating the pull request.Don't worry, the owner of the repository will fix this for you." ); } } /** - * Function name: createReviewPullRequestToolTips - * Adds tooltips to webpage when reviewing pull requests - * Third step in editing markdown files + * Adds tooltips when reviewing a pull request (Final step) */ function createReviewPullRequestToolTips() { const steps = ['Edit File', 'Confirm Pull Request', 'Pull Request Opened']; addProgressBar(3, 3, '.gh-header-show', steps); - const titleTest = 'new'; // document.getElementsByClassName('js-issue-title')[0]; + const pullRequestName = document.getElementsByClassName('js-issue-title')[0].innerText; const branchContainerText = 'This indicates that the pull request is open meaning someone will get to it soon.'; @@ -463,12 +446,12 @@ function createReviewPullRequestToolTips() { 'H4', 'helpIcon', branchContainerText, - '.js-clipboard-copy' + '.gh-header-meta:nth-child(1)' ); pullRequestStatusIcon.createIcon(); - $(pullRequestStatusIcon.toolTipElement).insertAfter(pullRequestStatusIcon.gitHubElement); + $(pullRequestStatusIcon.toolTipElement).insertBefore(pullRequestStatusIcon.gitHubElement); const requestButtonsText = 'This will close the pull request meaning people cannot view this! Do not click close unless the request was solved.'; @@ -488,37 +471,35 @@ function createReviewPullRequestToolTips() { closePullRequestIcon.toolTipElement.style.marginRight = '20px'; - /* - var submitButtons = document.getElementsByClassName('d-flex flex-justify-end')[0]; + const submitButtons = document.getElementsByClassName('d-flex flex-justify-end')[0]; submitButtons.classList.remove('flex-justify-end'); - submitButtons.classList.add('flex-justify-start');*/ + submitButtons.classList.add('flex-justify-start'); $('.js-quick-submit-alternative').click((event) => { - if (!Confirm(`Are you sure that you want to close the pull request: ${titleTest}?`)) { + if (!confirm(`Are you sure that you want to close the pull request: ${pullRequestName}?`)) { event.preventDefault(); } }); } /** - * Function name: createForkedFileToolTips * Edits tooltips when viewing a repository that you are not a contributor of */ function createForkedFileToolTips() { - $('.tooltipped-nw:nth-child(2)').attr('aria-label', 'Edit Readme'); + $('.tooltipped-nw:nth-child(2)').attr('aria-label', 'Edit File'); } /** - * Function name: createReportIssueToolTips - * Adds tooltips to page when opening a new issue report + * Adds tooltips to page when opening a new issue report (First step) */ function createReportIssueToolTips() { - const steps = ['Report Issue', 'confirm Issue Report', 'Issue Submitted']; + const steps = ['Report Issue', 'Issue Submitted']; // progress bar above editor - addProgressBar(1, 3, '.new_issue', steps); + addProgressBar(1, 2, '.new_issue', steps); - const submitButtonText = 'After clicking this, you will have a chance to update the issue report'; + const submitButtonText = + 'By clicking this, it will submit the issue to the owner of the repository'; const submitButtonClass = '.flex-justify-end button:eq(0)'; @@ -530,15 +511,14 @@ function createReportIssueToolTips() { } /** - * Function name: createReviewIssueToolTips - * Adds tooltips to page when reviewing a new issue report + * Adds tooltips to page when reviewing a new issue report (Final step) */ function createReviewIssueToolTips() { const issueTitle = document.getElementsByClassName('js-issue-title')[0].innerText; - const steps = ['Report Issue', 'confirm Issue Report', 'Issue Submitted']; + const steps = ['Report Issue', 'Issue Submitted']; - addProgressBar(3, 3, '.repository-content', steps); + addProgressBar(2, 2, '.repository-content', steps); const buttonRow = document.getElementsByClassName('d-flex flex-justify-end')[0]; buttonRow.classList.remove('flex-justify-end'); @@ -547,9 +527,9 @@ function createReviewIssueToolTips() { const closeIssueIconText = 'This will close the issue request meaning people cannot view this! Do not click close unless the request was solved. '; - const submitButtonClass = '.flex-justify-end button:eq(0)'; + const closeButtonClass = '.flex-justify-end button:eq(0)'; - const submitButtonIcon = new ToolTipIcon('H4', 'helpIcon', closeIssueIconText, submitButtonClass); + const submitButtonIcon = new ToolTipIcon('H4', 'helpIcon', closeIssueIconText, closeButtonClass); submitButtonIcon.createIcon(); @@ -565,7 +545,6 @@ function createReviewIssueToolTips() { } /** - * Function name: updateProfileCard * Updates contribution graph to show icon to toggle between graphs */ function updateProfileCard() { @@ -594,9 +573,11 @@ function updateProfileCard() { $('.helpIcon').click(() => { if ($('.helpIconCircle').text() === '?') { $('.helpIconCircle').text('X'); + $('.helpIconCircle').addClass('closeButton'); $('.helpIconText').addClass('removeText'); } else { $('.helpIconCircle').text('?'); + $('.helpIconCircle').removeClass('closeButton'); $('.helpIconText').removeClass('removeText'); } $('.back').toggleClass('hovered'); @@ -606,7 +587,6 @@ function updateProfileCard() { } /** - * Function: createCardContainer * Creates structure of profile overview with graphs */ function createCardContainer() { @@ -617,51 +597,28 @@ function createCardContainer() { const cardBack = document.createElement('div'); cardBack.className = 'back'; - const externalLinkContainer = document.createElement('div'); - externalLinkContainer.className = 'link-row'; - - const externalLinkTitle = document.createElement('h4'); - externalLinkTitle.appendChild(document.createTextNode('View all information')); - - const externalLink = document.createElement('span'); - externalLink.className = 'complete-list-link'; - externalLink.appendChild(document.createTextNode(' here')); - - externalLinkTitle.appendChild(externalLink); - externalLinkContainer.appendChild(externalLinkTitle); - - const repoGraph = document.createElement('canvas'); - repoGraph.className = 'graph'; - repoGraph.id = 'myChart'; - - const skillGraph = document.createElement('canvas'); - skillGraph.className = 'graph'; - skillGraph.id = 'skillGraph'; - - const commitsGraph = document.createElement('canvas'); - commitsGraph.className = 'graph'; - commitsGraph.id = 'commitsGraph'; - - const languagesGraph = document.createElement('canvas'); - languagesGraph.className = 'graph'; - languagesGraph.id = 'languagesGraph'; - - cardBack.appendChild(externalLinkContainer); - cardBack.appendChild(repoGraph); - cardBack.appendChild(skillGraph); - cardBack.appendChild(commitsGraph); - cardBack.appendChild(languagesGraph); + cardBack.innerHTML = `
+

View all information here

+
+ + + + `; outerContainer.appendChild(cardBack); } -$('.complete-list-link').click(() => { - const username = document.getElementsByClassName('vcard-username')[0].innerHTML; +$(document).ready(() => { + $(document).click((event) => { + if (event.target.className === 'complete-list-link') { + const username = document.getElementsByClassName('vcard-username')[0].innerHTML; - chrome.storage.sync.set({ username: username }); + chrome.storage.sync.set({ username: username }); - chrome.runtime.sendMessage({ - type: 'ACTIVITY_HISTORY_READY', + chrome.runtime.sendMessage({ + type: 'OPEN_COMPLETE_OVERVIEW', + }); + } }); }); @@ -671,7 +628,7 @@ $('.complete-list-link').click(() => { * Uses GitHub API to view commit totals for user */ async function getCommits(repositories, username) { - const oAuthToken = '2e52399ba6855793a8829ce53966012162665344'; + const oAuthToken = '901e6d7d5bd2410e2172c2ada119b9e3e45fc1b4'; const headers = { Authorization: `Token ${oAuthToken}`, @@ -786,7 +743,7 @@ async function getCommits(repositories, username) { * Uses GitHub API to view programming languages for user */ async function getRepos(username) { - const oAuthToken = '2e52399ba6855793a8829ce53966012162665344'; + const oAuthToken = '901e6d7d5bd2410e2172c2ada119b9e3e45fc1b4'; const url = `https://api.github.com/users/${username}/repos`; const response = await fetch(url, { @@ -903,7 +860,7 @@ function getApis(username) { const url = chrome.runtime.getURL('result.json'); fetch(url) - .then((response) => response.json()) // assuming file contains json + .then((response) => response.json()) .then((json) => createApiGraph(json, username)); } @@ -1012,30 +969,17 @@ function createApiGraph(userData, username) { }); } -function sortArrayInDescendingOrder(array) { - array.sort((a, b) => { - return b - a; - }); -} - -function manageProgressBar() { - $('.progressbar').toggleClass('hiddenDisplay'); -} - -function manageIcons() { - $('.helpIcon').toggleClass('hiddenDisplay'); -} - -function manageRibbon() { - $('.successRibbon').toggleClass('hiddenDisplay'); -} - -chrome.runtime.onMessage.addListener((request, sender, sendResponse) => { - if (request.message === 'progress_bar') { - manageProgressBar(); - } else if (request.message === 'icon') { - manageIcons(); - } else if (request.message === 'ribbon') { - manageRibbon(); +/** + * Listen to changes from background + */ +chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => { + if (msg.message === 'progress_bar') { + $('.progressbar').toggleClass('hiddenDisplay'); + } else if (msg.message === 'icon') { + $('.helpIcon').toggleClass('hiddenDisplay'); + } else if (msg.message === 'ribbon') { + $('.successRibbon').toggleClass('hiddenDisplay'); + } else if (msg.type === 'CHECK_URL') { + checkUrl(document.location.pathname); } }); diff --git a/index.html b/index.html index 67bcb79..435b14d 100644 --- a/index.html +++ b/index.html @@ -2,9 +2,9 @@ - +
@@ -126,8 +116,6 @@

Show Ribbons

Show Progress Bar

- diff --git a/manifest.json b/manifest.json index 42e3f0d..99cc0df 100644 --- a/manifest.json +++ b/manifest.json @@ -3,26 +3,30 @@ "version": "1", "manifest_version": 2, "description": "Helps newcomers navigate GitHub and successfully contribute to open source projects.", + "permissions": ["tabs", "activeTab", "webNavigation", "", "storage"], "browser_action": { "name": "GitHub Plugin Development", "icons": ["icon.png"], "default_icon": "outline.png", "default_popup": "index.html" }, - "content_scripts": [ { "matches": ["https://github.com/*"], "css": ["styles.css"], "js": ["jquery.min.js", "Chart.bundle.js", "content.js"], "run_at": "document_end" + }, + { + "matches": ["https://github.com/*/*"], + "css": ["styles.css"], + "js": ["jquery.min.js", "content.js", "Repository.js"], + "run_at": "document_end" } ], - "background": { - "persistent": false, + "persistant": true, "scripts": ["background.js"] }, - "web_accessible_resources": ["*.json", "jquery.min.js"], - "permissions": ["tabs", "storage", "*/overview.html"] + "web_accessible_resources": ["*.json", "jquery.min.js"] } diff --git a/overview.html b/overview.html index bf294d8..b08e546 100644 --- a/overview.html +++ b/overview.html @@ -5,9 +5,6 @@ +

- + diff --git a/overview.js b/overview.js index 5b7f087..c129014 100644 --- a/overview.js +++ b/overview.js @@ -1,6 +1,10 @@ chrome.tabs.executeScript({ file: 'jquery.min.js' }); +let username = ''; + chrome.storage.sync.get('username', (result) => { + username = result.username; + document.getElementById('username').innerHTML = `${result.username}'s Repositories`; getRepos(result.username); }); @@ -8,7 +12,7 @@ const modal = document.getElementById('myModal'); const closeButton = document.getElementsByClassName('close')[0]; -const oAuthToken = '18fe433b89391c14eb050803d2d72c52f1c3f6e6'; +const oAuthToken = ''; const headers = { Authorization: `Token ${oAuthToken}`, @@ -17,77 +21,42 @@ const headers = { const buttons = document.getElementsByClassName('card-button'); class Card { - constructor(repositoryName, repositoryLink, commitTotal, topLangauge, cardContainer) { + constructor(repositoryName, repositoryLink, commitTotal, topLanguage, cardContainer) { this.repositoryName = repositoryName; this.repositoryLink = repositoryLink; this.commitTotal = commitTotal; - this.topLangauge = topLangauge; + this.topLanguage = topLanguage; this.cardContainer = cardContainer; } createCard() { - const cardContainer = document.createElement('div'); - cardContainer.className = 'card'; - - const cardTitleOuterContainer = document.createElement('div'); - cardTitleOuterContainer.className = 'card-text-section'; - - const cardTitleInnerContainer = document.createElement('div'); - - const repoLink = document.createElement('a'); - repoLink.href = this.repositoryLink; - repoLink.target = '_blank'; - - let repoNameText = document.createTextNode(this.repositoryName); - - repoLink.appendChild(repoNameText); - if (this.repositoryName.length > 20) { - cardTitleInnerContainer.className = 'card-title card-title-small'; - } else { - cardTitleInnerContainer.className = 'card-title'; + this.repositoryName = this.repositoryName.substr(0, 20) + '...'; } - cardTitleInnerContainer.appendChild(repoLink); - - const overviewOutercontainer = document.createElement('div'); - overviewOutercontainer.className = 'card-text-section'; - - const commitContainer = document.createElement('div'); - commitContainer.className = 'main-text'; - commitContainer.innerHTML = `Commits: ${this.commitTotal}`; - - const topLanguageContainer = document.createElement('div'); - topLanguageContainer.className = 'main-text'; - topLanguageContainer.innerHTML = `Top Language: ${this.topLangauge}`; - - const buttonRowContainer = document.createElement('div'); - buttonRowContainer.className = 'card-actions'; - - const cardButton = document.createElement('div'); - cardButton.className = 'card-button'; - - const buttonText = document.createElement('span'); - buttonText.className = 'label'; - buttonText.id = this.repositoryName; - buttonText.innerHTML = 'View Commit Messages'; - - cardButton.appendChild(buttonText); - buttonRowContainer.appendChild(cardButton); - - overviewOutercontainer.appendChild(commitContainer); - overviewOutercontainer.appendChild(topLanguageContainer); + const cardContainer = document.createElement('div'); + cardContainer.className = 'card'; - cardTitleOuterContainer.appendChild(cardTitleInnerContainer); + cardContainer.innerHTML = `
+
+ ${this.repositoryName} +
+
+
+
Commits: ${this.commitTotal}
+
Top Language: ${this.topLanguage}
+
+
+
+ View Commit Messages +
+
`; - cardContainer.appendChild(cardTitleOuterContainer); - cardContainer.appendChild(overviewOutercontainer); - cardContainer.appendChild(buttonRowContainer); this.cardContainer = cardContainer; } } -document.body.onclick = function (ev) { +document.body.onclick = (ev) => { if (ev.target.getAttribute('class') === 'label') { chrome.storage.sync.get('username', (result) => { getAllCommitMessages(ev.srcElement.id, result.username, 1); @@ -95,21 +64,22 @@ document.body.onclick = function (ev) { } }; -closeButton.onclick = function () { +closeButton.onclick = () => { modal.style.display = 'none'; document.querySelectorAll('.message-title').forEach((element) => element.remove()); + document.getElementById('list-title').innerHTML = ''; }; /** - * Function name: createCompleteOverview - * @param {JSON} userData - JSON result of all repositorys for user + * @param {JSON} userData - JSON result of all repositories for the user * @param {string} username - GitHub username * Creates cards containing total commits and top langauge */ async function createCompleteOverview(userData, username) { let isNewPage = false; + let rowElements = ''; try { - var rowElements = document.getElementsByClassName('row')[0].childElementCount; + rowElements = document.getElementsByClassName('row')[0].childElementCount; } catch (error) { isNewPage = true; } @@ -152,7 +122,6 @@ async function createCompleteOverview(userData, username) { } /** - * Function name: getRepos * @param {string} username - GitHub username * Uses GitHub API to view programming languages for user */ @@ -231,17 +200,27 @@ async function getAllCommitMessages(repository, username, page) { const commits = await result.json(); + document.getElementById('list-title').innerHTML = `Commit Message Titles For: ${repository}`; + if (commits.length !== 0) { commits.forEach((commit) => { - let innerContainer = document.getElementsByClassName('modal-content')[0]; - - let messageContainer = document.createElement('p'); - messageContainer.className = 'message-title'; - messageContainer.appendChild(document.createTextNode(commit.commit.message)); - innerContainer.appendChild(messageContainer); + console.log(commit); + if (commit.author.login === username && commit.author.login !== undefined) { + const innerContainer = document.getElementsByClassName('modal-content')[0]; + + const messageContainer = document.createElement('p'); + messageContainer.className = 'message-title'; + messageContainer.appendChild( + document.createTextNode( + commit.commit.message + ' created at: ' + commit.commit.author.date + ) + ); + innerContainer.appendChild(messageContainer); + } }); modal.style.display = 'block'; + + getAllCommitMessages(repository, username, page + 1); } - getAllCommitMessages(repository, username, page + 1); } From a28cd7a3b2c0553be0beb66c75654c32e8b7bc7e Mon Sep 17 00:00:00 2001 From: ZacharySpiel Date: Thu, 20 Aug 2020 16:14:32 -0700 Subject: [PATCH 04/26] Added Repository.js to fix error --- Repository.js | 128 ++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 128 insertions(+) create mode 100644 Repository.js diff --git a/Repository.js b/Repository.js new file mode 100644 index 0000000..a1c1b1b --- /dev/null +++ b/Repository.js @@ -0,0 +1,128 @@ +updateRepoLayout(); + +function updateRepoLayout() { + let navBarLinks = ''; + + try { + navBarLinks = $('.UnderlineNav-body').find('li').length; + } catch (error) { + return false; + } + + createHomePage(); + + return true; +} + +$('#homePage').click(() => { + createHomePage(); +}); + +$('#codeLink').click((event) => { + event.preventDefault(); + createAccordionLayout(); +}); + +/** + * Updates the main page of a repository to only dispay readme file + */ +function createHomePage() { + createHomePageLink(); + // add id to code link for easier access in DOM + $('.selected:eq(0)').attr('id', 'codeLink'); + $('.selected:eq(0)').removeClass('selected'); + + // toggle display for files in repo + $('.Box:eq(3)').addClass('hiddenDisplay'); + $('.file-navigation:eq(0)').addClass('hiddenDisplay'); + + $('.Details-content--hidden-not-important:eq(1)').removeClass('d-md-block'); + $('.file-navigation:eq(0)').removeClass('d-flex'); + + $('#codeLink').removeClass('selected'); + + const codeLink = $('#codeLink'); + if (codeLink.attr('aria-current')) { + codeLink.removeAttr('aria-current'); + } else { + codeLink.attr('aria-current', 'page'); + } + + $('#homePage').addClass('selected'); + + if ($('#readme').hasClass('hiddenDisplay')) { + $('#readme').removeClass('hiddenDisplay'); + } +} + +/** + * Display files on repository + */ +function createAccordionLayout() { + try { + $('.Box-header:eq(2)').addClass('accordion'); + $('.js-details-container:eq(2)').addClass('panel'); + } catch (error) { + // silently abort + } + + $('.Box:eq(3)').removeClass('hiddenDisplay'); + $('.file-navigation:eq(0)').removeClass('hiddenDisplay'); + + $('.Details-content--hidden-not-important:eq(1)').addClass('d-md-block'); + $('.file-navigation:eq(0)').addClass('d-flex'); + + $('.selected:eq(0)').removeClass('selected'); + + $('#codeLink').addClass('selected'); + $('#readme').addClass('hiddenDisplay'); + + const accordion = document.getElementsByClassName('accordion')[0]; + accordion.addEventListener('click', updateAccordion); +} + +/** + * Updates files to collapse and expand + */ +function updateAccordion() { + $('.accordion').toggleClass('active'); + const panel = document.getElementsByClassName('panel')[0]; + if (panel.style.maxHeight) { + panel.style.maxHeight = null; + } else { + panel.style.maxHeight = panel.scrollHeight + 'px'; + } + + // update title of each file within the github repository + $('.js-details-container:eq(2) .link-gray-dark').each((index, element) => { + $(element).attr('title', 'To view this file, click here'); + }); +} + +/** + * Appends new link to top nav bar in repository + */ +function createHomePageLink() { + // check number of existing links + const navBarLinks = $('.UnderlineNav-body').find('li').length; + + if (navBarLinks !== 9 && navBarLinks !== 10) { + const newNavLink = document.createElement('li'); + newNavLink.className = 'd-flex'; + + newNavLink.innerHTML = `Home`; + + $('.UnderlineNav-body').prepend(newNavLink); + } else { + // home page link was already created + } +} + +/** + * Listen to page changes from the background + */ +chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => { + if (msg.type === 'UPDATE_REPO_LAYOUT') { + createHomePageLink(); + } +}); From eb6a05dd13d97ce700c7dc450eea7698342a50fe Mon Sep 17 00:00:00 2001 From: ZacharySpiel Date: Fri, 21 Aug 2020 23:58:24 -0700 Subject: [PATCH 05/26] Added colors to overview page, fixed background errors and sorted commits by user --- Repository.js | 78 +-- colors.json | 1622 +++++++++++++++++++++++++++++++++++++++++++++++++ content.js | 528 +++++++++------- manifest.json | 11 +- overview.html | 42 +- overview.js | 181 ++++-- styles.css | 108 +++- 7 files changed, 2228 insertions(+), 342 deletions(-) create mode 100644 colors.json diff --git a/Repository.js b/Repository.js index a1c1b1b..ccf6af3 100644 --- a/Repository.js +++ b/Repository.js @@ -1,10 +1,10 @@ updateRepoLayout(); function updateRepoLayout() { - let navBarLinks = ''; + let navBarLinks = ""; try { - navBarLinks = $('.UnderlineNav-body').find('li').length; + navBarLinks = $(".UnderlineNav-body").find("li").length; } catch (error) { return false; } @@ -14,11 +14,11 @@ function updateRepoLayout() { return true; } -$('#homePage').click(() => { +$("#homePage").click(() => { createHomePage(); }); -$('#codeLink').click((event) => { +$("#codeLink").click((event) => { event.preventDefault(); createAccordionLayout(); }); @@ -29,29 +29,29 @@ $('#codeLink').click((event) => { function createHomePage() { createHomePageLink(); // add id to code link for easier access in DOM - $('.selected:eq(0)').attr('id', 'codeLink'); - $('.selected:eq(0)').removeClass('selected'); + $(".selected:eq(0)").attr("id", "codeLink"); + $(".selected:eq(0)").removeClass("selected"); // toggle display for files in repo - $('.Box:eq(3)').addClass('hiddenDisplay'); - $('.file-navigation:eq(0)').addClass('hiddenDisplay'); + $(".Box:eq(3)").addClass("hiddenDisplay"); + $(".file-navigation:eq(0)").addClass("hiddenDisplay"); - $('.Details-content--hidden-not-important:eq(1)').removeClass('d-md-block'); - $('.file-navigation:eq(0)').removeClass('d-flex'); + $(".Details-content--hidden-not-important:eq(1)").removeClass("d-md-block"); + $(".file-navigation:eq(0)").removeClass("d-flex"); - $('#codeLink').removeClass('selected'); + $("#codeLink").removeClass("selected"); - const codeLink = $('#codeLink'); - if (codeLink.attr('aria-current')) { - codeLink.removeAttr('aria-current'); + const codeLink = $("#codeLink"); + if (codeLink.attr("aria-current")) { + codeLink.removeAttr("aria-current"); } else { - codeLink.attr('aria-current', 'page'); + codeLink.attr("aria-current", "page"); } - $('#homePage').addClass('selected'); + $("#homePage").addClass("selected"); - if ($('#readme').hasClass('hiddenDisplay')) { - $('#readme').removeClass('hiddenDisplay'); + if ($("#readme").hasClass("hiddenDisplay")) { + $("#readme").removeClass("hiddenDisplay"); } } @@ -60,42 +60,42 @@ function createHomePage() { */ function createAccordionLayout() { try { - $('.Box-header:eq(2)').addClass('accordion'); - $('.js-details-container:eq(2)').addClass('panel'); + $(".Box-header:eq(2)").addClass("accordion"); + $(".js-details-container:eq(2)").addClass("panel"); } catch (error) { // silently abort } - $('.Box:eq(3)').removeClass('hiddenDisplay'); - $('.file-navigation:eq(0)').removeClass('hiddenDisplay'); + $(".Box:eq(3)").removeClass("hiddenDisplay"); + $(".file-navigation:eq(0)").removeClass("hiddenDisplay"); - $('.Details-content--hidden-not-important:eq(1)').addClass('d-md-block'); - $('.file-navigation:eq(0)').addClass('d-flex'); + $(".Details-content--hidden-not-important:eq(1)").addClass("d-md-block"); + $(".file-navigation:eq(0)").addClass("d-flex"); - $('.selected:eq(0)').removeClass('selected'); + $(".selected:eq(0)").removeClass("selected"); - $('#codeLink').addClass('selected'); - $('#readme').addClass('hiddenDisplay'); + $("#codeLink").addClass("selected"); + $("#readme").addClass("hiddenDisplay"); - const accordion = document.getElementsByClassName('accordion')[0]; - accordion.addEventListener('click', updateAccordion); + const accordion = document.getElementsByClassName("accordion")[0]; + accordion.addEventListener("click", updateAccordion); } /** * Updates files to collapse and expand */ function updateAccordion() { - $('.accordion').toggleClass('active'); - const panel = document.getElementsByClassName('panel')[0]; + $(".accordion").toggleClass("active"); + const panel = document.getElementsByClassName("panel")[0]; if (panel.style.maxHeight) { panel.style.maxHeight = null; } else { - panel.style.maxHeight = panel.scrollHeight + 'px'; + panel.style.maxHeight = panel.scrollHeight + "px"; } // update title of each file within the github repository - $('.js-details-container:eq(2) .link-gray-dark').each((index, element) => { - $(element).attr('title', 'To view this file, click here'); + $(".js-details-container:eq(2) .link-gray-dark").each((index, element) => { + $(element).attr("title", "To view this file, click here"); }); } @@ -104,15 +104,15 @@ function updateAccordion() { */ function createHomePageLink() { // check number of existing links - const navBarLinks = $('.UnderlineNav-body').find('li').length; + const navBarLinks = $(".UnderlineNav-body").find("li").length; if (navBarLinks !== 9 && navBarLinks !== 10) { - const newNavLink = document.createElement('li'); - newNavLink.className = 'd-flex'; + const newNavLink = document.createElement("li"); + newNavLink.className = "d-flex"; newNavLink.innerHTML = `Home`; - $('.UnderlineNav-body').prepend(newNavLink); + $(".UnderlineNav-body").prepend(newNavLink); } else { // home page link was already created } @@ -122,7 +122,7 @@ function createHomePageLink() { * Listen to page changes from the background */ chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => { - if (msg.type === 'UPDATE_REPO_LAYOUT') { + if (msg.type === "UPDATE_REPO_LAYOUT") { createHomePageLink(); } }); diff --git a/colors.json b/colors.json new file mode 100644 index 0000000..4b051bd --- /dev/null +++ b/colors.json @@ -0,0 +1,1622 @@ +{ + "1C Enterprise": { + "color": "#814CCC", + "url": "https://github.com/trending?l=1C-Enterprise" + }, + "4D": { + "color": null, + "url": "https://github.com/trending?l=4D" + }, + "ABAP": { + "color": "#E8274B", + "url": "https://github.com/trending?l=ABAP" + }, + "ActionScript": { + "color": "#882B0F", + "url": "https://github.com/trending?l=ActionScript" + }, + "Ada": { + "color": "#02f88c", + "url": "https://github.com/trending?l=Ada" + }, + "Agda": { + "color": "#315665", + "url": "https://github.com/trending?l=Agda" + }, + "AGS Script": { + "color": "#B9D9FF", + "url": "https://github.com/trending?l=AGS-Script" + }, + "Alloy": { + "color": "#64C800", + "url": "https://github.com/trending?l=Alloy" + }, + "Alpine Abuild": { + "color": null, + "url": "https://github.com/trending?l=Alpine-Abuild" + }, + "AMPL": { + "color": "#E6EFBB", + "url": "https://github.com/trending?l=AMPL" + }, + "AngelScript": { + "color": "#C7D7DC", + "url": "https://github.com/trending?l=AngelScript" + }, + "ANTLR": { + "color": "#9DC3FF", + "url": "https://github.com/trending?l=ANTLR" + }, + "Apex": { + "color": null, + "url": "https://github.com/trending?l=Apex" + }, + "API Blueprint": { + "color": "#2ACCA8", + "url": "https://github.com/trending?l=API-Blueprint" + }, + "APL": { + "color": "#5A8164", + "url": "https://github.com/trending?l=APL" + }, + "Apollo Guidance Computer": { + "color": null, + "url": "https://github.com/trending?l=Apollo-Guidance-Computer" + }, + "AppleScript": { + "color": "#101F1F", + "url": "https://github.com/trending?l=AppleScript" + }, + "Arc": { + "color": "#aa2afe", + "url": "https://github.com/trending?l=Arc" + }, + "ASP": { + "color": "#6a40fd", + "url": "https://github.com/trending?l=ASP" + }, + "AspectJ": { + "color": "#a957b0", + "url": "https://github.com/trending?l=AspectJ" + }, + "Assembly": { + "color": "#6E4C13", + "url": "https://github.com/trending?l=Assembly" + }, + "Asymptote": { + "color": "#4a0c0c", + "url": "https://github.com/trending?l=Asymptote" + }, + "ATS": { + "color": "#1ac620", + "url": "https://github.com/trending?l=ATS" + }, + "Augeas": { + "color": null, + "url": "https://github.com/trending?l=Augeas" + }, + "AutoHotkey": { + "color": "#6594b9", + "url": "https://github.com/trending?l=AutoHotkey" + }, + "AutoIt": { + "color": "#1C3552", + "url": "https://github.com/trending?l=AutoIt" + }, + "Awk": { + "color": null, + "url": "https://github.com/trending?l=Awk" + }, + "Ballerina": { + "color": "#FF5000", + "url": "https://github.com/trending?l=Ballerina" + }, + "Batchfile": { + "color": "#C1F12E", + "url": "https://github.com/trending?l=Batchfile" + }, + "Befunge": { + "color": null, + "url": "https://github.com/trending?l=Befunge" + }, + "Bison": { + "color": null, + "url": "https://github.com/trending?l=Bison" + }, + "BitBake": { + "color": null, + "url": "https://github.com/trending?l=BitBake" + }, + "BlitzBasic": { + "color": null, + "url": "https://github.com/trending?l=BlitzBasic" + }, + "BlitzMax": { + "color": "#cd6400", + "url": "https://github.com/trending?l=BlitzMax" + }, + "Bluespec": { + "color": null, + "url": "https://github.com/trending?l=Bluespec" + }, + "Boo": { + "color": "#d4bec1", + "url": "https://github.com/trending?l=Boo" + }, + "Brainfuck": { + "color": "#2F2530", + "url": "https://github.com/trending?l=Brainfuck" + }, + "Brightscript": { + "color": null, + "url": "https://github.com/trending?l=Brightscript" + }, + "C": { + "color": "#555555", + "url": "https://github.com/trending?l=C" + }, + "C#": { + "color": "#178600", + "url": "https://github.com/trending?l=Csharp" + }, + "C++": { + "color": "#f34b7d", + "url": "https://github.com/trending?l=C++" + }, + "C2hs Haskell": { + "color": null, + "url": "https://github.com/trending?l=C2hs-Haskell" + }, + "Cap'n Proto": { + "color": null, + "url": "https://github.com/trending?l=Cap'n-Proto" + }, + "CartoCSS": { + "color": null, + "url": "https://github.com/trending?l=CartoCSS" + }, + "Ceylon": { + "color": "#dfa535", + "url": "https://github.com/trending?l=Ceylon" + }, + "Chapel": { + "color": "#8dc63f", + "url": "https://github.com/trending?l=Chapel" + }, + "Charity": { + "color": null, + "url": "https://github.com/trending?l=Charity" + }, + "ChucK": { + "color": null, + "url": "https://github.com/trending?l=ChucK" + }, + "Cirru": { + "color": "#ccccff", + "url": "https://github.com/trending?l=Cirru" + }, + "Clarion": { + "color": "#db901e", + "url": "https://github.com/trending?l=Clarion" + }, + "Clean": { + "color": "#3F85AF", + "url": "https://github.com/trending?l=Clean" + }, + "Click": { + "color": "#E4E6F3", + "url": "https://github.com/trending?l=Click" + }, + "CLIPS": { + "color": null, + "url": "https://github.com/trending?l=CLIPS" + }, + "Clojure": { + "color": "#db5855", + "url": "https://github.com/trending?l=Clojure" + }, + "CMake": { + "color": null, + "url": "https://github.com/trending?l=CMake" + }, + "COBOL": { + "color": null, + "url": "https://github.com/trending?l=COBOL" + }, + "CodeQL": { + "color": null, + "url": "https://github.com/trending?l=CodeQL" + }, + "CoffeeScript": { + "color": "#244776", + "url": "https://github.com/trending?l=CoffeeScript" + }, + "ColdFusion": { + "color": "#ed2cd6", + "url": "https://github.com/trending?l=ColdFusion" + }, + "ColdFusion CFC": { + "color": null, + "url": "https://github.com/trending?l=ColdFusion-CFC" + }, + "Common Lisp": { + "color": "#3fb68b", + "url": "https://github.com/trending?l=Common-Lisp" + }, + "Common Workflow Language": { + "color": "#B5314C", + "url": "https://github.com/trending?l=Common-Workflow-Language" + }, + "Component Pascal": { + "color": "#B0CE4E", + "url": "https://github.com/trending?l=Component-Pascal" + }, + "Cool": { + "color": null, + "url": "https://github.com/trending?l=Cool" + }, + "Coq": { + "color": null, + "url": "https://github.com/trending?l=Coq" + }, + "Crystal": { + "color": "#000100", + "url": "https://github.com/trending?l=Crystal" + }, + "Csound": { + "color": null, + "url": "https://github.com/trending?l=Csound" + }, + "Csound Document": { + "color": null, + "url": "https://github.com/trending?l=Csound-Document" + }, + "Csound Score": { + "color": null, + "url": "https://github.com/trending?l=Csound-Score" + }, + "CSS": { + "color": "#563d7c", + "url": "https://github.com/trending?l=CSS" + }, + "Cuda": { + "color": "#3A4E3A", + "url": "https://github.com/trending?l=Cuda" + }, + "CWeb": { + "color": null, + "url": "https://github.com/trending?l=CWeb" + }, + "Cycript": { + "color": null, + "url": "https://github.com/trending?l=Cycript" + }, + "Cython": { + "color": null, + "url": "https://github.com/trending?l=Cython" + }, + "D": { + "color": "#ba595e", + "url": "https://github.com/trending?l=D" + }, + "Dafny": { + "color": "#FFEC25", + "url": "https://github.com/trending?l=Dafny" + }, + "Dart": { + "color": "#00B4AB", + "url": "https://github.com/trending?l=Dart" + }, + "DataWeave": { + "color": "#003a52", + "url": "https://github.com/trending?l=DataWeave" + }, + "Dhall": { + "color": "#dfafff", + "url": "https://github.com/trending?l=Dhall" + }, + "DIGITAL Command Language": { + "color": null, + "url": "https://github.com/trending?l=DIGITAL-Command-Language" + }, + "DM": { + "color": "#447265", + "url": "https://github.com/trending?l=DM" + }, + "Dockerfile": { + "color": "#384d54", + "url": "https://github.com/trending?l=Dockerfile" + }, + "Dogescript": { + "color": "#cca760", + "url": "https://github.com/trending?l=Dogescript" + }, + "DTrace": { + "color": null, + "url": "https://github.com/trending?l=DTrace" + }, + "Dylan": { + "color": "#6c616e", + "url": "https://github.com/trending?l=Dylan" + }, + "E": { + "color": "#ccce35", + "url": "https://github.com/trending?l=E" + }, + "eC": { + "color": "#913960", + "url": "https://github.com/trending?l=eC" + }, + "ECL": { + "color": "#8a1267", + "url": "https://github.com/trending?l=ECL" + }, + "ECLiPSe": { + "color": null, + "url": "https://github.com/trending?l=ECLiPSe" + }, + "Eiffel": { + "color": "#946d57", + "url": "https://github.com/trending?l=Eiffel" + }, + "Elixir": { + "color": "#6e4a7e", + "url": "https://github.com/trending?l=Elixir" + }, + "Elm": { + "color": "#60B5CC", + "url": "https://github.com/trending?l=Elm" + }, + "Emacs Lisp": { + "color": "#c065db", + "url": "https://github.com/trending?l=Emacs-Lisp" + }, + "EmberScript": { + "color": "#FFF4F3", + "url": "https://github.com/trending?l=EmberScript" + }, + "EQ": { + "color": "#a78649", + "url": "https://github.com/trending?l=EQ" + }, + "Erlang": { + "color": "#B83998", + "url": "https://github.com/trending?l=Erlang" + }, + "F#": { + "color": "#b845fc", + "url": "https://github.com/trending?l=Fsharp" + }, + "F*": { + "color": "#572e30", + "url": "https://github.com/trending?l=F*" + }, + "Factor": { + "color": "#636746", + "url": "https://github.com/trending?l=Factor" + }, + "Fancy": { + "color": "#7b9db4", + "url": "https://github.com/trending?l=Fancy" + }, + "Fantom": { + "color": "#14253c", + "url": "https://github.com/trending?l=Fantom" + }, + "Faust": { + "color": "#c37240", + "url": "https://github.com/trending?l=Faust" + }, + "Filebench WML": { + "color": null, + "url": "https://github.com/trending?l=Filebench-WML" + }, + "Filterscript": { + "color": null, + "url": "https://github.com/trending?l=Filterscript" + }, + "fish": { + "color": null, + "url": "https://github.com/trending?l=fish" + }, + "FLUX": { + "color": "#88ccff", + "url": "https://github.com/trending?l=FLUX" + }, + "Forth": { + "color": "#341708", + "url": "https://github.com/trending?l=Forth" + }, + "Fortran": { + "color": "#4d41b1", + "url": "https://github.com/trending?l=Fortran" + }, + "Fortran Free Form": { + "color": null, + "url": "https://github.com/trending?l=Fortran-Free-Form" + }, + "FreeMarker": { + "color": "#0050b2", + "url": "https://github.com/trending?l=FreeMarker" + }, + "Frege": { + "color": "#00cafe", + "url": "https://github.com/trending?l=Frege" + }, + "Futhark": { + "color": "#5f021f", + "url": "https://github.com/trending?l=Futhark" + }, + "G-code": { + "color": "#D08CF2", + "url": "https://github.com/trending?l=G-code" + }, + "Game Maker Language": { + "color": "#71b417", + "url": "https://github.com/trending?l=Game-Maker-Language" + }, + "GAML": { + "color": "#FFC766", + "url": "https://github.com/trending?l=GAML" + }, + "GAMS": { + "color": null, + "url": "https://github.com/trending?l=GAMS" + }, + "GAP": { + "color": null, + "url": "https://github.com/trending?l=GAP" + }, + "GCC Machine Description": { + "color": null, + "url": "https://github.com/trending?l=GCC-Machine-Description" + }, + "GDB": { + "color": null, + "url": "https://github.com/trending?l=GDB" + }, + "GDScript": { + "color": "#355570", + "url": "https://github.com/trending?l=GDScript" + }, + "Genie": { + "color": "#fb855d", + "url": "https://github.com/trending?l=Genie" + }, + "Genshi": { + "color": null, + "url": "https://github.com/trending?l=Genshi" + }, + "Gentoo Ebuild": { + "color": null, + "url": "https://github.com/trending?l=Gentoo-Ebuild" + }, + "Gentoo Eclass": { + "color": null, + "url": "https://github.com/trending?l=Gentoo-Eclass" + }, + "Gherkin": { + "color": "#5B2063", + "url": "https://github.com/trending?l=Gherkin" + }, + "GLSL": { + "color": null, + "url": "https://github.com/trending?l=GLSL" + }, + "Glyph": { + "color": "#c1ac7f", + "url": "https://github.com/trending?l=Glyph" + }, + "Gnuplot": { + "color": "#f0a9f0", + "url": "https://github.com/trending?l=Gnuplot" + }, + "Go": { + "color": "#00ADD8", + "url": "https://github.com/trending?l=Go" + }, + "Golo": { + "color": "#88562A", + "url": "https://github.com/trending?l=Golo" + }, + "Gosu": { + "color": "#82937f", + "url": "https://github.com/trending?l=Gosu" + }, + "Grace": { + "color": null, + "url": "https://github.com/trending?l=Grace" + }, + "Grammatical Framework": { + "color": "#79aa7a", + "url": "https://github.com/trending?l=Grammatical-Framework" + }, + "Groovy": { + "color": "#e69f56", + "url": "https://github.com/trending?l=Groovy" + }, + "Groovy Server Pages": { + "color": null, + "url": "https://github.com/trending?l=Groovy-Server-Pages" + }, + "Hack": { + "color": "#878787", + "url": "https://github.com/trending?l=Hack" + }, + "Harbour": { + "color": "#0e60e3", + "url": "https://github.com/trending?l=Harbour" + }, + "Haskell": { + "color": "#5e5086", + "url": "https://github.com/trending?l=Haskell" + }, + "Haxe": { + "color": "#df7900", + "url": "https://github.com/trending?l=Haxe" + }, + "HCL": { + "color": null, + "url": "https://github.com/trending?l=HCL" + }, + "HiveQL": { + "color": "#dce200", + "url": "https://github.com/trending?l=HiveQL" + }, + "HLSL": { + "color": null, + "url": "https://github.com/trending?l=HLSL" + }, + "HolyC": { + "color": "#ffefaf", + "url": "https://github.com/trending?l=HolyC" + }, + "HTML": { + "color": "#e34c26", + "url": "https://github.com/trending?l=HTML" + }, + "Hy": { + "color": "#7790B2", + "url": "https://github.com/trending?l=Hy" + }, + "HyPhy": { + "color": null, + "url": "https://github.com/trending?l=HyPhy" + }, + "IDL": { + "color": "#a3522f", + "url": "https://github.com/trending?l=IDL" + }, + "Idris": { + "color": "#b30000", + "url": "https://github.com/trending?l=Idris" + }, + "IGOR Pro": { + "color": "#0000cc", + "url": "https://github.com/trending?l=IGOR-Pro" + }, + "Inform 7": { + "color": null, + "url": "https://github.com/trending?l=Inform-7" + }, + "Inno Setup": { + "color": null, + "url": "https://github.com/trending?l=Inno-Setup" + }, + "Io": { + "color": "#a9188d", + "url": "https://github.com/trending?l=Io" + }, + "Ioke": { + "color": "#078193", + "url": "https://github.com/trending?l=Ioke" + }, + "Isabelle": { + "color": "#FEFE00", + "url": "https://github.com/trending?l=Isabelle" + }, + "Isabelle ROOT": { + "color": null, + "url": "https://github.com/trending?l=Isabelle-ROOT" + }, + "J": { + "color": "#9EEDFF", + "url": "https://github.com/trending?l=J" + }, + "Jasmin": { + "color": null, + "url": "https://github.com/trending?l=Jasmin" + }, + "Java": { + "color": "#b07219", + "url": "https://github.com/trending?l=Java" + }, + "Java Server Pages": { + "color": null, + "url": "https://github.com/trending?l=Java-Server-Pages" + }, + "JavaScript": { + "color": "#f1e05a", + "url": "https://github.com/trending?l=JavaScript" + }, + "JavaScript+ERB": { + "color": null, + "url": "https://github.com/trending?l=JavaScript+ERB" + }, + "JFlex": { + "color": null, + "url": "https://github.com/trending?l=JFlex" + }, + "Jison": { + "color": null, + "url": "https://github.com/trending?l=Jison" + }, + "Jison Lex": { + "color": null, + "url": "https://github.com/trending?l=Jison-Lex" + }, + "Jolie": { + "color": "#843179", + "url": "https://github.com/trending?l=Jolie" + }, + "JSONiq": { + "color": "#40d47e", + "url": "https://github.com/trending?l=JSONiq" + }, + "Jsonnet": { + "color": "#0064bd", + "url": "https://github.com/trending?l=Jsonnet" + }, + "JSX": { + "color": null, + "url": "https://github.com/trending?l=JSX" + }, + "Julia": { + "color": "#a270ba", + "url": "https://github.com/trending?l=Julia" + }, + "Jupyter Notebook": { + "color": "#DA5B0B", + "url": "https://github.com/trending?l=Jupyter-Notebook" + }, + "Kaitai Struct": { + "color": "#773b37", + "url": "https://github.com/trending?l=Kaitai-Struct" + }, + "Kotlin": { + "color": "#F18E33", + "url": "https://github.com/trending?l=Kotlin" + }, + "KRL": { + "color": "#28430A", + "url": "https://github.com/trending?l=KRL" + }, + "LabVIEW": { + "color": null, + "url": "https://github.com/trending?l=LabVIEW" + }, + "Lasso": { + "color": "#999999", + "url": "https://github.com/trending?l=Lasso" + }, + "Lean": { + "color": null, + "url": "https://github.com/trending?l=Lean" + }, + "Lex": { + "color": "#DBCA00", + "url": "https://github.com/trending?l=Lex" + }, + "LFE": { + "color": "#4C3023", + "url": "https://github.com/trending?l=LFE" + }, + "LilyPond": { + "color": null, + "url": "https://github.com/trending?l=LilyPond" + }, + "Limbo": { + "color": null, + "url": "https://github.com/trending?l=Limbo" + }, + "Literate Agda": { + "color": null, + "url": "https://github.com/trending?l=Literate-Agda" + }, + "Literate CoffeeScript": { + "color": null, + "url": "https://github.com/trending?l=Literate-CoffeeScript" + }, + "Literate Haskell": { + "color": null, + "url": "https://github.com/trending?l=Literate-Haskell" + }, + "LiveScript": { + "color": "#499886", + "url": "https://github.com/trending?l=LiveScript" + }, + "LLVM": { + "color": "#185619", + "url": "https://github.com/trending?l=LLVM" + }, + "Logos": { + "color": null, + "url": "https://github.com/trending?l=Logos" + }, + "Logtalk": { + "color": null, + "url": "https://github.com/trending?l=Logtalk" + }, + "LOLCODE": { + "color": "#cc9900", + "url": "https://github.com/trending?l=LOLCODE" + }, + "LookML": { + "color": "#652B81", + "url": "https://github.com/trending?l=LookML" + }, + "LoomScript": { + "color": null, + "url": "https://github.com/trending?l=LoomScript" + }, + "LSL": { + "color": "#3d9970", + "url": "https://github.com/trending?l=LSL" + }, + "Lua": { + "color": "#000080", + "url": "https://github.com/trending?l=Lua" + }, + "M": { + "color": null, + "url": "https://github.com/trending?l=M" + }, + "M4": { + "color": null, + "url": "https://github.com/trending?l=M4" + }, + "M4Sugar": { + "color": null, + "url": "https://github.com/trending?l=M4Sugar" + }, + "Macaulay2": { + "color": "#d8ffff", + "url": "https://github.com/trending?l=Macaulay2" + }, + "Makefile": { + "color": "#427819", + "url": "https://github.com/trending?l=Makefile" + }, + "Mako": { + "color": null, + "url": "https://github.com/trending?l=Mako" + }, + "Mask": { + "color": "#f97732", + "url": "https://github.com/trending?l=Mask" + }, + "Mathematica": { + "color": null, + "url": "https://github.com/trending?l=Mathematica" + }, + "MATLAB": { + "color": "#e16737", + "url": "https://github.com/trending?l=MATLAB" + }, + "Max": { + "color": "#c4a79c", + "url": "https://github.com/trending?l=Max" + }, + "MAXScript": { + "color": "#00a6a6", + "url": "https://github.com/trending?l=MAXScript" + }, + "mcfunction": { + "color": "#E22837", + "url": "https://github.com/trending?l=mcfunction" + }, + "Mercury": { + "color": "#ff2b2b", + "url": "https://github.com/trending?l=Mercury" + }, + "Meson": { + "color": "#007800", + "url": "https://github.com/trending?l=Meson" + }, + "Metal": { + "color": "#8f14e9", + "url": "https://github.com/trending?l=Metal" + }, + "MiniD": { + "color": null, + "url": "https://github.com/trending?l=MiniD" + }, + "Mirah": { + "color": "#c7a938", + "url": "https://github.com/trending?l=Mirah" + }, + "mIRC Script": { + "color": "#926059", + "url": "https://github.com/trending?l=mIRC-Script" + }, + "MLIR": { + "color": "#5EC8DB", + "url": "https://github.com/trending?l=MLIR" + }, + "Modelica": { + "color": null, + "url": "https://github.com/trending?l=Modelica" + }, + "Modula-2": { + "color": null, + "url": "https://github.com/trending?l=Modula-2" + }, + "Modula-3": { + "color": "#223388", + "url": "https://github.com/trending?l=Modula-3" + }, + "Module Management System": { + "color": null, + "url": "https://github.com/trending?l=Module-Management-System" + }, + "Monkey": { + "color": null, + "url": "https://github.com/trending?l=Monkey" + }, + "Moocode": { + "color": null, + "url": "https://github.com/trending?l=Moocode" + }, + "MoonScript": { + "color": null, + "url": "https://github.com/trending?l=MoonScript" + }, + "Motorola 68K Assembly": { + "color": null, + "url": "https://github.com/trending?l=Motorola-68K-Assembly" + }, + "MQL4": { + "color": "#62A8D6", + "url": "https://github.com/trending?l=MQL4" + }, + "MQL5": { + "color": "#4A76B8", + "url": "https://github.com/trending?l=MQL5" + }, + "MTML": { + "color": "#b7e1f4", + "url": "https://github.com/trending?l=MTML" + }, + "MUF": { + "color": null, + "url": "https://github.com/trending?l=MUF" + }, + "mupad": { + "color": null, + "url": "https://github.com/trending?l=mupad" + }, + "Myghty": { + "color": null, + "url": "https://github.com/trending?l=Myghty" + }, + "NASL": { + "color": null, + "url": "https://github.com/trending?l=NASL" + }, + "NCL": { + "color": "#28431f", + "url": "https://github.com/trending?l=NCL" + }, + "Nearley": { + "color": "#990000", + "url": "https://github.com/trending?l=Nearley" + }, + "Nemerle": { + "color": "#3d3c6e", + "url": "https://github.com/trending?l=Nemerle" + }, + "nesC": { + "color": "#94B0C7", + "url": "https://github.com/trending?l=nesC" + }, + "NetLinx": { + "color": "#0aa0ff", + "url": "https://github.com/trending?l=NetLinx" + }, + "NetLinx+ERB": { + "color": "#747faa", + "url": "https://github.com/trending?l=NetLinx+ERB" + }, + "NetLogo": { + "color": "#ff6375", + "url": "https://github.com/trending?l=NetLogo" + }, + "NewLisp": { + "color": "#87AED7", + "url": "https://github.com/trending?l=NewLisp" + }, + "Nextflow": { + "color": "#3ac486", + "url": "https://github.com/trending?l=Nextflow" + }, + "Nim": { + "color": "#ffc200", + "url": "https://github.com/trending?l=Nim" + }, + "Nit": { + "color": "#009917", + "url": "https://github.com/trending?l=Nit" + }, + "Nix": { + "color": "#7e7eff", + "url": "https://github.com/trending?l=Nix" + }, + "NSIS": { + "color": null, + "url": "https://github.com/trending?l=NSIS" + }, + "Nu": { + "color": "#c9df40", + "url": "https://github.com/trending?l=Nu" + }, + "NumPy": { + "color": null, + "url": "https://github.com/trending?l=NumPy" + }, + "Objective-C": { + "color": "#438eff", + "url": "https://github.com/trending?l=Objective-C" + }, + "Objective-C++": { + "color": "#6866fb", + "url": "https://github.com/trending?l=Objective-C++" + }, + "Objective-J": { + "color": "#ff0c5a", + "url": "https://github.com/trending?l=Objective-J" + }, + "ObjectScript": { + "color": "#424893", + "url": "https://github.com/trending?l=ObjectScript" + }, + "OCaml": { + "color": "#3be133", + "url": "https://github.com/trending?l=OCaml" + }, + "Odin": { + "color": "#60AFFE", + "url": "https://github.com/trending?l=Odin" + }, + "Omgrofl": { + "color": "#cabbff", + "url": "https://github.com/trending?l=Omgrofl" + }, + "ooc": { + "color": "#b0b77e", + "url": "https://github.com/trending?l=ooc" + }, + "Opa": { + "color": null, + "url": "https://github.com/trending?l=Opa" + }, + "Opal": { + "color": "#f7ede0", + "url": "https://github.com/trending?l=Opal" + }, + "Open Policy Agent": { + "color": null, + "url": "https://github.com/trending?l=Open-Policy-Agent" + }, + "OpenCL": { + "color": null, + "url": "https://github.com/trending?l=OpenCL" + }, + "OpenEdge ABL": { + "color": null, + "url": "https://github.com/trending?l=OpenEdge-ABL" + }, + "OpenQASM": { + "color": "#AA70FF", + "url": "https://github.com/trending?l=OpenQASM" + }, + "OpenRC runscript": { + "color": null, + "url": "https://github.com/trending?l=OpenRC-runscript" + }, + "OpenSCAD": { + "color": null, + "url": "https://github.com/trending?l=OpenSCAD" + }, + "Ox": { + "color": null, + "url": "https://github.com/trending?l=Ox" + }, + "Oxygene": { + "color": "#cdd0e3", + "url": "https://github.com/trending?l=Oxygene" + }, + "Oz": { + "color": "#fab738", + "url": "https://github.com/trending?l=Oz" + }, + "P4": { + "color": "#7055b5", + "url": "https://github.com/trending?l=P4" + }, + "Pan": { + "color": "#cc0000", + "url": "https://github.com/trending?l=Pan" + }, + "Papyrus": { + "color": "#6600cc", + "url": "https://github.com/trending?l=Papyrus" + }, + "Parrot": { + "color": "#f3ca0a", + "url": "https://github.com/trending?l=Parrot" + }, + "Parrot Assembly": { + "color": null, + "url": "https://github.com/trending?l=Parrot-Assembly" + }, + "Parrot Internal Representation": { + "color": null, + "url": "https://github.com/trending?l=Parrot-Internal-Representation" + }, + "Pascal": { + "color": "#E3F171", + "url": "https://github.com/trending?l=Pascal" + }, + "Pawn": { + "color": "#dbb284", + "url": "https://github.com/trending?l=Pawn" + }, + "Pep8": { + "color": "#C76F5B", + "url": "https://github.com/trending?l=Pep8" + }, + "Perl": { + "color": "#0298c3", + "url": "https://github.com/trending?l=Perl" + }, + "PHP": { + "color": "#4F5D95", + "url": "https://github.com/trending?l=PHP" + }, + "PicoLisp": { + "color": null, + "url": "https://github.com/trending?l=PicoLisp" + }, + "PigLatin": { + "color": "#fcd7de", + "url": "https://github.com/trending?l=PigLatin" + }, + "Pike": { + "color": "#005390", + "url": "https://github.com/trending?l=Pike" + }, + "PLpgSQL": { + "color": null, + "url": "https://github.com/trending?l=PLpgSQL" + }, + "PLSQL": { + "color": "#dad8d8", + "url": "https://github.com/trending?l=PLSQL" + }, + "PogoScript": { + "color": "#d80074", + "url": "https://github.com/trending?l=PogoScript" + }, + "Pony": { + "color": null, + "url": "https://github.com/trending?l=Pony" + }, + "PostScript": { + "color": "#da291c", + "url": "https://github.com/trending?l=PostScript" + }, + "POV-Ray SDL": { + "color": null, + "url": "https://github.com/trending?l=POV-Ray-SDL" + }, + "PowerBuilder": { + "color": "#8f0f8d", + "url": "https://github.com/trending?l=PowerBuilder" + }, + "PowerShell": { + "color": "#012456", + "url": "https://github.com/trending?l=PowerShell" + }, + "Processing": { + "color": "#0096D8", + "url": "https://github.com/trending?l=Processing" + }, + "Prolog": { + "color": "#74283c", + "url": "https://github.com/trending?l=Prolog" + }, + "Propeller Spin": { + "color": "#7fa2a7", + "url": "https://github.com/trending?l=Propeller-Spin" + }, + "Puppet": { + "color": "#302B6D", + "url": "https://github.com/trending?l=Puppet" + }, + "PureBasic": { + "color": "#5a6986", + "url": "https://github.com/trending?l=PureBasic" + }, + "PureScript": { + "color": "#1D222D", + "url": "https://github.com/trending?l=PureScript" + }, + "Python": { + "color": "#3572A5", + "url": "https://github.com/trending?l=Python" + }, + "Python console": { + "color": null, + "url": "https://github.com/trending?l=Python-console" + }, + "q": { + "color": "#0040cd", + "url": "https://github.com/trending?l=q" + }, + "Q#": { + "color": "#fed659", + "url": "https://github.com/trending?l=Qsharp" + }, + "QMake": { + "color": null, + "url": "https://github.com/trending?l=QMake" + }, + "QML": { + "color": "#44a51c", + "url": "https://github.com/trending?l=QML" + }, + "Qt Script": { + "color": "#00b841", + "url": "https://github.com/trending?l=Qt-Script" + }, + "Quake": { + "color": "#882233", + "url": "https://github.com/trending?l=Quake" + }, + "R": { + "color": "#198CE7", + "url": "https://github.com/trending?l=R" + }, + "Racket": { + "color": "#3c5caa", + "url": "https://github.com/trending?l=Racket" + }, + "Ragel": { + "color": "#9d5200", + "url": "https://github.com/trending?l=Ragel" + }, + "Raku": { + "color": "#0000fb", + "url": "https://github.com/trending?l=Raku" + }, + "RAML": { + "color": "#77d9fb", + "url": "https://github.com/trending?l=RAML" + }, + "Rascal": { + "color": "#fffaa0", + "url": "https://github.com/trending?l=Rascal" + }, + "REALbasic": { + "color": null, + "url": "https://github.com/trending?l=REALbasic" + }, + "Reason": { + "color": "#ff5847", + "url": "https://github.com/trending?l=Reason" + }, + "Rebol": { + "color": "#358a5b", + "url": "https://github.com/trending?l=Rebol" + }, + "Red": { + "color": "#f50000", + "url": "https://github.com/trending?l=Red" + }, + "Redcode": { + "color": null, + "url": "https://github.com/trending?l=Redcode" + }, + "Ren'Py": { + "color": "#ff7f7f", + "url": "https://github.com/trending?l=Ren'Py" + }, + "RenderScript": { + "color": null, + "url": "https://github.com/trending?l=RenderScript" + }, + "REXX": { + "color": null, + "url": "https://github.com/trending?l=REXX" + }, + "Ring": { + "color": "#2D54CB", + "url": "https://github.com/trending?l=Ring" + }, + "Riot": { + "color": "#A71E49", + "url": "https://github.com/trending?l=Riot" + }, + "RobotFramework": { + "color": null, + "url": "https://github.com/trending?l=RobotFramework" + }, + "Roff": { + "color": "#ecdebe", + "url": "https://github.com/trending?l=Roff" + }, + "Rouge": { + "color": "#cc0088", + "url": "https://github.com/trending?l=Rouge" + }, + "RPC": { + "color": null, + "url": "https://github.com/trending?l=RPC" + }, + "Ruby": { + "color": "#701516", + "url": "https://github.com/trending?l=Ruby" + }, + "RUNOFF": { + "color": "#665a4e", + "url": "https://github.com/trending?l=RUNOFF" + }, + "Rust": { + "color": "#dea584", + "url": "https://github.com/trending?l=Rust" + }, + "Sage": { + "color": null, + "url": "https://github.com/trending?l=Sage" + }, + "SaltStack": { + "color": "#646464", + "url": "https://github.com/trending?l=SaltStack" + }, + "SAS": { + "color": "#B34936", + "url": "https://github.com/trending?l=SAS" + }, + "Scala": { + "color": "#c22d40", + "url": "https://github.com/trending?l=Scala" + }, + "Scheme": { + "color": "#1e4aec", + "url": "https://github.com/trending?l=Scheme" + }, + "Scilab": { + "color": null, + "url": "https://github.com/trending?l=Scilab" + }, + "sed": { + "color": "#64b970", + "url": "https://github.com/trending?l=sed" + }, + "Self": { + "color": "#0579aa", + "url": "https://github.com/trending?l=Self" + }, + "ShaderLab": { + "color": null, + "url": "https://github.com/trending?l=ShaderLab" + }, + "Shell": { + "color": "#89e051", + "url": "https://github.com/trending?l=Shell" + }, + "ShellSession": { + "color": null, + "url": "https://github.com/trending?l=ShellSession" + }, + "Shen": { + "color": "#120F14", + "url": "https://github.com/trending?l=Shen" + }, + "Sieve": { + "color": null, + "url": "https://github.com/trending?l=Sieve" + }, + "Slash": { + "color": "#007eff", + "url": "https://github.com/trending?l=Slash" + }, + "Slice": { + "color": "#003fa2", + "url": "https://github.com/trending?l=Slice" + }, + "Smali": { + "color": null, + "url": "https://github.com/trending?l=Smali" + }, + "Smalltalk": { + "color": "#596706", + "url": "https://github.com/trending?l=Smalltalk" + }, + "Smarty": { + "color": null, + "url": "https://github.com/trending?l=Smarty" + }, + "SmPL": { + "color": "#c94949", + "url": "https://github.com/trending?l=SmPL" + }, + "SMT": { + "color": null, + "url": "https://github.com/trending?l=SMT" + }, + "Solidity": { + "color": "#AA6746", + "url": "https://github.com/trending?l=Solidity" + }, + "SourcePawn": { + "color": "#5c7611", + "url": "https://github.com/trending?l=SourcePawn" + }, + "SQF": { + "color": "#3F3F3F", + "url": "https://github.com/trending?l=SQF" + }, + "SQLPL": { + "color": null, + "url": "https://github.com/trending?l=SQLPL" + }, + "Squirrel": { + "color": "#800000", + "url": "https://github.com/trending?l=Squirrel" + }, + "SRecode Template": { + "color": "#348a34", + "url": "https://github.com/trending?l=SRecode-Template" + }, + "Stan": { + "color": "#b2011d", + "url": "https://github.com/trending?l=Stan" + }, + "Standard ML": { + "color": "#dc566d", + "url": "https://github.com/trending?l=Standard-ML" + }, + "Starlark": { + "color": "#76d275", + "url": "https://github.com/trending?l=Starlark" + }, + "Stata": { + "color": null, + "url": "https://github.com/trending?l=Stata" + }, + "SuperCollider": { + "color": "#46390b", + "url": "https://github.com/trending?l=SuperCollider" + }, + "Swift": { + "color": "#ffac45", + "url": "https://github.com/trending?l=Swift" + }, + "SWIG": { + "color": null, + "url": "https://github.com/trending?l=SWIG" + }, + "SystemVerilog": { + "color": "#DAE1C2", + "url": "https://github.com/trending?l=SystemVerilog" + }, + "Tcl": { + "color": "#e4cc98", + "url": "https://github.com/trending?l=Tcl" + }, + "Tcsh": { + "color": null, + "url": "https://github.com/trending?l=Tcsh" + }, + "Terra": { + "color": "#00004c", + "url": "https://github.com/trending?l=Terra" + }, + "TeX": { + "color": "#3D6117", + "url": "https://github.com/trending?l=TeX" + }, + "Thrift": { + "color": null, + "url": "https://github.com/trending?l=Thrift" + }, + "TI Program": { + "color": "#A0AA87", + "url": "https://github.com/trending?l=TI-Program" + }, + "TLA": { + "color": null, + "url": "https://github.com/trending?l=TLA" + }, + "TSQL": { + "color": null, + "url": "https://github.com/trending?l=TSQL" + }, + "TSX": { + "color": null, + "url": "https://github.com/trending?l=TSX" + }, + "Turing": { + "color": "#cf142b", + "url": "https://github.com/trending?l=Turing" + }, + "TXL": { + "color": null, + "url": "https://github.com/trending?l=TXL" + }, + "TypeScript": { + "color": "#2b7489", + "url": "https://github.com/trending?l=TypeScript" + }, + "Unified Parallel C": { + "color": null, + "url": "https://github.com/trending?l=Unified-Parallel-C" + }, + "Unix Assembly": { + "color": null, + "url": "https://github.com/trending?l=Unix-Assembly" + }, + "Uno": { + "color": null, + "url": "https://github.com/trending?l=Uno" + }, + "UnrealScript": { + "color": "#a54c4d", + "url": "https://github.com/trending?l=UnrealScript" + }, + "UrWeb": { + "color": null, + "url": "https://github.com/trending?l=UrWeb" + }, + "V": { + "color": "#5d87bd", + "url": "https://github.com/trending?l=V" + }, + "Vala": { + "color": "#fbe5cd", + "url": "https://github.com/trending?l=Vala" + }, + "VBA": { + "color": "#867db1", + "url": "https://github.com/trending?l=VBA" + }, + "VBScript": { + "color": "#15dcdc", + "url": "https://github.com/trending?l=VBScript" + }, + "VCL": { + "color": "#148AA8", + "url": "https://github.com/trending?l=VCL" + }, + "Verilog": { + "color": "#b2b7f8", + "url": "https://github.com/trending?l=Verilog" + }, + "VHDL": { + "color": "#adb2cb", + "url": "https://github.com/trending?l=VHDL" + }, + "Vim script": { + "color": "#199f4b", + "url": "https://github.com/trending?l=Vim-script" + }, + "Visual Basic .NET": { + "color": "#945db7", + "url": "https://github.com/trending?l=Visual-Basic-.NET" + }, + "Volt": { + "color": "#1F1F1F", + "url": "https://github.com/trending?l=Volt" + }, + "Vue": { + "color": "#2c3e50", + "url": "https://github.com/trending?l=Vue" + }, + "wdl": { + "color": "#42f1f4", + "url": "https://github.com/trending?l=wdl" + }, + "WebAssembly": { + "color": "#04133b", + "url": "https://github.com/trending?l=WebAssembly" + }, + "WebIDL": { + "color": null, + "url": "https://github.com/trending?l=WebIDL" + }, + "wisp": { + "color": "#7582D1", + "url": "https://github.com/trending?l=wisp" + }, + "Wollok": { + "color": "#a23738", + "url": "https://github.com/trending?l=Wollok" + }, + "X10": { + "color": "#4B6BEF", + "url": "https://github.com/trending?l=X10" + }, + "xBase": { + "color": "#403a40", + "url": "https://github.com/trending?l=xBase" + }, + "XC": { + "color": "#99DA07", + "url": "https://github.com/trending?l=XC" + }, + "Xojo": { + "color": null, + "url": "https://github.com/trending?l=Xojo" + }, + "XProc": { + "color": null, + "url": "https://github.com/trending?l=XProc" + }, + "XQuery": { + "color": "#5232e7", + "url": "https://github.com/trending?l=XQuery" + }, + "XS": { + "color": null, + "url": "https://github.com/trending?l=XS" + }, + "XSLT": { + "color": "#EB8CEB", + "url": "https://github.com/trending?l=XSLT" + }, + "Xtend": { + "color": null, + "url": "https://github.com/trending?l=Xtend" + }, + "Yacc": { + "color": "#4B6C4B", + "url": "https://github.com/trending?l=Yacc" + }, + "YARA": { + "color": "#220000", + "url": "https://github.com/trending?l=YARA" + }, + "YASnippet": { + "color": "#32AB90", + "url": "https://github.com/trending?l=YASnippet" + }, + "ZAP": { + "color": "#0d665e", + "url": "https://github.com/trending?l=ZAP" + }, + "Zeek": { + "color": null, + "url": "https://github.com/trending?l=Zeek" + }, + "ZenScript": { + "color": "#00BCD1", + "url": "https://github.com/trending?l=ZenScript" + }, + "Zephir": { + "color": "#118f9e", + "url": "https://github.com/trending?l=Zephir" + }, + "Zig": { + "color": "#ec915c", + "url": "https://github.com/trending?l=Zig" + }, + "ZIL": { + "color": "#dc75e5", + "url": "https://github.com/trending?l=ZIL" + }, + "Zimpl": { + "color": null, + "url": "https://github.com/trending?l=Zimpl" + } +} diff --git a/content.js b/content.js index 64b8459..1908327 100644 --- a/content.js +++ b/content.js @@ -1,22 +1,27 @@ +let injected = false; + window.onload = () => { const currentPageUrl = document.location.pathname; - checkUrl(currentPageUrl); + if (!injected) { + injected = true; + checkUrl(currentPageUrl); + } }; // Color values for graphs const colors = [ - '#00498D', - '#01579B', - '#00498D', - '#0277BD', - '#0288D1', - '#039BE5', - '#03A9F4', - '#29B6F6', - '#4FC3F7', - '#81D4FA', - '#B3E5FC', + "#00498D", + "#01579B", + "#00498D", + "#0277BD", + "#0288D1", + "#039BE5", + "#03A9F4", + "#29B6F6", + "#4FC3F7", + "#81D4FA", + "#B3E5FC", ]; class ToolTipIcon { @@ -28,7 +33,7 @@ class ToolTipIcon { } createIcon() { - const toolTipContainer = document.createElement('div'); + const toolTipContainer = document.createElement("div"); toolTipContainer.className = this.toolTipClass; toolTipContainer.innerHTML = `? @@ -56,23 +61,23 @@ function checkUrl(currentUrl) { // check if the user wants to edit a file that they are not an owner of if (checkIsEditingForkedFile()) { createForkedFileToolTips(); - } else if (currentUrl.includes('/edit/')) { + } else if (currentUrl.includes("/edit/")) { createFileEditorToolTips(); - } else if (currentUrl.includes('/compare/')) { + } else if (currentUrl.includes("/compare/")) { createConfirmPullRequestToolTips(); } // if the user is reviewing a pull request - else if (currentUrl.includes('/pull/')) { + else if (currentUrl.includes("/pull/")) { createReviewPullRequestToolTips(); } // if the user is opening a pull request - else if (document.getElementsByClassName('h-card').length !== 0) { + else if (document.getElementsByClassName("h-card").length !== 0) { updateProfileCard(); } // if the user is creating a new issue - else if (currentUrl.includes('/issues/new')) { + else if (currentUrl.includes("/issues/new")) { createReportIssueToolTips(); - } else if (currentUrl.includes('/issues/')) { + } else if (currentUrl.includes("/issues/")) { createReviewIssueToolTips(); } else { // do nothing @@ -84,14 +89,14 @@ function checkUrl(currentUrl) { */ function checkIsEditingForkedFile() { const pencilIconLabelsList = [ - 'Edit the file in your fork of this project', - 'Fork this project and edit the file', + "Edit the file in your fork of this project", + "Fork this project and edit the file", ]; try { var pencilIconLabel = document - .getElementsByClassName('tooltipped')[2] - .getAttribute('aria-label'); + .getElementsByClassName("tooltipped")[2] + .getAttribute("aria-label"); // check if there is a pencil icon with this aria label return pencilIconLabelsList.includes(pencilIconLabel); } catch (error) { @@ -108,30 +113,30 @@ function checkIsEditingForkedFile() { */ function addProgressBar(currentStep, totalSteps, rootElement, stepsList) { // create the progress bar element - const progressBarContainer = document.createElement('div'); - progressBarContainer.className = 'container'; + const progressBarContainer = document.createElement("div"); + progressBarContainer.className = "container"; - const progressBar = document.createElement('div'); - progressBar.className = 'progressbar'; + const progressBar = document.createElement("div"); + progressBar.className = "progressbar"; - const itemList = document.createElement('ul'); + const itemList = document.createElement("ul"); let index; for (index = 1; index <= stepsList.length; index += 1) { - const listItem = document.createElement('li'); + const listItem = document.createElement("li"); listItem.innerHTML = stepsList[index - 1]; // if all steps have been completed if (currentStep === totalSteps) { - listItem.className = 'completed'; + listItem.className = "completed"; // if the step is in progress } else if (index === currentStep) { - listItem.className = 'partial'; + listItem.className = "partial"; } // if the user has already completed a step else if (index < currentStep) { - listItem.className = 'partial completed'; + listItem.className = "partial completed"; } itemList.appendChild(listItem); } @@ -151,27 +156,27 @@ function addProgressBar(currentStep, totalSteps, rootElement, stepsList) { * Checks if issue or pull request was succesfully created and is open in the repo */ function isProcessCompleted() { - let status = ''; + let status = ""; try { - status = document.getElementsByClassName('State')[0].getAttribute('title'); + status = document.getElementsByClassName("State")[0].getAttribute("title"); } catch (error) { return false; } - return status === 'Status: Open'; + return status === "Status: Open"; } /** * Creates ribbon above progress bar to inform the user that the process is successful */ function createSuccessRibbon() { - let processType = 'pull request'; + let processType = "pull request"; - if (document.location.pathname.includes('/issues/')) { - processType = 'issue'; + if (document.location.pathname.includes("/issues/")) { + processType = "issue"; } - const successRibbonContainer = document.createElement('div'); - successRibbonContainer.className = 'successRibbon'; + const successRibbonContainer = document.createElement("div"); + successRibbonContainer.className = "successRibbon"; const ribbonMessage = document.createTextNode( `The ${processType} was created successfully and will be reviewed shortly` @@ -179,102 +184,119 @@ function createSuccessRibbon() { successRibbonContainer.appendChild(ribbonMessage); - $(successRibbonContainer).insertBefore('.container'); + $(successRibbonContainer).insertBefore(".container"); } /** * Adds tooltips when editing files (First step) */ function createFileEditorToolTips() { - const steps = ['Edit File', 'Confirm Pull Request', 'Pull Request Opened']; + const steps = ["Edit File", "Confirm Pull Request", "Pull Request Opened"]; // progress bar above editor - addProgressBar(1, 3, '.js-blob-form', steps); + addProgressBar(1, 3, ".js-blob-form", steps); // icon to right of file name input const fileNameChangeText = - 'This is the file name, changing it will create a new file with the new name.'; + "This is the file name, changing it will create a new file with the new name."; - const breadCrumbDiv = '.d-md-inline-block'; + const breadCrumbDiv = ".d-md-inline-block"; - const fileNameChangeIcon = new ToolTipIcon('H4', 'helpIcon', fileNameChangeText, breadCrumbDiv); + const fileNameChangeIcon = new ToolTipIcon( + "H4", + "helpIcon", + fileNameChangeText, + breadCrumbDiv + ); fileNameChangeIcon.createIcon(); - $(fileNameChangeIcon.toolTipElement).insertAfter(fileNameChangeIcon.gitHubElement); + $(fileNameChangeIcon.toolTipElement).insertAfter( + fileNameChangeIcon.gitHubElement + ); // banner above commit message input const commitTitleText = - 'This is the title of the pull request. Give a brief description of the change. Be short and objective.'; + "This is the title of the pull request. Give a brief description of the change. Be short and objective."; - const inputTitleLabel = document.createElement('h3'); - inputTitleLabel.innerHTML = 'Insert a title here'; - inputTitleLabel.className = 'label-margin-right'; + const inputTitleLabel = document.createElement("h3"); + inputTitleLabel.innerHTML = "Insert a title here"; + inputTitleLabel.className = "label-margin-right"; - $(inputTitleLabel).insertBefore('#commit-summary-input'); + $(inputTitleLabel).insertBefore("#commit-summary-input"); const commitMessageIcon = new ToolTipIcon( - 'H4', - 'helpIcon', + "H4", + "helpIcon", commitTitleText, - '#commit-summary-input' + "#commit-summary-input" ); commitMessageIcon.createIcon(); - $(commitMessageIcon.toolTipElement).insertAfter('#commit-summary-input'); + $(commitMessageIcon.toolTipElement).insertAfter("#commit-summary-input"); const descriptionText = - 'Add a more detailed description of the pull request if needed. Here you can present your arguments and reasoning that lead to change.'; + "Add a more detailed description of the pull request if needed. Here you can present your arguments and reasoning that lead to change."; - const inputDescriptionLabel = document.createElement('h3'); - inputDescriptionLabel.innerHTML = 'Insert a
description here'; - inputDescriptionLabel.className = 'label-margin-right'; + const inputDescriptionLabel = document.createElement("h3"); + inputDescriptionLabel.innerHTML = "Insert a
description here"; + inputDescriptionLabel.className = "label-margin-right"; - $(inputDescriptionLabel).insertBefore('#commit-description-textarea'); + $(inputDescriptionLabel).insertBefore("#commit-description-textarea"); const extendedDescIcon = new ToolTipIcon( - 'H4', - 'helpIcon', + "H4", + "helpIcon", descriptionText, - '#commit-description-textarea' + "#commit-description-textarea" ); extendedDescIcon.createIcon(); - $(extendedDescIcon.toolTipElement).insertAfter(extendedDescIcon.gitHubElement); + $(extendedDescIcon.toolTipElement).insertAfter( + extendedDescIcon.gitHubElement + ); let commitChangesText = - 'By clicking the Commit Changes button the changes will automatically be pushed to the repo'; + "By clicking the Commit Changes button the changes will automatically be pushed to the repo"; - const buttonText = document.getElementsByClassName('btn-primary')[1].innerText; + const buttonText = document.getElementsByClassName("btn-primary")[1] + .innerText; - if (buttonText === 'Propose changes') { + if (buttonText === "Propose changes") { commitChangesText = - 'By clicking the Propose changes button you will start the pull request submission process. You will have the chance to check your changes before finalizing it.'; + "By clicking the Propose changes button you will start the pull request submission process. You will have the chance to check your changes before finalizing it."; } - const submitChangesIcon = new ToolTipIcon('H4', 'helpIcon', commitChangesText, '#submit-file'); + const submitChangesIcon = new ToolTipIcon( + "H4", + "helpIcon", + commitChangesText, + "#submit-file" + ); submitChangesIcon.createIcon(); - submitChangesIcon.toolTipElement.style.marginRight = '20px'; + submitChangesIcon.toolTipElement.style.marginRight = "20px"; - $(submitChangesIcon.toolTipElement).insertBefore(submitChangesIcon.gitHubElement); + $(submitChangesIcon.toolTipElement).insertBefore( + submitChangesIcon.gitHubElement + ); } // On step 1 for pull request, toggle icon text to help inform user let onDirectPull = true; -let iconText = ''; +let iconText = ""; const pullChangesText = - 'By clicking the Propose changes button you will start the pull request submission process. You will have the chance to check your changes before finalizing it.'; + "By clicking the Propose changes button you will start the pull request submission process. You will have the chance to check your changes before finalizing it."; const directCommitText = - 'By clicking the Commit Changes button the changes will be directly pushed to the repo'; + "By clicking the Commit Changes button the changes will be directly pushed to the repo"; $('input[name="commit-choice"]').click(() => { - document.getElementsByClassName('helpIcon')[3].remove(); + document.getElementsByClassName("helpIcon")[3].remove(); if (onDirectPull) { iconText = pullChangesText; @@ -284,32 +306,39 @@ $('input[name="commit-choice"]').click(() => { onDirectPull = true; } - const submitChangesIcon = new ToolTipIcon('H4', 'helpIcon', iconText, '#submit-file'); + const submitChangesIcon = new ToolTipIcon( + "H4", + "helpIcon", + iconText, + "#submit-file" + ); submitChangesIcon.createIcon(); - submitChangesIcon.toolTipElement.style.marginRight = '20px'; + submitChangesIcon.toolTipElement.style.marginRight = "20px"; - $(submitChangesIcon.toolTipElement).insertBefore(submitChangesIcon.gitHubElement); + $(submitChangesIcon.toolTipElement).insertBefore( + submitChangesIcon.gitHubElement + ); }); /** * Adds tooltips when confirming a change to file (Second step) */ function createConfirmPullRequestToolTips() { - const steps = ['Edit File', 'Create Pull Request', 'Pull Request Opened']; + const steps = ["Edit File", "Create Pull Request", "Pull Request Opened"]; - addProgressBar(2, 3, '.repository-content', steps); + addProgressBar(2, 3, ".repository-content", steps); - $('#pull_request_body').attr( - 'placeholder', - 'You can add a more detailed description of the pull request here if needed.' + $("#pull_request_body").attr( + "placeholder", + "You can add a more detailed description of the pull request here if needed." ); - let branchName = ''; + let branchName = ""; let isComparingBranch = false; try { - branchName = document.getElementsByClassName('branch-name')[0].innerText; + branchName = document.getElementsByClassName("branch-name")[0].innerText; } catch (error) { isComparingBranch = true; } @@ -319,92 +348,116 @@ function createConfirmPullRequestToolTips() { if (isComparingBranch) { newHeaderText = - 'Finish the pull request submission below to allow others to accept the changes'; + "Finish the pull request submission below to allow others to accept the changes"; - $('.Subhead-heading').text('Create Pull Request'); + $(".Subhead-heading").text("Create Pull Request"); } - $('.Subhead-description').text(newHeaderText); + $(".Subhead-description").text(newHeaderText); - const pullRequestTitle = document.getElementsByClassName('Subhead-heading')[1]; - pullRequestTitle.innerHTML = 'Create pull request'; + const pullRequestTitle = document.getElementsByClassName( + "Subhead-heading" + )[1]; + pullRequestTitle.innerHTML = "Create pull request"; const branchContainerText = - 'This represents the origin and destination of your pull request. If you are not sure, leave it how it is, this is common for small changes.'; + "This represents the origin and destination of your pull request. If you are not sure, leave it how it is, this is common for small changes."; - const topRibbon = document.getElementsByClassName('js-range-editor')[0]; - topRibbon.style.width = '93%'; - topRibbon.style.display = 'inline-block'; + const topRibbon = document.getElementsByClassName("js-range-editor")[0]; + topRibbon.style.width = "93%"; + topRibbon.style.display = "inline-block"; // icon next to current branch and new pull request branch name const currentBranchIcon = new ToolTipIcon( - 'H4', - 'helpIcon', + "H4", + "helpIcon", branchContainerText, - '.js-range-editor' + ".js-range-editor" ); currentBranchIcon.createIcon(); - $(currentBranchIcon.toolTipElement).insertAfter(currentBranchIcon.gitHubElement); + $(currentBranchIcon.toolTipElement).insertAfter( + currentBranchIcon.gitHubElement + ); // move button row to left side of editor if (!isComparingBranch) { - const buttonRow = document.getElementsByClassName('d-flex flex-justify-end m-2')[0]; - buttonRow.classList.remove('flex-justify-end'); - buttonRow.classList.add('flex-justify-start'); + const buttonRow = document.getElementsByClassName( + "d-flex flex-justify-end m-2" + )[0]; + buttonRow.classList.remove("flex-justify-end"); + buttonRow.classList.add("flex-justify-start"); } const confirmPullRequestText = - 'By clicking this button you will create the pull request to allow others to view your changes and accept them into the repository.'; + "By clicking this button you will create the pull request to allow others to view your changes and accept them into the repository."; - const submitButtonClass = '.js-pull-request-button'; + const submitButtonClass = ".js-pull-request-button"; // icon next to create pull request button const createPullRequestBtn = new ToolTipIcon( - 'H4', - 'helpIcon', + "H4", + "helpIcon", confirmPullRequestText, submitButtonClass ); createPullRequestBtn.createIcon(); - $(createPullRequestBtn.toolTipElement).insertAfter(createPullRequestBtn.gitHubElement); + $(createPullRequestBtn.toolTipElement).insertAfter( + createPullRequestBtn.gitHubElement + ); const summaryText = - 'This shows the amount of commits in the pull request, the amount of files you changed in the pull request, how many comments were on the commits for the pull request and the ammount of people who worked together on this pull request.'; + "This shows the amount of commits in the pull request, the amount of files you changed in the pull request, how many comments were on the commits for the pull request and the ammount of people who worked together on this pull request."; - const summaryClass = '.overall-summary'; + const summaryClass = ".overall-summary"; // override the container width and display to add icon - const numbersSummaryContainer = document.getElementsByClassName('files-bucket')[0]; - numbersSummaryContainer.style.width = '93%'; - numbersSummaryContainer.style.display = 'inline-block'; + const numbersSummaryContainer = document.getElementsByClassName( + "files-bucket" + )[0]; + numbersSummaryContainer.style.width = "93%"; + numbersSummaryContainer.style.display = "inline-block"; // icon above summary of changes and commits - const requestSummaryIcon = new ToolTipIcon('H4', 'helpIcon', summaryText, summaryClass); + const requestSummaryIcon = new ToolTipIcon( + "H4", + "helpIcon", + summaryText, + summaryClass + ); requestSummaryIcon.createIcon(); - requestSummaryIcon.toolTipElement.style = 'float:right;'; + requestSummaryIcon.toolTipElement.style = "float:right;"; - $(requestSummaryIcon.toolTipElement).insertAfter(requestSummaryIcon.gitHubElement); + $(requestSummaryIcon.toolTipElement).insertAfter( + requestSummaryIcon.gitHubElement + ); - const comparisonClass = '.details-collapse'; + const comparisonClass = ".details-collapse"; const changesText = - 'This shows the changes between the orginal file and your version. Green(+) represents lines added. Red(-) represents removed lines'; + "This shows the changes between the orginal file and your version. Green(+) represents lines added. Red(-) represents removed lines"; // icon above container for changes in current pull request - const comparisonIcon = new ToolTipIcon('H4', 'helpIcon', changesText, comparisonClass); + const comparisonIcon = new ToolTipIcon( + "H4", + "helpIcon", + changesText, + comparisonClass + ); comparisonIcon.createIcon(); - const commitSummaryContainer = document.getElementsByClassName('details-collapse')[0]; + const commitSummaryContainer = document.getElementsByClassName( + "details-collapse" + )[0]; - commitSummaryContainer.style.width = '93%'; - commitSummaryContainer.style.display = 'inline-block'; + commitSummaryContainer.style.width = "93%"; + commitSummaryContainer.style.display = "inline-block"; $(comparisonIcon.toolTipElement).insertAfter(comparisonIcon.gitHubElement); @@ -417,14 +470,14 @@ function createConfirmPullRequestToolTips() { function changeMergeText() { let canMerge = false; try { - document.getElementsByClassName('text-red')[0].innerText; + document.getElementsByClassName("text-red")[0].innerText; } catch (error) { // if the 'text-red' element does not exist, then the pull request can be merged automatically canMerge = true; } if (!canMerge) { - $('.pre-mergability').html( + $(".pre-mergability").html( "There is a merge conflict, but this can be fixed by creating the pull request.Don't worry, the owner of the repository will fix this for you." ); } @@ -433,50 +486,61 @@ function changeMergeText() { * Adds tooltips when reviewing a pull request (Final step) */ function createReviewPullRequestToolTips() { - const steps = ['Edit File', 'Confirm Pull Request', 'Pull Request Opened']; + const steps = ["Edit File", "Confirm Pull Request", "Pull Request Opened"]; - addProgressBar(3, 3, '.gh-header-show', steps); + addProgressBar(3, 3, ".gh-header-show", steps); - const pullRequestName = document.getElementsByClassName('js-issue-title')[0].innerText; + const pullRequestName = document.getElementsByClassName("js-issue-title")[0] + .innerText; const branchContainerText = - 'This indicates that the pull request is open meaning someone will get to it soon.'; + "This indicates that the pull request is open meaning someone will get to it soon."; const pullRequestStatusIcon = new ToolTipIcon( - 'H4', - 'helpIcon', + "H4", + "helpIcon", branchContainerText, - '.gh-header-meta:nth-child(1)' + ".gh-header-meta:nth-child(1)" ); pullRequestStatusIcon.createIcon(); - $(pullRequestStatusIcon.toolTipElement).insertBefore(pullRequestStatusIcon.gitHubElement); + $(pullRequestStatusIcon.toolTipElement).insertBefore( + pullRequestStatusIcon.gitHubElement + ); const requestButtonsText = - 'This will close the pull request meaning people cannot view this! Do not click close unless the request was solved.'; + "This will close the pull request meaning people cannot view this! Do not click close unless the request was solved."; - const requestButtonsClass = '.js-comment-and-button'; + const requestButtonsClass = ".js-comment-and-button"; const closePullRequestIcon = new ToolTipIcon( - 'H4', - 'helpIcon', + "H4", + "helpIcon", requestButtonsText, requestButtonsClass ); closePullRequestIcon.createIcon(); - $(closePullRequestIcon.toolTipElement).insertBefore(closePullRequestIcon.gitHubElement); + $(closePullRequestIcon.toolTipElement).insertBefore( + closePullRequestIcon.gitHubElement + ); - closePullRequestIcon.toolTipElement.style.marginRight = '20px'; + closePullRequestIcon.toolTipElement.style.marginRight = "20px"; - const submitButtons = document.getElementsByClassName('d-flex flex-justify-end')[0]; - submitButtons.classList.remove('flex-justify-end'); - submitButtons.classList.add('flex-justify-start'); + const submitButtons = document.getElementsByClassName( + "d-flex flex-justify-end" + )[0]; + submitButtons.classList.remove("flex-justify-end"); + submitButtons.classList.add("flex-justify-start"); - $('.js-quick-submit-alternative').click((event) => { - if (!confirm(`Are you sure that you want to close the pull request: ${pullRequestName}?`)) { + $(".js-quick-submit-alternative").click((event) => { + if ( + !confirm( + `Are you sure that you want to close the pull request: ${pullRequestName}?` + ) + ) { event.preventDefault(); } }); @@ -486,59 +550,78 @@ function createReviewPullRequestToolTips() { * Edits tooltips when viewing a repository that you are not a contributor of */ function createForkedFileToolTips() { - $('.tooltipped-nw:nth-child(2)').attr('aria-label', 'Edit File'); + $(".tooltipped-nw:nth-child(2)").attr("aria-label", "Edit File"); } /** * Adds tooltips to page when opening a new issue report (First step) */ function createReportIssueToolTips() { - const steps = ['Report Issue', 'Issue Submitted']; + const steps = ["Report Issue", "Issue Submitted"]; // progress bar above editor - addProgressBar(1, 2, '.new_issue', steps); + addProgressBar(1, 2, ".new_issue", steps); const submitButtonText = - 'By clicking this, it will submit the issue to the owner of the repository'; + "By clicking this, it will submit the issue to the owner of the repository"; - const submitButtonClass = '.flex-justify-end button:eq(0)'; + const submitButtonClass = ".flex-justify-end button:eq(0)"; - const submitButtonIcon = new ToolTipIcon('H4', 'helpIcon', submitButtonText, submitButtonClass); + const submitButtonIcon = new ToolTipIcon( + "H4", + "helpIcon", + submitButtonText, + submitButtonClass + ); submitButtonIcon.createIcon(); - $(submitButtonIcon.toolTipElement).insertAfter(submitButtonIcon.gitHubElement); + $(submitButtonIcon.toolTipElement).insertAfter( + submitButtonIcon.gitHubElement + ); } /** * Adds tooltips to page when reviewing a new issue report (Final step) */ function createReviewIssueToolTips() { - const issueTitle = document.getElementsByClassName('js-issue-title')[0].innerText; + const issueTitle = document.getElementsByClassName("js-issue-title")[0] + .innerText; - const steps = ['Report Issue', 'Issue Submitted']; + const steps = ["Report Issue", "Issue Submitted"]; - addProgressBar(2, 2, '.repository-content', steps); + addProgressBar(2, 2, ".repository-content", steps); - const buttonRow = document.getElementsByClassName('d-flex flex-justify-end')[0]; - buttonRow.classList.remove('flex-justify-end'); - buttonRow.classList.add('flex-justify-start'); + const buttonRow = document.getElementsByClassName( + "d-flex flex-justify-end" + )[0]; + buttonRow.classList.remove("flex-justify-end"); + buttonRow.classList.add("flex-justify-start"); const closeIssueIconText = - 'This will close the issue request meaning people cannot view this! Do not click close unless the request was solved. '; + "This will close the issue request meaning people cannot view this! Do not click close unless the request was solved. "; - const closeButtonClass = '.flex-justify-end button:eq(0)'; + const closeButtonClass = ".flex-justify-end button:eq(0)"; - const submitButtonIcon = new ToolTipIcon('H4', 'helpIcon', closeIssueIconText, closeButtonClass); + const submitButtonIcon = new ToolTipIcon( + "H4", + "helpIcon", + closeIssueIconText, + closeButtonClass + ); submitButtonIcon.createIcon(); - submitButtonIcon.toolTipElement.style.marginRight = '20px'; + submitButtonIcon.toolTipElement.style.marginRight = "20px"; - $(submitButtonIcon.toolTipElement).insertBefore(submitButtonIcon.gitHubElement); + $(submitButtonIcon.toolTipElement).insertBefore( + submitButtonIcon.gitHubElement + ); - $('.js-quick-submit-alternative').click(function (event) { - if (!confirm(`Are you sure that you want to close the issue: ${issueTitle}?`)) { + $(".js-quick-submit-alternative").click(function (event) { + if ( + !confirm(`Are you sure that you want to close the issue: ${issueTitle}?`) + ) { event.preventDefault(); } }); @@ -548,17 +631,12 @@ function createReviewIssueToolTips() { * Updates contribution graph to show icon to toggle between graphs */ function updateProfileCard() { - const profileCardIconText = 'Click this tooltip to show more info about the user'; - const contributionGraphClass = '.js-calendar-graph'; - - const showGraphIcon = new ToolTipIcon( - 'H4', - 'helpIcon graph-tooltip', - profileCardIconText, - contributionGraphClass - ); + const toggleButton = document.createElement("button"); + toggleButton.className = "btn mb-3 toggleBtn"; + toggleButton.innerText = "Click to show more information"; - const username = document.getElementsByClassName('vcard-username')[0].innerHTML; + const username = document.getElementsByClassName("vcard-username")[0] + .innerHTML; createCardContainer(); @@ -566,23 +644,19 @@ function updateProfileCard() { getApis(username); - showGraphIcon.createIcon(); - - $(showGraphIcon.toolTipElement).insertBefore(showGraphIcon.gitHubElement); + $(toggleButton).insertAfter(".contrib-footer "); - $('.helpIcon').click(() => { - if ($('.helpIconCircle').text() === '?') { - $('.helpIconCircle').text('X'); - $('.helpIconCircle').addClass('closeButton'); - $('.helpIconText').addClass('removeText'); + $(".toggleBtn").click(() => { + if ($(".toggleBtn").text() === "Click to show more information") { + $(".toggleBtn").text("X"); + $(".toggleBtn").addClass("closeButton"); } else { - $('.helpIconCircle').text('?'); - $('.helpIconCircle').removeClass('closeButton'); - $('.helpIconText').removeClass('removeText'); + $(".toggleBtn").text("Click to show more information"); + $(".toggleBtn").removeClass("closeButton"); } - $('.back').toggleClass('hovered'); - $('#js-contribution-activity').toggleClass('hidden'); - $('#user-activity-overview').toggleClass('hidden'); + $(".back").toggleClass("hovered"); + $("#js-contribution-activity").toggleClass("hidden"); + $("#user-activity-overview").toggleClass("hidden"); }); } @@ -590,12 +664,14 @@ function updateProfileCard() { * Creates structure of profile overview with graphs */ function createCardContainer() { - const outerContainer = document.getElementsByClassName('graph-before-activity-overview')[0]; + const outerContainer = document.getElementsByClassName( + "graph-before-activity-overview" + )[0]; - outerContainer.className += ' card-container'; + outerContainer.className += " card-container"; - const cardBack = document.createElement('div'); - cardBack.className = 'back'; + const cardBack = document.createElement("div"); + cardBack.className = "back"; cardBack.innerHTML = `

View all information here

@@ -610,13 +686,14 @@ function createCardContainer() { $(document).ready(() => { $(document).click((event) => { - if (event.target.className === 'complete-list-link') { - const username = document.getElementsByClassName('vcard-username')[0].innerHTML; + if (event.target.className === "complete-list-link") { + const username = document.getElementsByClassName("vcard-username")[0] + .innerHTML; chrome.storage.sync.set({ username: username }); chrome.runtime.sendMessage({ - type: 'OPEN_COMPLETE_OVERVIEW', + type: "OPEN_COMPLETE_OVERVIEW", }); } }); @@ -628,15 +705,15 @@ $(document).ready(() => { * Uses GitHub API to view commit totals for user */ async function getCommits(repositories, username) { - const oAuthToken = ''; + const oAuthToken = ""; const headers = { Authorization: `Token ${oAuthToken}`, }; const repoObject = {}; - const ctx = document.getElementById('repositories'); - const skillGraphContainer = document.getElementById('skillGraph'); + const ctx = document.getElementById("repositories"); + const skillGraphContainer = document.getElementById("skillGraph"); let total = 0; for (const repo of repositories) { @@ -644,7 +721,7 @@ async function getCommits(repositories, username) { const commitUrl = `https://api.github.com/repos/${username}/${repo}/commits?page=1&per_page=25`; const commitResponse = await fetch(commitUrl, { - method: 'GET', + method: "GET", headers: headers, }); @@ -665,12 +742,12 @@ async function getCommits(repositories, username) { sortArrayInDescendingOrder(data); commitGraph = new Chart(skillGraphContainer, { - type: 'bar', + type: "bar", data: { labels: labels, datasets: [ { - label: 'Commits', + label: "Commits", backgroundColor: colors, data: data, }, @@ -699,7 +776,7 @@ async function getCommits(repositories, username) { fontSize: 8, callback: function (value) { if (value.length > 4) { - return value.substr(0, 4) + '...'; //truncate + return value.substr(0, 4) + "..."; //truncate } else { return value; } @@ -719,8 +796,8 @@ async function getCommits(repositories, username) { Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily ); - ctx.textAlign = 'center'; - ctx.textBaseline = 'bottom'; + ctx.textAlign = "center"; + ctx.textBaseline = "bottom"; this.data.datasets.forEach(function (dataset, i) { var meta = chartInstance.controller.getDatasetMeta(i); @@ -743,11 +820,11 @@ async function getCommits(repositories, username) { * Uses GitHub API to view programming languages for user */ async function getRepos(username) { - const oAuthToken = ''; + const oAuthToken = ""; const url = `https://api.github.com/users/${username}/repos`; const response = await fetch(url, { - method: 'GET', + method: "GET", headers: { Authorization: `Token ${oAuthToken}`, }, @@ -772,7 +849,7 @@ async function getRepos(username) { getCommits(repositoryNames, username); - const repoGraphContainer = document.getElementById('myChart'); + const repoGraphContainer = document.getElementById("myChart"); const repositoriesObject = {}; @@ -794,12 +871,12 @@ async function getRepos(username) { sortArrayInDescendingOrder(dataSet); repositoryGraph = new Chart(repoGraphContainer, { - type: 'bar', + type: "bar", data: { labels: labels, datasets: [ { - label: 'Repositories', + label: "Repositories", backgroundColor: colors, data: dataSet, }, @@ -833,8 +910,8 @@ async function getRepos(username) { Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily ); - ctx.textAlign = 'center'; - ctx.textBaseline = 'bottom'; + ctx.textAlign = "center"; + ctx.textBaseline = "bottom"; this.data.datasets.forEach(function (dataset, i) { var meta = chartInstance.controller.getDatasetMeta(i); @@ -857,7 +934,7 @@ async function getRepos(username) { * Creates graph of contribitions with API's */ function getApis(username) { - const url = chrome.runtime.getURL('result.json'); + const url = chrome.runtime.getURL("result.json"); fetch(url) .then((response) => response.json()) @@ -870,7 +947,7 @@ function getApis(username) { * creates graph on user profile card about langauges and apis */ function createApiGraph(userData, username) { - const apiGraphContainer = document.getElementById('commitsGraph'); + const apiGraphContainer = document.getElementById("commitsGraph"); const apis = []; const apiTotals = []; @@ -898,12 +975,12 @@ function createApiGraph(userData, username) { sortArrayInDescendingOrder(apiTotals); apiGraph = new Chart(apiGraphContainer, { - type: 'bar', + type: "bar", data: { labels: apis, datasets: [ { - label: 'Total Commits: ', + label: "Total Commits: ", data: apiTotals, backgroundColor: colors, }, @@ -931,7 +1008,7 @@ function createApiGraph(userData, username) { fontSize: 8, callback: function (value) { if (value.length > 4) { - return value.substr(0, 4) + '...'; + return value.substr(0, 4) + "..."; } else { return value; } @@ -951,8 +1028,8 @@ function createApiGraph(userData, username) { Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily ); - ctx.textAlign = 'center'; - ctx.textBaseline = 'bottom'; + ctx.textAlign = "center"; + ctx.textBaseline = "bottom"; this.data.datasets.forEach(function (dataset, i) { var meta = chartInstance.controller.getDatasetMeta(i); @@ -973,13 +1050,16 @@ function createApiGraph(userData, username) { * Listen to changes from background */ chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => { - if (msg.message === 'progress_bar') { - $('.progressbar').toggleClass('hiddenDisplay'); - } else if (msg.message === 'icon') { - $('.helpIcon').toggleClass('hiddenDisplay'); - } else if (msg.message === 'ribbon') { - $('.successRibbon').toggleClass('hiddenDisplay'); - } else if (msg.type === 'CHECK_URL') { - checkUrl(document.location.pathname); + if (msg.message === "progress_bar") { + $(".progressbar").toggleClass("hiddenDisplay"); + } else if (msg.message === "icon") { + $(".helpIcon").toggleClass("hiddenDisplay"); + } else if (msg.message === "ribbon") { + $(".successRibbon").toggleClass("hiddenDisplay"); + } else if (msg.type === "CHECK_URL") { + if (!injected) { + injected = true; + checkUrl(document.location.pathname); + } } }); diff --git a/manifest.json b/manifest.json index 99cc0df..f282bc1 100644 --- a/manifest.json +++ b/manifest.json @@ -3,7 +3,13 @@ "version": "1", "manifest_version": 2, "description": "Helps newcomers navigate GitHub and successfully contribute to open source projects.", - "permissions": ["tabs", "activeTab", "webNavigation", "", "storage"], + "permissions": [ + "tabs", + "activeTab", + "webNavigation", + "", + "storage" + ], "browser_action": { "name": "GitHub Plugin Development", "icons": ["icon.png"], @@ -28,5 +34,6 @@ "persistant": true, "scripts": ["background.js"] }, - "web_accessible_resources": ["*.json", "jquery.min.js"] + "web_accessible_resources": ["*.json", "jquery.min.js"], + "content_security_policy": "script-src 'self' https://code.jquery.com/jquery-3.5.1.min.js; object-src 'self'" } diff --git a/overview.html b/overview.html index ea51d28..4435479 100644 --- a/overview.html +++ b/overview.html @@ -5,8 +5,8 @@ @@ -208,7 +234,7 @@

- + diff --git a/overview.js b/overview.js index c129014..8233a6e 100644 --- a/overview.js +++ b/overview.js @@ -1,54 +1,70 @@ -chrome.tabs.executeScript({ file: 'jquery.min.js' }); +const modal = document.getElementById("myModal"); -let username = ''; +const closeButton = document.getElementsByClassName("close")[0]; -chrome.storage.sync.get('username', (result) => { - username = result.username; - document.getElementById('username').innerHTML = `${result.username}'s Repositories`; - getRepos(result.username); -}); - -const modal = document.getElementById('myModal'); - -const closeButton = document.getElementsByClassName('close')[0]; - -const oAuthToken = ''; +const oAuthToken = ""; const headers = { Authorization: `Token ${oAuthToken}`, }; -const buttons = document.getElementsByClassName('card-button'); +const buttons = document.getElementsByClassName("card-button"); + +let username = ""; + +chrome.storage.sync.get("username", (result) => { + username = result.username; + document.getElementById("username").innerHTML = `${username}'s Repositories`; + getRepos(username); +}); class Card { - constructor(repositoryName, repositoryLink, commitTotal, topLanguage, cardContainer) { + constructor( + repositoryName, + repositoryLink, + commitTotal, + topLanguage, + languageColor, + cardContainer + ) { this.repositoryName = repositoryName; this.repositoryLink = repositoryLink; this.commitTotal = commitTotal; this.topLanguage = topLanguage; + this.languageColor = languageColor; this.cardContainer = cardContainer; } createCard() { if (this.repositoryName.length > 20) { - this.repositoryName = this.repositoryName.substr(0, 20) + '...'; + this.repositoryName = this.repositoryName.substr(0, 20) + "..."; } - const cardContainer = document.createElement('div'); - cardContainer.className = 'card'; + const cardContainer = document.createElement("div"); + cardContainer.className = "card"; cardContainer.innerHTML = `
- ${this.repositoryName} + ${username}/${this.repositoryName}
-
Commits: ${this.commitTotal}
-
Top Language: ${this.topLanguage}
+
+ + Commits: ${this.commitTotal}
`; + if (this.topLanguage !== null) { + cardContainer.innerHTML += ` +
+ +
${this.topLanguage}
+
`; + } + + cardContainer.innerHTML += `
- View Commit Messages + View Commit Messages/Issues
`; @@ -57,78 +73,91 @@ class Card { } document.body.onclick = (ev) => { - if (ev.target.getAttribute('class') === 'label') { - chrome.storage.sync.get('username', (result) => { + if (ev.target.getAttribute("class") === "label") { + chrome.storage.sync.get("username", (result) => { getAllCommitMessages(ev.srcElement.id, result.username, 1); }); } }; closeButton.onclick = () => { - modal.style.display = 'none'; - document.querySelectorAll('.message-title').forEach((element) => element.remove()); - document.getElementById('list-title').innerHTML = ''; + modal.style.display = "none"; + document + .querySelectorAll(".message-title") + .forEach((element) => element.remove()); + document.getElementById("list-title").innerHTML = ""; }; /** + * Function name: createCompleteOverview * @param {JSON} userData - JSON result of all repositories for the user * @param {string} username - GitHub username * Creates cards containing total commits and top langauge */ -async function createCompleteOverview(userData, username) { +async function createCompleteOverview(userData) { let isNewPage = false; - let rowElements = ''; + let rowElements = ""; try { - rowElements = document.getElementsByClassName('row')[0].childElementCount; + rowElements = document.getElementsByClassName("row")[0].childElementCount; } catch (error) { isNewPage = true; } - let newRow = ''; + let newRow = ""; if (rowElements === 4 || isNewPage) { - newRow = document.createElement('div'); - newRow.className = 'row'; - $(newRow).insertAfter('.row:last'); + newRow = document.createElement("div"); + newRow.className = "row"; + $(newRow).insertAfter(".row:last"); } for (repo of userData) { const totalCommits = await getAllCommits(repo.name, username, 1); - let repositoryCard = new Card(repo.name, repo.html_url, totalCommits, repo.language); + let langaugeColor = await getLanguageColor(repo.language); + + let repositoryCard = new Card( + repo.name, + repo.html_url, + totalCommits, + repo.language, + langaugeColor + ); repositoryCard.createCard(); - let totalRows = document.getElementsByClassName('row').length; + let totalRows = document.getElementsByClassName("row").length; let lastRowCardCount = 0; - let newRow = document.createElement('div'); - newRow.className = 'row'; + let newRow = document.createElement("div"); + newRow.className = "row"; if (totalRows !== 0) { - lastRowCardCount = document.getElementsByClassName('row')[totalRows - 1].childElementCount; + lastRowCardCount = document.getElementsByClassName("row")[totalRows - 1] + .childElementCount; } else if (totalRows === 0) { - $(newRow).appendTo('#content'); + $(newRow).appendTo("#content"); } // if the row is full if (lastRowCardCount === 4) { - $(newRow).insertAfter('.row:last'); + $(newRow).insertAfter(".row:last"); } - $('.row:last').append(repositoryCard.cardContainer); + $(".row:last").append(repositoryCard.cardContainer); } } /** + * Function name: getRepos * @param {string} username - GitHub username * Uses GitHub API to view programming languages for user */ async function getRepos(username) { const url = `https://api.github.com/users/${username}/repos`; const response = await fetch(url, { - method: 'GET', + method: "GET", headers: { Authorization: `Token ${oAuthToken}`, }, @@ -150,7 +179,7 @@ async function getAllCommits(repositoryName, username, page) { const commitUrl = `https://api.github.com/repos/${username}/${repositoryName}/commits?page=${page}&per_page=100`; const commitResponse = await fetch(commitUrl, { - method: 'GET', + method: "GET", headers: headers, }); @@ -175,7 +204,7 @@ async function getAllLanguages(repository, username) { const languageUrl = `https://api.github.com/repos/${username}/${repository}/languages`; const result = await fetch(languageUrl, { - method: 'GET', + method: "GET", headers: headers, }); @@ -194,33 +223,63 @@ async function getAllCommitMessages(repository, username, page) { const commitsUrl = `https://api.github.com/repos/${username}/${repository}/commits?page=${page}&per_page=100`; const result = await fetch(commitsUrl, { - method: 'GET', + method: "GET", headers: headers, }); const commits = await result.json(); - document.getElementById('list-title').innerHTML = `Commit Message Titles For: ${repository}`; + document.getElementById( + "list-title" + ).innerHTML = `Commit Message Titles For: ${repository}`; if (commits.length !== 0) { commits.forEach((commit) => { - console.log(commit); - if (commit.author.login === username && commit.author.login !== undefined) { - const innerContainer = document.getElementsByClassName('modal-content')[0]; - - const messageContainer = document.createElement('p'); - messageContainer.className = 'message-title'; - messageContainer.appendChild( - document.createTextNode( - commit.commit.message + ' created at: ' + commit.commit.author.date - ) - ); - innerContainer.appendChild(messageContainer); + if (commit.author !== null && commit.author.login === username) { + updateModal(commit.commit.message, commit.commit.author.date); } }); - modal.style.display = 'block'; + modal.style.display = "block"; + if (commits.length % 100 === 0) { + getAllCommitMessages(repository, username, page + 1); + } + } + + if (document.getElementsByClassName("message-title").length === 0) { + updateModal(`There were no commits by ${username} in this repository.`, ""); + } +} - getAllCommitMessages(repository, username, page + 1); +function updateModal(message, createdDate) { + const innerContainer = document.getElementsByClassName("modal-content")[0]; + + const messageContainer = document.createElement("p"); + messageContainer.className = "message-title"; + if (createdDate === "") { + messageContainer.appendChild(document.createTextNode(message)); + } else { + messageContainer.appendChild( + document.createTextNode(message + " created at: " + createdDate) + ); + } + innerContainer.appendChild(messageContainer); +} +/** + * Function name: getLanguageColor + * @param {string} language - top language in repo + * Returns color value associated with language in GitHub + */ +async function getLanguageColor(language) { + if (language === null) { + return "#000"; } + + const url = chrome.runtime.getURL("colors.json"); + + const response = await fetch(url); + + let colors = await response.json(); + + return colors[language].color; } diff --git a/styles.css b/styles.css index 0231817..795558d 100644 --- a/styles.css +++ b/styles.css @@ -41,7 +41,7 @@ .progressbar li:after { width: 100%; height: 2px; - content: ''; + content: ""; position: absolute; background-color: #b8b8b8; top: 15px; @@ -58,24 +58,26 @@ } .progressbar li.partial { - color: #c4c400; - font-weight: bold; + color: #000; font-size: 16px; + text-transform: capitalize; } .progressbar li.partial:before { border-color: #ffeeba; + background-color: #ffeeba; } .progressbar li.completed:before { - content: '\2713' !important; + content: "\2713" !important; background-color: #d4edda !important; border-color: #55b776; } .progressbar li.completed { font-size: 12px !important; - color: green; + color: #000; + text-transform: capitalize; } .progressbar li.completed + li:after { @@ -96,6 +98,9 @@ z-index: -1; } +.toggleBtn { + z-index: 999; +} /** Icon tooltip styles **/ .helpIcon { position: relative; @@ -130,7 +135,7 @@ } .helpIconText:before { - content: ''; + content: ""; display: block; width: 0; height: 0; @@ -151,6 +156,20 @@ color: white; } +.closeButton { + background: none !important; + color: black; +} + +.closeButton:hover { + border: 1px solid black; +} + +.label-margin-right { + display: inline-block; + margin-right: 20px; +} + /** Success Message Styles **/ .successRibbon { width: 100%; @@ -170,7 +189,7 @@ border-radius: 4px; box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.25); - font-family: BlinkMacSystemFont, 'Segoe UI', sans-serif; + font-family: BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 2rem; color: #fff; text-transform: uppercase; @@ -213,6 +232,21 @@ perspective: 75rem; } +.link-row { + color: #000; + display: block; + text-transform: capitalize; +} + +.complete-list-link { + color: blue; + text-decoration: underline; +} + +.complete-list-link:hover { + cursor: pointer; +} + .graph { width: 50% !important; height: 50% !important; @@ -223,6 +257,64 @@ cursor: pointer; } +#myChart, +#commitsGraph { + float: left; + border-right: 1px solid #000; +} + +#skillGraph, +#myChart { + border-bottom: 1px solid #000; +} + +#skillGraph, +#languagesGraph { + float: right; +} + .hiddenDisplay { - display: none; + display: none !important; +} + +.UnderlineNav { + justify-content: center !important; +} + +.accordion { + background-color: #eee; + color: #444; + cursor: pointer; + padding: 18px; + width: 100%; + border: none; + text-align: left; + outline: none; + font-size: 15px; + transition: 0.4s; +} + +.accordian-active, +.accordion:hover { + background-color: #ccc; +} + +.accordion:after { + content: "Click to show all files \002B"; + color: #777; + font-weight: bold; + margin-left: 15px; + display: flex; +} + +.active:after { + content: "Click to collapse \2212"; +} + +.panel { + padding: 0 18px; + background-color: white; + max-height: 0; + overflow: hidden; + transition: max-height 0.2s ease-out; } From 13ca67a764163ea2c46df9a8c801af03bd0b2c0b Mon Sep 17 00:00:00 2001 From: ZacharySpiel Date: Mon, 24 Aug 2020 23:21:49 -0700 Subject: [PATCH 06/26] Update in progress to match GitHub UI in overview page. Added issue tracking to modal pop up --- .eslintrc.js | 17 + .eslintrc.json | 14 + .prettierrc | 4 + Repository.js | 78 +-- content.js | 573 +++++++---------- index.html | 159 ++--- manifest.json | 10 +- overview.html | 1563 ++++++++++++++++++++++++++++++++++++++------- overview.js | 273 +++++--- overview_page.css | 675 ++++++++++++++++++++ 10 files changed, 2599 insertions(+), 767 deletions(-) create mode 100644 .eslintrc.js create mode 100644 .eslintrc.json create mode 100644 .prettierrc create mode 100644 overview_page.css diff --git a/.eslintrc.js b/.eslintrc.js new file mode 100644 index 0000000..c1019a0 --- /dev/null +++ b/.eslintrc.js @@ -0,0 +1,17 @@ +module.exports = { + env: { + browser: true, + es2020: true, + webextensions: true, + jquery: true, + }, + extends: ['airbnb-base', 'prettier'], + plugins: ['prettier'], + parserOptions: { + ecmaVersion: 11, + sourceType: 'module', + }, + rules: { + 'no-use-before-define': ['error', { functions: false, classes: false }], + }, +}; diff --git a/.eslintrc.json b/.eslintrc.json new file mode 100644 index 0000000..0ff20b5 --- /dev/null +++ b/.eslintrc.json @@ -0,0 +1,14 @@ +{ + "extends": ["airbnb", "prettier"], + "plugins": ["prettier"], + "rules": { + "prettier/prettier": ["error"] + }, + "no-use-before-define": ["error", { "functions": false, "classes": false }], + "env": { + "browser": true, + "commonjs": true, + "es6": true, + "jquery": true + } +} diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..5ac85e2 --- /dev/null +++ b/.prettierrc @@ -0,0 +1,4 @@ +{ + "printWidth": 100, + "singleQuote": true +} diff --git a/Repository.js b/Repository.js index ccf6af3..a1c1b1b 100644 --- a/Repository.js +++ b/Repository.js @@ -1,10 +1,10 @@ updateRepoLayout(); function updateRepoLayout() { - let navBarLinks = ""; + let navBarLinks = ''; try { - navBarLinks = $(".UnderlineNav-body").find("li").length; + navBarLinks = $('.UnderlineNav-body').find('li').length; } catch (error) { return false; } @@ -14,11 +14,11 @@ function updateRepoLayout() { return true; } -$("#homePage").click(() => { +$('#homePage').click(() => { createHomePage(); }); -$("#codeLink").click((event) => { +$('#codeLink').click((event) => { event.preventDefault(); createAccordionLayout(); }); @@ -29,29 +29,29 @@ $("#codeLink").click((event) => { function createHomePage() { createHomePageLink(); // add id to code link for easier access in DOM - $(".selected:eq(0)").attr("id", "codeLink"); - $(".selected:eq(0)").removeClass("selected"); + $('.selected:eq(0)').attr('id', 'codeLink'); + $('.selected:eq(0)').removeClass('selected'); // toggle display for files in repo - $(".Box:eq(3)").addClass("hiddenDisplay"); - $(".file-navigation:eq(0)").addClass("hiddenDisplay"); + $('.Box:eq(3)').addClass('hiddenDisplay'); + $('.file-navigation:eq(0)').addClass('hiddenDisplay'); - $(".Details-content--hidden-not-important:eq(1)").removeClass("d-md-block"); - $(".file-navigation:eq(0)").removeClass("d-flex"); + $('.Details-content--hidden-not-important:eq(1)').removeClass('d-md-block'); + $('.file-navigation:eq(0)').removeClass('d-flex'); - $("#codeLink").removeClass("selected"); + $('#codeLink').removeClass('selected'); - const codeLink = $("#codeLink"); - if (codeLink.attr("aria-current")) { - codeLink.removeAttr("aria-current"); + const codeLink = $('#codeLink'); + if (codeLink.attr('aria-current')) { + codeLink.removeAttr('aria-current'); } else { - codeLink.attr("aria-current", "page"); + codeLink.attr('aria-current', 'page'); } - $("#homePage").addClass("selected"); + $('#homePage').addClass('selected'); - if ($("#readme").hasClass("hiddenDisplay")) { - $("#readme").removeClass("hiddenDisplay"); + if ($('#readme').hasClass('hiddenDisplay')) { + $('#readme').removeClass('hiddenDisplay'); } } @@ -60,42 +60,42 @@ function createHomePage() { */ function createAccordionLayout() { try { - $(".Box-header:eq(2)").addClass("accordion"); - $(".js-details-container:eq(2)").addClass("panel"); + $('.Box-header:eq(2)').addClass('accordion'); + $('.js-details-container:eq(2)').addClass('panel'); } catch (error) { // silently abort } - $(".Box:eq(3)").removeClass("hiddenDisplay"); - $(".file-navigation:eq(0)").removeClass("hiddenDisplay"); + $('.Box:eq(3)').removeClass('hiddenDisplay'); + $('.file-navigation:eq(0)').removeClass('hiddenDisplay'); - $(".Details-content--hidden-not-important:eq(1)").addClass("d-md-block"); - $(".file-navigation:eq(0)").addClass("d-flex"); + $('.Details-content--hidden-not-important:eq(1)').addClass('d-md-block'); + $('.file-navigation:eq(0)').addClass('d-flex'); - $(".selected:eq(0)").removeClass("selected"); + $('.selected:eq(0)').removeClass('selected'); - $("#codeLink").addClass("selected"); - $("#readme").addClass("hiddenDisplay"); + $('#codeLink').addClass('selected'); + $('#readme').addClass('hiddenDisplay'); - const accordion = document.getElementsByClassName("accordion")[0]; - accordion.addEventListener("click", updateAccordion); + const accordion = document.getElementsByClassName('accordion')[0]; + accordion.addEventListener('click', updateAccordion); } /** * Updates files to collapse and expand */ function updateAccordion() { - $(".accordion").toggleClass("active"); - const panel = document.getElementsByClassName("panel")[0]; + $('.accordion').toggleClass('active'); + const panel = document.getElementsByClassName('panel')[0]; if (panel.style.maxHeight) { panel.style.maxHeight = null; } else { - panel.style.maxHeight = panel.scrollHeight + "px"; + panel.style.maxHeight = panel.scrollHeight + 'px'; } // update title of each file within the github repository - $(".js-details-container:eq(2) .link-gray-dark").each((index, element) => { - $(element).attr("title", "To view this file, click here"); + $('.js-details-container:eq(2) .link-gray-dark').each((index, element) => { + $(element).attr('title', 'To view this file, click here'); }); } @@ -104,15 +104,15 @@ function updateAccordion() { */ function createHomePageLink() { // check number of existing links - const navBarLinks = $(".UnderlineNav-body").find("li").length; + const navBarLinks = $('.UnderlineNav-body').find('li').length; if (navBarLinks !== 9 && navBarLinks !== 10) { - const newNavLink = document.createElement("li"); - newNavLink.className = "d-flex"; + const newNavLink = document.createElement('li'); + newNavLink.className = 'd-flex'; newNavLink.innerHTML = `Home`; - $(".UnderlineNav-body").prepend(newNavLink); + $('.UnderlineNav-body').prepend(newNavLink); } else { // home page link was already created } @@ -122,7 +122,7 @@ function createHomePageLink() { * Listen to page changes from the background */ chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => { - if (msg.type === "UPDATE_REPO_LAYOUT") { + if (msg.type === 'UPDATE_REPO_LAYOUT') { createHomePageLink(); } }); diff --git a/content.js b/content.js index 1908327..a9eba0a 100644 --- a/content.js +++ b/content.js @@ -1,5 +1,20 @@ let injected = false; +// Color values for graphs +const colors = [ + '#00498D', + '#01579B', + '#00498D', + '#0277BD', + '#0288D1', + '#039BE5', + '#03A9F4', + '#29B6F6', + '#4FC3F7', + '#81D4FA', + '#B3E5FC', +]; + window.onload = () => { const currentPageUrl = document.location.pathname; @@ -9,21 +24,6 @@ window.onload = () => { } }; -// Color values for graphs -const colors = [ - "#00498D", - "#01579B", - "#00498D", - "#0277BD", - "#0288D1", - "#039BE5", - "#03A9F4", - "#29B6F6", - "#4FC3F7", - "#81D4FA", - "#B3E5FC", -]; - class ToolTipIcon { constructor(toolTipElement, toolTipClass, toolTipText, gitHubElement) { this.toolTipElement = toolTipElement; @@ -33,7 +33,7 @@ class ToolTipIcon { } createIcon() { - const toolTipContainer = document.createElement("div"); + const toolTipContainer = document.createElement('div'); toolTipContainer.className = this.toolTipClass; toolTipContainer.innerHTML = `? @@ -43,16 +43,6 @@ class ToolTipIcon { } } -/** - * Sorts given array in descending order - * @param {int} array - */ -function sortArrayInDescendingOrder(array) { - array.sort((a, b) => { - return b - a; - }); -} - /** * @param {string} currentUrl - pathname of current url * Checks the windows current URL to determine which tooltips to display @@ -61,42 +51,52 @@ function checkUrl(currentUrl) { // check if the user wants to edit a file that they are not an owner of if (checkIsEditingForkedFile()) { createForkedFileToolTips(); - } else if (currentUrl.includes("/edit/")) { + } else if (currentUrl.includes('/edit/')) { createFileEditorToolTips(); - } else if (currentUrl.includes("/compare/")) { + } else if (currentUrl.includes('/compare/')) { createConfirmPullRequestToolTips(); } // if the user is reviewing a pull request - else if (currentUrl.includes("/pull/")) { + else if (currentUrl.includes('/pull/')) { createReviewPullRequestToolTips(); } // if the user is opening a pull request - else if (document.getElementsByClassName("h-card").length !== 0) { + else if (document.getElementsByClassName('h-card').length !== 0) { updateProfileCard(); } // if the user is creating a new issue - else if (currentUrl.includes("/issues/new")) { + else if (currentUrl.includes('/issues/new')) { createReportIssueToolTips(); - } else if (currentUrl.includes("/issues/")) { + } else if (currentUrl.includes('/issues/')) { createReviewIssueToolTips(); } else { // do nothing } } +/** + * Sorts given array in descending order + * @param {int} array + */ +function sortArrayInDescendingOrder(array) { + array.sort((a, b) => { + return b - a; + }); +} + /** * Checks if the user is viewing a file that they do not own */ function checkIsEditingForkedFile() { const pencilIconLabelsList = [ - "Edit the file in your fork of this project", - "Fork this project and edit the file", + 'Edit the file in your fork of this project', + 'Fork this project and edit the file', ]; try { var pencilIconLabel = document - .getElementsByClassName("tooltipped")[2] - .getAttribute("aria-label"); + .getElementsByClassName('tooltipped')[2] + .getAttribute('aria-label'); // check if there is a pencil icon with this aria label return pencilIconLabelsList.includes(pencilIconLabel); } catch (error) { @@ -104,6 +104,13 @@ function checkIsEditingForkedFile() { } } +/** + * Edits tooltips when viewing a repository that you are not a contributor of + */ +function createForkedFileToolTips() { + $('.tooltipped-nw:nth-child(2)').attr('aria-label', 'Edit File'); +} + /** * @param {int} currentStep - current step in process * @param {int} totalSteps - the total amount of steps in process @@ -113,30 +120,30 @@ function checkIsEditingForkedFile() { */ function addProgressBar(currentStep, totalSteps, rootElement, stepsList) { // create the progress bar element - const progressBarContainer = document.createElement("div"); - progressBarContainer.className = "container"; + const progressBarContainer = document.createElement('div'); + progressBarContainer.className = 'container'; - const progressBar = document.createElement("div"); - progressBar.className = "progressbar"; + const progressBar = document.createElement('div'); + progressBar.className = 'progressbar'; - const itemList = document.createElement("ul"); + const itemList = document.createElement('ul'); let index; for (index = 1; index <= stepsList.length; index += 1) { - const listItem = document.createElement("li"); + const listItem = document.createElement('li'); listItem.innerHTML = stepsList[index - 1]; // if all steps have been completed if (currentStep === totalSteps) { - listItem.className = "completed"; + listItem.className = 'completed'; // if the step is in progress } else if (index === currentStep) { - listItem.className = "partial"; + listItem.className = 'partial'; } // if the user has already completed a step else if (index < currentStep) { - listItem.className = "partial completed"; + listItem.className = 'partial completed'; } itemList.appendChild(listItem); } @@ -156,27 +163,27 @@ function addProgressBar(currentStep, totalSteps, rootElement, stepsList) { * Checks if issue or pull request was succesfully created and is open in the repo */ function isProcessCompleted() { - let status = ""; + let status = ''; try { - status = document.getElementsByClassName("State")[0].getAttribute("title"); + status = document.getElementsByClassName('State')[0].getAttribute('title'); } catch (error) { return false; } - return status === "Status: Open"; + return status === 'Status: Open'; } /** * Creates ribbon above progress bar to inform the user that the process is successful */ function createSuccessRibbon() { - let processType = "pull request"; + let processType = 'pull request'; - if (document.location.pathname.includes("/issues/")) { - processType = "issue"; + if (document.location.pathname.includes('/issues/')) { + processType = 'issue'; } - const successRibbonContainer = document.createElement("div"); - successRibbonContainer.className = "successRibbon"; + const successRibbonContainer = document.createElement('div'); + successRibbonContainer.className = 'successRibbon'; const ribbonMessage = document.createTextNode( `The ${processType} was created successfully and will be reviewed shortly` @@ -184,161 +191,126 @@ function createSuccessRibbon() { successRibbonContainer.appendChild(ribbonMessage); - $(successRibbonContainer).insertBefore(".container"); + $(successRibbonContainer).insertBefore('.container'); } /** * Adds tooltips when editing files (First step) */ function createFileEditorToolTips() { - const steps = ["Edit File", "Confirm Pull Request", "Pull Request Opened"]; + const steps = ['Edit File', 'Confirm Pull Request', 'Pull Request Opened']; // progress bar above editor - addProgressBar(1, 3, ".js-blob-form", steps); + addProgressBar(1, 3, '.js-blob-form', steps); // icon to right of file name input const fileNameChangeText = - "This is the file name, changing it will create a new file with the new name."; + 'This is the file name, changing it will create a new file with the new name.'; - const breadCrumbDiv = ".d-md-inline-block"; + const breadCrumbDiv = '.d-md-inline-block'; - const fileNameChangeIcon = new ToolTipIcon( - "H4", - "helpIcon", - fileNameChangeText, - breadCrumbDiv - ); + const fileNameChangeIcon = new ToolTipIcon('H4', 'helpIcon', fileNameChangeText, breadCrumbDiv); fileNameChangeIcon.createIcon(); - $(fileNameChangeIcon.toolTipElement).insertAfter( - fileNameChangeIcon.gitHubElement - ); + $(fileNameChangeIcon.toolTipElement).insertAfter(fileNameChangeIcon.gitHubElement); // banner above commit message input const commitTitleText = - "This is the title of the pull request. Give a brief description of the change. Be short and objective."; + 'This is the title of the pull request. Give a brief description of the change. Be short and objective.'; - const inputTitleLabel = document.createElement("h3"); - inputTitleLabel.innerHTML = "Insert a title here"; - inputTitleLabel.className = "label-margin-right"; + const inputTitleLabel = document.createElement('h3'); + inputTitleLabel.innerHTML = 'Insert a title here'; + inputTitleLabel.className = 'label-margin-right'; - $(inputTitleLabel).insertBefore("#commit-summary-input"); + $(inputTitleLabel).insertBefore('#commit-summary-input'); const commitMessageIcon = new ToolTipIcon( - "H4", - "helpIcon", + 'H4', + 'helpIcon', commitTitleText, - "#commit-summary-input" + '#commit-summary-input' ); commitMessageIcon.createIcon(); - $(commitMessageIcon.toolTipElement).insertAfter("#commit-summary-input"); + $(commitMessageIcon.toolTipElement).insertAfter('#commit-summary-input'); const descriptionText = - "Add a more detailed description of the pull request if needed. Here you can present your arguments and reasoning that lead to change."; + 'Add a more detailed description of the pull request if needed. Here you can present your arguments and reasoning that lead to change.'; - const inputDescriptionLabel = document.createElement("h3"); - inputDescriptionLabel.innerHTML = "Insert a
description here"; - inputDescriptionLabel.className = "label-margin-right"; + const inputDescriptionLabel = document.createElement('h3'); + inputDescriptionLabel.innerHTML = 'Insert a
description here'; + inputDescriptionLabel.className = 'label-margin-right'; - $(inputDescriptionLabel).insertBefore("#commit-description-textarea"); + $(inputDescriptionLabel).insertBefore('#commit-description-textarea'); const extendedDescIcon = new ToolTipIcon( - "H4", - "helpIcon", + 'H4', + 'helpIcon', descriptionText, - "#commit-description-textarea" + '#commit-description-textarea' ); extendedDescIcon.createIcon(); - $(extendedDescIcon.toolTipElement).insertAfter( - extendedDescIcon.gitHubElement - ); + $(extendedDescIcon.toolTipElement).insertAfter(extendedDescIcon.gitHubElement); let commitChangesText = - "By clicking the Commit Changes button the changes will automatically be pushed to the repo"; + 'By clicking the Commit Changes button the changes will automatically be pushed to the repo'; - const buttonText = document.getElementsByClassName("btn-primary")[1] - .innerText; + const buttonText = document.getElementsByClassName('btn-primary')[1].innerText; - if (buttonText === "Propose changes") { + if (buttonText === 'Propose changes') { commitChangesText = - "By clicking the Propose changes button you will start the pull request submission process. You will have the chance to check your changes before finalizing it."; + 'By clicking the Propose changes button you will start the pull request submission process. You will have the chance to check your changes before finalizing it.'; } - const submitChangesIcon = new ToolTipIcon( - "H4", - "helpIcon", - commitChangesText, - "#submit-file" - ); + const submitChangesIcon = new ToolTipIcon('H4', 'helpIcon', commitChangesText, '#submit-file'); submitChangesIcon.createIcon(); - submitChangesIcon.toolTipElement.style.marginRight = "20px"; + submitChangesIcon.toolTipElement.style.marginRight = '20px'; - $(submitChangesIcon.toolTipElement).insertBefore( - submitChangesIcon.gitHubElement - ); + $(submitChangesIcon.toolTipElement).insertBefore(submitChangesIcon.gitHubElement); } -// On step 1 for pull request, toggle icon text to help inform user -let onDirectPull = true; -let iconText = ""; - -const pullChangesText = - "By clicking the Propose changes button you will start the pull request submission process. You will have the chance to check your changes before finalizing it."; - -const directCommitText = - "By clicking the Commit Changes button the changes will be directly pushed to the repo"; - $('input[name="commit-choice"]').click(() => { - document.getElementsByClassName("helpIcon")[3].remove(); - - if (onDirectPull) { - iconText = pullChangesText; - onDirectPull = false; - } else { - iconText = directCommitText; - onDirectPull = true; - } + const pullChangesText = + 'By clicking the Propose changes button you will start the pull request submission process. You will have the chance to check your changes before finalizing it.'; - const submitChangesIcon = new ToolTipIcon( - "H4", - "helpIcon", - iconText, - "#submit-file" - ); + const directCommitText = + 'By clicking the Commit Changes button the changes will be directly pushed to the repo'; - submitChangesIcon.createIcon(); - - submitChangesIcon.toolTipElement.style.marginRight = "20px"; + $('.helpIconText:eq(3)').toggleText(directCommitText, pullChangesText); +}); - $(submitChangesIcon.toolTipElement).insertBefore( - submitChangesIcon.gitHubElement - ); +/** + * Custom jQuery function to toggle text + */ +$.fn.extend({ + toggleText: function (a, b) { + return this.text(this.text() === b ? a : b); + }, }); /** - * Adds tooltips when confirming a change to file (Second step) + * Creates tooltips when confirming a change to file (Second step) */ function createConfirmPullRequestToolTips() { - const steps = ["Edit File", "Create Pull Request", "Pull Request Opened"]; + const steps = ['Edit File', 'Create Pull Request', 'Pull Request Opened']; - addProgressBar(2, 3, ".repository-content", steps); + addProgressBar(2, 3, '.repository-content', steps); - $("#pull_request_body").attr( - "placeholder", - "You can add a more detailed description of the pull request here if needed." + $('#pull_request_body').attr( + 'placeholder', + 'You can add a more detailed description of the pull request here if needed.' ); - let branchName = ""; + let branchName = ''; let isComparingBranch = false; try { - branchName = document.getElementsByClassName("branch-name")[0].innerText; + branchName = document.getElementsByClassName('branch-name')[0].innerText; } catch (error) { isComparingBranch = true; } @@ -348,116 +320,92 @@ function createConfirmPullRequestToolTips() { if (isComparingBranch) { newHeaderText = - "Finish the pull request submission below to allow others to accept the changes"; + 'Finish the pull request submission below to allow others to accept the changes'; - $(".Subhead-heading").text("Create Pull Request"); + $('.Subhead-heading').text('Create Pull Request'); } - $(".Subhead-description").text(newHeaderText); + $('.Subhead-description').text(newHeaderText); - const pullRequestTitle = document.getElementsByClassName( - "Subhead-heading" - )[1]; - pullRequestTitle.innerHTML = "Create pull request"; + const pullRequestTitle = document.getElementsByClassName('Subhead-heading')[1]; + pullRequestTitle.innerHTML = 'Create pull request'; const branchContainerText = - "This represents the origin and destination of your pull request. If you are not sure, leave it how it is, this is common for small changes."; + 'This represents the origin and destination of your pull request. If you are not sure, leave it how it is, this is common for small changes.'; - const topRibbon = document.getElementsByClassName("js-range-editor")[0]; - topRibbon.style.width = "93%"; - topRibbon.style.display = "inline-block"; + const topRibbon = document.getElementsByClassName('js-range-editor')[0]; + topRibbon.style.width = '93%'; + topRibbon.style.display = 'inline-block'; // icon next to current branch and new pull request branch name const currentBranchIcon = new ToolTipIcon( - "H4", - "helpIcon", + 'H4', + 'helpIcon', branchContainerText, - ".js-range-editor" + '.js-range-editor' ); currentBranchIcon.createIcon(); - $(currentBranchIcon.toolTipElement).insertAfter( - currentBranchIcon.gitHubElement - ); + $(currentBranchIcon.toolTipElement).insertAfter(currentBranchIcon.gitHubElement); // move button row to left side of editor if (!isComparingBranch) { - const buttonRow = document.getElementsByClassName( - "d-flex flex-justify-end m-2" - )[0]; - buttonRow.classList.remove("flex-justify-end"); - buttonRow.classList.add("flex-justify-start"); + const buttonRow = document.getElementsByClassName('d-flex flex-justify-end m-2')[0]; + buttonRow.classList.remove('flex-justify-end'); + buttonRow.classList.add('flex-justify-start'); } const confirmPullRequestText = - "By clicking this button you will create the pull request to allow others to view your changes and accept them into the repository."; + 'By clicking this button you will create the pull request to allow others to view your changes and accept them into the repository.'; - const submitButtonClass = ".js-pull-request-button"; + const submitButtonClass = '.js-pull-request-button'; // icon next to create pull request button const createPullRequestBtn = new ToolTipIcon( - "H4", - "helpIcon", + 'H4', + 'helpIcon', confirmPullRequestText, submitButtonClass ); createPullRequestBtn.createIcon(); - $(createPullRequestBtn.toolTipElement).insertAfter( - createPullRequestBtn.gitHubElement - ); + $(createPullRequestBtn.toolTipElement).insertAfter(createPullRequestBtn.gitHubElement); const summaryText = - "This shows the amount of commits in the pull request, the amount of files you changed in the pull request, how many comments were on the commits for the pull request and the ammount of people who worked together on this pull request."; + 'This shows the amount of commits in the pull request, the amount of files you changed in the pull request, how many comments were on the commits for the pull request and the ammount of people who worked together on this pull request.'; - const summaryClass = ".overall-summary"; + const summaryClass = '.overall-summary'; // override the container width and display to add icon - const numbersSummaryContainer = document.getElementsByClassName( - "files-bucket" - )[0]; - numbersSummaryContainer.style.width = "93%"; - numbersSummaryContainer.style.display = "inline-block"; + const numbersSummaryContainer = document.getElementsByClassName('files-bucket')[0]; + numbersSummaryContainer.style.width = '93%'; + numbersSummaryContainer.style.display = 'inline-block'; // icon above summary of changes and commits - const requestSummaryIcon = new ToolTipIcon( - "H4", - "helpIcon", - summaryText, - summaryClass - ); + const requestSummaryIcon = new ToolTipIcon('H4', 'helpIcon', summaryText, summaryClass); requestSummaryIcon.createIcon(); - requestSummaryIcon.toolTipElement.style = "float:right;"; + requestSummaryIcon.toolTipElement.style = 'float:right;'; - $(requestSummaryIcon.toolTipElement).insertAfter( - requestSummaryIcon.gitHubElement - ); + $(requestSummaryIcon.toolTipElement).insertAfter(requestSummaryIcon.gitHubElement); - const comparisonClass = ".details-collapse"; + const comparisonClass = '.details-collapse'; const changesText = - "This shows the changes between the orginal file and your version. Green(+) represents lines added. Red(-) represents removed lines"; + 'This shows the changes between the orginal file and your version. Green(+) represents lines added. Red(-) represents removed lines'; // icon above container for changes in current pull request - const comparisonIcon = new ToolTipIcon( - "H4", - "helpIcon", - changesText, - comparisonClass - ); + const comparisonIcon = new ToolTipIcon('H4', 'helpIcon', changesText, comparisonClass); comparisonIcon.createIcon(); - const commitSummaryContainer = document.getElementsByClassName( - "details-collapse" - )[0]; + const commitSummaryContainer = document.getElementsByClassName('details-collapse')[0]; - commitSummaryContainer.style.width = "93%"; - commitSummaryContainer.style.display = "inline-block"; + commitSummaryContainer.style.width = '93%'; + commitSummaryContainer.style.display = 'inline-block'; $(comparisonIcon.toolTipElement).insertAfter(comparisonIcon.gitHubElement); @@ -470,14 +418,14 @@ function createConfirmPullRequestToolTips() { function changeMergeText() { let canMerge = false; try { - document.getElementsByClassName("text-red")[0].innerText; + document.getElementsByClassName('text-red')[0].innerText; } catch (error) { // if the 'text-red' element does not exist, then the pull request can be merged automatically canMerge = true; } if (!canMerge) { - $(".pre-mergability").html( + $('.pre-mergability').html( "There is a merge conflict, but this can be fixed by creating the pull request.Don't worry, the owner of the repository will fix this for you." ); } @@ -486,142 +434,105 @@ function changeMergeText() { * Adds tooltips when reviewing a pull request (Final step) */ function createReviewPullRequestToolTips() { - const steps = ["Edit File", "Confirm Pull Request", "Pull Request Opened"]; + const steps = ['Edit File', 'Confirm Pull Request', 'Pull Request Opened']; - addProgressBar(3, 3, ".gh-header-show", steps); + addProgressBar(3, 3, '.gh-header-show', steps); - const pullRequestName = document.getElementsByClassName("js-issue-title")[0] - .innerText; + const pullRequestName = document.getElementsByClassName('js-issue-title')[0].innerText; const branchContainerText = - "This indicates that the pull request is open meaning someone will get to it soon."; + 'This indicates that the pull request is open meaning someone will get to it soon.'; const pullRequestStatusIcon = new ToolTipIcon( - "H4", - "helpIcon", + 'H4', + 'helpIcon', branchContainerText, - ".gh-header-meta:nth-child(1)" + '.gh-header-meta:nth-child(1)' ); pullRequestStatusIcon.createIcon(); - $(pullRequestStatusIcon.toolTipElement).insertBefore( - pullRequestStatusIcon.gitHubElement - ); + $(pullRequestStatusIcon.toolTipElement).insertBefore(pullRequestStatusIcon.gitHubElement); const requestButtonsText = - "This will close the pull request meaning people cannot view this! Do not click close unless the request was solved."; + 'This will close the pull request meaning people cannot view this! Do not click close unless the request was solved.'; - const requestButtonsClass = ".js-comment-and-button"; + const requestButtonsClass = '.js-comment-and-button'; const closePullRequestIcon = new ToolTipIcon( - "H4", - "helpIcon", + 'H4', + 'helpIcon', requestButtonsText, requestButtonsClass ); closePullRequestIcon.createIcon(); - $(closePullRequestIcon.toolTipElement).insertBefore( - closePullRequestIcon.gitHubElement - ); + $(closePullRequestIcon.toolTipElement).insertBefore(closePullRequestIcon.gitHubElement); - closePullRequestIcon.toolTipElement.style.marginRight = "20px"; + closePullRequestIcon.toolTipElement.style.marginRight = '20px'; - const submitButtons = document.getElementsByClassName( - "d-flex flex-justify-end" - )[0]; - submitButtons.classList.remove("flex-justify-end"); - submitButtons.classList.add("flex-justify-start"); + const submitButtons = document.getElementsByClassName('d-flex flex-justify-end')[0]; + submitButtons.classList.remove('flex-justify-end'); + submitButtons.classList.add('flex-justify-start'); - $(".js-quick-submit-alternative").click((event) => { - if ( - !confirm( - `Are you sure that you want to close the pull request: ${pullRequestName}?` - ) - ) { + $('.js-quick-submit-alternative').click((event) => { + if (!confirm(`Are you sure that you want to close the pull request: ${pullRequestName}?`)) { event.preventDefault(); } }); } -/** - * Edits tooltips when viewing a repository that you are not a contributor of - */ -function createForkedFileToolTips() { - $(".tooltipped-nw:nth-child(2)").attr("aria-label", "Edit File"); -} - /** * Adds tooltips to page when opening a new issue report (First step) */ function createReportIssueToolTips() { - const steps = ["Report Issue", "Issue Submitted"]; + const steps = ['Report Issue', 'Issue Submitted']; // progress bar above editor - addProgressBar(1, 2, ".new_issue", steps); + addProgressBar(1, 2, '.new_issue', steps); const submitButtonText = - "By clicking this, it will submit the issue to the owner of the repository"; + 'By clicking this, it will submit the issue to the owner of the repository'; - const submitButtonClass = ".flex-justify-end button:eq(0)"; + const submitButtonClass = '.flex-justify-end button:eq(0)'; - const submitButtonIcon = new ToolTipIcon( - "H4", - "helpIcon", - submitButtonText, - submitButtonClass - ); + const submitButtonIcon = new ToolTipIcon('H4', 'helpIcon', submitButtonText, submitButtonClass); submitButtonIcon.createIcon(); - $(submitButtonIcon.toolTipElement).insertAfter( - submitButtonIcon.gitHubElement - ); + $(submitButtonIcon.toolTipElement).insertAfter(submitButtonIcon.gitHubElement); } /** * Adds tooltips to page when reviewing a new issue report (Final step) */ function createReviewIssueToolTips() { - const issueTitle = document.getElementsByClassName("js-issue-title")[0] - .innerText; + const issueTitle = document.getElementsByClassName('js-issue-title')[0].innerText; - const steps = ["Report Issue", "Issue Submitted"]; + const steps = ['Report Issue', 'Issue Submitted']; - addProgressBar(2, 2, ".repository-content", steps); + addProgressBar(2, 2, '.repository-content', steps); - const buttonRow = document.getElementsByClassName( - "d-flex flex-justify-end" - )[0]; - buttonRow.classList.remove("flex-justify-end"); - buttonRow.classList.add("flex-justify-start"); + const buttonRow = document.getElementsByClassName('d-flex flex-justify-end')[0]; + buttonRow.classList.remove('flex-justify-end'); + buttonRow.classList.add('flex-justify-start'); const closeIssueIconText = - "This will close the issue request meaning people cannot view this! Do not click close unless the request was solved. "; + 'This will close the issue request meaning people cannot view this! Do not click close unless the request was solved. '; - const closeButtonClass = ".flex-justify-end button:eq(0)"; + const closeButtonClass = '.flex-justify-end button:eq(0)'; - const submitButtonIcon = new ToolTipIcon( - "H4", - "helpIcon", - closeIssueIconText, - closeButtonClass - ); + const submitButtonIcon = new ToolTipIcon('H4', 'helpIcon', closeIssueIconText, closeButtonClass); submitButtonIcon.createIcon(); - submitButtonIcon.toolTipElement.style.marginRight = "20px"; + submitButtonIcon.toolTipElement.style.marginRight = '20px'; - $(submitButtonIcon.toolTipElement).insertBefore( - submitButtonIcon.gitHubElement - ); + $(submitButtonIcon.toolTipElement).insertBefore(submitButtonIcon.gitHubElement); - $(".js-quick-submit-alternative").click(function (event) { - if ( - !confirm(`Are you sure that you want to close the issue: ${issueTitle}?`) - ) { + $('.js-quick-submit-alternative').click(function (event) { + if (!confirm(`Are you sure that you want to close the issue: ${issueTitle}?`)) { event.preventDefault(); } }); @@ -631,12 +542,11 @@ function createReviewIssueToolTips() { * Updates contribution graph to show icon to toggle between graphs */ function updateProfileCard() { - const toggleButton = document.createElement("button"); - toggleButton.className = "btn mb-3 toggleBtn"; - toggleButton.innerText = "Click to show more information"; + const toggleButton = document.createElement('button'); + toggleButton.className = 'btn mb-3 toggleBtn'; + toggleButton.innerText = 'Click to show more information'; - const username = document.getElementsByClassName("vcard-username")[0] - .innerHTML; + const username = document.getElementsByClassName('vcard-username')[0].innerHTML; createCardContainer(); @@ -644,19 +554,19 @@ function updateProfileCard() { getApis(username); - $(toggleButton).insertAfter(".contrib-footer "); + $(toggleButton).insertAfter('.contrib-footer '); - $(".toggleBtn").click(() => { - if ($(".toggleBtn").text() === "Click to show more information") { - $(".toggleBtn").text("X"); - $(".toggleBtn").addClass("closeButton"); + $('.toggleBtn').click(() => { + if ($('.toggleBtn').text() === 'Click to show more information') { + $('.toggleBtn').text('X'); + $('.toggleBtn').addClass('closeButton'); } else { - $(".toggleBtn").text("Click to show more information"); - $(".toggleBtn").removeClass("closeButton"); + $('.toggleBtn').text('Click to show more information'); + $('.toggleBtn').removeClass('closeButton'); } - $(".back").toggleClass("hovered"); - $("#js-contribution-activity").toggleClass("hidden"); - $("#user-activity-overview").toggleClass("hidden"); + $('.back').toggleClass('hovered'); + $('#js-contribution-activity').toggleClass('hidden'); + $('#user-activity-overview').toggleClass('hidden'); }); } @@ -664,14 +574,12 @@ function updateProfileCard() { * Creates structure of profile overview with graphs */ function createCardContainer() { - const outerContainer = document.getElementsByClassName( - "graph-before-activity-overview" - )[0]; + const outerContainer = document.getElementsByClassName('graph-before-activity-overview')[0]; - outerContainer.className += " card-container"; + outerContainer.className += ' card-container'; - const cardBack = document.createElement("div"); - cardBack.className = "back"; + const cardBack = document.createElement('div'); + cardBack.className = 'back'; cardBack.innerHTML = `

View all information here

@@ -686,14 +594,13 @@ function createCardContainer() { $(document).ready(() => { $(document).click((event) => { - if (event.target.className === "complete-list-link") { - const username = document.getElementsByClassName("vcard-username")[0] - .innerHTML; + if (event.target.className === 'complete-list-link') { + const githubUsername = document.getElementsByClassName('vcard-username')[0].innerHTML; - chrome.storage.sync.set({ username: username }); + chrome.storage.sync.set({ username: githubUsername }); chrome.runtime.sendMessage({ - type: "OPEN_COMPLETE_OVERVIEW", + type: 'OPEN_COMPLETE_OVERVIEW', }); } }); @@ -705,15 +612,15 @@ $(document).ready(() => { * Uses GitHub API to view commit totals for user */ async function getCommits(repositories, username) { - const oAuthToken = ""; + const oAuthToken = ''; const headers = { Authorization: `Token ${oAuthToken}`, }; const repoObject = {}; - const ctx = document.getElementById("repositories"); - const skillGraphContainer = document.getElementById("skillGraph"); + const ctx = document.getElementById('repositories'); + const skillGraphContainer = document.getElementById('skillGraph'); let total = 0; for (const repo of repositories) { @@ -721,7 +628,7 @@ async function getCommits(repositories, username) { const commitUrl = `https://api.github.com/repos/${username}/${repo}/commits?page=1&per_page=25`; const commitResponse = await fetch(commitUrl, { - method: "GET", + method: 'GET', headers: headers, }); @@ -742,12 +649,12 @@ async function getCommits(repositories, username) { sortArrayInDescendingOrder(data); commitGraph = new Chart(skillGraphContainer, { - type: "bar", + type: 'bar', data: { labels: labels, datasets: [ { - label: "Commits", + label: 'Commits', backgroundColor: colors, data: data, }, @@ -776,7 +683,7 @@ async function getCommits(repositories, username) { fontSize: 8, callback: function (value) { if (value.length > 4) { - return value.substr(0, 4) + "..."; //truncate + return value.substr(0, 4) + '...'; //truncate } else { return value; } @@ -796,8 +703,8 @@ async function getCommits(repositories, username) { Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily ); - ctx.textAlign = "center"; - ctx.textBaseline = "bottom"; + ctx.textAlign = 'center'; + ctx.textBaseline = 'bottom'; this.data.datasets.forEach(function (dataset, i) { var meta = chartInstance.controller.getDatasetMeta(i); @@ -820,11 +727,11 @@ async function getCommits(repositories, username) { * Uses GitHub API to view programming languages for user */ async function getRepos(username) { - const oAuthToken = ""; + const oAuthToken = ''; const url = `https://api.github.com/users/${username}/repos`; const response = await fetch(url, { - method: "GET", + method: 'GET', headers: { Authorization: `Token ${oAuthToken}`, }, @@ -849,7 +756,7 @@ async function getRepos(username) { getCommits(repositoryNames, username); - const repoGraphContainer = document.getElementById("myChart"); + const repoGraphContainer = document.getElementById('myChart'); const repositoriesObject = {}; @@ -871,12 +778,12 @@ async function getRepos(username) { sortArrayInDescendingOrder(dataSet); repositoryGraph = new Chart(repoGraphContainer, { - type: "bar", + type: 'bar', data: { labels: labels, datasets: [ { - label: "Repositories", + label: 'Repositories', backgroundColor: colors, data: dataSet, }, @@ -910,8 +817,8 @@ async function getRepos(username) { Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily ); - ctx.textAlign = "center"; - ctx.textBaseline = "bottom"; + ctx.textAlign = 'center'; + ctx.textBaseline = 'bottom'; this.data.datasets.forEach(function (dataset, i) { var meta = chartInstance.controller.getDatasetMeta(i); @@ -934,7 +841,7 @@ async function getRepos(username) { * Creates graph of contribitions with API's */ function getApis(username) { - const url = chrome.runtime.getURL("result.json"); + const url = chrome.runtime.getURL('result.json'); fetch(url) .then((response) => response.json()) @@ -947,7 +854,7 @@ function getApis(username) { * creates graph on user profile card about langauges and apis */ function createApiGraph(userData, username) { - const apiGraphContainer = document.getElementById("commitsGraph"); + const apiGraphContainer = document.getElementById('commitsGraph'); const apis = []; const apiTotals = []; @@ -975,12 +882,12 @@ function createApiGraph(userData, username) { sortArrayInDescendingOrder(apiTotals); apiGraph = new Chart(apiGraphContainer, { - type: "bar", + type: 'bar', data: { labels: apis, datasets: [ { - label: "Total Commits: ", + label: 'Total Commits: ', data: apiTotals, backgroundColor: colors, }, @@ -1008,7 +915,7 @@ function createApiGraph(userData, username) { fontSize: 8, callback: function (value) { if (value.length > 4) { - return value.substr(0, 4) + "..."; + return value.substr(0, 4) + '...'; } else { return value; } @@ -1028,8 +935,8 @@ function createApiGraph(userData, username) { Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily ); - ctx.textAlign = "center"; - ctx.textBaseline = "bottom"; + ctx.textAlign = 'center'; + ctx.textBaseline = 'bottom'; this.data.datasets.forEach(function (dataset, i) { var meta = chartInstance.controller.getDatasetMeta(i); @@ -1050,13 +957,13 @@ function createApiGraph(userData, username) { * Listen to changes from background */ chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => { - if (msg.message === "progress_bar") { - $(".progressbar").toggleClass("hiddenDisplay"); - } else if (msg.message === "icon") { - $(".helpIcon").toggleClass("hiddenDisplay"); - } else if (msg.message === "ribbon") { - $(".successRibbon").toggleClass("hiddenDisplay"); - } else if (msg.type === "CHECK_URL") { + if (msg.message === 'progress_bar') { + $('.progressbar').toggleClass('hiddenDisplay'); + } else if (msg.message === 'icon') { + $('.helpIcon').toggleClass('hiddenDisplay'); + } else if (msg.message === 'ribbon') { + $('.successRibbon').toggleClass('hiddenDisplay'); + } else if (msg.type === 'CHECK_URL') { if (!injected) { injected = true; checkUrl(document.location.pathname); diff --git a/index.html b/index.html index 435b14d..ddf6bcf 100644 --- a/index.html +++ b/index.html @@ -2,9 +2,8 @@ -
@@ -94,7 +103,7 @@

GitHub Plugin Settings

Show Icons

@@ -102,7 +111,7 @@

Show Icons

Show Ribbons

@@ -110,7 +119,7 @@

Show Ribbons

Show Progress Bar

diff --git a/manifest.json b/manifest.json index f282bc1..9aa8b3e 100644 --- a/manifest.json +++ b/manifest.json @@ -3,13 +3,7 @@ "version": "1", "manifest_version": 2, "description": "Helps newcomers navigate GitHub and successfully contribute to open source projects.", - "permissions": [ - "tabs", - "activeTab", - "webNavigation", - "", - "storage" - ], + "permissions": ["tabs", "activeTab", "webNavigation", "", "storage"], "browser_action": { "name": "GitHub Plugin Development", "icons": ["icon.png"], @@ -34,6 +28,6 @@ "persistant": true, "scripts": ["background.js"] }, - "web_accessible_resources": ["*.json", "jquery.min.js"], + "web_accessible_resources": ["*.json", "*.css", "jquery.min.js"], "content_security_policy": "script-src 'self' https://code.jquery.com/jquery-3.5.1.min.js; object-src 'self'" } diff --git a/overview.html b/overview.html index 4435479..06f79ce 100644 --- a/overview.html +++ b/overview.html @@ -3,234 +3,1353 @@ - + +

- diff --git a/overview.js b/overview.js index 8233a6e..13e4eb1 100644 --- a/overview.js +++ b/overview.js @@ -1,23 +1,3 @@ -const modal = document.getElementById("myModal"); - -const closeButton = document.getElementsByClassName("close")[0]; - -const oAuthToken = ""; - -const headers = { - Authorization: `Token ${oAuthToken}`, -}; - -const buttons = document.getElementsByClassName("card-button"); - -let username = ""; - -chrome.storage.sync.get("username", (result) => { - username = result.username; - document.getElementById("username").innerHTML = `${username}'s Repositories`; - getRepos(username); -}); - class Card { constructor( repositoryName, @@ -35,23 +15,20 @@ class Card { this.cardContainer = cardContainer; } - createCard() { - if (this.repositoryName.length > 20) { - this.repositoryName = this.repositoryName.substr(0, 20) + "..."; - } - - const cardContainer = document.createElement("div"); - cardContainer.className = "card"; + createCard(username) { + const cardContainer = document.createElement('div'); + cardContainer.className = 'card'; cardContainer.innerHTML = `
- ${username}/${this.repositoryName} + ${username}/${this.repositoryName}
Commits: ${this.commitTotal}
`; + if (this.topLanguage !== null) { cardContainer.innerHTML += `
@@ -72,49 +49,59 @@ class Card { } } +chrome.storage.sync.get('username', (result) => { + document.getElementById( + 'username' + ).innerHTML = ` ${result.username}/Repositories`; + getRepos(result.username); +}); + document.body.onclick = (ev) => { - if (ev.target.getAttribute("class") === "label") { - chrome.storage.sync.get("username", (result) => { - getAllCommitMessages(ev.srcElement.id, result.username, 1); + if (ev.target.getAttribute('class') === 'label') { + chrome.storage.sync.get('username', (result) => { + const FIRST_PAGE = 1; + getAllCommitMessages(ev.srcElement.id, result.username, FIRST_PAGE); + updateTotalIssues(ev.srcElement.id, result.username, FIRST_PAGE); }); } }; -closeButton.onclick = () => { - modal.style.display = "none"; - document - .querySelectorAll(".message-title") - .forEach((element) => element.remove()); - document.getElementById("list-title").innerHTML = ""; +document.getElementsByClassName('close')[0].onclick = () => { + document.getElementById('modalContainer').style.display = 'none'; + document.querySelectorAll('.message-title').forEach((element) => element.remove()); + document.getElementById('current-repository').innerHTML = ''; }; /** - * Function name: createCompleteOverview * @param {JSON} userData - JSON result of all repositories for the user * @param {string} username - GitHub username * Creates cards containing total commits and top langauge */ -async function createCompleteOverview(userData) { +async function createCompleteOverview(userData, username) { + const FIRST_PAGE = 1; + const MAX_CARDS_PER_ROW = 4; + const EMPTY_ROW = 0; + let isNewPage = false; - let rowElements = ""; + let rowElements = ''; try { - rowElements = document.getElementsByClassName("row")[0].childElementCount; + rowElements = document.getElementsByClassName('row')[0].childElementCount; } catch (error) { isNewPage = true; } - let newRow = ""; + let newRow = ''; if (rowElements === 4 || isNewPage) { - newRow = document.createElement("div"); - newRow.className = "row"; - $(newRow).insertAfter(".row:last"); + newRow = document.createElement('div'); + newRow.className = 'row'; + $(newRow).insertAfter('.row:last'); } for (repo of userData) { - const totalCommits = await getAllCommits(repo.name, username, 1); + const totalCommits = await getAllCommits(repo.name, username, FIRST_PAGE); - let langaugeColor = await getLanguageColor(repo.language); + const langaugeColor = await getLanguageColor(repo.language); let repositoryCard = new Card( repo.name, @@ -124,28 +111,27 @@ async function createCompleteOverview(userData) { langaugeColor ); - repositoryCard.createCard(); + repositoryCard.createCard(username); - let totalRows = document.getElementsByClassName("row").length; + let totalRows = document.getElementsByClassName('row').length; let lastRowCardCount = 0; - let newRow = document.createElement("div"); - newRow.className = "row"; + let newRow = document.createElement('div'); + newRow.className = 'row'; if (totalRows !== 0) { - lastRowCardCount = document.getElementsByClassName("row")[totalRows - 1] - .childElementCount; - } else if (totalRows === 0) { - $(newRow).appendTo("#content"); + lastRowCardCount = document.getElementsByClassName('row')[totalRows - 1].childElementCount; + } else if (totalRows === EMPTY_ROW) { + $(newRow).appendTo('#content'); } // if the row is full - if (lastRowCardCount === 4) { - $(newRow).insertAfter(".row:last"); + if (lastRowCardCount === MAX_CARDS_PER_ROW) { + $(newRow).insertAfter('.row:last'); } - $(".row:last").append(repositoryCard.cardContainer); + $('.row:last').append(repositoryCard.cardContainer); } } @@ -155,12 +141,17 @@ async function createCompleteOverview(userData) { * Uses GitHub API to view programming languages for user */ async function getRepos(username) { + const oAuthToken = ''; + + const apiHeaders = { + Authorization: `Token ${oAuthToken}`, + }; + const url = `https://api.github.com/users/${username}/repos`; + const response = await fetch(url, { - method: "GET", - headers: { - Authorization: `Token ${oAuthToken}`, - }, + method: 'GET', + headers: apiHeaders, }); const result = await response.json(); @@ -169,18 +160,23 @@ async function getRepos(username) { } /** - * Function name: getAllCommits( * @param {string} repositoryName - GitHub repository * @param {string} username - GitHub username * @param {int} page - Current page in api pagination * Returns all commits for each repository for a certain user */ async function getAllCommits(repositoryName, username, page) { + const oAuthToken = ''; + + const apiHeaders = { + Authorization: `Token ${oAuthToken}`, + }; + const commitUrl = `https://api.github.com/repos/${username}/${repositoryName}/commits?page=${page}&per_page=100`; const commitResponse = await fetch(commitUrl, { - method: "GET", - headers: headers, + method: 'GET', + headers: apiHeaders, }); const commitResult = await commitResponse.json(); @@ -195,17 +191,22 @@ async function getAllCommits(repositoryName, username, page) { } /** - * Function name: getAllLanguages * @param {string} repositoryName - GitHub repository * @param {string} username - GitHub username * returns object of languages for specific repository */ async function getAllLanguages(repository, username) { + const oAuthToken = ''; + + const apiHeaders = { + Authorization: `Token ${oAuthToken}`, + }; + const languageUrl = `https://api.github.com/repos/${username}/${repository}/languages`; const result = await fetch(languageUrl, { - method: "GET", - headers: headers, + method: 'GET', + headers: apiHeaders, }); const langaugeData = await result.json(); @@ -220,51 +221,100 @@ async function getAllLanguages(repository, username) { * returns object of languages for specific repository */ async function getAllCommitMessages(repository, username, page) { + const oAuthToken = ''; + + const apiHeaders = { + Authorization: `Token ${oAuthToken}`, + }; + const commitsUrl = `https://api.github.com/repos/${username}/${repository}/commits?page=${page}&per_page=100`; const result = await fetch(commitsUrl, { - method: "GET", - headers: headers, + method: 'GET', + headers: apiHeaders, }); const commits = await result.json(); - document.getElementById( - "list-title" - ).innerHTML = `Commit Message Titles For: ${repository}`; + document.getElementById('current-repository').innerHTML = repository; if (commits.length !== 0) { commits.forEach((commit) => { if (commit.author !== null && commit.author.login === username) { - updateModal(commit.commit.message, commit.commit.author.date); + updateModal(commit.commit.message, commit.commit.author.date, commit.html_url); } }); - modal.style.display = "block"; + document.getElementById('modalContainer').style.display = 'block'; if (commits.length % 100 === 0) { getAllCommitMessages(repository, username, page + 1); } - } - if (document.getElementsByClassName("message-title").length === 0) { - updateModal(`There were no commits by ${username} in this repository.`, ""); + if (document.getElementsByClassName('message-title').length === 0) { + updateModal(`There were no commits by ${username} in this repository.`, ''); + } } } -function updateModal(message, createdDate) { - const innerContainer = document.getElementsByClassName("modal-content")[0]; +/** + * @param {string} repository - repository name + * @param {string} username - GitHub username + * @param {int} page - current page + * Updates the total issue count in modal + */ +async function updateTotalIssues(repository, username, page) { + const totalIssues = await getTotalIssues(repository, username, page); + + const counterLink = document.getElementsByClassName('Counter')[0]; + + counterLink.innerHTML = totalIssues; +} + +/** + * @param {string} repository - repository name + * @param {string} username - GitHub username + * @param {int} page - curent page + * Finds all issues in repository and returns total + */ +async function getTotalIssues(repository, username, page) { + const oAuthToken = ''; + + const apiHeaders = { + Authorization: `Token ${oAuthToken}`, + }; + + const issuesUrl = `https://api.github.com/repos/${username}/${repository}/issues?page=${page}&per_page=100`; + + const result = await fetch(issuesUrl, { + method: 'GET', + headers: apiHeaders, + }); + + const issues = await result.json(); + + return issues.length; +} + +/** + * @param {string} message + * @param {string} createdDate + * Appends new commit message to modal + */ +function updateModal(message, createdDate, commitLink) { + const innerContainer = document.getElementsByClassName('modal-content')[0]; + + const messageContainer = document.createElement('p'); + messageContainer.className = 'message-title'; - const messageContainer = document.createElement("p"); - messageContainer.className = "message-title"; - if (createdDate === "") { - messageContainer.appendChild(document.createTextNode(message)); + if (createdDate === '') { + messageContainer.innerHTML = `${message} Created at: ${localTime}`; } innerContainer.appendChild(messageContainer); } + /** * Function name: getLanguageColor * @param {string} language - top language in repo @@ -272,14 +322,57 @@ function updateModal(message, createdDate) { */ async function getLanguageColor(language) { if (language === null) { - return "#000"; + return '#000'; } - const url = chrome.runtime.getURL("colors.json"); + const url = chrome.runtime.getURL('colors.json'); const response = await fetch(url); - let colors = await response.json(); + const colors = await response.json(); return colors[language].color; } + +/** + * @param {string} repository - current repository + * @param {string} username - GitHub username + * @param {int} page - current page + */ +async function getAllIssues(repository, username, page) { + const oAuthToken = ''; + + const apiHeaders = { + Authorization: `Token ${oAuthToken}`, + }; + + const issuesUrl = `https://api.github.com/repos/${username}/${repository}/issues?page=${page}&per_page=100`; + + const result = await fetch(issuesUrl, { + method: 'GET', + headers: apiHeaders, + }); + + const issues = await result.json(); + + issues.forEach((issue) => { + if (issue.user.login !== null && issue.user.login === username) { + updateModal(issue.title, issue.created_at, issue.html_url); + } + }); + + if (issues.length % 100 === 0) { + getAllIssues(repository, username, page + 1); + } +} + +$('#repo-issues').click(() => { + document.querySelectorAll('.message-title').forEach((element) => element.remove()); + const currentRepository = document.getElementById('current-repository').innerHTML; + + const FIRST_PAGE = 1; + + chrome.storage.sync.get('username', (result) => { + getAllIssues(currentRepository, result.username, FIRST_PAGE); + }); +}); diff --git a/overview_page.css b/overview_page.css new file mode 100644 index 0000000..180cda6 --- /dev/null +++ b/overview_page.css @@ -0,0 +1,675 @@ +body { + font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, + Apple Color Emoji, Segoe UI Emoji; + font-size: 14px; + line-height: 1.5; +} + +body, +html { + max-width: 100%; + overflow-x: hidden; +} + +.row { + justify-content: center; + flex-direction: row; + align-items: center; + margin-top: 20px; + display: flex; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + margin-right: -5px; + margin-left: -5px; +} + +.row:first-of-type { + margin-top: 80px; +} + +.card { + width: 20%; + border-radius: 6px; + background-color: #fff; + border: 1px solid #e1e4e8; + display: flex; + margin-right: 20px; + flex-direction: column; + box-sizing: border-box; + padding-left: 8px; + padding-right: 8px; +} + +.card-title, +#list-title { + font-family: Roboto, sans-serif; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-size: 14px; + line-height: 1.5; + font-weight: 500; + letter-spacing: 0.0125em; + text-decoration: inherit; + text-transform: inherit; +} + +.card-title a:hover { + text-decoration: underline; +} + +.card-title a { + color: #0366d6; + text-decoration: none; + font-weight: 600; +} + +.card-title-small { + font-size: 12px !important; +} + +.card-text-section { + padding-top: 18px; + padding-right: 16px; + padding-left: 16px; +} + +.main-text { + font-family: Roboto, sans-serif; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-size: 12px; + line-height: 1.25rem; + font-weight: 400; + letter-spacing: 0.0178571429em; + text-decoration: inherit; + text-transform: inherit; + opacity: 0.6; +} + +.card-actions { + display: flex; + flex-direction: row; + align-items: center; + box-sizing: border-box; + min-height: 52px; + padding: 8px 8px 8px 16px; +} + +.card-language-section { + display: flex; + flex-direction: row; + padding: 8px; + margin-left: 10px; +} + +.card-language-section .top-language { + margin-left: 10px; +} + +.card-button { + box-sizing: border-box; +} + +.show { + display: block; +} + +.card-button .label { + cursor: pointer; + -moz-osx-font-smoothing: grayscale; + color: #24292e; + background-color: #fafbfc; + border: 1px solid rgba(27, 31, 35, 0.15); + box-shadow: 0 1px 0 rgba(27, 31, 35, 0.04), inset 0 1px 0 hsla(0, 0%, 100%, 0.25); + transition: background-color 0.2s cubic-bezier(0.3, 0, 0.5, 1); + padding: 5px 16px; + font-size: 14px; + font-weight: 500; + line-height: 20px; + white-space: nowrap; + vertical-align: middle; + cursor: pointer; + border-radius: 6px; +} + +.label:hover { + background-color: #0366d6; + color: white; +} + +/* The Modal (background) */ +.modal { + display: none; + position: fixed; + z-index: 1; + padding-top: 100px; + left: 0; + top: 0; + width: 100%; + height: 100%; + overflow: auto; + background-color: rgb(0, 0, 0); /* Fallback color */ + background-color: rgba(0, 0, 0, 0.4); +} + +/* Modal Content */ +.modal-content { + background-color: #fefefe; + margin: auto; + padding: 20px; + border: 1px solid #888; + width: 80%; + height: 500px; + overflow-y: scroll; +} + +/* The Close Button */ +.close { + color: #aaaaaa; + float: right; + font-size: 28px; + font-weight: bold; +} + +.close:hover, +.close:focus { + color: #000; + text-decoration: none; + cursor: pointer; +} + +.message-title { + margin-bottom: 15px; + margin-bottom: 15px; + border-bottom: 1px solid #e1e4e8; + font-family: Roboto, sans-serif; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-size: 0.875rem; + line-height: 1.25rem; + font-weight: 400; + letter-spacing: 0.0178571429em; + text-decoration: inherit; + text-transform: inherit; + padding: 5px; +} + +.timeStamp { + float: right; + font-weight: bold; +} + +#username { + font-size: 32px; + text-align: center; + font-weight: bold; +} + +.repo-language-color { + width: 12px; + height: 12px; + border-radius: 50%; + margin-top: 4px; +} + +.text-gray { + color: #586069 !important; +} + +.octicon { + vertical-align: text-bottom; + display: inline-block; +} + +a:visited { + text-decoration: none; + color: #0366d6; +} + +/** Begin GitHub Layout Styles for nav bars **/ +* { + box-sizing: border-box; +} + +body { + font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, + Apple Color Emoji, Segoe UI Emoji; + font-size: 14px; + line-height: 1.5; + color: #24292e; + background-color: #fff; +} + +.d-flex { + display: flex !important; +} + +.mt-4 { + margin-top: 24px !important; +} + +.width-full { + width: 100% !important; +} + +top-0 { + top: 0 !important; +} + +.border-bottom { + border-bottom: 1px solid #e1e4e8 !important; +} + +.container-xl { + max-width: 1280px; +} + +.container-lg, +.container-xl { + margin-right: auto; +} + +@media (min-width: 1012px) { + .gutter-lg { + margin-right: -16px; + margin-left: -16px; + } +} + +.gutter-condensed { + margin-right: -8px; + margin-left: -8px; +} + +.flex-shrink-0 { + flex-shrink: 0 !important; +} + +.UnderlineNav { + display: flex; + overflow-x: auto; + overflow-y: hidden; + box-shadow: inset 0 -1px 0 #e1e4e8; + justify-content: space-between; +} + +.UnderlineNav { + justify-content: center !important; +} + +.box-shadow-none { + box-shadow: none !important; +} + +.UnderlineNav-body { + display: flex; +} + +.UnderlineNav-item.selected, +.UnderlineNav-item[aria-current]:not([aria-current='false']), +.UnderlineNav-item[role='tab'][aria-selected='true'] { + font-weight: 600; + border-bottom-color: #f9826c; + outline: 1px dotted transparent; + outline-offset: -1px; +} + +.UnderlineNav-item { + padding: 8px 16px; + font-size: 14px; + line-height: 30px; + color: #1b1f23; + text-align: center; + white-space: nowrap; + background-color: initial; + border: 0; + border-bottom: 2px solid rgba(209, 213, 218, 0); + transition: border-bottom-color 0.36s ease-in; +} + +.UnderlineNav-item:focus, +.UnderlineNav-item:hover { + text-decoration-color: currentcolor; + border-bottom-color: rgb(60, 65, 67); + outline-color: transparent; +} + +.UnderlineNav-item:focus, +.UnderlineNav-item:hover { + text-decoration: none; + text-decoration-color: currentcolor; + border-bottom-color: #d1d5da; + outline: 1px dotted transparent; + outline-color: transparent; + outline-offset: -1px; + transition-timing-function: ease-out; + transition-duration: 0.12s; +} + +a { + color: #0366d6; + text-decoration: none; +} + +.Header, +.Header-item { + display: flex; + align-items: center; + flex-wrap: nowrap; +} + +.Header { + z-index: 32; + padding: 16px; + font-size: 14px; + line-height: 1.5; + color: hsla(0, 0%, 100%, 0.7); + background-color: #24292e; + margin-top: 0 !important; +} + +.Header-item { + margin-right: 16px; + align-self: stretch; +} + +.Header-link { + font-weight: 600; + color: #fff; + white-space: nowrap; +} + +@media (min-width: 768px) { + .d-md-none { + display: none !important; + } + + .header-search-current.header-search { + max-width: 272px; + } + + .py-md-0 { + padding-top: 0 !important; + padding-bottom: 0 !important; + } + + .flex-md-nowrap { + flex-wrap: nowrap !important; + } + + .d-md-flex { + display: flex !important; + } + + .py-md-0 { + padding-top: 0 !important; + padding-bottom: 0 !important; + } + + .flex-md-row { + flex-direction: row !important; + } + + .mr-md-3 { + margin-right: 16px !important; + } + + .col-md-3 { + width: 25%; + } + + .d-md-block { + display: block !important; + } + + .header-search-current.header-search:focus-within { + max-width: 544px; + } + + .header-search-current.header-search { + max-width: 272px; + } + + .flex-md-self-auto { + align-self: auto !important; + } +} + +@media (min-width: 1012px) { + .px-lg-5 { + padding-right: 32px !important; + } +} + +@media (min-width: 1012px) { + .pl-lg-5, + .px-lg-5 { + padding-left: 32px !important; + } +} + +@media (min-width: 768px) { + .px-md-4 { + padding-right: 24px !important; + } +} + +@media (min-width: 768px) { + .pl-md-4, + .px-md-4 { + padding-left: 24px !important; + } +} + +.Details:not(.Details--on) .Details-content--hidden-not-important { + display: none; +} + +.Header-item--full { + flex: auto; +} + +.header-search-current.header-search { + max-width: 100%; + transition: 0.2s ease-in-out; + transition-property: max-width, padding-bottom, padding-top; +} + +.avatar { + display: inline-block; + overflow: hidden; + line-height: 1; + vertical-align: middle; + border-radius: 6px; +} + +.avatar-user { + border-radius: 50% !important; +} + +img { + border-style: none; +} + +.header-nav-current-user { + padding-bottom: 0; + font-size: inherit; +} + +.dropdown-menu-sw { + right: 0; + left: auto; +} + +.dropdown-menu { + position: absolute; + top: 100%; + left: 0; + z-index: 100; + width: 160px; + padding-top: 4px; + padding-bottom: 4px; + margin-top: 2px; + list-style: none; + background-color: #fff; + background-clip: padding-box; + border: 1px solid #e1e4e8; + border-radius: 6px; + box-shadow: 0 8px 24px rgba(149, 157, 165, 0.2); +} + +.mt-n2 { + margin-top: -8px !important; +} + +.header-nav-current-user .user-profile-link { + color: #24292e; +} + +.dropdown-divider { + display: block; + height: 0; + margin: 8px 0; + border-top: 1px solid #e1e4e8; +} + +.dropdown-menu-sw:before { + top: -16px; + right: 9px; + left: auto; +} + +.dropdown-menu:before { + border: 8px solid transparent; + border-bottom-color: rgba(27, 31, 35, 0.15); +} + +.dropdown-menu:after, +.dropdown-menu:before { + position: absolute; + display: inline-block; + content: ''; +} + +.user-status-container { + word-break: break-word; + word-wrap: break-word; +} + +.rounded-1 { + border-radius: 6px !important; +} + +.d-none { + display: none !important; +} + +.f6 { + font-size: 12px !important; +} + +.text-gray-light { + color: #6a737d !important; +} + +.text-gray-dark { + color: #000 !important; +} + +a { + background-color: initial; +} + +svg:not(:root) { + overflow: hidden; +} + +.v-align-middle { + vertical-align: middle !important; +} + +form { + display: block; + margin-top: 0em; +} + +.header-search-current .header-search-wrapper { + display: table; + width: 100%; + max-width: 100%; + padding: 0; + font-size: inherit; + font-weight: 400; + color: #fff; + vertical-align: middle; + background-color: hsla(0, 0%, 100%, 0.125) !important; + border: 0; + box-shadow: none; +} + +.input-sm { + min-height: 28px; + line-height: 20px; +} + +.position-relative { + position: relative !important; +} + +.flex-items-center { + align-items: center !important; +} + +.flex-justify-between { + justify-content: space-between !important; +} + +.form-control, +.form-select { + padding: 5px 12px; + font-size: 14px; + line-height: 20px; + color: #24292e; + vertical-align: middle; + background-color: #fff; + background-repeat: no-repeat; + background-position: right 8px center; + border: 1px solid #e1e4e8; + border-radius: 6px; + outline: none; + box-shadow: inset 0 1px 0 rgba(225, 228, 232, 0.2); +} + +.octicon-mark-github { + height: 32px; + width: 32px; +} + +input { + -webkit-writing-mode: horizontal-tb !important; + text-rendering: auto; + color: -internal-light-dark(black, white); + letter-spacing: normal; + word-spacing: normal; + text-transform: none; + text-indent: 0px; + text-shadow: none; + display: inline-block; + text-align: start; + appearance: textfield; + background-color: -internal-light-dark(rgb(255, 255, 255), rgb(59, 59, 59)); + -webkit-rtl-ordering: logical; + cursor: text; + margin: 0em; + font: 400 13.3333px Arial; + padding: 1px 2px; + border-width: 2px; + border-style: inset; + border-color: -internal-light-dark(rgb(118, 118, 118), rgb(195, 195, 195)); + border-image: initial; +} + +#username .octicon { + vertical-align: middle !important; + margin-right: 10px; +} From 8eaa6c3f16378cd8ccf6b1b237cce717e218ea2e Mon Sep 17 00:00:00 2001 From: ZacharySpiel Date: Tue, 25 Aug 2020 23:18:50 -0700 Subject: [PATCH 07/26] Updated overview layout with progress bar and sorted repos by size. Decreased size in content script for modularity. Fixed toggle in updated repo layout --- .eslintrc.js | 1 + .eslintrc.json | 1 + Repository.js | 44 +- background.js | 1 - content.js | 285 ++--- outline.png => icon.png | Bin manifest.json | 2 +- overview.html | 2386 ++++++++++++++++++++------------------- overview.js | 103 +- overview_page.css | 345 +++++- popup.js | 89 +- styles.css | 12 +- 12 files changed, 1777 insertions(+), 1492 deletions(-) rename outline.png => icon.png (100%) diff --git a/.eslintrc.js b/.eslintrc.js index c1019a0..f2e020c 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -13,5 +13,6 @@ module.exports = { }, rules: { 'no-use-before-define': ['error', { functions: false, classes: false }], + 'no-restricted-syntax': ['error', 'ForInStatement', 'LabeledStatement', 'WithStatement'], }, }; diff --git a/.eslintrc.json b/.eslintrc.json index 0ff20b5..8c7ab6a 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -5,6 +5,7 @@ "prettier/prettier": ["error"] }, "no-use-before-define": ["error", { "functions": false, "classes": false }], + "no-restricted-syntax": ["error", "ForInStatement", "LabeledStatement", "WithStatement"], "env": { "browser": true, "commonjs": true, diff --git a/Repository.js b/Repository.js index a1c1b1b..8304639 100644 --- a/Repository.js +++ b/Repository.js @@ -1,21 +1,20 @@ -updateRepoLayout(); +updateLink(); -function updateRepoLayout() { - let navBarLinks = ''; - - try { - navBarLinks = $('.UnderlineNav-body').find('li').length; - } catch (error) { - return false; - } +/** + * Function name: updateLink + * Updates id of code link in nav bar + */ +function updateLink() { + // add id to code link for easier access in DOM + $('.selected:eq(0)').attr('id', 'codeLink'); createHomePage(); - - return true; } $('#homePage').click(() => { - createHomePage(); + if ($('.selected:eq(0)').text() !== 'Home') { + createHomePage(); + } }); $('#codeLink').click((event) => { @@ -24,12 +23,12 @@ $('#codeLink').click((event) => { }); /** + * Function name: createHomePage * Updates the main page of a repository to only dispay readme file */ function createHomePage() { createHomePageLink(); - // add id to code link for easier access in DOM - $('.selected:eq(0)').attr('id', 'codeLink'); + $('.selected:eq(0)').removeClass('selected'); // toggle display for files in repo @@ -39,13 +38,10 @@ function createHomePage() { $('.Details-content--hidden-not-important:eq(1)').removeClass('d-md-block'); $('.file-navigation:eq(0)').removeClass('d-flex'); - $('#codeLink').removeClass('selected'); - const codeLink = $('#codeLink'); + if (codeLink.attr('aria-current')) { codeLink.removeAttr('aria-current'); - } else { - codeLink.attr('aria-current', 'page'); } $('#homePage').addClass('selected'); @@ -56,7 +52,8 @@ function createHomePage() { } /** - * Display files on repository + * Function name: createAccordionLayout + * Display files in repository inside an dropdown menu */ function createAccordionLayout() { try { @@ -82,6 +79,7 @@ function createAccordionLayout() { } /** + * Function name: updateAccordion * Updates files to collapse and expand */ function updateAccordion() { @@ -100,21 +98,17 @@ function updateAccordion() { } /** + * Function name: createHomePageLink * Appends new link to top nav bar in repository */ function createHomePageLink() { - // check number of existing links - const navBarLinks = $('.UnderlineNav-body').find('li').length; - - if (navBarLinks !== 9 && navBarLinks !== 10) { + if (document.getElementById('homePage') === null) { const newNavLink = document.createElement('li'); newNavLink.className = 'd-flex'; newNavLink.innerHTML = `Home`; $('.UnderlineNav-body').prepend(newNavLink); - } else { - // home page link was already created } } diff --git a/background.js b/background.js index 651c059..ccf8559 100644 --- a/background.js +++ b/background.js @@ -4,7 +4,6 @@ chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) { } }); - chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => { chrome.tabs.sendMessage(tabId, { type: 'CHECK_URL', diff --git a/content.js b/content.js index a9eba0a..c5a1329 100644 --- a/content.js +++ b/content.js @@ -1,20 +1,5 @@ let injected = false; -// Color values for graphs -const colors = [ - '#00498D', - '#01579B', - '#00498D', - '#0277BD', - '#0288D1', - '#039BE5', - '#03A9F4', - '#29B6F6', - '#4FC3F7', - '#81D4FA', - '#B3E5FC', -]; - window.onload = () => { const currentPageUrl = document.location.pathname; @@ -44,6 +29,7 @@ class ToolTipIcon { } /** + * Function name: checkUrl * @param {string} currentUrl - pathname of current url * Checks the windows current URL to determine which tooltips to display */ @@ -75,6 +61,7 @@ function checkUrl(currentUrl) { } /** + * Function name: sortArrayInDescendingOrder * Sorts given array in descending order * @param {int} array */ @@ -85,6 +72,7 @@ function sortArrayInDescendingOrder(array) { } /** + * Function name: checkIsEditingForkedFile * Checks if the user is viewing a file that they do not own */ function checkIsEditingForkedFile() { @@ -94,9 +82,10 @@ function checkIsEditingForkedFile() { ]; try { - var pencilIconLabel = document + const pencilIconLabel = document .getElementsByClassName('tooltipped')[2] .getAttribute('aria-label'); + // check if there is a pencil icon with this aria label return pencilIconLabelsList.includes(pencilIconLabel); } catch (error) { @@ -105,6 +94,7 @@ function checkIsEditingForkedFile() { } /** + * Function name: createForkedFileToolTips * Edits tooltips when viewing a repository that you are not a contributor of */ function createForkedFileToolTips() { @@ -112,6 +102,7 @@ function createForkedFileToolTips() { } /** + * Function name: addProgressBar * @param {int} currentStep - current step in process * @param {int} totalSteps - the total amount of steps in process * @param {string} rootElement - className of HTML element that the progress bar @@ -160,6 +151,7 @@ function addProgressBar(currentStep, totalSteps, rootElement, stepsList) { } /** + * Function name: isProcessCompleted * Checks if issue or pull request was succesfully created and is open in the repo */ function isProcessCompleted() { @@ -173,6 +165,7 @@ function isProcessCompleted() { } /** + * Function name: createSuccessRibbon * Creates ribbon above progress bar to inform the user that the process is successful */ function createSuccessRibbon() { @@ -195,6 +188,7 @@ function createSuccessRibbon() { } /** + * Function name: createFileEditorToolTips * Adds tooltips when editing files (First step) */ function createFileEditorToolTips() { @@ -295,6 +289,7 @@ $.fn.extend({ }); /** + * Function name: createConfirmPullRequestToolTips * Creates tooltips when confirming a change to file (Second step) */ function createConfirmPullRequestToolTips() { @@ -413,6 +408,7 @@ function createConfirmPullRequestToolTips() { } /** + * Function name: changeMergeText * Updates text when there is a merge conflict in a pull request */ function changeMergeText() { @@ -431,6 +427,7 @@ function changeMergeText() { } } /** + * Function name: createReviewPullRequestToolTips * Adds tooltips when reviewing a pull request (Final step) */ function createReviewPullRequestToolTips() { @@ -484,6 +481,7 @@ function createReviewPullRequestToolTips() { } /** + * Function name: createReportIssueToolTips * Adds tooltips to page when opening a new issue report (First step) */ function createReportIssueToolTips() { @@ -505,6 +503,7 @@ function createReportIssueToolTips() { } /** + * Function name: createReviewIssueToolTips * Adds tooltips to page when reviewing a new issue report (Final step) */ function createReviewIssueToolTips() { @@ -539,6 +538,7 @@ function createReviewIssueToolTips() { } /** + * Function name: updateProfileCard * Updates contribution graph to show icon to toggle between graphs */ function updateProfileCard() { @@ -571,6 +571,7 @@ function updateProfileCard() { } /** + *Function name: createCardContainer * Creates structure of profile overview with graphs */ function createCardContainer() { @@ -607,7 +608,7 @@ $(document).ready(() => { }); /** - * function getCommits + * Function name: getCommits * @param {string} username - GitHub username for API * Uses GitHub API to view commit totals for user */ @@ -619,7 +620,7 @@ async function getCommits(repositories, username) { }; const repoObject = {}; - const ctx = document.getElementById('repositories'); + const skillGraphContainer = document.getElementById('skillGraph'); let total = 0; @@ -632,7 +633,7 @@ async function getCommits(repositories, username) { headers: headers, }); - let commitResult = await commitResponse.json(); + const commitResult = await commitResponse.json(); repoObject[repo] = commitResult.length; total += 1; @@ -648,85 +649,25 @@ async function getCommits(repositories, username) { sortArrayInDescendingOrder(data); - commitGraph = new Chart(skillGraphContainer, { - type: 'bar', - data: { - labels: labels, - datasets: [ - { - label: 'Commits', - backgroundColor: colors, - data: data, - }, - ], - }, - options: { - responsive: false, - legend: { display: false }, - title: { - display: true, - text: `Commits per repository for: ${username}`, - }, - scales: { - yAxes: [ - { - ticks: { - beginAtZero: true, - max: 30, - stepSize: 1, - }, - }, - ], - xAxes: [ - { - ticks: { - fontSize: 8, - callback: function (value) { - if (value.length > 4) { - return value.substr(0, 4) + '...'; //truncate - } else { - return value; - } - }, - }, - }, - ], - }, - animation: { - duration: 1, - onProgress: function () { - var chartInstance = this.chart, - ctx = chartInstance.ctx; - - ctx.font = Chart.helpers.fontString( - Chart.defaults.global.defaultFontSize, - Chart.defaults.global.defaultFontStyle, - Chart.defaults.global.defaultFontFamily - ); - ctx.textAlign = 'center'; - ctx.textBaseline = 'bottom'; + const graphTitle = `Commits per repository for: ${username}`; - this.data.datasets.forEach(function (dataset, i) { - var meta = chartInstance.controller.getDatasetMeta(i); - meta.data.forEach(function (bar, index) { - if (dataset.data[index] > 0) { - var data = dataset.data[index]; - ctx.fillText(data, bar._model.x, bar._model.y); - } - }); - }); - }, - }, - }, - }); + createNewBarGraph(skillGraphContainer, graphTitle, labels, data); } /** - * function getRepos + * Function name: getRepos * @param {string} username - GitHub username for API * Uses GitHub API to view programming languages for user */ async function getRepos(username) { + const graphTitle = `Programming languge totals for ${username}'s repositories`; + const repoGraphContainer = document.getElementById('myChart'); + const MAX_COUNT = 10; + + const languages = []; + const repositoryNames = []; + const repositoriesObject = {}; + const oAuthToken = ''; const url = `https://api.github.com/users/${username}/repos`; @@ -737,102 +678,41 @@ async function getRepos(username) { }, }); - const result = await response.json(); + const repositories = await response.json(); - const languages = []; - const repositoryNames = []; - let labels = {}; - let dataSet = {}; + let graphLabels = {}; + let graphDataSet = {}; let total = 0; - result.forEach((index) => { - if (index.language != null && total < 10) { - languages.push(index.language); - repositoryNames.push(index.name); + repositories.forEach((repository) => { + if (repository.language != null && total < MAX_COUNT) { + languages.push(repository.language); + repositoryNames.push(repository.name); total += 1; } }); getCommits(repositoryNames, username); - const repoGraphContainer = document.getElementById('myChart'); - - const repositoriesObject = {}; - for (let index = 0; index < languages.length; index += 1) { - if (!repositoriesObject[languages[index]]) { + if (repositoriesObject[languages[index]] === undefined) { repositoriesObject[languages[index]] = 0; } repositoriesObject[languages[index]] += 1; } - labels = Object.keys(repositoriesObject); - dataSet = Object.values(repositoriesObject); + graphLabels = Object.keys(repositoriesObject); + graphDataSet = Object.values(repositoriesObject); // use b - a for desc order and a - b for asc order - labels.sort((a, b) => { + graphLabels.sort((a, b) => { return repositoriesObject[b] - repositoriesObject[a]; }); - sortArrayInDescendingOrder(dataSet); + sortArrayInDescendingOrder(graphDataSet); - repositoryGraph = new Chart(repoGraphContainer, { - type: 'bar', - data: { - labels: labels, - datasets: [ - { - label: 'Repositories', - backgroundColor: colors, - data: dataSet, - }, - ], - }, - options: { - responsive: false, - legend: { display: false }, - title: { - display: true, - text: `Programming languge totals for ${username}'s repositories`, - }, - scales: { - yAxes: [ - { - ticks: { - beginAtZero: true, - stepSize: 1, - }, - }, - ], - }, - animation: { - duration: 1, - onProgress: function () { - var chartInstance = this.chart, - ctx = chartInstance.ctx; - - ctx.font = Chart.helpers.fontString( - Chart.defaults.global.defaultFontSize, - Chart.defaults.global.defaultFontStyle, - Chart.defaults.global.defaultFontFamily - ); - ctx.textAlign = 'center'; - ctx.textBaseline = 'bottom'; - - this.data.datasets.forEach(function (dataset, i) { - var meta = chartInstance.controller.getDatasetMeta(i); - meta.data.forEach(function (bar, index) { - if (dataset.data[index] > 0) { - var data = dataset.data[index]; - ctx.fillText(data, bar._model.x, bar._model.y); - } - }); - }); - }, - }, - }, - }); + createNewBarGraph(repoGraphContainer, graphTitle, graphLabels, graphDataSet); } /** @@ -855,18 +735,18 @@ function getApis(username) { */ function createApiGraph(userData, username) { const apiGraphContainer = document.getElementById('commitsGraph'); - - const apis = []; + const apiGraphTitle = `Total commits per api for ${username}`; + const MAX_COUNT = 10; + const apiTitles = []; const apiTotals = []; - const languages = []; let total = 0; userData.Repos.forEach((index) => { index.API.apis.forEach((api) => { - if (total < 10) { - apis.push(api.name); + if (total < MAX_COUNT) { + apiTitles.push(api.name); apiTotals.push(api.count); total += 1; } @@ -877,19 +757,44 @@ function createApiGraph(userData, username) { }); }); - sortArrayInDescendingOrder(apis); + sortArrayInDescendingOrder(apiTitles); sortArrayInDescendingOrder(apiTotals); - apiGraph = new Chart(apiGraphContainer, { + createNewBarGraph(apiGraphContainer, apiGraphTitle, apiTitles, apiTotals); +} + +/** + * Function createNewBarGraph + * @param {string} container - container to append new chart + * @param {string} graphTitle - title of graph + * @param {[string]} graphLabels - labels for each bar in graph + * @param {[int]} graphData - data points for each bar in graph + */ +function createNewBarGraph(container, graphTitle, graphLabels, graphData) { + const colors = [ + '#00498D', + '#01579B', + '#00498D', + '#0277BD', + '#0288D1', + '#039BE5', + '#03A9F4', + '#29B6F6', + '#4FC3F7', + '#81D4FA', + '#B3E5FC', + ]; + + const barGraph = new Chart(container, { type: 'bar', data: { - labels: apis, + labels: graphLabels, datasets: [ { - label: 'Total Commits: ', - data: apiTotals, + label: 'Commits', backgroundColor: colors, + data: graphData, }, ], }, @@ -898,7 +803,7 @@ function createApiGraph(userData, username) { legend: { display: false }, title: { display: true, - text: `Total commits per api for ${username}`, + text: graphTitle, }, scales: { yAxes: [ @@ -913,12 +818,11 @@ function createApiGraph(userData, username) { { ticks: { fontSize: 8, - callback: function (value) { + callback(value) { if (value.length > 4) { - return value.substr(0, 4) + '...'; - } else { - return value; + return `${value.substr(0, 4)}...`; } + return value; }, }, }, @@ -926,9 +830,9 @@ function createApiGraph(userData, username) { }, animation: { duration: 1, - onProgress: function () { - var chartInstance = this.chart, - ctx = chartInstance.ctx; + onProgress() { + const chartInstance = this.chart; + const { ctx } = chartInstance; ctx.font = Chart.helpers.fontString( Chart.defaults.global.defaultFontSize, @@ -938,11 +842,11 @@ function createApiGraph(userData, username) { ctx.textAlign = 'center'; ctx.textBaseline = 'bottom'; - this.data.datasets.forEach(function (dataset, i) { - var meta = chartInstance.controller.getDatasetMeta(i); - meta.data.forEach(function (bar, index) { + this.data.datasets.forEach((dataset, dataIndex) => { + const meta = chartInstance.controller.getDatasetMeta(dataIndex); + meta.data.forEach((bar, index) => { if (dataset.data[index] > 0) { - var data = dataset.data[index]; + const data = dataset.data[index]; ctx.fillText(data, bar._model.x, bar._model.y); } }); @@ -954,9 +858,9 @@ function createApiGraph(userData, username) { } /** - * Listen to changes from background + * Listen to changes from background script */ -chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => { +chrome.runtime.onMessage.addListener((msg) => { if (msg.message === 'progress_bar') { $('.progressbar').toggleClass('hiddenDisplay'); } else if (msg.message === 'icon') { @@ -964,9 +868,8 @@ chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => { } else if (msg.message === 'ribbon') { $('.successRibbon').toggleClass('hiddenDisplay'); } else if (msg.type === 'CHECK_URL') { - if (!injected) { - injected = true; - checkUrl(document.location.pathname); + if (checkIsEditingForkedFile()) { + createForkedFileToolTips(); } } }); diff --git a/outline.png b/icon.png similarity index 100% rename from outline.png rename to icon.png diff --git a/manifest.json b/manifest.json index 9aa8b3e..b657e86 100644 --- a/manifest.json +++ b/manifest.json @@ -7,7 +7,7 @@ "browser_action": { "name": "GitHub Plugin Development", "icons": ["icon.png"], - "default_icon": "outline.png", + "default_icon": "icon.png", "default_popup": "index.html" }, "content_scripts": [ diff --git a/overview.html b/overview.html index 06f79ce..adb80c9 100644 --- a/overview.html +++ b/overview.html @@ -6,1297 +6,1239 @@ -
+ + +
-
- +
+ +
+ - @zachspiel - zachspiel - - -
- - -
- -
- -
- - - -
- -
- - - - - - -
- -
-
- - - - - - - New repository - - - - Import repository + +
- +
+ - New gist - + + + + + + New repository + - - New organization - + + Import repository + -
-
- This repository -
- - New issue - - -
-
+ + New gist + -
-
- - @zachspiel + + New organization + - - - - -
-
-
+ New project + + +
+
+ +
+
+ + @zachspiel - + +
+ +
+
+
-
- -
-
+ +
- + +
-
-
- Set status +
+ Set status +
-
- - - -
+ - -
- -

Edit status

-
- - -
-
-
+ + +
+ +

Edit status

+
+ + +
+
+
- - - + + + + + + + + + + +
+ Could not update your status, please try again. +
+
+ -
-
- -
+ +
+
+
-
-
+ +
- +
+ 🎯 +
+
+ Focusing +
+ +
-
- - + When others mention you, assign you, or request your review, + GitHub will let them know that you have limited availability. +

-
-
- - -

- When others mention you, assign you, or request your review, GitHub - will let them know that you have limited availability. -

+
+
+ Clear status
-
-
-
-
- Clear status -
- -
- -
- Never -
-
- -
    -
  • - -
    • -
  • -
  • - -
    • -
  • - -
    • -
  • - -
    • -
  • - -
    • -
  • - -
    • -
-
- -
- - -
-
- - -
- -
-
-
-
-
+ Never +
+
+ - Your profile +
    +
  • + +
    • +
  • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
+ + +
- Your repositories + + +
+ + +
+ + + + + +
- Your organizations + Your profile - Your projects + Your repositories - Your stars - Your gists + Your organizations -
+ Your projects -
- - -
- Help - Settings - -
- +
+ +
+ + +
- - -
- - - - + Settings + +
+ + + + +
+ + + + +

+ + + + + + + + + + + +
+ diff --git a/overview.js b/overview.js index 13e4eb1..4e652ff 100644 --- a/overview.js +++ b/overview.js @@ -73,6 +73,7 @@ document.getElementsByClassName('close')[0].onclick = () => { }; /** + * Function name: createCompleteOverview * @param {JSON} userData - JSON result of all repositories for the user * @param {string} username - GitHub username * Creates cards containing total commits and top langauge @@ -81,6 +82,7 @@ async function createCompleteOverview(userData, username) { const FIRST_PAGE = 1; const MAX_CARDS_PER_ROW = 4; const EMPTY_ROW = 0; + const allRepositories = []; let isNewPage = false; let rowElements = ''; @@ -103,7 +105,7 @@ async function createCompleteOverview(userData, username) { const langaugeColor = await getLanguageColor(repo.language); - let repositoryCard = new Card( + const repositoryCard = new Card( repo.name, repo.html_url, totalCommits, @@ -111,13 +113,19 @@ async function createCompleteOverview(userData, username) { langaugeColor ); - repositoryCard.createCard(username); + allRepositories.push(repositoryCard); + } + + sortArrayInDescendingOrder(allRepositories); + + allRepositories.forEach((repository) => { + repository.createCard(username); - let totalRows = document.getElementsByClassName('row').length; + const totalRows = document.getElementsByClassName('row').length; let lastRowCardCount = 0; - let newRow = document.createElement('div'); + newRow = document.createElement('div'); newRow.className = 'row'; if (totalRows !== 0) { @@ -131,8 +139,21 @@ async function createCompleteOverview(userData, username) { $(newRow).insertAfter('.row:last'); } - $('.row:last').append(repositoryCard.cardContainer); - } + $('.row:last').append(repository.cardContainer); + }); + + return true; +} + +/** + * Function name: sortArrayInDescendingOrder + * Sorts given array in descending order + * @param {Card} array - all repositories for user + */ +function sortArrayInDescendingOrder(array) { + array.sort((a, b) => { + return b.commitTotal - a.commitTotal; + }); } /** @@ -156,10 +177,15 @@ async function getRepos(username) { const result = await response.json(); - createCompleteOverview(result, username); + const repositoriesCreated = await createCompleteOverview(result, username); + + if (repositoriesCreated) { + document.getElementById('progressBar').style.display = 'none'; + } } /** + * Function name: getAllCommits * @param {string} repositoryName - GitHub repository * @param {string} username - GitHub username * @param {int} page - Current page in api pagination @@ -190,30 +216,6 @@ async function getAllCommits(repositoryName, username, page) { return totalCommits; } -/** - * @param {string} repositoryName - GitHub repository - * @param {string} username - GitHub username - * returns object of languages for specific repository - */ -async function getAllLanguages(repository, username) { - const oAuthToken = ''; - - const apiHeaders = { - Authorization: `Token ${oAuthToken}`, - }; - - const languageUrl = `https://api.github.com/repos/${username}/${repository}/languages`; - - const result = await fetch(languageUrl, { - method: 'GET', - headers: apiHeaders, - }); - - const langaugeData = await result.json(); - - return langaugeData; -} - /** * Function name: getAllCommitMessages * @param {string} repositoryName - GitHub repository @@ -257,6 +259,7 @@ async function getAllCommitMessages(repository, username, page) { } /** + * Function name: updateTotalIssues * @param {string} repository - repository name * @param {string} username - GitHub username * @param {int} page - current page @@ -271,6 +274,7 @@ async function updateTotalIssues(repository, username, page) { } /** + * Function name: getTotalIssues * @param {string} repository - repository name * @param {string} username - GitHub username * @param {int} page - curent page @@ -296,6 +300,7 @@ async function getTotalIssues(repository, username, page) { } /** + * Function name: updateModal * @param {string} message * @param {string} createdDate * Appends new commit message to modal @@ -335,6 +340,7 @@ async function getLanguageColor(language) { } /** + * Function name: getAllIssues * @param {string} repository - current repository * @param {string} username - GitHub username * @param {int} page - current page @@ -366,13 +372,34 @@ async function getAllIssues(repository, username, page) { } } -$('#repo-issues').click(() => { - document.querySelectorAll('.message-title').forEach((element) => element.remove()); - const currentRepository = document.getElementById('current-repository').innerHTML; +$('#repo-issues-link').click(() => { + if ($('#commit-messages-link').attr('aria-current')) { + $('#commit-messages-link').removeAttr('aria-current'); + $('#repo-issues-link').attr('aria-current', 'page'); - const FIRST_PAGE = 1; + document.querySelectorAll('.message-title').forEach((element) => element.remove()); + const currentRepository = document.getElementById('current-repository').innerHTML; - chrome.storage.sync.get('username', (result) => { - getAllIssues(currentRepository, result.username, FIRST_PAGE); - }); + const FIRST_PAGE = 1; + + chrome.storage.sync.get('username', (result) => { + getAllIssues(currentRepository, result.username, FIRST_PAGE); + }); + } +}); + +$('#commit-messages-link').click(() => { + if ($('#repo-issues-link').attr('aria-current')) { + $('#repo-issues-link').removeAttr('aria-current'); + $('#commit-messages-link').attr('aria-current', 'page'); + + document.querySelectorAll('.message-title').forEach((element) => element.remove()); + const currentRepository = document.getElementById('current-repository').innerHTML; + + const FIRST_PAGE = 1; + + chrome.storage.sync.get('username', (result) => { + getAllCommitMessages(currentRepository, result.username, FIRST_PAGE); + }); + } }); diff --git a/overview_page.css b/overview_page.css index 180cda6..cd9a392 100644 --- a/overview_page.css +++ b/overview_page.css @@ -132,11 +132,6 @@ html { border-radius: 6px; } -.label:hover { - background-color: #0366d6; - color: white; -} - /* The Modal (background) */ .modal { display: none; @@ -375,7 +370,7 @@ a { .Header-link { font-weight: 600; - color: #fff; + color: #fff !important; white-space: nowrap; } @@ -388,11 +383,6 @@ a { max-width: 272px; } - .py-md-0 { - padding-top: 0 !important; - padding-bottom: 0 !important; - } - .flex-md-nowrap { flex-wrap: nowrap !important; } @@ -427,12 +417,25 @@ a { } .header-search-current.header-search { - max-width: 272px; + max-width: 272px !important; } .flex-md-self-auto { align-self: auto !important; } + + .mt-md-0 { + margin-top: 0 !important; + } + + .flex-md-order-none { + order: inherit !important; + } + + .py-md-3 { + padding-top: 16px !important; + padding-bottom: 16px !important; + } } @media (min-width: 1012px) { @@ -673,3 +676,321 @@ input { vertical-align: middle !important; margin-right: 10px; } + +.container-lg { + max-width: 1012px; +} + +.container-lg, +.container-xl { + margin-right: auto; + margin-left: auto; +} + +.mt-6 { + margin-top: 40px !important; +} + +.pb-2 { + padding-bottom: 8px !important; +} + +.pt-6 { + padding-top: 40px !important; +} + +.flex-justify-center { + justify-content: center !important; +} + +ol, +ul { + padding-left: 0; + margin-top: 0; + margin-bottom: 0; +} + +ul { + display: block; + list-style-type: disc; + margin-block-start: 1em; + margin-block-end: 1em; + margin-inline-start: 0px; + margin-inline-end: 0px; + padding-inline-start: 40px; +} + +.mr-3 { + margin-right: 16px !important; +} + +li { + display: list-item; + text-align: -webkit-match-parent; +} + +.list-style-none { + list-style: none !important; +} + +.footer-octicon { + color: #c6cbd1; +} + +@media (min-width: 1012px) { + .d-lg-block { + display: block !important; + } +} + +.flex-wrap { + flex-wrap: wrap !important; +} + +.border-top { + border-top: 1px solid #e1e4e8 !important; +} + +.border-gray-light { + border-color: #eaecef !important; +} + +.show-on-focus { + margin: 0; + clip: rect(1px, 1px, 1px, 1px); +} + +.show-on-focus, +.sr-only { + position: absolute; + width: 1px; + height: 1px; + overflow: hidden; +} + +.text-white { + color: #fff !important; +} + +.bg-blue { + background-color: #0366d6 !important; +} + +.progress-pjax-loader { + z-index: 99999; + height: 2px; + background: transparent; + opacity: 0; + transition: opacity 0.4s linear 0.4s; +} + +.Progress { + display: flex; + height: 8px; + overflow: hidden; + background-color: #e1e4e8; + border-radius: 6px; + outline: 1px solid transparent; +} + +.position-fixed { + position: fixed !important; +} + +.p-0 { + padding: 0 !important; +} + +.notification-indicator .mail-status { + position: absolute; + top: -6px; + left: 6px; + z-index: 2; + display: none; + width: 14px; + height: 14px; + color: #fff; + background-image: linear-gradient(#54a3ff, #006eed); + background-clip: padding-box; + border: 2px solid #24292e; + border-radius: 50%; +} + +.notification-indicator .mail-status.unread { + display: inline-block; +} + +.Box .section-focus .edit-section, +[data-catalyst], +auto-complete, +details-dialog, +details-menu, +file-attachment, +filter-input, +image-crop, +in-viewport, +include-fragment, +poll-include-fragment, +remote-input, +tab-container, +text-expander { + display: block; +} + +article, +aside, +details, +figcaption, +figure, +footer, +header, +main, +menu, +nav, +section { + display: block; +} + +.details-reset > summary { + list-style: none; +} + +details summary { + cursor: pointer; +} + +summary { + display: list-item; +} + +.dropdown-caret { + display: inline-block; + width: 0; + height: 0; + vertical-align: middle; + content: ''; + border-top-style: solid; + border-top-width: 4px; + border-right: 4px solid transparent; + border-bottom: 0 solid transparent; + border-left: 4px solid transparent; +} + +details:not([open]) > :not(summary) { + display: none !important; +} + +.mt-n2 { + margin-top: -8px !important; +} + +.dropdown-item { + display: block; + padding: 4px 8px 4px 16px; + overflow: hidden; + color: #24292e; + text-overflow: ellipsis; + white-space: nowrap; +} + +.mr-0 { + margin-right: 0 !important; +} + +.px-3 { + padding-right: 16px !important; +} + +.pl-3, +.px-3 { + padding-left: 16px !important; +} + +.p-3 { + padding: 16px !important; +} + +.d-block { + display: block !important; +} + +.header-nav-current-user .css-truncate-target { + max-width: 100%; +} + +.css-truncate.css-truncate-overflow, +.css-truncate .css-truncate-overflow, +.css-truncate.css-truncate-target, +.css-truncate .css-truncate-target { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +b, +strong { + font-weight: 600; +} + +.user-status-container, +.user-status-container .team-mention, +.user-status-container .user-mention { + white-space: normal !important; +} + +details:not([open]) > :not(summary) { + display: none !important; +} + +.dropdown-menu-sw { + right: 0; + left: auto; +} + +.dropdown-item.btn-link, +.dropdown-signout { + width: 100%; + text-align: left; +} + +.feature-preview-details .feature-preview-indicator { + top: 9px; + right: 10px; + left: inherit; + width: 10px; + height: 10px; + border: 0; +} + +.feature-preview-indicator { + position: absolute; + top: 0; + left: 13px; + z-index: 2; + width: 14px; + height: 14px; + color: #fff; + background-image: linear-gradient(#54a3ff, #006eed); + background-clip: padding-box; + border: 2px solid #24292e; + border-radius: 50%; +} + +.btn-link { + display: inline-block; + padding: 0; + font-size: inherit; + color: #0366d6; + text-decoration: none; + white-space: nowrap; + cursor: pointer; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + background-color: initial; + border: 0; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; +} diff --git a/popup.js b/popup.js index 97ef2dd..f74c715 100644 --- a/popup.js +++ b/popup.js @@ -1,56 +1,63 @@ - function progressBarPopUp() { - chrome.tabs.query({currentWindow: true, active: true}, function (tabs){ - var activeTab = tabs[0]; - chrome.tabs.sendMessage(activeTab.id, {"message": "progress_bar"}); - - }); +/** + * Function name: progressBarPopUp + * Toggles display for a progress bar on page, if any + */ +function progressBarPopUp() { + chrome.tabs.query({ currentWindow: true, active: true }, function (tabs) { + const activeTab = tabs[0]; + chrome.tabs.sendMessage(activeTab.id, { message: 'progress_bar' }); + }); } +/** + * Function name: iconPopUp + * Toggles display for icons on page, if any + */ function iconPopUp() { - chrome.tabs.query({currentWindow: true, active: true}, function (tabs){ - var activeTab = tabs[0]; - chrome.tabs.sendMessage(activeTab.id, {"message": "icon"}); - - if(document.getElementById("iconBtn").checked ) { - chrome.storage.local.set({'iconStatus': true}); - } - else { - chrome.storage.local.set({'iconStatus': false}); + chrome.tabs.query({ currentWindow: true, active: true }, function (tabs) { + const activeTab = tabs[0]; + chrome.tabs.sendMessage(activeTab.id, { message: 'icon' }); + + if (document.getElementById('iconBtn').checked) { + chrome.storage.local.set({ iconStatus: true }); + } else { + chrome.storage.local.set({ iconStatus: false }); } - }); + }); } +/** + * Function name: ribbonPopUp + * Toggles display for ribbon on page, if any + */ function ribbonPopUp() { - chrome.tabs.query({currentWindow: true, active: true}, function (tabs){ - var activeTab = tabs[0]; - chrome.tabs.sendMessage(activeTab.id, {"message": "ribbon"}); - - }); + chrome.tabs.query({ currentWindow: true, active: true }, (tabs) => { + const activeTab = tabs[0]; + chrome.tabs.sendMessage(activeTab.id, { message: 'ribbon' }); + }); } -document.addEventListener("DOMContentLoaded", function() { - - chrome.storage.local.get('iconStatus', function(status){ - var switchStatus = status.iconStatus; - - if(switchStatus) { - document.getElementById('iconBtn').checked = true; - } else { - document.getElementById('iconBtn').checked = false; - } +document.addEventListener('DOMContentLoaded', () => { + chrome.storage.local.get('iconStatus', (status) => { + const switchStatus = status.iconStatus; - console.log( document.getElementsByClassName('helpIcon')[0].style.display ); - if( document.getElementsByClassName('helpIcon')[0].style.display == 'inline-block' && switchStatus ) { - document.getElementById('iconBtn').checked = true; - } - }); + if (switchStatus) { + document.getElementById('iconBtn').checked = true; + } else { + document.getElementById('iconBtn').checked = false; + } - - document.getElementById('iconBtn').addEventListener("change", iconPopUp); + if ( + document.getElementsByClassName('helpIcon')[0].style.display == 'inline-block' && + switchStatus + ) { + document.getElementById('iconBtn').checked = true; + } + }); - document.getElementById('ribbonBtn').addEventListener("change", ribbonPopUp); + document.getElementById('iconBtn').addEventListener('change', iconPopUp); - document.getElementById('progressBarBtn').addEventListener("change", progressBarPopUp); + document.getElementById('ribbonBtn').addEventListener('change', ribbonPopUp); + document.getElementById('progressBarBtn').addEventListener('change', progressBarPopUp); }); - diff --git a/styles.css b/styles.css index 795558d..dab206e 100644 --- a/styles.css +++ b/styles.css @@ -41,7 +41,7 @@ .progressbar li:after { width: 100%; height: 2px; - content: ""; + content: ''; position: absolute; background-color: #b8b8b8; top: 15px; @@ -69,7 +69,7 @@ } .progressbar li.completed:before { - content: "\2713" !important; + content: '\2713' !important; background-color: #d4edda !important; border-color: #55b776; } @@ -135,7 +135,7 @@ } .helpIconText:before { - content: ""; + content: ''; display: block; width: 0; height: 0; @@ -189,7 +189,7 @@ border-radius: 4px; box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.25); - font-family: BlinkMacSystemFont, "Segoe UI", sans-serif; + font-family: BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 2rem; color: #fff; text-transform: uppercase; @@ -300,7 +300,7 @@ } .accordion:after { - content: "Click to show all files \002B"; + content: 'Click to show all files \002B'; color: #777; font-weight: bold; margin-left: 15px; @@ -308,7 +308,7 @@ } .active:after { - content: "Click to collapse \2212"; + content: 'Click to collapse \2212'; } .panel { From 526889bc415be192aac3a094faad3b652c7f8a8f Mon Sep 17 00:00:00 2001 From: ZacharySpiel Date: Mon, 31 Aug 2020 20:09:21 -0700 Subject: [PATCH 08/26] Updated overview page to dynamically show user name and image. --- .eslintrc.js | 18 - .eslintrc.json | 15 - .gitignore | 3 + .prettierrc | 4 - background.js | 14 - background/background.js | 23 + content.js => content/content.js | 61 +- overview.html => content/overview.html | 62 +- overview.js => content/overview.js | 141 ++- Repository.js => content/repositoryLayout.js | 0 colors.json => data/colors.json | 0 data/result.json | 903 ++++++++++++++++++ Chart.bundle.js => libraries/Chart.bundle.js | 0 jquery.min.js => libraries/jquery.min.js | 0 manifest.json | 16 +- icon.png => popup/icon.png | Bin index.html => popup/index.html | 11 +- popup.js => popup/popup.js | 25 +- result.json | 682 ------------- overview_page.css => styles/overview_page.css | 64 +- styles.css => styles/styles.css | 0 21 files changed, 1188 insertions(+), 854 deletions(-) delete mode 100644 .eslintrc.js delete mode 100644 .eslintrc.json create mode 100644 .gitignore delete mode 100644 .prettierrc delete mode 100644 background.js create mode 100644 background/background.js rename content.js => content/content.js (94%) rename overview.html => content/overview.html (98%) rename overview.js => content/overview.js (72%) rename Repository.js => content/repositoryLayout.js (100%) rename colors.json => data/colors.json (100%) create mode 100644 data/result.json rename Chart.bundle.js => libraries/Chart.bundle.js (100%) rename jquery.min.js => libraries/jquery.min.js (100%) rename icon.png => popup/icon.png (100%) rename index.html => popup/index.html (91%) rename popup.js => popup/popup.js (74%) delete mode 100644 result.json rename overview_page.css => styles/overview_page.css (94%) rename styles.css => styles/styles.css (100%) diff --git a/.eslintrc.js b/.eslintrc.js deleted file mode 100644 index f2e020c..0000000 --- a/.eslintrc.js +++ /dev/null @@ -1,18 +0,0 @@ -module.exports = { - env: { - browser: true, - es2020: true, - webextensions: true, - jquery: true, - }, - extends: ['airbnb-base', 'prettier'], - plugins: ['prettier'], - parserOptions: { - ecmaVersion: 11, - sourceType: 'module', - }, - rules: { - 'no-use-before-define': ['error', { functions: false, classes: false }], - 'no-restricted-syntax': ['error', 'ForInStatement', 'LabeledStatement', 'WithStatement'], - }, -}; diff --git a/.eslintrc.json b/.eslintrc.json deleted file mode 100644 index 8c7ab6a..0000000 --- a/.eslintrc.json +++ /dev/null @@ -1,15 +0,0 @@ -{ - "extends": ["airbnb", "prettier"], - "plugins": ["prettier"], - "rules": { - "prettier/prettier": ["error"] - }, - "no-use-before-define": ["error", { "functions": false, "classes": false }], - "no-restricted-syntax": ["error", "ForInStatement", "LabeledStatement", "WithStatement"], - "env": { - "browser": true, - "commonjs": true, - "es6": true, - "jquery": true - } -} diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..f2ea25f --- /dev/null +++ b/.gitignore @@ -0,0 +1,3 @@ +.eslintrc.json +.eslintrc.js +.prettierrc \ No newline at end of file diff --git a/.prettierrc b/.prettierrc deleted file mode 100644 index 5ac85e2..0000000 --- a/.prettierrc +++ /dev/null @@ -1,4 +0,0 @@ -{ - "printWidth": 100, - "singleQuote": true -} diff --git a/background.js b/background.js deleted file mode 100644 index ccf8559..0000000 --- a/background.js +++ /dev/null @@ -1,14 +0,0 @@ -chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) { - if (msg.type === 'OPEN_COMPLETE_OVERVIEW') { - chrome.tabs.create({ url: chrome.runtime.getURL('overview.html') }); - } -}); - -chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => { - chrome.tabs.sendMessage(tabId, { - type: 'CHECK_URL', - }); - chrome.tabs.sendMessage(tabId, { - type: 'UPDATE_REPO_LAYOUT', - }); -}); diff --git a/background/background.js b/background/background.js new file mode 100644 index 0000000..bdad1d6 --- /dev/null +++ b/background/background.js @@ -0,0 +1,23 @@ +chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => { + chrome.tabs.sendMessage(tabId, { + type: 'CHECK_URL', + }); + chrome.tabs.sendMessage(tabId, { + type: 'UPDATE_REPO_LAYOUT', + }); +}); + +/** + * Function name: handleMessage + * @param {string} msg + * @param {string} sender + * @param {string} sendResponse + * Responds to changes in content script + */ +function handleMessage(msg, sender, sendResponse) { + if (msg.type === 'OPEN_COMPLETE_OVERVIEW') { + chrome.tabs.create({ url: chrome.runtime.getURL('content/overview.html') }); + } +} + +chrome.runtime.onMessage.addListener(handleMessage); diff --git a/content.js b/content/content.js similarity index 94% rename from content.js rename to content/content.js index c5a1329..bf7872d 100644 --- a/content.js +++ b/content/content.js @@ -1,10 +1,11 @@ let injected = false; -window.onload = () => { +window.onload = async () => { const currentPageUrl = document.location.pathname; if (!injected) { injected = true; + checkUrl(currentPageUrl); } }; @@ -30,7 +31,6 @@ class ToolTipIcon { /** * Function name: checkUrl - * @param {string} currentUrl - pathname of current url * Checks the windows current URL to determine which tooltips to display */ function checkUrl(currentUrl) { @@ -62,8 +62,8 @@ function checkUrl(currentUrl) { /** * Function name: sortArrayInDescendingOrder + * @param {int} array - array to be sorted * Sorts given array in descending order - * @param {int} array */ function sortArrayInDescendingOrder(array) { array.sort((a, b) => { @@ -176,7 +176,7 @@ function createSuccessRibbon() { } const successRibbonContainer = document.createElement('div'); - successRibbonContainer.className = 'successRibbon'; + successRibbonContainer.className = 'successRibbon text-center'; const ribbonMessage = document.createTextNode( `The ${processType} was created successfully and will be reviewed shortly` @@ -197,6 +197,12 @@ function createFileEditorToolTips() { // progress bar above editor addProgressBar(1, 3, '.js-blob-form', steps); + if (document.getElementsByClassName('flash-messages ')[0] !== null) { + $('.flash-messages').addClass('text-center'); + document.getElementsByClassName('flash')[0].innerText = + 'You are now editing the file, make your changes below and press the green button to continue'; + } + // icon to right of file name input const fileNameChangeText = 'This is the file name, changing it will create a new file with the new name.'; @@ -490,6 +496,16 @@ function createReportIssueToolTips() { // progress bar above editor addProgressBar(1, 2, '.new_issue', steps); + $('.input-block').css({ width: '90%', display: 'inline-block' }); + + const iconTitleText = 'Enter a descriptive name of the issue report here. This is required'; + + const titleIcon = new ToolTipIcon('H4', 'helpIcon', iconTitleText, '.input-block'); + + titleIcon.createIcon(); + + $(titleIcon.toolTipElement).insertAfter(titleIcon.gitHubElement); + const submitButtonText = 'By clicking this, it will submit the issue to the owner of the repository'; @@ -543,8 +559,8 @@ function createReviewIssueToolTips() { */ function updateProfileCard() { const toggleButton = document.createElement('button'); - toggleButton.className = 'btn mb-3 toggleBtn'; - toggleButton.innerText = 'Click to show more information'; + toggleButton.className = 'btn btn-primary mb-3 ml-md-3 toggleBtn'; + toggleButton.innerText = 'Show more information'; const username = document.getElementsByClassName('vcard-username')[0].innerHTML; @@ -557,12 +573,16 @@ function updateProfileCard() { $(toggleButton).insertAfter('.contrib-footer '); $('.toggleBtn').click(() => { - if ($('.toggleBtn').text() === 'Click to show more information') { + if ($('.toggleBtn').text() === 'Show more information') { $('.toggleBtn').text('X'); $('.toggleBtn').addClass('closeButton'); + $('.toggleBtn').removeClass('btn-primary'); + $('.toggleBtn').removeClass('ml-md-3'); } else { - $('.toggleBtn').text('Click to show more information'); + $('.toggleBtn').text('Show more information'); $('.toggleBtn').removeClass('closeButton'); + $('.toggleBtn').addClass('btn-primary'); + $('.toggleBtn').addClass('ml-md-3'); } $('.back').toggleClass('hovered'); $('#js-contribution-activity').toggleClass('hidden'); @@ -571,7 +591,7 @@ function updateProfileCard() { } /** - *Function name: createCardContainer + * Function name: createCardContainer * Creates structure of profile overview with graphs */ function createCardContainer() { @@ -613,15 +633,16 @@ $(document).ready(() => { * Uses GitHub API to view commit totals for user */ async function getCommits(repositories, username) { - const oAuthToken = ''; + const skillGraphContainer = document.getElementById('skillGraph'); + + const oAuthToken = '28db103714940724658ee37c92501fbfd7ec76a5'; - const headers = { + const apiHeader = { Authorization: `Token ${oAuthToken}`, }; const repoObject = {}; - const skillGraphContainer = document.getElementById('skillGraph'); let total = 0; for (const repo of repositories) { @@ -630,7 +651,7 @@ async function getCommits(repositories, username) { const commitResponse = await fetch(commitUrl, { method: 'GET', - headers: headers, + headers: apiHeader, }); const commitResult = await commitResponse.json(); @@ -668,14 +689,16 @@ async function getRepos(username) { const repositoryNames = []; const repositoriesObject = {}; - const oAuthToken = ''; + const oAuthToken = '28db103714940724658ee37c92501fbfd7ec76a5'; + + const apiHeader = { + Authorization: `Token ${oAuthToken}`, + }; const url = `https://api.github.com/users/${username}/repos`; const response = await fetch(url, { method: 'GET', - headers: { - Authorization: `Token ${oAuthToken}`, - }, + headers: apiHeader, }); const repositories = await response.json(); @@ -721,7 +744,7 @@ async function getRepos(username) { * Creates graph of contribitions with API's */ function getApis(username) { - const url = chrome.runtime.getURL('result.json'); + const url = chrome.runtime.getURL('data/result.json'); fetch(url) .then((response) => response.json()) @@ -765,7 +788,7 @@ function createApiGraph(userData, username) { } /** - * Function createNewBarGraph + * Function name: createNewBarGraph * @param {string} container - container to append new chart * @param {string} graphTitle - title of graph * @param {[string]} graphLabels - labels for each bar in graph diff --git a/overview.html b/content/overview.html similarity index 98% rename from overview.html rename to content/overview.html index adb80c9..0f54b77 100644 --- a/overview.html +++ b/content/overview.html @@ -3,7 +3,7 @@ - +
@@ -436,7 +436,10 @@
-