Bug 1563741 - Keeping body scroll static, but welcome modal centered … (#5162)

* Bug 1563741 - Keeping body scroll static, but welcome modal centered and scrollable

* Keeping content background static and allowing modal to scroll up and down window

* css typo

* Fixing test cases by mocking getElementById

* Checking existence of header for the cases where props.document isn't passed down

content-src/asrouter/components/ModalOverlay/ModalOverlay.jsx

@@ -19,11 +19,26 @@ export class ModalOverlayWrapper extends React.PureComponent {
   componentWillMount() {
     this.props.document.addEventListener("keydown", this.onKeyDown);
     this.props.document.body.classList.add("modal-open");
+    this.header = this.props.document.getElementById(
+      "header-asrouter-container"
+    );
+
+    if (this.header) {
+      this.header.classList.add("modal-scroll");
+      this.props.document.getElementById("root").classList.add("modal-height");
+    }
   }
 
   componentWillUnmount() {
     this.props.document.removeEventListener("keydown", this.onKeyDown);
     this.props.document.body.classList.remove("modal-open");
+
+    if (this.header) {
+      this.header.classList.remove("modal-scroll");
+      this.props.document
+        .getElementById("root")
+        .classList.remove("modal-height");
+    }
   }
 
   render() {

content-src/asrouter/components/ModalOverlay/_ModalOverlay.scss

@@ -19,6 +19,19 @@
   }
 }
 
+.modal-scroll {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+}
+
+.modal-height {
+  // "Welcome header" has 40px of padding and 36px font size that get neglected using position absolute
+  // causing this to visually collide with the newtab searchbar
+  padding-top: 80px;
+}
+
 .modalOverlayInner {
   width: 960px;
   position: fixed;
@@ -30,7 +43,6 @@
   display: none;
   z-index: 1101;
 
-
   // modal takes over entire screen
   @media(max-width: 960px) {
     width: 100%;

content-src/asrouter/templates/Trailhead/_Trailhead.scss

@@ -401,7 +401,7 @@
 
 .inline-onboarding {
   &.activity-stream.welcome {
-    overflow-y: scroll;
+    overflow-y: hidden;
   }
 
   .modalOverlayInner {

test/unit/asrouter/ModalOverlay.test.jsx

@@ -5,12 +5,18 @@ import React from "react";
 describe("ModalOverlayWrapper", () => {
   let fakeDoc;
   let sandbox;
+  let header;
   beforeEach(() => {
     sandbox = sinon.createSandbox();
+    header = document.createElement("div");
+
     fakeDoc = {
       addEventListener: sandbox.stub(),
       removeEventListener: sandbox.stub(),
       body: { classList: { add: sandbox.stub(), remove: sandbox.stub() } },
+      getElementById() {
+        return header;
+      },
     };
   });
   afterEach(() => {