From f8be76b313a6e1061a9f6ebd54e0a771b990c0de Mon Sep 17 00:00:00 2001
From: Lukas Hirt <lukashirt@mail.com>
Date: Mon, 11 Nov 2019 15:35:47 +0100
Subject: [PATCH] Added virtual scroll package and finished basic
 implementation

Fixed sizes of columns

Made responsive

Adjusted layout

Adjusted shared with list

Bring back id for the list

Moved virtual scroller into files app dependencies and added polyfill

Make table header fixed

Use only class selector for file row

Added border and selected background colour

Scroll files list

Fixed file row selector

Scroll with interval

Moved findFile into custom commands and added wait for filesListContainer

Fixed wrong name in private link feature

Fixed wrong item type

Moved row actions into own component and moved after files list

Made functions async and escape double quotes

Count files via counters in footer and fixed scrollToTop function

Check if the item is actually visible and not only rendered and await click on row for private link

Fixed trashbin delete tests

Finishing touches for scroll functions and adjusted sharing functions to await scrolling

Adjusted resharing tests

Adjusted sharing and distance of scrolling

Add position of header to get properly visible items

Re-enable correct step in shared-with pages tests

Bring waitForFileVisible into versions test

Fixed mobile view

Adjusted order of scroll for opening of sidebar and wait for file in shared with pages

Use shareId as default id and get rid of two TODOs

Remove unneccesary logs

Check if list container is visible in scrollToTop, reorder calls for different scrolling and reuse filename attribute

Added isVisible data state

Adjusted selector for trashbin

Changed selector for actions dropdown

Escape double quotes

Adjusted dependencies

Adjusted filter selectors and label after ods update

Fixed order of parameters
---
 apps/files/package.json                       |   2 +
 apps/files/src/components/AllFilesList.vue    |  50 ++--
 .../Collaborators/SharedFilesList.vue         |  26 +-
 apps/files/src/components/FileFilterMenu.vue  |  11 +-
 apps/files/src/components/FileList.vue        | 177 +++++++-----
 .../FilesLists/RowActionsDropdown.vue         |  74 +++++
 apps/files/src/components/Trashbin.vue        |  20 +-
 apps/files/src/store/actions.js               |  10 +-
 apps/files/src/store/mutations.js             |   5 +
 apps/files/webpack.common.js                  |   3 +
 apps/files/yarn.lock                          |  29 ++
 .../features/webUIFiles/breadcrumb.feature    |   4 +-
 .../features/webUIFiles/fileDetails.feature   |   8 +-
 .../webUIRenameFolders/renameFolders.feature  |   1 -
 .../pageObjects/FilesPageElement/filesList.js | 254 +++++++++++++++---
 tests/acceptance/pageObjects/filesPage.js     |   8 +-
 .../pageObjects/sharedWithMePage.js           |  10 +-
 .../stepDefinitions/filesContext.js           |  77 +++---
 .../stepDefinitions/privateLinksContext.js    |   9 +-
 .../stepDefinitions/sharingContext.js         | 132 +++++----
 .../stepDefinitions/webdavContext.js          |  10 +-
 21 files changed, 651 insertions(+), 269 deletions(-)
 create mode 100644 apps/files/src/components/FilesLists/RowActionsDropdown.vue

diff --git a/apps/files/package.json b/apps/files/package.json
index 5069684bbb8..f2c33889d4d 100644
--- a/apps/files/package.json
+++ b/apps/files/package.json
@@ -25,9 +25,11 @@
     "babel-loader": "^8.0.6",
     "core-js": "3.2.1",
     "css-loader": "^3.1.0",
+    "intersection-observer": "^0.7.0",
     "p-queue": "^6.1.1",
     "vue-loader": "^15.7.1",
     "vue-template-compiler": "^2.6.10",
+    "vue-virtual-scroller": "^1.0.0-rc.2",
     "vue2-dropzone": "^3.6.0",
     "webpack": "^4.36.1",
     "webpack-cli": "^3.3.8",
diff --git a/apps/files/src/components/AllFilesList.vue b/apps/files/src/components/AllFilesList.vue
index c0b0aa15e80..a96a08a8d1e 100644
--- a/apps/files/src/components/AllFilesList.vue
+++ b/apps/files/src/components/AllFilesList.vue
@@ -1,20 +1,23 @@
 <template>
   <div class="uk-height-1-1">
     <div class="uk-flex uk-flex-column uk-height-1-1">
-      <div id="files-list-container" class="uk-overflow-auto uk-flex-auto">
+      <div class="uk-overflow-auto uk-flex-auto">
         <file-list :fileData="fileData" id="files-list" :loading="loadingFolder" :actions="actions" :compactMode="_sidebarOpen"
             :isActionEnabled="isActionEnabled">
           <template #headerColumns>
-            <oc-table-cell shrink type="head" v-if="!publicPage()"><span class="oc-visually-hidden">{{favoritesHeaderText}}</span></oc-table-cell>
-            <oc-table-cell type="head" class="uk-text-truncate" v-translate>Name</oc-table-cell>
-            <oc-table-cell shrink type="head" :class="{ 'uk-visible@s' : !_sidebarOpen, 'uk-visible@m'  : _sidebarOpen }"><translate>Size</translate></oc-table-cell>
-            <oc-table-cell shrink type="head" :class="{ 'uk-visible@s' : !_sidebarOpen, 'uk-visible@m'  : _sidebarOpen }" class="uk-text-nowrap" v-translate>Modification Time</oc-table-cell>
+            <div v-if="!publicPage()">
+              <span class="oc-visually-hidden" v-text="favoritesHeaderText" />
+              <oc-star id="files-table-header-star" aria-hidden="true" class="uk-display-block uk-disabled" />
+            </div>
+            <div class="uk-text-truncate uk-text-meta uk-width-expand" v-translate>Name</div>
+            <div :class="{ 'uk-visible@s' : !_sidebarOpen, 'uk-hidden'  : _sidebarOpen }" class="uk-text-meta uk-width-small" v-translate>Size</div>
+            <div type="head" :class="{ 'uk-visible@s' : !_sidebarOpen, 'uk-hidden'  : _sidebarOpen }" class="uk-text-nowrap uk-text-meta uk-width-small" v-translate>Modification Time</div>
           </template>
           <template #rowColumns="{ item }">
-            <oc-table-cell class="uk-padding-remove" v-if="!publicPage()">
+            <div v-if="!publicPage()">
               <oc-star class="uk-display-block" @click.native.stop="toggleFileFavorite(item)" :shining="item.starred" />
-            </oc-table-cell>
-            <oc-table-cell class="uk-text-truncate">
+            </div>
+            <div class="uk-text-truncate uk-width-expand">
               <oc-file @click.native.stop="item.type === 'folder' ? navigateTo(item.path.substr(1)) : openFileActionBar(item)"
                 :name="$_ocFileName(item)" :extension="item.extension" class="file-row-name" :icon="fileTypeIcon(item)"
                 :filename="item.name" :key="item.id"/>
@@ -24,25 +27,21 @@
                 :uk-tooltip="disabledActionTooltip(item)"
                 class="uk-margin-small-left"
               />
-            </oc-table-cell>
-            <oc-table-cell class="uk-text-meta uk-text-nowrap" :class="{ 'uk-visible@s' : !_sidebarOpen, 'uk-visible@m'  : _sidebarOpen }">
+            </div>
+            <div class="uk-text-meta uk-text-nowrap uk-width-small" :class="{ 'uk-visible@s' : !_sidebarOpen, 'uk-hidden'  : _sidebarOpen }">
               {{ item.size | fileSize }}
-            </oc-table-cell>
-            <oc-table-cell class="uk-text-meta uk-text-nowrap" :class="{ 'uk-visible@s' : !_sidebarOpen, 'uk-visible@m'  : _sidebarOpen }">
+            </div>
+            <div class="uk-text-meta uk-text-nowrap uk-width-small" :class="{ 'uk-visible@s' : !_sidebarOpen, 'uk-hidden'  : _sidebarOpen }">
               {{ formDateFromNow(item.mdate) }}
-            </oc-table-cell>
+            </div>
           </template>
           <template #footer>
             <div v-if="activeFilesCount.folders > 0 || activeFilesCount.files > 0" class="uk-text-nowrap uk-text-meta">
-              <template v-if="activeFilesCount.folders > 0">
-                {{ activeFilesCount.folders }}
-                <translate :translate-n="activeFilesCount.folders" translate-plural="folders">folder</translate>
-              </template>
-              <translate v-if="activeFilesCount.folders > 0 && activeFilesCount.files > 0">and</translate>
-              <template v-if="activeFilesCount.files > 0">
-                {{ activeFilesCount.files }}
-                <translate :translate-n="activeFilesCount.files" translate-plural="files">file</translate>
-              </template>
+              <span id="files-list-count-folders" v-text="activeFilesCount.folders" />
+              <translate :translate-n="activeFilesCount.folders" translate-plural="folders">folder</translate>
+              <translate>and</translate>
+              <span id="files-list-count-files" v-text="activeFilesCount.files" />
+              <translate :translate-n="activeFilesCount.files" translate-plural="files">file</translate>
               <template v-if="activeFiles.length > 0">
                 &dash; {{ filesTotalSize | fileSize }}
               </template>
@@ -180,3 +179,10 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+  /* FIXME */
+  #files-table-header-star {
+    opacity: 0;
+  }
+</style>
diff --git a/apps/files/src/components/Collaborators/SharedFilesList.vue b/apps/files/src/components/Collaborators/SharedFilesList.vue
index e8797206a2b..d923a0d3775 100644
--- a/apps/files/src/components/Collaborators/SharedFilesList.vue
+++ b/apps/files/src/components/Collaborators/SharedFilesList.vue
@@ -2,21 +2,21 @@
   <file-list :fileData="fileData" id="files-list" :loading="loadingFolder" :actions="actions" :compactMode="_sidebarOpen"
     :isActionEnabled="isActionEnabled">
     <template #headerColumns>
-      <oc-table-cell type="head" class="uk-text-truncate" v-translate>Name</oc-table-cell>
-      <oc-table-cell shrink type="head" class="uk-text-nowrap" v-text="sharedCellTitle" />
-      <oc-table-cell
+      <div class="uk-text-truncate uk-text-meta uk-width-expand" v-translate>Name</div>
+      <div class="uk-text-nowrap uk-text-meta uk-width-small" v-text="sharedCellTitle" />
+      <div
         v-if="$route.name === 'files-shared-with-me'"
         shrink
         type="head"
-        class="uk-text-nowrap"
+        class="uk-text-nowrap uk-text-meta uk-width-small"
         v-translate
       >
         Status
-      </oc-table-cell>
-      <oc-table-cell shrink type="head" class="uk-text-nowrap" v-translate>Share time</oc-table-cell>
+      </div>
+      <div class="uk-text-nowrap uk-text-meta uk-width-small" v-translate>Share time</div>
     </template>
     <template #rowColumns="{ item }">
-      <oc-table-cell class="uk-text-truncate">
+      <div class="uk-text-truncate uk-width-expand">
         <oc-file @click.native.stop="item.type === 'folder' ? navigateTo(item.path.substr(1)) : openFileActionBar(item)"
           :name="item.basename" :extension="item.extension" class="file-row-name" :icon="fileTypeIcon(item)"
           :filename="item.name" :key="item.path" />
@@ -26,21 +26,21 @@
           :uk-tooltip="disabledActionTooltip(item)"
           class="uk-margin-small-left"
         />
-      </oc-table-cell>
-      <oc-table-cell class="uk-text-meta uk-text-nowrap">
+      </div>
+      <div class="uk-text-meta uk-text-nowrap uk-width-small">
         <div v-if="$route.name === 'files-shared-with-others'" key="shared-with-cell">
           {{ item.sharedWith }} (<translate v-if="item.shareType === 1">group</translate>)
         </div>
         <div v-else key="shared-from-cell">
           {{ item.shareOwnerDisplayname }}
         </div>
-      </oc-table-cell>
-      <oc-table-cell v-if="$route.name === 'files-shared-with-me'" class="uk-text-nowrap uk-text-right" :key="item.id + item.status">
+      </div>
+      <div v-if="$route.name === 'files-shared-with-me'" class="uk-text-nowrap uk-width-small" :key="item.id + item.status">
         <a v-if="item.status === 1 || item.status === 2" class="uk-text-meta" @click="pendingShareAction(item, 'POST')" v-translate>Accept</a>
         <a v-if="item.status === 1" class="uk-text-meta uk-margin-left" @click="pendingShareAction(item, 'DELETE')" v-translate>Decline</a>
         <span class="uk-text-small uk-margin-left" v-text="shareStatus(item.status)" />
-      </oc-table-cell>
-      <oc-table-cell class="uk-text-meta uk-text-nowrap" v-text="formDateFromNow(item.shareTime)" />
+      </div>
+      <div class="uk-text-meta uk-text-nowrap uk-width-small" v-text="formDateFromNow(item.shareTime)" />
     </template>
   </file-list>
 </template>
diff --git a/apps/files/src/components/FileFilterMenu.vue b/apps/files/src/components/FileFilterMenu.vue
index a84de7b2d23..7d67eef2905 100644
--- a/apps/files/src/components/FileFilterMenu.vue
+++ b/apps/files/src/components/FileFilterMenu.vue
@@ -2,10 +2,13 @@
   <oc-drop toggle="#oc-filter-list-btn" mode="click">
     <ul class="uk-list">
       <li v-for="(filter, fid) in fileFilter" :key="fid">
-        <oc-checkbox :id="'oc-filter-' + filter.tag + '-checkbox'" :name="filter.tag" :value="filter.value" @change="setFileFilter({ name: filter.name, value: !filter.value })" />
-        <label :id="'oc-filter-' + filter.tag + '-label'" :for="'oc-filter-' + filter.tag + '-checkbox'" class="uk-text-meta">
-          {{ fileFilterTranslations[filter.name] }}
-        </label>
+        <oc-checkbox
+          :id="'oc-filter-' + filter.tag"
+          :name="filter.tag"
+          :value="filter.value"
+          :label="fileFilterTranslations[filter.name]"
+          @change="setFileFilter({ name: filter.name, value: !filter.value })"
+        />
       </li>
       <li>
         <label for="oc-filter-search" class="uk-text-meta" v-translate>
diff --git a/apps/files/src/components/FileList.vue b/apps/files/src/components/FileList.vue
index 6ca870ded31..979132a8b97 100644
--- a/apps/files/src/components/FileList.vue
+++ b/apps/files/src/components/FileList.vue
@@ -1,78 +1,105 @@
 <template>
-  <div class="uk-height-1-1">
+  <!-- TODO: Take care of outside click overall and not just in files list -->
+  <div :id="id" class="uk-height-1-1 uk-position-relative" @click="hideRowActionsDropdown">
     <div class="uk-flex uk-flex-column uk-height-1-1">
-      <div id="files-list-container" class="uk-overflow-auto uk-flex-auto">
-        <oc-table middle divider class="oc-filelist uk-margin-remove-bottom" :id="id" v-show="!loading">
-          <thead>
-            <oc-table-row>
-              <oc-table-cell shrink type="head">
-                <oc-checkbox class="uk-margin-small-left" id="filelist-check-all" :hideLabel="true" :label="labelSelectAllItems" @click.native="toggleAll" :value="selectedAll" />
-              </oc-table-cell>
-              <slot name="headerColumns"/>
-              <oc-table-cell shrink type="head" :class="{ 'uk-visible@s' : compactMode }" v-translate>Actions</oc-table-cell>
-            </oc-table-row>
-          </thead>
-          <oc-table-group>
-            <oc-table-row v-for="(item, index) in fileData" :key="index" :class="_rowClasses(item)" @click="selectRow(item, $event)" :id="'file-row-' + item.id">
-              <oc-table-cell>
-                <oc-checkbox :hideLabel="true" class="uk-margin-small-left" @click.stop @change.native="toggleFileSelect(item)" :value="selectedFiles.indexOf(item) >= 0" :label="labelSelectSingleItem(item)"/>
-              </oc-table-cell>
-              <slot name="rowColumns" :item="item" :index="index" />
-              <oc-table-cell :class="{ 'uk-visible@s' : compactMode }" class="uk-position-relative">
-                <div class="uk-button-group uk-margin-small-right" :class="{ 'uk-visible@m' : !compactMode, 'uk-visible@xl' : compactMode  }">
-                  <oc-button
-                    v-for="action in actions"
-                   :key="action.ariaLabel"
-                   @click.stop="action.handler(item, action.handlerData)"
-                   :disabled="!$_isActionEnabled(item, action) || $_actionInProgress(item)"
-                   :icon="action.icon"
-                   :ariaLabel="action.ariaLabel"
-                   :uk-tooltip="$_disabledActionTooltip(item)"
-                  />
-                </div>
+      <oc-grid gutter="small" flex id="files-table-header" class="uk-padding-small">
+        <div>
+          <oc-checkbox
+            class="uk-margin-small-left"
+            id="filelist-check-all"
+            :hideLabel="true"
+            :label="labelSelectAllItems"
+            @click.native="toggleAll"
+            :value="selectedAll"
+          />
+        </div>
+        <slot name="headerColumns"/>
+        <div
+          class="uk-text-meta uk-text-right uk-width-auto "
+          :class="{ 'uk-width-small@s uk-width-medium@m' : !compactMode }"
+          v-translate
+        >
+          Actions
+        </div>
+      </oc-grid>
+      <RecycleScroller
+        id="files-list-container"
+        class="uk-flex-1"
+        :items="fileData"
+        :item-size="70"
+        v-slot="{ item, index, active }"
+        v-if="!loading"
+        :key="fileData.length"
+      >
+        <div
+          :data-is-visible="active"
+          @click="selectRow(item, $event); hideRowActionsDropdown()"
+        >
+          <oc-grid gutter="small" flex class="uk-padding-small oc-border-top" :class="_rowClasses(item)" :id="'file-row-' + item.id">
+            <div>
+              <oc-checkbox
+                class="uk-margin-small-left"
+                @click.stop @change.native="toggleFileSelect(item)"
+                :value="selectedFiles.indexOf(item) >= 0"
+                :label="labelSelectSingleItem(item)"
+              />
+            </div>
+            <slot name="rowColumns" :item="item" :index="item.id" />
+            <div :class="{ 'uk-visible@s' : compactMode, 'uk-width-small@s uk-width-medium@m': !compactMode }" class="uk-width-auto uk-text-right">
+              <div
+                class="uk-button-group"
+                :class="{
+                  'uk-visible@m' : !compactMode,
+                  'uk-visible@xl' : compactMode
+                }"
+              >
                 <oc-button
-                  :id="'files-file-list-action-button-small-resolution-' + index"
-                  icon="more_vert"
-                  :class="{ 'uk-hidden@m' : !compactMode, 'uk-visible@s uk-hidden@xl' : compactMode }"
-                  :disabled="$_actionInProgress(item)"
-                  :aria-label="'show-file-actions'"
-                  @click.stop
+                  v-for="action in actions"
+                  :key="action.ariaLabel"
+                  @click.stop="action.handler(item, action.handlerData)"
+                  :disabled="!$_isActionEnabled(item, action) || $_actionInProgress(item)"
+                  :icon="action.icon"
+                  :ariaLabel="action.ariaLabel"
+                  :uk-tooltip="$_disabledActionTooltip(item)"
                 />
-                <oc-drop
-                  v-if="!isDialogOpen"
-                  :toggle="'#files-file-list-action-button-small-resolution-' + index"
-                  :options="{ offset: 0 }"
-                  position="bottom-right"
-                >
-                  <ul class="uk-list">
-                    <li v-for="action in $_enabledActions(item)" :key="action.ariaLabel">
-                      <oc-button
-                        class="uk-width-1-1"
-                        @click.native.stop="action.handler(item, action.handlerData)"
-                        :icon="action.icon"
-                        :ariaLabel="action.ariaLabel"
-                      >
-                        {{ action.ariaLabel }}
-                      </oc-button>
-                    </li>
-                  </ul>
-                </oc-drop>
-              </oc-table-cell>
-            </oc-table-row>
-          </oc-table-group>
-        </oc-table>
-      </div>
+              </div>
+              <oc-button
+                :id="`files-file-list-action-button-small-resolution-${item.id}${{ '-active': active }}`"
+                icon="more_vert"
+                :class="{ 'uk-hidden@m' : !compactMode, 'uk-visible@s uk-hidden@xl' : compactMode }"
+                :disabled="$_actionInProgress(item)"
+                :aria-label="'show-file-actions'"
+                @click.stop="toggleRowActionsDropdown(item)"
+              />
+            </div>
+          </oc-grid>
+        </div>
+      </RecycleScroller>
       <oc-grid gutter="large" class="uk-width-1-1 uk-padding-small" v-if="!loading">
         <slot name="footer" />
       </oc-grid>
     </div>
+    <row-actions-dropdown
+      :displayed="rowActionsDisplayed"
+      :item="rowActionsItem"
+      :actions="rowActions"
+      @actionClicked="hideRowActionsDropdown"
+    />
   </div>
 </template>
 <script>
 import { mapGetters, mapActions, mapState } from 'vuex'
+import { RecycleScroller } from 'vue-virtual-scroller'
+import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
+
+const RowActionsDropdown = () => import('./FilesLists/RowActionsDropdown.vue')
 
 export default {
   name: 'FileList',
+  components: {
+    RecycleScroller,
+    RowActionsDropdown
+  },
   props: {
     id: {
       type: String,
@@ -111,7 +138,10 @@ export default {
   data () {
     return {
       labelSelectAllItems: this.$gettext('Select all items'),
-      labelSelectSingleItemText: this.$gettext('Select %{type} %{name}')
+      labelSelectSingleItemText: this.$gettext('Select %{type} %{name}'),
+      rowActions: [],
+      rowActionsDisplayed: false,
+      rowActionsItem: {}
     }
   },
   methods: {
@@ -210,15 +240,11 @@ export default {
     },
     _rowClasses (item) {
       if (this.highlightedFile && item.id === this.highlightedFile.id) {
-        return 'file-row uk-active'
+        return 'file-row oc-background-selected'
       }
       return 'file-row'
     },
     selectRow (item, event) {
-      if (event.target.tagName !== 'TD') {
-        return
-      }
-
       if (item.status && (item.status === 1 || item.status === 2)) return
 
       event.stopPropagation()
@@ -241,12 +267,29 @@ export default {
           }
         }
       }
+    },
+
+    toggleRowActionsDropdown (item) {
+      if (item === this.rowActionsItem) {
+        this.hideRowActionsDropdown()
+        return
+      }
+
+      this.rowActionsDisplayed = true
+      this.rowActionsItem = item
+      this.rowActions = this.$_enabledActions(item)
+    },
+
+    hideRowActionsDropdown () {
+      this.rowActionsDisplayed = false
+      this.rowActionsItem = {}
+      this.rowActions = []
     }
   },
   computed: {
     ...mapState(['route']),
     ...mapGetters('Files', ['selectedFiles', 'highlightedFile', 'activeFiles', 'quota',
-      'filesTotalSize', 'activeFilesCount', 'actionsInProgress', 'isDialogOpen']),
+      'filesTotalSize', 'activeFilesCount', 'actionsInProgress']),
     ...mapGetters(['configuration']),
 
     selectedAll () {
diff --git a/apps/files/src/components/FilesLists/RowActionsDropdown.vue b/apps/files/src/components/FilesLists/RowActionsDropdown.vue
new file mode 100644
index 00000000000..d5cad3adc45
--- /dev/null
+++ b/apps/files/src/components/FilesLists/RowActionsDropdown.vue
@@ -0,0 +1,74 @@
+<template>
+  <oc-drop
+    v-if="displayed"
+    :boundary="`#files-file-list-action-button-small-resolution-${item.id}-active`"
+    :options="{ offset: 0 }"
+    :toggle="`#files-file-list-action-button-small-resolution-${item.id}`"
+    position="bottom-right"
+    id="files-list-row-actions-dropdown"
+    class="uk-open uk-drop-stack"
+    :data-actions-dropdown-for-item="nameForDropdownData(item.name)"
+  >
+    <ul class="uk-list">
+      <li v-for="action in actions" :key="action.ariaLabel">
+        <oc-button
+          class="uk-width-1-1"
+          @click.native.stop="action.handler(item, action.handlerData); actionClicked()"
+          :icon="action.icon"
+          :ariaLabel="action.ariaLabel"
+        >
+          {{ action.ariaLabel }}
+        </oc-button>
+      </li>
+    </ul>
+  </oc-drop>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+
+export default {
+  name: 'FileActionsDropdown',
+  props: {
+    /**
+     * Defines if the dropdown is visible
+     */
+    displayed: {
+      type: Boolean,
+      required: true,
+      default: false
+    },
+    /**
+     * Target item
+     */
+    item: {
+      type: Object,
+      required: true
+    },
+    /**
+     * Item actions to be displayed inside of the dropdown
+     */
+    actions: {
+      type: Array,
+      required: true
+    }
+  },
+  computed: {
+    ...mapGetters('Files', ['isDialogOpen'])
+  },
+  methods: {
+    actionClicked () {
+      this.$emit('actionClicked')
+    },
+    // FIXME: Remove as soon as trashbin has virtual scroll
+    nameForDropdownData (name) {
+      // Escape double quotes inside of selector
+      if (name.indexOf('"') > -1) {
+        name = name.replace(/\\([\s\S])|(")/g, '&quot;')
+      }
+
+      return name
+    }
+  }
+}
+</script>
diff --git a/apps/files/src/components/Trashbin.vue b/apps/files/src/components/Trashbin.vue
index 6773c0d1af2..fbc41e227c9 100644
--- a/apps/files/src/components/Trashbin.vue
+++ b/apps/files/src/components/Trashbin.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div id="files-list-container">
     <oc-table middle divider class="oc-filelist" id="files-list" v-show="!loadingFolder">
       <oc-table-group>
         <oc-table-row>
@@ -11,14 +11,16 @@
           <oc-table-cell shrink type="head" v-translate>Actions</oc-table-cell>
         </oc-table-row>
       </oc-table-group>
-      <oc-table-group>
-        <oc-table-row v-for="(item, index) in fileData" :key="index" class="file-row">
+      <oc-table-group v-for="(item, index) in fileData" :key="index">
+        <oc-table-row class="file-row" data-is-visible="true">
           <oc-table-cell>
             <oc-checkbox :hideLabel="true" class="uk-margin-small-left" @change.native="$_ocTrashbin_toggleFileSelect(item)" :value="selectedFiles.indexOf(item) >= 0" />
           </oc-table-cell>
           <oc-table-cell class="uk-text-truncate">
-            <oc-file :name="$_ocTrashbin_fileName(item)" :extension="item.extension" class="file-row-name"
+            <div>
+              <oc-file :name="$_ocTrashbin_fileName(item)" :extension="item.extension" class="file-row-name"
                     :filename="item.name" :icon="fileTypeIcon(item)" :key="item.originalLocation" />
+            </div>
           </oc-table-cell>
           <oc-table-cell class="uk-text-meta uk-text-nowrap uk-visible@m">
             {{ formDateFromNow(item.deleteTimestamp) }}
@@ -42,6 +44,7 @@
               :toggle="'#files-trashbin-action-button-small-resolution-' + index"
               :options="{ offset: 0 }"
               position="bottom-right"
+              :data-actions-dropdown-for-item="nameForDropdownData(item.name)"
             >
               <ul class="uk-list">
                 <li>
@@ -240,6 +243,15 @@ export default {
         if (pathSplit.length > 2) return `…/${pathSplit[pathSplit.length - 2]}/${item.basename}`
       }
       return item.basename
+    },
+    // FIXME: Remove as soon as trashbin has virtual scroll
+    nameForDropdownData (name) {
+      // Escape double quotes inside of selector
+      if (name.indexOf('"') > -1) {
+        name = name.replace(/\\([\s\S])|(")/g, '&quot;')
+      }
+
+      return name
     }
   }
 }
diff --git a/apps/files/src/store/actions.js b/apps/files/src/store/actions.js
index 5f1ad45abe0..e6e6da8d41d 100644
--- a/apps/files/src/store/actions.js
+++ b/apps/files/src/store/actions.js
@@ -111,8 +111,8 @@ function _buildSharedFile (file) {
     }
   }
   return {
-    id: file.item_source,
-    shareId: file.id,
+    sourceId: file.item_source,
+    id: file.id,
     type: file.item_type,
     extension: (function () {
       return ext
@@ -243,6 +243,7 @@ function _buildShare (s, file) {
 export default {
   loadFolder (context, { client, absolutePath, $gettext, routeName }) {
     context.commit('UPDATE_FOLDER_LOADING', true)
+    context.commit('CLEAR_CURRENT_FILES_LIST')
 
     return new Promise((resolve, reject) => {
       let promise
@@ -297,6 +298,7 @@ export default {
   },
   loadTrashbin (context, { client, $gettext }) {
     context.commit('UPDATE_FOLDER_LOADING', true)
+    context.commit('CLEAR_CURRENT_FILES_LIST')
 
     client.fileTrash.list('', '1', [
       '{http://owncloud.org/ns}trashbin-original-filename',
@@ -330,6 +332,7 @@ export default {
   },
   loadFolderSharedFromMe (context, { client, $gettext }) {
     context.commit('UPDATE_FOLDER_LOADING', true)
+    context.commit('CLEAR_CURRENT_FILES_LIST')
 
     // TODO: Move request to owncloud-sdk
     client.requests.ocs({
@@ -361,6 +364,7 @@ export default {
   },
   loadFolderSharedWithMe (context, { client, $gettext }) {
     context.commit('UPDATE_FOLDER_LOADING', true)
+    context.commit('CLEAR_CURRENT_FILES_LIST')
 
     // TODO: Move request to owncloud-sdk
     // TODO: Load remote shares as well
@@ -732,7 +736,7 @@ export default {
     // TODO: Move request to owncloud-sdk
     client.requests.ocs({
       service: 'apps/files_sharing',
-      action: `/api/v1/shares/pending/${item.shareId}`,
+      action: `/api/v1/shares/pending/${item.id}`,
       method: type
     })
       .then(_ => {
diff --git a/apps/files/src/store/mutations.js b/apps/files/src/store/mutations.js
index e3ad4504beb..05475ff48f8 100644
--- a/apps/files/src/store/mutations.js
+++ b/apps/files/src/store/mutations.js
@@ -231,5 +231,10 @@ export default {
     })
 
     state.actionsInProgress.splice(itemIndex, 1)
+  },
+
+  CLEAR_CURRENT_FILES_LIST (state) {
+    state.currentFolder = null
+    state.files = []
   }
 }
diff --git a/apps/files/webpack.common.js b/apps/files/webpack.common.js
index 0adf97ad8c5..f2b66935d2f 100644
--- a/apps/files/webpack.common.js
+++ b/apps/files/webpack.common.js
@@ -1,6 +1,9 @@
 const VueLoaderPlugin = require('vue-loader/lib/plugin')
 const path = require('path')
 
+// Polyfill for virtual scroller
+require('intersection-observer')
+
 module.exports = {
   plugins: [
     new VueLoaderPlugin()
diff --git a/apps/files/yarn.lock b/apps/files/yarn.lock
index b0e6579da2d..90e7c42d2cf 100644
--- a/apps/files/yarn.lock
+++ b/apps/files/yarn.lock
@@ -2870,6 +2870,11 @@ interpret@1.2.0:
   resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.2.0.tgz#d5061a6224be58e8083985f5014d844359576296"
   integrity sha512-mT34yGKMNceBQUoVn7iCDKDntA7SC6gycMAWzGx1z/CMCTV7b2AAtXlo3nRyHZ1FelRkQbQjprHSYGwzLtkVbw==
 
+intersection-observer@^0.7.0:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/intersection-observer/-/intersection-observer-0.7.0.tgz#ee16bee978db53516ead2f0a8154b09b400bbdc9"
+  integrity sha512-Id0Fij0HsB/vKWGeBe9PxeY45ttRiBmhFyyt/geBdDHBYNctMRTE3dC1U3ujzz3lap+hVXlEcVaB56kZP/eEUg==
+
 invariant@^2.2.2:
   version "2.2.4"
   resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
@@ -4607,6 +4612,11 @@ schema-utils@^2.0.0:
     ajv "^6.10.2"
     ajv-keywords "^3.4.1"
 
+scrollparent@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/scrollparent/-/scrollparent-2.0.1.tgz#715d5b9cc57760fb22bdccc3befb5bfe06b1a317"
+  integrity sha1-cV1bnMV3YPsivczDvvtb/gaxoxc=
+
 secure-keys@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/secure-keys/-/secure-keys-1.0.0.tgz#f0c82d98a3b139a8776a8808050b824431087fca"
@@ -5604,6 +5614,16 @@ vue-loader@^15.7.1:
     vue-hot-reload-api "^2.3.0"
     vue-style-loader "^4.1.0"
 
+vue-observe-visibility@^0.4.3:
+  version "0.4.6"
+  resolved "https://registry.yarnpkg.com/vue-observe-visibility/-/vue-observe-visibility-0.4.6.tgz#878cb8ebcf3078e40807af29774e97105ebd519e"
+  integrity sha512-xo0CEVdkjSjhJoDdLSvoZoQrw/H2BlzB5jrCBKGZNXN2zdZgMuZ9BKrxXDjNP2AxlcCoKc8OahI3F3r3JGLv2Q==
+
+vue-resize@^0.4.5:
+  version "0.4.5"
+  resolved "https://registry.yarnpkg.com/vue-resize/-/vue-resize-0.4.5.tgz#4777a23042e3c05620d9cbda01c0b3cc5e32dcea"
+  integrity sha512-bhP7MlgJQ8TIkZJXAfDf78uJO+mEI3CaLABLjv0WNzr4CcGRGPIAItyWYnP6LsPA4Oq0WE+suidNs6dgpO4RHg==
+
 vue-style-loader@^4.1.0:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/vue-style-loader/-/vue-style-loader-4.1.2.tgz#dedf349806f25ceb4e64f3ad7c0a44fba735fcf8"
@@ -5625,6 +5645,15 @@ vue-template-es2015-compiler@^1.9.0:
   resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz#1ee3bc9a16ecbf5118be334bb15f9c46f82f5825"
   integrity sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==
 
+vue-virtual-scroller@^1.0.0-rc.2:
+  version "1.0.0-rc.2"
+  resolved "https://registry.yarnpkg.com/vue-virtual-scroller/-/vue-virtual-scroller-1.0.0-rc.2.tgz#b03828496c87889641bdacc75510e5b1bf5bda7f"
+  integrity sha512-4YFx1a+QDP4f6HW/HBI/qHcmSTlh7BMH6IjEH8WC3ylt499cErl0LpvLLAx9yo3c6NtuK/XvjYXi0vvdxFB5dw==
+  dependencies:
+    scrollparent "^2.0.1"
+    vue-observe-visibility "^0.4.3"
+    vue-resize "^0.4.5"
+
 vue2-dropzone@^3.6.0:
   version "3.6.0"
   resolved "https://registry.yarnpkg.com/vue2-dropzone/-/vue2-dropzone-3.6.0.tgz#b4bb4b64de1cbbb3b88f04b24878e06780a51546"
diff --git a/tests/acceptance/features/webUIFiles/breadcrumb.feature b/tests/acceptance/features/webUIFiles/breadcrumb.feature
index 2c73a99c430..7cf2cbe74cc 100644
--- a/tests/acceptance/features/webUIFiles/breadcrumb.feature
+++ b/tests/acceptance/features/webUIFiles/breadcrumb.feature
@@ -6,13 +6,11 @@ Feature: access breadcrumb
   Background:
     Given user "user1" has been created with default attributes
 
-  @issue-2538
   Scenario: Check breadCrumb for folder one level below the root folder when rootFolder is set
     Given the property "rootFolder" has been set to "" in phoenix config file
     And user "user1" has logged in using the webUI
     When the user opens folder "simple-folder" using the webUI
-    #    Then breadcrumb for folder "simple-folder" should be displayed on the webUI
-    Then there should be no breadcrumb displayed on the webUI
+    Then breadcrumb for folder "simple-folder" should be displayed on the webUI
     When the user opens folder "simple-empty-folder" using the webUI
     Then breadcrumb for folder "simple-empty-folder" should be displayed on the webUI
 
diff --git a/tests/acceptance/features/webUIFiles/fileDetails.feature b/tests/acceptance/features/webUIFiles/fileDetails.feature
index b88a7dd27fc..532ca320c6b 100644
--- a/tests/acceptance/features/webUIFiles/fileDetails.feature
+++ b/tests/acceptance/features/webUIFiles/fileDetails.feature
@@ -115,16 +115,12 @@ Feature: User can open the details panel for any file or folder
   @issue-2150
   Scenario: without any share the shared-with-others page should be empty
     When the user browses to the shared-with-others page using the webUI
-    Then folder "simple-folder" should be listed on the webUI
-    And file "data.zip" should be listed on the webUI
-    #Then there should be no files/folders listed on the webUI
+    Then there should be no files/folders listed on the webUI
 
   @issue-2150
   Scenario: without any share the shared-with-me page should be empty
     When the user browses to the shared-with-me page using the webUI
-    Then folder "simple-folder" should be listed on the webUI
-    And file "data.zip" should be listed on the webUI
-    #Then there should be no files/folders listed on the webUI
+    Then there should be no files/folders listed on the webUI
 
   @skip @yetToImplement
   @comments-app-required
diff --git a/tests/acceptance/features/webUIRenameFolders/renameFolders.feature b/tests/acceptance/features/webUIRenameFolders/renameFolders.feature
index 85a60eb803d..90c380eb93c 100644
--- a/tests/acceptance/features/webUIRenameFolders/renameFolders.feature
+++ b/tests/acceptance/features/webUIRenameFolders/renameFolders.feature
@@ -58,7 +58,6 @@ Feature: rename folders
     When the user renames folder "simple-folder" to an invalid name "space at end " using the webUI
     Then the error message 'The name cannot end with whitespace' should be displayed on the webUI dialog prompt
     When the user reloads the current page of the webUI
-    Then folder "lorem.txt" should be listed on the webUI
     And folder "space at end " should not be listed on the webUI
     When the user renames folder "simple-folder" to an invalid name "  multiple   space    all     over   " using the webUI
     Then the error message 'The name cannot end with whitespace' should be displayed on the webUI dialog prompt
diff --git a/tests/acceptance/pageObjects/FilesPageElement/filesList.js b/tests/acceptance/pageObjects/FilesPageElement/filesList.js
index 3259d395a22..8623922a796 100644
--- a/tests/acceptance/pageObjects/FilesPageElement/filesList.js
+++ b/tests/acceptance/pageObjects/FilesPageElement/filesList.js
@@ -12,9 +12,16 @@ module.exports = {
      * @param {string} fileName
      * @returns {string}
      */
-    getActionSelectorLowRes: function (action, fileName) {
-      return '(' + this.getFileRowSelectorByFileName(fileName) +
-        this.elements[action + 'ButtonInFileRow'].selector + ')[last()]'
+    getActionSelectorLowRes: function (action, itemName) {
+      // Escape double quotes inside of selector
+      if (itemName.indexOf('"') > -1) {
+        itemName = itemName.replace(/\\([\s\S])|(")/g, '&quot;')
+      }
+
+      const actionsDropdownSelector = util.format(this.elements.itemActionsDropdown.selector, itemName)
+      const actionSelector = this.elements[action + 'ButtonInFileRow'].selector
+
+      return `${actionsDropdownSelector}${actionSelector}`
     },
     /**
      * Action button selector for High Resolution screens
@@ -104,12 +111,15 @@ module.exports = {
      *
      * @param {string} fileName
      */
-    deleteFile: function (fileName) {
-      return this
-        .waitForFileVisible(fileName)
+    deleteFile: async function (fileName) {
+      await this.waitForFileVisible(fileName)
+
+      await this
         .useXpath()
         .performFileAction(fileName, 'delete')
         .confirmDeletion()
+
+      return this
     },
     confirmDeletion: async function () {
       const clickAction = function () {
@@ -185,25 +195,31 @@ module.exports = {
      *
      * @param {string} folder
      */
-    navigateToFolder: function (folder) {
-      this.waitForFileVisible(folder)
-      return this.useXpath()
+    navigateToFolder: async function (folder) {
+      await this.waitForFileVisible(folder)
+
+      await this.useXpath()
         .moveToElement(this.getFileRowSelectorByFileName(folder), 0, 0)
         .click(this.getFileLinkSelectorByFileName(folder))
         .useCss()
         .waitForElementNotPresent('@filesListProgressBar')
+
+      return this
     },
 
     /**
      *
      * @param {string} fileName
      */
-    openSharingDialog: function (fileName) {
-      this.waitForFileVisible(fileName)
+    openSharingDialog: async function (fileName) {
+      await this.waitForFileVisible(fileName)
+
+      await this
         .useXpath()
         .performFileAction(fileName, 'share')
         .waitForElementVisible('@sharingSideBar')
         .useCss()
+
       return this.api.page.FilesPageElement.sharingDialog()
     },
     /**
@@ -212,12 +228,15 @@ module.exports = {
      */
     openPublicLinkDialog: async function (fileName) {
       await this.waitForFileVisible(fileName)
+
+      await this
         .useXpath()
         .performFileAction(fileName, 'share')
         .waitForElementVisible('@linkToPublicLinksTag')
         .click('@linkToPublicLinksTag')
         .waitForElementVisible('@publicLinkSideBar')
         .useCss()
+
       return this.api.page.FilesPageElement.publicLinksDialog()
     },
     closeSidebar: function (timeout = null) {
@@ -242,9 +261,10 @@ module.exports = {
      * @param {string} toName
      * @param {boolean} expectToSucceed
      */
-    renameFile: function (fromName, toName, expectToSucceed = true) {
-      this.initAjaxCounters()
-        .waitForFileVisible(fromName)
+    renameFile: async function (fromName, toName, expectToSucceed = true) {
+      await this.waitForFileVisible(fromName)
+
+      await this.initAjaxCounters()
         .useXpath()
         .performFileAction(fromName, 'rename')
         .waitForElementVisible('@renameFileConfirmationBtn')
@@ -256,7 +276,7 @@ module.exports = {
         .useCss()
 
       if (expectToSucceed) {
-        this.waitForElementNotVisible('@renameFileConfirmationDialog')
+        await this.waitForElementNotVisible('@renameFileConfirmationDialog')
       }
 
       return this
@@ -265,9 +285,10 @@ module.exports = {
      *
      * @param {string} fromName
      */
-    downloadFile: function (fromName) {
-      return this.initAjaxCounters()
-        .waitForFileVisible(fromName)
+    downloadFile: async function (fromName) {
+      await this.waitForFileVisible(fromName)
+
+      await this.initAjaxCounters()
         .performFileAction(fromName, 'download')
         .waitForOutstandingAjaxCalls()
     },
@@ -275,16 +296,19 @@ module.exports = {
      *
      * @param {string} path
      */
-    markAsFavorite: function (path) {
+    markAsFavorite: async function (path) {
+      await this.waitForFileVisible(path)
+
       const favoriteIconButton = this.getFileRowSelectorByFileName(path) +
         this.elements.notMarkedFavoriteInFileRow.selector
 
-      return this.initAjaxCounters()
-        .waitForFileVisible(path)
+      await this.initAjaxCounters()
         .useXpath()
         .click(favoriteIconButton)
         .waitForOutstandingAjaxCalls()
         .useCss()
+
+      return this
     },
     /**
      *
@@ -311,29 +335,35 @@ module.exports = {
     /**
      * @param {string} path
      */
-    unmarkFavorite: function (path) {
+    unmarkFavorite: async function (path) {
       const unFavoriteBtn = this.getFileRowSelectorByFileName(path) +
         this.elements.markedFavoriteInFileRow.selector
 
-      return this.initAjaxCounters()
-        .waitForFileVisible(path)
+      await this.waitForFileVisible(path)
+
+      await this.initAjaxCounters()
         .useXpath()
         .click(unFavoriteBtn)
         .waitForOutstandingAjaxCalls()
         .useCss()
+
+      return this
     },
     /**
      * @param {string} item the file/folder to click
      */
-    clickRow: function (item) {
-      return this.initAjaxCounters()
-        .waitForFileVisible(item)
+    clickRow: async function (item) {
+      await this.waitForFileVisible(item)
+
+      await this.initAjaxCounters()
         .useXpath()
         // click in empty space in the tr using coordinates to avoid
         // clicking on other elements that might be in the front
         .clickElementAt(this.getFileRowSelectorByFileName(item), 0, 0)
         .waitForOutstandingAjaxCalls()
         .useCss()
+
+      return this
     },
 
     /**
@@ -342,13 +372,15 @@ module.exports = {
      * @param {string} enableOrDisable
      * @param {string} path
      */
-    toggleFileOrFolderCheckbox: function (enableOrDisable, path) {
+    toggleFileOrFolderCheckbox: async function (enableOrDisable, path) {
+      await this.waitForFileVisible(path)
+
       const fileCheckbox = this.getFileRowSelectorByFileName(path) +
         this.elements.checkboxInFileRow.selector
 
+      await this.toggleCheckbox(enableOrDisable, fileCheckbox, 'xpath')
+
       return this
-        .waitForFileVisible(path)
-        .toggleCheckbox(enableOrDisable, fileCheckbox, 'xpath')
     },
     /**
      *
@@ -372,16 +404,40 @@ module.exports = {
      *
      * @param {string} fileName
      */
-    waitForFileVisible: function (fileName) {
-      const rowSelector = this.getFileRowSelectorByFileName(fileName)
+    waitForFileVisible: async function (fileName) {
       const linkSelector = this.getFileLinkSelectorByFileName(fileName)
-      return this
+
+      await this.waitForElementPresent('@filesTableContainer')
+
+      await this.filesListScrollToTop()
+
+      // TODO: After virtual scroll is implemented also in trashbin get rid of this
+      let trashbin = false
+      await this.api.url(result => {
+        if (result.value.indexOf('trash-bin') > -1) {
+          trashbin = true
+        }
+      })
+
+      if (trashbin) {
+        const rowSelector = this.getFileRowSelectorByFileName(fileName)
+
+        this
+          .useXpath()
+          .waitForElementVisible(rowSelector)
+      } else {
+        await this.findItemInFilesList(fileName)
+      }
+
+      // Find the item in files list if it's not in the view
+      await this
         .useXpath()
-        .waitForElementVisible(rowSelector)
         .getAttribute(linkSelector, 'filename', function (result) {
           this.assert.strictEqual(result.value, fileName, 'displayed file name not as expected')
         })
         .useCss()
+
+      return this
     },
     /**
      * Wait for A filerow with given path to be visible
@@ -602,27 +658,123 @@ module.exports = {
         .waitForElementNotVisible('@sidebarPrivateLinkIconCopied')
         .waitForElementVisible('@sidebarPrivateLinkLabel')
     },
-    deleteImmediately: function (fileName) {
-      return this.waitForFileVisible(fileName)
+    deleteImmediately: async function (fileName) {
+      await this.waitForFileVisible()
+      await this
         .performFileAction(fileName, 'deleteImmediately')
         .confirmDeletion()
+
+      return this
     },
-    getVersions: function (filename) {
+    getVersions: async function (filename) {
       const formattedFileRow = this.getFileRowSelectorByFileName(filename)
-      return this
+
+      await this.waitForFileVisible(filename)
+
+      await this
         .useXpath()
-        .waitForElementVisible(formattedFileRow)
         .click(formattedFileRow)
         .waitForElementVisible('@versionsElement')
         .click('@versionsElement')
+
+      return this
+    },
+    countFilesAndFolders: async function () {
+      let filesCount = 0
+      let foldersCount = 0
+
+      await this.waitForElementVisible('@filesCount')
+        .getText('@filesCount', result => {
+          filesCount = parseInt(result.value, 10)
+        })
+
+      await this.waitForElementVisible('@foldersCount')
+        .getText('@foldersCount', result => {
+          foldersCount = parseInt(result.value, 10)
+        })
+
+      return filesCount + foldersCount
+    },
+
+    /**
+     * Find an item in the files list. Scrolls down in case the item is not visible in viewport
+     */
+    findItemInFilesList: async function (itemName) {
+      // Escape double quotes inside of selector
+      if (itemName.indexOf('"') > -1) {
+        itemName = itemName.replace(/\\([\s\S])|(")/g, '\\$1$2')
+      }
+
+      await this.api.executeAsync(function ({ itemName, listContainerSelector, scrollWrapperSelector, listHeaderSelector }, done) {
+        const filesListContainer = document.querySelector(listContainerSelector)
+        const virtualScrollWrapper = document.querySelector(scrollWrapperSelector)
+        const tableHeaderPosition = document.querySelector(listHeaderSelector).getBoundingClientRect().top
+        let scrollDistance = filesListContainer.scrollTop
+
+        function scrollUntilElementVisible () {
+          const item = document.querySelector(`[filename="${itemName}"]`)
+
+          if (item) {
+            const position = item.getBoundingClientRect()
+            // Add position from top to list container height to properly decide if the item is visible
+            const visiblePosition = filesListContainer.clientHeight + tableHeaderPosition
+
+            // Check if the item is inside the view after it's renredered
+            if (position.top > -1 && position.top <= visiblePosition) {
+              done()
+              return
+            }
+          }
+
+          if (virtualScrollWrapper.scrollHeight <= scrollDistance) {
+            done()
+            return
+          }
+
+          scrollDistance += filesListContainer.clientHeight
+          filesListContainer.scrollTop = scrollDistance
+          setTimeout(function () {
+            scrollUntilElementVisible()
+          }, 500)
+        }
+
+        scrollUntilElementVisible()
+      }, [{
+        itemName: itemName,
+        listContainerSelector: this.elements.filesTableContainer.selector,
+        scrollWrapperSelector: this.elements.virtualScrollWrapper.selector,
+        listHeaderSelector: this.elements.filesTableHeader.selector
+      }])
+
+      return this
+    },
+
+    /**
+     * Scroll the files list to the beginning
+     */
+    filesListScrollToTop: async function () {
+      await this.api.executeAsync(function (listContainerSelector, done) {
+        const filesListScroll = document.querySelector(listContainerSelector)
+        if (filesListScroll.scrollTop > 0) {
+          filesListScroll.scrollTop = 0
+        }
+
+        done()
+      }, [this.elements.filesTableContainer.selector])
+
+      return this
     }
+
   },
   elements: {
     filesTable: {
       selector: '#files-list, #shared-with-list'
     },
+    filesTableContainer: {
+      selector: '#files-list-container'
+    },
     fileRows: {
-      selector: 'tr.file-row'
+      selector: '.file-row'
     },
     allFiles: {
       selector: 'span.oc-file.file-row-name'
@@ -680,10 +832,12 @@ module.exports = {
       selector: '#oc-dialog-rename-confirm'
     },
     fileRowByName: {
-      selector: '//span[@class="oc-file-name"][text()=%s and not(../span[@class="oc-file-extension"])]/../../..'
+      // FIXME: When the virtual scroll is implemented in trashbin adjust the selector
+      selector: '//span[@class="oc-file-name"][text()=%s and not(../span[@class="oc-file-extension"])]/../../../../../*[@data-is-visible="true"]'
     },
     fileRowByNameAndExtension: {
-      selector: '//span[span/text()=%s and span/text()="%s"]/../..'
+      // FIXME: When the virtual scroll is implemented in trashbin adjust the selector
+      selector: '//span[span/text()=%s and span/text()="%s"]/../../../../*[@data-is-visible="true"]'
     },
     fileLinkInFileRow: {
       selector: '//span[contains(@class, "file-row-name")]'
@@ -744,6 +898,22 @@ module.exports = {
     },
     collaboratorsList: {
       selector: '.files-collaborators-lists'
+    },
+    itemActionsDropdown: {
+      // FIXME: Use id after virtual scroll was implemented in trashbin
+      selector: '//div[@data-actions-dropdown-for-item="%s"]'
+    },
+    foldersCount: {
+      selector: '#files-list-count-folders'
+    },
+    filesCount: {
+      selector: '#files-list-count-files'
+    },
+    virtualScrollWrapper: {
+      selector: '.vue-recycle-scroller__item-wrapper'
+    },
+    filesTableHeader: {
+      selector: '#files-table-header'
     }
   }
 }
diff --git a/tests/acceptance/pageObjects/filesPage.js b/tests/acceptance/pageObjects/filesPage.js
index e196e779502..0e5913f71eb 100644
--- a/tests/acceptance/pageObjects/filesPage.js
+++ b/tests/acceptance/pageObjects/filesPage.js
@@ -416,16 +416,16 @@ module.exports = {
       selector: '#oc-filter-hidden-checkbox'
     },
     filterFolderLabel: {
-      selector: '#oc-filter-folder-label'
+      selector: '#oc-filter-folder > span'
     },
     filterFolderCheckbox: {
-      selector: '#oc-filter-folder-checkbox'
+      selector: '#oc-filter-folder > input[type=checkbox]'
     },
     filterFileLabel: {
-      selector: '#oc-filter-file-label'
+      selector: '#oc-filter-file > span'
     },
     filterFileCheckbox: {
-      selector: '#oc-filter-file-checkbox'
+      selector: '#oc-filter-file > input[type=checkbox]'
     },
     createFolderLoadingIndicator: {
       selector: '//div[@id="new-folder-dialog"]//div[@class="oc-loader"]',
diff --git a/tests/acceptance/pageObjects/sharedWithMePage.js b/tests/acceptance/pageObjects/sharedWithMePage.js
index 81d9c85d6ef..ff021bc7ea9 100644
--- a/tests/acceptance/pageObjects/sharedWithMePage.js
+++ b/tests/acceptance/pageObjects/sharedWithMePage.js
@@ -22,15 +22,21 @@ module.exports = {
      * Checks if the file-row of the desired file-name with the username consists of the desired status of accepted,
      * declined or pending
      */
-    assertDesiredStatusIsPresent: function (filename, status, user) {
+    assertDesiredStatusIsPresent: async function (filename, status, user) {
+      // TODO: Needs to be optimised
+      await this.api.page.FilesPageElement.filesList().waitForFileVisible(filename)
+
       let requiredXpath = this.api.page.FilesPageElement.filesList().getFileRowSelectorByFileName(filename) +
                           util.format(this.elements.assertStatusFileRow.selector, status)
       requiredXpath = user === undefined ? requiredXpath : requiredXpath +
                       util.format(this.elements.getSharedFromUserName.selector, user)
-      return this.waitForElementVisible({
+
+      await this.waitForElementVisible({
         locateStrategy: this.elements.assertStatusFileRow.locateStrategy,
         selector: requiredXpath
       })
+
+      return this
     },
     /**
      * @param {string} filename
diff --git a/tests/acceptance/stepDefinitions/filesContext.js b/tests/acceptance/stepDefinitions/filesContext.js
index 3de9e0ee618..2013a20003d 100644
--- a/tests/acceptance/stepDefinitions/filesContext.js
+++ b/tests/acceptance/stepDefinitions/filesContext.js
@@ -154,8 +154,10 @@ When('the user creates a folder with the invalid name {string} using the webUI',
 Given('the user has opened folder {string}', (folder) => client.page.FilesPageElement.filesList().navigateToFolder(folder))
 When('the user opens folder {string} using the webUI', (folder) => client.page.FilesPageElement.filesList().navigateToFolder(folder))
 
-Given('the user has opened the share dialog for file/folder {string}', function (fileName) {
-  return client.page.FilesPageElement.filesList().openSharingDialog(fileName)
+Given('the user has opened the share dialog for file/folder {string}', async function (fileName) {
+  await client.page.FilesPageElement.filesList().openSharingDialog(fileName)
+
+  return client
 })
 
 When('the user enables the setting to view hidden files/folders on the webUI', function () {
@@ -370,12 +372,14 @@ Then('file/folder with path {string} should be listed in the favorites page on t
     .waitForFileWithPathVisible(path)
 })
 
-Then('the last uploaded folder should be listed on the webUI', function () {
+Then('the last uploaded folder should be listed on the webUI', async function () {
   const folder = client.sessionId
-  return client
+  await client
     .page
     .FilesPageElement.filesList()
     .waitForFileVisible(folder)
+
+  return client
 })
 
 Then('file/folder {string} should not be listed on the webUI', async function (folder) {
@@ -430,26 +434,25 @@ When('the user batch deletes the marked files using the webUI', function () {
   return client.page.filesPage().deleteAllCheckedFiles()
 })
 
-When('the user batch deletes these files using the webUI', function (fileOrFolders) {
-  fileOrFolders.rows().forEach(entry => {
-    client.page.FilesPageElement.filesList().toggleFileOrFolderCheckbox('enable', entry[0])
-    deletedElements.push(entry[0])
-  })
+When('the user batch deletes these files using the webUI', async function (fileOrFolders) {
+  for (const item of fileOrFolders.rows()) {
+    await client.page.FilesPageElement.filesList().toggleFileOrFolderCheckbox('enable', item[0])
+    deletedElements.push(item[0])
+  }
+
   return client.page.filesPage().deleteAllCheckedFiles()
 })
 
-When('the user unmarks these files for batch action using the webUI', function (fileOrFolders) {
-  fileOrFolders.rows().forEach(entry => {
-    client.page.FilesPageElement.filesList().toggleFileOrFolderCheckbox('disable', entry[0])
-  })
-  return client
+When('the user unmarks these files for batch action using the webUI', async function (fileOrFolders) {
+  for (const item of fileOrFolders.rows()) {
+    await client.page.FilesPageElement.filesList().toggleFileOrFolderCheckbox('disable', item[0])
+  }
 })
 
-When('the user marks these files for batch action using the webUI', function (fileOrFolders) {
-  fileOrFolders.rows().forEach(entry => {
-    client.page.FilesPageElement.filesList().toggleFileOrFolderCheckbox('enable', entry[0])
-  })
-  return client
+When('the user marks these files for batch action using the webUI', async function (fileOrFolders) {
+  for (const item of fileOrFolders.rows()) {
+    await client.page.FilesPageElement.filesList().toggleFileOrFolderCheckbox('enable', item[0])
+  }
 })
 
 When('the user clears the trashbin', function () {
@@ -529,15 +532,15 @@ Then('as {string} these folders/files/resources should not be listed in the fold
  *
  * @param {DataTable} entryList the list needs a heading line
  */
-const theseResourcesShouldBeListed = function (entryList) {
+const theseResourcesShouldBeListed = async function (entryList) {
   if (entryList.rows().length <= 0) {
     throw Error('Gerkin entry list is empty. Missing heading?')
   }
-  entryList.rows().forEach(entry => {
-    // here each entry is an array with one element,
-    // which is the name of the entry from the table
-    client.page.FilesPageElement.filesList().waitForFileVisible(entry[0])
-  })
+
+  for (const item of entryList.rows()) {
+    await client.page.FilesPageElement.filesList().waitForFileVisible(item[0])
+  }
+
   return client
 }
 
@@ -615,8 +618,8 @@ Then('file/folder {string} should not be marked as favorite on the webUI', funct
 })
 
 Then(/there should be (\d+) files\/folders listed on the webUI/, async function (noOfItems) {
-  const allFileRows = await client.page.FilesPageElement.filesList().allFileRows()
-  return client.assert.equal(allFileRows.value.length, noOfItems)
+  const itemsCount = await client.page.FilesPageElement.filesList().countFilesAndFolders()
+  return client.assert.equal(itemsCount, noOfItems)
 })
 
 Then('the folder should be empty on the webUI after a page reload', async function () {
@@ -689,13 +692,17 @@ Then('the following files/folders/resources should be listed on the webUI', func
   return assertElementsAreListed([].concat.apply([], table.rows()))
 })
 
-Then('file/folder {string} should be listed in the folder {string} on the webUI', function (file, folder) {
-  return client
+Then('file/folder {string} should be listed in the folder {string} on the webUI', async function (file, folder) {
+  const api = client
     .page
     .FilesPageElement
     .filesList()
-    .navigateToFolder(folder)
-    .waitForFileVisible(file)
+
+  await api.navigateToFolder(folder)
+
+  await api.waitForFileVisible(file)
+
+  return client
 })
 
 Then('the deleted elements should be listed on the webUI', function () {
@@ -723,9 +730,11 @@ Then('file/folder {string} should not be listed in shared-with-others page on th
   )
 })
 
-Then('file/folder {string} should be listed in shared-with-others page on the webUI', function (filename) {
-  client.page.sharedWithOthersPage().navigateAndWaitTillLoaded()
-  return client.page.FilesPageElement.filesList().waitForFileVisible(filename)
+Then('file/folder {string} should be listed in shared-with-others page on the webUI', async function (filename) {
+  await client.page.sharedWithOthersPage().navigateAndWaitTillLoaded()
+  await client.page.FilesPageElement.filesList().waitForFileVisible(filename)
+
+  return client
 })
 
 Given('the user has created file {string}', function (fileName) {
diff --git a/tests/acceptance/stepDefinitions/privateLinksContext.js b/tests/acceptance/stepDefinitions/privateLinksContext.js
index 375f59d826d..b12e50ec859 100644
--- a/tests/acceptance/stepDefinitions/privateLinksContext.js
+++ b/tests/acceptance/stepDefinitions/privateLinksContext.js
@@ -2,11 +2,12 @@ const { client } = require('nightwatch-api')
 const { When } = require('cucumber')
 const webdav = require('../helpers/webdavHelper')
 
-When('the user copies the private link of the file/folder {string} using the webUI', function (resource) {
-  return client.page.FilesPageElement
-    .filesList()
+When('the user copies the private link of the file/folder {string} using the webUI', async function (resource) {
+  const api = client.page.FilesPageElement.filesList()
+  await api
     .clickRow(resource)
-    .copyPrivateLink()
+
+  return api.copyPrivateLink()
 })
 
 When('the user navigates to the copied private/public link using the webUI', function () {
diff --git a/tests/acceptance/stepDefinitions/sharingContext.js b/tests/acceptance/stepDefinitions/sharingContext.js
index 8f1e3c4af55..ff21baa682e 100644
--- a/tests/acceptance/stepDefinitions/sharingContext.js
+++ b/tests/acceptance/stepDefinitions/sharingContext.js
@@ -23,15 +23,17 @@ const util = require('util')
  * @param {string} role
  * @param {string} permissions
  */
-const userSharesFileOrFolderWithUserOrGroup = function (
+const userSharesFileOrFolderWithUserOrGroup = async function (
   file, sharee, shareWithGroup, role, permissions = undefined, remote = false
 ) {
-  return client.page
+  const api = client.page
     .FilesPageElement
-    .filesList()
-    .closeSidebar(100)
-    .openSharingDialog(file)
-    .shareWithUserOrGroup(sharee, shareWithGroup, role, permissions, remote)
+
+  await api.filesList().closeSidebar(100)
+
+  await api.filesList().openSharingDialog(file)
+
+  return api.sharingDialog().shareWithUserOrGroup(sharee, shareWithGroup, role, permissions, remote)
 }
 
 /**
@@ -459,40 +461,48 @@ When('the user displays all share-autocomplete results using the webUI', functio
   return client.page.FilesPageElement.sharingDialog().showAllAutoCompleteResults()
 })
 
-When('the user sets custom permission for current role of collaborator {string} for folder/file {string} to {string} using the webUI', function (user, resource, permissions) {
-  return client.page
+When('the user sets custom permission for current role of collaborator {string} for folder/file {string} to {string} using the webUI', async function (user, resource, permissions) {
+  const api = client.page
     .FilesPageElement
-    .filesList()
-    .closeSidebar(100)
-    .openSharingDialog(resource)
-    .changeCustomPermissionsTo(user, permissions)
+
+  await api.filesList().closeSidebar(100)
+
+  await api.filesList().openSharingDialog(resource)
+
+  return api.sharingDialog().changeCustomPermissionsTo(user, permissions)
 })
 
-When('the user disables all the custom permissions of collaborator {string} for file/folder {string} using the webUI', function (collaborator, resource) {
-  return client.page
+When('the user disables all the custom permissions of collaborator {string} for file/folder {string} using the webUI', async function (collaborator, resource) {
+  const api = client.page
     .FilesPageElement
-    .filesList()
-    .closeSidebar(100)
-    .openSharingDialog(resource)
-    .disableAllCustomPermissions(collaborator)
+
+  await api.filesList().closeSidebar(100)
+
+  await api.filesList().openSharingDialog(resource)
+
+  return api.sharingDialog().disableAllCustomPermissions(collaborator)
 })
 
-Then('custom permission/permissions {string} should be set for user {string} for file/folder {string} on the webUI', function (permissions, user, resource) {
-  return client.page
+Then('custom permission/permissions {string} should be set for user {string} for file/folder {string} on the webUI', async function (permissions, user, resource) {
+  const api = client.page
     .FilesPageElement
-    .filesList()
-    .closeSidebar(100)
-    .openSharingDialog(resource)
-    .assertPermissionIsDisplayed(user, permissions)
+
+  await api.filesList().closeSidebar(100)
+
+  await api.filesList().openSharingDialog(resource)
+
+  return api.sharingDialog().assertPermissionIsDisplayed(user, permissions)
 })
 
-Then('no custom permissions should be set for collaborator {string} for file/folder {string} on the webUI', function (user, resource) {
-  return client.page
+Then('no custom permissions should be set for collaborator {string} for file/folder {string} on the webUI', async function (user, resource) {
+  const api = client.page
     .FilesPageElement
-    .filesList()
-    .closeSidebar(100)
-    .openSharingDialog(resource)
-    .assertPermissionIsDisplayed(user)
+
+  await api.filesList().closeSidebar(100)
+
+  await api.filesList().openSharingDialog(resource)
+
+  return api.sharingDialog().assertPermissionIsDisplayed(user)
 })
 
 When('the user shares file/folder/resource {string} with group {string} as {string} using the webUI', userSharesFileOrFolderWithGroup)
@@ -664,10 +674,12 @@ When('the user deletes {string} as collaborator for the current file/folder usin
 
 When(
   'the user changes the collaborator role of {string} for file/folder {string} to {string} using the webUI',
-  function (collaborator, resource, newRole) {
-    return client.page.FilesPageElement.filesList()
-      .openSharingDialog(resource)
-      .changeCollaboratorRole(collaborator, newRole)
+  async function (collaborator, resource, newRole) {
+    const api = client.page.FilesPageElement
+
+    await api.filesList().openSharingDialog(resource)
+
+    return api.sharingDialog().changeCollaboratorRole(collaborator, newRole)
   }
 )
 
@@ -675,12 +687,15 @@ Then('user {string} should be listed as {string} in the collaborators list on th
   return assertCollaboratorslistContains('user', user, role)
 })
 
-Then('user {string} should be listed as {string} in the collaborators list for file/folder/resource {string} on the webUI', function (user, role, resource) {
-  client.page
+Then('user {string} should be listed as {string} in the collaborators list for file/folder/resource {string} on the webUI', async function (user, role, resource) {
+  const api = client.page
     .FilesPageElement
     .filesList()
-    .closeSidebar(100)
-    .openSharingDialog(resource)
+
+  await api.closeSidebar(100)
+
+  await api.openSharingDialog(resource)
+
   return assertCollaboratorslistContains('user', user, role)
 })
 
@@ -688,12 +703,15 @@ Then('group {string} should be listed as {string} in the collaborators list on t
   return assertCollaboratorslistContains('group', group, role)
 })
 
-Then('group {string} should be listed as {string} in the collaborators list for file/folder/resource {string} on the webUI', function (group, role, resource) {
-  client.page
+Then('group {string} should be listed as {string} in the collaborators list for file/folder/resource {string} on the webUI', async function (group, role, resource) {
+  const api = client.page
     .FilesPageElement
     .filesList()
-    .closeSidebar(100)
-    .openSharingDialog(resource)
+
+  await api.closeSidebar(100)
+
+  await api.openSharingDialog(resource)
+
   return assertCollaboratorslistContains('group', group, role)
 })
 
@@ -717,22 +735,28 @@ Then('user {string} should have a share with these details:', function (user, ex
   return sharingHelper.assertUserHasShareWithDetails(user, expectedDetailsTable)
 })
 
-Then('the user should not be able to share file/folder/resource {string} using the webUI', function (resource) {
-  return client.page
+Then('the user should not be able to share file/folder/resource {string} using the webUI', async function (resource) {
+  const api = client.page
     .FilesPageElement
-    .filesList()
-    .closeSidebar(100)
-    .openSharingDialog(resource)
-    .assertSharingNotAllowed()
+
+  await api.filesList().closeSidebar(100)
+
+  await api.filesList().openSharingDialog(resource)
+
+  return api.sharingDialog().assertSharingNotAllowed()
 })
 
 Then('the collaborators list for file/folder/resource {string} should be empty', async function (resource) {
-  const count = (await client.page
-    .FilesPageElement
-    .filesList()
-    .closeSidebar(100)
-    .openSharingDialog(resource)
-    .getCollaboratorsList()).length
+  const api = client.page.FilesPageElement
+
+  await api.filesList().closeSidebar(100)
+
+  await api.filesList().openSharingDialog(resource)
+
+  const count = (await api
+    .sharingDialog()
+    .getCollaboratorsList()
+  ).length
   assert.strictEqual(count, 0, `Expected to have no collaborators for '${resource}', Found: ${count}`)
 })
 
diff --git a/tests/acceptance/stepDefinitions/webdavContext.js b/tests/acceptance/stepDefinitions/webdavContext.js
index 18e21ac6a9a..b839550968f 100644
--- a/tests/acceptance/stepDefinitions/webdavContext.js
+++ b/tests/acceptance/stepDefinitions/webdavContext.js
@@ -126,12 +126,10 @@ Given('user {string} has favorited element {string}', function (userId, element)
     })
 })
 
-Then('as {string} file/folder {string} should exist in trash', function (user, element) {
-  return webdavHelper.getTrashBinElements(user)
-    .then(items => {
-      const trashFiles = items.map(item => item.originalFilename)
-      assert.strictEqual(trashFiles.includes(element), true)
-    })
+Then('as {string} file/folder {string} should exist in trash', async function (user, element) {
+  const items = await webdavHelper.getTrashBinElements(user)
+  const trashFiles = items.map(item => item.originalFilename)
+  assert.strictEqual(trashFiles.includes(element), true)
 })
 
 Then('as {string} the file/folder with original path {string} should not exist in trash', function (user, path) {