84 lines
4.9 KiB
Python
Executable File
84 lines
4.9 KiB
Python
Executable File
#!/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()
|