Fix #3444, toggle different onboarding tour for FF 57+

- For 57+, include the full screen / save visible step in the tour, for four steps overall. Also change the Get Started text and image to refer to a page action, not a toolbar button. - For 56- and non-FF browsers, show the three step tour and refer to the toolbar button. - Add some trivial model unit tests, to get that ball rolling.
mozilla-services · Sep 8, 2017 · 67a3262 · 67a3262
1 parent 33bb5ff
commit 67a3262
Show file tree

Hide file tree

Showing 8 changed files with 282 additions and 35 deletions.
diff --git a/locales/en-US/server.ftl b/locales/en-US/server.ftl
@@ -48,6 +48,8 @@ homePageHowScreenshotsWorks = How Firefox Screenshots Works
 homePageGetStartedTitle = Get Started
 // Note: Screenshots is an abbreviation for Firefox Screenshots, and should not be translated.
 homePageGetStartedDescription = Find the new Screenshots icon on your toolbar. Select it, and the Screenshots menu will appear on top of your browser window.
+// Note: Screenshots is an abbreviation for Firefox Screenshots, and should not be translated.
+homePageGetStartedDescriptionPageAction = Select the Screenshots icon from the page actions menu in the address bar, and the Screenshots menu will appear on top of your browser window.
 homePageCaptureRegion = Capture a Region
 // Note: Screenshots is an abbreviation for Firefox Screenshots, and should not be translated.
 homePageCaptureRegionDescription = Click and drag to select the area you want to capture. Or just hover and click — Screenshots will select the area for you. Like what you see? Select Save to access your screenshot online or the down arrow button to download it to your computer.

diff --git a/package.json b/package.json
@@ -11,6 +11,7 @@
     "atob": "2.0.3",
     "aws-sdk": "2.106.0",
     "btoa": "1.1.2",
+    "classnames": "2.2.5",
     "content-disposition": "0.5.2",
     "convict": "4.0.0",
     "cookies": "0.7.1",

diff --git a/server/src/pages/homepage/model.js b/server/src/pages/homepage/model.js
@@ -1,9 +1,25 @@
 exports.createModel = function(req) {
-  let isFirefox = (/firefox\/\d{1,255}/i).test(req.headers['user-agent']);
+  let isMobile = exports.isMobile(req.headers['user-agent']);
+  let firefoxVersion = exports.getFirefoxVersion(req.headers['user-agent']);
   let model = {
     title: "Firefox Screenshots",
     showMyShots: !!req.deviceId,
-    isFirefox
+    isFirefox: !!firefoxVersion && !isMobile,
+    firefoxVersion
   };
   return model;
 };
+
+// Helper functions exported for unit testing
+
+exports.getFirefoxVersion = (userAgent) => {
+  // https://mdn.io/UserAgent/Firefox suggests filtering on "rv:" and "Gecko".
+  // Return null or the major part of the Firefox version (for 57+ check, #3444).
+  let results = /rv:.*Gecko.*Firefox\/([0-9]+)/.exec(userAgent);
+  return results && results[1];
+};
+
+exports.isMobile = (userAgent) => {
+  // https://mdn.io/UserAgent/Firefox suggests filtering on "Mobi" and "Tablet".
+  return /Mobi|Tablet/.test(userAgent);
+};
diff --git a/server/src/pages/homepage/view.js b/server/src/pages/homepage/view.js
@@ -1,5 +1,6 @@
 const React = require("react");
 const reactruntime = require("../../reactruntime");
+const classnames = require("classnames");
 const sendEvent = require("../../browser-send-event.js");
 const { Footer } = require("../../footer-view.js");
 const { Localized } = require("fluent-react/compat");
@@ -77,6 +78,7 @@ class Body extends React.Component {
         </Localized>
       </a>
     }
+    const is57 = this.props.isFirefox && this.props.firefoxVersion >= 57;
     return (
       <reactruntime.BodyTemplate {...this.props}>
         <div className="default-color-scheme">
@@ -113,54 +115,63 @@ class Body extends React.Component {
           </Localized>
           <section id="section-1">
             <div className="container">
-              <div className="section-content">
+              <div className="section-content align-left">
                 <Localized id="homePageGetStartedTitle">
                   <h3>Get Started</h3>
                 </Localized>
-                <Localized id="homePageGetStartedDescription">
-                  <p>Find the new Screenshots icon on your toolbar. Select it, and the Screenshots menu will appear on top of your browser window.</p>
-                </Localized>
+                { is57 ? (
+                    <Localized id="homePageGetStartedDescriptionPageAction">
+                      <p>Select the Screenshots icon from the page actions menu in the address bar, and the Screenshots menu will appear on top of your browser window.</p>
+                    </Localized>
+                  ) : (
+                    <Localized id="homePageGetStartedDescription">
+                      <p>Find the new Screenshots icon on your toolbar. Select it, and the Screenshots menu will appear on top of your browser window.</p>
+                    </Localized>
+                  )
+                }
               </div>
-              <div className="section-image"></div>
+              <div className={classnames("section-image", "align-right", {"page-action": is57})}></div>
             </div>
           </section>
           <section id="section-2">
             <div className="container">
-              <div className="section-content">
+              <div className="section-content align-right">
                 <Localized id="homePageCaptureRegion">
                   <h3>Capture a Region</h3>
                 </Localized>
                 <Localized id="homePageCaptureRegionDescription">
                   <p>Click and drag to select the area you want to capture. Or just hover and click — Screenshots will select the area for you. Like what you see? Select Save to access your screenshot online or the down arrow button to download it to your computer.</p>
                 </Localized>
               </div>
-              <div className="section-image"></div>
-            </div>
-          </section>
-          <section id="section-3">
-            <div className="container">
-              <div className="section-content">
-                <Localized id="homePageCapturePage">
-                  <h3>Capture a Page</h3>
-                </Localized>
-                <Localized id="homePageCapturePageDescription">
-                  <p>Use the buttons in the upper right to capture full pages. The Save Visible button will capture the area you can view without scrolling, and the Save Full Page will capture everything on the page.</p>
-                </Localized>
-              </div>
-              <div className="section-image"></div>
+              <div className="section-image align-left"></div>
             </div>
           </section>
+          { is57 &&
+              <section id="section-3">
+                <div className="container">
+                  <div className="section-content align-left">
+                    <Localized id="homePageCapturePage">
+                      <h3>Capture a Page</h3>
+                    </Localized>
+                    <Localized id="homePageCapturePageDescription">
+                      <p>Use the buttons in the upper right to capture full pages. The Save Visible button will capture the area you can view without scrolling, and the Save Full Page will capture everything on the page.</p>
+                    </Localized>
+                  </div>
+                  <div className="section-image align-right"></div>
+                </div>
+              </section>
+          }
           <section id="section-4">
             <div className="container">
-              <div className="section-content">
+              <div className={classnames("section-content", {"align-right": is57}, {"align-left": !is57})}>
                 <Localized id="homePageSaveShare">
                   <h3>Save and Share</h3>
                 </Localized>
                 <Localized id="homePageSaveShareDescription">
                   <p>When you take a shot, Firefox posts your screenshot to your online Screenshots library and copies the link to your clipboard. We automatically store your screenshot for two weeks, but you can delete shots at any time or change the expiration date to keep them in your library for longer. </p>
                 </Localized>
               </div>
-              <div className="section-image"></div>
+              <div className={classnames("section-image", {"align-left": is57}, {"align-right": !is57})}></div>
             </div>
           </section>
           <Footer {...this.props} />

diff --git a/static/css/home.scss b/static/css/home.scss
@@ -292,6 +292,10 @@ section .container {
   height: 476px;
 }
 
+#section-1 .section-image.page-action {
+  background-image:   url("../img/landing-screenshots_image_01_57.svg");
+}
+
 #section-2 .section-image {
   background-image:   url("../img/landing-screenshots_image_02.svg");
   background-position: 0% center;
@@ -313,19 +317,15 @@ section .container {
   height: 533px;
 }
 
-#section-1 .section-content,
-#section-2 .section-image,
-#section-4 .section-content {
+/* These align-* layout styles are used for the onboarding tour sections */
+.align-left {
   order: 1;
 }
 
-#section-1 .section-image,
-#section-2 .section-content,
-#section-4 .section-image {
+.align-right {
   order: 2;
 }
 
-
 /* Coming Soon Section */
 
 #coming {