Migrate ui to match Test Pilot updates

- apply new styles - handle some scss errors(waiting on sasstools/sass-lint#70 to silence some of the incorrect errors) - get l10n up to date with template changes - update client tests to pass - fixes #441
mozilla · Mar 11, 2016 · e08ce4f · e08ce4f
1 parent b1bbc77
commit e08ce4f
Show file tree

Hide file tree

Showing 66 changed files with 849 additions and 854 deletions.
diff --git a/gulpfile.js b/gulpfile.js
@@ -19,7 +19,6 @@ const sassLint = require('gulp-sass-lint');
 const source = require('vinyl-source-stream');
 const sourcemaps = require('gulp-sourcemaps');
 const through = require('through2');
-const tabzilla = require('mozilla-tabzilla');
 const uglify = require('gulp-uglify');
 const tryRequire = require('try-require');
 
@@ -28,12 +27,6 @@ const IS_DEBUG = (process.env.NODE_ENV === 'development');
 const SRC_PATH = './testpilot/frontend/static-src/';
 const DEST_PATH = './testpilot/frontend/static/';
 
-// HACK: Under Docker, the node_modules install has been moved.
-// So, look for the vendor assets there. Otherwise, look in current dir
-const NODE_MODULES_PATH = ('NODE_PATH' in process.env) ?
-    process.env.NODE_PATH.split(':')[0] :
-    './node_modules/';
-
 const config = tryRequire('./debug-config.json') || {
   'sass-lint': true,
   'js-lint': true
@@ -64,18 +57,6 @@ gulp.task('clean', function cleanTask() {
   ]);
 });
 
-gulp.task('npm:tabzilla:img', function npmTabzillaImgTask() {
-  return gulp.src(NODE_MODULES_PATH + 'mozilla-tabzilla/media/**')
-    // the tabzilla css looks for images in "../media/img/" :-(
-    .pipe(gulp.dest(DEST_PATH + 'media/'));
-});
-
-gulp.task('vendor', function vendorTask(done) {
-  return runSequence([
-    'npm:tabzilla:img'
-  ], done);
-});
-
 // based on https://github.com/gulpjs/gulp/blob/master/docs/recipes/browserify-with-globs.md,
 // except we use the Promise returned by globby, instead of passing it a callback.
 gulp.task('scripts', shouldLint('js-lint', 'lint'), function scriptsTask() {
@@ -114,8 +95,7 @@ gulp.task('styles', shouldLint('sass-lint', 'sass-lint'), function stylesTask()
     .pipe(sourcemaps.init())
     .pipe(sass({
       includePaths: [
-        normalize.includePaths,
-        tabzilla.includePaths
+        normalize.includePaths
       ]
     }).on('error', sass.logError))
     .pipe(autoprefixer('last 2 versions'))
@@ -125,8 +105,15 @@ gulp.task('styles', shouldLint('sass-lint', 'sass-lint'), function stylesTask()
     .pipe(gulp.dest(DEST_PATH + 'styles'));
 });
 
+// the globbing pattern here should be cleaned up
+// when node-sass supports inline ignores
+// see the note in the _hidpi-mixin for details
 gulp.task('sass-lint', function sassLintTask() {
-  return gulp.src(SRC_PATH + '/styles/**/*.scss')
+  const files = [
+    SRC_PATH + '/styles/**/*.scss',
+    '!' + SRC_PATH + '/styles/_hidpi-mixin.scss'
+  ];
+  return gulp.src(files)
     .pipe(sassLint())
     .pipe(sassLint.format())
     .pipe(sassLint.failOnError());
@@ -151,7 +138,6 @@ gulp.task('addon', function localesTask() {
 gulp.task('build', function buildTask(done) {
   runSequence(
     'clean',
-    'vendor',
     'scripts',
     'styles',
     'images',

diff --git a/locales/en-US/app.l20n b/locales/en-US/app.l20n
@@ -1,9 +1,9 @@
-<siteName "Test Pilot">
+<siteName "Firefox Test Pilot">
 
-<pageTitleDefault "Test Pilot">
-<pageTitleLandingPage "Test Pilot - Help build Firefox">
-<pageTitleExperimentListPage "Test Pilot - Experiments">
-<pageTitleExperiment "Test Pilot - {{title}}">
+<pageTitleDefault "Firefox Test Pilot">
+<pageTitleLandingPage "Firefox Test Pilot">
+<pageTitleExperimentListPage "Firefox Test Pilot - Experiments">
+<pageTitleExperiment "Firefox Test Pilot - {{title}}">
 
 <headerSubtitle "The innovative community where new Ideas for Firefox are tested.">
 
@@ -19,26 +19,29 @@
 <menuFileIssue "File an Issue">
 <menuLogout "Logout">
 
-<landingWelcome "Welcome to Test Pilot">
-<landingIntro "Test new features.<br> Give us feedback.<br> Help build Firefox.">
-<landingFxaGetStartedButton "Get started with your Firefox Account">
-<landingFxaAlternateButton "Don't have an account? Sign up.">
-<landingCtaLegal "By proceeding, you agree to the <a>Terms of Service</a> and <a>Privacy Notice</a> of Test Pilot.">
-<landingBetaNotice "We're still building Test Pilot! Sign up now and we'll let you know when it's ready to go!">
-<landingBetaSignup "Sign me up!">
-<landingInstallHeader "Install the Test Pilot Add-on <br> and you're good to go!">
+
+
+<landingFxaAlternateButton "Sign in">
+<landingIntroOne "Test out new features.">
+<landingIntroTwo "Give us feedback.">
+<landingIntroThree "Help build Firefox.">
+<landingFxaGetStartedButton "Get started with a Firefox Account">
+<landingLegalNotice "By proceeding, you agree to the <a>Terms of Service</a> and <a>Privacy Notice</a> of Test Pilot.">
+<landingPageFooterCopy "More tests coming soon!">
+<landingInstallHeaderOne "Install the Test Pilot Add-on">
+<landingInstallHeaderTwo "and you're good to go!">
 <landingInstallButton "Install the Add-on">
 
 <errorHeading "Whoops!">
 <errorMessage "Looks like we broke something. Maybe try again later">
 
 <notFoundHeader "Four Oh Four!">
 
-<signUpThanks "Thanks for signing up!">
-<signUpEmailWhenReady "We'll email you when Test Pilot is ready.">
+<experimentListPageHeader "Welcome to Firefox Test Pilot!">
+<experimentListPageSubHeader  "We're always trying out new features in Firefox. <br> Pick any of the tests below to see what we're working on!">
 
 <experimentListInactiveHover "Get Started">
-<experimentListActiveHover "View Details">
+<experimentListActiveHover "Manage">
 
 <giveFeedback "Give Feedback">
 

diff --git a/package.json b/package.json
@@ -23,7 +23,6 @@
     "isomorphic-fetch": "^2.1.1",
     "js-cookie": "^2.0.3",
     "jsonwebtoken": "5.7.0",
-    "mozilla-tabzilla": "^0.5.1",
     "mustache": "^2.1.3",
     "node-normalize-scss": "^1.0.3",
     "nodemon": "^1.4.1",

diff --git a/testpilot/frontend/static-src/app/lib/page-manager.js b/testpilot/frontend/static-src/app/lib/page-manager.js
@@ -3,7 +3,6 @@ import AmpersandViewSwitcher from 'ampersand-view-switcher';
 
 import ErrorPage from '../views/error-page';
 import ExperimentPage from '../views/experiment-page';
-import AccountInactivePage from '../views/account-inactive-page';
 import ExperimentListPage from '../views/experiment-list-page';
 import LandingPage from '../views/landing-page';
 import NotFoundPage from '../views/not-found-page';
@@ -22,7 +21,6 @@ export default class PageManager {
       'landing': LandingPage,
       'experiments': ExperimentListPage,
       'experimentDetail': ExperimentPage,
-      'accountInactive': AccountInactivePage,
       'notFound': NotFoundPage,
       'error': ErrorPage
     };

diff --git a/testpilot/frontend/static-src/app/lib/router.js b/testpilot/frontend/static-src/app/lib/router.js
@@ -12,7 +12,6 @@ export default Router.extend({
     'home(/)': 'home',
     'experiments/:experiment(/)': 'experimentDetail',
     'experiments(/)': 'experiments',
-    'accounts/inactive(/)': 'accountInactive',
     '404': 'notFound',
     'error': 'error',
     '(*path)': 'notFound'
@@ -56,10 +55,6 @@ export default Router.extend({
     this.redirectTo('experiments');
   },
 
-  accountInactive() {
-    app.trigger('router:new-page', {page: 'accountInactive'});
-  },
-
   notFound() {
     app.trigger('router:new-page', {page: 'notFound'});
   },

diff --git a/testpilot/frontend/static-src/app/templates/experiment-list-page.js b/testpilot/frontend/static-src/app/templates/experiment-list-page.js
@@ -0,0 +1,22 @@
+export default `
+    <div>
+      <div class="blue">
+        <header data-hook="header-view"></header>
+        <div class="centered-banner">
+          <div class="copter-wrapper">
+            <div class="copter fly-up"></div>
+          </div>
+          <div class="intro-text">
+            <h2 data-l10n-id="experimentListPageHeader">Welcome to Firefox Test Pilot!</h2>
+            <p data-l10n-id="experimentListPageSubHeader">We're always trying out new features in Firefox. <br> Pick any of the tests below to see what we're working on!</p>
+          </div>
+        </div>
+      </div>
+      <div class="content-wrapper">
+        <div data-hook="experiment-list"></div>
+      </div>
+      <footer id="main-footer" class="content-wrapper">
+        <div data-hook="footer-view"></div>
+      </footer>
+    </div>
+`;
diff --git a/testpilot/frontend/static-src/app/templates/experiment-page.js b/testpilot/frontend/static-src/app/templates/experiment-page.js
@@ -1,62 +1,67 @@
 export default `
-  <div class="page">
-    <section id="details" data-hook="experiment-page">
-      <header data-hook="main-header"></header>
-      <div class="details-header-wrapper">
-        <div class="details-header">
-          <h1 data-hook="title"></h1>
-          <span class="now-active" data-hook="now-active" data-l10n-id="nowActive">Now Active</span>
-          <div class="idea-controls">
-            <button data-l10n-id="giveFeedback" data-hook="feedback" id="feedback-button" class="button primary">Give Feedback</button>
-            <button data-hook="uninstall" id="uninstall-button" class="button neutral"><span class="state-change-inner"></span><span data-l10n-id="disableExperimentTransition" class="transition-text">Disabling...</span><span data-l10n-id="disableExperiment" class="default-text">Disable <span data-hook="title"></span></span></button>
-            <button data-hook="install" id="install-button" class="button primary"><span class="state-change-inner"></span><span data-l10n-id="enableExperimentTransition" class="transition-text">Enabling...</span><span data-l10n-id="enableExperiment" class="default-text">Enable <span data-hook="title"></span></span></button>
-            <span class="user-count"></span>
-            <span data-hook="install-count"></span>
-          </div>
+  <section id="details" data-hook="experiment-page">
+    <div class="blue">
+      <header data-hook="header-view"></header>
+    </div>
+    <div class="spacer"></div>
+    <div class="details-header-wrapper">
+      <div class="details-header content-wrapper">
+        <h1 data-hook="title"></h1>
+        <span class="now-active" data-hook="now-active" data-l10n-id="nowActive">Now Active</span>
+        <div class="experiment-controls">
+          <button data-l10n-id="giveFeedback" data-hook="feedback" id="feedback-button" class="button primary">Give Feedback</button>
+          <button data-hook="uninstall" id="uninstall-button" class="button secondary"><span class="state-change-inner"></span><span data-l10n-id="disableExperimentTransition" class="transition-text">Disabling...</span><span data-l10n-id="disableExperiment" class="default-text">Disable <span data-hook="title"></span></span></button>
+          <button data-hook="install" id="install-button" class="button default"><span class="state-change-inner"></span><span data-l10n-id="enableExperimentTransition" class="transition-text">Enabling...</span><span data-l10n-id="enableExperiment" class="default-text">Enable <span data-hook="title"></span></span></button>
+          <span data-hook="install-count"></span>
+          <span class="user-count"></span>
         </div>
       </div>
-
-      <div data-hook="details">
-        <div class="details-content">
+    </div>
+    <div data-hook="details">
+        <div class="details-content content-wrapper">
           <div class="details-overview">
-            <img data-hook="thumbnail" src="" width="260" height="260">
-            <section data-hook="measurements-container" class="measurement">
-              <h3 data-l10n-id="measurements">Measurements</h3>
-              <p data-l10n-id="measurementsDisclaimer" class="disclaimer">All data is collected anonymously and used only to help us improve this test.</p>
-              <div data-hook="measurements-html"></div>
-              <a data-l10n-id="experimentPrivacyNotice" data-hook="privacy-notice-url"><span data-hook="title"></span> Privacy Notice</a>
-            </section>
-            <section>
-              <h3 data-l10n-id="contributorsHeading">Brought to you by</h3>
-              <ul class="contributors"></ul>
-            </section>
-            <section>
-              <h3 data-l10n-id="detailsHeading">Details</h3>
-              <table class="stats">
-                <tr data-hook="version-container">
-                  <td data-l10n-id="version">Version</td>
-                  <td>
-                    <span data-hook="version"></span>
-                    &nbsp;<a data-l10n-id="changelog" data-hook="changelog-url">changelog</a>
-                  </td>
-                </tr>
-                <tr>
-                  <td data-l10n-id="lastUpdate">Last Update</td>
-                  <td data-hook="modified-date"></td>
-                </tr>
-                <tr>
-                  <td data-l10n-id="contribute">Contribute</td>
-                  <td><a data-hook="contribute-url"></a></td>
-                </tr>
-              </table>
-            </section>
+            <div class="experiment-icon-wrapper">
+              <img class="experiment-icon" data-hook="thumbnail"></img>
+            </div>
+            <div class="details-sections">
+              <section data-hook="measurements-container" class="measurement">
+                <h3 data-l10n-id="measurements">Measurements</h3>
+                <p data-l10n-id="measurementsDisclaimer" class="disclaimer">All data is collected anonymously and used only to help us improve this test.</p>
+                <div data-hook="measurements-html"></div>
+                <a class="privacy-policy" data-l10n-id="experimentPrivacyNotice" data-hook="privacy-notice-url"><span data-hook="title"></span> Privacy Notice</a>
+              </section>
+              <section>
+                <h3 data-l10n-id="contributorsHeading">Brought to you by</h3>
+                <ul class="contributors"></ul>
+              </section>
+              <section>
+                <h3 data-l10n-id="detailsHeading">Details</h3>
+                <table class="stats">
+                  <tr data-hook="version-container">
+                    <td data-l10n-id="version">Version</td>
+                    <td>
+                      <span data-hook="version"></span>
+                      &nbsp;<a data-l10n-id="changelog" data-hook="changelog-url">changelog</a>
+                    </td>
+                  </tr>
+                  <tr>
+                    <td data-l10n-id="lastUpdate">Last Update</td>
+                    <td data-hook="modified-date"></td>
+                  </tr>
+                  <tr>
+                    <td data-l10n-id="contribute">Contribute</td>
+                    <td><a data-hook="contribute-url"></a></td>
+                  </tr>
+                </table>
+              </section>
+            </div>
           </div>
 
           <div class="details-description"></div>
         </div>
       </div>
-
-    </section>
-    <div data-hook="main-footer"></div>
-  </div>
+      <footer id="main-footer" class="content-wrapper">
+        <div data-hook="footer-view"></div>
+      </footer>
+  </section>
 `;
diff --git a/testpilot/frontend/static-src/app/templates/header-view.js b/testpilot/frontend/static-src/app/templates/header-view.js
@@ -1,18 +1,9 @@
 export default `
-  <section class="navbar">
-      <div data-hook="active-user" id="expanded-branding">
-        <div class="wrapper">
-          <header>
-            <div class="firefox-logo"></div>
-            <h1 data-l10n-id="siteName">Test Pilot</h1>
-            <p data-l10n-id="headerSubtitle" class="subtitle">The innovative community where new Ideas for Firefox are tested.</p>
-          </header>
-          <div class="town-background"></div>
-          <div data-hook="settings"></div>
-        </div>
-      </div>
-      <div data-hook="inactive-user" id="tabzilla">
-        <a data-l10n-id="mozilla" href="https://www.mozilla.org/">Mozilla</a>
-      </div>
-  </section>
-`;
+  <header id="main-header" class="content-wrapper" data-hook="active-user">
+    <h1>
+      <span class="firefox-logo"></span>
+      <span data-hook="title"></span>
+    </h1>
+    <div data-hook="settings"></div>
+  </header>
+  `;