From c99813257fcf5c6d8da9240ac7d46bab3b72c3dd Mon Sep 17 00:00:00 2001 From: Manas Sambhus <51392775+msvamp@users.noreply.github.com> Date: Wed, 24 Jun 2020 18:32:01 +0530 Subject: [PATCH 1/4] Fix bug: table update error while using file view The extension tried to update file sizes even when a directory page was not being browsed, which led to error `TypeError: tree.forEach is not a function` on line 153 (line number before this commit) For example, visit page: https://github.com/harshjv/github-repo-size/blob/master/src/inject.js and check extension errors This is now fixed by detecting directory view with the presence of the 'Add file' button and updating table only if the button is present. Also, removed redundant CSS 'cursor: pointer' for newLiElem. --- src/inject.js | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/src/inject.js b/src/inject.js index 6b140de..aaab44c 100755 --- a/src/inject.js +++ b/src/inject.js @@ -132,20 +132,24 @@ const checkForRepoPage = async () => { const ns = document.querySelector('ul.UnderlineNav-body') const navElem = document.getElementById(NAV_ELEM_ID) const tdElems = document.querySelector('span.github-repo-size-div') + + // whether 'add file' button is present + const viewingDir = document.querySelector('div.file-navigation.mb-3.d-flex.flex-items-start > div.d-flex > details > summary > span.btn.d-none.d-md-flex.flex-items-center') && true if (ns && !navElem) { getAPIData(repoObj.repo).then(summary => { if (summary && summary.size) { ns.insertAdjacentHTML('beforeend', getSizeHTML(summary.size * 1024)) const newLiElem = document.getElementById(NAV_ELEM_ID) - newLiElem.title = 'Click to load directory sizes' - newLiElem.style.cssText = 'cursor: pointer' - newLiElem.onclick = loadDirSizes + if(viewingDir) { + newLiElem.title = 'Click to load directory sizes' + newLiElem.onclick = loadDirSizes + } } }) } - if (tdElems) return + if (!viewingDir || tdElems) return const tree = await getAPIData(`${repoObj.repo}/contents/${repoObj.currentPath}?ref=${repoObj.ref}`) const sizeObj = { '..': '..' } From 3cf54b7c30029bfa44e0e711ef9dfb0e51ff35b7 Mon Sep 17 00:00:00 2001 From: ManSamVampire <51392775+msvamp@users.noreply.github.com> Date: Wed, 24 Jun 2020 18:46:54 +0530 Subject: [PATCH 2/4] Revert "Fix bug: table update error while using file view" This reverts commit c99813257fcf5c6d8da9240ac7d46bab3b72c3dd. Undoing bugfix because file sizes on repo main page are broken --- src/inject.js | 12 ++++-------- 1 file changed, 4 insertions(+), 8 deletions(-) diff --git a/src/inject.js b/src/inject.js index aaab44c..6b140de 100755 --- a/src/inject.js +++ b/src/inject.js @@ -132,24 +132,20 @@ const checkForRepoPage = async () => { const ns = document.querySelector('ul.UnderlineNav-body') const navElem = document.getElementById(NAV_ELEM_ID) const tdElems = document.querySelector('span.github-repo-size-div') - - // whether 'add file' button is present - const viewingDir = document.querySelector('div.file-navigation.mb-3.d-flex.flex-items-start > div.d-flex > details > summary > span.btn.d-none.d-md-flex.flex-items-center') && true if (ns && !navElem) { getAPIData(repoObj.repo).then(summary => { if (summary && summary.size) { ns.insertAdjacentHTML('beforeend', getSizeHTML(summary.size * 1024)) const newLiElem = document.getElementById(NAV_ELEM_ID) - if(viewingDir) { - newLiElem.title = 'Click to load directory sizes' - newLiElem.onclick = loadDirSizes - } + newLiElem.title = 'Click to load directory sizes' + newLiElem.style.cssText = 'cursor: pointer' + newLiElem.onclick = loadDirSizes } }) } - if (!viewingDir || tdElems) return + if (tdElems) return const tree = await getAPIData(`${repoObj.repo}/contents/${repoObj.currentPath}?ref=${repoObj.ref}`) const sizeObj = { '..': '..' } From 024980b6e3f64958a1e35a7e37ac7a9203a25545 Mon Sep 17 00:00:00 2001 From: Manas Sambhus <51392775+msvamp@users.noreply.github.com> Date: Wed, 24 Jun 2020 18:53:46 +0530 Subject: [PATCH 3/4] Fix bug: table update error while using file view The extension tried to update file sizes even when a directory page was not being browsed, which led to error `TypeError: tree.forEach is not a function` on line 153 (line number before this commit) For example, visit page: https://github.com/harshjv/github-repo-size/blob/master/src/inject.js and check extension errors This is now fixed by detecting directory view with the presence of the 'Add file' button and updating table only if the button is present. Also, removed redundant CSS 'cursor: pointer' for newLiElem. --- src/inject.js | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/src/inject.js b/src/inject.js index 6b140de..c18ae35 100755 --- a/src/inject.js +++ b/src/inject.js @@ -132,20 +132,24 @@ const checkForRepoPage = async () => { const ns = document.querySelector('ul.UnderlineNav-body') const navElem = document.getElementById(NAV_ELEM_ID) const tdElems = document.querySelector('span.github-repo-size-div') + + // whether 'add file' button is present + const viewingDir = document.querySelector('div.file-navigation.mb-3.d-flex.flex-items-start > details.details-overlay.details-reset.position-relative > summary > span.btn.d-none.d-md-flex.flex-items-center') || document.querySelector('div.file-navigation.mb-3.d-flex.flex-items-start > div.d-flex > details > summary > span.btn.d-none.d-md-flex.flex-items-center') if (ns && !navElem) { getAPIData(repoObj.repo).then(summary => { if (summary && summary.size) { ns.insertAdjacentHTML('beforeend', getSizeHTML(summary.size * 1024)) const newLiElem = document.getElementById(NAV_ELEM_ID) - newLiElem.title = 'Click to load directory sizes' - newLiElem.style.cssText = 'cursor: pointer' - newLiElem.onclick = loadDirSizes + if(viewingDir) { + newLiElem.title = 'Click to load directory sizes' + newLiElem.onclick = loadDirSizes + } } }) } - if (tdElems) return + if (!viewingDir || tdElems) return const tree = await getAPIData(`${repoObj.repo}/contents/${repoObj.currentPath}?ref=${repoObj.ref}`) const sizeObj = { '..': '..' } From 76e0a7348b41cb3e7f2ca55c6c6c120fa3bb0c30 Mon Sep 17 00:00:00 2001 From: Manas Sambhus <51392775+msvamp@users.noreply.github.com> Date: Thu, 25 Jun 2020 21:55:52 +0530 Subject: [PATCH 4/4] Better detection of dir view & nav-item bugfixes Now using distinct classes for directory view detection as requested here: https://github.com/harshjv/github-repo-size/pull/53#discussion_r445388797 We will now detect the presence of rows in the files list box instead of using the 'Add file' button Removed copied attributes from 'Settings' nav-item because it caused GitHub's native JS to throw errors in repos where the 'Settings' button is not present. Updated CSS classes and width for SVG icon --- src/inject.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/inject.js b/src/inject.js index c18ae35..3e16266 100755 --- a/src/inject.js +++ b/src/inject.js @@ -67,11 +67,11 @@ const getSizeHTML = (size) => { return `
  • - - ${humanReadableSize.size} ${humanReadableSize.measure} + ${humanReadableSize.size} ${humanReadableSize.measure}
    • ` @@ -133,8 +133,8 @@ const checkForRepoPage = async () => { const navElem = document.getElementById(NAV_ELEM_ID) const tdElems = document.querySelector('span.github-repo-size-div') - // whether 'add file' button is present - const viewingDir = document.querySelector('div.file-navigation.mb-3.d-flex.flex-items-start > details.details-overlay.details-reset.position-relative > summary > span.btn.d-none.d-md-flex.flex-items-center') || document.querySelector('div.file-navigation.mb-3.d-flex.flex-items-start > div.d-flex > details > summary > span.btn.d-none.d-md-flex.flex-items-center') + // whether the files list box has any rows + const viewingDir = document.querySelector('div.Box-row') && true if (ns && !navElem) { getAPIData(repoObj.repo).then(summary => {