Record UI implementation lesson

Ariver

2026-06-18 16ee4576a9ff3c4f91cc30cb4cedbfb41fb3de14

 C3.tools/round1-app-shelf-fixture-qa.sh

@@ -104,8 +104,17 @@
        print(json.dumps(report, indent=2, ensure_ascii=False), file=sys.stderr)
        sys.exit(1)

def expected_index_text(index):
    symbols = list("1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ")
    if index < len(symbols):
        return symbols[index]
    overflow = index - len(symbols)
    return symbols[10 + (overflow // 26) % 26] + symbols[10 + overflow % 26]

root = report.get("rootView", {})
items = root.get("appShelfItems", [])
columns = root.get("waterfallColumns", [])
segments = root.get("spaceLaneSegments", [])

require(report.get("snapshotLoaded") is True, "snapshotLoaded must be true")
require(report.get("appCount") == fixture_app_count, "fixture appCount must match requested count")
@@ -125,14 +134,42 @@
    require(root.get("appShelfContentWidth", 0) <= root.get("appShelfVisibleWidth", 0), "non-scrollable fixture App Shelf content must fit visible width")
    require(root.get("appShelfMaxScrollOffset", 0) == 0, "non-scrollable fixture App Shelf must expose zero max scroll offset")
require(root.get("appShelfHoveredIndex") == hover_index, "fixture App Shelf must expose requested hovered index")
require(len(columns) == fixture_app_count, "Waterfall column reports must match fixture count")
require(sum(1 for item in items if item.get("isSelected") is True) == 1, "App Shelf must expose one selected app")
require(sum(1 for item in items if item.get("isHovered") is True) == 1, "App Shelf must expose one hovered app")
require(sum(1 for column in columns if column.get("isHovered") is True) == 1, "Waterfall must expose one hovered column")
require(items[0].get("isSelected") is True, "fixture first app should be selected")
require(items[hover_index].get("isHovered") is True, "fixture requested app should be hovered")
require("selected" in items[0].get("visualStates", []), "selected app must expose selected visual state")
require(columns[hover_index].get("isHovered") is True, "fixture requested app column should be hovered")
require("selectedVisualSuppressed" in items[0].get("visualStates", []), "non-hovered selected app must suppress selected visual state")
require("hover" in items[hover_index].get("visualStates", []), "hovered app must expose hover visual state")
require(items[0].get("iconFrame", {}).get("width") == 68, "selected app icon must be 68pt")
require("hover" in columns[hover_index].get("visualStates", []), "hovered column must expose hover visual state")
require(items[0].get("iconFrame", {}).get("width") == expected_icon_size, "non-hovered selected app icon must match normal fixture icon size")
require(items[hover_index].get("iconFrame", {}).get("width") == 68, "hovered app icon must be 68pt")

blue_reference = {"red": 135 / 255, "green": 200 / 255, "blue": 1.0, "alpha": 1.0}
hovered_title_color = columns[hover_index].get("appNameColor", {})
hovered_header_color = columns[hover_index].get("headerBackgroundColor", {})
hovered_count_color = columns[hover_index].get("countColor", {})
for channel in ("red", "green", "blue"):
    require(
        abs(hovered_header_color.get(channel, -1) - blue_reference.get(channel, -2)) <= 0.002,
        f"hovered column header must use #87C8FF for {channel}"
    )
require(hovered_header_color.get("alpha", 0) >= 0.98, "hovered column header blue fill must be opaque")
for color_name, color in (("title", hovered_title_color), ("count", hovered_count_color)):
    for channel in ("red", "green", "blue", "alpha"):
        require(abs(color.get(channel, -1) - 1.0) <= 0.002, f"hovered column {color_name} text must be pure white for {channel}")
for index, column in enumerate(columns):
    if index == hover_index:
        continue
    require(column.get("isHovered") is False, "non-hovered columns must not be marked hovered")
    require("hover" not in column.get("visualStates", []), "non-hovered columns must not expose hover visual state")
    normal_header = column.get("headerBackgroundColor", {})
    require(
        any(abs(normal_header.get(channel, -1) - blue_reference[channel]) > 0.05 for channel in ("red", "green", "blue")),
        "non-hovered column headers must not use the hover blue fill"
    )

normal_items = [
    item for item in items
@@ -141,6 +178,12 @@
require(normal_items, "fixture must include normal app items")
require(all(item.get("iconFrame", {}).get("width") == expected_icon_size for item in normal_items), "normal app icons must match expected fixture icon size")
require(all(item.get("labelTruncationMode") == "middle" for item in items), "all App Shelf labels must use middle truncation")
require(all(item.get("indexVisible") is True for item in items), "all App Shelf items must expose a visible hand-written index marker")
require(all(item.get("indexText") == expected_index_text(index) for index, item in enumerate(items)), "App Shelf index markers must follow 1234567890ABCDEFG order")
require(all(item.get("indexFontSize", 0) >= 13 for item in items), "App Shelf index markers must keep readable font size")
require(all(0 < item.get("indexColor", {}).get("alpha", 0) <= 0.5 for item in items), "App Shelf index markers must stay low-noise with light alpha")
require(all(item.get("indexFrame", {}).get("width", 0) >= 14 for item in items), "App Shelf index markers must reserve enough width")
require(all(item.get("indexFrame", {}).get("x", 99) < item.get("iconFrame", {}).get("x", -99) for item in items), "App Shelf index markers must sit beside the icon, not over the icon center")

row_y_values = {round(item.get("frame", {}).get("y", 0), 2) for item in items}
require(len(row_y_values) == expected_rows, "fixture App Shelf visible rows must match expected rows")
@@ -148,7 +191,7 @@
selected_z = items[0].get("zPosition", 0)
hover_z = items[hover_index].get("zPosition", 0)
normal_z = normal_items[0].get("zPosition", 0)
require(selected_z > hover_z, "selected App Shelf item must stay above non-selected hover item")
require(selected_z == normal_z, "non-hovered selected App Shelf item must not float above normal items")
require(hover_z > normal_z, "hover App Shelf item must stay above normal items")

print(json.dumps({
@@ -158,6 +201,11 @@
    "selectedIcon": items[0].get("iconFrame"),
    "hoveredIndex": root.get("appShelfHoveredIndex"),
    "hoveredIcon": items[hover_index].get("iconFrame"),
    "hoveredColumnHeaderColor": hovered_header_color,
    "hoveredColumnTitleColor": hovered_title_color,
    "hoveredColumnCountColor": hovered_count_color,
    "blueReference": blue_reference,
    "firstIndexes": [item.get("indexText") for item in items[:min(12, len(items))]],
    "selectedZ": selected_z,
    "hoverZ": hover_z,
    "scrollable": root.get("appShelfScrollable"),
@@ -183,6 +231,7 @@
    --round01-open-quick-switch
    --round01-fixture-app-count="$app_count"
    --round01-disable-screenshot-refresh
    --round01-waterfall-view-mode=vertical
    --round01-debug-hover-app-index="$hover_index"
    --round01-quick-switch-report="$report"
  )