Commit graph

2 commits

Author SHA1 Message Date
MusikAnimal 13c9eae26e CodeMirrorPreferences: add panel to tweak prefs with the editor open
This is toggled by pressing Mod-Shift-, (or Command-Shift-, on MacOS),
which then puts focus on the preferences panel. It can be closed with
the Escape key, just like other CM panels.

The CodeMirror class comes with these extension which can be toggled in
preferences:
* Bracket matching
* Line numbering
* Line wrapping
* Highlight the active line
* Show special characters

Only bracket matching, line numbering, and line wrapping are available
in the 2017 editor.

The bidi isolation and template folding extensions are registered in
CodeMirrorModeMediaWiki as they are MW-specific. CodeMirrorPreferences'
new registerExtension() method allows any consumer of CodeMirror to add
any arbitrary extensions to the preferences panel. This is expected to
be called *after* CodeMirror has finished initializing. The
'ext.CodeMirror.ready' hook now passes the CodeMirror instance to
accommodate this.

The preferences are stored as a single user option in the database,
called 'codemirror-preferences'. The defaults can be configured with the
$wgCodeMirrorDefaultPreferences configuration setting. The
sysadmin-facing values are the familiar boolean, but since CodeMirror is
widely used, we make extra efforts to reduce the storage footprint (see
T54777). This includes only storing preferences that differ from the
defaults, and using binary representation instead of boolean values,
since the user option is stored as a string.

For now, all preferences are ignored in the 2017 editor. In a future
patch, we may add some as toggleable Tools in the VE toolbar.

Other changes:
* Refactor CSS to use a .darkmode() mixin
* Add a method to create a CSS-only fieldset in CodeMirrorPanel
* Fix Jest tests now that there are more calls to mw.user.options.get()
* Adjust Selenium tests to always use CM6
* Adjust Selenium tests to delete test pages (useful for local dev)
* Remove unused code

Bug: T359498
Change-Id: I70dcf2f49418cea632c452c1266440effad634f3
2024-11-18 22:23:22 -05:00
MusikAnimal 81ec0c292a Implement dark mode styles and use Codex CSS components in search panel
Use Codex design tokens where possible, and implement custom dark
theming for things for which there is no suitable design token.
This means we're changing the colors for light mode ever so slightly.

We need to style the search panel for dark mode, so we might as well
tackle T371436 and use CSS-only Codex components. The same is done for
the "Go to line" panel (can be opened with Mod+Alt+g). The messages in
this panel are now also localizable.

The search panel (and goto line panel) are abstracted, with helpers to
create the Codex components. These will not only be used here but also
for the upcoming preferences panel (T359498).

Visually, the search and goto panels were inspired by the 2017 editor
and share a similar layout. CodeMirror similarly uses a more compact
design than usual to maximize the real estate of the editor itself.

Other changes:
* Bump codemirror/search to get latest bug fixes
* Remove stylelint ignorance and fix errors
* Move CM5 styles to ext.CodeMirror.less
* Move CM-specific styles out of mediawiki.less and into codemirror.less
* Move WikiEditor-specific styles to codemirror.wikieditor.less
  (incidentally, these only apply to CodeMirror 6)
* Correct qqq documentation; the "dialog" should be called a "panel"
* extension.json: alphabetize list of messages

Bug: T365311
Bug: T371436
Bug: T359498
Change-Id: I6a3bbc6bce4e490886753ff484e377c1763de456
2024-08-29 18:59:57 -04:00