Bug 1635060 - Apply no background to the formatToolbar menulists in normal state. r=aleca
authorRichard Marti <richard.marti@gmail.com>
Thu, 07 May 2020 22:09:40 +0300
changeset 39083 1ceeeaabf3d5f384057eded0bc0e4081dccc629d
parent 39082 11757d68b87298797f44f347dee8bca7bda4ce5b
child 39084 9e77ad8193b3f3d3a39b74b422130ce633816479
push id402
push userclokep@gmail.com
push dateMon, 29 Jun 2020 20:48:04 +0000
reviewersaleca
bugs1635060
Bug 1635060 - Apply no background to the formatToolbar menulists in normal state. r=aleca
mail/themes/linux/mail/compose/messengercompose.css
mail/themes/linux/mail/messageHeader.css
mail/themes/linux/mail/messenger.css
mail/themes/osx/mail/compose/messengercompose.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
@@ -74,29 +74,43 @@
 
 menulist {
   -moz-appearance: none;
   min-height: 24px;
   color: inherit;
   margin: 1px 4px;
   padding: 1px 6px;
   border: 1px solid;
-  background: var(--toolbarbutton-hover-background);
+  border-radius: var(--toolbarbutton-border-radius);
   border-color: var(--toolbarbutton-hover-bordercolor);
   box-shadow: var(--toolbarbutton-hover-boxshadow);
   transition: background-color 150ms;
 }
 
-menulist:not([disabled="true"]):not([open="true"]):hover {
+#composeToolbar2 menulist {
+  background: var(--toolbarbutton-hover-background);
+}
+
+#FormatToolbar menulist {
+  background: transparent;
+}
+
+#composeToolbar2 menulist:not([disabled="true"]):not([open="true"]):hover {
   background: var(--toolbarbutton-active-background);
   border-color: var(--toolbarbutton-active-bordercolor);
   color: inherit;
 }
 
-menulist[open="true"] {
+#FormatToolbar menulist:not([disabled="true"]):not([open="true"]):hover {
+  background: var(--toolbarbutton-hover-background);
+  color: inherit;
+}
+
+#FormatToolbar menulist[open="true"],
+#composeToolbar2 menulist[open="true"] {
   background: var(--toolbarbutton-active-background);
   border-color: var(--toolbarbutton-active-bordercolor);
   box-shadow: var(--toolbarbutton-active-boxshadow);
 }
 
 menulist[disabled="true"] {
   opacity: .6;
 }
@@ -251,26 +265,23 @@ menulist:-moz-locale-dir(rtl)::part(labe
 
 #FormatToolbar {
   -moz-appearance: none;
   color: WindowText;
   margin-inline: 3px;
   padding-block: 4px;
 }
 
-.formatting-button {
-  margin: 1px;
-}
-
 toolbarbutton.formatting-button {
   -moz-appearance: none;
   border: 1px solid transparent;
-  border-radius: 2px;
+  border-radius: var(--toolbarbutton-border-radius);
+  margin: 1px;
+  color: inherit;
   -moz-context-properties: fill;
-  color: inherit;
   fill: currentColor;
   transition-property: background-color, border-color, box-shadow;
   transition-duration: 150ms;
 }
 
 toolbarbutton.formatting-button:not([disabled="true"]):hover {
   background: var(--toolbarbutton-hover-background);
   border-color: var(--toolbarbutton-hover-bordercolor);
--- a/mail/themes/linux/mail/messageHeader.css
+++ b/mail/themes/linux/mail/messageHeader.css
@@ -104,17 +104,16 @@
   padding-top: 0;
   padding-bottom: 0;
   list-style-image: none; /* overrides the rule from primaryToolbar.css */
 }
 
 .toolbarbutton-1.msgHeaderView-button:not([type="menu-button"]),
 .toolbarbutton-1.msgHeaderView-button > .toolbarbutton-menubutton-button,
 .toolbarbutton-1.msgHeaderView-button > .toolbarbutton-menubutton-dropmarker {
-  background: var(--toolbarbutton-hover-background);
   border-color: var(--toolbarbutton-header-bordercolor);
 }
 
 .toolbarbutton-1.msgHeaderView-button:not([disabled=true]):-moz-any(:hover,[open]) >
 .toolbarbutton-menubutton-button,
 .toolbarbutton-1.msgHeaderView-button:not([disabled=true]):-moz-any(:hover,[open]) >
 .toolbarbutton-menubutton-dropmarker,
 .toolbarbutton-1.msgHeaderView-button:not([type="menu-button"]):not([disabled=true]):not([checked=true]):not([open]):not(:active):hover,
--- a/mail/themes/linux/mail/messenger.css
+++ b/mail/themes/linux/mail/messenger.css
@@ -19,22 +19,22 @@
   --toolbar-non-lwt-textcolor: -moz-dialogtext;
   --toolbar-non-lwt-bgimage: linear-gradient(rgba(255,255,255,.15), rgba(255,255,255,.15));
   --toolbar-bgcolor: var(--toolbar-non-lwt-bgcolor);
   --toolbar-bgimage: var(--toolbar-non-lwt-bgimage);
   --chrome-content-separator-color: ThreeDShadow;
 
   --toolbarbutton-border-radius: 2px;
   --toolbarbutton-icon-fill-opacity: .85;
-  --toolbarbutton-hover-background: rgba(255, 255, 255, .5) linear-gradient(rgba(255, 255, 255, .5), transparent) no-repeat;
+  --toolbarbutton-hover-background: rgba(0, 0, 0, .05);
   --toolbarbutton-hover-bordercolor: rgba(0, 0, 0, .25);
   --toolbarbutton-header-bordercolor: rgba(0, 0, 0, .25);
   --toolbarbutton-hover-boxshadow: none;
 
-  --toolbarbutton-active-background: rgba(154, 154, 154, .5) linear-gradient(rgba(255, 255, 255, .7), rgba(255, 255, 255, .4));
+  --toolbarbutton-active-background: rgba(0, 0, 0, .1);
   --toolbarbutton-active-bordercolor: rgba(0, 0, 0, .3);
   --toolbarbutton-active-boxshadow: 0 1px 1px rgba(0, 0, 0, .1) inset, 0 0 1px rgba(0, 0, 0, .3) inset;
 
   --toolbarbutton-checkedhover-backgroundcolor: rgba(200, 200, 200, .5);
   --toolbarbutton-icon-fill-attention: var(--lwt-toolbarbutton-icon-fill-attention, #0a84ff);
 
   --lwt-header-image: none;
   --row-grouped-header-bg-color: -moz-dialog;
--- a/mail/themes/osx/mail/compose/messengercompose.css
+++ b/mail/themes/osx/mail/compose/messengercompose.css
@@ -247,25 +247,24 @@ toolbar[nowindowdrag="true"] {
 
 #FormatToolbar menulist {
   -moz-appearance: none;
   min-height: 24px;
   color: inherit;
   margin: 0 4px !important;
   padding: 1px 6px;
   border: 1px solid;
-  border-radius: 3px;
-  background: var(--toolbarbutton-hover-background);
+  border-radius: var(--toolbarbutton-border-radius);
+  background: transparent;
   border-color: var(--toolbarbutton-hover-bordercolor);
   transition: background-color 150ms;
 }
 
 #FormatToolbar menulist:not([disabled="true"]):not([open="true"]):hover {
-  background: var(--toolbarbutton-active-background);
-  border-color: var(--toolbarbutton-active-bordercolor);
+  background: var(--toolbarbutton-hover-background);
   color: inherit;
 }
 
 #FormatToolbar menulist[open="true"] {
   background: var(--toolbarbutton-active-background);
   border-color: var(--toolbarbutton-active-bordercolor);
   box-shadow: var(--toolbarbutton-active-boxshadow);
 }
@@ -284,20 +283,24 @@ toolbar[nowindowdrag="true"] {
   -moz-context-properties: fill;
   fill: currentColor;
 }
 
 #FormatToolbar menulist:-moz-locale-dir(rtl)::part(label-box) {
   background-position: left;
 }
 
+#FormatToolbar menulist > menupopup {
+  margin-inline-start: 0;
+}
+
 toolbarbutton.formatting-button {
   -moz-appearance: none;
   border: 1px solid transparent;
-  border-radius: 3px;
+  border-radius: var(--toolbarbutton-border-radius);
   margin-inline: 1px;
   padding-inline: 4px;
   -moz-context-properties: fill;
   fill: currentColor;
   transition-property: background-color, border-color, box-shadow;
   transition-duration: 150ms;
 }
 
--- a/mail/themes/shared/mail/messengercompose.css
+++ b/mail/themes/shared/mail/messengercompose.css
@@ -720,17 +720,17 @@ menulist::part(description) {
 label.extra-recipients-label {
   width: 16px;
   height: 16px;
   margin-inline: 6px;
 }
 
 .address-extra-recipients label:hover {
   cursor: pointer;
-  background-color: var(--toolbarbutton-hover-background);
+  background: var(--toolbarbutton-hover-background);
 }
 
 .extra-recipients-label image {
   display: inline;
   vertical-align: middle;
 }
 
 #extraRecipientsPanel {
@@ -738,17 +738,17 @@ label.extra-recipients-label {
   --arrowpanel-padding: 0;
 }
 
 #extraRecipientsPanel label {
   padding: 4px 8px;
   margin: 0;
   width: 100%;
   cursor: pointer;
-  transition: background-color 0.2s;
+  transition: background 0.2s;
 }
 
 #extraRecipientsPanel label:hover,
 #extraRecipientsPanel label:focus {
   background-color: var(--arrowpanel-dimmed);
 }
 
 .aw-firstColBox label:hover .close-icon {
--- a/mail/themes/windows/mail/compose/messengercompose.css
+++ b/mail/themes/windows/mail/compose/messengercompose.css
@@ -186,23 +186,20 @@
 #FormatToolbox {
   -moz-appearance: none;
 }
 
 #FontFaceSelect {
   max-width: 35ch;
 }
 
-.formatting-button {
-  margin: 1px;
-}
-
 toolbarbutton.formatting-button {
   -moz-appearance: none;
   border: 1px solid transparent;
+  margin: 1px;
   -moz-context-properties: fill;
   fill: currentColor;
   transition-property: background-color, border-color, box-shadow;
   transition-duration: 150ms;
 }
 
 @media (-moz-os-version: windows-win7) {
   toolbarbutton.formatting-button {
@@ -254,40 +251,16 @@ toolbarbutton.formatting-button[disabled
 }
 
 .color-button[disabled="true"],
 .color-button[disabled="true"]:hover {
   border: 1px inset ThreeDFace;
   opacity: 0.5;
 }
 
-@media (-moz-os-version: windows-win7) and (-moz-windows-default-theme: 0) {
-  toolbarbutton.formatting-button {
-    -moz-appearance: none;
-    border-radius: 2px;
-    border: 1px solid transparent;
-    padding: 2px 3px;
-  }
-
-  toolbarbutton.formatting-button:not([checked="true"]):hover {
-    border-top-color: ButtonHighlight;
-    border-inline-start-color: ButtonHighlight;
-    border-bottom-color: ButtonShadow;
-    border-inline-end-color: ButtonShadow;
-  }
-
-  toolbarbutton.formatting-button:hover:active,
-  toolbarbutton.formatting-button[checked="true"] {
-    border-top-color: ButtonShadow;
-    border-inline-start-color: ButtonShadow;
-    border-bottom-color: ButtonHighlight;
-    border-inline-end-color: ButtonHighlight;
-  }
-}
-
 /* ::::: address book sidebar ::::: */
 
 #sidebar-box .sidebar-header {
   -moz-appearance: toolbox;
   color: -moz-DialogText;
   text-shadow: none;
   background-color: -moz-Dialog;
 }
@@ -363,55 +336,66 @@ toolbar:not(:-moz-lwtheme) {
 
 /* ::::: autocomplete icons ::::: */
 
 .ac-site-icon {
   display: -moz-box;
   margin: 1px 5px;
 }
 
-@media (-moz-windows-default-theme) {
-  menulist,
-  menulist[disabled="true"] {
-    color: inherit;
-    border: 1px solid;
-    background: var(--toolbarbutton-hover-background);
-    border-color: var(--toolbarbutton-hover-bordercolor);
-    box-shadow: var(--toolbarbutton-hover-boxshadow);
-    transition-property: background-color, border-color, box-shadow;
-    transition-duration: 150ms;
-  }
+menulist,
+menulist[disabled="true"] {
+  color: inherit;
+  border: 1px solid;
+  border-color: var(--toolbarbutton-hover-bordercolor);
+  box-shadow: var(--toolbarbutton-hover-boxshadow);
+  transition-property: background-color, border-color, box-shadow;
+  transition-duration: 150ms;
+}
 
-  menulist[disabled="true"] {
-    opacity: 0.5;
-  }
+#composeToolbar2 menulist {
+  background: var(--toolbarbutton-hover-background);
+}
+
+#FormatToolbar menulist {
+  -moz-appearance: none;
+  background: transparent
+}
+
+menulist[disabled="true"] {
+  opacity: 0.5;
+}
 
-  menulist:not([disabled="true"]):not([open="true"]):hover {
-    background: var(--toolbarbutton-active-background);
-    border-color: var(--toolbarbutton-active-bordercolor);
-  }
+#composeToolbar2 menulist:not([disabled="true"]):not([open="true"]):hover {
+  background: var(--toolbarbutton-active-background);
+  border-color: var(--toolbarbutton-active-bordercolor);
+}
 
-  menulist[open="true"] {
-    background: var(--toolbarbutton-active-background);
-    border-color: var(--toolbarbutton-active-bordercolor);
-    box-shadow: var(--toolbarbutton-active-boxshadow);
-  }
+#FormatToolbar menulist:not([disabled="true"]):not([open="true"]):hover {
+  background: var(--toolbarbutton-hover-background);
+}
 
-  menulist::part(dropmarker) {
-    -moz-appearance: none;
-    list-style-image: url("chrome://messenger/skin/icons/toolbarbutton-arrow.svg");
-    -moz-context-properties: fill;
-    fill: currentColor;
-    margin-top: 0;
-  }
+#FormatToolbar menulist[open="true"],
+#composeToolbar2 menulist[open="true"] {
+  background: var(--toolbarbutton-active-background);
+  border-color: var(--toolbarbutton-active-bordercolor);
+  box-shadow: var(--toolbarbutton-active-boxshadow);
+}
 
-  menulist::part(dropmarker-icon) {
-    width: 9px;
-    height: 7px;
-  }
+menulist::part(dropmarker) {
+  -moz-appearance: none;
+  list-style-image: url("chrome://messenger/skin/icons/toolbarbutton-arrow.svg");
+  -moz-context-properties: fill;
+  fill: currentColor;
+  margin-top: 0;
+}
+
+menulist::part(dropmarker-icon) {
+  width: 9px;
+  height: 7px;
 }
 
 /* ::::: address book sidebar ::::: */
 
 #sidebar-box .sidebar-header {
   border-bottom: 1px solid ThreeDShadow;
   border-top: 1px solid ThreeDHighlight;
 }