Changes as per review comment

gulpfile.js

@@ -52,7 +52,7 @@ gulp.task('clean-release', clean_release);
 
 gulp.task('clean-cache', clean_cache);
 
-var distBuild = gulp.series(clean_dist, dist);
+var distBuild = gulp.series(clean_dist, dist_src, dist_locale, dist_libraries, dist_resources);
 gulp.task('dist', distBuild);
 
 var appsBuild = gulp.series(gulp.parallel(clean_apps, distBuild), apps, gulp.parallel(listPostBuildTasks(APPS_DIR)));
@@ -197,63 +197,41 @@ function clean_cache() {
 
 // Real work for dist task. Done in another task to call it via
 // run-sequence.
-function dist() {
+function dist_src() {
     var distSources = [
         // CSS files
-        './src/main.css',
+        './src/css/main.css',
-        './src/tabs/power.css',
+        './src/css/tabs/power.css',
-        './src/tabs/firmware_flasher.css',
+        './src/css/tabs/firmware_flasher.css',
-        './src/tabs/onboard_logging.css',
+        './src/css/tabs/onboard_logging.css',
-        './src/tabs/receiver.css',
+        './src/css/tabs/receiver.css',
-        './src/tabs/cli.css',
+        './src/css/tabs/cli.css',
-        './src/tabs/servos.css',
+        './src/css/tabs/servos.css',
-        './src/tabs/adjustments.css',
+        './src/css/tabs/adjustments.css',
-        './src/tabs/configuration.css',
+        './src/css/tabs/configuration.css',
-        './src/tabs/auxiliary.css',
+        './src/css/tabs/auxiliary.css',
-        './src/tabs/pid_tuning.css',
+        './src/css/tabs/pid_tuning.css',
-        './src/tabs/transponder.css',
+        './src/css/tabs/transponder.css',
-        './src/tabs/gps.css',
+        './src/css/tabs/gps.css',
-        './src/tabs/led_strip.css',
+        './src/css/tabs/led_strip.css',
-        './src/tabs/sensors.css',
+        './src/css/tabs/sensors.css',
-        './src/tabs/osd.css',
+        './src/css/tabs/osd.css',
-        './src/tabs/motors.css',
+        './src/css/tabs/motors.css',
-        './src/tabs/receiver_msp.css',
+        './src/css/tabs/receiver_msp.css',
-        './src/tabs/logging.css',
+        './src/css/tabs/logging.css',
-        './src/tabs/landing.css',
+        './src/css/tabs/landing.css',
-        './src/tabs/setup_osd.css',
+        './src/css/tabs/setup_osd.css',
-        './src/tabs/help.css',
+        './src/css/tabs/help.css',
-        './src/tabs/failsafe.css',
+        './src/css/tabs/failsafe.css',
-        './src/tabs/ports.css',
+        './src/css/tabs/ports.css',
-        './src/tabs/setup.css',
+        './src/css/tabs/setup.css',
         './src/css/opensans_webfontkit/fonts.css',
         './src/css/dropdown-lists/css/style_lists.css',
         './src/css/font-awesome/css/font-awesome.min.css',
-        './src/js/libraries/flightindicators.css',
+        './src/css/font-awesome/fonts/*',
-        './src/js/libraries/jbox/jBox.css',
+        './src/css/opensans_webfontkit/*.{eot,svg,ttf,woff,woff2}',
-        './src/js/libraries/jbox/themes/NoticeBorder.css',
-        './src/js/libraries/jbox/themes/ModalBorder.css',
-        './src/js/libraries/jbox/themes/TooltipDark.css',
-        './src/js/libraries/jbox/themes/TooltipBorder.css',
-        './src/js/libraries/jquery.nouislider.pips.min.css',
-        './src/js/libraries/switchery/switchery.css',
-        './src/js/libraries/jquery.nouislider.min.css',
 
-        // JavaScript
+        // JS files
-        './src/js/libraries/q.js',
-        './src/js/libraries/jquery-2.1.4.min.js',
-        './src/js/libraries/jquery-ui-1.11.4.min.js',
-        './src/js/libraries/d3.min.js',
-        './src/js/libraries/jquery.nouislider.all.min.js',
-        './src/js/libraries/three/three.min.js',
-        './src/js/libraries/three/Projector.js',
-        './src/js/libraries/three/CanvasRenderer.js',
-        './src/js/libraries/jquery.flightindicators.js',
-        './src/js/libraries/semver.js',
-        './src/js/libraries/jbox/jBox.min.js',
-        './src/js/libraries/switchery/switchery.js',
-        './src/js/libraries/bluebird.min.js',
-        './src/js/libraries/jquery.ba-throttle-debounce.min.js',
-        './src/js/libraries/inflection.min.js',
         './src/js/injected_methods.js',
         './src/js/data_storage.js',
         './src/js/workers/hex_parser.js',
@@ -279,55 +257,62 @@ function dist() {
         './src/js/Features.js',
         './src/js/Beepers.js',
         './src/js/release_checker.js',
-        './src/tabs/adjustments.js',
+        './src/js/tabs/adjustments.js',
-        './src/tabs/auxiliary.js',
+        './src/js/tabs/auxiliary.js',
-        './src/tabs/cli.js',
+        './src/js/tabs/cli.js',
-        './src/tabs/configuration.js',
+        './src/js/tabs/configuration.js',
-        './src/tabs/failsafe.js',
+        './src/js/tabs/failsafe.js',
-        './src/tabs/firmware_flasher.js',
+        './src/js/tabs/firmware_flasher.js',
-        './src/tabs/gps.js',
+        './src/js/tabs/gps.js',
-        './src/tabs/help.js',
+        './src/js/tabs/help.js',
-        './src/tabs/landing.js',
+        './src/js/tabs/landing.js',
-        './src/tabs/led_strip.js',
+        './src/js/tabs/led_strip.js',
-        './src/tabs/logging.js',
+        './src/js/tabs/logging.js',
-        './src/tabs/map.js',
+        './src/js/tabs/map.js',
-        './src/tabs/motors.js',
+        './src/js/tabs/motors.js',
-        './src/tabs/onboard_logging.js',
+        './src/js/tabs/onboard_logging.js',
-        './src/tabs/osd.js',
+        './src/js/tabs/osd.js',
-        './src/tabs/pid_tuning.js',
+        './src/js/tabs/pid_tuning.js',
-        './src/tabs/ports.js',
+        './src/js/tabs/ports.js',
-        './src/tabs/power.js',
+        './src/js/tabs/power.js',
-        './src/tabs/receiver.js',
+        './src/js/tabs/receiver.js',
-        './src/tabs/receiver_msp.js',
+        './src/js/tabs/receiver_msp.js',
-        './src/tabs/sensors.js',
+        './src/js/tabs/sensors.js',
-        './src/tabs/servos.js',
+        './src/js/tabs/servos.js',
-        './src/tabs/setup.js',
+        './src/js/tabs/setup.js',
-        './src/tabs/setup_osd.js',
+        './src/js/tabs/setup_osd.js',
-        './src/tabs/transponder.js',
+        './src/js/tabs/transponder.js',
-        './src/main.js',
+        './src/js/main.js',
+        './src/js/eventPage.js',
 
-        // everything else
+        // Src
-        './src/eventPage.js',
         './src/*.html',
         './src/tabs/*.html',
         './src/images/**/*',
-        './src/_locales/**/*',
-        './src/css/font-awesome/fonts/*',
-        './src/css/opensans_webfontkit/*.{eot,svg,ttf,woff,woff2}',
-        './src/resources/*.json',
-        './src/resources/models/*',
-        './src/resources/osd/*.mcm',
-        './src/resources/motor_order/*.svg',
     ];
+
     return gulp.src(distSources, { base: 'src' })
         .pipe(gulp.src('manifest.json', { passthrougth: true }))
         .pipe(gulp.src('package.json', { passthrougth: true }))
-        .pipe(gulp.dest(DIST_DIR))
+        .pipe(gulp.src('changelog.html', { passthrougth: true }))
-        .pipe(install({
+        .pipe(gulp.dest(DIST_DIR));
-            npm: '--production --ignore-scripts'
-        }));;
 };
 
+function dist_locale() {
+    return gulp.src('./locales/**/*', { base: 'locales'})
+        .pipe(gulp.dest(DIST_DIR + '_locales'));
+}
+
+function dist_libraries() {
+    return gulp.src('./libraries/**/*', { base: '.'})
+        .pipe(gulp.dest(DIST_DIR + 'js'));
+}
+
+function dist_resources() {
+    return gulp.src('./resources/**/*', { base: '.'})
+        .pipe(gulp.dest(DIST_DIR));
+}
+
 // Create runable app directories in ./apps
 function apps(done) {
     var platforms = getPlatforms();

manifest.json

@@ -13,7 +13,7 @@
 
     "app": {
         "background": {
-            "scripts": ["eventPage.js"],
+            "scripts": ["js/eventPage.js"],
             "persistent": false
         }
     },

package.json

@@ -3,7 +3,7 @@
   "description": "Crossplatform configuration tool for Betaflight flight control system.",
   "version": "10.2.0",
   "main": "main_nwjs.html",
-  "bg-script": "eventPage.js",
+  "bg-script": "js/eventPage.js",
   "default_locale": "en",
   "scripts": {
     "start": "node node_modules/gulp/bin/gulp.js debug",

src/css/main.css

@@ -45,7 +45,7 @@ a.disabled {
     height: 14px;
     width: 14px;
     opacity: 0.2;
-    background-image: url(images/icons/cf_icon_info_grey.svg);
+    background-image: url(../images/icons/cf_icon_info_grey.svg);
     background-size: contain;
     background-position: center;
     transition: none;
@@ -53,7 +53,7 @@ a.disabled {
 
 .helpicon:hover {
     opacity: 0.9;
-    background-image: url(images/icons/cf_icon_info_green.svg);
+    background-image: url(../images/icons/cf_icon_info_green.svg);
     transition: none;
 }
 
@@ -130,7 +130,7 @@ input[type="number"]::-webkit-inner-spin-button {
     float: left;
     height: 70px;
     z-index: 0;
-    background-image: url("images/light-wide-2.svg");
+    background-image: url(../images/light-wide-2.svg);
     background-repeat: no-repeat;
     width: 340px;
     background-position: left center;
@@ -237,7 +237,7 @@ input[type="number"]::-webkit-inner-spin-button {
 }
 
 .gyroicon {
-    background-image: url(images/icons/sensor_gyro_off.png);
+    background-image: url(../images/icons/sensor_gyro_off.png);
     background-size: 43px;
     background-position: top;
     background-repeat: no-repeat;
@@ -250,13 +250,13 @@ input[type="number"]::-webkit-inner-spin-button {
 }
 
 .gyroicon.active {
-    background-image: url(images/icons/sensor_gyro_on.png);
+    background-image: url(../images/icons/sensor_gyro_on.png);
     color: #61d514;
     color: #818181;
 }
 
 .accicon {
-    background-image: url(images/icons/sensor_acc_off.png);
+    background-image: url(../images/icons/sensor_acc_off.png);
     background-size: 40px;
     background-position: -5px 2px;
     background-repeat: no-repeat;
@@ -269,13 +269,13 @@ input[type="number"]::-webkit-inner-spin-button {
 }
 
 .accicon.active {
-    background-image: url(images/icons/sensor_acc_on.png);
+    background-image: url(../images/icons/sensor_acc_on.png);
     color: #61d514;
     color: #818181;
 }
 
 .magicon {
-    background-image: url(images/icons/sensor_mag_off.png);
+    background-image: url(../images/icons/sensor_mag_off.png);
     background-size: 42px;
     background-position: -5px 2px;
     background-repeat: no-repeat;
@@ -288,12 +288,12 @@ input[type="number"]::-webkit-inner-spin-button {
 }
 
 .magicon.active {
-    background-image: url(images/icons/sensor_mag_on.png);
+    background-image: url(../images/icons/sensor_mag_on.png);
     color: #818181;
 }
 
 .gpsicon {
-    background-image: url(images/icons/sensor_sat_off.png);
+    background-image: url(../images/icons/sensor_sat_off.png);
     background-size: 42px;
     background-position: -5px 2px;
     background-repeat: no-repeat;
@@ -306,12 +306,12 @@ input[type="number"]::-webkit-inner-spin-button {
 }
 
 .gpsicon.active {
-    background-image: url(images/icons/sensor_sat_on.png);
+    background-image: url(../images/icons/sensor_sat_on.png);
     color: #818181;
 }
 
 .baroicon {
-    background-image: url(images/icons/sensor_baro_off.png);
+    background-image: url(../images/icons/sensor_baro_off.png);
     background-size: 40px;
     background-position: -5px 2px;
     background-repeat: no-repeat;
@@ -324,12 +324,12 @@ input[type="number"]::-webkit-inner-spin-button {
 }
 
 .baroicon.active {
-    background-image: url(images/icons/sensor_baro_on.png);
+    background-image: url(../images/icons/sensor_baro_on.png);
     color: #818181;
 }
 
 .sonaricon {
-    background-image: url(images/icons/sensor_sonar_off.png);
+    background-image: url(../images/icons/sensor_sonar_off.png);
     background-size: 41px;
     background-position: -4px 1px;
     background-repeat: no-repeat;
@@ -342,7 +342,7 @@ input[type="number"]::-webkit-inner-spin-button {
 }
 
 .sonaricon.active {
-    background-image: url(images/icons/sensor_sonar_on.png);
+    background-image: url(../images/icons/sensor_sonar_on.png);
     color: #818181;
 }
 
@@ -369,7 +369,7 @@ input[type="number"]::-webkit-inner-spin-button {
     height: 20px;
     margin-top: 10px;
     margin-right: 10px;
-    background-image: url('./images/CF_settings_white.svg');
+    background-image: url(../images/CF_settings_white.svg);
     background-position: -1px -1px;
     background-repeat: no-repeat;
     opacity: 0.4;
@@ -424,7 +424,7 @@ input[type="number"]::-webkit-inner-spin-button {
     top: 113px;
     height: 27px;
     width: 27px;
-    background-image: url(images/icons/scroll.svg);
+    background-image: url(../images/icons/scroll.svg);
     background-repeat: no-repeat;
     background-size: 100%;
     opacity: 0.0;
@@ -583,309 +583,309 @@ input[type="number"]::-webkit-inner-spin-button {
 
 /* Tab-Icons */
 .ic_setup {
-    background-image: url(images/icons/cf_icon_setup_grey.svg);
+    background-image: url(../images/icons/cf_icon_setup_grey.svg);
 }
 
 .ic_setup:hover {
-    background-image: url(images/icons/cf_icon_setup_white.svg);
+    background-image: url(../images/icons/cf_icon_setup_white.svg);
 }
 
 li.active .ic_setup {
-    background-image: url(images/icons/cf_icon_setup_white.svg);
+    background-image: url(../images/icons/cf_icon_setup_white.svg);
 }
 
 .ic_ports {
-    background-image: url(images/icons/cf_icon_ports_grey.svg);
+    background-image: url(../images/icons/cf_icon_ports_grey.svg);
 }
 
 .ic_ports:hover {
-    background-image: url(images/icons/cf_icon_ports_white.svg);
+    background-image: url(../images/icons/cf_icon_ports_white.svg);
 }
 
 li.active .ic_ports {
-    background-image: url(images/icons/cf_icon_ports_white.svg);
+    background-image: url(../images/icons/cf_icon_ports_white.svg);
 }
 
 .ic_config {
-    background-image: url(images/icons/cf_icon_config_grey.svg);
+    background-image: url(../images/icons/cf_icon_config_grey.svg);
 }
 
 .ic_config:hover {
-    background-image: url(images/icons/cf_icon_config_white.svg);
+    background-image: url(../images/icons/cf_icon_config_white.svg);
 }
 
 li.active .ic_config {
-    background-image: url(images/icons/cf_icon_config_white.svg);
+    background-image: url(../images/icons/cf_icon_config_white.svg);
 }
 
 .ic_pid {
-    background-image: url(images/icons/cf_icon_pid_grey.svg);
+    background-image: url(../images/icons/cf_icon_pid_grey.svg);
 }
 
 .ic_pid:hover {
-    background-image: url(images/icons/cf_icon_pid_white.svg);
+    background-image: url(../images/icons/cf_icon_pid_white.svg);
 }
 
 li.active .ic_pid {
-    background-image: url(images/icons/cf_icon_pid_white.svg);
+    background-image: url(../images/icons/cf_icon_pid_white.svg);
 }
 
 .ic_rx {
-    background-image: url(images/icons/cf_icon_rx_grey.svg);
+    background-image: url(../images/icons/cf_icon_rx_grey.svg);
 }
 
 .ic_rx:hover {
-    background-image: url(images/icons/cf_icon_rx_white.svg);
+    background-image: url(../images/icons/cf_icon_rx_white.svg);
 }
 
 li.active .ic_rx {
-    background-image: url(images/icons/cf_icon_rx_white.svg);
+    background-image: url(../images/icons/cf_icon_rx_white.svg);
 }
 
 .ic_modes {
-    background-image: url(images/icons/cf_icon_modes_grey.svg);
+    background-image: url(../images/icons/cf_icon_modes_grey.svg);
 }
 
 .ic_modes:hover {
-    background-image: url(images/icons/cf_icon_modes_white.svg);
+    background-image: url(../images/icons/cf_icon_modes_white.svg);
 }
 
 li.active .ic_modes {
-    background-image: url(images/icons/cf_icon_modes_white.svg);
+    background-image: url(../images/icons/cf_icon_modes_white.svg);
 }
 
 .ic_adjust {
-    background-image: url(images/icons/cf_icon_adjust_grey.svg);
+    background-image: url(../images/icons/cf_icon_adjust_grey.svg);
 }
 
 .ic_adjust:hover {
-    background-image: url(images/icons/cf_icon_adjust_white.svg);
+    background-image: url(../images/icons/cf_icon_adjust_white.svg);
 }
 
 li.active .ic_adjust {
-    background-image: url(images/icons/cf_icon_adjust_white.svg);
+    background-image: url(../images/icons/cf_icon_adjust_white.svg);
 }
 
 .ic_servo {
-    background-image: url(images/icons/cf_icon_servo_grey.svg);
+    background-image: url(../images/icons/cf_icon_servo_grey.svg);
 }
 
 .ic_servo:hover {
-    background-image: url(images/icons/cf_icon_servo_white.svg);
+    background-image: url(../images/icons/cf_icon_servo_white.svg);
 }
 
 li.active .ic_servo {
-    background-image: url(images/icons/cf_icon_servo_white.svg);
+    background-image: url(../images/icons/cf_icon_servo_white.svg);
 }
 
 .ic_gps {
-    background-image: url(images/icons/cf_icon_gps_grey.svg);
+    background-image: url(../images/icons/cf_icon_gps_grey.svg);
 }
 
 .ic_gps:hover {
-    background-image: url(images/icons/cf_icon_gps_white.svg);
+    background-image: url(../images/icons/cf_icon_gps_white.svg);
 }
 
 li.active .ic_gps {
-    background-image: url(images/icons/cf_icon_gps_white.svg);
+    background-image: url(../images/icons/cf_icon_gps_white.svg);
 }
 
 .ic_led {
-    background-image: url(images/icons/cf_icon_led_grey.svg);
+    background-image: url(../images/icons/cf_icon_led_grey.svg);
 }
 
 .ic_led:hover {
-    background-image: url(images/icons/cf_icon_led_white.svg);
+    background-image: url(../images/icons/cf_icon_led_white.svg);
 }
 
 li.active .ic_led {
-    background-image: url(images/icons/cf_icon_led_white.svg);
+    background-image: url(../images/icons/cf_icon_led_white.svg);
 }
 
 .ic_sensors {
-    background-image: url(images/icons/cf_icon_sensors_grey.svg);
+    background-image: url(../images/icons/cf_icon_sensors_grey.svg);
 }
 
 .ic_sensors:hover {
-    background-image: url(images/icons/cf_icon_sensors_white.svg);
+    background-image: url(../images/icons/cf_icon_sensors_white.svg);
 }
 
 li.active .ic_sensors {
-    background-image: url(images/icons/cf_icon_sensors_white.svg);
+    background-image: url(../images/icons/cf_icon_sensors_white.svg);
 }
 
 .ic_log {
-    background-image: url(images/icons/cf_icon_log_grey.svg);
+    background-image: url(../images/icons/cf_icon_log_grey.svg);
 }
 
 .ic_log:hover {
-    background-image: url(images/icons/cf_icon_log_white.svg);
+    background-image: url(../images/icons/cf_icon_log_white.svg);
 }
 
 li.active .ic_log {
-    background-image: url(images/icons/cf_icon_log_white.svg);
+    background-image: url(../images/icons/cf_icon_log_white.svg);
 }
 
 .ic_data {
-    background-image: url(images/icons/cf_icon_data_grey.svg);
+    background-image: url(../images/icons/cf_icon_data_grey.svg);
 }
 
 .ic_data:hover {
-    background-image: url(images/icons/cf_icon_data_white.svg);
+    background-image: url(../images/icons/cf_icon_data_white.svg);
 }
 
 li.active .ic_data {
-    background-image: url(images/icons/cf_icon_data_white.svg);
+    background-image: url(../images/icons/cf_icon_data_white.svg);
 }
 
 .ic_cli {
-    background-image: url(images/icons/cf_icon_cli_grey.svg);
+    background-image: url(../images/icons/cf_icon_cli_grey.svg);
 }
 
 .ic_cli:hover {
-    background-image: url(images/icons/cf_icon_cli_white.svg);
+    background-image: url(../images/icons/cf_icon_cli_white.svg);
 }
 
 li.active .ic_cli {
-    background-image: url(images/icons/cf_icon_cli_white.svg);
+    background-image: url(../images/icons/cf_icon_cli_white.svg);
 }
 
 .ic_motor {
-    background-image: url(images/icons/cf_icon_motor_grey.svg);
+    background-image: url(../images/icons/cf_icon_motor_grey.svg);
 }
 
 .ic_motor:hover {
-    background-image: url(images/icons/cf_icon_motor_white.svg);
+    background-image: url(../images/icons/cf_icon_motor_white.svg);
 }
 
 li.active .ic_motor {
-    background-image: url(images/icons/cf_icon_motor_white.svg);
+    background-image: url(../images/icons/cf_icon_motor_white.svg);
 }
 
 .ic_welcome {
-    background-image: url(images/icons/cf_icon_welcome_grey.svg);
+    background-image: url(../images/icons/cf_icon_welcome_grey.svg);
 }
 
 .ic_welcome:hover {
-    background-image: url(images/icons/cf_icon_welcome_white.svg);
+    background-image: url(../images/icons/cf_icon_welcome_white.svg);
 }
 
 li.active .ic_welcome {
-    background-image: url(images/icons/cf_icon_welcome_white.svg);
+    background-image: url(../images/icons/cf_icon_welcome_white.svg);
 }
 
 .ic_help {
-    background-image: url(images/icons/cf_icon_help_grey.svg);
+    background-image: url(../images/icons/cf_icon_help_grey.svg);
 }
 
 .ic_help:hover {
-    background-image: url(images/icons/cf_icon_help_white.svg);
+    background-image: url(../images/icons/cf_icon_help_white.svg);
 }
 
 li.active .ic_help {
-    background-image: url(images/icons/cf_icon_help_white.svg);
+    background-image: url(../images/icons/cf_icon_help_white.svg);
 }
 
 .ic_flasher {
-    background-image: url(images/icons/cf_icon_flasher_grey.svg);
+    background-image: url(../images/icons/cf_icon_flasher_grey.svg);
 }
 
 .ic_flasher:hover {
-    background-image: url(images/icons/cf_icon_flasher_white.svg);
+    background-image: url(../images/icons/cf_icon_flasher_white.svg);
 }
 
 li.active .ic_flasher {
-    background-image: url(images/icons/cf_icon_flasher_white.svg);
+    background-image: url(../images/icons/cf_icon_flasher_white.svg);
 }
 
 .ic_transponder {
-    background-image: url(images/icons/cf_icon_transponder_grey.svg);
+    background-image: url(../images/icons/cf_icon_transponder_grey.svg);
 }
 
 .ic_transponder:hover {
-    background-image: url(images/icons/cf_icon_transponder_white.svg);
+    background-image: url(../images/icons/cf_icon_transponder_white.svg);
 }
 
 li.active .ic_transponder {
-    background-image: url(images/icons/cf_icon_transponder_white.svg);
+    background-image: url(../images/icons/cf_icon_transponder_white.svg);
 }
 
 .ic_osd {
-    background-image: url(images/icons/icon_osd.svg);
+    background-image: url(../images/icons/icon_osd.svg);
     background-position-y: 4px;
 }
 
 .ic_osd:hover, li.active .ic_osd {
-    background-image: url(images/icons/icon_osd_white.svg);
+    background-image: url(../images/icons/icon_osd_white.svg);
 }
 
 .ic_power {
-    background-image: url(images/icons/cf_icon_power_grey.svg);
+    background-image: url(../images/icons/cf_icon_power_grey.svg);
     background-position-y: 9px;
 }
 
 .ic_power:hover {
-    background-image: url(images/icons/cf_icon_power_white.svg);
+    background-image: url(../images/icons/cf_icon_power_white.svg);
 }
 
 li.active .ic_power {
-    background-image: url(images/icons/cf_icon_power_white.svg);
+    background-image: url(../images/icons/cf_icon_power_white.svg);
 }
 
 /* SPARE Tab-Icons */
 .ic_failsafe {
-    background-image: url(images/icons/cf_icon_failsafe_grey.svg);
+    background-image: url(../images/icons/cf_icon_failsafe_grey.svg);
 }
 
 .ic_failsafe:hover {
-    background-image: url(images/icons/cf_icon_failsafe_white.svg);
+    background-image: url(../images/icons/cf_icon_failsafe_white.svg);
 }
 
 li.active .ic_failsafe {
-    background-image: url(images/icons/cf_icon_failsafe_white.svg);
+    background-image: url(../images/icons/cf_icon_failsafe_white.svg);
 }
 .ic_backup {
-    background-image: url(images/icons/cf_icon_backup_grey.svg);
+    background-image: url(../images/icons/cf_icon_backup_grey.svg);
 }
 .ic_backup:hover {
-    background-image: url(images/icons/cf_icon_backup_white.svg);
+    background-image: url(../images/icons/cf_icon_backup_white.svg);
 }
 
 li.active .ic_backup {
-    background-image: url(images/icons/cf_icon_backup_white.svg);
+    background-image: url(../images/icons/cf_icon_backup_white.svg);
 }
 
 .ic_wizzard {
-    background-image: url(images/icons/cf_icon_wizard_grey.svg);
+    background-image: url(../images/icons/cf_icon_wizard_grey.svg);
 }
 .ic_wizzard:hover {
-    background-image: url(images/icons/cf_icon_wizard_white.svg);
+    background-image: url(../images/icons/cf_icon_wizard_white.svg);
 }
 
 li.active .ic_wizard {
-    background-image: url(images/icons/cf_icon_wizard_white.svg);
+    background-image: url(../images/icons/cf_icon_wizard_white.svg);
 }
 
 .ic_advanced {
-    background-image: url(images/icons/cf_icon_advanced_grey.svg);
+    background-image: url(../images/icons/cf_icon_advanced_grey.svg);
 }
 .ic_advanced:hover {
-    background-image: url(images/icons/cf_icon_advanced_white.svg);
+    background-image: url(../images/icons/cf_icon_advanced_white.svg);
 }
 
 li.active .ic_advanced {
-    background-image: url(images/icons/cf_icon_advanced_white.svg);
+    background-image: url(../images/icons/cf_icon_advanced_white.svg);
 }
 
 .ic_mission {
-    background-image: url(images/icons/cf_icon_mission_grey.svg);
+    background-image: url(../images/icons/cf_icon_mission_grey.svg);
 }
 .ic_mission:hover {
-    background-image: url(images/icons/cf_icon_mission_white.svg);
+    background-image: url(../images/icons/cf_icon_mission_white.svg);
 }
 
 li.active .ic_mission {
-    background-image: url(images/icons/cf_icon_mission_white.svg);
+    background-image: url(../images/icons/cf_icon_mission_white.svg);
 }
 
 #content {
@@ -946,7 +946,7 @@ li.active .ic_mission {
 .data-loading {
     width: 100%;
     height: 100%;
-    background-image: url('../images/loading-spin.svg');
+    background-image: url(../images/loading-spin.svg);
     background-repeat: no-repeat;
     background-position: center 45%;
 }
@@ -1461,7 +1461,7 @@ dialog {
 .connect_b a.connect {
     background-color: #ffbb00;
     border: 1px solid #dba718;
-    background-image: url(images/icons/cf_icon_usb2_white.svg);
+    background-image: url(../images/icons/cf_icon_usb2_white.svg);
     background-repeat: no-repeat;
     background-size: 44px;
     background-position: center 6px;
@@ -1475,7 +1475,7 @@ dialog {
 .connect_b a.connect.active {
     background-color: #e60000;
     border: 1px solid #fe0000;
-    background-image: url(images/icons/cf_icon_usb1_white.svg);
+    background-image: url(../images/icons/cf_icon_usb1_white.svg);
     transition: none;
 }
 
@@ -1695,7 +1695,7 @@ dialog {
 }
 
 .battery-icon {
-    background-image: url(images/icons/cf_icon_bat_grey.svg);
+    background-image: url(../images/icons/cf_icon_bat_grey.svg);
     background-size: contain;
     background-position: center;
     display: inline-block;
@@ -1723,14 +1723,14 @@ dialog {
 }
 
 .armedicon {
-    background-image: url(images/icons/cf_icon_armed_grey.svg);
+    background-image: url(../images/icons/cf_icon_armed_grey.svg);
 }
 .failsafeicon {
-    background-image: url(images/icons/cf_icon_failsafe_grey.svg);
+    background-image: url(../images/icons/cf_icon_failsafe_grey.svg);
 }
 
 .linkicon {
-    background-image: url(images/icons/cf_icon_link_grey.svg);
+    background-image: url(../images/icons/cf_icon_link_grey.svg);
 }
 
 .bottomStatusIcons {

src/css/tabs/auxiliary.css

@@ -184,7 +184,7 @@
     float: right;
     margin-right: 5px;
     margin-top: -9px;
-    background-image: url('../images/icons/close1.svg');
+    background-image: url('../../images/icons/close1.svg');
     background-repeat: no-repeat;
     background-position: center 100%;
     display: block;

src/css/tabs/cli.css

@@ -20,7 +20,7 @@
     background-color: rgba(0, 0, 0, 0.75);
     margin-top: 0px;
     height: calc(100% - 90px); /* - (p, textarea) */
-    background-image: url("../images/light-wide-1.svg");
+    background-image: url("../../images/light-wide-1.svg");
     background-repeat: no-repeat;
     background-position: 50% 80%;
     background-size: 600px;

src/css/tabs/configuration.css

@@ -373,21 +373,21 @@
 }
 
 .tab-configuration .pitch {
-    background-image: url(../images/icons/cf_icon_pitch.svg);
+    background-image: url(../../images/icons/cf_icon_pitch.svg);
     background-repeat: no-repeat;
     background-size: 20px;
     background-position: center;
 }
 
 .tab-configuration .yaw {
-    background-image: url(../images/icons/cf_icon_yaw.svg);
+    background-image: url(../../images/icons/cf_icon_yaw.svg);
     background-repeat: no-repeat;
     background-size: 20px;
     background-position: center;
 }
 
 .tab-configuration .roll {
-    background-image: url(../images/icons/cf_icon_roll.svg);
+    background-image: url(../../images/icons/cf_icon_roll.svg);
     background-repeat: no-repeat;
     background-size: 20px;
     background-position: center;

src/css/tabs/failsafe.css

@@ -92,28 +92,28 @@
 }
 
 .tab-failsafe .pro1 {
-    background-image: url(../images/icons/cf_failsafe_procedure1.svg);
+    background-image: url(../../images/icons/cf_failsafe_procedure1.svg);
     background-position: top right 10px;
     background-size: 200px;
     background-repeat: no-repeat;
 }
 
 .tab-failsafe .pro2 {
-    background-image: url(../images/icons/cf_failsafe_procedure2.svg);
+    background-image: url(../../images/icons/cf_failsafe_procedure2.svg);
     background-position: top right 10px;
     background-size: 200px;
     background-repeat: no-repeat;
 }
 
 .tab-failsafe .pro3 {
-    background-image: url(../images/icons/cf_failsafe_procedure3.svg);
+    background-image: url(../../images/icons/cf_failsafe_procedure3.svg);
     background-position: top right 10px;
     background-size: 200px;
     background-repeat: no-repeat;
 }
 
 .tab-failsafe .pro4 {
-    background-image: url(../images/icons/cf_failsafe_procedure4.svg);
+    background-image: url(../../images/icons/cf_failsafe_procedure4.svg);
     background-position: top right 10px;
     background-size: 200px;
     background-repeat: no-repeat;

src/css/tabs/gps.css

@@ -28,7 +28,7 @@
     display: none;
     text-align: center;
     padding-top: 0px;
-    background-image: url(../images/loading-bars.svg);
+    background-image: url(../../images/loading-bars.svg);
     background-position: center 40%;
     background-size: 15%;
     height: 100%;

src/css/tabs/help.css

@@ -16,7 +16,7 @@
     border-top: 1px dotted silver;
     padding-top: 5px;
     padding-bottom: 5px;
-    background-image: url(../images/arrow.svg);
+    background-image: url(../../images/arrow.svg);
     background-repeat: no-repeat;
     background-position: 0px 8px;
     background-size: 12px;

src/css/tabs/landing.css

@@ -16,7 +16,7 @@
     height: 140px;
     background: #fff;
     padding: 20px;
-    background-image: url(../images/pattern.png);
+    background-image: url(../../images/pattern.png);
     background-size: 300px;
 }