From 6666f80422feacf042f67993ec95e53157d9b3ad Mon Sep 17 00:00:00 2001
From: Akin909 <akin.sowemimo@gmail.com>
Date: Sat, 23 Dec 2017 14:24:42 +0000
Subject: [PATCH 01/29] Rework styling to match quickopen menu

also add icon - file icon atm ?alternatives
---
 browser/src/UI/components/WildMenu.tsx | 55 +++++++++++++++-----------
 1 file changed, 32 insertions(+), 23 deletions(-)

diff --git a/browser/src/UI/components/WildMenu.tsx b/browser/src/UI/components/WildMenu.tsx
index 91cd2abc9c..cc1a56f975 100644
--- a/browser/src/UI/components/WildMenu.tsx
+++ b/browser/src/UI/components/WildMenu.tsx
@@ -1,58 +1,66 @@
 import * as React from "react"
 import { connect } from "react-redux"
 import styled, { css } from "styled-components"
+import { Icon  } from "./../../UI/Icon"
 
 import * as State from "./../../Editor/NeovimEditor/NeovimEditorStore"
 import { fadeInAndDown } from "./animations"
 import { boxShadow, withProps } from "./common"
 
 const WildMenuContainer = styled.div`
-    width: 50%;
     position: absolute;
-    left: 25%;
-    top: 10%;
-    overflow: hidden;
     box-sizing: border-box;
-    max-height: 500px;
     display: flex;
+    flex-direction: column;
     align-items: center;
+    padding: 8px;
+    top: 0px;
+    left: 0px;
+    bottom: 0px;
+    right: 0px;
+    background-color: rgba(0, 0, 0, 0.25);
 `
 
 const WildMenuList = styled.ul`
-    height: 90%;
-    width: 100%;
-    background-color: ${p => p.theme.background};
-    ${boxShadow} animation: ${fadeInAndDown} 0.05s ease-in-out;
-    color: ${p => p.theme.foreground};
+    position: relative;
+    width: 75%;
+    margin-top: 16px;
+    max-height: 500px;
+    max-width: 900px;
+    ${boxShadow};
+    animation: ${fadeInAndDown} 0.05s ease-in-out;
     display: flex;
     padding: 1em;
     flex-direction: column;
     box-sizing: border-box;
-    overflow-y: scroll;
-    overflow-x: hidden;
+    overflow: hidden;
+    background-color: ${p => p.theme["menu.background"]};
+    color: ${p => p.theme["menu.foreground"]};
 `
-const normBg = "highlight.mode.normal.background"
-const normFg = "highlight.mode.normal.foreground"
-
 const colors = css`
-    background-color: ${p => p.theme[normBg]};
-    color: ${p => p.theme[normFg]};
+    background-color: rgba(0, 0, 0, 0.2);
+    color: ${p => p.theme["menu.foreground"]};
 `
 const WildMenuItem = withProps<{ selected: boolean }>(styled.li)`
-    font-size: 1.1em;
-    display: inline;
+    font-size: 1.1rem;
     margin: 0.2em;
-    padding: 0.2em 0 0.5em 0.2em;
+    padding: 0.5em;
     ${p => p.selected && boxShadow};
-    width: 100%;
-    min-height: 1em;
+    min-height: 1rem;
     text-align: left;
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
     ${p => p.selected && colors};
 `
 
+const WildMenuText = styled.span`
+  margin-left: 1rem;
+`
+
 interface Props {
     visible: boolean
     options: string[]
@@ -97,7 +105,8 @@ class WildMenu extends React.Component<Props, State> {
                                     selected={i === current}
                                     key={option + i}
                                 >
-                                    {option}
+                                    <span><Icon name="file-text" /></span>
+                                    <WildMenuText>{option}</WildMenuText>
                                 </WildMenuItem>
                             ))}
                     </WildMenuList>

From 8e5624b36716beee4f7da790a2cc888e1d7d83f6 Mon Sep 17 00:00:00 2001
From: Akin909 <akin.sowemimo@gmail.com>
Date: Sat, 23 Dec 2017 14:43:42 +0000
Subject: [PATCH 02/29] Render wild menu into the stack layer

---
 browser/src/UI/components/WildMenu.tsx | 32 ++++++++++++++++++--------
 1 file changed, 22 insertions(+), 10 deletions(-)

diff --git a/browser/src/UI/components/WildMenu.tsx b/browser/src/UI/components/WildMenu.tsx
index cc1a56f975..3738e3347d 100644
--- a/browser/src/UI/components/WildMenu.tsx
+++ b/browser/src/UI/components/WildMenu.tsx
@@ -1,7 +1,8 @@
 import * as React from "react"
+import * as ReactDOM from "react-dom"
 import { connect } from "react-redux"
 import styled, { css } from "styled-components"
-import { Icon  } from "./../../UI/Icon"
+import { Icon } from "./../../UI/Icon"
 
 import * as State from "./../../Editor/NeovimEditor/NeovimEditorStore"
 import { fadeInAndDown } from "./animations"
@@ -25,7 +26,7 @@ const WildMenuList = styled.ul`
     position: relative;
     width: 75%;
     margin-top: 16px;
-    max-height: 500px;
+    max-height: 30em;
     max-width: 900px;
     ${boxShadow};
     animation: ${fadeInAndDown} 0.05s ease-in-out;
@@ -58,7 +59,7 @@ const WildMenuItem = withProps<{ selected: boolean }>(styled.li)`
 `
 
 const WildMenuText = styled.span`
-  margin-left: 1rem;
+    margin-left: 1rem;
 `
 
 interface Props {
@@ -73,12 +74,19 @@ interface State {
 }
 
 class WildMenu extends React.Component<Props, State> {
-    public state = {
-        currentPage: 1,
-        itemsPerPage: 10,
-    }
     private selectedElement: HTMLUListElement
     private containerElement: HTMLUListElement
+    private stackLayer: HTMLDivElement
+
+    public constructor(props: Props) {
+        super(props)
+        this.stackLayer = document.querySelector(".stack .layer")
+
+        this.state = {
+            currentPage: 1,
+            itemsPerPage: 10,
+        }
+    }
 
     public componentWillReceiveProps(next: Props) {
         if (next.selected !== this.props.selected) {
@@ -93,7 +101,8 @@ class WildMenu extends React.Component<Props, State> {
         const { currentItems, current } = this.calculateCurrentItems()
 
         return (
-            visible && (
+            visible &&
+            ReactDOM.createPortal(
                 <WildMenuContainer>
                     <WildMenuList innerRef={e => (this.containerElement = e)}>
                         {currentItems &&
@@ -105,12 +114,15 @@ class WildMenu extends React.Component<Props, State> {
                                     selected={i === current}
                                     key={option + i}
                                 >
-                                    <span><Icon name="file-text" /></span>
+                                    <span>
+                                        <Icon name="file-text" />
+                                    </span>
                                     <WildMenuText>{option}</WildMenuText>
                                 </WildMenuItem>
                             ))}
                     </WildMenuList>
-                </WildMenuContainer>
+                </WildMenuContainer>,
+                this.stackLayer,
             )
         )
     }

From 5279e25ae74953f1cbc12f6c021fb90b958049ca Mon Sep 17 00:00:00 2001
From: Akin909 <akin.sowemimo@gmail.com>
Date: Sat, 23 Dec 2017 14:46:58 +0000
Subject: [PATCH 03/29] Reduce padding

---
 browser/src/UI/components/WildMenu.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/browser/src/UI/components/WildMenu.tsx b/browser/src/UI/components/WildMenu.tsx
index 3738e3347d..6ced3407f3 100644
--- a/browser/src/UI/components/WildMenu.tsx
+++ b/browser/src/UI/components/WildMenu.tsx
@@ -45,7 +45,7 @@ const colors = css`
 const WildMenuItem = withProps<{ selected: boolean }>(styled.li)`
     font-size: 1.1rem;
     margin: 0.2em;
-    padding: 0.5em;
+    padding: 0.4em;
     ${p => p.selected && boxShadow};
     min-height: 1rem;
     text-align: left;

From ebea06d86fff720ab062f049b1c17d4d28dae9a7 Mon Sep 17 00:00:00 2001
From: Akin909 <akin.sowemimo@gmail.com>
Date: Sat, 23 Dec 2017 16:47:30 +0000
Subject: [PATCH 04/29] Compose wild menu with commandline

---
 .../NeovimEditor/NeovimEditorReducer.ts       | 11 ++-
 .../Editor/NeovimEditor/NeovimEditorStore.ts  | 11 ++-
 .../src/Editor/NeovimEditor/NeovimSurface.tsx |  6 +-
 browser/src/UI/components/CommandLine.tsx     | 25 +-----
 browser/src/UI/components/ExternalMenus.tsx   | 50 ++++++++++++
 browser/src/UI/components/WildMenu.tsx        | 78 ++++++-------------
 6 files changed, 98 insertions(+), 83 deletions(-)
 create mode 100644 browser/src/UI/components/ExternalMenus.tsx

diff --git a/browser/src/Editor/NeovimEditor/NeovimEditorReducer.ts b/browser/src/Editor/NeovimEditor/NeovimEditorReducer.ts
index dc0ed8b51a..7658e2b45e 100644
--- a/browser/src/Editor/NeovimEditor/NeovimEditorReducer.ts
+++ b/browser/src/Editor/NeovimEditor/NeovimEditorReducer.ts
@@ -99,6 +99,7 @@ export function reducer<K extends keyof IConfigurationValues>(s: State.IState, a
             return {
                 ...s,
                 commandLine: {
+                    visible: true,
                     content: a.payload.content,
                     position: a.payload.position,
                     firstchar: a.payload.firstchar,
@@ -110,7 +111,15 @@ export function reducer<K extends keyof IConfigurationValues>(s: State.IState, a
         case "HIDE_COMMAND_LINE":
             return {
                 ...s,
-                commandLine: null,
+                commandLine: {
+                    visible: false,
+                    content: null,
+                    firstchar: "",
+                    position: null,
+                    prompt: "",
+                    indent: null,
+                    level: null,
+                },
             }
         case "SET_COMMAND_LINE_POSITION":
             return {
diff --git a/browser/src/Editor/NeovimEditor/NeovimEditorStore.ts b/browser/src/Editor/NeovimEditor/NeovimEditorStore.ts
index 91880f1880..cfa8a349f1 100644
--- a/browser/src/Editor/NeovimEditor/NeovimEditorStore.ts
+++ b/browser/src/Editor/NeovimEditor/NeovimEditorStore.ts
@@ -87,6 +87,7 @@ export interface IWildMenu {
 }
 
 export interface ICommandLine {
+    visible: boolean,
     content: Array<[any, string]>,
     firstchar: string,
     position: number,
@@ -205,7 +206,15 @@ export const createDefaultState = (): IState => ({
 
     errors: {},
     toolTips: {},
-    commandLine: null,
+    commandLine: {
+        content: null,
+        prompt: null,
+        indent: null,
+        level: null,
+        visible: false,
+        firstchar: "",
+        position: 0,
+    },
     wildmenu: {
         selected: null,
         visible: false,
diff --git a/browser/src/Editor/NeovimEditor/NeovimSurface.tsx b/browser/src/Editor/NeovimEditor/NeovimSurface.tsx
index bb2fedba76..7bcf9d5d20 100644
--- a/browser/src/Editor/NeovimEditor/NeovimSurface.tsx
+++ b/browser/src/Editor/NeovimEditor/NeovimSurface.tsx
@@ -11,14 +11,13 @@ import { IEvent } from "oni-types"
 import { NeovimInstance, NeovimScreen } from "./../../neovim"
 import { INeovimRenderer } from "./../../Renderer"
 
-import { CommandLine } from "./../../UI/components/CommandLine"
 import { Cursor } from "./../../UI/components/Cursor"
 import { CursorLine } from "./../../UI/components/CursorLine"
+import ExternalMenus from "./../../UI/components/ExternalMenus"
 import { InstallHelp } from "./../../UI/components/InstallHelp"
 import { TabsContainer } from "./../../UI/components/Tabs"
 import { ToolTips } from "./../../UI/components/ToolTip"
 import { TypingPrediction } from "./../../UI/components/TypingPredictions"
-import WildMenu from "./../../UI/components/WildMenu"
 
 import { BufferScrollBarContainer } from "./containers/BufferScrollBarContainer"
 import { DefinitionContainer } from "./containers/DefinitionContainer"
@@ -68,8 +67,7 @@ export class NeovimSurface extends React.PureComponent<INeovimSurfaceProps, {}>
                 <div className="stack layer">
                     <TypingPrediction typingPrediction={this.props.typingPrediction}/>
                     <Cursor typingPrediction={this.props.typingPrediction}/>
-                    <CommandLine />
-                    <WildMenu />
+                    <ExternalMenus />
                     <CursorLine lineType={"line"} />
                     <CursorLine lineType={"column"} />
                     <NeovimActiveWindowContainer>
diff --git a/browser/src/UI/components/CommandLine.tsx b/browser/src/UI/components/CommandLine.tsx
index 634650f692..40dcff3941 100644
--- a/browser/src/UI/components/CommandLine.tsx
+++ b/browser/src/UI/components/CommandLine.tsx
@@ -1,5 +1,4 @@
 import * as React from "react"
-import { connect } from "react-redux"
 import styled from "styled-components"
 import { fadeInAndDown } from "./animations"
 
@@ -43,14 +42,14 @@ export interface ICommandLineRendererProps {
     content: Array<[any, string]> | null
     position: number,
     firstchar: string
-    // level: number
+    level?: number
 }
 
 interface State {
     focused: boolean,
 }
 
-class CommandLineRenderer extends React.PureComponent<ICommandLineRendererProps, State> {
+class CommandLine extends React.PureComponent<ICommandLineRendererProps, State> {
     public state = {
         focused: false,
     }
@@ -85,22 +84,4 @@ class CommandLineRenderer extends React.PureComponent<ICommandLineRendererProps,
     }
 }
 
-const mapStateToProps = ({ commandLine }: State.IState, props: ICommandLineRendererProps) => {
-    const commandLineProps: ICommandLineRendererProps = {
-        content: null,
-        visible: false,
-        firstchar: "",
-        position: 0,
-    }
-
-    if (commandLine) {
-        commandLineProps.visible = commandLine !== null
-        commandLineProps.content = commandLine.content
-        commandLineProps.firstchar = commandLine.firstchar
-        commandLineProps.position = commandLine !== null ? commandLine.position : 0
-    }
-
-    return commandLineProps
-}
-
-export const CommandLine = connect<ICommandLineRendererProps>(mapStateToProps)(CommandLineRenderer)
+export default CommandLine
diff --git a/browser/src/UI/components/ExternalMenus.tsx b/browser/src/UI/components/ExternalMenus.tsx
new file mode 100644
index 0000000000..41ab8392e2
--- /dev/null
+++ b/browser/src/UI/components/ExternalMenus.tsx
@@ -0,0 +1,50 @@
+import * as React from "react"
+import { connect } from "react-redux"
+import styled from "styled-components"
+import * as State from "./../../Editor/NeovimEditor/NeovimEditorStore"
+
+import CommandLine from "./CommandLine"
+import WildMenu from "./WildMenu"
+
+const MenuContainer = styled.div`
+    position: absolute;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 8px;
+    top: 0px;
+    left: 0px;
+    bottom: 0px;
+    right: 0px;
+    background-color: rgba(0, 0, 0, 0.25);
+`
+
+interface Props {
+    commandLine: State.ICommandLine
+    wildmenu: State.IWildMenu
+}
+
+class ExternalMenus extends React.Component<Props> {
+    public render() {
+        const { wildmenu, commandLine } = this.props
+        const visible = commandLine.visible || wildmenu.visible
+        return (
+            visible && (
+                <MenuContainer>
+                    <CommandLine {...commandLine} />
+                    <WildMenu {...wildmenu} />
+                </MenuContainer>
+            )
+        )
+    }
+}
+
+const mapStateToProps = ({ wildmenu, commandLine }: State.IState) => {
+    return {
+        commandLine,
+        wildmenu,
+    }
+}
+
+export default connect(mapStateToProps)(ExternalMenus)
diff --git a/browser/src/UI/components/WildMenu.tsx b/browser/src/UI/components/WildMenu.tsx
index 6ced3407f3..e456bfb22d 100644
--- a/browser/src/UI/components/WildMenu.tsx
+++ b/browser/src/UI/components/WildMenu.tsx
@@ -1,27 +1,10 @@
 import * as React from "react"
-import * as ReactDOM from "react-dom"
-import { connect } from "react-redux"
 import styled, { css } from "styled-components"
 import { Icon } from "./../../UI/Icon"
 
-import * as State from "./../../Editor/NeovimEditor/NeovimEditorStore"
 import { fadeInAndDown } from "./animations"
 import { boxShadow, withProps } from "./common"
 
-const WildMenuContainer = styled.div`
-    position: absolute;
-    box-sizing: border-box;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    padding: 8px;
-    top: 0px;
-    left: 0px;
-    bottom: 0px;
-    right: 0px;
-    background-color: rgba(0, 0, 0, 0.25);
-`
-
 const WildMenuList = styled.ul`
     position: relative;
     width: 75%;
@@ -74,19 +57,12 @@ interface State {
 }
 
 class WildMenu extends React.Component<Props, State> {
+    public state = {
+        currentPage: 1,
+        itemsPerPage: 10,
+    }
     private selectedElement: HTMLUListElement
     private containerElement: HTMLUListElement
-    private stackLayer: HTMLDivElement
-
-    public constructor(props: Props) {
-        super(props)
-        this.stackLayer = document.querySelector(".stack .layer")
-
-        this.state = {
-            currentPage: 1,
-            itemsPerPage: 10,
-        }
-    }
 
     public componentWillReceiveProps(next: Props) {
         if (next.selected !== this.props.selected) {
@@ -101,28 +77,24 @@ class WildMenu extends React.Component<Props, State> {
         const { currentItems, current } = this.calculateCurrentItems()
 
         return (
-            visible &&
-            ReactDOM.createPortal(
-                <WildMenuContainer>
-                    <WildMenuList innerRef={e => (this.containerElement = e)}>
-                        {currentItems &&
-                            currentItems.map((option, i) => (
-                                <WildMenuItem
-                                    innerRef={e =>
-                                        i === current - 1 ? (this.selectedElement = e) : null
-                                    }
-                                    selected={i === current}
-                                    key={option + i}
-                                >
-                                    <span>
-                                        <Icon name="file-text" />
-                                    </span>
-                                    <WildMenuText>{option}</WildMenuText>
-                                </WildMenuItem>
-                            ))}
-                    </WildMenuList>
-                </WildMenuContainer>,
-                this.stackLayer,
+            visible && (
+                <WildMenuList innerRef={e => (this.containerElement = e)}>
+                    {currentItems &&
+                        currentItems.map((option, i) => (
+                            <WildMenuItem
+                                innerRef={e =>
+                                    i === current - 1 ? (this.selectedElement = e) : null
+                                }
+                                selected={i === current}
+                                key={option + i}
+                            >
+                                <span>
+                                    <Icon name="file-text" />
+                                </span>
+                                <WildMenuText>{option}</WildMenuText>
+                            </WildMenuItem>
+                        ))}
+                </WildMenuList>
             )
         )
     }
@@ -138,8 +110,4 @@ class WildMenu extends React.Component<Props, State> {
     }
 }
 
-const mapStateToProps = ({ wildmenu: { options, visible, selected } }: State.IState) => {
-    return { options, visible, selected }
-}
-
-export default connect(mapStateToProps)(WildMenu)
+export default WildMenu

From 686f823541ab20f2468e342dffe05ac6b2706049 Mon Sep 17 00:00:00 2001
From: Akin909 <akin.sowemimo@gmail.com>
Date: Sat, 23 Dec 2017 16:58:59 +0000
Subject: [PATCH 05/29] Configure wild menu and commandline

Components now render in the same layer and
can be positioned similarly if both present
or interchangeably if one options is disabled
---
 browser/src/UI/components/CommandLine.tsx   | 28 ++++++---------------
 browser/src/UI/components/ExternalMenus.tsx | 21 ++++++++++------
 2 files changed, 21 insertions(+), 28 deletions(-)

diff --git a/browser/src/UI/components/CommandLine.tsx b/browser/src/UI/components/CommandLine.tsx
index 40dcff3941..07c1f1ec9c 100644
--- a/browser/src/UI/components/CommandLine.tsx
+++ b/browser/src/UI/components/CommandLine.tsx
@@ -4,18 +4,6 @@ import { fadeInAndDown } from "./animations"
 
 import * as State from "./../../Editor/NeovimEditor/NeovimEditorStore"
 
-const CommandLineBackground = styled.div`
-    position: absolute;
-    top: 0px;
-    left: 0px;
-    bottom: 0px;
-    right: 0px;
-    background-color: rgba(0, 0, 0, 0.25);
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-`
-
 const CommandLineBox = styled.div`
     position: relative;
     margin-top: 16px;
@@ -38,15 +26,15 @@ const CommandLineInput = styled.input`
 `
 
 export interface ICommandLineRendererProps {
-    visible: boolean,
+    visible: boolean
     content: Array<[any, string]> | null
-    position: number,
+    position: number
     firstchar: string
     level?: number
 }
 
 interface State {
-    focused: boolean,
+    focused: boolean
 }
 
 class CommandLine extends React.PureComponent<ICommandLineRendererProps, State> {
@@ -65,13 +53,13 @@ class CommandLine extends React.PureComponent<ICommandLineRendererProps, State>
         }
     }
 
-    public render(): null |  JSX.Element {
+    public render(): null | JSX.Element {
         if (!this.state.focused && this.props.visible && this._inputElement) {
-           this._inputElement.focus()
+            this._inputElement.focus()
         }
 
-        return this.props.visible && (
-            <CommandLineBackground>
+        return (
+            this.props.visible && (
                 <CommandLineBox>
                     <CommandLineInput
                         onChange={this.handleChange}
@@ -79,7 +67,7 @@ class CommandLine extends React.PureComponent<ICommandLineRendererProps, State>
                         value={this.props.firstchar + this.props.content[0][1]}
                     />
                 </CommandLineBox>
-            </CommandLineBackground>
+            )
         )
     }
 }
diff --git a/browser/src/UI/components/ExternalMenus.tsx b/browser/src/UI/components/ExternalMenus.tsx
index 41ab8392e2..9f7d8c89d2 100644
--- a/browser/src/UI/components/ExternalMenus.tsx
+++ b/browser/src/UI/components/ExternalMenus.tsx
@@ -1,4 +1,5 @@
 import * as React from "react"
+import * as ReactDOM from "react-dom"
 import { connect } from "react-redux"
 import styled from "styled-components"
 import * as State from "./../../Editor/NeovimEditor/NeovimEditorStore"
@@ -26,25 +27,29 @@ interface Props {
 }
 
 class ExternalMenus extends React.Component<Props> {
+    constructor(props: Props, private stackLayer: HTMLDivElement) {
+        super(props)
+        this.stackLayer = document.querySelector(".stack .layer")
+    }
+
     public render() {
         const { wildmenu, commandLine } = this.props
         const visible = commandLine.visible || wildmenu.visible
         return (
-            visible && (
+            visible && ReactDOM.createPortal(
                 <MenuContainer>
                     <CommandLine {...commandLine} />
                     <WildMenu {...wildmenu} />
-                </MenuContainer>
+                </MenuContainer>,
+                this.stackLayer,
             )
         )
     }
 }
 
-const mapStateToProps = ({ wildmenu, commandLine }: State.IState) => {
-    return {
-        commandLine,
-        wildmenu,
-    }
-}
+const mapStateToProps = ({ wildmenu, commandLine }: State.IState) => ({
+    commandLine,
+    wildmenu,
+})
 
 export default connect(mapStateToProps)(ExternalMenus)

From a20d048dc55a0a4f423a7d9842c27cd2f60a6642 Mon Sep 17 00:00:00 2001
From: Akin909 <akin.sowemimo@gmail.com>
Date: Sat, 23 Dec 2017 17:23:26 +0000
Subject: [PATCH 06/29] Render components separately inside of common

container
---
 .../src/Editor/NeovimEditor/NeovimSurface.tsx |  7 ++++++-
 browser/src/UI/components/CommandLine.tsx     | 20 ++++++++++++++++---
 browser/src/UI/components/ExternalMenus.tsx   |  6 +-----
 browser/src/UI/components/WildMenu.tsx        |  9 ++++++++-
 4 files changed, 32 insertions(+), 10 deletions(-)

diff --git a/browser/src/Editor/NeovimEditor/NeovimSurface.tsx b/browser/src/Editor/NeovimEditor/NeovimSurface.tsx
index 7bcf9d5d20..c2165b4b00 100644
--- a/browser/src/Editor/NeovimEditor/NeovimSurface.tsx
+++ b/browser/src/Editor/NeovimEditor/NeovimSurface.tsx
@@ -11,6 +11,7 @@ import { IEvent } from "oni-types"
 import { NeovimInstance, NeovimScreen } from "./../../neovim"
 import { INeovimRenderer } from "./../../Renderer"
 
+import CommandLine from "./../../UI/components/CommandLine"
 import { Cursor } from "./../../UI/components/Cursor"
 import { CursorLine } from "./../../UI/components/CursorLine"
 import ExternalMenus from "./../../UI/components/ExternalMenus"
@@ -18,6 +19,7 @@ import { InstallHelp } from "./../../UI/components/InstallHelp"
 import { TabsContainer } from "./../../UI/components/Tabs"
 import { ToolTips } from "./../../UI/components/ToolTip"
 import { TypingPrediction } from "./../../UI/components/TypingPredictions"
+import WildMenu from "./../../UI/components/WildMenu"
 
 import { BufferScrollBarContainer } from "./containers/BufferScrollBarContainer"
 import { DefinitionContainer } from "./containers/DefinitionContainer"
@@ -67,7 +69,10 @@ export class NeovimSurface extends React.PureComponent<INeovimSurfaceProps, {}>
                 <div className="stack layer">
                     <TypingPrediction typingPrediction={this.props.typingPrediction}/>
                     <Cursor typingPrediction={this.props.typingPrediction}/>
-                    <ExternalMenus />
+                    <ExternalMenus>
+                        <CommandLine />
+                        <WildMenu />
+                    </ExternalMenus>
                     <CursorLine lineType={"line"} />
                     <CursorLine lineType={"column"} />
                     <NeovimActiveWindowContainer>
diff --git a/browser/src/UI/components/CommandLine.tsx b/browser/src/UI/components/CommandLine.tsx
index 07c1f1ec9c..32e64fbb0b 100644
--- a/browser/src/UI/components/CommandLine.tsx
+++ b/browser/src/UI/components/CommandLine.tsx
@@ -1,6 +1,9 @@
 import * as React from "react"
+import { connect } from "react-redux"
 import styled from "styled-components"
+
 import { fadeInAndDown } from "./animations"
+import { boxShadow } from "./common"
 
 import * as State from "./../../Editor/NeovimEditor/NeovimEditorStore"
 
@@ -10,9 +13,10 @@ const CommandLineBox = styled.div`
     padding: 8px;
     width: 75%;
     max-width: 900px;
-    background-color: ${p => p.theme.background};
-    box-shadow: 0 4px 8px 2px rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+    background-color: ${p => p.theme["menu.background"]};
+    ${boxShadow};
     animation: ${fadeInAndDown} 0.08s ease-in;
+    box-sizing: border-box;
 `
 const CommandLineInput = styled.input`
     border: 0px;
@@ -72,4 +76,14 @@ class CommandLine extends React.PureComponent<ICommandLineRendererProps, State>
     }
 }
 
-export default CommandLine
+const mapStateToProps = ({
+    commandLine: { visible, position, content, firstchar, level } }: State.IState,
+) => ({
+    visible,
+    content,
+    firstchar,
+    position,
+    level,
+})
+
+export default connect<ICommandLineRendererProps>(mapStateToProps)(CommandLine)
diff --git a/browser/src/UI/components/ExternalMenus.tsx b/browser/src/UI/components/ExternalMenus.tsx
index 9f7d8c89d2..b44ccf652f 100644
--- a/browser/src/UI/components/ExternalMenus.tsx
+++ b/browser/src/UI/components/ExternalMenus.tsx
@@ -4,9 +4,6 @@ import { connect } from "react-redux"
 import styled from "styled-components"
 import * as State from "./../../Editor/NeovimEditor/NeovimEditorStore"
 
-import CommandLine from "./CommandLine"
-import WildMenu from "./WildMenu"
-
 const MenuContainer = styled.div`
     position: absolute;
     box-sizing: border-box;
@@ -38,8 +35,7 @@ class ExternalMenus extends React.Component<Props> {
         return (
             visible && ReactDOM.createPortal(
                 <MenuContainer>
-                    <CommandLine {...commandLine} />
-                    <WildMenu {...wildmenu} />
+                    {this.props.children}
                 </MenuContainer>,
                 this.stackLayer,
             )
diff --git a/browser/src/UI/components/WildMenu.tsx b/browser/src/UI/components/WildMenu.tsx
index e456bfb22d..57f780b780 100644
--- a/browser/src/UI/components/WildMenu.tsx
+++ b/browser/src/UI/components/WildMenu.tsx
@@ -1,10 +1,13 @@
 import * as React from "react"
+import { connect } from "react-redux"
 import styled, { css } from "styled-components"
 import { Icon } from "./../../UI/Icon"
 
 import { fadeInAndDown } from "./animations"
 import { boxShadow, withProps } from "./common"
 
+import * as State from "./../../Editor/NeovimEditor/NeovimEditorStore"
+
 const WildMenuList = styled.ul`
     position: relative;
     width: 75%;
@@ -110,4 +113,8 @@ class WildMenu extends React.Component<Props, State> {
     }
 }
 
-export default WildMenu
+const mapStateToProps = ({ wildmenu: { options, visible, selected } }: State.IState) => {
+    return { options, visible, selected }
+}
+
+export default connect(mapStateToProps)(WildMenu)

From 132e7f49141e2449436e17e800a7dc8060938e9e Mon Sep 17 00:00:00 2001
From: Akin909 <akin.sowemimo@gmail.com>
Date: Sat, 23 Dec 2017 17:29:52 +0000
Subject: [PATCH 07/29] Attempt to manually place external menus not working

---
 .../src/Editor/NeovimEditor/NeovimSurface.tsx | 90 ++++++++++---------
 browser/src/UI/components/WildMenu.tsx        |  3 +-
 2 files changed, 49 insertions(+), 44 deletions(-)

diff --git a/browser/src/Editor/NeovimEditor/NeovimSurface.tsx b/browser/src/Editor/NeovimEditor/NeovimSurface.tsx
index c2165b4b00..5ac9a62c52 100644
--- a/browser/src/Editor/NeovimEditor/NeovimSurface.tsx
+++ b/browser/src/Editor/NeovimEditor/NeovimSurface.tsx
@@ -52,50 +52,56 @@ export interface INeovimSurfaceProps {
 
 export class NeovimSurface extends React.PureComponent<INeovimSurfaceProps, {}> {
     public render(): JSX.Element {
-        return <div className="container vertical full">
-            <div className="container fixed">
-                <TabsContainer
-                    onBufferSelect={this.props.onBufferSelect}
-                    onBufferClose={this.props.onBufferClose}
-                    onTabClose={this.props.onTabClose}
-                    onTabSelect={this.props.onTabSelect}/>
-            </div>
-            <div className="container full">
-                <div className="stack">
-                    <NeovimRenderer renderer={this.props.renderer}
-                        neovimInstance={this.props.neovimInstance}
-                        screen={this.props.screen} />
+        return (
+            <div className="container vertical full">
+                <div className="container fixed">
+                    <TabsContainer
+                        onBufferSelect={this.props.onBufferSelect}
+                        onBufferClose={this.props.onBufferClose}
+                        onTabClose={this.props.onTabClose}
+                        onTabSelect={this.props.onTabSelect}
+                    />
                 </div>
-                <div className="stack layer">
-                    <TypingPrediction typingPrediction={this.props.typingPrediction}/>
-                    <Cursor typingPrediction={this.props.typingPrediction}/>
-                    <ExternalMenus>
-                        <CommandLine />
-                        <WildMenu />
-                    </ExternalMenus>
-                    <CursorLine lineType={"line"} />
-                    <CursorLine lineType={"column"} />
-                    <NeovimActiveWindowContainer>
-                        <DefinitionContainer />
-                        <ErrorsContainer />
-                        <BufferScrollBarContainer />
-                    </NeovimActiveWindowContainer>
-                </div>
-                <NeovimInput
-                    onActivate={this.props.onActivate}
-                    typingPrediction={this.props.typingPrediction}
-                    neovimInstance={this.props.neovimInstance}
-                    screen={this.props.screen}
-                    onBounceStart={this.props.onBounceStart}
-                    onBounceEnd={this.props.onBounceEnd}
-                    onImeStart={this.props.onImeStart}
-                    onImeEnd={this.props.onImeEnd}
-                    onKeyDown={this.props.onKeyDown}/>
-                <div className="stack layer">
-                    <ToolTips />
+                <div className="container full">
+                    <div className="stack">
+                        <NeovimRenderer
+                            renderer={this.props.renderer}
+                            neovimInstance={this.props.neovimInstance}
+                            screen={this.props.screen}
+                        />
+                    </div>
+                    <div className="stack layer">
+                        <ExternalMenus>
+                            <CommandLine />
+                            <WildMenu />
+                        </ExternalMenus>
+                        <TypingPrediction typingPrediction={this.props.typingPrediction} />
+                        <Cursor typingPrediction={this.props.typingPrediction} />
+                        <CursorLine lineType={"line"} />
+                        <CursorLine lineType={"column"} />
+                        <NeovimActiveWindowContainer>
+                            <DefinitionContainer />
+                            <ErrorsContainer />
+                            <BufferScrollBarContainer />
+                        </NeovimActiveWindowContainer>
+                    </div>
+                    <NeovimInput
+                        onActivate={this.props.onActivate}
+                        typingPrediction={this.props.typingPrediction}
+                        neovimInstance={this.props.neovimInstance}
+                        screen={this.props.screen}
+                        onBounceStart={this.props.onBounceStart}
+                        onBounceEnd={this.props.onBounceEnd}
+                        onImeStart={this.props.onImeStart}
+                        onImeEnd={this.props.onImeEnd}
+                        onKeyDown={this.props.onKeyDown}
+                    />
+                    <div className="stack layer">
+                        <ToolTips />
+                    </div>
+                    <InstallHelp />
                 </div>
-                <InstallHelp />
             </div>
-        </div>
+        )
     }
 }
diff --git a/browser/src/UI/components/WildMenu.tsx b/browser/src/UI/components/WildMenu.tsx
index 57f780b780..20abe98039 100644
--- a/browser/src/UI/components/WildMenu.tsx
+++ b/browser/src/UI/components/WildMenu.tsx
@@ -11,10 +11,8 @@ import * as State from "./../../Editor/NeovimEditor/NeovimEditorStore"
 const WildMenuList = styled.ul`
     position: relative;
     width: 75%;
-    margin-top: 16px;
     max-height: 30em;
     max-width: 900px;
-    ${boxShadow};
     animation: ${fadeInAndDown} 0.05s ease-in-out;
     display: flex;
     padding: 1em;
@@ -23,6 +21,7 @@ const WildMenuList = styled.ul`
     overflow: hidden;
     background-color: ${p => p.theme["menu.background"]};
     color: ${p => p.theme["menu.foreground"]};
+    ${boxShadow};
 `
 const colors = css`
     background-color: rgba(0, 0, 0, 0.2);

From 343ad5b1b7fae747adc238f79ae0fd5c37086bee Mon Sep 17 00:00:00 2001
From: Akin909 <akin.sowemimo@gmail.com>
Date: Sat, 23 Dec 2017 18:10:12 +0000
Subject: [PATCH 08/29] add space to constructor

---
 browser/src/UI/components/ExternalMenus.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/browser/src/UI/components/ExternalMenus.tsx b/browser/src/UI/components/ExternalMenus.tsx
index b44ccf652f..2ae9d0d866 100644
--- a/browser/src/UI/components/ExternalMenus.tsx
+++ b/browser/src/UI/components/ExternalMenus.tsx
@@ -26,6 +26,7 @@ interface Props {
 class ExternalMenus extends React.Component<Props> {
     constructor(props: Props, private stackLayer: HTMLDivElement) {
         super(props)
+
         this.stackLayer = document.querySelector(".stack .layer")
     }
 

From 8f00c2a94a32777bf76b50cda5d1f209325cdf5e Mon Sep 17 00:00:00 2001
From: Akin909 <akin.sowemimo@gmail.com>
Date: Sat, 23 Dec 2017 21:40:19 +0000
Subject: [PATCH 09/29] Add timeout to prevent flickering of cmdline

Also only render overlay if both elements present
---
 .../NeovimEditor/NeovimEditorReducer.ts       | 41 +++++++++++--------
 .../Editor/NeovimEditor/NeovimEditorStore.ts  |  2 +-
 browser/src/UI/components/CommandLine.tsx     | 31 ++++++++++----
 browser/src/UI/components/ExternalMenus.tsx   | 12 ++++--
 4 files changed, 57 insertions(+), 29 deletions(-)

diff --git a/browser/src/Editor/NeovimEditor/NeovimEditorReducer.ts b/browser/src/Editor/NeovimEditor/NeovimEditorReducer.ts
index 7658e2b45e..8e14c2a275 100644
--- a/browser/src/Editor/NeovimEditor/NeovimEditorReducer.ts
+++ b/browser/src/Editor/NeovimEditor/NeovimEditorReducer.ts
@@ -29,7 +29,7 @@ export function reducer<K extends keyof IConfigurationValues>(s: State.IState, a
             return {
                 ...s,
                 colors: a.payload.colors,
-                    }
+            }
         case "SET_NEOVIM_ERROR":
              return { ...s,
                       neovimError: a.payload.neovimError }
@@ -55,20 +55,25 @@ export function reducer<K extends keyof IConfigurationValues>(s: State.IState, a
                     cursorCharacter: a.payload.cursorCharacter,
                     cursorPixelWidth: a.payload.cursorPixelWidth }
         case "SET_IME_ACTIVE":
-            return { ...s,
-                     imeActive: a.payload.imeActive }
+            return {
+                ...s,
+                imeActive: a.payload.imeActive,
+            }
         case "SET_FONT":
-            return { ...s,
-                     fontFamily: a.payload.fontFamily,
-                     fontSize: a.payload.fontSize }
+            return {
+                ...s,
+                fontFamily: a.payload.fontFamily,
+                fontSize: a.payload.fontSize,
+            }
         case "SET_MODE":
             return { ...s, ...{ mode: a.payload.mode } }
         case "SET_CONFIGURATION_VALUE":
             const obj: Partial<IConfigurationValues> = {}
             obj[a.payload.key] = a.payload.value
             const newConfig = {...s.configuration, ...obj}
-            return {...s,
-                    configuration: newConfig,
+            return {
+                ...s,
+                configuration: newConfig,
             }
         case "SHOW_WILDMENU":
             return {
@@ -96,11 +101,13 @@ export function reducer<K extends keyof IConfigurationValues>(s: State.IState, a
                 },
             }
         case "SHOW_COMMAND_LINE":
+            // Array<[any, string]>
+            const [[, content]] = a.payload.content
             return {
                 ...s,
                 commandLine: {
+                    content,
                     visible: true,
-                    content: a.payload.content,
                     position: a.payload.position,
                     firstchar: a.payload.firstchar,
                     prompt: a.payload.prompt,
@@ -127,13 +134,15 @@ export function reducer<K extends keyof IConfigurationValues>(s: State.IState, a
                 commandLine :  {...s.commandLine, position: a.payload.position},
             }
         default:
-            return {...s,
-                    buffers: buffersReducer(s.buffers, a),
-                    definition: definitionReducer(s.definition, a),
-                    tabState: tabStateReducer(s.tabState, a),
-                    errors: errorsReducer(s.errors, a),
-                    toolTips: toolTipsReducer(s.toolTips, a),
-                    windowState: windowStateReducer(s.windowState, a)}
+            return {
+                ...s,
+                buffers: buffersReducer(s.buffers, a),
+                definition: definitionReducer(s.definition, a),
+                tabState: tabStateReducer(s.tabState, a),
+                errors: errorsReducer(s.errors, a),
+                toolTips: toolTipsReducer(s.toolTips, a),
+                windowState: windowStateReducer(s.windowState, a),
+            }
     }
 }
 
diff --git a/browser/src/Editor/NeovimEditor/NeovimEditorStore.ts b/browser/src/Editor/NeovimEditor/NeovimEditorStore.ts
index cfa8a349f1..fd9109eb88 100644
--- a/browser/src/Editor/NeovimEditor/NeovimEditorStore.ts
+++ b/browser/src/Editor/NeovimEditor/NeovimEditorStore.ts
@@ -88,7 +88,7 @@ export interface IWildMenu {
 
 export interface ICommandLine {
     visible: boolean,
-    content: Array<[any, string]>,
+    content: string,
     firstchar: string,
     position: number,
     prompt: string,
diff --git a/browser/src/UI/components/CommandLine.tsx b/browser/src/UI/components/CommandLine.tsx
index 32e64fbb0b..0c629a2d95 100644
--- a/browser/src/UI/components/CommandLine.tsx
+++ b/browser/src/UI/components/CommandLine.tsx
@@ -31,7 +31,7 @@ const CommandLineInput = styled.input`
 
 export interface ICommandLineRendererProps {
     visible: boolean
-    content: Array<[any, string]> | null
+    content: string
     position: number
     firstchar: string
     level?: number
@@ -39,16 +39,21 @@ export interface ICommandLineRendererProps {
 
 interface State {
     focused: boolean
+    waiting: boolean
 }
 
 class CommandLine extends React.PureComponent<ICommandLineRendererProps, State> {
     public state = {
         focused: false,
+        waiting: true,
     }
+    private timer: any
     private _inputElement: HTMLInputElement
 
-    public handleChange(e: React.ChangeEvent<HTMLInputElement>) {
-        // UI.Actions.setCommandLinePosition(1, 1)
+    public componentDidMount() {
+        this.timer = setTimeout(() => {
+            this.setState({ waiting: false })
+        }, 200)
     }
 
     public componentWillReceiveProps(nextProps: ICommandLineRendererProps) {
@@ -57,28 +62,38 @@ class CommandLine extends React.PureComponent<ICommandLineRendererProps, State>
         }
     }
 
+    public componentWillUnmount() {
+        clearTimeout(this.timer)
+    }
+
     public render(): null | JSX.Element {
-        if (!this.state.focused && this.props.visible && this._inputElement) {
+        const { visible } = this.props
+        const { focused, waiting } = this.state
+        if (!focused && visible && this._inputElement) {
             this._inputElement.focus()
         }
 
         return (
-            this.props.visible && (
+            !waiting &&
+            visible && (
                 <CommandLineBox>
                     <CommandLineInput
                         onChange={this.handleChange}
                         innerRef={e => (this._inputElement = e)}
-                        value={this.props.firstchar + this.props.content[0][1]}
+                        value={this.props.firstchar + this.props.content}
                     />
                 </CommandLineBox>
             )
         )
     }
+    private handleChange(e: React.ChangeEvent<HTMLInputElement>) {
+        // UI.Actions.setCommandLinePosition(1, 1)
+    }
 }
 
 const mapStateToProps = ({
-    commandLine: { visible, position, content, firstchar, level } }: State.IState,
-) => ({
+    commandLine: { visible, position, content, firstchar, level },
+}: State.IState) => ({
     visible,
     content,
     firstchar,
diff --git a/browser/src/UI/components/ExternalMenus.tsx b/browser/src/UI/components/ExternalMenus.tsx
index 2ae9d0d866..35bdc25c9d 100644
--- a/browser/src/UI/components/ExternalMenus.tsx
+++ b/browser/src/UI/components/ExternalMenus.tsx
@@ -2,9 +2,11 @@ import * as React from "react"
 import * as ReactDOM from "react-dom"
 import { connect } from "react-redux"
 import styled from "styled-components"
+
 import * as State from "./../../Editor/NeovimEditor/NeovimEditorStore"
+import { withProps } from "./common"
 
-const MenuContainer = styled.div`
+const MenuContainer = withProps<{ loaded: boolean }>(styled.div)`
     position: absolute;
     box-sizing: border-box;
     display: flex;
@@ -15,7 +17,8 @@ const MenuContainer = styled.div`
     left: 0px;
     bottom: 0px;
     right: 0px;
-    background-color: rgba(0, 0, 0, 0.25);
+    ${p => p.loaded && `background-color: rgba(0, 0, 0, 0.25)`};
+    transition: background-color 0.2s ease-in;
 `
 
 interface Props {
@@ -24,7 +27,8 @@ interface Props {
 }
 
 class ExternalMenus extends React.Component<Props> {
-    constructor(props: Props, private stackLayer: HTMLDivElement) {
+
+    public constructor(props: Props, private stackLayer: HTMLDivElement) {
         super(props)
 
         this.stackLayer = document.querySelector(".stack .layer")
@@ -35,7 +39,7 @@ class ExternalMenus extends React.Component<Props> {
         const visible = commandLine.visible || wildmenu.visible
         return (
             visible && ReactDOM.createPortal(
-                <MenuContainer>
+                <MenuContainer loaded={commandLine.visible && wildmenu.visible}>
                     {this.props.children}
                 </MenuContainer>,
                 this.stackLayer,

From d22090f061b636ce6215b058c1392e99a6c841bb Mon Sep 17 00:00:00 2001
From: Akin909 <akin.sowemimo@gmail.com>
Date: Sun, 24 Dec 2017 21:01:58 +0000
Subject: [PATCH 10/29] revert changes to neovim surface

---
 .../src/Editor/NeovimEditor/NeovimSurface.tsx | 90 +++++++++----------
 1 file changed, 42 insertions(+), 48 deletions(-)

diff --git a/browser/src/Editor/NeovimEditor/NeovimSurface.tsx b/browser/src/Editor/NeovimEditor/NeovimSurface.tsx
index 5ac9a62c52..5e29d406f8 100644
--- a/browser/src/Editor/NeovimEditor/NeovimSurface.tsx
+++ b/browser/src/Editor/NeovimEditor/NeovimSurface.tsx
@@ -52,56 +52,50 @@ export interface INeovimSurfaceProps {
 
 export class NeovimSurface extends React.PureComponent<INeovimSurfaceProps, {}> {
     public render(): JSX.Element {
-        return (
-            <div className="container vertical full">
-                <div className="container fixed">
-                    <TabsContainer
-                        onBufferSelect={this.props.onBufferSelect}
-                        onBufferClose={this.props.onBufferClose}
-                        onTabClose={this.props.onTabClose}
-                        onTabSelect={this.props.onTabSelect}
-                    />
-                </div>
-                <div className="container full">
-                    <div className="stack">
-                        <NeovimRenderer
-                            renderer={this.props.renderer}
-                            neovimInstance={this.props.neovimInstance}
-                            screen={this.props.screen}
-                        />
-                    </div>
-                    <div className="stack layer">
-                        <ExternalMenus>
-                            <CommandLine />
-                            <WildMenu />
-                        </ExternalMenus>
-                        <TypingPrediction typingPrediction={this.props.typingPrediction} />
-                        <Cursor typingPrediction={this.props.typingPrediction} />
-                        <CursorLine lineType={"line"} />
-                        <CursorLine lineType={"column"} />
-                        <NeovimActiveWindowContainer>
-                            <DefinitionContainer />
-                            <ErrorsContainer />
-                            <BufferScrollBarContainer />
-                        </NeovimActiveWindowContainer>
-                    </div>
-                    <NeovimInput
-                        onActivate={this.props.onActivate}
-                        typingPrediction={this.props.typingPrediction}
+        return <div className="container vertical full">
+            <div className="container fixed">
+                <TabsContainer
+                    onBufferSelect={this.props.onBufferSelect}
+                    onBufferClose={this.props.onBufferClose}
+                    onTabClose={this.props.onTabClose}
+                    onTabSelect={this.props.onTabSelect}/>
+            </div>
+            <div className="container full">
+                <ExternalMenus>
+                    <CommandLine />
+                    <WildMenu />
+                </ExternalMenus>
+                <div className="stack">
+                    <NeovimRenderer renderer={this.props.renderer}
                         neovimInstance={this.props.neovimInstance}
-                        screen={this.props.screen}
-                        onBounceStart={this.props.onBounceStart}
-                        onBounceEnd={this.props.onBounceEnd}
-                        onImeStart={this.props.onImeStart}
-                        onImeEnd={this.props.onImeEnd}
-                        onKeyDown={this.props.onKeyDown}
-                    />
-                    <div className="stack layer">
-                        <ToolTips />
-                    </div>
-                    <InstallHelp />
+                        screen={this.props.screen} />
+                </div>
+                <div className="stack layer">
+                    <TypingPrediction typingPrediction={this.props.typingPrediction}/>
+                    <Cursor typingPrediction={this.props.typingPrediction}/>
+                    <CursorLine lineType={"line"} />
+                    <CursorLine lineType={"column"} />
+                    <NeovimActiveWindowContainer>
+                        <DefinitionContainer />
+                        <ErrorsContainer />
+                        <BufferScrollBarContainer />
+                    </NeovimActiveWindowContainer>
+                </div>
+                <NeovimInput
+                    onActivate={this.props.onActivate}
+                    typingPrediction={this.props.typingPrediction}
+                    neovimInstance={this.props.neovimInstance}
+                    screen={this.props.screen}
+                    onBounceStart={this.props.onBounceStart}
+                    onBounceEnd={this.props.onBounceEnd}
+                    onImeStart={this.props.onImeStart}
+                    onImeEnd={this.props.onImeEnd}
+                    onKeyDown={this.props.onKeyDown}/>
+                <div className="stack layer">
+                    <ToolTips />
                 </div>
+                <InstallHelp />
             </div>
-        )
+        </div>
     }
 }

From 21c3c0a2e9185f0998c26d46054fb3a20d65aa41 Mon Sep 17 00:00:00 2001
From: Akin909 <akin.sowemimo@gmail.com>
Date: Sun, 24 Dec 2017 21:37:14 +0000
Subject: [PATCH 11/29] wire up setcursor actions

---
 browser/src/Editor/NeovimEditor/NeovimEditor.tsx       |  4 ++++
 browser/src/Editor/NeovimEditor/NeovimEditorActions.ts | 10 ++++++++--
 browser/src/Editor/NeovimEditor/NeovimEditorReducer.ts |  6 +++++-
 3 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/browser/src/Editor/NeovimEditor/NeovimEditor.tsx b/browser/src/Editor/NeovimEditor/NeovimEditor.tsx
index 86d1094e3b..2551034266 100644
--- a/browser/src/Editor/NeovimEditor/NeovimEditor.tsx
+++ b/browser/src/Editor/NeovimEditor/NeovimEditor.tsx
@@ -220,6 +220,10 @@ export class NeovimEditor extends Editor implements IEditor {
             this._actions.hideCommandLine()
         })
 
+        this._neovimInstance.onCommandLineSetCursorPosition.subscribe(commandLinePos => {
+            this._actions.setCommandLinePosition(commandLinePos)
+        })
+
         this._windowManager.onWindowStateChanged.subscribe((tabPageState) => {
 
             const inactiveIds = tabPageState.inactiveWindows.map((w) => w.windowNumber)
diff --git a/browser/src/Editor/NeovimEditor/NeovimEditorActions.ts b/browser/src/Editor/NeovimEditor/NeovimEditorActions.ts
index 519b79531a..7d2ce04376 100644
--- a/browser/src/Editor/NeovimEditor/NeovimEditorActions.ts
+++ b/browser/src/Editor/NeovimEditor/NeovimEditorActions.ts
@@ -332,7 +332,13 @@ export const setColors = (colors: IThemeColors) => ({
     },
 })
 
-export const setCommandLinePosition = (position: number, level: number) => ({
+export const setCommandLinePosition = ({
+    pos: position,
+    level,
+    }: {
+        pos: number,
+        level: number,
+    }) => ({
     type: "SET_COMMAND_LINE_POSITION",
     payload: {
         position,
@@ -355,7 +361,7 @@ export const showCommandLine = (
     type: "SHOW_COMMAND_LINE",
     payload: {
         content,
-        pos,
+        position: pos,
         firstchar,
         prompt,
         indent,
diff --git a/browser/src/Editor/NeovimEditor/NeovimEditorReducer.ts b/browser/src/Editor/NeovimEditor/NeovimEditorReducer.ts
index 8e14c2a275..ddf862fff0 100644
--- a/browser/src/Editor/NeovimEditor/NeovimEditorReducer.ts
+++ b/browser/src/Editor/NeovimEditor/NeovimEditorReducer.ts
@@ -131,7 +131,11 @@ export function reducer<K extends keyof IConfigurationValues>(s: State.IState, a
         case "SET_COMMAND_LINE_POSITION":
             return {
                 ...s,
-                commandLine :  {...s.commandLine, position: a.payload.position},
+                commandLine :  {
+                    ...s.commandLine,
+                    position: a.payload.position,
+                    level: a.payload.level,
+                },
             }
         default:
             return {

From 8f59329ccb5a3e7d3d140ee695c6ca3908d49918 Mon Sep 17 00:00:00 2001
From: Akin909 <akin.sowemimo@gmail.com>
Date: Sun, 24 Dec 2017 22:53:29 +0000
Subject: [PATCH 12/29] Add a cursor to commandline

---
 browser/src/UI/components/CommandLine.tsx | 44 +++++++++++------------
 1 file changed, 22 insertions(+), 22 deletions(-)

diff --git a/browser/src/UI/components/CommandLine.tsx b/browser/src/UI/components/CommandLine.tsx
index 0c629a2d95..e5ad814d22 100644
--- a/browser/src/UI/components/CommandLine.tsx
+++ b/browser/src/UI/components/CommandLine.tsx
@@ -18,7 +18,8 @@ const CommandLineBox = styled.div`
     animation: ${fadeInAndDown} 0.08s ease-in;
     box-sizing: border-box;
 `
-const CommandLineInput = styled.input`
+const CommandLineOutput = styled.div`
+    position: relative;
     border: 0px;
     background-color: rgba(0, 0, 0, 0.2);
     font-size: 1.1em;
@@ -29,6 +30,14 @@ const CommandLineInput = styled.input`
     color: white;
 `
 
+const Cursor = styled.span`
+  background-color: white;
+  width: 2px;
+  position: absolute;
+  top: 8px;
+  height: 60%;
+`
+
 export interface ICommandLineRendererProps {
     visible: boolean
     content: string
@@ -38,13 +47,11 @@ export interface ICommandLineRendererProps {
 }
 
 interface State {
-    focused: boolean
     waiting: boolean
 }
 
 class CommandLine extends React.PureComponent<ICommandLineRendererProps, State> {
     public state = {
-        focused: false,
         waiting: true,
     }
     private timer: any
@@ -56,39 +63,32 @@ class CommandLine extends React.PureComponent<ICommandLineRendererProps, State>
         }, 200)
     }
 
-    public componentWillReceiveProps(nextProps: ICommandLineRendererProps) {
-        if (!this.state.focused && nextProps.visible) {
-            this.setState({ focused: true })
-        }
-    }
-
     public componentWillUnmount() {
         clearTimeout(this.timer)
     }
 
     public render(): null | JSX.Element {
-        const { visible } = this.props
-        const { focused, waiting } = this.state
-        if (!focused && visible && this._inputElement) {
-            this._inputElement.focus()
-        }
+        const { visible, content, position } = this.props
+        const {  waiting } = this.state
+
+        const stringArray = content.split("")
+        const beginning = stringArray.slice(0, position)
+        const end = stringArray.slice(position)
 
         return (
             !waiting &&
             visible && (
                 <CommandLineBox>
-                    <CommandLineInput
-                        onChange={this.handleChange}
-                        innerRef={e => (this._inputElement = e)}
-                        value={this.props.firstchar + this.props.content}
-                    />
+                    <CommandLineOutput innerRef={e => (this._inputElement = e)}>
+                        {this.props.firstchar}
+                        {beginning}
+                        <Cursor />
+                        {end}
+                    </CommandLineOutput>
                 </CommandLineBox>
             )
         )
     }
-    private handleChange(e: React.ChangeEvent<HTMLInputElement>) {
-        // UI.Actions.setCommandLinePosition(1, 1)
-    }
 }
 
 const mapStateToProps = ({

From 627bae0062cf54573afb84a1e9c4d5b9de3f5935 Mon Sep 17 00:00:00 2001
From: Akin909 <akin.sowemimo@gmail.com>
Date: Sun, 24 Dec 2017 22:54:14 +0000
Subject: [PATCH 13/29] Remove excess space

---
 browser/src/UI/components/CommandLine.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/browser/src/UI/components/CommandLine.tsx b/browser/src/UI/components/CommandLine.tsx
index e5ad814d22..6c2edf6a00 100644
--- a/browser/src/UI/components/CommandLine.tsx
+++ b/browser/src/UI/components/CommandLine.tsx
@@ -69,7 +69,7 @@ class CommandLine extends React.PureComponent<ICommandLineRendererProps, State>
 
     public render(): null | JSX.Element {
         const { visible, content, position } = this.props
-        const {  waiting } = this.state
+        const { waiting } = this.state
 
         const stringArray = content.split("")
         const beginning = stringArray.slice(0, position)

From 4c7b9028e26274c9bfdd29fc7428770994a96832 Mon Sep 17 00:00:00 2001
From: Akin909 <akin.sowemimo@gmail.com>
Date: Sun, 24 Dec 2017 22:55:12 +0000
Subject: [PATCH 14/29] Remove refs from commandline components

---
 browser/src/UI/components/CommandLine.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/browser/src/UI/components/CommandLine.tsx b/browser/src/UI/components/CommandLine.tsx
index 6c2edf6a00..6e4e2a8fa9 100644
--- a/browser/src/UI/components/CommandLine.tsx
+++ b/browser/src/UI/components/CommandLine.tsx
@@ -55,7 +55,6 @@ class CommandLine extends React.PureComponent<ICommandLineRendererProps, State>
         waiting: true,
     }
     private timer: any
-    private _inputElement: HTMLInputElement
 
     public componentDidMount() {
         this.timer = setTimeout(() => {
@@ -79,7 +78,7 @@ class CommandLine extends React.PureComponent<ICommandLineRendererProps, State>
             !waiting &&
             visible && (
                 <CommandLineBox>
-                    <CommandLineOutput innerRef={e => (this._inputElement = e)}>
+                    <CommandLineOutput>
                         {this.props.firstchar}
                         {beginning}
                         <Cursor />

From 909c72bc531f57d3671e6419d2912b28bd2574cc Mon Sep 17 00:00:00 2001
From: Akin909 <akin.sowemimo@gmail.com>
Date: Sun, 24 Dec 2017 23:00:08 +0000
Subject: [PATCH 15/29] re-add focus as this is essential for functionality

---
 browser/src/UI/components/CommandLine.tsx | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/browser/src/UI/components/CommandLine.tsx b/browser/src/UI/components/CommandLine.tsx
index 6e4e2a8fa9..c3af453764 100644
--- a/browser/src/UI/components/CommandLine.tsx
+++ b/browser/src/UI/components/CommandLine.tsx
@@ -47,14 +47,17 @@ export interface ICommandLineRendererProps {
 }
 
 interface State {
+    focused: boolean
     waiting: boolean
 }
 
 class CommandLine extends React.PureComponent<ICommandLineRendererProps, State> {
     public state = {
+        focused: false,
         waiting: true,
     }
     private timer: any
+    private _inputElement: HTMLInputElement
 
     public componentDidMount() {
         this.timer = setTimeout(() => {
@@ -62,13 +65,22 @@ class CommandLine extends React.PureComponent<ICommandLineRendererProps, State>
         }, 200)
     }
 
+    public componentWillReceiveProps(nextProps: ICommandLineRendererProps) {
+        if (!this.state.focused && nextProps.visible) {
+            this.setState({ focused: true })
+        }
+    }
+
     public componentWillUnmount() {
         clearTimeout(this.timer)
     }
 
     public render(): null | JSX.Element {
         const { visible, content, position } = this.props
-        const { waiting } = this.state
+        const { focused, waiting } = this.state
+        if (!focused && visible && this._inputElement) {
+            this._inputElement.focus()
+        }
 
         const stringArray = content.split("")
         const beginning = stringArray.slice(0, position)
@@ -78,7 +90,7 @@ class CommandLine extends React.PureComponent<ICommandLineRendererProps, State>
             !waiting &&
             visible && (
                 <CommandLineBox>
-                    <CommandLineOutput>
+                    <CommandLineOutput innerRef={e => (this._inputElement = e)}>
                         {this.props.firstchar}
                         {beginning}
                         <Cursor />

From 02533bee36b05a2756e391392f46b494206757b0 Mon Sep 17 00:00:00 2001
From: Akin909 <akin.sowemimo@gmail.com>
Date: Sun, 24 Dec 2017 23:50:16 +0000
Subject: [PATCH 16/29] important: fix html trimming whitespace bug

using whitespace: pre-wrap from one of see
facebook/react#4134
html auto removes trailing white space breaking
the cursor's position functionality
---
 browser/src/UI/components/CommandLine.tsx | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/browser/src/UI/components/CommandLine.tsx b/browser/src/UI/components/CommandLine.tsx
index c3af453764..673cc6beae 100644
--- a/browser/src/UI/components/CommandLine.tsx
+++ b/browser/src/UI/components/CommandLine.tsx
@@ -19,6 +19,8 @@ const CommandLineBox = styled.div`
     box-sizing: border-box;
 `
 const CommandLineOutput = styled.div`
+    /* The next line is CRUCIAL to render white-space correctly */
+    white-space: pre-wrap;
     position: relative;
     border: 0px;
     background-color: rgba(0, 0, 0, 0.2);
@@ -31,11 +33,11 @@ const CommandLineOutput = styled.div`
 `
 
 const Cursor = styled.span`
-  background-color: white;
-  width: 2px;
-  position: absolute;
-  top: 8px;
-  height: 60%;
+    background-color: white;
+    width: 2px;
+    position: absolute;
+    top: 8px;
+    height: 60%;
 `
 
 export interface ICommandLineRendererProps {
@@ -82,9 +84,9 @@ class CommandLine extends React.PureComponent<ICommandLineRendererProps, State>
             this._inputElement.focus()
         }
 
-        const stringArray = content.split("")
-        const beginning = stringArray.slice(0, position)
-        const end = stringArray.slice(position)
+        const segments = content.split("")
+        const beginning = segments.slice(0, position)
+        const end = segments.slice(position)
 
         return (
             !waiting &&

From 38a4f39b785e177e65e0f4c24b735703c4e641ce Mon Sep 17 00:00:00 2001
From: Akin909 <akin.sowemimo@gmail.com>
Date: Mon, 25 Dec 2017 00:09:43 +0000
Subject: [PATCH 17/29] add in the prompt segment

---
 browser/src/UI/components/CommandLine.tsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/browser/src/UI/components/CommandLine.tsx b/browser/src/UI/components/CommandLine.tsx
index 673cc6beae..2c437e72dc 100644
--- a/browser/src/UI/components/CommandLine.tsx
+++ b/browser/src/UI/components/CommandLine.tsx
@@ -45,7 +45,8 @@ export interface ICommandLineRendererProps {
     content: string
     position: number
     firstchar: string
-    level?: number
+    level: number
+    prompt: string
 }
 
 interface State {
@@ -94,6 +95,7 @@ class CommandLine extends React.PureComponent<ICommandLineRendererProps, State>
                 <CommandLineBox>
                     <CommandLineOutput innerRef={e => (this._inputElement = e)}>
                         {this.props.firstchar}
+                        {this.props.prompt}
                         {beginning}
                         <Cursor />
                         {end}
@@ -105,13 +107,14 @@ class CommandLine extends React.PureComponent<ICommandLineRendererProps, State>
 }
 
 const mapStateToProps = ({
-    commandLine: { visible, position, content, firstchar, level },
+    commandLine: { visible, position, content, firstchar, level, prompt },
 }: State.IState) => ({
     visible,
     content,
     firstchar,
     position,
     level,
+    prompt,
 })
 
 export default connect<ICommandLineRendererProps>(mapStateToProps)(CommandLine)

From 207e3eb1eb28bdfb3afe21cf04c7bf0c5d656765 Mon Sep 17 00:00:00 2001
From: Akin909 <akin.sowemimo@gmail.com>
Date: Mon, 25 Dec 2017 00:54:57 +0000
Subject: [PATCH 18/29] fix overflow styling

---
 browser/src/UI/components/CommandLine.tsx | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/browser/src/UI/components/CommandLine.tsx b/browser/src/UI/components/CommandLine.tsx
index 2c437e72dc..52cef6b158 100644
--- a/browser/src/UI/components/CommandLine.tsx
+++ b/browser/src/UI/components/CommandLine.tsx
@@ -12,7 +12,6 @@ const CommandLineBox = styled.div`
     margin-top: 16px;
     padding: 8px;
     width: 75%;
-    max-width: 900px;
     background-color: ${p => p.theme["menu.background"]};
     ${boxShadow};
     animation: ${fadeInAndDown} 0.08s ease-in;
@@ -20,9 +19,10 @@ const CommandLineBox = styled.div`
 `
 const CommandLineOutput = styled.div`
     /* The next line is CRUCIAL to render white-space correctly */
-    white-space: pre-wrap;
+    white-space: pre;
     position: relative;
     border: 0px;
+    overflow-x: hidden;
     background-color: rgba(0, 0, 0, 0.2);
     font-size: 1.1em;
     box-sizing: border-box;
@@ -30,6 +30,14 @@ const CommandLineOutput = styled.div`
     padding: 8px;
     outline: none;
     color: white;
+
+    &:hover {
+        overflow-x: auto;
+    }
+
+    &::-webkit-scrollbar {
+        height: 3px;
+    }
 `
 
 const Cursor = styled.span`

From 1de13c0bdb945f93de3e988e9a0088fb31b32bde Mon Sep 17 00:00:00 2001
From: Akin909 <akin.sowemimo@gmail.com>
Date: Mon, 25 Dec 2017 01:05:18 +0000
Subject: [PATCH 19/29] add pointer events but not selection

---
 browser/src/UI/components/CommandLine.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/browser/src/UI/components/CommandLine.tsx b/browser/src/UI/components/CommandLine.tsx
index 52cef6b158..80798abf66 100644
--- a/browser/src/UI/components/CommandLine.tsx
+++ b/browser/src/UI/components/CommandLine.tsx
@@ -30,6 +30,8 @@ const CommandLineOutput = styled.div`
     padding: 8px;
     outline: none;
     color: white;
+    user-select: none;
+    pointer-events: all;
 
     &:hover {
         overflow-x: auto;

From 66deb2ffc26e58451522bd1c54dc58bed19fb637 Mon Sep 17 00:00:00 2001
From: Akin909 <akin.sowemimo@gmail.com>
Date: Mon, 25 Dec 2017 13:34:10 +0000
Subject: [PATCH 20/29] Add overflow handling for command line

---
 browser/src/UI/components/CommandLine.tsx | 19 +++++--------------
 1 file changed, 5 insertions(+), 14 deletions(-)

diff --git a/browser/src/UI/components/CommandLine.tsx b/browser/src/UI/components/CommandLine.tsx
index 80798abf66..9136872ddc 100644
--- a/browser/src/UI/components/CommandLine.tsx
+++ b/browser/src/UI/components/CommandLine.tsx
@@ -16,38 +16,29 @@ const CommandLineBox = styled.div`
     ${boxShadow};
     animation: ${fadeInAndDown} 0.08s ease-in;
     box-sizing: border-box;
+    overflow-wrap: break-word;
 `
 const CommandLineOutput = styled.div`
     /* The next line is CRUCIAL to render white-space correctly */
-    white-space: pre;
+    white-space: pre-wrap;
     position: relative;
     border: 0px;
-    overflow-x: hidden;
     background-color: rgba(0, 0, 0, 0.2);
     font-size: 1.1em;
     box-sizing: border-box;
     width: 100%;
+    height: auto;
     padding: 8px;
     outline: none;
     color: white;
-    user-select: none;
-    pointer-events: all;
-
-    &:hover {
-        overflow-x: auto;
-    }
-
-    &::-webkit-scrollbar {
-        height: 3px;
-    }
 `
 
 const Cursor = styled.span`
     background-color: white;
     width: 2px;
     position: absolute;
-    top: 8px;
-    height: 60%;
+    bottom: 4px;
+    height: 1.3em;
 `
 
 export interface ICommandLineRendererProps {

From 07889c73f6872c5dd761c6abf9f96ad7ca913e5e Mon Sep 17 00:00:00 2001
From: Akin909 <akin.sowemimo@gmail.com>
Date: Mon, 25 Dec 2017 16:47:15 +0000
Subject: [PATCH 21/29] minor change to comment position

---
 browser/src/UI/components/CommandLine.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/browser/src/UI/components/CommandLine.tsx b/browser/src/UI/components/CommandLine.tsx
index 9136872ddc..eecc142389 100644
--- a/browser/src/UI/components/CommandLine.tsx
+++ b/browser/src/UI/components/CommandLine.tsx
@@ -19,8 +19,7 @@ const CommandLineBox = styled.div`
     overflow-wrap: break-word;
 `
 const CommandLineOutput = styled.div`
-    /* The next line is CRUCIAL to render white-space correctly */
-    white-space: pre-wrap;
+    white-space: pre-wrap; /* CRUCIAL to render white-space correctly */
     position: relative;
     border: 0px;
     background-color: rgba(0, 0, 0, 0.2);

From 252a0877e2339ab00737c54fc7e37eeb702a8406 Mon Sep 17 00:00:00 2001
From: Akin909 <akin.sowemimo@gmail.com>
Date: Tue, 26 Dec 2017 03:33:11 +0000
Subject: [PATCH 22/29] adjust cursor position

---
 browser/src/UI/components/CommandLine.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/browser/src/UI/components/CommandLine.tsx b/browser/src/UI/components/CommandLine.tsx
index eecc142389..11414462d8 100644
--- a/browser/src/UI/components/CommandLine.tsx
+++ b/browser/src/UI/components/CommandLine.tsx
@@ -36,7 +36,7 @@ const Cursor = styled.span`
     background-color: white;
     width: 2px;
     position: absolute;
-    bottom: 4px;
+    bottom: 6px;
     height: 1.3em;
 `
 

From e8d1a1d1d8870008b9cbc1ed277de36cd0bf8ff0 Mon Sep 17 00:00:00 2001
From: Akin909 <akin.sowemimo@gmail.com>
Date: Tue, 26 Dec 2017 14:16:45 +0000
Subject: [PATCH 23/29] re-add missing max width to ensure commandline and wild
 menu have same width

---
 browser/src/UI/components/CommandLine.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/browser/src/UI/components/CommandLine.tsx b/browser/src/UI/components/CommandLine.tsx
index 11414462d8..c8e1b1ef77 100644
--- a/browser/src/UI/components/CommandLine.tsx
+++ b/browser/src/UI/components/CommandLine.tsx
@@ -12,6 +12,7 @@ const CommandLineBox = styled.div`
     margin-top: 16px;
     padding: 8px;
     width: 75%;
+    max-width: 900px;
     background-color: ${p => p.theme["menu.background"]};
     ${boxShadow};
     animation: ${fadeInAndDown} 0.08s ease-in;

From d2104c4b4164a42de52d557c099c4e8ce256eb88 Mon Sep 17 00:00:00 2001
From: Akin909 <akin.sowemimo@gmail.com>
Date: Tue, 26 Dec 2017 14:53:51 +0000
Subject: [PATCH 24/29] re-arrange css to rerun tests

---
 browser/src/UI/components/CommandLine.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/browser/src/UI/components/CommandLine.tsx b/browser/src/UI/components/CommandLine.tsx
index c8e1b1ef77..fd0e858412 100644
--- a/browser/src/UI/components/CommandLine.tsx
+++ b/browser/src/UI/components/CommandLine.tsx
@@ -11,13 +11,13 @@ const CommandLineBox = styled.div`
     position: relative;
     margin-top: 16px;
     padding: 8px;
-    width: 75%;
-    max-width: 900px;
     background-color: ${p => p.theme["menu.background"]};
     ${boxShadow};
     animation: ${fadeInAndDown} 0.08s ease-in;
     box-sizing: border-box;
     overflow-wrap: break-word;
+    width: 75%;
+    max-width: 900px;
 `
 const CommandLineOutput = styled.div`
     white-space: pre-wrap; /* CRUCIAL to render white-space correctly */

From 953064089547987bfb4a991e239cd101b808b29a Mon Sep 17 00:00:00 2001
From: Akin909 <akin.sowemimo@gmail.com>
Date: Tue, 26 Dec 2017 15:51:51 +0000
Subject: [PATCH 25/29] re-arrange css again..

---
 browser/src/UI/components/CommandLine.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/browser/src/UI/components/CommandLine.tsx b/browser/src/UI/components/CommandLine.tsx
index fd0e858412..c8e1b1ef77 100644
--- a/browser/src/UI/components/CommandLine.tsx
+++ b/browser/src/UI/components/CommandLine.tsx
@@ -11,13 +11,13 @@ const CommandLineBox = styled.div`
     position: relative;
     margin-top: 16px;
     padding: 8px;
+    width: 75%;
+    max-width: 900px;
     background-color: ${p => p.theme["menu.background"]};
     ${boxShadow};
     animation: ${fadeInAndDown} 0.08s ease-in;
     box-sizing: border-box;
     overflow-wrap: break-word;
-    width: 75%;
-    max-width: 900px;
 `
 const CommandLineOutput = styled.div`
     white-space: pre-wrap; /* CRUCIAL to render white-space correctly */

From 059ec25cab9bf010f6e78989670d2e7b83061ab4 Mon Sep 17 00:00:00 2001
From: Akin909 <akin.sowemimo@gmail.com>
Date: Wed, 3 Jan 2018 22:22:08 +0000
Subject: [PATCH 26/29] reduce timeout to 80ms

---
 browser/src/UI/components/CommandLine.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/browser/src/UI/components/CommandLine.tsx b/browser/src/UI/components/CommandLine.tsx
index c8e1b1ef77..23e6bad3d8 100644
--- a/browser/src/UI/components/CommandLine.tsx
+++ b/browser/src/UI/components/CommandLine.tsx
@@ -66,7 +66,7 @@ class CommandLine extends React.PureComponent<ICommandLineRendererProps, State>
     public componentDidMount() {
         this.timer = setTimeout(() => {
             this.setState({ waiting: false })
-        }, 200)
+        }, 80)
     }
 
     public componentWillReceiveProps(nextProps: ICommandLineRendererProps) {

From 189ee2b9b2923e8bfff65980d3b6e06033897b1a Mon Sep 17 00:00:00 2001
From: Akin909 <akin.sowemimo@gmail.com>
Date: Wed, 3 Jan 2018 23:54:39 +0000
Subject: [PATCH 27/29] Add spurious CR to rerun test

---
 browser/src/UI/components/CommandLine.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/browser/src/UI/components/CommandLine.tsx b/browser/src/UI/components/CommandLine.tsx
index 23e6bad3d8..22ad28caf2 100644
--- a/browser/src/UI/components/CommandLine.tsx
+++ b/browser/src/UI/components/CommandLine.tsx
@@ -60,6 +60,7 @@ class CommandLine extends React.PureComponent<ICommandLineRendererProps, State>
         focused: false,
         waiting: true,
     }
+
     private timer: any
     private _inputElement: HTMLInputElement
 

From 95552003dc8ffcc21305a9d6baf203251589c6a4 Mon Sep 17 00:00:00 2001
From: Akin909 <akin.sowemimo@gmail.com>
Date: Thu, 4 Jan 2018 21:06:57 +0000
Subject: [PATCH 28/29] Add icons to replace the first character

---
 browser/src/UI/components/CommandLine.tsx | 49 ++++++++++++++++++++++-
 1 file changed, 47 insertions(+), 2 deletions(-)

diff --git a/browser/src/UI/components/CommandLine.tsx b/browser/src/UI/components/CommandLine.tsx
index 22ad28caf2..7abf380a9d 100644
--- a/browser/src/UI/components/CommandLine.tsx
+++ b/browser/src/UI/components/CommandLine.tsx
@@ -2,6 +2,7 @@ import * as React from "react"
 import { connect } from "react-redux"
 import styled from "styled-components"
 
+import { Icon } from "./../../UI/Icon"
 import { fadeInAndDown } from "./animations"
 import { boxShadow } from "./common"
 
@@ -41,6 +42,15 @@ const Cursor = styled.span`
     height: 1.3em;
 `
 
+const IconContainer = styled.span`
+    margin-right: 0.5em;
+`
+
+const ArrowContainer = styled.span`
+    font-size: 0.7em;
+    margin-right: 0.6em;
+`
+
 export interface ICommandLineRendererProps {
     visible: boolean
     content: string
@@ -55,6 +65,18 @@ interface State {
     waiting: boolean
 }
 
+const CommandLineIcon = (props: { iconName: string; arrow?: boolean }) => (
+    <span>
+        {!props.arrow ? (
+            <Icon name={props.iconName} />
+        ) : (
+            <ArrowContainer>
+                <Icon name={props.iconName} />
+            </ArrowContainer>
+        )}
+    </span>
+)
+
 class CommandLine extends React.PureComponent<ICommandLineRendererProps, State> {
     public state = {
         focused: false,
@@ -76,12 +98,35 @@ class CommandLine extends React.PureComponent<ICommandLineRendererProps, State>
         }
     }
 
+    public renderIconOrChar(character: string) {
+        switch (character) {
+            case "/":
+                return [
+                    <CommandLineIcon iconName="search" />,
+                    <CommandLineIcon arrow iconName="arrow-right" />,
+                ]
+            case ":":
+                return (
+                    <IconContainer>
+                        <CommandLineIcon iconName="file-code-o" />
+                    </IconContainer>
+                )
+            case "?":
+                return [
+                    <CommandLineIcon iconName="search" />,
+                    <CommandLineIcon arrow iconName="arrow-left" />,
+                ]
+            default:
+                return character
+        }
+    }
+
     public componentWillUnmount() {
         clearTimeout(this.timer)
     }
 
     public render(): null | JSX.Element {
-        const { visible, content, position } = this.props
+        const { visible, content, position, firstchar } = this.props
         const { focused, waiting } = this.state
         if (!focused && visible && this._inputElement) {
             this._inputElement.focus()
@@ -96,7 +141,7 @@ class CommandLine extends React.PureComponent<ICommandLineRendererProps, State>
             visible && (
                 <CommandLineBox>
                     <CommandLineOutput innerRef={e => (this._inputElement = e)}>
-                        {this.props.firstchar}
+                        {this.renderIconOrChar(firstchar)}
                         {this.props.prompt}
                         {beginning}
                         <Cursor />

From 0cec01a7a8c48c3070588b302702ced914611eb1 Mon Sep 17 00:00:00 2001
From: Akin909 <akin.sowemimo@gmail.com>
Date: Thu, 4 Jan 2018 21:15:25 +0000
Subject: [PATCH 29/29] Add configuration to show and hide icons

---
 .../Configuration/DefaultConfiguration.ts     |  1 +
 .../Configuration/IConfigurationValues.ts     |  2 ++
 browser/src/UI/components/CommandLine.tsx     | 26 ++++++++++++-------
 3 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/browser/src/Services/Configuration/DefaultConfiguration.ts b/browser/src/Services/Configuration/DefaultConfiguration.ts
index 87066c882f..249edf647a 100644
--- a/browser/src/Services/Configuration/DefaultConfiguration.ts
+++ b/browser/src/Services/Configuration/DefaultConfiguration.ts
@@ -34,6 +34,7 @@ const BaseConfiguration: IConfigurationValues = {
 
     "experimental.editor.textMateHighlighting.enabled": false,
     "experimental.commandline.mode": false,
+    "experimental.commandline.icons": false,
     "experimental.wildmenu.mode": false,
 
     "experimental.neovim.transport": "stdio",
diff --git a/browser/src/Services/Configuration/IConfigurationValues.ts b/browser/src/Services/Configuration/IConfigurationValues.ts
index 260d7e5700..19b7e3a2a5 100644
--- a/browser/src/Services/Configuration/IConfigurationValues.ts
+++ b/browser/src/Services/Configuration/IConfigurationValues.ts
@@ -47,6 +47,8 @@ export interface IConfigurationValues {
     // The transport to use for Neovim
     // Valid values are "stdio" and "pipe"
     "experimental.neovim.transport": string
+    "experimental.commandline.mode": boolean,
+    "experimental.commandline.icons": boolean,
 
     "autoClosingPairs.enabled": boolean
     "autoClosingPairs.default": any
diff --git a/browser/src/UI/components/CommandLine.tsx b/browser/src/UI/components/CommandLine.tsx
index 7abf380a9d..b198f2a29f 100644
--- a/browser/src/UI/components/CommandLine.tsx
+++ b/browser/src/UI/components/CommandLine.tsx
@@ -52,6 +52,7 @@ const ArrowContainer = styled.span`
 `
 
 export interface ICommandLineRendererProps {
+    showIcons: boolean
     visible: boolean
     content: string
     position: number
@@ -99,6 +100,9 @@ class CommandLine extends React.PureComponent<ICommandLineRendererProps, State>
     }
 
     public renderIconOrChar(character: string) {
+        if (!this.props.showIcons) {
+            return character
+        }
         switch (character) {
             case "/":
                 return [
@@ -153,15 +157,17 @@ class CommandLine extends React.PureComponent<ICommandLineRendererProps, State>
     }
 }
 
-const mapStateToProps = ({
-    commandLine: { visible, position, content, firstchar, level, prompt },
-}: State.IState) => ({
-    visible,
-    content,
-    firstchar,
-    position,
-    level,
-    prompt,
-})
+const mapStateToProps = ({ commandLine, configuration }: State.IState) => {
+    const { visible, position, content, firstchar, level, prompt } = commandLine
+    return {
+        showIcons: configuration["experimental.commandline.icons"],
+        visible,
+        content,
+        firstchar,
+        position,
+        level,
+        prompt,
+    }
+}
 
 export default connect<ICommandLineRendererProps>(mapStateToProps)(CommandLine)