Skip to content
Permalink
Browse files

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

  • Loading branch information...
AdamHillier committed Jul 11, 2018
1 parent 105a08a commit bbce85b17bfa82e290bea92e2c13a1ccdc41f623
@@ -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;
}
@@ -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.
@@ -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">
@@ -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 {

This comment has been minimized.

Copy link
@Mardak

Mardak Jul 12, 2018

Member

This is causing mochitest failures:
TEST-UNEXPECTED-FAIL | toolkit/components/extensions/test/browser/browser_ext_themes_ntp_colors.js | New tab page background should be set. - "rgb(0, 62, 170)" == "rgb(173, 216, 230)" -

The test is making sure the theme's background color is set on body, but this selector results in $blue-70 being set.

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;
@@ -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,

0 comments on commit bbce85b

Please sign in to comment.
You can’t perform that action at this time.