some text describing what we use ngrok for.

src/client/addressBar/addressBar.tsx

@@ -49,6 +49,8 @@ import { AddressBarBotCreds } from './addressBarBotCreds';
 export class AddressBar extends React.Component<{}, {}> {
 
     pageClicked = (ev: Event) => {
+        if (ev.defaultPrevented)
+            return;
         const settings = getSettings();
         let target = ev.srcElement;
         while (target) {

src/client/addressBar/addressBarMenu.tsx

@@ -38,9 +38,6 @@ import { AddressBarActions, ConversationActions, ServerSettingsActions } from '.
 import { IBot, newBot } from '../../types/botTypes';
 import * as log from '../log';
 import { AddressBarOperators } from './addressBarOperators';
-import { AboutDialog } from './aboutDialog';
-import { AppSettingsDialog } from './appSettingsDialog';
-import { ConversationSettingsDialog } from './conversationSettingsDialog';
 import * as Constants from '../constants';
 
 
@@ -145,9 +142,6 @@ export class AddressBarMenu extends React.Component<{}, {}> {
         return (
             <div className="addressbar-menu">
                 <div dangerouslySetInnerHTML={{ __html: Constants.hamburgerIcon('toolbar-button', 24) }} onClick={() => this.showMenu()} />
-                <AboutDialog />
-                <AppSettingsDialog />
-                <ConversationSettingsDialog />
             </div>
         );
     }

src/client/css/emulator.css

@@ -298,27 +298,8 @@
 /* appsettings-dialog */
 
     .appsettings-dialog {
-        background: #fff;
-        color: black;
-        overflow: hidden;
-        padding: 0 24px 0 24px;
-        box-shadow: 0 1px 2px rgba(0,0,0,.2);
-        z-index: 9999;
-        position: fixed;
-        top: 50%;
-        left: 50%;
         width: 512px;
         height: 487px;
-        transform: translate(-50%, -50%);
-        transition: all .2s;
-        text-align: left;
-        transition: opacity .2s ease;
-        border-radius: 2px;
-    }
-
-    .appsettings-dialog label {
-        font-weight: 400;
-        margin: 0;
     }
 
     .appsettings-dialog .input-group {
@@ -374,7 +355,7 @@
     }
 
     .appsettings-port-group {
-        padding-bottom: 30px;
+        padding-bottom: 20px;
     }
 
     .appsettings-ngrokpath-input {
@@ -389,22 +370,10 @@
 /* conversationsettings-dialog */
 
     .conversationsettings-dialog {
-        background: #fff;
-        color: black;
-        overflow: hidden;
-        padding: 24px 24px 24px 24px;
-        box-shadow: 0 1px 2px rgba(0,0,0,.2);
-        z-index: 9999;
-        position: fixed;
-        top: 50%;
-        left: 50%;
+
         width: 500px;
         height: 400px;
-        border: thin solid black;
-        transform: translate(-50%, -50%);
-        transition: all .2s;
-        text-align: left;
-        transition: opacity .2s ease;
+
     }
 
     .conversationsettings-closex {
@@ -447,6 +416,22 @@
 /* about-dialog */
 
     .about-dialog {
+        width: 512px;
+        height: 487px;
+    }
+
+/* base classes */
+
+    .fill-parent {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+    }
+
+    .emu-dialog {
+        line-height: initial;
         background: #fff;
         color: black;
         overflow: hidden;
@@ -456,23 +441,19 @@
         position: fixed;
         top: 50%;
         left: 50%;
-        width: 512px;
-        height: 487px;
         transform: translate(-50%, -50%);
         transition: all .2s;
         text-align: left;
         transition: opacity .2s ease;
         border-radius: 2px;
     }
 
-/* base classes */
-
-    .fill-parent {
-        position: absolute;
-        left: 0;
-        right: 0;
-        top: 0;
-        bottom: 0;
+    .emu-dialog-text {
+        margin-bottom: 12px;
+    }
+    .emu-dialog-text a {
+        text-decoration: none;
+        color: #3A96DD;
     }
 
     .dialog-background {
@@ -487,10 +468,6 @@
         transition: opacity .2s ease;
     }
 
-    h2.dialog-header {
-        margin-bottom: 0;
-    }
-
     .dialog-closex {
         cursor: pointer;
         position: absolute;
@@ -563,7 +540,7 @@
         transition: border 0s;
     }
     .emu-navitem {
-        padding: 0px 16px 0px 16px;
+        padding: 0px 16px 10px 16px;
         margin: 0 26px 0px 0px;
         display: block;
         border-bottom: 3px #CCC solid;
@@ -586,9 +563,7 @@
         background: #EEE;
     }
 
-/* inspectorview */
-
-    .wc-inspectorview-header {
+    .emu-panel-header {
         background-color: #252526;
         color: #fff;
         border-bottom: solid 1px #403F3F;
@@ -605,6 +580,8 @@
         box-shadow: 0 2px 3px rgba(0,0,0,.5);
     }
 
+/* inspectorview */
+
     .wc-inspectorview {
         background-color: #1e1e1e;
         color: white;
@@ -657,23 +634,6 @@
 
 /* logview */
 
-    .wc-logview-header {
-        background-color: #252526;
-        color: #fff;
-        border-bottom: solid 1px #403F3F;
-        height: 42px;
-        left: 0;
-        letter-spacing: 0.5px;
-        font-size: 13px;
-        line-height: 42px;
-        padding-left: 8px;
-        position: absolute;
-        right: 0;
-        top: 0;
-        z-index: 1000;
-        box-shadow: 0 2px 3px rgba(0,0,0,.5);
-    }
-
     .wc-logview {
         background-color: #1e1e1e;
         color: white;

src/client/addressBar/aboutDialog.tsx → src/client/dialogs/aboutDialog.tsx

@@ -42,9 +42,11 @@ export class AboutDialog extends React.Component<{}, {}> {
     showing: boolean;
 
     pageClicked = (ev: Event) => {
+        if (ev.defaultPrevented)
+            return;
         let target = ev.srcElement;
         while (target) {
-            if (target.className === "appsettings-dialog") {
+            if (target.className.toString().includes("about")) {
                 // Click was inside the address bar.
                 return;
             }
@@ -81,7 +83,7 @@ export class AboutDialog extends React.Component<{}, {}> {
             <div>
                 <div className="dialog-background">
                 </div>
-                <div className="about-dialog">
+                <div className="emu-dialog about-dialog">
                     <h2 className="dialog-header">Bot Framework Emulator</h2>
                     <div className="dialog-closex" onClick={() => this.onClose()} dangerouslySetInnerHTML={{ __html: Constants.clearCloseIcon("", 24) }} />
                 </div>

src/client/addressBar/appSettingsDialog.tsx → src/client/dialogs/appSettingsDialog.tsx

@@ -38,7 +38,6 @@ import { Settings as ServerSettings } from '../../types/serverSettingsTypes';
 import { AddressBarActions, ConversationActions, ServerSettingsActions } from '../reducers';
 import { IBot, newBot } from '../../types/botTypes';
 import * as log from '../log';
-import { AddressBarOperators } from './addressBarOperators';
 import * as path from 'path';
 import * as Constants from '../constants';
 
@@ -65,9 +64,11 @@ export class AppSettingsDialog extends React.Component<{}, {}> {
     serviceUrlReadOnly: boolean;
 
     pageClicked = (ev: Event) => {
+        if (ev.defaultPrevented)
+            return;
         let target = ev.srcElement;
         while (target) {
-            if (target.className === "appsettings-dialog") {
+            if (target.className.toString().includes("appsettings")) {
                 // Click was inside the address bar.
                 return;
             }
@@ -116,6 +117,7 @@ export class AppSettingsDialog extends React.Component<{}, {}> {
             properties: ['openFile']
         }, (filenames: string[]) => {
             if (filenames && filenames.length) {
+                // TODO: validate selection
                 this.ngrokPathInputRef.value = filenames[0];
             }
         })
@@ -156,7 +158,7 @@ export class AppSettingsDialog extends React.Component<{}, {}> {
             <div>
                 <div className="dialog-background">
                 </div>
-                <div className="appsettings-dialog">
+                <div className="emu-dialog appsettings-dialog">
                     <h2 className="dialog-header">App Settings</h2>
                     <div className="dialog-closex" onClick={() => this.onClose()} dangerouslySetInnerHTML={{ __html: Constants.clearCloseIcon("", 24) }} />
                     <div className="input-group appsettings-port-group">
@@ -189,6 +191,8 @@ export class AppSettingsDialog extends React.Component<{}, {}> {
                         </ul>
                         <hr className='enu-navhdr' />
                         <div className={"emu-tab" + (this.currentTab === Tabs.ServiceUrl ? " emu-visible" : " emu-hidden")}>
+                            <div className='emu-dialog-text'>The Callback URL is where the bot you're communicating with sends reply messages.</div>
+                            <div className={'emu-dialog-text' + (this.serviceUrlReadOnly ? '' : ' emu-hidden')}>NOTE: ngrok is controlling the value of this field. Clear your ngrok path to regain control of this value.</div>
                             <div className="input-group">
                                 <label className="form-label">
                                     Callback URL:
@@ -203,6 +207,7 @@ export class AppSettingsDialog extends React.Component<{}, {}> {
                             </div>
                         </div>
                         <div className={"emu-tab" + (this.currentTab === Tabs.NgrokConfig ? " emu-visible" : " emu-hidden")}>
+                            <div className='emu-dialog-text'>ngrok is network tunneling software. The Bot Framework Emulator works with ngrok to communicate with bots hosted remotely. To learn about ngrok and download it, visit <a href="https://ngrok.com/">ngrok.com</a>.</div>
                             <div className="input-group">
                                 <label className="form-label">
                                     Path to ngrok:

src/client/addressBar/conversationSettingsDialog.tsx → src/client/dialogs/conversationSettingsDialog.tsx

@@ -38,7 +38,6 @@ import { AddressBarActions, ConversationActions, ServerSettingsActions } from '.
 import { IBot, newBot } from '../../types/botTypes';
 import { IUser } from '../../types/userTypes';
 import * as log from '../log';
-import { AddressBarOperators } from './addressBarOperators';
 import { uniqueId } from '../../utils';
 
 
@@ -53,6 +52,8 @@ export class ConversationSettingsDialog extends React.Component<{}, {}> {
     showing: boolean;
 
     pageClicked = (ev: Event) => {
+        if (ev.defaultPrevented)
+            return;
         let target = ev.srcElement;
         while (target) {
             if (target.className === "conversationsettings-dialog") {
@@ -98,7 +99,7 @@ export class ConversationSettingsDialog extends React.Component<{}, {}> {
             <div>
                 <div className="dialog-background">
                 </div>
-                <div className="conversationsettings-dialog">
+                <div className="emu-dialog conversationsettings-dialog">
                     <CloseButton className='conversationsettings-closex' onClick={() => this.onClose()} />
                     <UserList
                         className='conversationsettings-userlist'