Merge pull request mozilla#1572 from johngruen/reword-restart-page

reword restart page

frontend/src/app/components/MainInstallButton.js

@@ -10,32 +10,30 @@ export default class MainInstallButton extends React.Component {
     };
   }
 
-  install(evt, experimentTitle) {
+  install() {
     const { requireRestart, sendToGA, eventCategory, hasAddon, installAddon } = this.props;
     if (hasAddon) { return; }
     this.setState({ isInstalling: true });
-    installAddon(requireRestart, sendToGA, eventCategory, experimentTitle);
+    installAddon(requireRestart, sendToGA, eventCategory);
   }
 
   render() {
     const { isFirefox, isMinFirefox, hasAddon } = this.props;
     const isInstalling = this.state.isInstalling && !hasAddon;
-    const experimentTitle = ('experimentTitle' in this.props &&
-                             this.props.experimentTitle);
 
     return (
       <div>
-        {(isMinFirefox) ? this.renderInstallButton(experimentTitle, isInstalling, hasAddon) : this.renderAltButton(isFirefox) }
+        {(isMinFirefox) ? this.renderInstallButton(isInstalling, hasAddon) : this.renderAltButton(isFirefox) }
         {isMinFirefox && <p data-l10n-id="landingLegalNotice" className="legal-information">By proceeding,
           you agree to the <a href="/terms">Terms of Use</a> and <a href="/privacy">Privacy Notice</a> of Test Pilot</p>}
       </div>
     );
   }
 
-  renderInstallButton(experimentTitle, isInstalling, hasAddon) {
+  renderInstallButton(isInstalling, hasAddon) {
     return (
       <div>
-        <button onClick={e => this.install(e, experimentTitle)} data-hook="install"
+        <button onClick={e => this.install(e)} data-hook="install"
                 className={classnames('button extra-large primary install', { 'state-change': isInstalling })}>
           {hasAddon && <span className="progress-btn-msg" data-l10n-id="landingInstallingButton">Installed</span>}
           {!hasAddon && !isInstalling &&

frontend/src/app/containers/App.js

@@ -81,7 +81,7 @@ class App extends Component {
   render() {
     const { restart } = this.props.addon;
     if (restart.isRequired) {
-      return <RestartPage experimentTitle={ restart.forExperiment } {...this.props}/>;
+      return <RestartPage {...this.props}/>;
     }
     return React.cloneElement(this.props.children, this.props);
   }
@@ -141,8 +141,7 @@ export default connect(
     navigateTo: path => dispatch(routerPush(path)),
     enableExperiment: experiment => enableExperiment(dispatch, experiment),
     disableExperiment: experiment => disableExperiment(dispatch, experiment),
-    requireRestart: experimentTitle =>
-      dispatch(addonActions.requireRestart(experimentTitle)),
+    requireRestart: () => dispatch(addonActions.requireRestart()),
     setHasAddon: installed => {
       dispatch(addonActions.setHasAddon(installed));
       if (!installed) { pollAddon(); }

frontend/src/app/containers/RestartPage.js

@@ -12,29 +12,21 @@ export default class Restart extends React.Component {
     });
   }
 
-  renderSubtitle() {
-    const { experimentTitle } = this.props;
-    if (experimentTitle) {
-      return (
-        <h2 data-l10n-id="restartRequiredFromExperiment">
-           data-l10n-args={JSON.stringify({ experimentTitle })}
-          Please restart Firefox <br/> to enable { experimentTitle }.
-        </h2>
-      );
-    }
-    return (
-      <h2 data-l10n-id="restartRequiredFromLanding">
-        Please restart Firefox <br/> to choose your features.
-      </h2>
-    );
-  }
-
   render() {
     return (
       <View spaceBetween={true} {...this.props}>
-        <div className="centered-banner restart-message">
-          <p data-l10n-id="restartRequiredSubHeader">Almost done . . .</p>
-          { this.renderSubtitle() }
+        <div className="split-banner restart-message responsive-content-wrapper">
+          <div className="restart-image">
+            <img src="/static/images/[email protected]" width="208" height="273"/>
+          </div>
+          <div className="intro-text">
+            <span data-l10n-id="restartIntroLead" className="block lead-in">Preflight checklist</span>
+            <ol className="banner">
+              <li data-l10n-id="restartIntroOne">Restart your browser</li>
+              <li data-l10n-id="restartIntroTwo">Locate the Test Pilot add-on</li>
+              <li data-l10n-id="restartIntroThree">Select your experiments</li>
+            </ol>
+          </div>
         </div>
       </View>
     );

frontend/src/app/lib/addon.js

@@ -28,7 +28,7 @@ function mozAddonManagerInstall(url) {
   });
 }
 
-export function installAddon(requireRestart, sendToGA, eventCategory, experimentTitle) {
+export function installAddon(requireRestart, sendToGA, eventCategory) {
   const { protocol, hostname, port } = window.location;
   const path = '/static/addon/addon.xpi';
   const downloadUrl = `${protocol}//${hostname}${port ? ':' + port : ''}${path}`;
@@ -50,7 +50,7 @@ export function installAddon(requireRestart, sendToGA, eventCategory, experiment
       gaEvent.dimension7 = RESTART_NEEDED ? 'restart required' : 'no restart';
       sendToGA('event', gaEvent);
       if (RESTART_NEEDED) {
-        requireRestart(experimentTitle);
+        requireRestart();
       }
     });
   } else {

frontend/src/app/reducers/addon.js

@@ -22,12 +22,11 @@ const disableExperiment = (state, { payload: experiment }) => {
   return { ...state, installed: newInstalled };
 };
 
-const requireRestart = (state, { payload: experimentTitle }) => {
+const requireRestart = state => {
   return {
     ...state,
     restart: {
-      isRequired: true,
-      forExperiment: experimentTitle || null
+      isRequired: true
     }
   };
 };

frontend/src/styles/modules/_banners.scss

@@ -134,18 +134,56 @@
   }
 }
 
+.restart-image {
+  @include respond-to('big') {
+    background-color: $white;
+    background-position: center center;
+    background-repeat: no-repeat;
+    border-radius: $small-border-radius;
+    height: 313px;
+    margin-right: $grid-unit * 4;
+    padding: $grid-unit;
+    width: 248px;
+  }
+
+  @include respond-to('medium') {
+    display: none;
+  }
+
+  @include respond-to('small') {
+    display: none;
+  }
+}
+
 .restart-message {
-  h2 {
+
+  ol {
+    list-style-type: decimal;
+    margin: 0;
+  }
+
+  li {
     @include respond-to('not-small') {
-      font-size: $font-unit * 4;
-      line-height: $font-unit * 4.9;
+      font-size: $font-unit * 3.6;
+      line-height: $font-unit * 5.8;
       margin-bottom: $grid-unit * .5;
     }
 
-    font-style: italic;
+    @include respond-to('small') {
+      text-align: left;
+    }
+
     margin: 0;
   }
 
+  .lead-in {
+    @include respond-to('small') {
+      text-align: left;
+    }
+
+    font-size: $font-unit * 2;
+  }
+
   p {
     @include respond-to('not-small') {
       font-size: $font-unit * 2;

frontend/test/app/containers/RestartPage-test.js

@@ -10,7 +10,6 @@ describe('app/containers/RestartPage', () => {
   let props, subject;
   beforeEach(function() {
     props = {
-      experimentTitle: null,
       hasAddon: false,
       uninstallAddon: sinon.spy(),
       sendToGA: sinon.spy(),
@@ -31,19 +30,10 @@ describe('app/containers/RestartPage', () => {
     }]);
   });
 
-  it('should display expected content without experiment title', () => {
-    expect(findByL10nID('restartRequiredSubHeader')).to.have.property('length', 1);
-    expect(findByL10nID('restartRequiredFromLanding')).to.have.property('length', 1);
-    expect(findByL10nID('restartRequiredFromExperiment')).to.have.property('length', 0);
+  it('should display restart instructions', () => {
+    expect(findByL10nID('restartIntroLead')).to.have.property('length', 1);
+    expect(findByL10nID('restartIntroOne')).to.have.property('length', 1);
+    expect(findByL10nID('restartIntroTwo')).to.have.property('length', 1);
+    expect(findByL10nID('restartIntroThree')).to.have.property('length', 1);
   });
-
-  it('should display expected content with experiment title', () => {
-    const experimentTitle = 'foo bar baz';
-    subject.setProps({ experimentTitle });
-
-    expect(findByL10nID('restartRequiredSubHeader')).to.have.property('length', 1);
-    expect(findByL10nID('restartRequiredFromLanding')).to.have.property('length', 0);
-    expect(findByL10nID('restartRequiredFromExperiment')).to.have.property('length', 1);
-  });
-
 });

locales/en-US/app.ftl

@@ -127,6 +127,11 @@ retirePageHeadline = Thanks for flying!
 retirePageMessage = Hope you had fun experimenting with us. <br> Come back any time.
 retirePageSurveyButton = Take a quick survey
 
+restartIntroLead = Preflight checklist
+restartIntroOne = Restart your browser
+restartIntroTwo = Locate the Test Pilot add-on
+restartIntroThree = Select your experiments
+
 measurements = Your privacy
 experimentPrivacyNotice = You can learn more about the data collection for {$title} here.
 contributorsHeading = Brought to you by
@@ -157,10 +162,6 @@ shareCopy = Copy
 
 eolMessage = <strong>This experiment is ending on {$completedDate}</strong>.<br/><br/>After then you will still be able to use {$title} but we will no longer be providing updates or support.
 
-restartRequiredSubHeader = Almost done . . .
-restartRequiredFromLanding = Please restart Firefox <br/> to choose your features.
-restartRequiredFromExperiment = Please restart Firefox <br/> to enable {$experimentTitle}.
-
 incompatibleHeader = This experiment may not be compatible with add-ons you have installed.
 incompatibleSubheader = We recommend <a href="{$url}">disabling these add-ons</a> before activating this experiment: