Fixes

developer-extension/package.json

@@ -7,6 +7,7 @@
     "dev": "webpack --mode development --watch"
   },
   "devDependencies": {
+    "@tabler/icons-react": "2.42.0",
     "@types/chrome": "0.0.251",
     "@types/react": "18.2.37",
     "@types/react-dom": "18.2.15",

developer-extension/src/common/constants.ts

@@ -26,4 +26,4 @@ export const enum PanelTabs {
 
 export const DEFAULT_PANEL_TAB = PanelTabs.Events
 
-export const SESSION_STORAGE_SETTINGS_KEY = '__ddBrowserSdkSettings'
+export const SESSION_STORAGE_SETTINGS_KEY = '__ddBrowserSdkExtensionSettings'

developer-extension/src/common/types.ts

@@ -40,3 +40,17 @@ export type SdkMessage =
         segment: BrowserSegmentMetadata
       }
     }
+
+export type EventCollectionStrategy = 'sdk' | 'requests'
+
+export interface Settings {
+  useDevBundles: boolean
+  injectDevBundles: boolean
+  useRumSlim: boolean
+  blockIntakeRequests: boolean
+  autoFlush: boolean
+  preserveEvents: boolean
+  eventCollectionStrategy: EventCollectionStrategy
+  rumConfigurationOverride: object | null
+  logsConfigurationOverride: object | null
+}

developer-extension/src/content-scripts/main.ts

@@ -1,3 +1,4 @@
+import type { Settings } from '../common/types'
 import { EventListeners } from '../common/eventListeners'
 import { DEV_LOGS_URL, DEV_RUM_URL, SESSION_STORAGE_SETTINGS_KEY } from '../common/constants'
 
@@ -12,16 +13,16 @@ declare global {
 type SdkPublicApi = { [key: string]: (...args: any[]) => unknown }
 
 function main() {
-  if (window.__ddBrowserSdkExtensionCallback) {
-    return
-  }
-
   sendEventsToExtension()
 
-  const stringSettings = sessionStorage.getItem(SESSION_STORAGE_SETTINGS_KEY)
-  const settings = stringSettings && JSON.parse(stringSettings)
+  const settings = getSettings()
 
-  if (settings) {
+  if (
+    settings &&
+    // Avoid instrumenting SDK global variables if the SDKs are already loaded.
+    // This happens when the page is loaded and then the devtools are opened.
+    noBrowserSdkLoaded()
+  ) {
     const ddRumGlobal = instrumentGlobal('DD_RUM')
     const ddLogsGlobal = instrumentGlobal('DD_LOGS')
 
@@ -55,6 +56,22 @@ function sendEventsToExtension() {
   }
 }
 
+function getSettings() {
+  try {
+    // sessionStorage access throws in sandboxed iframes
+    const stringSettings = sessionStorage.getItem(SESSION_STORAGE_SETTINGS_KEY)
+    // JSON.parse throws if the stringSettings is not a valid JSON
+    return JSON.parse(stringSettings || 'null') as Settings
+  } catch (error) {
+    // eslint-disable-next-line no-console
+    console.error('Error getting settings', error)
+  }
+}
+
+function noBrowserSdkLoaded() {
+  return !window.DD_RUM && !window.DD_LOGS
+}
+
 function injectDevBundle(url: string, global: GlobalInstrumentation) {
   loadSdkScriptFromURL(url)
   const devInstance = global.get()

developer-extension/src/panel/components/panel.tsx

@@ -5,9 +5,9 @@ import { datadogRum } from '@datadog/browser-rum'
 import { useEvents } from '../hooks/useEvents'
 import { useAutoFlushEvents } from '../hooks/useAutoFlushEvents'
 import { useNetworkRules } from '../hooks/useNetworkRules'
-import type { Settings } from '../hooks/useSettings'
 import { useSettings } from '../hooks/useSettings'
 import { DEFAULT_PANEL_TAB, PanelTabs } from '../../common/constants'
+import type { Settings } from '../../common/types'
 import { SettingsTab } from './tabs/settingsTab'
 import { InfosTab } from './tabs/infosTab'
 import { EventsTab, DEFAULT_COLUMNS } from './tabs/eventsTab'

developer-extension/src/panel/components/tabs/infosTab.tsx

@@ -1,6 +1,7 @@
-import { ActionIcon, Anchor, Button, Divider, Group, JsonInput, Space, Text } from '@mantine/core'
+import { ActionIcon, Anchor, Button, Divider, Group, JsonInput, Menu, Space, Text } from '@mantine/core'
 import type { ReactNode } from 'react'
 import React, { useEffect, useState } from 'react'
+import { IconPencil, IconPencilExclamation, IconX } from '@tabler/icons-react'
 import { evalInWindow } from '../../evalInWindow'
 import { useSdkInfos } from '../../hooks/useSdkInfos'
 import { Columns } from '../columns'
@@ -14,7 +15,7 @@ const logger = createLogger('infosTab')
 
 export function InfosTab() {
   const infos = useSdkInfos()
-  const [, setSetting] = useSettings()
+  const [settings, setSetting] = useSettings()
 
   if (!infos) {
     return null
@@ -76,6 +77,7 @@ export function InfosTab() {
                 onChange={(value) => {
                   setSetting('rumConfigurationOverride', value)
                 }}
+                isOverridden={!!settings.rumConfigurationOverride}
               />
               <Entry name="Internal context" value={infos.rum.internalContext} />
               <Entry name="Global context" value={infos.rum.globalContext} />
@@ -106,6 +108,7 @@ export function InfosTab() {
                 onChange={(value) => {
                   setSetting('logsConfigurationOverride', value)
                 }}
+                isOverridden={!!settings.logsConfigurationOverride}
               />
               <Entry name="Global context" value={infos.logs.globalContext} />
               <Entry name="User" value={infos.logs.user} />
@@ -137,7 +140,17 @@ function AppLink({
   )
 }
 
-function Entry({ name, value, onChange }: { name: string; value: any; onChange?: (value: object | null) => void }) {
+function Entry({
+  name,
+  value,
+  isOverridden = false,
+  onChange,
+}: {
+  name: string
+  value: any
+  isOverridden?: boolean
+  onChange?: (value: object | null) => void
+}) {
   const [edited, setEdited] = useState(false)
   const [newValue, setNewValue] = React.useState<string | null>()
 
@@ -154,6 +167,11 @@ function Entry({ name, value, onChange }: { name: string; value: any; onChange?:
     }
   }
 
+  const handleClearClick = () => {
+    onChange && onChange(null)
+    reloadPage()
+  }
+
   return (
     <Text component="div">
       {typeof value === 'string' ? (
@@ -162,34 +180,43 @@ function Entry({ name, value, onChange }: { name: string; value: any; onChange?:
         </>
       ) : value ? (
         <>
-          {name}
-          {onChange && (
-            <>
-              {!edited ? (
-                <ActionIcon
-                  style={{ display: 'inline-block' }}
-                  color="violet"
-                  size="xs"
-                  variant="transparent"
-                  aria-label="Edit"
-                  onClick={() => setEdited(true)}
-                >
-                  ✏️
-                </ActionIcon>
-              ) : (
-                <Button
-                  color="violet"
-                  variant="transparent"
-                  size="compact-xs"
-                  onClick={handleApplyClick}
-                  className="dd-privacy-allow"
-                >
-                  Apply
-                </Button>
-              )}
-            </>
-          )}
-          :
+          <div style={{ display: 'inline-flex' }}>
+            {name}
+            {onChange && (
+              <>
+                {!edited ? (
+                  <Menu shadow="md" width={200}>
+                    <Menu.Target>
+                      <ActionIcon variant="transparent" aria-label="Settings" size="xs">
+                        {isOverridden ? (
+                          <IconPencilExclamation style={{ width: '90%', height: '90%' }} stroke={1.5} color="orange" />
+                        ) : (
+                          <IconPencil style={{ width: '90%', height: '90%' }} stroke={1.5} />
+                        )}
+                      </ActionIcon>
+                    </Menu.Target>
+                    <Menu.Dropdown>
+                      <Menu.Item leftSection={<IconPencil size={14} />} onClick={() => setEdited(true)}>
+                        Edit
+                      </Menu.Item>
+                      {isOverridden && (
+                        <Menu.Item leftSection={<IconX size={14} />} onClick={() => handleClearClick()}>
+                          Clear
+                        </Menu.Item>
+                      )}
+                    </Menu.Dropdown>
+                  </Menu>
+                ) : (
+                  <>
+                    <Button variant="light" size="compact-xs" onClick={handleApplyClick} className="dd-privacy-allow">
+                      Apply
+                    </Button>
+                  </>
+                )}
+              </>
+            )}
+            :
+          </div>
           {!edited ? (
             <Json value={value} />
           ) : (

developer-extension/src/panel/components/tabs/settingsTab.tsx

@@ -2,9 +2,9 @@ import { Badge, Box, Checkbox, Code, Group, Select, Space, Text } from '@mantine
 import React from 'react'
 import { DevServerStatus, useDevServerStatus } from '../../hooks/useDevServerStatus'
 import { useSettings } from '../../hooks/useSettings'
-import type { EventCollectionStrategy } from '../../hooks/useEvents'
 import { Columns } from '../columns'
 import { TabBase } from '../tabBase'
+import type { EventCollectionStrategy } from '../../../common/types'
 import css from './settingsTab.module.css'
 
 export function SettingsTab() {

developer-extension/src/panel/hooks/useEvents/eventCollection.ts

@@ -1,12 +1,11 @@
+import type { EventCollectionStrategy } from '../../../common/types'
 import { INTAKE_DOMAINS } from '../../../common/constants'
 import { onBackgroundMessage } from '../../backgroundScriptConnection'
 import { isRumViewEvent, type SdkEvent } from '../../sdkEvent'
 import { FacetRegistry } from './facetRegistry'
 
 const MAXIMUM_LOGGED_EVENTS = 1000
 
-export type EventCollectionStrategy = 'sdk' | 'requests'
-
 export type EventCollection = ReturnType<typeof startEventCollection>
 
 export function startEventCollection(strategy: EventCollectionStrategy, onEventsChanged: (events: SdkEvent[]) => void) {

developer-extension/src/panel/hooks/useEvents/index.ts

@@ -1,4 +1,3 @@
 export { useEvents } from './useEvents'
 export { EventFilters, ExcludedFacetValues } from './eventFilters'
-export { EventCollectionStrategy } from './eventCollection'
 export { FacetRegistry } from './facetRegistry'

developer-extension/src/panel/hooks/useEvents/useEvents.ts

@@ -1,8 +1,9 @@
 import { useEffect, useRef, useState } from 'react'
 import type { SdkEvent } from '../../sdkEvent'
+import type { EventCollectionStrategy } from '../../../common/types'
 import type { EventFilters } from './eventFilters'
 import { DEFAULT_FILTERS, applyEventFilters } from './eventFilters'
-import type { EventCollection, EventCollectionStrategy } from './eventCollection'
+import type { EventCollection } from './eventCollection'
 import { startEventCollection } from './eventCollection'
 
 const MAXIMUM_DISPLAYED_EVENTS = 100

developer-extension/src/panel/hooks/useSettings.ts

@@ -3,22 +3,10 @@ import { SESSION_STORAGE_SETTINGS_KEY } from '../../common/constants'
 import { EventListeners } from '../../common/eventListeners'
 import { createLogger } from '../../common/logger'
 import { evalInWindow } from '../evalInWindow'
-import type { EventCollectionStrategy } from './useEvents'
+import type { Settings } from '../../common/types'
 
 const logger = createLogger('useSettings')
 
-export interface Settings {
-  useDevBundles: boolean
-  injectDevBundles: boolean
-  useRumSlim: boolean
-  blockIntakeRequests: boolean
-  autoFlush: boolean
-  preserveEvents: boolean
-  eventCollectionStrategy: EventCollectionStrategy
-  rumConfigurationOverride: object | null
-  logsConfigurationOverride: object | null
-}
-
 const DEFAULT_SETTINGS: Readonly<Settings> = {
   useDevBundles: false,
   injectDevBundles: false,

scripts/dev-server.js

@@ -23,7 +23,7 @@ app.use(redirectSuffixedFiles)
 app.listen(port, () => printLog(`Server listening on port ${port}.`))
 
 function redirectSuffixedFiles(req, res, next) {
-  const matches = /(.*)-(canary|staging|v5)\.js/.exec(req.url)
+  const matches = /(.*)-(canary|staging|v\d*)\.js/.exec(req.url)
   if (matches) {
     res.redirect(`${matches[1]}.js`)
   } else {

yarn.lock

@@ -464,6 +464,7 @@ __metadata:
     "@datadog/browser-rum": "workspace:*"
     "@mantine/core": 7.2.2
     "@mantine/hooks": 7.2.2
+    "@tabler/icons-react": 2.42.0
     "@types/chrome": 0.0.251
     "@types/react": 18.2.37
     "@types/react-dom": 18.2.15
@@ -1519,6 +1520,25 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@tabler/icons-react@npm:2.42.0":
+  version: 2.42.0
+  resolution: "@tabler/icons-react@npm:2.42.0"
+  dependencies:
+    "@tabler/icons": 2.42.0
+    prop-types: ^15.7.2
+  peerDependencies:
+    react: ^16.5.1 || ^17.0.0 || ^18.0.0
+  checksum: be4956ddfb9ba0165f815c57189444b4b6a03d7c527381dfcb017d9911f6ac4fd9166aa718d94593339e27e298646863e5f5e96e84e11cf69956413e072fc448
+  languageName: node
+  linkType: hard
+
+"@tabler/icons@npm:2.42.0":
+  version: 2.42.0
+  resolution: "@tabler/icons@npm:2.42.0"
+  checksum: 0330b5454f445cbf25f18ba3b2d6386c10b3e266feee14a6d5e3ed5a686987e3bb8c1d50eb2f181032c81a96b6c250d89e7247813934ce373adb10867e316578
+  languageName: node
+  linkType: hard
+
 "@tootallnate/once@npm:2":
   version: 2.0.0
   resolution: "@tootallnate/once@npm:2.0.0"