Fixed GH bug not showing file icons, preparing for 1.7 release

dderevjanik · Jan 11, 2018 · d24d720 · d24d720
1 parent 9c69811
commit d24d720
Show file tree

Hide file tree

Showing 6 changed files with 128 additions and 130 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,11 +4,10 @@ All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 
-## [1.0.7] - 2018-01-DD
+## [1.0.7] - 2018-01-11
 
 ### Added
 
-- Added Popup, where you can turn off/on vsi for specific hostings
 - Support for [gitlab.com](https://about.gitlab.com/)
  - Display icons in Repo Tree
 - Support for [bitbucket.org](https://bitbucket.org/)
@@ -20,13 +19,14 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 
 ### Changed
 
-- Updated `vscode-icons` to 7.19.1, added 25 new icons, read more at vscode-icons [changelog](https://marketplace.visualstudio.com/items/robertohuertasm.vscode-icons/changelog)
+- Updated `vscode-icons` to 7.19.0, added 25 new icons, read more at vscode-icons [changelog](https://marketplace.visualstudio.com/items/robertohuertasm.vscode-icons/changelog)
 - Changed structure of project to be more abstract for several web-based GIT hostings (Github, Gitlab, Bitbucket and Gist) and even for Pastebin
 
 ### Fixes
 
-- Fixed git submodule icon not showing on GH pages
-- Temporally fixed symlink icon on GH
+- [Github] no icon for submodule
+- [Github] temporally fixed bug with `symlink` files
+- [Github] not showing file icons
 
 ## [1.0.6] - 2017-10-29
 

diff --git a/build/manifest.json b/build/manifest.json
@@ -14,8 +14,7 @@
  "default_icon": {
  "128": "icon128.png",
  "48": "icon48.png"
- },
- "default_popup": "popup.html"
+ }
  },
  "background": {
  "scripts": [

diff --git a/packages/common/LocalStorage.ts b/packages/common/LocalStorage.ts
@@ -4,57 +4,57 @@
 import { SupportedHostings } from './SupportedHostings';
 
 export type LocalStorage = {
- /**
+ /**
  * Extension version
  */
- version: string;
- /**
+ version: string;
+ /**
  * List of showed/hidden icons for specific hosts
  */
- showIcons: { [Hosting in SupportedHostings]: boolean };
+ showIcons: { [Hosting in SupportedHostings]: boolean };
 };
 
 export const initialStorage: LocalStorage = {
- version: chrome.runtime.getManifest().version,
- showIcons: {
- github: true,
- githubgist: false,
- gitlab: true,
- bitbucket: false,
- pastebin: false,
- sourceforge: false
- }
+ version: chrome.runtime.getManifest().version,
+ showIcons: {
+ github: true,
+ githubgist: false,
+ gitlab: true,
+ bitbucket: true,
+ pastebin: false,
+ sourceforge: false
+ }
 };
 
 export function getStorage(): Promise<LocalStorage> {
- return new Promise((resolve, reject) => {
- if (chrome.storage === undefined) {
- reject(new Error('Storage is not accessible from this part of extension'));
- }
- chrome.storage.local.get(storage => {
- const store = storage as LocalStorage;
- if (store.version === undefined) {
- // When version doesn't exists, it means that storage is empty and user is running
- // extension for first time, so use initial storage
- chrome.storage.local.set(initialStorage);
- resolve(initialStorage);
- }
- resolve(store);
- });
- });
+ return new Promise((resolve, reject) => {
+ if (chrome.storage === undefined) {
+ reject(new Error('Storage is not accessible from this part of extension'));
+ }
+ chrome.storage.local.get(storage => {
+ const store = storage as LocalStorage;
+ if (store.version === undefined) {
+ // When version doesn't exists, it means that storage is empty and user is running
+ // extension for first time, so use initial storage
+ chrome.storage.local.set(initialStorage);
+ resolve(initialStorage);
+ }
+ resolve(store);
+ });
+ });
 }
 
 export function setStorage(storage: LocalStorage) {
- if (chrome.storage === undefined) {
- throw new Error('Storage is not accessible from this part of extension');
- }
- chrome.storage.local.set(storage);
+ if (chrome.storage === undefined) {
+ throw new Error('Storage is not accessible from this part of extension');
+ }
+ chrome.storage.local.set(storage);
 }
 
 export function resetStorage() {
- if (chrome.storage === undefined) {
- throw new Error('Storage is not accessible from this part of extension');
- }
- chrome.storage.local.set(initialStorage);
- return initialStorage;
+ if (chrome.storage === undefined) {
+ throw new Error('Storage is not accessible from this part of extension');
+ }
+ chrome.storage.local.set(initialStorage);
+ return initialStorage;
 }
diff --git a/packages/content/Content.ts b/packages/content/Content.ts
@@ -15,14 +15,14 @@ import { initSourceForge } from './pages/SourceForge';
 const hostLocation = location.host;
 
 (async function() {
- const storage = (await sendMessage({ type: 'STORAGE_GET' })) as LocalStorage;
- const hosts = Object.keys(storage.showIcons) as SupportedHostings[];
- for (const host of hosts) {
- const hostingData = getHostData(host);
- const isShowIconsTurnedOn = storage.showIcons[host];
- if (isShowIconsTurnedOn && hostLocation.includes(hostingData.host)) {
- showIconsForHosting(host);
- break; // we don't need to iterate over another hostings when already displayed icons
- }
- }
+ const storage = (await sendMessage({ type: 'STORAGE_GET' })) as LocalStorage;
+ const hosts = Object.keys(storage.showIcons) as SupportedHostings[];
+ for (const host of hosts) {
+ const hostingData = getHostData(host);
+ const isShowIconsTurnedOn = storage.showIcons[host];
+ if (isShowIconsTurnedOn && hostLocation.includes(hostingData.host)) {
+ showIconsForHosting(host);
+ break; // we don't need to iterate over another hostings when already displayed icons
+ }
+ }
 })();
diff --git a/packages/content/pages/GitHub.ts b/packages/content/pages/GitHub.ts
@@ -73,13 +73,13 @@ function showRepoTreeIcons() {
 
  const iconSVGClassName = iconSVGEl.className.baseVal;
  let iconPath = '';
- if (iconSVGClassName.includes('octicon-file-text')) {
+ if (iconSVGClassName.includes('octicon-file-text') || iconSVGClassName.endsWith('octicon-file')) {
  iconPath = getIconForFile(linkToEl.innerText.toLowerCase());
- } else if (iconSVGClassName.includes('octicon-file-directory')) {
+ } else if (iconSVGClassName.endsWith('octicon-file-directory')) {
  iconPath = getIconForFolder(name.split('/').shift());
- } else if (iconSVGClassName.includes('octicon-file-submodule')) {
+ } else if (iconSVGClassName.endsWith('octicon-file-submodule')) {
  iconPath = DEFAULT_ROOT;
- } else if (iconSVGClassName.includes('octicon-file-symlink-file')) {
+ } else if (iconSVGClassName.endsWith('octicon-file-symlink-file')) {
  iconPath = DEFAULT_FILE;
  }
 

diff --git a/packages/popup/Popup.tsx b/packages/popup/Popup.tsx
@@ -5,88 +5,87 @@ import { sendMessage } from '../common/Messenger';
 import { getHostData } from '../common/HostData';
 
 type State = {
- storage: LocalStorage;
- isSomethingChanged: boolean;
+ storage: LocalStorage;
+ isSomethingChanged: boolean;
 };
 
 type Props = {
- storage: LocalStorage;
+ storage: LocalStorage;
 };
 
 class Popup extends React.Component<Props, State> {
- constructor(props: Props) {
- super(props);
- this.state = {
- storage: props.storage,
- isSomethingChanged: false
- };
- }
+ constructor(props: Props) {
+ super(props);
+ this.state = {
+ storage: props.storage,
+ isSomethingChanged: false
+ };
+ }
 
- handleToggleClick = (hosting: keyof LocalStorage['showIcons']) => {
- const prevStorage = this.state.storage;
- const newStorage: LocalStorage = {
- ...prevStorage,
- showIcons: {
- ...prevStorage.showIcons,
- [hosting]: !prevStorage.showIcons[hosting]
- }
- };
- sendMessage({ type: 'STORAGE_SET', storage: newStorage });
- this.setState({
- storage: newStorage,
- isSomethingChanged: true
- });
- };
+ handleToggleClick = (hosting: keyof LocalStorage['showIcons']) => {
+ const prevStorage = this.state.storage;
+ const newStorage: LocalStorage = {
+ ...prevStorage,
+ showIcons: {
+ ...prevStorage.showIcons,
+ [hosting]: !prevStorage.showIcons[hosting]
+ }
+ };
+ sendMessage({ type: 'STORAGE_SET', storage: newStorage });
+ this.setState({
+ storage: newStorage,
+ isSomethingChanged: true
+ });
+ };
 
- handleResetButton = async () => {
- const defaultState = (await sendMessage({ type: 'STORAGE_RESET' })) as LocalStorage;
- this.setState({
- storage: defaultState
- });
- };
+ handleResetButton = async () => {
+ const defaultState = (await sendMessage({ type: 'STORAGE_RESET' })) as LocalStorage;
+ this.setState({
+ storage: defaultState
+ });
+ };
 
- render() {
- const hostings = Object.keys(this.props.storage.showIcons) as (keyof LocalStorage['showIcons'])[];
- const changedText = this.state.isSomethingChanged ? (
- <p style={{ color: 'orange' }}>
- <i>In order to see changes on pages, please reload them using refresh button</i>
- </p>
- ) : null;
- return (
- <div id="settings">
- <h3>display icons for:</h3>
- <div>
- {hostings.map((hosting, index) => {
- const hostData = getHostData(hosting);
- return (
- <div
- key={index}
- className="form-group"
- style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}
- >
- <label className="form-checkbox">
- {hostData.fullName}
- <input
- type="checkbox"
- checked={this.state.storage.showIcons[hosting]}
- onChange={(_: any) => this.handleToggleClick(hosting)}
- />
- <i className="form-icon" />
- </label>
- <img className="vsi-icon" src={chrome.runtime.getURL(`favicons/${hostData.favicon}`)} />
- </div>
- );
- })}
- {changedText}
- </div>
- {/* <button onClick={this.handleResetButton}>Reset</button> */}
- </div>
- );
- }
+ render() {
+ const hostings = Object.keys(this.props.storage.showIcons) as (keyof LocalStorage['showIcons'])[];
+ const changedText = this.state.isSomethingChanged ? (
+ <p style={{ color: 'orange' }}>
+ <i>In order to see changes on pages, please reload them using refresh button</i>
+ </p>
+ ) : null;
+ return (
+ <div id="settings">
+ <h3>display icons for:</h3>
+ <div>
+ {hostings.map((hosting, index) => {
+ const hostData = getHostData(hosting);
+ return (
+ <div
+ key={index}
+ className="form-group"
+ style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}
+ >
+ <label className="form-checkbox">
+ {hostData.fullName}
+ <input
+ type="checkbox"
+ checked={this.state.storage.showIcons[hosting]}
+ onChange={(_: any) => this.handleToggleClick(hosting)}
+ />
+ <i className="form-icon" />
+ </label>
+ <img className="vsi-icon" src={chrome.runtime.getURL(`favicons/${hostData.favicon}`)} />
+ </div>
+ );
+ })}
+ {changedText}
+ </div>
+ {/* <button onClick={this.handleResetButton}>Reset</button> */}
+ </div>
+ );
+ }
 }
 
 (async function() {
- const storage = (await sendMessage({ type: 'STORAGE_GET' })) as LocalStorage;
- console.log(storage);
- ReactDOM.render(<Popup storage={storage} />, document.getElementById('app') as HTMLDivElement);
+ const storage = (await sendMessage({ type: 'STORAGE_GET' })) as LocalStorage;
+ ReactDOM.render(<Popup storage={storage} />, document.getElementById('app') as HTMLDivElement);
 })();