Merge branch 'master' of https://github.com/bitwarden/browser into add-login-with-locked-vault

src/content/autofill.css

@@ -26,6 +26,10 @@
     }
 }
 
+span[data-bwautofill].com-bitwarden-browser-animated-fill {
+    display: inline-block;
+}
+
 .com-bitwarden-browser-animated-fill {
     animation: bitwardenfill 200ms ease-in-out 0ms 1;
     -webkit-animation: bitwardenfill 200ms ease-in-out 0ms 1;

src/content/autofill.js

@@ -38,6 +38,7 @@
     5. Remove fakeTested prop.
     6. Rename com.agilebits.* stuff to com.bitwarden.*
     7. Remove "some useful globals" on window
+    8. Add ability to autofill span[data-bwautofill] elements
     */
 
     function collect(document, undefined) {
@@ -103,6 +104,11 @@
                         return el;
 
                     default:
+                        // START MODIFICATION
+                        if (!el.type && el.tagName.toLowerCase() === 'span') {
+                            return el.innerText;
+                        }
+                        // END MODIFICATION
                         return el.value;
                 }
             }
@@ -268,8 +274,16 @@
                 addProp(field, 'htmlClass', getElementAttrValue(el, 'class'));
                 addProp(field, 'tabindex', getElementAttrValue(el, 'tabindex'));
                 addProp(field, 'title', getElementAttrValue(el, 'title'));
+
                 // START MODIFICATION
                 addProp(field, 'userEdited', !!el.dataset['com.browser.browser.userEdited']);
+
+                var elTagName = el.tagName.toLowerCase();
+                addProp(field, 'tagName', elTagName);
+
+                if (elTagName === 'span') {
+                    return field;
+                }
                 // END MODIFICATION
 
                 if ('hidden' != toLowerString(el.type)) {
@@ -555,7 +569,8 @@
             var els = [];
             try {
                 var elsList = theDoc.querySelectorAll('input:not([type="hidden"]):not([type="submit"]):not([type="reset"])' +
-                    ':not([type="button"]):not([type="image"]):not([type="file"]):not([data-bwignore]), select');
+                    ':not([type="button"]):not([type="image"]):not([type="file"]):not([data-bwignore]), select, ' +
+                    'span[data-bwautofill]');
                 els = Array.prototype.slice.call(elsList);
             } catch (e) { }
 
@@ -809,6 +824,12 @@
                         break;
                     default:
                         el.value == op || doAllFillOperations(el, function (theEl) {
+                            // START MODIFICATION
+                            if (!theEl.type && theEl.tagName.toLowerCase() === 'span') {
+                                theEl.innerText = op;
+                                return;
+                            }
+                            // END MODIFICATION
                             theEl.value = op;
                         });
                 }
@@ -932,6 +953,11 @@
                     currentEl = currentEl === document;
                 }
             }
+            // START MODIFICATION
+            if (el && !el.type && el.tagName.toLowerCase() === 'span') {
+                return true;
+            }
+            // END MODIFICATION
             return currentEl ? -1 !== 'email text password number tel url'.split(' ').indexOf(el.type || '') : false;
         }
 
@@ -942,7 +968,10 @@
                 return null;
             }
             try {
-                var elements = Array.prototype.slice.call(selectAllFromDoc('input, select, button'));
+                // START MODIFICATION
+                var elements = Array.prototype.slice.call(selectAllFromDoc('input, select, button, ' +
+                    'span[data-bwautofill]'));
+                // END MODIFICATION
                 var filteredElements = elements.filter(function (o) {
                     return o.opid == theOpId;
                 });

src/content/contextMenuHandler.ts

@@ -1,25 +1,46 @@
 const inputTags = ['input', 'textarea', 'select'];
+const labelTags = ['label', 'span'];
 const attributes = ['id', 'name', 'label-aria', 'placeholder'];
+const invalidElement = chrome.i18n.getMessage('copyCustomFieldNameInvalidElement');
+const noUniqueIdentifier = chrome.i18n.getMessage('copyCustomFieldNameNotUnique');
+
 let clickedEl: HTMLElement = null;
 
 // Find the best attribute to be used as the Name for an element in a custom field.
 function getClickedElementIdentifier() {
     if (clickedEl == null) {
-        return 'Unable to identify clicked element.';
+        return invalidElement;
     }
 
-    if (!inputTags.includes(clickedEl.nodeName.toLowerCase())) {
-        return 'Invalid element type.';
+    const clickedTag = clickedEl.nodeName.toLowerCase();
+    let inputEl = null;
+
+    // Try to identify the input element (which may not be the clicked element)
+    if (labelTags.includes(clickedTag)) {
+        let inputId = null;
+        if (clickedTag === 'label') {
+            inputId = clickedEl.getAttribute('for');
+        } else {
+            inputId = clickedEl.closest('label')?.getAttribute('for');
+        }
+
+        inputEl = document.getElementById(inputId);
+    } else {
+        inputEl = clickedEl;
+    }
+
+    if (inputEl == null || !inputTags.includes(inputEl.nodeName.toLowerCase())) {
+        return invalidElement;
     }
 
     for (const attr of attributes) {
-        const attributeValue = clickedEl.getAttribute(attr);
+        const attributeValue = inputEl.getAttribute(attr);
         const selector = '[' + attr + '="' + attributeValue + '"]';
         if (!isNullOrEmpty(attributeValue) && document.querySelectorAll(selector)?.length === 1) {
             return attributeValue;
         }
     }
-    return 'No unique identifier found.';
+    return noUniqueIdentifier;
 }
 
 function isNullOrEmpty(s: string) {