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/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;
+ }
+}