Merge pull request #23 from AminoffZ/new-layout-support

👷 Fix New Layout

README.md

@@ -38,6 +38,7 @@ Whether you've found a bug, have a suggestion, or want to add a new feature, you
 Please note that we have a [Code of Conduct](https://github.com/AminoffZ/github-repo-size/blob/main/CODE_OF_CONDUCT.md) in place. We expect all contributors to adhere to it. It outlines the standards of behavior that everyone involved in this project should follow. Be kind and respectful.
 
 **How to Contribute:**
+
 1. If you've spotted a bug or have a feature request, feel free to submit an [Issue](https://github.com/AminoffZ/github-repo-size/issues) and explain your concern.
 2. Interested in fixing issues or adding new features? Check out our [Contributing Guide](https://github.com/AminoffZ/github-repo-size/blob/main/CONTRIBUTING.md) for a detailed walkthrough.
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "popup",
   "type": "module",
-  "version": "0.2.4",
+  "version": "0.2.5",
   "scripts": {
     "dev": "astro dev",
     "start": "astro dev",

public/manifest.json

@@ -3,7 +3,7 @@
   "name": "GitHub Repo Size",
   "author": "mouiylus@gmail.com",
   "description": "Show size summaries of GitHub repos",
-  "version": "0.2.4",
+  "version": "0.2.5",
   "web_accessible_resources": [
     {
       "resources": ["script.js"],

src/scripts/internal/dom-manipulation.ts

@@ -3,13 +3,14 @@ import {
   createSizeSpan,
   createTotalSizeElement,
   formatBytes,
-  getAnchors,
+  getFileAnchors,
+  getFirstTd,
   getNavButtons,
-  getNavigateUpElement,
   getPathObject,
   getRepoInfo,
   getSize,
   getSizeLabel,
+  getTable,
   getThead,
   getTotalSizeButton,
   getTotalSizeSpan,
@@ -34,12 +35,13 @@ function insertSizeLabel(headRow: ChildNode, th: HTMLTableCellElement) {
  * This is the element that is shown at the top of the GitHub file browser
  * and is used to navigate up in the file tree.
  */
-function expandNavigateUpElement() {
-  const navigateUpElement = getNavigateUpElement();
-  if (!navigateUpElement) {
+function expandFirstTd() {
+  const firstTd = getFirstTd();
+  if (!firstTd) {
+    console.warn('Could not find first td.');
     return;
   }
-  navigateUpElement.setAttribute('colspan', '4');
+  firstTd.setAttribute('colspan', '4');
 }
 
 /**
@@ -48,6 +50,7 @@ function expandNavigateUpElement() {
  */
 function insertSizeColumn() {
   if (getSizeLabel()) {
+    console.warn('Size label already exists.');
     return;
   }
 
@@ -57,7 +60,7 @@ function insertSizeColumn() {
     return;
   }
 
-  expandNavigateUpElement();
+  expandFirstTd();
 
   const th = createSizeLabel();
   insertSizeLabel(headRow, th);
@@ -84,6 +87,8 @@ function insertToFileExplorer(
   }
 
   td.classList.add('grs');
+  td.style.setProperty('text-wrap', 'nowrap');
+  td.style.setProperty('text-align', 'right');
   td.appendChild(span);
   row.insertBefore(td, row.childNodes[row.childNodes.length - 1]);
 }
@@ -159,13 +164,21 @@ function setTotalSize(repoInfo: GitHubTree) {
  * This is the main function that is called when the DOM should be updated.
  */
 export async function updateDOM() {
-  const anchors = getAnchors();
+  const table = getTable();
+  if (!table) {
+    console.warn('Could not find file table.');
+    return;
+  }
+
+  const anchors = getFileAnchors(table);
   if (!anchors || anchors.length === 0) {
+    console.warn('Could not find any file anchors.');
     return;
   }
 
   const pathObject = getPathObject();
   if (!pathObject || !pathObject.owner || !pathObject.repo) {
+    console.warn('Could not get path object.');
     return;
   }
 
@@ -192,40 +205,39 @@ export async function updateDOM() {
 
   const updates: GRSUpdate = [];
 
-  anchors.forEach((anchor, index) => {
+  for (let index = 0; index < anchors.length; index++) {
+    const anchor = anchors[index];
     const anchorPath = anchor.getAttribute('href');
     if (!anchorPath) {
+      console.warn('Could not get anchor path.');
       return;
     }
 
     const anchorPathObject = getPathObject(anchorPath);
     if (!repoInfo.tree.some((file) => file.path === anchorPathObject.path)) {
+      console.warn('Could not find file in repo info.');
       return;
     }
 
     const size = getSize(anchorPathObject, repoInfo.tree);
     const span = createSizeSpan(anchorPath, size);
 
     if (!span) {
+      console.warn('Could not create size span.');
       return;
     }
 
     updates.push({ anchor, span, index });
-  });
-
-  if (pathObject.path) {
-    insertSizeColumn();
   }
 
+  insertSizeColumn();
+
   setTotalSize(repoInfo);
+
   updates.forEach(({ anchor, span, index }) => {
-    if (pathObject.path) {
-      // for some reason the rows have two td's with name of each file
-      if (index % 2 === 1) {
-        insertToFileExplorer(anchor, span);
-      }
-      return;
+    // for some reason the rows have two td's with name of each file
+    if (index % 2 === 1) {
+      insertToFileExplorer(anchor, span);
     }
-    insertToHome(anchor, span);
   });
 }

src/scripts/internal/element-factory.ts

@@ -15,14 +15,17 @@ export function createSizeLabel() {
   const span = document.createElement('span');
   span.innerText = 'Size';
   th.className = 'grs grs-size';
+  th.style.setProperty('text-align', 'right');
+  th.style.setProperty('text-wrap', 'nowrap');
+  th.style.setProperty('overflow', 'hidden');
   th.appendChild(span);
   return th;
 }
 
 /**
  * Create a total size element. The element is shown at the end of the navigation bar.
  * It displays the total size of the repository.
- * 
+ *
  * @returns The total size element
  * @example
  * ```ts
@@ -81,6 +84,7 @@ export function createSizeSpan(anchorPath: string, size: number) {
   span.classList.add('grs', spanClass);
 
   if (document.querySelector(`span.${spanClass}`)) {
+    console.warn(`Duplicate span class: ${spanClass}`);
     return;
   }
 

src/scripts/internal/index.ts

@@ -1,20 +1,8 @@
-export { getPathObject } from './get-path-object';
-export { getRepoInfo } from './api';
-export { formatBytes } from './format';
-export { hashClass } from './crypto';
-export {
-  getNavButtons,
-  getAnchors,
-  getTotalSizeButton,
-  getSizeLabel,
-  getThead,
-  getTotalSizeSpan,
-  getNavigateUpElement,
-} from './selectors';
-export {
-  createSizeLabel,
-  createTotalSizeElement,
-  createSizeSpan,
-} from './element-factory';
-export { updateDOM } from './dom-manipulation';
-export { getSize } from './get-size';
+export * from './get-path-object';
+export * from './api';
+export * from './format';
+export * from './crypto';
+export * from './selectors';
+export * from './element-factory';
+export * from './dom-manipulation';
+export * from './get-size';

src/scripts/internal/selectors.ts

@@ -1,6 +1,6 @@
 /**
  * Gets the nav button list.
- * 
+ *
  * @returns element containing the nav buttons
  */
 export function getNavButtons() {
@@ -10,10 +10,11 @@ export function getNavButtons() {
 /**
  * Get the filename anchor elements.
  *
+ * @param table - The table element
  * @returns The filename anchor elements
  * @example
  * ```ts
- * getAnchors();
+ * getFileAnchors(table);
  * // {
  * //  "0": {},
  * //  "1": {},
@@ -22,9 +23,10 @@ export function getNavButtons() {
  * // }
  * ```
  */
-export function getAnchors() {
-  const anchors = document.querySelectorAll('a.Link--primary');
-  return anchors as NodeListOf<HTMLAnchorElement>;
+export function getFileAnchors(table: HTMLTableElement) {
+  return table.querySelectorAll(
+    'a.Link--primary'
+  ) as NodeListOf<HTMLAnchorElement> | null;
 }
 
 /**
@@ -93,13 +95,12 @@ export function getTotalSizeSpan(totalSizeButton: HTMLElement) {
 }
 
 /**
- * Gets the top element in GitHubs file browser.
- * This is the element used to navigate up in the file tree.
+ * Gets the top td in GitHubs file browser.
  *
  * @returns The top element
  * @example
  * ```ts
- * getNavigateUpElement();
+ * getFirstTd();
  * // <td colspan="3" ...>
  * //   <h3 ...></h3>
  * //   <a href="/owner/repo/tree/branch" ...>
@@ -113,6 +114,25 @@ export function getTotalSizeSpan(totalSizeButton: HTMLElement) {
  * // </td>
  * ```
  */
-export function getNavigateUpElement() {
-  return document.getElementById('folder-row-0')?.firstElementChild;
+export function getFirstTd() {
+  return getTable()?.querySelector('td') as HTMLTableRowElement | null;
+}
+
+/**
+ * Gets the table in GitHubs file browser.
+ *
+ * @returns The table element
+ * @example
+ * ```ts
+ * getTable();
+ * // <table ...>
+ * //   <thead>...</thead>
+ * //   <tbody>...</tbody>
+ * // </table>
+ * ```
+ */
+export function getTable() {
+  return document.querySelector(
+    'table[aria-labelledby="folders-and-files"]'
+  ) as HTMLTableElement | null;
 }

src/scripts/internal/types/types.ts

@@ -1,11 +1,34 @@
+/**
+ * Object to provide context.
+ */
 export type PathObject = {
+  /**
+   * The owner of the repository.
+   */
   owner: string | undefined;
+  /**
+   * The repository name.
+   */
   repo: string | undefined;
-  type?: string | undefined;
+  /**
+   * The type of the path.
+   */
+  type?: PathType | undefined;
+  /**
+   * The branch name.
+   */
   branch?: string | undefined;
+  /**
+   * The path to the file. Indicates nesting.
+   */
   path?: string | undefined;
 };
 
+/**
+ * The type of the path. A tree represents a directory and a blob represents a file.
+ */
+export type PathType = 'tree' | 'blob';
+
 export type GitHubTreeItem = {
   path: string;
   mode: string;