Introduce enableLegacyPatching flag for CSS patching
As part of the dark mode migration we are adding
`enableLegacyPatching:true` to all call sites of `appendStyle` (and
related methods). If a user passes `false` for that flag, no CSS colour
patching will occur.
This CL is therefore a no-op from a user's perspective as we pass `true`
on every call to maintain existing behaviour, but once we start
migrating we will turn the option to `false`. Long term, once all code
is migrated and the old patching is removed, we will remove this flag
entirely once again.
Bug: 1122511
Change-Id: I76b818e83b7d5ee0175e1548759373f53481e0ab
No-Presubmit: True
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2516345
Commit-Queue: Jack Franklin <[email protected]>
Reviewed-by: Tim van der Lippe <[email protected]>
diff --git a/front_end/ui/utils/append-style.js b/front_end/ui/utils/append-style.js
index ec929d9..2f21393 100644
--- a/front_end/ui/utils/append-style.js
+++ b/front_end/ui/utils/append-style.js
@@ -11,9 +11,12 @@
/**
* @param {!Node} node
* @param {string} cssFile
+ * @param {!{enableLegacyPatching:boolean}} options
* @suppressGlobalPropertiesCheck
*/
-export function appendStyle(node, cssFile) {
+export function appendStyle(node, cssFile, options = {
+ enableLegacyPatching: false
+}) {
const content = Root.Runtime.cachedResources.get(cssFile) || '';
if (!content) {
console.error(cssFile + ' not preloaded. Check module.json');
@@ -22,10 +25,16 @@
styleElement.textContent = content;
node.appendChild(styleElement);
- const themeStyleSheet = ThemeSupport.ThemeSupport.instance().themeStyleSheet(cssFile, content);
- if (themeStyleSheet) {
- styleElement = createElement('style');
- styleElement.textContent = themeStyleSheet + '\n' + Root.Runtime.Runtime.resolveSourceURL(cssFile + '.theme');
- node.appendChild(styleElement);
+ /**
+ * We are incrementally removing patching support in favour of CSS variables for supporting dark mode.
+ * See https://docs.google.com/document/d/1QrSSRsJRzaQBY3zz73ZL84bTcFUV60yMtE5cuu6ED14 for details.
+ */
+ if (options.enableLegacyPatching) {
+ const themeStyleSheet = ThemeSupport.ThemeSupport.instance().themeStyleSheet(cssFile, content);
+ if (themeStyleSheet) {
+ styleElement = createElement('style');
+ styleElement.textContent = themeStyleSheet + '\n' + Root.Runtime.Runtime.resolveSourceURL(cssFile + '.theme');
+ node.appendChild(styleElement);
+ }
}
}
