Cleanup current uris selection list (#1294)

jslib

@@ -1 +1 @@
-Subproject commit 2b6657a293e7be107271ad080c64ccd3f005afb7
+Subproject commit 28d21ca5dfacd1487cd92345d8be9554079fbd96

src/_locales/en/messages.json

@@ -1154,6 +1154,14 @@
   "toggleOptions": {
     "message": "Toggle Options"
   },
+  "toggleCurrentUris": {
+    "message": "Toggle Current URIs",
+    "description": "Toggle the display of the URIs of the currently open tabs in the browser."
+  },
+  "currentUri": {
+    "message": "Current URI",
+    "description": "The URI of one of the current open tabs in the browser."
+  },
   "organization": {
     "message": "Organization",
     "description": "An entity of multiple related people (ex. a team or business organization)."

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

@@ -69,7 +69,8 @@
                     <div class="box-content-row" appBoxRow>
                         <label for="loginTotp">{{'authenticatorKeyTotp' | i18n}}</label>
                         <input id="loginTotp" type="{{cipher.viewPassword ? 'text' : 'password'}}" name="Login.Totp"
-                            class="monospaced" [(ngModel)]="cipher.login.totp" appInputVerbatim [disabled]="!cipher.viewPassword">
+                            class="monospaced" [(ngModel)]="cipher.login.totp" appInputVerbatim
+                            [disabled]="!cipher.viewPassword">
                     </div>
                 </div>
                 <!-- Card -->
@@ -218,12 +219,15 @@
                         <div class="row-main">
                             <label for="loginUri{{i}}">{{'uriPosition' | i18n : (i + 1)}}</label>
                             <input id="loginUri{{i}}" type="text" name="Login.Uris[{{i}}].Uri" [(ngModel)]="u.uri"
-                                [hidden]="u.showUriOptionsInput === true" placeholder="{{'ex' | i18n}} https://google.com"
+                                [hidden]="u.showUriOptionsInput === true"
-                                inputmode="url" appInputVerbatim>
+                                placeholder="{{'ex' | i18n}} https://google.com" inputmode="url" appInputVerbatim>
-                            <select *ngIf="uriOptions != null && uriOptions.length"
+                            <label for="loginUriMatch{{i}}" class="sr-only">
-                                id="loginUriOptions{{i}}" name="Login.Uris[{{i}}].Options" [(ngModel)]="u.uri"
+                                {{'currentUri' | i18n}} {{(i + 1)}}
-                                [hidden]="u.showUriOptionsInput === false || u.showUriOptionsInput == null || uriOptions == null">
+                            </label>
-                                <option *ngFor="let o of uriOptions" [ngValue]="o.url">{{o.url}}</option>
+                            <select *ngIf="currentUris && currentUris.length" id="currentUris{{i}}"
+                                name="Login.Uris[{{i}}].CurrentUris" [(ngModel)]="u.uri" [hidden]="!u.showCurrentUris">
+                                <option [ngValue]="null">-- {{'select' | i18n}} --</option>
+                                <option *ngFor="let u of currentUris" [ngValue]="u">{{u}}</option>
                             </select>
                             <label for="loginUriMatch{{i}}" class="sr-only">
                                 {{'matchDetection' | i18n}} {{(i + 1)}}
@@ -235,10 +239,9 @@
                             </select>
                         </div>
                         <div class="action-buttons">
-                            <a *ngIf="uriOptions != null && uriOptions.length" class="row-btn" href="#" appStopClick appBlurClick
+                            <a *ngIf="currentUris && currentUris.length" class="row-btn" href="#" appStopClick
-                                appA11yTitle="{{'Toggle Input Mode'}}" (click)="toggleUriInput(u)">
+                                appBlurClick appA11yTitle="{{'toggleCurrentUris' | i18n}}" (click)="toggleUriInput(u)">
-                                <i aria-hidden="true" class="fa fa-lg"
+                                <i aria-hidden="true" class="fa fa-lg fa-list"></i>
-                                [ngClass]="u.showUriOptionsInput ? 'fa-edit' : 'fa-list'"></i>
                             </a>
                             <a class="row-btn" href="#" appStopClick appBlurClick
                                 appA11yTitle="{{'toggleOptions' | i18n}}" (click)="toggleUriOptions(u)">
@@ -393,4 +396,4 @@
             </div>
         </div>
     </content>
-</form>
+</form>

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

@@ -27,7 +27,7 @@ import { AddEditComponent as BaseAddEditComponent } from 'jslib/angular/componen
     templateUrl: 'add-edit.component.html',
 })
 export class AddEditComponent extends BaseAddEditComponent {
-    uriOptions: any[];
+    currentUris: string[];
     showAttachments = true;
 
     constructor(cipherService: CipherService, folderService: FolderService,
@@ -84,7 +84,8 @@ export class AddEditComponent extends BaseAddEditComponent {
 
         if (!this.editMode) {
             const tabs = await BrowserApi.tabsQuery({ windowType: 'normal' });
-            this.uriOptions = tabs.filter((tab) => tab.url);
+            this.currentUris = tabs == null ? null :
+                tabs.filter((tab) => tab.url != null && tab.url !== '').map((tab) => tab.url);
         }
 
         window.setTimeout(() => {
@@ -158,6 +159,6 @@ export class AddEditComponent extends BaseAddEditComponent {
 
     toggleUriInput(uri: LoginUriView) {
         const u = (uri as any);
-        u.showUriOptionsInput = !u.showUriOptionsInput;
+        u.showCurrentUris = !u.showCurrentUris;
     }
 }