Bug 1781829 - Update contentTheme.js to set attributes and CSS variab…

…les on :root instead of body r=dao Differential Revision: https://phabricator.services.mozilla.com/D167869
Thaodan · Jan 26, 2023 · 8cc2e24 · 8cc2e24
1 parent bea4787
commit 8cc2e24
Show file tree

Hide file tree

Showing 6 changed files with 21 additions and 23 deletions.
diff --git a/browser/base/content/contentTheme.js b/browser/base/content/contentTheme.js
@@ -151,7 +151,7 @@
       addEventListener("LightweightTheme:Set", this);
 
       // We don't sync default theme attributes in `init()`, as we may not have
-      // a body element to attach the attribute to yet. They will be set when
+      // a root element to attach the attribute to yet. They will be set when
       // the first LightweightTheme:Set event is delivered during pageshow.
       prefersDarkQuery.addEventListener("change", this);
     },
@@ -162,20 +162,19 @@
      * @param {Object} event object containing the theme or query update.
      */
     handleEvent(event) {
-      // XUL documents don't have a body
-      const element = document.body ? document.body : document.documentElement;
+      const root = document.documentElement;
 
       if (event.type == "LightweightTheme:Set") {
         let { data } = event.detail;
         if (!data) {
           data = {};
         }
-        this._setProperties(element, data);
+        this._setProperties(root, data);
       } else if (event.type == "change") {
         // If a lightweight theme doesn't apply, update lwt-newtab-brighttext to
         // reflect prefers-color-scheme.
-        if (!element.hasAttribute("lwt-newtab")) {
-          element.toggleAttribute("lwt-newtab-brighttext", event.matches);
+        if (!root.hasAttribute("lwt-newtab")) {
+          root.toggleAttribute("lwt-newtab-brighttext", event.matches);
         }
       }
     },

diff --git a/browser/components/firefoxview/firefoxview.css b/browser/components/firefoxview/firefoxview.css
@@ -39,9 +39,6 @@
   font-size: 15px;
   /* override --in-content-page-background from common-shared.css */
   background-color: transparent;
-}
-
-body {
   --fxview-background-color: var(--newtab-background-color, var(--in-content-page-background));
   --fxview-element-background-hover: color-mix(in srgb, var(--fxview-background-color) 90%, currentColor);
   --fxview-element-background-active: color-mix(in srgb, var(--fxview-background-color) 80%, currentColor);
@@ -58,7 +55,9 @@ body {
   --in-content-button-background-hover: var(--fxview-element-background-hover);
   --in-content-button-background-active: var(--fxview-element-background-active);
   --in-content-button-text-color-hover: var(--fxview-text-color-hover);
+}
 
+body {
   display: flex;
   justify-content: center;
   padding-block: var(--header-spacing) var(--footer-spacing);
@@ -69,20 +68,20 @@ body {
   color: var(--newtab-text-primary-color);
 }
 
-body:not([lwt-newtab]) {
+:root:not([lwt-newtab]) {
   --in-content-zap-gradient: linear-gradient(90deg, #9059FF 0%, #FF4AA2 52.08%, #FFBD4F 100%);
 }
 
 @media (prefers-color-scheme: dark) {
-  body {
+  :root {
     --fxview-element-background-hover: color-mix(in srgb, var(--fxview-background-color) 80%, white);
     --fxview-element-background-active: color-mix(in srgb, var(--fxview-background-color) 60%, white);
     --newtab-background-color-secondary: #42414d;
   }
 }
 
 @media (prefers-contrast) {
-  body {
+  :root {
     --fxview-element-background-hover: ButtonText;
     --fxview-element-background-active: ButtonText;
     --fxview-text-color-hover: ButtonFace;

diff --git a/browser/components/newtab/content-src/styles/_theme.scss b/browser/components/newtab/content-src/styles/_theme.scss
@@ -23,7 +23,7 @@ $shadow-card: 0 2px 6px rgba(0, 0, 0, 0.15);
 $shadow-image-inset: inset 0 0 0 0.5px $black-15;
 
 // Default theme
-body {
+:root {
   // General styles
   --newtab-background-color: #{$in-content-page-background};
   --newtab-background-color-secondary: #{$newtab-background-secondary};
@@ -93,7 +93,7 @@ body {
 }
 
 @media (prefers-contrast) {
-  body {
+  :root {
     --newtab-text-secondary-color: var(--newtab-text-primary-color);
   }
 }
diff --git a/browser/components/newtab/css/activity-stream-linux.css b/browser/components/newtab/css/activity-stream-linux.css
@@ -33,7 +33,7 @@ input {
   display: none !important;
 }
 
-body {
+:root {
   --newtab-background-color: #F9F9FB;
   --newtab-background-color-secondary: #FFF;
   --newtab-text-primary-color: #15141a;
@@ -63,7 +63,7 @@ body {
   --newtab-textbox-focus-boxshadow: 0 0 0 1px var(--newtab-primary-action-background), 0 0 0 4px rgba(var(--newtab-primary-action-background), 0.3);
   --newtab-button-secondary-color: inherit;
 }
-body[lwt-newtab-brighttext] {
+:root[lwt-newtab-brighttext] {
   --newtab-background-color: #2B2A33;
   --newtab-background-color-secondary: #42414d;
   --newtab-text-primary-color: #fbfbfe;
@@ -84,7 +84,7 @@ body[lwt-newtab-brighttext] {
 }
 
 @media (prefers-contrast) {
-  body {
+  :root {
     --newtab-text-secondary-color: var(--newtab-text-primary-color);
   }
 }

diff --git a/browser/components/newtab/css/activity-stream-mac.css b/browser/components/newtab/css/activity-stream-mac.css
@@ -37,7 +37,7 @@ input {
   display: none !important;
 }
 
-body {
+:root {
   --newtab-background-color: #F9F9FB;
   --newtab-background-color-secondary: #FFF;
   --newtab-text-primary-color: #15141a;
@@ -67,7 +67,7 @@ body {
   --newtab-textbox-focus-boxshadow: 0 0 0 1px var(--newtab-primary-action-background), 0 0 0 4px rgba(var(--newtab-primary-action-background), 0.3);
   --newtab-button-secondary-color: inherit;
 }
-body[lwt-newtab-brighttext] {
+:root[lwt-newtab-brighttext] {
   --newtab-background-color: #2B2A33;
   --newtab-background-color-secondary: #42414d;
   --newtab-text-primary-color: #fbfbfe;
@@ -88,7 +88,7 @@ body[lwt-newtab-brighttext] {
 }
 
 @media (prefers-contrast) {
-  body {
+  :root {
     --newtab-text-secondary-color: var(--newtab-text-primary-color);
   }
 }

diff --git a/browser/components/newtab/css/activity-stream-windows.css b/browser/components/newtab/css/activity-stream-windows.css
@@ -33,7 +33,7 @@ input {
   display: none !important;
 }
 
-body {
+:root {
   --newtab-background-color: #F9F9FB;
   --newtab-background-color-secondary: #FFF;
   --newtab-text-primary-color: #15141a;
@@ -63,7 +63,7 @@ body {
   --newtab-textbox-focus-boxshadow: 0 0 0 1px var(--newtab-primary-action-background), 0 0 0 4px rgba(var(--newtab-primary-action-background), 0.3);
   --newtab-button-secondary-color: inherit;
 }
-body[lwt-newtab-brighttext] {
+:root[lwt-newtab-brighttext] {
   --newtab-background-color: #2B2A33;
   --newtab-background-color-secondary: #42414d;
   --newtab-text-primary-color: #fbfbfe;
@@ -84,7 +84,7 @@ body[lwt-newtab-brighttext] {
 }
 
 @media (prefers-contrast) {
-  body {
+  :root {
     --newtab-text-secondary-color: var(--newtab-text-primary-color);
   }
 }