v0.32.7

tools/checks/appearance_density_buttons_0327_browser.py

@@ -0,0 +1,83 @@
+#!/usr/bin/env python3
+"""Optional Chromium regression: shared button sizing and Dashboard density.
+
+Uses the production HTML button markup and stylesheet without a running API.
+Run: python3 tools/checks/appearance_density_buttons_0327_browser.py
+"""
+from pathlib import Path
+import re
+import shutil
+from playwright.sync_api import sync_playwright
+
+ROOT = Path(__file__).resolve().parents[2]
+index = (ROOT / 'src/admin/web/index.html').read_text()
+css = (ROOT / 'src/admin/web/style.css').read_text()
+
+
+def button(button_id):
+    match = re.search(r'<button\b(?=[^>]*\bid="' + re.escape(button_id) + r'")[\s\S]*?</button>', index)
+    assert match, button_id
+    return match.group(0).replace(' hidden', '')
+
+
+html = f'''<!doctype html><html data-theme="dark"><head><meta name="viewport" content="width=device-width, initial-scale=1"><style>{css}</style></head>
+<body><main style="max-width:100%;padding:10px;box-sizing:border-box">
+<div class="page-intro-title-row"><h1>Overview</h1>
+{button('overview-refresh')}{button('overview-layout-open')}{button('overview-layout-unlock')}</div>
+<div class="appearance-settings-grid dashboard-appearance-grid"><div class="dashboard-widget-settings"><div class="dashboard-widget-settings-controls">
+{button('overview-layout-open-settings')}{button('dashboard-widget-expand')}
+</div></div></div>
+<div>{'<button class="quiet" id="reference-quiet">Reference</button><button class="outline" id="reference-outline">Reference</button>'}</div>
+<section id="panel-overview"><div class="stats-grid dashboard-overview-grid is-aligned">
+<article class="stat stat-chart" data-dashboard-widget="http_protocol"><span>Requests</span><strong>100</strong><small>Rate</small><svg viewBox="0 0 100 25"></svg></article>
+<article class="card" data-dashboard-widget="diagnostics"><div class="card-heading"><h2>Diagnostics</h2></div><p>Metrics</p></article>
+</div></section></main></body></html>'''
+
+with sync_playwright() as p:
+    browser = p.chromium.launch(executable_path=shutil.which('chromium') or shutil.which('chromium-browser'), args=['--no-sandbox'])
+    for width in [320, 393, 1280]:
+        page = browser.new_page(viewport={'width': width, 'height': 900})
+        page.set_content(html)
+        for style in ['normal', 'compact']:
+            page.evaluate('(value) => document.documentElement.dataset.buttonStyle = value', style)
+            computed = page.evaluate('''() => {
+                const values = id => {
+                    const s = getComputedStyle(document.getElementById(id));
+                    return [s.fontSize, s.minHeight, s.paddingTop, s.paddingRight, s.paddingBottom, s.paddingLeft];
+                };
+                return Object.fromEntries(['overview-refresh', 'overview-layout-open', 'overview-layout-unlock',
+                    'overview-layout-open-settings', 'dashboard-widget-expand', 'reference-quiet', 'reference-outline']
+                    .map(id => [id, values(id)]));
+            }''')
+            for target, reference in [
+                ('overview-refresh', 'reference-quiet'),
+                ('overview-layout-open', 'reference-quiet'),
+                ('overview-layout-unlock', 'reference-outline'),
+                ('overview-layout-open-settings', 'reference-outline'),
+                ('dashboard-widget-expand', 'reference-quiet'),
+            ]:
+                assert computed[target] == computed[reference], (width, style, target, computed[target], computed[reference])
+            print('PASS buttons', width, style, computed['overview-refresh'])
+        measures = {}
+        for density in ['normal', 'compact', 'ultra']:
+            page.evaluate('(value) => document.documentElement.dataset.dashboardDensity = value', density)
+            measures[density] = page.evaluate('''() => {
+                const stat = document.querySelector('#panel-overview .stat');
+                const value = stat.querySelector('strong');
+                const svg = stat.querySelector('svg');
+                const card = document.querySelector('#panel-overview .card');
+                const title = card.querySelector('h2');
+                return {statPadding: parseFloat(getComputedStyle(stat).paddingTop),
+                    valueSize: parseFloat(getComputedStyle(value).fontSize),
+                    chartHeight: parseFloat(getComputedStyle(svg).height),
+                    cardPadding: parseFloat(getComputedStyle(card).paddingTop),
+                    titleSize: parseFloat(getComputedStyle(title).fontSize),
+                    overflow: document.documentElement.scrollWidth > window.innerWidth};
+            }''')
+            assert not measures[density]['overflow'], (width, density)
+        for key in ['statPadding', 'valueSize', 'chartHeight', 'cardPadding', 'titleSize']:
+            values = [measures[d][key] for d in ['normal', 'compact', 'ultra']]
+            assert values[0] > values[1] > values[2], (width, key, values)
+        print('PASS densities', width, measures)
+        page.close()
+    browser.close()