Merge pull request #1532 from bitwarden/bugfix-attachments-in-popup

Pop out attachments page on all browsers

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

@@ -6,7 +6,7 @@ import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
 
 @Injectable()
 export class PopupUtilsService {
-    constructor(private platformUtilsService: PlatformUtilsService) {}
+    constructor(private platformUtilsService: PlatformUtilsService) { }
 
     inSidebar(win: Window): boolean {
         return win.location.search !== '' && win.location.search.indexOf('uilocation=sidebar') > -1;
@@ -37,8 +37,11 @@ export class PopupUtilsService {
         }
     }
 
-    popOut(win: Window): void {
-        let href = win.location.href;
+    popOut(win: Window, href: string = null): void {
+
+        if (href === null) {
+            href = win.location.href;
+        }
 
         if ((typeof chrome !== 'undefined') && chrome.windows && chrome.windows.create) {
             if (href.indexOf('?uilocation=') > -1) {

src/popup/vault/add-edit.component.html

@@ -274,7 +274,8 @@
                 <a class="box-content-row box-content-row-flex text-default" href="#" appStopClick appBlurClick
                     (click)="attachments()" *ngIf="editMode && showAttachments && !cloneMode">
                     <div class="row-main">{{'attachments' | i18n}}</div>
-                    <i class="fa fa-chevron-right row-sub-icon" aria-hidden="true"></i>
+                    <i class="fa fa-external-link fa-lg fa-fw" aria-hidden="true" *ngIf="openAttachmentsInPopup"></i>
+                    <i class="fa fa-chevron-right row-sub-icon" aria-hidden="true" *ngIf="!openAttachmentsInPopup"></i>
                 </a>
                 <a class="box-content-row box-content-row-flex text-default" href="#" appStopClick appBlurClick
                     (click)="editCollections()" *ngIf="editMode && cipher.organizationId && !cloneMode">

src/popup/vault/add-edit.component.ts

@@ -19,6 +19,8 @@ import { PolicyService } from 'jslib/abstractions/policy.service';
 import { StateService } from 'jslib/abstractions/state.service';
 import { UserService } from 'jslib/abstractions/user.service';
 
+import { PopupUtilsService } from '../services/popup-utils.service';
+
 import { LoginUriView } from 'jslib/models/view/loginUriView';
 
 import { AddEditComponent as BaseAddEditComponent } from 'jslib/angular/components/add-edit.component';
@@ -30,6 +32,7 @@ import { AddEditComponent as BaseAddEditComponent } from 'jslib/angular/componen
 export class AddEditComponent extends BaseAddEditComponent {
     currentUris: string[];
     showAttachments = true;
+    openAttachmentsInPopup: boolean;
 
     constructor(cipherService: CipherService, folderService: FolderService,
         i18nService: I18nService, platformUtilsService: PlatformUtilsService,
@@ -37,7 +40,8 @@ export class AddEditComponent extends BaseAddEditComponent {
         userService: UserService, collectionService: CollectionService,
         messagingService: MessagingService, private route: ActivatedRoute,
         private router: Router, private location: Location,
-        eventService: EventService, policyService: PolicyService) {
+        eventService: EventService, policyService: PolicyService,
+        private popupUtilsService: PopupUtilsService) {
         super(cipherService, folderService, i18nService, platformUtilsService, auditService, stateService,
             userService, collectionService, messagingService, eventService, policyService);
     }
@@ -81,6 +85,8 @@ export class AddEditComponent extends BaseAddEditComponent {
             if (queryParamsSub != null) {
                 queryParamsSub.unsubscribe();
             }
+
+            this.openAttachmentsInPopup = this.popupUtilsService.inPopup(window);
         });
 
         if (!this.editMode) {
@@ -115,7 +121,14 @@ export class AddEditComponent extends BaseAddEditComponent {
 
     attachments() {
         super.attachments();
-        this.router.navigate(['/attachments'], { queryParams: { cipherId: this.cipher.id } });
+
+        if (this.openAttachmentsInPopup) {
+            const destinationUrl = this.router.createUrlTree(['/attachments'], { queryParams: { cipherId: this.cipher.id } }).toString();
+            const currentBaseUrl = window.location.href.replace(this.router.url, '');
+            this.popupUtilsService.popOut(window, currentBaseUrl + destinationUrl);
+        } else {
+            this.router.navigate(['/attachments'], { queryParams: { cipherId: this.cipher.id } });
+        }
     }
 
 

src/popup/vault/attachments.component.html

@@ -1,7 +1,10 @@
 <form #form (ngSubmit)="submit()" [appApiAction]="formPromise">
     <header>
         <div class="left">
-            <button type="button" appBlurClick (click)="back()">
+            <button type="button" appBlurClick (click)="close()" *ngIf="openedAttachmentsInPopup">
+                {{'close' | i18n}}
+            </button>
+            <button type="button" appBlurClick (click)="back()" *ngIf="!openedAttachmentsInPopup">
                 <span class="header-icon"><i class="fa fa-chevron-left" aria-hidden="true"></i></span>
                 <span>{{'back' | i18n}}</span>
             </button>

src/popup/vault/attachments.component.ts

@@ -1,6 +1,6 @@
 import { Location } from '@angular/common';
 import { Component } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
 
 import { CipherService } from 'jslib/abstractions/cipher.service';
 import { CryptoService } from 'jslib/abstractions/crypto.service';
@@ -15,10 +15,12 @@ import { AttachmentsComponent as BaseAttachmentsComponent } from 'jslib/angular/
     templateUrl: 'attachments.component.html',
 })
 export class AttachmentsComponent extends BaseAttachmentsComponent {
+    openedAttachmentsInPopup: boolean;
+
     constructor(cipherService: CipherService, i18nService: I18nService,
         cryptoService: CryptoService, userService: UserService,
         platformUtilsService: PlatformUtilsService, private location: Location,
-        private route: ActivatedRoute) {
+        private route: ActivatedRoute, private router: Router) {
         super(cipherService, i18nService, cryptoService, userService, platformUtilsService, window);
     }
 
@@ -30,9 +32,15 @@ export class AttachmentsComponent extends BaseAttachmentsComponent {
                 queryParamsSub.unsubscribe();
             }
         });
+
+        this.openedAttachmentsInPopup = history.length === 1;
     }
 
     back() {
         this.location.back();
     }
+
+    close() {
+        window.close();
+    }
 }