Refactor to use virtual-scroll more selectively

src/popup/app.module.ts

@@ -69,6 +69,7 @@ import { I18nPipe } from 'jslib/angular/pipes/i18n.pipe';
 import { SearchCiphersPipe } from 'jslib/angular/pipes/search-ciphers.pipe';
 
 import { ActionButtonsComponent } from './components/action-buttons.component';
+import { CipherRowComponent } from './components/cipher-row.component';
 import { CiphersListComponent } from './components/ciphers-list.component';
 import { PopOutComponent } from './components/pop-out.component';
 import { SendListComponent } from './components/send-list.component';
@@ -186,6 +187,7 @@ registerLocaleData(localeZhTw, 'zh-TW');
         BlurClickDirective,
         BoxRowDirective,
         CalloutComponent,
+        CipherRowComponent,
         CiphersComponent,
         CiphersListComponent,
         CollectionsComponent,

src/popup/components/cipher-row.component.html

@@ -0,0 +1,24 @@
+
+<a (click)="selectCipher(cipher)" (dblclick)="launchCipher(cipher)" href="#" appStopClick
+    title="{{title}} - {{cipher.name}}" class="box-content-row box-content-row-flex">
+    <div class="row-main">
+        <app-vault-icon [cipher]="cipher"></app-vault-icon>
+        <div class="row-main-content">
+            <span class="text">
+                {{cipher.name}}
+                <ng-container *ngIf="cipher.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="cipher.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">{{cipher.subTitle}}</span>
+        </div>
+    </div>
+    <app-action-buttons [cipher]="cipher" [showView]="showView" (onView)="viewCipher(cipher)" (launchEvent)="launchCipher(cipher)" 
+        class="action-buttons">
+    </app-action-buttons>
+</a>

src/popup/components/cipher-row.component.ts

@@ -0,0 +1,33 @@
+import {
+    Component,
+    EventEmitter,
+    Input,
+    Output,
+} from '@angular/core';
+
+import { CipherView } from 'jslib/models/view/cipherView';
+
+@Component({
+    selector: 'app-cipher-row',
+    templateUrl: 'cipher-row.component.html',
+})
+export class CipherRowComponent {
+    @Output() onSelected = new EventEmitter<CipherView>();
+    @Output() launchEvent = new EventEmitter<CipherView>();
+    @Output() onView = new EventEmitter<CipherView>();
+    @Input() cipher: CipherView;
+    @Input() showView = false;
+    @Input() title: string;
+
+    selectCipher(c: CipherView) {
+        this.onSelected.emit(c);
+    }
+
+    launchCipher(c: CipherView) {
+        this.launchEvent.emit(c);
+    }
+
+    viewCipher(c: CipherView) {
+        this.onView.emit(c);
+    }
+}

src/popup/scss/misc.scss

@@ -361,35 +361,23 @@ select option {
 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 {
+cdk-virtual-scroll-viewport::-webkit-scrollbar {
     width: 10px;
     height: 10px;
 }
 
-cdk-virtual-scroll-viewport::-webkit-scrollbar-track, cdk-virtual-scroll-viewport::-webkit-scrollbar {
+cdk-virtual-scroll-viewport::-webkit-scrollbar-track {
-    background-color: transparent;
+    @include themify($themes) {
+        background-color: themed('backgroundColor');
+    }
 }
 
-cdk-virtual-scroll-viewport::-webkit-scrollbar-thumb, cdk-virtual-scroll-viewport::-webkit-scrollbar {
+cdk-virtual-scroll-viewport::-webkit-scrollbar-thumb {
     border-radius: 10px;
     margin-right: 1px;
 

src/popup/services/popup-utils.service.ts

@@ -25,14 +25,14 @@ export class PopupUtilsService {
             win.location.search.indexOf('uilocation=popup') > -1;
     }
 
-    getContentScrollY(win: Window): number {
+    getContentScrollY(win: Window, scrollingContainer: string = 'content'): number {
-        const content = win.document.getElementsByTagName('content')[0];
+        const content = win.document.getElementsByTagName(scrollingContainer)[0];
         return content.scrollTop;
     }
 
-    setContentScrollY(win: Window, scrollY: number): void {
+    setContentScrollY(win: Window, scrollY: number, scrollingContainer: string = 'content'): void {
         if (scrollY != null) {
-            const content = win.document.getElementsByTagName('content')[0];
+            const content = win.document.getElementsByTagName(scrollingContainer)[0];
             content.scrollTop = scrollY;
         }
     }

src/popup/vault/ciphers.component.html

@@ -63,15 +63,17 @@
                 </button>
             </ng-container>
         </div>
-        <div class="box list only-list" *ngIf="ciphers.length">
+        <cdk-virtual-scroll-viewport itemSize="46" *ngIf="ciphers.length" #virtualScrollViewport>
-            <div class="box-header">
+            <div class="box list only-list">
-                {{groupingTitle}}
+                <div class="box-header">
-                <span class="flex-right">{{isSearching() ? ciphers.length : ciphers.length}}</span>
+                    {{groupingTitle}}
+                    <span class="flex-right">{{isSearching() ? ciphers.length : ciphers.length}}</span>
+                </div>
+                <div class="box-content">
+                    <app-cipher-row *cdkVirtualFor="let c of ciphers" [cipher]="c" title="{{'viewItem' | i18n}}"
+                        (onSelected)="selectCipher($event)" (launchEvent)="launchCipher($event)"></app-cipher-row>
+                </div>
             </div>
-            <div class="box-content">
+        </cdk-virtual-scroll-viewport>
-                <app-ciphers-list [ciphers]="ciphers" title="{{'viewItem' | i18n}}"
-                    (onSelected)="selectCipher($event)" (launchEvent)="launchCipher($event)"></app-ciphers-list>
-            </div>
-        </div>
     </ng-container>
 </content>

src/popup/vault/ciphers.component.ts

@@ -54,6 +54,7 @@ export class CiphersComponent extends BaseCiphersComponent implements OnInit, On
     private selectedTimeout: number;
     private preventSelected = false;
     private applySavedState = true;
+    private scrollingContainer = 'cdk-virtual-scroll-viewport';
 
     constructor(searchService: SearchService, private route: ActivatedRoute,
         private router: Router, private location: Location,
@@ -132,7 +133,8 @@ export class CiphersComponent extends BaseCiphersComponent implements OnInit, On
             }
 
             if (this.applySavedState && this.state != null) {
-                window.setTimeout(() => this.popupUtils.setContentScrollY(window, this.state.scrollY), 0);
+                window.setTimeout(() => this.popupUtils.setContentScrollY(window, this.state.scrollY,
+                    this.scrollingContainer), 0);
             }
             this.stateService.remove(ComponentId);
             if (queryParamsSub != null) {
@@ -227,7 +229,7 @@ export class CiphersComponent extends BaseCiphersComponent implements OnInit, On
 
     private async saveState() {
         this.state = {
-            scrollY: this.popupUtils.getContentScrollY(window),
+            scrollY: this.popupUtils.getContentScrollY(window, this.scrollingContainer),
             searchText: this.searchText,
         };
         await this.stateService.save(ComponentId, this.state);