@qtoggle/qui 1.20.0-alpha.3 → 1.20.0-alpha.5

package/less/global-glass.less

@@ -9,8 +9,8 @@ div.qui-global-glass {
     left: 0;
     right: 0;
     bottom: 0;
+    /* backdrop-filter is set once below and never changes, so listing it here only ever cost a property to watch */
     transition: opacity @transition-duration ease,
-                backdrop-filter @transition-duration linear,
                 margin-top @transition-duration linear;
     opacity: 0;
     display: flex;

package/less/lists.less

@@ -29,10 +29,15 @@ div.qui-list-child {
 
 div.qui-list-child.qui-list-item {
 
-    /* Nothing inside an item is ever painted outside of it, since div.qui-list-child above already clips with
-     * overflow: hidden. Containment is therefore visually inert here, but it lets the engine scope layout and style
-     * invalidation to the single row that changed, instead of the whole list, and skip painting off-screen rows. */
-    contain: layout style paint;
+    /* No `contain` here, deliberately. Layout or paint containment makes each row an independent unit for pixel
+     * snapping, and the separator below is a 0.0625em border -- one device pixel at the default font size, but a
+     * fractional one as soon as the page is zoomed or the root font size is not 16px. Snapped per row rather than
+     * across the list, some of those borders round away to nothing and the separator simply vanishes for a few rows.
+     * Reproduced at a 53.6px row pitch: 7 of 10 separators drawn with containment, 10 of 10 without. `contain: paint`
+     * alone and `contain: layout style` alone each do it; only `contain: style` is safe, and that buys nothing.
+     *
+     * The off-screen saving is not lost: content-visibility on the icon-label view below implies containment on that
+     * element, which carries no border of its own. */
 
     &.hidden {
         opacity: 0;

package/less/main-ui.less

@@ -24,11 +24,13 @@ div.qui-main-container-glass {
     right: 0;
     bottom: 0;
     left: 0;
-    transition: backdrop-filter @transition-duration linear;
-}
+    opacity: 0;
 
-div.qui-main-container-glass.visible {
+    /* The filter is constant and only the opacity of the filtered layer is animated. Transitioning backdrop-filter
+     * itself gives the compositor a different filter to apply on every frame, across the whole viewport, and nothing
+     * it can cache. There is no cost while hidden: VisibilityManager sets display: none once the fade has finished. */
     backdrop-filter: @modal-background-filter;
+    transition: opacity @transition-duration linear;
 
     /* Workaround for Firefox that doesn't support backdrop-filter property */
     @supports (-moz-appearance:none) {
@@ -36,6 +38,10 @@ div.qui-main-container-glass.visible {
     }
 }
 
+div.qui-main-container-glass.visible {
+    opacity: 1;
+}
+
 div.qui-pages-container {
     height: 100%;
 }

package/less/pages/page.less

@@ -27,10 +27,36 @@ div.qui-page.visible {
     z-index: 1;
 }
 
-body.small-screen > div.qui-main-container > div.qui-pages-container > div.qui-page.visible,
-body.small-screen > div.qui-global-glass > div.qui-global-glass-container > div.qui-page.visible {
+/* On a small screen a page is always exactly as wide as its container, so translateX(100%) lands in the very same
+ * place as left: 100% -- but on the compositor, instead of relayouting and repainting both page subtrees on every
+ * frame of the slide.
+ *
+ * The resting state is deliberately `transform: none` and not `translateX(0)`: any transform other than `none` makes
+ * the page a containing block for its `position: fixed` descendants, which would unpin the form button bar (see
+ * forms/form.less). Interpolating out of `none` animates perfectly well, and while a page is actually sliding, its
+ * button bar travelling with it is what one wants anyway.
+ *
+ * The desktop column layout deliberately stays on `left`/`width`: there a page is narrower than its container, so
+ * translateX(100%) would not carry it clear of the viewport, and the slide distance would have to be computed per
+ * page against its own width. */
+body.small-screen > div.qui-main-container > div.qui-pages-container > div.qui-page,
+body.small-screen > div.qui-global-glass > div.qui-global-glass-container > div.qui-page {
     width: 100% !important;
     left: 0 !important;
+    transform: translateX(100%);
+    transition: opacity @transition-duration ease-out,
+                transform @transition-duration ease;
+
+    &.attached {
+        transform: translateX(-100%);
+    }
+
+    /* Popups fade in place; they never slide */
+    &.popup,
+    &.visible {
+        transform: none;
+    }
+
 }
 
 div.qui-page.current {

package/less/widgets/check-button.less

@@ -20,7 +20,7 @@ div.qui-check-button {
     transition+: background @transition-duration ease,
                  color @transition-duration ease,
                  opacity @transition-duration ease,
-                 border @transition-duration ease;
+                 border-color @transition-duration ease;
     .qui-focusable-widget();
 
     &:FOCUS {

package/less/widgets/common-buttons.less

@@ -4,11 +4,14 @@
 @import (reference) "common";
 
 
+/* border-color, not the border shorthand: the width and style of these borders are set once and never animate, so
+ * naming the colour keeps the fade while leaving border-width and border-style -- the two that would cost layout --
+ * out of the transition entirely. */
 .qui-base-button {
     transition: background @transition-duration ease,
                 color @transition-duration ease,
                 opacity @transition-duration ease,
-                border @transition-duration ease;
+                border-color @transition-duration ease;
     box-sizing: border-box;
     cursor: pointer;
     .noselect;
@@ -73,7 +76,7 @@
     transition+: background @transition-duration ease,
                  color @transition-duration ease,
                  opacity @transition-duration ease,
-                 border @transition-duration ease;
+                 border-color @transition-duration ease;
     .qui-focusable-widget();
 
     &:FOCUS {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@qtoggle/qui",
   "description": "A JavaScript UI library with batteries included.",
-  "version": "1.20.0-alpha.3",
+  "version": "1.20.0-alpha.5",
   "author": {
     "name": "Calin Crisan",
     "email": "ccrisan@gmail.com"
@@ -12,6 +12,7 @@
   "keywords": [],
   "license": "Apache-2.0",
   "dependencies": {
+    "@babel/runtime": "^7.29.7",
     "jquery": "^3",
     "jquery-mousewheel": "*",
     "jquery-ui": "^1",
@@ -22,6 +23,7 @@
     "@babel/core": "^7.27.0",
     "@babel/eslint-parser": "^7.27.0",
     "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@babel/plugin-transform-runtime": "^7.29.7",
     "@babel/preset-env": "^7.27.0",
     "babel-loader": "^8",
     "css-loader": "^3",

package/pyproject.toml

@@ -1,6 +1,6 @@
 [project]
 name = "qui-server"
-version = "1.20.0-alpha.3"
+version = "1.20.0-alpha.5"
 description = "A fully fledged qToggle implementation written in Python"
 authors = [
     {name = "Calin Crisan", email = "ccrisan@gmail.com"},

package/qui/templates/manifest.json

@@ -7,18 +7,18 @@
     {% if theme_color -%}"theme_color": "{{ theme_color }}",{%- endif %}
     {% if background_color -%}"background_color": "{{ background_color }}",{%- endif %}
     "icons": [
-        {"src": "{{ static_url }}/img/launcher-icon-16.png",  "sizes": "16x16",   "type": "image/png"},
-        {"src": "{{ static_url }}/img/launcher-icon-32.png",  "sizes": "32x32",   "type": "image/png"},
-        {"src": "{{ static_url }}/img/launcher-icon-36.png",  "sizes": "36x36",   "type": "image/png"},
-        {"src": "{{ static_url }}/img/launcher-icon-48.png",  "sizes": "48x48",   "type": "image/png"},
-        {"src": "{{ static_url }}/img/launcher-icon-64.png",  "sizes": "64x64",   "type": "image/png"},
-        {"src": "{{ static_url }}/img/launcher-icon-72.png",  "sizes": "72x72",   "type": "image/png"},
-        {"src": "{{ static_url }}/img/launcher-icon-96.png",  "sizes": "96x96",   "type": "image/png"},
-        {"src": "{{ static_url }}/img/launcher-icon-144.png", "sizes": "144x144", "type": "image/png"},
-        {"src": "{{ static_url }}/img/launcher-icon-192.png", "sizes": "192x192", "type": "image/png"},
-        {"src": "{{ static_url }}/img/launcher-icon-256.png", "sizes": "256x256", "type": "image/png"},
-        {"src": "{{ static_url }}/img/launcher-icon-384.png", "sizes": "384x384", "type": "image/png"},
-        {"src": "{{ static_url }}/img/launcher-icon-512.png", "sizes": "512x512", "type": "image/png"}
+        {"src": "{{ static_url }}/img/launcher-icon-16.png?h={{ build_hash }}",  "sizes": "16x16",   "type": "image/png"},
+        {"src": "{{ static_url }}/img/launcher-icon-32.png?h={{ build_hash }}",  "sizes": "32x32",   "type": "image/png"},
+        {"src": "{{ static_url }}/img/launcher-icon-36.png?h={{ build_hash }}",  "sizes": "36x36",   "type": "image/png"},
+        {"src": "{{ static_url }}/img/launcher-icon-48.png?h={{ build_hash }}",  "sizes": "48x48",   "type": "image/png"},
+        {"src": "{{ static_url }}/img/launcher-icon-64.png?h={{ build_hash }}",  "sizes": "64x64",   "type": "image/png"},
+        {"src": "{{ static_url }}/img/launcher-icon-72.png?h={{ build_hash }}",  "sizes": "72x72",   "type": "image/png"},
+        {"src": "{{ static_url }}/img/launcher-icon-96.png?h={{ build_hash }}",  "sizes": "96x96",   "type": "image/png"},
+        {"src": "{{ static_url }}/img/launcher-icon-144.png?h={{ build_hash }}", "sizes": "144x144", "type": "image/png"},
+        {"src": "{{ static_url }}/img/launcher-icon-192.png?h={{ build_hash }}", "sizes": "192x192", "type": "image/png"},
+        {"src": "{{ static_url }}/img/launcher-icon-256.png?h={{ build_hash }}", "sizes": "256x256", "type": "image/png"},
+        {"src": "{{ static_url }}/img/launcher-icon-384.png?h={{ build_hash }}", "sizes": "384x384", "type": "image/png"},
+        {"src": "{{ static_url }}/img/launcher-icon-512.png?h={{ build_hash }}", "sizes": "512x512", "type": "image/png"}
     ],
     "start_url": ".",
     "display": "standalone"

package/qui/templates/service-worker.js

@@ -99,7 +99,9 @@ function sendClientMessage(message, uncontrolled = false) {
 }
 
 function shouldCacheRequest(request) {
-    return request.url.match(cacheURLRegex) && (request.method === 'GET')
+    /* Match on the path alone. Every asset URL carries a ?h=<build hash> query, which an extension pattern anchored
+     * at the end of the string would never match. */
+    return new URL(request.url).pathname.match(cacheURLRegex) && (request.method === 'GET')
 }
 
 function shouldCacheResponse(response) {
@@ -113,19 +115,21 @@ self.addEventListener('activate', function (event) {
 
     function deleteCache(name) {
         logDebug(`deleting cache ${name}`)
-        caches.delete(name)
+        return caches.delete(name)
     }
 
     event.waitUntil(
-        /* Become available to all pages */
-        self.clients.claim().then(function () {
-            /* Clear all caches starting with our app name */
+        Promise.all([
+            /* Become available to all pages */
+            self.clients.claim(),
+            /* Clear the caches left behind by other builds -- but not the one this build is about to fill, whose
+             * name also starts with the app name */
             caches.keys().then(function (cacheNames) {
                 return Promise.all(cacheNames
-                                   .filter(name => name.startsWith(`${appName}-`))
+                                   .filter(name => name.startsWith(`${appName}-`) && name !== cacheName)
                                    .map(name => deleteCache(name)))
             })
-        })
+        ])
     )
 })
 
@@ -138,8 +142,9 @@ self.addEventListener('fetch', function (event) {
     }
 
     let url = event.request.url
-    /* Ensure URL has build hash */
-    if (!url.includes('?h=') && !url.includes('&h=')) {
+    let requestedHash = new URL(url).searchParams.get('h')
+    if (requestedHash == null) {
+        /* Ensure URL has build hash */
         if (url.includes('?')) {
             url += `&h=${buildHash}`
         }
@@ -147,6 +152,12 @@ self.addEventListener('fetch', function (event) {
             url += `?h=${buildHash}`
         }
     }
+    else if (requestedHash !== buildHash) {
+        /* A URL left over from another build, most likely requested by a page that was already open when this worker
+         * took over. Send it to the network untouched rather than filling this build's cache with a key that nothing
+         * is going to ask for again. */
+        return
+    }
 
     let request = new Request(url, event.request)
 

package/webpack/webpack-common.js

@@ -211,8 +211,24 @@ function makeJSRule({type, appFullPath}) {
             {
                 loader: 'babel-loader',
                 options: {
-                    presets: ['@babel/preset-env'],
-                    plugins: ['@babel/plugin-proposal-class-properties']
+                    /* The entry is a <script type="module"> with no nomodule fallback, so a browser that cannot run
+                     * ES modules never gets this far. Targeting them is the honest floor -- and it is the floor the
+                     * markup already enforces, so it drops no browser that could previously run the app.
+                     *
+                     * Set here rather than in a .browserslistrc because the build compiles QUI's own sources from a
+                     * sibling checkout outside the app's tree, where browserslist config resolution would depend on
+                     * the working directory, and because it keeps one source of truth for both repos. */
+                    presets: [['@babel/preset-env', {targets: {esmodules: true}}]],
+                    plugins: [
+                        '@babel/plugin-proposal-class-properties',
+                        /* Import the remaining helpers from a shared runtime rather than inlining a copy of
+                         * each into every module that needs one. useESModules defaults to false, which would pull
+                         * the CommonJS builds of those helpers and cost webpack its tree shaking and module
+                         * concatenation across them; "auto" takes the answer from the bundler's own declared
+                         * capability instead of asserting it here. (Babel 8 drops the option and always
+                         * auto-detects, so it comes out again with that upgrade.) */
+                        ['@babel/plugin-transform-runtime', {useESModules: 'auto'}]
+                    ]
                 }
             }
         ]