Merge pull request #106 from adambriny/bugfix/blank-file-icons-on-fir…

…efox

Loading file icons from the bundle

package.json

@@ -25,7 +25,7 @@
     "core-js": "2",
     "css-loader": "^2.1.0",
     "file-icons-js": "^1.0.3",
-    "file-loader": "^3.0.1",
+    "file-loader": "^6.0.0",
     "fs-extra": "^9.0.0",
     "glamor": "^3.0.0-3",
     "hoist-non-react-statics": "^2.3.1",

src/js/components/tree/index.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import Actions from '../actions'
 import Branch from '../branch'
-import { createFileTree, isElementVisible, StorageSync } from '../../lib'
+import { createFileTree, isElementVisible, StorageSync, getBrowserApi } from '../../lib'
 import BodyColor from '../bodyColor'
 
 const MIN_RESIZE_WIDTH = 55
@@ -127,11 +127,7 @@ class Tree extends React.Component {
   }
 
   onOptions () {
-    let browserApi = window.chrome
-    if (typeof browser !== 'undefined') {
-      browserApi = browser
-    }
-    window.open(browserApi.runtime.getURL('options.html'))
+    window.open(getBrowserApi().runtime.getURL('options.html'))
   }
 
   onClose () {

src/js/index.jsx

@@ -1,7 +1,8 @@
 import React from 'react'
 import { render } from 'react-dom'
 import Tree from './components/tree'
-import { createFileTree, createRootElement } from './lib'
+import { createFileTree, createRootElement, getBrowserApi } from './lib'
+
 import './style.css'
 
 const { document, MutationObserver, parseInt = Number.parseInt } = window
@@ -63,10 +64,28 @@ const renderTree = () => {
   render(<Top />, rootElement)
 }
 
+const loadFonts = () => {
+  [
+    { name: 'FontAwesome', fileName: 'fontawesome.woff2' },
+    { name: 'Mfizz', fileName: 'mfixx.woff2' },
+    { name: 'Devicons', fileName: 'devopicons.woff2' },
+    { name: 'file-icons', fileName: 'file-icons.woff2' },
+    { name: 'octicons', fileName: 'octicons.woff2' },
+  ]
+    .map(({ name, fileName }) => new FontFace(name,
+      `url("${getBrowserApi().runtime.getURL(`fonts/${fileName}`)}") format("woff2")`,
+      {
+        style: 'normal',
+        weight: 'normal'
+      }))
+    .forEach(async fontFace => await fontFace.load().then(loadedFont => document.fonts.add(loadedFont)))
+}
+
 const start = () => {
   observe()
   renderTree()
 }
 
+loadFonts()
 observe()
 start()

src/js/lib.js

@@ -175,6 +175,14 @@ export const isElementVisible = (el) => {
 
 const EMPTY_FILTER = ''
 
+export const getBrowserApi = () => {
+  let browserApi = window.chrome
+    if (typeof browser !== 'undefined') {
+      browserApi = browser
+    }
+  return browserApi
+}
+
 export const StorageSync = {
   save () {
     return new Promise(resolve => {

src/js/style.css

@@ -1,5 +1,5 @@
-@import '../../node_modules/react-treeview/react-treeview.css';
-@import 'https://cdn.jsdelivr.net/npm/file-icons-js@1.0.3/css/style.css';
+@import '~react-treeview/react-treeview.css';
+@import '~file-icons-js/css/style.css';
 
 /* Extension specific */
 

src/manifest.chrome.json

@@ -37,12 +37,12 @@
     "default_popup": "options.html"
   },
   "options_page": "options.html",
-  "web_accessible_resources": ["options.html"],
+  "web_accessible_resources": ["options.html", "*.woff2"],
   "icons": {
     "16": "16x16.png",
     "48": "48x48.png",
     "128": "128x128.png"
   },
   "manifest_version": 2,
-  "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"
+  "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self';"
 }

src/manifest.firefox.json

@@ -40,13 +40,13 @@
     "chrome_style": true,
     "page": "options.html"
   },
-  "web_accessible_resources": ["options.html"],
+  "web_accessible_resources": ["options.html", "*.woff2"],
   "icons": {
     "16": "16x16.png",
     "48": "48x48.png",
     "128": "128x128.png"
   },
   "manifest_version": 2,
   "version": "1.0.0",
-  "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"
+  "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self';"
 }

webpack.config.js

@@ -30,7 +30,11 @@ module.exports = {
       },
       {
         test: /\.css$/,
-        loader: 'style-loader!css-loader'
+        loader: 'style-loader!css-loader',
+      },
+      {
+        test: /\.(woff2)$/,
+        loader: 'file-loader?name=/fonts/[name].[ext]'
       }
     ]
   },

yarn.lock

@@ -4095,13 +4095,13 @@ file-icons-js@^1.0.3:
   resolved "https://registry.yarnpkg.com/file-icons-js/-/file-icons-js-1.0.3.tgz#d0765dc1d86aba4b2d7664a39e4ef7af9f12c5af"
   integrity sha512-n4zoKEpMaAxBTUB7wtgrFBa4dM3b7mBLLA1VI/Q5Cdk/k2UA8S8oaxvnECp3QOzg0Dn+KKRzfIHF7qSdRkA65Q==
 
-file-loader@^3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/file-loader/-/file-loader-3.0.1.tgz#f8e0ba0b599918b51adfe45d66d1e771ad560faa"
-  integrity sha512-4sNIOXgtH/9WZq4NvlfU3Opn5ynUsqBwSLyM+I7UOwdGigTBYfVVQEwe/msZNX/j4pCJTIM14Fsw66Svo1oVrw==
+file-loader@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/file-loader/-/file-loader-6.0.0.tgz#97bbfaab7a2460c07bcbd72d3a6922407f67649f"
+  integrity sha512-/aMOAYEFXDdjG0wytpTL5YQLfZnnTmLNjn+AIrJ/6HVnTfDqLsVKUUwkDf4I4kgex36BvjuXEn/TX9B/1ESyqQ==
   dependencies:
-    loader-utils "^1.0.2"
-    schema-utils "^1.0.0"
+    loader-utils "^2.0.0"
+    schema-utils "^2.6.5"
 
 [email protected]:
   version "1.0.0"
@@ -5849,7 +5849,7 @@ loader-runner@^2.4.0:
   resolved "https://registry.yarnpkg.com/loader-runner/-/loader-runner-2.4.0.tgz#ed47066bfe534d7e84c4c7b9998c2a75607d9357"
   integrity sha512-Jsmr89RcXGIwivFY21FcRrisYZfvLMTWx5kOLc+JTxtpBOG6xML0vzbc6SEQG2FO9/4Fc3wW4LVcB5DmGflaRw==
 
-loader-utils@^1.0.2, loader-utils@^1.1.0, loader-utils@^1.2.1:
+loader-utils@^1.1.0, loader-utils@^1.2.1:
   version "1.2.3"
   resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.2.3.tgz#1ff5dc6911c9f0a062531a4c04b609406108c2c7"
   integrity sha512-fkpz8ejdnEMG3s37wGL07iSBDg99O9D5yflE9RGNH3hRdx9SOwYfnGYdZOUIZitN8E+E2vkq3MUMYMvPYl5ZZA==
@@ -5867,6 +5867,15 @@ loader-utils@^1.2.3, loader-utils@^1.4.0:
     emojis-list "^3.0.0"
     json5 "^1.0.1"
 
+loader-utils@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-2.0.0.tgz#e4cace5b816d425a166b5f097e10cd12b36064b0"
+  integrity sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==
+  dependencies:
+    big.js "^5.2.2"
+    emojis-list "^3.0.0"
+    json5 "^2.1.2"
+
 locate-path@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-2.0.0.tgz#2b568b265eec944c6d9c0de9c3dbbbca0354cd8e"