Bug 1610927 - Fix the new compose header appearance with the default dark theme and some style tweaks. r=aleca a=mkmelin
authorRichard Marti <richard.marti@gmail.com>
Thu, 23 Jan 2020 12:23:24 +0200
changeset 37014 df27fddaec8424f1f3afa3301748aad1ef95ee1d
parent 37013 f912e26e5a2091f0478afb3958c97a95e5607db7
child 37015 4e22dfa52e46c007709383929a64b311b4df885a
push id2548
push userthunderbird@calypsoblue.org
push dateThu, 30 Jan 2020 20:54:16 +0000
treeherdercomm-beta@f6219b04be6d [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersaleca, mkmelin
bugs1610927
Bug 1610927 - Fix the new compose header appearance with the default dark theme and some style tweaks. r=aleca a=mkmelin
mail/themes/linux/mail/compose/messengercompose.css
mail/themes/osx/mail/compose/messengercompose.css
mail/themes/shared/mail/compacttheme.css
mail/themes/shared/mail/messengercompose.css
mail/themes/windows/mail/compose/messengercompose.css
--- a/mail/themes/linux/mail/compose/messengercompose.css
+++ b/mail/themes/linux/mail/compose/messengercompose.css
@@ -179,20 +179,30 @@ menulist:-moz-locale-dir(rtl) > .menulis
   text-shadow: none;
   padding-top: 3px;
 }
 
 #addresses-box {
   padding-top: 4px;
 }
 
+.address-container {
+  padding: 1px 4px;
+}
+
 .address-label-container {
   padding-top: 6px;
 }
 
+#msgSubject,
+#msgIdentity,
+.address-container {
+  min-height: 30px;
+}
+
 .address-pill {
   padding-block: 2px;
 }
 
 .address-pill label {
   margin-block: 0;
 }
 
--- a/mail/themes/osx/mail/compose/messengercompose.css
+++ b/mail/themes/osx/mail/compose/messengercompose.css
@@ -179,16 +179,26 @@ toolbar[nowindowdrag="true"] {
   border-color: -moz-mac-focusring;
   box-shadow: var(--focus-ring-box-shadow);
 }
 
 .address-label-container {
   padding-top: 7px;
 }
 
+.address-container {
+  padding: 1px 4px;
+}
+
+#msgSubject,
+#msgIdentity,
+.address-container {
+  min-height: 26px;
+}
+
 .address-pill {
   padding-block: 2px;
 }
 
 .address-pill label {
   margin-block: 0;
 }
 
--- a/mail/themes/shared/mail/compacttheme.css
+++ b/mail/themes/shared/mail/compacttheme.css
@@ -107,41 +107,33 @@
 }
 
 #MsgHeadersToolbar {
   color: inherit;
 }
 
 #msgIdentity,
 #msgSubject {
-  border-bottom-color: var(--composer-header-border-color) !important;
   color: var(--lwt-text-color);
 }
 
-#msgIdentity:hover,
-#msgIdentity:focus,
-#msgIdentity:focus-within,
-#msgSubject:hover,
-#msgSubject:focus {
-  background-color: var(--lwt-toolbar-field-background-color);
-  color: var(--lwt-toolbar-field-color);
-  border-color: var(--lwt-toolbar-field-border-color) !important;
-}
-
 #msgIdentity,
 #msgSubject,
 .address-container {
   background-color: var(--lwt-toolbar-field-background-color);
   color: var(--lwt-toolbar-field-color);
 }
 
+#msgIdentity:hover,
 #msgIdentity:focus,
-#msgSubject:focus,
-.address-container[focused="true"] {
-  border-color: Highlight !important;
+#msgIdentity:focus-within,
+#msgSubject:hover,
+#msgSubject:focus {
+  color: var(--lwt-toolbar-field-color);
+  border-color: var(--lwt-toolbar-field-border-color);
 }
 
 :root[lwt-popup-brighttext] panel[type="autocomplete-richlistbox"]:-moz-lwtheme {
   margin-top: -1px;
   padding: 2px 0;
   background: var(--autocomplete-popup-background);
   color: var(--autocomplete-popup-color);
   border-color: var(--autocomplete-popup-border-color);
--- a/mail/themes/shared/mail/messengercompose.css
+++ b/mail/themes/shared/mail/messengercompose.css
@@ -36,54 +36,44 @@
 
 :root[lwt-default-theme-in-dark-mode] #MsgHeadersToolbar {
   color: inherit;
 }
 
 :root[lwt-default-theme-in-dark-mode] #msgIdentity,
 :root[lwt-default-theme-in-dark-mode] #msgSubject,
 :root[lwt-default-theme-in-dark-mode] .address-container {
-  border-bottom-color: var(--composer-header-border-color) !important;
+  background-color: var(--lwt-toolbar-field-background-color);
   color: var(--lwt-text-color);
 }
 
 :root[lwt-default-theme-in-dark-mode] #msgIdentity:hover,
 :root[lwt-default-theme-in-dark-mode] #msgIdentity:focus,
 :root[lwt-default-theme-in-dark-mode] #msgIdentity:focus-within,
 :root[lwt-default-theme-in-dark-mode] #msgSubject:hover,
 :root[lwt-default-theme-in-dark-mode] #msgSubject:focus {
-  background-color: var(--lwt-toolbar-field-background-color);
   color: var(--lwt-toolbar-field-color);
-  border-color: var(--lwt-toolbar-field-border-color) !important;
+  border-color: var(--lwt-toolbar-field-border-color);
 }
 
-:root[lwt-default-theme-in-dark-mode] .address-container >
-  .autocomplete-result-popupset {
-  -moz-appearance: none;
+:root[lwt-default-theme-in-dark-mode] panel[type="autocomplete-richlistbox"]:-moz-lwtheme {
   margin-top: -1px;
+  padding: 2px 0;
   background: var(--autocomplete-popup-background);
   color: var(--autocomplete-popup-color);
+  border-color: var(--autocomplete-popup-border-color);
+  scrollbar-color: rgba(249,249,250,.4) rgba(20,20,25,.3);
 }
 
-:root[lwt-default-theme-in-dark-mode] .address-container
-  panel[type="autocomplete-richlistbox"] {
-  padding: 2px 0;
-  color: inherit;
-  background-color: inherit;
-  border-color: var(--autocomplete-popup-border-color);
-}
-
-:root[lwt-default-theme-in-dark-mode] .address-container
-  .autocomplete-richlistbox {
+:root[lwt-default-theme-in-dark-mode] .autocomplete-richlistbox {
   color: inherit;
   background-color: inherit;
 }
 
-:root[lwt-default-theme-in-dark-mode] .address-container
-  .autocomplete-richlistitem[selected] {
+:root[lwt-default-theme-in-dark-mode] .autocomplete-richlistitem[selected] {
   background: #0a84ff;
   color: #fff;
 }
 
 /* Rules to help integrate WebExtension buttons */
 
 .webextension-browser-action > .toolbarbutton-badge-stack > .toolbarbutton-icon {
   height: 16px;
@@ -520,77 +510,70 @@
 .address-row.hidden {
   display: none;
 }
 
 .address-container {
   flex: 1;
   margin-inline-start: 4px;
   margin-inline-end: 0;
-  padding: 1px 4px;
   border: solid 1px var(--toolbarbutton-hover-bordercolor);
   border-radius: 2px;
   background-color: -moz-field;
   transition: border .2s, box-shadow .2s;
   cursor: text;
 }
 
-#msgSubject,
-#msgIdentity,
-.address-container {
-  min-height: 30px;
-}
-
 .address-input {
   color: inherit;
 }
 
 .address-pill {
   display: flex;
   align-items: center;
   border-radius: 4px;
   margin-inline-end: 3px;
   margin-block: 2px;
   background-color: rgba(0,0,0,0.1);
   transition: color .2s ease, background-color .2s ease, box-shadow .2s ease;
   -moz-user-focus: normal;
   cursor: default;
-  box-shadow: inset 0 0 0 2px transparent;
+  box-shadow: inset 0 0 0 1px transparent;
 }
 
 .address-pill label {
   -moz-user-focus: none;
   cursor: default;
 }
 
 .address-pill:hover:not(.editing),
 .address-pill:focus:not(.editing) {
-  box-shadow: inset 0 0 0 2px rgba(0,0,0,0.3);
+  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.3);
 }
 
 .address-pill.editing {
   flex: 1;
   background-color: transparent;
   padding-inline: 6px;
-  box-shadow: inset 0 0 0 2px Highlight;
+  box-shadow: inset 0 0 0 1px Highlight;
   min-height: calc(1.25em + 4px); /* needed to not shrink in edit mode */
 }
 
 #MsgHeadersToolbar[brighttext] .address-pill:not(.editing) {
   background-color: rgba(0,0,0,0.3);
 }
 
 #MsgHeadersToolbar[brighttext] .address-pill:hover:not(.editing),
 #MsgHeadersToolbar[brighttext] .address-pill:focus:not(.editing) {
-  background-color: rgba(0,0,0,0.35);
+  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.3);
 }
 
 .address-pill.error {
   color: #a4000f;
-  background-color: rgba(255,0,0,0.1);
+  background-color: #ffe5e5;
 }
 
 .address-pill.error:hover:not(.editing),
 .address-pill.error:focus:not(.editing) {
   background-color: rgba(255,0,0,0.15);
 }
 
 #MsgHeadersToolbar[brighttext] .address-pill.error:not(.editing) {
@@ -600,17 +583,17 @@
 
 #MsgHeadersToolbar[brighttext] .address-pill.error:hover:not(.editing),
 #MsgHeadersToolbar[brighttext] .address-pill.error:focus:not(.editing)  {
   background-color: #310005;
 }
 
 .address-pill.warning {
   color: #a44900;
-  background-color: rgba(255,130,0,0.1);
+  background-color: #fff2e5;
 }
 
 .address-pill.warning:hover:not(.editing),
 .address-pill.warning:focus:not(.editing) {
   background-color: rgba(255,130,0,0.15);
 }
 
 #MsgHeadersToolbar[brighttext] .address-pill.warning:not(.editing) {
@@ -633,16 +616,18 @@
   background-color: Highlight;
 }
 
 .address-identity-recipient {
   margin-inline-end: 8px;
 }
 
 .address-extra-recipients label {
+  border-radius: 2px;
+  padding: 2px 4px;
   margin-block: 0;
   margin-inline: 12px 6px;
   transition: color 0.2s;
   line-height: 1;
 }
 
 .overflow-icon {
   -moz-appearance: none;
@@ -650,74 +635,59 @@
   list-style-image: url(chrome://messenger/skin/icons/overflow.svg);
   color: inherit !important;
   fill: currentColor;
   fill-opacity: 1;
   width: 15px;
 }
 
 label.extra-recipients-label {
-  border-radius: 2px;
-  padding: 2px;
   width: 16px;
   height: 16px;
   margin-inline: 6px;
 }
 
-.extra-recipients-label:hover,
-.extra-recipients-label:focus {
+.address-extra-recipients label:hover {
   cursor: pointer;
   background-color: var(--toolbarbutton-hover-background);
 }
 
 .extra-recipients-label image {
   display: inline;
   vertical-align: middle;
 }
 
-.address-extra-recipients label:hover:not(.extra-recipients-label),
-.aw-firstColBox label:hover:not(.extra-recipients-label) {
-  cursor: pointer;
-  color: Highlight;
-}
-
 #extraRecipientsPanel {
   min-width: 160px;
   --arrowpanel-padding: 0;
 }
 
 #extraRecipientsPanel label {
   padding: 4px 8px;
   margin: 2px 0;
   width: 100%;
   cursor: pointer;
   transition: background-color 0.2s;
 }
 
-#extraRecipientsPanel label:hover,
-#extraRecipientsPanel label:focus {
+#extraRecipientsPanel label:hover {
   background-color: var(--arrowpanel-dimmed);
 }
 
-#extraRecipientsPanel label:hover:active {
-  background-color: var(--arrowpanel-dimmed-further);
-  box-shadow: 0 1px 0 hsla(210, 4%, 10%, .03) inset;
-}
-
 .aw-firstColBox label:hover .close-icon {
   fill-opacity: 0.1;
 }
 
 .aw-firstColBox label {
   margin-top: 4px;
   margin-bottom: 0;
 }
 
-.address-extra-recipients label:focus:not(:hover):not(.extra-recipients-label),
-.aw-firstColBox label:focus:not(:hover):not(.extra-recipients-label) image {
+.address-extra-recipients label:focus:not(:hover),
+.aw-firstColBox label:focus:not(:hover) image {
   outline: 2px dashed Highlight;
 }
 
 #msgIdentity:hover,
 #msgSubject:hover,
 .address-container:hover  {
   border-color: rgba(0,0,0,0.5);
 }
@@ -728,10 +698,10 @@ label.extra-recipients-label {
   border-color: rgba(255, 255, 255, 0.3);
 }
 
 #msgIdentity:focus,
 #msgIdentity:focus-within,
 #msgIdentity[focused="true"],
 #msgSubject:focus,
 .address-container[focused="true"] {
-  border-color: Highlight;
+  border-color: Highlight !important;
 }
--- a/mail/themes/windows/mail/compose/messengercompose.css
+++ b/mail/themes/windows/mail/compose/messengercompose.css
@@ -154,16 +154,26 @@
   color: inherit;
   margin: 2px 0;
 }
 
 .address-label-container {
   padding-top: 5px;
 }
 
+.address-container {
+  padding: 0 4px;
+}
+
+#msgSubject,
+#msgIdentity,
+.address-container {
+  min-height: 28px;
+}
+
 #msgSubject {
   margin-top: 0;
   padding: 2px;
   padding-inline-start: 5px;
 }
 
 @media (-moz-windows-default-theme) {
   #msgSubject,