Add option in Developer Settings to enable/disable developer menu

Also added the ability to access Developer Settings by holding
Ctrl-Shift or Cmd-Shift and clicking the LBRY logo.

https://youtu.be/pXPXMxsXT28

CHANGELOG.md

@@ -8,8 +8,8 @@ Web UI version numbers should always match the corresponding version of LBRY App
 
 ## [Unreleased]
 ### Added
-  *
-  *
+  * A way to access the Developer Settings panel in Electron (Ctrl-Shift or Cmd-Shift and click logo)
+  * Option in Developer Settings to toggle developer menu
   *
 
 ### Changed

js/component/drawer.js

@@ -20,6 +20,13 @@ var drawerImageStyle = { //@TODO: remove this, img should be properly scaled onc
 };
 
 var Drawer = React.createClass({
+  handleLogoClicked: function(event) {
+    if (event.shiftKey && (event.ctrlKey || event.metaKey)) {
+      window.location.href = 'index.html?developer'
+      event.preventDefault();
+      return false;
+    }
+  },
   getInitialState: function() {
     return {
       balance: 0,
@@ -37,7 +44,7 @@ var Drawer = React.createClass({
       <nav id="drawer">
         <div id="drawer-handle">
           <Link title="Close" onClick={this.props.onCloseDrawer} icon="icon-bars" className="close-drawer-link"/>
-          <a href="index.html?discover"><img src={lbry.imagePath("lbry-dark-1600x528.png")} style={drawerImageStyle}/></a>
+          <a href="index.html?discover" onMouseUp={this.handleLogoClicked}><img src={lbry.imagePath("lbry-dark-1600x528.png")} style={drawerImageStyle}/></a>
         </div>
         <DrawerItem href='index.html?discover' viewingPage={this.props.viewingPage} label="Discover" icon="icon-search"  />
         <DrawerItem href='index.html?publish' viewingPage={this.props.viewingPage} label="Publish" icon="icon-upload" />

js/lbry.js

@@ -1,5 +1,8 @@
 import lighthouse from './lighthouse.js';
 
+const {remote} = require('electron');
+const menu = remote.require('./menu/main-menu');
+
 var lbry = {
   isConnected: false,
   rootPath: '.',
@@ -15,6 +18,7 @@ var lbry = {
     debug: false,
     useCustomLighthouseServers: false,
     customLighthouseServers: [],
+    menu: 'normal',
   }
 };
 
@@ -555,4 +559,16 @@ lbry.fileInfoUnsubscribe = function(name, subscribeId) {
   delete lbry._fileInfoSubscribeCallbacks[name][subscribeId];
 }
 
+lbry.showMenuIfNeeded = function() {
+  const showingMenu = sessionStorage.getItem('menuShown');
+  const chosenMenu = lbry.getClientSetting('menu');
+  if (!showingMenu || showingMenu != chosenMenu) {
+    if (chosenMenu == 'normal') {
+      menu.showNormalMenubar();
+    } else {
+      menu.showDeveloperMenubar();
+    }
+  }
+};
+
 export default lbry;

js/main.js

@@ -5,6 +5,7 @@ import lighthouse from './lighthouse.js';
 import App from './app.js';
 import SplashScreen from './component/splash.js';
 
+lbry.showMenuIfNeeded();
 
 var init = function() {
   window.lbry = lbry;

js/page/developer.js

@@ -5,15 +5,16 @@ import FormField from '../component/form.js';
 const DeveloperPage = React.createClass({
   getInitialState: function() {
     return {
-      debugMode: lbry.getClientSetting('debug'),
+      showDeveloperMenu: lbry.getClientSetting('menu') == 'developer',
       useCustomLighthouseServers: lbry.getClientSetting('useCustomLighthouseServers'),
       customLighthouseServers: lbry.getClientSetting('customLighthouseServers').join('\n'),
     };
   },
-  handleDebugModeChange: function(event) {
-    lbry.setClientSetting('debug', event.target.checked);
+  handleShowDeveloperMenuChange: function(event) {
+    lbry.setClientSetting('menu', event.target.checked ? 'developer' : 'normal');
+    lbry.showMenuIfNeeded();
     this.setState({
-      debugMode: event.target.checked,
+      showDeveloperMenu: event.target.checked,
     });
   },
   handleUseCustomLighthouseServersChange: function(event) {
@@ -22,19 +23,13 @@ const DeveloperPage = React.createClass({
       useCustomLighthouseServers: event.target.checked,
     });
   },
-  handleCustomLighthouseServersChange: function(event) {
-    lbry.setClientSetting('customLighthouseServers', event.target.value.trim().split('\n'));
-    this.setState({
-      customLighthouseServers: event.target.value,
-    });
-  },
   render: function() {
     return (
       <main>
         <section className="card">
           <h3>Developer Settings</h3>
           <div className="form-row">
-            <label><FormField type="checkbox" onChange={this.handleDebugModeChange} checked={this.state.debugMode} /> Enable debug mode (exposes LBRY modules in global scope)</label>
+            <label><FormField type="checkbox" onChange={this.handleShowDeveloperMenuChange} checked={this.state.showDeveloperMenu} /> Show developer menu</label>
           </div>
           <div className="form-row">
             <label><FormField type="checkbox" onChange={this.handleUseCustomLighthouseServersChange} checked={this.state.useCustomLighthouseServers} /> Use custom search servers</label>