Bug 1001535 - Update the findbar-buttons to toolbarbutton-1 styling. …

…r=josiah
mozilla · May 8, 2015 · ca4d12b · ca4d12b
1 parent f3a946f
commit ca4d12b
Show file tree

Hide file tree

Showing 5 changed files with 83 additions and 14 deletions.
diff --git a/mail/components/compose/content/MsgComposeCommands.js b/mail/components/compose/content/MsgComposeCommands.js
@@ -2007,7 +2007,7 @@ function ComposeStartup(recycled, aParams)
   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"));

diff --git a/mail/themes/osx/mail/compose/messengercompose.css b/mail/themes/osx/mail/compose/messengercompose.css
@@ -45,6 +45,20 @@ toolbar[nowindowdrag="true"] {
 
 /* ::::: 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 {
@@ -56,25 +70,27 @@ toolbar[nowindowdrag="true"] {
   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),
@@ -83,6 +99,12 @@ toolbar[nowindowdrag="true"] {
   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;
 }
@@ -91,6 +113,7 @@ toolbar[nowindowdrag="true"] {
 .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),

diff --git a/mail/themes/osx/mail/primaryToolbar.css b/mail/themes/osx/mail/primaryToolbar.css
@@ -62,6 +62,15 @@
 
 /* ::::: 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 {
@@ -73,19 +82,21 @@
   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"] >
@@ -100,6 +111,12 @@
   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;
 }

diff --git a/mail/themes/windows/mail/compose/messengercompose-aero.css b/mail/themes/windows/mail/compose/messengercompose-aero.css
@@ -135,13 +135,18 @@ toolbar:not(:-moz-lwtheme) {
   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 {
@@ -185,6 +190,7 @@ toolbox[labelalign="end"] .toolbarbutton-menubutton-button {
     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 >
@@ -213,6 +219,7 @@ toolbox[labelalign="end"] .toolbarbutton-menubutton-button {
                 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),
@@ -242,6 +249,7 @@ toolbox[labelalign="end"] .toolbarbutton-menubutton-button {
 }
 
 @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 {
@@ -252,6 +260,7 @@ toolbox[labelalign="end"] .toolbarbutton-menubutton-button {
     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]) >
@@ -264,6 +273,7 @@ toolbox[labelalign="end"] .toolbarbutton-menubutton-button {
     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] >
@@ -433,6 +443,11 @@ toolbox[labelalign="end"] > toolbar[mode="full"] deck .toolbarbutton-text {
   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 {
@@ -442,6 +457,10 @@ toolbox[labelalign="end"] > toolbar[mode="full"] deck .toolbarbutton-text {
   #headers-box {
     border-bottom-color: #A9B7C9;
   }
+
+  findbar {
+    background-color: #eef3fa;
+  }
 }
 
 @media (-moz-windows-glass) {

diff --git a/mail/themes/windows/mail/primaryToolbar-aero.css b/mail/themes/windows/mail/primaryToolbar-aero.css
@@ -48,6 +48,10 @@
   min-height: 24px;
 }
 
+.findbar-button {
+  padding: 2px 6px;
+}
+
 @media not all and (-moz-windows-default-theme) {
   #messengerWindow[tabsintitlebar] #mail-menubar > menu {
     -moz-appearance: none;
@@ -56,6 +60,7 @@
 
 @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 {
@@ -84,6 +89,7 @@
     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 >
@@ -111,6 +117,7 @@
                 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) {
@@ -139,6 +146,7 @@
 }
 
 @media (-moz-os-version: windows-win8) {
+  .findbar-button,
   .toolbarbutton-1:not([type="menu-button"]),
   .toolbarbutton-1 > .toolbarbutton-menubutton-button,
   .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
@@ -153,6 +161,7 @@
     -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]) >
@@ -165,6 +174,7 @@
     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] >