From 24d172e3b91ea59f4137b8972bb76f5514584e5b Mon Sep 17 00:00:00 2001
From: Vincent Salucci <26154748+vincentsalucci@users.noreply.github.com>
Date: Wed, 17 Mar 2021 09:05:48 -0500
Subject: [PATCH] [Send] Added pop out banner for linux os (#1713)

---
 src/_locales/en/messages.json               |  3 ++
 src/popup/send/send-add-edit.component.html | 58 ++++++++++++---------
 src/popup/send/send-add-edit.component.ts   | 14 +++--
 3 files changed, 48 insertions(+), 27 deletions(-)

diff --git a/src/_locales/en/messages.json b/src/_locales/en/messages.json
index e5a0593644..aca1797240 100644
--- a/src/_locales/en/messages.json
+++ b/src/_locales/en/messages.json
@@ -1649,6 +1649,9 @@
     "message": "Edited Send",
     "description": "'Send' is a noun and the name of a feature called 'Bitwarden Send'. It should not be translated."
   },
+  "sendLinuxChromiumFileWarning": {
+    "message": "In order to choose a file, open the extension in the sidebar (if possible) or pop out to a new window by clicking this banner."
+  },
   "sendFirefoxFileWarning": {
     "message": "In order to choose a file using Firefox, open the extension in the sidebar or pop out to a new window by clicking this banner."
   },
diff --git a/src/popup/send/send-add-edit.component.html b/src/popup/send/send-add-edit.component.html
index ac6a3f359b..3d0a86285d 100644
--- a/src/popup/send/send-add-edit.component.html
+++ b/src/popup/send/send-add-edit.component.html
@@ -22,6 +22,7 @@
         <app-callout type="warning" icon="fa fa-external-link fa-rotate-270 fa-fw" [clickable]="true"
             title="{{'sendFileCalloutHeader' | i18n}}"
             *ngIf="showFilePopoutMessage && send.type === sendType.File && !disableSend" (click)="popOutWindow()">
+            <div *ngIf="showLinuxChromiumFileWarning">{{'sendLinuxChromiumFileWarning' | i18n}}</div>
             <div *ngIf="showFirefoxFileWarning">{{'sendFirefoxFileWarning' | i18n}}</div>
             <div *ngIf="showSafariFileWarning">{{'sendSafariFileWarning' | i18n}}</div>
         </app-callout>
@@ -122,15 +123,16 @@
                                 [(ngModel)]="deletionDate" required placeholder="MM/DD/YYYY HH:MM AM/PM">
                         </ng-container>
                         <div class="flex flex-grow" *ngIf="!isDateTimeLocalSupported">
-                            <input id="deletionDateCustomFallback" type="date"
-                                name="DeletionDateFallback" [(ngModel)]="deletionDateFallback" required
-                                placeholder="MM/DD/YYYY" [readOnly]="disableSend"
-                                data-date-format="mm/dd/yyyy" >
-                            <input *ngIf="!isSafari" id="deletionTimeCustomFallback" type="time"
-                                name="DeletionTimeDate" [(ngModel)]="deletionTimeFallback" required
-                                placeholder="HH:MM AM/PM" [readOnly]="disableSend">
-                            <select *ngIf="isSafari" id="deletionTimeCustomFallback" [(ngModel)]="safariDeletionTime" name="SafariDeletionTime">
-                                <option *ngFor="let o of safariDeletionTimeOptions" [value]="o.military">{{o.standard}}</option>
+                            <input id="deletionDateCustomFallback" type="date" name="DeletionDateFallback"
+                                [(ngModel)]="deletionDateFallback" required placeholder="MM/DD/YYYY"
+                                [readOnly]="disableSend" data-date-format="mm/dd/yyyy">
+                            <input *ngIf="!isSafari" id="deletionTimeCustomFallback" type="time" name="DeletionTimeDate"
+                                [(ngModel)]="deletionTimeFallback" required placeholder="HH:MM AM/PM"
+                                [readOnly]="disableSend">
+                            <select *ngIf="isSafari" id="deletionTimeCustomFallback" [(ngModel)]="safariDeletionTime"
+                                name="SafariDeletionTime">
+                                <option *ngFor="let o of safariDeletionTimeOptions" [value]="o.military">{{o.standard}}
+                                </option>
                             </select>
                         </div>
                     </ng-template>
@@ -155,8 +157,11 @@
                 </div>
                 <div class="box-footer">
                     {{'deletionDateDesc' | i18n}}
-                    <ng-container *ngIf="(!inPopout && isFirefox) && (this.editMode || (deletionDateSelect === 0 && !editMode))">
-                        <br>{{'sendFirefoxCustomDatePopoutMessage1' | i18n}} <a (click)="popOutWindow()">{{'sendFirefoxCustomDatePopoutMessage2' | i18n}}</a> {{'sendFirefoxCustomDatePopoutMessage3' | i18n}}
+                    <ng-container
+                        *ngIf="(!inPopout && isFirefox) && (this.editMode || (deletionDateSelect === 0 && !editMode))">
+                        <br>{{'sendFirefoxCustomDatePopoutMessage1' | i18n}} <a
+                            (click)="popOutWindow()">{{'sendFirefoxCustomDatePopoutMessage2' | i18n}}</a>
+                        {{'sendFirefoxCustomDatePopoutMessage3' | i18n}}
                     </ng-container>
                 </div>
             </div>
@@ -165,20 +170,22 @@
                 <div class="box-content">
                     <ng-template #expirationDateCustom>
                         <ng-container *ngIf="isDateTimeLocalSupported">
-                            <input id="expirationDateCustom" type="datetime-local"
-                                name="ExpirationDate" [(ngModel)]="expirationDate" required
-                                placeholder="MM/DD/YYYY HH:MM AM/PM" [readOnly]="disableSend">
+                            <input id="expirationDateCustom" type="datetime-local" name="ExpirationDate"
+                                [(ngModel)]="expirationDate" required placeholder="MM/DD/YYYY HH:MM AM/PM"
+                                [readOnly]="disableSend">
                         </ng-container>
                         <div class="flex flex-grow" *ngIf="!isDateTimeLocalSupported">
-                            <input id="expirationDateCustomFallback" type="date"
-                                name="ExpirationDateFallback" [(ngModel)]="expirationDateFallback" [required]="!editMode"
-                                placeholder="MM/DD/YYYY" [readOnly]="disableSend" (change)="expirationDateFallbackChanged()"
-                                data-date-format="mm/dd/yyyy" >
+                            <input id="expirationDateCustomFallback" type="date" name="ExpirationDateFallback"
+                                [(ngModel)]="expirationDateFallback" [required]="!editMode" placeholder="MM/DD/YYYY"
+                                [readOnly]="disableSend" (change)="expirationDateFallbackChanged()"
+                                data-date-format="mm/dd/yyyy">
                             <input *ngIf="!isSafari" id="expirationTimeCustomFallback" type="time"
-                                name="ExpirationTimeFallback" [(ngModel)]="expirationTimeFallback" [required]="!editMode"
-                                placeholder="HH:MM AM/PM" [readOnly]="disableSend">
-                            <select *ngIf="isSafari" id="expirationTimeCustomFallback" [(ngModel)]="safariExpirationTime" name="SafariExpirationTime">
-                                <option *ngFor="let o of safariExpirationTimeOptions" [value]="o.military">{{o.standard}}</option>
+                                name="ExpirationTimeFallback" [(ngModel)]="expirationTimeFallback"
+                                [required]="!editMode" placeholder="HH:MM AM/PM" [readOnly]="disableSend">
+                            <select *ngIf="isSafari" id="expirationTimeCustomFallback"
+                                [(ngModel)]="safariExpirationTime" name="SafariExpirationTime">
+                                <option *ngFor="let o of safariExpirationTimeOptions" [value]="o.military">
+                                    {{o.standard}}</option>
                             </select>
                         </div>
                     </ng-template>
@@ -205,8 +212,11 @@
                 </div>
                 <div class="box-footer">
                     {{'expirationDateDesc' | i18n}}
-                    <ng-container *ngIf="(!inPopout && isFirefox) && (this.editMode || (deletionDateSelect === 0 && !editMode))">
-                        <br>{{'sendFirefoxCustomDatePopoutMessage1' | i18n}} <a (click)="popOutWindow()">{{'sendFirefoxCustomDatePopoutMessage2' | i18n}}</a> {{'sendFirefoxCustomDatePopoutMessage3' | i18n}}
+                    <ng-container
+                        *ngIf="(!inPopout && isFirefox) && (this.editMode || (deletionDateSelect === 0 && !editMode))">
+                        <br>{{'sendFirefoxCustomDatePopoutMessage1' | i18n}} <a
+                            (click)="popOutWindow()">{{'sendFirefoxCustomDatePopoutMessage2' | i18n}}</a>
+                        {{'sendFirefoxCustomDatePopoutMessage3' | i18n}}
                     </ng-container>
                 </div>
             </div>
diff --git a/src/popup/send/send-add-edit.component.ts b/src/popup/send/send-add-edit.component.ts
index e9f2e7d192..bfa0c51f93 100644
--- a/src/popup/send/send-add-edit.component.ts
+++ b/src/popup/send/send-add-edit.component.ts
@@ -33,6 +33,7 @@ export class SendAddEditComponent extends BaseAddEditComponent {
     isFirefox = false;
     inPopout = false;
     inSidebar = false;
+    isLinux = false;
 
     constructor(i18nService: I18nService, platformUtilsService: PlatformUtilsService,
         userService: UserService, messagingService: MessagingService, policyService: PolicyService,
@@ -44,13 +45,14 @@ export class SendAddEditComponent extends BaseAddEditComponent {
     }
 
     get showFileSelector(): boolean {
-        return !this.editMode && (!this.isFirefox && !this.isSafari) ||
+        return !this.editMode && (!this.isFirefox && !this.isSafari && !this.isLinux) ||
             (this.isFirefox && (this.inSidebar || this.inPopout)) ||
-            (this.isSafari && this.inPopout);
+            (this.isSafari && this.inPopout) ||
+            (this.isLinux && !this.isFirefox && (this.inSidebar || this.inPopout));
     }
 
     get showFilePopoutMessage(): boolean {
-        return !this.editMode && (this.showFirefoxFileWarning || this.showSafariFileWarning);
+        return !this.editMode && (this.showFirefoxFileWarning || this.showSafariFileWarning || this.showLinuxChromiumFileWarning);
     }
 
     get showFirefoxFileWarning(): boolean {
@@ -61,6 +63,11 @@ export class SendAddEditComponent extends BaseAddEditComponent {
         return this.isSafari && !this.inPopout;
     }
 
+    // Only show this for Chromium based browsers in Linux
+    get showLinuxChromiumFileWarning(): boolean {
+        return this.isLinux && !this.isFirefox && !(this.inSidebar || this.inPopout);
+    }
+
     popOutWindow() {
         this.popupUtilsService.popOut(window);
     }
@@ -70,6 +77,7 @@ export class SendAddEditComponent extends BaseAddEditComponent {
         this.isFirefox = this.platformUtilsService.isFirefox();
         this.inPopout = this.popupUtilsService.inPopout(window);
         this.inSidebar = this.popupUtilsService.inSidebar(window);
+        this.isLinux = window?.navigator?.userAgent.indexOf('Linux') !== -1;
 
         const queryParamsSub = this.route.queryParams.subscribe(async params => {
             if (params.sendId) {