From 64b3a5cb6510e4606f15e1794f1e3836cb1fde9e Mon Sep 17 00:00:00 2001 From: Osiris Pujols Date: Fri, 16 Feb 2024 03:16:54 -0400 Subject: [PATCH 1/4] Fix icon display after DOM has been modified on tree --- src/ts/content.ts | 25 +++++++++++++++++++++++++ 1 file changed, 25 insertions(+) diff --git a/src/ts/content.ts b/src/ts/content.ts index 846d9061..6eec27ea 100644 --- a/src/ts/content.ts +++ b/src/ts/content.ts @@ -234,6 +234,31 @@ const init = async () => { 'svg:not(.icon-directory)' ); } + + const observer = new MutationObserver((mutations) => { + mutations.forEach((mutation) => { + mutation.addedNodes.forEach(async (n) => { + if (n.nodeName === 'UL') { + while ((n.textContent as string).includes('Loading')) { + await new Promise((resolve) => setTimeout(resolve, 100)); + } + await new Promise((resolve) => setTimeout(resolve, 0)); + replaceGithubFileIcons( + '.PRIVATE_TreeView-item-content', + 'span.PRIVATE_TreeView-item-content-text' + ); + } + }); + }); + }); + + observer.observe( + document.querySelector('.react-tree-show-tree-items') as Node, + { + childList: true, + subtree: true, + } + ); } else { update(); document.addEventListener('pjax:end', update); From cb322dbe641c642e1edbe454fffa7d1ed247d007 Mon Sep 17 00:00:00 2001 From: Osiris Pujols Date: Fri, 16 Feb 2024 05:39:00 -0400 Subject: [PATCH 2/4] Add ellipsis for more accuracy on the Loading file. --- src/ts/content.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/ts/content.ts b/src/ts/content.ts index 6eec27ea..71a4b7c3 100644 --- a/src/ts/content.ts +++ b/src/ts/content.ts @@ -239,7 +239,7 @@ const init = async () => { mutations.forEach((mutation) => { mutation.addedNodes.forEach(async (n) => { if (n.nodeName === 'UL') { - while ((n.textContent as string).includes('Loading')) { + while ((n.textContent as string).includes('Loading...')) { await new Promise((resolve) => setTimeout(resolve, 100)); } await new Promise((resolve) => setTimeout(resolve, 0)); From f632515e5255d9826b86fbb41d88f4f38eaadb5b Mon Sep 17 00:00:00 2001 From: Osiris Pujols Date: Fri, 16 Feb 2024 12:40:34 -0400 Subject: [PATCH 3/4] Improved code --- src/ts/content.ts | 35 ++++++----------------------------- 1 file changed, 6 insertions(+), 29 deletions(-) diff --git a/src/ts/content.ts b/src/ts/content.ts index 71a4b7c3..7998b78e 100644 --- a/src/ts/content.ts +++ b/src/ts/content.ts @@ -193,10 +193,12 @@ const replaceGithubFileIcons = ( add(element) { const filenameDom = select(fileSelector, element); if (filenameDom) { - const iconDom = select(iconSelector, element); - if (iconDom) { - replaceIcon({ iconDom, filenameDom }); - } + new Promise((resolve) => setTimeout(resolve, 10)).then(() => { + const iconDom = select(iconSelector, element); + if (iconDom) { + replaceIcon({ iconDom, filenameDom }); + } + }); } }, }); @@ -234,31 +236,6 @@ const init = async () => { 'svg:not(.icon-directory)' ); } - - const observer = new MutationObserver((mutations) => { - mutations.forEach((mutation) => { - mutation.addedNodes.forEach(async (n) => { - if (n.nodeName === 'UL') { - while ((n.textContent as string).includes('Loading...')) { - await new Promise((resolve) => setTimeout(resolve, 100)); - } - await new Promise((resolve) => setTimeout(resolve, 0)); - replaceGithubFileIcons( - '.PRIVATE_TreeView-item-content', - 'span.PRIVATE_TreeView-item-content-text' - ); - } - }); - }); - }); - - observer.observe( - document.querySelector('.react-tree-show-tree-items') as Node, - { - childList: true, - subtree: true, - } - ); } else { update(); document.addEventListener('pjax:end', update); From 76181ef8e0e439374efcb7a2f10adbf27650acca Mon Sep 17 00:00:00 2001 From: Osiris Pujols Date: Sat, 17 Feb 2024 12:28:50 -0400 Subject: [PATCH 4/4] Fix import of dom-loader. Uses textContent for file instead of innerText as textContent uses markup and doesn't wait for render. Removed isDirectory variable as it can be checked once. Removed Promise as it causes flikering. Improved File Tree Icons selector, so it doesn't account for Loading state ones. --- src/ts/content.ts | 23 ++++++++++------------- 1 file changed, 10 insertions(+), 13 deletions(-) diff --git a/src/ts/content.ts b/src/ts/content.ts index 7998b78e..2b7535d0 100644 --- a/src/ts/content.ts +++ b/src/ts/content.ts @@ -1,4 +1,4 @@ -import * as domLoaded from 'dom-loaded'; +import domLoaded from 'dom-loaded'; import select from 'select-dom'; import mobile from 'is-mobile'; import { observe } from 'selector-observer'; @@ -126,11 +126,10 @@ const replaceIcon = ({ const filename = isGitHub && isMobile ? getGitHubMobileFilename(filenameDom) - : filenameDom.innerText.trim(); + : filenameDom.textContent?.trim() ?? ''; - let isDirectory = false; - if (iconDom) { - isDirectory = iconDom.classList.contains('octicon-file-directory'); + if (iconDom && iconDom.classList.contains('octicon-file-directory')) { + return; } const getIconColorMode = (): ColorMode => { @@ -156,7 +155,7 @@ const replaceIcon = ({ const darkClassName = darkMode ? 'dark' : ''; - if (className && !isDirectory) { + if (className) { const icon = document.createElement('span'); if (isGitHub) { @@ -193,12 +192,10 @@ const replaceGithubFileIcons = ( add(element) { const filenameDom = select(fileSelector, element); if (filenameDom) { - new Promise((resolve) => setTimeout(resolve, 10)).then(() => { - const iconDom = select(iconSelector, element); - if (iconDom) { - replaceIcon({ iconDom, filenameDom }); - } - }); + const iconDom = select(iconSelector, element); + if (iconDom) { + replaceIcon({ iconDom, filenameDom }); + } } }, }); @@ -226,7 +223,7 @@ const init = async () => { ); replaceGithubFileIcons( - '.PRIVATE_TreeView-item-content', + '.PRIVATE_TreeView-item-content:has(span.PRIVATE_TreeView-item-content-text > span:not([class]))', 'span.PRIVATE_TreeView-item-content-text' );