Commit graph

6 commits

Author SHA1 Message Date
0ko
3cafb7fa6c chore(ui): change /devtest to /-/demo (#11019)
It has always been largely used for showcasing UI elements but that name didn't work too well for it.

Testing:
Some of existing tests depend on these pages, making it redundant to create extra tests.

Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/11019
Reviewed-by: Michael Kriese <michael.kriese@gmx.de>
Reviewed-by: Gusted <gusted@noreply.codeberg.org>
2026-01-26 13:12:25 +01:00
Beowulf
28e0af23fa feat(ui): replace Monaco with CodeMirror (#10559)
- Replace the [Monaco Editor](https://microsoft.github.io/monaco-editor/)
with [CodeMirror 6](https://codemirror.net/). This editor is used to
facilitate the 'Add file' and 'Edit file' functionality.
- Rationale:
  - Monaco editor is a great and powerful editor, however for Forgejo's
  purpose it acts more like a small IDE than a code editor and is doing
  too much. In my limited user research the usage of editing files via
  the web UI is largely for small changes that does not need the
  features that Monaco editor provides.
  - Monaco editor has no mobile support, Codemirror is very usable on mobile.
  - Monaco editor pulls in large dependencies (for language support) and
  by replacing it with Codemirror the amount of time that webpack needs
  to build the frontend is reduced by 50% (~30s -> ~15s).
  - The binary of Forgejo (build with `bindata` tag) is reduced by 2MiB.
  - Codemirror is much more lightweight and should be more usable on
  less powerful hardware, most notably the lazy loading is much faster
  as codemirror uses less javascript.
  - Because Codemirror is modular it is much easier to change the
  behavior of the code editor if we wish to.
- Drawbacks:
  - Codemirror is quite modular and as seen in `package.json` and in
  `codeeditor.ts` we have to supply a lot more of its features to have
  feature parity with Monaco editor.
  - Monaco editor has great integrated language support (features that
  an lsp would provide), Codemirror only has such language support to an
  extend.
  - Monaco editor has its famous command palette (known by many as its
  also available in VSCode), this is not available in code mirror.
- Good to note:
  - All features that was added on top of the monaco editor (such as
  dynamically changing language  support depending on the filename)
  still works and the theme is based on the VSCode colors which largely
  resembles the monaco editor.
  - The code editor is still lazy-loaded (this is painfully clear by
  reading how imports are passed around in `codeeditor.ts`).
  - This change was privately tested by a few people, a few bugs were
  found (and fixed) but no major drawbacks were noted for their usage of
  the web editor.
  - There's a "search" button in the top bar, so that search can be used
  on mobile. It is otherwise only accessible via
  <kbd>Ctrl</kbd>+<kbd>f</kbd>.

Co-authored-by: Beowulf <beowulf@beocode.eu>

Co-authored-by: Gusted <postmaster@gusted.xyz>
Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/10559
Reviewed-by: Gusted <gusted@noreply.codeberg.org>
Reviewed-by: 0ko <0ko@noreply.codeberg.org>
Co-committed-by: Beowulf <beowulf@beocode.eu>
2026-01-04 23:52:33 +01:00
0ko
79c47c2e50 feat(ui): improve modal width rules (#10246)
Followup to https://codeberg.org/forgejo/forgejo/pulls/9636, https://codeberg.org/forgejo/forgejo/pulls/8859#issuecomment-6651595.

1. Due to lack of `min-width`, currently the new consistent dialogs can get disproportionally small to the screen. This PR adds a min-width of 400px. No deep consideration went into choosing this particular width.
    * To make the test not depend on modals we have in the UI with some arbitrary widths a devtest page was added instead
2. Use more horizontal space on narrow screens

Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/10246
Reviewed-by: Gusted <gusted@noreply.codeberg.org>
2025-11-28 19:38:50 +01:00
Gusted
0737196842 chore: remove webkit and mobile safari from playwright (#10103)
Webkit and Mobile safari are comically unreliable, will fail for unexplainable reasons and are very hard to run locally in comparison with the other supported platforms. I do not remember the last time where these two platforms were able to catch a regression where the other platforms did not.

I would like to stress, for the historical record, that many hours has been devoted into adjusting the tests and following best practices to make these two platforms more stable but despite those, IMO wasted, efforts these two platforms are causing many hours of wasted CPU time simply because they are flaky and make (new) contributors nervous if their change contains a regression or not.

To my knowledge, the tests are not broken for these two platforms. If you go to the issue tracker you will not find issues by users that use these two platforms and report that Forgejo is broken. It does not reflect reality.

This is the sunk cost fallacy, bite the bullet and agree that these platforms will not contribute positively to Forgejo's excellent test suite.

Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/10103
Reviewed-by: Michael Kriese <michael.kriese@gmx.de>
Reviewed-by: Mathieu Fenniak <mfenniak@noreply.codeberg.org>
Reviewed-by: 0ko <0ko@noreply.codeberg.org>
Co-authored-by: Gusted <postmaster@gusted.xyz>
Co-committed-by: Gusted <postmaster@gusted.xyz>
2025-11-13 17:23:08 +01:00
Otto Richter
f87b76160e e2e: Selective screenshots (#9499)
* Add some test that only snapshot relevant content
* Allow adding marging around the element in case the environment is relevant (e.g. the location of an element relative to the parent, but excluding the environment of the parent)

Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/9499
Reviewed-by: Gusted <gusted@noreply.codeberg.org>
Co-authored-by: Otto Richter <git@otto.splvs.net>
Co-committed-by: Otto Richter <git@otto.splvs.net>
2025-10-03 13:45:08 +02:00
Gusted
aa345c9e0c feat: first native dialog for modal (#8859)
- The current implementation for modals is provided by fomantic UI.
- This patch introduces a new implementation that relies on the `<dialog>` element to provide modal, whereby the heavy lifting is done by the browser.
- This implementation is considerably simpler, accessible (although untested) and lightweight. It is capable of replacing fomantic UI's modal implementation + our dimmer implementation (~2k lines of code and CSS).[^1] As a first step the empty content modal is migrated.
- This brings in the CSS needed to display `<dialog>` and a helper function that hides some boilerplate code that's needed to show `<dialog>` as a modal.
- Add a E2E test that shows the modal's cancel and approve button works.

[^1]: The heavy work has already been done by me in a local branch, but reviewing that gigantic patch in one PR is not doable.

Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/8859
Reviewed-by: 0ko <0ko@noreply.codeberg.org>
Co-authored-by: Gusted <postmaster@gusted.xyz>
Co-committed-by: Gusted <postmaster@gusted.xyz>
2025-09-20 20:09:17 +02:00