Update email rendering in More info tab

src/drivers/webextension/css/styles.css

@@ -42,6 +42,10 @@ p {
   margin: 0 0 .5rem 0;
 }
 
+.light-text {
+  color: var(--color-text-lighten);
+}
+
 .popup {
   background: white;
   max-height: 34rem;
@@ -331,19 +335,6 @@ small {
   padding-bottom: 0;
 }
 
-.chip, .chip:focus, .chip:hover {
-  border: 1px solid var(--color-secondary-darken);
-  border-radius: 4px;
-  margin: 0 .5rem .5rem 0;
-  display: inline-block;
-  padding: .2rem .5rem;
-  text-decoration: none;
-}
-
-.chip:focus, .chip:hover {
-  background: var(--color-primary-lighten)
-}
-
 .plus-configure {
   margin: 1.5rem;
 }
@@ -842,12 +833,12 @@ body.dynamic-icon .category__heading:hover .category__pin {
   color: var(--color-primary-text);
 }
 
-.input[type="text"], .input[type="password"] {
-  border-color: var(--color-primary-darken);
+.dark .light-text {
+  color: var(--color-primary-text);
 }
 
-.dark .chip:focus, .dark .chip:hover {
-  background: var(--color-primary);
+.input[type="text"], .input[type="password"] {
+  border-color: var(--color-primary-darken);
 }
 
 .dark .message {

src/drivers/webextension/js/popup.js

@@ -193,6 +193,14 @@ function csvEscape(value = '') {
   return String(value).replace(/"/g, '""')
 }
 
+function parseEmail(fullEmail) {
+  const email = fullEmail.replace(/^[^<]*<([^>]+)>/, '$1')
+
+  const [name, title] = fullEmail.replace(/ <([^>]+)>$/, '').split(' -- ')
+
+  return { email, name, title }
+}
+
 const Popup = {
   /**
    * Initialise popup
@@ -758,13 +766,32 @@ const Popup = {
                 a.href = value.to
                 a.textContent = value.text
 
-                if (
-                  ['social', 'keywords'].includes(set) ||
-                  ['phone', 'email'].includes(key)
-                ) {
-                  a.classList.add('chip')
+                if (['email', 'verifiedEmail', 'safeEmail'].includes(key)) {
+                  const { email, name, title } = parseEmail(value.text)
+
+                  a.textContent = email
+
+                  const elName = document.createElement('span')
+                  const elTitle = document.createElement('span')
+                  const elBreak1 = document.createElement('br')
+                  const elBreak2 = document.createElement('br')
+
+                  elName.textContent = name
+                  elTitle.textContent = `${title}`
+
+                  elTitle.className = 'light-text'
 
                   td.appendChild(a)
+
+                  if (name) {
+                    td.appendChild(elBreak1)
+                    td.appendChild(elName)
+
+                    if (title) {
+                      td.appendChild(elBreak2)
+                      td.appendChild(elTitle)
+                    }
+                  }
                 } else {
                   div.appendChild(a)
                   td.appendChild(div)
@@ -774,14 +801,18 @@ const Popup = {
 
                 const [name, title] = value.split(' -- ')
 
-                const strong = document.createElement('strong')
-                const span = document.createElement('span')
+                const elName = document.createElement('span')
+                const elTitle = document.createElement('span')
+                const elBreak = document.createElement('br')
+
+                elTitle.className = 'light-text'
 
-                strong.textContent = name
-                span.textContent = title
+                elName.textContent = name
+                elTitle.textContent = title
 
-                div.appendChild(strong)
-                div.appendChild(span)
+                div.appendChild(elName)
+                div.appendChild(elBreak)
+                div.appendChild(elTitle)
                 td.appendChild(div)
               } else {
                 attributeValues[key].push(value)