Merge branch 'master' into 38031-monitoring-hover-info-is-clipped38031-monitoring-hover-info-is-clipped

53 files changed, 436 insertions, 358 deletions

diff --git a/app/assets/javascripts/blob/notebook/index.js b/app/assets/javascripts/blob/notebook/index.js
index 27312d718b0..c858a6bb7b4 100644
--- a/app/assets/javascripts/blob/notebook/index.js
+++ b/app/assets/javascripts/blob/notebook/index.js
@@ -40,10 +40,10 @@ export default () => {
           class="text-center"
           v-if="error">
           <span v-if="loadError">
-            An error occured whilst loading the file. Please try again later.
+            An error occurred whilst loading the file. Please try again later.
           </span>
           <span v-else>
-            An error occured whilst parsing the file.
+            An error occurred whilst parsing the file.
           </span>
         </p>
       </div>
diff --git a/app/assets/javascripts/blob/pdf/index.js b/app/assets/javascripts/blob/pdf/index.js
index 0ed915c1ac9..7109f356540 100644
--- a/app/assets/javascripts/blob/pdf/index.js
+++ b/app/assets/javascripts/blob/pdf/index.js
@@ -48,10 +48,10 @@ export default () => {
           class="text-center"
           v-if="error">
           <span v-if="loadError">
-            An error occured whilst loading the file. Please try again later.
+            An error occurred whilst loading the file. Please try again later.
           </span>
           <span v-else>
-            An error occured whilst decoding the file.
+            An error occurred whilst decoding the file.
           </span>
         </p>
       </div>
diff --git a/app/assets/javascripts/boards/boards_bundle.js b/app/assets/javascripts/boards/boards_bundle.js
index ea00efe4b46..815248f38ee 100644
--- a/app/assets/javascripts/boards/boards_bundle.js
+++ b/app/assets/javascripts/boards/boards_bundle.js
@@ -77,9 +77,6 @@ $(() => {
       });
       Store.rootPath = this.boardsEndpoint;
 
-      this.filterManager = new FilteredSearchBoards(Store.filter, true);
-      this.filterManager.setup();
-
       // Listen for updateTokens event
       eventHub.$on('updateTokens', this.updateTokens);
     },
@@ -87,6 +84,9 @@ $(() => {
       eventHub.$off('updateTokens', this.updateTokens);
     },
     mounted () {
+      this.filterManager = new FilteredSearchBoards(Store.filter, true);
+      this.filterManager.setup();
+
       Store.disabled = this.disabled;
       gl.boardService.all()
         .then(response => response.json())
diff --git a/app/assets/javascripts/boards/components/board_new_issue.js b/app/assets/javascripts/boards/components/board_new_issue.js
index 541b8049855..bc28f7f45f4 100644
--- a/app/assets/javascripts/boards/components/board_new_issue.js
+++ b/app/assets/javascripts/boards/components/board_new_issue.js
@@ -68,7 +68,7 @@ export default {
         <div class="flash-container"
           v-if="error">
           <div class="flash-alert">
-            An error occured. Please try again.
+            An error occurred. Please try again.
           </div>
         </div>
         <label class="label-light"
diff --git a/app/assets/javascripts/build.js b/app/assets/javascripts/build.js
index 286a758b8a9..3d27a3544eb 100644
--- a/app/assets/javascripts/build.js
+++ b/app/assets/javascripts/build.js
@@ -167,7 +167,7 @@ window.Build = (function () {
   Build.prototype.getBuildTrace = function () {
     return $.ajax({
       url: `${this.pageUrl}/trace.json`,
-      data: this.state,
+      data: { state: this.state },
     })
       .done((log) => {
         setCiStatusFavicon(`${this.pageUrl}/status.json`);
diff --git a/app/assets/javascripts/copy_as_gfm.js b/app/assets/javascripts/copy_as_gfm.js
index e3e2c798570..93b0cbf4209 100644
--- a/app/assets/javascripts/copy_as_gfm.js
+++ b/app/assets/javascripts/copy_as_gfm.js
@@ -298,7 +298,7 @@ class CopyAsGFM {
     const documentFragment = getSelectedFragment();
     if (!documentFragment) return;
 
-    const el = transformer(documentFragment.cloneNode(true));
+    const el = transformer(documentFragment.cloneNode(true), e.currentTarget);
     if (!el) return;
 
     e.preventDefault();
@@ -338,55 +338,64 @@ class CopyAsGFM {
   }
 
   static transformGFMSelection(documentFragment) {
-    const gfmEls = documentFragment.querySelectorAll('.md, .wiki');
-    switch (gfmEls.length) {
+    const gfmElements = documentFragment.querySelectorAll('.md, .wiki');
+    switch (gfmElements.length) {
       case 0: {
         return documentFragment;
       }
       case 1: {
-        return gfmEls[0];
+        return gfmElements[0];
       }
       default: {
-        const allGfmEl = document.createElement('div');
+        const allGfmElement = document.createElement('div');
 
-        for (let i = 0; i < gfmEls.length; i += 1) {
-          const lineEl = gfmEls[i];
-          allGfmEl.appendChild(lineEl);
-          allGfmEl.appendChild(document.createTextNode('\n\n'));
+        for (let i = 0; i < gfmElements.length; i += 1) {
+          const gfmElement = gfmElements[i];
+          allGfmElement.appendChild(gfmElement);
+          allGfmElement.appendChild(document.createTextNode('\n\n'));
         }
 
-        return allGfmEl;
+        return allGfmElement;
       }
     }
   }
 
-  static transformCodeSelection(documentFragment) {
-    const lineEls = documentFragment.querySelectorAll('.line');
+  static transformCodeSelection(documentFragment, target) {
+    let lineSelector = '.line';
 
-    let codeEl;
-    if (lineEls.length > 1) {
-      codeEl = document.createElement('pre');
-      codeEl.className = 'code highlight';
+    if (target) {
+      const lineClass = ['left-side', 'right-side'].filter(name => target.classList.contains(name))[0];
+      if (lineClass) {
+        lineSelector = `.line_content.${lineClass} ${lineSelector}`;
+      }
+    }
+
+    const lineElements = documentFragment.querySelectorAll(lineSelector);
+
+    let codeElement;
+    if (lineElements.length > 1) {
+      codeElement = document.createElement('pre');
+      codeElement.className = 'code highlight';
 
-      const lang = lineEls[0].getAttribute('lang');
+      const lang = lineElements[0].getAttribute('lang');
       if (lang) {
-        codeEl.setAttribute('lang', lang);
+        codeElement.setAttribute('lang', lang);
       }
     } else {
-      codeEl = document.createElement('code');
+      codeElement = document.createElement('code');
     }
 
-    if (lineEls.length > 0) {
-      for (let i = 0; i < lineEls.length; i += 1) {
-        const lineEl = lineEls[i];
-        codeEl.appendChild(lineEl);
-        codeEl.appendChild(document.createTextNode('\n'));
+    if (lineElements.length > 0) {
+      for (let i = 0; i < lineElements.length; i += 1) {
+        const lineElement = lineElements[i];
+        codeElement.appendChild(lineElement);
+        codeElement.appendChild(document.createTextNode('\n'));
       }
     } else {
-      codeEl.appendChild(documentFragment);
+      codeElement.appendChild(documentFragment);
     }
 
-    return codeEl;
+    return codeElement;
   }
 
   static nodeToGFM(node, respectWhitespaceParam = false) {
diff --git a/app/assets/javascripts/cycle_analytics/components/stage_code_component.vue b/app/assets/javascripts/cycle_analytics/components/stage_code_component.vue
index e4d62b649e5..45930145b0a 100644
--- a/app/assets/javascripts/cycle_analytics/components/stage_code_component.vue
+++ b/app/assets/javascripts/cycle_analytics/components/stage_code_component.vue
@@ -1,5 +1,7 @@
 <script>
   import userAvatarImage from '../../vue_shared/components/user_avatar/user_avatar_image.vue';
+  import limitWarning from './limit_warning_component.vue';
+  import totalTime from './total_time_component.vue';
 
   export default {
     props: {
@@ -8,6 +10,8 @@
     },
     components: {
       userAvatarImage,
+      limitWarning,
+      totalTime,
     },
   };
 </script>
diff --git a/app/assets/javascripts/cycle_analytics/components/stage_component.vue b/app/assets/javascripts/cycle_analytics/components/stage_component.vue
index ab730af8f5b..8c98bd249a1 100644
--- a/app/assets/javascripts/cycle_analytics/components/stage_component.vue
+++ b/app/assets/javascripts/cycle_analytics/components/stage_component.vue
@@ -1,5 +1,7 @@
 <script>
   import userAvatarImage from '../../vue_shared/components/user_avatar/user_avatar_image.vue';
+  import limitWarning from './limit_warning_component.vue';
+  import totalTime from './total_time_component.vue';
 
   export default {
     props: {
@@ -8,6 +10,8 @@
     },
     components: {
       userAvatarImage,
+      limitWarning,
+      totalTime,
     },
   };
 </script>
diff --git a/app/assets/javascripts/cycle_analytics/components/stage_plan_component.vue b/app/assets/javascripts/cycle_analytics/components/stage_plan_component.vue
index 152c086a606..75d2f1fd70c 100644
--- a/app/assets/javascripts/cycle_analytics/components/stage_plan_component.vue
+++ b/app/assets/javascripts/cycle_analytics/components/stage_plan_component.vue
@@ -1,21 +1,25 @@
 <script>
-import userAvatarImage from '../../vue_shared/components/user_avatar/user_avatar_image.vue';
-import iconCommit from '../svg/icon_commit.svg';
+  import userAvatarImage from '../../vue_shared/components/user_avatar/user_avatar_image.vue';
+  import iconCommit from '../svg/icon_commit.svg';
+  import limitWarning from './limit_warning_component.vue';
+  import totalTime from './total_time_component.vue';
 
-export default {
-  props: {
-    items: Array,
-    stage: Object,
-  },
-  components: {
-    userAvatarImage,
-  },
-  computed: {
-    iconCommit() {
-      return iconCommit;
+  export default {
+    props: {
+      items: Array,
+      stage: Object,
     },
-  },
-};
+    components: {
+      userAvatarImage,
+      totalTime,
+      limitWarning,
+    },
+    computed: {
+      iconCommit() {
+        return iconCommit;
+      },
+    },
+  };
 </script>
 <template>
   <div>
diff --git a/app/assets/javascripts/cycle_analytics/components/stage_review_component.vue b/app/assets/javascripts/cycle_analytics/components/stage_review_component.vue
index 9e66b690404..f54ea7df522 100644
--- a/app/assets/javascripts/cycle_analytics/components/stage_review_component.vue
+++ b/app/assets/javascripts/cycle_analytics/components/stage_review_component.vue
@@ -1,5 +1,7 @@
 <script>
   import userAvatarImage from '../../vue_shared/components/user_avatar/user_avatar_image.vue';
+  import limitWarning from './limit_warning_component.vue';
+  import totalTime from './total_time_component.vue';
 
   export default {
     props: {
@@ -8,6 +10,8 @@
     },
     components: {
       userAvatarImage,
+      totalTime,
+      limitWarning,
     },
   };
 </script>
diff --git a/app/assets/javascripts/cycle_analytics/components/stage_staging_component.vue b/app/assets/javascripts/cycle_analytics/components/stage_staging_component.vue
index 2787b5ea47b..5d95ddcd90e 100644
--- a/app/assets/javascripts/cycle_analytics/components/stage_staging_component.vue
+++ b/app/assets/javascripts/cycle_analytics/components/stage_staging_component.vue
@@ -1,6 +1,8 @@
 <script>
   import userAvatarImage from '../../vue_shared/components/user_avatar/user_avatar_image.vue';
   import iconBranch from '../svg/icon_branch.svg';
+  import limitWarning from './limit_warning_component.vue';
+  import totalTime from './total_time_component.vue';
 
   export default {
     props: {
@@ -9,6 +11,8 @@
     },
     components: {
       userAvatarImage,
+      totalTime,
+      limitWarning,
     },
     computed: {
       iconBranch() {
diff --git a/app/assets/javascripts/cycle_analytics/components/stage_test_component.vue b/app/assets/javascripts/cycle_analytics/components/stage_test_component.vue
index 9c3d39ce011..04d5440b77b 100644
--- a/app/assets/javascripts/cycle_analytics/components/stage_test_component.vue
+++ b/app/assets/javascripts/cycle_analytics/components/stage_test_component.vue
@@ -1,21 +1,27 @@
 <script>
-import iconBuildStatus from '../svg/icon_build_status.svg';
-import iconBranch from '../svg/icon_branch.svg';
+  import iconBuildStatus from '../svg/icon_build_status.svg';
+  import iconBranch from '../svg/icon_branch.svg';
+  import limitWarning from './limit_warning_component.vue';
+  import totalTime from './total_time_component.vue';
 
-export default {
-  props: {
-    items: Array,
-    stage: Object,
-  },
-  computed: {
-    iconBuildStatus() {
-      return iconBuildStatus;
+  export default {
+    props: {
+      items: Array,
+      stage: Object,
     },
-    iconBranch() {
-      return iconBranch;
+    components: {
+      totalTime,
+      limitWarning,
     },
-  },
-};
+    computed: {
+      iconBuildStatus() {
+        return iconBuildStatus;
+      },
+      iconBranch() {
+        return iconBranch;
+      },
+    },
+  };
 </script>
 <template>
   <div>
diff --git a/app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js b/app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js
index 8002b0b23c9..991fcf114da 100644
--- a/app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js
+++ b/app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js
@@ -3,14 +3,12 @@
 import Vue from 'vue';
 import Cookies from 'js-cookie';
 import Translate from '../vue_shared/translate';
-import limitWarningComponent from './components/limit_warning_component.vue';
 import stageCodeComponent from './components/stage_code_component.vue';
 import stagePlanComponent from './components/stage_plan_component.vue';
 import stageComponent from './components/stage_component.vue';
 import stageReviewComponent from './components/stage_review_component.vue';
 import stageStagingComponent from './components/stage_staging_component.vue';
 import stageTestComponent from './components/stage_test_component.vue';
-import totalTime from './components/total_time_component.vue';
 import CycleAnalyticsService from './cycle_analytics_service';
 import CycleAnalyticsStore from './cycle_analytics_store';
 
@@ -133,8 +131,4 @@ $(() => {
       },
     },
   });
-
-  // Register global components
-  Vue.component('limit-warning', limitWarningComponent);
-  Vue.component('total-time', totalTime);
 });
diff --git a/app/assets/javascripts/diff.js b/app/assets/javascripts/diff.js
index 6a008112203..ae8338f5fd2 100644
--- a/app/assets/javascripts/diff.js
+++ b/app/assets/javascripts/diff.js
@@ -24,7 +24,8 @@ class Diff {
     if (!isBound) {
       $(document)
         .on('click', '.js-unfold', this.handleClickUnfold.bind(this))
-        .on('click', '.diff-line-num a', this.handleClickLineNum.bind(this));
+        .on('click', '.diff-line-num a', this.handleClickLineNum.bind(this))
+        .on('mousedown', 'td.line_content.parallel', this.handleParallelLineDown.bind(this));
       isBound = true;
     }
 
@@ -100,6 +101,18 @@ class Diff {
     this.highlightSelectedLine();
   }
 
+  handleParallelLineDown(e) {
+    const line = $(e.currentTarget);
+    const table = line.closest('table');
+
+    table.removeClass('left-side-selected right-side-selected');
+
+    const lineClass = ['left-side', 'right-side'].filter(name => line.hasClass(name))[0];
+    if (lineClass) {
+      table.addClass(`${lineClass}-selected`);
+    }
+  }
+
   diffViewType() {
     return $('.inline-parallel-buttons a.active').data('view-type');
   }
diff --git a/app/assets/javascripts/dispatcher.js b/app/assets/javascripts/dispatcher.js
index 31214818496..bbaa4e4d91e 100644
--- a/app/assets/javascripts/dispatcher.js
+++ b/app/assets/javascripts/dispatcher.js
@@ -14,7 +14,6 @@
 /* global NotificationsDropdown */
 /* global GroupAvatar */
 /* global LineHighlighter */
-/* global ProjectFork */
 /* global BuildArtifacts */
 /* global GroupsSelect */
 /* global Search */
@@ -476,7 +475,9 @@ import { ajaxGet, convertPermissionToBoolean } from './lib/utils/common_utils';
           shortcut_handler = true;
           break;
         case 'projects:forks:new':
-          new ProjectFork();
+          import(/* webpackChunkName: 'project_fork' */ './project_fork')
+            .then(fork => fork.default())
+            .catch(() => {});
           break;
         case 'projects:artifacts:browse':
           new ShortcutsNavigation();
diff --git a/app/assets/javascripts/environments/components/environment.vue b/app/assets/javascripts/environments/components/environment.vue
index 14fde1afb16..ce5f6219a3e 100644
--- a/app/assets/javascripts/environments/components/environment.vue
+++ b/app/assets/javascripts/environments/components/environment.vue
@@ -163,7 +163,7 @@ export default {
 
         this.service.postAction(endpoint)
           .then(() => this.fetchEnvironments())
-          .catch(() => new Flash('An error occured while making the request.'));
+          .catch(() => new Flash('An error occurred while making the request.'));
       }
     },
 
diff --git a/app/assets/javascripts/environments/folder/environments_folder_view.vue b/app/assets/javascripts/environments/folder/environments_folder_view.vue
index 35891240239..01e70c0bbb7 100644
--- a/app/assets/javascripts/environments/folder/environments_folder_view.vue
+++ b/app/assets/javascripts/environments/folder/environments_folder_view.vue
@@ -158,7 +158,7 @@ export default {
 
         this.service.postAction(endpoint)
           .then(() => this.fetchEnvironments())
-          .catch(() => new Flash('An error occured while making the request.'));
+          .catch(() => new Flash('An error occurred while making the request.'));
       }
     },
   },
diff --git a/app/assets/javascripts/files_comment_button.js b/app/assets/javascripts/files_comment_button.js
index d02e4cd5876..a00d29a845a 100644
--- a/app/assets/javascripts/files_comment_button.js
+++ b/app/assets/javascripts/files_comment_button.js
@@ -7,6 +7,8 @@
  * causes reflows, visit https://gist.github.com/paulirish/5d52fb081b3570c81e3a
  */
 
+import Cookies from 'js-cookie';
+
 const LINE_NUMBER_CLASS = 'diff-line-num';
 const UNFOLDABLE_LINE_CLASS = 'js-unfold';
 const NO_COMMENT_CLASS = 'no-comment-btn';
@@ -27,9 +29,7 @@ export default {
       this.userCanCreateNote = $diffFile.closest(DIFF_CONTAINER_SELECTOR).data('can-create-note') === '';
     }
 
-    if (typeof notes !== 'undefined' && !this.isParallelView) {
-      this.isParallelView = notes.isParallelView && notes.isParallelView();
-    }
+    this.isParallelView = Cookies.get('diff_view') === 'parallel';
 
     if (this.userCanCreateNote) {
       $diffFile.on('mouseover', LINE_COLUMN_CLASSES, e => this.showButton(this.isParallelView, e))
diff --git a/app/assets/javascripts/filtered_search/dropdown_emoji.js b/app/assets/javascripts/filtered_search/dropdown_emoji.js
index f9bbbf0cbc1..ada14d2053c 100644
--- a/app/assets/javascripts/filtered_search/dropdown_emoji.js
+++ b/app/assets/javascripts/filtered_search/dropdown_emoji.js
@@ -14,7 +14,7 @@ class DropdownEmoji extends gl.FilteredSearchDropdown {
         loadingTemplate: this.loadingTemplate,
         onError() {
           /* eslint-disable no-new */
-          new Flash('An error occured fetching the dropdown data.');
+          new Flash('An error occurred fetching the dropdown data.');
           /* eslint-enable no-new */
         },
       },
diff --git a/app/assets/javascripts/filtered_search/dropdown_non_user.js b/app/assets/javascripts/filtered_search/dropdown_non_user.js
index 0bc4b6f22a9..b32d589481d 100644
--- a/app/assets/javascripts/filtered_search/dropdown_non_user.js
+++ b/app/assets/javascripts/filtered_search/dropdown_non_user.js
@@ -17,7 +17,7 @@ class DropdownNonUser extends gl.FilteredSearchDropdown {
         preprocessing,
         onError() {
           /* eslint-disable no-new */
-          new Flash('An error occured fetching the dropdown data.');
+          new Flash('An error occurred fetching the dropdown data.');
           /* eslint-enable no-new */
         },
       },
diff --git a/app/assets/javascripts/filtered_search/dropdown_user.js b/app/assets/javascripts/filtered_search/dropdown_user.js
index 720fbc87ea0..ce8817b1b2e 100644
--- a/app/assets/javascripts/filtered_search/dropdown_user.js
+++ b/app/assets/javascripts/filtered_search/dropdown_user.js
@@ -26,7 +26,7 @@ class DropdownUser extends gl.FilteredSearchDropdown {
         },
         onError() {
           /* eslint-disable no-new */
-          new Flash('An error occured fetching the dropdown data.');
+          new Flash('An error occurred fetching the dropdown data.');
           /* eslint-enable no-new */
         },
       },
diff --git a/app/assets/javascripts/filtered_search/filtered_search_manager.js b/app/assets/javascripts/filtered_search/filtered_search_manager.js
index 9178fec085a..a44dc279a6f 100644
--- a/app/assets/javascripts/filtered_search/filtered_search_manager.js
+++ b/app/assets/javascripts/filtered_search/filtered_search_manager.js
@@ -36,7 +36,7 @@ class FilteredSearchManager {
       .catch((error) => {
         if (error.name === 'RecentSearchesServiceError') return undefined;
         // eslint-disable-next-line no-new
-        new window.Flash('An error occured while parsing recent searches');
+        new window.Flash('An error occurred while parsing recent searches');
         // Gracefully fail to empty array
         return [];
       })
diff --git a/app/assets/javascripts/issuable_context.js b/app/assets/javascripts/issuable_context.js
index 70c364e51fe..1d305f1eb2f 100644
--- a/app/assets/javascripts/issuable_context.js
+++ b/app/assets/javascripts/issuable_context.js
@@ -67,10 +67,13 @@ const PARTICIPANTS_ROW_COUNT = 7;
       originalText = $(this).data("original-text");
       if (currentText === originalText) {
         $(this).text(lessText);
+
+        if (gl.lazyLoader) gl.lazyLoader.loadCheck();
       } else {
         $(this).text(originalText);
       }
-      return $(".js-participants-hidden").toggle();
+
+      $(".js-participants-hidden").toggle();
     };
 
     return IssuableContext;
diff --git a/app/assets/javascripts/lib/utils/common_utils.js b/app/assets/javascripts/lib/utils/common_utils.js
index ea2d61af9be..423a25fbdfa 100644
--- a/app/assets/javascripts/lib/utils/common_utils.js
+++ b/app/assets/javascripts/lib/utils/common_utils.js
@@ -71,6 +71,7 @@ export const handleLocationHash = () => {
   // This is required to handle non-unicode characters in hash
   hash = decodeURIComponent(hash);
 
+  const target = document.getElementById(hash) || document.getElementById(`user-content-${hash}`);
   const fixedTabs = document.querySelector('.js-tabs-affix');
   const fixedDiffStats = document.querySelector('.js-diff-files-changed.is-stuck');
   const fixedNav = document.querySelector('.navbar-gitlab');
@@ -78,25 +79,19 @@ export const handleLocationHash = () => {
   let adjustment = 0;
   if (fixedNav) adjustment -= fixedNav.offsetHeight;
 
-  // scroll to user-generated markdown anchor if we cannot find a match
-  if (document.getElementById(hash) === null) {
-    const target = document.getElementById(`user-content-${hash}`);
-    if (target && target.scrollIntoView) {
-      target.scrollIntoView(true);
-      window.scrollBy(0, adjustment);
-    }
-  } else {
-    // only adjust for fixedTabs when not targeting user-generated content
-    if (fixedTabs) {
-      adjustment -= fixedTabs.offsetHeight;
-    }
+  if (target && target.scrollIntoView) {
+    target.scrollIntoView(true);
+  }
 
-    if (fixedDiffStats) {
-      adjustment -= fixedDiffStats.offsetHeight;
-    }
+  if (fixedTabs) {
+    adjustment -= fixedTabs.offsetHeight;
+  }
 
-    window.scrollBy(0, adjustment);
+  if (fixedDiffStats) {
+    adjustment -= fixedDiffStats.offsetHeight;
   }
+
+  window.scrollBy(0, adjustment);
 };
 
 // Check if element scrolled into viewport from above or below
diff --git a/app/assets/javascripts/lib/utils/datetime_utility.js b/app/assets/javascripts/lib/utils/datetime_utility.js
index 1d1763c3963..29fc91733b3 100644
--- a/app/assets/javascripts/lib/utils/datetime_utility.js
+++ b/app/assets/javascripts/lib/utils/datetime_utility.js
@@ -55,7 +55,7 @@ window.dateFormat = dateFormat;
       if (!timeagoInstance) {
         const localeRemaining = function(number, index) {
           return [
-            [s__('Timeago|less than a minute ago'), s__('Timeago|a while')],
+            [s__('Timeago|less than a minute ago'), s__('Timeago|in a while')],
             [s__('Timeago|less than a minute ago'), s__('Timeago|%s seconds remaining')],
             [s__('Timeago|about a minute ago'), s__('Timeago|1 minute remaining')],
             [s__('Timeago|%s minutes ago'), s__('Timeago|%s minutes remaining')],
@@ -73,7 +73,7 @@ window.dateFormat = dateFormat;
         };
         locale = function(number, index) {
           return [
-            [s__('Timeago|less than a minute ago'), s__('Timeago|a while')],
+            [s__('Timeago|less than a minute ago'), s__('Timeago|in a while')],
             [s__('Timeago|less than a minute ago'), s__('Timeago|in %s seconds')],
             [s__('Timeago|about a minute ago'), s__('Timeago|in 1 minute')],
             [s__('Timeago|%s minutes ago'), s__('Timeago|in %s minutes')],
diff --git a/app/assets/javascripts/line_highlighter.js b/app/assets/javascripts/line_highlighter.js
index 7400c22543f..a16d00b5cef 100644
--- a/app/assets/javascripts/line_highlighter.js
+++ b/app/assets/javascripts/line_highlighter.js
@@ -28,148 +28,149 @@
 //     </div>
 //   </div>
 //
-(function() {
-  this.LineHighlighter = (function() {
-    // CSS class applied to highlighted lines
-    LineHighlighter.prototype.highlightClass = 'hll';
-
-    // Internal copy of location.hash so we're not dependent on `location` in tests
-    LineHighlighter.prototype._hash = '';
-
-    function LineHighlighter(hash) {
-      if (hash == null) {
-        // Initialize a LineHighlighter object
-        //
-        // hash - String URL hash for dependency injection in tests
-        hash = location.hash;
-      }
-      this.setHash = this.setHash.bind(this);
-      this.highlightLine = this.highlightLine.bind(this);
-      this.clickHandler = this.clickHandler.bind(this);
-      this.highlightHash = this.highlightHash.bind(this);
-      this._hash = hash;
-      this.bindEvents();
-      this.highlightHash();
-    }
 
-    LineHighlighter.prototype.bindEvents = function() {
-      const $fileHolder = $('.file-holder');
-      $fileHolder.on('click', 'a[data-line-number]', this.clickHandler);
-      $fileHolder.on('highlight:line', this.highlightHash);
-    };
-
-    LineHighlighter.prototype.highlightHash = function() {
-      var range;
-      if (this._hash !== '') {
-        range = this.hashToRange(this._hash);
-        if (range[0]) {
-          this.highlightRange(range);
-          $.scrollTo("#L" + range[0], {
-            // Scroll to the first highlighted line on initial load
-            // Offset -50 for the sticky top bar, and another -100 for some context
-            offset: -150
-          });
-        }
-      }
-    };
-
-    LineHighlighter.prototype.clickHandler = function(event) {
-      var current, lineNumber, range;
-      event.preventDefault();
-      this.clearHighlight();
-      lineNumber = $(event.target).closest('a').data('line-number');
-      current = this.hashToRange(this._hash);
-      if (!(current[0] && event.shiftKey)) {
-        // If there's no current selection, or there is but Shift wasn't held,
-        // treat this like a single-line selection.
-        this.setHash(lineNumber);
-        return this.highlightLine(lineNumber);
-      } else if (event.shiftKey) {
-        if (lineNumber < current[0]) {
-          range = [lineNumber, current[0]];
-        } else {
-          range = [current[0], lineNumber];
-        }
-        this.setHash(range[0], range[1]);
-        return this.highlightRange(range);
-      }
-    };
-
-    LineHighlighter.prototype.clearHighlight = function() {
-      return $("." + this.highlightClass).removeClass(this.highlightClass);
-    // Unhighlight previously highlighted lines
-    };
-
-    // Convert a URL hash String into line numbers
-    //
-    // hash - Hash String
-    //
-    // Examples:
-    //
-    //   hashToRange('#L5')    # => [5, null]
-    //   hashToRange('#L5-15') # => [5, 15]
-    //   hashToRange('#foo')   # => [null, null]
-    //
-    // Returns an Array
-    LineHighlighter.prototype.hashToRange = function(hash) {
-      var first, last, matches;
-      // ?L(\d+)(?:-(\d+))?$/)
-      matches = hash.match(/^#?L(\d+)(?:-(\d+))?$/);
-      if (matches && matches.length) {
-        first = parseInt(matches[1], 10);
-        last = matches[2] ? parseInt(matches[2], 10) : null;
-        return [first, last];
-      } else {
-        return [null, null];
-      }
-    };
-
-    // Highlight a single line
-    //
-    // lineNumber - Line number to highlight
-    LineHighlighter.prototype.highlightLine = function(lineNumber) {
-      return $("#LC" + lineNumber).addClass(this.highlightClass);
-    };
-
-    // Highlight all lines within a range
-    //
-    // range - Array containing the starting and ending line numbers
-    LineHighlighter.prototype.highlightRange = function(range) {
-      var i, lineNumber, ref, ref1, results;
-      if (range[1]) {
-        results = [];
-        for (lineNumber = i = ref = range[0], ref1 = range[1]; ref <= ref1 ? i <= ref1 : i >= ref1; lineNumber = ref <= ref1 ? (i += 1) : (i -= 1)) {
-          results.push(this.highlightLine(lineNumber));
-        }
-        return results;
-      } else {
-        return this.highlightLine(range[0]);
-      }
-    };
+const LineHighlighter = function(options = {}) {
+  options.highlightLineClass = options.highlightLineClass || 'hll';
+  options.fileHolderSelector = options.fileHolderSelector || '.file-holder';
+  options.scrollFileHolder = options.scrollFileHolder || false;
+  options.hash = options.hash || location.hash;
 
-    // Set the URL hash string
-    LineHighlighter.prototype.setHash = function(firstLineNumber, lastLineNumber) {
-      var hash;
-      if (lastLineNumber) {
-        hash = "#L" + firstLineNumber + "-" + lastLineNumber;
+  this.options = options;
+  this._hash = options.hash;
+  this.highlightLineClass = options.highlightLineClass;
+  this.setHash = this.setHash.bind(this);
+  this.highlightLine = this.highlightLine.bind(this);
+  this.clickHandler = this.clickHandler.bind(this);
+  this.highlightHash = this.highlightHash.bind(this);
+
+  this.bindEvents();
+  this.highlightHash();
+};
+
+LineHighlighter.prototype.bindEvents = function() {
+  const $fileHolder = $(this.options.fileHolderSelector);
+
+  $fileHolder.on('click', 'a[data-line-number]', this.clickHandler);
+  $fileHolder.on('highlight:line', this.highlightHash);
+};
+
+LineHighlighter.prototype.highlightHash = function() {
+  var range;
+
+  if (this._hash !== '') {
+    range = this.hashToRange(this._hash);
+
+    if (range[0]) {
+      this.highlightRange(range);
+      const lineSelector = `#L${range[0]}`;
+      const scrollOptions = {
+        // Scroll to the first highlighted line on initial load
+        // Offset -50 for the sticky top bar, and another -100 for some context
+        offset: -150
+      };
+      if (this.options.scrollFileHolder) {
+        $(this.options.fileHolderSelector).scrollTo(lineSelector, scrollOptions);
       } else {
-        hash = "#L" + firstLineNumber;
+        $.scrollTo(lineSelector, scrollOptions);
       }
-      this._hash = hash;
-      return this.__setLocationHash__(hash);
-    };
-
-    // Make the actual hash change in the browser
-    //
-    // This method is stubbed in tests.
-    LineHighlighter.prototype.__setLocationHash__ = function(value) {
-      return history.pushState({
-        url: value
-      // We're using pushState instead of assigning location.hash directly to
-      // prevent the page from scrolling on the hashchange event
-      }, document.title, value);
-    };
-
-    return LineHighlighter;
-  })();
-}).call(window);
+    }
+  }
+};
+
+LineHighlighter.prototype.clickHandler = function(event) {
+  var current, lineNumber, range;
+  event.preventDefault();
+  this.clearHighlight();
+  lineNumber = $(event.target).closest('a').data('line-number');
+  current = this.hashToRange(this._hash);
+  if (!(current[0] && event.shiftKey)) {
+    // If there's no current selection, or there is but Shift wasn't held,
+    // treat this like a single-line selection.
+    this.setHash(lineNumber);
+    return this.highlightLine(lineNumber);
+  } else if (event.shiftKey) {
+    if (lineNumber < current[0]) {
+      range = [lineNumber, current[0]];
+    } else {
+      range = [current[0], lineNumber];
+    }
+    this.setHash(range[0], range[1]);
+    return this.highlightRange(range);
+  }
+};
+
+LineHighlighter.prototype.clearHighlight = function() {
+  return $("." + this.highlightLineClass).removeClass(this.highlightLineClass);
+};
+
+// Convert a URL hash String into line numbers
+//
+// hash - Hash String
+//
+// Examples:
+//
+//   hashToRange('#L5')    # => [5, null]
+//   hashToRange('#L5-15') # => [5, 15]
+//   hashToRange('#foo')   # => [null, null]
+//
+// Returns an Array
+LineHighlighter.prototype.hashToRange = function(hash) {
+  var first, last, matches;
+  // ?L(\d+)(?:-(\d+))?$/)
+  matches = hash.match(/^#?L(\d+)(?:-(\d+))?$/);
+  if (matches && matches.length) {
+    first = parseInt(matches[1], 10);
+    last = matches[2] ? parseInt(matches[2], 10) : null;
+    return [first, last];
+  } else {
+    return [null, null];
+  }
+};
+
+// Highlight a single line
+//
+// lineNumber - Line number to highlight
+LineHighlighter.prototype.highlightLine = function(lineNumber) {
+  return $("#LC" + lineNumber).addClass(this.highlightLineClass);
+};
+
+// Highlight all lines within a range
+//
+// range - Array containing the starting and ending line numbers
+LineHighlighter.prototype.highlightRange = function(range) {
+  var i, lineNumber, ref, ref1, results;
+  if (range[1]) {
+    results = [];
+    for (lineNumber = i = ref = range[0], ref1 = range[1]; ref <= ref1 ? i <= ref1 : i >= ref1; lineNumber = ref <= ref1 ? (i += 1) : (i -= 1)) {
+      results.push(this.highlightLine(lineNumber));
+    }
+    return results;
+  } else {
+    return this.highlightLine(range[0]);
+  }
+};
+
+// Set the URL hash string
+LineHighlighter.prototype.setHash = function(firstLineNumber, lastLineNumber) {
+  var hash;
+  if (lastLineNumber) {
+    hash = "#L" + firstLineNumber + "-" + lastLineNumber;
+  } else {
+    hash = "#L" + firstLineNumber;
+  }
+  this._hash = hash;
+  return this.__setLocationHash__(hash);
+};
+
+// Make the actual hash change in the browser
+//
+// This method is stubbed in tests.
+LineHighlighter.prototype.__setLocationHash__ = function(value) {
+  return history.pushState({
+    url: value
+  // We're using pushState instead of assigning location.hash directly to
+  // prevent the page from scrolling on the hashchange event
+  }, document.title, value);
+};
+
+window.LineHighlighter = LineHighlighter;
diff --git a/app/assets/javascripts/locale/index.js b/app/assets/javascripts/locale/index.js
index 7ba676d6d20..6a5084efeb8 100644
--- a/app/assets/javascripts/locale/index.js
+++ b/app/assets/javascripts/locale/index.js
@@ -16,9 +16,8 @@ const locales = allLocales.reduce((d, obj) => {
   return data;
 }, {});
 
-let lang = document.querySelector('html').getAttribute('lang') || 'en';
-lang = lang.replace(/-/g, '_');
-
+const langAttribute = document.querySelector('html').getAttribute('lang');
+const lang = (langAttribute || 'en').replace(/-/g, '_');
 const locale = new Jed(locales[lang]);
 
 /**
diff --git a/app/assets/javascripts/main.js b/app/assets/javascripts/main.js
index ec001b9b31c..24abc5c5c9e 100644
--- a/app/assets/javascripts/main.js
+++ b/app/assets/javascripts/main.js
@@ -124,7 +124,6 @@ import './preview_markdown';
 import './project';
 import './project_avatar';
 import './project_find_file';
-import './project_fork';
 import './project_import';
 import './project_label_subscription';
 import './project_new';
@@ -302,7 +301,10 @@ $(function () {
     return $container.remove();
   // Commit show suppressed diff
   });
-  $('.navbar-toggle').on('click', () => $('.header-content').toggleClass('menu-expanded'));
+  $('.navbar-toggle').on('click', () => {
+    $('.header-content').toggleClass('menu-expanded');
+    gl.lazyLoader.loadCheck();
+  });
   // Show/hide comments on diff
   $body.on('click', '.js-toggle-diff-comments', function (e) {
     var $this = $(this);
diff --git a/app/assets/javascripts/merge_request_tabs.js b/app/assets/javascripts/merge_request_tabs.js
index 8ae127776e8..d3299c15720 100644
--- a/app/assets/javascripts/merge_request_tabs.js
+++ b/app/assets/javascripts/merge_request_tabs.js
@@ -352,7 +352,7 @@ import {
     }
 
     expandViewContainer() {
-      const $wrapper = $('.content-wrapper .container-fluid');
+      const $wrapper = $('.content-wrapper .container-fluid').not('.breadcrumbs');
       if (this.fixedLayoutPref === null) {
         this.fixedLayoutPref = $wrapper.hasClass('container-limited');
       }
diff --git a/app/assets/javascripts/notes/components/issue_note.vue b/app/assets/javascripts/notes/components/issue_note.vue
index 3483f6c7538..1f43b8a16ad 100644
--- a/app/assets/javascripts/notes/components/issue_note.vue
+++ b/app/assets/javascripts/notes/components/issue_note.vue
@@ -62,7 +62,7 @@
       },
       deleteHandler() {
         // eslint-disable-next-line no-alert
-        if (confirm('Are you sure you want to delete this list?')) {
+        if (confirm('Are you sure you want to delete this comment?')) {
           this.isDeleting = true;
 
           this.deleteNote(this.note)
diff --git a/app/assets/javascripts/pipelines/components/pipeline_url.vue b/app/assets/javascripts/pipelines/components/pipeline_url.vue
index f0b44dfa6d8..76b97af39f1 100644
--- a/app/assets/javascripts/pipelines/components/pipeline_url.vue
+++ b/app/assets/javascripts/pipelines/components/pipeline_url.vue
@@ -28,8 +28,7 @@
       popoverOptions() {
         return {
           html: true,
-          delay: { hide: 600 },
-          trigger: 'hover',
+          trigger: 'focus',
           placement: 'top',
           title: '<div class="autodevops-title">This pipeline makes use of a predefined CI/CD configuration enabled by <b>Auto DevOps.</b></div>',
           content: `<a class="autodevops-link" href="${this.autoDevopsHelpPath}" target="_blank" rel="noopener noreferrer nofollow">Learn more about Auto DevOps</a>`,
@@ -75,6 +74,7 @@
       </span>
       <a
         v-if="pipeline.flags.auto_devops"
+        tabindex="0"
         class="js-pipeline-url-autodevops label label-info autodevops-badge"
         v-popover="popoverOptions"
         role="button">
diff --git a/app/assets/javascripts/pipelines/mixins/pipelines.js b/app/assets/javascripts/pipelines/mixins/pipelines.js
index 9adc15e6266..e97f5632dc8 100644
--- a/app/assets/javascripts/pipelines/mixins/pipelines.js
+++ b/app/assets/javascripts/pipelines/mixins/pipelines.js
@@ -97,7 +97,7 @@ export default {
     postAction(endpoint) {
       this.service.postAction(endpoint)
         .then(() => eventHub.$emit('refreshPipelines'))
-        .catch(() => new Flash('An error occured while making the request.'));
+        .catch(() => new Flash('An error occurred while making the request.'));
     },
   },
 };
diff --git a/app/assets/javascripts/profile/gl_crop.js b/app/assets/javascripts/profile/gl_crop.js
index 291ae24aa68..4bdda611cfc 100644
--- a/app/assets/javascripts/profile/gl_crop.js
+++ b/app/assets/javascripts/profile/gl_crop.js
@@ -73,7 +73,8 @@ import _ from 'underscore';
         aspectRatio: 1,
         modal: true,
         scalable: false,
-        rotatable: false,
+        rotatable: true,
+        checkOrientation: true,
         zoomable: true,
         dragMode: 'move',
         guides: false,
diff --git a/app/assets/javascripts/project_fork.js b/app/assets/javascripts/project_fork.js
index 47197db39d3..68cf47fd54e 100644
--- a/app/assets/javascripts/project_fork.js
+++ b/app/assets/javascripts/project_fork.js
@@ -1,13 +1,8 @@
-/* eslint-disable func-names, space-before-function-paren, wrap-iife, prefer-arrow-callback, max-len */
-(function() {
-  this.ProjectFork = (function() {
-    function ProjectFork() {
-      $('.fork-thumbnail a').on('click', function() {
-        $('.fork-namespaces').hide();
-        return $('.save-project-loader').show();
-      });
-    }
+export default () => {
+  $('.fork-thumbnail a').on('click', function forkThumbnailClicked() {
+    if ($(this).hasClass('disabled')) return false;
 
-    return ProjectFork;
-  })();
-}).call(window);
+    $('.fork-namespaces').hide();
+    return $('.save-project-loader').show();
+  });
+};
diff --git a/app/assets/javascripts/projects_dropdown/service/projects_service.js b/app/assets/javascripts/projects_dropdown/service/projects_service.js
index fad956b4c26..9cbd8f21f2a 100644
--- a/app/assets/javascripts/projects_dropdown/service/projects_service.js
+++ b/app/assets/javascripts/projects_dropdown/service/projects_service.js
@@ -19,7 +19,7 @@ export default class ProjectsService {
 
   getSearchedProjects(searchQuery) {
     return this.projectsPath.get({
-      simple: false,
+      simple: true,
       per_page: 20,
       membership: !!gon.current_user_id,
       order_by: 'last_activity_at',
diff --git a/app/assets/javascripts/repo/components/repo_commit_section.vue b/app/assets/javascripts/repo/components/repo_commit_section.vue
index 1282828b504..119e38c583d 100644
--- a/app/assets/javascripts/repo/components/repo_commit_section.vue
+++ b/app/assets/javascripts/repo/components/repo_commit_section.vue
@@ -37,14 +37,14 @@ export default {
         content: f.newContent,
       }));
       const payload = {
-        branch: Store.targetBranch,
+        branch: Store.currentBranch,
         commit_message: commitMessage,
         actions,
       };
       Store.submitCommitsLoading = true;
       Service.commitFiles(payload)
         .then(this.resetCommitState)
-        .catch(() => Flash('An error occured while committing your changes'));
+        .catch(() => Flash('An error occurred while committing your changes'));
     },
 
     resetCommitState() {
@@ -105,7 +105,7 @@ export default {
         </label>
         <div class="col-md-6">
           <span class="help-block">
-            {{targetBranch}}
+            {{currentBranch}}
           </span>
         </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 29b76975561..353142edeb7 100644
--- a/app/assets/javascripts/repo/components/repo_edit_button.vue
+++ b/app/assets/javascripts/repo/components/repo_edit_button.vue
@@ -26,16 +26,6 @@ export default {
       this.editMode = !this.editMode;
       Store.toggleBlobView();
     },
-    toggleProjectRefsForm() {
-      $('.project-refs-form').toggleClass('disabled', this.editMode);
-      $('.js-tree-ref-target-holder').toggle(this.editMode);
-    },
-  },
-
-  watch: {
-    editMode() {
-      this.toggleProjectRefsForm();
-    },
   },
 };
 </script>
diff --git a/app/assets/javascripts/repo/components/repo_file.vue b/app/assets/javascripts/repo/components/repo_file.vue
index 20ebf840774..8b9cbd23456 100644
--- a/app/assets/javascripts/repo/components/repo_file.vue
+++ b/app/assets/javascripts/repo/components/repo_file.vue
@@ -95,7 +95,7 @@ export default RepoFile;
       </div>
     </td>
 
-    <td class="hidden-xs">
+    <td class="hidden-xs text-right">
       <span
         class="commit-update"
         :title="tooltipTitle(file.lastCommitUpdate)">
diff --git a/app/assets/javascripts/repo/components/repo_preview.vue b/app/assets/javascripts/repo/components/repo_preview.vue
index 2200754cbef..2fe369a4693 100644
--- a/app/assets/javascripts/repo/components/repo_preview.vue
+++ b/app/assets/javascripts/repo/components/repo_preview.vue
@@ -1,23 +1,27 @@
 <script>
+/* global LineHighlighter */
+
 import Store from '../stores/repo_store';
 
 export default {
   data: () => Store,
-  mounted() {
-    this.highlightFile();
-  },
   computed: {
     html() {
       return this.activeFile.html;
     },
   },
-
   methods: {
     highlightFile() {
       $(this.$el).find('.file-content').syntaxHighlight();
     },
   },
-
+  mounted() {
+    this.highlightFile();
+    this.lineHighlighter = new LineHighlighter({
+      fileHolderSelector: '.blob-viewer-container',
+      scrollFileHolder: true,
+    });
+  },
   watch: {
     html() {
       this.$nextTick(() => {
@@ -45,7 +49,7 @@ export default {
     v-else
     class="vertical-center render-error">
     <p class="text-center">
-      The source could not be displayed because a rendering error occured. You can <a :href="activeFile.raw_path">download</a> it instead.
+      The source could not be displayed because a rendering error occurred. You can <a :href="activeFile.raw_path">download</a> it instead.
     </p>
   </div>
 </div>
diff --git a/app/assets/javascripts/repo/components/repo_sidebar.vue b/app/assets/javascripts/repo/components/repo_sidebar.vue
index 3414128526d..1e40814b95f 100644
--- a/app/assets/javascripts/repo/components/repo_sidebar.vue
+++ b/app/assets/javascripts/repo/components/repo_sidebar.vue
@@ -37,17 +37,24 @@ export default {
       let file = clickedFile;
       if (file.loading) return;
       file.loading = true;
+
       if (file.type === 'tree' && file.opened) {
         file = Store.removeChildFilesOfTree(file);
         file.loading = false;
       } else {
-        Service.url = file.url;
-        Helper.getContent(file)
-          .then(() => {
-            file.loading = false;
-            Helper.scrollTabsRight();
-          })
-          .catch(Helper.loadingError);
+        const openFile = Helper.getFileFromPath(file.url);
+        if (openFile) {
+          file.loading = false;
+          Store.setActiveFiles(openFile);
+        } else {
+          Service.url = file.url;
+          Helper.getContent(file)
+            .then(() => {
+              file.loading = false;
+              Helper.scrollTabsRight();
+            })
+            .catch(Helper.loadingError);
+        }
       }
     },
 
@@ -68,7 +75,7 @@ export default {
       <tr>
         <th class="name">Name</th>
         <th class="hidden-sm hidden-xs last-commit">Last Commit</th>
-        <th class="hidden-xs last-update">Last Update</th>
+        <th class="hidden-xs last-update text-right">Last Update</th>
       </tr>
     </thead>
     <tbody>
diff --git a/app/assets/javascripts/repo/helpers/repo_helper.js b/app/assets/javascripts/repo/helpers/repo_helper.js
index 655e4e7605b..ac59a2bed23 100644
--- a/app/assets/javascripts/repo/helpers/repo_helper.js
+++ b/app/assets/javascripts/repo/helpers/repo_helper.js
@@ -58,13 +58,13 @@ const RepoHelper = {
     return langs.find(lang => lang.extensions && lang.extensions.indexOf(`.${ext}`) > -1);
   },
 
-  setDirectoryOpen(tree) {
+  setDirectoryOpen(tree, title) {
     const file = tree;
     if (!file) return undefined;
 
     file.opened = true;
     file.icon = 'fa-folder-open';
-    RepoHelper.updateHistoryEntry(file.url, file.name);
+    RepoHelper.updateHistoryEntry(file.url, title);
     return file;
   },
 
@@ -135,6 +135,8 @@ const RepoHelper = {
     return Service.getContent()
     .then((response) => {
       const data = response.data;
+      if (response.headers && response.headers['page-title']) data.pageTitle = response.headers['page-title'];
+
       Store.isTree = RepoHelper.isTree(data);
       if (!Store.isTree) {
         if (!file) file = data;
@@ -168,7 +170,7 @@ const RepoHelper = {
       } else {
         // it's a tree
         if (!file) Store.isRoot = RepoHelper.isRoot(Service.url);
-        file = RepoHelper.setDirectoryOpen(file);
+        file = RepoHelper.setDirectoryOpen(file, data.pageTitle || data.name);
         const newDirectory = RepoHelper.dataToListOfFiles(data);
         Store.addFilesToDirectory(file, Store.files, newDirectory);
         Store.prevURL = Service.blobURLtoParentTree(Service.url);
@@ -255,7 +257,7 @@ const RepoHelper = {
     history.pushState({ key: RepoHelper.key }, '', url);
 
     if (title) {
-      document.title = `${title} · GitLab`;
+      document.title = title;
     }
   },
 
@@ -263,6 +265,10 @@ const RepoHelper = {
     return Store.openedFiles.find(openedFile => Store.activeFile.url === openedFile.url);
   },
 
+  getFileFromPath(path) {
+    return Store.openedFiles.find(file => file.url === path);
+  },
+
   loadingError() {
     Flash('Unable to load this content at this time.');
   },
diff --git a/app/assets/javascripts/repo/index.js b/app/assets/javascripts/repo/index.js
index 6c1d468e937..7d0123e3d3a 100644
--- a/app/assets/javascripts/repo/index.js
+++ b/app/assets/javascripts/repo/index.js
@@ -11,10 +11,6 @@ function initDropdowns() {
 }
 
 function addEventsForNonVueEls() {
-  $(document).on('change', '.dropdown', () => {
-    Store.targetBranch = $('.project-refs-target-form input[name="ref"]').val();
-  });
-
   window.onbeforeunload = function confirmUnload(e) {
     const hasChanged = Store.openedFiles
       .some(file => file.changed);
diff --git a/app/assets/javascripts/repo/stores/repo_store.js b/app/assets/javascripts/repo/stores/repo_store.js
index 1c0df528aea..9a4fc40bc69 100644
--- a/app/assets/javascripts/repo/stores/repo_store.js
+++ b/app/assets/javascripts/repo/stores/repo_store.js
@@ -32,7 +32,6 @@ const RepoStore = {
   isCommitable: false,
   binary: false,
   currentBranch: '',
-  targetBranch: 'new-branch',
   commitMessage: '',
   binaryTypes: {
     png: false,
@@ -84,7 +83,7 @@ const RepoStore = {
         }).catch(Helper.loadingError);
     }
 
-    if (!file.loading) Helper.updateHistoryEntry(file.url, file.name);
+    if (!file.loading) Helper.updateHistoryEntry(file.url, file.pageTitle || file.name);
     RepoStore.binary = file.binary;
   },
 
diff --git a/app/assets/javascripts/right_sidebar.js b/app/assets/javascripts/right_sidebar.js
index a4eae135403..a41548bd694 100644
--- a/app/assets/javascripts/right_sidebar.js
+++ b/app/assets/javascripts/right_sidebar.js
@@ -29,28 +29,32 @@ import Cookies from 'js-cookie';
       $('.dropdown').on('loading.gl.dropdown', this.sidebarDropdownLoading);
       $('.dropdown').on('loaded.gl.dropdown', this.sidebarDropdownLoaded);
 
-      $document.on('click', '.js-sidebar-toggle', function(e, triggered) {
-        var $allGutterToggleIcons, $this, $thisIcon;
-        e.preventDefault();
-        $this = $(this);
-        $thisIcon = $this.find('i');
-        $allGutterToggleIcons = $('.js-sidebar-toggle i');
-        if ($thisIcon.hasClass('fa-angle-double-right')) {
-          $allGutterToggleIcons.removeClass('fa-angle-double-right').addClass('fa-angle-double-left');
-          $('aside.right-sidebar').removeClass('right-sidebar-expanded').addClass('right-sidebar-collapsed');
-          $('.page-with-sidebar').removeClass('right-sidebar-expanded').addClass('right-sidebar-collapsed');
-        } else {
-          $allGutterToggleIcons.removeClass('fa-angle-double-left').addClass('fa-angle-double-right');
-          $('aside.right-sidebar').removeClass('right-sidebar-collapsed').addClass('right-sidebar-expanded');
-          $('.page-with-sidebar').removeClass('right-sidebar-collapsed').addClass('right-sidebar-expanded');
-        }
-        if (!triggered) {
-          return Cookies.set("collapsed_gutter", $('.right-sidebar').hasClass('right-sidebar-collapsed'));
-        }
-      });
+      $document.on('click', '.js-sidebar-toggle', this.sidebarToggleClicked);
       return $(document).off('click', '.js-issuable-todo').on('click', '.js-issuable-todo', this.toggleTodo);
     };
 
+    Sidebar.prototype.sidebarToggleClicked = function (e, triggered) {
+      var $allGutterToggleIcons, $this, $thisIcon;
+      e.preventDefault();
+      $this = $(this);
+      $thisIcon = $this.find('i');
+      $allGutterToggleIcons = $('.js-sidebar-toggle i');
+      if ($thisIcon.hasClass('fa-angle-double-right')) {
+        $allGutterToggleIcons.removeClass('fa-angle-double-right').addClass('fa-angle-double-left');
+        $('aside.right-sidebar').removeClass('right-sidebar-expanded').addClass('right-sidebar-collapsed');
+        $('.page-with-sidebar').removeClass('right-sidebar-expanded').addClass('right-sidebar-collapsed');
+      } else {
+        $allGutterToggleIcons.removeClass('fa-angle-double-left').addClass('fa-angle-double-right');
+        $('aside.right-sidebar').removeClass('right-sidebar-collapsed').addClass('right-sidebar-expanded');
+        $('.page-with-sidebar').removeClass('right-sidebar-collapsed').addClass('right-sidebar-expanded');
+
+        if (gl.lazyLoader) gl.lazyLoader.loadCheck();
+      }
+      if (!triggered) {
+        Cookies.set("collapsed_gutter", $('.right-sidebar').hasClass('right-sidebar-collapsed'));
+      }
+    };
+
     Sidebar.prototype.toggleTodo = function(e) {
       var $btnText, $this, $todoLoading, ajaxType, url;
       $this = $(e.currentTarget);
diff --git a/app/assets/javascripts/search_autocomplete.js b/app/assets/javascripts/search_autocomplete.js
index 38c9a71dd20..f15452ec683 100644
--- a/app/assets/javascripts/search_autocomplete.js
+++ b/app/assets/javascripts/search_autocomplete.js
@@ -287,6 +287,7 @@ import { isInGroupsPage, isInProjectPage, getGroupSlug, getProjectSlug } from '.
 
     onClearInputClick(e) {
       e.preventDefault();
+      this.wrap.toggleClass('has-value', !!e.target.value);
       return this.searchInput.val('').focus();
     }
 
diff --git a/app/assets/javascripts/sidebar/lib/sidebar_move_issue.js b/app/assets/javascripts/sidebar/lib/sidebar_move_issue.js
index 1c15a1b877a..3c9de02407e 100644
--- a/app/assets/javascripts/sidebar/lib/sidebar_move_issue.js
+++ b/app/assets/javascripts/sidebar/lib/sidebar_move_issue.js
@@ -38,7 +38,7 @@ class SidebarMoveIssue {
       data: (searchTerm, callback) => {
         this.mediator.fetchAutocompleteProjects(searchTerm)
           .then(callback)
-          .catch(() => new Flash('An error occured while fetching projects autocomplete.'));
+          .catch(() => new Flash('An error occurred while fetching projects autocomplete.'));
       },
       renderRow: project => `
         <li>
@@ -73,7 +73,7 @@ class SidebarMoveIssue {
 
       this.mediator.moveIssue()
         .catch(() => {
-          Flash('An error occured while moving the issue.');
+          Flash('An error occurred while moving the issue.');
           this.$confirmButton
             .enable()
             .removeClass('is-loading');
diff --git a/app/assets/javascripts/sidebar/sidebar_mediator.js b/app/assets/javascripts/sidebar/sidebar_mediator.js
index e38a8db4cc5..2fe6e5b31f0 100644
--- a/app/assets/javascripts/sidebar/sidebar_mediator.js
+++ b/app/assets/javascripts/sidebar/sidebar_mediator.js
@@ -41,7 +41,7 @@ export default class SidebarMediator {
         this.store.setAssigneeData(data);
         this.store.setTimeTrackingData(data);
       })
-      .catch(() => new Flash('Error occured when fetching sidebar data'));
+      .catch(() => new Flash('Error occurred when fetching sidebar data'));
   }
 
   fetchAutocompleteProjects(searchTerm) {
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_status_icon.js b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_status_icon.js
index 703f3a56a34..4998a47b691 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_status_icon.js
+++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_status_icon.js
@@ -27,7 +27,7 @@ export default {
       <button
         v-if="showDisabledButton"
         type="button"
-        class="btn btn-success btn-sm"
+        class="js-disabled-merge-button btn btn-success btn-sm"
         disabled="true">
         Merge
       </button>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_closed.js b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_closed.js
index 4078aad7f83..b25cc3443ef 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_closed.js
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_closed.js
@@ -16,9 +16,9 @@ export default {
       <div class="media-body">
         <mr-widget-author-and-time
           actionText="Closed by"
-          :author="mr.closedBy"
-          :dateTitle="mr.updatedAt"
-          :dateReadable="mr.closedAt"
+          :author="mr.closedEvent.author"
+          :dateTitle="mr.closedEvent.updatedAt"
+          :dateReadable="mr.closedEvent.formattedUpdatedAt"
         />
         <section class="mr-info-list">
           <p>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_conflicts.js b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_conflicts.js
index f9cb79a0bc1..dc252f8a9b7 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_conflicts.js
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_conflicts.js
@@ -10,27 +10,37 @@ export default {
   },
   template: `
     <div class="mr-widget-body media">
-      <status-icon status="failed" showDisabledButton />
+      <status-icon
+        status="failed"
+        showDisabledButton />
       <div class="media-body space-children">
-        <span class="bold">
-          There are merge conflicts<span v-if="!mr.canMerge">.</span>
-          <span v-if="!mr.canMerge">
-            Resolve these conflicts or ask someone with write access to this repository to merge it locally
-          </span>
+        <span
+          v-if="mr.shouldBeRebased"
+          class="bold">
+          Fast-forward merge is not possible.
+          To merge this request, first rebase locally.
         </span>
-        <a
-          v-if="mr.canMerge && mr.conflictResolutionPath"
-          :href="mr.conflictResolutionPath"
-          class="btn btn-default btn-xs js-resolve-conflicts-button">
-          Resolve conflicts
-        </a>
-        <a
-          v-if="mr.canMerge"
-          class="btn btn-default btn-xs js-merge-locally-button"
-          data-toggle="modal"
-          href="#modal_merge_info">
-          Merge locally
-        </a>
+        <template v-else>
+          <span class="bold">
+            There are merge conflicts<span v-if="!mr.canMerge">.</span>
+            <span v-if="!mr.canMerge">
+              Resolve these conflicts or ask someone with write access to this repository to merge it locally
+            </span>
+          </span>
+          <a
+            v-if="mr.canMerge && mr.conflictResolutionPath"
+            :href="mr.conflictResolutionPath"
+            class="js-resolve-conflicts-button btn btn-default btn-xs">
+            Resolve conflicts
+          </a>
+          <a
+            v-if="mr.canMerge"
+            class="js-merge-locally-button btn btn-default btn-xs"
+            data-toggle="modal"
+            href="#modal_merge_info">
+            Merge locally
+          </a>
+        </template>
       </div>
     </div>
   `,
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merged.js b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merged.js
index e452260a4d0..74fc52796a0 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merged.js
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merged.js
@@ -69,9 +69,9 @@ export default {
         <div class="space-children">
           <mr-widget-author-and-time
             actionText="Merged by"
-            :author="mr.mergedBy"
-            :dateTitle="mr.updatedAt"
-            :dateReadable="mr.mergedAt" />
+            :author="mr.mergedEvent.author"
+            :date-title="mr.mergedEvent.updatedAt"
+            :date-readable="mr.mergedEvent.formattedUpdatedAt" />
           <a
             v-if="mr.canRevertInCurrentMR"
             v-tooltip
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_ready_to_merge.js b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_ready_to_merge.js
index ad709da51ee..f83d3ca00dd 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_ready_to_merge.js
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_ready_to_merge.js
@@ -284,10 +284,16 @@ export default {
                 :mr="mr"
                 :is-merge-button-disabled="isMergeButtonDisabled" />
 
+              <span
+                v-if="mr.ffOnlyEnabled"
+                class="js-fast-forward-message">
+                Fast-forward merge without a merge commit
+              </span>
               <button
+                v-else
                 @click="toggleCommitMessageEditor"
                 :disabled="isMergeButtonDisabled"
-                class="btn btn-default btn-xs"
+                class="js-modify-commit-message-button btn btn-default btn-xs"
                 type="button">
                 Modify commit message
               </button>
diff --git a/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js b/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js
index 29464662578..e554082149b 100644
--- a/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js
+++ b/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js
@@ -37,10 +37,8 @@ export default class MergeRequestStore {
     }
 
     this.updatedAt = data.updated_at;
-    this.mergedAt = MergeRequestStore.getEventDate(data.merge_event);
-    this.closedAt = MergeRequestStore.getEventDate(data.closed_event);
-    this.mergedBy = MergeRequestStore.getAuthorObject(data.merge_event);
-    this.closedBy = MergeRequestStore.getAuthorObject(data.closed_event);
+    this.mergedEvent = MergeRequestStore.getEventObject(data.merge_event);
+    this.closedEvent = MergeRequestStore.getEventObject(data.closed_event);
     this.setToMWPSBy = MergeRequestStore.getAuthorObject({ author: data.merge_user || {} });
     this.mergeUserId = data.merge_user_id;
     this.currentUserId = gon.current_user_id;
@@ -57,6 +55,8 @@ export default class MergeRequestStore {
     this.onlyAllowMergeIfPipelineSucceeds = data.only_allow_merge_if_pipeline_succeeds || false;
     this.mergeWhenPipelineSucceeds = data.merge_when_pipeline_succeeds || false;
     this.mergePath = data.merge_path;
+    this.ffOnlyEnabled = data.ff_only_enabled;
+    this.shouldBeRebased = !!data.should_be_rebased;
     this.statusPath = data.status_path;
     this.emailPatchesPath = data.email_patches_path;
     this.plainDiffPath = data.plain_diff_path;
@@ -118,6 +118,14 @@ export default class MergeRequestStore {
     }
   }
 
+  static getEventObject(event) {
+    return {
+      author: MergeRequestStore.getAuthorObject(event),
+      updatedAt: gl.utils.formatDate(MergeRequestStore.getEventUpdatedAtDate(event)),
+      formattedUpdatedAt: MergeRequestStore.getEventDate(event),
+    };
+  }
+
   static getAuthorObject(event) {
     if (!event) {
       return {};
@@ -131,6 +139,14 @@ export default class MergeRequestStore {
     };
   }
 
+  static getEventUpdatedAtDate(event) {
+    if (!event) {
+      return '';
+    }
+
+    return event.updated_at;
+  }
+
   static getEventDate(event) {
     const timeagoInstance = new Timeago();
 
@@ -138,7 +154,7 @@ export default class MergeRequestStore {
       return '';
     }
 
-    return timeagoInstance.format(event.updated_at);
+    return timeagoInstance.format(MergeRequestStore.getEventUpdatedAtDate(event));
   }
 
 }