dee7860f08
13 Commits
Author | SHA1 | Message | Date | |
---|---|---|---|---|
Damien Elmes
|
5e0a761b87
|
Move away from Bazel (#2202)
(for upgrading users, please see the notes at the bottom) Bazel brought a lot of nice things to the table, such as rebuilds based on content changes instead of modification times, caching of build products, detection of incorrect build rules via a sandbox, and so on. Rewriting the build in Bazel was also an opportunity to improve on the Makefile-based build we had prior, which was pretty poor: most dependencies were external or not pinned, and the build graph was poorly defined and mostly serialized. It was not uncommon for fresh checkouts to fail due to floating dependencies, or for things to break when trying to switch to an older commit. For day-to-day development, I think Bazel served us reasonably well - we could generally switch between branches while being confident that builds would be correct and reasonably fast, and not require full rebuilds (except on Windows, where the lack of a sandbox and the TS rules would cause build breakages when TS files were renamed/removed). Bazel achieves that reliability by defining rules for each programming language that define how source files should be turned into outputs. For the rules to work with Bazel's sandboxing approach, they often have to reimplement or partially bypass the standard tools that each programming language provides. The Rust rules call Rust's compiler directly for example, instead of using Cargo, and the Python rules extract each PyPi package into a separate folder that gets added to sys.path. These separate language rules allow proper declaration of inputs and outputs, and offer some advantages such as caching of build products and fine-grained dependency installation. But they also bring some downsides: - The rules don't always support use-cases/platforms that the standard language tools do, meaning they need to be patched to be used. I've had to contribute a number of patches to the Rust, Python and JS rules to unblock various issues. - The dependencies we use with each language sometimes make assumptions that do not hold in Bazel, meaning they either need to be pinned or patched, or the language rules need to be adjusted to accommodate them. I was hopeful that after the initial setup work, things would be relatively smooth-sailing. Unfortunately, that has not proved to be the case. Things frequently broke when dependencies or the language rules were updated, and I began to get frustrated at the amount of Anki development time I was instead spending on build system upkeep. It's now about 2 years since switching to Bazel, and I think it's time to cut losses, and switch to something else that's a better fit. The new build system is based on a small build tool called Ninja, and some custom Rust code in build/. This means that to build Anki, Bazel is no longer required, but Ninja and Rust need to be installed on your system. Python and Node toolchains are automatically downloaded like in Bazel. This new build system should result in faster builds in some cases: - Because we're using cargo to build now, Rust builds are able to take advantage of pipelining and incremental debug builds, which we didn't have with Bazel. It's also easier to override the default linker on Linux/macOS, which can further improve speeds. - External Rust crates are now built with opt=1, which improves performance of debug builds. - Esbuild is now used to transpile TypeScript, instead of invoking the TypeScript compiler. This results in faster builds, by deferring typechecking to test/check time, and by allowing more work to happen in parallel. As an example of the differences, when testing with the mold linker on Linux, adding a new message to tags.proto (which triggers a recompile of the bulk of the Rust and TypeScript code) results in a compile that goes from about 22s on Bazel to about 7s in the new system. With the standard linker, it's about 9s. Some other changes of note: - Our Rust workspace now uses cargo-hakari to ensure all packages agree on available features, preventing unnecessary rebuilds. - pylib/anki is now a PEP420 implicit namespace, avoiding the need to merge source files and generated files into a single folder for running. By telling VSCode about the extra search path, code completion now works with generated files without needing to symlink them into the source folder. - qt/aqt can't use PEP420 as it's difficult to get rid of aqt/__init__.py. Instead, the generated files are now placed in a separate _aqt package that's added to the path. - ts/lib is now exposed as @tslib, so the source code and generated code can be provided under the same namespace without a merging step. - MyPy and PyLint are now invoked once for the entire codebase. - dprint will be used to format TypeScript/json files in the future instead of the slower prettier (currently turned off to avoid causing conflicts). It can automatically defer to prettier when formatting Svelte files. - svelte-check is now used for typechecking our Svelte code, which revealed a few typing issues that went undetected with the old system. - The Jest unit tests now work on Windows as well. If you're upgrading from Bazel, updated usage instructions are in docs/development.md and docs/build.md. A summary of the changes: - please remove node_modules and .bazel - install rustup (https://rustup.rs/) - install rsync if not already installed (on windows, use pacman - see docs/windows.md) - install Ninja (unzip from https://github.com/ninja-build/ninja/releases/tag/v1.11.1 and place on your path, or from your distro/homebrew if it's 1.10+) - update .vscode/settings.json from .vscode.dist |
||
Matthias Metelka
|
68fa661b53
|
Finish #2070: Single overlay instead of per field (#2144)
* Move up MathjaxOverlay to be initialized only once * Move ImageOverlay to NoteEditor root * Move Symbols Overlay to NoteEditor root * Refactor image overlay to not require second mutation observer * Use elevation + overflow:hidden in Editorfield * Make it possible to show input next to each other again * Set handle background color to code bg * Make Collapsible unmount the component * Simplify how decorated elements are mounted * Set RichTextInput background to frame-bg again * Strip out FocusTrap code * Revert "Make Collapsible unmount the component" This reverts commit 52722065ea199fa57ae750fa34bf47ee1c5aab3c. * Allow clicking on label container to unfocus field * Fix mathjax overlay resetting too its api too soon * Allow scrolling on overlays * Set focus-border border-color in focused field * Fix background color of fields * Add back grid-gap removed it during merge to see if margin-top would behave any differently - which is not the case. * Fix double border issue within Collapsible.svelte * Format * Edit appearance of focused fields a bit * Remove unused properties * Include elevation in button_mixins_lib * Give label-container a background color Co-authored-by: Henrik Giesel <hengiesel@gmail.com> |
||
Matthias Metelka
|
62266aece4
|
Fix duplicate highlight and improve aesthetic (#2102) | ||
Matthias Metelka
|
8142176f84
|
Introduce new color palette using Sass maps (#2016)
* Remove --medium-border variable * Implement color palette using Sass maps I hand-picked the gray tones, the other colors are from the Tailwind CSS v3 palette. Significant changes: - light theme is brighter - dark theme is darker - borders are softer I also deleted some platform- and night-mode-specific code. * Use custom colors for note view switch * Use same placeholder color for all inputs * Skew color palette for more dark values by removing gray[3], which wasn't used anywhere. Slight adjustments were made to the darker tones. * Adjust frame- window- and border colors * Give deck browser entries --frame-bg as background color * Define styling for QComboBox and QLineEdit globally * Experiment with CSS filter for inline-colors Inside darker inputs, some colors like dark blue will be hard to read, so we could try to improve text-color contrast with global adjustments depending on the theme. * Use different map structure for _vars.scss after @hgiesel's idea: https://github.com/ankitects/anki/pull/2016#discussion_r947087871 * Move custom QLineEdit styles out of searchbar.py * Merge branch 'main' into color-palette * Revert QComboBox stylesheet override * Align gray color palette more with macOS * Adjust light theme * Use --slightly-grey-text for options tab color * Replace gray tones with more neutral values * Improve categorization of global colors by renaming almost all of them and sorting them into separate maps. * Saturate highlight-bg in light theme * Tweak gray tones * Adjust box-shadow of EditingArea to make fields look inset * Add Sass functions to access color palette and semantic variables in response to https://github.com/ankitects/anki/pull/2016#issuecomment-1220571076 * Showcase use of access functions in several locations @hgiesel in buttons.scss I access the color palette directly. Is this what you meant by "... keep it local to the component, and possibly make it global at a later time ..."? * Fix focus box shadow transition and remove default shadow for a cleaner look I couldn't quite get the inset look the way I wanted, because inset box-shadows do not respect the border radius, therefore causing aliasing. * Tweak light theme border and shadow colors * Add functions and colors to base_lib * Add vars_lib as dependency to base_lib and button_mixins_lib * Improve uses of default-themed variables * Use old --frame-bg color and use darker tone for canvas-default * Return CSS var by default and add palette-of function for raw value * Showcase use of palette-of function The #{...} syntax is required only because the use cases are CSS var definitions. In other cases a simple palette-of(keyword, theme) would suffice. * Light theme: decrease brightness of canvas-default and adjust fg-default * Use canvas-inset variable for switch knob * Adjust light theme * Add back box-shadow to EditingArea * Light theme: darken background and flatten transition also set hue and saturation of gray-8 to 0 (like all the other grays). * Reduce flag colors to single default value * Tweak card/note accent colors * Experiment with inset look for fields again Is this too dark in night mode? It's the same color used for all other text inputs. * Dark theme: make border-default one shade darker * Tweak inset shadow color * Dark theme: make border-faint darker than canvas-default meaning two shades darker than it currently was. * Fix PlainTextInput not expanding * Dark theme: use less saturated flag colors * Adjust gray tones * Fix nested variables not getting extracted correctly * Rename canvas-outset to canvas-elevated * Light theme: darken canvas-default * Make canvas-elevated a bit darker * Rename variables and use them in various components * Refactor button mixins * Remove fusion vars from Anki * Adjust button gradients * Refactor button mixins * Fix deck browser table td background color * Use color function in buttons.scss * Rework QTabWidget stylesheet * Fix crash on browser open * Perfect QTableView header * Fix bottom toolbar button gradient * Fix focus outline of bottom toolbar buttons * Fix custom webview scrollbar * Fix uses of vars in various webviews The command @use vars as * lead to repeated inclusion of the CSS vars. * Enable primary button color with mixin * Run prettier * Fix Python code style issues * Tweak colors * Lighten scrollbar shades in light theme * Fix code style issues caused by merge * Fix harsh border color in editor caused by leftover --medium-border variables, probably introduced with a merge commit. * Compile Sass before extracting Python colors/props This means the Python side doesn't need to worry about the map structure and Sass functions, just copy the output CSS values. * Desaturate primary button colors by 10% * Convert accidentally capitalized variable names to lowercase * Simplify color definitions with qcolor function * Remove default border-focus variable * Remove redundant colon * Apply custom scrollbar CSS only on Windows and Linux * Make border-subtle color brighter than background in dark theme * Make border-subtle color a shade brighter in light theme * Use border-subtle for NoteEditor and EditorToolbar border * Small patches |
||
Matthias Metelka
|
5f6ac1a916
|
Field redesign (#2002)
* Adjust size of legacy buttons * Revert "Adjust size of legacy buttons" This reverts commit fb888fe1db9050c34b1a7b0820e6da5ac91ccee6. * Remove unused function from #1476 * Use outline version for tag icon * Add chevron icons * Remove code icons, keep one pin icon version * Add code-bg color * Redesign fields * Remove unused import * Fix imports * Move PlainTextBadge between editing inputs where it belongs :) * Make whole separator line clickable * Fix transition and format * Don't show toggle when field is collapsed * Show toggle only on hover for mobile I'd like to implement a swipe mechanism. * Use tweened SVG for triangle instead of CSS hack * Implement more obvious HTML toggle on bottom right * Reduce field height by a few pixels * Reduce field height by two pixels * Show HTML toggle when PlainTextInput is active, regardless of hover/focus * Remove RichTextBadge.svelte * Create separate collapsed field state this means users can collapse fields with the HTML editor open and it will stay open when the field is expanded again. * Add slide out animation to EditingArea, RichTextInput and PlainTextInput only for collapsing, because it is choppy on expansion (common issue with Svelte transitions). * Fix aliasing issue on focused field corners * Make StickyBadge feel more responsive * Move StickyBadge closer to field border * Adjust field gutter/margins * Make LabelContainer sticky to make field operations accessible on fields with a lot of content. * Add back html icons, remove visual editor icons * Revert "Add code-bg color" This reverts commit 4200f354193710b3acd9bcf84b67958e200ddcdb. * Add rich text icon, remove strikethrough code icon * Revert PlainTextBadge to original position * Adjust margins in FieldState * Rename PlainTextBadge to SecondaryInputBadge in preparation for #1987 * Run eslint and prettier * Make whole LabelContainer clickable area for collapse/expand * Revert "Add slide out animation to EditingArea, RichTextInput and PlainTextInput" This reverts commit 9a2b3410d0ead37ae1da408d68e14507a058a613. * Fix error on collapse/expansion this was caused by the {#if} blocks, which resulted in the deletion of original EditingAreas. * Refocus when toggling chevron and secondary input badge * Revert "Revert "Add code-bg color"" This reverts commit 1cfd3bda65354ab90c1ab4cbbef47596a1be8754. * Use single rotating chevron icon and make it RTL-compatible * Remove redundant CSS transition rule * Introduce animated Collapsible component and fix refocus on toggle * Do not try to force repaint, as it is not required * Remove RTL store from LabelContainer the direction is already applied globally. * Collapse secondary input with field * Add focusedField to NoteEditorAPI * Replace :global CSS selector with class .visible thus removing the assumption that the component is used inside an EditorField. https://github.com/ankitects/anki/pull/2002#discussion_r944876448 * Use named function syntax instead of function expressions * Add explanation comment * Remove unnecessary :bind directive * Create CollapseBadge component * Move :global selector into .plain-text-input * Add comment explaining box-shadow pseudo-element * Move Collapsible from EditingArea, PlainTextInput and RichTextInput into user components * Rename SecondaryInputBadge to PlainTextBadge and remove generalization logic I kept the rich text icon inside icons.ts for future use. * Sort imports * Fix background-color for duplicates not showing with yet another pseudo-element :) The pseudo-element that covers up field borders on scroll caused this issue. Fighting fire with fire here. * Increase size of plain text toggle to original value again This makes the clickable area a bit bigger and looks slightly more consistent with StickyBadge. * Scrap pseudo-element mess in LabelContainer and tackle the actual issue * Add class .visible to StickyBadge too This introduces a peculiar bug: The active prop of StickyBadge resets to false when the mouse leaves the field - regardless of the actual back-end value. * Fix sticky badge resetting on mouseleave/blur * Apply overflow: hidden only during transition fixes MathJax handle getting cut off by fields * Remove unused variable * Fix visual bug caused by overflow:hidden not applying in time I tried several asynchronous approaches, but they all caused issues: either they prevented the CSS transition or they made field inputs lose focus. In the end I resorted to direct, synchronous DOM-manipulation and added an explanatory comment. * Decrease Collapsible load time by blocking first transition I noticed the sliding animation has a hefty performance impact when a large number of fields is loaded simultaneously. Blocking the first transition (which isn't even visible) results in a big boost in load time. * Replace usages of gap with margins for children * Revert unnecessary removal of grid-gap definition * Correct comments about flex-gap property mistook that for grid-gap. * Resolve style issues * Add minimum targets to gap comment Co-authored-by: Henrik Giesel <hengiesel@gmail.com> |
||
Henrik Giesel
|
52438fe4c9
|
Move focus into HTML editor when shown (#1861)
* Move focus into input field, when input is shown * Change trapFocusOut to move focus into available inputs - This means that e.g. closing the HTML editor with focus in it will focus the visual editor in turn * Prevent Control+A unselecting tag editor when no tags exist |
||
Henrik Giesel
|
0c81bbce04
|
Fix field not restored if active (#1639)
* Fix field not being restored after Undo, if field also has focus * Execute moveCaretToEnd after undoing a change - Otherwise the caret might be placed in seemingly random positions * Fix wording of comments * Remove autofocus functionality of EditingArea - instead await a tick in focusField - We used the autofocus prop for the initial focus setting when opening the editor. However it seems that awaiting tick in focusField also does the trick. |
||
Henrik Giesel
|
30bbbaf00b
|
Use eslint for sorting our imports (#1637)
* Make eslint sort our imports * fix missing deps in eslint rule (dae) Caught on Linux due to the stricter sandboxing * Remove exports-last eslint rule (for now?) * Adjust browserslist settings - We use ResizeObserver which is not supported in browsers like KaiOS, Baidu or Android UC * Raise minimum iOS version 13.4 - It's the first version that supports ResizeObserver * Apply new eslint rules to sort imports |
||
Henrik Giesel
|
a981e56008
|
Improved add-on extension API (#1626)
* Add componentHook functionality * Register package NoteEditor * Rename OldEditorAdapter to NoteEditor * Expose instances in component-hook as well * Rename NoteTypeButtons to NotetypeButtons * Move PreviewButton initialization to BrowserEditor.svelte * Remove focusInRichText - Same thing can be done by inspecting activeInput * Satisfy formatter * Fix remaining rebase issues * Add .bazel to .prettierignore * Rename currentField and activeInput to focused{Field,Input} * Move identifier to lib and registration to sveltelib * Fix Dynamic component insertion * Simplify editingInputIsRichText * Give extra warning in svelte/svelte.ts - This was caused by doing a rename of a files, that only differed in case: NoteTypeButtons.svelte to NotetypeButtons.svelte - It was quite tough to figure out, and this console.log might make it easier if it ever happens again * Change signature of contextProperty * Add ts/typings for add-on definition files * Add Anki types in typings/common/index.d.ts * Export without .svelte suffix It conflicts with how Svelte types its packages * Fix left over .svelte import from editor.py * Rename NoteTypeButtons to unrelated to ensure case-only rename * Rename back to NotetypeButtons.svelte * Remove unused component-hook.ts, Fix typing in lifecycle-hooks * Merge runtime-require and register-package into one file + Give some preliminary types to require * Rename uiDidLoad to loaded * Fix eslint / svelte-check * Rename context imports to noteEditorContext * Fix import name mismatch - I wonder why these issues are not caught by svelte-check? * Rename two missed usages of uiDidLoad * Fix ButtonDropdown from having wrong border-radius * Uniformly rename libraries to packages - I don't have a strong opinion on whether to name them libraries or packages, I just think we should have a uniform name. - JS/TS only uses the terms "module" and "namespace", however `package` is a reserved keyword for future use, whereas `library` is not. * Refactor registration.ts into dynamic-slotting - This is part of an effort to refactor the dynamic slotting (extending buttons) functionality out of components like ButtonGroup. * Remove dynamically-slottable logic from ButtonToolbar * Use DynamicallySlottable in editor-toolbar * Fix no border radius on indentation button dropdown * Fix AddonButtons * Remove Item/ButtonGroupItem in deck-options, where it's not necessary * Remove unnecessary uses of Item and ButtonGroupItem * Fix remaining tests * Fix relative imports * Revert change return value of remapBinToSrcDir to ./bazel/out... * Remove typings directory * Adjust comments for dynamic-slottings |
||
Henrik Giesel
|
739e286b0b
|
Fix some Mathjax issues (#1547)
* Move move-nodes logic into domlib Refactor input-manager Refactor out FocusTrap from EditingArea Remove unnecessary selecting of node from surround Add onInput interface to input-manager Create MathjaxElement.svelte - This should contain all the setup necessary for displaying <anki-mathjax> elements in the rich text input - Does not contain setup necessary for Mathjax Overlay Deal with backwards deletion, when caret inside anki-mathjax Set mathjax elements contenteditable=false Do not undecorate mathjaxx element on disconnect - Fixes issues, where Mathjax might undecorate when it is moved into a different div Add framed element custom element Introduce iterateActions to allow global hooks for RichTextInput Remove some old code Deal with deletion of frame handles Make Anki frame and frame handles restore each other Make FrameElement restore its structure upon modification Frame and strip off framing from MathjaxElement automatically Move FrameHandle to separate FrameStart/FrameEnd Refactor FrameHandle Set data-frames on FrameElement Fix logic error connected to FrameElement Communicate frameHandle move{in,out} to anki-mathjax Clear selection when blurring ContentEditable Make sure frame is destroyed when undecorating Mathjax Use Hairline space instead of zeroWidth - it has better behavior in the contenteditable when placing the caret via clicking Allow detection of block elements with `block` attribute - This way, anki-mathjax block="true" will make field a field be recognized to have block content Make block frame element operater without handles - Clicking on the left/right side of a block mathjax will insert a br element to that side When deleting, remove mathajax-element not just image Update MathjaxButtons to correctly show block state SelectAll when moving into inline anki mathjax Remove CodeMirror autofocus functionality Move it to Mathjaxeditor directly Fix getRangeAt throwing error Update older code to use cross-browser Fix issue with FrameHandles not being properyly removed Satisfy formatting Use === instead of node.isSameNode() Fix issue of focusTrap not initialized * Fix after rebasing * Fix focus not being moved to first field * Add documentation for input-manager and iterate-actions * Export logic of ContentEditable to content-editable * Fix issue with inserting newline right next to inline Mathjax * Fix reframing issue of Mathjax Svelte component * Allow for deletion of Inline Mathjax again * Rename iterate-actions to action-list * Add copyright header * Split off frame-handle from frame-element * Add some comments for framing process * Add mising return types |
||
Henrik Giesel
|
4966f3cc44
|
Add back wrap function (#1551)
* Remove surround from RichText and PlainText * Export wrap |
||
Henrik Giesel
|
c9bd39c6a2
|
Several editor fixes (#1478)
* Declare toolbar api via modifiable property * Fix addon buttons * Assign editing areas in a synchronous way * Restore the Tab shortcut that moves the caret to end - moveCaretToEnd is called twice now: The moveCaretToEnd calls in *TextInput causes the caret to be moved to the end when switching back from the window and back. - To fix this, I will need the code for saving and restoring locations from #1377 * Restore selections in the PlainTextInput * Improve type safety of destroyable - clearable-array was renamed to destroyable |
||
Henrik Giesel
|
c2768e2188
|
Translate Editor entirely to Svelte (#1403)
* Translate editor to Svelte Make editor fields grid rather than flexbox Refactor ButtonToolbar margins Remove remaining svelte.d.ts symlinks Implement saveNow Fix text surrounding Remove HTML editor button Clean up some empty files Add visual for new field state badges * Adds new IconConstrain.svelte to generalize the icon handling for IconButton and Badge Implement sticky functionality again Enable Editable and Codable field state badges Add shortcuts to FieldState badges Add Shift+F9 shortcut back Add inline padding back to editor fields, tag editor and toolbar Make Editable and Codable only "visually hidden" This way they are still updated in the background Otherwise reshowing them will always start them up empty Make empty editing area focusable Start with moving fieldsKey and currentFieldKey to context.ts Fix Codable being wrong size when opening for first time Add back drag'n'drop Make ButtonItem display: contents again * This will break the gap between ButtonGroup items, however once we have a newer Chromium version we should use CSS gap property anyway Fix most of typing issues Use --label-color background color LabelContainer Add back red color for dupes Generalize the editor toolbar in the multiroot editor to widgets Implement Notification.svelte for showing cloze hints Add colorful icon to notification Hook up Editable to EditingArea Move EditingArea into EditorField Include editorField in editor/context Fix rebasing issues Uniformly use SvelteComponentTyped Take LabelContainer out of EditingArea Use mirror-dom and node-store to export editable content Fix editable update mechanism Prepare passing the editing inputs as slots Pass in editing inputs as slots Use codable options again in codemirror Delete editor/lib.ts Remove CodableAdapter, Use more generic CodeMirror component Fix clicking LabelContainer to focus Use prettier Rename Editable to ContentEditable Fix writing Mathjax from Codable to Editable Correctly adjust output HTML from editable Refactor EditableStyles out of EditableContainer Pass Image and Mathjax Handle via slots to Editable Make Editable add its editingInputApi Make Editable hideable Fix font size not being set correctly Refactor both fieldFocused and focusInCodable to focusInEditable Fix focusIfField Bring back $activeInput Fix ClozeButton Remove signifyCustomInput Refactor MathjaxHandle Refactor out some logic into store-subscribe Fix Mathjax editor Use focusTrap instead of focusing div Delegate focus back to editingInput when refocusing focusTrap Elegantly move focus between editing inputs when closing/opening Make Codable tabbable Automatically move caret to end on editable and codable + remove from editingInput api Fix ButtonDropdown having two rows and missing button margins Make svelte_check and eslint pass Satisfy editor svelte_check Save field updates to db again Await editable styles before mounting content editable Remove unused import from OldEditorAdapter Add copyright header to OldEditorAdapter Update button active state from contenteditable * Use activateStickyShortcuts after waiting for noteEditorPromise * Set fields via stores, make tags correctly set * Add explaining comment to setFields * Fix ClozeButton * Send focus and blur events again * Fix Codable not correctly updating on blur with invalid HTML * Remove old code for special Enter behavior in tags * Do not use logical properties for ButtonToolbar margins * Remove getCurrentField Instead use noteEditor->currentField or noteEditor->activeInput * Remove Extensible type * Use context-property for NoteEditor, EditorField and EditingArea * Rename parameter in mirror-dom.allowResubscription * Fix cutOrCopy * Refactor context.ts into the individual components * Move focusing of editingArea up to editorField * Rename promiseResolve -> promiseWithResolver * Rename Editable->RichTextInput and Codable->PlainTextInput * Remove now unnecessary type assertion for `getNoteEditor` and `getEditingArea` * Refocus field after adding, so subscription to editing area is refreshed |