From 37d87a96300675ca850197931f4a43c29f8ddfed Mon Sep 17 00:00:00 2001 From: Renato Pozzi Date: Fri, 22 Nov 2024 11:42:13 +0100 Subject: [PATCH 1/4] chore(github): apply format --- src/content/github.js | 126 ++++++++++++++++++++++-------------------- 1 file changed, 65 insertions(+), 61 deletions(-) diff --git a/src/content/github.js b/src/content/github.js index 377d21fb5..b6a2eed2b 100644 --- a/src/content/github.js +++ b/src/content/github.js @@ -3,130 +3,134 @@ * @urlAlias github.com * @urlRegex *://github.com/* */ -"use strict"; +'use strict' // We need it to get the issue name, the tag value is being changed dynamically const getPaneDescription = async (elem) => { return new Promise((resolve) => { const description = setInterval(() => { - const titleElem = elem.querySelector("#__primerPortalRoot__ bdi"); - const numElem = titleElem.parentElement.lastChild; + const titleElem = elem.querySelector('#__primerPortalRoot__ bdi') + const numElem = titleElem.parentElement.lastChild if (!!titleElem.textContent) { - clearInterval(description); - resolve(`${numElem.textContent} ${titleElem.textContent.trim()}`); + clearInterval(description) + resolve(`${numElem.textContent} ${titleElem.textContent.trim()}`) } - }, 1000); - }); -}; + }, 1000) + }) +} // Issue and Pull Request Page togglbutton.render( - "#partial-discussion-sidebar", + '#partial-discussion-sidebar', { observe: true }, function (elem) { - const numElem = $(".gh-header-number"); - const titleElem = $(".js-issue-title"); - const projectElem = $("h1.public strong a, h1.private strong a"); - const existingTag = $(".discussion-sidebar-item.toggl"); + const numElem = $('.gh-header-number') + const titleElem = $('.js-issue-title') + const projectElem = $('h1.public strong a, h1.private strong a') + const existingTag = $('.discussion-sidebar-item.toggl') // Check for existing tag, create a new one if one doesn't exist or is not the first one // We want button to be the first one because it looks different from the other sidebar items // and looks very weird between them. if (existingTag) { - if (existingTag.parentNode.firstChild.classList.contains("toggl")) { - return; + if (existingTag.parentNode.firstChild.classList.contains('toggl')) { + return } - existingTag.parentNode.removeChild(existingTag); + existingTag.parentNode.removeChild(existingTag) } - let description = titleElem.textContent; + let description = titleElem.textContent if (numElem !== null) { - description = numElem.textContent + " " + description.trim(); + description = numElem.textContent + ' ' + description.trim() } - const div = document.createElement("div"); - div.classList.add("discussion-sidebar-item", "toggl"); + const div = document.createElement('div') + div.classList.add('discussion-sidebar-item', 'toggl') const link = togglbutton.createTimerLink({ - className: "github", + className: 'github', description: description, projectName: projectElem && projectElem.textContent, - }); + }) - div.appendChild(link); - elem.prepend(div); - } -); + div.appendChild(link) + elem.prepend(div) + }, +) // Project Page side pane togglbutton.render( 'div[role="dialog"]:not(.toggl)', { observe: true }, async function (elem) { - const projectElem = document.querySelector("div[role='navigation'] h1"); + const projectElem = document.querySelector("div[role='navigation'] h1") - const description = await getPaneDescription(elem); - const targetParent = document.querySelector("div[data-testid='issue-viewer-metadata-container']"); - const targetChildSection = targetParent && targetParent.querySelector("div[data-testid='sidebar-section']"); + const description = await getPaneDescription(elem) + const targetParent = document.querySelector( + "div[data-testid='issue-viewer-metadata-container']", + ) + const targetChildSection = + targetParent && + targetParent.querySelector("div[data-testid='sidebar-section']") if (targetChildSection === null) { - return; + return } - const div = document.createElement("div"); - div.className = targetChildSection.className; - div.style.paddingLeft = "8px"; + const div = document.createElement('div') + div.className = targetChildSection.className + div.style.paddingLeft = '8px' const link = togglbutton.createTimerLink({ - className: "github", + className: 'github', description: description, - projectName: projectElem ? projectElem.textContent.trim() : "", - }); + projectName: projectElem ? projectElem.textContent.trim() : '', + }) - div.appendChild(link); - targetParent.prepend(div); - } -); + div.appendChild(link) + targetParent.prepend(div) + }, +) // Project Page togglbutton.render( - ".js-project-card-details .js-comment:not(.toggl)", + '.js-project-card-details .js-comment:not(.toggl)', { observe: true }, function (elem) { const getDescription = () => { - const titleElem = $(".js-issue-title"); + const titleElem = $('.js-issue-title') if (!titleElem) { - return ""; + return '' } - const issueNumberElem = $(".js-issue-title + span"); - const issueTitle = titleElem.textContent.trim(); + const issueNumberElem = $('.js-issue-title + span') + const issueTitle = titleElem.textContent.trim() // Check if the text starts with a '#' followed by digits, indicating an issue number if (issueNumberElem && /^#\d+/.test(issueNumberElem.textContent)) { - return issueNumberElem.textContent.trim() + " " + issueTitle; + return issueNumberElem.textContent.trim() + ' ' + issueTitle } - return issueTitle; - }; + return issueTitle + } - const projectElem = $("h1.public strong a, h1.private strong a"); + const projectElem = $('h1.public strong a, h1.private strong a') const link = togglbutton.createTimerLink({ - className: "github", + className: 'github', description: getDescription, projectName: projectElem && projectElem.textContent, - }); + }) const wrapper = createTag( - "div", - "discussion-sidebar-item js-discussion-sidebar-item" - ); - wrapper.appendChild(link); - - const target = $(".discussion-sidebar-item"); - target.parentNode.insertBefore(wrapper, target); - } -); + 'div', + 'discussion-sidebar-item js-discussion-sidebar-item', + ) + wrapper.appendChild(link) + + const target = $('.discussion-sidebar-item') + target.parentNode.insertBefore(wrapper, target) + }, +) From b41128139043c5fcd7b1169038154a9b3c8dba14 Mon Sep 17 00:00:00 2001 From: Renato Pozzi Date: Fri, 22 Nov 2024 11:43:14 +0100 Subject: [PATCH 2/4] feat(github): add support for new issues panel --- src/content/github.js | 47 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 47 insertions(+) diff --git a/src/content/github.js b/src/content/github.js index b6a2eed2b..866c33e9c 100644 --- a/src/content/github.js +++ b/src/content/github.js @@ -60,6 +60,53 @@ togglbutton.render( }, ) +// Issue Beta +togglbutton.render( + '[data-testid="issue-viewer-metadata-pane"]', + { observe: true }, + function (elem) { + const titleElem = $('[data-testid="issue-title"]') + const projectElem = $('[data-testid="project-title"]') + const existingTag = $('.discussion-sidebar-item.toggl') + + const numElem = titleElem.parentElement.querySelector('span') + + if (existingTag) { + if (existingTag.parentNode.firstChild.classList.contains('toggl')) { + return + } + existingTag.parentNode.removeChild(existingTag) + } + + let description = titleElem.textContent + + if (numElem !== null) { + description = numElem.textContent + ' ' + description.trim() + } + + const elementOfBase = document.querySelector( + '[data-testid="sidebar-section"]', + ) + + const div = document.createElement('div') + div.className = elementOfBase.className + div.classList.add('discussion-sidebar-item', 'toggl') + div.style.paddingLeft = '8px' + div.style.paddingRight = '8px' + + console.log(projectElem?.textContent) + + const link = togglbutton.createTimerLink({ + className: 'github', + description: description, + projectName: projectElem && projectElem.textContent, + }) + + div.appendChild(link) + elem.prepend(div) + }, +) + // Project Page side pane togglbutton.render( 'div[role="dialog"]:not(.toggl)', From b36fbc38dd97bf3e725f8c1ef69026f63cef776c Mon Sep 17 00:00:00 2001 From: Renato Pozzi Date: Mon, 25 Nov 2024 09:59:58 +0100 Subject: [PATCH 3/4] fix(github): add uniqueness in rendering --- src/content/github.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/content/github.js b/src/content/github.js index 866c33e9c..4bba83b7a 100644 --- a/src/content/github.js +++ b/src/content/github.js @@ -22,7 +22,7 @@ const getPaneDescription = async (elem) => { // Issue and Pull Request Page togglbutton.render( - '#partial-discussion-sidebar', + '#partial-discussion-sidebar:not(.toggl)', { observe: true }, function (elem) { const numElem = $('.gh-header-number') @@ -62,7 +62,7 @@ togglbutton.render( // Issue Beta togglbutton.render( - '[data-testid="issue-viewer-metadata-pane"]', + '[data-testid="issue-viewer-metadata-pane"]:not(.toggl)', { observe: true }, function (elem) { const titleElem = $('[data-testid="issue-title"]') From 39ac2061f2b9bb41ae50f7832892c389232beff4 Mon Sep 17 00:00:00 2001 From: Renato Pozzi Date: Mon, 25 Nov 2024 10:46:54 +0100 Subject: [PATCH 4/4] fix(github): add case check for double rendering --- src/content/github.js | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/src/content/github.js b/src/content/github.js index 4bba83b7a..c6116cbb8 100644 --- a/src/content/github.js +++ b/src/content/github.js @@ -62,9 +62,14 @@ togglbutton.render( // Issue Beta togglbutton.render( - '[data-testid="issue-viewer-metadata-pane"]:not(.toggl)', + '[data-testid="issue-viewer-metadata-container"]:not(.toggl)', { observe: true }, function (elem) { + // This is needed as for this case it will enter in the "Project Page side pane" case. + if ($('[data-testid="side-panel-focus-target"]')) { + return + } + const titleElem = $('[data-testid="issue-title"]') const projectElem = $('[data-testid="project-title"]') const existingTag = $('.discussion-sidebar-item.toggl') @@ -94,8 +99,6 @@ togglbutton.render( div.style.paddingLeft = '8px' div.style.paddingRight = '8px' - console.log(projectElem?.textContent) - const link = togglbutton.createTimerLink({ className: 'github', description: description,