Pop out attachments page on Firefox and Safari

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 {
+    popOut(win: Window, href: string = null): void {
-        let href = win.location.href;
+
+        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,9 @@
                 <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-chevron-right row-sub-icon" aria-hidden="true"
+                        *ngIf="!openAttachmentsInPopup()"></i>
+                    <i class="fa fa-external-link fa-lg fa-fw" 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

@@ -7,6 +7,7 @@ import {
 
 import { BrowserApi } from '../../browser/browserApi';
 
+import { PopupUtilsService } from '../services/popup-utils.service';
 import { AuditService } from 'jslib/abstractions/audit.service';
 import { CipherService } from 'jslib/abstractions/cipher.service';
 import { CollectionService } from 'jslib/abstractions/collection.service';
@@ -37,7 +38,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);
     }
@@ -115,8 +117,15 @@ export class AddEditComponent extends BaseAddEditComponent {
 
     attachments() {
         super.attachments();
+
+        if (this.openAttachmentsInPopup()) {
+            let destinationUrl = this.router.createUrlTree(['/attachments'], { queryParams: { cipherId: this.cipher.id } }).toString();
+            let currentBaseUrl = window.location.href.replace(this.router.url, '');
+            this.popupUtilsService.popOut(window, currentBaseUrl + destinationUrl);
+        } else {
             this.router.navigate(['/attachments'], { queryParams: { cipherId: this.cipher.id } });
         }
+    }
 
 
     editCollections() {
@@ -161,4 +170,8 @@ export class AddEditComponent extends BaseAddEditComponent {
         return (!this.editMode || this.cloneMode) && this.ownershipOptions
             && (this.ownershipOptions.length > 1 || !this.allowPersonal);
     }
+
+    openAttachmentsInPopup(): boolean {
+        return this.popupUtilsService.inPopup(window) && !this.platformUtilsService.isChrome();
+    }
 }

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';
@@ -18,7 +18,7 @@ export class AttachmentsComponent extends BaseAttachmentsComponent {
     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);
     }
 
@@ -33,6 +33,10 @@ export class AttachmentsComponent extends BaseAttachmentsComponent {
     }
 
     back() {
+        if (document.referrer === "") {
+            this.router.navigate(['/edit-cipher'], { queryParams: { cipherId: this.cipher.id } });
+        } else {
             this.location.back();
         }
+    }
 }