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/Dialog.js b/front_end/ui/Dialog.js
index 3cdfa26..23b124a 100644
--- a/front_end/ui/Dialog.js
+++ b/front_end/ui/Dialog.js
@@ -41,7 +41,7 @@
export class Dialog extends GlassPane {
constructor() {
super();
- this.registerRequiredCSS('ui/dialog.css');
+ this.registerRequiredCSS('ui/dialog.css', {enableLegacyPatching: true});
this.contentElement.tabIndex = 0;
this.contentElement.addEventListener('focus', () => this.widget().focus(), false);
this.widget().setDefaultFocusedElement(this.contentElement);
diff --git a/front_end/ui/EmptyWidget.js b/front_end/ui/EmptyWidget.js
index 04306c1..b726a3b 100644
--- a/front_end/ui/EmptyWidget.js
+++ b/front_end/ui/EmptyWidget.js
@@ -38,7 +38,7 @@
*/
constructor(text) {
super();
- this.registerRequiredCSS('ui/emptyWidget.css');
+ this.registerRequiredCSS('ui/emptyWidget.css', {enableLegacyPatching: true});
this.element.classList.add('empty-view-scroller');
this._contentElement = this.element.createChild('div', 'empty-view');
this._textElement = this._contentElement.createChild('div', 'empty-bold-text');
diff --git a/front_end/ui/FilterBar.js b/front_end/ui/FilterBar.js
index ea76c36..bf85eb5 100644
--- a/front_end/ui/FilterBar.js
+++ b/front_end/ui/FilterBar.js
@@ -51,7 +51,7 @@
*/
constructor(name, visibleByDefault) {
super();
- this.registerRequiredCSS('ui/filter.css');
+ this.registerRequiredCSS('ui/filter.css', {enableLegacyPatching: true});
this._enabled = true;
this.element.classList.add('filter-bar');
diff --git a/front_end/ui/GlassPane.js b/front_end/ui/GlassPane.js
index 5072e65..4740c50 100644
--- a/front_end/ui/GlassPane.js
+++ b/front_end/ui/GlassPane.js
@@ -22,7 +22,7 @@
this.element.shadowRoot.appendChild(this._arrowElement);
}
- this.registerRequiredCSS('ui/glassPane.css');
+ this.registerRequiredCSS('ui/glassPane.css', {enableLegacyPatching: true});
this.setPointerEventsBehavior(PointerEventsBehavior.PierceGlassPane);
this._onMouseDownBound = this._onMouseDown.bind(this);
@@ -50,9 +50,10 @@
/**
* @param {string} cssFile
+ * @param {!{enableLegacyPatching:boolean}} options
*/
- registerRequiredCSS(cssFile) {
- this._widget.registerRequiredCSS(cssFile);
+ registerRequiredCSS(cssFile, options) {
+ this._widget.registerRequiredCSS(cssFile, options);
}
/**
diff --git a/front_end/ui/InspectorView.js b/front_end/ui/InspectorView.js
index 38fb4a5..7cc646f 100644
--- a/front_end/ui/InspectorView.js
+++ b/front_end/ui/InspectorView.js
@@ -105,7 +105,7 @@
this._tabbedPane = this._tabbedLocation.tabbedPane();
this._tabbedPane.element.classList.add('main-tabbed-pane');
- this._tabbedPane.registerRequiredCSS('ui/inspectorViewTabbedPane.css');
+ this._tabbedPane.registerRequiredCSS('ui/inspectorViewTabbedPane.css', {enableLegacyPatching: true});
this._tabbedPane.addEventListener(TabbedPaneEvents.TabSelected, this._tabSelected, this);
this._tabbedPane.setAccessibleName(Common.UIString.UIString('Panels'));
this._tabbedPane.setTabDelegate(this._tabDelegate);
diff --git a/front_end/ui/ListWidget.js b/front_end/ui/ListWidget.js
index e8b1622..17e0181 100644
--- a/front_end/ui/ListWidget.js
+++ b/front_end/ui/ListWidget.js
@@ -19,7 +19,7 @@
*/
constructor(delegate, delegatesFocus = true) {
super(true, delegatesFocus);
- this.registerRequiredCSS('ui/listWidget.css');
+ this.registerRequiredCSS('ui/listWidget.css', {enableLegacyPatching: true});
this._delegate = delegate;
this._list = this.contentElement.createChild('div', 'list');
diff --git a/front_end/ui/PopoverHelper.js b/front_end/ui/PopoverHelper.js
index ba5151b..7daf8a9 100644
--- a/front_end/ui/PopoverHelper.js
+++ b/front_end/ui/PopoverHelper.js
@@ -226,7 +226,7 @@
*/
_showPopover(document) {
const popover = new GlassPane();
- popover.registerRequiredCSS('ui/popover.css');
+ popover.registerRequiredCSS('ui/popover.css', {enableLegacyPatching: true});
popover.setSizeBehavior(SizeBehavior.MeasureContent);
popover.setMarginBehavior(MarginBehavior.Arrow);
const request = this._scheduledRequest;
diff --git a/front_end/ui/RemoteDebuggingTerminatedScreen.js b/front_end/ui/RemoteDebuggingTerminatedScreen.js
index cefc35d..0826e58 100644
--- a/front_end/ui/RemoteDebuggingTerminatedScreen.js
+++ b/front_end/ui/RemoteDebuggingTerminatedScreen.js
@@ -14,7 +14,7 @@
*/
constructor(reason) {
super(true);
- this.registerRequiredCSS('ui/remoteDebuggingTerminatedScreen.css');
+ this.registerRequiredCSS('ui/remoteDebuggingTerminatedScreen.css', {enableLegacyPatching: true});
const message = this.contentElement.createChild('div', 'message');
const reasonElement = message.createChild('span', 'reason');
reasonElement.textContent = reason;
diff --git a/front_end/ui/ReportView.js b/front_end/ui/ReportView.js
index febda5f..fdf7f07 100644
--- a/front_end/ui/ReportView.js
+++ b/front_end/ui/ReportView.js
@@ -15,7 +15,7 @@
*/
constructor(title) {
super(true);
- this.registerRequiredCSS('ui/reportView.css');
+ this.registerRequiredCSS('ui/reportView.css', {enableLegacyPatching: true});
this._contentBox = this.contentElement.createChild('div', 'report-content-box');
this._headerElement = this._contentBox.createChild('div', 'report-header vbox');
diff --git a/front_end/ui/RootView.js b/front_end/ui/RootView.js
index 86ab5d0..641fee8 100644
--- a/front_end/ui/RootView.js
+++ b/front_end/ui/RootView.js
@@ -13,7 +13,7 @@
super();
this.markAsRoot();
this.element.classList.add('root-view');
- this.registerRequiredCSS('ui/rootView.css');
+ this.registerRequiredCSS('ui/rootView.css', {enableLegacyPatching: true});
this.element.setAttribute('spellcheck', 'false');
}
diff --git a/front_end/ui/SearchableView.js b/front_end/ui/SearchableView.js
index 48c7554..bcf994a 100644
--- a/front_end/ui/SearchableView.js
+++ b/front_end/ui/SearchableView.js
@@ -51,7 +51,7 @@
*/
constructor(searchable, settingName) {
super(true);
- this.registerRequiredCSS('ui/searchableView.css');
+ this.registerRequiredCSS('ui/searchableView.css', {enableLegacyPatching: true});
this.element[_symbol] = this;
this._searchProvider = searchable;
diff --git a/front_end/ui/SegmentedButton.js b/front_end/ui/SegmentedButton.js
index ffb6b7b..01b31f7 100644
--- a/front_end/ui/SegmentedButton.js
+++ b/front_end/ui/SegmentedButton.js
@@ -12,7 +12,7 @@
/** @type {?string} */
this._selected = null;
- this.registerRequiredCSS('ui/segmentedButton.css');
+ this.registerRequiredCSS('ui/segmentedButton.css', {enableLegacyPatching: true});
this.contentElement.classList.add('segmented-button');
}
diff --git a/front_end/ui/SoftContextMenu.js b/front_end/ui/SoftContextMenu.js
index 5c12dd3..9960154 100644
--- a/front_end/ui/SoftContextMenu.js
+++ b/front_end/ui/SoftContextMenu.js
@@ -70,7 +70,7 @@
this._glassPane = new GlassPane();
this._glassPane.setPointerEventsBehavior(
this._parentMenu ? PointerEventsBehavior.PierceGlassPane : PointerEventsBehavior.BlockedByGlassPane);
- this._glassPane.registerRequiredCSS('ui/softContextMenu.css');
+ this._glassPane.registerRequiredCSS('ui/softContextMenu.css', {enableLegacyPatching: true});
this._glassPane.setContentAnchorBox(anchorBox);
this._glassPane.setSizeBehavior(SizeBehavior.MeasureContent);
this._glassPane.setMarginBehavior(MarginBehavior.NoMargin);
diff --git a/front_end/ui/SoftDropDown.js b/front_end/ui/SoftDropDown.js
index b87eb84..4a4b16a 100644
--- a/front_end/ui/SoftDropDown.js
+++ b/front_end/ui/SoftDropDown.js
@@ -31,7 +31,7 @@
this.element = document.createElement('button');
this.element.classList.add('soft-dropdown');
- appendStyle(this.element, 'ui/softDropDownButton.css');
+ appendStyle(this.element, 'ui/softDropDownButton.css', {enableLegacyPatching: true});
this._titleElement = this.element.createChild('span', 'title');
const dropdownArrowIcon = Icon.create('smallicon-triangle-down');
this.element.appendChild(dropdownArrowIcon);
diff --git a/front_end/ui/SplitWidget.js b/front_end/ui/SplitWidget.js
index 8f3393a..e142456 100644
--- a/front_end/ui/SplitWidget.js
+++ b/front_end/ui/SplitWidget.js
@@ -53,7 +53,7 @@
constructor(isVertical, secondIsSidebar, settingName, defaultSidebarWidth, defaultSidebarHeight, constraintsInDip) {
super(true);
this.element.classList.add('split-widget');
- this.registerRequiredCSS('ui/splitWidget.css');
+ this.registerRequiredCSS('ui/splitWidget.css', {enableLegacyPatching: true});
this.contentElement.classList.add('shadow-split-widget');
this._sidebarElement =
diff --git a/front_end/ui/TabbedPane.js b/front_end/ui/TabbedPane.js
index daa86c4..76fbd39 100644
--- a/front_end/ui/TabbedPane.js
+++ b/front_end/ui/TabbedPane.js
@@ -46,7 +46,7 @@
export class TabbedPane extends VBox {
constructor() {
super(true);
- this.registerRequiredCSS('ui/tabbedPane.css');
+ this.registerRequiredCSS('ui/tabbedPane.css', {enableLegacyPatching: true});
this.element.classList.add('tabbed-pane');
this.contentElement.classList.add('tabbed-pane-shadow');
this.contentElement.tabIndex = -1;
diff --git a/front_end/ui/TargetCrashedScreen.js b/front_end/ui/TargetCrashedScreen.js
index 29af674..f5021e6 100644
--- a/front_end/ui/TargetCrashedScreen.js
+++ b/front_end/ui/TargetCrashedScreen.js
@@ -11,7 +11,7 @@
*/
constructor(hideCallback) {
super(true);
- this.registerRequiredCSS('ui/targetCrashedScreen.css');
+ this.registerRequiredCSS('ui/targetCrashedScreen.css', {enableLegacyPatching: true});
this.contentElement.createChild('div', 'message').textContent =
Common.UIString.UIString('DevTools was disconnected from the page.');
this.contentElement.createChild('div', 'message').textContent =
diff --git a/front_end/ui/TextPrompt.js b/front_end/ui/TextPrompt.js
index f998180..8d44d01 100644
--- a/front_end/ui/TextPrompt.js
+++ b/front_end/ui/TextPrompt.js
@@ -128,7 +128,7 @@
this._boundOnMouseWheel = this.onMouseWheel.bind(this);
this._boundClearAutocomplete = this.clearAutocomplete.bind(this);
this._proxyElement = element.ownerDocument.createElement('span');
- appendStyle(this._proxyElement, 'ui/textPrompt.css');
+ appendStyle(this._proxyElement, 'ui/textPrompt.css', {enableLegacyPatching: true});
this._contentElement = this._proxyElement.createChild('div', 'text-prompt-root');
this._proxyElement.style.display = this._proxyElementDisplay;
element.parentElement.insertBefore(this._proxyElement, element);
diff --git a/front_end/ui/Treeoutline.js b/front_end/ui/Treeoutline.js
index 0e9b069..73d4817 100644
--- a/front_end/ui/Treeoutline.js
+++ b/front_end/ui/Treeoutline.js
@@ -424,9 +424,10 @@
/**
* @param {string} cssFile
+ * @param {!{enableLegacyPatching:boolean}} options
*/
- registerRequiredCSS(cssFile) {
- appendStyle(this._shadowRoot, cssFile);
+ registerRequiredCSS(cssFile, options) {
+ appendStyle(this._shadowRoot, cssFile, options);
}
hideOverflow() {
diff --git a/front_end/ui/UIUtils.js b/front_end/ui/UIUtils.js
index fc556ae..9cf1fc3 100644
--- a/front_end/ui/UIUtils.js
+++ b/front_end/ui/UIUtils.js
@@ -1203,7 +1203,7 @@
ThemeSupport.ThemeSupport.instance().applyTheme(document);
const body = /** @type {!Element} */ (document.body);
- appendStyle(body, 'ui/inspectorStyle.css');
+ appendStyle(body, 'ui/inspectorStyle.css', {enableLegacyPatching: true});
GlassPane.setContainer(/** @type {!Element} */ (document.body));
}
diff --git a/front_end/ui/ViewManager.js b/front_end/ui/ViewManager.js
index 4b09e88..99458db 100644
--- a/front_end/ui/ViewManager.js
+++ b/front_end/ui/ViewManager.js
@@ -332,7 +332,7 @@
constructor(view) {
super(true);
this.element.classList.add('flex-none');
- this.registerRequiredCSS('ui/viewContainers.css');
+ this.registerRequiredCSS('ui/viewContainers.css', {enableLegacyPatching: true});
this._titleElement = document.createElement('div');
this._titleElement.classList.add('expandable-view-title');
diff --git a/front_end/ui/Widget.js b/front_end/ui/Widget.js
index d521c94..d9bf1b9 100644
--- a/front_end/ui/Widget.js
+++ b/front_end/ui/Widget.js
@@ -504,12 +504,13 @@
/**
* @param {string} cssFile
+ * @param {!{enableLegacyPatching:boolean}} options
*/
- registerRequiredCSS(cssFile) {
+ registerRequiredCSS(cssFile, options) {
if (this._isWebComponent) {
- appendStyle(/** @type {!DocumentFragment} */ (this._shadowRoot), cssFile);
+ appendStyle(/** @type {!DocumentFragment} */ (this._shadowRoot), cssFile, options);
} else {
- appendStyle(this.element, cssFile);
+ appendStyle(this.element, cssFile, options);
}
}
diff --git a/front_end/ui/XWidget.js b/front_end/ui/XWidget.js
index 1f0bb92..080417c 100644
--- a/front_end/ui/XWidget.js
+++ b/front_end/ui/XWidget.js
@@ -65,9 +65,10 @@
/**
* @param {string} cssFile
+ * @param {!{enableLegacyPatching:boolean}} options
*/
- registerRequiredCSS(cssFile) {
- appendStyle(this._shadowRoot || this, cssFile);
+ registerRequiredCSS(cssFile, options) {
+ appendStyle(this._shadowRoot || this, cssFile, options);
}
/**
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);
+ }
}
}
diff --git a/front_end/ui/utils/create-shadow-root-with-core-styles.js b/front_end/ui/utils/create-shadow-root-with-core-styles.js
index 8a1c81c..8033977 100644
--- a/front_end/ui/utils/create-shadow-root-with-core-styles.js
+++ b/front_end/ui/utils/create-shadow-root-with-core-styles.js
@@ -19,7 +19,7 @@
const shadowRoot = element.attachShadow({mode: 'open', delegatesFocus});
injectCoreStyles(shadowRoot);
if (cssFile) {
- appendStyle(shadowRoot, cssFile);
+ appendStyle(shadowRoot, cssFile, {enableLegacyPatching: true});
}
shadowRoot.addEventListener('focus', focusChanged.bind(UI), true);
return shadowRoot;
diff --git a/front_end/ui/utils/inject-core-styles.js b/front_end/ui/utils/inject-core-styles.js
index 79f60cf..1058dcb 100644
--- a/front_end/ui/utils/inject-core-styles.js
+++ b/front_end/ui/utils/inject-core-styles.js
@@ -12,8 +12,8 @@
* @param {!Element|!ShadowRoot} root
*/
export function injectCoreStyles(root) {
- appendStyle(root, 'ui/inspectorCommon.css');
- appendStyle(root, 'ui/textButton.css');
+ appendStyle(root, 'ui/inspectorCommon.css', {enableLegacyPatching: true});
+ appendStyle(root, 'ui/textButton.css', {enableLegacyPatching: true});
ThemeSupport.ThemeSupport.instance().injectHighlightStyleSheets(root);
ThemeSupport.ThemeSupport.instance().injectCustomStyleSheets(root);
}
