Render generated icon-font pseudo-elements correctly in tabs and list rows

[wieslawsoltes]

Problem

The unchanged VS Code OSS workbench shows oversized path-like graphics over document tabs and Explorer rows in the native result. Chromium shows the intended small file icons.

The affected pixels are generated icon-font pseudo-elements:

• active tab .monaco-icon-label::before: U+E023, font-family: seti, font-size: 19.5px, color rgb(212,215,214);
• Explorer TypeScript row .monaco-icon-label::before: U+E099, font-family: seti, font-size: 19.5px, color rgb(81,154,186).

Both have background-image: none and no mask. The earlier URL-backed SVG background work in WebScene #251 and AppScene #128 remains valid, but it does not exercise this primitive.

Root cause

WebScene retained pseudo font-size and line-height, but not pseudo font-family. The declaration was classified as unsupported, the generated layout node inherited the originating element's system UI face, and kind-3 scene serialization emitted that same originating family. AppScene then shaped the Seti private-use code point with the wrong face.

The smallest fix is entirely in WebScene:

• retain the winning pseudo font-family, including !important, inherit, and unset behavior;
• copy an explicit family to the generated layout node so intrinsic measurement and paint agree;
• include family changes in pseudo layout equality;
• serialize the explicit family in kind-3 text resources, with originating-element inheritance when absent.

No AppScene or VS Code selector change is required.

Reproduction and regression

A dedicated browser/native reftest uses a parent system UI face and generated U+E023/U+E099 pseudo content selecting a small OFL webfont fixture. Ordinary spans provide the independent reference.

From exact WebScene 140ec3453cf9862f051079b341a4a749d2fa83b3:

• native: FAIL, 21,796 differing pixels, actual SHA-256 f7aeee0b9f12920b54cea51204ea37cb6e8370824d6f602fee82e8e6b4ec0d44 versus reference c083da5f76b7fde46f7bd2997c3491652e24cdb4b7aae1b2e5c36889173a92b6;
• Chromium 153.0.8010.48: PASS, zero differing test/reference pixels.

With candidate bac65c11 rebased onto exact current main acb032f7:

• native: PASS, test/reference SHA-256 both c083da5f76b7fde46f7bd2997c3491652e24cdb4b7aae1b2e5c36889173a92b6;
• Chromium: PASS, test/reference SHA-256 both 12c2d14473ce71395ec36dfe5a365e8bdd2f7625688300a5ad8bf878ba4b7eaf.

The native scene gate asserts the exact kind-3 family and intrinsic width, !important winner retention, explicit inheritance, class mutation/restoration, command checksum, and stable generated node IDs. Its 4,096-icon / 100-cycle run completed in 4.14 ms, emitted exactly 4,096 matching kind-3 commands, retained 1,488 bytes of pseudo storage, kept the warmed text-measurement cache stable, measured each explicit family once, and left no animation-frame demand.

Acceptance

• Exact-main native failure and Chromium oracle pass are captured with deterministic pixels.
• The first incorrect layer is isolated to pseudo computed-style retention before layout/scene emission.
• A focused WebScene-only candidate preserves family through cascade, layout, invalidation, and kind-3 serialization.
• Browser/native pixel, scene, mutation, retained-tree, font-cache, and 4,096-node performance gates pass locally.
• Live changed-path and semantic collision audit is clear: merged Fix listener ownership and text-topology CSS work #292/Add bounded native file-panel v2 transport #291/Expose File System Access pickers and opaque handles #294 and open Add Code OSS browser and native desktop compatibility #76 have zero candidate-path intersection.
• Review and merge Preserve generated pseudo font families #295 (bac65c11) from branch fix/pseudo-font-family-246.
• Run a fresh exact-package code-oss-editor-tabs-parity-v1 capture plus the deterministic Explorer selected-row/icon region before closing.

Scheduling

Review ready PR #295 as the next focused WebScene correction. It is based directly on exact current main acb032f7; the rebased native and Chromium gates pass. After integration, keep this issue open until the unchanged Code OSS tab and Explorer regional pixel gates pass from one exact package. Track CSS semantics under #235/#241 and product-level Chromium/native acceptance under #259.

[wieslawsoltes]

Reproduction and corrected layer boundary

The retained native crops identify the visible shapes as enlarged SVG file-icon silhouettes over the rounded surfaces, rather than malformed SkRRect geometry itself. The exact producer/ABI trace on WebScene 7cd66b3e is correct:

• each surface emits one kind-7 fill with exact bounds, RGBA, flags, and four 4px radii;
• each icon emits one kind-6 resource in the stable form webscene-bg-svg-v1<TAB>viewBox<TAB>repeat<TAB>position<TAB>size<TAB>markup;
• selected-class mutation changes the fill RGBA/checksum and restoration returns the original checksum.

The earliest incorrect layer is AppScene's kind-6 consumer: it sent the entire structured resource to the ordinary inline-SVG parser, discarding CSS background size, position, repeat, and rounded clipping. A product-neutral 120x24 tab surface plus 220x22 row surface fails on AppScene a20cf890 at the first icon pixel (17,13) and passes with the decoder in AppScene#128.

Coordinated changes:

• WebScene Verify rounded icon surface scene commands #251: producer/ABI and selection-mutation regression only; no overlap with Optimize structural CSS invalidation and DOM mutation checkpoints #245.
• AppScene Implement Node.hasChildNodes #128 / issue Implement NodeIterator for DOM traversal #127: structured background decoder, pixel comparison, and 4,096-box command/checksum/time/RSS gate.

Local direct results: WebScene focused native contract passes; AppScene rounded SVG surface and existing compositor-opacity tests pass. The 4,096-box candidate publishes exactly 4,096 commands with stable command/pixel checksums, 7 ms wall time, and about 5 MiB peak-RSS delta on the local macOS run.

[wieslawsoltes]

Producer contract merged in #251 as b81f594cfe0effe742942b8ccf643c2e1f42bc6a after the direct Linux build/test and NativeAOT 12 gates passed. The remaining fix is the coordinated AppScene consumer in native Stack #129 (#126 → #128), so this issue stays open and planned until that atomic stack lands.

[wieslawsoltes]

Completed across the producer/consumer boundary:

• WebScene Verify rounded icon surface scene commands #251 merged as b81f594cfe0effe742942b8ccf643c2e1f42bc6a, locking the exact kind-7 rounded fills and kind-6 structured SVG resources across selection mutation.
• AppScene native Stack Isolate the NodeIterator stress fixture #129 atomically merged Expose item on child collections #126 → Implement Node.hasChildNodes #128 as 9f434e0deea632fe28962ce32e2f4ddede4aa14c, decoding size/position/repeat, clipping to rounded bounds, and preserving ordinary inline SVG.
• Unmodified AppScene failed first at (17,13). The merged fixture pixel-compares both surfaces and gates 4,096 boxes with an exact command checksum, platform-local reference pixels, a 5,000 ms bound, and a 128 MiB peak-RSS bound.
• The amended direct Linux SDK run 35208302374 passed at top 8497c89; redundant jobs were canceled.

[wieslawsoltes]

The coordinated AppScene consumer has now merged atomically through native Stack #129.

• AppScene PRs Expose item on child collections #126 and Implement Node.hasChildNodes #128 share merge 9f434e0deea632fe28962ce32e2f4ddede4aa14c.
• The cumulative top passed the exact Linux installed-SDK lane after replacing a macOS-specific raster hash with an exact command checksum plus per-channel semantic comparison against an independently drawn 4,096-surface reference.
• WebScene producer PR Verify rounded icon surface scene commands #251 remains merged at b81f594cfe0effe742942b8ccf643c2e1f42bc6a.
• vscode-demo now pins both focused merge heads locally.

This issue stays open and vscode-oss/planned until a fresh exact package proves the unchanged VS Code active tab and Explorer row against Chromium. The implementation layers themselves are merged; the remaining work is product-level visual acceptance.

[wieslawsoltes]

Reopened for the remaining acceptance item in this issue: a fresh exact package must prove the unchanged VS Code active tab and Explorer selection against Chromium. The generic producer and consumer implementations are merged and their focused gates pass, but the issue's product-level visual criterion has not yet been rerun on those exact revisions.

[wieslawsoltes]

Local vscode-demo commit 9721499 adds a deterministic Chromium/AppScene visual lane for the reported malformed document-tab background. It remains intentionally unpushed on integration/appscene-webscene-code-oss until the next consolidated update.

The query-gated unchanged-Code state now:

• closes the startup editor and creates three real dirty untitled Monaco editors;
• requires the exact ordered labels Untitled-1, Untitled-2, Untitled-3, with the third active, all three dirty, and three stable samples;
• records named geometry for the complete tab strip, each tab, the active tab, and surrounding workbench surfaces;
• restricts pixel metrics to the measured editor tab strip, so the path-like SVG/background artifact cannot disappear into a whole-window tolerance;
• adds a fail-closed code-oss-editor-tabs-parity-v1 contract and package marker.

The visual inventory now contains 17 scenarios and 119 evidence obligations; six captures are implemented. Focused and complete validation passes: Python 164/164, exact Node 24.18.1 68/68, manifest audit, and the applied pinned VS Code TypeScript no-emit build. The VS Code submodule was reverted byte-exactly and is clean.

Acceptance remains partial until a fresh current-head Chromium/native capture supplies semantic, geometry, and pixel evidence. Focus, accessibility, dynamic performance, and lifecycle remain owned by their existing #258/#260/#262 lanes.

[wieslawsoltes]

Correction after a post-merge product capture: the URL-backed SVG producer/consumer fix from WebScene #251 and AppScene #128 is valid for its focused fixture, but it does not cover the unchanged Code OSS artifact reported here.

Exact evidence

• I resynced WebScene main to 140ec3453cf9862f051079b341a4a749d2fa83b3. PR Optimize structural CSS invalidation and DOM mutation checkpoints #245 live head is 4f9c3ba3e1926a3d6b93db3586834c167541f6ba and is already merged into this main through 4040058e.
• A diagnostic unchanged-payload capture used AppScene 1420e227e52579a097e7ae52a2cadb41cf073e4d, WebScene 28d1d649e927c665ff05844197af44f223edf952, and VS Code 645f29cc3176500b4b5762ba887cf2a7f0ffdf2c. Those AppScene/WebScene revisions contain the earlier Implement Node.hasChildNodes #128/Verify rounded icon surface scene commands #251 fixes. The white active-tab shape and cyan Explorer-row shape are still visible.
• The old whole-window lane reported zero geometry delta for the workbench/titlebar/activity bar/sidebar/editor/status bar/editor surface and still passed at MAE 0.005242, RMSE 0.048151, changed-pixel ratio 0.010378. Reference SHA-256 is 35947b0bf062b9013968249753542830a34f8012c084f0928bb9fc84bbafe05f; normalized native SHA-256 is 5988dd61ce664336eafc9944f1b43f15c3d4cd4a64340926ee943e51e5088e83. This explains why the broad gate missed the defect.
• Qualification caveat: this is an unpackaged ancestor build, uses the old one-tab contract, and timed out only while closing after the screenshot. It is diagnostic evidence, not current-main acceptance.

Correct primitive and smallest root cause

Chromium computed style shows that both visible shapes are generated icon-font glyphs, not SVG backgrounds:

• active tab .monaco-icon-label::before: content U+E023, font-family: seti, font-size: 19.5px, color rgb(212,215,214), background-image: none, no mask;
• Explorer TypeScript row .monaco-icon-label::before: content U+E099, font-family: seti, font-size: 19.5px, color rgb(81,154,186), background-image: none, no mask.

WebScene retains pseudo font-size and line-height, but the pseudo record has no font-family. font-family therefore falls through as unsupported, the generated layout node cannot carry it, and kind-3 scene emission serializes resolved_font_family(node) from the originating element. AppScene consumes that family field when selecting the typeface. A Seti private-use code point is consequently shaped through the parent system-ui/fallback face, producing the path-like pixels. The #251 fixture uses explicit background-image:url("icon.svg"), so it never exercises this path.

The focused WebScene fix should retain the pseudo's winning font-family, inherit only when absent, copy it into the generated layout node so intrinsic metrics agree with paint, serialize the same family in the kind-3 command, and include it in pseudo layout equality so class/style mutation invalidates correctly. No AppScene change is required.

Collision and scheduling

The proposed files are outside merged #245 except for optional broad cascade/layout suites, which the focused patch does not need. The only recent scene-file overlap was #290, now merged in current main. Open WebScene PRs #291, #281, and #76 have no candidate-path overlap. AppScene PR #84 touches webscene_graphite.cpp, but this correction does not modify AppScene.

Schedule the fix from current main, then require:

1. a Chromium/native contract with a parent system-ui face and a ::before PUA glyph that explicitly selects a fixture webfont, including family mutation and restoration;
2. exact kind-3 resource/family, intrinsic geometry, command checksum, and retained-tree identity checks across 4,096 pseudo icons;
3. a native pixel reference with no foreground pixels outside the icon slot, plus bounded runtime/RSS and no repeated font loads;
4. a fresh exact-package run of code-oss-editor-tabs-parity-v1, and a separate deterministic Explorer selected-row/icon region because the current three-tab lane only gates the tab strip.

This issue should remain open until that current-main package evidence passes.