Skip to content

Commit add5635

Browse files
misa198misa198
authored
Merge pull request #21 from thanhvu1982/develop
Develop
2 parents 40d591f + f92845a commit add5635

File tree

101 files changed

+13383
-94
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

101 files changed

+13383
-94
lines changed

‎.eslintignore

+1
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
11
**/node_modules/**
22
webpack.config.js
3+
web

‎CHANGELOG.md

+7
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,13 @@
22

33
==================
44

5+
### v1.4.1
6+
7+
- Add new website
8+
- Refactor code
9+
- Support sub-module
10+
- Lowercase file name
11+
512
### v1.4.0
613

714
- Detect extension more than 1 dot

‎package.json

+3-3
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,15 @@
33
"description": "A Browser Extension which gives different filetypes different icons, and code color theme to GitHub and Octotree for free.",
44
"license": "BSD-2-Clause Simplified License",
55
"author": "Thanh Vu",
6-
"homepage": "https://github.com/misa198/octotree-theme#readme",
6+
"homepage": "https://octotree-theme.web.app",
77
"repository": {
88
"type": "git",
99
"url": "https://github.com/misa198/octotree-theme/tree/master"
1010
},
1111
"bugs": {
1212
"url": "https://github.com/misa198/octotree-theme/issues"
1313
},
14-
"version": "1.4.0",
14+
"version": "1.4.1",
1515
"scripts": {
1616
"pre-commit": "lint-staged",
1717
"build:chromium-v3": "rm -rf build/chromium-v3 && cross-env PLATFORM=chromium-v3 webpack --config webpack.config.js",
@@ -30,6 +30,7 @@
3030
"adm-zip": "^0.5.9",
3131
"capitalize": "^2.0.4",
3232
"dom-loaded": "^2.0.0",
33+
"fancy-log": "^2.0.0",
3334
"file-icons-js": "^1.1.0",
3435
"is-mobile": "^3.0.0",
3536
"select-dom": "^7.1.1",
@@ -62,7 +63,6 @@
6263
"html-minimizer-webpack-plugin": "^3.5.0",
6364
"husky": "^6.0.0",
6465
"lint-staged": "^10.5.4",
65-
"log4js": "^6.5.2",
6666
"mini-css-extract-plugin": "^2.6.0",
6767
"path": "^0.12.7",
6868
"prettier": "^2.2.1",

‎src/scripts/background.ts

+24-10
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
1-
import { set, get } from './utils/storage';
1+
import { get, set } from './utils/storage';
22
import { Keys } from './constants/keys';
3-
import { detectBrowser } from './utils/detectBrowser';
3+
import { getBrowserAction, getCurrentBrowser } from './utils/detectBrowser';
44
import { IconThemes } from './constants/iconThemes';
5+
56
const urlRegex = new RegExp(
67
/^https:\/\/(gist.)?github.com\/[(a-z)(A-Z)(0-9)_-]+\/[(a-z)(A-Z)(0-9)_-]+(\/?)((\/.+)?)(\?(.+))?$/
78
);
@@ -14,7 +15,6 @@ get(
1415
Keys.OT_GITHUB_DIFF,
1516
],
1617
(result) => {
17-
console.log(result);
1818
if (result[Keys.OT_GITHUB] === undefined) {
1919
set({ [Keys.OT_GITHUB]: true });
2020
}
@@ -33,12 +33,11 @@ get(
3333
}
3434
);
3535

36-
const browserName = detectBrowser();
37-
const browserAction =
38-
chrome[browserName === 'chrome' ? 'action' : 'browserAction'];
36+
const browserAction = getBrowserAction();
37+
const currentBrowser = getCurrentBrowser();
3938

40-
chrome.tabs.onActivated.addListener(function (info) {
41-
chrome.tabs.get(info.tabId, function (change) {
39+
currentBrowser.tabs.onActivated.addListener(function (info) {
40+
currentBrowser.tabs.get(info.tabId, function (change) {
4241
if (change.url === undefined) {
4342
// Url is null
4443
browserAction.setPopup({
@@ -73,9 +72,9 @@ chrome.tabs.onActivated.addListener(function (info) {
7372
});
7473
});
7574

76-
chrome.tabs.onUpdated.addListener(function (tabId, changeInfo, tab) {
75+
currentBrowser.tabs.onUpdated.addListener(function (tabId, changeInfo, tab) {
7776
if (changeInfo.status === 'complete') {
78-
chrome.tabs.sendMessage(tabId, {
77+
currentBrowser.tabs.sendMessage(tabId, {
7978
message: Keys.OT_TAB_UPDATE,
8079
});
8180
}
@@ -102,3 +101,18 @@ chrome.tabs.onUpdated.addListener(function (tabId, changeInfo, tab) {
102101
});
103102
}
104103
});
104+
105+
// Open website after install
106+
currentBrowser.runtime.onInstalled.addListener((details) => {
107+
if (
108+
// No need to show changelog if its was a browser update (and not extension update)
109+
details.reason === 'browser_update' ||
110+
// No need to show changelog if developer just reloaded the extension
111+
details.reason === 'update'
112+
)
113+
return;
114+
const manifestData = currentBrowser.runtime.getManifest();
115+
currentBrowser.tabs.create({
116+
url: `${manifestData.homepage_url}/features`,
117+
});
118+
});

‎src/scripts/content.ts

+41-22
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,9 @@ import {
99
getMuiDirExpandedIcon,
1010
getMUIDirIcon,
1111
getMuiFileIcon,
12+
getMUISubmoduleIcon,
1213
} from './libs/mui';
13-
import { detectBrowser } from './utils/detectBrowser';
14+
import { getCurrentBrowser } from './utils/detectBrowser';
1415
import { get, set } from './utils/storage';
1516
// Content css
1617
import '../styles/icons/icons.scss';
@@ -21,6 +22,8 @@ import './constants/colorThemesScss';
2122
import { getResourceURL } from './utils/getResourceURL';
2223
import { IconThemes } from './constants/iconThemes';
2324

25+
const currentBrowser = getCurrentBrowser();
26+
2427
// ============ Icon theme ===================
2528

2629
const fonts = [
@@ -36,7 +39,6 @@ let octotree = false;
3639
let github = false;
3740
let githubDiff = false;
3841
let iconTheme = IconThemes.MUI;
39-
const browserName = detectBrowser();
4042
const githubMuiIconClass = 'github-mui-icon';
4143
const muiIconOctotreeClass = 'mui-icon-octotree';
4244
const muiDirClass = 'mui-icon-dir';
@@ -69,17 +71,20 @@ const replaceGithubIcon = ({
6971
iconDom,
7072
filenameDom,
7173
isDir,
74+
isSubmodule,
7275
}: {
7376
iconDom: HTMLElement | null;
7477
filenameDom: HTMLElement;
7578
isDir: boolean;
79+
isSubmodule: boolean;
7680
}) => {
7781
const fileName = isMobile
7882
? getGitHubMobileFilename(filenameDom)
7983
: filenameDom.innerText.trim();
8084
if (iconTheme === IconThemes.MUI) {
8185
let icon;
82-
if (!isDir) icon = getMuiFileIcon(fileName);
86+
if (!isDir)
87+
icon = isSubmodule ? getMUISubmoduleIcon() : getMuiFileIcon(fileName);
8388
else icon = getMUIDirIcon(fileName);
8489
if (iconDom) {
8590
const img = document.createElement('img');
@@ -103,18 +108,17 @@ const replaceGithubDiffIcon = ({
103108
iconDom,
104109
filenameDom,
105110
isDir,
111+
isSubmodule,
106112
}: {
107113
iconDom: HTMLElement | null;
108114
filenameDom: HTMLElement;
109115
isDir: boolean;
116+
isSubmodule: boolean;
110117
}) => {
111118
const fileName = isMobile
112119
? getGitHubMobileFilename(filenameDom)
113120
: filenameDom.innerText.trim();
114121
if (iconTheme === IconThemes.MUI) {
115-
let icon;
116-
if (!isDir) icon = getMuiFileIcon(fileName);
117-
else icon = getMUIDirIcon(fileName);
118122
if (iconDom) {
119123
if (isDir) {
120124
const [icon, expandedIcon] = [
@@ -133,7 +137,9 @@ const replaceGithubDiffIcon = ({
133137
iconDom.parentNode?.replaceChild(img, iconDom);
134138
img.parentNode?.appendChild(expandedImg);
135139
} else {
136-
const icon = getMuiFileIcon(fileName);
140+
const icon = isSubmodule
141+
? getMUISubmoduleIcon()
142+
: getMuiFileIcon(fileName);
137143
if (icon) {
138144
const img = document.createElement('img');
139145
img.classList.add(muiIconDiffClass);
@@ -146,7 +152,6 @@ const replaceGithubDiffIcon = ({
146152
} else {
147153
const className: string | null = fileIcons.getClassWithColor(fileName);
148154
if (className && !isDir) {
149-
console.log(className);
150155
const icon = document.createElement('span');
151156
icon.className = `icon octicon-file ${className}`;
152157
if (iconDom) {
@@ -199,7 +204,12 @@ const replaceOctotreeIcon = ({
199204
iconDom.parentNode?.appendChild(img);
200205
iconDom.parentNode?.appendChild(expandedImg);
201206
} else {
202-
const icon = getMuiFileIcon(filename);
207+
const isSubmodule = !Boolean(
208+
iconDom.parentElement?.getAttribute('data-download-url')
209+
);
210+
const icon = isSubmodule
211+
? getMUISubmoduleIcon()
212+
: getMuiFileIcon(filename);
203213
if (icon) {
204214
const img = document.createElement('img');
205215
img.classList.add(muiIconOctotreeClass);
@@ -242,11 +252,16 @@ const init = async () => {
242252
'svg[aria-label=File]',
243253
element
244254
) as HTMLElement;
255+
const submoduleIconDom = select(
256+
'svg[aria-label=Submodule]',
257+
element
258+
) as HTMLElement;
245259

246260
replaceGithubIcon({
247-
iconDom: dirIconDom || fileIconDom,
261+
iconDom: dirIconDom || submoduleIconDom || fileIconDom,
248262
filenameDom,
249263
isDir: Boolean(dirIconDom),
264+
isSubmodule: Boolean(submoduleIconDom),
250265
});
251266
},
252267
});
@@ -265,10 +280,16 @@ const init = async () => {
265280
'svg[aria-label=File]',
266281
element
267282
) as HTMLElement;
283+
const submoduleIconDom = select(
284+
'svg[aria-label=Submodule]',
285+
element
286+
) as HTMLElement;
287+
268288
replaceGithubDiffIcon({
269-
iconDom: dirIconDom || fileIconDom,
289+
iconDom: dirIconDom || submoduleIconDom || fileIconDom,
270290
filenameDom,
271291
isDir: Boolean(dirIconDom),
292+
isSubmodule: Boolean(submoduleIconDom),
272293
});
273294
},
274295
});
@@ -343,16 +364,14 @@ const applyColorTheme = async () => {
343364
},
344365
});
345366

346-
(browserName === 'chrome' ? chrome : browser).runtime.onMessage.addListener(
347-
(request) => {
348-
try {
349-
const message = JSON.parse(request.message);
350-
if (message.type === 'OT_CODE_COLOR_THEME') {
351-
changeTheme(message.codeColorTheme);
352-
}
353-
} catch (e) {}
354-
}
355-
);
367+
currentBrowser.runtime.onMessage.addListener((request) => {
368+
try {
369+
const message = JSON.parse(request.message);
370+
if (message.type === 'OT_CODE_COLOR_THEME') {
371+
changeTheme(message.codeColorTheme);
372+
}
373+
} catch (e) {}
374+
});
356375
};
357376

358377
get(
@@ -371,7 +390,7 @@ get(
371390
init();
372391
applyColorTheme();
373392

374-
chrome.runtime.onMessage.addListener(function (request) {
393+
currentBrowser.runtime.onMessage.addListener(function (request) {
375394
if (request.message === Keys.OT_TAB_UPDATE) {
376395
applyColorTheme();
377396
}

‎src/scripts/libs/mui/index.ts

+18-3
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,9 @@ import { files } from './files';
44
import { folders, foldersExpanded } from './folders';
55
import { icons } from './icons';
66

7+
export const getMUISubmoduleIcon = () =>
8+
getResourceURL(`assets/mui/${icons[folders['submodules']]}`);
9+
710
export const getMuiFileIcon = (fileName: string) => {
811
let iconName = 'file';
912
const lowerCaseFileName = fileName.toLowerCase();
@@ -16,20 +19,32 @@ export const getMuiFileIcon = (fileName: string) => {
1619
splitedName.forEach((path, index) => {
1720
if (index === 0) currentPath = path;
1821
else currentPath = `${path}.${currentPath}`;
19-
console.log(currentPath);
2022
if (extentions[currentPath]) iconName = extentions[currentPath];
2123
});
2224
}
2325

2426
return getResourceURL(`assets/mui/${icons[iconName]}`);
2527
};
2628

29+
const getMUIDirQuery = (dirName: string) => {
30+
const paths = dirName.split('/');
31+
let query = '';
32+
if (paths.length === 1) query = paths[0];
33+
query = paths[paths.length - 1];
34+
return query;
35+
};
36+
2737
export const getMUIDirIcon = (dirName: string) => {
28-
const dirIcon = folders[dirName] || 'folder';
38+
const query = getMUIDirQuery(dirName);
39+
const dirIcon = folders[query] || folders[query.toLowerCase()] || 'folder';
2940
return getResourceURL(`assets/mui/${icons[dirIcon]}`);
3041
};
3142

3243
export const getMuiDirExpandedIcon = (dirName: string) => {
33-
const dirIcon = foldersExpanded[dirName] || 'folder-open';
44+
const query = getMUIDirQuery(dirName);
45+
const dirIcon =
46+
foldersExpanded[query] ||
47+
foldersExpanded[query.toLowerCase()] ||
48+
'folder-open';
3449
return getResourceURL(`assets/mui/${icons[dirIcon]}`);
3550
};

‎src/scripts/popup.ts

+5-4
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
11
import * as capitalize from 'capitalize';
22
import { get, set } from './utils/storage';
3-
import { detectBrowser } from './utils/detectBrowser';
3+
import { detectBrowser, getCurrentBrowser } from './utils/detectBrowser';
44
import { Keys } from './constants/keys';
55
import { colorThemes } from './constants/colorThemes';
66
import '../styles/popup.scss';
77
import { IconThemes } from './constants/iconThemes';
88

9-
const manifestData = chrome.runtime.getManifest();
10-
const copyrightVerison = document.getElementById(
9+
const currentBrowser = getCurrentBrowser();
10+
const manifestData = currentBrowser.runtime.getManifest();
11+
const copyrightVersion = document.getElementById(
1112
Keys.OT_COPYRIGHT_VERSION
1213
) as HTMLSpanElement;
1314
const copyrightYear = document.getElementById(
@@ -16,7 +17,7 @@ const copyrightYear = document.getElementById(
1617
const copyrightHolder = document.getElementById(
1718
Keys.OT_COPYRIGHT_HOLDER
1819
) as HTMLLinkElement;
19-
copyrightVerison.innerText = `v${manifestData.version}`;
20+
copyrightVersion.innerText = `v${manifestData.version}`;
2021
copyrightYear.innerText = new Date().getFullYear().toString();
2122
copyrightHolder.href = manifestData.homepage_url as string;
2223
copyrightHolder.innerText = manifestData.author as string;

‎src/scripts/utils/detectBrowser.ts

+14
Original file line numberDiff line numberDiff line change
@@ -17,3 +17,17 @@ export const detectBrowser = () => {
1717
}
1818
return browserName;
1919
};
20+
21+
export const getBrowserAction = () => {
22+
const browserName = detectBrowser();
23+
return browserName === 'chrome'
24+
? chrome.action
25+
? chrome.action
26+
: chrome.browserAction
27+
: browser.browserAction;
28+
};
29+
30+
export const getCurrentBrowser = () => {
31+
const browserName = detectBrowser();
32+
return browserName === 'chrome' ? chrome : browser;
33+
};

‎src/scripts/utils/getResourceURL.ts

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import { detectBrowser } from './detectBrowser';
1+
import { getCurrentBrowser } from './detectBrowser';
22

33
export const getResourceURL = (path: string) => {
4-
const browserName = detectBrowser();
5-
return (browserName === 'chrome' ? chrome : browser).runtime.getURL(path);
4+
const currentBrowser = getCurrentBrowser();
5+
return currentBrowser.runtime.getURL(path);
66
};

0 commit comments

Comments
 (0)