Bug 1624509 - Dark mode support in simplified about:welcome r=pdahiya

Differential Revision: https://phabricator.services.mozilla.com/D68137 --HG-- extra : moz-landing-system : lando
2020-03-27 18:14:24 +00:00 · 2020-03-27 18:14:24 +00:00 · acfce22db6
--- a/browser/components/newtab/aboutwelcome/content/aboutwelcome.bundle.js
+++ b/browser/components/newtab/aboutwelcome/content/aboutwelcome.bundle.js
@ -156,7 +156,7 @@ class AboutWelcome extends react__WEBPACK_IMPORTED_MODULE_0___default.a.PureComp
      props
    } = this;
    return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
-      className: "welcomeContainer"
+      className: "outer-wrapper welcomeContainer"
    }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
      className: "welcomeContainerInner"
    }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("main", null, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_components_HeroText__WEBPACK_IMPORTED_MODULE_2__["HeroText"], {
--- a/browser/components/newtab/aboutwelcome/content/aboutwelcome.css
+++ b/browser/components/newtab/aboutwelcome/content/aboutwelcome.css
@ -30,14 +30,13 @@ html {

 body {
  --grey-subtitle: #4A4A4F;
-  --newtab-background-color: #F9F9FA;
+  --newtab-background-color: #EDEDF0;
  --newtab-text-primary-color: #0C0C0D;
  --newtab-text-conditional-color: #4A4A4F;
  --newtab-button-primary-color: #0060DF;
  --newtab-card-background-color: #FFF;
  --newtab-card-shadow: 0 1px 4px 0 rgba(12, 12, 13, 0.1);
  --welcome-header-text-color: #2B2156;
-  --welcome-cards-background-color: #EDEDF0;
  --welcome-card-button-background-color: rgba(12, 12, 13, 0.1);
  --welcome-card-button-background-hover-color: rgba(12, 12, 13, 0.2);
  --welcome-card-button-background-active-color: rgba(12, 12, 13, 0.3);
@ -46,10 +45,25 @@ body {
  --welcome-button-text-color: #FFF;
  --welcome-button-background-hover-color: #003EAA;
  --welcome-button-background-active-color: #002275;
-  background-color: var(--welcome-cards-background-color);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Ubuntu', 'Helvetica Neue', sans-serif;
  font-size: 16px;
-  position: relative; }
+  position: relative;
+  /* these two rules fix test failures in 
+  "browser_ext_themes_ntp_colors" & "browser_ext_themes_ntp_colors_perwindow".*/
+  color: var(--newtab-text-primary-color);
+  background-color: var(--newtab-background-color); }
+  body[lwt-newtab-brighttext] {
+    --newtab-background-color: #2A2A2E;
+    --newtab-text-primary-color: #F9F9FA;
+    --newtab-text-conditional-color: #F9F9FA;
+    --newtab-button-primary-color: #0060DF;
+    --newtab-card-background-color: #38383D;
+    --newtab-card-shadow: 0 1px 8px 0 rgba(12, 12, 13, 0.2);
+    --welcome-header-text-color: rgba(255, 255, 255, 0.6);
+    --welcome-card-button-background-color: rgba(12, 12, 13, 0.3);
+    --welcome-card-button-background-hover-color: rgba(12, 12, 13, 0.5);
+    --welcome-card-button-background-active-color: rgba(12, 12, 13, 0.7);
+    --welcome-button-box-shadow-color: rgba(249, 249, 250, 0.2); }

 .welcomeCardGrid {
  margin: 0;
--- a/browser/components/newtab/aboutwelcome/content/aboutwelcome.html
+++ b/browser/components/newtab/aboutwelcome/content/aboutwelcome.html
@ -20,6 +20,7 @@
    </div>
    <script src="resource://activity-stream/vendor/react.js"></script>
    <script src="resource://activity-stream/vendor/react-dom.js"></script>
+    <script src="chrome://browser/content/contentTheme.js"></script>
    <script src="resource://activity-stream/aboutwelcome/aboutwelcome.bundle.js"></script>
  </body>
 </html>
--- a/browser/components/newtab/content-src/aboutwelcome/aboutwelcome.jsx
+++ b/browser/components/newtab/content-src/aboutwelcome/aboutwelcome.jsx
@ -49,7 +49,7 @@ class AboutWelcome extends React.PureComponent {
  render() {
    const { props } = this;
    return (
-      <div className="welcomeContainer">
+      <div className="outer-wrapper welcomeContainer">
        <div className="welcomeContainerInner">
          <main>
            <HeroText title={props.title} subtitle={props.subtitle} />
--- a/browser/components/newtab/content-src/aboutwelcome/aboutwelcome.scss
+++ b/browser/components/newtab/content-src/aboutwelcome/aboutwelcome.scss
@ -15,14 +15,13 @@ html {
 body {
  // sass-lint:disable no-color-literals
  --grey-subtitle: #4A4A4F;
-  --newtab-background-color: #F9F9FA;
+  --newtab-background-color: #EDEDF0;
  --newtab-text-primary-color: #0C0C0D;
  --newtab-text-conditional-color: #4A4A4F;
  --newtab-button-primary-color: #0060DF;
  --newtab-card-background-color: #FFF;
  --newtab-card-shadow: 0 1px 4px 0 rgba(12, 12, 13, 0.1);
  --welcome-header-text-color: #2B2156;
-  --welcome-cards-background-color: #EDEDF0;
  --welcome-card-button-background-color: rgba(12, 12, 13, 0.1);
  --welcome-card-button-background-hover-color: rgba(12, 12, 13, 0.2);
  --welcome-card-button-background-active-color: rgba(12, 12, 13, 0.3);
@ -32,11 +31,28 @@ body {
  --welcome-button-background-hover-color: #003EAA;
  --welcome-button-background-active-color: #002275;

-  background-color: var(--welcome-cards-background-color);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Ubuntu',
  'Helvetica Neue', sans-serif;
  font-size: 16px;
  position: relative;
+  /* these two rules fix test failures in 
+  "browser_ext_themes_ntp_colors" & "browser_ext_themes_ntp_colors_perwindow".*/
+  color: var(--newtab-text-primary-color);
+  background-color: var(--newtab-background-color);
+
+  &[lwt-newtab-brighttext] {
+    --newtab-background-color: #2A2A2E;
+    --newtab-text-primary-color: #F9F9FA;
+    --newtab-text-conditional-color: #F9F9FA;
+    --newtab-button-primary-color: #0060DF;
+    --newtab-card-background-color: #38383D;
+    --newtab-card-shadow: 0 1px 8px 0 rgba(12, 12, 13, 0.2);
+    --welcome-header-text-color: rgba(255, 255, 255, 0.6);
+    --welcome-card-button-background-color: rgba(12, 12, 13, 0.3);
+    --welcome-card-button-background-hover-color: rgba(12, 12, 13, 0.5);
+    --welcome-card-button-background-active-color: rgba(12, 12, 13, 0.7);
+    --welcome-button-box-shadow-color: rgba(249, 249, 250, 0.2);
+  }
 }

 .welcomeCardGrid {
--- a/toolkit/components/extensions/test/browser/browser_ext_themes_ntp_colors.js
+++ b/toolkit/components/extensions/test/browser/browser_ext_themes_ntp_colors.js
@ -124,7 +124,7 @@ add_task(async function test_support_ntp_colors() {
    SpecialPowers.clearUserPref("browser.newtab.preload");
  });
  NewTabPagePreloading.removePreloadedBrowser(window);
-  for (let url of ["about:newtab", "about:home"]) {
+  for (let url of ["about:newtab", "about:home", "about:welcome"]) {
    info("Opening url: " + url);
    await BrowserTestUtils.withNewTab({ gBrowser, url }, async browser => {
      await test_ntp_theme(
--- a/toolkit/components/extensions/test/browser/browser_ext_themes_ntp_colors_perwindow.js
+++ b/toolkit/components/extensions/test/browser/browser_ext_themes_ntp_colors_perwindow.js
@ -51,10 +51,44 @@ function test_ntp_theme(browser, theme, isBrightText) {
 /**
 * Test whether a given browser has the default theme applied
 * @param {Object} browser to test against
+ * @param {string} url being tested
 * @returns {Promise} The task as a promise
 */
-function test_ntp_default_theme(browser) {
+function test_ntp_default_theme(browser, url) {
  Services.ppmm.sharedData.flush();
+  if (url === "about:welcome") {
+    return SpecialPowers.spawn(
+      browser,
+      [
+        {
+          background: hexToCSS("#EDEDF0"),
+          color: hexToCSS("#0C0C0D"),
+        },
+      ],
+      function({ background, color }) {
+        let doc = content.document;
+        ok(
+          !doc.body.hasAttribute("lwt-newtab"),
+          "About:welcome page should not have lwt-newtab attribute"
+        );
+        ok(
+          !doc.body.hasAttribute("lwt-newtab-brighttext"),
+          `About:welcome page should not have lwt-newtab-brighttext attribute`
+        );
+
+        is(
+          content.getComputedStyle(doc.body).backgroundColor,
+          background,
+          "About:welcome page background should be reset."
+        );
+        is(
+          content.getComputedStyle(doc.querySelector(".outer-wrapper")).color,
+          color,
+          "About:welcome page text color should be reset."
+        );
+      }
+    );
+  }
  return SpecialPowers.spawn(
    browser,
    [
@ -183,7 +217,7 @@ add_task(async function test_per_window_ntp_theme() {
      win.NewTabPagePreloading.removePreloadedBrowser(win);
      // These pages were initially chosen because LightweightThemeChild.jsm
      // treats them specially.
-      for (let url of ["about:newtab", "about:home"]) {
+      for (let url of ["about:newtab", "about:home", "about:welcome"]) {
        info("Opening url: " + url);
        await BrowserTestUtils.withNewTab(
          { gBrowser: win.gBrowser, url },
@ -191,7 +225,7 @@ add_task(async function test_per_window_ntp_theme() {
            if (theme) {
              await test_ntp_theme(browser, theme, isBrightText);
            } else {
-              await test_ntp_default_theme(browser);
+              await test_ntp_default_theme(browser, url);
            }
          }
        );
@ -203,8 +237,10 @@ add_task(async function test_per_window_ntp_theme() {
  // BrowserTestUtils.withNewTab waits for about:newtab to load
  // so we disable preloading before running the test.
  await SpecialPowers.setBoolPref("browser.newtab.preload", false);
+  await SpecialPowers.setBoolPref("browser.aboutwelcome.enabled", true);
  registerCleanupFunction(() => {
    SpecialPowers.clearUserPref("browser.newtab.preload");
+    SpecialPowers.clearUserPref("browser.aboutwelcome.enabled");
  });

  await extension.startup();