Skip to content

Comments

morebits: port SimpleWindow from jQuery UI to plain JS #2309

Merged
siddharthvp merged 1 commit intomasterfrom
remove-jquery-ui-dialog
Feb 14, 2026
Merged

morebits: port SimpleWindow from jQuery UI to plain JS #2309
siddharthvp merged 1 commit intomasterfrom
remove-jquery-ui-dialog

Conversation

@siddharthvp
Copy link
Member

@siddharthvp siddharthvp commented Jan 31, 2026

Looks and behaves exactly like the existing UI. There is also not much difference in the number of lines of code. It turns out that using jquery.ui and applying our tweaks over it wasn't really making the code lesser than re-implementing the dialog from scratch.

It took more than a week to get all the rough edges straightened out. I think the result is cleaner and more maintainable than the previous version. In particular, the CSS no longer needs to use !important or use over-specific selectors or inherit values to override jquery.ui behaviour.

The only visible changes are:

  • Resizing is only supported from the bottom-right corner (similar to CSS native resize). Earlier, it was supported from all four corners and four edges. We could do that if there's demand.
  • The close button looks a bit different (but behaves similarly).

Any other differences from the previous UI should be reported as a bug.

Partially solves #2300.

@github-actions github-actions bot added Module: tag Module: morebits The morebits.js library labels Jan 31, 2026
@siddharthvp
Copy link
Member Author

QA checklist:

  • when dialog opens, it should be at the center of the window
    • it should be the center even when page has been scrolled (can be tested in timeless)
  • dialog should be draggable
    • should not be draggable beyond the left and top edges of viewport
  • dialog should be resizable
  • titlebar and buttonpane should not vertically contract when dialog is resized
  • the scrollbox (used in Tag, Welcome) should resize with the dialog
    • elements below the scrollbox should be visible without having to scroll
  • the close button should remain visible at narrow widths
  • dialog should not be obscured by vector-2022 sticky header or other skin components
  • the initial height of the dialog should be min(given height in code, height of content)
  • modal dialogs (used for Welcome previews) should prevent user interaction outside
  • dialog should be in focus when it is opened
  • dialog in focus should close when esc key is pressed
    • check with dvorak keyboard layout as well (no need, dvorak and qwerty have esc at the same place)
  • dialog inputs should be tabbable (able to be focused with tab presses)
  • inline elements in dialog should not get treated as block elements (should not appear on separate lines)
  • when multiple dialogs are opened, clicking on a dialog should bring it to top over other overlapping dialogs
  • test across Chrome, Firefox and Safari
  • test across vector-2022, vector, monobook and timeless
    • test nothing regressed in minerva

@siddharthvp siddharthvp force-pushed the remove-jquery-ui-dialog branch from 3476324 to 76b55c0 Compare January 31, 2026 19:49
Base automatically changed from stylelint to master February 8, 2026 21:49
@siddharthvp siddharthvp force-pushed the remove-jquery-ui-dialog branch 2 times, most recently from a65f710 to 3b757e1 Compare February 9, 2026 05:56
@siddharthvp siddharthvp force-pushed the remove-jquery-ui-dialog branch 2 times, most recently from 66e887a to 877f8c1 Compare February 9, 2026 22:39
Looks and behaves exactly like the existing UI. There is also not much difference in the number of lines of code. It turns out that using jquery.ui and applying our tweaks over it wasn't really making the code lesser than re-implementing the dialog from scratch.

It took more than a week to get all the rough edges straightened out. I think the result is cleaner and more maintainable than the previous version. In particular, the CSS no longer needs to use `!important` or use over-specific selectors or `inherit` values to override jquery.ui behaviour.

The only visible changes are:
* Resizing is only supported from the bottom-right corner (similar to CSS native resize). Earlier, it was supported from all four corners and four edges. We could do that if there's demand.
* The close button looks a bit different (but behaves similarly).

Any other differences from the previous UI should be reported as a bug.

Partially solves #2300.
@siddharthvp siddharthvp force-pushed the remove-jquery-ui-dialog branch from 877f8c1 to 974c78f Compare February 13, 2026 18:17
@siddharthvp
Copy link
Member Author

I've checked for all kinds of UI issues I can think of over the past two weeks. Let's see how this goes :/

@siddharthvp siddharthvp merged commit 8405bd6 into master Feb 14, 2026
5 checks passed
@siddharthvp siddharthvp deleted the remove-jquery-ui-dialog branch February 14, 2026 08:10
siddharthvp added a commit that referenced this pull request Feb 15, 2026
After jQuery UI migration (#2309), we need to use .morebits-dialog-title instead of `.ui-dialog-title`.
siddharthvp added a commit that referenced this pull request Feb 15, 2026
…es (#2320)

After jQuery UI migration (#2309), we need to use .morebits-dialog-title instead of `.ui-dialog-title`.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant