various different performance improvements

[ci skip]

10 files changed, 24 insertions, 37 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.'));
diff --git a/app/assets/stylesheets/pages/repo.scss b/app/assets/stylesheets/pages/repo.scss
index b360fb7de1a..7c5f3f1126a 100644
--- a/app/assets/stylesheets/pages/repo.scss
+++ b/app/assets/stylesheets/pages/repo.scss
@@ -72,10 +72,6 @@
           text-decoration: underline;
         }
       }
-
-      .cursor {
-        display: none !important;
-      }
     }
 
     .blob-no-preview {
@@ -85,18 +81,8 @@
       }
     }
 
-    &.edit-mode {
-      .blob-viewer-container {
-        overflow: hidden;
-      }
-
-      .monaco-editor.vs {
-        .cursor {
-          background: $black;
-          border-color: $black;
-          display: block !important;
-        }
-      }
+    &.blob-editor-container {
+      overflow: hidden;
     }
 
     .blob-viewer-container {
diff --git a/app/views/projects/tree/_tree_header.html.haml b/app/views/projects/tree/_tree_header.html.haml
index 7ea19e6c828..40266047bad 100644
--- a/app/views/projects/tree/_tree_header.html.haml
+++ b/app/views/projects/tree/_tree_header.html.haml
@@ -9,7 +9,7 @@
 
 .tree-controls
   - if show_new_repo?
-    = render 'shared/repo/editable_mode'
+    .editable-mode
   - else
     = link_to s_('Commits|History'), project_commits_path(@project, @id), class: 'btn'
 
diff --git a/app/views/shared/repo/_editable_mode.html.haml b/app/views/shared/repo/_editable_mode.html.haml
deleted file mode 100644
index 73fdb8b523f..00000000000
--- a/app/views/shared/repo/_editable_mode.html.haml
+++ /dev/null
@@ -1,2 +0,0 @@
-.editable-mode
-  %repo-edit-button