Add an intro page to the manager; resolves mozilla-lockwise#292

src/webextension/list/manage/components/intro-page.css

@@ -0,0 +1,40 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+.intro-images {
+  display: grid;
+  grid-auto-flow: column;
+  grid-template-columns: 1fr 1fr 1fr;
+  grid-template-rows: auto auto auto;
+  grid-column-gap: 4em;
+  margin: 4em auto;
+  padding: 0 4em;
+  max-width: 800px;
+}
+
+.intro-image {
+  display: contents;
+  text-align: center;
+}
+
+.intro-image > h1,
+.intro-image > p {
+  overflow: hidden;
+}
+
+.intro-image > img {
+  width: 100%;
+  border: 1px solid rgba(12, 12, 13, 0.3);
+  border-radius: 5px;
+  box-shadow: 0 0 10px rgba(12, 12, 13, 0.3);
+}
+
+.intro-image > h1 {
+  font-size: 17px;
+  margin-bottom: 0;
+}
+
+.intro-image > p {
+  font-size: 15px;
+}

src/webextension/list/manage/components/intro-page.js

@@ -0,0 +1,55 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import { Localized } from "fluent-react";
+import PropTypes from "prop-types";
+import React from "react";
+
+import AccountDetails from "../containers/account-details";
+
+import styles from "./intro-page.css";
+
+function IntroImage({src, title, children}) {
+  return (
+    <div className={styles.introImage}>
+      <img src={src} alt=""/>
+      <h1>{title}</h1>
+      <p>{children}</p>
+    </div>
+  );
+}
+
+IntroImage.propTypes = {
+  src: PropTypes.string.isRequired,
+  title: PropTypes.string.isRequired,
+  children: PropTypes.node,
+};
+
+export default function IntroPage() {
+  return (
+    <article className={styles.introPage}>
+      <section className={styles.introImages}>
+        <Localized id="intro-page-step-1">
+          <IntroImage src={browser.extension.getURL("/images/intro-step-1.png")}
+                      title="aDd lOGIn iNFo to lOCKBOx">
+            sAVe uSERNAMe aNd pASSWORd...
+          </IntroImage>
+        </Localized>
+        <Localized id="intro-page-step-2">
+          <IntroImage src={browser.extension.getURL("/images/intro-step-2.png")}
+                      title="go sTRAIGHt to yOUr lOGINs">
+            cLICk tHe lOCKBOx iCOn...
+          </IntroImage>
+        </Localized>
+        <Localized id="intro-page-step-3">
+          <IntroImage src={browser.extension.getURL("/images/intro-step-3.png")}
+                      title="sIGn in fROm lOCKBOx">
+            cOPy an eNTRY&apos;s iNFo...
+          </IntroImage>
+        </Localized>
+      </section>
+      <AccountDetails/>
+    </article>
+  );
+}

src/webextension/list/manage/containers/current-selection.js

@@ -14,6 +14,7 @@ import {
 import EditItemDetails from "../components/edit-item-details";
 import ItemDetails from "../components/item-details";
 import Homepage from "../components/homepage";
+import IntroPage from "../components/intro-page";
 
 const ConnectedEditItemDetails = connect(
   (state, ownProps) => ({
@@ -51,7 +52,7 @@ const ConnectedItemDetails = connect(
   })
 )(ItemDetails);
 
-function CurrentSelection({editing, item, hideHome}) {
+function CurrentSelection({editing, item, hideHome, numItems}) {
   let inner;
   if (editing) {
     inner = <ConnectedEditItemDetails item={item}/>;
@@ -60,8 +61,10 @@ function CurrentSelection({editing, item, hideHome}) {
   } else if (hideHome) {
     // Don't show anything since we're still loading the item details.
     inner = null;
-  } else {
+  } else if (numItems !== 0) {
     inner = <Homepage/>;
+  } else {
+    inner = <IntroPage/>;
   }
   return <div>{inner}</div>;
 }
@@ -70,12 +73,14 @@ CurrentSelection.propTypes = {
   editing: PropTypes.bool.isRequired,
   item: PropTypes.object,
   hideHome: PropTypes.bool.isRequired,
+  numItems: PropTypes.number.isRequired,
 };
 
 export default connect(
   (state) => ({
     editing: state.editor.editing,
     hideHome: state.editor.hideHome,
     item: state.cache.currentItem,
+    numItems: state.cache.items.length,
   })
 )(CurrentSelection);

src/webextension/locales/en-US/list.ftl

@@ -45,6 +45,21 @@ all-items-empty =
 
 all-items-filtered = No results
 
+intro-page-step-1 =
+  Save username and password info to create a { product-title } entry.
+
+  .title = Add Login Info to { product-title }
+
+intro-page-step-2 =
+  Click the { product-title } icon to see all the entries you've saved.
+
+  .title = Go Straight to Your Logins
+
+intro-page-step-3 =
+  Copy an entry's info to sign in right from Firefox.
+
+  .title = Sign in From { product-title }
+
 homepage-title = { product-tagline }
 
 homepage-linkaccount-title = Add Serious Security & Convenience

test/integration/pages/home.py

@@ -11,11 +11,10 @@
 class Home(Base):
     """Contain the locators and actions relating to the home page."""
 
+    _modal_portal_locator = (By.CLASS_NAME, 'ReactModalPortal')
     _entries_locator = (By.CSS_SELECTOR,
                         'ul li div.{}'.format(
                             munged_class_name('item-summary')))
-    _homepage_section_locator = (By.CSS_SELECTOR, '.{} h1'.format(
-                                 munged_class_name('homepage')))
     _delete_entry_locator = (By.CSS_SELECTOR,
                              'article div menu '
                              'button.{}'.format(munged_class_name('normal')))
@@ -42,7 +41,7 @@ def door_hanger(self):
     def wait_for_page_to_load(self):
         """Wait for page to load."""
         self.wait.until(
-            lambda s: s.find_element(*self._homepage_section_locator))
+            lambda s: s.find_element(*self._modal_portal_locator))
         return self
 
     @property