Disable highlighting if ad unit is available.

GoogleChromeLabs · Jan 20, 2025 · 25fac8c · 25fac8c
1 parent 0dd8245
commit 25fac8c
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 2 deletions.
diff --git a/packages/design-system/src/components/inspectButton/index.tsx b/packages/design-system/src/components/inspectButton/index.tsx
@@ -26,12 +26,14 @@ import { InspectActiveIcon, InspectIcon, InspectWhiteIcon } from '../../icons';
 
 interface InspectButtonProps {
   isInspecting: boolean;
+  selectedAdUnit: string | null;
   setIsInspecting: React.Dispatch<React.SetStateAction<boolean>>;
   isTabFocused: boolean;
 }
 
 const InspectButton = ({
   isInspecting,
+  selectedAdUnit,
   setIsInspecting,
   isTabFocused,
 }: InspectButtonProps) => {
@@ -44,7 +46,11 @@ const InspectButton = ({
         setIsInspecting(!isInspecting);
       }}
     >
-      {isInspecting ? <InspectActiveIcon /> : <InactiveInspectIcon />}
+      {isInspecting && !selectedAdUnit ? (
+        <InspectActiveIcon />
+      ) : (
+        <InactiveInspectIcon />
+      )}
     </span>
   );
 };

diff --git a/packages/extension/src/view/devtools/components/layout.tsx b/packages/extension/src/view/devtools/components/layout.tsx
@@ -44,7 +44,11 @@ import classNames from 'classnames';
  */
 import Cookies from './cookies';
 import useFrameOverlay from '../hooks/useFrameOverlay';
-import { useCookie, useSettings } from '../stateProviders';
+import {
+  useCookie,
+  useProtectedAudience,
+  useSettings,
+} from '../stateProviders';
 import { getCurrentTabId } from '../../../utils/getCurrentTabId';
 
 interface LayoutProps {
@@ -55,6 +59,10 @@ const Layout = ({ setSidebarData }: LayoutProps) => {
   const [sidebarWidth, setSidebarWidth] = useState(200);
   const mainRef = useRef<HTMLElement>(null);
 
+  const { selectedAdUnit } = useProtectedAudience(({ state }) => ({
+    selectedAdUnit: state.selectedAdUnit,
+  }));
+
   const { settingsChanged, handleSettingsChange } = useSettings(
     ({ state, actions }) => ({
       settingsChanged: state.settingsChanged,
@@ -146,6 +154,7 @@ const Layout = ({ setSidebarData }: LayoutProps) => {
           Element: InspectButton,
           props: {
             isInspecting,
+            selectedAdUnit,
             setIsInspecting,
             isTabFocused:
               isSidebarFocused && isKeySelected(SIDEBAR_ITEMS_KEYS.COOKIES),
@@ -158,6 +167,7 @@ const Layout = ({ setSidebarData }: LayoutProps) => {
       return data;
     });
   }, [
+    selectedAdUnit,
     canStartInspecting,
     frameHasCookies,
     isInspecting,