Bug 1001535 - Update the findbar-buttons to toolbarbutton-1 styling. r=josiah, a=rkent
authorRichard Marti <richard.marti@gmail.com>
Fri, 08 May 2015 22:45:10 +0200
changeset 20202 05aab6c8e0e097d86240a6805cebe1ec41db20cc
parent 20201 83c3bd337e7979d445683f9792ced4d52b345396
child 20203 fae74ec74a56ee892b9a1649d697c9ea4a031bfb
push id1460
push userkent@caspia.com
push dateTue, 02 Jun 2015 23:52:00 +0000
treeherdercomm-aurora@fae74ec74a56 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjosiah, rkent
bugs1001535
Bug 1001535 - Update the findbar-buttons to toolbarbutton-1 styling. r=josiah, a=rkent
mail/components/compose/content/MsgComposeCommands.js
mail/themes/osx/mail/compose/messengercompose.css
mail/themes/osx/mail/primaryToolbar.css
mail/themes/windows/mail/compose/messengercompose-aero.css
mail/themes/windows/mail/primaryToolbar-aero.css
--- a/mail/components/compose/content/MsgComposeCommands.js
+++ b/mail/components/compose/content/MsgComposeCommands.js
@@ -2002,17 +2002,17 @@ function AttachmentsChanged() {
 }
 
 function ComposeStartup(recycled, aParams)
 {
   // Findbar overlay
   if (!document.getElementById("findbar-replaceButton")) {
     let replaceButton = document.createElement("toolbarbutton");
     replaceButton.setAttribute("id", "findbar-replaceButton");
-    replaceButton.setAttribute("class", "tabbable");
+    replaceButton.setAttribute("class", "findbar-button tabbable");
     replaceButton.setAttribute("label", getComposeBundle().getString("replaceButton.label"));
     replaceButton.setAttribute("accesskey", getComposeBundle().getString("replaceButton.accesskey"));
     replaceButton.setAttribute("tooltiptext", getComposeBundle().getString("replaceButton.tooltip"));
     replaceButton.setAttribute("oncommand", "findbarFindReplace();");
 
     let findbar = document.getElementById("FindToolbar");
     let lastButton = findbar.getElement("find-case-sensitive");
     let tSeparator = document.createElement("toolbarseparator");
--- a/mail/themes/osx/mail/compose/messengercompose.css
+++ b/mail/themes/osx/mail/compose/messengercompose.css
@@ -40,62 +40,85 @@
 }
 
 toolbar[nowindowdrag="true"] {
   -moz-appearance: none;
 }
 
 /* ::::: primary toolbar buttons ::::: */
 
+.findbar-button {
+  background: none;
+  box-shadow: none;
+  border: 1px transparent solid;
+  border-radius: 3px;
+  transition-property: background, border-color;
+  transition-duration: 250ms;
+}
+
+#findbar-replaceButton {
+  padding: 2px 9px;
+  -moz-margin-start: 5px;
+}
+
 .toolbarbutton-1:not([type="menu-button"]),
 .toolbarbutton-1 > .toolbarbutton-menubutton-button,
 .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
   height: 22px;
   padding: 0 4px;
   border: 1px transparent solid;
   border-radius: 3px;
   transition-property: background, border-color;
   transition-duration: 250ms;
 }
 
-.toolbarbutton-1:not([type="menu-button"]):hover:not([disabled]),
-.toolbarbutton-1:hover:not([disabled]) > .toolbarbutton-menubutton-button,
-.toolbarbutton-1[open="true"]:not([disabled]) > .toolbarbutton-menubutton-button,
-.toolbarbutton-menubutton-button:active + .toolbarbutton-menubutton-dropmarker,
-.toolbarbutton-1:hover:not([disabled]) > .toolbarbutton-menubutton-dropmarker {
+.findbar-button:not(:-moz-any([checked="true"],[disabled="true"])):hover,
+.toolbarbutton-1:not([type="menu-button"]):not(:-moz-any([checked="true"],[disabled="true"])):hover,
+.toolbarbutton-1:not([disabled]):hover > .toolbarbutton-menubutton-button,
+.toolbarbutton-1:not([disabled])[open="true"] > .toolbarbutton-menubutton-button,
+.toolbarbutton-menubutton-button:not([disabled]):active + .toolbarbutton-menubutton-dropmarker,
+.toolbarbutton-1:not([disabled]):hover > .toolbarbutton-menubutton-dropmarker {
   border-color: hsla(0, 0%, 0%, .2);
   background: hsla(0, 0%, 100%, .1) linear-gradient(hsla(0, 0%, 100%, .3),
               hsla(0, 0%, 100%,.1)) padding-box;
   box-shadow: 0 1px 0 hsla(0, 0%, 100%, .5), 0 1px 0 hsla(0, 0%, 100%, .5) inset;
 }
 
+.findbar-button:not([disabled=true]):-moz-any([checked="true"],:hover:active),
 .toolbarbutton-1[checked="true"],
-.toolbarbutton-1:active:not([disabled]):not([type="menu-button"]),
+.toolbarbutton-1:not([disabled]):not([type="menu-button"]):active,
 .button-appmenu[open="true"],
 .toolbarbutton-1:not([disabled]) > .toolbarbutton-menubutton-button:active,
 .toolbarbutton-1[open="true"] >
 .toolbarbutton-menubutton-dropmarker:not([disabled="true"]) {
   background-color: transparent !important;
-  background: hsla(0, 0%, 0%, .02) linear-gradient(hsla(0, 0%, 0%, .12),
+  background: linear-gradient(hsla(0, 0%, 0%, .12),
               hsla(0, 0%, 0%, 0)) border-box;
   border-color: hsla(0, 0%, 0%, .3);
   box-shadow: 0 1px 0 hsla(0, 0%, 100%, .5),
               0 1px 0 hsla(0, 0%, 0%, .05) inset,
               0 1px 1px hsla(0, 0%, 0%, .2) inset;
   transition-duration: 10ms;
 }
 
+.findbar-button[checked="true"]:not(:active):hover,
+.toolbarbutton-1[checked]:not(:active):hover {
+  background-color: hsla(0,0%,0%,.09) !important;
+  transition: background-color 250ms;
+}
+
 .toolbarbutton-1 > .toolbarbutton-menubutton-button {
   -moz-border-end: none;
 }
 
 .toolbarbutton-1 > .toolbarbutton-menubutton-button:-moz-locale-dir(ltr),
 .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker:-moz-locale-dir(rtl) {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
+  -moz-border-end: none;
 }
 
 .toolbarbutton-1 > .toolbarbutton-menubutton-button:-moz-locale-dir(rtl),
 .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker:-moz-locale-dir(ltr) {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
 }
 
--- a/mail/themes/osx/mail/primaryToolbar.css
+++ b/mail/themes/osx/mail/primaryToolbar.css
@@ -57,54 +57,71 @@
 
 .mail-toolbox > toolbar
 .contentTabToolbox > toolbar {
   -moz-appearance: none;
 }
 
 /* ::::: primary toolbar buttons ::::: */
 
+.findbar-button {
+  background: none;
+  box-shadow: none;
+  border: 1px transparent solid;
+  border-radius: 3px;
+  transition-property: background, border-color;
+  transition-duration: 250ms;
+}
+
 .toolbarbutton-1:not([type="menu-button"]),
 .toolbarbutton-1 > .toolbarbutton-menubutton-button,
 .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
   height: 22px;
   padding: 0 4px;
   border: 1px transparent solid;
   border-radius: 3px;
   transition-property: background, border-color;
   transition-duration: 250ms;
 }
 
-.toolbarbutton-1:not([type="menu-button"]):hover:not([disabled]),
-.toolbarbutton-1:hover:not([disabled]) > .toolbarbutton-menubutton-button,
-.toolbarbutton-1[open="true"]:not([disabled]) > .toolbarbutton-menubutton-button,
-.toolbarbutton-menubutton-button:active + .toolbarbutton-menubutton-dropmarker,
-.toolbarbutton-1:hover:not([disabled]) > .toolbarbutton-menubutton-dropmarker {
+.findbar-button:not(:-moz-any([checked="true"],[disabled="true"])):hover,
+.toolbarbutton-1:not([type="menu-button"]):not(:-moz-any([checked="true"],[disabled="true"])):hover,
+.toolbarbutton-1:not([disabled]):hover > .toolbarbutton-menubutton-button,
+.toolbarbutton-1:not([disabled])[open="true"] > .toolbarbutton-menubutton-button,
+.toolbarbutton-menubutton-button:not([disabled]):active + .toolbarbutton-menubutton-dropmarker,
+.toolbarbutton-1:not([disabled]):hover > .toolbarbutton-menubutton-dropmarker {
   border-color: hsla(0, 0%, 0%, .2);
   background: hsla(0, 0%, 100%, .1) linear-gradient(hsla(0, 0%, 100%, .3),
               hsla(0, 0%, 100%,.1)) padding-box;
   box-shadow: 0 1px 0 hsla(0, 0%, 100%, .5), 0 1px 0 hsla(0, 0%, 100%, .5) inset;
 }
 
+.findbar-button:not([disabled=true]):-moz-any([checked="true"],:hover:active),
 .toolbarbutton-1[checked="true"],
-.toolbarbutton-1:active:not([disabled]):not([type="menu-button"]),
+.toolbarbutton-1:not([disabled]):not([type="menu-button"]):active,
 .button-appmenu[open="true"],
 .toolbarbutton-1:not([disabled]) > .toolbarbutton-menubutton-button:active,
 .toolbarbutton-1[open="true"] >
 .toolbarbutton-menubutton-dropmarker:not([disabled="true"]) {
   background-color: transparent !important;
   background: linear-gradient(hsla(0, 0%, 0%, .12),
               hsla(0, 0%, 0%, 0)) border-box;
   border-color: hsla(0, 0%, 0%, .3);
   box-shadow: 0 1px 0 hsla(0, 0%, 100%, .5),
               0 1px 0 hsla(0, 0%, 0%, .05) inset,
               0 1px 1px hsla(0, 0%, 0%, .2) inset;
   transition-duration: 10ms;
 }
 
+.findbar-button[checked="true"]:not(:active):hover,
+.toolbarbutton-1[checked]:not(:active):hover {
+  background-color: hsla(0,0%,0%,.09) !important;
+  transition: background-color 250ms;
+}
+
 .toolbarbutton-1 > .toolbarbutton-menubutton-button {
   -moz-border-end: none;
 }
 
 .toolbarbutton-1 > .toolbarbutton-menubutton-button:-moz-locale-dir(ltr),
 .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker:-moz-locale-dir(rtl) {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
--- a/mail/themes/windows/mail/compose/messengercompose-aero.css
+++ b/mail/themes/windows/mail/compose/messengercompose-aero.css
@@ -130,23 +130,28 @@ toolbar:not(:-moz-lwtheme) {
   padding: 1px 5px !important;
 }
 
 .toolbarbutton-1 {
   -moz-box-orient: vertical;
   min-height: 24px;
 }
 
+.findbar-button {
+  padding: 2px 6px;
+}
+
 toolbox[labelalign="end"] .toolbarbutton-1,
 toolbox[labelalign="end"] .toolbarbutton-menubutton-button {
   -moz-box-orient: horizontal;
 }
 
 @media (-moz-windows-default-theme) and (-moz-os-version: windows-vista),
        (-moz-windows-default-theme) and (-moz-os-version: windows-win7) {
+  .findbar-button,
   .toolbarbutton-1:not([type="menu-button"]),
   .toolbarbutton-1 > .toolbarbutton-menubutton-button,
   .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
     -moz-appearance: none;
     background: hsla(210, 32%, 93%, 0) padding-box;
     border-radius: 2px;
     border: 1px solid;
     border-color: hsla(210, 54%, 20%, 0) hsla(210, 54%, 20%, 0)
@@ -180,16 +185,17 @@ toolbox[labelalign="end"] .toolbarbutton
                   hsla(210, 54%, 20%, .25);
     box-shadow: 0 1px hsla(0, 0%, 100%, .3) inset,
                 0 1px hsla(210, 54%, 20%, .03),
                 0 0 2px hsla(210, 54%, 20%, .1);
     transition-property: background-color, border-color, box-shadow;
     transition-duration: 150ms;
   }
 
+  .findbar-button:not(:-moz-any([checked="true"],[disabled="true"])):hover,
   .toolbarbutton-1:not([disabled="true"]):-moz-any(:hover,[open="true"]) >
   .toolbarbutton-menubutton-button,
   .toolbarbutton-1:not([disabled="true"]):hover >
   .toolbarbutton-menubutton-dropmarker,
   .toolbarbutton-1:not([type="menu-button"]):not([disabled="true"]):not([checked="true"]):not([open="true"]):not(:active):hover {
     color: -moz-DialogText;
     background-image: linear-gradient(hsla(0, 0%, 100%, .6),
                       hsla(0, 0%, 100%, .1));
@@ -208,16 +214,17 @@ toolbox[labelalign="end"] .toolbarbutton
   menulist:not([disabled="true"]):not([open="true"]):hover {
     border-color: hsla(210, 54%, 20%, .3) hsla(210, 54%, 20%, .35)
                   hsla(210, 54%, 20%, .4);
     background-color: hsla(210, 48%, 96%, .75);
     box-shadow: 0 0 1px hsla(210, 54%, 20%, .03),
                 0 0 2px hsla(210, 54%, 20%, .1);
   }
 
+  .findbar-button:not([disabled=true]):-moz-any([checked="true"],:hover:active),
   .toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled="true"]):hover:active,
   .toolbarbutton-1[open="true"] > .toolbarbutton-menubutton-dropmarker:not([disabled="true"]),
   .toolbarbutton-1:not([type="menu-button"]):not([disabled="true"]):-moz-any([open="true"],[checked="true"],:hover:active),
   menulist[open="true"] {
     background-image: linear-gradient(hsla(0, 0%, 100%, .6),
                       hsla(0, 0%, 100%, .1));
     background-color: hsla(210, 54%, 20%, .15);
     border-color: hsla(210, 54%, 20%, .3) hsla(210, 54%, 20%, .35)
@@ -237,38 +244,41 @@ toolbox[labelalign="end"] .toolbarbutton
 
   .toolbarbutton-1[checked=true]:not(:active):hover {
     background-color: rgba(90%, 90%, 90%, .4);
     transition: background-color .4s;
   }
 }
 
 @media (-moz-windows-default-theme) and (-moz-os-version: windows-win8) {
+  .findbar-button,
   .toolbarbutton-1:not([type="menu-button"]),
   .toolbarbutton-1 > .toolbarbutton-menubutton-button,
   .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
     -moz-appearance: none;
     border: 1px solid;
     border-color: transparent;
     transition-property: background-color, border-color;
     transition-duration: 150ms;
   }
 
+  .findbar-button:not(:-moz-any([checked="true"],[disabled="true"])):hover,
   .toolbarbutton-1:not([disabled=true]):-moz-any(:hover,[open]) >
   .toolbarbutton-menubutton-button,
   .toolbarbutton-1:not([disabled=true]):-moz-any(:hover,[open]) >
   .toolbarbutton-menubutton-dropmarker,
   .toolbarbutton-1:not([disabled=true]):not([checked=true]):not([open]):not(:active):hover,
   .toolbarbutton-1:not([buttonover]):not([open]):not(:active):hover >
   .toolbarbutton-menubutton-dropmarker:not([disabled]) {
     color: -moz-DialogText;
     background-color: hsla(210, 4%, 10%, .08);
     border-color: hsla(210, 4%, 10%, .1);
   }
 
+  .findbar-button:not([disabled=true]):-moz-any([checked="true"],:hover:active),
   .toolbarbutton-1 >
   .toolbarbutton-menubutton-button:not([disabled=true]):hover:active,
   .toolbarbutton-1[open] >
   .toolbarbutton-menubutton-dropmarker:not([disabled=true]),
   .toolbarbutton-1:not([type="menu-button"]):not([disabled]):-moz-any([open],:hover:active) {
     background-color: hsla(210, 4%, 10%, .12);
     border-color: hsla(210, 4%, 10%, .1);
     border-top-color: hsla(210, 4%, 10%, .2);
@@ -428,25 +438,34 @@ toolbox[labelalign="end"] > toolbar[mode
   -moz-appearance: none;
   border-top-width: 0;
   border-bottom: 1px solid ThreeDShadow;
   background-color: transparent;
   padding-top: 4px;
   padding-bottom: 2px;
 }
 
+.findbar-container {
+  padding-top: 2px;
+  padding-bottom: 2px;
+}
+
 @media (-moz-windows-default-theme) and (-moz-os-version: windows-vista),
        (-moz-windows-default-theme) and (-moz-os-version: windows-win7) {
   #composeContentBox {
     background-color: hsl(210, 75%, 92%);
   }
 
   #headers-box {
     border-bottom-color: #A9B7C9;
   }
+
+  findbar {
+    background-color: #eef3fa;
+  }
 }
 
 @media (-moz-windows-glass) {
   #compose-toolbox:not(:-moz-lwtheme) {
     color: black;
     text-shadow: 0 0 .7em white, 0 0 .7em white, 0 1px 0 rgba(255, 255, 255, .4);
   }
 
--- a/mail/themes/windows/mail/primaryToolbar-aero.css
+++ b/mail/themes/windows/mail/primaryToolbar-aero.css
@@ -43,24 +43,29 @@
 .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
   padding: 1px 5px !important;
 }
 
 .toolbarbutton-1 {
   min-height: 24px;
 }
 
+.findbar-button {
+  padding: 2px 6px;
+}
+
 @media not all and (-moz-windows-default-theme) {
   #messengerWindow[tabsintitlebar] #mail-menubar > menu {
     -moz-appearance: none;
   }
 }
 
 @media (-moz-windows-default-theme) and (-moz-os-version: windows-vista),
        (-moz-windows-default-theme) and (-moz-os-version: windows-win7) {
+  .findbar-button,
   .toolbarbutton-1:not([type="menu-button"]),
   .toolbarbutton-1 > .toolbarbutton-menubutton-button,
   .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
     -moz-appearance: none;
     background: hsla(210, 32%, 93%, 0) padding-box;
     border-radius: 2px;
     border: 1px solid;
     border-color: hsla(210, 54%, 20%, 0) hsla(210, 54%, 20%, 0)
@@ -79,16 +84,17 @@
   }
 
   .toolbarbutton-1 > .toolbarbutton-menubutton-button:-moz-locale-dir(rtl),
   .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker:-moz-locale-dir(ltr) {
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
   }
 
+  .findbar-button:not(:-moz-any([checked="true"],[disabled="true"])):hover,
   .toolbarbutton-1:not([disabled="true"]):-moz-any(:hover,[open="true"]) >
   .toolbarbutton-menubutton-button,
   .toolbarbutton-1:not([disabled="true"]):hover >
   .toolbarbutton-menubutton-dropmarker,
   .toolbarbutton-1:not([type="menu-button"]):not([disabled="true"]):not([checked="true"]):not([open="true"]):not(:active):hover {
     color: -moz-DialogText;
     background-image: linear-gradient(hsla(0, 0%, 100%, .6),
                       hsla(0, 0%, 100%, .1));
@@ -106,16 +112,17 @@
   .toolbarbutton-menubutton-dropmarker:not([disabled="true"]) {
     border-color: hsla(210, 54%, 20%, .3) hsla(210, 54%, 20%, .35)
                   hsla(210, 54%, 20%, .4);
     background-color: hsla(210, 48%, 96%, .75);
     box-shadow: 0 0 1px hsla(210, 54%, 20%, .03),
                 0 0 2px hsla(210, 54%, 20%, .1);
   }
 
+  .findbar-button:not([disabled=true]):-moz-any([checked="true"],:hover:active),
   .toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled="true"]):hover:active,
   .toolbarbutton-1[open="true"] > .toolbarbutton-menubutton-dropmarker:not([disabled="true"]),
   .toolbarbutton-1:not([type="menu-button"]):not([disabled="true"]):-moz-any([open="true"],[checked="true"],:hover:active) {
     background-image: linear-gradient(hsla(0, 0%, 100%, .6),
                       hsla(0, 0%, 100%, .1));
     background-color: hsla(210, 54%, 20%, .15);
     border-color: hsla(210, 54%, 20%, .3) hsla(210, 54%, 20%, .35)
                   hsla(210, 54%, 20%, .4);
@@ -134,42 +141,45 @@
 
   .toolbarbutton-1[checked=true]:not(:active):hover {
     background-color: rgba(90%, 90%, 90%, .4);
     transition: background-color .4s;
   }
 }
 
 @media (-moz-os-version: windows-win8) {
+  .findbar-button,
   .toolbarbutton-1:not([type="menu-button"]),
   .toolbarbutton-1 > .toolbarbutton-menubutton-button,
   .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
     -moz-appearance: none;
     border: 1px solid;
     border-color: transparent;
     transition-property: background-color, border-color;
     transition-duration: 150ms;
   }
 
   .toolbarbutton-1[type="menu-button"] {
     -moz-appearance: none;
   }
 
+  .findbar-button:not(:-moz-any([checked="true"],[disabled="true"])):hover,
   .toolbarbutton-1:not([disabled=true]):-moz-any(:hover,[open]) >
   .toolbarbutton-menubutton-button,
   .toolbarbutton-1:not([disabled=true]):-moz-any(:hover,[open]) >
   .toolbarbutton-menubutton-dropmarker,
   .toolbarbutton-1:not([disabled=true]):not([checked=true]):not([open]):not(:active):hover,
   .toolbarbutton-1:not([buttonover]):not([open]):not(:active):hover >
   .toolbarbutton-menubutton-dropmarker:not([disabled]) {
     color: -moz-DialogText;
     background-color: hsla(210, 4%, 10%, .08);
     border-color: hsla(210, 4%, 10%, .1);
   }
 
+  .findbar-button:not([disabled=true]):-moz-any([checked="true"],:hover:active),
   .toolbarbutton-1 >
   .toolbarbutton-menubutton-button:not([disabled=true]):hover:active,
   .toolbarbutton-1[open] >
   .toolbarbutton-menubutton-dropmarker:not([disabled=true]),
   .toolbarbutton-1:not([type="menu-button"]):not([disabled]):-moz-any([open],:hover:active) {
     background-color: hsla(210, 4%, 10%, .12);
     border-color: hsla(210, 4%, 10%, .1);
     border-top-color: hsla(210, 4%, 10%, .2);