Bug 1764652 - Fix hover sate of address book indicator and other CSS improvements in message header. r=henry,Paenglab
authorAlessandro Castellani <alessandro@thunderbird.net>
Sat, 21 May 2022 13:22:38 +0300
changeset 35791 be1c2780ec012a2e3c3721c92b7283584667172f
parent 35790 dc0336a84ef2321bd4ae7ecf46635e0f8f273631
child 35792 cad163f4a89209d111576a44fa08b8b87ea9b487
push id19941
push usermkmelin@iki.fi
push dateSat, 21 May 2022 10:26:59 +0000
treeherdercomm-central@be1c2780ec01 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewershenry, Paenglab
bugs1764652
Bug 1764652 - Fix hover sate of address book indicator and other CSS improvements in message header. r=henry,Paenglab - Improves the hover state of the address book indicator - Use a consistent outline on :focus-visible - Remove outline when :hover and :focus-visible for all elemenets Differential Revision: https://phabricator.services.mozilla.com/D146748
mail/base/content/widgets/header-fields.js
mail/themes/shared/jar.inc.mn
mail/themes/shared/mail/abContactsPanel.css
mail/themes/shared/mail/chat.css
mail/themes/shared/mail/icons/new/address-book-indicator.svg
mail/themes/shared/mail/icons/new/not-in-address-book.svg
mail/themes/shared/mail/messageHeader.css
mail/themes/shared/mail/panelUI.css
mail/themes/shared/mail/variables.css
--- a/mail/base/content/widgets/header-fields.js
+++ b/mail/base/content/widgets/header-fields.js
@@ -359,17 +359,17 @@
           gMessageHeader.editContact(this);
           return;
         }
 
         this.addToAddressBook();
       });
 
       let img = document.createElement("img");
-      img.src = "chrome://messenger/skin/icons/new/not-in-address-book.svg";
+      img.src = "chrome://messenger/skin/icons/new/address-book-indicator.svg";
       document.l10n.setAttributes(
         img,
         "message-header-address-not-in-address-book-icon2"
       );
 
       this.abIndicator.appendChild(img);
       this.appendChild(this.abIndicator);
 
--- a/mail/themes/shared/jar.inc.mn
+++ b/mail/themes/shared/jar.inc.mn
@@ -529,9 +529,9 @@
   skin/classic/messenger/icons/new/touch/calendar.svg         (../shared/mail/icons/new/touch/calendar.svg)
   skin/classic/messenger/icons/new/touch/chat.svg             (../shared/mail/icons/new/touch/chat.svg)
   skin/classic/messenger/icons/new/touch/collapse.svg         (../shared/mail/icons/new/touch/collapse.svg)
   skin/classic/messenger/icons/new/touch/mail.svg             (../shared/mail/icons/new/touch/mail.svg)
   skin/classic/messenger/icons/new/touch/overflow.svg         (../shared/mail/icons/new/touch/overflow.svg)
   skin/classic/messenger/icons/new/touch/settings.svg         (../shared/mail/icons/new/touch/settings.svg)
   skin/classic/messenger/icons/new/touch/tasks.svg            (../shared/mail/icons/new/touch/tasks.svg)
 
-  skin/classic/messenger/icons/new/not-in-address-book.svg    (../shared/mail/icons/new/not-in-address-book.svg)
+  skin/classic/messenger/icons/new/address-book-indicator.svg (../shared/mail/icons/new/address-book-indicator.svg)
--- a/mail/themes/shared/mail/abContactsPanel.css
+++ b/mail/themes/shared/mail/abContactsPanel.css
@@ -34,17 +34,17 @@
   color: var(--lwt-text-color);
 }
 
 #abContextMenuButton {
   min-width: 11px;
   list-style-image: url("chrome://messenger/skin/addressbook/icons/menu.svg");
   -moz-context-properties: fill;
   fill: currentColor;
-  --focus-outline-offset: -1px;
+  outline: var(--focus-outline);
 }
 
 #abContextMenuButton:not(:hover) {
   background: transparent;
   border-color: transparent;
 }
 
 #abContextMenuButton:hover:focus-visible {
--- a/mail/themes/shared/mail/chat.css
+++ b/mail/themes/shared/mail/chat.css
@@ -80,17 +80,17 @@
   background-color: var(--button-hover-bgcolor);
 }
 
 .im-placeholder-button-box > button:hover:active {
   background-color: var(--button-active-bgcolor);
 }
 
 .im-placeholder-button-box > button:focus-visible {
-  outline: 2px solid var(--focus-outline-color);
+  outline: var(--focus-outline);
   outline-offset: var(--focus-outline-offset);
 }
 
 .im-placeholder-button-box > button > .button-box {
   padding-inline: 10px;
 }
 
 #listPaneBox {
rename from mail/themes/shared/mail/icons/new/not-in-address-book.svg
rename to mail/themes/shared/mail/icons/new/address-book-indicator.svg
--- a/mail/themes/shared/mail/icons/new/not-in-address-book.svg
+++ b/mail/themes/shared/mail/icons/new/address-book-indicator.svg
@@ -1,8 +1,8 @@
 <!-- This Source Code Form is subject to the terms of the Mozilla Public
   - 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/. -->
 <svg width="12" height="12" xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 12 12">
+  <path d="M6 .5A5.5 5.5 0 0 0 .5 6a5.5 5.5 0 0 0 2 4.232V8.5c0-.554.446-1 1-1h1v-.508A2.5 2.5 0 0 1 3.5 5 2.5 2.5 0 0 1 6 2.5 2.5 2.5 0 0 1 8.5 5a2.5 2.5 0 0 1-1 1.992V7.5h1c.554 0 1 .446 1 1v1.732A5.5 5.5 0 0 0 11.5 6 5.5 5.5 0 0 0 6 .5Z" fill="context-fill"/>
   <path d="M6 0C2.692 0 0 2.692 0 6s2.692 6 6 6 6-2.692 6-6-2.692-6-6-6Zm0 1c2.767 0 5 2.233 5 5a4.983 4.983 0 0 1-1 3.004V8.5C10 7.678 9.322 7 8.5 7h-.373c.516-.549.87-1.233.873-1.998A.5.5 0 0 0 9 5v-.006a.5.5 0 0 0 0-.002A3.006 3.006 0 0 0 5.996 2 3.008 3.008 0 0 0 3 5.002a.5.5 0 0 0 0 .002c.004.765.358 1.448.873 1.996H3.5C2.678 7 2 7.678 2 8.5v.504A4.983 4.983 0 0 1 1 6c0-2.767 2.233-5 5-5Zm-.004 2A1.994 1.994 0 0 1 8 4.996v.002a1.999 1.999 0 0 1-.8 1.592.5.5 0 0 0-.2.4v.51a.5.5 0 0 0 .5.5h1c.286 0 .5.214.5.5V10a.5.5 0 0 0 0 .002A4.982 4.982 0 0 1 6 11a4.982 4.982 0 0 1-3-.998A.5.5 0 0 0 3 10V8.5c0-.286.214-.5.5-.5h1a.5.5 0 0 0 .5-.5v-.51a.5.5 0 0 0-.2-.4A1.998 1.998 0 0 1 4 5.002V5c0-1.109.887-1.998 1.996-2Z" fill="context-stroke"/>
-  <path d="M6 1a5 5 0 0 0-4.207 7.703A5 5 0 0 0 2 8.98V8.5C2 7.678 2.678 7 3.5 7h.373c-.515-.548-.87-1.231-.873-1.996v-.002A3.008 3.008 0 0 1 5.996 2 3.006 3.006 0 0 1 9 4.994v.008c-.003.765-.357 1.45-.873 1.998H8.5c.822 0 1.5.678 1.5 1.5v.479c.072-.09.141-.182.207-.276a5 5 0 0 0 .334-.613l.008-.014.004-.008a5 5 0 0 0 .24-.65c0-.003.003-.006.004-.01l.002-.01a5 5 0 0 0 .148-.677l.002-.01V6.7a5.01 5.01 0 0 0-.045-1.676 5 5 0 0 0-4.392-4c-.007 0-.015 0-.022-.002a5.006 5.006 0 0 0-.232-.017h-.012A4.996 4.996 0 0 0 6 1Z" fill="context-fill"/>
 </svg>
 
--- a/mail/themes/shared/mail/messageHeader.css
+++ b/mail/themes/shared/mail/messageHeader.css
@@ -1,14 +1,20 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * 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/. */
 
 @namespace html url("http://www.w3.org/1999/xhtml");
 
+:root {
+  /* This variable is used for both inline and block spacing in order to keep
+   a visual consistency for recipients and simple fields alignment. */
+  --message-header-field-offset: 2px;
+}
+
 .main-header-area {
   border-bottom-style: none;
   display: block;
 }
 
 .message-header-container,
 .message-header-extra-container {
   display: grid;
@@ -174,16 +180,18 @@ mail-tagfield[collapsed="true"] {
   display: block;
 }
 
 /* ::::: expanded header pane ::::: */
 
 #expandedsubjectBox {
   font-weight: bold;
   flex: 1;
+  margin-inline-start: calc(var(--message-header-field-offset) * -1);
+  padding-inline: var(--message-header-field-offset);
 }
 
 /* ::::: attachment view ::::: */
 
 #attachmentBar {
   color: -moz-dialogtext;
   background-color: -moz-Dialog;
   padding: 3px 0;
@@ -220,17 +228,17 @@ mail-tagfield[collapsed="true"] {
   }
 }
 
 #attachmentToggle > .button-box > .button-text {
   display: none;
 }
 
 #attachmentToggle:focus-visible {
-  outline: 2px solid var(--focus-outline-color);
+  outline: var(--focus-outline);
   outline-offset: -2px;
 }
 
 #attachmentName:hover,
 #attachmentName[selected="true"] {
   cursor: pointer;
   color: SelectedItemText;
   background-color: SelectedItem;
@@ -257,18 +265,18 @@ mail-tagfield[collapsed="true"] {
 #attachmentName {
   -moz-user-focus: normal;
   margin: 0;
   margin-inline-end: -3px;
   padding: 2px 3px;
   border-radius: 2px;
 }
 
-#attachmentName:focus-visible:not(:hover) {
-  outline: 2px solid var(--focus-outline-color);
+#attachmentName:focus-visible {
+  outline: var(--focus-outline);
   outline-offset: -1px;
 }
 
 #attachmentList {
   background-color: Field;
   color: FieldText;
 }
 
@@ -306,18 +314,17 @@ mail-tagfield[collapsed="true"] {
   margin-block: 0;
   margin-inline: 6px 8px;
   text-align: end;
   flex-shrink: 0;
   align-self: baseline;
 }
 
 .message-header-label.header-pill-label {
-  /* 2px is to match the padding of the .header-recipient */
-  padding-block-start: 2px;
+  padding-block-start: var(--message-header-field-offset);
 }
 
 mail-newsgroups-headerfield {
   /* The margin by 3px is to 'undo' the padding-inline-start: 2px and
     border-inline-start-width: 1px of .emailDisplayButton. */
   margin-inline-start: -3px;
 }
 
@@ -332,21 +339,26 @@ mail-newsgroups-headerfield {
 
 .headerValue {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
   margin: 0;
 }
 
-.header-row:focus-visible:not(:hover),
-.header-recipient:focus-visible:not(:hover),
-.header-newsgroup:focus-visible:not(:hover) {
-  outline: 2px solid var(--focus-outline-color);
-  outline-offset: -1px;
+.header-row:focus-visible,
+.header-recipient:focus-visible,
+.header-newsgroup:focus-visible {
+  outline: var(--focus-outline);
+}
+
+.header-row[is="simple-header-row"] {
+  /* Match the visual alignment of the rows with clickable elements. */
+  margin-inline-start: calc(var(--message-header-field-offset) * -1);
+  padding-inline: var(--message-header-field-offset);
 }
 
 /* Separator for multifield emailaddress/newsgroup and messageid header rows. */
 .emailDisplayButton:not(:last-child):after,
 .messageIdDisplayButton:not(:last-child):after {
   content: ",";
 }
 
@@ -380,17 +392,17 @@ mail-newsgroups-headerfield {
 .moreIndicator:hover {
   text-decoration: underline;
   color: darkred;
 }
 
 .tagvalue {
   padding: 1px 3px;
   margin-inline-start: 0;
-  border-radius: 3px;
+  border-radius: var(--toolbarbutton-border-radius);
   border: 1px solid transparent;
 }
 
 .tagvalue:not([style]) {
   border-color: color-mix(in srgb, currentColor 50%, transparent);
 }
 
 .message-header-datetime {
@@ -423,18 +435,19 @@ mail-newsgroups-headerfield {
   cursor: pointer;
 }
 
 .emailDisplayButton:hover {
   color: SelectedItemText;
   background-color: SelectedItem;
 }
 
-.emailDisplayButton:focus-visible:not(:hover) {
-  border-color: var(--focus-outline-color);
+.emailDisplayButton:focus-visible {
+  outline: var(--focus-outline);
+  outline-offset: var(--focus-outline-offset);
 }
 
 mail-emailaddress[selected="true"] > .emailDisplayButton {
   /* when an email address context menu is selected,
    * make sure that the email menupopup stays displayed,
    * and tweak the bottom to blend in more w/ the menu
    */
   cursor: pointer;
@@ -450,18 +463,18 @@ button.email-action-button {
   border-radius: 0;
 }
 
 button.email-action-button:hover,
 button.email-action-button:hover:active {
   background-color: transparent;
 }
 
-button.email-action-button:focus-visible:not(:hover) {
-  outline: 1px solid var(--focus-outline-color);
+button.email-action-button:focus-visible {
+  outline: var(--focus-outline);
 }
 
 mail-emailaddress button.email-action-button {
   margin-inline-start: 2px;
 }
 
 .emailStar {
   width: 1em;
@@ -728,34 +741,35 @@ html|header.message-security-header html
   user-select: text;
   cursor: text;
 }
 
 .button-focusable {
   -moz-user-focus: normal;
 }
 
-.button-focusable:focus-visible:not(:hover) {
-  outline: 2px solid var(--focus-outline-color);
-  outline-offset: -1px;
+.button-focusable:focus-visible {
+  outline: var(--focus-outline);
+  outline-offset: var(--focus-outline-offset);
 }
 
 .button-focusable:focus:not(:focus-visible) {
   outline: none;
 }
 
 button.email-action-flagged {
   margin-inline: 6px;
   cursor: pointer;
   -moz-context-properties: fill, fill-opacity, stroke, stroke-opacity;
   fill: currentColor;
   stroke: currentColor;
   fill-opacity: 0.2;
   stroke-opacity: 0;
   align-self: center;
+  border-radius: var(--toolbarbutton-border-radius);
 }
 
 button.email-action-flagged.flagged {
   fill: #f4bc44 !important;
   fill-opacity: 1;
   stroke: #f4bc44;
   stroke-opacity: 1;
 }
@@ -826,18 +840,18 @@ button.email-action-flagged.flagged {
 .header-recipient:not(:last-child,.last-before-button):after,
 .header-newsgroup:not(:last-child):after {
   content: ",";
 }
 
 .header-recipient,
 .header-newsgroup {
   display: flow-root;
-  padding: 2px;
-  border-radius: 3px;
+  padding: var(--message-header-field-offset);
+  border-radius: var(--toolbarbutton-border-radius);
 }
 
 .header-recipient {
   white-space: nowrap;
 }
 
 .header-recipient:hover,
 .header-newsgroup:hover {
@@ -860,56 +874,60 @@ button.email-action-flagged.flagged {
 .newsgroups-list {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   row-gap: 2px;
   margin: 0;
   padding: 0;
   list-style: none;
-  margin-inline-start: -2px; /* Matches the 2px padding of the .header-recipient */
+  margin-inline-start: calc(var(--message-header-field-offset) * -1);
   min-width: 100px;
 }
 
 .recipient-address-book-button {
   margin: 0;
   margin-inline-start: 3px;
   margin-block-start: -2px;
   padding: 1px;
-  border-radius: 3px;
+  border-radius: var(--toolbarbutton-border-radius);
   cursor: pointer;
   vertical-align: middle;
+  background-color: transparent;
 }
 
 .recipient-address-book-button:not([disabled]):hover {
   background-color: transparent;
 }
 
-.recipient-address-book-button:not([disabled]):hover img {
-  fill: color-mix(in srgb, SelectedItemText 20%, transparent);
-  stroke: -moz-hyperlinktext;
-}
-
 .recipient-address-book-button img {
+  display: block;
   -moz-context-properties: fill, stroke;
   fill: color-mix(in srgb, currentColor 20%, transparent);
   stroke: currentColor;
-  display: block;
 }
 
 .recipient-address-book-button.in-address-book img {
   fill: color-mix(in srgb, var(--toolbarbutton-icon-fill-attention) 20%, transparent);
   stroke: var(--toolbarbutton-icon-fill-attention);
 }
 
 .header-recipient:hover .recipient-address-book-button.in-address-book img {
-  fill: color-mix(in srgb, SelectedItemText 20%, transparent);
+  fill: SelectedItemText;
   stroke: SelectedItemText;
 }
 
+.header-recipient:hover .recipient-address-book-button img {
+  opacity: 0.7;
+}
+
+.header-recipient:hover .recipient-address-book-button:not([disabled]):hover img {
+  opacity: 1;
+}
+
 .show-more-recipients {
   padding: 3px 9px;
   margin-inline-start: 6px !important;
   min-height: auto;
   min-width: auto;
   border-radius: 12px;
   line-height: 1;
   font-size: 0.9rem;
--- a/mail/themes/shared/mail/panelUI.css
+++ b/mail/themes/shared/mail/panelUI.css
@@ -814,17 +814,17 @@ menulist[open="true"]:not([disabled="tru
   stroke: var(--button-active-bgcolor);
 }
 
 #appMenu-fontSizeReset-button:focus > .toolbarbutton-text {
   box-shadow: inset 0 0 0 2px var(--focus-outline-color);;
 }
 #appMenu-fontSizeReduce-button:focus > .toolbarbutton-icon,
 #appMenu-fontSizeEnlarge-button:focus > .toolbarbutton-icon {
-  outline: 2px solid var(--focus-outline-color);
+  outline: var(--focus-outline);
   outline-offset: var(--focus-outline-offset);
 }
 
 #appMenu-fontSize-controls > .subviewbutton {
   margin-inline-start: 2px;
   padding: 4px 4px;
 }
 
--- a/mail/themes/shared/mail/variables.css
+++ b/mail/themes/shared/mail/variables.css
@@ -28,17 +28,18 @@
   --checkbox-unchecked-hover-bgcolor: color-mix(in srgb, -moz-accent-color 4%, var(--checkbox-unchecked-bgcolor));
   --checkbox-unchecked-active-bgcolor: var(--button-active-bgcolor);
   --checkbox-checked-border-color: transparent;
   --checkbox-checked-color: var(--button-primary-color);
   --checkbox-checked-bgcolor: var(--highlight-color);
   --checkbox-checked-hover-bgcolor: color-mix(in srgb, black 10%, var(--highlight-color));
   --checkbox-checked-active-bgcolor: color-mix(in srgb, black 20%, var(--highlight-color));
   --focus-outline-color: var(--toolbar-field-focus-border-color);
-  --focus-outline-offset: 1px;
+  --focus-outline-offset: 2px;
+  --focus-outline: 2px solid var(--focus-outline-color);
   --input-border-color: color-mix(in srgb, currentColor 41%, transparent);
   --lwt-header-image: none;
 
   /* Note: Setting this to 0 (without px) breaks CSS calculations for OSX. */
   --space-above-tabbar: 0px;
   --tab-min-height: 33px;
   --lwt-tabs-border-color: rgba(0, 0, 0, .3);
   --tabs-tabbar-border-size: 1px;