Merge pull request mozilla#4080 from rlr/theme-vars

Fix #1451778 - Set <body/> bg color. Move --theme-vars up to body.
dmose · Apr 9, 2018 · 7c6b298 · 7c6b298
2 parents daa20aa + efe8822
commit 7c6b298
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 7 deletions.
diff --git a/system-addon/content-src/components/Base/Base.jsx b/system-addon/content-src/components/Base/Base.jsx
@@ -25,7 +25,10 @@ function addLocaleDataForReactIntl(locale) {
 
 export class _Base extends React.PureComponent {
   componentWillMount() {
-    const {App, locale} = this.props;
+    const {App, locale, Theme} = this.props;
+    if (Theme.className) {
+      this.updateTheme(Theme);
+    }
     this.sendNewTabRehydrated(App);
     addLocaleDataForReactIntl(locale);
   }
@@ -40,10 +43,23 @@ export class _Base extends React.PureComponent {
     }
   }
 
-  componentWillUpdate({App}) {
+  componentWillUnmount() {
+    this.updateTheme({className: ""});
+  }
+
+  componentWillUpdate({App, Theme}) {
+    this.updateTheme(Theme);
     this.sendNewTabRehydrated(App);
   }
 
+  updateTheme(Theme) {
+    const bodyClassName = [
+      "activity-stream",
+      Theme.className
+    ].filter(v => v).join(" ");
+    global.document.body.className = bodyClassName;
+  }
+
   // The NEW_TAB_REHYDRATED event is used to inform feeds that their
   // data has been consumed e.g. for counting the number of tabs that
   // have rendered that data.
@@ -88,15 +104,14 @@ export class BaseContent extends React.PureComponent {
 
   render() {
     const {props} = this;
-    const {App, Theme} = props;
+    const {App} = props;
     const {initialized} = App;
     const prefs = props.Prefs.values;
 
     const shouldBeFixedToTop = PrerenderData.arePrefsValid(name => prefs[name]);
 
     const outerClassName = [
       "outer-wrapper",
-      Theme.className,
       shouldBeFixedToTop && "fixed-to-top",
       prefs.enableWideLayout ? "wide-layout-enabled" : "wide-layout-disabled"
     ].filter(v => v).join(" ");

diff --git a/system-addon/content-src/components/Base/_Base.scss b/system-addon/content-src/components/Base/_Base.scss
@@ -1,5 +1,4 @@
 .outer-wrapper {
-  background-color: var(--newtab-background-color);
   color: var(--newtab-text-primary-color);
   display: flex;
   flex-grow: 1;

diff --git a/system-addon/content-src/styles/_activity-stream.scss b/system-addon/content-src/styles/_activity-stream.scss
@@ -13,6 +13,7 @@ body,
 }
 
 body {
+  background-color: var(--newtab-background-color);
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Ubuntu', 'Helvetica Neue', sans-serif;
   font-size: 16px;
   overflow-y: scroll;

diff --git a/system-addon/content-src/styles/_theme.scss b/system-addon/content-src/styles/_theme.scss
@@ -1,5 +1,5 @@
 // Default theme
-.outer-wrapper {
+body {
   // General styles
   --newtab-background-color: $grey-10;
   --newtab-border-primary-color: $grey-40;
@@ -46,7 +46,7 @@
 }
 
 // Dark theme
-.outer-wrapper.dark-theme {
+.dark-theme {
   // General styles
   --newtab-background-color: $grey-80;
   --newtab-border-primary-color: $grey-10-80;

diff --git a/system-addon/test/unit/content-src/components/Base.test.jsx b/system-addon/test/unit/content-src/components/Base.test.jsx
@@ -32,6 +32,15 @@ describe("<Base>", () => {
     assert.equal(
       wrapper.find(ErrorBoundary).first().prop("className"), "base-content-fallback");
   });
+
+  it("should change body className on updateTheme", () => {
+    const wrapper = shallow(<Base {...DEFAULT_PROPS} />);
+    assert.equal(document.querySelectorAll("body.some-theme").length, 0);
+    wrapper.instance().updateTheme({className: "some-theme"});
+    assert.equal(document.querySelectorAll("body.some-theme").length, 1);
+    wrapper.instance().updateTheme({className: ""});
+    assert.equal(document.querySelectorAll("body.some-theme").length, 0);
+  });
 });
 
 describe("<BaseContent>", () => {