various different performance improvements

[ci skip]

7 files changed, 21 insertions, 18 deletions

diff --git a/app/assets/javascripts/repo/components/repo.vue b/app/assets/javascripts/repo/components/repo.vue
index e072af5c151..31a88b297c0 100644
--- a/app/assets/javascripts/repo/components/repo.vue
+++ b/app/assets/javascripts/repo/components/repo.vue
@@ -11,7 +11,6 @@ export default {
   computed: {
     ...mapState([
       'currentBlobView',
-      'editMode',
     ]),
     ...mapGetters([
       'isMini',
@@ -45,13 +44,14 @@ export default {
   <div class="repository-view">
     <div class="tree-content-holder" :class="{'tree-content-holder-mini' : isMini}">
       <repo-sidebar/>
-      <div v-if="isMini"
-      class="panel-right"
-      :class="{'edit-mode': editMode}">
+      <div
+        v-if="isMini"
+        class="panel-right"
+      >
         <repo-tabs/>
         <component
           :is="currentBlobView"
-          class="blob-viewer-container"/>
+        />
         <repo-file-buttons/>
       </div>
     </div>
diff --git a/app/assets/javascripts/repo/components/repo_edit_button.vue b/app/assets/javascripts/repo/components/repo_edit_button.vue
index 59c1ed6e4be..6c1bb4b8566 100644
--- a/app/assets/javascripts/repo/components/repo_edit_button.vue
+++ b/app/assets/javascripts/repo/components/repo_edit_button.vue
@@ -28,7 +28,7 @@ export default {
 </script>
 
 <template>
-  <div>
+  <div class="editable-mode">
     <button
       v-if="canEditFile"
       class="btn btn-default"
diff --git a/app/assets/javascripts/repo/components/repo_editor.vue b/app/assets/javascripts/repo/components/repo_editor.vue
index 8b717e2330b..9114b3a1acd 100644
--- a/app/assets/javascripts/repo/components/repo_editor.vue
+++ b/app/assets/javascripts/repo/components/repo_editor.vue
@@ -52,12 +52,13 @@ export default {
     },
     setupEditor() {
       if (!this.activeFile) return;
+      const content = this.activeFile.content !== '' ? this.activeFile.content : this.activeFile.raw;
 
       const foundLang = this.languages.find(lang =>
         lang.extensions && lang.extensions.indexOf(this.activeFileExtension) === 0,
       );
       const newModel = this.monaco.editor.createModel(
-        this.activeFile.raw, foundLang ? foundLang.id : 'plaintext',
+        content, foundLang ? foundLang.id : 'plaintext',
       );
 
       this.monacoInstance.setModel(newModel);
@@ -91,5 +92,5 @@ export default {
 </script>
 
 <template>
-<div id="ide" v-if='!shouldHideEditor'></div>
+  <div id="ide" v-if='!shouldHideEditor' class="blob-viewer-container blob-editor-container"></div>
 </template>
diff --git a/app/assets/javascripts/repo/components/repo_file.vue b/app/assets/javascripts/repo/components/repo_file.vue
index f78c9591da4..77895174f15 100644
--- a/app/assets/javascripts/repo/components/repo_file.vue
+++ b/app/assets/javascripts/repo/components/repo_file.vue
@@ -34,7 +34,6 @@
     },
     methods: {
       ...mapActions([
-        'getTreeData',
         'clickedTreeRow',
       ]),
     },
diff --git a/app/assets/javascripts/repo/components/repo_preview.vue b/app/assets/javascripts/repo/components/repo_preview.vue
index 647c9079d0f..40c7811523e 100644
--- a/app/assets/javascripts/repo/components/repo_preview.vue
+++ b/app/assets/javascripts/repo/components/repo_preview.vue
@@ -31,7 +31,7 @@ export default {
 </script>
 
 <template>
-<div>
+<div class="blob-viewer-container">
   <div
     v-if="!activeFile.renderError"
     v-html="activeFile.html">
diff --git a/app/assets/javascripts/repo/index.js b/app/assets/javascripts/repo/index.js
index 8ca5bb45d05..480d46eab81 100644
--- a/app/assets/javascripts/repo/index.js
+++ b/app/assets/javascripts/repo/index.js
@@ -5,13 +5,13 @@ import Repo from './components/repo.vue';
 import RepoEditButton from './components/repo_edit_button.vue';
 import newBranchForm from './components/new_branch_form.vue';
 import newDropdown from './components/new_dropdown/index.vue';
-import vStore from './stores';
+import store from './stores';
 import Translate from '../vue_shared/translate';
 
 function initRepo(el) {
   return new Vue({
     el,
-    store: vStore,
+    store,
     components: {
       repo: Repo,
     },
@@ -53,17 +53,20 @@ function initRepo(el) {
 function initRepoEditButton(el) {
   return new Vue({
     el,
-    store: vStore,
+    store,
     components: {
       repoEditButton: RepoEditButton,
     },
+    render(createElement) {
+      return createElement('repo-edit-button');
+    },
   });
 }
 
 function initNewDropdown(el) {
   return new Vue({
     el,
-    store: vStore,
+    store,
     components: {
       newDropdown,
     },
@@ -83,7 +86,7 @@ function initNewBranchForm() {
     components: {
       newBranchForm,
     },
-    store: vStore,
+    store,
     render(createElement) {
       return createElement('new-branch-form');
     },
diff --git a/app/assets/javascripts/repo/stores/actions.js b/app/assets/javascripts/repo/stores/actions.js
index 191fc9635fb..c8be50116eb 100644
--- a/app/assets/javascripts/repo/stores/actions.js
+++ b/app/assets/javascripts/repo/stores/actions.js
@@ -10,9 +10,7 @@ export const setInitialData = ({ commit }, data) => commit(types.SET_INITIAL_DAT
 
 export const closeDiscardPopup = ({ commit }) => commit(types.TOGGLE_DISCARD_POPUP, false);
 
-export const discardAllChanges = ({ state, commit, getters, dispatch }) => {
-  if (state.editMode) return;
-
+export const discardAllChanges = ({ commit, getters, dispatch }) => {
   const changedFiles = getters.changedFiles;
 
   changedFiles.forEach((file) => {
@@ -82,6 +80,8 @@ export const commitChanges = ({ commit, state, dispatch }, { payload, newMr }) =
       dispatch('discardAllChanges');
       dispatch('closeAllFiles');
       dispatch('toggleEditMode');
+
+      window.scrollTo(0, 0);
     }
   })
   .catch(() => flash('Error committing changes. Please try again.'));