Resolve "Merge request file browser should always be possible show/hide"

app/assets/javascripts/diffs/components/compare_versions.vue

@@ -3,6 +3,7 @@ import { mapActions, mapGetters, mapState } from 'vuex';
 import { GlTooltipDirective, GlLink, GlButton } from '@gitlab/ui';
 import { __ } from '~/locale';
 import { getParameterValues, mergeUrlParams } from '~/lib/utils/url_utility';
+import { polyfillSticky } from '~/lib/utils/sticky';
 import Icon from '~/vue_shared/components/icon.vue';
 import CompareVersionsDropdown from './compare_versions_dropdown.vue';
 
@@ -54,10 +55,19 @@ export default {
     showDropdowns() {
       return !this.commit && this.mergeRequestDiffs.length;
     },
+    fileTreeIcon() {
+      return this.showTreeList ? 'collapse-left' : 'expand-left';
+    },
+    toggleFileBrowserTitle() {
+      return this.showTreeList ? __('Hide file browser') : __('Show file browser');
+    },
     baseVersionPath() {
       return this.mergeRequestDiff.base_version_path;
     },
   },
+  mounted() {
+    polyfillSticky(this.$el);
+  },
   methods: {
     ...mapActions('diffs', [
       'setInlineDiffViewType',
@@ -73,7 +83,7 @@ export default {
 </script>
 
 <template>
-  <div class="mr-version-controls">
+  <div class="mr-version-controls" :class="{ 'is-fileTreeOpen': showTreeList }">
     <div class="mr-version-menus-container content-block">
       <button
         v-gl-tooltip.hover
@@ -82,10 +92,10 @@ export default {
         :class="{
           active: showTreeList,
         }"
-        :title="__('Toggle file browser')"
+        :title="toggleFileBrowserTitle"
         @click="toggleShowTreeList"
       >
-        <icon name="hamburger" />
+        <icon :name="fileTreeIcon" />
       </button>
       <div v-if="showDropdowns" class="d-flex align-items-center compare-versions-container">
         Changes between
@@ -108,7 +118,7 @@ export default {
         {{ __('Viewing commit') }}
         <gl-link :href="commit.commit_url" class="monospace">{{ commit.short_id }}</gl-link>
       </div>
-      <div class="inline-parallel-buttons d-none d-md-flex ml-auto">
+      <div class="inline-parallel-buttons d-none d-lg-flex ml-auto">
         <gl-button
           v-if="commit || startVersion"
           :href="latestVersionPath"

app/assets/stylesheets/framework/variables.scss

@@ -664,3 +664,8 @@ $priority-label-empty-state-width: 114px;
 Issues Analytics
 */
 $issues-analytics-popover-boarder-color: rgba(0, 0, 0, 0.15);
+/*
+Merge Requests
+*/
+$mr-tabs-height: 51px;
+$mr-version-controls-height: 56px;

app/assets/stylesheets/pages/diff.scss

@@ -9,7 +9,7 @@
     @media (min-width: map-get($grid-breakpoints, md)) {
       position: -webkit-sticky;
       position: sticky;
-      top: $header-height + 51px;
+      top: $mr-version-controls-height + $header-height + $mr-tabs-height;
       margin-left: -1px;
       border-left: 1px solid $border-color;
       z-index: 102;
@@ -19,6 +19,7 @@
 
         .with-performance-bar & {
           top: $header-height + 36px + $performance-bar-height;
+
         }
       }
 
@@ -34,7 +35,7 @@
       }
 
       .with-performance-bar & {
-        top: 127px;
+        top: $header-height + $performance-bar-height + $mr-version-controls-height + $mr-tabs-height;
       }
     }
 
@@ -1026,8 +1027,9 @@
 .tree-list-holder {
   position: -webkit-sticky;
   position: sticky;
-  top: 100px;
-  max-height: calc(100vh - 100px);
+  $top-pos: $header-height + $mr-tabs-height + $mr-version-controls-height + 10px;
+  top: $header-height + $mr-tabs-height + $mr-version-controls-height + 10px;
+  max-height: calc(100vh - $top-pos);
   padding-right: $gl-padding;
 
   .file-row {
@@ -1036,8 +1038,9 @@
   }
 
   .with-performance-bar & {
-    top: 135px;
-    max-height: calc(100vh - 135px);
+    $performance-bar-top-pos: $performance-bar-height + $top-pos;
+    top: $performance-bar-top-pos;
+    max-height: calc(100vh - $performance-bar-top-pos);
   }
 }
 

app/assets/stylesheets/pages/merge_requests.scss

@@ -708,6 +708,7 @@
 
 .mr-version-controls {
   position: relative;
+  z-index: 103;
   background: $gray-light;
   color: $gl-text-color;
 
@@ -755,13 +756,37 @@
     color: $orange-500;
     padding-right: 5px;
   }
+
+  @include media-breakpoint-up(md) {
+    position: -webkit-sticky;
+    position: sticky;
+    top: $header-height + $mr-tabs-height;
+    width: 100%;
+    border-top: 1px solid $border-color;
+
+    &.is-fileTreeOpen {
+      margin-left: -16px;
+      width: calc(100% + 32px);
+    }
+
+    .mr-version-menus-container {
+      flex-wrap: nowrap;
+    }
+
+    .with-performance-bar & {
+      top: $header-height + $performance-bar-height + $mr-tabs-height;
+    }
+  }
 }
 
 .merge-request-tabs-holder {
   top: $header-height;
   z-index: 200;
   background-color: $white-light;
-  border-bottom: 1px solid $border-color;
+
+  @include media-breakpoint-down(md) {
+    border-bottom: 1px solid $border-color;
+  }
 
   @include media-breakpoint-up(sm) {
     position: sticky;
@@ -816,7 +841,7 @@
   display: flex;
   justify-content: space-between;
 
-  @include media-breakpoint-down(md) {
+  @include media-breakpoint-down(sm) {
     flex-direction: column-reverse;
   }
 

changelogs/unreleased/52971-merge-request-file-browser-should-always-be-possible-show-hide.yml

+---
+title: Make possible to toggle file tree while scrolling through diffs
+merge_request: !24103
+author:
+type: changed

locale/gitlab.pot

@@ -3574,6 +3574,9 @@ msgstr ""
 msgid "Here is the public SSH key that needs to be added to the remote server. For more information, please refer to the documentation."
 msgstr ""
 
+msgid "Hide file browser"
+msgstr ""
+
 msgid "Hide host keys manual input"
 msgstr ""
 
@@ -6345,6 +6348,9 @@ msgstr ""
 msgid "Show complete raw log"
 msgstr ""
 
+msgid "Show file browser"
+msgstr ""
+
 msgid "Show latest version"
 msgstr ""
 
@@ -7431,9 +7437,6 @@ msgstr ""
 msgid "Toggle discussion"
 msgstr ""
 
-msgid "Toggle file browser"
-msgstr ""
-
 msgid "Toggle navigation"
 msgstr ""
 

spec/javascripts/diffs/components/compare_versions_spec.js

@@ -22,10 +22,10 @@ describe('CompareVersions', () => {
       const treeListBtn = vm.$el.querySelector('.js-toggle-tree-list');
 
       expect(treeListBtn).not.toBeNull();
-      expect(treeListBtn.dataset.originalTitle).toBe('Toggle file browser');
+      expect(treeListBtn.dataset.originalTitle).toBe('Hide file browser');
       expect(treeListBtn.querySelectorAll('svg use').length).not.toBe(0);
       expect(treeListBtn.querySelector('svg use').getAttribute('xlink:href')).toContain(
-        '#hamburger',
+        '#collapse-left',
       );
     });