From 748a2f2b542fed2cb8ab7d1792cb874ce7423a61 Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Wed, 11 Apr 2018 17:12:01 +0100
Subject: [PATCH 01/23] Added fuzzy file finder to web IDE

Closes #44841
---
 .../ide/components/file_finder/index.vue      | 100 ++++++++++++++++++
 .../ide/components/file_finder/item.vue       |  36 +++++++
 app/assets/javascripts/ide/components/ide.vue |  13 ++-
 app/assets/javascripts/ide/stores/getters.js  |   3 +
 app/assets/javascripts/ide/stores/state.js    |   1 +
 package.json                                  |   1 +
 yarn.lock                                     |   4 +
 7 files changed, 157 insertions(+), 1 deletion(-)
 create mode 100644 app/assets/javascripts/ide/components/file_finder/index.vue
 create mode 100644 app/assets/javascripts/ide/components/file_finder/item.vue

diff --git a/app/assets/javascripts/ide/components/file_finder/index.vue b/app/assets/javascripts/ide/components/file_finder/index.vue
new file mode 100644
index 00000000000..ebcd6f7592b
--- /dev/null
+++ b/app/assets/javascripts/ide/components/file_finder/index.vue
@@ -0,0 +1,100 @@
+<script>
+import { mapGetters, mapState } from 'vuex';
+import fuzzaldrinPlus from 'fuzzaldrin-plus';
+import VirtualList from 'vue-virtual-scroll-list';
+import Item from './item.vue';
+
+export default {
+  components: {
+    Item,
+    VirtualList,
+  },
+  data() {
+    return {
+      searchText: '',
+    };
+  },
+  computed: {
+    ...mapGetters(['allBlobs']),
+    ...mapState(['loading']),
+    filteredBlobs() {
+      const searchText = this.searchText.trim();
+
+      if (searchText === '') return this.allBlobs;
+
+      return fuzzaldrinPlus.filter(this.allBlobs, searchText, {
+        key: 'path',
+      });
+    },
+    listShowCount() {
+      if (this.filteredBlobs.length === 0) return 1;
+
+      return this.filteredBlobs.length > 5 ? 5 : this.filteredBlobs.length;
+    },
+    listHeight() {
+      return this.listShowCount > 1 ? 55 : 33;
+    },
+  },
+  mounted() {
+    this.$refs.searchInput.focus();
+  },
+};
+</script>
+
+<template>
+  <div class="dropdown-menu diff-file-changes ide-file-finder" style="display: block;">
+    <div class="dropdown-input">
+      <input
+        type="search"
+        class="dropdown-input-field"
+        placeholder="Search files"
+        autocomplete="off"
+        v-model="searchText"
+        ref="searchInput"
+      />
+      <i
+        aria-hidden="true"
+        class="fa fa-search dropdown-input-search"
+      ></i>
+    </div>
+    <div>
+      <virtual-list
+        :size="listHeight"
+        :remain="listShowCount"
+        wtag="ul"
+      >
+        <template v-if="filteredBlobs.length">
+          <li
+            v-for="file in filteredBlobs"
+            :key="file.key"
+          >
+            <item
+              :file="file"
+            />
+          </li>
+        </template>
+        <li
+          v-else
+          class="dropdown-menu-empty-itemhidden"
+        >
+          <a href="">
+            <template v-if="loading">
+              Loading...
+            </template>
+            <template v-else>
+              No files found.
+            </template>
+          </a>
+        </li>
+      </virtual-list>
+    </div>
+  </div>
+</template>
+
+<style>
+.ide-file-finder {
+  top: 100px;
+  left: 50%;
+  transform: translateX(-50%);
+}
+</style>
diff --git a/app/assets/javascripts/ide/components/file_finder/item.vue b/app/assets/javascripts/ide/components/file_finder/item.vue
new file mode 100644
index 00000000000..482bfb96d93
--- /dev/null
+++ b/app/assets/javascripts/ide/components/file_finder/item.vue
@@ -0,0 +1,36 @@
+<script>
+import FileIcon from '../../../vue_shared/components/file_icon.vue';
+
+export default {
+  components: {
+    FileIcon,
+  },
+  props: {
+    file: {
+      type: Object,
+      required: true,
+    },
+  },
+};
+</script>
+
+<template>
+  <a
+    href=""
+    class="diff-changed-file"
+  >
+    <file-icon
+      :file-name="file.name"
+      :size="16"
+      css-classes="diff-file-changed-icon append-right-8"
+    />
+    <span class="diff-changed-file-content append-right-8">
+      <strong class="diff-changed-file-name">
+        {{ file.name }}
+      </strong>
+      <span class="diff-changed-file-path prepend-top-5">
+        {{ file.path }}
+      </span>
+    </span>
+  </a>
+</template>
diff --git a/app/assets/javascripts/ide/components/ide.vue b/app/assets/javascripts/ide/components/ide.vue
index 1c237c0ec97..8489639e3b0 100644
--- a/app/assets/javascripts/ide/components/ide.vue
+++ b/app/assets/javascripts/ide/components/ide.vue
@@ -5,6 +5,7 @@ import ideContextbar from './ide_context_bar.vue';
 import repoTabs from './repo_tabs.vue';
 import ideStatusBar from './ide_status_bar.vue';
 import repoEditor from './repo_editor.vue';
+import FindFile from './file_finder/index.vue';
 
 export default {
   components: {
@@ -13,6 +14,7 @@ export default {
     repoTabs,
     ideStatusBar,
     repoEditor,
+    FindFile,
   },
   props: {
     emptyStateSvgPath: {
@@ -29,7 +31,13 @@ export default {
     },
   },
   computed: {
-    ...mapState(['changedFiles', 'openFiles', 'viewer', 'currentMergeRequestId']),
+    ...mapState([
+      'changedFiles',
+      'openFiles',
+      'viewer',
+      'currentMergeRequestId',
+      'fileFindVisible',
+    ]),
     ...mapGetters(['activeFile', 'hasChanges']),
   },
   mounted() {
@@ -50,6 +58,9 @@ export default {
   <div
     class="ide-view"
   >
+    <find-file
+      v-if="fileFindVisible"
+    />
     <ide-sidebar />
     <div
       class="multi-file-edit-pane"
diff --git a/app/assets/javascripts/ide/stores/getters.js b/app/assets/javascripts/ide/stores/getters.js
index a77cdbc13c8..6776be3b77c 100644
--- a/app/assets/javascripts/ide/stores/getters.js
+++ b/app/assets/javascripts/ide/stores/getters.js
@@ -35,3 +35,6 @@ export const currentIcon = state =>
 export const hasChanges = state => !!state.changedFiles.length;
 
 export const hasMergeRequest = state => !!state.currentMergeRequestId;
+
+export const allBlobs = state =>
+  Object.keys(state.entries).reduce((acc, key) => acc.concat(state.entries[key]), []);
diff --git a/app/assets/javascripts/ide/stores/state.js b/app/assets/javascripts/ide/stores/state.js
index e5cc8814000..e976884ae1f 100644
--- a/app/assets/javascripts/ide/stores/state.js
+++ b/app/assets/javascripts/ide/stores/state.js
@@ -17,4 +17,5 @@ export default () => ({
   entries: {},
   viewer: 'editor',
   delayViewerUpdated: false,
+  fileFindVisible: true,
 });
diff --git a/package.json b/package.json
index 45bea12fd9b..6f92600cfa5 100644
--- a/package.json
+++ b/package.json
@@ -88,6 +88,7 @@
     "vue-resource": "^1.3.5",
     "vue-router": "^3.0.1",
     "vue-template-compiler": "^2.5.13",
+    "vue-virtual-scroll-list": "^1.2.5",
     "vuex": "^3.0.1",
     "webpack": "^3.11.0",
     "webpack-bundle-analyzer": "^2.10.0",
diff --git a/yarn.lock b/yarn.lock
index 55a86a9a577..1718a56bac4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8683,6 +8683,10 @@ vue-template-es2015-compiler@^1.6.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.6.0.tgz#dc42697133302ce3017524356a6c61b7b69b4a18"
 
+vue-virtual-scroll-list@^1.2.5:
+  version "1.2.5"
+  resolved "https://registry.yarnpkg.com/vue-virtual-scroll-list/-/vue-virtual-scroll-list-1.2.5.tgz#bcbd010f7cdb035eba8958ebf807c6214d9a167a"
+
 vue@^2.5.13:
   version "2.5.13"
   resolved "https://registry.yarnpkg.com/vue/-/vue-2.5.13.tgz#95bd31e20efcf7a7f39239c9aa6787ce8cf578e1"
-- 
2.18.1


From d32eaee20e75ca2e90397182dce59ee263f5c249 Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Thu, 12 Apr 2018 09:43:46 +0100
Subject: [PATCH 02/23] correctly show the dropdown with `t` keypress added
 arrow key navigation in the dropdown enter & click open the file highlight
 occurrences of the searched text in the drppdown item fixed some performance
 issues when rendering limit the dropdown items to a maximum of 20 - this may
 change to more depending on other performance changes

---
 .../ide/components/file_finder/index.vue      | 167 ++++++++++++------
 .../ide/components/file_finder/item.vue       |  50 +++++-
 app/assets/javascripts/ide/components/ide.vue |  13 +-
 app/assets/javascripts/ide/stores/actions.js  |   3 +
 app/assets/javascripts/ide/stores/getters.js  |  10 +-
 .../javascripts/ide/stores/mutation_types.js  |   2 +
 .../javascripts/ide/stores/mutations.js       |   5 +
 app/assets/javascripts/ide/stores/state.js    |   2 +-
 app/assets/stylesheets/pages/repo.scss        |   1 +
 9 files changed, 194 insertions(+), 59 deletions(-)

diff --git a/app/assets/javascripts/ide/components/file_finder/index.vue b/app/assets/javascripts/ide/components/file_finder/index.vue
index ebcd6f7592b..d1902557fe8 100644
--- a/app/assets/javascripts/ide/components/file_finder/index.vue
+++ b/app/assets/javascripts/ide/components/file_finder/index.vue
@@ -1,8 +1,11 @@
 <script>
-import { mapGetters, mapState } from 'vuex';
+import { mapActions, mapGetters, mapState } from 'vuex';
 import fuzzaldrinPlus from 'fuzzaldrin-plus';
 import VirtualList from 'vue-virtual-scroll-list';
 import Item from './item.vue';
+import router from '../../ide_router';
+
+const MAX_RESULTS = 20;
 
 export default {
   components: {
@@ -11,89 +14,153 @@ export default {
   },
   data() {
     return {
+      focusedIndex: 0,
       searchText: '',
     };
   },
   computed: {
     ...mapGetters(['allBlobs']),
-    ...mapState(['loading']),
+    ...mapState(['fileFindVisible', 'loading']),
     filteredBlobs() {
       const searchText = this.searchText.trim();
 
-      if (searchText === '') return this.allBlobs;
+      if (searchText === '') return this.allBlobs.slice(0, MAX_RESULTS);
 
       return fuzzaldrinPlus.filter(this.allBlobs, searchText, {
         key: 'path',
+        maxResults: MAX_RESULTS,
       });
     },
     listShowCount() {
-      if (this.filteredBlobs.length === 0) return 1;
+      if (!this.filteredBlobs.length) return 1;
 
       return this.filteredBlobs.length > 5 ? 5 : this.filteredBlobs.length;
     },
     listHeight() {
-      return this.listShowCount > 1 ? 55 : 33;
+      return this.filteredBlobs.length ? 55 : 33;
+    },
+  },
+  watch: {
+    fileFindVisible() {
+      this.$nextTick(() => this.$refs.searchInput.focus());
+    },
+    searchText() {
+      if (this.searchText.trim() !== '') {
+        this.focusedIndex = 0;
+      }
     },
   },
-  mounted() {
-    this.$refs.searchInput.focus();
+  methods: {
+    ...mapActions(['toggleFileFinder']),
+    onKeydown(e) {
+      switch (e.keyCode) {
+        case 38:
+          // UP
+          e.preventDefault();
+          if (this.focusedIndex > 0) this.focusedIndex -= 1;
+          break;
+        case 40:
+          // DOWN
+          e.preventDefault();
+          if (this.focusedIndex < this.filteredBlobs.length - 1) this.focusedIndex += 1;
+          break;
+        default:
+          break;
+      }
+    },
+    onKeyup(e) {
+      switch (e.keyCode) {
+        case 13:
+          // ENTER
+          this.openFile(this.filteredBlobs[this.focusedIndex]);
+          break;
+        default:
+          break;
+      }
+    },
+    openFile(file) {
+      this.toggleFileFinder(false);
+      router.push(`/project${file.url}`);
+    },
   },
 };
 </script>
 
 <template>
-  <div class="dropdown-menu diff-file-changes ide-file-finder" style="display: block;">
-    <div class="dropdown-input">
-      <input
-        type="search"
-        class="dropdown-input-field"
-        placeholder="Search files"
-        autocomplete="off"
-        v-model="searchText"
-        ref="searchInput"
-      />
-      <i
-        aria-hidden="true"
-        class="fa fa-search dropdown-input-search"
-      ></i>
-    </div>
-    <div>
-      <virtual-list
-        :size="listHeight"
-        :remain="listShowCount"
-        wtag="ul"
-      >
-        <template v-if="filteredBlobs.length">
+  <div
+    class="ide-file-finder-overlay"
+    @click.self="toggleFileFinder(false)"
+  >
+    <div
+      class="dropdown-menu diff-file-changes ide-file-finder show"
+    >
+      <div class="dropdown-input">
+        <input
+          type="search"
+          class="dropdown-input-field"
+          placeholder="Search files"
+          autocomplete="off"
+          v-model="searchText"
+          ref="searchInput"
+          @keydown="onKeydown($event)"
+          @keyup="onKeyup($event)"
+        />
+        <i
+          aria-hidden="true"
+          class="fa fa-search dropdown-input-search"
+        ></i>
+      </div>
+      <div>
+        <virtual-list
+          :size="listHeight"
+          :remain="listShowCount"
+          :start="focusedIndex"
+          wtag="ul"
+        >
+          <template v-if="filteredBlobs.length">
+            <li
+              v-for="(file, index) in filteredBlobs"
+              :key="file.key"
+            >
+              <item
+                :file="file"
+                :search-text="searchText"
+                :focused="index === focusedIndex"
+                @click="openFile"
+              />
+            </li>
+          </template>
           <li
-            v-for="file in filteredBlobs"
-            :key="file.key"
+            v-else
+            class="dropdown-menu-empty-itemhidden"
           >
-            <item
-              :file="file"
-            />
+            <a href="">
+              <template v-if="loading">
+                Loading...
+              </template>
+              <template v-else>
+                No files found.
+              </template>
+            </a>
           </li>
-        </template>
-        <li
-          v-else
-          class="dropdown-menu-empty-itemhidden"
-        >
-          <a href="">
-            <template v-if="loading">
-              Loading...
-            </template>
-            <template v-else>
-              No files found.
-            </template>
-          </a>
-        </li>
-      </virtual-list>
+        </virtual-list>
+      </div>
     </div>
   </div>
 </template>
 
 <style>
+.ide-file-finder-overlay {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 100;
+}
+
 .ide-file-finder {
-  top: 100px;
+  top: 10px;
   left: 50%;
   transform: translateX(-50%);
 }
diff --git a/app/assets/javascripts/ide/components/file_finder/item.vue b/app/assets/javascripts/ide/components/file_finder/item.vue
index 482bfb96d93..4003f72f1ac 100644
--- a/app/assets/javascripts/ide/components/file_finder/item.vue
+++ b/app/assets/javascripts/ide/components/file_finder/item.vue
@@ -1,4 +1,5 @@
 <script>
+import fuzzaldrinPlus from 'fuzzaldrin-plus';
 import FileIcon from '../../../vue_shared/components/file_icon.vue';
 
 export default {
@@ -10,14 +11,42 @@ export default {
       type: Object,
       required: true,
     },
+    focused: {
+      type: Boolean,
+      required: true,
+    },
+    searchText: {
+      type: String,
+      required: true,
+    },
+  },
+  methods: {
+    clickRow() {
+      this.$emit('click', this.file);
+    },
+    highlightText(text) {
+      const occurrences = fuzzaldrinPlus.match(text, this.searchText);
+
+      return text
+        .split('')
+        .map(
+          (char, i) =>
+            `<span class="${occurrences.indexOf(i) >= 0 ? 'highlighted' : ''}">${char}</span>`,
+        )
+        .join('');
+    },
   },
 };
 </script>
 
 <template>
   <a
-    href=""
+    href="#"
     class="diff-changed-file"
+    :class="{
+      'is-focused': focused,
+    }"
+    @click.prevent="clickRow"
   >
     <file-icon
       :file-name="file.name"
@@ -25,12 +54,23 @@ export default {
       css-classes="diff-file-changed-icon append-right-8"
     />
     <span class="diff-changed-file-content append-right-8">
-      <strong class="diff-changed-file-name">
-        {{ file.name }}
+      <strong
+        class="diff-changed-file-name"
+        v-html="highlightText(this.file.name)"
+      >
       </strong>
-      <span class="diff-changed-file-path prepend-top-5">
-        {{ file.path }}
+      <span
+        class="diff-changed-file-path prepend-top-5"
+        v-html="highlightText(this.file.path)"
+      >
       </span>
     </span>
   </a>
 </template>
+
+<style>
+.highlighted {
+  color: #1b69b6;
+  font-weight: 600;
+}
+</style>
diff --git a/app/assets/javascripts/ide/components/ide.vue b/app/assets/javascripts/ide/components/ide.vue
index 8489639e3b0..065edd81d2c 100644
--- a/app/assets/javascripts/ide/components/ide.vue
+++ b/app/assets/javascripts/ide/components/ide.vue
@@ -1,5 +1,6 @@
 <script>
-import { mapState, mapGetters } from 'vuex';
+import { mapActions, mapState, mapGetters } from 'vuex';
+import Mousetrap from 'mousetrap';
 import ideSidebar from './ide_side_bar.vue';
 import ideContextbar from './ide_context_bar.vue';
 import repoTabs from './repo_tabs.vue';
@@ -50,6 +51,14 @@ export default {
       });
       return returnValue;
     };
+
+    Mousetrap.bind('t', e => {
+      e.preventDefault();
+      this.toggleFileFinder(true);
+    });
+  },
+  methods: {
+    ...mapActions(['toggleFileFinder']),
   },
 };
 </script>
@@ -59,7 +68,7 @@ export default {
     class="ide-view"
   >
     <find-file
-      v-if="fileFindVisible"
+      v-show="fileFindVisible"
     />
     <ide-sidebar />
     <div
diff --git a/app/assets/javascripts/ide/stores/actions.js b/app/assets/javascripts/ide/stores/actions.js
index c6ba679d99c..57420b6c699 100644
--- a/app/assets/javascripts/ide/stores/actions.js
+++ b/app/assets/javascripts/ide/stores/actions.js
@@ -112,6 +112,9 @@ export const updateDelayViewerUpdated = ({ commit }, delay) => {
   commit(types.UPDATE_DELAY_VIEWER_CHANGE, delay);
 };
 
+export const toggleFileFinder = ({ commit }, fileFindVisible) =>
+  commit(types.TOGGLE_FILE_FINDER, fileFindVisible);
+
 export * from './actions/tree';
 export * from './actions/file';
 export * from './actions/project';
diff --git a/app/assets/javascripts/ide/stores/getters.js b/app/assets/javascripts/ide/stores/getters.js
index 6776be3b77c..07f7e73d8e9 100644
--- a/app/assets/javascripts/ide/stores/getters.js
+++ b/app/assets/javascripts/ide/stores/getters.js
@@ -37,4 +37,12 @@ export const hasChanges = state => !!state.changedFiles.length;
 export const hasMergeRequest = state => !!state.currentMergeRequestId;
 
 export const allBlobs = state =>
-  Object.keys(state.entries).reduce((acc, key) => acc.concat(state.entries[key]), []);
+  Object.keys(state.entries).reduce((acc, key) => {
+    const entry = state.entries[key];
+
+    if (entry.type === 'blob') {
+      acc.push(entry);
+    }
+
+    return acc;
+  }, []);
diff --git a/app/assets/javascripts/ide/stores/mutation_types.js b/app/assets/javascripts/ide/stores/mutation_types.js
index e3f504e5ab0..d64908ea971 100644
--- a/app/assets/javascripts/ide/stores/mutation_types.js
+++ b/app/assets/javascripts/ide/stores/mutation_types.js
@@ -53,3 +53,5 @@ export const UPDATE_DELAY_VIEWER_CHANGE = 'UPDATE_DELAY_VIEWER_CHANGE';
 
 export const ADD_PENDING_TAB = 'ADD_PENDING_TAB';
 export const REMOVE_PENDING_TAB = 'REMOVE_PENDING_TAB';
+
+export const TOGGLE_FILE_FINDER = 'SHOW_FILE_FINDER';
diff --git a/app/assets/javascripts/ide/stores/mutations.js b/app/assets/javascripts/ide/stores/mutations.js
index 5e5eb831662..4510ef64262 100644
--- a/app/assets/javascripts/ide/stores/mutations.js
+++ b/app/assets/javascripts/ide/stores/mutations.js
@@ -95,6 +95,11 @@ export default {
       delayViewerUpdated,
     });
   },
+  [types.TOGGLE_FILE_FINDER](state, fileFindVisible) {
+    Object.assign(state, {
+      fileFindVisible,
+    });
+  },
   ...projectMutations,
   ...mergeRequestMutation,
   ...fileMutations,
diff --git a/app/assets/javascripts/ide/stores/state.js b/app/assets/javascripts/ide/stores/state.js
index e976884ae1f..3694ad953fa 100644
--- a/app/assets/javascripts/ide/stores/state.js
+++ b/app/assets/javascripts/ide/stores/state.js
@@ -17,5 +17,5 @@ export default () => ({
   entries: {},
   viewer: 'editor',
   delayViewerUpdated: false,
-  fileFindVisible: true,
+  fileFindVisible: false,
 });
diff --git a/app/assets/stylesheets/pages/repo.scss b/app/assets/stylesheets/pages/repo.scss
index 5f46e69a56d..340bba7ef4c 100644
--- a/app/assets/stylesheets/pages/repo.scss
+++ b/app/assets/stylesheets/pages/repo.scss
@@ -17,6 +17,7 @@
 }
 
 .ide-view {
+  position: relative;
   display: flex;
   height: calc(100vh - #{$header-height});
   margin-top: 0;
-- 
2.18.1


From ba4dde7c41f0d3dcba12481c4ff0171044c9dc1c Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Thu, 12 Apr 2018 10:36:10 +0100
Subject: [PATCH 03/23] small performance improvement by caching the computed
 prop fixed eslint

there are still some performance issues with larger lists. Need to
investigate whether this is a Vue issue or a fuzzaldrin issue
---
 .../ide/components/file_finder/index.vue            | 13 ++++++++-----
 .../javascripts/ide/components/file_finder/item.vue |  4 ++--
 2 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/app/assets/javascripts/ide/components/file_finder/index.vue b/app/assets/javascripts/ide/components/file_finder/index.vue
index d1902557fe8..3e7cf69dbda 100644
--- a/app/assets/javascripts/ide/components/file_finder/index.vue
+++ b/app/assets/javascripts/ide/components/file_finder/index.vue
@@ -31,13 +31,16 @@ export default {
         maxResults: MAX_RESULTS,
       });
     },
+    filteredBlobsLength() {
+      return this.filteredBlobs.length;
+    },
     listShowCount() {
-      if (!this.filteredBlobs.length) return 1;
+      if (!this.filteredBlobsLength) return 1;
 
-      return this.filteredBlobs.length > 5 ? 5 : this.filteredBlobs.length;
+      return this.filteredBlobsLength > 5 ? 5 : this.filteredBlobsLength;
     },
     listHeight() {
-      return this.filteredBlobs.length ? 55 : 33;
+      return this.filteredBlobsLength ? 55 : 33;
     },
   },
   watch: {
@@ -62,7 +65,7 @@ export default {
         case 40:
           // DOWN
           e.preventDefault();
-          if (this.focusedIndex < this.filteredBlobs.length - 1) this.focusedIndex += 1;
+          if (this.focusedIndex < this.filteredBlobsLength - 1) this.focusedIndex += 1;
           break;
         default:
           break;
@@ -117,7 +120,7 @@ export default {
           :start="focusedIndex"
           wtag="ul"
         >
-          <template v-if="filteredBlobs.length">
+          <template v-if="filteredBlobsLength">
             <li
               v-for="(file, index) in filteredBlobs"
               :key="file.key"
diff --git a/app/assets/javascripts/ide/components/file_finder/item.vue b/app/assets/javascripts/ide/components/file_finder/item.vue
index 4003f72f1ac..15ba9f3d21c 100644
--- a/app/assets/javascripts/ide/components/file_finder/item.vue
+++ b/app/assets/javascripts/ide/components/file_finder/item.vue
@@ -56,12 +56,12 @@ export default {
     <span class="diff-changed-file-content append-right-8">
       <strong
         class="diff-changed-file-name"
-        v-html="highlightText(this.file.name)"
+        v-html="highlightText(file.name)"
       >
       </strong>
       <span
         class="diff-changed-file-path prepend-top-5"
-        v-html="highlightText(this.file.path)"
+        v-html="highlightText(file.path)"
       >
       </span>
     </span>
-- 
2.18.1


From a3566506e3336d174e0fe669bd8c420a45df4a29 Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Thu, 12 Apr 2018 11:18:26 +0100
Subject: [PATCH 04/23] added keymap to editor to open file finder clear file
 finder on close esc closes the file finder

---
 .../ide/components/file_finder/index.vue      | 13 +++++++-
 app/assets/javascripts/ide/components/ide.vue |  2 +-
 app/assets/javascripts/ide/lib/editor.js      | 32 +++++++++++++++++++
 app/assets/javascripts/ide/lib/keymap.json    | 11 +++++++
 4 files changed, 56 insertions(+), 2 deletions(-)
 create mode 100644 app/assets/javascripts/ide/lib/keymap.json

diff --git a/app/assets/javascripts/ide/components/file_finder/index.vue b/app/assets/javascripts/ide/components/file_finder/index.vue
index 3e7cf69dbda..517e0bef4cf 100644
--- a/app/assets/javascripts/ide/components/file_finder/index.vue
+++ b/app/assets/javascripts/ide/components/file_finder/index.vue
@@ -45,7 +45,14 @@ export default {
   },
   watch: {
     fileFindVisible() {
-      this.$nextTick(() => this.$refs.searchInput.focus());
+      this.$nextTick(() => {
+        if (!this.fileFindVisible) {
+          this.searchText = '';
+          this.focusedIndex = 0;
+        } else {
+          this.$refs.searchInput.focus();
+        }
+      });
     },
     searchText() {
       if (this.searchText.trim() !== '') {
@@ -77,6 +84,10 @@ export default {
           // ENTER
           this.openFile(this.filteredBlobs[this.focusedIndex]);
           break;
+        case 27:
+          // ESC
+          this.toggleFileFinder(false);
+          break;
         default:
           break;
       }
diff --git a/app/assets/javascripts/ide/components/ide.vue b/app/assets/javascripts/ide/components/ide.vue
index 065edd81d2c..1cf54920d63 100644
--- a/app/assets/javascripts/ide/components/ide.vue
+++ b/app/assets/javascripts/ide/components/ide.vue
@@ -52,7 +52,7 @@ export default {
       return returnValue;
     };
 
-    Mousetrap.bind('t', e => {
+    Mousetrap.bind(['t', 'command+p', 'ctrl+p'], e => {
       e.preventDefault();
       this.toggleFileFinder(true);
     });
diff --git a/app/assets/javascripts/ide/lib/editor.js b/app/assets/javascripts/ide/lib/editor.js
index 001737d6ee8..b34bab93882 100644
--- a/app/assets/javascripts/ide/lib/editor.js
+++ b/app/assets/javascripts/ide/lib/editor.js
@@ -1,10 +1,12 @@
 import _ from 'underscore';
+import store from '../stores';
 import DecorationsController from './decorations/controller';
 import DirtyDiffController from './diff/controller';
 import Disposable from './common/disposable';
 import ModelManager from './common/model_manager';
 import editorOptions, { defaultEditorOptions } from './editor_options';
 import gitlabTheme from './themes/gl_theme';
+import keymap from './keymap.json';
 
 export const clearDomElement = el => {
   if (!el || !el.firstChild) return;
@@ -53,6 +55,8 @@ export default class Editor {
         )),
       );
 
+      this.addCommands();
+
       window.addEventListener('resize', this.debouncedUpdate, false);
     }
   }
@@ -73,6 +77,8 @@ export default class Editor {
         })),
       );
 
+      this.addCommands();
+
       window.addEventListener('resize', this.debouncedUpdate, false);
     }
   }
@@ -189,4 +195,30 @@ export default class Editor {
   static renderSideBySide(domElement) {
     return domElement.offsetWidth >= 700;
   }
+
+  addCommands() {
+    const getKeyCode = key => {
+      const monacoKeyMod = key.indexOf('KEY_') === 0;
+
+      return monacoKeyMod ? monaco.KeyCode[key] : monaco.KeyMod[key];
+    };
+
+    keymap.forEach(command => {
+      const keybindings = command.bindings.map(binding => {
+        const keys = binding.split('+');
+
+        return keys.length > 1 ? getKeyCode(keys[0]) | getKeyCode(keys[1]) : getKeyCode(keys[0]);
+      });
+
+      this.instance.addAction({
+        id: command.id,
+        label: command.label,
+        keybindings,
+        run() {
+          store.dispatch(command.action.name, command.action.params);
+          return null;
+        },
+      });
+    });
+  }
 }
diff --git a/app/assets/javascripts/ide/lib/keymap.json b/app/assets/javascripts/ide/lib/keymap.json
new file mode 100644
index 00000000000..131abfebbed
--- /dev/null
+++ b/app/assets/javascripts/ide/lib/keymap.json
@@ -0,0 +1,11 @@
+[
+  {
+    "id": "file-finder",
+    "label": "File finder",
+    "bindings": ["CtrlCmd+KEY_P"],
+    "action": {
+      "name": "toggleFileFinder",
+      "params": true
+    }
+  }
+]
-- 
2.18.1


From b867b33ea8bd39ea7024ab22f3e93f6ee21504bd Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Thu, 12 Apr 2018 12:00:07 +0100
Subject: [PATCH 05/23] moved CSS into SCSS file added ellipsis to path but not
 name

---
 .../ide/components/file_finder/index.vue      | 33 ++++---------------
 .../ide/components/file_finder/item.vue       | 23 +++++++------
 app/assets/javascripts/ide/lib/editor.js      |  3 +-
 app/assets/stylesheets/pages/repo.scss        | 20 +++++++++++
 4 files changed, 40 insertions(+), 39 deletions(-)

diff --git a/app/assets/javascripts/ide/components/file_finder/index.vue b/app/assets/javascripts/ide/components/file_finder/index.vue
index 517e0bef4cf..1568f1bf9e4 100644
--- a/app/assets/javascripts/ide/components/file_finder/index.vue
+++ b/app/assets/javascripts/ide/components/file_finder/index.vue
@@ -5,7 +5,7 @@ import VirtualList from 'vue-virtual-scroll-list';
 import Item from './item.vue';
 import router from '../../ide_router';
 
-const MAX_RESULTS = 20;
+const MAX_RESULTS = 40;
 
 export default {
   components: {
@@ -48,16 +48,14 @@ export default {
       this.$nextTick(() => {
         if (!this.fileFindVisible) {
           this.searchText = '';
-          this.focusedIndex = 0;
         } else {
+          this.focusedIndex = 0;
           this.$refs.searchInput.focus();
         }
       });
     },
     searchText() {
-      if (this.searchText.trim() !== '') {
-        this.focusedIndex = 0;
-      }
+      this.focusedIndex = 0;
     },
   },
   methods: {
@@ -103,7 +101,7 @@ export default {
 <template>
   <div
     class="ide-file-finder-overlay"
-    @click.self="toggleFileFinder(false)"
+    @mousedown.self="toggleFileFinder(false)"
   >
     <div
       class="dropdown-menu diff-file-changes ide-file-finder show"
@@ -112,7 +110,7 @@ export default {
         <input
           type="search"
           class="dropdown-input-field"
-          placeholder="Search files"
+          :placeholder="__('Search files')"
           autocomplete="off"
           v-model="searchText"
           ref="searchInput"
@@ -150,10 +148,10 @@ export default {
           >
             <a href="">
               <template v-if="loading">
-                Loading...
+                {{ __('Loading...') }}
               </template>
               <template v-else>
-                No files found.
+                {{ __('No files found.') }}
               </template>
             </a>
           </li>
@@ -162,20 +160,3 @@ export default {
     </div>
   </div>
 </template>
-
-<style>
-.ide-file-finder-overlay {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: 100;
-}
-
-.ide-file-finder {
-  top: 10px;
-  left: 50%;
-  transform: translateX(-50%);
-}
-</style>
diff --git a/app/assets/javascripts/ide/components/file_finder/item.vue b/app/assets/javascripts/ide/components/file_finder/item.vue
index 15ba9f3d21c..7d930ce9c01 100644
--- a/app/assets/javascripts/ide/components/file_finder/item.vue
+++ b/app/assets/javascripts/ide/components/file_finder/item.vue
@@ -2,6 +2,8 @@
 import fuzzaldrinPlus from 'fuzzaldrin-plus';
 import FileIcon from '../../../vue_shared/components/file_icon.vue';
 
+const MAX_PATH_LENGTH = 60;
+
 export default {
   components: {
     FileIcon,
@@ -24,10 +26,14 @@ export default {
     clickRow() {
       this.$emit('click', this.file);
     },
-    highlightText(text) {
-      const occurrences = fuzzaldrinPlus.match(text, this.searchText);
+    highlightText(text, addEllipsis) {
+      const maxText =
+        text.length < MAX_PATH_LENGTH || !addEllipsis
+          ? text
+          : `...${text.substr(text.length - MAX_PATH_LENGTH)}`;
+      const occurrences = fuzzaldrinPlus.match(maxText, this.searchText);
 
-      return text
+      return maxText
         .split('')
         .map(
           (char, i) =>
@@ -56,21 +62,14 @@ export default {
     <span class="diff-changed-file-content append-right-8">
       <strong
         class="diff-changed-file-name"
-        v-html="highlightText(file.name)"
+        v-html="highlightText(file.name, false)"
       >
       </strong>
       <span
         class="diff-changed-file-path prepend-top-5"
-        v-html="highlightText(file.path)"
+        v-html="highlightText(file.path, true)"
       >
       </span>
     </span>
   </a>
 </template>
-
-<style>
-.highlighted {
-  color: #1b69b6;
-  font-weight: 600;
-}
-</style>
diff --git a/app/assets/javascripts/ide/lib/editor.js b/app/assets/javascripts/ide/lib/editor.js
index b34bab93882..d537cc1fbae 100644
--- a/app/assets/javascripts/ide/lib/editor.js
+++ b/app/assets/javascripts/ide/lib/editor.js
@@ -200,13 +200,14 @@ export default class Editor {
     const getKeyCode = key => {
       const monacoKeyMod = key.indexOf('KEY_') === 0;
 
-      return monacoKeyMod ? monaco.KeyCode[key] : monaco.KeyMod[key];
+      return monacoKeyMod ? this.monaco.KeyCode[key] : this.monaco.KeyMod[key];
     };
 
     keymap.forEach(command => {
       const keybindings = command.bindings.map(binding => {
         const keys = binding.split('+');
 
+        // eslint-disable-next-line no-bitwise
         return keys.length > 1 ? getKeyCode(keys[0]) | getKeyCode(keys[1]) : getKeyCode(keys[0]);
       });
 
diff --git a/app/assets/stylesheets/pages/repo.scss b/app/assets/stylesheets/pages/repo.scss
index 340bba7ef4c..f826f934abf 100644
--- a/app/assets/stylesheets/pages/repo.scss
+++ b/app/assets/stylesheets/pages/repo.scss
@@ -840,3 +840,23 @@
   align-items: center;
   font-weight: $gl-font-weight-bold;
 }
+
+.ide-file-finder-overlay {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 100;
+}
+
+.ide-file-finder {
+  top: 10px;
+  left: 50%;
+  transform: translateX(-50%);
+
+  .highlighted {
+    color: $blue-500;
+    font-weight: $gl-font-weight-bold;
+  }
+}
-- 
2.18.1


From b0d84c1e0e4c9959fbca7beecdfec5ede1c33960 Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Thu, 12 Apr 2018 12:04:30 +0100
Subject: [PATCH 06/23] added ChangedFileIcon component to rows

---
 .../javascripts/ide/components/file_finder/item.vue    | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/app/assets/javascripts/ide/components/file_finder/item.vue b/app/assets/javascripts/ide/components/file_finder/item.vue
index 7d930ce9c01..2f72d6799b6 100644
--- a/app/assets/javascripts/ide/components/file_finder/item.vue
+++ b/app/assets/javascripts/ide/components/file_finder/item.vue
@@ -1,11 +1,13 @@
 <script>
 import fuzzaldrinPlus from 'fuzzaldrin-plus';
 import FileIcon from '../../../vue_shared/components/file_icon.vue';
+import ChangedFileIcon from '../changed_file_icon.vue';
 
 const MAX_PATH_LENGTH = 60;
 
 export default {
   components: {
+    ChangedFileIcon,
     FileIcon,
   },
   props: {
@@ -71,5 +73,13 @@ export default {
       >
       </span>
     </span>
+    <span
+      v-if="file.changed || file.tempFile"
+      class="diff-changed-stats"
+    >
+      <changed-file-icon
+        :file="file"
+      />
+    </span>
   </a>
 </template>
-- 
2.18.1


From 71b80a11fe8dbe88aa0cfd8c648b4618d3488b1f Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Thu, 12 Apr 2018 16:08:02 +0100
Subject: [PATCH 07/23] added specs

order initial dropdown by lastOpenedAt date
---
 .../ide/components/file_finder/index.vue      |  15 +-
 .../javascripts/ide/components/repo_file.vue  |   1 +
 app/assets/javascripts/ide/stores/getters.js  |  16 +-
 .../javascripts/ide/stores/mutations/file.js  |   1 +
 app/assets/javascripts/ide/stores/utils.js    |   1 +
 .../ide/components/file_finder/index_spec.js  | 260 ++++++++++++++++++
 .../ide/components/file_finder/item_spec.js   | 139 ++++++++++
 7 files changed, 423 insertions(+), 10 deletions(-)
 create mode 100644 spec/javascripts/ide/components/file_finder/index_spec.js
 create mode 100644 spec/javascripts/ide/components/file_finder/item_spec.js

diff --git a/app/assets/javascripts/ide/components/file_finder/index.vue b/app/assets/javascripts/ide/components/file_finder/index.vue
index 1568f1bf9e4..5049588e0a4 100644
--- a/app/assets/javascripts/ide/components/file_finder/index.vue
+++ b/app/assets/javascripts/ide/components/file_finder/index.vue
@@ -50,6 +50,7 @@ export default {
           this.searchText = '';
         } else {
           this.focusedIndex = 0;
+
           this.$refs.searchInput.focus();
         }
       });
@@ -65,12 +66,20 @@ export default {
         case 38:
           // UP
           e.preventDefault();
-          if (this.focusedIndex > 0) this.focusedIndex -= 1;
+          if (this.focusedIndex > 0) {
+            this.focusedIndex -= 1;
+          } else {
+            this.focusedIndex = this.filteredBlobsLength - 1;
+          }
           break;
         case 40:
           // DOWN
           e.preventDefault();
-          if (this.focusedIndex < this.filteredBlobsLength - 1) this.focusedIndex += 1;
+          if (this.focusedIndex < this.filteredBlobsLength - 1) {
+            this.focusedIndex += 1;
+          } else {
+            this.focusedIndex = 0;
+          }
           break;
         default:
           break;
@@ -146,7 +155,7 @@ export default {
             v-else
             class="dropdown-menu-empty-itemhidden"
           >
-            <a href="">
+            <a href="#">
               <template v-if="loading">
                 {{ __('Loading...') }}
               </template>
diff --git a/app/assets/javascripts/ide/components/repo_file.vue b/app/assets/javascripts/ide/components/repo_file.vue
index 3b5068d4910..c710cdc8347 100644
--- a/app/assets/javascripts/ide/components/repo_file.vue
+++ b/app/assets/javascripts/ide/components/repo_file.vue
@@ -93,6 +93,7 @@ export default {
             :size="16"
           />
           {{ file.name }}
+          {{ file.lastOpenedAt }}
           <file-status-icon
             :file="file"
           />
diff --git a/app/assets/javascripts/ide/stores/getters.js b/app/assets/javascripts/ide/stores/getters.js
index 07f7e73d8e9..f2cd8551a0a 100644
--- a/app/assets/javascripts/ide/stores/getters.js
+++ b/app/assets/javascripts/ide/stores/getters.js
@@ -37,12 +37,14 @@ export const hasChanges = state => !!state.changedFiles.length;
 export const hasMergeRequest = state => !!state.currentMergeRequestId;
 
 export const allBlobs = state =>
-  Object.keys(state.entries).reduce((acc, key) => {
-    const entry = state.entries[key];
+  Object.keys(state.entries)
+    .reduce((acc, key) => {
+      const entry = state.entries[key];
 
-    if (entry.type === 'blob') {
-      acc.push(entry);
-    }
+      if (entry.type === 'blob') {
+        acc.push(entry);
+      }
 
-    return acc;
-  }, []);
+      return acc;
+    }, [])
+    .sort((a, b) => b.lastOpenedAt > a.lastOpenedAt);
diff --git a/app/assets/javascripts/ide/stores/mutations/file.js b/app/assets/javascripts/ide/stores/mutations/file.js
index eeb14b5490c..66ca6745d14 100644
--- a/app/assets/javascripts/ide/stores/mutations/file.js
+++ b/app/assets/javascripts/ide/stores/mutations/file.js
@@ -4,6 +4,7 @@ export default {
   [types.SET_FILE_ACTIVE](state, { path, active }) {
     Object.assign(state.entries[path], {
       active,
+      lastOpenedAt: new Date().getTime(),
     });
 
     if (active && !state.entries[path].pending) {
diff --git a/app/assets/javascripts/ide/stores/utils.js b/app/assets/javascripts/ide/stores/utils.js
index 05a019de54f..6fa7369b1fa 100644
--- a/app/assets/javascripts/ide/stores/utils.js
+++ b/app/assets/javascripts/ide/stores/utils.js
@@ -41,6 +41,7 @@ export const dataStructure = () => ({
   viewMode: 'edit',
   previewMode: null,
   size: 0,
+  lastOpenedAt: 0,
 });
 
 export const decorateData = entity => {
diff --git a/spec/javascripts/ide/components/file_finder/index_spec.js b/spec/javascripts/ide/components/file_finder/index_spec.js
new file mode 100644
index 00000000000..1181a886749
--- /dev/null
+++ b/spec/javascripts/ide/components/file_finder/index_spec.js
@@ -0,0 +1,260 @@
+import Vue from 'vue';
+import store from '~/ide/stores';
+import FindFileComponent from '~/ide/components/file_finder/index.vue';
+import router from '~/ide/ide_router';
+import { file, resetStore } from '../../helpers';
+import { mountComponentWithStore } from '../../../helpers/vue_mount_component_helper';
+
+describe('IDE File finder item spec', () => {
+  const Component = Vue.extend(FindFileComponent);
+  let vm;
+
+  beforeEach(done => {
+    setFixtures('<div id="app"></div>');
+
+    vm = mountComponentWithStore(Component, {
+      store,
+      el: '#app',
+    });
+
+    setTimeout(done);
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+
+    resetStore(vm.$store);
+  });
+
+  describe('with entries', () => {
+    beforeEach(done => {
+      Vue.set(vm.$store.state.entries, 'folder', {
+        ...file('folder'),
+        path: 'folder',
+        type: 'folder',
+      });
+
+      Vue.set(vm.$store.state.entries, 'index.js', {
+        ...file('index.js'),
+        path: 'index.js',
+        type: 'blob',
+        url: '/index.jsurl',
+      });
+
+      Vue.set(vm.$store.state.entries, 'component.js', {
+        ...file('component.js'),
+        path: 'component.js',
+        type: 'blob',
+      });
+
+      setTimeout(done);
+    });
+
+    it('renders list of blobs', () => {
+      expect(vm.$el.textContent).toContain('index.js');
+      expect(vm.$el.textContent).toContain('component.js');
+      expect(vm.$el.textContent).not.toContain('folder');
+    });
+
+    it('filters entries', done => {
+      vm.searchText = 'index';
+
+      vm.$nextTick(() => {
+        expect(vm.$el.textContent).toContain('index.js');
+        expect(vm.$el.textContent).not.toContain('component.js');
+
+        done();
+      });
+    });
+
+    describe('listShowCount', () => {
+      it('returns 1 when no filtered entries exist', done => {
+        vm.searchText = 'testing 123';
+
+        vm.$nextTick(() => {
+          expect(vm.listShowCount).toBe(1);
+
+          done();
+        });
+      });
+
+      it('returns entries length when not filtered', () => {
+        expect(vm.listShowCount).toBe(2);
+      });
+    });
+
+    describe('listHeight', () => {
+      it('returns 55 when entries exist', () => {
+        expect(vm.listHeight).toBe(55);
+      });
+
+      it('returns 33 when entries dont exist', done => {
+        vm.searchText = 'testing 123';
+
+        vm.$nextTick(() => {
+          expect(vm.listHeight).toBe(33);
+
+          done();
+        });
+      });
+    });
+
+    describe('filteredBlobsLength', () => {
+      it('returns length of filtered blobs', done => {
+        vm.searchText = 'index';
+
+        vm.$nextTick(() => {
+          expect(vm.filteredBlobsLength).toBe(1);
+
+          done();
+        });
+      });
+    });
+
+    describe('watches', () => {
+      describe('searchText', () => {
+        it('resets focusedIndex when updated', done => {
+          vm.focusedIndex = 1;
+          vm.searchText = 'test';
+
+          vm.$nextTick(() => {
+            expect(vm.focusedIndex).toBe(0);
+
+            done();
+          });
+        });
+      });
+
+      describe('fileFindVisible', () => {
+        it('returns searchText when false', done => {
+          vm.searchText = 'test';
+          vm.$store.state.fileFindVisible = true;
+
+          vm
+            .$nextTick()
+            .then(() => {
+              vm.$store.state.fileFindVisible = false;
+            })
+            .then(vm.$nextTick)
+            .then(() => {
+              expect(vm.searchText).toBe('');
+            })
+            .then(done)
+            .catch(done.fail);
+        });
+      });
+    });
+
+    describe('openFile', () => {
+      beforeEach(() => {
+        spyOn(router, 'push');
+        spyOn(vm, 'toggleFileFinder');
+      });
+
+      it('closes file finder', () => {
+        vm.openFile(vm.$store.state.entries['index.js']);
+
+        expect(vm.toggleFileFinder).toHaveBeenCalled();
+      });
+
+      it('pushes to router', () => {
+        vm.openFile(vm.$store.state.entries['index.js']);
+
+        expect(router.push).toHaveBeenCalledWith('/project/index.jsurl');
+      });
+    });
+
+    describe('onKeyup', () => {
+      it('opens file on enter key', done => {
+        const event = new CustomEvent('keyup');
+        event.keyCode = 13;
+
+        spyOn(vm, 'openFile');
+
+        vm.$refs.searchInput.dispatchEvent(event);
+
+        vm.$nextTick(() => {
+          expect(vm.openFile).toHaveBeenCalledWith(vm.$store.state.entries['index.js']);
+
+          done();
+        });
+      });
+
+      it('closes file finder on esc key', done => {
+        const event = new CustomEvent('keyup');
+        event.keyCode = 27;
+
+        spyOn(vm, 'toggleFileFinder');
+
+        vm.$refs.searchInput.dispatchEvent(event);
+
+        vm.$nextTick(() => {
+          expect(vm.toggleFileFinder).toHaveBeenCalled();
+
+          done();
+        });
+      });
+    });
+
+    describe('onKeyDown', () => {
+      let el;
+
+      beforeEach(() => {
+        el = vm.$refs.searchInput;
+      });
+
+      describe('up key', () => {
+        const event = new CustomEvent('keydown');
+        event.keyCode = 38;
+
+        it('resets to last index when at top', () => {
+          el.dispatchEvent(event);
+
+          expect(vm.focusedIndex).toBe(1);
+        });
+
+        it('minus 1 from focusedIndex', () => {
+          vm.focusedIndex = 1;
+
+          el.dispatchEvent(event);
+
+          expect(vm.focusedIndex).toBe(0);
+        });
+      });
+
+      describe('down key', () => {
+        const event = new CustomEvent('keydown');
+        event.keyCode = 40;
+
+        it('resets to first index when at bottom', () => {
+          vm.focusedIndex = 1;
+          el.dispatchEvent(event);
+
+          expect(vm.focusedIndex).toBe(0);
+        });
+
+        it('adds 1 to focusedIndex', () => {
+          el.dispatchEvent(event);
+
+          expect(vm.focusedIndex).toBe(1);
+        });
+      });
+    });
+  });
+
+  describe('without entries', () => {
+    it('renders loading text when loading', done => {
+      store.state.loading = true;
+
+      vm.$nextTick(() => {
+        expect(vm.$el.textContent).toContain('Loading...');
+
+        done();
+      });
+    });
+
+    it('renders no files text', () => {
+      expect(vm.$el.textContent).toContain('No files found.');
+    });
+  });
+});
diff --git a/spec/javascripts/ide/components/file_finder/item_spec.js b/spec/javascripts/ide/components/file_finder/item_spec.js
new file mode 100644
index 00000000000..046412a5294
--- /dev/null
+++ b/spec/javascripts/ide/components/file_finder/item_spec.js
@@ -0,0 +1,139 @@
+import Vue from 'vue';
+import ItemComponent from '~/ide/components/file_finder/item.vue';
+import { file } from '../../helpers';
+import createComponent from '../../../helpers/vue_mount_component_helper';
+
+describe('IDE File finder item spec', () => {
+  const Component = Vue.extend(ItemComponent);
+  let vm;
+  let localFile;
+
+  beforeEach(() => {
+    localFile = {
+      ...file(),
+      name: 'test file',
+      path: 'test/file',
+    };
+
+    vm = createComponent(Component, {
+      file: localFile,
+      focused: true,
+      searchText: '',
+    });
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  it('renders file name & path', () => {
+    expect(vm.$el.textContent).toContain('test file');
+    expect(vm.$el.textContent).toContain('test/file');
+  });
+
+  describe('focused', () => {
+    it('adds is-focused class', () => {
+      expect(vm.$el.classList).toContain('is-focused');
+    });
+
+    it('does not have is-focused class when not focused', done => {
+      vm.focused = false;
+
+      vm.$nextTick(() => {
+        expect(vm.$el.classList).not.toContain('is-focused');
+
+        done();
+      });
+    });
+  });
+
+  describe('changed file icon', () => {
+    it('does not render when not a changed or temp file', () => {
+      expect(vm.$el.querySelector('.diff-changed-stats')).toBe(null);
+    });
+
+    it('renders when a changed file', done => {
+      vm.file.changed = true;
+
+      vm.$nextTick(() => {
+        expect(vm.$el.querySelector('.diff-changed-stats')).not.toBe(null);
+
+        done();
+      });
+    });
+
+    it('renders when a temp file', done => {
+      vm.file.tempFile = true;
+
+      vm.$nextTick(() => {
+        expect(vm.$el.querySelector('.diff-changed-stats')).not.toBe(null);
+
+        done();
+      });
+    });
+  });
+
+  it('emits event when clicked', () => {
+    spyOn(vm, '$emit');
+
+    vm.$el.click();
+
+    expect(vm.$emit).toHaveBeenCalledWith('click', vm.file);
+  });
+
+  describe('path', () => {
+    let el;
+
+    beforeEach(done => {
+      vm.searchText = 'file';
+
+      el = vm.$el.querySelector('.diff-changed-file-path');
+
+      vm.$nextTick(done);
+    });
+
+    it('highlights text', () => {
+      expect(el.querySelectorAll('.highlighted').length).toBe(4);
+    });
+
+    it('adds ellipsis to long text', done => {
+      vm.file.path = new Array(70)
+        .fill()
+        .map((_, i) => `${i}-`)
+        .join('');
+
+      vm.$nextTick(() => {
+        expect(el.textContent).toBe(`...${vm.file.path.substr(vm.file.path.length - 60)}`);
+        done();
+      });
+    });
+  });
+
+  describe('name', () => {
+    let el;
+
+    beforeEach(done => {
+      vm.searchText = 'file';
+
+      el = vm.$el.querySelector('.diff-changed-file-name');
+
+      vm.$nextTick(done);
+    });
+
+    it('highlights text', () => {
+      expect(el.querySelectorAll('.highlighted').length).toBe(4);
+    });
+
+    it('does not add ellipsis to long text', done => {
+      vm.file.name = new Array(70)
+        .fill()
+        .map((_, i) => `${i}-`)
+        .join('');
+
+      vm.$nextTick(() => {
+        expect(el.textContent).not.toBe(`...${vm.file.name.substr(vm.file.name.length - 60)}`);
+        done();
+      });
+    });
+  });
+});
-- 
2.18.1


From e51fde9a08638f127ffbaf53e174f1aa994e325d Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Thu, 12 Apr 2018 16:15:09 +0100
Subject: [PATCH 08/23] removed output that wasn't meant to be there
 :see_no_evil:

---
 app/assets/javascripts/ide/components/repo_file.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/app/assets/javascripts/ide/components/repo_file.vue b/app/assets/javascripts/ide/components/repo_file.vue
index c710cdc8347..3b5068d4910 100644
--- a/app/assets/javascripts/ide/components/repo_file.vue
+++ b/app/assets/javascripts/ide/components/repo_file.vue
@@ -93,7 +93,6 @@ export default {
             :size="16"
           />
           {{ file.name }}
-          {{ file.lastOpenedAt }}
           <file-status-icon
             :file="file"
           />
-- 
2.18.1


From cacc8f40a59f3b40aa9de853a84c0688a8f6f8e4 Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Thu, 12 Apr 2018 16:45:27 +0100
Subject: [PATCH 09/23] fixes the sort to correctly order the array

---
 .../ide/components/file_finder/index.vue         |  3 ++-
 app/assets/javascripts/ide/stores/getters.js     | 16 +++++++---------
 2 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/app/assets/javascripts/ide/components/file_finder/index.vue b/app/assets/javascripts/ide/components/file_finder/index.vue
index 5049588e0a4..d7bba6252e8 100644
--- a/app/assets/javascripts/ide/components/file_finder/index.vue
+++ b/app/assets/javascripts/ide/components/file_finder/index.vue
@@ -24,7 +24,8 @@ export default {
     filteredBlobs() {
       const searchText = this.searchText.trim();
 
-      if (searchText === '') return this.allBlobs.slice(0, MAX_RESULTS);
+      if (searchText === '')
+        return this.allBlobs.sort((a, b) => b.lastOpenedAt - a.lastOpenedAt).slice(0, MAX_RESULTS);
 
       return fuzzaldrinPlus.filter(this.allBlobs, searchText, {
         key: 'path',
diff --git a/app/assets/javascripts/ide/stores/getters.js b/app/assets/javascripts/ide/stores/getters.js
index f2cd8551a0a..07f7e73d8e9 100644
--- a/app/assets/javascripts/ide/stores/getters.js
+++ b/app/assets/javascripts/ide/stores/getters.js
@@ -37,14 +37,12 @@ export const hasChanges = state => !!state.changedFiles.length;
 export const hasMergeRequest = state => !!state.currentMergeRequestId;
 
 export const allBlobs = state =>
-  Object.keys(state.entries)
-    .reduce((acc, key) => {
-      const entry = state.entries[key];
+  Object.keys(state.entries).reduce((acc, key) => {
+    const entry = state.entries[key];
 
-      if (entry.type === 'blob') {
-        acc.push(entry);
-      }
+    if (entry.type === 'blob') {
+      acc.push(entry);
+    }
 
-      return acc;
-    }, [])
-    .sort((a, b) => b.lastOpenedAt > a.lastOpenedAt);
+    return acc;
+  }, []);
-- 
2.18.1


From 066aa5b30e8cdbd01882314ee052bbc29f711f59 Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Thu, 12 Apr 2018 17:07:14 +0100
Subject: [PATCH 10/23] fixed eslint

---
 .../ide/components/file_finder/index.vue         |  3 +--
 app/assets/javascripts/ide/stores/getters.js     | 16 +++++++++-------
 2 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/app/assets/javascripts/ide/components/file_finder/index.vue b/app/assets/javascripts/ide/components/file_finder/index.vue
index d7bba6252e8..5049588e0a4 100644
--- a/app/assets/javascripts/ide/components/file_finder/index.vue
+++ b/app/assets/javascripts/ide/components/file_finder/index.vue
@@ -24,8 +24,7 @@ export default {
     filteredBlobs() {
       const searchText = this.searchText.trim();
 
-      if (searchText === '')
-        return this.allBlobs.sort((a, b) => b.lastOpenedAt - a.lastOpenedAt).slice(0, MAX_RESULTS);
+      if (searchText === '') return this.allBlobs.slice(0, MAX_RESULTS);
 
       return fuzzaldrinPlus.filter(this.allBlobs, searchText, {
         key: 'path',
diff --git a/app/assets/javascripts/ide/stores/getters.js b/app/assets/javascripts/ide/stores/getters.js
index 07f7e73d8e9..14658c98d0b 100644
--- a/app/assets/javascripts/ide/stores/getters.js
+++ b/app/assets/javascripts/ide/stores/getters.js
@@ -37,12 +37,14 @@ export const hasChanges = state => !!state.changedFiles.length;
 export const hasMergeRequest = state => !!state.currentMergeRequestId;
 
 export const allBlobs = state =>
-  Object.keys(state.entries).reduce((acc, key) => {
-    const entry = state.entries[key];
+  Object.keys(state.entries)
+    .reduce((acc, key) => {
+      const entry = state.entries[key];
 
-    if (entry.type === 'blob') {
-      acc.push(entry);
-    }
+      if (entry.type === 'blob') {
+        acc.push(entry);
+      }
 
-    return acc;
-  }, []);
+      return acc;
+    }, [])
+    .sort((a, b) => b.lastOpenedAt - a.lastOpenedAt);
-- 
2.18.1


From a35391c977b7cfcd63ba5c9d110794608485bafd Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Fri, 13 Apr 2018 10:43:16 +0100
Subject: [PATCH 11/23] added specs to store added clear button to search input

---
 .../ide/components/file_finder/index.vue      | 22 ++++++++++
 .../ide/components/file_finder/item.vue       |  8 ++--
 .../javascripts/ide/stores/mutation_types.js  |  2 +-
 changelogs/unreleased/ide-file-finder.yml     |  5 +++
 .../ide/components/file_finder/index_spec.js  | 44 +++++++++++++++++++
 spec/javascripts/ide/stores/actions_spec.js   | 19 ++++++--
 spec/javascripts/ide/stores/mutations_spec.js |  8 ++++
 7 files changed, 101 insertions(+), 7 deletions(-)
 create mode 100644 changelogs/unreleased/ide-file-finder.yml

diff --git a/app/assets/javascripts/ide/components/file_finder/index.vue b/app/assets/javascripts/ide/components/file_finder/index.vue
index 5049588e0a4..864c9234979 100644
--- a/app/assets/javascripts/ide/components/file_finder/index.vue
+++ b/app/assets/javascripts/ide/components/file_finder/index.vue
@@ -42,6 +42,9 @@ export default {
     listHeight() {
       return this.filteredBlobsLength ? 55 : 33;
     },
+    showClearInputButton() {
+      return this.searchText.trim() !== '';
+    },
   },
   watch: {
     fileFindVisible() {
@@ -61,6 +64,13 @@ export default {
   },
   methods: {
     ...mapActions(['toggleFileFinder']),
+    clearSearchInput() {
+      this.searchText = '';
+
+      this.$nextTick(() => {
+        this.$refs.searchInput.focus();
+      });
+    },
     onKeydown(e) {
       switch (e.keyCode) {
         case 38:
@@ -129,6 +139,18 @@ export default {
         <i
           aria-hidden="true"
           class="fa fa-search dropdown-input-search"
+          :class="{
+            hidden: showClearInputButton
+          }"
+        ></i>
+        <i
+          role="button"
+          aria-hidden="true"
+          class="fa fa-times dropdown-input-clear"
+          :class="{
+            show: showClearInputButton
+          }"
+          @click="clearSearchInput"
         ></i>
       </div>
       <div>
diff --git a/app/assets/javascripts/ide/components/file_finder/item.vue b/app/assets/javascripts/ide/components/file_finder/item.vue
index 2f72d6799b6..af4d07ef543 100644
--- a/app/assets/javascripts/ide/components/file_finder/item.vue
+++ b/app/assets/javascripts/ide/components/file_finder/item.vue
@@ -1,4 +1,5 @@
 <script>
+import { escape } from 'underscore';
 import fuzzaldrinPlus from 'fuzzaldrin-plus';
 import FileIcon from '../../../vue_shared/components/file_icon.vue';
 import ChangedFileIcon from '../changed_file_icon.vue';
@@ -29,10 +30,11 @@ export default {
       this.$emit('click', this.file);
     },
     highlightText(text, addEllipsis) {
+      const escapedText = escape(text);
       const maxText =
-        text.length < MAX_PATH_LENGTH || !addEllipsis
-          ? text
-          : `...${text.substr(text.length - MAX_PATH_LENGTH)}`;
+        escapedText.length < MAX_PATH_LENGTH || !addEllipsis
+          ? escapedText
+          : `...${escapedText.substr(escapedText.length - MAX_PATH_LENGTH)}`;
       const occurrences = fuzzaldrinPlus.match(maxText, this.searchText);
 
       return maxText
diff --git a/app/assets/javascripts/ide/stores/mutation_types.js b/app/assets/javascripts/ide/stores/mutation_types.js
index d64908ea971..742bd40f25d 100644
--- a/app/assets/javascripts/ide/stores/mutation_types.js
+++ b/app/assets/javascripts/ide/stores/mutation_types.js
@@ -54,4 +54,4 @@ export const UPDATE_DELAY_VIEWER_CHANGE = 'UPDATE_DELAY_VIEWER_CHANGE';
 export const ADD_PENDING_TAB = 'ADD_PENDING_TAB';
 export const REMOVE_PENDING_TAB = 'REMOVE_PENDING_TAB';
 
-export const TOGGLE_FILE_FINDER = 'SHOW_FILE_FINDER';
+export const TOGGLE_FILE_FINDER = 'TOGGLE_FILE_FINDER';
diff --git a/changelogs/unreleased/ide-file-finder.yml b/changelogs/unreleased/ide-file-finder.yml
new file mode 100644
index 00000000000..252dd3a30c4
--- /dev/null
+++ b/changelogs/unreleased/ide-file-finder.yml
@@ -0,0 +1,5 @@
+---
+title: Added fuzzy file finder to web IDE
+merge_request:
+author:
+type: added
diff --git a/spec/javascripts/ide/components/file_finder/index_spec.js b/spec/javascripts/ide/components/file_finder/index_spec.js
index 1181a886749..6dbe7b84d4e 100644
--- a/spec/javascripts/ide/components/file_finder/index_spec.js
+++ b/spec/javascripts/ide/components/file_finder/index_spec.js
@@ -67,6 +67,50 @@ describe('IDE File finder item spec', () => {
       });
     });
 
+    it('shows clear button when searchText is not empty', done => {
+      vm.searchText = 'index';
+
+      vm.$nextTick(() => {
+        expect(vm.$el.querySelector('.dropdown-input-clear').classList).toContain('show');
+        expect(vm.$el.querySelector('.dropdown-input-search').classList).toContain('hidden');
+
+        done();
+      });
+    });
+
+    it('clear button resets searchText', done => {
+      vm.searchText = 'index';
+
+      vm
+        .$nextTick()
+        .then(() => {
+          vm.$el.querySelector('.dropdown-input-clear').click();
+        })
+        .then(vm.$nextTick)
+        .then(() => {
+          expect(vm.searchText).toBe('');
+        })
+        .then(done)
+        .catch(done.fail);
+    });
+
+    it('clear button focues search input', done => {
+      spyOn(vm.$refs.searchInput, 'focus');
+      vm.searchText = 'index';
+
+      vm
+        .$nextTick()
+        .then(() => {
+          vm.$el.querySelector('.dropdown-input-clear').click();
+        })
+        .then(vm.$nextTick)
+        .then(() => {
+          expect(vm.$refs.searchInput.focus).toHaveBeenCalled();
+        })
+        .then(done)
+        .catch(done.fail);
+    });
+
     describe('listShowCount', () => {
       it('returns 1 when no filtered entries exist', done => {
         vm.searchText = 'testing 123';
diff --git a/spec/javascripts/ide/stores/actions_spec.js b/spec/javascripts/ide/stores/actions_spec.js
index cec572f4507..87471f7a92f 100644
--- a/spec/javascripts/ide/stores/actions_spec.js
+++ b/spec/javascripts/ide/stores/actions_spec.js
@@ -1,7 +1,9 @@
 import * as urlUtils from '~/lib/utils/url_utility';
 import store from '~/ide/stores';
+import * as actions from '~/ide/stores/actions';
 import router from '~/ide/ide_router';
 import { resetStore, file } from '../helpers';
+import testAction from '../../helpers/vuex_action_helper';
 
 describe('Multi-file store actions', () => {
   beforeEach(() => {
@@ -191,9 +193,7 @@ describe('Multi-file store actions', () => {
           })
           .then(f => {
             expect(f.tempFile).toBeTruthy();
-            expect(store.state.trees['abcproject/mybranch'].tree.length).toBe(
-              1,
-            );
+            expect(store.state.trees['abcproject/mybranch'].tree.length).toBe(1);
 
             done();
           })
@@ -303,4 +303,17 @@ describe('Multi-file store actions', () => {
         .catch(done.fail);
     });
   });
+
+  describe('toggleFileFinder', () => {
+    it('commits TOGGLE_FILE_FINDER', done => {
+      testAction(
+        actions.toggleFileFinder,
+        true,
+        null,
+        [{ type: 'TOGGLE_FILE_FINDER', payload: true }],
+        [],
+        done,
+      );
+    });
+  });
 });
diff --git a/spec/javascripts/ide/stores/mutations_spec.js b/spec/javascripts/ide/stores/mutations_spec.js
index 38162a470ad..9edfc080bec 100644
--- a/spec/javascripts/ide/stores/mutations_spec.js
+++ b/spec/javascripts/ide/stores/mutations_spec.js
@@ -76,4 +76,12 @@ describe('Multi-file store mutations', () => {
       expect(localState.viewer).toBe('diff');
     });
   });
+
+  describe('TOGGLE_FILE_FINDER', () => {
+    it('updates fileFindVisible', () => {
+      mutations.TOGGLE_FILE_FINDER(localState, true);
+
+      expect(localState.fileFindVisible).toBe(true);
+    });
+  });
 });
-- 
2.18.1


From 4a22a97e7899db2a35dd6bd0591b82feaa2d58b9 Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Fri, 13 Apr 2018 11:08:03 +0100
Subject: [PATCH 12/23] added specs to stores allBlobs getter

---
 spec/javascripts/ide/stores/getters_spec.js | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/spec/javascripts/ide/stores/getters_spec.js b/spec/javascripts/ide/stores/getters_spec.js
index 33733b97dff..4a7d9a05402 100644
--- a/spec/javascripts/ide/stores/getters_spec.js
+++ b/spec/javascripts/ide/stores/getters_spec.js
@@ -72,4 +72,24 @@ describe('IDE store getters', () => {
       expect(getters.currentMergeRequest(localState)).toBeNull();
     });
   });
+
+  describe('allBlobs', () => {
+    beforeEach(() => {
+      Object.assign(localState.entries, {
+        index: { type: 'blob', name: 'index', lastOpenedAt: 0 },
+        app: { type: 'blob', name: 'blob', lastOpenedAt: 0 },
+        folder: { type: 'folder', name: 'folder', lastOpenedAt: 0 },
+      });
+    });
+
+    it('returns only blobs', () => {
+      expect(getters.allBlobs(localState).length).toBe(2);
+    });
+
+    it('returns list sorted by lastOpenedAt', () => {
+      localState.entries.app.lastOpenedAt = new Date().getTime();
+
+      expect(getters.allBlobs(localState)[0].name).toBe('blob');
+    });
+  });
 });
-- 
2.18.1


From 7c9b2b0444fb82d015d8683839f955e2ca94ff80 Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Fri, 13 Apr 2018 17:03:38 +0100
Subject: [PATCH 13/23] order files by lastOpenedAt date even after filtering

added stopCallback to allow toggling with cmd+p when finder is open
changed implementation of mouseover
---
 .../ide/components/file_finder/index.vue      | 30 +++++++++++++++----
 .../ide/components/file_finder/item.vue       |  8 +++++
 app/assets/javascripts/ide/components/ide.vue | 13 +++++++-
 3 files changed, 45 insertions(+), 6 deletions(-)

diff --git a/app/assets/javascripts/ide/components/file_finder/index.vue b/app/assets/javascripts/ide/components/file_finder/index.vue
index 864c9234979..a7b1911fa72 100644
--- a/app/assets/javascripts/ide/components/file_finder/index.vue
+++ b/app/assets/javascripts/ide/components/file_finder/index.vue
@@ -16,6 +16,7 @@ export default {
     return {
       focusedIndex: 0,
       searchText: '',
+      mouseOver: false,
     };
   },
   computed: {
@@ -26,10 +27,12 @@ export default {
 
       if (searchText === '') return this.allBlobs.slice(0, MAX_RESULTS);
 
-      return fuzzaldrinPlus.filter(this.allBlobs, searchText, {
-        key: 'path',
-        maxResults: MAX_RESULTS,
-      });
+      return fuzzaldrinPlus
+        .filter(this.allBlobs, searchText, {
+          key: 'path',
+          maxResults: MAX_RESULTS,
+        })
+        .sort((a, b) => b.lastOpenedAt - a.lastOpenedAt);
     },
     filteredBlobsLength() {
       return this.filteredBlobs.length;
@@ -61,6 +64,15 @@ export default {
     searchText() {
       this.focusedIndex = 0;
     },
+    focusedIndex() {
+      if (!this.mouseOver) {
+        this.$nextTick(() => {
+          const el = this.$refs.virtualScrollList.$el;
+
+          el.scrollTop = this.focusedIndex * 55;
+        });
+      }
+    },
   },
   methods: {
     ...mapActions(['toggleFileFinder']),
@@ -76,6 +88,7 @@ export default {
         case 38:
           // UP
           e.preventDefault();
+          this.mouseOver = false;
           if (this.focusedIndex > 0) {
             this.focusedIndex -= 1;
           } else {
@@ -85,6 +98,7 @@ export default {
         case 40:
           // DOWN
           e.preventDefault();
+          this.mouseOver = false;
           if (this.focusedIndex < this.filteredBlobsLength - 1) {
             this.focusedIndex += 1;
           } else {
@@ -113,6 +127,10 @@ export default {
       this.toggleFileFinder(false);
       router.push(`/project${file.url}`);
     },
+    onMouseOver(index) {
+      this.mouseOver = true;
+      this.focusedIndex = index;
+    },
   },
 };
 </script>
@@ -157,8 +175,8 @@ export default {
         <virtual-list
           :size="listHeight"
           :remain="listShowCount"
-          :start="focusedIndex"
           wtag="ul"
+          ref="virtualScrollList"
         >
           <template v-if="filteredBlobsLength">
             <li
@@ -169,7 +187,9 @@ export default {
                 :file="file"
                 :search-text="searchText"
                 :focused="index === focusedIndex"
+                :index="index"
                 @click="openFile"
+                @mouseover="onMouseOver"
               />
             </li>
           </template>
diff --git a/app/assets/javascripts/ide/components/file_finder/item.vue b/app/assets/javascripts/ide/components/file_finder/item.vue
index af4d07ef543..e017391d318 100644
--- a/app/assets/javascripts/ide/components/file_finder/item.vue
+++ b/app/assets/javascripts/ide/components/file_finder/item.vue
@@ -24,11 +24,18 @@ export default {
       type: String,
       required: true,
     },
+    index: {
+      type: Number,
+      required: true,
+    },
   },
   methods: {
     clickRow() {
       this.$emit('click', this.file);
     },
+    mouseOverRow() {
+      this.$emit('mouseover', this.index);
+    },
     highlightText(text, addEllipsis) {
       const escapedText = escape(text);
       const maxText =
@@ -57,6 +64,7 @@ export default {
       'is-focused': focused,
     }"
     @click.prevent="clickRow"
+    @mouseover="mouseOverRow"
   >
     <file-icon
       :file-name="file.name"
diff --git a/app/assets/javascripts/ide/components/ide.vue b/app/assets/javascripts/ide/components/ide.vue
index 1cf54920d63..1dc162d2eb4 100644
--- a/app/assets/javascripts/ide/components/ide.vue
+++ b/app/assets/javascripts/ide/components/ide.vue
@@ -54,8 +54,19 @@ export default {
 
     Mousetrap.bind(['t', 'command+p', 'ctrl+p'], e => {
       e.preventDefault();
-      this.toggleFileFinder(true);
+      this.toggleFileFinder(!this.fileFindVisible);
     });
+
+    const originalStopCallback = Mousetrap.stopCallback;
+    Mousetrap.stopCallback = (e, el, combo) => {
+      if (combo === 't' && el.classList.contains('dropdown-input-field')) {
+        return true;
+      } else if (combo === 'command+p' || combo === 'ctrl+p') {
+        return false;
+      }
+
+      return originalStopCallback(e, el, combo);
+    };
   },
   methods: {
     ...mapActions(['toggleFileFinder']),
-- 
2.18.1


From 0281fbc1ca991f95c0bd4df9dd4e906d5d84c31f Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Fri, 13 Apr 2018 18:14:31 +0100
Subject: [PATCH 14/23] fixed item spec

---
 spec/javascripts/ide/components/file_finder/index_spec.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/spec/javascripts/ide/components/file_finder/index_spec.js b/spec/javascripts/ide/components/file_finder/index_spec.js
index 6dbe7b84d4e..070a25fc781 100644
--- a/spec/javascripts/ide/components/file_finder/index_spec.js
+++ b/spec/javascripts/ide/components/file_finder/index_spec.js
@@ -15,6 +15,9 @@ describe('IDE File finder item spec', () => {
     vm = mountComponentWithStore(Component, {
       store,
       el: '#app',
+      props: {
+        index: 0,
+      },
     });
 
     setTimeout(done);
-- 
2.18.1


From ea3a0d3ead3dfcbe82a5b74236706aaf6e8e1873 Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Sun, 15 Apr 2018 09:56:45 +0100
Subject: [PATCH 15/23] remove v-html & use vdom instead

---
 .../ide/components/file_finder/item.vue       | 49 ++++++++++++-------
 1 file changed, 31 insertions(+), 18 deletions(-)

diff --git a/app/assets/javascripts/ide/components/file_finder/item.vue b/app/assets/javascripts/ide/components/file_finder/item.vue
index e017391d318..030c50b4dae 100644
--- a/app/assets/javascripts/ide/components/file_finder/item.vue
+++ b/app/assets/javascripts/ide/components/file_finder/item.vue
@@ -29,6 +29,19 @@ export default {
       required: true,
     },
   },
+  computed: {
+    pathWithEllipsis() {
+      return this.file.path.length < MAX_PATH_LENGTH || !addEllipsis
+        ? this.file.path
+        : `...${this.file.path.substr(this.file.path.length - MAX_PATH_LENGTH)}`;
+    },
+    nameSearchTextOccurences() {
+      return fuzzaldrinPlus.match(this.file.name, this.searchText);
+    },
+    pathSearchTextOccurences() {
+      return fuzzaldrinPlus.match(this.pathWithEllipsis, this.searchText);
+    },
+  },
   methods: {
     clickRow() {
       this.$emit('click', this.file);
@@ -36,22 +49,6 @@ export default {
     mouseOverRow() {
       this.$emit('mouseover', this.index);
     },
-    highlightText(text, addEllipsis) {
-      const escapedText = escape(text);
-      const maxText =
-        escapedText.length < MAX_PATH_LENGTH || !addEllipsis
-          ? escapedText
-          : `...${escapedText.substr(escapedText.length - MAX_PATH_LENGTH)}`;
-      const occurrences = fuzzaldrinPlus.match(maxText, this.searchText);
-
-      return maxText
-        .split('')
-        .map(
-          (char, i) =>
-            `<span class="${occurrences.indexOf(i) >= 0 ? 'highlighted' : ''}">${char}</span>`,
-        )
-        .join('');
-    },
   },
 };
 </script>
@@ -74,13 +71,29 @@ export default {
     <span class="diff-changed-file-content append-right-8">
       <strong
         class="diff-changed-file-name"
-        v-html="highlightText(file.name, false)"
       >
+        <span
+          v-for="(char, index) in file.name.split('')"
+          :key="index + char"
+          :class="{
+            highlighted: nameSearchTextOccurences.indexOf(index) >= 0,
+          }"
+          v-text="char"
+        >
+        </span>
       </strong>
       <span
         class="diff-changed-file-path prepend-top-5"
-        v-html="highlightText(file.path, true)"
       >
+        <span
+          v-for="(char, index) in pathWithEllipsis.split('')"
+          :key="index + char"
+          :class="{
+            highlighted: pathSearchTextOccurences.indexOf(index) >= 0,
+          }"
+          v-text="char"
+        >
+        </span>
       </span>
     </span>
     <span
-- 
2.18.1


From 8a076c1b5b66686eabc0dc64a1e1200a872e3fd6 Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Mon, 16 Apr 2018 09:52:33 +0100
Subject: [PATCH 16/23] fixed eslint & karma specs

---
 app/assets/javascripts/ide/components/file_finder/item.vue | 3 +--
 spec/javascripts/ide/components/file_finder/item_spec.js   | 1 +
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/assets/javascripts/ide/components/file_finder/item.vue b/app/assets/javascripts/ide/components/file_finder/item.vue
index 030c50b4dae..3941a247234 100644
--- a/app/assets/javascripts/ide/components/file_finder/item.vue
+++ b/app/assets/javascripts/ide/components/file_finder/item.vue
@@ -1,5 +1,4 @@
 <script>
-import { escape } from 'underscore';
 import fuzzaldrinPlus from 'fuzzaldrin-plus';
 import FileIcon from '../../../vue_shared/components/file_icon.vue';
 import ChangedFileIcon from '../changed_file_icon.vue';
@@ -31,7 +30,7 @@ export default {
   },
   computed: {
     pathWithEllipsis() {
-      return this.file.path.length < MAX_PATH_LENGTH || !addEllipsis
+      return this.file.path.length < MAX_PATH_LENGTH
         ? this.file.path
         : `...${this.file.path.substr(this.file.path.length - MAX_PATH_LENGTH)}`;
     },
diff --git a/spec/javascripts/ide/components/file_finder/item_spec.js b/spec/javascripts/ide/components/file_finder/item_spec.js
index 046412a5294..0f1116c6912 100644
--- a/spec/javascripts/ide/components/file_finder/item_spec.js
+++ b/spec/javascripts/ide/components/file_finder/item_spec.js
@@ -19,6 +19,7 @@ describe('IDE File finder item spec', () => {
       file: localFile,
       focused: true,
       searchText: '',
+      index: 0,
     });
   });
 
-- 
2.18.1


From d9262b79fef50b5d022c0422f41d66518df97ec8 Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Mon, 16 Apr 2018 14:22:13 +0100
Subject: [PATCH 17/23] created constants file added specs for ide.vue
 Mousetrap binds

---
 .../ide/components/file_finder/index.vue      |  39 ++---
 .../ide/components/file_finder/item.vue       |   8 +-
 app/assets/javascripts/ide/components/ide.vue | 135 +++++++++---------
 app/assets/javascripts/ide/constants.js       |   8 ++
 .../ide/components/file_finder/index_spec.js  |   9 +-
 spec/javascripts/ide/components/ide_spec.js   |  65 +++++++++
 6 files changed, 175 insertions(+), 89 deletions(-)
 create mode 100644 app/assets/javascripts/ide/constants.js

diff --git a/app/assets/javascripts/ide/components/file_finder/index.vue b/app/assets/javascripts/ide/components/file_finder/index.vue
index a7b1911fa72..843632c5c70 100644
--- a/app/assets/javascripts/ide/components/file_finder/index.vue
+++ b/app/assets/javascripts/ide/components/file_finder/index.vue
@@ -4,8 +4,15 @@ import fuzzaldrinPlus from 'fuzzaldrin-plus';
 import VirtualList from 'vue-virtual-scroll-list';
 import Item from './item.vue';
 import router from '../../ide_router';
-
-const MAX_RESULTS = 40;
+import {
+  MAX_FILE_FINDER_RESULTS,
+  FILE_FINDER_ROW_HEIGHT,
+  FILE_FINDER_EMPTY_ROW_HEIGHT,
+  UP_KEY_CODE,
+  DOWN_KEY_CODE,
+  ENTER_KEY_CODE,
+  ESC_KEY_CODE,
+} from '../../constants';
 
 export default {
   components: {
@@ -25,12 +32,14 @@ export default {
     filteredBlobs() {
       const searchText = this.searchText.trim();
 
-      if (searchText === '') return this.allBlobs.slice(0, MAX_RESULTS);
+      if (searchText === '') {
+        return this.allBlobs.slice(0, MAX_FILE_FINDER_RESULTS);
+      }
 
       return fuzzaldrinPlus
         .filter(this.allBlobs, searchText, {
           key: 'path',
-          maxResults: MAX_RESULTS,
+          maxResults: MAX_FILE_FINDER_RESULTS,
         })
         .sort((a, b) => b.lastOpenedAt - a.lastOpenedAt);
     },
@@ -38,12 +47,10 @@ export default {
       return this.filteredBlobs.length;
     },
     listShowCount() {
-      if (!this.filteredBlobsLength) return 1;
-
-      return this.filteredBlobsLength > 5 ? 5 : this.filteredBlobsLength;
+      return this.filteredBlobsLength ? Math.min(this.filteredBlobsLength, 5) : 1;
     },
     listHeight() {
-      return this.filteredBlobsLength ? 55 : 33;
+      return this.filteredBlobsLength ? FILE_FINDER_ROW_HEIGHT : FILE_FINDER_EMPTY_ROW_HEIGHT;
     },
     showClearInputButton() {
       return this.searchText.trim() !== '';
@@ -57,7 +64,9 @@ export default {
         } else {
           this.focusedIndex = 0;
 
-          this.$refs.searchInput.focus();
+          if (this.$refs.searchInput) {
+            this.$refs.searchInput.focus();
+          }
         }
       });
     },
@@ -85,8 +94,7 @@ export default {
     },
     onKeydown(e) {
       switch (e.keyCode) {
-        case 38:
-          // UP
+        case UP_KEY_CODE:
           e.preventDefault();
           this.mouseOver = false;
           if (this.focusedIndex > 0) {
@@ -95,8 +103,7 @@ export default {
             this.focusedIndex = this.filteredBlobsLength - 1;
           }
           break;
-        case 40:
-          // DOWN
+        case DOWN_KEY_CODE:
           e.preventDefault();
           this.mouseOver = false;
           if (this.focusedIndex < this.filteredBlobsLength - 1) {
@@ -111,12 +118,10 @@ export default {
     },
     onKeyup(e) {
       switch (e.keyCode) {
-        case 13:
-          // ENTER
+        case ENTER_KEY_CODE:
           this.openFile(this.filteredBlobs[this.focusedIndex]);
           break;
-        case 27:
-          // ESC
+        case ESC_KEY_CODE:
           this.toggleFileFinder(false);
           break;
         default:
diff --git a/app/assets/javascripts/ide/components/file_finder/item.vue b/app/assets/javascripts/ide/components/file_finder/item.vue
index 3941a247234..0170f4837f8 100644
--- a/app/assets/javascripts/ide/components/file_finder/item.vue
+++ b/app/assets/javascripts/ide/components/file_finder/item.vue
@@ -30,9 +30,11 @@ export default {
   },
   computed: {
     pathWithEllipsis() {
-      return this.file.path.length < MAX_PATH_LENGTH
-        ? this.file.path
-        : `...${this.file.path.substr(this.file.path.length - MAX_PATH_LENGTH)}`;
+      const path = this.file.path;
+
+      return path.length < MAX_PATH_LENGTH
+        ? path
+        : `...${path.substr(path.length - MAX_PATH_LENGTH)}`;
     },
     nameSearchTextOccurences() {
       return fuzzaldrinPlus.match(this.file.name, this.searchText);
diff --git a/app/assets/javascripts/ide/components/ide.vue b/app/assets/javascripts/ide/components/ide.vue
index 1dc162d2eb4..0274fc7d299 100644
--- a/app/assets/javascripts/ide/components/ide.vue
+++ b/app/assets/javascripts/ide/components/ide.vue
@@ -1,77 +1,82 @@
 <script>
-import { mapActions, mapState, mapGetters } from 'vuex';
-import Mousetrap from 'mousetrap';
-import ideSidebar from './ide_side_bar.vue';
-import ideContextbar from './ide_context_bar.vue';
-import repoTabs from './repo_tabs.vue';
-import ideStatusBar from './ide_status_bar.vue';
-import repoEditor from './repo_editor.vue';
-import FindFile from './file_finder/index.vue';
+  import { mapActions, mapState, mapGetters } from 'vuex';
+  import Mousetrap from 'mousetrap';
+  import ideSidebar from './ide_side_bar.vue';
+  import ideContextbar from './ide_context_bar.vue';
+  import repoTabs from './repo_tabs.vue';
+  import ideStatusBar from './ide_status_bar.vue';
+  import repoEditor from './repo_editor.vue';
+  import FindFile from './file_finder/index.vue';
 
-export default {
-  components: {
-    ideSidebar,
-    ideContextbar,
-    repoTabs,
-    ideStatusBar,
-    repoEditor,
-    FindFile,
-  },
-  props: {
-    emptyStateSvgPath: {
-      type: String,
-      required: true,
+  const originalStopCallback = Mousetrap.stopCallback;
+
+  export default {
+    components: {
+      ideSidebar,
+      ideContextbar,
+      repoTabs,
+      ideStatusBar,
+      repoEditor,
+      FindFile,
     },
-    noChangesStateSvgPath: {
-      type: String,
-      required: true,
+    props: {
+      emptyStateSvgPath: {
+        type: String,
+        required: true,
+      },
+      noChangesStateSvgPath: {
+        type: String,
+        required: true,
+      },
+      committedStateSvgPath: {
+        type: String,
+        required: true,
+      },
     },
-    committedStateSvgPath: {
-      type: String,
-      required: true,
+    computed: {
+      ...mapState([
+        'changedFiles',
+        'openFiles',
+        'viewer',
+        'currentMergeRequestId',
+        'fileFindVisible',
+      ]),
+      ...mapGetters(['activeFile', 'hasChanges']),
     },
-  },
-  computed: {
-    ...mapState([
-      'changedFiles',
-      'openFiles',
-      'viewer',
-      'currentMergeRequestId',
-      'fileFindVisible',
-    ]),
-    ...mapGetters(['activeFile', 'hasChanges']),
-  },
-  mounted() {
-    const returnValue = 'Are you sure you want to lose unsaved changes?';
-    window.onbeforeunload = e => {
-      if (!this.changedFiles.length) return undefined;
+    mounted() {
+      const returnValue = 'Are you sure you want to lose unsaved changes?';
+      window.onbeforeunload = e => {
+        if (!this.changedFiles.length) return undefined;
 
-      Object.assign(e, {
-        returnValue,
-      });
-      return returnValue;
-    };
+        Object.assign(e, {
+          returnValue,
+        });
+        return returnValue;
+      };
+
+      Mousetrap.bind(['t', 'command+p', 'ctrl+p'], e => {
+        if (e.preventDefault) {
+          e.preventDefault();
+        }
 
-    Mousetrap.bind(['t', 'command+p', 'ctrl+p'], e => {
-      e.preventDefault();
-      this.toggleFileFinder(!this.fileFindVisible);
-    });
+        this.toggleFileFinder(!this.fileFindVisible);
+      });
 
-    const originalStopCallback = Mousetrap.stopCallback;
-    Mousetrap.stopCallback = (e, el, combo) => {
-      if (combo === 't' && el.classList.contains('dropdown-input-field')) {
-        return true;
-      } else if (combo === 'command+p' || combo === 'ctrl+p') {
-        return false;
-      }
+      Mousetrap.stopCallback = (e, el, combo) => this.mousetrapStopCallback(e, el, combo);
+    },
+    methods: {
+      ...mapActions(['toggleFileFinder']),
+      mousetrapStopCallback(e, el, combo) {
+        if (combo === 't' && el.classList.contains('dropdown-input-field')) {
+          return true;
+        } else if (combo === 'command+p' || combo === 'ctrl+p') {
+          return false;
+        }
 
-      return originalStopCallback(e, el, combo);
-    };
-  },
-  methods: {
-    ...mapActions(['toggleFileFinder']),
-  },
-};
+        return originalStopCallback(e, el, combo);
+      },
+    },
+  };
 </script>
 
 <template>
diff --git a/app/assets/javascripts/ide/constants.js b/app/assets/javascripts/ide/constants.js
new file mode 100644
index 00000000000..e4e54f967aa
--- /dev/null
+++ b/app/assets/javascripts/ide/constants.js
@@ -0,0 +1,8 @@
+// Fuzzy file finder
+export const MAX_FILE_FINDER_RESULTS = 40;
+export const FILE_FINDER_ROW_HEIGHT = 55;
+export const FILE_FINDER_EMPTY_ROW_HEIGHT = 33;
+export const UP_KEY_CODE = 38;
+export const DOWN_KEY_CODE = 40;
+export const ENTER_KEY_CODE = 13;
+export const ESC_KEY_CODE = 27;
diff --git a/spec/javascripts/ide/components/file_finder/index_spec.js b/spec/javascripts/ide/components/file_finder/index_spec.js
index 070a25fc781..594427ba14e 100644
--- a/spec/javascripts/ide/components/file_finder/index_spec.js
+++ b/spec/javascripts/ide/components/file_finder/index_spec.js
@@ -1,6 +1,7 @@
 import Vue from 'vue';
 import store from '~/ide/stores';
 import FindFileComponent from '~/ide/components/file_finder/index.vue';
+import { UP_KEY_CODE, DOWN_KEY_CODE, ENTER_KEY_CODE, ESC_KEY_CODE } from '~/ide/constants';
 import router from '~/ide/ide_router';
 import { file, resetStore } from '../../helpers';
 import { mountComponentWithStore } from '../../../helpers/vue_mount_component_helper';
@@ -214,7 +215,7 @@ describe('IDE File finder item spec', () => {
     describe('onKeyup', () => {
       it('opens file on enter key', done => {
         const event = new CustomEvent('keyup');
-        event.keyCode = 13;
+        event.keyCode = ENTER_KEY_CODE;
 
         spyOn(vm, 'openFile');
 
@@ -229,7 +230,7 @@ describe('IDE File finder item spec', () => {
 
       it('closes file finder on esc key', done => {
         const event = new CustomEvent('keyup');
-        event.keyCode = 27;
+        event.keyCode = ESC_KEY_CODE;
 
         spyOn(vm, 'toggleFileFinder');
 
@@ -252,7 +253,7 @@ describe('IDE File finder item spec', () => {
 
       describe('up key', () => {
         const event = new CustomEvent('keydown');
-        event.keyCode = 38;
+        event.keyCode = UP_KEY_CODE;
 
         it('resets to last index when at top', () => {
           el.dispatchEvent(event);
@@ -271,7 +272,7 @@ describe('IDE File finder item spec', () => {
 
       describe('down key', () => {
         const event = new CustomEvent('keydown');
-        event.keyCode = 40;
+        event.keyCode = DOWN_KEY_CODE;
 
         it('resets to first index when at bottom', () => {
           vm.focusedIndex = 1;
diff --git a/spec/javascripts/ide/components/ide_spec.js b/spec/javascripts/ide/components/ide_spec.js
index 5bd890094cc..7bfcfc90572 100644
--- a/spec/javascripts/ide/components/ide_spec.js
+++ b/spec/javascripts/ide/components/ide_spec.js
@@ -1,4 +1,5 @@
 import Vue from 'vue';
+import Mousetrap from 'mousetrap';
 import store from '~/ide/stores';
 import ide from '~/ide/components/ide.vue';
 import { createComponentWithStore } from 'spec/helpers/vue_mount_component_helper';
@@ -38,4 +39,68 @@ describe('ide component', () => {
       done();
     });
   });
+
+  describe('file finder', () => {
+    beforeEach(done => {
+      spyOn(vm, 'toggleFileFinder');
+
+      vm.$store.state.fileFindVisible = true;
+
+      vm.$nextTick(done);
+    });
+
+    it('calls toggleFileFinder on `t` key press', done => {
+      Mousetrap.trigger('t');
+
+      vm
+        .$nextTick()
+        .then(() => {
+          expect(vm.toggleFileFinder).toHaveBeenCalled();
+        })
+        .then(done)
+        .catch(done.fail);
+    });
+
+    it('calls toggleFileFinder on `command+p` key press', done => {
+      Mousetrap.trigger('command+p');
+
+      vm
+        .$nextTick()
+        .then(() => {
+          expect(vm.toggleFileFinder).toHaveBeenCalled();
+        })
+        .then(done)
+        .catch(done.fail);
+    });
+
+    it('calls toggleFileFinder on `ctrl+p` key press', done => {
+      Mousetrap.trigger('ctrl+p');
+
+      vm
+        .$nextTick()
+        .then(() => {
+          expect(vm.toggleFileFinder).toHaveBeenCalled();
+        })
+        .then(done)
+        .catch(done.fail);
+    });
+
+    it('always allows `command+p` to trigger toggleFileFinder', () => {
+      expect(
+        vm.mousetrapStopCallback(null, vm.$el.querySelector('.dropdown-input-field'), 'command+p'),
+      ).toBe(false);
+    });
+
+    it('always allows `ctrl+p` to trigger toggleFileFinder', () => {
+      expect(
+        vm.mousetrapStopCallback(null, vm.$el.querySelector('.dropdown-input-field'), 'ctrl+p'),
+      ).toBe(false);
+    });
+
+    it('onlys handles `t` when focused in input-field', () => {
+      expect(
+        vm.mousetrapStopCallback(null, vm.$el.querySelector('.dropdown-input-field'), 't'),
+      ).toBe(true);
+    });
+  });
 });
-- 
2.18.1


From 70bd90bafd9ace4cc5dc0e2d6a2174fba494e216 Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Wed, 18 Apr 2018 09:23:09 +0100
Subject: [PATCH 18/23] fix mouseOver & arrow keys working at same time

---
 .../ide/components/file_finder/index.vue      | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/app/assets/javascripts/ide/components/file_finder/index.vue b/app/assets/javascripts/ide/components/file_finder/index.vue
index 843632c5c70..3c08d860bb3 100644
--- a/app/assets/javascripts/ide/components/file_finder/index.vue
+++ b/app/assets/javascripts/ide/components/file_finder/index.vue
@@ -24,6 +24,7 @@ export default {
       focusedIndex: 0,
       searchText: '',
       mouseOver: false,
+      cancelMouseOver: false,
     };
   },
   computed: {
@@ -97,6 +98,7 @@ export default {
         case UP_KEY_CODE:
           e.preventDefault();
           this.mouseOver = false;
+          this.cancelMouseOver = true;
           if (this.focusedIndex > 0) {
             this.focusedIndex -= 1;
           } else {
@@ -106,6 +108,7 @@ export default {
         case DOWN_KEY_CODE:
           e.preventDefault();
           this.mouseOver = false;
+          this.cancelMouseOver = true;
           if (this.focusedIndex < this.filteredBlobsLength - 1) {
             this.focusedIndex += 1;
           } else {
@@ -133,8 +136,13 @@ export default {
       router.push(`/project${file.url}`);
     },
     onMouseOver(index) {
-      this.mouseOver = true;
-      this.focusedIndex = index;
+      if (!this.cancelMouseOver) {
+        this.mouseOver = true;
+        this.focusedIndex = index;
+      }
+    },
+    onMouseMove() {
+      this.cancelMouseOver = false;
     },
   },
 };
@@ -144,6 +152,7 @@ export default {
   <div
     class="ide-file-finder-overlay"
     @mousedown.self="toggleFileFinder(false)"
+    @mousemove="onMouseMove"
   >
     <div
       class="dropdown-menu diff-file-changes ide-file-finder show"
@@ -176,7 +185,11 @@ export default {
           @click="clearSearchInput"
         ></i>
       </div>
-      <div>
+      <div
+        :style="{
+          'pointer-events': cancelMouseOver ? 'none' : ''
+        }"
+      >
         <virtual-list
           :size="listHeight"
           :remain="listShowCount"
-- 
2.18.1


From f8b1f38b405916cba7a5c49dd0f40e60046cd6d2 Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Wed, 18 Apr 2018 10:45:48 +0100
Subject: [PATCH 19/23] disable hover styles correctly in file finder dropdown

---
 .../ide/components/file_finder/index.vue      |  1 +
 .../stylesheets/framework/dropdowns.scss      | 19 ++++++++++---------
 2 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/app/assets/javascripts/ide/components/file_finder/index.vue b/app/assets/javascripts/ide/components/file_finder/index.vue
index 3c08d860bb3..74c52dff9cd 100644
--- a/app/assets/javascripts/ide/components/file_finder/index.vue
+++ b/app/assets/javascripts/ide/components/file_finder/index.vue
@@ -202,6 +202,7 @@ export default {
               :key="file.key"
             >
               <item
+                class="disable-hover"
                 :file="file"
                 :search-text="searchText"
                 :focused="index === focusedIndex"
diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss
index cc74cb72795..a8f7caca339 100644
--- a/app/assets/stylesheets/framework/dropdowns.scss
+++ b/app/assets/stylesheets/framework/dropdowns.scss
@@ -43,7 +43,7 @@
     border-color: $gray-darkest;
   }
 
-  [data-toggle="dropdown"] {
+  [data-toggle='dropdown'] {
     outline: 0;
   }
 }
@@ -172,7 +172,11 @@
     color: $brand-danger;
   }
 
-  &:hover,
+  &.disable-hover {
+    text-decoration: none;
+  }
+
+  &:not(.disable-hover):hover,
   &:active,
   &:focus,
   &.is-focused {
@@ -507,17 +511,16 @@
       }
 
       &.is-indeterminate::before {
-        content: "\f068";
+        content: '\f068';
       }
 
       &.is-active::before {
-        content: "\f00c";
+        content: '\f00c';
       }
     }
   }
 }
 
-
 .dropdown-title {
   position: relative;
   padding: 2px 25px 10px;
@@ -723,7 +726,6 @@
   }
 }
 
-
 .dropdown-menu-due-date {
   .dropdown-content {
     max-height: 230px;
@@ -853,7 +855,7 @@ header.header-content .dropdown-menu.projects-dropdown-menu {
   }
 
   .projects-list-frequent-container,
-  .projects-list-search-container, {
+  .projects-list-search-container {
     padding: 8px 0;
     overflow-y: auto;
   }
@@ -904,8 +906,7 @@ header.header-content .dropdown-menu.projects-dropdown-menu {
 }
 
 .projects-list-item-container {
-  .project-item-avatar-container
-  .project-item-metadata-container {
+  .project-item-avatar-container .project-item-metadata-container {
     float: left;
   }
 
-- 
2.18.1


From 27be9666750a95fa71a3abe6db4cf82b786a9ec8 Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Wed, 18 Apr 2018 10:50:18 +0100
Subject: [PATCH 20/23] fixed dropdown not being scrollable

---
 app/assets/javascripts/ide/components/file_finder/index.vue | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/app/assets/javascripts/ide/components/file_finder/index.vue b/app/assets/javascripts/ide/components/file_finder/index.vue
index 74c52dff9cd..e61fd701670 100644
--- a/app/assets/javascripts/ide/components/file_finder/index.vue
+++ b/app/assets/javascripts/ide/components/file_finder/index.vue
@@ -185,11 +185,7 @@ export default {
           @click="clearSearchInput"
         ></i>
       </div>
-      <div
-        :style="{
-          'pointer-events': cancelMouseOver ? 'none' : ''
-        }"
-      >
+      <div>
         <virtual-list
           :size="listHeight"
           :remain="listShowCount"
-- 
2.18.1


From 48fb30f730f0bf8c02c21d992cb83fdf35a00e91 Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Wed, 18 Apr 2018 12:23:29 +0100
Subject: [PATCH 21/23] fixed up scrolling to items in finder dropdown

---
 .../ide/components/file_finder/index.vue      | 21 ++++++++++++++++---
 .../ide/components/file_finder/item.vue       |  4 ++++
 2 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/app/assets/javascripts/ide/components/file_finder/index.vue b/app/assets/javascripts/ide/components/file_finder/index.vue
index e61fd701670..deddc38c970 100644
--- a/app/assets/javascripts/ide/components/file_finder/index.vue
+++ b/app/assets/javascripts/ide/components/file_finder/index.vue
@@ -78,8 +78,22 @@ export default {
       if (!this.mouseOver) {
         this.$nextTick(() => {
           const el = this.$refs.virtualScrollList.$el;
+          const scrollTop = this.focusedIndex * FILE_FINDER_ROW_HEIGHT;
+          const bottom = this.listShowCount * FILE_FINDER_ROW_HEIGHT;
 
-          el.scrollTop = this.focusedIndex * 55;
+          if (this.focusedIndex === 0) {
+            // if index is the first index, scroll straight to start
+            el.scrollTop = 0;
+          } else if (this.focusedIndex === this.filteredBlobsLength - 1) {
+            // if index is the last index, scroll to the end
+            el.scrollTop = this.filteredBlobsLength * FILE_FINDER_ROW_HEIGHT;
+          } else if (scrollTop >= bottom + el.scrollTop) {
+            // if element is off the bottom of the scroll list, scroll down one item
+            el.scrollTop = scrollTop - bottom + FILE_FINDER_ROW_HEIGHT;
+          } else if (scrollTop < el.scrollTop) {
+            // if element is off the top of the scroll list, scroll up one item
+            el.scrollTop = scrollTop;
+          }
         });
       }
     },
@@ -141,8 +155,9 @@ export default {
         this.focusedIndex = index;
       }
     },
-    onMouseMove() {
+    onMouseMove(index) {
       this.cancelMouseOver = false;
+      this.onMouseOver(index);
     },
   },
 };
@@ -152,7 +167,6 @@ export default {
   <div
     class="ide-file-finder-overlay"
     @mousedown.self="toggleFileFinder(false)"
-    @mousemove="onMouseMove"
   >
     <div
       class="dropdown-menu diff-file-changes ide-file-finder show"
@@ -205,6 +219,7 @@ export default {
                 :index="index"
                 @click="openFile"
                 @mouseover="onMouseOver"
+                @mousemove="onMouseMove"
               />
             </li>
           </template>
diff --git a/app/assets/javascripts/ide/components/file_finder/item.vue b/app/assets/javascripts/ide/components/file_finder/item.vue
index 0170f4837f8..fc29ef01f6a 100644
--- a/app/assets/javascripts/ide/components/file_finder/item.vue
+++ b/app/assets/javascripts/ide/components/file_finder/item.vue
@@ -50,6 +50,9 @@ export default {
     mouseOverRow() {
       this.$emit('mouseover', this.index);
     },
+    mouseMove() {
+      this.$emit('mousemove', this.index);
+    },
   },
 };
 </script>
@@ -63,6 +66,7 @@ export default {
     }"
     @click.prevent="clickRow"
     @mouseover="mouseOverRow"
+    @mousemove="mouseMove"
   >
     <file-icon
       :file-name="file.name"
-- 
2.18.1


From 5bf287ac85d00cadf24b792bb054015718bf5b6e Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Wed, 18 Apr 2018 14:23:46 +0100
Subject: [PATCH 22/23] fixed scss lint

---
 app/assets/stylesheets/framework/dropdowns.scss | 11 ++++-------
 1 file changed, 4 insertions(+), 7 deletions(-)

diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss
index 6952f356128..664aade7375 100644
--- a/app/assets/stylesheets/framework/dropdowns.scss
+++ b/app/assets/stylesheets/framework/dropdowns.scss
@@ -859,6 +859,10 @@ header.header-content .dropdown-menu.projects-dropdown-menu {
   .projects-list-search-container {
     padding: 8px 0;
     overflow-y: auto;
+
+    li.section-empty.section-failure {
+      color: $callout-danger-color;
+    }
   }
 
   .section-header,
@@ -869,13 +873,6 @@ header.header-content .dropdown-menu.projects-dropdown-menu {
     font-size: $gl-font-size;
   }
 
-  .projects-list-frequent-container,
-  .projects-list-search-container {
-    li.section-empty.section-failure {
-      color: $callout-danger-color;
-    }
-  }
-
   .search-input-container {
     position: relative;
     padding: 4px $gl-padding;
-- 
2.18.1


From aadde87f42e4b705b652f009a9681c48de2b9c61 Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Thu, 19 Apr 2018 12:04:49 +0100
Subject: [PATCH 23/23] moved keycodes constants to common lib file updated
 markup to use buttons instead of links

---
 .../javascripts/ide/components/file_finder/index.vue | 12 +++++++-----
 .../javascripts/ide/components/file_finder/item.vue  |  6 +++---
 app/assets/javascripts/ide/constants.js              |  4 ----
 app/assets/javascripts/lib/utils/keycodes.js         |  4 ++++
 app/assets/stylesheets/framework/common.scss         |  1 +
 .../ide/components/file_finder/index_spec.js         |  2 +-
 6 files changed, 16 insertions(+), 13 deletions(-)
 create mode 100644 app/assets/javascripts/lib/utils/keycodes.js

diff --git a/app/assets/javascripts/ide/components/file_finder/index.vue b/app/assets/javascripts/ide/components/file_finder/index.vue
index deddc38c970..ea2b13a8b21 100644
--- a/app/assets/javascripts/ide/components/file_finder/index.vue
+++ b/app/assets/javascripts/ide/components/file_finder/index.vue
@@ -8,11 +8,13 @@ import {
   MAX_FILE_FINDER_RESULTS,
   FILE_FINDER_ROW_HEIGHT,
   FILE_FINDER_EMPTY_ROW_HEIGHT,
+} from '../../constants';
+import {
   UP_KEY_CODE,
   DOWN_KEY_CODE,
   ENTER_KEY_CODE,
   ESC_KEY_CODE,
-} from '../../constants';
+} from '../../../lib/utils/keycodes';
 
 export default {
   components: {
@@ -191,7 +193,7 @@ export default {
         ></i>
         <i
           role="button"
-          aria-hidden="true"
+          :aria-label="__('Clear search input')"
           class="fa fa-times dropdown-input-clear"
           :class="{
             show: showClearInputButton
@@ -225,16 +227,16 @@ export default {
           </template>
           <li
             v-else
-            class="dropdown-menu-empty-itemhidden"
+            class="dropdown-menu-empty-item"
           >
-            <a href="#">
+            <div class="append-right-default prepend-left-default prepend-top-8 append-bottom-8">
               <template v-if="loading">
                 {{ __('Loading...') }}
               </template>
               <template v-else>
                 {{ __('No files found.') }}
               </template>
-            </a>
+            </div>
           </li>
         </virtual-list>
       </div>
diff --git a/app/assets/javascripts/ide/components/file_finder/item.vue b/app/assets/javascripts/ide/components/file_finder/item.vue
index fc29ef01f6a..d4427420207 100644
--- a/app/assets/javascripts/ide/components/file_finder/item.vue
+++ b/app/assets/javascripts/ide/components/file_finder/item.vue
@@ -58,8 +58,8 @@ export default {
 </script>
 
 <template>
-  <a
-    href="#"
+  <button
+    type="button"
     class="diff-changed-file"
     :class="{
       'is-focused': focused,
@@ -109,5 +109,5 @@ export default {
         :file="file"
       />
     </span>
-  </a>
+  </button>
 </template>
diff --git a/app/assets/javascripts/ide/constants.js b/app/assets/javascripts/ide/constants.js
index 09ee9d39d43..b06da9f95d1 100644
--- a/app/assets/javascripts/ide/constants.js
+++ b/app/assets/javascripts/ide/constants.js
@@ -2,10 +2,6 @@
 export const MAX_FILE_FINDER_RESULTS = 40;
 export const FILE_FINDER_ROW_HEIGHT = 55;
 export const FILE_FINDER_EMPTY_ROW_HEIGHT = 33;
-export const UP_KEY_CODE = 38;
-export const DOWN_KEY_CODE = 40;
-export const ENTER_KEY_CODE = 13;
-export const ESC_KEY_CODE = 27;
 
 // Commit message textarea
 export const MAX_TITLE_LENGTH = 50;
diff --git a/app/assets/javascripts/lib/utils/keycodes.js b/app/assets/javascripts/lib/utils/keycodes.js
new file mode 100644
index 00000000000..5e0f9b612a2
--- /dev/null
+++ b/app/assets/javascripts/lib/utils/keycodes.js
@@ -0,0 +1,4 @@
+export const UP_KEY_CODE = 38;
+export const DOWN_KEY_CODE = 40;
+export const ENTER_KEY_CODE = 13;
+export const ESC_KEY_CODE = 27;
diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss
index d0dda50a835..e058a0b35b7 100644
--- a/app/assets/stylesheets/framework/common.scss
+++ b/app/assets/stylesheets/framework/common.scss
@@ -472,6 +472,7 @@ img.emoji {
 .append-right-20 { margin-right: 20px; }
 .append-bottom-0 { margin-bottom: 0; }
 .append-bottom-5 { margin-bottom: 5px; }
+.append-bottom-8 { margin-bottom: $grid-size; }
 .append-bottom-10 { margin-bottom: 10px; }
 .append-bottom-15 { margin-bottom: 15px; }
 .append-bottom-20 { margin-bottom: 20px; }
diff --git a/spec/javascripts/ide/components/file_finder/index_spec.js b/spec/javascripts/ide/components/file_finder/index_spec.js
index 594427ba14e..4f208e946d2 100644
--- a/spec/javascripts/ide/components/file_finder/index_spec.js
+++ b/spec/javascripts/ide/components/file_finder/index_spec.js
@@ -1,7 +1,7 @@
 import Vue from 'vue';
 import store from '~/ide/stores';
 import FindFileComponent from '~/ide/components/file_finder/index.vue';
-import { UP_KEY_CODE, DOWN_KEY_CODE, ENTER_KEY_CODE, ESC_KEY_CODE } from '~/ide/constants';
+import { UP_KEY_CODE, DOWN_KEY_CODE, ENTER_KEY_CODE, ESC_KEY_CODE } from '~/lib/utils/keycodes';
 import router from '~/ide/ide_router';
 import { file, resetStore } from '../../helpers';
 import { mountComponentWithStore } from '../../../helpers/vue_mount_component_helper';
-- 
2.18.1