From 9e5869773db6b7c6bcd206683a2bd5f132176653 Mon Sep 17 00:00:00 2001
From: Thomas Rittson <trittson@bitwarden.com>
Date: Thu, 20 May 2021 12:35:23 +1000
Subject: [PATCH] Basic proof of concept for cdk-virtual-scroll

---
 src/popup/app.module.ts                       |  2 +
 .../components/ciphers-list.component.html    | 46 +++++++++--------
 .../components/ciphers-list.component.ts      |  2 +
 src/popup/scss/misc.scss                      | 51 +++++++++++++++++++
 src/popup/vault/ciphers.component.html        | 12 ++---
 5 files changed, 84 insertions(+), 29 deletions(-)

diff --git a/src/popup/app.module.ts b/src/popup/app.module.ts
index 4837f151f3..884ddcd88b 100644
--- a/src/popup/app.module.ts
+++ b/src/popup/app.module.ts
@@ -1,4 +1,5 @@
 import { DragDropModule } from '@angular/cdk/drag-drop';
+import { ScrollingModule } from '@angular/cdk/scrolling'; 
 import { ToasterModule } from 'angular2-toaster';
 import { InfiniteScrollModule } from 'ngx-infinite-scroll';
 
@@ -172,6 +173,7 @@ registerLocaleData(localeZhTw, 'zh-TW');
         ToasterModule.forRoot(),
         InfiniteScrollModule,
         DragDropModule,
+        ScrollingModule,
     ],
     declarations: [
         A11yTitleDirective,
diff --git a/src/popup/components/ciphers-list.component.html b/src/popup/components/ciphers-list.component.html
index 6c8c4a407b..2d3e8d8641 100644
--- a/src/popup/components/ciphers-list.component.html
+++ b/src/popup/components/ciphers-list.component.html
@@ -1,23 +1,25 @@
-<a *ngFor="let c of ciphers" (click)="selectCipher(c)" (dblclick)="launchCipher(c)" href="#" appStopClick
-    title="{{title}} - {{c.name}}" class="box-content-row box-content-row-flex">
-    <div class="row-main">
-        <app-vault-icon [cipher]="c"></app-vault-icon>
-        <div class="row-main-content">
-            <span class="text">
-                {{c.name}}
-                <ng-container *ngIf="c.organizationId">
-                    <i class="fa fa-share-alt text-muted" title="{{'shared' | i18n}}" aria-hidden="true"></i>
-                    <span class="sr-only">{{'shared' | i18n}}</span>
-                </ng-container>
-                <ng-container *ngIf="c.hasAttachments">
-                    <i class="fa fa-paperclip text-muted" title="{{'attachments' | i18n}}" aria-hidden="true"></i>
-                    <span class="sr-only">{{'attachments' | i18n}}</span>
-                </ng-container>
-            </span>
-            <span class="detail">{{c.subTitle}}</span>
+<cdk-virtual-scroll-viewport itemSize="46">
+    <a *cdkVirtualFor="let c of ciphers" (click)="selectCipher(c)" (dblclick)="launchCipher(c)" href="#" appStopClick
+        title="{{title}} - {{c.name}}" class="box-content-row box-content-row-flex">
+        <div class="row-main">
+            <app-vault-icon [cipher]="c"></app-vault-icon>
+            <div class="row-main-content">
+                <span class="text">
+                    {{c.name}}
+                    <ng-container *ngIf="c.organizationId">
+                        <i class="fa fa-share-alt text-muted" title="{{'shared' | i18n}}" aria-hidden="true"></i>
+                        <span class="sr-only">{{'shared' | i18n}}</span>
+                    </ng-container>
+                    <ng-container *ngIf="c.hasAttachments">
+                        <i class="fa fa-paperclip text-muted" title="{{'attachments' | i18n}}" aria-hidden="true"></i>
+                        <span class="sr-only">{{'attachments' | i18n}}</span>
+                    </ng-container>
+                </span>
+                <span class="detail">{{c.subTitle}}</span>
+            </div>
         </div>
-    </div>
-    <app-action-buttons [cipher]="c" [showView]="showView" (onView)="viewCipher(c)" (launchEvent)="launchCipher(c)" 
-        class="action-buttons">
-    </app-action-buttons>
-</a>
+        <app-action-buttons [cipher]="c" [showView]="showView" (onView)="viewCipher(c)" (launchEvent)="launchCipher(c)" 
+            class="action-buttons">
+        </app-action-buttons>
+    </a>
+</cdk-virtual-scroll-viewport>
diff --git a/src/popup/components/ciphers-list.component.ts b/src/popup/components/ciphers-list.component.ts
index 4c1101826c..3696bfc056 100644
--- a/src/popup/components/ciphers-list.component.ts
+++ b/src/popup/components/ciphers-list.component.ts
@@ -34,4 +34,6 @@ export class CiphersListComponent {
     viewCipher(c: CipherView) {
         this.onView.emit(c);
     }
+
+    async resetPaging() { }
 }
diff --git a/src/popup/scss/misc.scss b/src/popup/scss/misc.scss
index 1d12bba3c7..ae02ec6eab 100644
--- a/src/popup/scss/misc.scss
+++ b/src/popup/scss/misc.scss
@@ -356,3 +356,54 @@ select option {
         background-color: darken(themed('inputBackgroundColor'), +1);
     }
 }
+
+// TODO: this but better
+cdk-virtual-scroll-viewport {
+    height: 500px;
+    width: 375px;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    overflow-y: auto !important;
+    overflow-x: hidden !important;
+
+    &.flex {
+        display: flex;
+        flex-flow: column;
+
+        &.tab-page {
+            height: calc(100% - 99px);
+        }
+    }
+}
+
+// cribbed directly from base.scss
+cdk-virtual-scroll-viewport::-webkit-scrollbar, cdk-virtual-scroll-viewport::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+}
+
+cdk-virtual-scroll-viewport::-webkit-scrollbar-track, cdk-virtual-scroll-viewport::-webkit-scrollbar {
+    background-color: transparent;
+}
+
+cdk-virtual-scroll-viewport::-webkit-scrollbar-thumb, cdk-virtual-scroll-viewport::-webkit-scrollbar {
+    border-radius: 10px;
+    margin-right: 1px;
+
+    @include themify($themes) {
+        background-color: themed('scrollbarColor');
+    }
+
+    &:hover {
+        @include themify($themes) {
+            background-color: themed('scrollbarHoverColor');
+        }
+    }
+}
+
+.cdk-virtual-scroll-content-wrapper {
+    width: 100%;
+}
diff --git a/src/popup/vault/ciphers.component.html b/src/popup/vault/ciphers.component.html
index 3581afa21d..b61aef58e9 100644
--- a/src/popup/vault/ciphers.component.html
+++ b/src/popup/vault/ciphers.component.html
@@ -53,8 +53,8 @@
             </div>
         </div>
     </ng-container>
-    <ng-container *ngIf="(isPaging() ? pagedCiphers : ciphers) as filteredCiphers">
-        <div class="no-items" *ngIf="!filteredCiphers.length">
+    <ng-container *ngIf="ciphers">
+        <div class="no-items" *ngIf="!ciphers.length">
             <i class="fa fa-spinner fa-spin fa-3x" *ngIf="!loaded" aria-hidden="true"></i>
             <ng-container *ngIf="loaded">
                 <p>{{'noItemsInList' | i18n}}</p>
@@ -63,15 +63,13 @@
                 </button>
             </ng-container>
         </div>
-        <div class="box list only-list" *ngIf="filteredCiphers.length" infiniteScroll [infiniteScrollDistance]="1"
-            [infiniteScrollContainer]="'content'" [fromRoot]="true" [infiniteScrollDisabled]="!isPaging()"
-            (scrolled)="loadMore()">
+        <div class="box list only-list" *ngIf="ciphers.length">
             <div class="box-header">
                 {{groupingTitle}}
-                <span class="flex-right">{{isSearching() ? filteredCiphers.length : ciphers.length}}</span>
+                <span class="flex-right">{{isSearching() ? ciphers.length : ciphers.length}}</span>
             </div>
             <div class="box-content">
-                <app-ciphers-list [ciphers]="filteredCiphers" title="{{'viewItem' | i18n}}"
+                <app-ciphers-list [ciphers]="ciphers" title="{{'viewItem' | i18n}}"
                     (onSelected)="selectCipher($event)" (launchEvent)="launchCipher($event)"></app-ciphers-list>
             </div>
         </div>