[Global] Update refs to UI.themeSupport
Bug: 1006759
Change-Id: I8d11fd8de1f43e2add97dd09dd539bfda4a23f39
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2019560
Commit-Queue: Paul Lewis <[email protected]>
Reviewed-by: Tim van der Lippe <[email protected]>
diff --git a/front_end/audits/AuditsReportRenderer.js b/front_end/audits/AuditsReportRenderer.js
index d99dbf6..a6f77af 100644
--- a/front_end/audits/AuditsReportRenderer.js
+++ b/front_end/audits/AuditsReportRenderer.js
@@ -91,7 +91,7 @@
* @param {!Element} el
*/
static handleDarkMode(el) {
- if (UI.themeSupport.themeName() === 'dark') {
+ if (self.UI.themeSupport.themeName() === 'dark') {
el.classList.add('dark');
}
}
diff --git a/front_end/console/ConsoleViewMessage.js b/front_end/console/ConsoleViewMessage.js
index dcb6856..74d5d0e 100644
--- a/front_end/console/ConsoleViewMessage.js
+++ b/front_end/console/ConsoleViewMessage.js
@@ -961,7 +961,8 @@
element.style.setProperty('-webkit-text-stroke', '0', 'important');
element.style.setProperty('text-decoration', 'underline', 'important');
- const themedColor = UI.themeSupport.patchColorText('rgb(33%, 33%, 33%)', UI.ThemeSupport.ColorUsage.Foreground);
+ const themedColor =
+ self.UI.themeSupport.patchColorText('rgb(33%, 33%, 33%)', UI.ThemeSupport.ColorUsage.Foreground);
element.style.setProperty('color', themedColor, 'important');
let backgroundColor = 'hsl(0, 0%, 100%)';
@@ -971,7 +972,7 @@
backgroundColor = 'hsl(50, 100%, 95%)';
}
const themedBackgroundColor =
- UI.themeSupport.patchColorText(backgroundColor, UI.ThemeSupport.ColorUsage.Background);
+ self.UI.themeSupport.patchColorText(backgroundColor, UI.ThemeSupport.ColorUsage.Background);
element.style.setProperty('background-color', themedBackgroundColor, 'important');
}
diff --git a/front_end/extensions/ExtensionServer.js b/front_end/extensions/ExtensionServer.js
index fcab89d..de2ced5 100644
--- a/front_end/extensions/ExtensionServer.js
+++ b/front_end/extensions/ExtensionServer.js
@@ -253,11 +253,11 @@
styleSheet.textContent = message.styleSheet;
document.head.appendChild(styleSheet);
- UI.themeSupport.addCustomStylesheet(message.styleSheet);
+ self.UI.themeSupport.addCustomStylesheet(message.styleSheet);
// Add to all the shadow roots that have already been created
for (let node = document.body; node; node = node.traverseNextNode(document.body)) {
if (node instanceof ShadowRoot) {
- UI.themeSupport.injectCustomStyleSheets(node);
+ self.UI.themeSupport.injectCustomStyleSheets(node);
}
}
}
@@ -722,7 +722,7 @@
if (!this._registeredExtensions[extensionOrigin]) {
// See ExtensionAPI.js for details.
const injectedAPI = self.buildExtensionAPIInjectedScript(
- extensionInfo, this._inspectedTabId, UI.themeSupport.themeName(),
+ extensionInfo, this._inspectedTabId, self.UI.themeSupport.themeName(),
self.UI.shortcutRegistry.globalShortcutKeys(), self.Extensions.extensionServer['_extensionAPITestHook']);
Host.InspectorFrontendHost.setInjectedScriptForOrigin(extensionOrigin, injectedAPI);
this._registeredExtensions[extensionOrigin] = {name: name};
diff --git a/front_end/main/MainImpl.js b/front_end/main/MainImpl.js
index acd7259..27d20f8 100644
--- a/front_end/main/MainImpl.js
+++ b/front_end/main/MainImpl.js
@@ -579,7 +579,7 @@
'Placement of DevTools relative to the page. (%s to restore last position)', toggleDockSideShorcuts[0].name);
dockItemElement.appendChild(titleElement);
const dockItemToolbar = new UI.Toolbar('', dockItemElement);
- if (Host.isMac() && !UI.themeSupport.hasTheme()) {
+ if (Host.isMac() && !self.UI.themeSupport.hasTheme()) {
dockItemToolbar.makeBlueOnHover();
}
const undock = new UI.ToolbarToggle(Common.UIString('Undock into separate window'), 'largeicon-undock');
diff --git a/front_end/network/NetworkLogView.js b/front_end/network/NetworkLogView.js
index deddd77..6d24738 100644
--- a/front_end/network/NetworkLogView.js
+++ b/front_end/network/NetworkLogView.js
@@ -2032,7 +2032,7 @@
* @return {string}
*/
static getDCLEventColor() {
- if (UI.themeSupport.themeName() === 'dark') {
+ if (self.UI.themeSupport.themeName() === 'dark') {
return '#03A9F4';
}
return '#0867CB';
@@ -2042,7 +2042,7 @@
* @return {string}
*/
static getLoadEventColor() {
- return UI.themeSupport.patchColorText('#B31412', UI.ThemeSupport.ColorUsage.Foreground);
+ return self.UI.themeSupport.patchColorText('#B31412', UI.ThemeSupport.ColorUsage.Foreground);
}
}
diff --git a/front_end/network/NetworkWaterfallColumn.js b/front_end/network/NetworkWaterfallColumn.js
index 8d6d694..81862cb 100644
--- a/front_end/network/NetworkWaterfallColumn.js
+++ b/front_end/network/NetworkWaterfallColumn.js
@@ -69,7 +69,7 @@
/** @type {!Map<!Common.ResourceType, !NetworkWaterfallColumn._LayerStyle>} */
this._styleForDownloadingResourceType = resourceStyleTuple[1];
- const baseLineColor = UI.themeSupport.patchColorText('#a5a5a5', UI.ThemeSupport.ColorUsage.Foreground);
+ const baseLineColor = self.UI.themeSupport.patchColorText('#a5a5a5', UI.ThemeSupport.ColorUsage.Foreground);
/** @type {!NetworkWaterfallColumn._LayerStyle} */
this._wiskerStyle = {borderColor: baseLineColor, lineWidth: 1};
/** @type {!NetworkWaterfallColumn._LayerStyle} */
@@ -444,7 +444,7 @@
this._drawLayers(context);
context.save();
- context.fillStyle = UI.themeSupport.patchColorText('#888', UI.ThemeSupport.ColorUsage.Foreground);
+ context.fillStyle = self.UI.themeSupport.patchColorText('#888', UI.ThemeSupport.ColorUsage.Foreground);
for (const textData of this._textLayers) {
context.fillText(textData.text, textData.x, textData.y);
}
diff --git a/front_end/perf_ui/FlameChart.js b/front_end/perf_ui/FlameChart.js
index f6774c0..37949f9 100644
--- a/front_end/perf_ui/FlameChart.js
+++ b/front_end/perf_ui/FlameChart.js
@@ -153,9 +153,9 @@
this._keyboardFocusedGroup = -1;
this._selectedGroupBackroundColor =
- UI.themeSupport.patchColorText(Colors.SelectedGroupBackground, UI.ThemeSupport.ColorUsage.Background);
+ self.UI.themeSupport.patchColorText(Colors.SelectedGroupBackground, UI.ThemeSupport.ColorUsage.Background);
this._selectedGroupBorderColor =
- UI.themeSupport.patchColorText(Colors.SelectedGroupBorder, UI.ThemeSupport.ColorUsage.Background);
+ self.UI.themeSupport.patchColorText(Colors.SelectedGroupBorder, UI.ThemeSupport.ColorUsage.Background);
}
/**
@@ -1402,7 +1402,7 @@
const defaultFont = '11px ' + Host.fontFamily();
context.font = defaultFont;
- context.fillStyle = UI.themeSupport.patchColorText('#fff', colorUsage.Background);
+ context.fillStyle = self.UI.themeSupport.patchColorText('#fff', colorUsage.Background);
this._forEachGroupInViewport((offset, index, group) => {
const paddingHeight = group.style.padding;
if (paddingHeight < 5) {
@@ -1414,7 +1414,7 @@
context.fillRect(0, lastGroupOffset + 2, width, top + height - lastGroupOffset);
}
- context.strokeStyle = UI.themeSupport.patchColorText('#eee', colorUsage.Background);
+ context.strokeStyle = self.UI.themeSupport.patchColorText('#eee', colorUsage.Background);
context.beginPath();
this._forEachGroupInViewport((offset, index, group, isFirst) => {
if (isFirst || group.style.padding < 4) {
@@ -1469,7 +1469,7 @@
});
context.restore();
- context.fillStyle = UI.themeSupport.patchColorText('#6e6e6e', colorUsage.Foreground);
+ context.fillStyle = self.UI.themeSupport.patchColorText('#6e6e6e', colorUsage.Foreground);
context.beginPath();
this._forEachGroupInViewport((offset, index, group) => {
if (this._isGroupCollapsible(index)) {
@@ -1480,7 +1480,7 @@
});
context.fill();
- context.strokeStyle = UI.themeSupport.patchColorText('#ddd', colorUsage.Background);
+ context.strokeStyle = self.UI.themeSupport.patchColorText('#ddd', colorUsage.Background);
context.beginPath();
context.stroke();
diff --git a/front_end/perf_ui/TimelineGrid.js b/front_end/perf_ui/TimelineGrid.js
index d66e451..211c01d 100644
--- a/front_end/perf_ui/TimelineGrid.js
+++ b/front_end/perf_ui/TimelineGrid.js
@@ -105,7 +105,8 @@
context.save();
context.scale(window.devicePixelRatio, window.devicePixelRatio);
const height = Math.floor(context.canvas.height / window.devicePixelRatio);
- context.strokeStyle = UI.themeSupport.patchColorText('rgba(0, 0, 0, 0.1)', UI.ThemeSupport.ColorUsage.Foreground);
+ context.strokeStyle =
+ self.UI.themeSupport.patchColorText('rgba(0, 0, 0, 0.1)', UI.ThemeSupport.ColorUsage.Foreground);
context.lineWidth = 1;
context.translate(0.5, 0.5);
@@ -133,10 +134,10 @@
context.beginPath();
context.fillStyle =
- UI.themeSupport.patchColorText('rgba(255, 255, 255, 0.5)', UI.ThemeSupport.ColorUsage.Background);
+ self.UI.themeSupport.patchColorText('rgba(255, 255, 255, 0.5)', UI.ThemeSupport.ColorUsage.Background);
context.fillRect(0, 0, width, headerHeight);
- context.fillStyle = UI.themeSupport.patchColorText('#333', UI.ThemeSupport.ColorUsage.Foreground);
+ context.fillStyle = self.UI.themeSupport.patchColorText('#333', UI.ThemeSupport.ColorUsage.Foreground);
context.textBaseline = 'hanging';
context.font = '11px ' + Host.fontFamily();
diff --git a/front_end/performance_monitor/PerformanceMonitor.js b/front_end/performance_monitor/PerformanceMonitor.js
index e4c6356..9f46550 100644
--- a/front_end/performance_monitor/PerformanceMonitor.js
+++ b/front_end/performance_monitor/PerformanceMonitor.js
@@ -21,7 +21,7 @@
this._scaleHeight = 16;
/** @const */
this._graphHeight = 90;
- this._gridColor = UI.themeSupport.patchColorText('rgba(0, 0, 0, 0.08)', UI.ThemeSupport.ColorUsage.Foreground);
+ this._gridColor = self.UI.themeSupport.patchColorText('rgba(0, 0, 0, 0.08)', UI.ThemeSupport.ColorUsage.Foreground);
this._controlPane = new ControlPane(this.contentElement);
const chartContainer = this.contentElement.createChild('div', 'perfmon-chart-container');
this._canvas = /** @type {!HTMLCanvasElement} */ (chartContainer.createChild('canvas'));
@@ -158,9 +158,9 @@
*/
_drawHorizontalGrid(ctx) {
const labelDistanceSeconds = 10;
- const lightGray = UI.themeSupport.patchColorText('rgba(0, 0, 0, 0.02)', UI.ThemeSupport.ColorUsage.Foreground);
+ const lightGray = self.UI.themeSupport.patchColorText('rgba(0, 0, 0, 0.02)', UI.ThemeSupport.ColorUsage.Foreground);
ctx.font = '10px ' + Host.fontFamily();
- ctx.fillStyle = UI.themeSupport.patchColorText('rgba(0, 0, 0, 0.55)', UI.ThemeSupport.ColorUsage.Foreground);
+ ctx.fillStyle = self.UI.themeSupport.patchColorText('rgba(0, 0, 0, 0.55)', UI.ThemeSupport.ColorUsage.Foreground);
const currentTime = Date.now() / 1000;
for (let sec = Math.ceil(currentTime);; --sec) {
const x = this._width - ((currentTime - sec) * 1000 - this._pollIntervalMs) * this._pixelsPerMs;
@@ -201,7 +201,7 @@
});
}
const backgroundColor =
- Common.Color.parse(UI.themeSupport.patchColorText('white', UI.ThemeSupport.ColorUsage.Background));
+ Common.Color.parse(self.UI.themeSupport.patchColorText('white', UI.ThemeSupport.ColorUsage.Background));
for (const path of paths.reverse()) {
const color = path.color;
ctx.save();
@@ -212,7 +212,7 @@
ctx.stroke(path.path);
ctx.restore();
}
- ctx.fillStyle = UI.themeSupport.patchColorText('rgba(0, 0, 0, 0.55)', UI.ThemeSupport.ColorUsage.Foreground);
+ ctx.fillStyle = self.UI.themeSupport.patchColorText('rgba(0, 0, 0, 0.55)', UI.ThemeSupport.ColorUsage.Foreground);
ctx.font = `10px ${Host.fontFamily()}`;
ctx.fillText(chartInfo.title, 8, 10);
this._drawVerticalGrid(ctx, height - bottomPadding, max, chartInfo);
@@ -269,7 +269,7 @@
const span = max;
const topPadding = 18;
const visibleHeight = height - topPadding;
- ctx.fillStyle = UI.themeSupport.patchColorText('rgba(0, 0, 0, 0.55)', UI.ThemeSupport.ColorUsage.Foreground);
+ ctx.fillStyle = self.UI.themeSupport.patchColorText('rgba(0, 0, 0, 0.55)', UI.ThemeSupport.ColorUsage.Foreground);
ctx.strokeStyle = this._gridColor;
ctx.beginPath();
for (let i = 0; i < 2; ++i) {
@@ -286,7 +286,7 @@
ctx.beginPath();
ctx.moveTo(0, height + 0.5);
ctx.lineTo(this._width, height + 0.5);
- ctx.strokeStyle = UI.themeSupport.patchColorText('rgba(0, 0, 0, 0.2)', UI.ThemeSupport.ColorUsage.Foreground);
+ ctx.strokeStyle = self.UI.themeSupport.patchColorText('rgba(0, 0, 0, 0.2)', UI.ThemeSupport.ColorUsage.Foreground);
ctx.stroke();
/**
* @param {number} value
@@ -436,7 +436,7 @@
];
for (const info of this._chartsInfo) {
for (const metric of info.metrics) {
- metric.color = UI.themeSupport.patchColorText(metric.color, UI.ThemeSupport.ColorUsage.Foreground);
+ metric.color = self.UI.themeSupport.patchColorText(metric.color, UI.ThemeSupport.ColorUsage.Foreground);
}
}
diff --git a/front_end/timeline/TimelineFlameChartDataProvider.js b/front_end/timeline/TimelineFlameChartDataProvider.js
index 4a2a730..17ec267 100644
--- a/front_end/timeline/TimelineFlameChartDataProvider.js
+++ b/front_end/timeline/TimelineFlameChartDataProvider.js
@@ -81,8 +81,8 @@
padding: 4,
height: 17,
collapsible: true,
- color: UI.themeSupport.patchColorText('#222', UI.ThemeSupport.ColorUsage.Foreground),
- backgroundColor: UI.themeSupport.patchColorText('white', UI.ThemeSupport.ColorUsage.Background),
+ color: self.UI.themeSupport.patchColorText('#222', UI.ThemeSupport.ColorUsage.Foreground),
+ backgroundColor: self.UI.themeSupport.patchColorText('white', UI.ThemeSupport.ColorUsage.Background),
font: this._font,
nestingLevel: 0,
shareHeaderLine: true
diff --git a/front_end/timeline/TimelineFlameChartNetworkDataProvider.js b/front_end/timeline/TimelineFlameChartNetworkDataProvider.js
index e3caadf..b793e52 100644
--- a/front_end/timeline/TimelineFlameChartNetworkDataProvider.js
+++ b/front_end/timeline/TimelineFlameChartNetworkDataProvider.js
@@ -19,9 +19,9 @@
padding: 4,
height: 17,
collapsible: true,
- color: UI.themeSupport.patchColorText('#222', UI.ThemeSupport.ColorUsage.Foreground),
+ color: self.UI.themeSupport.patchColorText('#222', UI.ThemeSupport.ColorUsage.Foreground),
font: this._font,
- backgroundColor: UI.themeSupport.patchColorText('white', UI.ThemeSupport.ColorUsage.Background),
+ backgroundColor: self.UI.themeSupport.patchColorText('white', UI.ThemeSupport.ColorUsage.Background),
nestingLevel: 0,
useFirstLineForOverview: false,
useDecoratorsForOverview: true,
@@ -219,7 +219,7 @@
context.fillStyle = 'hsla(0, 100%, 100%, 0.8)';
context.fillRect(sendStart + 0.5, barY + 0.5, headersEnd - sendStart - 0.5, barHeight - 2);
// Clear portions of initial rect to prepare for the ticks.
- context.fillStyle = UI.themeSupport.patchColorText('white', UI.ThemeSupport.ColorUsage.Background);
+ context.fillStyle = self.UI.themeSupport.patchColorText('white', UI.ThemeSupport.ColorUsage.Background);
context.fillRect(barX, barY - 0.5, sendStart - barX, barHeight);
context.fillRect(finish, barY - 0.5, barX + barWidth - finish, barHeight);
diff --git a/front_end/ui/SoftContextMenu.js b/front_end/ui/SoftContextMenu.js
index db118f7..5d13fe0 100644
--- a/front_end/ui/SoftContextMenu.js
+++ b/front_end/ui/SoftContextMenu.js
@@ -195,7 +195,7 @@
menuItemElement.createTextChild(item.label);
- if (Host.Platform.isMac() && !UI.themeSupport.hasTheme()) {
+ if (Host.Platform.isMac() && !self.UI.themeSupport.hasTheme()) {
const subMenuArrowElement = menuItemElement.createChild('span', 'soft-context-menu-item-submenu-arrow');
subMenuArrowElement.textContent = '\u25B6'; // BLACK RIGHT-POINTING TRIANGLE
} else {
@@ -313,7 +313,7 @@
}
this._highlightedMenuItemElement = menuItemElement;
if (this._highlightedMenuItemElement) {
- if (UI.themeSupport.hasTheme() || Host.Platform.isMac()) {
+ if (self.UI.themeSupport.hasTheme() || Host.Platform.isMac()) {
this._highlightedMenuItemElement.classList.add('force-white-icons');
}
this._highlightedMenuItemElement.classList.add('soft-context-menu-item-mouse-over');
diff --git a/front_end/ui/UIUtils.js b/front_end/ui/UIUtils.js
index fe8edcd..f2ff318 100644
--- a/front_end/ui/UIUtils.js
+++ b/front_end/ui/UIUtils.js
@@ -1244,10 +1244,10 @@
document.defaultView.requestAnimationFrame(() => void(UI._keyboardFocus = false));
}, true);
- if (!UI.themeSupport) {
- UI.themeSupport = new ThemeSupport(themeSetting);
+ if (!self.UI.themeSupport) {
+ self.UI.themeSupport = new ThemeSupport(themeSetting);
}
- UI.themeSupport.applyTheme(document);
+ self.UI.themeSupport.applyTheme(document);
const body = /** @type {!Element} */ (document.body);
appendStyle(body, 'ui/inspectorStyle.css');
diff --git a/front_end/ui/ui-legacy.js b/front_end/ui/ui-legacy.js
index 719b543..2ca260e 100644
--- a/front_end/ui/ui-legacy.js
+++ b/front_end/ui/ui-legacy.js
@@ -728,7 +728,7 @@
UI.AutocompleteConfig;
/** @type {?UI.ThemeSupport} */
-UI.themeSupport;
+self.UI.themeSupport;
/** @typedef {!{title: (string|!Element|undefined), editable: (boolean|undefined) }} */
UI.Renderer.Options;
diff --git a/front_end/ui/utils/append-style.js b/front_end/ui/utils/append-style.js
index 385bee9..d9d2d29 100644
--- a/front_end/ui/utils/append-style.js
+++ b/front_end/ui/utils/append-style.js
@@ -16,7 +16,7 @@
styleElement.textContent = content;
node.appendChild(styleElement);
- const themeStyleSheet = UI.themeSupport.themeStyleSheet(cssFile, content);
+ const themeStyleSheet = self.UI.themeSupport.themeStyleSheet(cssFile, content);
if (themeStyleSheet) {
styleElement = createElement('style');
styleElement.textContent = themeStyleSheet + '\n' + Root.Runtime.resolveSourceURL(cssFile + '.theme');
diff --git a/front_end/ui/utils/inject-core-styles.js b/front_end/ui/utils/inject-core-styles.js
index 36a3b02..581c418 100644
--- a/front_end/ui/utils/inject-core-styles.js
+++ b/front_end/ui/utils/inject-core-styles.js
@@ -10,6 +10,6 @@
export function injectCoreStyles(root) {
appendStyle(root, 'ui/inspectorCommon.css');
appendStyle(root, 'ui/textButton.css');
- UI.themeSupport.injectHighlightStyleSheets(root);
- UI.themeSupport.injectCustomStyleSheets(root);
+ self.UI.themeSupport.injectHighlightStyleSheets(root);
+ self.UI.themeSupport.injectCustomStyleSheets(root);
}
