Update web backend to support test mode

.github/workflows/ci.yml

@@ -141,7 +141,7 @@ jobs:
  strategy:
  fail-fast: false
  matrix:
- backend: [ "macOS", "windows", "linux", "android", "iOS" ]
+ backend: [ "macOS", "windows", "linux", "android", "iOS", "web" ]
  include:
  - pre-command:
  briefcase-run-prefix:
@@ -193,6 +193,11 @@ jobs:
  - backend: android
  runs-on: macos-12
  briefcase-run-args: " -d '{\"avd\":\"beePhone\"}' --Xemulator=-no-window --Xemulator=-no-snapshot --Xemulator=-no-audio --Xemulator=-no-boot-anim --shutdown-on-exit"
+
+ - backend: web
+ runs-on: ubuntu-22.04
+ briefcase-run-args: " --no-browser"
+
  steps:
  - uses: actions/checkout@v4.1.1
  with:

examples/tutorial3/tutorial/app.py

@@ -1,16 +1,18 @@
 import toga
-from toga.style.pack import CENTER, COLUMN, ROW, Pack
+from toga.style.pack import COLUMN, ROW, Pack
 
 
 class Graze(toga.App):
  def startup(self):
  self.main_window = toga.MainWindow()
 
  self.webview = toga.WebView(
- on_webview_load=self.on_webview_loaded, style=Pack(flex=1)
+ on_webview_load=self.on_webview_loaded,
+ style=Pack(flex=1),
  )
  self.url_input = toga.TextInput(
- value="https://beeware.org/", style=Pack(flex=1)
+ value="https://beeware.org/",
+ style=Pack(flex=1),
  )
 
  box = toga.Box(
@@ -24,11 +26,7 @@ def startup(self):
  style=Pack(width=50, padding_left=5),
  ),
  ],
- style=Pack(
- direction=ROW,
- alignment=CENTER,
- padding=5,
- ),
+ style=Pack(direction=ROW, padding=5),
  ),
  self.webview,
  ],

testbed/pyproject.toml

@@ -105,3 +105,5 @@ android.defaultConfig.python {
 requires = [
  "../web"
 ]
+# FIXME: needed for test purposes to use a pre-release template.
+template_branch = "web-test"

web/setup.cfg

@@ -51,6 +51,7 @@ toga.backends =
 
 [options.package_data]
 toga_web =
+ inserts/**
  static/**
 
 [options.packages.find]

web/src/toga_web/app.py

@@ -1,3 +1,5 @@
+import asyncio
+
 import toga
 from toga.command import GROUP_BREAK, SECTION_BREAK
 from toga_web.libs import create_element, js
@@ -13,6 +15,7 @@ class App:
  def __init__(self, interface):
  self.interface = interface
  self.interface._impl = self
+ self.loop = asyncio.get_event_loop()
 
  def create(self):
  # self.resource_path = os.path.dirname(os.path.dirname(NSBundle.mainBundle.bundlePath))

web/src/toga_web/factory.py

@@ -34,7 +34,8 @@
 from .widgets.textinput import TextInput
 
 # from .widgets.tree import Tree
-# from .widgets.webview import WebView
+from .widgets.webview import WebView
+
 # from .window import Window
 
 
@@ -77,7 +78,7 @@ def not_implemented(feature):
  # 'Table',
  "TextInput",
  # 'Tree',
- # 'WebView',
+ "WebView",
  # 'Window',
 ]
 

web/src/toga_web/inserts/index.html:header

@@ -0,0 +1,4 @@
+ <link rel="stylesheet"
+ href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.3.0/dist/themes/light.css" />
+ <script type="module"
+ src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.3.0/dist/shoelace.js"></script>

web/src/toga_web/static/toga.css → web/src/toga_web/inserts/toga.css

@@ -10,6 +10,9 @@
 html, body {
  height: 100%;
  margin: 0;
+ display: flex;
+ flex-direction: column;
+ font-family: sans-serif;
 }
 
 /* If a custom element hasn't been defined yet, hide it from rendering */
@@ -79,6 +82,7 @@ main.toga.window {
  overflow: hidden;
  display: flex;
  flex-direction: column;
+ flex-grow: 1;
 }
 
 main.toga.window > .container {

web/src/toga_web/widgets/webview.py

@@ -0,0 +1,43 @@
+from travertino.size import at_least
+
+from toga.widgets.webview import JavaScriptResult
+
+from .base import Widget
+
+
+class WebView(Widget):
+ def create(self):
+ self.native = self._create_native_widget("iframe")
+
+ def get_url(self):
+ url = str(self.native.src)
+ return None if url == "about:blank" else url
+
+ def set_url(self, value, future=None):
+ if value:
+ self.native.src = value
+ else:
+ self.native.src = "about:blank"
+
+ self.loaded_future = future
+
+ def set_content(self, root_url, content):
+ pass
+ # self.native.loadHTMLString(content, baseURL=NSURL.URLWithString(root_url))
+
+ def get_user_agent(self):
+ # return str(self.native.valueForKey("userAgent"))
+ return "user agent?"
+
+ def set_user_agent(self, value):
+ # self.native.customUserAgent = value
+ pass
+
+ def evaluate_javascript(self, javascript: str, on_result=None) -> str:
+ result = JavaScriptResult()
+
+ return result
+
+ def rehint(self):
+ self.interface.intrinsic.width = at_least(self.interface._MIN_WIDTH)
+ self.interface.intrinsic.height = at_least(self.interface._MIN_HEIGHT)