moved dropdown into new component

update dropdown icon
make clearing the editor more performant

app/assets/stylesheets/pages/repo.scss

@@ -151,7 +151,7 @@
     background-color: $white-light;
 
     &.shadow {
-      box-shadow: 0 0 10px rgba(0,0,0,.4);
+      box-shadow: 0 0 10px $dropdown-shadow-color;
     }
 
     .btn {

ee/app/assets/javascripts/ide/components/editor_mode_dropdown.vue

+<script>
+  import Icon from '~/vue_shared/components/icon.vue';
+
+  export default {
+    components: {
+      Icon,
+    },
+    props: {
+      viewer: {
+        type: String,
+        required: true,
+      },
+      showShadow: {
+        type: Boolean,
+        required: true,
+      },
+    },
+    methods: {
+      changeMode(mode) {
+        this.$emit('click', mode);
+      },
+    },
+  };
+</script>
+
+<template>
+  <div
+    class="dropdown"
+    :class="{
+      shadow: showShadow,
+    }"
+  >
+    <button
+      type="button"
+      class="btn btn-primary btn-sm"
+      data-toggle="dropdown"
+    >
+      <template v-if="viewer === 'editor'">
+        {{ __('Editing') }}
+      </template>
+      <template v-else>
+        {{ __('Reviewing') }}
+      </template>
+      <icon
+        name="angle-down"
+        :size="12"
+        css-classes="caret-down"
+      />
+    </button>
+    <div class="dropdown-menu dropdown-menu-selectable dropdown-open-left">
+      <ul>
+        <li>
+          <a
+            href="#"
+            @click.prevent="changeMode('editor')"
+            :class="{
+              'is-active': viewer === 'editor',
+            }"
+          >
+            <strong class="dropdown-menu-inner-title">{{ __('Editing') }}</strong>
+            <span class="dropdown-menu-inner-content">
+              {{ __('View and edit lines') }}
+            </span>
+          </a>
+        </li>
+        <li>
+          <a
+            href="#"
+            @click.prevent="changeMode('diff')"
+            :class="{
+              'is-active': viewer === 'diff',
+            }"
+          >
+            <strong class="dropdown-menu-inner-title">{{ __('Reviewing') }}</strong>
+            <span class="dropdown-menu-inner-content">
+              {{ __('Compare changes with the last commit') }}
+            </span>
+          </a>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>

ee/app/assets/javascripts/ide/components/repo_tabs.vue

 <script>
   import { mapActions, mapState } from 'vuex';
   import RepoTab from './repo_tab.vue';
+  import EditorMode from './editor_mode_dropdown.vue';
 
   export default {
     components: {
-      'repo-tab': RepoTab,
+      RepoTab,
+      EditorMode,
     },
     data() {
       return {
@@ -17,16 +19,16 @@
         'viewer',
       ]),
     },
-    methods: {
-      ...mapActions([
-        'updateViewer',
-      ]),
-    },
     updated() {
       if (!this.$refs.tabsScroller) return;
 
       this.showShadow = this.$refs.tabsScroller.scrollWidth > this.$refs.tabsScroller.offsetWidth;
     },
+    methods: {
+      ...mapActions([
+        'updateViewer',
+      ]),
+    },
   };
 </script>
 
@@ -42,53 +44,10 @@
         :tab="tab"
       />
     </ul>
-    <div
-      class="dropdown"
-      :class="{
-        shadow: showShadow,
-      }"
-    >
-      <button class="btn btn-primary btn-sm" data-toggle="dropdown">
-        <template v-if="viewer === 'editor'">
-          Editing
-        </template>
-        <template v-else>
-          Reviewing
-        </template>
-        <i class="fa fa-chevron-down"></i>
-      </button>
-      <div class="dropdown-menu dropdown-menu-selectable dropdown-open-left">
-        <ul>
-          <li>
-            <a
-              href="#"
-              @click.prevent="updateViewer('editor')"
-              :class="{
-                'is-active': viewer === 'editor',
-              }"
-            >
-              <strong class="dropdown-menu-inner-title">Editing</strong>
-              <span class="dropdown-menu-inner-content">
-                View and edit lines
-              </span>
-            </a>
-          </li>
-          <li>
-            <a
-              href="#"
-              @click.prevent="updateViewer('diff')"
-              :class="{
-                'is-active': viewer === 'diff',
-              }"
-            >
-              <strong class="dropdown-menu-inner-title">Reviewing</strong>
-              <span class="dropdown-menu-inner-content">
-                Compare changes with the last commit
-              </span>
-            </a>
-          </li>
-        </ul>
-      </div>
-    </div>
+    <editor-mode
+      :viewer="viewer"
+      :show-shadow="showShadow"
+      @click="updateViewer"
+    />
   </div>
 </template>

ee/app/assets/javascripts/ide/lib/editor.js

@@ -7,6 +7,12 @@ import editorOptions from './editor_options';
 
 import gitlabTheme from 'ee/ide/lib/themes/gl_theme'; // eslint-disable-line import/first
 
+const clearDomElement = (el) => {
+  while (el.firstChild) {
+    el.removeChild(el.firstChild);
+  }
+};
+
 export default class Editor {
   static create(monaco) {
     if (this.editorInstance) return this.editorInstance;
@@ -34,9 +40,7 @@ export default class Editor {
 
   createInstance(domElement) {
     if (!this.instance) {
-      Object.assign(domElement, {
-        innerHTML: '',
-      });
+      clearDomElement(domElement);
 
       this.disposable.add(
         this.instance = this.monaco.editor.create(domElement, {
@@ -59,9 +63,7 @@ export default class Editor {
 
   createDiffInstance(domElement) {
     if (!this.instance) {
-      Object.assign(domElement, {
-        innerHTML: '',
-      });
+      clearDomElement(domElement);
 
       this.disposable.add(
         this.instance = this.monaco.editor.createDiffEditor(domElement, {