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>
102 lines
7.1 KiB
Plaintext
102 lines
7.1 KiB
Plaintext
mixin newPaneButton(classId, text, title, icon)
|
|
button(class="dropdown-item btn btn-sm btn-light new-pane-button " + classId title=title data-cy="new-" + classId + "-btn")
|
|
span(class="dropdown-icon " + icon)
|
|
| #{text}
|
|
|
|
#compiler
|
|
.top-bar.btn-toolbar.bg-light(role="toolbar")
|
|
.btn-group.btn-group-sm(role="group" aria-label="Compiler picker")
|
|
.input-group
|
|
select.compiler-picker
|
|
button.btn.btn-sm.btn-light.input-group-text.picker-popout-button(data-trigger="click" style="cursor: pointer;" role="button" title="Compiler picker popout")
|
|
span
|
|
i.fa-solid.fa-arrow-up-right-from-square
|
|
button.btn.btn-sm.btn-light.input-group-text.prepend-options(data-trigger="click" style="cursor: pointer;" role="button" title="All compilation options")
|
|
span.status-icon
|
|
input.options.form-control(type="text" placeholder="Compiler options..." size="256" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" aria-label="Compiler options")
|
|
.populararguments(title="Popular arguments")
|
|
button.btn.btn-sm.btn-light.btn-outline-secondary.dropdown-toggle.dropdown-toggle-split.popular-arguments-btn(type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false")
|
|
span.visually-hidden Popular arguments
|
|
div.dropdown-menu.dropdown-menu-end
|
|
button.dropdown-item.btn.btn-light.btn-sm
|
|
.argmenuitem
|
|
span.argtitle Detailed Compiler Flags
|
|
span.argdescription Open a new window to edit verbose compiler flags
|
|
include ../../font-size
|
|
.btn-group.btn-group-sm.filters(role="group")
|
|
button.btn.btn-sm.btn-light.dropdown-toggle(type="button" title="Compiler output options" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-label="Change how the compiler's output is generated")
|
|
span.fas.fa-cog
|
|
span.hideable Output...
|
|
.dropdown-menu
|
|
include ../../options-output
|
|
.btn-group.btn-group-sm.filters(role="group")
|
|
button.btn.btn-sm.btn-light.dropdown-toggle(type="button" title="Compiler output filters" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-label="Change how the compiler output is filtered")
|
|
span.fas.fa-filter
|
|
span.hideable Filter...
|
|
.dropdown-menu
|
|
include ../../options-filters
|
|
.btn-group.btn-group-sm(role="group" aria-label="Compiler additions")
|
|
button.btn.btn-sm.btn-light.show-libs(title="Include libs" aria-label="Toggle libraries dropdown")
|
|
span.fas.fa-book
|
|
span.dp-text.hideable Libraries
|
|
.btn-group.btn-group-sm(role="group" aria-label="Compiler overrides")
|
|
button.btn.btn-sm.btn-light.show-overrides(title="Overrides" aria-label="Configure overrides for standards and architectures etc")
|
|
span.fas.fa-wrench
|
|
span.dp-text.hideable Overrides
|
|
.btn-group.btn-group-sm(role="group")
|
|
button.btn.btn-sm.btn-light.dropdown-toggle.add-pane(type="button" title="Add a new pane" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-label="Add new element for this compiler" data-cy="new-compiler-dropdown-btn")
|
|
span.fas.fa-plus
|
|
span.hideable Add new...
|
|
.dropdown-menu.dropdown-menu-end.new-pane-dropdown(data-cy="new-compiler-pane-dropdown")
|
|
+newPaneButton("add-compiler", "Clone Compiler", "Clone this compiler window (click or drag)", "far fa-clone")
|
|
+newPaneButton("create-executor", "Executor From This", "Create executor from this compiler", "fas fa-microchip")
|
|
+newPaneButton("view-optimization", "Opt Remarks", "Show optimization remarks", "fas fa-weight")
|
|
+newPaneButton("view-stack-usage", "Stack Usage", "Show stack usage", "fas fa-layer-group")
|
|
+newPaneButton("view-pp", "Preprocessor", "Show preprocessor output", "fas fa-hashtag")
|
|
+newPaneButton("view-ast", "AST", "Show AST output", "fas fa-leaf")
|
|
+newPaneButton("view-ir", "LLVM IR", "Show LLVM Intermediate Representation", "fas fa-align-center")
|
|
+newPaneButton("view-clangir", "ClangIR", "Show Clang Intermediate Representation", "fas fa-align-center")
|
|
+newPaneButton("view-opt-pipeline", "Opt Pipeline", "Show optimization pipeline output", "fas fa-compass")
|
|
+newPaneButton("view-device", "Device", "Show device output", "fas fa-tv")
|
|
+newPaneButton("view-rustmir", "Rust MIR", "Show Rust Mid-level Intermediate Representation", "fas fa-water")
|
|
+newPaneButton("view-rusthir", "Rust HIR", "Show Rust High-level Intermediate Representation", "fas fa-arrows-alt")
|
|
+newPaneButton("view-rustmacroexp", "Rust Macro Expansion", "Show Rust macro expansion", "fas fa-arrows-alt")
|
|
+newPaneButton("view-haskellCore", "GHC Core", "Show GHC Core Intermediate Representation", "fas fa-water")
|
|
+newPaneButton("view-haskellStg", "GHC STG", "Show GHC STG Intermediate Representation", "fas fa-water")
|
|
+newPaneButton("view-haskellCmm", "GHC Cmm", "Show GHC Cmm Intermediate Representation", "fas fa-water")
|
|
+newPaneButton("view-gccdump", "GCC Tree/RTL", "Show GCC Tree/RTL dump", "fas fa-tree")
|
|
+newPaneButton("view-gnatdebugtree", "GNAT Debug Tree", "Show GNAT debug tree", "fas fa-tree")
|
|
+newPaneButton("view-gnatdebug", "GNAT Debug Expanded Code", "Show GNAT debug expanded code", "fas fa-tree")
|
|
+newPaneButton("view-cfg", "Control Flow Graph", "Show assembly control flow graphs", "fas fa-exchange-alt")
|
|
.btn-group.btn-group-sm(role="group")
|
|
button.btn.btn-sm.btn-light.dropdown-toggle.add-tool(type="button" title="Add tool" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-label="Add tooling to this editor and compiler")
|
|
span.fas.fa-screwdriver
|
|
span.hideable Add tool...
|
|
.dropdown-menu.dropdown-menu-end.new-tool-dropdown
|
|
.monaco-placeholder
|
|
.bottom-bar.bg-light
|
|
if !embedded
|
|
.btn-group.btn-group-sm
|
|
.input-group
|
|
button.btn.btn-sm.btn-light.clear-cache(title="Clear cache & recompile" aria-label="Clear cache and recompile")
|
|
span.fas.fa-redo
|
|
button.btn.btn-sm.btn-light.output-btn(data-cy="new-output-pane-btn" aria-label="Show compiler output")
|
|
span.fas.fa-receipt.status-text
|
|
| Output
|
|
span.output-count(aria-live="polite")
|
|
| (
|
|
span.text-count
|
|
| 0
|
|
| /
|
|
span.err-count
|
|
| 0
|
|
| )
|
|
span.short-compiler-name.me-1(aria-hidden="true")
|
|
button.btn.btn-sm.btn-light.full-compiler-name(data-trigger="click" style="cursor: pointer;" role="button" aria-label="Show compiler information")
|
|
span.fas.fa-info
|
|
span.compile-info.me-1(title="Compilation info" aria-label="Compilation information")
|
|
button.btn.btn-sm.btn-light.full-timing-info(data-trigger="click" style="cursor: pointer;" role="button" aria-label="Show full timing information")
|
|
span.fas.fa-chart-bar
|
|
button.btn.btn-sm.btn-light.compiler-license(data-trigger="click" style="cursor: pointer;" role="button" aria-label="View compiler license")
|
|
span Compiler License
|