added ui improvements

Author: martgil

extension/css/cryptup.css

@@ -3505,14 +3505,22 @@ body#settings div.webmail_notifications div.webmail_notification a:hover {
 /* thunderbird ui css */
 
 .thunderbird_attachment_root {
-  display: inline-flex;
   margin: 0 7px 7px 0;
+  padding: 6px 4px;
   background: #fff;
+  border: 1px solid #d8d8d8;
+  color: #444;
+  text-overflow: ellipsis;
   align-items: center;
   align-content: center;
-  border: 1px solid gray;
-  padding: 2px;
+  width: 240px;
+  max-width: 270px;
+  display: inline-flex;
   cursor: pointer;
+  position: relative;
+  border-radius: 2px;
+  height: 40px;
+  font-size: 16px;
 }
 
 .thunderbird_attachment_root div {
@@ -3528,13 +3536,28 @@ body#settings div.webmail_notifications div.webmail_notification a:hover {
   width: 40px;
   background: #fff;
   overflow: hidden;
+  opacity: 0.4;
 }
 
 .thunderbird_attachment_root .thunderbird_attachment_download {
-  background: url('/img/svgs/download-link.svg') center / auto no-repeat;
-  padding: 2px;
-  height: 40px;
-  width: 40px;
+  display: none;
+  padding: 6px;
+  height: 30px;
+  width: 30px;
+  right: 0;
+  position: absolute;
+  background: #333;
+  opacity: 0.88;
+  border-radius: 2px;
+  margin: 3px 6px;
+}
+
+.thunderbird_attachment_root:hover .thunderbird_attachment_download {
+  display: inline-block;
+}
+
+.thunderbird_attachment_download img {
+  width: 100%;
 }
 
 /* print class */

extension/js/content_scripts/webmail/thunderbird/thunderbird-element-replacer.ts

@@ -114,19 +114,25 @@ export class ThunderbirdElementReplacer extends WebmailElementReplacer {
   };
 
   private generatePgpAttachmentTemplate = (attachment: messenger.messages.MessageAttachment) => {
+    const uiFileExtensions = ['excel', 'word', 'png', 'jpg', 'generic'];
     const attachmentHtmlRoot = $('<div>').addClass('thunderbird_attachment_root');
     const attachmentFileTypeIcon = $('<img>').addClass('thunderbird_attachment_icon');
     attachmentFileTypeIcon.attr('alt', Xss.escape(attachment.name));
-    attachmentFileTypeIcon.attr('src', '/image/fileformat/generic.png');
-    const attachmentFilename = $('<div>').addClass('thunderbird_attachment_name').text(Xss.escape(attachment.name));
+    uiFileExtensions.some(fileExtension => {
+      if (attachment.name.replace(/\.(pgp|gpg|asc)$/i, '').endsWith(fileExtension)) {
+        attachmentFileTypeIcon.attr('src', messenger.runtime.getURL(`/img/fileformat/${fileExtension}.png`));
+      }
+    });
+    const attachmentFilename = $('<div>').addClass('thunderbird_attachment_name').text(attachment.name);
     const attachmentDownloadBtn = $('<div>')
       .addClass('thunderbird_attachment_download')
       .on('click', async () => {
         await this.downloadThunderbirdAttachmentHandler(attachment);
-      });
+      })
+      .prepend($('<img>').attr('src', messenger.runtime.getURL('/img/svgs/download-link.svg'))); // xss-safe-value
     attachmentHtmlRoot.append(attachmentFileTypeIcon); // xss-escaped
-    attachmentHtmlRoot.append(attachmentFilename); // xss-escaped
-    attachmentHtmlRoot.append(attachmentDownloadBtn); // xss-escaped
+    attachmentHtmlRoot.append(attachmentFilename); // xss-safe-value
+    attachmentHtmlRoot.append(attachmentDownloadBtn); // xss-safe-value
     return attachmentHtmlRoot;
   };