All files / src/components/debugger DebuggerBreakpointsPane.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import React, { useCallback, useEffect } from "react";
import { getSettings } from "store/features/settings/settingsState";
import settingsActions from "store/features/settings/settingsActions";
import { useAppDispatch, useAppSelector } from "store/hooks";
import styled from "styled-components";
import { SplitPaneHeader } from "ui/splitpane/SplitPaneHeader";
import { CheckboxField } from "ui/form/CheckboxField";
import l10n from "shared/lib/lang/l10n";
import API from "renderer/lib/api";
import DebuggerBreakpointItem from "components/debugger/DebuggerBreakpointItem";
 
const Content = styled.div`
  background: ${(props) => props.theme.colors.scripting.form.background};
  padding: 10px;
 
  & > div ~ div {
    margin-top: 5px;
  }
`;
 
const BreakpointsWrapper = styled.div`
  border-top: 1px solid ${(props) => props.theme.colors.sidebar.border};
`;
 
const DebuggerBreakpointsPane = () => {
  const dispatch = useAppDispatch();
  const isCollapsed = useAppSelector((state) =>
    getSettings(state).debuggerCollapsedPanes.includes("breakpoints")
  );
  const pauseOnScriptChanged = useAppSelector(
    (state) => getSettings(state).debuggerPauseOnScriptChanged
  );
  const pauseOnWatchedVariableChanged = useAppSelector(
    (state) => getSettings(state).debuggerPauseOnWatchedVariableChanged
  );
  const breakpoints = useAppSelector(
    (state) => getSettings(state).debuggerBreakpoints
  );
 
  const onToggleCollapsed = useCallback(() => {
    dispatch(settingsActions.toggleDebuggerPaneCollapsed("breakpoints"));
  }, [dispatch]);
 
  const onTogglePauseOnScriptChange = useCallback(() => {
    API.debugger.setPauseOnScriptChanged(!pauseOnScriptChanged);
    dispatch(
      settingsActions.editSettings({
        debuggerPauseOnScriptChanged: !pauseOnScriptChanged,
      })
    );
  }, [dispatch, pauseOnScriptChanged]);
 
  const onTogglePauseOnWatchedVariableChange = useCallback(() => {
    API.debugger.setPauseOnWatchVariableChanged(!pauseOnWatchedVariableChanged);
    dispatch(
      settingsActions.editSettings({
        debuggerPauseOnWatchedVariableChanged: !pauseOnWatchedVariableChanged,
      })
    );
  }, [dispatch, pauseOnWatchedVariableChanged]);
 
  useEffect(() => {
    API.debugger.setBreakpoints(breakpoints.map((b) => b.scriptEventId));
  }, [breakpoints]);
 
  return (
    <>
      <SplitPaneHeader
        onToggle={onToggleCollapsed}
        collapsed={isCollapsed}
        variant="secondary"
      >
        Breakpoints
      </SplitPaneHeader>
      {!isCollapsed && (
        <Content>
          <CheckboxField
            name="pauseOnScriptChanged"
            label={l10n("FIELD_PAUSE_ON_SCRIPT_CHANGE")}
            checked={pauseOnScriptChanged}
            onChange={onTogglePauseOnScriptChange}
          />
          <CheckboxField
            name="pauseOnWatchedVariableChanged"
            label={l10n("FIELD_PAUSE_ON_WATCHED_VAR_CHANGE")}
            checked={pauseOnWatchedVariableChanged}
            onChange={onTogglePauseOnWatchedVariableChange}
          />
        </Content>
      )}
      {!isCollapsed && (
        <BreakpointsWrapper>
          {breakpoints.map((breakpoint) => (
            <DebuggerBreakpointItem
              key={breakpoint.scriptEventId}
              breakpoint={breakpoint}
            />
          ))}
        </BreakpointsWrapper>
      )}
    </>
  );
};
 
export default DebuggerBreakpointsPane;