Merge branch 'master' into 'docs-specific-review-examples'docs-specific-review-examples

# Conflicts:
#   doc/development/code_review.md

28 files changed, 499 insertions, 35 deletions

diff --git a/app/assets/javascripts/blob_edit/blob_bundle.js b/app/assets/javascripts/blob_edit/blob_bundle.js
index 1c64ccf536f..b5500ac116f 100644
--- a/app/assets/javascripts/blob_edit/blob_bundle.js
+++ b/app/assets/javascripts/blob_edit/blob_bundle.js
@@ -8,6 +8,7 @@ import BlobFileDropzone from '../blob/blob_file_dropzone';
 $(() => {
   const editBlobForm = $('.js-edit-blob-form');
   const uploadBlobForm = $('.js-upload-blob-form');
+  const deleteBlobForm = $('.js-delete-blob-form');
 
   if (editBlobForm.length) {
     const urlRoot = editBlobForm.data('relative-url-root');
@@ -30,4 +31,8 @@ $(() => {
       '.btn-upload-file',
     );
   }
+
+  if (deleteBlobForm.length) {
+    new NewCommitForm(deleteBlobForm);
+  }
 });
diff --git a/app/assets/javascripts/build.js b/app/assets/javascripts/build.js
index 1dfa064acfd..b3d3bbcf84f 100644
--- a/app/assets/javascripts/build.js
+++ b/app/assets/javascripts/build.js
@@ -64,7 +64,7 @@ window.Build = (function () {
     $(window)
       .off('scroll')
       .on('scroll', () => {
-        const contentHeight = this.$buildTraceOutput.prop('scrollHeight');
+        const contentHeight = this.$buildTraceOutput.height();
         if (contentHeight > this.windowSize) {
           // means the user did not scroll, the content was updated.
           this.windowSize = contentHeight;
@@ -105,16 +105,17 @@ window.Build = (function () {
   };
 
   Build.prototype.canScroll = function () {
-    return document.body.scrollHeight > window.innerHeight;
+    return $(document).height() > $(window).height();
   };
 
   Build.prototype.toggleScroll = function () {
-    const currentPosition = document.body.scrollTop;
-    const windowHeight = window.innerHeight;
+    const currentPosition = $(document).scrollTop();
+    const scrollHeight = $(document).height();
 
+    const windowHeight = $(window).height();
     if (this.canScroll()) {
       if (currentPosition > 0 &&
-        (document.body.scrollHeight - currentPosition !== windowHeight)) {
+        (scrollHeight - currentPosition !== windowHeight)) {
       // User is in the middle of the log
 
         this.toggleDisableButton(this.$scrollTopBtn, false);
@@ -124,7 +125,7 @@ window.Build = (function () {
 
         this.toggleDisableButton(this.$scrollTopBtn, true);
         this.toggleDisableButton(this.$scrollBottomBtn, false);
-      } else if (document.body.scrollHeight - currentPosition === windowHeight) {
+      } else if (scrollHeight - currentPosition === windowHeight) {
         // User is at the bottom of the build log.
 
         this.toggleDisableButton(this.$scrollTopBtn, false);
@@ -137,7 +138,7 @@ window.Build = (function () {
   };
 
   Build.prototype.scrollDown = function () {
-    document.body.scrollTop = document.body.scrollHeight;
+    $(document).scrollTop($(document).height());
   };
 
   Build.prototype.scrollToBottom = function () {
@@ -147,7 +148,7 @@ window.Build = (function () {
   };
 
   Build.prototype.scrollToTop = function () {
-    document.body.scrollTop = 0;
+    $(document).scrollTop(0);
     this.hasBeenScrolled = true;
     this.toggleScroll();
   };
@@ -178,7 +179,7 @@ window.Build = (function () {
           this.state = log.state;
         }
 
-        this.windowSize = this.$buildTraceOutput.prop('scrollHeight');
+        this.windowSize = this.$buildTraceOutput.height();
 
         if (log.append) {
           this.$buildTraceOutput.append(log.html);
diff --git a/app/assets/javascripts/dispatcher.js b/app/assets/javascripts/dispatcher.js
index 9d706b5ba59..a2664c0301e 100644
--- a/app/assets/javascripts/dispatcher.js
+++ b/app/assets/javascripts/dispatcher.js
@@ -8,6 +8,8 @@
 /* global LabelsSelect */
 /* global MilestoneSelect */
 /* global Commit */
+/* global CommitsList */
+/* global NewBranchForm */
 /* global NotificationsForm */
 /* global NotificationsDropdown */
 /* global GroupAvatar */
@@ -18,15 +20,20 @@
 /* global Search */
 /* global Admin */
 /* global NamespaceSelects */
+/* global NewCommitForm */
+/* global NewBranchForm */
 /* global Project */
 /* global ProjectAvatar */
 /* global MergeRequest */
 /* global Compare */
 /* global CompareAutocomplete */
+/* global ProjectFindFile */
 /* global ProjectNew */
 /* global ProjectShow */
+/* global ProjectImport */
 /* global Labels */
 /* global Shortcuts */
+/* global ShortcutsFindFile */
 /* global Sidebar */
 /* global ShortcutsWiki */
 
@@ -194,7 +201,6 @@ import GpgBadges from './gpg_badges';
           break;
         case 'explore:groups:index':
           new GroupsList();
-
           const landingElement = document.querySelector('.js-explore-groups-landing');
           if (!landingElement) break;
           const exploreGroupsLanding = new Landing(
@@ -217,6 +223,10 @@ import GpgBadges from './gpg_badges';
         case 'projects:compare:show':
           new gl.Diff();
           break;
+        case 'projects:branches:new':
+        case 'projects:branches:create':
+          new NewBranchForm($('.js-create-branch-form'), JSON.parse(document.getElementById('availableRefs').innerHTML));
+          break;
         case 'projects:branches:index':
           gl.AjaxLoadingSpinner.init();
           new DeleteModal();
@@ -258,7 +268,7 @@ import GpgBadges from './gpg_badges';
         case 'projects:tags:new':
           new ZenMode();
           new gl.GLForm($('.tag-form'), true);
-          new RefSelectDropdown($('.js-branch-select'), window.gl.availableRefs);
+          new RefSelectDropdown($('.js-branch-select'));
           break;
         case 'projects:snippets:show':
           initNotes();
@@ -304,18 +314,23 @@ import GpgBadges from './gpg_badges';
             container: '.js-commit-pipeline-graph',
           }).bindEvents();
           initNotes();
+          $('.commit-info.branches').load(document.querySelector('.js-commit-box').dataset.commitPath);
           break;
         case 'projects:commit:pipelines':
           new MiniPipelineGraph({
             container: '.js-commit-pipeline-graph',
           }).bindEvents();
+          $('.commit-info.branches').load(document.querySelector('.js-commit-box').dataset.commitPath);
           break;
-        case 'projects:commits:show':
+        case 'projects:activity':
+          new gl.Activities();
           shortcut_handler = new ShortcutsNavigation();
-          GpgBadges.fetch();
           break;
-        case 'projects:activity':
+        case 'projects:commits:show':
+          CommitsList.init(document.querySelector('.js-project-commits-show').dataset.commitsLimit);
+          new gl.Activities();
           shortcut_handler = new ShortcutsNavigation();
+          GpgBadges.fetch();
           break;
         case 'projects:show':
           shortcut_handler = new ShortcutsNavigation();
@@ -330,6 +345,12 @@ import GpgBadges from './gpg_badges';
         case 'projects:edit':
           setupProjectEdit();
           break;
+        case 'projects:imports:show':
+          new ProjectImport();
+          break;
+        case 'projects:pipelines:new':
+          new NewBranchForm($('.js-new-pipeline-form'));
+          break;
         case 'projects:pipelines:builds':
         case 'projects:pipelines:failures':
         case 'projects:pipelines:show':
@@ -383,8 +404,19 @@ import GpgBadges from './gpg_badges';
           shortcut_handler = new ShortcutsNavigation();
           new TreeView();
           new BlobViewer();
+          new NewCommitForm($('.js-create-dir-form'));
+          $('#tree-slider').waitForImages(function() {
+            gl.utils.ajaxGet(document.querySelector('.js-tree-content').dataset.logsPath);
+          });
           break;
         case 'projects:find_file:show':
+          const findElement = document.querySelector('.js-file-finder');
+          const projectFindFile = new ProjectFindFile($(".file-finder-holder"), {
+            url: findElement.dataset.fileFindUrl,
+            treeUrl: findElement.dataset.findTreeUrl,
+            blobUrlTemplate: findElement.dataset.blobUrlTemplate,
+          });
+          new ShortcutsFindFile(projectFindFile);
           shortcut_handler = true;
           break;
         case 'projects:blob:show':
@@ -540,6 +572,7 @@ import GpgBadges from './gpg_badges';
               shortcut_handler = new ShortcutsWiki();
               new ZenMode();
               new gl.GLForm($('.wiki-form'), true);
+              new Sidebar();
               break;
             case 'snippets':
               shortcut_handler = new ShortcutsNavigation();
diff --git a/app/assets/javascripts/gl_dropdown.js b/app/assets/javascripts/gl_dropdown.js
index 3babe273100..9475498e176 100644
--- a/app/assets/javascripts/gl_dropdown.js
+++ b/app/assets/javascripts/gl_dropdown.js
@@ -730,10 +730,10 @@ GitLabDropdown = (function() {
 
   GitLabDropdown.prototype.focusTextInput = function(triggerFocus = false) {
     if (this.options.filterable) {
-      $(':focus').blur();
-
       this.dropdown.one('transitionend', () => {
-        this.filterInput.focus();
+        if (this.dropdown.is('.open')) {
+          this.filterInput.focus();
+        }
       });
 
       if (triggerFocus) {
diff --git a/app/assets/javascripts/graphs/graphs_bundle.js b/app/assets/javascripts/graphs/graphs_bundle.js
index a433c7ba8f0..534bc535bb6 100644
--- a/app/assets/javascripts/graphs/graphs_bundle.js
+++ b/app/assets/javascripts/graphs/graphs_bundle.js
@@ -1,6 +1,4 @@
 import Chart from 'vendor/Chart';
-import ContributorsStatGraph from './stat_graph_contributors';
 
 // export to global scope
 window.Chart = Chart;
-window.ContributorsStatGraph = ContributorsStatGraph;
diff --git a/app/assets/javascripts/graphs/graphs_charts.js b/app/assets/javascripts/graphs/graphs_charts.js
new file mode 100644
index 00000000000..279ffef770f
--- /dev/null
+++ b/app/assets/javascripts/graphs/graphs_charts.js
@@ -0,0 +1,63 @@
+import Chart from 'vendor/Chart';
+
+document.addEventListener('DOMContentLoaded', () => {
+  const projectChartData = JSON.parse(document.getElementById('projectChartData').innerHTML);
+
+  const responsiveChart = (selector, data) => {
+    const options = {
+      scaleOverlay: true,
+      responsive: true,
+      pointHitDetectionRadius: 2,
+      maintainAspectRatio: false,
+    };
+    // get selector by context
+    const ctx = selector.get(0).getContext('2d');
+    // pointing parent container to make chart.js inherit its width
+    const container = $(selector).parent();
+    const generateChart = () => {
+      selector.attr('width', $(container).width());
+      if (window.innerWidth < 768) {
+        // Scale fonts if window width lower than 768px (iPad portrait)
+        options.scaleFontSize = 8;
+      }
+      return new Chart(ctx).Bar(data, options);
+    };
+    // enabling auto-resizing
+    $(window).resize(generateChart);
+    return generateChart();
+  };
+
+  const chartData = (keys, values) => {
+    const data = {
+      labels: keys,
+      datasets: [{
+        fillColor: 'rgba(220,220,220,0.5)',
+        strokeColor: 'rgba(220,220,220,1)',
+        barStrokeWidth: 1,
+        barValueSpacing: 1,
+        barDatasetSpacing: 1,
+        data: values,
+      }],
+    };
+    return data;
+  };
+
+  const hourData = chartData(projectChartData.hour.keys, projectChartData.hour.values);
+  responsiveChart($('#hour-chart'), hourData);
+
+  const dayData = chartData(projectChartData.weekDays.keys, projectChartData.weekDays.values);
+  responsiveChart($('#weekday-chart'), dayData);
+
+  const monthData = chartData(projectChartData.month.keys, projectChartData.month.values);
+  responsiveChart($('#month-chart'), monthData);
+
+  const data = projectChartData.languages;
+  const ctx = $('#languages-chart').get(0).getContext('2d');
+  const options = {
+    scaleOverlay: true,
+    responsive: true,
+    maintainAspectRatio: false,
+  };
+
+  new Chart(ctx).Pie(data, options);
+});
diff --git a/app/assets/javascripts/graphs/graphs_show.js b/app/assets/javascripts/graphs/graphs_show.js
new file mode 100644
index 00000000000..36bad6db3e1
--- /dev/null
+++ b/app/assets/javascripts/graphs/graphs_show.js
@@ -0,0 +1,21 @@
+import ContributorsStatGraph from './stat_graph_contributors';
+
+document.addEventListener('DOMContentLoaded', () => {
+  $.ajax({
+    type: 'GET',
+    url: document.querySelector('.js-graphs-show').dataset.projectGraphPath,
+    dataType: 'json',
+    success(data) {
+      const graph = new ContributorsStatGraph();
+      graph.init(data);
+
+      $('#brush_change').change(() => {
+        graph.change_date_header();
+        graph.redraw_authors();
+      });
+
+      $('.stat-graph').fadeIn();
+      $('.loading-graph').hide();
+    },
+  });
+});
diff --git a/app/assets/javascripts/pipelines/pipelines_charts.js b/app/assets/javascripts/pipelines/pipelines_charts.js
new file mode 100644
index 00000000000..001faf4be33
--- /dev/null
+++ b/app/assets/javascripts/pipelines/pipelines_charts.js
@@ -0,0 +1,38 @@
+import Chart from 'vendor/Chart';
+
+document.addEventListener('DOMContentLoaded', () => {
+  const chartData = JSON.parse(document.getElementById('pipelinesChartsData').innerHTML);
+  const buildChart = (chartScope) => {
+    const data = {
+      labels: chartScope.labels,
+      datasets: [{
+        fillColor: '#7f8fa4',
+        strokeColor: '#7f8fa4',
+        pointColor: '#7f8fa4',
+        pointStrokeColor: '#EEE',
+        data: chartScope.totalValues,
+      },
+      {
+        fillColor: '#44aa22',
+        strokeColor: '#44aa22',
+        pointColor: '#44aa22',
+        pointStrokeColor: '#fff',
+        data: chartScope.successValues,
+      },
+      ],
+    };
+    const ctx = $(`#${chartScope.scope}Chart`).get(0).getContext('2d');
+    const options = {
+      scaleOverlay: true,
+      responsive: true,
+      maintainAspectRatio: false,
+    };
+    if (window.innerWidth < 768) {
+      // Scale fonts if window width lower than 768px (iPad portrait)
+      options.scaleFontSize = 8;
+    }
+    new Chart(ctx).Line(data, options);
+  };
+
+  chartData.forEach(scope => buildChart(scope));
+});
diff --git a/app/assets/javascripts/pipelines/pipelines_times.js b/app/assets/javascripts/pipelines/pipelines_times.js
new file mode 100644
index 00000000000..b5e7a0e53d9
--- /dev/null
+++ b/app/assets/javascripts/pipelines/pipelines_times.js
@@ -0,0 +1,27 @@
+import Chart from 'vendor/Chart';
+
+document.addEventListener('DOMContentLoaded', () => {
+  const chartData = JSON.parse(document.getElementById('pipelinesTimesChartsData').innerHTML);
+  const data = {
+    labels: chartData.labels,
+    datasets: [{
+      fillColor: 'rgba(220,220,220,0.5)',
+      strokeColor: 'rgba(220,220,220,1)',
+      barStrokeWidth: 1,
+      barValueSpacing: 1,
+      barDatasetSpacing: 1,
+      data: chartData.values,
+    }],
+  };
+  const ctx = $('#build_timesChart').get(0).getContext('2d');
+  const options = {
+    scaleOverlay: true,
+    responsive: true,
+    maintainAspectRatio: false,
+  };
+  if (window.innerWidth < 768) {
+    // Scale fonts if window width lower than 768px (iPad portrait)
+    options.scaleFontSize = 8;
+  }
+  new Chart(ctx).Bar(data, options);
+});
diff --git a/app/assets/javascripts/projects/project_new.js b/app/assets/javascripts/projects/project_new.js
new file mode 100644
index 00000000000..1dc1dbf356d
--- /dev/null
+++ b/app/assets/javascripts/projects/project_new.js
@@ -0,0 +1,85 @@
+let hasUserDefinedProjectPath = false;
+
+const deriveProjectPathFromUrl = ($projectImportUrl, $projectPath) => {
+  if ($projectImportUrl.attr('disabled') || hasUserDefinedProjectPath) {
+    return;
+  }
+
+  let importUrl = $projectImportUrl.val().trim();
+  if (importUrl.length === 0) {
+    return;
+  }
+
+  /*
+    \/?: remove trailing slash
+    (\.git\/?)?: remove trailing .git (with optional trailing slash)
+    (\?.*)?: remove query string
+    (#.*)?: remove fragment identifier
+  */
+  importUrl = importUrl.replace(/\/?(\.git\/?)?(\?.*)?(#.*)?$/, '');
+
+  // extract everything after the last slash
+  const pathMatch = /\/([^/]+)$/.exec(importUrl);
+  if (pathMatch) {
+    $projectPath.val(pathMatch[1]);
+  }
+};
+
+const bindEvents = () => {
+  const $newProjectForm = $('#new_project');
+  const importBtnTooltip = 'Please enter a valid project name.';
+  const $importBtnWrapper = $('.import_gitlab_project');
+  const $projectImportUrl = $('#project_import_url');
+  const $projectPath = $('#project_path');
+
+  if ($newProjectForm.length !== 1) {
+    return;
+  }
+
+  $('.how_to_import_link').on('click', (e) => {
+    e.preventDefault();
+    $('.how_to_import_link').next('.modal').show();
+  });
+
+  $('.modal-header .close').on('click', () => {
+    $('.modal').hide();
+  });
+
+  $('.btn_import_gitlab_project').on('click', () => {
+    const importHref = $('a.btn_import_gitlab_project').attr('href');
+    $('.btn_import_gitlab_project').attr('href', `${importHref}?namespace_id=${$('#project_namespace_id').val()}&path=${$projectPath.val()}`);
+  });
+
+  $('.btn_import_gitlab_project').attr('disabled', !$projectPath.val().trim().length);
+  $importBtnWrapper.attr('title', importBtnTooltip);
+
+  $newProjectForm.on('submit', () => {
+    $projectPath.val($projectPath.val().trim());
+  });
+
+  $projectPath.on('keyup', () => {
+    hasUserDefinedProjectPath = $projectPath.val().trim().length > 0;
+    if (hasUserDefinedProjectPath) {
+      $('.btn_import_gitlab_project').attr('disabled', false);
+      $importBtnWrapper.attr('title', '');
+      $importBtnWrapper.removeClass('has-tooltip');
+    } else {
+      $('.btn_import_gitlab_project').attr('disabled', true);
+      $importBtnWrapper.addClass('has-tooltip');
+    }
+  });
+
+  $projectImportUrl.disable();
+  $projectImportUrl.keyup(() => deriveProjectPathFromUrl($projectImportUrl, $projectPath));
+
+  $('.import_git').on('click', () => {
+    $projectImportUrl.attr('disabled', !$projectImportUrl.attr('disabled'));
+  });
+};
+
+document.addEventListener('DOMContentLoaded', bindEvents);
+
+export default {
+  bindEvents,
+  deriveProjectPathFromUrl,
+};
diff --git a/app/assets/javascripts/ref_select_dropdown.js b/app/assets/javascripts/ref_select_dropdown.js
index 215cd6fbdfd..65e4101352c 100644
--- a/app/assets/javascripts/ref_select_dropdown.js
+++ b/app/assets/javascripts/ref_select_dropdown.js
@@ -1,7 +1,8 @@
 class RefSelectDropdown {
   constructor($dropdownButton, availableRefs) {
+    const availableRefsValue = availableRefs || JSON.parse(document.getElementById('availableRefs').innerHTML);
     $dropdownButton.glDropdown({
-      data: availableRefs,
+      data: availableRefsValue,
       filterable: true,
       filterByText: true,
       remote: false,
diff --git a/app/assets/javascripts/two_factor_auth.js b/app/assets/javascripts/two_factor_auth.js
new file mode 100644
index 00000000000..d26f61562a5
--- /dev/null
+++ b/app/assets/javascripts/two_factor_auth.js
@@ -0,0 +1,13 @@
+/* global U2FRegister */
+document.addEventListener('DOMContentLoaded', () => {
+  const twoFactorNode = document.querySelector('.js-two-factor-auth');
+  const skippable = twoFactorNode.dataset.twoFactorSkippable === 'true';
+  if (skippable) {
+    const button = `<a class="btn btn-xs btn-warning pull-right" data-method="patch" href="${twoFactorNode.dataset.two_factor_skip_url}">Configure it later</a>`;
+    const flashAlert = document.querySelector('.flash-alert .container-fluid');
+    if (flashAlert) flashAlert.insertAdjacentHTML('beforeend', button);
+  }
+
+  const u2fRegister = new U2FRegister($('#js-register-u2f'), gon.u2f);
+  u2fRegister.start();
+});
diff --git a/app/assets/javascripts/ui_development_kit.js b/app/assets/javascripts/ui_development_kit.js
new file mode 100644
index 00000000000..f503076715c
--- /dev/null
+++ b/app/assets/javascripts/ui_development_kit.js
@@ -0,0 +1,22 @@
+import Api from './api';
+
+document.addEventListener('DOMContentLoaded', () => {
+  $('#js-project-dropdown').glDropdown({
+    data: (term, callback) => {
+      Api.projects(term, {
+        order_by: 'last_activity_at',
+      }, (data) => {
+        callback(data);
+      });
+    },
+    text: project => (project.name_with_namespace || project.name),
+    selectable: true,
+    fieldName: 'author_id',
+    filterable: true,
+    search: {
+      fields: ['name_with_namespace'],
+    },
+    id: data => data.id,
+    isSelected: data => (data.id === 2),
+  });
+});
diff --git a/app/assets/stylesheets/framework/avatar.scss b/app/assets/stylesheets/framework/avatar.scss
index 0dfa7a31d31..cb41df8a88d 100644
--- a/app/assets/stylesheets/framework/avatar.scss
+++ b/app/assets/stylesheets/framework/avatar.scss
@@ -88,6 +88,10 @@
   overflow: hidden;
   display: flex;
 
+  a {
+    display: flex;
+  }
+
   .avatar {
     border-radius: 0;
     border: none;
diff --git a/app/assets/stylesheets/framework/filters.scss b/app/assets/stylesheets/framework/filters.scss
index ab2abaca33a..ec13a86ccf7 100644
--- a/app/assets/stylesheets/framework/filters.scss
+++ b/app/assets/stylesheets/framework/filters.scss
@@ -414,13 +414,16 @@
   background-color: $dropdown-hover-color;
   color: $white-light;
   text-decoration: none;
+  outline: 0;
 
   .avatar {
     border-color: $white-light;
   }
 }
 
-.filter-dropdown-item {
+.droplab-dropdown .dropdown-menu .filter-dropdown-item {
+  padding: 0;
+
   .btn {
     border: none;
     width: 100%;
@@ -455,14 +458,11 @@
   }
 
   .dropdown-user {
-    display: -webkit-flex;
     display: flex;
   }
 
   .dropdown-user-details {
-    display: -webkit-flex;
     display: flex;
-    -webkit-flex-direction: column;
     flex-direction: column;
 
     > span {
diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss
index 605f4284bb5..1c4238bc564 100644
--- a/app/assets/stylesheets/framework/header.scss
+++ b/app/assets/stylesheets/framework/header.scss
@@ -313,6 +313,29 @@ header {
   .impersonation i {
     color: $red-500;
   }
+
+  // TODO: fallback to global style
+  .dropdown-menu,
+  .dropdown-menu-nav {
+    li {
+      padding: 0 1px;
+
+      a {
+        border-radius: 0;
+        padding: 8px 16px;
+
+        &:hover,
+        &:active,
+        &:focus {
+          background-color: $gray-darker;
+        }
+      }
+    }
+  }
+}
+
+.with-performance-bar header.navbar-gitlab {
+  top: $performance-bar-height;
 }
 
 .navbar-nav {
diff --git a/app/assets/stylesheets/framework/layout.scss b/app/assets/stylesheets/framework/layout.scss
index 4a9d41b4fda..67c3287ed74 100644
--- a/app/assets/stylesheets/framework/layout.scss
+++ b/app/assets/stylesheets/framework/layout.scss
@@ -120,3 +120,7 @@ of the body element here, we negate cascading side effects but allow momentum sc
 .page-with-sidebar {
   -webkit-overflow-scrolling: auto;
 }
+
+.with-performance-bar .page-with-sidebar {
+  margin-top: $header-height + $performance-bar-height;
+}
diff --git a/app/assets/stylesheets/framework/nav.scss b/app/assets/stylesheets/framework/nav.scss
index 35b4d77a5ab..88e7ba117d5 100644
--- a/app/assets/stylesheets/framework/nav.scss
+++ b/app/assets/stylesheets/framework/nav.scss
@@ -347,6 +347,10 @@
   }
 }
 
+.with-performance-bar .layout-nav {
+  margin-top: $header-height + $performance-bar-height;
+}
+
 .scrolling-tabs-container {
   position: relative;
 
@@ -441,6 +445,22 @@
   }
 }
 
+.with-performance-bar .page-with-layout-nav {
+  .right-sidebar {
+    top: ($header-height + 1) * 2 + $performance-bar-height;
+  }
+
+  &.page-with-sub-nav {
+    .right-sidebar {
+      top: ($header-height + 1) * 3 + $performance-bar-height;
+
+      &.affix {
+        top: $header-height + $performance-bar-height;
+      }
+    }
+  }
+}
+
 .nav-block {
   &.activities {
     border-bottom: 1px solid $border-color;
diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss
index 49b2f0e43a4..09b60ad1676 100644
--- a/app/assets/stylesheets/framework/sidebar.scss
+++ b/app/assets/stylesheets/framework/sidebar.scss
@@ -89,6 +89,10 @@
   }
 }
 
+.with-performance-bar .right-sidebar.affix {
+  top: $header-height + $performance-bar-height;
+}
+
 @mixin maintain-sidebar-dimensions {
   display: block;
   width: $gutter-width;
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index cf0a1ad57d0..0df6f24bfe6 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -204,6 +204,7 @@ $divergence-graph-separator-bg: #ccc;
 $general-hover-transition-duration: 100ms;
 $general-hover-transition-curve: linear;
 $highlight-changes-color: rgb(235, 255, 232);
+$performance-bar-height: 35px;
 
 
 /*
diff --git a/app/assets/stylesheets/new_nav.scss b/app/assets/stylesheets/new_nav.scss
index 360ffda8d71..1c4a84de7ec 100644
--- a/app/assets/stylesheets/new_nav.scss
+++ b/app/assets/stylesheets/new_nav.scss
@@ -309,6 +309,25 @@ header.navbar-gitlab-new {
       outline: 0;
     }
   }
+
+  // TODO: fallback to global style
+  .dropdown-menu {
+    li {
+      padding: 0 1px;
+
+      a {
+        border-radius: 0;
+        padding: 8px 16px;
+
+        &.is-focused,
+        &:hover,
+        &:active,
+        &:focus {
+          background-color: $gray-darker;
+        }
+      }
+    }
+  }
 }
 
 .breadcrumbs-container {
@@ -325,6 +344,7 @@ header.navbar-gitlab-new {
 
 .breadcrumbs-links {
   flex: 1;
+  min-width: 0;
   align-self: center;
   color: $gl-text-color-quaternary;
 
@@ -343,7 +363,7 @@ header.navbar-gitlab-new {
   }
 
   .title {
-    white-space: nowrap;
+    display: inline-block;
 
     > a {
       &:last-of-type:not(:first-child) {
diff --git a/app/assets/stylesheets/new_sidebar.scss b/app/assets/stylesheets/new_sidebar.scss
index ae43197a1a6..54f3e8d882c 100644
--- a/app/assets/stylesheets/new_sidebar.scss
+++ b/app/assets/stylesheets/new_sidebar.scss
@@ -118,7 +118,7 @@ $new-sidebar-width: 220px;
   z-index: 400;
   width: $new-sidebar-width;
   transition: left $sidebar-transition-duration;
-  top: 50px;
+  top: $header-height;
   bottom: 0;
   left: 0;
   overflow: auto;
@@ -163,6 +163,10 @@ $new-sidebar-width: 220px;
   }
 }
 
+.with-performance-bar .nav-sidebar {
+  top: $header-height + $performance-bar-height;
+}
+
 .sidebar-sub-level-items {
   display: none;
   padding-bottom: 8px;
@@ -260,7 +264,7 @@ $new-sidebar-width: 220px;
 // Make issue boards full-height now that sub-nav is gone
 
 .boards-list {
-  height: calc(100vh - 50px);
+  height: calc(100vh - #{$header-height});
 
   @media (min-width: $screen-sm-min) {
     height: 475px; // Needed for PhantomJS
@@ -270,6 +274,10 @@ $new-sidebar-width: 220px;
   }
 }
 
+.with-performance-bar .boards-list {
+  height: calc(100vh - #{$header-height} - #{$performance-bar-height});
+}
+
 
 // Change color of all horizontal tabs to match the new indigo color
 .nav-links li.active a {
diff --git a/app/assets/stylesheets/pages/builds.scss b/app/assets/stylesheets/pages/builds.scss
index b6fc628c02b..28c99d8e57c 100644
--- a/app/assets/stylesheets/pages/builds.scss
+++ b/app/assets/stylesheets/pages/builds.scss
@@ -64,10 +64,10 @@
     color: $gl-text-color;
     position: sticky;
     position: -webkit-sticky;
-    top: 50px;
+    top: $header-height;
 
     &.affix {
-      top: 50px;
+      top: $header-height;
     }
 
     // with sidebar
@@ -86,6 +86,7 @@
       position: absolute;
       right: 0;
       left: 0;
+      top: 0;
     }
 
     .truncated-info {
@@ -171,6 +172,16 @@
   }
 }
 
+.with-performance-bar .build-page {
+  .top-bar {
+    top: $header-height + $performance-bar-height;
+
+    &.affix {
+      top: $header-height + $performance-bar-height;
+    }
+  }
+}
+
 .build-header {
   .ci-header-container,
   .header-action-buttons {
@@ -300,9 +311,7 @@
     }
 
     .dropdown-menu {
-      right: $gl-padding;
-      left: $gl-padding;
-      width: auto;
+      margin-top: -$gl-padding;
     }
 
     svg {
diff --git a/app/assets/stylesheets/pages/cycle_analytics.scss b/app/assets/stylesheets/pages/cycle_analytics.scss
index eeb90759f10..87b50c7687e 100644
--- a/app/assets/stylesheets/pages/cycle_analytics.scss
+++ b/app/assets/stylesheets/pages/cycle_analytics.scss
@@ -110,6 +110,10 @@
 
   .js-ca-dropdown {
     top: $gl-padding-top;
+
+    .dropdown-menu-align-right {
+      margin-top: 2px;
+    }
   }
 
   .content-list {
@@ -442,6 +446,24 @@
       margin-bottom: 20px;
     }
   }
+
+  // TODO: fallback to global style
+  .dropdown-menu {
+    li {
+      padding: 0 1px;
+
+      a {
+        border-radius: 0;
+        padding: 8px 16px;
+
+        &:hover,
+        &:active,
+        &:focus {
+          background-color: $gray-darker;
+        }
+      }
+    }
+  }
 }
 
 .cycle-analytics-overview {
diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss
index eb269df46fe..6da14320914 100644
--- a/app/assets/stylesheets/pages/issuable.scss
+++ b/app/assets/stylesheets/pages/issuable.scss
@@ -445,6 +445,14 @@
   }
 }
 
+.with-performance-bar .right-sidebar {
+  top: $header-height + $performance-bar-height;
+
+  .issuable-sidebar {
+    height: calc(100% - #{$header-height} - #{$performance-bar-height});
+  }
+}
+
 .detail-page-description {
   padding: 16px 0;
 
diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss
index 2db967547dd..4693b2434c7 100644
--- a/app/assets/stylesheets/pages/merge_requests.scss
+++ b/app/assets/stylesheets/pages/merge_requests.scss
@@ -759,6 +759,10 @@
   }
 }
 
+.with-performance-bar .merge-request-tabs-holder {
+  top: $header-height + $performance-bar-height;
+}
+
 .merge-request-tabs {
   display: flex;
   margin-bottom: 0;
diff --git a/app/assets/stylesheets/pages/tree.scss b/app/assets/stylesheets/pages/tree.scss
index dc88cf3e699..e0f46172769 100644
--- a/app/assets/stylesheets/pages/tree.scss
+++ b/app/assets/stylesheets/pages/tree.scss
@@ -202,6 +202,28 @@
       }
     }
   }
+
+  // TODO: fallback to global style
+  .dropdown-menu:not(.dropdown-menu-selectable) {
+    li {
+      padding: 0 1px;
+
+      &.dropdown-header {
+        padding: 8px 16px;
+      }
+
+      a {
+        border-radius: 0;
+        padding: 8px 16px;
+
+        &:hover,
+        &:active,
+        &:focus {
+          background-color: $gray-darker;
+        }
+      }
+    }
+  }
 }
 
 .blob-commit-info {
diff --git a/app/assets/stylesheets/performance_bar.scss b/app/assets/stylesheets/performance_bar.scss
index 2890b6b1e49..6e539e39ca1 100644
--- a/app/assets/stylesheets/performance_bar.scss
+++ b/app/assets/stylesheets/performance_bar.scss
@@ -3,9 +3,16 @@
 @import "peek/views/rblineprof";
 
 #peek {
-  height: 35px;
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+  z-index: 2000;
+  overflow-x: hidden;
+
+  height: $performance-bar-height;
   background: $black;
-  line-height: 35px;
+  line-height: $performance-bar-height;
   color: $perf-bar-text;
 
   &.disabled {
@@ -25,7 +32,8 @@
   }
 
   .wrapper {
-    width: 1000px;
+    width: 80%;
+    height: $performance-bar-height;
     margin: 0 auto;
   }