Merge pull request #14 from thanhvu1982/develop

Develop
misa198 · Jul 2, 2022 · d6d617c · d6d617c
2 parents c71e6ef + 8b30dce
commit d6d617c
Show file tree

Hide file tree

Showing 12 changed files with 99 additions and 45 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ==================
 
+### v1.3.9
+
+- Fix missing theme on commit diff page
+
+### v1.3.8
+
+- Fix missing theme after redirect
+
+### v1.3.7
+
+- Commit change view icons
+
 ### v1.3.6
 
 - Add Icons to diff page

diff --git a/package.json b/package.json
@@ -2,7 +2,7 @@
   "name": "octotree-theme",
   "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 <misa198>",
+  "author": "Thanh Vu",
   "homepage": "https://github.com/misa198/octotree-theme#readme",
   "repository": {
     "type": "git",
@@ -11,7 +11,7 @@
   "bugs": {
     "url": "https://github.com/misa198/octotree-theme/issues"
   },
-  "version": "1.3.6",
+  "version": "1.3.9",
   "scripts": {
     "pre-commit": "lint-staged",
     "build:firefox": "rm -rf build/firefox && cross-env PLATFORM=firefox webpack --config webpack.config.js",

diff --git a/src/platforms/manifest.chromium-v2.json b/src/platforms/manifest.chromium-v2.json
@@ -1,8 +1,6 @@
 {
   "manifest_version": 2,
   "name": "Octotree Theme",
-  "author": "misa198",
-  "homepage_url": "https://github.com/misa198/octotree-theme",
   "background": {
     "scripts": ["background.js"]
   },

diff --git a/src/platforms/manifest.chromium.json b/src/platforms/manifest.chromium.json
@@ -1,8 +1,6 @@
 {
   "manifest_version": 3,
   "name": "Octotree Theme",
-  "author": "misa198",
-  "homepage_url": "https://github.com/misa198/octotree-theme",
   "background": {
     "service_worker": "background.js"
   },

diff --git a/src/platforms/manifest.firefox.json b/src/platforms/manifest.firefox.json
@@ -1,8 +1,6 @@
 {
   "manifest_version": 2,
   "name": "Octotree Theme",
-  "author": "misa198",
-  "homepage_url": "https://github.com/misa198/octotree-theme",
   "background": {
     "scripts": ["background.js"]
   },

diff --git a/src/popup.html b/src/popup.html
@@ -7,16 +7,10 @@
     <link rel="stylesheet" href="popup.css" />
   </head>
   <body>
-    <a
-      href="https://github.com/misa198/octotree-theme"
-      rel="noreferrer"
-      target="__blank"
-    >
-      <header class="header">
-        <img class="header__icon" src="./icons/icon64.png" alt="" />
-        <h3 class="header__title">Octotree Theme</h3>
-      </header>
-    </a>
+    <header class="header">
+      <img class="header__icon" src="./icons/icon64.png" alt="" />
+      <h3 class="header__title">Octotree Theme</h3>
+    </header>
     <main class="main">
       <div class="session">
         <h3 class="session__label">Code Theme</h3>
@@ -57,6 +51,20 @@ <h3 class="session_label">Octotree</h3>
         </div>
       </div>
     </main>
+    <footer>
+      <p class="copyright">
+        <span id="OT_COPYRIGHT_VERSION"></span>
+        -
+        <span id="OT_COPYRIGHT_YEAR"></span>
+        ©
+        <a
+          href="#"
+          rel="noreferrer"
+          target="__blank"
+          id="OT_COPYRIGHT_HOLDER"
+        ></a>
+      </p>
+    </footer>
     <script src="./popup.js"></script>
   </body>
 </html>
diff --git a/src/scripts/background.ts b/src/scripts/background.ts
@@ -72,7 +72,13 @@ chrome.tabs.onActivated.addListener(function (info) {
   });
 });
 
-chrome.tabs.onUpdated.addListener(function (tabId, _, tab) {
+chrome.tabs.onUpdated.addListener(function (tabId, changeInfo, tab) {
+  if (changeInfo.status === 'complete') {
+    chrome.tabs.sendMessage(tabId, {
+      message: Keys.OT_TAB_UPDATE,
+    });
+  }
+
   if (tab.url === undefined) {
     return;
   } else if (tab.url.match(urlRegex) === null) {

diff --git a/src/scripts/constants/keys.ts b/src/scripts/constants/keys.ts
@@ -6,4 +6,8 @@ export const Keys = {
   OT_RELOAD: 'OT_RELOAD',
   OT_CODE_COLOR_THEME: 'OT_CODE_COLOR_THEME',
   OT_CODE_ICONS_THEME: 'OT_CODE_ICON_THEME',
+  OT_TAB_UPDATE: 'OT_TAB_UPDATE',
+  OT_COPYRIGHT_VERSION: 'OT_COPYRIGHT_VERSION',
+  OT_COPYRIGHT_YEAR: 'OT_COPYRIGHT_YEAR',
+  OT_COPYRIGHT_HOLDER: 'OT_COPYRIGHT_HOLDER',
 };
diff --git a/src/scripts/content.ts b/src/scripts/content.ts
@@ -253,28 +253,25 @@ const init = async () => {
   }
 
   if (githubDiff) {
-    observe(
-      '#files_bucket > diff-file-filter > diff-layout nav > ul li > .ActionList-content',
-      {
-        add(element) {
-          const filenameDom = select('.ActionList-item-label', element);
-          if (!filenameDom) return;
-          const dirIconDom = select(
-            'svg[aria-label=Directory]',
-            element
-          ) as HTMLElement;
-          const fileIconDom = select(
-            'svg[aria-label=File]',
-            element
-          ) as HTMLElement;
-          replaceGithubDiffIcon({
-            iconDom: dirIconDom || fileIconDom,
-            filenameDom,
-            isDir: Boolean(dirIconDom),
-          });
-        },
-      }
-    );
+    observe('diff-layout nav > ul li > .ActionList-content', {
+      add(element) {
+        const filenameDom = select('.ActionList-item-label', element);
+        if (!filenameDom) return;
+        const dirIconDom = select(
+          'svg[aria-label=Directory]',
+          element
+        ) as HTMLElement;
+        const fileIconDom = select(
+          'svg[aria-label=File]',
+          element
+        ) as HTMLElement;
+        replaceGithubDiffIcon({
+          iconDom: dirIconDom || fileIconDom,
+          filenameDom,
+          isDir: Boolean(dirIconDom),
+        });
+      },
+    });
   }
 
   if (octotree) {
@@ -315,13 +312,13 @@ const init = async () => {
 // ============ Code color theme ===================
 
 const changeTheme = (themeName?: string) => {
-  const body = document.querySelector('body') as HTMLElement;
-  const { classList } = body;
+  const html = document.querySelector('html') as HTMLElement;
+  const { classList } = html;
   const currentThemeClass = Array.from(classList).find((className) =>
     className.startsWith(`${colorThemeDeaultClass}`)
   );
   if (currentThemeClass) {
-    body.classList.remove(currentThemeClass);
+    html.classList.remove(currentThemeClass);
   }
   if (themeName) {
     const foundTheme = colorThemes.find(
@@ -335,7 +332,7 @@ const changeTheme = (themeName?: string) => {
 };
 
 const applyColorTheme = async () => {
-  observe('body', {
+  observe('html', {
     add() {
       get([Keys.OT_CODE_COLOR_THEME], (result) => {
         if (result) {
@@ -373,5 +370,11 @@ get(
 
     init();
     applyColorTheme();
+
+    chrome.runtime.onMessage.addListener(function (request) {
+      if (request.message === Keys.OT_TAB_UPDATE) {
+        applyColorTheme();
+      }
+    });
   }
 );
diff --git a/src/scripts/popup.ts b/src/scripts/popup.ts
@@ -6,6 +6,21 @@ import { colorThemes } from './constants/colorThemes';
 import '../styles/popup.scss';
 import { IconThemes } from './constants/iconThemes';
 
+const manifestData = chrome.runtime.getManifest();
+const copyrightVerison = document.getElementById(
+  Keys.OT_COPYRIGHT_VERSION
+) as HTMLSpanElement;
+const copyrightYear = document.getElementById(
+  Keys.OT_COPYRIGHT_YEAR
+) as HTMLSpanElement;
+const copyrightHolder = document.getElementById(
+  Keys.OT_COPYRIGHT_HOLDER
+) as HTMLLinkElement;
+copyrightVerison.innerText = `v${manifestData.version}`;
+copyrightYear.innerText = new Date().getFullYear().toString();
+copyrightHolder.href = manifestData.homepage_url as string;
+copyrightHolder.innerText = manifestData.author as string;
+
 const themeSelector = document.getElementById(
   Keys.OT_CODE_COLOR_THEME
 ) as HTMLSelectElement;

diff --git a/src/styles/popup.scss b/src/styles/popup.scss
@@ -183,6 +183,16 @@ body {
       }
     }
   }
+
+  .copyright {
+    text-align: center;
+    font-size: 0.95em;
+    margin-bottom: 1rem;
+
+    #OT_COPYRIGHT_HOLDER {
+      text-decoration: underline !important;
+    }
+  }
 }
 
 @keyframes appear {

diff --git a/webpack.config.js b/webpack.config.js
@@ -48,6 +48,8 @@ const options = {
               JSON.stringify({
                 description: process.env.npm_package_description,
                 version: process.env.npm_package_version,
+                author: process.env.npm_package_author_name,
+                homepage_url: process.env.npm_package_homepage,
                 ...JSON.parse(content.toString()),
               })
             ),