Merge pull request #21 from thanhvu1982/develop

Develop
misa198 · Jul 10, 2022 · add5635 · add5635
2 parents 40d591f + f92845a
commit add5635
Show file tree

Hide file tree

Showing 101 changed files with 13,383 additions and 94 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -1,2 +1,3 @@
 **/node_modules/**
 webpack.config.js
+web
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,13 @@
 
 ==================
 
+### v1.4.1
+
+- Add new website
+- Refactor code
+- Support sub-module
+- Lowercase file name
+
 ### v1.4.0
 
 - Detect extension more than 1 dot

diff --git a/package.json b/package.json
@@ -3,15 +3,15 @@
   "description": "A Browser Extension which gives different filetypes different icons, and code color theme to GitHub and Octotree for free.",
   "license": "BSD-2-Clause Simplified License",
   "author": "Thanh Vu",
-  "homepage": "https://github.com/misa198/octotree-theme#readme",
+  "homepage": "https://octotree-theme.web.app",
   "repository": {
     "type": "git",
     "url": "https://github.com/misa198/octotree-theme/tree/master"
   },
   "bugs": {
     "url": "https://github.com/misa198/octotree-theme/issues"
   },
-  "version": "1.4.0",
+  "version": "1.4.1",
   "scripts": {
     "pre-commit": "lint-staged",
     "build:chromium-v3": "rm -rf build/chromium-v3 && cross-env PLATFORM=chromium-v3 webpack --config webpack.config.js",
@@ -30,6 +30,7 @@
     "adm-zip": "^0.5.9",
     "capitalize": "^2.0.4",
     "dom-loaded": "^2.0.0",
+    "fancy-log": "^2.0.0",
     "file-icons-js": "^1.1.0",
     "is-mobile": "^3.0.0",
     "select-dom": "^7.1.1",
@@ -62,7 +63,6 @@
     "html-minimizer-webpack-plugin": "^3.5.0",
     "husky": "^6.0.0",
     "lint-staged": "^10.5.4",
-    "log4js": "^6.5.2",
     "mini-css-extract-plugin": "^2.6.0",
     "path": "^0.12.7",
     "prettier": "^2.2.1",

diff --git a/src/scripts/background.ts b/src/scripts/background.ts
@@ -1,7 +1,8 @@
-import { set, get } from './utils/storage';
+import { get, set } from './utils/storage';
 import { Keys } from './constants/keys';
-import { detectBrowser } from './utils/detectBrowser';
+import { getBrowserAction, getCurrentBrowser } from './utils/detectBrowser';
 import { IconThemes } from './constants/iconThemes';
+
 const urlRegex = new RegExp(
   /^https:\/\/(gist.)?github.com\/[(a-z)(A-Z)(0-9)_-]+\/[(a-z)(A-Z)(0-9)_-]+(\/?)((\/.+)?)(\?(.+))?$/
 );
@@ -14,7 +15,6 @@ get(
     Keys.OT_GITHUB_DIFF,
   ],
   (result) => {
-    console.log(result);
     if (result[Keys.OT_GITHUB] === undefined) {
       set({ [Keys.OT_GITHUB]: true });
     }
@@ -33,12 +33,11 @@ get(
   }
 );
 
-const browserName = detectBrowser();
-const browserAction =
-  chrome[browserName === 'chrome' ? 'action' : 'browserAction'];
+const browserAction = getBrowserAction();
+const currentBrowser = getCurrentBrowser();
 
-chrome.tabs.onActivated.addListener(function (info) {
-  chrome.tabs.get(info.tabId, function (change) {
+currentBrowser.tabs.onActivated.addListener(function (info) {
+  currentBrowser.tabs.get(info.tabId, function (change) {
     if (change.url === undefined) {
       // Url is null
       browserAction.setPopup({
@@ -73,9 +72,9 @@ chrome.tabs.onActivated.addListener(function (info) {
   });
 });
 
-chrome.tabs.onUpdated.addListener(function (tabId, changeInfo, tab) {
+currentBrowser.tabs.onUpdated.addListener(function (tabId, changeInfo, tab) {
   if (changeInfo.status === 'complete') {
-    chrome.tabs.sendMessage(tabId, {
+    currentBrowser.tabs.sendMessage(tabId, {
       message: Keys.OT_TAB_UPDATE,
     });
   }
@@ -102,3 +101,18 @@ chrome.tabs.onUpdated.addListener(function (tabId, changeInfo, tab) {
     });
   }
 });
+
+// Open website after install
+currentBrowser.runtime.onInstalled.addListener((details) => {
+  if (
+    // No need to show changelog if its was a browser update (and not extension update)
+    details.reason === 'browser_update' ||
+    // No need to show changelog if developer just reloaded the extension
+    details.reason === 'update'
+  )
+    return;
+  const manifestData = currentBrowser.runtime.getManifest();
+  currentBrowser.tabs.create({
+    url: `${manifestData.homepage_url}/features`,
+  });
+});
diff --git a/src/scripts/content.ts b/src/scripts/content.ts
@@ -9,8 +9,9 @@ import {
   getMuiDirExpandedIcon,
   getMUIDirIcon,
   getMuiFileIcon,
+  getMUISubmoduleIcon,
 } from './libs/mui';
-import { detectBrowser } from './utils/detectBrowser';
+import { getCurrentBrowser } from './utils/detectBrowser';
 import { get, set } from './utils/storage';
 // Content css
 import '../styles/icons/icons.scss';
@@ -21,6 +22,8 @@ import './constants/colorThemesScss';
 import { getResourceURL } from './utils/getResourceURL';
 import { IconThemes } from './constants/iconThemes';
 
+const currentBrowser = getCurrentBrowser();
+
 // ============ Icon theme ===================
 
 const fonts = [
@@ -36,7 +39,6 @@ let octotree = false;
 let github = false;
 let githubDiff = false;
 let iconTheme = IconThemes.MUI;
-const browserName = detectBrowser();
 const githubMuiIconClass = 'github-mui-icon';
 const muiIconOctotreeClass = 'mui-icon-octotree';
 const muiDirClass = 'mui-icon-dir';
@@ -69,17 +71,20 @@ const replaceGithubIcon = ({
   iconDom,
   filenameDom,
   isDir,
+  isSubmodule,
 }: {
   iconDom: HTMLElement | null;
   filenameDom: HTMLElement;
   isDir: boolean;
+  isSubmodule: boolean;
 }) => {
   const fileName = isMobile
     ? getGitHubMobileFilename(filenameDom)
     : filenameDom.innerText.trim();
   if (iconTheme === IconThemes.MUI) {
     let icon;
-    if (!isDir) icon = getMuiFileIcon(fileName);
+    if (!isDir)
+      icon = isSubmodule ? getMUISubmoduleIcon() : getMuiFileIcon(fileName);
     else icon = getMUIDirIcon(fileName);
     if (iconDom) {
       const img = document.createElement('img');
@@ -103,18 +108,17 @@ const replaceGithubDiffIcon = ({
   iconDom,
   filenameDom,
   isDir,
+  isSubmodule,
 }: {
   iconDom: HTMLElement | null;
   filenameDom: HTMLElement;
   isDir: boolean;
+  isSubmodule: boolean;
 }) => {
   const fileName = isMobile
     ? getGitHubMobileFilename(filenameDom)
     : filenameDom.innerText.trim();
   if (iconTheme === IconThemes.MUI) {
-    let icon;
-    if (!isDir) icon = getMuiFileIcon(fileName);
-    else icon = getMUIDirIcon(fileName);
     if (iconDom) {
       if (isDir) {
         const [icon, expandedIcon] = [
@@ -133,7 +137,9 @@ const replaceGithubDiffIcon = ({
         iconDom.parentNode?.replaceChild(img, iconDom);
         img.parentNode?.appendChild(expandedImg);
       } else {
-        const icon = getMuiFileIcon(fileName);
+        const icon = isSubmodule
+          ? getMUISubmoduleIcon()
+          : getMuiFileIcon(fileName);
         if (icon) {
           const img = document.createElement('img');
           img.classList.add(muiIconDiffClass);
@@ -146,7 +152,6 @@ const replaceGithubDiffIcon = ({
   } else {
     const className: string | null = fileIcons.getClassWithColor(fileName);
     if (className && !isDir) {
-      console.log(className);
       const icon = document.createElement('span');
       icon.className = `icon octicon-file ${className}`;
       if (iconDom) {
@@ -199,7 +204,12 @@ const replaceOctotreeIcon = ({
           iconDom.parentNode?.appendChild(img);
           iconDom.parentNode?.appendChild(expandedImg);
         } else {
-          const icon = getMuiFileIcon(filename);
+          const isSubmodule = !Boolean(
+            iconDom.parentElement?.getAttribute('data-download-url')
+          );
+          const icon = isSubmodule
+            ? getMUISubmoduleIcon()
+            : getMuiFileIcon(filename);
           if (icon) {
             const img = document.createElement('img');
             img.classList.add(muiIconOctotreeClass);
@@ -242,11 +252,16 @@ const init = async () => {
           'svg[aria-label=File]',
           element
         ) as HTMLElement;
+        const submoduleIconDom = select(
+          'svg[aria-label=Submodule]',
+          element
+        ) as HTMLElement;
 
         replaceGithubIcon({
-          iconDom: dirIconDom || fileIconDom,
+          iconDom: dirIconDom || submoduleIconDom || fileIconDom,
           filenameDom,
           isDir: Boolean(dirIconDom),
+          isSubmodule: Boolean(submoduleIconDom),
         });
       },
     });
@@ -265,10 +280,16 @@ const init = async () => {
           'svg[aria-label=File]',
           element
         ) as HTMLElement;
+        const submoduleIconDom = select(
+          'svg[aria-label=Submodule]',
+          element
+        ) as HTMLElement;
+
         replaceGithubDiffIcon({
-          iconDom: dirIconDom || fileIconDom,
+          iconDom: dirIconDom || submoduleIconDom || fileIconDom,
           filenameDom,
           isDir: Boolean(dirIconDom),
+          isSubmodule: Boolean(submoduleIconDom),
         });
       },
     });
@@ -343,16 +364,14 @@ const applyColorTheme = async () => {
     },
   });
 
-  (browserName === 'chrome' ? chrome : browser).runtime.onMessage.addListener(
-    (request) => {
-      try {
-        const message = JSON.parse(request.message);
-        if (message.type === 'OT_CODE_COLOR_THEME') {
-          changeTheme(message.codeColorTheme);
-        }
-      } catch (e) {}
-    }
-  );
+  currentBrowser.runtime.onMessage.addListener((request) => {
+    try {
+      const message = JSON.parse(request.message);
+      if (message.type === 'OT_CODE_COLOR_THEME') {
+        changeTheme(message.codeColorTheme);
+      }
+    } catch (e) {}
+  });
 };
 
 get(
@@ -371,7 +390,7 @@ get(
     init();
     applyColorTheme();
 
-    chrome.runtime.onMessage.addListener(function (request) {
+    currentBrowser.runtime.onMessage.addListener(function (request) {
       if (request.message === Keys.OT_TAB_UPDATE) {
         applyColorTheme();
       }

diff --git a/src/scripts/libs/mui/index.ts b/src/scripts/libs/mui/index.ts
@@ -4,6 +4,9 @@ import { files } from './files';
 import { folders, foldersExpanded } from './folders';
 import { icons } from './icons';
 
+export const getMUISubmoduleIcon = () =>
+  getResourceURL(`assets/mui/${icons[folders['submodules']]}`);
+
 export const getMuiFileIcon = (fileName: string) => {
   let iconName = 'file';
   const lowerCaseFileName = fileName.toLowerCase();
@@ -16,20 +19,32 @@ export const getMuiFileIcon = (fileName: string) => {
     splitedName.forEach((path, index) => {
       if (index === 0) currentPath = path;
       else currentPath = `${path}.${currentPath}`;
-      console.log(currentPath);
       if (extentions[currentPath]) iconName = extentions[currentPath];
     });
   }
 
   return getResourceURL(`assets/mui/${icons[iconName]}`);
 };
 
+const getMUIDirQuery = (dirName: string) => {
+  const paths = dirName.split('/');
+  let query = '';
+  if (paths.length === 1) query = paths[0];
+  query = paths[paths.length - 1];
+  return query;
+};
+
 export const getMUIDirIcon = (dirName: string) => {
-  const dirIcon = folders[dirName] || 'folder';
+  const query = getMUIDirQuery(dirName);
+  const dirIcon = folders[query] || folders[query.toLowerCase()] || 'folder';
   return getResourceURL(`assets/mui/${icons[dirIcon]}`);
 };
 
 export const getMuiDirExpandedIcon = (dirName: string) => {
-  const dirIcon = foldersExpanded[dirName] || 'folder-open';
+  const query = getMUIDirQuery(dirName);
+  const dirIcon =
+    foldersExpanded[query] ||
+    foldersExpanded[query.toLowerCase()] ||
+    'folder-open';
   return getResourceURL(`assets/mui/${icons[dirIcon]}`);
 };
diff --git a/src/scripts/popup.ts b/src/scripts/popup.ts
@@ -1,13 +1,14 @@
 import * as capitalize from 'capitalize';
 import { get, set } from './utils/storage';
-import { detectBrowser } from './utils/detectBrowser';
+import { detectBrowser, getCurrentBrowser } from './utils/detectBrowser';
 import { Keys } from './constants/keys';
 import { colorThemes } from './constants/colorThemes';
 import '../styles/popup.scss';
 import { IconThemes } from './constants/iconThemes';
 
-const manifestData = chrome.runtime.getManifest();
-const copyrightVerison = document.getElementById(
+const currentBrowser = getCurrentBrowser();
+const manifestData = currentBrowser.runtime.getManifest();
+const copyrightVersion = document.getElementById(
   Keys.OT_COPYRIGHT_VERSION
 ) as HTMLSpanElement;
 const copyrightYear = document.getElementById(
@@ -16,7 +17,7 @@ const copyrightYear = document.getElementById(
 const copyrightHolder = document.getElementById(
   Keys.OT_COPYRIGHT_HOLDER
 ) as HTMLLinkElement;
-copyrightVerison.innerText = `v${manifestData.version}`;
+copyrightVersion.innerText = `v${manifestData.version}`;
 copyrightYear.innerText = new Date().getFullYear().toString();
 copyrightHolder.href = manifestData.homepage_url as string;
 copyrightHolder.innerText = manifestData.author as string;

diff --git a/src/scripts/utils/detectBrowser.ts b/src/scripts/utils/detectBrowser.ts
@@ -17,3 +17,17 @@ export const detectBrowser = () => {
   }
   return browserName;
 };
+
+export const getBrowserAction = () => {
+  const browserName = detectBrowser();
+  return browserName === 'chrome'
+    ? chrome.action
+      ? chrome.action
+      : chrome.browserAction
+    : browser.browserAction;
+};
+
+export const getCurrentBrowser = () => {
+  const browserName = detectBrowser();
+  return browserName === 'chrome' ? chrome : browser;
+};
diff --git a/src/scripts/utils/getResourceURL.ts b/src/scripts/utils/getResourceURL.ts
@@ -1,6 +1,6 @@
-import { detectBrowser } from './detectBrowser';
+import { getCurrentBrowser } from './detectBrowser';
 
 export const getResourceURL = (path: string) => {
-  const browserName = detectBrowser();
-  return (browserName === 'chrome' ? chrome : browser).runtime.getURL(path);
+  const currentBrowser = getCurrentBrowser();
+  return currentBrowser.runtime.getURL(path);
 };