Bug 1675721 - Implement tooltip and keyboard shortcut for message security info. r=mkmelin

mail/base/content/msgHdrView.inc.xhtml

@@ -433,14 +433,14 @@
                                 <vbox id="otherActionsBox" align="end">
                                   <hbox id="dateValueBox" align="start">
                                     <label id="dateLabel" class="dateLabel" flex="1" role="textbox"
-                                           aria-readonly="true"/>
+                                           aria-readonly="true" tabindex="-1"/>
                                   </hbox>
                                   <hbox id="cryptoBox" class="crypto-container" align="center"
                                         collapsed="true">
                                     <html:button id="encryptionTechBtn"
-                                                 class="toolbarbutton-1 crypto-button themeable-brighttext"
+                                                 class="toolbarbutton-1 crypto-button themeable-brighttext button-focusable"
                                                  onclick="showMessageReadSecurityInfo();"
-                                                 onkeypress="if (event.key == 'Enter') { showMessageReadSecurityInfo(); }">
+                                                 data-l10n-id="message-security-button">
                                       <html:span class="crypto-label"></html:span>
                                       <image id="encryptedHdrIcon" hidden="true"/>
                                       <image id="signedHdrIcon" hidden="true"/>

mail/base/content/msgHdrView.js

@@ -12,7 +12,7 @@
 /* import-globals-from mailCore.js */
 /* import-globals-from mailWindow.js */
 /* import-globals-from messageDisplay.js */
-/* global Enigmail */
+/* global Enigmail, showMessageReadSecurityInfo */
 
 var { XPCOMUtils } = ChromeUtils.import(
   "resource://gre/modules/XPCOMUtils.jsm"
@@ -260,7 +260,7 @@ function initializeHeaderViewTables() {
   }
 }
 
-function OnLoadMsgHeaderPane() {
+async function OnLoadMsgHeaderPane() {
   // Load any preferences that at are global with regards to
   // displaying a message...
   gMinNumberOfHeaders = Services.prefs.getIntPref(
@@ -296,6 +296,30 @@ function OnLoadMsgHeaderPane() {
     }
   }
 
+  // Add the keyboard shortcut event listener for the message header.
+  // Ctrl+Alt+S / Cmd+Alt+S.
+  let shortcut = await document.l10n.formatValue(
+    "message-header-show-security-info-key"
+  );
+  document.addEventListener("keypress", event => {
+    if (
+      (event.ctrlKey || event.metaKey) &&
+      event.altKey &&
+      event.key == shortcut.toLowerCase()
+    ) {
+      showMessageReadSecurityInfo();
+    }
+  });
+
+  // Add keypress and click event for the encryption button.
+  let cryptoButton = document.getElementById("encryptionTechBtn");
+  cryptoButton.addEventListener("keypress", event => {
+    if (event.key == "Enter") {
+      showMessageReadSecurityInfo();
+    }
+  });
+  cryptoButton.addEventListener("click", showMessageReadSecurityInfo);
+
   // Dispatch an event letting any listeners know that we have loaded
   // the message pane.
   var headerViewElement = document.getElementById("msgHeaderView");

mail/base/content/msgSecurityPane.inc.xhtml

@@ -4,7 +4,7 @@
   <panel id="messageSecurityPanel" type="arrow" orient="vertical"
          onpopuphidden="hideMessageReadSecurityInfo();"
          position="bottomcenter topright"
-         tabindex="0">
+         tabindex="-1">
     <html:header class="message-security-header">
       <html:h3>&status.label; <html:span id="techLabel"></html:span></html:h3>
     </html:header>
@@ -22,6 +22,7 @@
               <html:span id="hasConflictingKeyOpenPGP" hidden="hidden"></html:span>
             </description>
             <button id="openpgpImportButton"
+                    class="button-focusable"
                     data-l10n-id="openpgp-import-sender-key"
                     oncommand="Enigmail.msg.importAttachedSenderKey();"/>
           </hbox>
@@ -34,6 +35,7 @@
             <image class="notification-image notification-image-info"/>
             <description data-l10n-id="openpgp-missing-signature-key"/>
             <button data-l10n-id="openpgp-search-signature-key"
+                    class="button-focusable"
                     oncommand="Enigmail.msg.searchSignatureKey();"/>
           </hbox>
         </hbox>
@@ -61,6 +63,7 @@
         </hbox>
         <hbox pack="end">
           <button id="signatureCertView" label="&signatureCert.label;"
+                  class="button-focusable"
                   oncommand="viewSignatureCert()" />
         </hbox>
       </vbox>
@@ -70,6 +73,7 @@
         <hbox flex="1" align="center">
           <label id="signatureKeyId" flex="1"/>
           <button id="viewSignatureKey" data-l10n-id="openpgp-view-signer-key"
+                  class="button-focusable"
                   oncommand="viewSignatureKey()" collapsed="true"/>
         </hbox>
       </vbox>
@@ -97,6 +101,7 @@
         </hbox>
         <hbox pack="end">
           <button id="encryptionCertView" label="&encryptionCert.label;"
+                  class="button-focusable"
                   oncommand="viewEncryptionCert()" />
         </hbox>
       </vbox>
@@ -107,6 +112,7 @@
         <hbox pack="end">
           <button id="viewEncryptionKey"
                   data-l10n-id="openpgp-view-your-encryption-key"
+                  class="button-focusable"
                   oncommand="viewEncryptionKey()"
                   collapsed="true"/>
         </hbox>

mail/locales/en-US/messenger/openpgp/msgReadStatus.ftl

@@ -2,6 +2,17 @@
 # License, v. 2.0. If a copy of the MPL was not distributed with this
 # file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
+## Message Header Encryption Button
+
+message-header-show-security-info-key = S
+
+#   $type (String) - the shortcut key defined in the message-header-show-security-info-key
+message-security-button =
+    .title = { PLATFORM() ->
+        [macos] Show Message Security (⌘ ⌥ { message-header-show-security-info-key })
+        *[other] Show Message Security (Ctrl+Alt+{ message-header-show-security-info-key })
+    }
+
 openpgp-view-signer-key =
     .label = View signer key
 openpgp-view-your-encryption-key =

mail/themes/linux/mail/messageHeader.css

@@ -27,7 +27,7 @@
   line-height: 1.5em;
   margin: 0;
   padding-block: .1em;
-  padding-inline: 0 9px;
+  margin-inline: 0 9px;
 }
 
 .headerName,

mail/themes/osx/mail/messageHeader.css

@@ -22,7 +22,7 @@
 /* ::::: msg header captions ::::: */
 
 .dateLabel {
-  padding-inline-end: 3px;
+  margin-inline-end: 3px;
 }
 
 .headerName {
@@ -44,3 +44,12 @@
   /* Necessary to not cut the background icon */
   min-height: 16px;
 }
+
+.button-focusable:focus-visible:not(:hover) {
+  outline-offset: -2px;
+}
+
+button.button-focusable:focus-visible:not(:hover) {
+  outline: none;
+  box-shadow: 0 0 0 3px -moz-mac-focusring;
+}

mail/themes/shared/mail/messageHeader.css

@@ -764,3 +764,15 @@ html|header.message-security-header html|h3 {
 .openpgp-key-name {
   font-size: 0.9em;
 }
+
+.button-focusable {
+  -moz-user-focus: normal;
+}
+
+.button-focusable:focus-visible:not(:hover) {
+  outline: 1px dashed Highlight;
+}
+
+.button-focusable:focus:not(:focus-visible) {
+  outline: none;
+}

mail/themes/windows/mail/messageHeader.css

@@ -24,7 +24,7 @@
   line-height: 1.5em;
   margin: 0;
   padding-block: .1em;
-  padding-inline: 0 6px;
+  margin-inline: 0 6px;
 }
 
 .headerName {

mailnews/extensions/smime/msgReadSMIMEOverlay.js

@@ -3,7 +3,7 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-/* globals gDBView, GetNumSelectedMessages */
+/* globals gDBView, GetNumSelectedMessages, gFolderDisplay */
 /* globals MailConstants, Enigmail */
 /* global currentHeaderData: false */
 
@@ -60,7 +60,18 @@ function showImapSignatureUnknown() {
   }
 }
 
+/**
+ * Reveal message security popup panel with udpated OpenPGP or S/MIME info.
+ */
 function showMessageReadSecurityInfo() {
+  // Interrupt if no message is selected or no encryption technology was used.
+  if (
+    !gFolderDisplay.selectedMessage ||
+    document.getElementById("cryptoBox").collapsed
+  ) {
+    return;
+  }
+
   // OpenPGP.
   if (
     MailConstants.MOZ_OPENPGP &&