Bug 1072740 - Translation - Implement doorhanger for in-product promotion. r=felipe, a=lmandel
authorFlorian Quèze <florian@queze.net>
Mon, 06 Oct 2014 15:21:11 +0200
changeset 225667 28b6fd92454a37411ffd8e81bf06cc4c6d7ae96f
parent 225666 8c7cb61c3d93028e92d29a38fdc411829b59a060
child 225668 7828b2d6dc4a4c0ee3cfc6b8e2994d19bc5d53ba
push id3979
push userraliiev@mozilla.com
push dateMon, 13 Oct 2014 16:35:44 +0000
treeherdermozilla-beta@30f2cc610691 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersfelipe, lmandel
bugs1072740
milestone34.0a2
Bug 1072740 - Translation - Implement doorhanger for in-product promotion. r=felipe, a=lmandel
browser/components/translation/translation-infobar.xml
browser/themes/shared/translation/infobar.inc.css
--- 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;
+}