Option to automatically open DevTools (#3352)

locales/en/messages.json

@@ -6822,5 +6822,9 @@
     },
     "coreBuildModeDescription": {
         "message": "This option builds a firmware that contains the hardware drivers (and some limited features). It is available to assist in the detection of the hardware on a flight controller, and is provided for that convenience only. Not all features will be available (only hardware) using this option."
+    },
+    "showDevToolsOnStartup": {
+        "message": "Automatically open DevTools in development mode",
+        "description": "Text for the option to enable automatic opening of DevTools in debug mode"
     }
 }

src/js/data_storage.js

@@ -35,6 +35,10 @@ const CONFIGURATOR = {
             return `${this.version}`;
         }
     },
+
+    isDevVersion: function() {
+        return this.version.includes('debug');
+    },
 };
 
 export default CONFIGURATOR;

src/js/main.js

@@ -183,6 +183,10 @@ function startProcess() {
             GUI.nwGui.Shell.openExternal(url);
         });
         nwWindow.on('close', closeHandler);
+        const config = getConfig('showDevToolsOnStartup');
+        if (CONFIGURATOR.isDevVersion() && !!config.showDevToolsOnStartup) {
+            nwWindow.showDevTools();
+        }
     } else if (GUI.isCordova()) {
         window.addEventListener('beforeunload', closeHandler);
         document.addEventListener('backbutton', function(e) {

src/js/tabs/options.js

@@ -6,6 +6,7 @@ import CliAutoComplete from '../CliAutoComplete';
 import DarkTheme, { setDarkTheme } from '../DarkTheme';
 import { checkForConfiguratorUpdates } from '../utils/checkForConfiguratorUpdates';
 import { checkSetupAnalytics } from '../Analytics';
+import CONFIGURATOR from '../data_storage';
 
 const options = {};
 options.initialize = function (callback) {
@@ -25,6 +26,7 @@ options.initialize = function (callback) {
         TABS.options.initShowVirtualMode();
         TABS.options.initCordovaForceComputerUI();
         TABS.options.initDarkTheme();
+        TABS.options.initShowDevToolsOnStartup();
 
         TABS.options.initShowWarnings();
 
@@ -185,6 +187,18 @@ options.initDarkTheme = function () {
         }).change();
 };
 
+options.initShowDevToolsOnStartup = function () {
+    if (!(CONFIGURATOR.isDevVersion() && GUI.isNWJS())) {
+        $('div.showDevToolsOnStartup').hide();
+        return;
+    }
+    const result = getConfig('showDevToolsOnStartup');
+    $('div.showDevToolsOnStartup input')
+        .prop('checked', !!result.showDevToolsOnStartup)
+        .change(function () { setConfig({ showDevToolsOnStartup: $(this).is(':checked') }); })
+        .change();
+};
+
 // TODO: remove when modules are in place
 TABS.options = options;
 export { options };

src/tabs/options.html

@@ -61,6 +61,12 @@
                     </select>
                     <span class="freelabel" i18n="darkTheme"></span>
                 </div>
+                <div class="showDevToolsOnStartup margin-bottom">
+                    <div>
+                        <input type="checkbox" class="toggle" />
+                    </div>
+                    <span class="freelabel" i18n="showDevToolsOnStartup"></span>
+                </div>
             </div>
         </div>