Bug 1509565 - Add Pocket bug fixes, Snippets Templates compat fixes to Activity Stream r=k88hudson

Differential Revision: https://phabricator.services.mozilla.com/D12805

--HG--
extra : moz-landing-system : lando

browser/components/newtab/content-src/asrouter/components/Button/Button.jsx

@@ -17,7 +17,7 @@ export const Button = props => {
   }
 
   return (<button onClick={props.onClick}
-    className={props.className || "ASRouterButton"}
+    className={props.className || "ASRouterButton secondary"}
     style={style}>
     {props.children}
   </button>);

browser/components/newtab/content-src/asrouter/components/Button/_Button.scss

@@ -1,9 +1,9 @@
 .ASRouterButton {
-  font-weight: bold;
+  font-weight: 600;
+  font-size: 14px;
   white-space: nowrap;
   border-radius: 2px;
-  border: 1px solid var(--newtab-border-secondary-color);
+  border: 0;
-  background-color: var(--newtab-button-secondary-color);
   font-family: inherit;
   padding: 8px 15px;
   margin-inline-start: 12px;
@@ -18,12 +18,54 @@
     border: 1px solid var(--newtab-button-primary-color);
     background-color: var(--newtab-button-primary-color);
     color: $grey-10;
+
+    &:hover {
+      background-color: $blue-70;
+    }
+
+    &:active {
+      background-color: $blue-80;
+    }
   }
 
   &.secondary {
-    background: var(--newtab-button-secondary-color);
+    background-color: $grey-90-10;
-    border: 1px solid var(--newtab-border-primary-color);
+
-    font-size: 14px;
+    &:hover {
-    font-weight: 600;
+      background-color: $grey-90-20;
+    }
+
+    &:active {
+      background-color: $grey-90-30;
+    }
+  }
+}
+
+[lwt-newtab-brighttext] {
+  .secondary {
+    background-color: $grey-10-10;
+
+    &:hover {
+      background-color: $grey-10-20;
+    }
+
+    &:active {
+      background-color: $grey-10-30;
+    }
+  }
+
+  // Snippets scene 2 footer
+  .footer {
+    .secondary {
+      background-color: $grey-10-30;
+
+      &:hover {
+        background-color: $grey-10-40;
+      }
+
+      &:active {
+        background-color: $grey-10-50;
+      }
+    }
   }
 }

browser/components/newtab/content-src/asrouter/components/SnippetBase/SnippetBase.jsx

@@ -1,4 +1,5 @@
 import React from "react";
+import schema from "../../templates/SimpleSnippet/SimpleSnippet.schema.json";
 
 export class SnippetBase extends React.PureComponent {
   constructor(props) {
@@ -29,8 +30,9 @@ export class SnippetBase extends React.PureComponent {
       );
     }
 
+    const defaultTitle = schema.properties.block_button_text.default;
     return (
-      <button className="blockButton" title={this.props.content.block_button_text || "Remove this"} onClick={this.onBlockClicked} />
+      <button className="blockButton" title={this.props.content.block_button_text || defaultTitle} onClick={this.onBlockClicked} />
     );
   }
 

browser/components/newtab/content-src/asrouter/components/SnippetBase/_SnippetBase.scss

@@ -1,5 +1,8 @@
 .SnippetBaseContainer {
   position: fixed;
+  // Make sure ASR snippets show on top of legacy snippets
+  // This can happen when ASR preview is used with legacy snippets
+  z-index: 2;
   bottom: 0;
   left: 0;
   right: 0;
@@ -15,7 +18,10 @@
   a {
     cursor: pointer;
     color: var(--newtab-link-primary-color);
-    text-decoration: underline;
+
+    &:hover {
+      text-decoration: underline;
+    }
 
     [lwt-newtab-brighttext] & {
       font-weight: bold;
@@ -42,9 +48,9 @@
       padding-inline-end: $section-horizontal-padding;
     }
 
-    max-width: $wrapper-max-width-large;
+    max-width: $wrapper-max-width-large + ($section-horizontal-padding * 2);
     @media (min-width: $break-point-widest) {
-      max-width: $wrapper-max-width-widest;
+      max-width: $wrapper-max-width-widest + ($section-horizontal-padding * 2);
     }
   }
 

browser/components/newtab/content-src/asrouter/rich-text-strings.js

@@ -7,6 +7,8 @@ import {MessageContext} from "fluent";
  */
 const RICH_TEXT_CONFIG = {
   "text": ["text", "scene1_text"],
+  "success_text": "success_text",
+  "error_text": "error_text",
   "scene2_text": "scene2_text",
   "privacy_html": "scene2_privacy_html",
   "disclaimer_html": "scene2_disclaimer_html",

browser/components/newtab/content-src/asrouter/templates/EOYSnippet/EOYSnippet.jsx

@@ -1,4 +1,5 @@
 import React from "react";
+import schema from "./EOYSnippet.schema.json";
 import {SimpleSnippet} from "../SimpleSnippet/SimpleSnippet";
 
 class EOYSnippetBase extends React.PureComponent {
@@ -63,7 +64,7 @@ class EOYSnippetBase extends React.PureComponent {
       <input type="hidden" name="frequency" value="single" />
       <input type="hidden" name="currency" value={this.props.content.currency_code} />
       <input type="hidden" name="presets" value={fieldNames.map(field => this.props.content[`donation_amount_${field}`])} />
-      <button style={btnStyle} type="submit" className="ASRouterButton donation-form-url">{this.props.content.button_label}</button>
+      <button style={btnStyle} type="submit" className="ASRouterButton primary donation-form-url">{this.props.content.button_label}</button>
     </form>);
   }
 
@@ -83,10 +84,10 @@ class EOYSnippetBase extends React.PureComponent {
 
 export const EOYSnippet = props => {
   const extendedContent = {
-    monthly_checkbox_label_text: "Make my donation monthly",
+    monthly_checkbox_label_text: schema.properties.monthly_checkbox_label_text.default,
-    locale: "en-US",
+    locale: schema.properties.locale.default,
-    currency_code: "usd",
+    currency_code: schema.properties.currency_code.default,
-    selected_button: "donation_amount_second",
+    selected_button: schema.properties.selected_button.default,
     ...props.content,
   };
 

browser/components/newtab/content-src/asrouter/templates/EOYSnippet/EOYSnippet.schema.json

@@ -25,11 +25,13 @@
     },
     "currency_code": {
       "type": "string",
-      "description": "The code for the currency. Examle gbp, cad, usd."
+      "description": "The code for the currency. Examle gbp, cad, usd.",
+      "default": "usd"
     },
     "locale": {
       "type": "string",
-      "description": "String for the locale code."
+      "description": "String for the locale code.",
+      "default": "en-US"
     },
     "text": {
       "allOf": [
@@ -67,7 +69,8 @@
     },
     "selected_button": {
       "type": "string",
-      "description": "Default donation_amount_second. Donation amount button that's selected by default."
+      "description": "Default donation_amount_second. Donation amount button that's selected by default.",
+      "default": "donation_amount_second"
     },
     "icon": {
       "type": "string",
@@ -97,7 +100,8 @@
     },
     "monthly_checkbox_label_text": {
       "type": "string",
-      "description": "Label text for monthly checkbox."
+      "description": "Label text for monthly checkbox.",
+      "default": "Make my donation monthly"
     },
     "test": {
       "type": "string",

browser/components/newtab/content-src/asrouter/templates/EOYSnippet/_EOYSnippet.scss

@@ -27,11 +27,17 @@
       opacity: 0;
       margin-inline-end: -18px;
 
-      &:checked+.donation-amount {
+      &:checked + .donation-amount {
         background: $grey-50;
         color: $white;
         border: 1px solid $grey-60;
       }
+
+      // accessibility
+      &:checked:focus + .donation-amount,
+      &:not(:checked):focus + .donation-amount {
+        border: 1px dotted var(--newtab-link-primary-color);
+      }
     }
   }
 
@@ -52,11 +58,7 @@
 
   .donation-form-url {
     margin-inline-start: 18px;
-    background-color: var(--newtab-button-primary-color);
-    border: 0;
-    color: $white;
     align-self: flex-end;
     display: flex;
-    cursor: pointer;
   }
 }

browser/components/newtab/content-src/asrouter/templates/FXASignupSnippet/FXASignupSnippet.jsx

@@ -1,4 +1,5 @@
 import React from "react";
+import schema from "./FXASignupSnippet.schema.json";
 import {SubmitFormSnippet} from "../SubmitFormSnippet/SubmitFormSnippet.jsx";
 
 export const FXASignupSnippet = props => {
@@ -6,9 +7,9 @@ export const FXASignupSnippet = props => {
   const firefox_version = userAgent ? parseInt(userAgent[1], 10) : 0;
   const extendedContent = {
     form_action: "https://accounts.firefox.com/",
-    scene1_button_label: "Learn More",
+    scene1_button_label: schema.properties.scene1_button_label.default,
-    scene2_button_label: "Sign Me Up",
+    scene2_email_placeholder_text: schema.properties.scene2_email_placeholder_text.default,
-    scene2_email_placeholder_text: "Your Email Here",
+    scene2_button_label: schema.properties.scene2_button_label.default,
     ...props.content,
     hidden_inputs: {
       action: "email",

browser/components/newtab/content-src/asrouter/templates/FXASignupSnippet/FXASignupSnippet.schema.json

@@ -0,0 +1,158 @@
+{
+  "title": "FXASignupSnippet",
+  "description": "A snippet template for FxA sign up/sign in",
+  "version": "1.0.0",
+  "type": "object",
+  "definitions": {
+    "plainText": {
+      "description": "Plain text (no HTML allowed)",
+      "type": "string"
+    },
+    "richText": {
+      "description": "Text with HTML subset allowed: i, b, u, strong, em, br",
+      "type": "string"
+    },
+    "link_url": {
+      "description": "Target for links or buttons",
+      "type": "string",
+      "format": "uri"
+    }
+  },
+  "properties": {
+    "scene1_title": {
+      "allof": [
+        {"$ref": "#/definitions/plainText"},
+        {"description": "snippet title displayed before snippet text"}
+      ]
+    },
+    "scene1_text": {
+      "allOf": [
+        {"$ref": "#/definitions/richText"},
+        {"description": "Main body text of snippet. HTML subset allowed: i, b, u, strong, em, br"}
+      ]
+    },
+    "scene2_title": {
+      "allOf": [
+        {"$ref": "#/definitions/plainText"},
+        {"description": "Title displayed before text in scene 2. Should be plain text."}
+      ]
+    },
+    "scene2_text": {
+      "allOf": [
+        {"$ref": "#/definitions/richText"},
+        {"description": "Main body text of snippet. HTML subset allowed: i, b, u, strong, em, br"}
+      ]
+    },
+    "scene1_icon": {
+      "type": "string",
+      "description": "Snippet icon. 64x64px. SVG or PNG preferred."
+    },
+    "scene1_title_icon": {
+      "type": "string",
+      "description": "Small icon that shows up before the title / text. 16x16px. SVG or PNG preferred. Grayscale."
+    },
+    "scene2_email_placeholder_text": {
+      "type": "string",
+      "description": "Value to show while input is empty.",
+      "default": "Your email here"
+    },
+    "scene2_button_label": {
+      "type": "string",
+      "description": "Label for form submit button",
+      "default": "Sign me up"
+    },
+    "scene2_dismiss_button_text": {
+      "type": "string",
+      "description": "Label for the dismiss button when the sign-up form is expanded.",
+      "default": "Dismiss"
+    },
+    "hidden_inputs": {
+      "type": "object",
+      "description": "Each entry represents a hidden input, key is used as value for the name property.",
+      "properties": {
+        "action": {
+          "type": "string",
+          "enum": ["email"]
+        },
+        "context": {
+          "type": "string",
+          "enum": ["fx_desktop_v3"]
+        },
+        "entrypoint": {
+          "type": "string",
+          "enum": ["snippets"]
+        },
+        "service": {
+          "type": "string",
+          "enum": ["sync"]
+        },
+        "utm_content": {
+          "type": "string",
+          "description": "Firefox version number"
+        },
+        "utm_source": {
+          "type": "string",
+          "enum": ["snippet"]
+        },
+        "utm_campaign": {
+          "type": "string",
+          "description": "(fxa) Value to pass through to GA as utm_campaign."
+        },
+        "utm_term": {
+          "type": "string",
+          "description": "(fxa) Value to pass through to GA as utm_term."
+        },
+        "additionalProperties": false
+      }
+    },
+    "scene1_button_label": {
+      "allOf": [
+        {"$ref": "#/definitions/plainText"},
+        {"description": "Text for a button next to main snippet text that links to button_url. Requires button_url."}
+      ],
+      "default": "Learn more"
+    },
+    "scene1_button_color": {
+      "type": "string",
+      "description": "The text color of the button. Valid CSS color."
+    },
+    "scene1_button_background_color": {
+      "type": "string",
+      "description": "The background color of the button. Valid CSS color."
+    },
+    "do_not_autoblock": {
+      "type": "boolean",
+      "description": "Used to prevent blocking the snippet after the CTA (link or button) has been clicked",
+      "default": false
+    },
+    "utm_campaign": {
+      "type": "string",
+      "description": "(fxa) Value to pass through to GA as utm_campaign."
+    },
+    "utm_term": {
+      "type": "string",
+      "description": "(fxa) Value to pass through to GA as utm_term."
+    },
+    "links": {
+      "additionalProperties": {
+        "url": {
+          "allOf": [
+            {"$ref": "#/definitions/link_url"},
+            {"description": "The url where the link points to."}
+          ]
+        },
+        "metric": {
+          "type": "string",
+          "description": "Custom event name sent with telemetry event."
+        }
+      }
+    }
+  },
+  "additionalProperties": false,
+  "required": ["scene1_text", "scene2_text", "scene1_button_label"],
+  "dependencies": {
+    "scene1_button_color": ["scene1_button_label"],
+    "scene1_button_background_color": ["scene1_button_label"]
+  }
+}
+

browser/components/newtab/content-src/asrouter/templates/NewsletterSnippet/NewsletterSnippet.jsx

@@ -1,16 +1,18 @@
 import React from "react";
+import schema from "./NewsletterSnippet.schema.json";
 import {SubmitFormSnippet} from "../SubmitFormSnippet/SubmitFormSnippet.jsx";
 
 export const NewsletterSnippet = props => {
   const extendedContent = {
-    form_action: "https://basket.mozilla.org/subscribe.json",
+    scene1_button_label: schema.properties.scene1_button_label.default,
-    scene2_email_placeholder_text: "Your Email Here",
+    scene2_email_placeholder_text: schema.properties.scene2_email_placeholder_text.default,
-    scene2_button_label: "Sign Me Up",
+    scene2_button_label: schema.properties.scene2_button_label.default,
+    scene2_dismiss_button_text: schema.properties.scene2_dismiss_button_text.default,
     ...props.content,
     hidden_inputs: {
-      newsletters: props.content.scene2_newsletter || "mozilla-foundation",
+      newsletters: props.content.scene2_newsletter || schema.properties.scene2_newsletter.default,
-      fmt: "H",
+      fmt: schema.properties.hidden_inputs.properties.fmt.default,
-      lang: props.content.locale || "en-US",
+      lang: props.content.locale || schema.properties.locale.default,
       source_url: `https://snippets.mozilla.com/show/${props.id}`,
       ...props.content.hidden_inputs,
     },
@@ -19,5 +21,6 @@ export const NewsletterSnippet = props => {
   return (<SubmitFormSnippet
     {...props}
     content={extendedContent}
+    form_action={"https://basket.mozilla.org/subscribe.json"}
     form_method="POST" />);
 };

browser/components/newtab/content-src/asrouter/templates/NewsletterSnippet/NewsletterSnippet.schema.json

@@ -0,0 +1,144 @@
+{
+  "title": "NewsletterSnippet",
+  "description": "A snippet template for send to device mobile download",
+  "version": "1.0.0",
+  "type": "object",
+  "definitions": {
+    "plainText": {
+      "description": "Plain text (no HTML allowed)",
+      "type": "string"
+    },
+    "richText": {
+      "description": "Text with HTML subset allowed: i, b, u, strong, em, br",
+      "type": "string"
+    },
+    "link_url": {
+      "description": "Target for links or buttons",
+      "type": "string",
+      "format": "uri"
+    }
+  },
+  "properties": {
+    "locale": {
+      "type": "string",
+      "description": "Two to five character string for the locale code",
+      "default": "en-US"
+    },
+    "scene1_title": {
+      "allof": [
+        {"$ref": "#/definitions/plainText"},
+        {"description": "snippet title displayed before snippet text"}
+      ]
+    },
+    "scene1_text": {
+      "allOf": [
+        {"$ref": "#/definitions/richText"},
+        {"description": "Main body text of snippet. HTML subset allowed: i, b, u, strong, em, br"}
+      ]
+    },
+    "scene2_title": {
+      "allOf": [
+        {"$ref": "#/definitions/plainText"},
+        {"description": "Title displayed before text in scene 2. Should be plain text."}
+      ]
+    },
+    "scene2_text": {
+      "allOf": [
+        {"$ref": "#/definitions/richText"},
+        {"description": "Main body text of snippet. HTML subset allowed: i, b, u, strong, em, br"}
+      ]
+    },
+    "scene1_icon": {
+      "type": "string",
+      "description": "Snippet icon. 64x64px. SVG or PNG preferred."
+    },
+    "scene1_title_icon": {
+      "type": "string",
+      "description": "Small icon that shows up before the title / text. 16x16px. SVG or PNG preferred. Grayscale."
+    },
+    "scene2_email_placeholder_text": {
+      "type": "string",
+      "description": "Value to show while input is empty.",
+      "default": "Your email here"
+    },
+    "scene2_button_label": {
+      "type": "string",
+      "description": "Label for form submit button",
+      "default": "Sign me up"
+    },
+    "scene2_privacy_html": {
+      "type": "string",
+      "description": "(send to device) Html for disclaimer and link underneath input box."
+    },
+    "scene2_dismiss_button_text": {
+      "type": "string",
+      "description": "Label for the dismiss button when the sign-up form is expanded.",
+      "default": "Dismiss"
+    },
+    "hidden_inputs": {
+      "type": "object",
+      "description": "Each entry represents a hidden input, key is used as value for the name property.",
+      "properties": {
+        "fmt": {
+          "type": "string",
+          "description": "",
+          "default": "H"
+        }
+      }
+    },
+    "scene1_button_label": {
+      "allOf": [
+        {"$ref": "#/definitions/plainText"},
+        {"description": "Text for a button next to main snippet text that links to button_url. Requires button_url."}
+      ],
+      "default": "Learn more"
+    },
+    "scene1_button_color": {
+      "type": "string",
+      "description": "The text color of the button. Valid CSS color."
+    },
+    "scene1_button_background_color": {
+      "type": "string",
+      "description": "The background color of the button. Valid CSS color."
+    },
+    "do_not_autoblock": {
+      "type": "boolean",
+      "description": "Used to prevent blocking the snippet after the CTA (link or button) has been clicked",
+      "default": false
+    },
+    "success_text": {
+      "type": "string",
+      "description": "Message shown on successful registration."
+    },
+    "error_text": {
+      "type": "string",
+      "description": "Message shown if registration failed."
+    },
+    "scene2_newsletter": {
+      "type": "string",
+      "description": "Newsletter/basket id user is subscribing to.",
+      "default": "mozilla-foundation"
+    },
+    "links": {
+      "additionalProperties": {
+        "url": {
+          "allOf": [
+            {"$ref": "#/definitions/link_url"},
+            {"description": "The url where the link points to."}
+          ]
+        },
+        "metric": {
+          "type": "string",
+          "description": "Custom event name sent with telemetry event."
+        }
+      }
+    }
+  },
+  "additionalProperties": false,
+  "required": ["scene1_text", "scene2_text", "scene1_button_label"],
+  "dependencies": {
+    "scene1_button_color": ["scene1_button_label"],
+    "scene1_button_background_color": ["scene1_button_label"]
+  }
+}
+

browser/components/newtab/content-src/asrouter/templates/SendToDeviceSnippet/SendToDeviceSnippet.jsx

@@ -1,5 +1,6 @@
 import {isEmailOrPhoneNumber} from "./isEmailOrPhoneNumber";
 import React from "react";
+import schema from "./SendToDeviceSnippet.schema.json";
 import {SubmitFormSnippet} from "../SubmitFormSnippet/SubmitFormSnippet.jsx";
 
 function validateInput(value, content) {
@@ -31,14 +32,14 @@ function addDefaultValues(props) {
   return {
     ...props,
     content: {
-      scene1_button_label: "Learn More",
+      scene1_button_label: schema.properties.scene1_button_label.default,
-      scene2_dismiss_button_text: "Dismiss",
+      scene2_dismiss_button_text: schema.properties.scene2_dismiss_button_text.default,
-      scene2_button_label: "Send",
+      scene2_button_label: schema.properties.scene2_button_label.default,
-      scene2_input_placeholder: "YOUR EMAIL HERE",
+      scene2_input_placeholder: schema.properties.scene2_input_placeholder.default,
-      locale: "en-US",
+      locale: schema.properties.locale.default,
-      country: "us",
+      country: schema.properties.country.default,
       message_id_email: "",
-      include_sms: false,
+      include_sms: schema.properties.include_sms.default,
       ...props.content,
     },
   };

browser/components/newtab/content-src/asrouter/templates/SendToDeviceSnippet/SendToDeviceSnippet.schema.json

@@ -0,0 +1,206 @@
+{
+  "title": "SendToDeviceSnippet",
+  "description": "A snippet template for send to device mobile download",
+  "version": "1.0.0",
+  "type": "object",
+  "definitions": {
+    "plainText": {
+      "description": "Plain text (no HTML allowed)",
+      "type": "string"
+    },
+    "richText": {
+      "description": "Text with HTML subset allowed: i, b, u, strong, em, br",
+      "type": "string"
+    },
+    "link_url": {
+      "description": "Target for links or buttons",
+      "type": "string",
+      "format": "uri"
+    }
+  },
+  "properties": {
+    "locale": {
+      "type": "string",
+      "description": "Two to five character string for the locale code",
+      "default": "en-US"
+    },
+    "country": {
+      "type": "string",
+      "description": "Two character string for the country code (used for SMS)",
+      "default": "us"
+    },
+    "scene1_title": {
+      "allof": [
+        {"$ref": "#/definitions/plainText"},
+        {"description": "snippet title displayed before snippet text"}
+      ]
+    },
+    "scene1_text": {
+      "allOf": [
+        {"$ref": "#/definitions/richText"},
+        {"description": "Main body text of snippet. HTML subset allowed: i, b, u, strong, em, br"}
+      ]
+    },
+    "scene2_title": {
+      "allOf": [
+        {"$ref": "#/definitions/plainText"},
+        {"description": "Title displayed before text in scene 2. Should be plain text."}
+      ]
+    },
+    "scene2_text": {
+      "allOf": [
+        {"$ref": "#/definitions/richText"},
+        {"description": "Main body text of snippet. HTML subset allowed: i, b, u, strong, em, br"}
+      ]
+    },
+    "scene1_icon": {
+      "type": "string",
+      "description": "Snippet icon. 64x64px. SVG or PNG preferred."
+    },
+    "scene2_icon": {
+      "type": "string",
+      "description": "(send to device) Image to display above the form. 98x98px. SVG or PNG preferred."
+    },
+    "scene1_title_icon": {
+      "type": "string",
+      "description": "Small icon that shows up before the title / text. 16x16px. SVG or PNG preferred. Grayscale."
+    },
+    "scene2_email_placeholder_text": {
+      "type": "string",
+      "description": "Value to show while input is empty.",
+      "default": "Your email here"
+    },
+    "scene2_button_label": {
+      "type": "string",
+      "description": "Label for form submit button",
+      "default": "Send"
+    },
+    "scene2_input_placeholder": {
+      "type": "string",
+      "description": "(send to device) Value to show while input is empty.",
+      "default": "Your email here"
+    },
+    "scene2_disclaimer_html": {
+      "type": "string",
+      "description": "(send to device) Html for disclaimer and link underneath input box."
+    },
+    "scene2_dismiss_button_text": {
+      "type": "string",
+      "description": "Label for the dismiss button when the sign-up form is expanded.",
+      "default": "Dismiss"
+    },
+    "hidden_inputs": {
+      "type": "object",
+      "description": "Each entry represents a hidden input, key is used as value for the name property.",
+      "properties": {
+        "action": {
+          "type": "string",
+          "enum": ["email"]
+        },
+        "context": {
+          "type": "string",
+          "enum": ["fx_desktop_v3"]
+        },
+        "entrypoint": {
+          "type": "string",
+          "enum": ["snippets"]
+        },
+        "service": {
+          "type": "string",
+          "enum": ["sync"]
+        },
+        "utm_content": {
+          "type": "string",
+          "description": "Firefox version number"
+        },
+        "utm_source": {
+          "type": "string",
+          "enum": ["snippet"]
+        },
+        "utm_campaign": {
+          "type": "string",
+          "description": "(fxa) Value to pass through to GA as utm_campaign."
+        },
+        "utm_term": {
+          "type": "string",
+          "description": "(fxa) Value to pass through to GA as utm_term."
+        },
+        "additionalProperties": false
+      }
+    },
+    "scene1_button_label": {
+      "allOf": [
+        {"$ref": "#/definitions/plainText"},
+        {"description": "Text for a button next to main snippet text that links to button_url. Requires button_url."}
+      ],
+      "default": "Learn more"
+    },
+    "scene1_button_color": {
+      "type": "string",
+      "description": "The text color of the button. Valid CSS color."
+    },
+    "scene1_button_background_color": {
+      "type": "string",
+      "description": "The background color of the button. Valid CSS color."
+    },
+    "do_not_autoblock": {
+      "type": "boolean",
+      "description": "Used to prevent blocking the snippet after the CTA (link or button) has been clicked",
+      "default": false
+    },
+    "success_title": {
+      "type": "string",
+      "description": "(send to device) Title shown before text on successful registration."
+    },
+    "success_text": {
+      "type": "string",
+      "description": "Message shown on successful registration."
+    },
+    "error_text": {
+      "type": "string",
+      "description": "Message shown if registration failed."
+    },
+    "include_sms": {
+      "type": "boolean",
+      "description": "(send to device) Allow users to send an SMS message with the form?",
+      "default": false
+    },
+    "message_id_sms": {
+      "type": "string",
+      "description": "(send to device) Newsletter/basket id representing the SMS message to be sent."
+    },
+    "message_id_email": {
+      "type": "string",
+      "description": "(send to device) Newsletter/basket id representing the email message to be sent. Must be a value from the 'Slug' column here: https://basket.mozilla.org/news/."
+    },
+    "utm_campaign": {
+      "type": "string",
+      "description": "(fxa) Value to pass through to GA as utm_campaign."
+    },
+    "utm_term": {
+      "type": "string",
+      "description": "(fxa) Value to pass through to GA as utm_term."
+    },
+    "links": {
+      "additionalProperties": {
+        "url": {
+          "allOf": [
+            {"$ref": "#/definitions/link_url"},
+            {"description": "The url where the link points to."}
+          ]
+        },
+        "metric": {
+          "type": "string",
+          "description": "Custom event name sent with telemetry event."
+        }
+      }
+    }
+  },
+  "additionalProperties": false,
+  "required": ["scene1_text", "scene2_text", "scene1_button_label"],
+  "dependencies": {
+    "scene1_button_color": ["scene1_button_label"],
+    "scene1_button_background_color": ["scene1_button_label"]
+  }
+}
+

browser/components/newtab/content-src/asrouter/templates/SimpleSnippet/SimpleSnippet.jsx

@@ -28,9 +28,15 @@ export class SimpleSnippet extends React.PureComponent {
     }
   }
 
+  _shouldRenderButton() {
+    return this.props.content.button_action || this.props.onButtonClick || this.props.content.button_url;
+  }
+
   renderTitle() {
     const {title} = this.props.content;
-    return title ? <h3 className="title">{title}</h3> : null;
+    return title ?
+      <h3 className={`title ${this._shouldRenderButton() ? "title-inline" : ""}`}>{this.renderTitleIcon()} {title}</h3> :
+      null;
   }
 
   renderTitleIcon() {
@@ -40,7 +46,7 @@ export class SimpleSnippet extends React.PureComponent {
 
   renderButton() {
     const {props} = this;
-    if (!props.content.button_action && !props.onButtonClick && !props.content.button_url) {
+    if (!this._shouldRenderButton()) {
       return null;
     }
 
@@ -73,7 +79,7 @@ export class SimpleSnippet extends React.PureComponent {
     return (<SnippetBase {...props} className={className} textStyle={this.props.textStyle}>
       <img src={safeURI(props.content.icon) || DEFAULT_ICON_PATH} className="icon" />
       <div>
-        {this.renderTitleIcon()} {this.renderTitle()} <p className="body">{this.renderText()}</p>
+        {this.renderTitle()} <p className="body">{this.renderText()}</p>
         {this.props.extraContent}
       </div>
       {<div>{this.renderButton()}</div>}

browser/components/newtab/content-src/asrouter/templates/SimpleSnippet/SimpleSnippet.schema.json

@@ -69,7 +69,8 @@
     },
     "block_button_text": {
       "type": "string",
-      "description": "Tooltip text used for dismiss button."
+      "description": "Tooltip text used for dismiss button.",
+      "default": "Remove this"
     },
     "tall": {
       "type": "boolean",

browser/components/newtab/content-src/asrouter/templates/SimpleSnippet/_SimpleSnippet.scss

@@ -49,14 +49,18 @@
   }
 
   .title {
-    display: inline;
     font-size: inherit;
     margin: 0;
   }
 
+  .title-inline {
+    display: inline;
+  }
+
   .titleIcon {
     background-repeat: no-repeat;
     background-size: 14px;
+    background-position: center;
     height: 16px;
     width: 16px;
     margin-top: 2px;
@@ -84,8 +88,4 @@
   .icon {
     align-self: flex-start;
   }
-
-  .ASRouterButton {
-    cursor: pointer;
-  }
 }

browser/components/newtab/content-src/asrouter/templates/SubmitFormSnippet/SubmitFormSnippet.jsx

@@ -9,15 +9,23 @@ export class SubmitFormSnippet extends React.PureComponent {
     super(props);
     this.expandSnippet = this.expandSnippet.bind(this);
     this.handleSubmit = this.handleSubmit.bind(this);
+    this.handleSubmitAttempt = this.handleSubmitAttempt.bind(this);
     this.onInputChange = this.onInputChange.bind(this);
     this.state = {
       expanded: false,
+      submitAttempted: false,
       signupSubmitted: false,
       signupSuccess: false,
       disableForm: false,
     };
   }
 
+  handleSubmitAttempt() {
+    if (!this.state.submitAttempted) {
+      this.setState({submitAttempted: true});
+    }
+  }
+
   async handleSubmit(event) {
     let json;
 
@@ -99,28 +107,31 @@ export class SubmitFormSnippet extends React.PureComponent {
     if (!content.scene2_privacy_html) {
       return null;
     }
-    return (<label className="privacyNotice" htmlFor="id_privacy">
+    return (<p className="privacyNotice">
-        <p>
+        <input type="checkbox" id="id_privacy" name="privacy" required="required" />
-          <input type="checkbox" id="id_privacy" name="privacy" required="required" />
+        <label htmlFor="id_privacy">
           <RichText text={content.scene2_privacy_html}
-            localization_id="privacy_html"
+          localization_id="privacy_html"
-            links={content.links}
+          links={content.links}
-            doNotAutoBlock={true}
+          doNotAutoBlock={true}
-            openNewWindow={true}
+          openNewWindow={true}
-            sendClick={this.props.sendClick} />
+          sendClick={this.props.sendClick} />
-        </p>
+        </label>
-      </label>);
+      </p>);
   }
 
   renderSignupSubmitted() {
     const {content} = this.props;
     const isSuccess = this.state.signupSuccess;
     const successTitle = isSuccess && content.success_title;
-    const bodyText = isSuccess ? content.success_text : content.error_text;
+    const bodyText = isSuccess ? {success_text: content.success_text} : {error_text: content.error_text};
     const retryButtonText = content.scene1_button_label;
     return (<SnippetBase {...this.props}><div className="submissionStatus">
       {successTitle ? <h2 className="submitStatusTitle">{successTitle}</h2> : null}
-      <p>{bodyText}{isSuccess ? null : <Button onClick={this.expandSnippet}>{retryButtonText}</Button>}</p>
+      <p>
+        <RichText {...bodyText} localization_id={isSuccess ? "success_text" : "error_text"} />
+        {isSuccess ? null : <Button onClick={this.expandSnippet}>{retryButtonText}</Button>}
+      </p>
     </div></SnippetBase>);
   }
 
@@ -137,7 +148,7 @@ export class SubmitFormSnippet extends React.PureComponent {
     return (<input
       ref="mainInput"
       type={this.props.inputType || "email"}
-      className="mainInput"
+      className={`mainInput${(this.state.submitAttempted ? "" : " clean")}`}
       name="email"
       required={true}
       placeholder={placholder}
@@ -152,16 +163,16 @@ export class SubmitFormSnippet extends React.PureComponent {
         {content.scene2_icon ? <div className="scene2Icon"><img src={content.scene2_icon} /></div> : null}
         <div className="message">
           <p>
-            {content.scene2_title ? <h3 className="scene2Title">{content.scene2_title}</h3> : null}
+            {content.scene2_title && <h3 className="scene2Title">{content.scene2_title}</h3>}
             {" "}
-            <RichText scene2_text={content.scene2_text} localization_id="scene2_text" />
+            {content.scene2_text && <RichText scene2_text={content.scene2_text} localization_id="scene2_text" />}
           </p>
         </div>
-        <form action={content.form_action} method={this.props.form_method} onSubmit={this.handleSubmit} ref="form">
+        <form action={this.props.form_action} method={this.props.form_method} onSubmit={this.handleSubmit} ref="form">
           {this.renderHiddenFormInputs()}
           <div>
             {this.renderInput()}
-            <button type="submit" className="ASRouterButton primary" ref="formSubmitBtn">{content.scene2_button_label}</button>
+            <button type="submit" className="ASRouterButton primary" onClick={this.handleSubmitAttempt} ref="formSubmitBtn">{content.scene2_button_label}</button>
           </div>
           {this.renderFormPrivacyNotice() || this.renderDisclaimer()}
         </form>

browser/components/newtab/content-src/asrouter/templates/SubmitFormSnippet/_SubmitFormSnippet.scss

@@ -6,6 +6,7 @@
   .disclaimerText {
     margin: 20px 0 0;
     font-size: 12px;
+    color: var(--newtab-text-secondary-color);
   }
 
   p {
@@ -19,15 +20,16 @@
       font-size: 16px;
       margin-bottom: 20px;
     }
+
+    .scene2Title {
+      font-size: 24px;
+      display: block;
+    }
   }
 
   .ASRouterButton {
     &.primary {
       flex: 1 1 0;
-
-      &[type='submit'] {
-        font-weight: normal;
-      }
     }
   }
 
@@ -43,7 +45,7 @@
 
   .scene2Title {
     font-size: inherit;
-    margin: 0;
+    margin: 0 0 10px;
     font-weight: bold;
     display: inline;
   }
@@ -66,10 +68,6 @@
     color: var(--newtab-text-secondary-color);
     margin-top: 10px;
     flex: 0 0 100%;
-
-    span {
-      vertical-align: top;
-    }
   }
 
   .innerWrapper {
@@ -92,6 +90,10 @@
       max-width: 768px;
       width: 100%;
       text-align: right;
+
+      [dir='rtl'] & {
+        text-align: left;
+      }
     }
   }
 
@@ -105,6 +107,13 @@
       font-size: 14px;
       width: 50%;
 
+      &.clean {
+        &:invalid,
+        &:required {
+          box-shadow: none;
+        }
+      }
+
       &:focus {
         border: $input-border-active;
         box-shadow: var(--newtab-textbox-focus-boxshadow);

browser/components/newtab/content-src/components/Sections/Sections.jsx

@@ -162,15 +162,19 @@ export class Section extends React.PureComponent {
     // to avoid a flash of logged out state while we render.
     const isPocketLoggedInDefined = (isUserLoggedIn === true || isUserLoggedIn === false);
 
+    const hasTopics = topics && topics.length > 0;
+
     const shouldShowPocketCta = (id === "topstories" &&
       useCta && isUserLoggedIn === false);
 
     // Show topics only for top stories and if it has loaded with topics.
     // The classs .top-stories-bottom-container ensures content doesn't shift as things load.
-    const shouldShowTopics = (id === "topstories" &&
+    const shouldShowTopics = (id === "topstories" && hasTopics &&
-      (topics && topics.length > 0) &&
       ((useCta && isUserLoggedIn === true) || (!useCta && isPocketLoggedInDefined)));
 
+    // We use topics to determine language support for read more.
+    const shouldShowReadMore = read_more_endpoint && hasTopics;
+
     const realRows = rows.slice(0, maxCards);
 
     // The empty state should only be shown after we have initialized and there is no content.
@@ -249,7 +253,7 @@ export class Section extends React.PureComponent {
               {shouldShowPocketCta && <PocketLoggedInCta />}
             </div>
             <div>
-              {read_more_endpoint &&
+              {shouldShowReadMore &&
                 <MoreRecommendations read_more_endpoint={read_more_endpoint} />}
             </div>
           </div>}

browser/components/newtab/content-src/components/TopSites/_TopSites.scss

@@ -68,15 +68,25 @@ $hover-transition-duration: 150ms;
     }
   }
 
-  @media (max-width: $break-point-medium) {
+  .hide-for-narrow {
+    display: none;
+  }
+
+  @media (min-width: $break-point-medium) {
+    .hide-for-narrow {
+      display: inline-block;
+    }
+  }
+
+  @media (min-width: $break-point-large) {
     .hide-for-narrow {
       display: none;
     }
   }
 
-  @media (min-width: $break-point-large) and (max-width: $break-point-widest) {
+  @media (min-width: $break-point-widest) {
     .hide-for-narrow {
-      display: none;
+      display: inline-block;
     }
   }
 

browser/components/newtab/content-src/styles/_variables.scss

@@ -20,7 +20,9 @@ $yellow-50: #FFE900;
 // Photon opacity from http://design.firefox.com/photon/visuals/color.html#opacity
 $grey-10-10: rgba($grey-10, 0.1);
 $grey-10-20: rgba($grey-10, 0.2);
+$grey-10-30: rgba($grey-10, 0.3);
 $grey-10-40: rgba($grey-10, 0.4);
+$grey-10-50: rgba($grey-10, 0.5);
 $grey-10-60: rgba($grey-10, 0.6);
 $grey-10-80: rgba($grey-10, 0.8);
 $grey-10-95: rgba($grey-10, 0.95);

browser/components/newtab/css/activity-stream-linux.css

@@ -455,12 +455,17 @@ main {
       margin-inline-start: auto;
       inset-inline-end: 0;
       inset-inline-start: auto; } }
-  @media (max-width: 610px) {
+  .top-sites-list .hide-for-narrow {
+    display: none; }
+  @media (min-width: 610px) {
+    .top-sites-list .hide-for-narrow {
+      display: inline-block; } }
+  @media (min-width: 866px) {
     .top-sites-list .hide-for-narrow {
       display: none; } }
-  @media (min-width: 866px) and (max-width: 1122px) {
+  @media (min-width: 1122px) {
     .top-sites-list .hide-for-narrow {
-      display: none; } }
+      display: inline-block; } }
   .top-sites-list li {
     margin: 0 0 8px; }
   .top-sites-list:not(.dnd-active) .top-site-outer:-moz-any(.active, :focus, :hover) .tile {
@@ -1637,11 +1642,11 @@ main {
     transform: scaleX(-1); }
 
 .ASRouterButton {
-  font-weight: bold;
+  font-weight: 600;
+  font-size: 14px;
   white-space: nowrap;
   border-radius: 2px;
-  border: 1px solid var(--newtab-border-secondary-color);
+  border: 0;
-  background-color: var(--newtab-button-secondary-color);
   font-family: inherit;
   padding: 8px 15px;
   margin-inline-start: 12px;
@@ -1653,14 +1658,34 @@ main {
     border: 1px solid var(--newtab-button-primary-color);
     background-color: var(--newtab-button-primary-color);
     color: #F9F9FA; }
+    .ASRouterButton.primary:hover {
+      background-color: #003EAA; }
+    .ASRouterButton.primary:active {
+      background-color: #002275; }
   .ASRouterButton.secondary {
-    background: var(--newtab-button-secondary-color);
+    background-color: rgba(12, 12, 13, 0.1); }
-    border: 1px solid var(--newtab-border-primary-color);
+    .ASRouterButton.secondary:hover {
-    font-size: 14px;
+      background-color: rgba(12, 12, 13, 0.2); }
-    font-weight: 600; }
+    .ASRouterButton.secondary:active {
+      background-color: rgba(12, 12, 13, 0.3); }
+
+[lwt-newtab-brighttext] .secondary {
+  background-color: rgba(249, 249, 250, 0.1); }
+  [lwt-newtab-brighttext] .secondary:hover {
+    background-color: rgba(249, 249, 250, 0.2); }
+  [lwt-newtab-brighttext] .secondary:active {
+    background-color: rgba(249, 249, 250, 0.3); }
+
+[lwt-newtab-brighttext] .footer .secondary {
+  background-color: rgba(249, 249, 250, 0.3); }
+  [lwt-newtab-brighttext] .footer .secondary:hover {
+    background-color: rgba(249, 249, 250, 0.4); }
+  [lwt-newtab-brighttext] .footer .secondary:active {
+    background-color: rgba(249, 249, 250, 0.5); }
 
 .SnippetBaseContainer {
   position: fixed;
+  z-index: 2;
   bottom: 0;
   left: 0;
   right: 0;
@@ -1674,8 +1699,9 @@ main {
   align-items: center; }
   .SnippetBaseContainer a {
     cursor: pointer;
-    color: var(--newtab-link-primary-color);
+    color: var(--newtab-link-primary-color); }
-    text-decoration: underline; }
+    .SnippetBaseContainer a:hover {
+      text-decoration: underline; }
     [lwt-newtab-brighttext] .SnippetBaseContainer a {
       font-weight: bold; }
   .SnippetBaseContainer input[type='checkbox'] {
@@ -1688,13 +1714,13 @@ main {
     align-items: center;
     padding: 12px 25px;
     padding-inline-end: 36px;
-    max-width: 786px; }
+    max-width: 836px; }
     @media (min-width: 866px) {
       .SnippetBaseContainer .innerWrapper {
         padding-inline-end: 25px; } }
     @media (min-width: 1122px) {
       .SnippetBaseContainer .innerWrapper {
-        max-width: 1042px; } }
+        max-width: 1092px; } }
   .SnippetBaseContainer .blockButton {
     display: none;
     background: none;
@@ -1849,13 +1875,16 @@ main {
     height: 79px; }
 
 .SimpleSnippet .title {
-  display: inline;
   font-size: inherit;
   margin: 0; }
 
+.SimpleSnippet .title-inline {
+  display: inline; }
+
 .SimpleSnippet .titleIcon {
   background-repeat: no-repeat;
   background-size: 14px;
+  background-position: center;
   height: 16px;
   width: 16px;
   margin-top: 2px;
@@ -1876,16 +1905,14 @@ main {
 .SimpleSnippet .icon {
   align-self: flex-start; }
 
-.SimpleSnippet .ASRouterButton {
-  cursor: pointer; }
-
 .SubmitFormSnippet {
   flex-direction: column;
   flex: 1 1 100%;
   width: 100%; }
   .SubmitFormSnippet .disclaimerText {
     margin: 20px 0 0;
-    font-size: 12px; }
+    font-size: 12px;
+    color: var(--newtab-text-secondary-color); }
   .SubmitFormSnippet p {
     margin: 0; }
   .SubmitFormSnippet.send_to_device_snippet {
@@ -1893,10 +1920,11 @@ main {
     .SubmitFormSnippet.send_to_device_snippet .message {
       font-size: 16px;
       margin-bottom: 20px; }
+    .SubmitFormSnippet.send_to_device_snippet .scene2Title {
+      font-size: 24px;
+      display: block; }
   .SubmitFormSnippet .ASRouterButton.primary {
     flex: 1 1 0; }
-    .SubmitFormSnippet .ASRouterButton.primary[type='submit'] {
-      font-weight: normal; }
   .SubmitFormSnippet .scene2Icon {
     width: 100%;
     margin-bottom: 20px; }
@@ -1905,7 +1933,7 @@ main {
       display: inline-block; }
   .SubmitFormSnippet .scene2Title {
     font-size: inherit;
-    margin: 0;
+    margin: 0 0 10px;
     font-weight: bold;
     display: inline; }
   .SubmitFormSnippet form {
@@ -1922,8 +1950,6 @@ main {
     color: var(--newtab-text-secondary-color);
     margin-top: 10px;
     flex: 0 0 100%; }
-    .SubmitFormSnippet .privacyNotice span {
-      vertical-align: top; }
   .SubmitFormSnippet .innerWrapper {
     max-width: 670px;
     flex-wrap: wrap;
@@ -1941,6 +1967,8 @@ main {
       max-width: 768px;
       width: 100%;
       text-align: right; }
+      [dir='rtl'] .SubmitFormSnippet .footer .footer-content {
+        text-align: left; }
   .SubmitFormSnippet input.mainInput {
     border-radius: 2px;
     background-color: var(--newtab-textbox-background-color);
@@ -1949,6 +1977,8 @@ main {
     height: 100%;
     font-size: 14px;
     width: 50%; }
+    .SubmitFormSnippet input.mainInput.clean:invalid, .SubmitFormSnippet input.mainInput.clean:required {
+      box-shadow: none; }
     .SubmitFormSnippet input.mainInput:focus {
       border: 1px solid var(--newtab-textbox-focus-color);
       box-shadow: var(--newtab-textbox-focus-boxshadow); }
@@ -2101,6 +2131,9 @@ main {
       background: #737373;
       color: #FFF;
       border: 1px solid #4A4A4F; }
+    .EOYSnippetForm input[type='radio']:checked:focus + .donation-amount,
+    .EOYSnippetForm input[type='radio']:not(:checked):focus + .donation-amount {
+      border: 1px dotted var(--newtab-link-primary-color); }
   .EOYSnippetForm .monthly-checkbox-container {
     width: 100%; }
     .EOYSnippetForm .monthly-checkbox-container input[type='checkbox'] {
@@ -2110,12 +2143,8 @@ main {
       vertical-align: super; }
   .EOYSnippetForm .donation-form-url {
     margin-inline-start: 18px;
-    background-color: var(--newtab-button-primary-color);
-    border: 0;
-    color: #FFF;
     align-self: flex-end;
-    display: flex;
+    display: flex; }
-    cursor: pointer; }
 
 .activity-stream.welcome {
   overflow: hidden; }

browser/components/newtab/css/activity-stream-mac.css

@@ -458,12 +458,17 @@ main {
       margin-inline-start: auto;
       inset-inline-end: 0;
       inset-inline-start: auto; } }
-  @media (max-width: 610px) {
+  .top-sites-list .hide-for-narrow {
+    display: none; }
+  @media (min-width: 610px) {
+    .top-sites-list .hide-for-narrow {
+      display: inline-block; } }
+  @media (min-width: 866px) {
     .top-sites-list .hide-for-narrow {
       display: none; } }
-  @media (min-width: 866px) and (max-width: 1122px) {
+  @media (min-width: 1122px) {
     .top-sites-list .hide-for-narrow {
-      display: none; } }
+      display: inline-block; } }
   .top-sites-list li {
     margin: 0 0 8px; }
   .top-sites-list:not(.dnd-active) .top-site-outer:-moz-any(.active, :focus, :hover) .tile {
@@ -1640,11 +1645,11 @@ main {
     transform: scaleX(-1); }
 
 .ASRouterButton {
-  font-weight: bold;
+  font-weight: 600;
+  font-size: 14px;
   white-space: nowrap;
   border-radius: 2px;
-  border: 1px solid var(--newtab-border-secondary-color);
+  border: 0;
-  background-color: var(--newtab-button-secondary-color);
   font-family: inherit;
   padding: 8px 15px;
   margin-inline-start: 12px;
@@ -1656,14 +1661,34 @@ main {
     border: 1px solid var(--newtab-button-primary-color);
     background-color: var(--newtab-button-primary-color);
     color: #F9F9FA; }
+    .ASRouterButton.primary:hover {
+      background-color: #003EAA; }
+    .ASRouterButton.primary:active {
+      background-color: #002275; }
   .ASRouterButton.secondary {
-    background: var(--newtab-button-secondary-color);
+    background-color: rgba(12, 12, 13, 0.1); }
-    border: 1px solid var(--newtab-border-primary-color);
+    .ASRouterButton.secondary:hover {
-    font-size: 14px;
+      background-color: rgba(12, 12, 13, 0.2); }
-    font-weight: 600; }
+    .ASRouterButton.secondary:active {
+      background-color: rgba(12, 12, 13, 0.3); }
+
+[lwt-newtab-brighttext] .secondary {
+  background-color: rgba(249, 249, 250, 0.1); }
+  [lwt-newtab-brighttext] .secondary:hover {
+    background-color: rgba(249, 249, 250, 0.2); }
+  [lwt-newtab-brighttext] .secondary:active {
+    background-color: rgba(249, 249, 250, 0.3); }
+
+[lwt-newtab-brighttext] .footer .secondary {
+  background-color: rgba(249, 249, 250, 0.3); }
+  [lwt-newtab-brighttext] .footer .secondary:hover {
+    background-color: rgba(249, 249, 250, 0.4); }
+  [lwt-newtab-brighttext] .footer .secondary:active {
+    background-color: rgba(249, 249, 250, 0.5); }
 
 .SnippetBaseContainer {
   position: fixed;
+  z-index: 2;
   bottom: 0;
   left: 0;
   right: 0;
@@ -1677,8 +1702,9 @@ main {
   align-items: center; }
   .SnippetBaseContainer a {
     cursor: pointer;
-    color: var(--newtab-link-primary-color);
+    color: var(--newtab-link-primary-color); }
-    text-decoration: underline; }
+    .SnippetBaseContainer a:hover {
+      text-decoration: underline; }
     [lwt-newtab-brighttext] .SnippetBaseContainer a {
       font-weight: bold; }
   .SnippetBaseContainer input[type='checkbox'] {
@@ -1691,13 +1717,13 @@ main {
     align-items: center;
     padding: 12px 25px;
     padding-inline-end: 36px;
-    max-width: 786px; }
+    max-width: 836px; }
     @media (min-width: 866px) {
       .SnippetBaseContainer .innerWrapper {
         padding-inline-end: 25px; } }
     @media (min-width: 1122px) {
       .SnippetBaseContainer .innerWrapper {
-        max-width: 1042px; } }
+        max-width: 1092px; } }
   .SnippetBaseContainer .blockButton {
     display: none;
     background: none;
@@ -1852,13 +1878,16 @@ main {
     height: 79px; }
 
 .SimpleSnippet .title {
-  display: inline;
   font-size: inherit;
   margin: 0; }
 
+.SimpleSnippet .title-inline {
+  display: inline; }
+
 .SimpleSnippet .titleIcon {
   background-repeat: no-repeat;
   background-size: 14px;
+  background-position: center;
   height: 16px;
   width: 16px;
   margin-top: 2px;
@@ -1879,16 +1908,14 @@ main {
 .SimpleSnippet .icon {
   align-self: flex-start; }
 
-.SimpleSnippet .ASRouterButton {
-  cursor: pointer; }
-
 .SubmitFormSnippet {
   flex-direction: column;
   flex: 1 1 100%;
   width: 100%; }
   .SubmitFormSnippet .disclaimerText {
     margin: 20px 0 0;
-    font-size: 12px; }
+    font-size: 12px;
+    color: var(--newtab-text-secondary-color); }
   .SubmitFormSnippet p {
     margin: 0; }
   .SubmitFormSnippet.send_to_device_snippet {
@@ -1896,10 +1923,11 @@ main {
     .SubmitFormSnippet.send_to_device_snippet .message {
       font-size: 16px;
       margin-bottom: 20px; }
+    .SubmitFormSnippet.send_to_device_snippet .scene2Title {
+      font-size: 24px;
+      display: block; }
   .SubmitFormSnippet .ASRouterButton.primary {
     flex: 1 1 0; }
-    .SubmitFormSnippet .ASRouterButton.primary[type='submit'] {
-      font-weight: normal; }
   .SubmitFormSnippet .scene2Icon {
     width: 100%;
     margin-bottom: 20px; }
@@ -1908,7 +1936,7 @@ main {
       display: inline-block; }
   .SubmitFormSnippet .scene2Title {
     font-size: inherit;
-    margin: 0;
+    margin: 0 0 10px;
     font-weight: bold;
     display: inline; }
   .SubmitFormSnippet form {
@@ -1925,8 +1953,6 @@ main {
     color: var(--newtab-text-secondary-color);
     margin-top: 10px;
     flex: 0 0 100%; }
-    .SubmitFormSnippet .privacyNotice span {
-      vertical-align: top; }
   .SubmitFormSnippet .innerWrapper {
     max-width: 670px;
     flex-wrap: wrap;
@@ -1944,6 +1970,8 @@ main {
       max-width: 768px;
       width: 100%;
       text-align: right; }
+      [dir='rtl'] .SubmitFormSnippet .footer .footer-content {
+        text-align: left; }
   .SubmitFormSnippet input.mainInput {
     border-radius: 2px;
     background-color: var(--newtab-textbox-background-color);
@@ -1952,6 +1980,8 @@ main {
     height: 100%;
     font-size: 14px;
     width: 50%; }
+    .SubmitFormSnippet input.mainInput.clean:invalid, .SubmitFormSnippet input.mainInput.clean:required {
+      box-shadow: none; }
     .SubmitFormSnippet input.mainInput:focus {
       border: 1px solid var(--newtab-textbox-focus-color);
       box-shadow: var(--newtab-textbox-focus-boxshadow); }
@@ -2104,6 +2134,9 @@ main {
       background: #737373;
       color: #FFF;
       border: 1px solid #4A4A4F; }
+    .EOYSnippetForm input[type='radio']:checked:focus + .donation-amount,
+    .EOYSnippetForm input[type='radio']:not(:checked):focus + .donation-amount {
+      border: 1px dotted var(--newtab-link-primary-color); }
   .EOYSnippetForm .monthly-checkbox-container {
     width: 100%; }
     .EOYSnippetForm .monthly-checkbox-container input[type='checkbox'] {
@@ -2113,12 +2146,8 @@ main {
       vertical-align: super; }
   .EOYSnippetForm .donation-form-url {
     margin-inline-start: 18px;
-    background-color: var(--newtab-button-primary-color);
-    border: 0;
-    color: #FFF;
     align-self: flex-end;
-    display: flex;
+    display: flex; }
-    cursor: pointer; }
 
 .activity-stream.welcome {
   overflow: hidden; }

browser/components/newtab/css/activity-stream-windows.css

@@ -455,12 +455,17 @@ main {
       margin-inline-start: auto;
       inset-inline-end: 0;
       inset-inline-start: auto; } }
-  @media (max-width: 610px) {
+  .top-sites-list .hide-for-narrow {
+    display: none; }
+  @media (min-width: 610px) {
+    .top-sites-list .hide-for-narrow {
+      display: inline-block; } }
+  @media (min-width: 866px) {
     .top-sites-list .hide-for-narrow {
       display: none; } }
-  @media (min-width: 866px) and (max-width: 1122px) {
+  @media (min-width: 1122px) {
     .top-sites-list .hide-for-narrow {
-      display: none; } }
+      display: inline-block; } }
   .top-sites-list li {
     margin: 0 0 8px; }
   .top-sites-list:not(.dnd-active) .top-site-outer:-moz-any(.active, :focus, :hover) .tile {
@@ -1637,11 +1642,11 @@ main {
     transform: scaleX(-1); }
 
 .ASRouterButton {
-  font-weight: bold;
+  font-weight: 600;
+  font-size: 14px;
   white-space: nowrap;
   border-radius: 2px;
-  border: 1px solid var(--newtab-border-secondary-color);
+  border: 0;
-  background-color: var(--newtab-button-secondary-color);
   font-family: inherit;
   padding: 8px 15px;
   margin-inline-start: 12px;
@@ -1653,14 +1658,34 @@ main {
     border: 1px solid var(--newtab-button-primary-color);
     background-color: var(--newtab-button-primary-color);
     color: #F9F9FA; }
+    .ASRouterButton.primary:hover {
+      background-color: #003EAA; }
+    .ASRouterButton.primary:active {
+      background-color: #002275; }
   .ASRouterButton.secondary {
-    background: var(--newtab-button-secondary-color);
+    background-color: rgba(12, 12, 13, 0.1); }
-    border: 1px solid var(--newtab-border-primary-color);
+    .ASRouterButton.secondary:hover {
-    font-size: 14px;
+      background-color: rgba(12, 12, 13, 0.2); }
-    font-weight: 600; }
+    .ASRouterButton.secondary:active {
+      background-color: rgba(12, 12, 13, 0.3); }
+
+[lwt-newtab-brighttext] .secondary {
+  background-color: rgba(249, 249, 250, 0.1); }
+  [lwt-newtab-brighttext] .secondary:hover {
+    background-color: rgba(249, 249, 250, 0.2); }
+  [lwt-newtab-brighttext] .secondary:active {
+    background-color: rgba(249, 249, 250, 0.3); }
+
+[lwt-newtab-brighttext] .footer .secondary {
+  background-color: rgba(249, 249, 250, 0.3); }
+  [lwt-newtab-brighttext] .footer .secondary:hover {
+    background-color: rgba(249, 249, 250, 0.4); }
+  [lwt-newtab-brighttext] .footer .secondary:active {
+    background-color: rgba(249, 249, 250, 0.5); }
 
 .SnippetBaseContainer {
   position: fixed;
+  z-index: 2;
   bottom: 0;
   left: 0;
   right: 0;
@@ -1674,8 +1699,9 @@ main {
   align-items: center; }
   .SnippetBaseContainer a {
     cursor: pointer;
-    color: var(--newtab-link-primary-color);
+    color: var(--newtab-link-primary-color); }
-    text-decoration: underline; }
+    .SnippetBaseContainer a:hover {
+      text-decoration: underline; }
     [lwt-newtab-brighttext] .SnippetBaseContainer a {
       font-weight: bold; }
   .SnippetBaseContainer input[type='checkbox'] {
@@ -1688,13 +1714,13 @@ main {
     align-items: center;
     padding: 12px 25px;
     padding-inline-end: 36px;
-    max-width: 786px; }
+    max-width: 836px; }
     @media (min-width: 866px) {
       .SnippetBaseContainer .innerWrapper {
         padding-inline-end: 25px; } }
     @media (min-width: 1122px) {
       .SnippetBaseContainer .innerWrapper {
-        max-width: 1042px; } }
+        max-width: 1092px; } }
   .SnippetBaseContainer .blockButton {
     display: none;
     background: none;
@@ -1849,13 +1875,16 @@ main {
     height: 79px; }
 
 .SimpleSnippet .title {
-  display: inline;
   font-size: inherit;
   margin: 0; }
 
+.SimpleSnippet .title-inline {
+  display: inline; }
+
 .SimpleSnippet .titleIcon {
   background-repeat: no-repeat;
   background-size: 14px;
+  background-position: center;
   height: 16px;
   width: 16px;
   margin-top: 2px;
@@ -1876,16 +1905,14 @@ main {
 .SimpleSnippet .icon {
   align-self: flex-start; }
 
-.SimpleSnippet .ASRouterButton {
-  cursor: pointer; }
-
 .SubmitFormSnippet {
   flex-direction: column;
   flex: 1 1 100%;
   width: 100%; }
   .SubmitFormSnippet .disclaimerText {
     margin: 20px 0 0;
-    font-size: 12px; }
+    font-size: 12px;
+    color: var(--newtab-text-secondary-color); }
   .SubmitFormSnippet p {
     margin: 0; }
   .SubmitFormSnippet.send_to_device_snippet {
@@ -1893,10 +1920,11 @@ main {
     .SubmitFormSnippet.send_to_device_snippet .message {
       font-size: 16px;
       margin-bottom: 20px; }
+    .SubmitFormSnippet.send_to_device_snippet .scene2Title {
+      font-size: 24px;
+      display: block; }
   .SubmitFormSnippet .ASRouterButton.primary {
     flex: 1 1 0; }
-    .SubmitFormSnippet .ASRouterButton.primary[type='submit'] {
-      font-weight: normal; }
   .SubmitFormSnippet .scene2Icon {
     width: 100%;
     margin-bottom: 20px; }
@@ -1905,7 +1933,7 @@ main {
       display: inline-block; }
   .SubmitFormSnippet .scene2Title {
     font-size: inherit;
-    margin: 0;
+    margin: 0 0 10px;
     font-weight: bold;
     display: inline; }
   .SubmitFormSnippet form {
@@ -1922,8 +1950,6 @@ main {
     color: var(--newtab-text-secondary-color);
     margin-top: 10px;
     flex: 0 0 100%; }
-    .SubmitFormSnippet .privacyNotice span {
-      vertical-align: top; }
   .SubmitFormSnippet .innerWrapper {
     max-width: 670px;
     flex-wrap: wrap;
@@ -1941,6 +1967,8 @@ main {
       max-width: 768px;
       width: 100%;
       text-align: right; }
+      [dir='rtl'] .SubmitFormSnippet .footer .footer-content {
+        text-align: left; }
   .SubmitFormSnippet input.mainInput {
     border-radius: 2px;
     background-color: var(--newtab-textbox-background-color);
@@ -1949,6 +1977,8 @@ main {
     height: 100%;
     font-size: 14px;
     width: 50%; }
+    .SubmitFormSnippet input.mainInput.clean:invalid, .SubmitFormSnippet input.mainInput.clean:required {
+      box-shadow: none; }
     .SubmitFormSnippet input.mainInput:focus {
       border: 1px solid var(--newtab-textbox-focus-color);
       box-shadow: var(--newtab-textbox-focus-boxshadow); }
@@ -2101,6 +2131,9 @@ main {
       background: #737373;
       color: #FFF;
       border: 1px solid #4A4A4F; }
+    .EOYSnippetForm input[type='radio']:checked:focus + .donation-amount,
+    .EOYSnippetForm input[type='radio']:not(:checked):focus + .donation-amount {
+      border: 1px dotted var(--newtab-link-primary-color); }
   .EOYSnippetForm .monthly-checkbox-container {
     width: 100%; }
     .EOYSnippetForm .monthly-checkbox-container input[type='checkbox'] {
@@ -2110,12 +2143,8 @@ main {
       vertical-align: super; }
   .EOYSnippetForm .donation-form-url {
     margin-inline-start: 18px;
-    background-color: var(--newtab-button-primary-color);
-    border: 0;
-    color: #FFF;
     align-self: flex-end;
-    display: flex;
+    display: flex; }
-    cursor: pointer; }
 
 .activity-stream.welcome {
   overflow: hidden; }

browser/components/newtab/data/content/activity-stream.bundle.js

@@ -93,17 +93,17 @@ __webpack_require__.r(__webpack_exports__);
 /* WEBPACK VAR INJECTION */(function(global) {/* harmony import */ var common_Actions_jsm__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2);
 /* harmony import */ var content_src_lib_snippets__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(3);
 /* harmony import */ var content_src_asrouter_asrouter_content__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(4);
-/* harmony import */ var content_src_components_Base_Base__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(17);
+/* harmony import */ var content_src_components_Base_Base__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(22);
-/* harmony import */ var content_src_lib_detect_user_session_start__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(42);
+/* harmony import */ var content_src_lib_detect_user_session_start__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(47);
-/* harmony import */ var content_src_lib_asroutercontent__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(43);
+/* harmony import */ var content_src_lib_asroutercontent__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(48);
 /* harmony import */ var content_src_lib_init_store__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(6);
-/* harmony import */ var react_redux__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(16);
+/* harmony import */ var react_redux__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(21);
 /* harmony import */ var react_redux__WEBPACK_IMPORTED_MODULE_7___default = /*#__PURE__*/__webpack_require__.n(react_redux__WEBPACK_IMPORTED_MODULE_7__);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(10);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_8___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_8__);
 /* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(14);
 /* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_9___default = /*#__PURE__*/__webpack_require__.n(react_dom__WEBPACK_IMPORTED_MODULE_9__);
-/* harmony import */ var common_Reducers_jsm__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(47);
+/* harmony import */ var common_Reducers_jsm__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(52);
 
 
 
@@ -935,14 +935,14 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var content_src_lib_init_store__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(6);
 /* harmony import */ var _rich_text_strings__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(8);
 /* harmony import */ var _components_ImpressionsWrapper_ImpressionsWrapper__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(9);
-/* harmony import */ var fluent_react__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(46);
+/* harmony import */ var fluent_react__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(51);
 /* harmony import */ var _templates_OnboardingMessage_OnboardingMessage__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(12);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(10);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_7___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_7__);
 /* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(14);
 /* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_8___default = /*#__PURE__*/__webpack_require__.n(react_dom__WEBPACK_IMPORTED_MODULE_8__);
-/* harmony import */ var _templates_template_manifest__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(44);
+/* harmony import */ var _templates_template_manifest__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(49);
-/* harmony import */ var _templates_StartupOverlay_StartupOverlay__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(15);
+/* harmony import */ var _templates_StartupOverlay_StartupOverlay__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(20);
 var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
 
@@ -1445,7 +1445,7 @@ module.exports = Redux;
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "RICH_TEXT_KEYS", function() { return RICH_TEXT_KEYS; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "generateMessages", function() { return generateMessages; });
-/* harmony import */ var fluent__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(45);
+/* harmony import */ var fluent__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(50);
 
 
 /**
@@ -1455,6 +1455,8 @@ __webpack_require__.r(__webpack_exports__);
  */
 const RICH_TEXT_CONFIG = {
   "text": ["text", "scene1_text"],
+  "success_text": "success_text",
+  "error_text": "error_text",
   "scene2_text": "scene2_text",
   "privacy_html": "scene2_privacy_html",
   "disclaimer_html": "scene2_disclaimer_html"
@@ -1728,6 +1730,36 @@ module.exports = ReactDOM;
 
 /***/ }),
 /* 15 */
+/***/ (function(module) {
+
+module.exports = {"title":"EOYSnippet","description":"Fundraising Snippet","version":"1.0.0","type":"object","definitions":{"plainText":{"description":"Plain text (no HTML allowed)","type":"string"},"richText":{"description":"Text with HTML subset allowed: i, b, u, strong, em, br","type":"string"},"link_url":{"description":"Target for links or buttons","type":"string","format":"uri"}},"properties":{"donation_form_url":{"type":"string","description":"Url to the donation form."},"currency_code":{"type":"string","description":"The code for the currency. Examle gbp, cad, usd.","default":"usd"},"locale":{"type":"string","description":"String for the locale code.","default":"en-US"},"text":{"allOf":[{"$ref":"#/definitions/richText"},{"description":"Main body text of snippet. HTML subset allowed: i, b, u, strong, em, br"}]},"text_color":{"type":"string","description":"Modify the text message color"},"background_color":{"type":"string","description":"Snippet background color."},"highlight_color":{"type":"string","description":"Paragraph em highlight color."},"donation_amount_first":{"type":"number","description":"First button amount."},"donation_amount_second":{"type":"number","description":"Second button amount."},"donation_amount_third":{"type":"number","description":"Third button amount."},"donation_amount_fourth":{"type":"number","description":"Fourth button amount."},"selected_button":{"type":"string","description":"Default donation_amount_second. Donation amount button that's selected by default.","default":"donation_amount_second"},"icon":{"type":"string","description":"Snippet icon. 64x64px. SVG or PNG preferred."},"title_icon":{"type":"string","description":"Small icon that shows up before the title / text. 16x16px. SVG or PNG preferred. Grayscale."},"button_label":{"allOf":[{"$ref":"#/definitions/plainText"},{"description":"Text for a button next to main snippet text that links to button_url. Requires button_url."}]},"button_color":{"type":"string","description":"The text color of the button. Valid CSS color."},"button_background_color":{"type":"string","description":"The background color of the button. Valid CSS color."},"block_button_text":{"type":"string","description":"Tooltip text used for dismiss button."},"monthly_checkbox_label_text":{"type":"string","description":"Label text for monthly checkbox.","default":"Make my donation monthly"},"test":{"type":"string","description":"Different styles for the snippet. Options are bold and takeover."},"do_not_autoblock":{"type":"boolean","description":"Used to prevent blocking the snippet after the CTA (link or button) has been clicked"},"links":{"additionalProperties":{"url":{"allOf":[{"$ref":"#/definitions/link_url"},{"description":"The url where the link points to."}]},"metric":{"type":"string","description":"Custom event name sent with telemetry event."},"args":{"type":"string","description":"Additional parameters for link action, example which specific menu the button should open"}}}},"additionalProperties":false,"required":["text","donation_form_url","donation_amount_first","donation_amount_second","donation_amount_third","donation_amount_fourth","button_label","currency_code"],"dependencies":{"button_color":["button_label"],"button_background_color":["button_label"]}};
+
+/***/ }),
+/* 16 */
+/***/ (function(module) {
+
+module.exports = {"title":"SimpleSnippet","description":"A simple template with an icon, text, and optional button.","version":"1.1.1","type":"object","definitions":{"plainText":{"description":"Plain text (no HTML allowed)","type":"string"},"richText":{"description":"Text with HTML subset allowed: i, b, u, strong, em, br","type":"string"},"link_url":{"description":"Target for links or buttons","type":"string","format":"uri"}},"properties":{"title":{"allOf":[{"$ref":"#/definitions/plainText"},{"description":"Snippet title displayed before snippet text"}]},"text":{"allOf":[{"$ref":"#/definitions/richText"},{"description":"Main body text of snippet. HTML subset allowed: i, b, u, strong, em, br"}]},"icon":{"type":"string","description":"Snippet icon. 64x64px. SVG or PNG preferred."},"title_icon":{"type":"string","description":"Small icon that shows up before the title / text. 16x16px. SVG or PNG preferred. Grayscale."},"button_action":{"type":"string","description":"The type of action the button should trigger."},"button_url":{"allOf":[{"$ref":"#/definitions/link_url"},{"description":"A url, button_label links to this"}]},"button_action_args":{"type":"string","description":"Additional parameters for button action, example which specific menu the button should open"},"button_label":{"allOf":[{"$ref":"#/definitions/plainText"},{"description":"Text for a button next to main snippet text that links to button_url. Requires button_url."}]},"button_color":{"type":"string","description":"The text color of the button. Valid CSS color."},"button_background_color":{"type":"string","description":"The background color of the button. Valid CSS color."},"block_button_text":{"type":"string","description":"Tooltip text used for dismiss button.","default":"Remove this"},"tall":{"type":"boolean","description":"To be used by fundraising only, increases height to roughly 120px. Defaults to false."},"do_not_autoblock":{"type":"boolean","description":"Used to prevent blocking the snippet after the CTA (link or button) has been clicked"},"links":{"additionalProperties":{"url":{"allOf":[{"$ref":"#/definitions/link_url"},{"description":"The url where the link points to."}]},"metric":{"type":"string","description":"Custom event name sent with telemetry event."},"args":{"type":"string","description":"Additional parameters for link action, example which specific menu the button should open"}}}},"additionalProperties":false,"required":["text"],"dependencies":{"button_action":["button_label"],"button_url":["button_label"],"button_color":["button_label"],"button_background_color":["button_label"]}};
+
+/***/ }),
+/* 17 */
+/***/ (function(module) {
+
+module.exports = {"title":"FXASignupSnippet","description":"A snippet template for FxA sign up/sign in","version":"1.0.0","type":"object","definitions":{"plainText":{"description":"Plain text (no HTML allowed)","type":"string"},"richText":{"description":"Text with HTML subset allowed: i, b, u, strong, em, br","type":"string"},"link_url":{"description":"Target for links or buttons","type":"string","format":"uri"}},"properties":{"scene1_title":{"allof":[{"$ref":"#/definitions/plainText"},{"description":"snippet title displayed before snippet text"}]},"scene1_text":{"allOf":[{"$ref":"#/definitions/richText"},{"description":"Main body text of snippet. HTML subset allowed: i, b, u, strong, em, br"}]},"scene2_title":{"allOf":[{"$ref":"#/definitions/plainText"},{"description":"Title displayed before text in scene 2. Should be plain text."}]},"scene2_text":{"allOf":[{"$ref":"#/definitions/richText"},{"description":"Main body text of snippet. HTML subset allowed: i, b, u, strong, em, br"}]},"scene1_icon":{"type":"string","description":"Snippet icon. 64x64px. SVG or PNG preferred."},"scene1_title_icon":{"type":"string","description":"Small icon that shows up before the title / text. 16x16px. SVG or PNG preferred. Grayscale."},"scene2_email_placeholder_text":{"type":"string","description":"Value to show while input is empty.","default":"Your email here"},"scene2_button_label":{"type":"string","description":"Label for form submit button","default":"Sign me up"},"scene2_dismiss_button_text":{"type":"string","description":"Label for the dismiss button when the sign-up form is expanded.","default":"Dismiss"},"hidden_inputs":{"type":"object","description":"Each entry represents a hidden input, key is used as value for the name property.","properties":{"action":{"type":"string","enum":["email"]},"context":{"type":"string","enum":["fx_desktop_v3"]},"entrypoint":{"type":"string","enum":["snippets"]},"service":{"type":"string","enum":["sync"]},"utm_content":{"type":"string","description":"Firefox version number"},"utm_source":{"type":"string","enum":["snippet"]},"utm_campaign":{"type":"string","description":"(fxa) Value to pass through to GA as utm_campaign."},"utm_term":{"type":"string","description":"(fxa) Value to pass through to GA as utm_term."},"additionalProperties":false}},"scene1_button_label":{"allOf":[{"$ref":"#/definitions/plainText"},{"description":"Text for a button next to main snippet text that links to button_url. Requires button_url."}],"default":"Learn more"},"scene1_button_color":{"type":"string","description":"The text color of the button. Valid CSS color."},"scene1_button_background_color":{"type":"string","description":"The background color of the button. Valid CSS color."},"do_not_autoblock":{"type":"boolean","description":"Used to prevent blocking the snippet after the CTA (link or button) has been clicked","default":false},"utm_campaign":{"type":"string","description":"(fxa) Value to pass through to GA as utm_campaign."},"utm_term":{"type":"string","description":"(fxa) Value to pass through to GA as utm_term."},"links":{"additionalProperties":{"url":{"allOf":[{"$ref":"#/definitions/link_url"},{"description":"The url where the link points to."}]},"metric":{"type":"string","description":"Custom event name sent with telemetry event."}}}},"additionalProperties":false,"required":["scene1_text","scene2_text","scene1_button_label"],"dependencies":{"scene1_button_color":["scene1_button_label"],"scene1_button_background_color":["scene1_button_label"]}};
+
+/***/ }),
+/* 18 */
+/***/ (function(module) {
+
+module.exports = {"title":"NewsletterSnippet","description":"A snippet template for send to device mobile download","version":"1.0.0","type":"object","definitions":{"plainText":{"description":"Plain text (no HTML allowed)","type":"string"},"richText":{"description":"Text with HTML subset allowed: i, b, u, strong, em, br","type":"string"},"link_url":{"description":"Target for links or buttons","type":"string","format":"uri"}},"properties":{"locale":{"type":"string","description":"Two to five character string for the locale code","default":"en-US"},"scene1_title":{"allof":[{"$ref":"#/definitions/plainText"},{"description":"snippet title displayed before snippet text"}]},"scene1_text":{"allOf":[{"$ref":"#/definitions/richText"},{"description":"Main body text of snippet. HTML subset allowed: i, b, u, strong, em, br"}]},"scene2_title":{"allOf":[{"$ref":"#/definitions/plainText"},{"description":"Title displayed before text in scene 2. Should be plain text."}]},"scene2_text":{"allOf":[{"$ref":"#/definitions/richText"},{"description":"Main body text of snippet. HTML subset allowed: i, b, u, strong, em, br"}]},"scene1_icon":{"type":"string","description":"Snippet icon. 64x64px. SVG or PNG preferred."},"scene1_title_icon":{"type":"string","description":"Small icon that shows up before the title / text. 16x16px. SVG or PNG preferred. Grayscale."},"scene2_email_placeholder_text":{"type":"string","description":"Value to show while input is empty.","default":"Your email here"},"scene2_button_label":{"type":"string","description":"Label for form submit button","default":"Sign me up"},"scene2_privacy_html":{"type":"string","description":"(send to device) Html for disclaimer and link underneath input box."},"scene2_dismiss_button_text":{"type":"string","description":"Label for the dismiss button when the sign-up form is expanded.","default":"Dismiss"},"hidden_inputs":{"type":"object","description":"Each entry represents a hidden input, key is used as value for the name property.","properties":{"fmt":{"type":"string","description":"","default":"H"}}},"scene1_button_label":{"allOf":[{"$ref":"#/definitions/plainText"},{"description":"Text for a button next to main snippet text that links to button_url. Requires button_url."}],"default":"Learn more"},"scene1_button_color":{"type":"string","description":"The text color of the button. Valid CSS color."},"scene1_button_background_color":{"type":"string","description":"The background color of the button. Valid CSS color."},"do_not_autoblock":{"type":"boolean","description":"Used to prevent blocking the snippet after the CTA (link or button) has been clicked","default":false},"success_text":{"type":"string","description":"Message shown on successful registration."},"error_text":{"type":"string","description":"Message shown if registration failed."},"scene2_newsletter":{"type":"string","description":"Newsletter/basket id user is subscribing to.","default":"mozilla-foundation"},"links":{"additionalProperties":{"url":{"allOf":[{"$ref":"#/definitions/link_url"},{"description":"The url where the link points to."}]},"metric":{"type":"string","description":"Custom event name sent with telemetry event."}}}},"additionalProperties":false,"required":["scene1_text","scene2_text","scene1_button_label"],"dependencies":{"scene1_button_color":["scene1_button_label"],"scene1_button_background_color":["scene1_button_label"]}};
+
+/***/ }),
+/* 19 */
+/***/ (function(module) {
+
+module.exports = {"title":"SendToDeviceSnippet","description":"A snippet template for send to device mobile download","version":"1.0.0","type":"object","definitions":{"plainText":{"description":"Plain text (no HTML allowed)","type":"string"},"richText":{"description":"Text with HTML subset allowed: i, b, u, strong, em, br","type":"string"},"link_url":{"description":"Target for links or buttons","type":"string","format":"uri"}},"properties":{"locale":{"type":"string","description":"Two to five character string for the locale code","default":"en-US"},"country":{"type":"string","description":"Two character string for the country code (used for SMS)","default":"us"},"scene1_title":{"allof":[{"$ref":"#/definitions/plainText"},{"description":"snippet title displayed before snippet text"}]},"scene1_text":{"allOf":[{"$ref":"#/definitions/richText"},{"description":"Main body text of snippet. HTML subset allowed: i, b, u, strong, em, br"}]},"scene2_title":{"allOf":[{"$ref":"#/definitions/plainText"},{"description":"Title displayed before text in scene 2. Should be plain text."}]},"scene2_text":{"allOf":[{"$ref":"#/definitions/richText"},{"description":"Main body text of snippet. HTML subset allowed: i, b, u, strong, em, br"}]},"scene1_icon":{"type":"string","description":"Snippet icon. 64x64px. SVG or PNG preferred."},"scene2_icon":{"type":"string","description":"(send to device) Image to display above the form. 98x98px. SVG or PNG preferred."},"scene1_title_icon":{"type":"string","description":"Small icon that shows up before the title / text. 16x16px. SVG or PNG preferred. Grayscale."},"scene2_email_placeholder_text":{"type":"string","description":"Value to show while input is empty.","default":"Your email here"},"scene2_button_label":{"type":"string","description":"Label for form submit button","default":"Send"},"scene2_input_placeholder":{"type":"string","description":"(send to device) Value to show while input is empty.","default":"Your email here"},"scene2_disclaimer_html":{"type":"string","description":"(send to device) Html for disclaimer and link underneath input box."},"scene2_dismiss_button_text":{"type":"string","description":"Label for the dismiss button when the sign-up form is expanded.","default":"Dismiss"},"hidden_inputs":{"type":"object","description":"Each entry represents a hidden input, key is used as value for the name property.","properties":{"action":{"type":"string","enum":["email"]},"context":{"type":"string","enum":["fx_desktop_v3"]},"entrypoint":{"type":"string","enum":["snippets"]},"service":{"type":"string","enum":["sync"]},"utm_content":{"type":"string","description":"Firefox version number"},"utm_source":{"type":"string","enum":["snippet"]},"utm_campaign":{"type":"string","description":"(fxa) Value to pass through to GA as utm_campaign."},"utm_term":{"type":"string","description":"(fxa) Value to pass through to GA as utm_term."},"additionalProperties":false}},"scene1_button_label":{"allOf":[{"$ref":"#/definitions/plainText"},{"description":"Text for a button next to main snippet text that links to button_url. Requires button_url."}],"default":"Learn more"},"scene1_button_color":{"type":"string","description":"The text color of the button. Valid CSS color."},"scene1_button_background_color":{"type":"string","description":"The background color of the button. Valid CSS color."},"do_not_autoblock":{"type":"boolean","description":"Used to prevent blocking the snippet after the CTA (link or button) has been clicked","default":false},"success_title":{"type":"string","description":"(send to device) Title shown before text on successful registration."},"success_text":{"type":"string","description":"Message shown on successful registration."},"error_text":{"type":"string","description":"Message shown if registration failed."},"include_sms":{"type":"boolean","description":"(send to device) Allow users to send an SMS message with the form?","default":false},"message_id_sms":{"type":"string","description":"(send to device) Newsletter/basket id representing the SMS message to be sent."},"message_id_email":{"type":"string","description":"(send to device) Newsletter/basket id representing the email message to be sent. Must be a value from the 'Slug' column here: https://basket.mozilla.org/news/."},"utm_campaign":{"type":"string","description":"(fxa) Value to pass through to GA as utm_campaign."},"utm_term":{"type":"string","description":"(fxa) Value to pass through to GA as utm_term."},"links":{"additionalProperties":{"url":{"allOf":[{"$ref":"#/definitions/link_url"},{"description":"The url where the link points to."}]},"metric":{"type":"string","description":"Custom event name sent with telemetry event."}}}},"additionalProperties":false,"required":["scene1_text","scene2_text","scene1_button_label"],"dependencies":{"scene1_button_color":["scene1_button_label"],"scene1_button_background_color":["scene1_button_label"]}};
+
+/***/ }),
+/* 20 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -1737,7 +1769,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var common_Actions_jsm__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2);
 /* harmony import */ var react_intl__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(5);
 /* harmony import */ var react_intl__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_intl__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var react_redux__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(16);
+/* harmony import */ var react_redux__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(21);
 /* harmony import */ var react_redux__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(react_redux__WEBPACK_IMPORTED_MODULE_2__);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(10);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_3__);
@@ -1956,13 +1988,13 @@ const getState = state => ({ fxa_endpoint: state.Prefs.values.fxa_endpoint });
 const StartupOverlay = Object(react_redux__WEBPACK_IMPORTED_MODULE_2__["connect"])(getState)(Object(react_intl__WEBPACK_IMPORTED_MODULE_1__["injectIntl"])(_StartupOverlay));
 
 /***/ }),
-/* 16 */
+/* 21 */
 /***/ (function(module, exports) {
 
 module.exports = ReactRedux;
 
 /***/ }),
-/* 17 */
+/* 22 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -1973,17 +2005,17 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var common_Actions_jsm__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2);
 /* harmony import */ var react_intl__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(5);
 /* harmony import */ var react_intl__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_intl__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var content_src_components_ASRouterAdmin_ASRouterAdmin__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(18);
+/* harmony import */ var content_src_components_ASRouterAdmin_ASRouterAdmin__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(23);
-/* harmony import */ var content_src_components_ConfirmDialog_ConfirmDialog__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(19);
+/* harmony import */ var content_src_components_ConfirmDialog_ConfirmDialog__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(24);
-/* harmony import */ var react_redux__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(16);
+/* harmony import */ var react_redux__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(21);
 /* harmony import */ var react_redux__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(react_redux__WEBPACK_IMPORTED_MODULE_4__);
-/* harmony import */ var content_src_components_ErrorBoundary_ErrorBoundary__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(20);
+/* harmony import */ var content_src_components_ErrorBoundary_ErrorBoundary__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(25);
-/* harmony import */ var content_src_components_ManualMigration_ManualMigration__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(21);
+/* harmony import */ var content_src_components_ManualMigration_ManualMigration__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(26);
-/* harmony import */ var common_PrerenderData_jsm__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(22);
+/* harmony import */ var common_PrerenderData_jsm__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(27);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(10);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_8___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_8__);
-/* harmony import */ var content_src_components_Search_Search__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(23);
+/* harmony import */ var content_src_components_Search_Search__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(28);
-/* harmony import */ var content_src_components_Sections_Sections__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(25);
+/* harmony import */ var content_src_components_Sections_Sections__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(30);
 
 
 
@@ -2169,7 +2201,7 @@ const Base = Object(react_redux__WEBPACK_IMPORTED_MODULE_4__["connect"])(state =
 /* WEBPACK VAR INJECTION */}.call(this, __webpack_require__(1)))
 
 /***/ }),
-/* 18 */
+/* 23 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -2771,7 +2803,7 @@ class ASRouterAdmin extends react__WEBPACK_IMPORTED_MODULE_2___default.a.PureCom
 }
 
 /***/ }),
-/* 19 */
+/* 24 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -2779,7 +2811,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "_ConfirmDialog", function() { return _ConfirmDialog; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ConfirmDialog", function() { return ConfirmDialog; });
 /* harmony import */ var common_Actions_jsm__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2);
-/* harmony import */ var react_redux__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(16);
+/* harmony import */ var react_redux__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(21);
 /* harmony import */ var react_redux__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_redux__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var react_intl__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(5);
 /* harmony import */ var react_intl__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(react_intl__WEBPACK_IMPORTED_MODULE_2__);
@@ -2883,7 +2915,7 @@ class _ConfirmDialog extends react__WEBPACK_IMPORTED_MODULE_3___default.a.PureCo
 const ConfirmDialog = Object(react_redux__WEBPACK_IMPORTED_MODULE_1__["connect"])(state => state.Dialog)(_ConfirmDialog);
 
 /***/ }),
-/* 20 */
+/* 25 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -2970,7 +3002,7 @@ class ErrorBoundary extends react__WEBPACK_IMPORTED_MODULE_1___default.a.PureCom
 ErrorBoundary.defaultProps = { FallbackComponent: ErrorBoundaryFallback };
 
 /***/ }),
-/* 21 */
+/* 26 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -2978,7 +3010,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "_ManualMigration", function() { return _ManualMigration; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ManualMigration", function() { return ManualMigration; });
 /* harmony import */ var common_Actions_jsm__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2);
-/* harmony import */ var react_redux__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(16);
+/* harmony import */ var react_redux__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(21);
 /* harmony import */ var react_redux__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_redux__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var react_intl__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(5);
 /* harmony import */ var react_intl__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(react_intl__WEBPACK_IMPORTED_MODULE_2__);
@@ -3045,7 +3077,7 @@ class _ManualMigration extends react__WEBPACK_IMPORTED_MODULE_3___default.a.Pure
 const ManualMigration = Object(react_redux__WEBPACK_IMPORTED_MODULE_1__["connect"])()(_ManualMigration);
 
 /***/ }),
-/* 22 */
+/* 27 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -3147,7 +3179,7 @@ var PrerenderData = new _PrerenderData({
 });
 
 /***/ }),
-/* 23 */
+/* 28 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -3157,9 +3189,9 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var react_intl__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(5);
 /* harmony import */ var react_intl__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react_intl__WEBPACK_IMPORTED_MODULE_0__);
 /* harmony import */ var common_Actions_jsm__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(2);
-/* harmony import */ var react_redux__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(16);
+/* harmony import */ var react_redux__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(21);
 /* harmony import */ var react_redux__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(react_redux__WEBPACK_IMPORTED_MODULE_2__);
-/* harmony import */ var content_src_lib_constants__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(24);
+/* harmony import */ var content_src_lib_constants__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(29);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(10);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_4__);
 /* globals ContentSearchUIController */
@@ -3275,7 +3307,7 @@ class _Search extends react__WEBPACK_IMPORTED_MODULE_4___default.a.PureComponent
 const Search = Object(react_redux__WEBPACK_IMPORTED_MODULE_2__["connect"])()(Object(react_intl__WEBPACK_IMPORTED_MODULE_0__["injectIntl"])(_Search));
 
 /***/ }),
-/* 24 */
+/* 29 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -3285,7 +3317,7 @@ const IS_NEWTAB = global.document && global.document.documentURI === "about:newt
 /* WEBPACK VAR INJECTION */}.call(this, __webpack_require__(1)))
 
 /***/ }),
-/* 25 */
+/* 30 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -3295,19 +3327,19 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "_Sections", function() { return _Sections; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "Sections", function() { return Sections; });
 /* harmony import */ var common_Actions_jsm__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2);
-/* harmony import */ var content_src_components_Card_Card__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(48);
+/* harmony import */ var content_src_components_Card_Card__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(53);
 /* harmony import */ var react_intl__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(5);
 /* harmony import */ var react_intl__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(react_intl__WEBPACK_IMPORTED_MODULE_2__);
-/* harmony import */ var content_src_components_CollapsibleSection_CollapsibleSection__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(30);
+/* harmony import */ var content_src_components_CollapsibleSection_CollapsibleSection__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(35);
-/* harmony import */ var content_src_components_ComponentPerfTimer_ComponentPerfTimer__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(33);
+/* harmony import */ var content_src_components_ComponentPerfTimer_ComponentPerfTimer__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(38);
-/* harmony import */ var react_redux__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(16);
+/* harmony import */ var react_redux__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(21);
 /* harmony import */ var react_redux__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(react_redux__WEBPACK_IMPORTED_MODULE_5__);
-/* harmony import */ var content_src_components_MoreRecommendations_MoreRecommendations__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(35);
+/* harmony import */ var content_src_components_MoreRecommendations_MoreRecommendations__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(40);
-/* harmony import */ var content_src_components_PocketLoggedInCta_PocketLoggedInCta__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(36);
+/* harmony import */ var content_src_components_PocketLoggedInCta_PocketLoggedInCta__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(41);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(10);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_8___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_8__);
-/* harmony import */ var content_src_components_Topics_Topics__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(37);
+/* harmony import */ var content_src_components_Topics_Topics__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(42);
-/* harmony import */ var content_src_components_TopSites_TopSites__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(38);
+/* harmony import */ var content_src_components_TopSites_TopSites__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(43);
 var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
 
@@ -3475,11 +3507,16 @@ class Section extends react__WEBPACK_IMPORTED_MODULE_8___default.a.PureComponent
     // to avoid a flash of logged out state while we render.
     const isPocketLoggedInDefined = isUserLoggedIn === true || isUserLoggedIn === false;
 
+    const hasTopics = topics && topics.length > 0;
+
     const shouldShowPocketCta = id === "topstories" && useCta && isUserLoggedIn === false;
 
     // Show topics only for top stories and if it has loaded with topics.
     // The classs .top-stories-bottom-container ensures content doesn't shift as things load.
-    const shouldShowTopics = id === "topstories" && topics && topics.length > 0 && (useCta && isUserLoggedIn === true || !useCta && isPocketLoggedInDefined);
+    const shouldShowTopics = id === "topstories" && hasTopics && (useCta && isUserLoggedIn === true || !useCta && isPocketLoggedInDefined);
+
+    // We use topics to determine language support for read more.
+    const shouldShowReadMore = read_more_endpoint && hasTopics;
 
     const realRows = rows.slice(0, maxCards);
 
@@ -3565,7 +3602,7 @@ class Section extends react__WEBPACK_IMPORTED_MODULE_8___default.a.PureComponent
           react__WEBPACK_IMPORTED_MODULE_8___default.a.createElement(
             "div",
             null,
-            read_more_endpoint && react__WEBPACK_IMPORTED_MODULE_8___default.a.createElement(content_src_components_MoreRecommendations_MoreRecommendations__WEBPACK_IMPORTED_MODULE_6__["MoreRecommendations"], { read_more_endpoint: read_more_endpoint })
+            shouldShowReadMore && react__WEBPACK_IMPORTED_MODULE_8___default.a.createElement(content_src_components_MoreRecommendations_MoreRecommendations__WEBPACK_IMPORTED_MODULE_6__["MoreRecommendations"], { read_more_endpoint: read_more_endpoint })
           )
         )
       )
@@ -3622,7 +3659,7 @@ const Sections = Object(react_redux__WEBPACK_IMPORTED_MODULE_5__["connect"])(sta
 /* WEBPACK VAR INJECTION */}.call(this, __webpack_require__(1)))
 
 /***/ }),
-/* 26 */
+/* 31 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -3849,7 +3886,7 @@ const LinkMenuOptions = {
 };
 
 /***/ }),
-/* 27 */
+/* 32 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -3857,12 +3894,12 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "_LinkMenu", function() { return _LinkMenu; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "LinkMenu", function() { return LinkMenu; });
 /* harmony import */ var common_Actions_jsm__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2);
-/* harmony import */ var react_redux__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(16);
+/* harmony import */ var react_redux__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(21);
 /* harmony import */ var react_redux__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_redux__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var content_src_components_ContextMenu_ContextMenu__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(28);
+/* harmony import */ var content_src_components_ContextMenu_ContextMenu__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(33);
 /* harmony import */ var react_intl__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(5);
 /* harmony import */ var react_intl__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(react_intl__WEBPACK_IMPORTED_MODULE_3__);
-/* harmony import */ var content_src_lib_link_menu_options__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(26);
+/* harmony import */ var content_src_lib_link_menu_options__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(31);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(10);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_5__);
 
@@ -3923,7 +3960,7 @@ const getState = state => ({ isPrivateBrowsingEnabled: state.Prefs.values.isPriv
 const LinkMenu = Object(react_redux__WEBPACK_IMPORTED_MODULE_1__["connect"])(getState)(Object(react_intl__WEBPACK_IMPORTED_MODULE_3__["injectIntl"])(_LinkMenu));
 
 /***/ }),
-/* 28 */
+/* 33 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -4022,7 +4059,7 @@ class ContextMenuItem extends react__WEBPACK_IMPORTED_MODULE_0___default.a.PureC
 /* WEBPACK VAR INJECTION */}.call(this, __webpack_require__(1)))
 
 /***/ }),
-/* 29 */
+/* 34 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -4079,7 +4116,7 @@ const ScreenshotUtils = {
 /* WEBPACK VAR INJECTION */}.call(this, __webpack_require__(1)))
 
 /***/ }),
-/* 30 */
+/* 35 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -4089,11 +4126,11 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var react_intl__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(5);
 /* harmony import */ var react_intl__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react_intl__WEBPACK_IMPORTED_MODULE_0__);
 /* harmony import */ var common_Actions_jsm__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(2);
-/* harmony import */ var content_src_components_ErrorBoundary_ErrorBoundary__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(20);
+/* harmony import */ var content_src_components_ErrorBoundary_ErrorBoundary__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(25);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(10);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_3__);
-/* harmony import */ var content_src_components_SectionMenu_SectionMenu__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(31);
+/* harmony import */ var content_src_components_SectionMenu_SectionMenu__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(36);
-/* harmony import */ var content_src_lib_section_menu_options__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(32);
+/* harmony import */ var content_src_lib_section_menu_options__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(37);
 
 
 
@@ -4335,7 +4372,7 @@ const CollapsibleSection = Object(react_intl__WEBPACK_IMPORTED_MODULE_0__["injec
 /* WEBPACK VAR INJECTION */}.call(this, __webpack_require__(1)))
 
 /***/ }),
-/* 31 */
+/* 36 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -4343,12 +4380,12 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "_SectionMenu", function() { return _SectionMenu; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "SectionMenu", function() { return SectionMenu; });
 /* harmony import */ var common_Actions_jsm__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2);
-/* harmony import */ var content_src_components_ContextMenu_ContextMenu__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(28);
+/* harmony import */ var content_src_components_ContextMenu_ContextMenu__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(33);
 /* harmony import */ var react_intl__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(5);
 /* harmony import */ var react_intl__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(react_intl__WEBPACK_IMPORTED_MODULE_2__);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(10);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_3__);
-/* harmony import */ var content_src_lib_section_menu_options__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(32);
+/* harmony import */ var content_src_lib_section_menu_options__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(37);
 
 
 
@@ -4407,7 +4444,7 @@ class _SectionMenu extends react__WEBPACK_IMPORTED_MODULE_3___default.a.PureComp
 const SectionMenu = Object(react_intl__WEBPACK_IMPORTED_MODULE_2__["injectIntl"])(_SectionMenu);
 
 /***/ }),
-/* 32 */
+/* 37 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -4496,14 +4533,14 @@ const SectionMenuOptions = {
 };
 
 /***/ }),
-/* 33 */
+/* 38 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ComponentPerfTimer", function() { return ComponentPerfTimer; });
 /* harmony import */ var common_Actions_jsm__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2);
-/* harmony import */ var common_PerfService_jsm__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(34);
+/* harmony import */ var common_PerfService_jsm__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(39);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(10);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_2__);
 
@@ -4670,7 +4707,7 @@ class ComponentPerfTimer extends react__WEBPACK_IMPORTED_MODULE_2___default.a.Co
 }
 
 /***/ }),
-/* 34 */
+/* 39 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -4805,7 +4842,7 @@ _PerfService.prototype = {
 var perfService = new _PerfService();
 
 /***/ }),
-/* 35 */
+/* 40 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -4833,14 +4870,14 @@ class MoreRecommendations extends react__WEBPACK_IMPORTED_MODULE_1___default.a.P
 }
 
 /***/ }),
-/* 36 */
+/* 41 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "_PocketLoggedInCta", function() { return _PocketLoggedInCta; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "PocketLoggedInCta", function() { return PocketLoggedInCta; });
-/* harmony import */ var react_redux__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(16);
+/* harmony import */ var react_redux__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(21);
 /* harmony import */ var react_redux__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react_redux__WEBPACK_IMPORTED_MODULE_0__);
 /* harmony import */ var react_intl__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(5);
 /* harmony import */ var react_intl__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_intl__WEBPACK_IMPORTED_MODULE_1__);
@@ -4877,7 +4914,7 @@ class _PocketLoggedInCta extends react__WEBPACK_IMPORTED_MODULE_2___default.a.Pu
 const PocketLoggedInCta = Object(react_redux__WEBPACK_IMPORTED_MODULE_0__["connect"])(state => ({ Pocket: state.Pocket }))(_PocketLoggedInCta);
 
 /***/ }),
-/* 37 */
+/* 42 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -4927,7 +4964,7 @@ class Topics extends react__WEBPACK_IMPORTED_MODULE_1___default.a.PureComponent
 }
 
 /***/ }),
-/* 38 */
+/* 43 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -4935,19 +4972,19 @@ __webpack_require__.r(__webpack_exports__);
 /* WEBPACK VAR INJECTION */(function(global) {/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "_TopSites", function() { return _TopSites; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "TopSites", function() { return TopSites; });
 /* harmony import */ var common_Actions_jsm__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2);
-/* harmony import */ var _TopSitesConstants__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(39);
+/* harmony import */ var _TopSitesConstants__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(44);
-/* harmony import */ var content_src_components_CollapsibleSection_CollapsibleSection__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(30);
+/* harmony import */ var content_src_components_CollapsibleSection_CollapsibleSection__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(35);
-/* harmony import */ var content_src_components_ComponentPerfTimer_ComponentPerfTimer__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(33);
+/* harmony import */ var content_src_components_ComponentPerfTimer_ComponentPerfTimer__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(38);
-/* harmony import */ var react_redux__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(16);
+/* harmony import */ var react_redux__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(21);
 /* harmony import */ var react_redux__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(react_redux__WEBPACK_IMPORTED_MODULE_4__);
 /* harmony import */ var react_intl__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(5);
 /* harmony import */ var react_intl__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(react_intl__WEBPACK_IMPORTED_MODULE_5__);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(10);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_6__);
-/* harmony import */ var _SearchShortcutsForm__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(40);
+/* harmony import */ var _SearchShortcutsForm__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(45);
-/* harmony import */ var common_Reducers_jsm__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(47);
+/* harmony import */ var common_Reducers_jsm__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(52);
-/* harmony import */ var _TopSiteForm__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(49);
+/* harmony import */ var _TopSiteForm__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(54);
-/* harmony import */ var _TopSite__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(41);
+/* harmony import */ var _TopSite__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(46);
 var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
 
@@ -5136,7 +5173,7 @@ const TopSites = Object(react_redux__WEBPACK_IMPORTED_MODULE_4__["connect"])(sta
 /* WEBPACK VAR INJECTION */}.call(this, __webpack_require__(1)))
 
 /***/ }),
-/* 39 */
+/* 44 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -5156,7 +5193,7 @@ const MIN_RICH_FAVICON_SIZE = 96;
 const MIN_CORNER_FAVICON_SIZE = 16;
 
 /***/ }),
-/* 40 */
+/* 45 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -5167,7 +5204,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var react_intl__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_intl__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(10);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_2__);
-/* harmony import */ var _TopSitesConstants__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(39);
+/* harmony import */ var _TopSitesConstants__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(44);
 
 
 
@@ -5336,7 +5373,7 @@ class SearchShortcutsForm extends react__WEBPACK_IMPORTED_MODULE_2___default.a.P
 }
 
 /***/ }),
-/* 41 */
+/* 46 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -5349,12 +5386,12 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var common_Actions_jsm__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2);
 /* harmony import */ var react_intl__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(5);
 /* harmony import */ var react_intl__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_intl__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var _TopSitesConstants__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(39);
+/* harmony import */ var _TopSitesConstants__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(44);
-/* harmony import */ var content_src_components_LinkMenu_LinkMenu__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(27);
+/* harmony import */ var content_src_components_LinkMenu_LinkMenu__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(32);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(10);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_4__);
-/* harmony import */ var content_src_lib_screenshot_utils__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(29);
+/* harmony import */ var content_src_lib_screenshot_utils__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(34);
-/* harmony import */ var common_Reducers_jsm__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(47);
+/* harmony import */ var common_Reducers_jsm__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(52);
 var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
 
@@ -5879,14 +5916,14 @@ class _TopSiteList extends react__WEBPACK_IMPORTED_MODULE_4___default.a.PureComp
 const TopSiteList = Object(react_intl__WEBPACK_IMPORTED_MODULE_1__["injectIntl"])(_TopSiteList);
 
 /***/ }),
-/* 42 */
+/* 47 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* WEBPACK VAR INJECTION */(function(global) {/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "DetectUserSessionStart", function() { return DetectUserSessionStart; });
 /* harmony import */ var common_Actions_jsm__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2);
-/* harmony import */ var common_PerfService_jsm__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(34);
+/* harmony import */ var common_PerfService_jsm__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(39);
 
 
 
@@ -5954,7 +5991,7 @@ class DetectUserSessionStart {
 /* WEBPACK VAR INJECTION */}.call(this, __webpack_require__(1)))
 
 /***/ }),
-/* 43 */
+/* 48 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -5977,7 +6014,7 @@ function enableASRouterContent(store, asrouterContent) {
 }
 
 /***/ }),
-/* 44 */
+/* 49 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -5986,6 +6023,9 @@ function enableASRouterContent(store, asrouterContent) {
 var external_React_ = __webpack_require__(10);
 var external_React_default = /*#__PURE__*/__webpack_require__.n(external_React_);
 
+// EXTERNAL MODULE: ./content-src/asrouter/templates/EOYSnippet/EOYSnippet.schema.json
+var EOYSnippet_schema = __webpack_require__(15);
+
 // CONCATENATED MODULE: ./content-src/asrouter/components/Button/Button.jsx
 
 
@@ -6008,13 +6048,13 @@ const Button = props => {
   return external_React_default.a.createElement(
     "button",
     { onClick: props.onClick,
-      className: props.className || "ASRouterButton",
+      className: props.className || "ASRouterButton secondary",
       style: style },
     props.children
   );
 };
 // EXTERNAL MODULE: ./node_modules/fluent-react/src/index.js + 7 modules
-var src = __webpack_require__(46);
+var src = __webpack_require__(51);
 
 // EXTERNAL MODULE: ./content-src/asrouter/rich-text-strings.js
 var rich_text_strings = __webpack_require__(8);
@@ -6091,9 +6131,13 @@ function RichText(props) {
     )
   );
 }
+// EXTERNAL MODULE: ./content-src/asrouter/templates/SimpleSnippet/SimpleSnippet.schema.json
+var SimpleSnippet_schema = __webpack_require__(16);
+
 // CONCATENATED MODULE: ./content-src/asrouter/components/SnippetBase/SnippetBase.jsx
 
 
+
 class SnippetBase_SnippetBase extends external_React_default.a.PureComponent {
   constructor(props) {
     super(props);
@@ -6127,7 +6171,8 @@ class SnippetBase_SnippetBase extends external_React_default.a.PureComponent {
       );
     }
 
-    return external_React_default.a.createElement("button", { className: "blockButton", title: this.props.content.block_button_text || "Remove this", onClick: this.onBlockClicked });
+    const defaultTitle = SimpleSnippet_schema.properties.block_button_text.default;
+    return external_React_default.a.createElement("button", { className: "blockButton", title: this.props.content.block_button_text || defaultTitle, onClick: this.onBlockClicked });
   }
 
   render() {
@@ -6180,11 +6225,17 @@ class SimpleSnippet_SimpleSnippet extends external_React_default.a.PureComponent
     }
   }
 
+  _shouldRenderButton() {
+    return this.props.content.button_action || this.props.onButtonClick || this.props.content.button_url;
+  }
+
   renderTitle() {
     const { title } = this.props.content;
     return title ? external_React_default.a.createElement(
       "h3",
-      { className: "title" },
+      { className: `title ${this._shouldRenderButton() ? "title-inline" : ""}` },
+      this.renderTitleIcon(),
+      " ",
       title
     ) : null;
   }
@@ -6196,7 +6247,7 @@ class SimpleSnippet_SimpleSnippet extends external_React_default.a.PureComponent
 
   renderButton() {
     const { props } = this;
-    if (!props.content.button_action && !props.onButtonClick && !props.content.button_url) {
+    if (!this._shouldRenderButton()) {
       return null;
     }
 
@@ -6235,8 +6286,6 @@ class SimpleSnippet_SimpleSnippet extends external_React_default.a.PureComponent
       external_React_default.a.createElement(
         "div",
         null,
-        this.renderTitleIcon(),
-        " ",
         this.renderTitle(),
         " ",
         external_React_default.a.createElement(
@@ -6260,6 +6309,7 @@ var EOYSnippet_extends = Object.assign || function (target) { for (var i = 1; i
 
 
 
+
 class EOYSnippet_EOYSnippetBase extends external_React_default.a.PureComponent {
   constructor(props) {
     super(props);
@@ -6332,7 +6382,7 @@ class EOYSnippet_EOYSnippetBase extends external_React_default.a.PureComponent {
       external_React_default.a.createElement("input", { type: "hidden", name: "presets", value: fieldNames.map(field => this.props.content[`donation_amount_${field}`]) }),
       external_React_default.a.createElement(
         "button",
-        { style: btnStyle, type: "submit", className: "ASRouterButton donation-form-url" },
+        { style: btnStyle, type: "submit", className: "ASRouterButton primary donation-form-url" },
         this.props.content.button_label
       )
     );
@@ -6354,16 +6404,19 @@ class EOYSnippet_EOYSnippetBase extends external_React_default.a.PureComponent {
 
 const EOYSnippet = props => {
   const extendedContent = Object.assign({
-    monthly_checkbox_label_text: "Make my donation monthly",
+    monthly_checkbox_label_text: EOYSnippet_schema.properties.monthly_checkbox_label_text.default,
-    locale: "en-US",
+    locale: EOYSnippet_schema.properties.locale.default,
-    currency_code: "usd",
+    currency_code: EOYSnippet_schema.properties.currency_code.default,
-    selected_button: "donation_amount_second"
+    selected_button: EOYSnippet_schema.properties.selected_button.default
   }, props.content);
 
   return external_React_default.a.createElement(EOYSnippet_EOYSnippetBase, EOYSnippet_extends({}, props, {
     content: extendedContent,
     form_method: "GET" }));
 };
+// EXTERNAL MODULE: ./content-src/asrouter/templates/FXASignupSnippet/FXASignupSnippet.schema.json
+var FXASignupSnippet_schema = __webpack_require__(17);
+
 // CONCATENATED MODULE: ./content-src/asrouter/templates/SubmitFormSnippet/SubmitFormSnippet.jsx
 var SubmitFormSnippet_extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
@@ -6380,15 +6433,23 @@ class SubmitFormSnippet_SubmitFormSnippet extends external_React_default.a.PureC
     super(props);
     this.expandSnippet = this.expandSnippet.bind(this);
     this.handleSubmit = this.handleSubmit.bind(this);
+    this.handleSubmitAttempt = this.handleSubmitAttempt.bind(this);
     this.onInputChange = this.onInputChange.bind(this);
     this.state = {
       expanded: false,
+      submitAttempted: false,
       signupSubmitted: false,
       signupSuccess: false,
       disableForm: false
     };
   }
 
+  handleSubmitAttempt() {
+    if (!this.state.submitAttempted) {
+      this.setState({ submitAttempted: true });
+    }
+  }
+
   handleSubmit(event) {
     var _this = this;
 
@@ -6475,12 +6536,12 @@ class SubmitFormSnippet_SubmitFormSnippet extends external_React_default.a.PureC
       return null;
     }
     return external_React_default.a.createElement(
-      "label",
+      "p",
-      { className: "privacyNotice", htmlFor: "id_privacy" },
+      { className: "privacyNotice" },
+      external_React_default.a.createElement("input", { type: "checkbox", id: "id_privacy", name: "privacy", required: "required" }),
       external_React_default.a.createElement(
-        "p",
+        "label",
-        null,
+        { htmlFor: "id_privacy" },
-        external_React_default.a.createElement("input", { type: "checkbox", id: "id_privacy", name: "privacy", required: "required" }),
         external_React_default.a.createElement(RichText, { text: content.scene2_privacy_html,
           localization_id: "privacy_html",
           links: content.links,
@@ -6495,7 +6556,7 @@ class SubmitFormSnippet_SubmitFormSnippet extends external_React_default.a.PureC
     const { content } = this.props;
     const isSuccess = this.state.signupSuccess;
     const successTitle = isSuccess && content.success_title;
-    const bodyText = isSuccess ? content.success_text : content.error_text;
+    const bodyText = isSuccess ? { success_text: content.success_text } : { error_text: content.error_text };
     const retryButtonText = content.scene1_button_label;
     return external_React_default.a.createElement(
       SnippetBase_SnippetBase,
@@ -6511,7 +6572,7 @@ class SubmitFormSnippet_SubmitFormSnippet extends external_React_default.a.PureC
         external_React_default.a.createElement(
           "p",
           null,
-          bodyText,
+          external_React_default.a.createElement(RichText, SubmitFormSnippet_extends({}, bodyText, { localization_id: isSuccess ? "success_text" : "error_text" })),
           isSuccess ? null : external_React_default.a.createElement(
             Button,
             { onClick: this.expandSnippet },
@@ -6535,7 +6596,7 @@ class SubmitFormSnippet_SubmitFormSnippet extends external_React_default.a.PureC
     return external_React_default.a.createElement("input", {
       ref: "mainInput",
       type: this.props.inputType || "email",
-      className: "mainInput",
+      className: `mainInput${this.state.submitAttempted ? "" : " clean"}`,
       name: "email",
       required: true,
       placeholder: placholder,
@@ -6560,18 +6621,18 @@ class SubmitFormSnippet_SubmitFormSnippet extends external_React_default.a.PureC
         external_React_default.a.createElement(
           "p",
           null,
-          content.scene2_title ? external_React_default.a.createElement(
+          content.scene2_title && external_React_default.a.createElement(
             "h3",
             { className: "scene2Title" },
             content.scene2_title
-          ) : null,
+          ),
           " ",
-          external_React_default.a.createElement(RichText, { scene2_text: content.scene2_text, localization_id: "scene2_text" })
+          content.scene2_text && external_React_default.a.createElement(RichText, { scene2_text: content.scene2_text, localization_id: "scene2_text" })
         )
       ),
       external_React_default.a.createElement(
         "form",
-        { action: content.form_action, method: this.props.form_method, onSubmit: this.handleSubmit, ref: "form" },
+        { action: this.props.form_action, method: this.props.form_method, onSubmit: this.handleSubmit, ref: "form" },
         this.renderHiddenFormInputs(),
         external_React_default.a.createElement(
           "div",
@@ -6579,7 +6640,7 @@ class SubmitFormSnippet_SubmitFormSnippet extends external_React_default.a.PureC
           this.renderInput(),
           external_React_default.a.createElement(
             "button",
-            { type: "submit", className: "ASRouterButton primary", ref: "formSubmitBtn" },
+            { type: "submit", className: "ASRouterButton primary", onClick: this.handleSubmitAttempt, ref: "formSubmitBtn" },
             content.scene2_button_label
           )
         ),
@@ -6613,14 +6674,15 @@ var FXASignupSnippet_extends = Object.assign || function (target) { for (var i =
 
 
 
+
 const FXASignupSnippet = props => {
   const userAgent = window.navigator.userAgent.match(/Firefox\/([0-9]+)\./);
   const firefox_version = userAgent ? parseInt(userAgent[1], 10) : 0;
   const extendedContent = Object.assign({
     form_action: "https://accounts.firefox.com/",
-    scene1_button_label: "Learn More",
+    scene1_button_label: FXASignupSnippet_schema.properties.scene1_button_label.default,
-    scene2_button_label: "Sign Me Up",
+    scene2_email_placeholder_text: FXASignupSnippet_schema.properties.scene2_email_placeholder_text.default,
-    scene2_email_placeholder_text: "Your Email Here"
+    scene2_button_label: FXASignupSnippet_schema.properties.scene2_button_label.default
   }, props.content, {
     hidden_inputs: Object.assign({
       action: "email",
@@ -6638,28 +6700,34 @@ const FXASignupSnippet = props => {
     content: extendedContent,
     form_method: "GET" }));
 };
+// EXTERNAL MODULE: ./content-src/asrouter/templates/NewsletterSnippet/NewsletterSnippet.schema.json
+var NewsletterSnippet_schema = __webpack_require__(18);
+
 // CONCATENATED MODULE: ./content-src/asrouter/templates/NewsletterSnippet/NewsletterSnippet.jsx
 var NewsletterSnippet_extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
 
 
 
+
 const NewsletterSnippet = props => {
   const extendedContent = Object.assign({
-    form_action: "https://basket.mozilla.org/subscribe.json",
+    scene1_button_label: NewsletterSnippet_schema.properties.scene1_button_label.default,
-    scene2_email_placeholder_text: "Your Email Here",
+    scene2_email_placeholder_text: NewsletterSnippet_schema.properties.scene2_email_placeholder_text.default,
-    scene2_button_label: "Sign Me Up"
+    scene2_button_label: NewsletterSnippet_schema.properties.scene2_button_label.default,
+    scene2_dismiss_button_text: NewsletterSnippet_schema.properties.scene2_dismiss_button_text.default
   }, props.content, {
     hidden_inputs: Object.assign({
-      newsletters: props.content.scene2_newsletter || "mozilla-foundation",
+      newsletters: props.content.scene2_newsletter || NewsletterSnippet_schema.properties.scene2_newsletter.default,
-      fmt: "H",
+      fmt: NewsletterSnippet_schema.properties.hidden_inputs.properties.fmt.default,
-      lang: props.content.locale || "en-US",
+      lang: props.content.locale || NewsletterSnippet_schema.properties.locale.default,
       source_url: `https://snippets.mozilla.com/show/${props.id}`
     }, props.content.hidden_inputs)
   });
 
   return external_React_default.a.createElement(SubmitFormSnippet_SubmitFormSnippet, NewsletterSnippet_extends({}, props, {
     content: extendedContent,
+    form_action: "https://basket.mozilla.org/subscribe.json",
     form_method: "POST" }));
 };
 // CONCATENATED MODULE: ./content-src/asrouter/templates/SendToDeviceSnippet/isEmailOrPhoneNumber.js
@@ -6697,6 +6765,9 @@ function isEmailOrPhoneNumber(val, content) {
   }
   return "";
 }
+// EXTERNAL MODULE: ./content-src/asrouter/templates/SendToDeviceSnippet/SendToDeviceSnippet.schema.json
+var SendToDeviceSnippet_schema = __webpack_require__(19);
+
 // CONCATENATED MODULE: ./content-src/asrouter/templates/SendToDeviceSnippet/SendToDeviceSnippet.jsx
 var SendToDeviceSnippet_extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
@@ -6704,6 +6775,7 @@ var SendToDeviceSnippet_extends = Object.assign || function (target) { for (var
 
 
 
+
 function validateInput(value, content) {
   const type = isEmailOrPhoneNumber(value, content);
   return type ? "" : "Must be an email or a phone number.";
@@ -6732,14 +6804,14 @@ function processFormData(input, message) {
 function addDefaultValues(props) {
   return Object.assign({}, props, {
     content: Object.assign({
-      scene1_button_label: "Learn More",
+      scene1_button_label: SendToDeviceSnippet_schema.properties.scene1_button_label.default,
-      scene2_dismiss_button_text: "Dismiss",
+      scene2_dismiss_button_text: SendToDeviceSnippet_schema.properties.scene2_dismiss_button_text.default,
-      scene2_button_label: "Send",
+      scene2_button_label: SendToDeviceSnippet_schema.properties.scene2_button_label.default,
-      scene2_input_placeholder: "YOUR EMAIL HERE",
+      scene2_input_placeholder: SendToDeviceSnippet_schema.properties.scene2_input_placeholder.default,
-      locale: "en-US",
+      locale: SendToDeviceSnippet_schema.properties.locale.default,
-      country: "us",
+      country: SendToDeviceSnippet_schema.properties.country.default,
       message_id_email: "",
-      include_sms: false
+      include_sms: SendToDeviceSnippet_schema.properties.include_sms.default
     }, props.content)
   });
 }
@@ -6772,7 +6844,7 @@ const SnippetsTemplates = {
 };
 
 /***/ }),
-/* 45 */
+/* 50 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -8873,7 +8945,7 @@ function ftl(strings) {
 
 
 /***/ }),
-/* 46 */
+/* 51 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -8886,7 +8958,7 @@ var external_PropTypes_ = __webpack_require__(11);
 var external_PropTypes_default = /*#__PURE__*/__webpack_require__.n(external_PropTypes_);
 
 // EXTERNAL MODULE: ./node_modules/fluent/src/index.js + 8 modules
-var src = __webpack_require__(45);
+var src = __webpack_require__(50);
 
 // CONCATENATED MODULE: ./node_modules/fluent-react/src/localization.js
 
@@ -9388,7 +9460,7 @@ localized_Localized.propTypes = {
 
 
 /***/ }),
-/* 47 */
+/* 52 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -9870,7 +9942,7 @@ function Pocket(prevState = INITIAL_STATE.Pocket, action) {
 var reducers = { TopSites, App, ASRouter, Snippets, Prefs, Dialog, Sections, Pocket };
 
 /***/ }),
-/* 48 */
+/* 53 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -9909,20 +9981,20 @@ const cardContextTypes = {
   }
 };
 // EXTERNAL MODULE: external "ReactRedux"
-var external_ReactRedux_ = __webpack_require__(16);
+var external_ReactRedux_ = __webpack_require__(21);
 
 // EXTERNAL MODULE: ./content-src/lib/link-menu-options.js
-var link_menu_options = __webpack_require__(26);
+var link_menu_options = __webpack_require__(31);
 
 // EXTERNAL MODULE: ./content-src/components/LinkMenu/LinkMenu.jsx
-var LinkMenu = __webpack_require__(27);
+var LinkMenu = __webpack_require__(32);
 
 // EXTERNAL MODULE: external "React"
 var external_React_ = __webpack_require__(10);
 var external_React_default = /*#__PURE__*/__webpack_require__.n(external_React_);
 
 // EXTERNAL MODULE: ./content-src/lib/screenshot-utils.js
-var screenshot_utils = __webpack_require__(29);
+var screenshot_utils = __webpack_require__(34);
 
 // CONCATENATED MODULE: ./content-src/components/Card/Card.jsx
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "_Card", function() { return Card_Card; });
@@ -10234,7 +10306,7 @@ const Card = Object(external_ReactRedux_["connect"])(state => ({ platform: state
 const PlaceholderCard = props => external_React_default.a.createElement(Card, { placeholder: true, className: props.className });
 
 /***/ }),
-/* 49 */
+/* 54 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -10250,7 +10322,7 @@ var external_React_ = __webpack_require__(10);
 var external_React_default = /*#__PURE__*/__webpack_require__.n(external_React_);
 
 // EXTERNAL MODULE: ./content-src/components/TopSites/TopSitesConstants.js
-var TopSitesConstants = __webpack_require__(39);
+var TopSitesConstants = __webpack_require__(44);
 
 // CONCATENATED MODULE: ./content-src/components/TopSites/TopSiteFormInput.jsx
 
@@ -10328,7 +10400,7 @@ TopSiteFormInput_TopSiteFormInput.defaultProps = {
   validationError: false
 };
 // EXTERNAL MODULE: ./content-src/components/TopSites/TopSite.jsx
-var TopSite = __webpack_require__(41);
+var TopSite = __webpack_require__(46);
 
 // CONCATENATED MODULE: ./content-src/components/TopSites/TopSiteForm.jsx
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "TopSiteForm", function() { return TopSiteForm_TopSiteForm; });

browser/components/newtab/lib/ActivityStream.jsm

@@ -45,8 +45,6 @@ const GEO_PREF = "browser.search.region";
 const SPOCS_GEOS = ["US"];
 const IS_NIGHTLY_OR_UNBRANDED_BUILD = ["nightly", "default"].includes(UpdateUtils.getUpdateChannel(true));
 
-const ONE_HOUR_IN_MS = 60 * 60 * 1000;
-
 // Determine if spocs should be shown for a geo/locale
 function showSpocs({geo}) {
   return SPOCS_GEOS.includes(geo);

browser/components/newtab/lib/SnippetsTestMessageProvider.jsm

@@ -4,6 +4,7 @@
 "use strict";
 
 const TEST_ICON = "chrome://branding/content/icon64.png";
+const TEST_ICON_16 = "chrome://branding/content/icon16.png";
 
 const MESSAGES = () => ([
   {
@@ -12,6 +13,8 @@ const MESSAGES = () => ([
     "campaign": "test_campaign_blocking",
     "content": {
       "icon": TEST_ICON,
+      "title": "Firefox Account!",
+      "title_icon": TEST_ICON_16,
       "text": "<syncLink>Sync it, link it, take it with you</syncLink>. All this and more with a Firefox Account.",
       "links": {"syncLink": {"url": "https://www.mozilla.org/en-US/firefox/accounts"}},
       "block_button_text": "Block",
@@ -69,7 +72,7 @@ const MESSAGES = () => ([
     "content": {
       "scene1_icon": TEST_ICON,
       "scene1_title": "Be a part of a movement.",
-      "scene1_title_icon": "",
+      "scene1_title_icon": TEST_ICON_16,
       "scene1_text": "Internet shutdowns, hackers, harassment &ndash; the health of the internet is on the line. Sign up and Mozilla will keep you updated on how you can help.",
       "scene1_button_label": "Continue",
       "scene1_button_color": "#712b00",
@@ -79,7 +82,6 @@ const MESSAGES = () => ([
       "scene2_text": "Sign up for the Mozilla newsletter and we will keep you updated on how you can help.",
       "scene2_privacy_html": "I'm okay with Mozilla handling my info as explained in this <privacyLink>Privacy Notice</privacyLink>.",
       "scene2_newsletter": "mozilla-foundation",
-      "form_action": "https://basket.mozilla.org/subscribe.json",
       "success_text": "Check your inbox for the confirmation!",
       "error_text": "Error!",
       "links": {"privacyLink": {"url": "https://www.mozilla.org/privacy/websites/?sample_rate=0.001&snippet_name=7894"}},
@@ -104,7 +106,6 @@ const MESSAGES = () => ([
       "scene2_button_label": "Sign Me up",
       "scene2_email_placeholder_text": "Your email here",
       "scene2_newsletter": "mozilla-foundation",
-      "form_action": "https://basket.mozilla.org/subscribe.json",
       "success_text": "Check your inbox for the confirmation!",
       "error_text": "Error!",
       "links": {"privacyLink": {"url": "https://www.mozilla.org/privacy/websites/?sample_rate=0.001&snippet_name=7894"}},
@@ -121,7 +122,7 @@ const MESSAGES = () => ([
 
       "scene1_text": "Connect to Firefox by securely syncing passwords, bookmarks, and open tabs.",
       "scene1_title": "Browser better.",
-      "scene1_title_icon": "",
+      "scene1_title_icon": TEST_ICON_16,
 
       "scene2_text": "Connect to your Firefox account to securely sync passwords, bookmarks, and open tabs.",
       "scene2_title": "Title 123",
@@ -147,7 +148,7 @@ const MESSAGES = () => ([
       scene1_icon: TEST_ICON,
       scene1_text: "Browse without compromise with Firefox Mobile.",
       scene1_title: "Full-featured. Customizable. Lightning fast",
-      scene1_title_icon: "",
+      scene1_title_icon: TEST_ICON_16,
 
       scene2_button_label: "Send",
       scene2_disclaimer_html: "The intended recipient of the email must have consented. <privacyLink>Learn more.</privacyLink>",
@@ -168,6 +169,8 @@ const MESSAGES = () => ([
     "template": "eoy_snippet",
     "content": {
       "highlight_color": "#f05",
+      "background_color": "#ddd",
+      "text_color": "yellow",
       "selected_button": "donation_amount_first",
       "icon": TEST_ICON,
       "button_label": "Donate",

browser/components/newtab/lib/TopStoriesFeed.jsm

@@ -253,21 +253,30 @@ this.TopStoriesFeed = class TopStoriesFeed {
     const scoreStart = perfService.absNow();
     const calcResult = items
       .filter(s => !NewTabUtils.blockedLinks.isBlocked({"url": s.url}))
-      .map(s => ({
+      .map(s => {
-        "guid": s.id,
+        let mapped = {
-        "hostname": s.domain || shortURL(Object.assign({}, s, {url: s.url})),
+          "guid": s.id,
-        "type": (Date.now() - (s.published_timestamp * 1000)) <= STORIES_NOW_THRESHOLD ? "now" : "trending",
+          "hostname": s.domain || shortURL(Object.assign({}, s, {url: s.url})),
-        "context": s.context,
+          "type": (Date.now() - (s.published_timestamp * 1000)) <= STORIES_NOW_THRESHOLD ? "now" : "trending",
-        "icon": s.icon,
+          "context": s.context,
-        "title": s.title,
+          "icon": s.icon,
-        "description": s.excerpt,
+          "title": s.title,
-        "image": this.normalizeUrl(s.image_src),
+          "description": s.excerpt,
-        "referrer": this.stories_referrer,
+          "image": this.normalizeUrl(s.image_src),
-        "url": s.url,
+          "referrer": this.stories_referrer,
-        "min_score": s.min_score || 0,
+          "url": s.url,
-        "score": this.personalized && this.affinityProvider ? this.affinityProvider.calculateItemRelevanceScore(s) : s.item_score || 1,
+          "min_score": s.min_score || 0,
-        "spoc_meta": this.show_spocs ? {campaign_id: s.campaign_id, caps: s.caps} : {},
+          "score": this.personalized && this.affinityProvider ? this.affinityProvider.calculateItemRelevanceScore(s) : s.item_score || 1,
-      }))
+          "spoc_meta": this.show_spocs ? {campaign_id: s.campaign_id, caps: s.caps} : {},
+        };
+
+        // Very old cached spocs may not contain an `expiration_timestamp` property
+        if (s.expiration_timestamp) {
+          mapped.expiration_timestamp = s.expiration_timestamp;
+        }
+
+        return mapped;
+      })
       .sort(this.personalized ? this.compareScore : (a, b) => 0);
 
     this.dispatchRelevanceScore(scoreStart);
@@ -401,29 +410,43 @@ this.TopStoriesFeed = class TopStoriesFeed {
     this.store.dispatch(ac.OnlyToOneContent(action, target));
   }
 
+  filterSpocs() {
+    if (!this.shouldShowSpocs()) {
+      return [];
+    }
+
+    if (Math.random() > this.spocsPerNewTabs) {
+      return [];
+    }
+
+    if (!this.spocs || !this.spocs.length) {
+      // We have stories but no spocs so there's nothing to do and this update can be
+      // removed from the queue.
+      return [];
+    }
+
+    // Filter spocs based on frequency caps
+    const impressions = this.readImpressionsPref(SPOC_IMPRESSION_TRACKING_PREF);
+    let spocs = this.spocs.filter(s => this.isBelowFrequencyCap(impressions, s));
+
+    // Filter out expired spocs based on `expiration_timestamp`
+    spocs = spocs.filter(spoc => {
+      // If cached data is so old it doesn't contain this property, assume the spoc is ok to show
+      if (!(`expiration_timestamp` in spoc)) {
+        return true;
+      }
+      // `expiration_timestamp` is the number of seconds elapsed since January 1, 1970 00:00:00 UTC
+      return spoc.expiration_timestamp * 1000 > Date.now();
+    });
+
+    return spocs;
+  }
+
   maybeAddSpoc(target) {
     const updateContent = () => {
-      if (!this.shouldShowSpocs()) {
+      let spocs = this.filterSpocs();
-        this.dispatchSpocDone(target);
-        return false;
-      }
-      if (Math.random() > this.spocsPerNewTabs) {
-        this.dispatchSpocDone(target);
-        return false;
-      }
-      if (!this.spocs || !this.spocs.length) {
-        // We have stories but no spocs so there's nothing to do and this update can be
-        // removed from the queue.
-        this.dispatchSpocDone(target);
-        return false;
-      }
-
-      // Filter spocs based on frequency caps
-      const impressions = this.readImpressionsPref(SPOC_IMPRESSION_TRACKING_PREF);
-      const spocs = this.spocs.filter(s => this.isBelowFrequencyCap(impressions, s));
 
       if (!spocs.length) {
-        // There's currently no spoc left to display
         this.dispatchSpocDone(target);
         return false;
       }

browser/components/newtab/locales-src/bn-BD/strings.properties

@@ -143,8 +143,10 @@ pocket_read_more=জনপ্রিয় বিষয়:
 # LOCALIZATION NOTE (pocket_read_even_more): This is shown as a link at the
 # end of the list of popular topic links.
 pocket_read_even_more=আরও গল্প দেখুন
+pocket_more_reccommendations=আরও সুপারিশ
 pocket_learn_more=আরও জানুন
 pocket_how_it_works=কিভাবে এটা কাজ করে
+pocket_cta_button=Pocket ব্যবহার করুন
 
 highlights_empty_state=ব্রাউজি করা শুরু করুন, এবং কিছু গুরুত্বপূর্ণ নিবন্ধ, ভিডিও, এবং আপনি সম্প্রতি পরিদর্শন বা বুকমার্ক করেছেন এমন কিছু পৃষ্ঠা আমরা এখানে প্রদর্শন করব।
 # LOCALIZATION NOTE (topstories_empty_state): When there are no recommendations,
@@ -203,3 +205,6 @@ firstrun_privacy_notice=গোপনীয়তা নীতি
 
 firstrun_continue_to_login=চালিয়ে যান
 firstrun_skip_login=এই ধাপটি বাদ দিন
+
+# LOCALIZATION NOTE (context_menu_title): Action tooltip to open a context menu
+context_menu_title=মেনু খুলুন

browser/components/newtab/locales-src/es-ES/strings.properties

@@ -145,6 +145,7 @@ pocket_read_more=Temas populares:
 pocket_read_even_more=Ver más historias
 pocket_more_reccommendations=Más recomendaciones
 pocket_learn_more=Saber más
+pocket_how_it_works=Cómo funciona
 pocket_cta_button=Obtener Pocket
 pocket_cta_text=Guarde en Pocket las historias que le gustan y alimente su mente con lecturas fascinantes.
 

browser/components/newtab/locales-src/gl/strings.properties

@@ -143,6 +143,10 @@ pocket_read_more=Temas populares:
 # LOCALIZATION NOTE (pocket_read_even_more): This is shown as a link at the
 # end of the list of popular topic links.
 pocket_read_even_more=Ver máis historias
+pocket_more_reccommendations=Máis recomendacións
+pocket_how_it_works=Como funciona
+pocket_cta_button=Obter Pocket
+pocket_cta_text=Garde no Pocket as historias que lle gusten, e alimente a súa imaxinación con lecturas fascinantes.
 
 highlights_empty_state=Comece a navegar e aquí amosarémoslle algúns dos mellores artigos, vídeos e outras páxinas que visitara recentemente ou que engadira aos marcadores.
 # LOCALIZATION NOTE (topstories_empty_state): When there are no recommendations,
@@ -173,6 +177,7 @@ section_menu_action_expand_section=Expandir sección
 section_menu_action_manage_section=Xestionar sección
 section_menu_action_manage_webext=Xestionar extensión
 section_menu_action_add_topsite=Engadir sitio favorito
+section_menu_action_add_search_engine=Engadir buscador
 section_menu_action_move_up=Subir
 section_menu_action_move_down=Baixar
 section_menu_action_privacy_notice=Política de privacidade
@@ -190,6 +195,7 @@ firstrun_form_header=Escriba o seu correo
 firstrun_form_sub_header=para continuar a Firefox Sync.
 
 firstrun_email_input_placeholder=Correo electrónico
+firstrun_invalid_input=Requírese un correo válido
 
 # LOCALIZATION NOTE (firstrun_extra_legal_links): {terms} is equal to firstrun_terms_of_service, and
 # {privacy} is equal to firstrun_privacy_notice. {terms} and {privacy} are clickable links.
@@ -199,4 +205,6 @@ firstrun_privacy_notice=Política de privacidade
 
 firstrun_continue_to_login=Continuar
 firstrun_skip_login=Ignorar este paso
-section_menu_action_add_search_engine=Engadir buscador
+
+# LOCALIZATION NOTE (context_menu_title): Action tooltip to open a context menu
+context_menu_title=Abrir menú

browser/components/newtab/locales-src/gu-IN/strings.properties

@@ -143,9 +143,9 @@ pocket_read_more=લોકપ્રિય વિષયો:
 # LOCALIZATION NOTE (pocket_read_even_more): This is shown as a link at the
 # end of the list of popular topic links.
 pocket_read_even_more=વધુ વાર્તાઓ જુઓ
-
 pocket_more_reccommendations=વધુ ભલામણો
 pocket_learn_more=વધુ શીખો
+pocket_how_it_works=તે કેવી રીતે કામ કરે છે
 pocket_cta_button=Pocket મેળવો
 pocket_cta_text=Pocket તમને જે કથાઓ ગમે છે તે સાચવો, અને તમારા મનને રસપ્રદ વાંચન સાથે ઉત્તેજિત કરો.
 
@@ -196,7 +196,6 @@ firstrun_form_header=તમારા ઇમેઇલ દાખલ કરો
 firstrun_form_sub_header=Firefox સમન્વયન ચાલુ રાખવા માટે.
 
 firstrun_email_input_placeholder=ઇમેઇલ
-
 firstrun_invalid_input=માન્ય ઇમેઇલ આવશ્યક છે
 
 # LOCALIZATION NOTE (firstrun_extra_legal_links): {terms} is equal to firstrun_terms_of_service, and
@@ -207,3 +206,6 @@ firstrun_privacy_notice=ખાનગી સૂચના
 
 firstrun_continue_to_login=ચાલુ રાખો
 firstrun_skip_login=આ પગલું છોડી દો
+
+# LOCALIZATION NOTE (context_menu_title): Action tooltip to open a context menu
+context_menu_title=મેનૂ ખોલો

browser/components/newtab/locales-src/id/strings.properties

@@ -117,8 +117,8 @@ settings_pane_snippets_header=Catatan Kecil
 
 # LOCALIZATION NOTE (edit_topsites_*): This is shown in the Edit Top Sites modal
 # dialog.
-edit_topsites_button_text=Sunting
+edit_topsites_button_text=Edit
-edit_topsites_edit_button=Sunting situs ini
+edit_topsites_edit_button=Edit situs ini
 
 # LOCALIZATION NOTE (topsites_form_*): This is shown in the New/Edit Topsite modal.
 topsites_form_add_header=Situs Pilihan Baru

browser/components/newtab/locales-src/km/strings.properties

@@ -54,6 +54,8 @@ menu_action_open_file=បើកឯកសារ
 # LOCALIZATION NOTE (menu_action_copy_download_link, menu_action_go_to_download_page):
 # "Download" here, in both cases, is not a verb, it is a noun. As in, "Copy the
 # link that belongs to this downloaded item"
+menu_action_copy_download_link=ចម្លង​តំណ​ទាញ​យក
+menu_action_go_to_download_page=ទៅ​កាន់​ទំព័រ​ទាញ​យក
 
 # LOCALIZATION NOTE (search_button): This is screenreader only text for the
 # search button.
@@ -131,6 +133,8 @@ pocket_read_more=ប្រធានបទកំពុងពេញនិយម៖
 # LOCALIZATION NOTE (pocket_read_even_more): This is shown as a link at the
 # end of the list of popular topic links.
 pocket_read_even_more=មើលរឿងរ៉ាវច្រើនទៀត
+pocket_learn_more=ស្វែងយល់​បន្ថែម
+pocket_how_it_works=របៀប​ដែល​វា​ដំណើរការ
 
 highlights_empty_state=ចាប់ផ្តើមការរុករក ហើយយើងនឹងបង្ហាញអត្ថបទ វីដេអូ និងទំព័រដ៏អស្ចារ្យផ្សេងទៀតដែលអ្នកបានមើល ឬបានចំណាំនៅទីនេះ។
 # LOCALIZATION NOTE (topstories_empty_state): When there are no recommendations,
@@ -182,3 +186,4 @@ firstrun_email_input_placeholder=អ៊ីមែល
 firstrun_continue_to_login=បន្ត
 
 # LOCALIZATION NOTE (context_menu_title): Action tooltip to open a context menu
+context_menu_title=បើក​ម៉ឺនុយ

browser/components/newtab/locales-src/my/strings.properties

@@ -150,9 +150,15 @@ section_menu_action_remove_section=အပိုင်းကို ပယ်ဖ
 section_menu_action_expand_section=အပိုင်းတိုးချဲ့ပါ
 section_menu_action_manage_section=အပိုင်းများကိုစီမံရန်
 section_menu_action_add_topsite=ထိပ်တန်းဆိုက်များကို ပေါင်းထည့်ပါ
+section_menu_action_add_search_engine=ရှာဖွေရေးအင်ဂျင် ထည့်ပါ
+section_menu_action_move_up=အပေါ်သို့ ရွှေ့ပါ
+section_menu_action_move_down=အောက်သို့ ရွှေ့ပါ
+section_menu_action_privacy_notice=ကိုယ်ရေးကာကွယ်မှု သတိပေးချက်
 
 # LOCALIZATION NOTE (firstrun_*). These strings are displayed only once, on the
 # firstrun of the browser, they give an introduction to Firefox and Sync.
+firstrun_title=Firefox ကို သင်နှင့်အတူ ခေါ်ဆောင်ပါ
+firstrun_learn_more_link=Firefox အကောင့်များအကြောင်း ပိုမိုလေ့လာရန်
 
 # LOCALIZATION NOTE (firstrun_form_header and firstrun_form_sub_header):
 # firstrun_form_sub_header is a continuation of firstrun_form_header, they are one sentence.
@@ -165,5 +171,8 @@ firstrun_invalid_input=အီးမေးလ်အမှန် လိုအပ
 # LOCALIZATION NOTE (firstrun_extra_legal_links): {terms} is equal to firstrun_terms_of_service, and
 # {privacy} is equal to firstrun_privacy_notice. {terms} and {privacy} are clickable links.
 
+firstrun_continue_to_login=ဆက်၍
+firstrun_skip_login=ဒီအဆင့်ကို ကျော်ပါ
 
 # LOCALIZATION NOTE (context_menu_title): Action tooltip to open a context menu
+context_menu_title=မီနူးကို ဖွင့်ပါ

browser/components/newtab/locales-src/tl/strings.properties

@@ -97,6 +97,7 @@ prefs_home_description=Piliin kung anong nilalaman ang gusto mo sa iyong screen
 prefs_section_rows_option={num} hilera;{num} mga hilera
 prefs_search_header=Paghahanap sa Web
 prefs_topsites_description=Ang mga site na iyong pinupuntahan
+prefs_topstories_options_sponsored_label=Mga Na-sponsor na Kwento
 prefs_topstories_sponsored_learn_more=Matuto ng higit pa
 prefs_highlights_description=Ang isang seleksyon ng mga site na iyong nai-save o binisita
 prefs_highlights_options_visited_label=Mga pahinang binisita
@@ -141,9 +142,11 @@ pocket_read_more=Tanyag na mga paksa:
 # LOCALIZATION NOTE (pocket_read_even_more): This is shown as a link at the
 # end of the list of popular topic links.
 pocket_read_even_more=Tignan ang higit pang mga kuwento
+pocket_more_reccommendations=Karagdagang Rekomendasyon
 pocket_learn_more=Alamin Pa
 pocket_how_it_works=Paano gamitin
 pocket_cta_button=Kunin ang Pocket
+pocket_cta_text=I-save sa Pocket ang mga kwentong iyong nagustuhan, at palawigin ang iyong pagiisip sa mga nakabibighaning babasahin.
 
 highlights_empty_state=Magsimulang mag-browse, at ipapakita namin ang ilan sa mga magagandang artikulo, video, at iba pang mga pahina na kamakailan mong binisita o na-bookmark dito.
 # LOCALIZATION NOTE (topstories_empty_state): When there are no recommendations,
@@ -172,6 +175,7 @@ section_menu_action_remove_section=Alisin ang Seksyon
 section_menu_action_collapse_section=I-collapse ang Seksyon
 section_menu_action_expand_section=Palawakin ang Seksyon
 section_menu_action_manage_section=Pamahalaan ang Seksyon
+section_menu_action_manage_webext=Pamahalaan ang Ekstensyon
 section_menu_action_add_topsite=Magdagdag ng Nangungunang Site
 section_menu_action_add_search_engine=Magdagdag ng Search Engine
 section_menu_action_move_up=Ilipat Up
@@ -181,17 +185,22 @@ section_menu_action_privacy_notice=Paunawa sa Privacy
 # LOCALIZATION NOTE (firstrun_*). These strings are displayed only once, on the
 # firstrun of the browser, they give an introduction to Firefox and Sync.
 firstrun_title=Isama ang Firefox saan man
+firstrun_content=Kunin ang mga bookmark, kasaysayan, mga password at iba pang mga setting sa lahat ng iyong mga device.
+firstrun_learn_more_link=Alamin pa lalo ang tungkol sa Firefox Accounts
 
 # LOCALIZATION NOTE (firstrun_form_header and firstrun_form_sub_header):
 # firstrun_form_sub_header is a continuation of firstrun_form_header, they are one sentence.
 # firstrun_form_header is displayed more boldly as the call to action.
 firstrun_form_header=Ilagay ang iyong email
+firstrun_form_sub_header=para magpatuloy sa Firefox Sync
 
 firstrun_email_input_placeholder=Email
 firstrun_invalid_input=Balidong email ang kinakailangan
 
 # LOCALIZATION NOTE (firstrun_extra_legal_links): {terms} is equal to firstrun_terms_of_service, and
 # {privacy} is equal to firstrun_privacy_notice. {terms} and {privacy} are clickable links.
+firstrun_extra_legal_links=Kung magpapatuloy, ikaw ay pumapayag sa mga {terms} at {privacy}.
+firstrun_terms_of_service=Mga Tuntunin sa Serbisyo
 firstrun_privacy_notice=Abisong Pangbribasiya
 
 firstrun_continue_to_login=Magpatuloy

browser/components/newtab/package-lock.json

@@ -3035,7 +3035,7 @@
     },
     "es6-promisify": {
       "version": "5.0.0",
-      "resolved": "http://registry.npmjs.org/es6-promisify/-/es6-promisify-5.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/es6-promisify/-/es6-promisify-5.0.0.tgz",
       "integrity": "sha1-UQnWLz5W6pZ8S2NQWu8IKRyKUgM=",
       "dev": true,
       "requires": {

browser/components/newtab/prerendered/locales/bn-BD/activity-stream-strings.js

@@ -74,9 +74,9 @@ window.gActivityStreamStrings = {
   "topsites_form_image_validation": "ছবি লোড করতে ব্যর্থ। ভিন্ন URL এ চেস্টা করুন।",
   "pocket_read_more": "জনপ্রিয় বিষয়:",
   "pocket_read_even_more": "আরও গল্প দেখুন",
-  "pocket_more_reccommendations": "আরো সুপারিশ",
+  "pocket_more_reccommendations": "আরও সুপারিশ",
   "pocket_how_it_works": "কিভাবে এটা কাজ করে",
-  "pocket_cta_button": "Pocket পান",
+  "pocket_cta_button": "Pocket ব্যবহার করুন",
   "pocket_cta_text": "আপনার পছন্দের গল্পগুলো Pocket এ সংরক্ষণ করুন, এবং আকর্ষণীয় মনে পড়ুন।",
   "highlights_empty_state": "ব্রাউজি করা শুরু করুন, এবং কিছু গুরুত্বপূর্ণ নিবন্ধ, ভিডিও, এবং আপনি সম্প্রতি পরিদর্শন বা বুকমার্ক করেছেন এমন কিছু পৃষ্ঠা আমরা এখানে প্রদর্শন করব।",
   "topstories_empty_state": "কিছু একটা ঠিক নেই। {provider} এর শীর্ষ গল্পগুলো পেতে কিছুক্ষণ পর আবার দেখুন। অপেক্ষা করতে চান না? বিশ্বের সেরা গল্পগুলো পেতে কোন জনপ্রিয় বিষয় নির্বাচন করুন।",

browser/components/newtab/prerendered/locales/gl/activity-stream-strings.js

@@ -74,10 +74,10 @@ window.gActivityStreamStrings = {
   "topsites_form_image_validation": "Produciuse un fallo ao cargar a imaxe. Probe un URL diferente.",
   "pocket_read_more": "Temas populares:",
   "pocket_read_even_more": "Ver máis historias",
-  "pocket_more_reccommendations": "More Recommendations",
+  "pocket_more_reccommendations": "Máis recomendacións",
-  "pocket_how_it_works": "How it works",
+  "pocket_how_it_works": "Como funciona",
-  "pocket_cta_button": "Get Pocket",
+  "pocket_cta_button": "Obter Pocket",
-  "pocket_cta_text": "Save the stories you love in Pocket, and fuel your mind with fascinating reads.",
+  "pocket_cta_text": "Garde no Pocket as historias que lle gusten, e alimente a súa imaxinación con lecturas fascinantes.",
   "highlights_empty_state": "Comece a navegar e aquí amosarémoslle algúns dos mellores artigos, vídeos e outras páxinas que visitara recentemente ou que engadira aos marcadores.",
   "topstories_empty_state": "Xa está ao día. Regrese máis tarde para ver máis historias de {provider}. Non pode agardar? Seleccione un tema popular e atopará máis historias interesantes da web.",
   "manual_migration_explanation2": "Probe Firefox cos marcadores, historial e contrasinais doutro navegador.",
@@ -101,11 +101,11 @@ window.gActivityStreamStrings = {
   "firstrun_form_header": "Escriba o seu correo",
   "firstrun_form_sub_header": "para continuar a Firefox Sync.",
   "firstrun_email_input_placeholder": "Correo electrónico",
-  "firstrun_invalid_input": "Valid email required",
+  "firstrun_invalid_input": "Requírese un correo válido",
   "firstrun_extra_legal_links": "Ao continuar, acepta os {terms} e a {privacy}.",
   "firstrun_terms_of_service": "Termos do servizo",
   "firstrun_privacy_notice": "Política de privacidade",
   "firstrun_continue_to_login": "Continuar",
   "firstrun_skip_login": "Ignorar este paso",
-  "context_menu_title": "Open menu"
+  "context_menu_title": "Abrir menú"
 };

browser/components/newtab/prerendered/locales/gu-IN/activity-stream-strings.js

@@ -75,7 +75,7 @@ window.gActivityStreamStrings = {
   "pocket_read_more": "લોકપ્રિય વિષયો:",
   "pocket_read_even_more": "વધુ વાર્તાઓ જુઓ",
   "pocket_more_reccommendations": "વધુ ભલામણો",
-  "pocket_how_it_works": "How it works",
+  "pocket_how_it_works": "તે કેવી રીતે કામ કરે છે",
   "pocket_cta_button": "Pocket મેળવો",
   "pocket_cta_text": "Pocket તમને જે કથાઓ ગમે છે તે સાચવો, અને તમારા મનને રસપ્રદ વાંચન સાથે ઉત્તેજિત કરો.",
   "highlights_empty_state": "બ્રાઉઝ કરવું પ્રારંભ કરો અને અમે અહીં કેટલાક સરસ લેખો, વિડિઓઝ અને અન્ય પૃષ્ઠો દર્શાવીશું જે તમે તાજેતરમાં મુલાકાત લીધાં છે અથવા બુકમાર્ક કર્યા છે.",
@@ -107,6 +107,6 @@ window.gActivityStreamStrings = {
   "firstrun_privacy_notice": "ખાનગી સૂચના",
   "firstrun_continue_to_login": "ચાલુ રાખો",
   "firstrun_skip_login": "આ પગલું છોડી દો",
-  "context_menu_title": "Open menu",
+  "context_menu_title": "મેનૂ ખોલો",
   "pocket_learn_more": "વધુ શીખો"
 };

browser/components/newtab/prerendered/locales/id/activity-stream-strings.js

@@ -56,8 +56,8 @@ window.gActivityStreamStrings = {
   "settings_pane_highlights_header": "Sorotan",
   "settings_pane_highlights_options_bookmarks": "Markah",
   "settings_pane_snippets_header": "Catatan Kecil",
-  "edit_topsites_button_text": "Sunting",
+  "edit_topsites_button_text": "Edit",
-  "edit_topsites_edit_button": "Sunting situs ini",
+  "edit_topsites_edit_button": "Edit situs ini",
   "topsites_form_add_header": "Situs Pilihan Baru",
   "topsites_form_edit_header": "Ubah Situs Pilihan",
   "topsites_form_title_label": "Judul",

browser/components/newtab/prerendered/locales/km/activity-stream-strings.js

@@ -29,8 +29,8 @@ window.gActivityStreamStrings = {
   "menu_action_show_file_linux": "Open Containing Folder",
   "menu_action_show_file_default": "បង្ហាញ​ឯកសារ",
   "menu_action_open_file": "បើកឯកសារ",
-  "menu_action_copy_download_link": "Copy Download Link",
+  "menu_action_copy_download_link": "ចម្លង​តំណ​ទាញ​យក",
-  "menu_action_go_to_download_page": "Go to Download Page",
+  "menu_action_go_to_download_page": "ទៅ​កាន់​ទំព័រ​ទាញ​យក",
   "menu_action_remove_download": "Remove from History",
   "search_button": "ស្វែងរក",
   "search_header": "{search_engine_name} ស្វែងរក",
@@ -75,7 +75,7 @@ window.gActivityStreamStrings = {
   "pocket_read_more": "ប្រធានបទកំពុងពេញនិយម៖",
   "pocket_read_even_more": "មើលរឿងរ៉ាវច្រើនទៀត",
   "pocket_more_reccommendations": "More Recommendations",
-  "pocket_how_it_works": "How it works",
+  "pocket_how_it_works": "របៀប​ដែល​វា​ដំណើរការ",
   "pocket_cta_button": "Get Pocket",
   "pocket_cta_text": "Save the stories you love in Pocket, and fuel your mind with fascinating reads.",
   "highlights_empty_state": "ចាប់ផ្តើមការរុករក ហើយយើងនឹងបង្ហាញអត្ថបទ វីដេអូ និងទំព័រដ៏អស្ចារ្យផ្សេងទៀតដែលអ្នកបានមើល ឬបានចំណាំនៅទីនេះ។",
@@ -107,5 +107,6 @@ window.gActivityStreamStrings = {
   "firstrun_privacy_notice": "Privacy Notice",
   "firstrun_continue_to_login": "បន្ត",
   "firstrun_skip_login": "Skip this step",
-  "context_menu_title": "Open menu"
+  "context_menu_title": "បើក​ម៉ឺនុយ",
+  "pocket_learn_more": "ស្វែងយល់​បន្ថែម"
 };

browser/components/newtab/prerendered/locales/my/activity-stream-strings.js

@@ -91,13 +91,13 @@ window.gActivityStreamStrings = {
   "section_menu_action_manage_section": "အပိုင်းများကိုစီမံရန်",
   "section_menu_action_manage_webext": "Manage Extension",
   "section_menu_action_add_topsite": "ထိပ်တန်းဆိုက်များကို ပေါင်းထည့်ပါ",
-  "section_menu_action_add_search_engine": "Add Search Engine",
+  "section_menu_action_add_search_engine": "ရှာဖွေရေးအင်ဂျင် ထည့်ပါ",
-  "section_menu_action_move_up": "Move Up",
+  "section_menu_action_move_up": "အပေါ်သို့ ရွှေ့ပါ",
-  "section_menu_action_move_down": "Move Down",
+  "section_menu_action_move_down": "အောက်သို့ ရွှေ့ပါ",
-  "section_menu_action_privacy_notice": "Privacy Notice",
+  "section_menu_action_privacy_notice": "ကိုယ်ရေးကာကွယ်မှု သတိပေးချက်",
-  "firstrun_title": "Take Firefox with You",
+  "firstrun_title": "Firefox ကို သင်နှင့်အတူ ခေါ်ဆောင်ပါ",
   "firstrun_content": "Get your bookmarks, history, passwords and other settings on all your devices.",
-  "firstrun_learn_more_link": "Learn more about Firefox Accounts",
+  "firstrun_learn_more_link": "Firefox အကောင့်များအကြောင်း ပိုမိုလေ့လာရန်",
   "firstrun_form_header": "သင့်အီးမေလ်းအားထည့်ပါ",
   "firstrun_form_sub_header": "to continue to Firefox Sync",
   "firstrun_email_input_placeholder": "အီးမေးလ်",
@@ -105,8 +105,8 @@ window.gActivityStreamStrings = {
   "firstrun_extra_legal_links": "By proceeding, you agree to the {terms} and {privacy}.",
   "firstrun_terms_of_service": "Terms of Service",
   "firstrun_privacy_notice": "Privacy Notice",
-  "firstrun_continue_to_login": "Continue",
+  "firstrun_continue_to_login": "ဆက်၍",
-  "firstrun_skip_login": "Skip this step",
+  "firstrun_skip_login": "ဒီအဆင့်ကို ကျော်ပါ",
-  "context_menu_title": "Open menu",
+  "context_menu_title": "မီနူးကို ဖွင့်ပါ",
   "pocket_learn_more": "ပိုမိုလေ့လာရန်"
 };

browser/components/newtab/prerendered/locales/tl/activity-stream-strings.js

@@ -44,7 +44,7 @@ window.gActivityStreamStrings = {
   "prefs_search_header": "Paghahanap sa Web",
   "prefs_topsites_description": "Ang mga site na iyong pinupuntahan",
   "prefs_topstories_description2": "Great content from around the web, personalized for you",
-  "prefs_topstories_options_sponsored_label": "Sponsored Stories",
+  "prefs_topstories_options_sponsored_label": "Mga Na-sponsor na Kwento",
   "prefs_topstories_sponsored_learn_more": "Matuto ng higit pa",
   "prefs_highlights_description": "Ang isang seleksyon ng mga site na iyong nai-save o binisita",
   "prefs_highlights_options_visited_label": "Mga pahinang binisita",
@@ -74,10 +74,10 @@ window.gActivityStreamStrings = {
   "topsites_form_image_validation": "Nabigo ang pag-load ng larawan. Subukan ang ibang URL.",
   "pocket_read_more": "Tanyag na mga paksa:",
   "pocket_read_even_more": "Tignan ang higit pang mga kuwento",
-  "pocket_more_reccommendations": "More Recommendations",
+  "pocket_more_reccommendations": "Karagdagang Rekomendasyon",
   "pocket_how_it_works": "Paano gamitin",
   "pocket_cta_button": "Kunin ang Pocket",
-  "pocket_cta_text": "Save the stories you love in Pocket, and fuel your mind with fascinating reads.",
+  "pocket_cta_text": "I-save sa Pocket ang mga kwentong iyong nagustuhan, at palawigin ang iyong pagiisip sa mga nakabibighaning babasahin.",
   "highlights_empty_state": "Magsimulang mag-browse, at ipapakita namin ang ilan sa mga magagandang artikulo, video, at iba pang mga pahina na kamakailan mong binisita o na-bookmark dito.",
   "topstories_empty_state": "Nakahabol ka na. Bumalik sa ibang pagkakataon para sa higit pang mga nangungunang kuwento mula sa {provider}. Hindi makapaghintay? Pumili ng isang tanyag na paksa upang makahanap ng higit pang mahusay na mga kuwento mula sa buong web.",
   "manual_migration_explanation2": "Subukan ang Firefox gamit ang mga bookmark, kasaysayan at mga password mula sa isa pang browser.",
@@ -89,21 +89,21 @@ window.gActivityStreamStrings = {
   "section_menu_action_collapse_section": "I-collapse ang Seksyon",
   "section_menu_action_expand_section": "Palawakin ang Seksyon",
   "section_menu_action_manage_section": "Pamahalaan ang Seksyon",
-  "section_menu_action_manage_webext": "Manage Extension",
+  "section_menu_action_manage_webext": "Pamahalaan ang Ekstensyon",
   "section_menu_action_add_topsite": "Magdagdag ng Nangungunang Site",
   "section_menu_action_add_search_engine": "Magdagdag ng Search Engine",
   "section_menu_action_move_up": "Ilipat Up",
   "section_menu_action_move_down": "Ilipat sa Baba",
   "section_menu_action_privacy_notice": "Paunawa sa Privacy",
   "firstrun_title": "Isama ang Firefox saan man",
-  "firstrun_content": "Get your bookmarks, history, passwords and other settings on all your devices.",
+  "firstrun_content": "Kunin ang mga bookmark, kasaysayan, mga password at iba pang mga setting sa lahat ng iyong mga device.",
-  "firstrun_learn_more_link": "Learn more about Firefox Accounts",
+  "firstrun_learn_more_link": "Alamin pa lalo ang tungkol sa Firefox Accounts",
   "firstrun_form_header": "Ilagay ang iyong email",
-  "firstrun_form_sub_header": "to continue to Firefox Sync",
+  "firstrun_form_sub_header": "para magpatuloy sa Firefox Sync",
   "firstrun_email_input_placeholder": "Email",
   "firstrun_invalid_input": "Balidong email ang kinakailangan",
-  "firstrun_extra_legal_links": "By proceeding, you agree to the {terms} and {privacy}.",
+  "firstrun_extra_legal_links": "Kung magpapatuloy, ikaw ay pumapayag sa mga {terms} at {privacy}.",
-  "firstrun_terms_of_service": "Terms of Service",
+  "firstrun_terms_of_service": "Mga Tuntunin sa Serbisyo",
   "firstrun_privacy_notice": "Abisong Pangbribasiya",
   "firstrun_continue_to_login": "Magpatuloy",
   "firstrun_skip_login": "Laktawan ang hakbang na ito",

browser/components/newtab/test/unit/asrouter/templates/FXASignupSnippet.test.jsx

@@ -45,9 +45,9 @@ describe("FXASignupSnippet", () => {
     const {props} = wrapper.children().get(0);
 
     assert.propertyVal(props.content, "form_action", "https://accounts.firefox.com/");
-    assert.propertyVal(props.content, "scene1_button_label", "Learn More");
+    assert.propertyVal(props.content, "scene1_button_label", "Learn more");
-    assert.propertyVal(props.content, "scene2_button_label", "Sign Me Up");
+    assert.propertyVal(props.content, "scene2_button_label", "Sign me up");
-    assert.propertyVal(props.content, "scene2_email_placeholder_text", "Your Email Here");
+    assert.propertyVal(props.content, "scene2_email_placeholder_text", "Your email here");
     assert.propertyVal(props.content.hidden_inputs, "action", "email");
     assert.propertyVal(props.content.hidden_inputs, "context", "fx_desktop_v3");
     assert.propertyVal(props.content.hidden_inputs, "entrypoint", "snippets");

browser/components/newtab/test/unit/asrouter/templates/NewsletterSnippet.test.jsx

@@ -0,0 +1,41 @@
+import {mount} from "enzyme";
+import {NewsletterSnippet} from "content-src/asrouter/templates/NewsletterSnippet/NewsletterSnippet";
+import React from "react";
+import schema from "content-src/asrouter/templates/NewsletterSnippet/NewsletterSnippet.schema.json";
+import {SnippetsTestMessageProvider} from "lib/SnippetsTestMessageProvider.jsm";
+
+const DEFAULT_CONTENT = SnippetsTestMessageProvider.getMessages().find(msg => msg.template === "newsletter_snippet").content;
+
+describe("NewsletterSnippet", () => {
+  let sandbox;
+
+  function mountAndCheckProps(content = {}) {
+    const props = {
+      id: "foo123",
+      content: Object.assign({}, DEFAULT_CONTENT, content),
+      onBlock() {},
+      onDismiss: sandbox.stub(),
+      sendUserActionTelemetry: sandbox.stub(),
+      onAction: sandbox.stub(),
+    };
+    const comp = mount(<NewsletterSnippet {...props} />);
+    // Check schema with the final props the component receives (including defaults)
+    assert.jsonSchema(comp.children().get(0).props.content, schema);
+    return comp;
+  }
+
+  beforeEach(() => {
+    sandbox = sinon.createSandbox();
+  });
+  afterEach(() => {
+    sandbox.restore();
+  });
+
+  describe("schema test", () => {
+    it("should validate the schema and defaults", () => {
+      const wrapper = mountAndCheckProps();
+      wrapper.find(".ASRouterButton").simulate("click");
+      assert.equal(wrapper.find(".mainInput").instance().type, "email");
+    });
+  });
+});

browser/components/newtab/test/unit/asrouter/templates/SendToDeviceSnippet.test.jsx

@@ -41,7 +41,6 @@ describe("SendToDeviceSnippet", () => {
       onDismiss: sandbox.stub(),
       sendUserActionTelemetry: sandbox.stub(),
       onAction: sandbox.stub(),
-      form_method: "POST",
     };
     const comp = mount(<SendToDeviceSnippet {...props} />);
     // Check schema with the final props the component receives (including defaults)
@@ -73,10 +72,10 @@ describe("SendToDeviceSnippet", () => {
     // SendToDeviceSnippet is a wrapper around SubmitFormSnippet
     const {props} = wrapper.children().get(0);
 
-    assert.propertyVal(props.content, "scene1_button_label", "Learn More");
+    assert.propertyVal(props.content, "scene1_button_label", "Learn more");
     assert.propertyVal(props.content, "scene2_dismiss_button_text", "Dismiss");
     assert.propertyVal(props.content, "scene2_button_label", "Send");
-    assert.propertyVal(props.content, "scene2_input_placeholder", "YOUR EMAIL HERE");
+    assert.propertyVal(props.content, "scene2_input_placeholder", "Your email here");
     assert.propertyVal(props.content, "locale", "en-US");
     assert.propertyVal(props.content, "country", "us");
     assert.propertyVal(props.content, "include_sms", false);

browser/components/newtab/test/unit/asrouter/templates/SimpleSnippet.test.jsx

@@ -48,7 +48,7 @@ describe("SimpleSnippet", () => {
   });
   it("should render .title", () => {
     const wrapper = mountAndCheckProps({title: "Foo"});
-    assert.equal(wrapper.find(".title").text(), "Foo");
+    assert.equal(wrapper.find(".title").text().trim(), "Foo");
   });
   it("should render .icon", () => {
     const wrapper = mountAndCheckProps({icon: "data:image/gif;base64,R0lGODl"});
@@ -65,7 +65,7 @@ describe("SimpleSnippet", () => {
     button.simulate("click");
 
     assert.equal(button.text(), "Click here");
-    assert.equal(button.prop("className"), "ASRouterButton");
+    assert.equal(button.prop("className"), "ASRouterButton secondary");
     assert.calledOnce(wrapper.props().onAction);
     assert.calledWithExactly(wrapper.props().onAction, {type: "OPEN_APPLICATIONS_MENU", data: {args: "appMenu"}});
   });

browser/components/newtab/test/unit/asrouter/templates/SubmitFormSnippet.test.jsx

@@ -1,5 +1,6 @@
 import {mount} from "enzyme";
 import React from "react";
+import {RichText} from "content-src/asrouter/components/RichText/RichText.jsx";
 import schema from "content-src/asrouter/templates/SubmitFormSnippet/SubmitFormSnippet.schema.json";
 import {SubmitFormSnippet} from "content-src/asrouter/templates/SubmitFormSnippet/SubmitFormSnippet.jsx";
 
@@ -55,7 +56,7 @@ describe("SubmitFormSnippet", () => {
   });
   it("should render .title", () => {
     const wrapper = mountAndCheckProps({scene1_title: "Foo"});
-    assert.equal(wrapper.find(".title").text(), "Foo");
+    assert.equal(wrapper.find(".title").text().trim(), "Foo");
   });
   it("should render .icon", () => {
     const wrapper = mountAndCheckProps({scene1_icon: "data:image/gif;base64,R0lGODl"});
@@ -66,7 +67,7 @@ describe("SubmitFormSnippet", () => {
 
     const button = wrapper.find("button.ASRouterButton");
     assert.equal(button.text(), "Click here");
-    assert.equal(button.prop("className"), "ASRouterButton");
+    assert.equal(button.prop("className"), "ASRouterButton secondary");
   });
 
   describe("#SignupView", () => {
@@ -200,9 +201,19 @@ describe("SubmitFormSnippet", () => {
       wrapper.setState({signupSuccess: true, signupSubmitted: true});
 
       assert.isTrue(wrapper.find(".submissionStatus").exists());
-      assert.equal(wrapper.find(".submissionStatus").text(), "success");
+      assert.propertyVal(wrapper.find(RichText).props(), "localization_id", "success_text");
+      assert.propertyVal(wrapper.find(RichText).props(), "success_text", "success");
       assert.isFalse(wrapper.find(".ASRouterButton").exists());
     });
+    it("should render the signup error message", () => {
+      wrapper.setProps({content: {error_text: "trouble"}});
+      wrapper.setState({signupSuccess: false, signupSubmitted: true});
+
+      assert.isTrue(wrapper.find(".submissionStatus").exists());
+      assert.propertyVal(wrapper.find(RichText).props(), "localization_id", "error_text");
+      assert.propertyVal(wrapper.find(RichText).props(), "error_text", "trouble");
+      assert.isTrue(wrapper.find(".ASRouterButton").exists());
+    });
     it("should render the button to return to the signup form if there was an error", () => {
       wrapper.setState({signupSubmitted: true, signupSuccess: false});
 

browser/components/newtab/test/unit/content-src/components/ASRouterAdmin.test.jsx

@@ -0,0 +1,147 @@
+import {ASRouterAdmin} from "content-src/components/ASRouterAdmin/ASRouterAdmin";
+import {GlobalOverrider} from "test/unit/utils";
+import React from "react";
+import {shallow} from "enzyme";
+
+describe("ASRouterAdmin", () => {
+  let globals;
+  let sandbox;
+  let sendMessageStub;
+  let addListenerStub;
+  let removeListenerStub;
+  let FAKE_PROVIDER_PREF = [{
+    enabled: true,
+    id: "snippets_local_testing",
+    localProvider: "SnippetsProvider",
+    type: "local",
+  }];
+  let FAKE_PROVIDER = [{
+    enabled: true,
+    id: "snippets_local_testing",
+    localProvider: "SnippetsProvider",
+    messages: [],
+    type: "local",
+  }];
+  beforeEach(() => {
+    globals = new GlobalOverrider();
+    sandbox = sinon.sandbox.create();
+    sendMessageStub = sandbox.stub();
+    addListenerStub = sandbox.stub();
+    removeListenerStub = sandbox.stub();
+
+    globals.set("RPMSendAsyncMessage", sendMessageStub);
+    globals.set("RPMAddMessageListener", addListenerStub);
+    globals.set("RPMRemoveMessageListener", removeListenerStub);
+  });
+  afterEach(() => {
+    sandbox.restore();
+    globals.restore();
+  });
+  it("should render ASRouterAdmin component", () => {
+    const wrapper = shallow(<ASRouterAdmin />);
+    assert.ok(wrapper.exists());
+  });
+  it("should send ADMIN_CONNECT_STATE on mount", () => {
+    shallow(<ASRouterAdmin />);
+
+    assert.calledOnce(sendMessageStub);
+    assert.propertyVal(sendMessageStub.firstCall.args[1], "type", "ADMIN_CONNECT_STATE");
+  });
+  it("should set a listener on mount", () => {
+    const wrapper = shallow(<ASRouterAdmin />);
+
+    assert.calledOnce(addListenerStub);
+    assert.calledWithExactly(addListenerStub, sinon.match.string, wrapper.instance().onMessage);
+  });
+  it("should remove listener on unmount", () => {
+    const wrapper = shallow(<ASRouterAdmin />);
+    wrapper.unmount();
+
+    assert.calledOnce(removeListenerStub);
+  });
+  describe("#render", () => {
+    let wrapper;
+    beforeEach(() => {
+      wrapper = shallow(<ASRouterAdmin />);
+      wrapper.setState({
+        providerPrefs: [],
+        providers: [],
+        userPrefs: {},
+      });
+    });
+    describe("#renderProviders", () => {
+      it("should render the provider", () => {
+        wrapper.setState({
+          providerPrefs: FAKE_PROVIDER_PREF,
+          providers: FAKE_PROVIDER,
+        });
+
+        // Header + 1 item
+        assert.lengthOf(wrapper.find(".message-item"), 2);
+      });
+    });
+    describe("#renderMessages", () => {
+      beforeEach(() => {
+        wrapper.setState({
+          messageFilter: "all",
+          messageBlockList: [],
+          messageImpressions: {foo: 2},
+        });
+      });
+      it("should render a message when no filtering is applied", () => {
+        wrapper.setState({
+          messages: [{id: "foo"}],
+        });
+
+        assert.lengthOf(wrapper.find(".message-id"), 1);
+        wrapper.find(".message-item button.primary").simulate("click");
+        // first call is ADMIN_CONNECT_STATE
+        assert.propertyVal(sendMessageStub.secondCall.args[1], "type", "BLOCK_MESSAGE_BY_ID");
+        assert.propertyVal(sendMessageStub.secondCall.args[1].data, "id", "foo");
+      });
+      it("should render a blocked message", () => {
+        wrapper.setState({
+          messages: [{id: "foo"}],
+          messageBlockList: ["foo"],
+        });
+        assert.lengthOf(wrapper.find(".message-item.blocked"), 1);
+        wrapper.find(".message-item.blocked button").simulate("click");
+        // first call is ADMIN_CONNECT_STATE
+        assert.propertyVal(sendMessageStub.secondCall.args[1], "type", "UNBLOCK_MESSAGE_BY_ID");
+        assert.propertyVal(sendMessageStub.secondCall.args[1].data, "id", "foo");
+      });
+      it("should render a message if provider matches filter", () => {
+        wrapper.setState({
+          messageFilter: "messageProvider",
+          messages: [{id: "foo", provider: "messageProvider"}],
+        });
+
+        assert.lengthOf(wrapper.find(".message-id"), 1);
+      });
+      it("should override with the selected message", () => {
+        wrapper.setState({
+          messageFilter: "messageProvider",
+          messages: [{id: "foo", provider: "messageProvider"}],
+        });
+
+        assert.lengthOf(wrapper.find(".message-id"), 1);
+        wrapper.find(".message-item button:not(.primary)").simulate("click");
+        // first call is ADMIN_CONNECT_STATE
+        assert.propertyVal(sendMessageStub.secondCall.args[1], "type", "OVERRIDE_MESSAGE");
+        assert.propertyVal(sendMessageStub.secondCall.args[1].data, "id", "foo");
+      });
+      it("should hide message if provider filter changes", () => {
+        wrapper.setState({
+          messageFilter: "messageProvider",
+          messages: [{id: "foo", provider: "messageProvider"}],
+        });
+
+        assert.lengthOf(wrapper.find(".message-id"), 1);
+
+        wrapper.find("select").simulate("change", {target: {value: "bar"}});
+
+        assert.lengthOf(wrapper.find(".message-id"), 0);
+      });
+    });
+  });
+});

browser/components/newtab/test/unit/lib/AboutPreferences.test.js

@@ -134,6 +134,7 @@ describe("AboutPreferences Feed", () => {
       document: {
         createXULElement: sandbox.stub().returns(node),
         createProcessingInstruction: sandbox.stub(),
+        createElementNS: sandbox.stub().callsFake((NS, el) => document.createElement(el)),
         getElementById: sandbox.stub().returns(node),
         insertBefore: sandbox.stub().returnsArg(0),
       },

browser/components/newtab/test/unit/lib/TopStoriesFeed.test.js

@@ -707,6 +707,39 @@ describe("Top Stories Feed", () => {
     });
   });
   describe("#spocs", async () => {
+    it("should not display expired or untimestamped spocs", async () => {
+      clock.tick(441792000000); // 01/01/1984
+
+      instance.spocsPerNewTabs = 1;
+      instance.show_spocs = true;
+      instance.isBelowFrequencyCap = () => true;
+
+      // NOTE: `expiration_timestamp` is seconds since UNIX epoch
+      instance.spocs = [
+        // No timestamp stays visible
+        {
+          id: "spoc1",
+        },
+        // Expired spoc gets filtered out
+        {
+          id: "spoc2",
+          expiration_timestamp: 1,
+        },
+        // Far future expiration spoc stays visible
+        {
+          id: "spoc3",
+          expiration_timestamp: 32503708800, // 01/01/3000
+        },
+      ];
+
+      sinon.spy(instance, "filterSpocs");
+
+      instance.filterSpocs();
+
+      assert.equal(instance.filterSpocs.firstCall.returnValue.length, 2);
+      assert.equal(instance.filterSpocs.firstCall.returnValue[0].id, "spoc1");
+      assert.equal(instance.filterSpocs.firstCall.returnValue[1].id, "spoc3");
+    });
     it("should insert spoc with provided probability", async () => {
       let fetchStub = globals.sandbox.stub();
       globals.set("fetch", fetchStub);
@@ -716,7 +749,11 @@ describe("Top Stories Feed", () => {
       const response = {
         "settings": {"spocsPerNewTabs": 0.5},
         "recommendations": [{"guid": "rec1"}, {"guid": "rec2"}, {"guid": "rec3"}],
-        "spocs": [{"id": "spoc1"}, {"id": "spoc2"}],
+        // Include spocs with a expiration in the very distant future
+        "spocs": [
+          {"id": "spoc1", "expiration_timestamp": 9999999999999},
+          {"id": "spoc2", "expiration_timestamp": 9999999999999},
+        ],
       };
 
       instance.personalized = true;
@@ -794,7 +831,8 @@ describe("Top Stories Feed", () => {
       const response = {
         "settings": {"spocsPerNewTabs": 0.5},
         "recommendations": [{"id": "rec1"}, {"id": "rec2"}, {"id": "rec3"}],
-        "spocs": [{"id": "spoc1"}, {"id": "spoc2"}],
+        // Include one spoc with a expiration in the very distant future
+        "spocs": [{"id": "spoc1", "expiration_timestamp": 9999999999999}, {"id": "spoc2"}],
       };
 
       instance.onAction({type: at.NEW_TAB_REHYDRATED, meta: {fromTarget: {}}});
@@ -1034,8 +1072,9 @@ describe("Top Stories Feed", () => {
         "settings": {"spocsPerNewTabs": 1},
         "recommendations": [{"guid": "rec1"}, {"guid": "rec2"}, {"guid": "rec3"}],
         "spocs": [
-          {"id": "spoc1", "campaign_id": 1, "caps": {"lifetime": 3, "campaign": {"count": 2, "period": 3600}}},
+          // Set spoc `expiration_timestamp`s in the very distant future to ensure they show up
-          {"id": "spoc2", "campaign_id": 2, "caps": {"lifetime": 1}},
+          {"id": "spoc1", "campaign_id": 1, "caps": {"lifetime": 3, "campaign": {"count": 2, "period": 3600}}, "expiration_timestamp": 999999999999},
+          {"id": "spoc2", "campaign_id": 2, "caps": {"lifetime": 1}, "expiration_timestamp": 999999999999},
         ],
       };