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

@@ -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})`;
+        },
       },
     ],
     [

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 = [

browser/themes/shared/tabs.inc.css

@@ -29,8 +29,11 @@
 }
 
 :root[privatebrowsingmode=temporary] {
-  /* Value for --in-content-page-background in aboutPrivateBrowsing.css */
+  /* Value for --in-content-page-background in aboutPrivateBrowsing.css.
-  --tabpanel-background-color: #25003e;
+     !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] {

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"));
   },