From ccef4607bee948aea096e5e2d7554f075052b5ae Mon Sep 17 00:00:00 2001
From: xnkevinnguyen <xuannamkevin@gmail.com>
Date: Mon, 16 Mar 2020 18:04:56 -0700
Subject: [PATCH 01/11] Remove dropdown and replace it with currently running
 file

---
 .../components/microbit/MicrobitSimulator.tsx | 36 +++++++++++--------
 1 file changed, 22 insertions(+), 14 deletions(-)

diff --git a/src/view/components/microbit/MicrobitSimulator.tsx b/src/view/components/microbit/MicrobitSimulator.tsx
index 3d4258d64..e4281237d 100644
--- a/src/view/components/microbit/MicrobitSimulator.tsx
+++ b/src/view/components/microbit/MicrobitSimulator.tsx
@@ -8,7 +8,6 @@ import {
 import PlayLogo from "../../svgs/play_svg";
 import StopLogo from "../../svgs/stop_svg";
 import { sendMessage } from "../../utils/MessageUtils";
-import Dropdown from "../Dropdown";
 import ActionBar from "../simulator/ActionBar";
 import { BUTTONS_KEYS, MicrobitImage } from "./MicrobitImage";
 
@@ -25,7 +24,8 @@ const DEFAULT_MICROBIT_STATE: IMicrobitState = {
 
 interface IState {
     active_editors: string[];
-    running_file: string;
+    running_file?: string;
+    currently_selected_file: string;
     play_button: boolean;
     selected_file: string;
     microbit: IMicrobitState;
@@ -44,7 +44,8 @@ export class MicrobitSimulator extends React.Component<any, IState> {
             play_button: false,
             selected_file: "",
             active_editors: [],
-            running_file: "",
+            running_file: undefined,
+            currently_selected_file: "",
         };
         this.onKeyEvent = this.onKeyEvent.bind(this);
     }
@@ -71,8 +72,10 @@ export class MicrobitSimulator extends React.Component<any, IState> {
                 });
                 break;
             case "activate-play":
+                const newRunningFile = this.state.currently_selected_file;
                 this.setState({
                     play_button: !this.state.play_button,
+                    running_file: newRunningFile,
                 });
                 break;
             case "visible-editors":
@@ -81,9 +84,18 @@ export class MicrobitSimulator extends React.Component<any, IState> {
                 });
                 break;
             case "current-file":
-                this.setState({
-                    running_file: message.state.running_file,
-                });
+                if (this.state.play_button) {
+                    this.setState({
+                        currently_selected_file: message.state.running_file,
+                    });
+                } else {
+                    this.setState({
+                        running_file: message.state.running_file,
+
+                        currently_selected_file: message.state.running_file,
+                    });
+                }
+
                 break;
         }
     };
@@ -100,14 +112,9 @@ export class MicrobitSimulator extends React.Component<any, IState> {
         return (
             <div className="simulator">
                 <div className="file-selector">
-                    <Dropdown
-                        label={"file-dropdown"}
-                        styleLabel={"dropdown"}
-                        lastChosen={this.state.running_file}
-                        width={300}
-                        textOptions={this.state.active_editors}
-                        onBlur={this.onSelectFile}
-                    />
+                    {this.state.running_file
+                        ? CONSTANTS.CURRENTLY_RUNNING(this.state.running_file)
+                        : CONSTANTS.NO_FILES_AVAILABLE}
                 </div>
                 <div className="microbit-container">
                     <MicrobitImage
@@ -130,6 +137,7 @@ export class MicrobitSimulator extends React.Component<any, IState> {
             </div>
         );
     }
+
     protected togglePlayClick = () => {
         const button =
             window.document.getElementById(CONSTANTS.ID_NAME.PLAY_BUTTON) ||

From 9ded03e118be9aedb76962bc9fd7f181ced1040a Mon Sep 17 00:00:00 2001
From: xnkevinnguyen <xuannamkevin@gmail.com>
Date: Mon, 16 Mar 2020 18:05:12 -0700
Subject: [PATCH 02/11] Change initial save message

---
 src/view/constants.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/view/constants.ts b/src/view/constants.ts
index 55ba35bf5..5ffcc519f 100644
--- a/src/view/constants.ts
+++ b/src/view/constants.ts
@@ -42,7 +42,7 @@ export const CONSTANTS = {
         NUMERIC_SIX: "Digit6",
         NUMERIC_SEVEN: "Digit7",
     },
-    NO_FILES_AVAILABLE: "Choose a .py file to run on the Simulator",
+    NO_FILES_AVAILABLE: "Save a .py file to run on the Simulator",
     SIMULATOR_BUTTON_WIDTH: 60,
     TOOLBAR_INFO: `Explore what's on the board:`,
 };

From 3d079063c075bfacc678dc7af520d433ff231362 Mon Sep 17 00:00:00 2001
From: xnkevinnguyen <xuannamkevin@gmail.com>
Date: Mon, 16 Mar 2020 19:00:14 -0700
Subject: [PATCH 03/11] Only show accurate information, the message will only
 appear for current running file

---
 src/view/components/microbit/MicrobitSimulator.tsx | 4 ++--
 src/view/styles/Simulator.css                      | 1 +
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/view/components/microbit/MicrobitSimulator.tsx b/src/view/components/microbit/MicrobitSimulator.tsx
index e4281237d..4c246f5ae 100644
--- a/src/view/components/microbit/MicrobitSimulator.tsx
+++ b/src/view/components/microbit/MicrobitSimulator.tsx
@@ -112,9 +112,9 @@ export class MicrobitSimulator extends React.Component<any, IState> {
         return (
             <div className="simulator">
                 <div className="file-selector">
-                    {this.state.running_file
+                    {this.state.running_file && this.state.play_button
                         ? CONSTANTS.CURRENTLY_RUNNING(this.state.running_file)
-                        : CONSTANTS.NO_FILES_AVAILABLE}
+                        : null}
                 </div>
                 <div className="microbit-container">
                     <MicrobitImage
diff --git a/src/view/styles/Simulator.css b/src/view/styles/Simulator.css
index 99f14ee48..f12d88d64 100644
--- a/src/view/styles/Simulator.css
+++ b/src/view/styles/Simulator.css
@@ -18,6 +18,7 @@
 
 .file-selector {
     padding: 20px;
+    min-height: 10px;
 }
 
 .shake-pressed {

From 4b26c082a6e1ec4648067787e24c940c9cef0665 Mon Sep 17 00:00:00 2001
From: xnkevinnguyen <xuannamkevin@gmail.com>
Date: Mon, 16 Mar 2020 19:05:47 -0700
Subject: [PATCH 04/11] Modify css to avoid shifting

---
 src/view/styles/Simulator.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/view/styles/Simulator.css b/src/view/styles/Simulator.css
index f12d88d64..5d35f14f4 100644
--- a/src/view/styles/Simulator.css
+++ b/src/view/styles/Simulator.css
@@ -18,7 +18,7 @@
 
 .file-selector {
     padding: 20px;
-    min-height: 10px;
+    min-height: 20px;
 }
 
 .shake-pressed {

From 8db36bd6bdbcaf9548f90119c0894824302f037a Mon Sep 17 00:00:00 2001
From: xnkevinnguyen <xuannamkevin@gmail.com>
Date: Tue, 17 Mar 2020 15:24:59 -0700
Subject: [PATCH 05/11] Apply dropdown removal for cpx

---
 src/view/components/cpx/CpxSimulator.tsx      | 36 +++++++++----------
 .../components/microbit/MicrobitSimulator.tsx |  6 +---
 2 files changed, 19 insertions(+), 23 deletions(-)

diff --git a/src/view/components/cpx/CpxSimulator.tsx b/src/view/components/cpx/CpxSimulator.tsx
index 21a13524a..81eb7a7c2 100644
--- a/src/view/components/cpx/CpxSimulator.tsx
+++ b/src/view/components/cpx/CpxSimulator.tsx
@@ -8,7 +8,6 @@ import { sendMessage } from "../../utils/MessageUtils";
 import "../../styles/Simulator.css";
 import PlayLogo from "../../svgs/play_svg";
 import StopLogo from "../../svgs/stop_svg";
-import Dropdown from "../Dropdown";
 import ActionBar from "../simulator/ActionBar";
 import { BUTTON_NEUTRAL, BUTTON_PRESSED } from "./Cpx_svg_style";
 import { CpxImage, updatePinTouch, updateSwitch } from "./CpxImage";
@@ -30,6 +29,7 @@ interface IState {
     selected_file: string;
     cpx: ICpxState;
     play_button: boolean;
+    currently_selected_file: string;
 }
 
 const DEFAULT_CPX_STATE: ICpxState = {
@@ -63,6 +63,7 @@ class Simulator extends React.Component<{}, IState> {
             play_button: false,
             running_file: "",
             selected_file: "",
+            currently_selected_file: "",
         };
 
         this.handleClick = this.handleClick.bind(this);
@@ -72,7 +73,6 @@ class Simulator extends React.Component<{}, IState> {
         this.onMouseLeave = this.onMouseLeave.bind(this);
         this.togglePlayClick = this.togglePlayClick.bind(this);
         this.refreshSimulatorClick = this.refreshSimulatorClick.bind(this);
-        this.onSelectBlur = this.onSelectBlur.bind(this);
     }
 
     handleMessage = (event: any): void => {
@@ -98,8 +98,11 @@ class Simulator extends React.Component<{}, IState> {
                 });
                 break;
             case "activate-play":
+                const newRunningFile = this.state.currently_selected_file;
+
                 this.setState({
                     play_button: !this.state.play_button,
+                    running_file: newRunningFile,
                 });
                 break;
             case "visible-editors":
@@ -113,9 +116,16 @@ class Simulator extends React.Component<{}, IState> {
                 break;
             case "current-file":
                 console.log("Setting current file", message.state.running_file);
-                this.setState({
-                    running_file: message.state.running_file,
-                });
+                if (this.state.play_button) {
+                    this.setState({
+                        currently_selected_file: message.state.running_file,
+                    });
+                } else {
+                    this.setState({
+                        running_file: message.state.running_file,
+                        currently_selected_file: message.state.running_file,
+                    });
+                }
                 break;
         }
     };
@@ -136,14 +146,9 @@ class Simulator extends React.Component<{}, IState> {
         return (
             <div className="simulator">
                 <div className="file-selector">
-                    <Dropdown
-                        label={"file-dropdown"}
-                        styleLabel={"dropdown"}
-                        lastChosen={this.state.running_file}
-                        width={300}
-                        textOptions={this.state.active_editors}
-                        onBlur={this.onSelectBlur}
-                    />
+                    {this.state.running_file && this.state.play_button
+                        ? CONSTANTS.CURRENTLY_RUNNING(this.state.running_file)
+                        : null}
                 </div>
                 <div className="cpx-container">
                     <CpxImage
@@ -191,11 +196,6 @@ class Simulator extends React.Component<{}, IState> {
         sendMessage(WEBVIEW_MESSAGES.REFRESH_SIMULATOR, true);
     }
 
-    protected onSelectBlur(event: React.FocusEvent<HTMLSelectElement>) {
-        this.setState({
-            selected_file: event.currentTarget.value,
-        });
-    }
     protected onKeyEvent(event: KeyboardEvent, active: boolean) {
         let element;
         const target = event.target as SVGElement;
diff --git a/src/view/components/microbit/MicrobitSimulator.tsx b/src/view/components/microbit/MicrobitSimulator.tsx
index 4c246f5ae..765356eb1 100644
--- a/src/view/components/microbit/MicrobitSimulator.tsx
+++ b/src/view/components/microbit/MicrobitSimulator.tsx
@@ -150,11 +150,7 @@ export class MicrobitSimulator extends React.Component<any, IState> {
             state: !this.state.play_button,
         });
     };
-    protected onSelectFile(event: React.FocusEvent<HTMLSelectElement>) {
-        this.setState({
-            selected_file: event.currentTarget.value,
-        });
-    }
+
     protected refreshSimulatorClick = () => {
         const button = window.document.getElementById(
             CONSTANTS.ID_NAME.REFRESH_BUTTON

From 9ab039c5f3318460c43890c833d6fec96a8fd6ab Mon Sep 17 00:00:00 2001
From: xnkevinnguyen <xuannamkevin@gmail.com>
Date: Tue, 17 Mar 2020 15:28:27 -0700
Subject: [PATCH 06/11] Update tests

---
 src/view/__snapshots__/App.spec.tsx.snap      | 40 ++++++-------------
 .../cpx/__snapshots__/Cpx.spec.tsx.snap       | 40 ++++++-------------
 .../device/__snapshots__/Device.spec.tsx.snap | 28 +++----------
 3 files changed, 30 insertions(+), 78 deletions(-)

diff --git a/src/view/__snapshots__/App.spec.tsx.snap b/src/view/__snapshots__/App.spec.tsx.snap
index ac3521338..023dc3d84 100644
--- a/src/view/__snapshots__/App.spec.tsx.snap
+++ b/src/view/__snapshots__/App.spec.tsx.snap
@@ -15,23 +15,7 @@ exports[`App component  should render correctly 1`] = `
       >
         <div
           className="file-selector"
-        >
-          <div>
-            <select
-              className="dropdown"
-              id="file-dropdown"
-              onBlur={[Function]}
-            >
-              <option
-                disabled={true}
-                selected={true}
-                value=""
-              >
-                Choose a .py file to run on the Simulator
-              </option>
-            </select>
-          </div>
-        </div>
+        />
         <div
           className="cpx-container"
         >
@@ -3962,7 +3946,7 @@ exports[`App component  should render correctly 1`] = `
             className="toolbar-icon"
           >
             <div
-              className="ms-TooltipHost root-49"
+              className="ms-TooltipHost root-81"
               onBlurCapture={[Function]}
               onFocusCapture={[Function]}
               onKeyDown={[Function]}
@@ -4029,7 +4013,7 @@ exports[`App component  should render correctly 1`] = `
               </button>
             </div>
             <div
-              className="ms-TooltipHost root-49"
+              className="ms-TooltipHost root-81"
               onBlurCapture={[Function]}
               onFocusCapture={[Function]}
               onKeyDown={[Function]}
@@ -4096,7 +4080,7 @@ exports[`App component  should render correctly 1`] = `
               </button>
             </div>
             <div
-              className="ms-TooltipHost root-49"
+              className="ms-TooltipHost root-81"
               onBlurCapture={[Function]}
               onFocusCapture={[Function]}
               onKeyDown={[Function]}
@@ -4161,7 +4145,7 @@ exports[`App component  should render correctly 1`] = `
               </button>
             </div>
             <div
-              className="ms-TooltipHost root-49"
+              className="ms-TooltipHost root-81"
               onBlurCapture={[Function]}
               onFocusCapture={[Function]}
               onKeyDown={[Function]}
@@ -4237,7 +4221,7 @@ exports[`App component  should render correctly 1`] = `
               </button>
             </div>
             <div
-              className="ms-TooltipHost root-49"
+              className="ms-TooltipHost root-81"
               onBlurCapture={[Function]}
               onFocusCapture={[Function]}
               onKeyDown={[Function]}
@@ -4304,7 +4288,7 @@ exports[`App component  should render correctly 1`] = `
               </button>
             </div>
             <div
-              className="ms-TooltipHost root-49"
+              className="ms-TooltipHost root-81"
               onBlurCapture={[Function]}
               onFocusCapture={[Function]}
               onKeyDown={[Function]}
@@ -4371,7 +4355,7 @@ exports[`App component  should render correctly 1`] = `
               </button>
             </div>
             <div
-              className="ms-TooltipHost root-49"
+              className="ms-TooltipHost root-81"
               onBlurCapture={[Function]}
               onFocusCapture={[Function]}
               onKeyDown={[Function]}
@@ -4474,7 +4458,7 @@ exports[`App component  should render correctly 1`] = `
               </button>
             </div>
             <div
-              className="ms-TooltipHost root-49"
+              className="ms-TooltipHost root-81"
               onBlurCapture={[Function]}
               onFocusCapture={[Function]}
               onKeyDown={[Function]}
@@ -4534,7 +4518,7 @@ exports[`App component  should render correctly 1`] = `
               </button>
             </div>
             <div
-              className="ms-TooltipHost root-49"
+              className="ms-TooltipHost root-81"
               onBlurCapture={[Function]}
               onFocusCapture={[Function]}
               onKeyDown={[Function]}
@@ -4596,7 +4580,7 @@ exports[`App component  should render correctly 1`] = `
               </button>
             </div>
             <div
-              className="ms-TooltipHost root-49"
+              className="ms-TooltipHost root-81"
               onBlurCapture={[Function]}
               onFocusCapture={[Function]}
               onKeyDown={[Function]}
@@ -4656,7 +4640,7 @@ exports[`App component  should render correctly 1`] = `
               </button>
             </div>
             <div
-              className="ms-TooltipHost root-49"
+              className="ms-TooltipHost root-81"
               onBlurCapture={[Function]}
               onFocusCapture={[Function]}
               onKeyDown={[Function]}
diff --git a/src/view/components/cpx/__snapshots__/Cpx.spec.tsx.snap b/src/view/components/cpx/__snapshots__/Cpx.spec.tsx.snap
index 2d51b191f..23702c919 100644
--- a/src/view/components/cpx/__snapshots__/Cpx.spec.tsx.snap
+++ b/src/view/components/cpx/__snapshots__/Cpx.spec.tsx.snap
@@ -7,23 +7,7 @@ Array [
   >
     <div
       className="file-selector"
-    >
-      <div>
-        <select
-          className="dropdown"
-          id="file-dropdown"
-          onBlur={[Function]}
-        >
-          <option
-            disabled={true}
-            selected={true}
-            value=""
-          >
-            Choose a .py file to run on the Simulator
-          </option>
-        </select>
-      </div>
-    </div>
+    />
     <div
       className="cpx-container"
     >
@@ -3954,7 +3938,7 @@ Array [
         className="toolbar-icon"
       >
         <div
-          className="ms-TooltipHost root-49"
+          className="ms-TooltipHost root-81"
           onBlurCapture={[Function]}
           onFocusCapture={[Function]}
           onKeyDown={[Function]}
@@ -4021,7 +4005,7 @@ Array [
           </button>
         </div>
         <div
-          className="ms-TooltipHost root-49"
+          className="ms-TooltipHost root-81"
           onBlurCapture={[Function]}
           onFocusCapture={[Function]}
           onKeyDown={[Function]}
@@ -4088,7 +4072,7 @@ Array [
           </button>
         </div>
         <div
-          className="ms-TooltipHost root-49"
+          className="ms-TooltipHost root-81"
           onBlurCapture={[Function]}
           onFocusCapture={[Function]}
           onKeyDown={[Function]}
@@ -4153,7 +4137,7 @@ Array [
           </button>
         </div>
         <div
-          className="ms-TooltipHost root-49"
+          className="ms-TooltipHost root-81"
           onBlurCapture={[Function]}
           onFocusCapture={[Function]}
           onKeyDown={[Function]}
@@ -4229,7 +4213,7 @@ Array [
           </button>
         </div>
         <div
-          className="ms-TooltipHost root-49"
+          className="ms-TooltipHost root-81"
           onBlurCapture={[Function]}
           onFocusCapture={[Function]}
           onKeyDown={[Function]}
@@ -4296,7 +4280,7 @@ Array [
           </button>
         </div>
         <div
-          className="ms-TooltipHost root-49"
+          className="ms-TooltipHost root-81"
           onBlurCapture={[Function]}
           onFocusCapture={[Function]}
           onKeyDown={[Function]}
@@ -4363,7 +4347,7 @@ Array [
           </button>
         </div>
         <div
-          className="ms-TooltipHost root-49"
+          className="ms-TooltipHost root-81"
           onBlurCapture={[Function]}
           onFocusCapture={[Function]}
           onKeyDown={[Function]}
@@ -4466,7 +4450,7 @@ Array [
           </button>
         </div>
         <div
-          className="ms-TooltipHost root-49"
+          className="ms-TooltipHost root-81"
           onBlurCapture={[Function]}
           onFocusCapture={[Function]}
           onKeyDown={[Function]}
@@ -4526,7 +4510,7 @@ Array [
           </button>
         </div>
         <div
-          className="ms-TooltipHost root-49"
+          className="ms-TooltipHost root-81"
           onBlurCapture={[Function]}
           onFocusCapture={[Function]}
           onKeyDown={[Function]}
@@ -4588,7 +4572,7 @@ Array [
           </button>
         </div>
         <div
-          className="ms-TooltipHost root-49"
+          className="ms-TooltipHost root-81"
           onBlurCapture={[Function]}
           onFocusCapture={[Function]}
           onKeyDown={[Function]}
@@ -4648,7 +4632,7 @@ Array [
           </button>
         </div>
         <div
-          className="ms-TooltipHost root-49"
+          className="ms-TooltipHost root-81"
           onBlurCapture={[Function]}
           onFocusCapture={[Function]}
           onKeyDown={[Function]}
diff --git a/src/view/container/device/__snapshots__/Device.spec.tsx.snap b/src/view/container/device/__snapshots__/Device.spec.tsx.snap
index 5340ff299..56427f505 100644
--- a/src/view/container/device/__snapshots__/Device.spec.tsx.snap
+++ b/src/view/container/device/__snapshots__/Device.spec.tsx.snap
@@ -9,23 +9,7 @@ exports[`Device component  should render correctly 1`] = `
   >
     <div
       className="file-selector"
-    >
-      <div>
-        <select
-          className="dropdown"
-          id="file-dropdown"
-          onBlur={[Function]}
-        >
-          <option
-            disabled={true}
-            selected={true}
-            value=""
-          >
-            Choose a .py file to run on the Simulator
-          </option>
-        </select>
-      </div>
-    </div>
+    />
     <div
       className="microbit-container"
     >
@@ -2657,7 +2641,7 @@ exports[`Device component  should render correctly 1`] = `
         className="toolbar-icon"
       >
         <div
-          className="ms-TooltipHost root-49"
+          className="ms-TooltipHost root-81"
           onBlurCapture={[Function]}
           onFocusCapture={[Function]}
           onKeyDown={[Function]}
@@ -2724,7 +2708,7 @@ exports[`Device component  should render correctly 1`] = `
           </button>
         </div>
         <div
-          className="ms-TooltipHost root-49"
+          className="ms-TooltipHost root-81"
           onBlurCapture={[Function]}
           onFocusCapture={[Function]}
           onKeyDown={[Function]}
@@ -2789,7 +2773,7 @@ exports[`Device component  should render correctly 1`] = `
           </button>
         </div>
         <div
-          className="ms-TooltipHost root-49"
+          className="ms-TooltipHost root-81"
           onBlurCapture={[Function]}
           onFocusCapture={[Function]}
           onKeyDown={[Function]}
@@ -2856,7 +2840,7 @@ exports[`Device component  should render correctly 1`] = `
           </button>
         </div>
         <div
-          className="ms-TooltipHost root-49"
+          className="ms-TooltipHost root-81"
           onBlurCapture={[Function]}
           onFocusCapture={[Function]}
           onKeyDown={[Function]}
@@ -2923,7 +2907,7 @@ exports[`Device component  should render correctly 1`] = `
           </button>
         </div>
         <div
-          className="ms-TooltipHost root-49"
+          className="ms-TooltipHost root-81"
           onBlurCapture={[Function]}
           onFocusCapture={[Function]}
           onKeyDown={[Function]}

From 841566e38f6c4ec64ad9d9518e2e0875637de849 Mon Sep 17 00:00:00 2001
From: xnkevinnguyen <xuannamkevin@gmail.com>
Date: Tue, 17 Mar 2020 16:11:50 -0700
Subject: [PATCH 07/11] Update tests

---
 src/view/__snapshots__/App.spec.tsx.snap      | 22 +++++++++----------
 .../cpx/__snapshots__/Cpx.spec.tsx.snap       | 22 +++++++++----------
 .../device/__snapshots__/Device.spec.tsx.snap | 10 ++++-----
 3 files changed, 27 insertions(+), 27 deletions(-)

diff --git a/src/view/__snapshots__/App.spec.tsx.snap b/src/view/__snapshots__/App.spec.tsx.snap
index 023dc3d84..8a0c10ba7 100644
--- a/src/view/__snapshots__/App.spec.tsx.snap
+++ b/src/view/__snapshots__/App.spec.tsx.snap
@@ -3946,7 +3946,7 @@ exports[`App component  should render correctly 1`] = `
             className="toolbar-icon"
           >
             <div
-              className="ms-TooltipHost root-81"
+              className="ms-TooltipHost root-49"
               onBlurCapture={[Function]}
               onFocusCapture={[Function]}
               onKeyDown={[Function]}
@@ -4013,7 +4013,7 @@ exports[`App component  should render correctly 1`] = `
               </button>
             </div>
             <div
-              className="ms-TooltipHost root-81"
+              className="ms-TooltipHost root-49"
               onBlurCapture={[Function]}
               onFocusCapture={[Function]}
               onKeyDown={[Function]}
@@ -4080,7 +4080,7 @@ exports[`App component  should render correctly 1`] = `
               </button>
             </div>
             <div
-              className="ms-TooltipHost root-81"
+              className="ms-TooltipHost root-49"
               onBlurCapture={[Function]}
               onFocusCapture={[Function]}
               onKeyDown={[Function]}
@@ -4145,7 +4145,7 @@ exports[`App component  should render correctly 1`] = `
               </button>
             </div>
             <div
-              className="ms-TooltipHost root-81"
+              className="ms-TooltipHost root-49"
               onBlurCapture={[Function]}
               onFocusCapture={[Function]}
               onKeyDown={[Function]}
@@ -4221,7 +4221,7 @@ exports[`App component  should render correctly 1`] = `
               </button>
             </div>
             <div
-              className="ms-TooltipHost root-81"
+              className="ms-TooltipHost root-49"
               onBlurCapture={[Function]}
               onFocusCapture={[Function]}
               onKeyDown={[Function]}
@@ -4288,7 +4288,7 @@ exports[`App component  should render correctly 1`] = `
               </button>
             </div>
             <div
-              className="ms-TooltipHost root-81"
+              className="ms-TooltipHost root-49"
               onBlurCapture={[Function]}
               onFocusCapture={[Function]}
               onKeyDown={[Function]}
@@ -4355,7 +4355,7 @@ exports[`App component  should render correctly 1`] = `
               </button>
             </div>
             <div
-              className="ms-TooltipHost root-81"
+              className="ms-TooltipHost root-49"
               onBlurCapture={[Function]}
               onFocusCapture={[Function]}
               onKeyDown={[Function]}
@@ -4458,7 +4458,7 @@ exports[`App component  should render correctly 1`] = `
               </button>
             </div>
             <div
-              className="ms-TooltipHost root-81"
+              className="ms-TooltipHost root-49"
               onBlurCapture={[Function]}
               onFocusCapture={[Function]}
               onKeyDown={[Function]}
@@ -4518,7 +4518,7 @@ exports[`App component  should render correctly 1`] = `
               </button>
             </div>
             <div
-              className="ms-TooltipHost root-81"
+              className="ms-TooltipHost root-49"
               onBlurCapture={[Function]}
               onFocusCapture={[Function]}
               onKeyDown={[Function]}
@@ -4580,7 +4580,7 @@ exports[`App component  should render correctly 1`] = `
               </button>
             </div>
             <div
-              className="ms-TooltipHost root-81"
+              className="ms-TooltipHost root-49"
               onBlurCapture={[Function]}
               onFocusCapture={[Function]}
               onKeyDown={[Function]}
@@ -4640,7 +4640,7 @@ exports[`App component  should render correctly 1`] = `
               </button>
             </div>
             <div
-              className="ms-TooltipHost root-81"
+              className="ms-TooltipHost root-49"
               onBlurCapture={[Function]}
               onFocusCapture={[Function]}
               onKeyDown={[Function]}
diff --git a/src/view/components/cpx/__snapshots__/Cpx.spec.tsx.snap b/src/view/components/cpx/__snapshots__/Cpx.spec.tsx.snap
index 23702c919..761cf89ae 100644
--- a/src/view/components/cpx/__snapshots__/Cpx.spec.tsx.snap
+++ b/src/view/components/cpx/__snapshots__/Cpx.spec.tsx.snap
@@ -3938,7 +3938,7 @@ Array [
         className="toolbar-icon"
       >
         <div
-          className="ms-TooltipHost root-81"
+          className="ms-TooltipHost root-49"
           onBlurCapture={[Function]}
           onFocusCapture={[Function]}
           onKeyDown={[Function]}
@@ -4005,7 +4005,7 @@ Array [
           </button>
         </div>
         <div
-          className="ms-TooltipHost root-81"
+          className="ms-TooltipHost root-49"
           onBlurCapture={[Function]}
           onFocusCapture={[Function]}
           onKeyDown={[Function]}
@@ -4072,7 +4072,7 @@ Array [
           </button>
         </div>
         <div
-          className="ms-TooltipHost root-81"
+          className="ms-TooltipHost root-49"
           onBlurCapture={[Function]}
           onFocusCapture={[Function]}
           onKeyDown={[Function]}
@@ -4137,7 +4137,7 @@ Array [
           </button>
         </div>
         <div
-          className="ms-TooltipHost root-81"
+          className="ms-TooltipHost root-49"
           onBlurCapture={[Function]}
           onFocusCapture={[Function]}
           onKeyDown={[Function]}
@@ -4213,7 +4213,7 @@ Array [
           </button>
         </div>
         <div
-          className="ms-TooltipHost root-81"
+          className="ms-TooltipHost root-49"
           onBlurCapture={[Function]}
           onFocusCapture={[Function]}
           onKeyDown={[Function]}
@@ -4280,7 +4280,7 @@ Array [
           </button>
         </div>
         <div
-          className="ms-TooltipHost root-81"
+          className="ms-TooltipHost root-49"
           onBlurCapture={[Function]}
           onFocusCapture={[Function]}
           onKeyDown={[Function]}
@@ -4347,7 +4347,7 @@ Array [
           </button>
         </div>
         <div
-          className="ms-TooltipHost root-81"
+          className="ms-TooltipHost root-49"
           onBlurCapture={[Function]}
           onFocusCapture={[Function]}
           onKeyDown={[Function]}
@@ -4450,7 +4450,7 @@ Array [
           </button>
         </div>
         <div
-          className="ms-TooltipHost root-81"
+          className="ms-TooltipHost root-49"
           onBlurCapture={[Function]}
           onFocusCapture={[Function]}
           onKeyDown={[Function]}
@@ -4510,7 +4510,7 @@ Array [
           </button>
         </div>
         <div
-          className="ms-TooltipHost root-81"
+          className="ms-TooltipHost root-49"
           onBlurCapture={[Function]}
           onFocusCapture={[Function]}
           onKeyDown={[Function]}
@@ -4572,7 +4572,7 @@ Array [
           </button>
         </div>
         <div
-          className="ms-TooltipHost root-81"
+          className="ms-TooltipHost root-49"
           onBlurCapture={[Function]}
           onFocusCapture={[Function]}
           onKeyDown={[Function]}
@@ -4632,7 +4632,7 @@ Array [
           </button>
         </div>
         <div
-          className="ms-TooltipHost root-81"
+          className="ms-TooltipHost root-49"
           onBlurCapture={[Function]}
           onFocusCapture={[Function]}
           onKeyDown={[Function]}
diff --git a/src/view/container/device/__snapshots__/Device.spec.tsx.snap b/src/view/container/device/__snapshots__/Device.spec.tsx.snap
index 56427f505..7bb63b14a 100644
--- a/src/view/container/device/__snapshots__/Device.spec.tsx.snap
+++ b/src/view/container/device/__snapshots__/Device.spec.tsx.snap
@@ -2641,7 +2641,7 @@ exports[`Device component  should render correctly 1`] = `
         className="toolbar-icon"
       >
         <div
-          className="ms-TooltipHost root-81"
+          className="ms-TooltipHost root-49"
           onBlurCapture={[Function]}
           onFocusCapture={[Function]}
           onKeyDown={[Function]}
@@ -2708,7 +2708,7 @@ exports[`Device component  should render correctly 1`] = `
           </button>
         </div>
         <div
-          className="ms-TooltipHost root-81"
+          className="ms-TooltipHost root-49"
           onBlurCapture={[Function]}
           onFocusCapture={[Function]}
           onKeyDown={[Function]}
@@ -2773,7 +2773,7 @@ exports[`Device component  should render correctly 1`] = `
           </button>
         </div>
         <div
-          className="ms-TooltipHost root-81"
+          className="ms-TooltipHost root-49"
           onBlurCapture={[Function]}
           onFocusCapture={[Function]}
           onKeyDown={[Function]}
@@ -2840,7 +2840,7 @@ exports[`Device component  should render correctly 1`] = `
           </button>
         </div>
         <div
-          className="ms-TooltipHost root-81"
+          className="ms-TooltipHost root-49"
           onBlurCapture={[Function]}
           onFocusCapture={[Function]}
           onKeyDown={[Function]}
@@ -2907,7 +2907,7 @@ exports[`Device component  should render correctly 1`] = `
           </button>
         </div>
         <div
-          className="ms-TooltipHost root-81"
+          className="ms-TooltipHost root-49"
           onBlurCapture={[Function]}
           onFocusCapture={[Function]}
           onKeyDown={[Function]}

From 5839b9206c84e3ea24741fe486f4c80c1d8dddae Mon Sep 17 00:00:00 2001
From: xnkevinnguyen <xuannamkevin@gmail.com>
Date: Thu, 19 Mar 2020 11:32:25 -0700
Subject: [PATCH 08/11] Modify experience for displaying file

---
 src/view/components/cpx/CpxSimulator.tsx           | 2 +-
 src/view/components/microbit/MicrobitSimulator.tsx | 2 +-
 src/view/constants.ts                              | 3 ++-
 src/view/styles/Simulator.css                      | 5 ++++-
 4 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/view/components/cpx/CpxSimulator.tsx b/src/view/components/cpx/CpxSimulator.tsx
index 81eb7a7c2..24cf1728b 100644
--- a/src/view/components/cpx/CpxSimulator.tsx
+++ b/src/view/components/cpx/CpxSimulator.tsx
@@ -148,7 +148,7 @@ class Simulator extends React.Component<{}, IState> {
                 <div className="file-selector">
                     {this.state.running_file && this.state.play_button
                         ? CONSTANTS.CURRENTLY_RUNNING(this.state.running_file)
-                        : null}
+                        : CONSTANTS.FILES_PLACEHOLDER}
                 </div>
                 <div className="cpx-container">
                     <CpxImage
diff --git a/src/view/components/microbit/MicrobitSimulator.tsx b/src/view/components/microbit/MicrobitSimulator.tsx
index 765356eb1..0ae4895b9 100644
--- a/src/view/components/microbit/MicrobitSimulator.tsx
+++ b/src/view/components/microbit/MicrobitSimulator.tsx
@@ -114,7 +114,7 @@ export class MicrobitSimulator extends React.Component<any, IState> {
                 <div className="file-selector">
                     {this.state.running_file && this.state.play_button
                         ? CONSTANTS.CURRENTLY_RUNNING(this.state.running_file)
-                        : null}
+                        : CONSTANTS.FILES_PLACEHOLDER}
                 </div>
                 <div className="microbit-container">
                     <MicrobitImage
diff --git a/src/view/constants.ts b/src/view/constants.ts
index 5ffcc519f..d81683ef2 100644
--- a/src/view/constants.ts
+++ b/src/view/constants.ts
@@ -42,7 +42,8 @@ export const CONSTANTS = {
         NUMERIC_SIX: "Digit6",
         NUMERIC_SEVEN: "Digit7",
     },
-    NO_FILES_AVAILABLE: "Save a .py file to run on the Simulator",
+    FILES_PLACEHOLDER:
+        "The simulator will run the .py file you have focused on.",
     SIMULATOR_BUTTON_WIDTH: 60,
     TOOLBAR_INFO: `Explore what's on the board:`,
 };
diff --git a/src/view/styles/Simulator.css b/src/view/styles/Simulator.css
index 5d35f14f4..693e08716 100644
--- a/src/view/styles/Simulator.css
+++ b/src/view/styles/Simulator.css
@@ -18,7 +18,10 @@
 
 .file-selector {
     padding: 20px;
-    min-height: 20px;
+    width: 80%;
+    height: 30px;
+    border: 1px solid var(--vscode-debugToolBar-background);
+    border-radius: 3px;
 }
 
 .shake-pressed {

From 6bf170ba5e424543ea0eb5879d167f74af2437d1 Mon Sep 17 00:00:00 2001
From: xnkevinnguyen <xuannamkevin@gmail.com>
Date: Thu, 19 Mar 2020 11:36:30 -0700
Subject: [PATCH 09/11] Slightly adjust css for cpx

---
 src/view/components/microbit/MicrobitSimulator.tsx | 1 -
 src/view/styles/Simulator.css                      | 1 +
 2 files changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/view/components/microbit/MicrobitSimulator.tsx b/src/view/components/microbit/MicrobitSimulator.tsx
index 0ae4895b9..f47bbd0e0 100644
--- a/src/view/components/microbit/MicrobitSimulator.tsx
+++ b/src/view/components/microbit/MicrobitSimulator.tsx
@@ -91,7 +91,6 @@ export class MicrobitSimulator extends React.Component<any, IState> {
                 } else {
                     this.setState({
                         running_file: message.state.running_file,
-
                         currently_selected_file: message.state.running_file,
                     });
                 }
diff --git a/src/view/styles/Simulator.css b/src/view/styles/Simulator.css
index 693e08716..fed8cca11 100644
--- a/src/view/styles/Simulator.css
+++ b/src/view/styles/Simulator.css
@@ -74,4 +74,5 @@
 }
 .cpx-container {
     width: 100%;
+    padding-top: 10px;
 }

From ecc9f8aa38318d39da4052aa51df8bada585b15d Mon Sep 17 00:00:00 2001
From: xnkevinnguyen <xuannamkevin@gmail.com>
Date: Thu, 19 Mar 2020 11:42:28 -0700
Subject: [PATCH 10/11] Update test according to ui change

---
 src/view/__snapshots__/App.spec.tsx.snap                     | 4 +++-
 src/view/components/cpx/__snapshots__/Cpx.spec.tsx.snap      | 4 +++-
 src/view/container/device/__snapshots__/Device.spec.tsx.snap | 4 +++-
 3 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/view/__snapshots__/App.spec.tsx.snap b/src/view/__snapshots__/App.spec.tsx.snap
index 8a0c10ba7..5f47353a3 100644
--- a/src/view/__snapshots__/App.spec.tsx.snap
+++ b/src/view/__snapshots__/App.spec.tsx.snap
@@ -15,7 +15,9 @@ exports[`App component  should render correctly 1`] = `
       >
         <div
           className="file-selector"
-        />
+        >
+          The simulator will run the .py file you have focused on.
+        </div>
         <div
           className="cpx-container"
         >
diff --git a/src/view/components/cpx/__snapshots__/Cpx.spec.tsx.snap b/src/view/components/cpx/__snapshots__/Cpx.spec.tsx.snap
index 761cf89ae..3bc41a9f3 100644
--- a/src/view/components/cpx/__snapshots__/Cpx.spec.tsx.snap
+++ b/src/view/components/cpx/__snapshots__/Cpx.spec.tsx.snap
@@ -7,7 +7,9 @@ Array [
   >
     <div
       className="file-selector"
-    />
+    >
+      The simulator will run the .py file you have focused on.
+    </div>
     <div
       className="cpx-container"
     >
diff --git a/src/view/container/device/__snapshots__/Device.spec.tsx.snap b/src/view/container/device/__snapshots__/Device.spec.tsx.snap
index 7bb63b14a..bc04b0685 100644
--- a/src/view/container/device/__snapshots__/Device.spec.tsx.snap
+++ b/src/view/container/device/__snapshots__/Device.spec.tsx.snap
@@ -9,7 +9,9 @@ exports[`Device component  should render correctly 1`] = `
   >
     <div
       className="file-selector"
-    />
+    >
+      The simulator will run the .py file you have focused on.
+    </div>
     <div
       className="microbit-container"
     >

From 65c5f26e349f2496f55212c1911f80178552a289 Mon Sep 17 00:00:00 2001
From: xnkevinnguyen <xuannamkevin@gmail.com>
Date: Thu, 19 Mar 2020 12:02:02 -0700
Subject: [PATCH 11/11] Change constant for dropdown

---
 src/view/components/Dropdown.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/view/components/Dropdown.tsx b/src/view/components/Dropdown.tsx
index f4c995923..afbc2a0d4 100644
--- a/src/view/components/Dropdown.tsx
+++ b/src/view/components/Dropdown.tsx
@@ -20,7 +20,7 @@ const Dropdown: React.FC<IDropdownProps> = props => {
     const defaultText =
         props.lastChosen !== ""
             ? CONSTANTS.CURRENTLY_RUNNING(parsedPath[1])
-            : CONSTANTS.NO_FILES_AVAILABLE;
+            : CONSTANTS.FILES_PLACEHOLDER;
     return (
         <div>
             <select