mirror of
https://github.com/compiler-explorer/compiler-explorer.git
synced 2025-12-27 07:04:04 -05:00
637564f389
This PR completes the migration from Bootstrap 4 to Bootstrap 5.3.5 following the plan outlined in [docs/Bootstrap5Migration.md](https://github.com/compiler-explorer/compiler-explorer/blob/mg/bootstrap5/docs/Bootstrap5Migration.md). ## Migration Process We followed a phased approach as documented in the migration plan: 1. **Phase 1: Dependency Updates and Basic Setup** - Updated Bootstrap from 4.6.2 to 5.3.5 - Added @popperjs/core dependency (replacing Popper.js) - Updated Tom Select theme from bootstrap4 to bootstrap5 2. **Phase 2: Global CSS Class Migration** - Updated directional utility classes (ml/mr → ms/me) - Updated floating utility classes (float-left/right → float-start/end) - Updated text alignment classes (text-left/right → text-start/end) 3. **Phase 3: HTML Attribute Updates** - Updated data attributes to use Bootstrap 5 prefixes (data-bs-toggle, data-bs-target, etc.) - Fixed tab navigation issues 4. **Phase 4: JavaScript API Compatibility Layer** - Created bootstrap-utils.ts compatibility layer - Updated component initialization for modals, dropdowns, popovers, etc. 5. **Phase 5: Component Migration** - Updated and tested specific components (modals, dropdowns, toasts, etc.) - Fixed styling issues in cards and button groups 6. **Phase 6: Form System Updates** - Updated form control classes to Bootstrap 5 standards - Updated checkbox/radio markup patterns - Simplified input groups 7. **Phase 7: Navbar Structure Updates** - Updated navbar structure with container-fluid - Fixed responsive behavior 8. **Phase 8: SCSS Variables and Theming** - Added custom CSS fixes for navbar alignment - Verified theme compatibility 9. **Phase 9: Accessibility Improvements** - Updated sr-only to visually-hidden - Added proper ARIA attributes - Enhanced screen reader support ## Key Changes - No more jQuery dependency in Bootstrap 5 - New prefix for data attributes (data-bs-*) - Improved accessibility with ARIA attributes - Updated positioning classes (start/end instead of left/right) - Simplified input group structure ## Test Plan 1. **Navigation Testing** - Verify all dropdown menus open and close properly - Test mobile menu responsiveness - Check tab navigation in settings dialog 2. **Component Testing** - Verify all modals open and close correctly (settings, share, load/save) - Test tooltips and popovers - Check form controls in different dialogs 3. **Layout Testing** - Test responsiveness on different screen sizes - Verify proper alignment of elements - Check dark mode compatibility 4. **Specific Features to Test** - Compiler selection and options - Share dialog functionality - Settings dialog - Tree view (IDE mode) - Font selection dropdown 5. **Browser Testing** - Test in Chrome, Firefox, Safari - Test in mobile browsers ## Note on Further Improvements After this migration is stable, we could consider Phase 12: removing jQuery dependency entirely, as Bootstrap 5 no longer requires it. This would be a separate effort. --------- Co-authored-by: Claude <noreply@anthropic.com>
39 lines
2.6 KiB
Plaintext
39 lines
2.6 KiB
Plaintext
mixin optionButton(bind, isActive, text, title)
|
|
.button-checkbox
|
|
button(type="button" class="dropdown-item btn btn-sm btn-light" + (isActive ? "active" : "") title=title data-bind=bind aria-pressed=isActive ? "true" : "false")
|
|
span #{text}
|
|
input.d-none(type="checkbox" checked=isActive)
|
|
|
|
#gccdump
|
|
.top-bar.btn-toolbar.bg-light(role="toolbar")
|
|
include ../../font-size
|
|
.btn-group.btn-group-sm(role="group")
|
|
select.gccdump-pass-picker(placeholder="Select a pass...")
|
|
.btn-group.btn-group-sm.dump-filters
|
|
button.btn.btn-sm.btn-light.dropdown-toggle(type="button" title="Dump passes" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-label="Available dump passes")
|
|
span.fas.fa-compass
|
|
span.hideable Passes
|
|
.dropdown-menu
|
|
+optionButton("treeDump", true, "Tree Pass", "Show Tree passes")
|
|
+optionButton("rtlDump", true, "RTL Pass", "Show RTL passes")
|
|
+optionButton("ipaDump", true, "IPA Pass", "Show IPA passes")
|
|
.btn-group.btn-group-sm.dump-filters
|
|
button.btn.btn-sm.btn-light.dropdown-toggle(type="button" title="Dump pass options" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-label="Control the details of the dump")
|
|
span.fas.fa-microchip
|
|
span.hideable Options
|
|
.dropdown-menu
|
|
+optionButton("rawOption", false, "Raw Dump", "Print raw representation of the tree")
|
|
+optionButton("slimOption", false, "Slim Dump", "Print condensed intermediate representations")
|
|
div.dropdown-divider
|
|
+optionButton("allOption", false, "All Options", "Turn on all options (except raw, slim and lineno)")
|
|
// This addresses one was marked as aria-pressed=true, but not checked. What should its default state be then? Set to false for now
|
|
+optionButton("gimpleFeOption", false, "GIMPLE Frontend Syntax", "Dump syntax that the GIMPLE frontend can accept")
|
|
+optionButton("addressOption", false, "Addresses", "Print the address of each tree node")
|
|
+optionButton("blocksOption", false, "Basic Blocks", "Show the basic block boundaries (disabled in raw dumps)")
|
|
+optionButton("linenoOption", false, "Line Numbers", "Show line numbers")
|
|
+optionButton("detailsOption", false, "Pass Details", "Enable more detailed dumps (not honored by every dump option)")
|
|
+optionButton("statsOption", false, "Pass Stats", "Dump statistics (not honored by every dump option)")
|
|
+optionButton("uidOption", false, "Unique IDs", "Show variable UIDs")
|
|
+optionButton("vopsOption", false, "Virtual Operands", "Show virtual operands")
|
|
.monaco-placeholder
|