react-inspector/src/options.html at 94bddf5e2d1d1abd04637dbee4e5924a05f11fce · hand-dot/react-inspector · GitHub

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
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
      :root{
        --darkBlue:#2c364b;
        --action-bg-hover: #c9e0ff;
        --primary-action: #0b69cb;
        --primary-action-hover: #0b5198;
      }

      body {
        background: var(--darkBlue);
        padding: 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
      }

      label{
        width:100%;
        max-width: 500px;
        margin-bottom: 2px;
        font-weight: 700;
        font-size: 14px;
      }

      input[type="text"] {
        padding: 7px;
        width:100%;
        border-color: #afafaf;
        outline:none;
        border-width: 1px;
        border-radius: 4px;
        border-style: solid;
        transition: box-shadow ease-out 100ms;
      }

      input:hover {
        box-shadow: 0 3px 8px rgba(0,0,0,.1);
        outline:none;
      }

      input:focus{
        border-color: var(--primary-action);
        box-shadow: 0 3px 8px rgba(0,0,0,.2);
      }

      select {
        margin-top: 10px;
        padding: 4px;
      }

      h1 {
        color: #3d3d3d;
      }

      .container {
        background: #ffffff;
        padding: 20px;
        border-radius: 5px;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: auto;
        min-width: 700px;
      }

      button {
        border: none;
        outline: none;
        padding: 10px 15px;
        font-weight: 600;
        border-radius: 5px;
        background: none;
        cursor: pointer;
        color: #0b69cb;
      }

      button:hover{
        background: var(--action-bg-hover);
      }

      button.primary{
        background: var(--primary-action);
        color:white;
      }

      button.primary:hover{
        background: var(--primary-action-hover);
        color:white;
      }

      #status{
        margin-top: 20px;
        font-size: 14px;
      }

    </style>
  </head>
  <body class="bg-blue-900">
    <div class="container">
      <img src="../icon/icon128.png" alt="logo">
      <h1>React Inspector Options</h1>
      <div>
        <button id="restore-default">VS Code (default)</button>
        <button id="webstorm">Webstorm / IntelliJ</button>
      </div>
      <hr>
      <label>
        Open in Editor URL:
        <input
          id="open-in-editor-url"
          type="text"
          placeholder="vscode://file/{path}:{line}:{column}"
        />
      </label>
      <label>
        Method
        <select id="open-in-editor-method">
          <option value="url">Open in URL</option>
          <option value="fetch">Call with fetch</option>
        </select>
      </label>
      <label style="margin-top: 15px;">
        Path Mappings (for Docker/remote paths):
        <textarea
          id="path-mappings"
          placeholder="/home/node/frontend|/Users/you/project"
          style="width: 100%; height: 80px; padding: 7px; border: 1px solid #afafaf; border-radius: 4px; font-family: monospace; resize: vertical;"
        ></textarea>
        <small style="display: block; margin-top: 5px; color: #666;">Format: /container/path|/local/path (one per line)</small>
      </label>
      <button class="primary" id="save" style="margin-top:1rem">Save</button>
      <div id="status"></div>
    </div>
    <script type="module" src="./options.ts"></script>
  </body>
</html>