Add a flag to allow loading the fields dialog in a web view (#1706)

* Load fields_web from fields.py if appropriate flag is set

* Add FieldsPage as entry for new fields view

* Pass mypy

* Fix pylint

* Fix fields_web in Qt5 (dae)

May not be related to the CI error, but required for compatibility
with Qt5.

qt/aqt/data/web/pages/BUILD.bazel

@@ -6,6 +6,7 @@ _pages = [
     "deck-options",
     "change-notetype",
     "card-info",
+    "fields",
 ]
 
 [copy_files_into_group(

qt/aqt/fields.py

@@ -1,6 +1,9 @@
 # Copyright: Ankitects Pty Ltd and contributors
 # License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
+from __future__ import annotations
+
+import os
 from typing import Optional
 
 import aqt
@@ -41,11 +44,28 @@ class FieldDialog(QDialog):
         self.model = nt
         self.mm._remove_from_cache(self.model["id"])
         self.change_tracker = ChangeTracker(self.mw)
-        self.form = aqt.forms.fields.Ui_Dialog()
+
-        self.form.setupUi(self)
         self.setWindowTitle(
             without_unicode_isolation(tr.fields_fields_for(val=self.model["name"]))
         )
+
+        if os.getenv("ANKI_EXPERIMENTAL_FIELDS_WEB"):
+            form = aqt.forms.fields_web.Ui_Dialog()
+            form.setupUi(self)
+
+            self.webview = form.webview
+            self.webview.set_title("fields")
+
+            self.show()
+            self.refresh()
+            self.webview.set_bridge_command(self._on_bridge_cmd, self)
+            self.activateWindow()
+            return
+
+        self.form = aqt.forms.fields.Ui_Dialog()
+        self.form.setupUi(self)
+        self.webview = None
+
         disable_help_button(self)
         self.form.buttonBox.button(QDialogButtonBox.StandardButton.Help).setAutoDefault(
             False
@@ -64,6 +84,12 @@ class FieldDialog(QDialog):
         self.form.fieldList.setCurrentRow(open_at)
         self.exec()
 
+    def refresh(self) -> None:
+        self.webview.load_ts_page("fields")
+
+    def _on_bridge_cmd(self, cmd: str) -> bool:
+        return False
+
     ##########################################################################
 
     def fillFields(self) -> None:
@@ -243,6 +269,10 @@ class FieldDialog(QDialog):
             self.change_tracker.mark_basic()
 
     def reject(self) -> None:
+        if self.webview:
+            self.webview.cleanup()
+            self.webview = None
+
         if self.change_tracker.changed():
             if not askUser("Discard changes?"):
                 return

qt/aqt/forms/__init__.py

@@ -20,6 +20,7 @@ from . import edithtml
 from . import emptycards
 from . import exporting
 from . import fields
+from . import fields_web
 from . import finddupes
 from . import findreplace
 from . import getaddons

qt/aqt/forms/fields_web.py

@@ -0,0 +1,5 @@
+from aqt.qt import qtmajor
+if qtmajor > 5:
+  from .fields_web_qt6 import *
+else:
+  from .fields_web_qt5 import *  # type: ignore

qt/aqt/forms/fields_web.ui

@@ -0,0 +1,49 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<ui version="4.0">
+ <class>Dialog</class>
+ <widget class="QDialog" name="Dialog">
+  <property name="geometry">
+   <rect>
+    <x>0</x>
+    <y>0</y>
+    <width>400</width>
+    <height>300</height>
+   </rect>
+  </property>
+  <property name="windowTitle">
+   <string notr="true">Dialog</string>
+  </property>
+  <property name="windowIcon">
+   <iconset resource="icons.qrc">
+    <normaloff>:/icons/anki.png</normaloff>:/icons/anki.png</iconset>
+  </property>
+  <layout class="QVBoxLayout" name="verticalLayout">
+   <property name="spacing">
+    <number>0</number>
+   </property>
+   <property name="margin">
+    <number>0</number>
+   </property>
+   <item>
+    <widget class="AnkiWebView" name="webview" native="true">
+     <property name="url" stdset="0">
+      <url>
+       <string notr="true">about:blank</string>
+      </url>
+     </property>
+    </widget>
+   </item>
+  </layout>
+ </widget>
+ <customwidgets>
+  <customwidget>
+   <class>AnkiWebView</class>
+   <extends>QWidget</extends>
+   <header location="global">aqt/webview</header>
+   <container>1</container>
+  </customwidget>
+ </customwidgets>
+ <resources>
+  <include location="icons.qrc"/>
+ </resources>
+</ui>

qt/aqt/forms/fields_web_qt6.py

@@ -0,0 +1 @@
+../../../.bazel/bin/qt/aqt/forms/fields_web_qt6.py

ts/fields/BUILD.bazel

@@ -0,0 +1,73 @@
+load("//ts:prettier.bzl", "prettier_test")
+load("//ts:eslint.bzl", "eslint_test")
+load("//ts/svelte:svelte.bzl", "compile_svelte", "svelte_check")
+load("//ts:esbuild.bzl", "esbuild")
+load("//ts:generate_page.bzl", "generate_page")
+load("//ts:compile_sass.bzl", "compile_sass")
+load("//ts:typescript.bzl", "typescript")
+
+generate_page(page = "fields")
+
+compile_sass(
+    srcs = ["fields-base.scss"],
+    group = "base_css",
+    visibility = ["//visibility:public"],
+    deps = [
+        "//sass:base_lib",
+        "//sass:scrollbar_lib",
+        "//sass/bootstrap",
+    ],
+)
+
+_ts_deps = [
+    "//ts/components",
+    "//ts/lib",
+    "//ts/sveltelib",
+    "@npm//svelte",
+]
+
+compile_svelte(deps = _ts_deps)
+
+typescript(
+    name = "index",
+    deps = _ts_deps + [
+        ":svelte",
+    ],
+)
+
+esbuild(
+    name = "fields",
+    args = {
+        "loader": {".svg": "text"},
+    },
+    entry_point = "index.ts",
+    output_css = "fields.css",
+    visibility = ["//visibility:public"],
+    deps = [
+        ":base_css",
+        ":index",
+        ":svelte",
+    ],
+)
+
+# Tests
+################
+
+prettier_test()
+
+eslint_test()
+
+svelte_check(
+    name = "svelte_check",
+    srcs = glob([
+        "*.ts",
+        "*.svelte",
+    ]) + [
+        "//sass:button_mixins_lib",
+        "//sass/bootstrap",
+        "@npm//@types/bootstrap",
+        "@npm//@types/lodash-es",
+        "@npm//@types/marked",
+        "//ts/components",
+    ],
+)

ts/fields/FieldsPage.svelte

@@ -0,0 +1,8 @@
+<!--
+jopyright: Ankitects Pty Ltd and contributors
+License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
+-->
+<script lang="ts">
+</script>
+
+<div>Fields</div>

ts/fields/fields-base.scss

@@ -0,0 +1,29 @@
+@use "sass/vars";
+@use "sass/bootstrap-dark";
+
+@import "sass/base";
+
+@import "sass/bootstrap/scss/alert";
+@import "sass/bootstrap/scss/buttons";
+@import "sass/bootstrap/scss/button-group";
+@import "sass/bootstrap/scss/close";
+@import "sass/bootstrap/scss/grid";
+@import "sass/bootstrap-forms";
+
+.night-mode {
+    @include bootstrap-dark.night-mode;
+}
+
+body {
+    width: min(100vw, 70em);
+    margin: 0 auto;
+}
+
+html {
+    overflow-x: hidden;
+}
+
+#main {
+    padding: 0.5em 0.5em 1em 0.5em;
+    height: 100vh;
+}

ts/fields/index.ts

@@ -0,0 +1,23 @@
+// Copyright: Ankitects Pty Ltd and contributors
+// License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
+
+import "./fields-base.css";
+
+import { ModuleName, setupI18n } from "../lib/i18n";
+import { checkNightMode } from "../lib/nightmode";
+import FieldsPage from "./FieldsPage.svelte";
+
+const i18n = setupI18n({
+    modules: [ModuleName.ACTIONS, ModuleName.CHANGE_NOTETYPE, ModuleName.KEYBOARD],
+});
+
+export async function setupFieldsPage(): Promise<FieldsPage> {
+    checkNightMode();
+
+    await i18n;
+    return new FieldsPage({
+        target: document.body,
+    });
+}
+
+setupFieldsPage();

ts/fields/tsconfig.json

@@ -0,0 +1,10 @@
+{
+    "extends": "../tsconfig.json",
+    "include": ["*"],
+    "references": [
+        { "path": "../lib" },
+        { "path": "../sveltelib" },
+        { "path": "../components" }
+    ],
+    "compilerOptions": {}
+}