[DevTools] add simple usage events for internal logging (#24888)

* [DevTools] add simple events for internal logging

* fix lint

* fix lint

* better event name

* fix flow

* better way to fix flow

* combine 'select-element'

* use same event name for selecting element by inspecting

packages/react-devtools-shared/src/Logger.js

@@ -31,6 +31,15 @@ export type LogEvent =
       +duration_ms: number,
       +inspected_element_display_name: string | null,
       +inspected_element_number_of_hooks: number | null,
+    |}
+  | {|
+      +event_name: 'select-element',
+    |}
+  | {|
+      +event_name: 'inspect-element-button-clicked',
+    |}
+  | {|
+      +event_name: 'profiling-start',
     |};
 
 export type LogFunction = LogEvent => void | Promise<void>;

packages/react-devtools-shared/src/devtools/views/Components/Element.js

@@ -17,6 +17,7 @@ import {TreeDispatcherContext, TreeStateContext} from './TreeContext';
 import {SettingsContext} from '../Settings/SettingsContext';
 import {StoreContext} from '../context';
 import {useSubscription} from '../hooks';
+import {logEvent} from 'react-devtools-shared/src/Logger';
 
 import type {ItemData} from './Tree';
 import type {Element as ElementType} from './types';
@@ -76,6 +77,7 @@ export default function Element({data, index, style}: Props) {
 
   const handleClick = ({metaKey}) => {
     if (id !== null) {
+      logEvent({event_name: 'select-element'});
       dispatch({
         type: 'SELECT_ELEMENT_BY_ID',
         payload: metaKey ? null : id,

packages/react-devtools-shared/src/devtools/views/Components/InspectHostNodesToggle.js

@@ -12,6 +12,7 @@ import {useCallback, useContext, useEffect, useState} from 'react';
 import {BridgeContext} from '../context';
 import Toggle from '../Toggle';
 import ButtonIcon from '../ButtonIcon';
+import {logEvent} from 'react-devtools-shared/src/Logger';
 
 export default function InspectHostNodesToggle() {
   const [isInspecting, setIsInspecting] = useState(false);
@@ -22,6 +23,7 @@ export default function InspectHostNodesToggle() {
       setIsInspecting(isChecked);
 
       if (isChecked) {
+        logEvent({event_name: 'inspect-element-button-clicked'});
         bridge.send('startInspectingNative');
       } else {
         bridge.send('stopInspectingNative', false);

packages/react-devtools-shared/src/devtools/views/Components/InspectedElementView.js

@@ -33,6 +33,7 @@ import {
   storeAsGlobal as storeAsGlobalAPI,
 } from 'react-devtools-shared/src/backendAPI';
 import {enableStyleXFeatures} from 'react-devtools-feature-flags';
+import {logEvent} from 'react-devtools-shared/src/Logger';
 
 import styles from './InspectedElementView.css';
 
@@ -301,14 +302,13 @@ function OwnerView({
     clearHighlightNativeElement,
   } = useHighlightNativeElement();
 
-  const handleClick = useCallback(
-    () =>
-      dispatch({
-        type: 'SELECT_ELEMENT_BY_ID',
-        payload: id,
-      }),
-    [dispatch, id],
-  );
+  const handleClick = useCallback(() => {
+    logEvent({event_name: 'select-element'});
+    dispatch({
+      type: 'SELECT_ELEMENT_BY_ID',
+      payload: id,
+    });
+  }, [dispatch, id]);
 
   const onMouseEnter = () => highlightNativeElement(id);
 

packages/react-devtools-shared/src/devtools/views/Components/Tree.js

@@ -36,6 +36,7 @@ import {clearErrorsAndWarnings as clearErrorsAndWarningsAPI} from 'react-devtool
 import styles from './Tree.css';
 import ButtonIcon from '../ButtonIcon';
 import Button from '../Button';
+import {logEvent} from 'react-devtools-shared/src/Logger';
 
 // Never indent more than this number of pixels (even if we have the room).
 const DEFAULT_INDENTATION_SIZE = 12;
@@ -103,6 +104,7 @@ export default function Tree(props: Props) {
     function handleStopInspectingNative(didSelectNode) {
       if (didSelectNode && focusTargetRef.current !== null) {
         focusTargetRef.current.focus();
+        logEvent({event_name: 'select-element'});
       }
     }
     bridge.addListener('stopInspectingNative', handleStopInspectingNative);

packages/react-devtools-shared/src/devtools/views/Profiler/ProfilerContext.js

@@ -16,6 +16,7 @@ import {
   TreeStateContext,
 } from '../Components/TreeContext';
 import {StoreContext} from '../context';
+import {logEvent} from 'react-devtools-shared/src/Logger';
 
 import type {ProfilingDataFrontend} from './types';
 
@@ -191,10 +192,10 @@ function ProfilerContextController({children}: Props) {
     });
   }
 
-  const startProfiling = useCallback(
-    () => store.profilerStore.startProfiling(),
-    [store],
-  );
+  const startProfiling = useCallback(() => {
+    logEvent({event_name: 'profiling-start'});
+    store.profilerStore.startProfiling();
+  }, [store]);
   const stopProfiling = useCallback(() => store.profilerStore.stopProfiling(), [
     store,
   ]);