Few bug fixes

Author: DB-CL

header-userscript

@@ -1,6 +1,6 @@
 {
     "name": "dbcl-navbar",
-    "version": "1.0.1",
+    "version": "1.0.2",
     "description": "A navbar injected with userscripts",
     "scripts": {
         "lint": "tslint --project tslint.json ./src/*.ts",
@@ -33,6 +33,7 @@
         ]
     },
     "dependencies": {
-        "@types/greasemonkey": "^4.0.0"
+        "@types/greasemonkey": "^4.0.0",
+        "babel-polyfill": "^6.26.0"
     }
 }

package-lock.json

@@ -15,7 +15,7 @@ export class FoldArrow {
         this.build();
     }
 
-    private build() {
+    private async build() {
         this._html.style.position = 'fixed';
         this._html.style.top = '-3px';
         this._html.style.left = '10px';
@@ -26,9 +26,14 @@ export class FoldArrow {
         this._html.style.justifyContent = 'center';
         this._html.style.alignItems = 'center';
         this._html.style.borderRadius = '3px';
+        this._html.style.zIndex = '99999';
 
         const arrowIcon = document.createElement('img');
-        arrowIcon.src = env.getInstance().url + '/assets/fa-arrow-down.png';
+        if (env.getInstance().devMode === true) {
+            arrowIcon.src = env.getInstance().url + '/assets/fa-arrow-down.png';
+        } else {
+            arrowIcon.src = await GM_getResourceURL('fa-arrow-down');
+        }
         arrowIcon.style.height = '10px';
         arrowIcon.style.width = '10px';
         arrowIcon.style.marginTop = '3px';

package.json

@@ -1,3 +1,4 @@
+import 'babel-polyfill';
 import { Menu, MenuData } from './menu';
 import { Environment } from './environment';
 import { Row } from './row';

src/foldArrow.ts

@@ -66,6 +66,7 @@ export class Menu {
         this._html.style.display = 'flex';
         this._html.style.flexDirection = 'column';
         this._html.style.backgroundColor = '#333333';
+        this._html.style.zIndex = '99999';
 
         const body = document.querySelector('body');
         if (body) {
@@ -158,7 +159,14 @@ export class Menu {
         header.style.alignItems = 'center';
 
         const icon = document.createElement('img');
-        icon.src = env.getInstance().url + '/assets/fa-menu.png';
+        if (env.getInstance().devMode === true) {
+            icon.src = env.getInstance().url + '/assets/fa-menu.png';
+        } else {
+            (async () => {
+                icon.src = await GM_getResourceURL('fa-menu');
+            })();
+        }
+
         icon.style.height = '20px';
         icon.style.width = '20px';
         icon.style.margin = '10px ' + (this.iconSize / 2) + 'px';
@@ -178,7 +186,13 @@ export class Menu {
         header.appendChild(title);
 
         const foldIcon = document.createElement('img');
-        foldIcon.src = env.getInstance().url + '/assets/fa-arrow-up.png';
+        if (env.getInstance().devMode === true) {
+            foldIcon.src = env.getInstance().url + '/assets/fa-arrow-up.png';
+        } else {
+            (async () => {
+                foldIcon.src = await GM_getResourceURL('fa-arrow-up');
+            })();
+        }
         foldIcon.style.height = '10px';
         foldIcon.style.width = '10px';
         foldIcon.style.margin = '10px';

src/index.ts

@@ -34,7 +34,7 @@ export class Row {
         this.build();
     }
 
-    private build() {
+    private async build() {
         this._row.style.width = '100%px';
         this._row.style.height = '40px';
         this._row.style.display = 'flex';
@@ -63,8 +63,16 @@ export class Row {
             this._row.style.borderLeft = '3px solid transparent';
         }
 
-        const url = (Row.validURL(this.icon)) ? this.icon : Environment.getInstance().url + '/assets/apps/' + this.icon + '.png';
-        this._icon.style.backgroundImage = 'url(' + url + ')';
+        let url: string;
+        if (Environment.getInstance().devMode === true) {
+            url = (Row.validURL(this.icon)) ? this.icon : Environment.getInstance().url + '/assets/apps/64x/' + this.icon + '.png';
+            this._icon.style.backgroundImage = 'url(' + url + ')';
+        } else {
+            (async () => {
+                url = (Row.validURL(this.icon)) ? this.icon : await GM_getResourceURL(this.icon);
+                this._icon.style.backgroundImage = 'url(' + url + ')';
+            })();
+        }
         this._icon.style.border = '0';
         this._icon.style.backgroundColor = 'transparent';
         this._icon.style.backgroundRepeat = 'no-repeat';