From a7b6e3d4d32581e5311206e7bdac1a8e1279552d Mon Sep 17 00:00:00 2001
From: Harry Twyford <htwyford@mozilla.com>
Date: Thu, 7 Oct 2021 18:57:27 +0000
Subject: [PATCH] Bug 1730562 - White flash before about:home/newtab themed
 background is rendered. r=mconley,dao

Differential Revision: https://phabricator.services.mozilla.com/D127561
---
 browser/base/content/contentTheme.js         |  8 +++++++
 browser/themes/ThemeVariableMap.jsm          | 23 ++++++++++++++++++++
 browser/themes/shared/tabs.inc.css           |  7 ++++--
 toolkit/modules/LightweightThemeConsumer.jsm |  5 +++++
 4 files changed, 41 insertions(+), 2 deletions(-)

diff --git a/browser/base/content/contentTheme.js b/browser/base/content/contentTheme.js
index 536939ffda2e..013a7fc187c6 100644
--- a/browser/base/content/contentTheme.js
+++ b/browser/base/content/contentTheme.js
@@ -16,6 +16,14 @@
       "--newtab-background-color",
       {
         lwtProperty: "ntp_background",
+        processColor(rgbaChannels) {
+          if (!rgbaChannels) {
+            return null;
+          }
+          const { r, g, b } = rgbaChannels;
+          // Drop alpha channel
+          return `rgb(${r}, ${g}, ${b})`;
+        },
       },
     ],
     [
diff --git a/browser/themes/ThemeVariableMap.jsm b/browser/themes/ThemeVariableMap.jsm
index 658013153366..17c82000b225 100644
--- a/browser/themes/ThemeVariableMap.jsm
+++ b/browser/themes/ThemeVariableMap.jsm
@@ -181,6 +181,29 @@ const ThemeVariableMap = [
       optionalElementID: "browser",
     },
   ],
+  [
+    "--tabpanel-background-color",
+    {
+      lwtProperty: "ntp_background",
+      processColor(rgbaChannels) {
+        if (!rgbaChannels) {
+          return null;
+        }
+        if (!Services.prefs.getBoolPref("browser.newtabpage.enabled")) {
+          // We only set the tabpanel background to the new tab background color
+          // if the user uses about:home for new tabs. Otherwise, we flash a
+          // colorful background when a new tab is opened. We will flash the
+          // newtab color in new windows if the user uses about:home for new
+          // tabs but not new windows. However, the flash is concealed by the OS
+          // window-open animation.
+          return null;
+        }
+        const { r, g, b } = rgbaChannels;
+        // Drop alpha channel
+        return `rgb(${r}, ${g}, ${b})`;
+      },
+    },
+  ],
 ];
 
 const ThemeContentPropertyList = [
diff --git a/browser/themes/shared/tabs.inc.css b/browser/themes/shared/tabs.inc.css
index e4e84700aaa3..6e38fda8b98d 100644
--- a/browser/themes/shared/tabs.inc.css
+++ b/browser/themes/shared/tabs.inc.css
@@ -29,8 +29,11 @@
 }
 
 :root[privatebrowsingmode=temporary] {
-  /* Value for --in-content-page-background in aboutPrivateBrowsing.css */
-  --tabpanel-background-color: #25003e;
+  /* Value for --in-content-page-background in aboutPrivateBrowsing.css.
+     !important overrides the direct setting of this variable in
+     ThemeVariableMap.jsm when the user has a theme that defines
+     ntp_background. */
+  --tabpanel-background-color: #25003e !important;
 }
 
 :root[uidensity=compact] {
diff --git a/toolkit/modules/LightweightThemeConsumer.jsm b/toolkit/modules/LightweightThemeConsumer.jsm
index 77597681e567..91d263ee3e42 100644
--- a/toolkit/modules/LightweightThemeConsumer.jsm
+++ b/toolkit/modules/LightweightThemeConsumer.jsm
@@ -317,6 +317,11 @@ LightweightThemeConsumer.prototype = {
 
     let contentThemeData = _getContentProperties(this._doc, active, theme);
     Services.ppmm.sharedData.set(`theme/${this._winId}`, contentThemeData);
+    // We flush sharedData because contentThemeData can be responsible for
+    // painting large background surfaces. If this data isn't delivered to the
+    // content process before about:home is painted, we will paint a default
+    // background and then replace it when sharedData syncs, causing flashing.
+    Services.ppmm.sharedData.flush();
 
     this._win.dispatchEvent(new CustomEvent("windowlwthemeupdate"));
   },