Bug 988481 - Implement Windows/Linux styling of Translation Infobar. r=mano

browser/components/translation/translation-infobar.xml

@@ -25,7 +25,7 @@
           <xul:deck anonid="translationStates" selectedIndex="0">
 
             <!-- offer to translate -->
-            <xul:hbox class="translate-offer-box" align="baseline">
+            <xul:hbox class="translate-offer-box" align="center">
               <xul:label value="&translation.thisPageIsIn.label;"/>
               <xul:menulist anonid="detectedLanguage">
                 <xul:menupopup/>
@@ -43,7 +43,7 @@
             </xul:vbox>
 
             <!-- translated -->
-            <xul:hbox class="translated-box" align="baseline">
+            <xul:hbox class="translated-box" align="center">
               <xul:label value="&translation.translatedFrom.label;"/>
               <xul:menulist anonid="fromLanguage"
                             oncommand="document.getBindingParent(this).translate()">
@@ -64,7 +64,7 @@
             </xul:hbox>
 
             <!-- error -->
-            <xul:hbox class="translation-error" align="baseline">
+            <xul:hbox class="translation-error" align="center">
               <xul:label value="&translation.errorTranslating.label;"/>
               <xul:button label="&translation.tryAgain.button;" anonid="tryAgain"
                           oncommand="document.getBindingParent(this).translate();"/>

browser/themes/linux/browser.css

@@ -1415,6 +1415,53 @@ toolbarbutton[sdk-button="true"][cui-areatype="toolbar"] > .toolbarbutton-icon {
   margin: 0px;
 }
 
+/* Translation infobar */
+
+%include ../shared/translation/infobar.inc.css
+
+notification[value="translation"],
+notification[value="translation"] button,
+notification[value="translation"] menulist {
+  color: #5A5959;
+}
+
+notification[value="translation"] {
+  background-color: #F2F1F0;
+}
+
+notification[value="translation"] menulist {
+  border: 1px solid #C1C1C1;
+  background-color: #FFF;
+}
+
+notification[value="translation"] button {
+  border: 1px solid #C1C1C1;
+  background-color: #F2F1F0;
+}
+
+notification[value="translation"] button:hover,
+notification[value="translation"] button:active,
+notification[value="translation"] menulist:hover,
+notification[value="translation"] menulist:active {
+  background-color: #E2E1E0;
+}
+
+notification[value="translation"] button[anonid="translate"] {
+  color: #FFF;
+  background-image: linear-gradient(#9FB938, #8DA726);
+  box-shadow: none;
+  border: 1px solid #829C1C;
+}
+
+notification[value="translation"] button[anonid="translate"]:hover,
+notification[value="translation"] button[anonid="translate"]:active {
+  background-image: linear-gradient(#8DA726, #8DA726);
+}
+
+notification[value="translation"] menulist > .menulist-dropmarker {
+  display: block;
+}
+
 .translate-notification-icon,
 #translate-notification-icon {
   list-style-image: url(chrome://browser/skin/translation-16.png);

browser/themes/shared/translation/infobar.inc.css

@@ -0,0 +1,58 @@
+%if 0
+/* 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/. */
+%endif
+notification[value="translation"] .messageImage {
+  list-style-image: url(chrome://browser/skin/translation-16.png);
+  -moz-image-region: rect(0px, 32px, 16px, 16px);
+}
+
+@media (min-resolution: 1.25dppx) {
+  list-style-image: url(chrome://browser/skin/translation-16@2x.png);
+  -moz-image-region: rect(0px, 64px, 32px, 32px);
+}
+
+notification[value="translation"] {
+  min-height: 40px;
+}
+
+notification[value="translation"] button,
+notification[value="translation"] menulist {
+  -moz-appearance: none;
+  border-width: 1px;
+  -moz-border-top-colors: none;
+  -moz-border-right-colors: none;
+  -moz-border-bottom-colors: none;
+  -moz-border-left-colors: none;
+  border-radius: 2px;
+  min-width: 0;
+  min-height: 30px;
+  -moz-padding-end: 1ch;
+  box-shadow: 0px 1px rgba(255, 255, 255, 0.5), 0px 1px rgba(255, 255, 255, 0.5) inset;
+}
+
+notification[value="translation"] button > .button-box,
+notification[value="translation"] button[type="menu"] > .button-box > .button-menu-dropmarker {
+  padding: 0;
+  -moz-margin-start: 3ch;
+}
+
+notification[value="translation"] button:not([type="menu"]) > .button-box {
+  -moz-margin-end: 3ch;
+}
+
+notification[value="translation"] button,
+notification[value="translation"] menulist,
+notification[value="translation"] menulist > .menulist-label-box {
+  -moz-margin-start: 1ch;
+  -moz-margin-end: 1ch;
+}
+
+notification[value="translation"] menulist > .menulist-dropmarker {
+  -moz-appearance: toolbarbutton-dropdown;
+  border: none;
+  background-color: transparent;
+  margin: auto;
+  padding: 5px 0;
+}

browser/themes/windows/browser.css

@@ -2405,6 +2405,63 @@ toolbarbutton.bookmark-item[dragover="true"][open="true"] {
   margin: 0px;
 }
 
+/* Translation infobar */
+
+%include ../shared/translation/infobar.inc.css
+
+@media (-moz-windows-default-theme) {
+  notification[value="translation"],
+  notification[value="translation"] button,
+  notification[value="translation"] menulist {
+    color: #545454;
+  }
+
+  notification[value="translation"] {
+    background-color: #EEE;
+  }
+
+  notification[value="translation"] menulist {
+    border: 1px solid #C1C1C1;
+    background-color: #FFF;
+  }
+
+  notification[value="translation"] button {
+    border: 1px solid #C1C1C1;
+    background-color: #FBFBFB;
+  }
+
+  notification[value="translation"] button:hover,
+  notification[value="translation"] button:active,
+  notification[value="translation"] menulist:hover,
+  notification[value="translation"] menulist:active {
+    background-color: #EBEBEB;
+  }
+
+  notification[value="translation"] button[anonid="translate"] {
+    color: #FFF;
+    background-color: #0095DD;
+    box-shadow: none;
+    border: 1px solid #006B9D;
+  }
+
+  notification[value="translation"] button[anonid="translate"]:hover,
+  notification[value="translation"] button[anonid="translate"]:active {
+    background-color: #008ACB;
+  }
+
+  notification[value="translation"] button[type="menu"] > .button-box > .button-menu-dropmarker,
+  notification[value="translation"] menulist > .menulist-dropmarker {
+    list-style-image: url("chrome://browser/skin/toolbarbutton-dropdown-arrow.png");
+  }
+
+  @media (min-resolution: 1.25dppx) {
+    notification[value="translation"] button[type="menu"] > .button-box > .button-menu-dropmarker,
+    notification[value="translation"] menulist > .menulist-dropmarker {
+      list-style-image: url("chrome://browser/skin/toolbarbutton-dropdown-arrow@2x.png");
+    }
+  }
+}
+
 .translate-notification-icon,
 #translate-notification-icon {
   list-style-image: url(chrome://browser/skin/translation-16.png);