Function SettingsTab

packages/devtools/src/tabs/settings-tab.tsx:24–200

()

export const SettingsTab = () => {
  const { setSettings, settings } = createDevtoolsSettings()
  const styles = createStyles()
  const modifiers: Array<KeyboardKey> = ['CtrlOrMeta', 'Alt', 'Shift']

  return (
    <div
      data-testid="settings-workspace"
      data-tsd-surface
      style={{ height: '100%', 'min-height': '0px' }}
    >
      <MainPanel withPadding>
        <Section>
          <SectionTitle>
            <SectionIcon>
              <SettingsCog />
            </SectionIcon>
            General
          </SectionTitle>
          <SectionDescription>
            Configure general behavior of the devtools panel.
          </SectionDescription>
          <div class={styles().settingsGroup}>
            <Checkbox
              label="Default open"
              description="Automatically open the devtools panel when the page loads"
              onChange={() =>
                setSettings({ defaultOpen: !settings().defaultOpen })
              }
              checked={settings().defaultOpen}
            />
            <Checkbox
              label="Hide trigger until hovered"
              description="Keep the devtools trigger button hidden until you hover over its area"
              onChange={() =>
                setSettings({ hideUntilHover: !settings().hideUntilHover })
              }
              checked={settings().hideUntilHover}
            />
            <Checkbox
              label="Completely hide trigger"
              description="Completely removes the trigger from the DOM (you can still open it with the hotkey)"
              onChange={() =>
                setSettings({ triggerHidden: !settings().triggerHidden })
              }
              checked={settings().triggerHidden}
            />
            <Select
              label="Theme"
              options={[
                { label: 'Dark', value: 'dark' },
                { label: 'Light', value: 'light' },
              ]}
              value={settings().theme}
              onChange={(theme) => setSettings({ theme })}
            />
          </div>
        </Section>