Feature/add search icon commandline (#1230)

* Rework styling to match quickopen menu

also add icon - file icon atm ?alternatives

* Render wild menu into the stack layer

* Reduce padding

* Compose wild menu with commandline

* 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

* Render components separately inside of common

container

* Attempt to manually place external menus not working

* add space to constructor

* Add timeout to prevent flickering of cmdline

Also only render overlay if both elements present

* revert changes to neovim surface

* wire up setcursor actions

* Add a cursor to commandline

* Remove excess space

* Remove refs from commandline components

* re-add focus as this is essential for functionality

* 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

* add in the prompt segment

* fix overflow styling

* add pointer events but not selection

* Add overflow handling for command line

* minor change to comment position

* adjust cursor position

* re-add missing max width
to ensure commandline and wild menu have
same width

* re-arrange css to rerun tests

* re-arrange css again..

* reduce timeout to 80ms

* Add spurious CR to rerun test

* Add icons to replace the first character

* Add configuration to show and hide icons

browser/src/Services/Configuration/DefaultConfiguration.ts

@@ -35,6 +35,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",

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

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,7 +42,17 @@ 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 {
+    showIcons: boolean
     visible: boolean
     content: string
     position: number
@@ -55,6 +66,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 +99,42 @@ class CommandLine extends React.PureComponent<ICommandLineRendererProps, State>
         }
     }
 
+    public renderIconOrChar(character: string) {
+        if (!this.props.showIcons) {
+            return character
+        }
+        switch (character) {
+            case "/":
+                return [
+                    <CommandLineIcon iconName="search" key={`${character}-search`} />,
+                    <CommandLineIcon
+                        arrow
+                        iconName="arrow-right"
+                        key={`${character}-arrow-right`}
+                    />,
+                ]
+            case ":":
+                return (
+                    <IconContainer>
+                        <CommandLineIcon iconName="file-code-o" />
+                    </IconContainer>
+                )
+            case "?":
+                return [
+                    <CommandLineIcon iconName="search" key={`${character}-search`} />,
+                    <CommandLineIcon key={`${character}-arrow-left`} 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 +149,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 />
@@ -108,15 +161,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)