File size: 6,810 Bytes
c120a1c
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
<div class="regex-debugger-container">
    <!-- Rules List Column -->
    <div class="regex-debugger-rules-list">
        <h3>
            <i class="fa-solid fa-list-ol"></i>
            <span data-i18n="ext_regex_debugger_active_rules"
                >Active Rules</span
            >
        </h3>
        <div class="flex-container">
            <button
                id="regex_debugger_save_order"
                class="menu_button menu_button_icon interactable"
                data-i18n="[title]ext_regex_debugger_save_order_help"
                title="Save current rule order"
                tabindex="0"
            >
                <i class="fa-solid fa-floppy-disk"></i>
                <span data-i18n="ext_regex_debugger_save_order"
                    >Save Order</span
                >
            </button>
        </div>
        <ul id="regex_debugger_rules" class="sortable-list">
            <!-- Rules will be populated here by JavaScript -->
        </ul>
    </div>

    <!-- Testing Area Column -->
    <div class="regex-debugger-tester">
        <h3>
            <i class="fa-solid fa-vial"></i>
            <span data-i18n="ext_regex_debugger_testing_area"
                >Testing Area</span
            >
        </h3>
        <div class="regex-debugger-io">
            <div class="regex-debugger-input">
                <label
                    for="regex_debugger_raw_input"
                    data-i18n="ext_regex_debugger_raw_input"
                    >Raw Input</label
                >
                <textarea
                    id="regex_debugger_raw_input"
                    class="text_pole autoSetHeight"
                    rows="4"
                ></textarea>
            </div>
            <div
                id="regex_debugger_run_test_header"
                class="flex-container"
            >
                <button
                    id="regex_debugger_run_test"
                    class="menu_button menu_button_icon interactable"
                    data-i18n="[title]ext_regex_debugger_run_test_help"
                    title="Run the test pipeline"
                    tabindex="0"
                >
                    <i class="fa-solid fa-play"></i>
                    <span data-i18n="ext_regex_debugger_run_test"
                        >Run Test</span
                    >
                </button>
                <div class="flex-container gap10px">
                    <div class="radio_group">
                        <label
                            ><input
                                type="radio"
                                name="display_mode"
                                value="replace"
                                checked
                            />
                            <span data-i18n="ext_regex_debugger_display_replace"
                                >Replace</span
                            ></label
                        >
                        <label
                            ><input
                                type="radio"
                                name="display_mode"
                                value="highlight"
                            />
                            <span
                                data-i18n="ext_regex_debugger_display_highlight"
                                >Highlight</span
                            ></label
                        >
                    </div>
                    <select
                        id="regex_debugger_render_mode"
                    >
                        <option
                            value="text"
                            data-i18n="ext_regex_debugger_render_text"
                        >
                            Render as Text
                        </option>
                        <option
                            value="message"
                            data-i18n="ext_regex_debugger_render_message"
                        >
                            Render as Message
                        </option>
                    </select>
                </div>
            </div>
            <div class="regex-debugger-results">
                <div class="results-header">
                    <h4>
                        <i class="fa-solid fa-shoe-prints"></i>
                        <span data-i18n="ext_regex_debugger_step_by_step"
                            >Step-by-step Transformation</span
                        >
                    </h4>
                    <div
                        id="regex_debugger_expand_steps"
                        class="menu_button menu_button_icon"
                        data-i18n="[title]Expand view"
                        title="Expand view"
                    >
                        <i class="fa-solid fa-expand"></i>
                    </div>
                </div>
                <div id="regex_debugger_steps_output" class="results-box"></div>

                <div class="results-header">
                    <h4>
                        <i class="fa-solid fa-flag-checkered"></i>
                        <span data-i18n="ext_regex_debugger_final_output"
                            >Final Output</span
                        >
                    </h4>
                    <div
                        id="regex_debugger_expand_final"
                        class="menu_button menu_button_icon"
                        data-i18n="[title]Expand view"
                        title="Expand view"
                    >
                        <i class="fa-solid fa-expand"></i>
                    </div>
                </div>
                <div
                    id="regex_debugger_final_output"
                    class="results-box final-output"
                ></div>
            </div>
        </div>
    </div>
</div>

<!-- Template for a single rule item -->
<template id="regex_debugger_rule_template">
    <li class="regex-debugger-rule" draggable="true">
        <i class="fa-solid fa-grip-vertical handle"></i>
        <label class="checkbox">
            <input type="checkbox" class="rule-enabled" checked />
        </label>
        <div class="rule-details">
            <span class="rule-name"></span>
            <code class="rule-regex"></code>
            <small class="rule-scope"></small>
        </div>
        <div class="menu_button menu_button_icon edit_rule" data-i18n="[title]Edit Rule" title="Edit Rule">
            <i class="fa-solid fa-pencil"></i>
        </div>
    </li>
</template>

<!-- Template for a single transformation step -->
<template id="regex_debugger_step_template">
    <div class="step-result">
        <div class="step-header">
            <strong></strong>
        </div>
        <pre class="step-output"></pre>
    </div>
</template>