OCV: add support for high contrast toggling (#10377)

* add support for high contrast toggling with OCV

* change to the actual high contrast theme, remove todo comment

react-common/components/controls/Feedback/FeedbackEventListener.ts

@@ -48,10 +48,12 @@ type FeedbackResponsePayloadType = {
   data: FeedbackResponseDataType
 }
 
+const defaultTheme = "PublisherLightTheme";
+const highContrastTheme = "TeamsHighContrastV2";
 // for styling the feedback, we use this object. It is mostly used to change the colors.
 // we'll want to change this based on the target and whether high contrast is enabled
 let themeOptions: ocv.IThemeOptions = {
-    baseTheme: "PublisherLightTheme",
+    baseTheme: defaultTheme,
 }
 
 let initfeedbackOptions: ocv.IFeedbackInitOptions;
@@ -81,7 +83,6 @@ export const initFeedbackEventListener = (feedbackConfig: ocv.IFeedbackConfig, f
         themeOptions: themeOptions,
         // telemetry - will likely want this
     }
-
     FEEDBACK_FRAME_ID = frameId;
 }
 
@@ -126,20 +127,18 @@ const getIFrameAndSend = (payload: FeedbackResponsePayloadType) => {
         iFrameElement.contentWindow!.postMessage(payload, pxt.appTarget.appTheme.ocvFrameUrl);
     }
 }
-// TODO
-// haven't implemented yet with events, but this will be needed in order to update to high contrast
-// general changes need to be made as well use the correct theme. the windows ones were just the defaults.
-const sendUpdateTheme = () => {
+
+export const sendUpdateFeedbackTheme = (highContrastOn: boolean) => {
     let currentTheme = themeOptions.baseTheme;
-    if (currentTheme === 'WindowsDark') {
-        currentTheme = 'WindowsLight'
-    } else {
-        currentTheme = 'WindowsDark'
+    if (currentTheme === defaultTheme && highContrastOn) {
+        currentTheme = highContrastTheme;
+    } else if (currentTheme === highContrastTheme && !highContrastOn) {
+        currentTheme = defaultTheme;
     }
     const response: FeedbackResponsePayloadType = {
         event: 'OnFeedbackHostAppThemeChanged',
         data: {
-            baseTheme: currentTheme,
+            baseTheme: currentTheme
         },
     }
     themeOptions.baseTheme = currentTheme;

webapp/src/container.tsx

@@ -12,6 +12,7 @@ import IProjectView = pxt.editor.IProjectView;
 import ISettingsProps = pxt.editor.ISettingsProps;
 import UserInfo = pxt.editor.UserInfo;
 import SimState = pxt.editor.SimState;
+import { sendUpdateFeedbackTheme } from "../../react-common/components/controls/Feedback/FeedbackEventListener";
 
 // common menu items -- do not remove
 // lf("About")
@@ -301,6 +302,7 @@ export class SettingsMenu extends data.Component<SettingsMenuProps, SettingsMenu
         const isController = pxt.shell.isControllerMode();
         const disableFileAccessinMaciOs = targetTheme.disableFileAccessinMaciOs && (pxt.BrowserUtils.isIOS() || pxt.BrowserUtils.isMac())
         const disableFileAccessinAndroid = pxt.appTarget.appTheme.disableFileAccessinAndroid && pxt.BrowserUtils.isAndroid();
+        sendUpdateFeedbackTheme(highContrast);
 
         const headless = pxt.appTarget.simulator?.headless;
         const showHome = !targetTheme.lockedEditor && !isController && auth.hasIdentity();

webapp/src/core.ts

@@ -14,6 +14,7 @@ import { pushNotificationMessage } from "../../react-common/components/Notificat
 import Cloud = pxt.Cloud;
 import Util = pxt.Util;
 import { Milestones } from "./constants";
+import { sendUpdateFeedbackTheme } from "../../react-common/components/controls/Feedback/FeedbackEventListener";
 
 export type Component<S, T> = data.Component<S, T>;
 
@@ -338,6 +339,7 @@ export function toggleHighContrast() {
     setHighContrast(!getHighContrastOnce())
 }
 export async function setHighContrast(on: boolean) {
+    sendUpdateFeedbackTheme(on);
     await auth.setHighContrastPrefAsync(on);
 }
 

webapp/src/projects.tsx

@@ -16,6 +16,7 @@ import { fireClickOnEnter } from "./util";
 import IProjectView = pxt.editor.IProjectView;
 import ISettingsProps = pxt.editor.ISettingsProps;
 import UserInfo = pxt.editor.UserInfo;
+import { sendUpdateFeedbackTheme } from "../../react-common/components/controls/Feedback/FeedbackEventListener";
 
 
 // This Component overrides shouldComponentUpdate, be sure to update that if the state is updated
@@ -301,6 +302,7 @@ export class ProjectSettingsMenu extends data.Component<ProjectSettingsMenuProps
         const reportAbuse = pxt.appTarget.cloud && pxt.appTarget.cloud.sharing && pxt.appTarget.cloud.importing;
         const showDivider = targetTheme.selectLanguage || targetTheme.highContrast || githubUser;
         const showFeedbackOption = targetTheme.feedbackEnabled && targetTheme.ocvFrameUrl && targetTheme.ocvAppId;
+        sendUpdateFeedbackTheme(highContrast);
 
         return <sui.DropdownMenu role="menuitem" icon={'setting large'} title={lf("Settings")} className="item icon more-dropdown-menuitem" ref={ref => this.dropdown = ref}>
             {targetTheme.selectLanguage && <sui.Item icon='xicon globe' role="menuitem" text={lf("Language")} onClick={this.showLanguagePicker} />}