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/ccDarkTheme/components/dialogs/_index.scss b/src/ccDarkTheme/components/dialogs/_index.scss
index 59f8798..3ec7a09 100644
--- a/src/ccDarkTheme/components/dialogs/_index.scss
+++ b/src/ccDarkTheme/components/dialogs/_index.scss
@@ -2,3 +2,4 @@
@forward 'private-message';
@forward 'keyboard-shortcuts';
@forward 'bug-case-links';
+@forward 'report';
diff --git a/src/ccDarkTheme/components/dialogs/_report.scss b/src/ccDarkTheme/components/dialogs/_report.scss
new file mode 100644
index 0000000..8c6bb46
--- /dev/null
+++ b/src/ccDarkTheme/components/dialogs/_report.scss
@@ -0,0 +1,3 @@
+iframe[src*="reportingwidget"] {
+ color-scheme: auto;
+}
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;
+ }
+}
diff --git a/src/contentScripts/communityConsole/main.js b/src/contentScripts/communityConsole/main.js
index 4381b86..0200394 100644
--- a/src/contentScripts/communityConsole/main.js
+++ b/src/contentScripts/communityConsole/main.js
@@ -6,6 +6,7 @@
import AvatarsHandler from './avatars.js';
import {batchLock} from './batchLock.js';
import {injectDarkThemeButton, isDarkThemeOn} from './darkTheme/darkTheme.js';
+import ReportDialogColorThemeFix from './darkTheme/reportDialog.js';
import {unifiedProfilesFix} from './darkTheme/unifiedProfiles.js';
// #!if ['chromium', 'chromium_mv3'].includes(browser_target)
import {applyDragAndDropFixIfEnabled} from './dragAndDropFix.js';
@@ -17,7 +18,7 @@
import Workflows from './workflows/workflows.js';
var mutationObserver, options, avatars, infiniteScroll, workflows,
- threadToolbar, flattenThreads;
+ threadToolbar, flattenThreads, reportDialogColorThemeFix;
const watchedNodesSelectors = [
// App container (used to set up the intersection observer and inject the dark
@@ -55,7 +56,7 @@
// Thread list (used for the autorefresh feature)
'ec-thread-list',
- // Unified profile iframe
+ // Unified profile iframe and report dialog iframe
'iframe',
// Canned response tags (for the "import CR" popup for the workflows feature)
@@ -178,10 +179,14 @@
window.TWPTAutoRefresh.setUp();
}
- // Redirect unified profile iframe to dark version if applicable
- if (node.tagName == 'IFRAME' && isDarkThemeOn(options) &&
- unifiedProfilesFix.checkIframe(node)) {
- unifiedProfilesFix.fixIframe(node);
+ if (node.tagName == 'IFRAME') {
+ // Redirect unified profile iframe to dark version if applicable
+ if (isDarkThemeOn(options) && unifiedProfilesFix.checkIframe(node)) {
+ unifiedProfilesFix.fixIframe(node);
+ }
+
+ // Set report dialog iframe's theme to the appropriate theme
+ reportDialogColorThemeFix.fixThemeIfReportDialogIframeAndApplicable(node);
}
// Add the "import" button in the canned responses view for the workflows
@@ -283,6 +288,7 @@
workflows = new Workflows();
threadToolbar = new ThreadToolbar();
flattenThreads = new FlattenThreads();
+ reportDialogColorThemeFix = new ReportDialogColorThemeFix(options);
// autoRefresh, extraInfo, threadPageDesignWarning and workflowsImport are
// initialized in start.js