33
33
< h1 class ="h5 my-2 ">
34
34
< a class ="text-decoration-none " href ="/ ">
35
35
< span class ="fab fa-swift fa-lg text-primary "> </ span > < span class ="ms-2 me-1 text-dark "> Swift Regex</ span >
36
- < span class ="text-muted me-1 "> β</ span >
37
36
</ a >
38
37
</ h1 >
39
38
</ div >
@@ -145,6 +144,7 @@ <h1 class="h5 my-2">
145
144
</ div >
146
145
< div class ="col align-self-center ">
147
146
< div class ="text-end mt-2 ">
147
+ < button id ="debugger-button " data-bs-toggle ="modal " data-bs-target ="#debugger-modal "> Debug</ button >
148
148
< span id ="match-count " class ="text-bg-light border px-3 py-1 "> no match</ span >
149
149
</ div >
150
150
</ div >
@@ -163,6 +163,80 @@ <h1 class="h5 my-2">
163
163
</ div >
164
164
</ div >
165
165
166
+ < div class ="modal fade " id ="debugger-modal " tabindex ="-1 " aria-labelledby ="debugger-modal-title " aria-hidden ="true ">
167
+ < div class ="modal-dialog modal-dialog-scrollable modal-xl ">
168
+ < div class ="modal-content ">
169
+ < div class ="modal-header ">
170
+ < h1 class ="modal-title fs-5 " id ="debugger-modal-title "> Regex Debugger</ h1 >
171
+ < button type ="button " class ="btn-close " data-bs-dismiss ="modal " aria-label ="Close "> </ button >
172
+ </ div >
173
+ < div class ="modal-body ">
174
+ < div class ="d-flex ">
175
+ < div class ="me-4 " style ="max-width: 40%; ">
176
+ < div style ="font-weight: 600; "> Metrics</ div >
177
+ < div class ="border my-2 " style ="font-size: 90%; ">
178
+ < table class ="table table-borderless table-sm my-0 ">
179
+ < thead >
180
+ < tr >
181
+ < th > Cycle Count</ th >
182
+ < th > Resets</ th >
183
+ < th > Backtracks</ th >
184
+ </ tr >
185
+ < tbody >
186
+ < tr class ="font-monospace ">
187
+ < td id ="debugger-total-cycle-count "> 0</ td >
188
+ < td id ="debugger-resets "> 0</ td >
189
+ < td id ="debugger-backtracks "> 0</ td >
190
+ </ tr >
191
+ </ tbody >
192
+ </ table >
193
+ </ div >
194
+
195
+ < div style ="overflow: auto; ">
196
+ < div class ="my-2 " style ="font-weight: 600; "> Instructions</ div >
197
+ < div class ="my-2 " style ="font-size: 90%; ">
198
+ < table class ="border table table-borderless table-sm font-monospace ">
199
+ < tbody id ="debugger-instructions ">
200
+ </ tbody >
201
+ </ table >
202
+ </ div >
203
+ </ div >
204
+ </ div >
205
+
206
+ < div class ="flex-grow-1 ">
207
+ < label for ="debugger-step-range " class ="form-label " style ="font-weight: 600; "> Match Steps</ label >
208
+ < input id ="debugger-step-range " type ="range " class ="form-range " value ="1 " min ="1 " max ="100 ">
209
+ < p class ="mb-0 " style ="text-align: center ">
210
+ < button id ="debugger-go-start " class ="btn btn-sm btn-outline-secondary rounded-circle button-circle ">
211
+ < i class ="fa-solid fa-backward-step fa-lg "> </ i >
212
+ </ button >
213
+ < button id ="debugger-step-backward "
214
+ class ="btn btn-sm btn-outline-secondary rounded-circle button-circle ">
215
+ < i class ="fa-solid fa-caret-left fa-lg "> </ i >
216
+ </ button >
217
+ < button id ="debugger-step-forward "
218
+ class ="btn btn-sm btn-outline-secondary rounded-circle button-circle ">
219
+ < i class ="fa-solid fa-caret-right fa-lg "> </ i >
220
+ </ button >
221
+ < button id ="debugger-go-end " class ="btn btn-sm btn-outline-secondary rounded-circle button-circle ">
222
+ < i class ="fa-solid fa-forward-step fa-lg "> </ i >
223
+ </ button >
224
+ </ p >
225
+
226
+ < div class ="my-1 " style ="font-weight: 600; "> Match Step < span id ="debugger-match-step "> </ span > </ div >
227
+ < div id ="debugger-regex " class ="border mb-3 ">
228
+ </ div >
229
+
230
+ < div class ="border my-3 ">
231
+ < div id ="debugger-text-container " class ="editor multiline "> </ div >
232
+ </ div >
233
+ </ div >
234
+ </ div >
235
+ </ div >
236
+ </ div >
237
+ </ div >
238
+ </ div >
239
+
166
240
< footer class ="p-2 ">
167
241
< div class ="row ">
168
242
< div class ="col text-center ">
0 commit comments