--- a/browser/components/translation/translation-infobar.xml
+++ b/browser/components/translation/translation-infobar.xml
@@ -16,145 +16,147 @@
           xmlns="http://www.mozilla.org/xbl"
           xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
           xmlns:xbl="http://www.mozilla.org/xbl">
   <binding id="translationbar" extends="chrome://global/content/bindings/notification.xml#notification" role="xul:alert">
     <resources>
       <stylesheet src="chrome://global/skin/notification.css"/>
     </resources>
     <content>
-      <xul:hbox anonid="details" align="center" flex="1">
-        <xul:image class="translate-infobar-element messageImage"
-                   anonid="messageImage"/>
-        <xul:panel anonid="welcomePanel" class="translation-welcome-panel"
-                   type="arrow" align="start">
-          <xul:image class="translation-welcome-logo"/>
-          <xul:vbox flex="1" class="translation-welcome-content">
-            <xul:description class="translation-welcome-headline"
-                             anonid="welcomeHeadline"/>
-            <xul:description class="translation-welcome-body" anonid="welcomeBody"/>
-            <xul:hbox align="center">
-              <xul:label anonid="learnMore" class="plain text-link"
-                         onclick="openUILinkIn('https://support.mozilla.org/kb/automatic-translation', 'tab'); this.parentNode.parentNode.parentNode.hidePopup();"/>
-              <xul:spacer flex="1"/>
-              <xul:button class="translate-infobar-element" anonid="thanksButton"
-                          onclick="this.parentNode.parentNode.parentNode.hidePopup();"/>
-            </xul:hbox>
-          </xul:vbox>
-        </xul:panel>
-        <xul:deck anonid="translationStates" selectedIndex="0">
+      <xul:hbox class="notification-inner" flex="1" xbl:inherits="type">
+        <xul:hbox anonid="details" align="center" flex="1">
+          <xul:image class="translate-infobar-element messageImage"
+                     anonid="messageImage"/>
+          <xul:panel anonid="welcomePanel" class="translation-welcome-panel"
+                     type="arrow" align="start">
+            <xul:image class="translation-welcome-logo"/>
+            <xul:vbox flex="1" class="translation-welcome-content">
+              <xul:description class="translation-welcome-headline"
+                               anonid="welcomeHeadline"/>
+              <xul:description class="translation-welcome-body" anonid="welcomeBody"/>
+              <xul:hbox align="center">
+                <xul:label anonid="learnMore" class="plain text-link"
+                           onclick="openUILinkIn('https://support.mozilla.org/kb/automatic-translation', 'tab'); this.parentNode.parentNode.parentNode.hidePopup();"/>
+                <xul:spacer flex="1"/>
+                <xul:button class="translate-infobar-element" anonid="thanksButton"
+                            onclick="this.parentNode.parentNode.parentNode.hidePopup();"/>
+              </xul:hbox>
+            </xul:vbox>
+          </xul:panel>
+          <xul:deck anonid="translationStates" selectedIndex="0">
 
-          <!-- offer to translate -->
-          <xul:hbox class="translate-offer-box" align="center">
-            <xul:label class="translate-infobar-element" value="&translation.thisPageIsIn.label;"/>
-            <xul:menulist class="translate-infobar-element" anonid="detectedLanguage">
-              <xul:menupopup/>
-            </xul:menulist>
-            <xul:label class="translate-infobar-element" value="&translation.translateThisPage.label;"/>
-            <xul:button class="translate-infobar-element"
-                        label="&translation.translate.button;"
-                        anonid="translate"
-                        oncommand="document.getBindingParent(this).translate();"/>
-            <xul:button class="translate-infobar-element"
-                        label="&translation.notNow.button;" anonid="notNow"
-                        oncommand="document.getBindingParent(this).closeCommand();"/>
-          </xul:hbox>
+            <!-- offer to translate -->
+            <xul:hbox class="translate-offer-box" align="center">
+              <xul:label class="translate-infobar-element" value="&translation.thisPageIsIn.label;"/>
+              <xul:menulist class="translate-infobar-element" anonid="detectedLanguage">
+                <xul:menupopup/>
+              </xul:menulist>
+              <xul:label class="translate-infobar-element" value="&translation.translateThisPage.label;"/>
+              <xul:button class="translate-infobar-element"
+                          label="&translation.translate.button;"
+                          anonid="translate"
+                          oncommand="document.getBindingParent(this).translate();"/>
+              <xul:button class="translate-infobar-element"
+                          label="&translation.notNow.button;" anonid="notNow"
+                          oncommand="document.getBindingParent(this).closeCommand();"/>
+            </xul:hbox>
 
-          <!-- translating -->
-          <xul:vbox class="translating-box" pack="center">
-            <xul:label class="translate-infobar-element"
-                       value="&translation.translatingContent.label;"/>
-          </xul:vbox>
+            <!-- translating -->
+            <xul:vbox class="translating-box" pack="center">
+              <xul:label class="translate-infobar-element"
+                         value="&translation.translatingContent.label;"/>
+            </xul:vbox>
 
-          <!-- translated -->
-          <xul:hbox class="translated-box" align="center">
-            <xul:label class="translate-infobar-element"
-                       value="&translation.translatedFrom.label;"/>
-            <xul:menulist class="translate-infobar-element"
-                          anonid="fromLanguage"
-                          oncommand="document.getBindingParent(this).translate()">
-              <xul:menupopup/>
-            </xul:menulist>
-            <xul:label class="translate-infobar-element"
-                       value="&translation.translatedTo.label;"/>
-            <xul:menulist class="translate-infobar-element"
-                          anonid="toLanguage"
-                          oncommand="document.getBindingParent(this).translate()">
-              <xul:menupopup/>
-            </xul:menulist>
-            <xul:label class="translate-infobar-element"
-                       value="&translation.translatedToSuffix.label;"/>
-            <xul:button anonid="showOriginal"
-                        class="translate-infobar-element"
-                        label="&translation.showOriginal.button;"
-                        oncommand="document.getBindingParent(this).showOriginal();"/>
-            <xul:button anonid="showTranslation"
-                        class="translate-infobar-element"
-                        label="&translation.showTranslation.button;"
-                        oncommand="document.getBindingParent(this).showTranslation();"/>
-          </xul:hbox>
+            <!-- translated -->
+            <xul:hbox class="translated-box" align="center">
+              <xul:label class="translate-infobar-element"
+                         value="&translation.translatedFrom.label;"/>
+              <xul:menulist class="translate-infobar-element"
+                            anonid="fromLanguage"
+                            oncommand="document.getBindingParent(this).translate()">
+                <xul:menupopup/>
+              </xul:menulist>
+              <xul:label class="translate-infobar-element"
+                         value="&translation.translatedTo.label;"/>
+              <xul:menulist class="translate-infobar-element"
+                            anonid="toLanguage"
+                            oncommand="document.getBindingParent(this).translate()">
+                <xul:menupopup/>
+              </xul:menulist>
+              <xul:label class="translate-infobar-element"
+                         value="&translation.translatedToSuffix.label;"/>
+              <xul:button anonid="showOriginal"
+                          class="translate-infobar-element"
+                          label="&translation.showOriginal.button;"
+                          oncommand="document.getBindingParent(this).showOriginal();"/>
+              <xul:button anonid="showTranslation"
+                          class="translate-infobar-element"
+                          label="&translation.showTranslation.button;"
+                          oncommand="document.getBindingParent(this).showTranslation();"/>
+            </xul:hbox>
 
-          <!-- error -->
-          <xul:hbox class="translation-error" align="center">
-            <xul:label class="translate-infobar-element"
-                       value="&translation.errorTranslating.label;"/>
-            <xul:button class="translate-infobar-element"
-                        label="&translation.tryAgain.button;"
-                        anonid="tryAgain"
-                        oncommand="document.getBindingParent(this).translate();"/>
-          </xul:hbox>
+            <!-- error -->
+            <xul:hbox class="translation-error" align="center">
+              <xul:label class="translate-infobar-element"
+                         value="&translation.errorTranslating.label;"/>
+              <xul:button class="translate-infobar-element"
+                          label="&translation.tryAgain.button;"
+                          anonid="tryAgain"
+                          oncommand="document.getBindingParent(this).translate();"/>
+            </xul:hbox>
+
+            <!-- unavailable -->
+            <xul:vbox class="translation-unavailable" pack="center">
+              <xul:label class="translate-infobar-element"
+                         value="&translation.serviceUnavailable.label;"/>
+            </xul:vbox>
 
-          <!-- unavailable -->
-          <xul:vbox class="translation-unavailable" pack="center">
-            <xul:label class="translate-infobar-element"
-                       value="&translation.serviceUnavailable.label;"/>
-          </xul:vbox>
-
-        </xul:deck>
-        <xul:spacer flex="1"/>
+          </xul:deck>
+          <xul:spacer flex="1"/>
 
-        <xul:button type="menu"
-                    class="translate-infobar-element options-menu-button"
-                    anonid="options"
-                    label="&translation.options.menu;">
-          <xul:menupopup class="translation-menupopup cui-widget-panel cui-widget-panelview
-                                cui-widget-panelWithFooter PanelUI-subView"
-                         onpopupshowing="document.getBindingParent(this).optionsShowing();">
-            <xul:menuitem anonid="neverForLanguage"
-                          oncommand="document.getBindingParent(this).neverForLanguage();"/>
-            <xul:menuitem anonid="neverForSite"
-                          oncommand="document.getBindingParent(this).neverForSite();"
-                          label="&translation.options.neverForSite.label;"
-                          accesskey="&translation.options.neverForSite.accesskey;"/>
-            <xul:menuseparator/>
-            <xul:menuitem oncommand="openPreferences('paneGeneral', {origin:'translationInfobar'});"
-                          label="&translation.options.preferences.label;"
-                          accesskey="&translation.options.preferences.accesskey;"/>
-            <xul:menuitem class="subviewbutton panel-subview-footer"
-                          oncommand="document.getBindingParent(this).openProviderAttribution();">
-              <xul:deck anonid="translationEngine" selectedIndex="0">
-                <xul:hbox class="translation-attribution">
-                  <xul:label>&translation.options.attribution.beforeLogo;</xul:label>
-                  <xul:image src="chrome://browser/content/microsoft-translator-attribution.png"
-                             aria-label="Microsoft Translator"/>
-                  <xul:label>&translation.options.attribution.afterLogo;</xul:label>
-                </xul:hbox>
-                <xul:label class="translation-attribution">&translation.options.attribution.yandexTranslate;</xul:label>
-              </xul:deck>
-            </xul:menuitem>
-          </xul:menupopup>
-        </xul:button>
+          <xul:button type="menu"
+                      class="translate-infobar-element options-menu-button"
+                      anonid="options"
+                      label="&translation.options.menu;">
+            <xul:menupopup class="translation-menupopup cui-widget-panel cui-widget-panelview
+                                  cui-widget-panelWithFooter PanelUI-subView"
+                           onpopupshowing="document.getBindingParent(this).optionsShowing();">
+              <xul:menuitem anonid="neverForLanguage"
+                            oncommand="document.getBindingParent(this).neverForLanguage();"/>
+              <xul:menuitem anonid="neverForSite"
+                            oncommand="document.getBindingParent(this).neverForSite();"
+                            label="&translation.options.neverForSite.label;"
+                            accesskey="&translation.options.neverForSite.accesskey;"/>
+              <xul:menuseparator/>
+              <xul:menuitem oncommand="openPreferences('paneGeneral', {origin:'translationInfobar'});"
+                            label="&translation.options.preferences.label;"
+                            accesskey="&translation.options.preferences.accesskey;"/>
+              <xul:menuitem class="subviewbutton panel-subview-footer"
+                            oncommand="document.getBindingParent(this).openProviderAttribution();">
+                <xul:deck anonid="translationEngine" selectedIndex="0">
+                  <xul:hbox class="translation-attribution">
+                    <xul:label>&translation.options.attribution.beforeLogo;</xul:label>
+                    <xul:image src="chrome://browser/content/microsoft-translator-attribution.png"
+                               aria-label="Microsoft Translator"/>
+                    <xul:label>&translation.options.attribution.afterLogo;</xul:label>
+                  </xul:hbox>
+                  <xul:label class="translation-attribution">&translation.options.attribution.yandexTranslate;</xul:label>
+                </xul:deck>
+              </xul:menuitem>
+            </xul:menupopup>
+          </xul:button>
 
+        </xul:hbox>
+        <xul:toolbarbutton ondblclick="event.stopPropagation();"
+                           anonid="closeButton"
+                           class="messageCloseButton close-icon tabbable"
+                           xbl:inherits="hidden=hideclose"
+                           tooltiptext="&closeNotification.tooltip;"
+                           oncommand="document.getBindingParent(this).closeCommand();"/>
       </xul:hbox>
-      <xul:toolbarbutton ondblclick="event.stopPropagation();"
-                         anonid="closeButton"
-                         class="messageCloseButton close-icon tabbable"
-                         xbl:inherits="hidden=hideclose"
-                         tooltiptext="&closeNotification.tooltip;"
-                         oncommand="document.getBindingParent(this).closeCommand();"/>
     </content>
     <implementation>
       <property name="state"
                 onget="return this._getAnonElt('translationStates').selectedIndex;">
         <setter>
           <![CDATA[
           let deck = this._getAnonElt("translationStates");
 

--- a/toolkit/content/widgets/notification.xml
+++ b/toolkit/content/widgets/notification.xml
@@ -394,28 +394,30 @@
           this._finishAnimation();
       ]]></handler>
     </handlers>
 
   </binding>
 
   <binding id="notification" role="xul:alert">
     <content>
-      <xul:hbox anonid="details" align="center" flex="1"
-                oncommand="this.parentNode._doButtonCommand(event);">
-        <xul:image anonid="messageImage" class="messageImage" xbl:inherits="src=image,type,value"/>
-        <xul:description anonid="messageText" class="messageText" flex="1" xbl:inherits="xbl:text=label"/>
-        <xul:spacer flex="1"/>
-        <children/>
+      <xul:hbox class="notification-inner" flex="1" xbl:inherits="type">
+        <xul:hbox anonid="details" align="center" flex="1"
+                  oncommand="this.parentNode.parentNode._doButtonCommand(event);">
+          <xul:image anonid="messageImage" class="messageImage" xbl:inherits="src=image,type,value"/>
+          <xul:description anonid="messageText" class="messageText" flex="1" xbl:inherits="xbl:text=label"/>
+          <xul:spacer flex="1"/>
+          <children/>
+        </xul:hbox>
+        <xul:toolbarbutton ondblclick="event.stopPropagation();"
+                           class="messageCloseButton close-icon tabbable"
+                           xbl:inherits="hidden=hideclose"
+                           tooltiptext="&closeNotification.tooltip;"
+                           oncommand="document.getBindingParent(this).dismiss();"/>
       </xul:hbox>
-      <xul:toolbarbutton ondblclick="event.stopPropagation();"
-                         class="messageCloseButton close-icon tabbable"
-                         xbl:inherits="hidden=hideclose"
-                         tooltiptext="&closeNotification.tooltip;"
-                         oncommand="document.getBindingParent(this).dismiss();"/>
     </content>
     <resources>
       <stylesheet src="chrome://global/skin/notification.css"/>
     </resources>
     <implementation>
       <property name="label" onset="this.setAttribute('label', val); return val;"
                              onget="return this.getAttribute('label');"/>
       <property name="value" onset="this.setAttribute('value', val); return val;"