Fix Bug 1471243: stop AS showing before first run overlay (#4233)

content-src/components/Base/Base.jsx

@@ -30,7 +30,7 @@ export class _Base extends React.PureComponent {
     this.sendNewTabRehydrated(App);
     addLocaleDataForReactIntl(locale);
     if (this.props.isFirstrun) {
-      global.document.body.classList.add("welcome");
+      global.document.body.classList.add("welcome", "hide-main");
     }
   }
 
@@ -56,9 +56,10 @@ export class _Base extends React.PureComponent {
   updateTheme() {
     const bodyClassName = [
       "activity-stream",
-      // If we skipped the about:welcome overlay and removed the CSS class
-      // we don't want to add it back to the Activity Stream view
-      document.body.classList.contains("welcome") ? "welcome" : ""
+      // If we skipped the about:welcome overlay and removed the CSS classes
+      // we don't want to add them back to the Activity Stream view
+      document.body.classList.contains("welcome") ? "welcome" : "",
+      document.body.classList.contains("hide-main") ? "hide-main" : ""
     ].filter(v => v).join(" ");
     global.document.body.className = bodyClassName;
   }

content-src/components/Base/_Base.scss

@@ -15,6 +15,10 @@
 }
 
 main {
+  .hide-main & {
+    visibility: hidden;
+  }
+
   margin: auto;
   // Offset the snippets container so things at the bottom of the page are still
   // visible when snippets / onboarding are visible. Adjust for other spacing.

content-src/components/StartupOverlay/StartupOverlay.jsx

@@ -51,6 +51,7 @@ export class _StartupOverlay extends React.PureComponent {
 
   removeOverlay() {
     window.removeEventListener("visibilitychange", this.removeOverlay);
+    document.body.classList.remove("hide-main");
     this.setState({show: false});
     setTimeout(() => {
       // Allow scrolling and fully remove overlay after animation finishes.
@@ -95,7 +96,7 @@ export class _StartupOverlay extends React.PureComponent {
     let privacyLink = (<a href={`${this.props.fxa_endpoint}/legal/privacy`} target="_blank" rel="noopener noreferrer"><FormattedMessage id="firstrun_privacy_notice" /></a>);
 
     return (
-      <div className={`overlay-wrapper ${this.state.show ? "show " : ""}`}>
+      <div className={`overlay-wrapper ${this.state.show ? "show" : ""}`}>
         <div className="background" />
         <div className="firstrun-scene">
           <div className="fxaccounts-container">

content-src/components/StartupOverlay/_StartupOverlay.scss

@@ -13,6 +13,7 @@
 .overlay-wrapper {
   position: absolute;
   top: 0;
+  left: 0;
   width: 100vw;
   height: 100vh;
   z-index: 21000;
@@ -70,7 +71,7 @@
   }
 }
 
-.background {
+.background, body.hide-main {
   width: 100%;
   height: 100%;
   display: block;
@@ -236,7 +237,7 @@
   padding-bottom: 210px;
 }
 
-.firstrun-link {
+a.firstrun-link {
   color: $white;
   display: block;
   text-decoration: underline;

content-src/styles/_activity-stream.scss

@@ -18,9 +18,13 @@ body {
   font-size: 16px;
   overflow-y: scroll;
 
-  &.hide-onboarding > #onboarding-overlay-button {
+  &.hide-onboarding, &.hide-main > #onboarding-overlay-button {
     display: none !important;
   }
+
+  &.hide-main > #onboarding-notification-bar {
+    display: none;
+  }
 }
 
 h1,