Bug 1072740 - Translation - Implement doorhanger for in-product promotion, r=felipe.
--- a/browser/components/translation/translation-infobar.xml
+++ b/browser/components/translation/translation-infobar.xml
@@ -18,16 +18,31 @@
<resources>
<stylesheet src="chrome://global/skin/notification.css"/>
</resources>
<content>
<xul:hbox class="notification-inner outset" 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"/>
+ <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>
@@ -193,16 +208,51 @@
for (let [code, name] of targetLanguages)
toLanguage.appendItem(name, code);
if (aTranslation.translatedTo)
toLanguage.value = aTranslation.translatedTo;
if (aTranslation.state)
this.state = aTranslation.state;
+
+ const kWelcomePref = "browser.translation.ui.welcomeMessageShown";
+ if (Services.prefs.prefHasUserValue(kWelcomePref))
+ return;
+
+ this.addEventListener("transitionend", function onShown() {
+ this.removeEventListener("transitionend", onShown);
+
+ // These strings are hardcoded because they need to reach beta
+ // without riding the trains.
+ let localizedStrings = {
+ en: ["Hey look! It's something new!",
+ "Now the Web is even more accessible with our new in-page translation feature. Click the translate button to try it!",
+ "Learn more.",
+ "Thanks"]
+ };
+
+ let locale = Cc["@mozilla.org/chrome/chrome-registry;1"]
+ .getService(Ci.nsIXULChromeRegistry)
+ .getSelectedLocale("browser");
+ if (!(locale in localizedStrings))
+ locale = "en";
+ let strings = localizedStrings[locale];
+
+ this._getAnonElt("welcomeHeadline").setAttribute("value", strings[0]);
+ this._getAnonElt("welcomeBody").textContent = strings[1];
+ this._getAnonElt("learnMore").setAttribute("value", strings[2]);
+ this._getAnonElt("thanksButton").setAttribute("label", strings[3]);
+
+ let panel = this._getAnonElt("welcomePanel");
+ panel.openPopup(this._getAnonElt("messageImage"),
+ "bottomcenter topleft");
+
+ Services.prefs.setBoolPref(kWelcomePref, true);
+ });
]]>
</body>
</method>
<method name="_getAnonElt">
<parameter name="aAnonId"/>
<body>
return document.getAnonymousElementByAttribute(this, "anonid", aAnonId);
--- a/browser/themes/shared/translation/infobar.inc.css
+++ b/browser/themes/shared/translation/infobar.inc.css
@@ -59,8 +59,33 @@ notification[value="translation"] menuli
.translation-attribution > label {
margin-bottom: 0;
}
.translation-attribution > image {
width: 70px;
}
+
+.translation-welcome-panel {
+ width: 305px;
+}
+
+.translation-welcome-logo {
+ height: 32px;
+ width: 32px;
+ list-style-image: url(chrome://browser/skin/translation-16@2x.png);
+ -moz-image-region: rect(0, 64px, 32px, 32px);
+}
+
+.translation-welcome-content {
+ -moz-margin-start: 16px;
+}
+
+.translation-welcome-headline {
+ font-size: larger;
+ font-weight: bold;
+}
+
+.translation-welcome-body {
+ padding: 1em 0;
+ margin: 0 0;
+}