fix(devtools): Fixed bugs in HC, settings, data grid (#15914)

microsoft · Jun 19, 2023 · 54cc669 · 54cc669
1 parent 98ef1e0
commit 54cc669
Show file tree

Hide file tree

Showing 7 changed files with 121 additions and 76 deletions.
diff --git a/packages/tools/devtools/devtools-view/src/DevtoolsView.tsx b/packages/tools/devtools/devtools-view/src/DevtoolsView.tsx
@@ -5,7 +5,7 @@
 import React from "react";
 
 import { IStackItemStyles, IStackStyles, Stack } from "@fluentui/react";
-import { Button, FluentProvider, Tooltip, Theme } from "@fluentui/react-components";
+import { Button, FluentProvider, Tooltip } from "@fluentui/react-components";
 import { ArrowSync24Regular, Settings20Regular } from "@fluentui/react-icons";
 
 import {
@@ -32,7 +32,7 @@ import {
 } from "./components";
 import { initializeFluentUiIcons } from "./InitializeIcons";
 import { useMessageRelay } from "./MessageRelayContext";
-import { getFluentUIThemeToUse } from "./ThemeHelper";
+import { getFluentUIThemeToUse, ThemeContext } from "./ThemeHelper";
 
 const loggingContext = "INLINE(DevtoolsView)";
 
@@ -156,7 +156,7 @@ const menuStyles: IStackItemStyles = {
 		"flexDirection": "column",
 		"borderRight": `2px solid`,
 		"minWidth": "150px",
-		"maxHeight": "350px",
+		"height": "350px",
 		// Ensures the last div/component is anchored to the bottom.
 		"> :last-child": {
 			marginTop: "auto",
@@ -234,34 +234,34 @@ export function DevtoolsView(): React.ReactElement {
 	}
 
 	return (
-		<FluentProvider theme={selectedTheme} style={{ height: "100%" }}>
-			{supportedFeatures === undefined ? (
-				queryTimedOut ? (
-					<>
-						<div>Devtools not found. Timeout exceeded.</div>
-						<Tooltip content="Retry searching for Devtools" relationship="description">
-							<Button onClick={retryQuery}>Search again</Button>
-						</Tooltip>
-					</>
+		<ThemeContext.Provider value={{ themeInfo: selectedTheme, setTheme: setSelectedTheme }}>
+			<FluentProvider theme={selectedTheme.theme} style={{ height: "100%" }}>
+				{supportedFeatures === undefined ? (
+					queryTimedOut ? (
+						<>
+							<div>Devtools not found. Timeout exceeded.</div>
+							<Tooltip
+								content="Retry searching for Devtools"
+								relationship="description"
+							>
+								<Button onClick={retryQuery}>Search again</Button>
+							</Tooltip>
+						</>
+					) : (
+						<>
+							<Waiting />
+							<_DevtoolsView supportedFeatures={{}} />
+						</>
+					)
 				) : (
-					<>
-						<Waiting />
-						<_DevtoolsView setTheme={setSelectedTheme} supportedFeatures={{}} />
-					</>
-				)
-			) : (
-				<_DevtoolsView setTheme={setSelectedTheme} supportedFeatures={supportedFeatures} />
-			)}
-		</FluentProvider>
+					<_DevtoolsView supportedFeatures={supportedFeatures} />
+				)}
+			</FluentProvider>
+		</ThemeContext.Provider>
 	);
 }
 
 interface _DevtoolsViewProps {
-	/**
-	 * Sets the theme of the DevTools app (light, dark, high contrast)
-	 */
-	setTheme(newTheme: Theme): void;
-
 	/**
 	 * Set of features supported by the Devtools.
 	 */
@@ -272,7 +272,7 @@ interface _DevtoolsViewProps {
  * Internal {@link DevtoolsView}, displayed once the supported feature set has been acquired from the webpage.
  */
 function _DevtoolsView(props: _DevtoolsViewProps): React.ReactElement {
-	const { supportedFeatures, setTheme } = props;
+	const { supportedFeatures } = props;
 
 	const [containers, setContainers] = React.useState<ContainerKey[] | undefined>();
 	const [menuSelection, setMenuSelection] = React.useState<MenuSelection | undefined>();
@@ -317,7 +317,7 @@ function _DevtoolsView(props: _DevtoolsViewProps): React.ReactElement {
 				containers={containers}
 				supportedFeatures={supportedFeatures}
 			/>
-			<View menuSelection={menuSelection} containers={containers} setTheme={setTheme} />
+			<View menuSelection={menuSelection} containers={containers} />
 		</Stack>
 	);
 }
@@ -337,18 +337,13 @@ interface ViewProps {
 	 * The list of Containers, if any are registered with the webpage's Devtools instance.
 	 */
 	containers?: ContainerKey[];
-
-	/**
-	 * Sets the theme of the DevTools app (light, dark, high contrast)
-	 */
-	setTheme(newTheme: Theme): void;
 }
 
 /**
  * View body component used by {@link DevtoolsView}.
  */
 function View(props: ViewProps): React.ReactElement {
-	const { menuSelection, containers, setTheme } = props;
+	const { menuSelection, containers } = props;
 
 	let view: React.ReactElement;
 	switch (menuSelection?.type) {
@@ -368,7 +363,7 @@ function View(props: ViewProps): React.ReactElement {
 				);
 			break;
 		case "settingsMenuSelection":
-			view = <SettingsView setTheme={setTheme} />;
+			view = <SettingsView />;
 			break;
 		case "homeMenuSelection":
 			view = <LandingView />;

diff --git a/packages/tools/devtools/devtools-view/src/ThemeHelper.ts b/packages/tools/devtools/devtools-view/src/ThemeHelper.ts
@@ -2,30 +2,62 @@
  * Copyright (c) Microsoft Corporation and contributors. All rights reserved.
  * Licensed under the MIT License.
  */
+import React from "react";
 import {
 	webDarkTheme,
 	webLightTheme,
 	teamsHighContrastTheme,
 	Theme,
 } from "@fluentui/react-components";
 
+teamsHighContrastTheme.colorSubtleBackgroundHover = "#1aebff";
+teamsHighContrastTheme.colorBrandBackground2 = "#1aebff";
+teamsHighContrastTheme.colorCompoundBrandForeground1 = "#000";
+
 /**
  * Utility function to get the current Fluent UI theme to use.
  * @returns Theme object of FluentUI to be used for dev tool
  */
-export function getFluentUIThemeToUse(): Theme {
-	let defaultTheme = webLightTheme;
+export function getFluentUIThemeToUse(): { name: string; theme: Theme } {
+	let defaultTheme = {
+		name: "light",
+		theme: webLightTheme,
+	};
 
 	// API reference: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme
 	if (window.matchMedia?.("(prefers-color-scheme: dark)").matches) {
-		defaultTheme = webDarkTheme;
+		defaultTheme = {
+			name: "dark",
+			theme: webDarkTheme,
+		};
 	}
 
 	// Add a condition to check for high contrast mode
 	// API reference: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/forced-colors
 	if (window.matchMedia?.("(forced-colors: active)").matches) {
-		defaultTheme = teamsHighContrastTheme;
+		defaultTheme = {
+			name: "highcontrast",
+			theme: teamsHighContrastTheme,
+		};
 	}
 
 	return defaultTheme;
 }
+
+// Create a type for the context value
+// eslint-disable-next-line @typescript-eslint/consistent-type-definitions
+type ThemeContextValue = {
+	themeInfo: { name: string; theme: Theme };
+	setTheme: React.Dispatch<React.SetStateAction<{ name: string; theme: Theme }>>;
+};
+
+/**
+ * Context for accessing a shared theme for communicating with the webpage.
+ * @remarks setTheme is initially defined with a no-operation function as a placeholder
+ * because we don't currently have a setter. The placeholder fills ThemeContext
+ * until The React setter is truly defined in DevToolsView.
+ */
+export const ThemeContext = React.createContext<ThemeContextValue>({
+	themeInfo: getFluentUIThemeToUse(),
+	setTheme: () => {},
+});
diff --git a/packages/tools/devtools/devtools-view/src/components/AudienceHistoryTable.tsx b/packages/tools/devtools/devtools-view/src/components/AudienceHistoryTable.tsx
@@ -86,7 +86,7 @@ export function AudienceHistoryTable(props: AudienceHistoryTableProps): React.Re
 							backgroundColor:
 								item.changeKind === "joined"
 									? tokens.colorPaletteRoyalBlueBackground2
-									: tokens.colorPaletteRedBorder1,
+									: tokens.colorPaletteRedBackground2,
 						}}
 					>
 						<TableCell>

diff --git a/packages/tools/devtools/devtools-view/src/components/AudienceStateTable.tsx b/packages/tools/devtools/devtools-view/src/components/AudienceStateTable.tsx
@@ -101,7 +101,7 @@ export function AudienceStateTable(props: AudienceStateTableProps): React.ReactE
 							key={itemIndex}
 							style={{
 								backgroundColor: isCurrentUser
-									? tokens.colorPaletteGreenBorder1
+									? tokens.colorPaletteGreenBackground2
 									: "",
 							}}
 						>

diff --git a/packages/tools/devtools/devtools-view/src/components/Menu.tsx b/packages/tools/devtools/devtools-view/src/components/Menu.tsx
@@ -74,11 +74,15 @@ function getMenuSectionItemStyles(isActive: boolean): IStackStyles {
 		root: {
 			"paddingLeft": "20px",
 			"cursor": "pointer",
+			"color": isActive
+				? tokens.colorNeutralForeground1Selected
+				: tokens.colorNeutralForeground1,
 			"background": isActive
 				? tokens.colorNeutralBackground1Selected
 				: tokens.colorNeutralBackground1,
 			"&:hover": {
 				background: tokens.colorNeutralBackground1Hover,
+				color: tokens.colorNeutralForeground1Hover,
 			},
 		},
 	};

diff --git a/packages/tools/devtools/devtools-view/src/components/SettingsView.tsx b/packages/tools/devtools/devtools-view/src/components/SettingsView.tsx
@@ -8,11 +8,10 @@ import {
 	Dropdown,
 	Option,
 	teamsHighContrastTheme,
-	Theme,
 	webDarkTheme,
 	webLightTheme,
 } from "@fluentui/react-components";
-
+import { ThemeContext } from "../ThemeHelper";
 /**
  * An enum with options for the DevTools themes.
  */
@@ -21,17 +20,12 @@ export enum ThemeOption {
 	Dark = "Dark",
 	HighContrast = "High Contrast",
 }
-interface SettingsProps {
-	/**
-	 * Sets the theme of the DevTools app (light, dark, high contrast)
-	 */
-	setTheme(newTheme: Theme): void;
-}
+
 /**
  * Settings page for the debugger
  */
-export function SettingsView(props: SettingsProps): React.ReactElement {
-	const { setTheme } = props;
+export function SettingsView(): React.ReactElement {
+	const { setTheme } = React.useContext(ThemeContext) ?? {};
 	function handleThemeChange(
 		event,
 		option: {
@@ -42,16 +36,28 @@ export function SettingsView(props: SettingsProps): React.ReactElement {
 	): void {
 		switch (option.optionValue) {
 			case ThemeOption.Light:
-				setTheme(webLightTheme);
+				setTheme({
+					name: "light",
+					theme: webLightTheme,
+				});
 				break;
 			case ThemeOption.Dark:
-				setTheme(webDarkTheme);
+				setTheme({
+					name: "dark",
+					theme: webDarkTheme,
+				});
 				break;
 			case ThemeOption.HighContrast:
-				setTheme(teamsHighContrastTheme);
+				setTheme({
+					name: "highContrast",
+					theme: teamsHighContrastTheme,
+				});
 				break;
 			default:
-				setTheme(webDarkTheme);
+				setTheme({
+					name: "dark",
+					theme: webDarkTheme,
+				});
 				break;
 		}
 	}
@@ -66,7 +72,10 @@ export function SettingsView(props: SettingsProps): React.ReactElement {
 			<label style={{ fontSize: "12px" }}>Select theme</label>
 			<Dropdown
 				placeholder="Theme"
-				style={{ minWidth: "150px", fontWeight: "bold" }}
+				style={{
+					minWidth: "150px",
+					fontWeight: "bold",
+				}}
 				onOptionSelect={handleThemeChange}
 			>
 				<Option value={ThemeOption.Light}>Light</Option>