Repository navigation
Conversation
74428b1 to
5311f4e
Compare
967f897 to
539f9de
Compare
Restores the bootstrap form theme via struts2-bootstrap-plugin 6.1.0, which is Jakarta-native and emits Bootstrap 5 markup, and converts the JSPs and basic themes accordingly: class renames, data-bs-* attributes, navbar restructure, and bootstrap-icons in place of glyphicons. A tooltip.ftl template override emits data-bs-toggle so field help renders as opt-in Bootstrap tooltips initialised in roller.js. WebJar assets are served straight from META-INF/resources by the servlet container, so the webjars servlet is removed. The profile page shows the OIDC issuer and subject as separate read-only fields instead of the raw federated identity string.
539f9de to
26ed950
Compare
# Conflicts: # app/pom.xml # app/src/main/webapp/WEB-INF/jsps/core/Setup.jsp # app/src/main/webapp/WEB-INF/jsps/editor/Bookmarks.jsp # app/src/main/webapp/WEB-INF/jsps/editor/Categories.jsp # app/src/main/webapp/WEB-INF/jsps/editor/Entries.jsp # app/src/main/webapp/WEB-INF/jsps/editor/MediaFileImageChooser.jsp # app/src/main/webapp/WEB-INF/jsps/editor/Templates.jsp
The editor was loading Summernote's default build, which targets Bootstrap 3 and wires its toolbar dropdowns and dialogs through data-toggle attributes that Bootstrap 5 no longer reads. Summernote 0.9.1 ships a Bootstrap 5 build, so the editor now uses that.
The theme loaded jQuery 2.1.1 and jQuery Mobile 1.4.2 from code.jquery.com over plain http. Both versions have known XSS vulnerabilities, jQuery Mobile is no longer maintained, and the standard weblog template's own Content-Security-Policy (script-src 'self') already blocked the script, which left its View Mobile Weblog link doing nothing. The mobile templates keep their data-role markup, which the Velocity mobile macros also emit, and basic-mobile-custom.css now styles it directly: header and footer bars, inset list views with dividers, the next/previous navbar, and buttons. The category chooser opens with CSS :target from its existing #categories link. The view switch links carry ?deviceType=standard or ?deviceType=mobile, which MobileDeviceRepository already honors, and a few lines of plain JavaScript remember the choice in the roller_user_request_type cookie as before. permalink-mobile.vm's comment list also gets its missing closing </ul>. roller-ui/styles/jquery.mobile-theme stays, because weblogs that customized this theme have their own copies of the templates that still reference it.
The mobile templates now request their stylesheet with ?deviceType=mobile. The server picks a stylesheet rendition from the device cookie or user agent, so a mobile page reached through a ?deviceType=mobile link got the standard stylesheet; jQuery Mobile's own CSS used to hide that. The mobile day template chose between an entry's text and its summary by testing whether the text was empty, so entries without a summary printed a literal $entry.transformedSummary or an empty teaser. It now tests the summary and uses quiet references. roller.js is included with every weblog's comment form, but most themes don't load jQuery, so its form validation block threw "$ is not defined" on those pages. The block now runs only when jQuery Validation is present, which the admin and editor pages still load.
snoopdave
left a comment
There was a problem hiding this comment.
I see a fair amount of UI breaking due to this upgrade, so I did a UI audit which included 50 screenshots: Here are the findings: UI_AUDIT.md
Bootstrap 5's jQuery bridge treats an object argument as configuration only, so the fourteen `.modal({show: true})` calls created the dialogs without showing them. Category add, edit and delete, every blogroll dialog, entry delete from the list and the editor, Insert Media File, the media file lightbox, and the ping target dialogs now open again. The AJAX dialogs also use `.fail()` instead of jqXHR's `.error()`, which jQuery 3 removed, so saving from them no longer throws.
The Bootstrap 5 conversion switched the publishing time selects, the date field, the entry body and summary textareas, and the blogroll move-to select from Struts' simple theme to the bootstrap theme. That theme wraps each field in a labelled form row, so these fields rendered as broken rows with empty label columns. They use the simple theme again, as on master, and the publishing time is laid out on one line with fixed-width selects. The move-to select sizes to its longest folder name.
# Conflicts: # app/src/main/webapp/WEB-INF/jsps/editor/Bookmarks.jsp # app/src/main/webapp/theme/scripts/roller.js
|
Thanks for the audit, Dave. Both regressions from this PR are fixed:
While merging I also found that the User Edit page's Save and Cancel buttons still used Bootstrap 3 classes, so they now use #157 now covers the dialogs in all three auth modes. The tests add a category through the dialog, cancel an entry delete, insert a media file through the chooser, and check that the publishing time renders on one line. The rest of the audit isn't from this PR. UI-03, UI-07 and the Dispatch overflow (UI-08 #1) are fixed in #160, and UI-04 (OIDC logout) is fixed in #155. UI-05 (viewport meta, sidebar order, table overflow), UI-06 (calendar icons), the unstyled 403 page, the The whole stack has master merged in now, through #154. |
Stacked on #155 (2/3 in the stack); the diff against its base branch holds only this PR's changes.
Converts the admin and editor UI from Bootstrap 3 to Bootstrap 5.3.8. The bootstrap form theme comes through struts2-bootstrap-plugin 6.2.0, which is Jakarta-native and emits Bootstrap 5 markup.
No functionality is removed. Visual and behavioral deltas beyond the restyle, so nothing merges unnoticed:
.fade { opacity: 0 }override in roller.css (a Bootstrap 3-era leftover) made anyfade showcomponent invisible — both fixed, auto-hide after 10 seconds unchanged.badgehas no background in Bootstrap 5)tooltip.ftltemplate override initialised in roller.js; the stylesheet editor's button hints use native title tooltips since the simple theme has no icon slotThe result was audited page by page against a seeded master baseline: all 24 admin/editor pages were screenshot-compared with identical data on both sides. That comparison caught two regressions, fixed here: the entry editor's collapsible section headers rendered as blue links, and the date-picker calendar icons in the Entries/Comments sidebars wrapped below their inputs.
The Basic Mobile theme drops jQuery 2.1.1 and jQuery Mobile 1.4.2, which it loaded from code.jquery.com over plain http. Both have known XSS vulnerabilities, jQuery Mobile is unmaintained, and the standard template's own CSP already blocked the script, so its View Mobile Weblog link did nothing:
data-rolemarkup andbasic-mobile-custom.cssstyles it directly; the category chooser opens with CSS:target?deviceType=, which the server already honors, and a few lines of plain JavaScript remember the choice in the existing cookie$entry.transformedSummaryroller-ui/styles/jquery.mobile-themestays for weblogs whose customized copies of the theme still reference itroller.js, which every weblog's comment form includes, now runs its jQuery Validation block only when jQuery Validation is loaded, so themes without jQuery no longer log$ is not defined.