Cordova framework integration, Android support, mobile UI & options tab

Cordova integration and android platform :
- Added cordova directory with required config
- Added cordova applications generation in gulpfile
- Added cordova development instructions
- Used cordova plugins to simulate missing chrome api  plugins (chrome.serial and chrome.fileSystem)
- Added cordova clipboard support
- Added android operating system and Cordova gui mode
- Fixed some css and js files to make them working on Android as well as on computers
- Added --skipdep argument to accelerate cordova build (gulp task)
- Added a webview helper to help people to update the webview app of their device

New options tab :
- Added options tab replacing the options dropdown
- Added option to switch between phones UI and computers UI

Mobile interface and global interface improvements :
- Simplified the structure of the header with flex css
- Made headerbar and tab container responsive (compact headerbar and side menu)
- All tabs are adapted to mobile interface (except firmware flasher)
- The servos and adjustments tabs are not fully adapted but are "usable"
- Improved header bar animation
- Improved log expandation animation
- Added swipe gesture to toggle side menu

Fixes during the development :
- Logo position
- Dark mode
- Auto connection
- Error messages (cordova_chromeapi.js)
- Responsive grid
- Testing
- Disconnection
- Width of boxes inside the OSD tab
- Fixed cli tab
- OSD tab
- Motor stop switch
- White spaces in boxes
- Dialogs size
- Connect button state
- Prevent tablet with a height larger than 575px to switch to computers ui
- Fixed logging tab
- Fixed code smell
- Fixed yarn cordova plugin install issue
- Fixed content_wrapper
- Fixed vibrations when scrolling
- Fixed scrolling bar alignment
- Fixed dialogReportProblem height
- Fixed rates logo
- Fixed auto connection default value (true)
- Fixed D to D max
- Fixed dialogs

Added required messages in locales/en/messages.json file

Requested changes

src/js/phones_ui.js

@@ -0,0 +1,87 @@
+'use strict';
+
+const UI_PHONES = {
+    background: '#background',
+    tabContainer: '.tab_container',
+    tabContentContainer: '#tab-content-container',
+    headerbar: '.headerbar',
+    init: function() {
+        const self = this;
+        $('#menu_btn').click(function() {
+            self.openSideMenu();
+        });
+        $(this.background).click(function() {
+            self.closeSideMenu();
+        });
+        $('#tabs a').click(function() {
+            if ($('.tab_container').hasClass('reveal')) {
+                self.closeSideMenu();
+            }
+        });
+        $('#reveal_btn').click(function() {
+            self.expandHeader();
+        });
+        $(`${this.background}, ${this.tabContainer}`).swipe( {
+            swipeLeft: function() {
+                self.closeSideMenu();
+            },
+        });
+        $('#side_menu_swipe').swipe( {
+            swipeRight: function() {
+                self.openSideMenu();
+            },
+        });
+    },
+    initToolbar: function() {
+        $('.toolbar_expand_btn').click(this.expandToolbar);
+    },
+    openSideMenu: function() {
+        $(this.background).fadeIn(300);
+        $(this.tabContainer).addClass('reveal');
+    },
+    closeSideMenu: function() {
+        $(this.background).fadeOut(300);
+        $(this.tabContainer).removeClass('reveal');
+    },
+    expandHeader: function() {
+        const self = this;
+        let expand, headerExpanded, reveal;
+        if (GUI.connected_to) {
+            expand = 'expand2';
+            headerExpanded = 'header_expanded2';
+            reveal = '.header-wrapper';
+        } else {
+            expand = 'expand';
+            headerExpanded = 'headerExpanded';
+            reveal = '#port-picker';
+        }
+        if ($(self.headerbar).hasClass(expand)) {
+            $(reveal).removeClass('reveal');
+            setTimeout(function() {
+                $(self.tabContentContainer).removeClass(headerExpanded);
+                $(self.headerbar).removeClass(expand);
+            }, 100);
+        } else {
+            $(self.tabContentContainer).addClass(headerExpanded);
+            $(self.headerbar).addClass(expand);
+            setTimeout(function() {
+                $(reveal).addClass('reveal');
+            }, 100);
+        }
+    },
+    expandToolbar: function() {
+        const toolbar = $('.content_toolbar.xs-compressed');
+        if (toolbar.length > 0) {
+            if ($('.content_toolbar.xs-compressed').hasClass('expanded')) {
+                toolbar.removeClass('expanded');
+            } else {
+                toolbar.addClass('expanded');
+            }
+        }
+    },
+    reset: function() {
+        $(this.tabContentContainer).removeClass('header_expanded2 header_expanded');
+        $('#port-picker, .header-wrapper').removeClass('reveal');
+        $(this.headerbar).removeClass('expand2 expand');
+    },
+};