fix(cc-dark-theme): adapt new report dialog
The new report dialog appeared with a light theme and its background
made some flashes.
This CL fixes the theme mismatch by forcing the dialog theme to match
the one set in the CC, and it also fixes the background flashes.
Fixed: twpowertools:197
Change-Id: Ia3aa4d179a8f08584a7fbfa66d58156779254e57
diff --git a/src/contentScripts/communityConsole/darkTheme/darkTheme.js b/src/contentScripts/communityConsole/darkTheme/darkTheme.js
index 7bd4ba6..c1888ea 100644
--- a/src/contentScripts/communityConsole/darkTheme/darkTheme.js
+++ b/src/contentScripts/communityConsole/darkTheme/darkTheme.js
@@ -3,6 +3,11 @@
import {createPlainTooltip} from '../../../common/tooltip.js';
import {createExtBadge} from '../utils/common.js';
+export const kColorThemeMode = Object.freeze({
+ Auto: Symbol('auto'),
+ Light: Symbol('light'),
+ Dark: Symbol('dark'),
+});
export function injectDarkThemeButton(rightControl, previousDarkThemeOption) {
var darkThemeSwitch = document.createElement('material-button');
@@ -45,12 +50,31 @@
new MDCTooltip(badgeTooltip);
}
+export function getCurrentColorTheme(options) {
+ if (!options.ccdarktheme) {
+ return kColorThemeMode.Light;
+ } else {
+ if (options.ccdarktheme_mode == 'switch') {
+ return options.ccdarktheme_switch_status ? kColorThemeMode.Dark :
+ kColorThemeMode.Light;
+ } else {
+ return kColorThemeMode.Auto;
+ }
+ }
+}
+
export function isDarkThemeOn(options) {
- if (!options.ccdarktheme) return false;
+ const activeColorTheme = getCurrentColorTheme(options);
- if (options.ccdarktheme_mode == 'switch')
- return options.ccdarktheme_switch_status;
+ switch (activeColorTheme) {
+ case kColorThemeMode.Auto:
+ return window.matchMedia &&
+ window.matchMedia('(prefers-color-scheme: dark)').matches;
- return window.matchMedia &&
- window.matchMedia('(prefers-color-scheme: dark)').matches;
+ case kColorThemeMode.Light:
+ return false;
+
+ case kColorThemeMode.Dark:
+ return true;
+ }
}
diff --git a/src/contentScripts/communityConsole/darkTheme/reportDialog.js b/src/contentScripts/communityConsole/darkTheme/reportDialog.js
new file mode 100644
index 0000000..d7c84a8
--- /dev/null
+++ b/src/contentScripts/communityConsole/darkTheme/reportDialog.js
@@ -0,0 +1,31 @@
+import {getCurrentColorTheme, kColorThemeMode} from './darkTheme';
+
+const kReportingWidgetThemes = {
+ [kColorThemeMode.Auto]: '0',
+ [kColorThemeMode.Light]: '1',
+ [kColorThemeMode.Dark]: '2',
+};
+
+export default class ReportDialogColorThemeFix {
+ constructor(options) {
+ this.optionsAtPageLoad = options;
+ }
+
+ fixThemeIfReportDialogIframeAndApplicable(iframe) {
+ if (!this.isReportDialogIframe(iframe)) return;
+
+ const currentColorTheme = getCurrentColorTheme(this.optionsAtPageLoad);
+
+ // By default the report dialog is added with the light theme
+ if (currentColorTheme === kColorThemeMode.Light) return;
+
+ console.debug('[reportDialogColorThemeFix] Fixing report dialog iframe');
+ let url = new URL(iframe.src);
+ url.searchParams.set('theme', kReportingWidgetThemes[currentColorTheme]);
+ iframe.src = url.href;
+ }
+
+ isReportDialogIframe(iframe) {
+ return iframe.src?.includes?.('reportingwidget') ?? false;
+ }
+}