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
--- 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;