feat(dev-mode): Toggle dev mode, sticky through restarts

docs/Debugging.md

@@ -21,13 +21,13 @@ Here are a few hidden tricks for getting the most out of the Chromium DevTools:
 
 ### Nylas Developer Panel
 
-If you choose `Developer > Relaunch with Debug Flags...` from the menu, you can enable the Nylas Developer Panel at the bottom of the main window.
+If you choose `Developer > Show Activity Window` from the menu, you can see detailed logs of the requests, tasks, and streaming updates processed by N1.
 
 The Developer Panel provides three views which you can click to activate:
 
 - `Tasks`: This view allows you to inspect the {TaskQueue} and see the what tasks are pending and complete. Click a task to see its JSON representation and inspect it's values, including the last error it encountered.
 
-- `Delta Stream`: This view allows you to see the streaming updates from the Nylas API that the app has received. You can click individual updates to see the exact JSON that was consumed by the app, and search in the lower left for updates pertaining to an object ID or type.
+- `Long Polling`: This view allows you to see the streaming updates from the Nylas API that the app has received. You can click individual updates to see the exact JSON that was consumed by the app, and search in the lower left for updates pertaining to an object ID or type.
 
 - `Requests`: This view shows the requests the app has made to the Nylas API in `curl`-equivalent form. (The app does not actually make `curl` requests). You can click "Copy" to copy a `curl` command to the clipboard, or "Run" to execute it in a new Terminal window.
 

internal_packages/plugins/lib/packages-store.coffee

@@ -176,7 +176,20 @@ PackagesStore = Reflux.createStore
         @_displayMessage("Package installed", msg)
 
   _onCreatePackage: ->
-    packagesDir = path.join(atom.getConfigDirPath(), 'packages')
+    if not atom.inDevMode()
+      btn = dialog.showMessageBox
+        type: 'warning'
+        message: "Run with debug flags?"
+        detail: "To develop plugins, you should run N1 with debug flags.
+                This gives you better error messages, the debug version of
+                React, and more. You can disable it at any time from the
+                Developer menu."
+        buttons: ["OK", "Cancel"]
+      if btn is 0
+        ipc.send('command', 'application:toggle-dev')
+      return
+
+    packagesDir = path.join(atom.getConfigDirPath(), 'dev', 'packages')
     fs.makeTreeSync(packagesDir)
 
     dialog.showSaveDialog
@@ -248,7 +261,7 @@ PackagesStore = Reflux.createStore
     pkgs
 
   _displayMessage: (title, message) ->
-    chosen = dialog.showMessageBox
+    dialog.showMessageBox
       type: 'warning'
       message: title
       detail: message

internal_packages/plugins/lib/tab-installed.cjsx

@@ -17,6 +17,20 @@ class TabInstalled extends React.Component
     if @state.search.length > 0
       searchEmpty = "No matching packages."
 
+    if atom.inDevMode()
+      devPackages = @state.packages.dev
+      devEmpty = <span>
+        You don't have any packages installed in ~/.nylas/dev/packages.
+        These packages are only loaded when you run the app with debug flags
+        enabled (via the Developer menu).<br/><br/>Learn more about building
+        packages at <a href='https://nylas.github.io/N1/docs'>https://nylas.github.io/N1/docs</a>
+      </span>
+      devCTA = <div className="btn btn-large" onClick={@_onCreatePackage}>Create New Package...</div>
+    else
+      devPackages = []
+      devEmpty = <span>Run with debug flags enabled to load ~/.nylas/dev/packages.</span>
+      devCTA = <div className="btn btn-large" onClick={@_onEnableDevMode}>Enable Debug Flags</div>
+
     <div className="installed">
       <div className="inner">
         <input
@@ -27,13 +41,13 @@ class TabInstalled extends React.Component
         <PackageSet
           packages={@state.packages.user}
           title="Installed"
-          emptyText={searchEmpty ? "You don't have any packages installed in ~/.nylas/packages."} />
+          emptyText={searchEmpty ? <span>You don't have any packages installed in ~/.nylas/packages.</span>} />
         <PackageSet
           title="Development"
-          packages={@state.packages.dev}
-          emptyText={searchEmpty ? <span>You don't have any packages installed in ~/.nylas/dev/packages. These packages are only loaded when you run the app with debug flags enabled (via the Developer menu).<br/><br/>Learn more about building packages at <a href='https://nylas.github.io/N1/docs'>https://nylas.github.io/N1/docs</a></span>}   />
+          packages={devPackages}
+          emptyText={searchEmpty ? devEmpty} />
         <div className="new-package">
-          <div className="btn btn-large" onClick={@_onCreatePackage}>Create New Package...</div>
+          {devCTA}
         </div>
         <PackageSet
           title="Core"
@@ -41,6 +55,9 @@ class TabInstalled extends React.Component
       </div>
     </div>
 
+  _onEnableDevMode: =>
+    require('ipc').send('command', 'application:toggle-dev')
+
   componentDidMount: =>
     @_unsubscribers = []
     @_unsubscribers.push PackagesStore.listen(@_onChange)

menus/darwin.cson

@@ -54,15 +54,15 @@
   {
     label: 'Developer'
     submenu: [
+      { label: 'Run with Debug Flags', type: 'checkbox', command: 'application:toggle-dev' }
+      { type: 'separator' }
+      { label: 'Reload', command: 'window:reload' }
       { label: 'Toggle Developer Tools', command: 'window:toggle-dev-tools' }
       { label: 'Toggle Component Regions', command: 'window:toggle-component-regions' }
       { label: 'Toggle React Remote', command: 'window:toggle-react-remote' }
       { type: 'separator' }
       { label: 'Open Activity Window', command: 'application:show-work-window' }
       { type: 'separator' }
-      { label: 'Reload', command: 'window:reload' }
-      { label: 'Relaunch with Debug Flags...', command: 'application:open-dev' }
-      { type: 'separator' }
       { label: 'Create a Package...', command: 'application:create-package' }
       { label: 'Install a Package Manually...', command: 'application:install-package' }
       { type: 'separator' }

menus/linux.cson

@@ -34,15 +34,15 @@
   {
     label: 'Developer'
     submenu: [
+      { label: 'Run with &Debug Flags', type: 'checkbox', command: 'application:toggle-dev' }
+      { type: 'separator' }
+      { label: 'Reload', command: 'window:reload' }
       { label: 'Toggle Developer &Tools', command: 'window:toggle-dev-tools' }
       { label: 'Toggle Component Regions', command: 'window:toggle-component-regions' }
       { label: 'Toggle React Remote', command: 'window:toggle-react-remote' }
       { type: 'separator' }
       { label: 'Open Activity Window', command: 'application:show-work-window' }
       { type: 'separator' }
-      { label: '&Reload', command: 'window:reload' }
-      { label: 'Relaunch with &Debug Flags...', command: 'application:open-dev' }
-      { type: 'separator' }
       { label: 'Create a Package...', command: 'application:create-package' }
       { label: 'Install a Package Manually...', command: 'application:install-package' }
       { type: 'separator' }

menus/win32.cson

@@ -23,15 +23,15 @@
   {
     label: 'Developer'
     submenu: [
+      { label: 'Run with &Debug Flags', type: 'checkbox', command: 'application:toggle-dev' }
+      { type: 'separator' }
+      { label: '&Reload', command: 'window:reload' }
       { label: 'Toggle Developer &Tools', command: 'window:toggle-dev-tools' }
       { label: 'Toggle Component Regions', command: 'window:toggle-component-regions' }
       { label: 'Toggle React Remote', command: 'window:toggle-react-remote' }
       { type: 'separator' }
       { label: 'Open Activity Window', command: 'application:show-work-window' }
       { type: 'separator' }
-      { label: '&Reload', command: 'window:reload' }
-      { label: 'Relaunch with &Debug Flags...', command: 'application:open-dev' }
-      { type: 'separator' }
       { label: 'Create a Package...', command: 'application:create-package' }
       { label: 'Install a Package Manually...', command: 'application:install-package' }
       { type: 'separator' }

src/browser/application-menu.coffee

@@ -16,6 +16,8 @@ class ApplicationMenu
     @setActiveTemplate(@getDefaultTemplate())
     global.application.autoUpdateManager.on 'state-changed', (state) =>
       @showUpdateMenuItem(state)
+    global.application.config.observe 'devMode', (state) =>
+      @showDevModeItem()
 
   # Public: Updates the entire menu with the given keybindings.
   #
@@ -37,6 +39,7 @@ class ApplicationMenu
 
     @showUpdateMenuItem(global.application.autoUpdateManager.getState())
     @showFullscreenMenuItem(@lastFocusedWindow?.isFullScreen())
+    @showDevModeItem()
 
   # Register a BrowserWindow with this application menu.
   addWindow: (window) ->
@@ -123,12 +126,16 @@ class ApplicationMenu
     enterItem.visible = !fullscreen
     exitItem.visible = fullscreen
 
+  showDevModeItem: ->
+    devModeItem = _.find(@flattenMenuItems(@menu), ({label}) -> label == 'Run with Debug Flags')
+    devModeItem?.checked = global.application.devMode
+
   # Default list of menu items.
   #
   # Returns an Array of menu item Objects.
   getDefaultTemplate: ->
     [
-      label: "Atom"
+      label: "N1"
       submenu: [
           { label: "Check for Update", metadata: {autoUpdate: true}}
           { label: 'Reload', accelerator: 'Command+R', click: => @focusedWindow()?.reload() }

src/browser/application.coffee

@@ -80,6 +80,12 @@ class Application
     @config = new Config({configDirPath, @resourcePath})
     @config.load()
 
+    # Normally, you enter dev mode by passing the --dev command line flag.
+    # But for developers using the compiled app, it's easier to toggle dev
+    # mode from the menu and have it persist through relaunch.
+    if @config.get('devMode')
+      @devMode = true
+
     @windowManager = new WindowManager({@resourcePath, @config, @devMode, @safeMode})
     @autoUpdateManager = new AutoUpdateManager(@version, @config, @specMode)
     @applicationMenu = new ApplicationMenu(@version)
@@ -250,10 +256,16 @@ class Application
       @windowManager.unregisterAllHotWindows()
       @autoUpdateManager.install()
 
-    @on 'application:open-dev', =>
-      @devMode = true
+    @on 'application:toggle-dev', =>
+      @devMode = !@devMode
+
+      if @devMode
+        @config.set('devMode', true)
+      else
+        @config.set('devMode', undefined)
+
       @windowManager.closeAllWindows()
-      @windowManager.devMode = true
+      @windowManager.devMode = @devMode
       @openWindowsForTokenState()
 
     @on 'application:toggle-theme', =>

src/flux/nylas-api.coffee

@@ -226,7 +226,9 @@ class NylasAPI
       type: 'error'
       tag: '401'
       sticky: true
-      message: "Nylas can no longer authenticate with your mail provider. You will not be able to send or receive mail. Please unlink your account and sign in again.",
+      message: "Nylas can no longer authenticate with your mail provider. You
+               will not be able to send or receive mail. Please unlink your
+               account and sign in again.",
       icon: 'fa-sign-out'
       actions: [{
         label: 'Unlink'

src/window-event-handler.coffee

@@ -16,6 +16,9 @@ class WindowEventHandler
   constructor: ->
     @reloadRequested = false
 
+    _.defer =>
+      @showDevModeMessages()
+
     @subscribe ipc, 'open-path', (pathToOpen) ->
       unless atom.project?.getPaths().length
         if fs.existsSync(pathToOpen) or fs.existsSync(path.dirname(pathToOpen))
@@ -208,3 +211,26 @@ class WindowEventHandler
       previousElement.focus()
     else if highestElement?
       highestElement.focus()
+
+  showDevModeMessages: ->
+    return unless atom.isMainWindow()
+
+    if atom.inDevMode()
+      Actions = require './flux/actions'
+      Actions.postNotification
+        icon: 'fa-flask'
+        type: 'info'
+        sticky: true
+        actions: [{label: 'Thanks', id: 'ok'}]
+        message: "N1 is running with debug flags enabled (slower). Packages in
+                  ~/.nylas/dev/packages will be loaded. Have fun!"
+    else
+      console.log("%c Welcome to N1! If you're exploring the source or building a
+                   plugin, you should enable debug flags. It's slower, but
+                   gives you better exceptions, the debug version of React,
+                   and more. Choose %c Developer > Run with Debug Flags %c
+                   from the menu. Also, check out https://nylas.github.io/N1/docs
+                   for documentation and sample code!",
+                   "background-color: antiquewhite;",
+                   "background-color: antiquewhite; font-weight:bold;",
+                   "background-color: antiquewhite; font-weight:normal;")