fix(assets): keep native video control clicks off card selection (FE-1711) - #15541
fix(assets): keep native video control clicks off card selection (FE-1711)#15541mattmillerai wants to merge 2 commits into
Conversation
…1711) A click on a video card's native control bar reaches the page in WebKit with the same target and composed path as a click on the video itself, so the card read it as a selection gesture on top of the control the user actually pressed. Stop the event when the pointer is over the control strip, and keep every other click bubbling so modifier-select still works on a playing card. Co-Authored-By: Christian Byrne <cbyrne@comfy.org>
|
Important Approval pendingCodeRabbit has no unresolved comments, but it has not reviewed the latest commit. Use the checkbox below to review the latest commit. CodeRabbit will approve the changes if it finds no blocking issues.
Comment |
🎭 Playwright: ✅ 1833 passed, 0 failed · 4 flaky📊 Browser Reports
🎨 Storybook: ✅ Built — View Storybook📦 Bundle: 9.13 MB gzip 🔴 +106 BDetailsSummary
Category Glance App Entry Points — 3.71 kB (baseline 3.71 kB) • ⚪ 0 BMain entry bundles and manifests
Status: 1 added / 1 removed Graph Workspace — 1.37 MB (baseline 1.37 MB) • ⚪ 0 BGraph editor runtime, canvas, workflow orchestration
Status: 2 added / 2 removed / 1 unchanged Views & Navigation — 124 kB (baseline 124 kB) • ⚪ 0 BTop-level views, pages, and routed surfaces
Status: 13 added / 13 removed / 4 unchanged Panels & Settings — 566 kB (baseline 566 kB) • ⚪ 0 BConfiguration panels, inspectors, and settings screens
Status: 10 added / 10 removed / 16 unchanged User & Accounts — 27.5 kB (baseline 27.5 kB) • ⚪ 0 BAuthentication, profile, and account management bundles
Status: 6 added / 6 removed / 5 unchanged Editors & Dialogs — 125 kB (baseline 125 kB) • ⚪ 0 BModals, dialogs, drawers, and in-app editors
Status: 7 added / 7 removed / 1 unchanged UI Components — 67.1 kB (baseline 67.1 kB) • ⚪ 0 BReusable component library chunks
Status: 6 added / 6 removed / 8 unchanged Data & Services — 3.53 MB (baseline 3.53 MB) • ⚪ 0 BStores, services, APIs, and repositories
Status: 14 added / 14 removed / 3 unchanged Utilities & Hooks — 549 kB (baseline 549 kB) • ⚪ 0 BHelpers, composables, and utility bundles
Status: 18 added / 18 removed / 19 unchanged Vendor & Third-Party — 18.1 MB (baseline 18.1 MB) • ⚪ 0 BExternal libraries and shared vendor chunks Status: 18 unchanged Other — 14.2 MB (baseline 14.2 MB) • 🔴 +472 BBundles that do not match a named category
Status: 70 added / 70 removed / 218 unchanged ⚡ Performance Report
Show regressions
All metrics
Historical variance (last 15 runs)
Trend (last 15 commits on main)
Raw data{
"timestamp": "2026-08-21T08:44:18.068Z",
"gitSha": "2e942d7a1e71374be41f77de41dc9e00d81d530b",
"branch": "matt/fe-1711-video-controls-modifier-click",
"measurements": [
{
"name": "canvas-idle",
"durationMs": 2121.3879999999963,
"styleRecalcs": 8,
"styleRecalcDurationMs": 7.723000000000001,
"layouts": 0,
"layoutDurationMs": 0,
"taskDurationMs": 528.3549999999999,
"heapDeltaBytes": 17922224,
"heapUsedBytes": 79903240,
"domNodes": -284,
"jsHeapTotalBytes": 5234688,
"scriptDurationMs": 8.187000000000003,
"eventListeners": -151,
"totalBlockingTimeMs": 0,
"frameDurationMs": 16.66333333333332,
"p95FrameDurationMs": 16.700000000000728
},
{
"name": "canvas-idle",
"durationMs": 2064.1110000000253,
"styleRecalcs": 8,
"styleRecalcDurationMs": 7.897999999999999,
"layouts": 0,
"layoutDurationMs": 0,
"taskDurationMs": 645.8489999999999,
"heapDeltaBytes": 16194620,
"heapUsedBytes": 77471560,
"domNodes": -283,
"jsHeapTotalBytes": 4448256,
"scriptDurationMs": 12.07,
"eventListeners": -151,
"totalBlockingTimeMs": 0,
"frameDurationMs": 16.666666666666668,
"p95FrameDurationMs": 16.699999999999818
},
{
"name": "canvas-mouse-sweep",
"durationMs": 2084.873000000016,
"styleRecalcs": 75,
"styleRecalcDurationMs": 41.272,
"layouts": 12,
"layoutDurationMs": 5.965,
"taskDurationMs": 1017.1380000000001,
"heapDeltaBytes": 19193388,
"heapUsedBytes": 81575712,
"domNodes": -283,
"jsHeapTotalBytes": 4710400,
"scriptDurationMs": 117.18900000000001,
"eventListeners": -151,
"totalBlockingTimeMs": 0,
"frameDurationMs": 16.66333333333335,
"p95FrameDurationMs": 16.700000000000728
},
{
"name": "canvas-mouse-sweep",
"durationMs": 1941.7799999999943,
"styleRecalcs": 76,
"styleRecalcDurationMs": 43.139,
"layouts": 12,
"layoutDurationMs": 3.7919999999999994,
"taskDurationMs": 991.1920000000001,
"heapDeltaBytes": 19765716,
"heapUsedBytes": 81091316,
"domNodes": -281,
"jsHeapTotalBytes": 5496832,
"scriptDurationMs": 116.82600000000001,
"eventListeners": -151,
"totalBlockingTimeMs": 0,
"frameDurationMs": 16.666666666666668,
"p95FrameDurationMs": 16.800000000000182
},
{
"name": "canvas-zoom-sweep",
"durationMs": 1740.7109999999761,
"styleRecalcs": 32,
"styleRecalcDurationMs": 17.952,
"layouts": 6,
"layoutDurationMs": 0.6679999999999999,
"taskDurationMs": 409.98799999999994,
"heapDeltaBytes": 2763776,
"heapUsedBytes": 63999860,
"domNodes": 77,
"jsHeapTotalBytes": 5242880,
"scriptDurationMs": 12.965,
"eventListeners": 19,
"totalBlockingTimeMs": 0,
"frameDurationMs": 16.666666666666668,
"p95FrameDurationMs": 16.799999999999272
},
{
"name": "canvas-zoom-sweep",
"durationMs": 1741.343000000029,
"styleRecalcs": 31,
"styleRecalcDurationMs": 19.316,
"layouts": 6,
"layoutDurationMs": 0.7259999999999999,
"taskDurationMs": 457.851,
"heapDeltaBytes": 2523656,
"heapUsedBytes": 63757832,
"domNodes": 75,
"jsHeapTotalBytes": 5242880,
"scriptDurationMs": 14.644,
"eventListeners": 19,
"totalBlockingTimeMs": 0,
"frameDurationMs": 16.66333333333335,
"p95FrameDurationMs": 16.700000000000728
},
{
"name": "dom-widget-clipping",
"durationMs": 615.2169999999728,
"styleRecalcs": 10,
"styleRecalcDurationMs": 7.284000000000001,
"layouts": 0,
"layoutDurationMs": 0,
"taskDurationMs": 374.33399999999995,
"heapDeltaBytes": 10743152,
"heapUsedBytes": 72044092,
"domNodes": 16,
"jsHeapTotalBytes": 4980736,
"scriptDurationMs": 54.78,
"eventListeners": 0,
"totalBlockingTimeMs": 0,
"frameDurationMs": 16.66333333333332,
"p95FrameDurationMs": 16.699999999999818
},
{
"name": "dom-widget-clipping",
"durationMs": 668.280999999979,
"styleRecalcs": 10,
"styleRecalcDurationMs": 7.626999999999998,
"layouts": 0,
"layoutDurationMs": 0,
"taskDurationMs": 396.403,
"heapDeltaBytes": 10847808,
"heapUsedBytes": 71943796,
"domNodes": 16,
"jsHeapTotalBytes": 5505024,
"scriptDurationMs": 58.516,
"eventListeners": 2,
"totalBlockingTimeMs": 0,
"frameDurationMs": 16.670000000000012,
"p95FrameDurationMs": 16.700000000000728
},
{
"name": "large-graph-idle",
"durationMs": 2031.75200000004,
"styleRecalcs": 9,
"styleRecalcDurationMs": 11.131000000000002,
"layouts": 0,
"layoutDurationMs": 0,
"taskDurationMs": 655.909,
"heapDeltaBytes": 13041520,
"heapUsedBytes": 88044552,
"domNodes": -282,
"jsHeapTotalBytes": 3141632,
"scriptDurationMs": 16.546000000000006,
"eventListeners": -179,
"totalBlockingTimeMs": 0,
"frameDurationMs": 16.666666666666668,
"p95FrameDurationMs": 16.700000000000728
},
{
"name": "large-graph-idle",
"durationMs": 2069.501999999943,
"styleRecalcs": 7,
"styleRecalcDurationMs": 8.098999999999998,
"layouts": 0,
"layoutDurationMs": 0,
"taskDurationMs": 814.501,
"heapDeltaBytes": -2821152,
"heapUsedBytes": 73183288,
"domNodes": -276,
"jsHeapTotalBytes": -790528,
"scriptDurationMs": 20.605,
"eventListeners": -151,
"totalBlockingTimeMs": 0,
"frameDurationMs": 16.666666666666668,
"p95FrameDurationMs": 16.700000000000728
},
{
"name": "large-graph-pan",
"durationMs": 2189.331999999979,
"styleRecalcs": 69,
"styleRecalcDurationMs": 15.143999999999998,
"layouts": 0,
"layoutDurationMs": 0,
"taskDurationMs": 1223.414,
"heapDeltaBytes": -7189704,
"heapUsedBytes": 69292712,
"domNodes": -279,
"jsHeapTotalBytes": 221184,
"scriptDurationMs": 315.238,
"eventListeners": -149,
"totalBlockingTimeMs": 0,
"frameDurationMs": 16.66333333333335,
"p95FrameDurationMs": 16.800000000000182
},
{
"name": "large-graph-pan",
"durationMs": 2301.113999999984,
"styleRecalcs": 70,
"styleRecalcDurationMs": 17.992000000000004,
"layouts": 0,
"layoutDurationMs": 0,
"taskDurationMs": 1333.61,
"heapDeltaBytes": 11737268,
"heapUsedBytes": 88694404,
"domNodes": -282,
"jsHeapTotalBytes": 4677632,
"scriptDurationMs": 335.138,
"eventListeners": -149,
"totalBlockingTimeMs": 0,
"frameDurationMs": 16.670000000000012,
"p95FrameDurationMs": 16.700000000000728
},
{
"name": "large-graph-zoom",
"durationMs": 3198.6840000000143,
"styleRecalcs": 64,
"styleRecalcDurationMs": 15.383999999999999,
"layouts": 60,
"layoutDurationMs": 8.411,
"taskDurationMs": 1460.347,
"heapDeltaBytes": -10659720,
"heapUsedBytes": 67645432,
"domNodes": -287,
"jsHeapTotalBytes": 5763072,
"scriptDurationMs": 408.76099999999997,
"eventListeners": -155,
"totalBlockingTimeMs": 0,
"frameDurationMs": 16.666666666666668,
"p95FrameDurationMs": 16.700000000000728
},
{
"name": "large-graph-zoom",
"durationMs": 3314.5730000001095,
"styleRecalcs": 64,
"styleRecalcDurationMs": 15.653999999999998,
"layouts": 60,
"layoutDurationMs": 9.052999999999999,
"taskDurationMs": 1538.267,
"heapDeltaBytes": -5568956,
"heapUsedBytes": 71463064,
"domNodes": -288,
"jsHeapTotalBytes": 6025216,
"scriptDurationMs": 412.35,
"eventListeners": -183,
"totalBlockingTimeMs": 0,
"frameDurationMs": 16.666666666666696,
"p95FrameDurationMs": 16.700000000000728
},
{
"name": "legacy-node-drag",
"durationMs": 2406.38899999999,
"styleRecalcs": 45,
"styleRecalcDurationMs": 9.932000000000004,
"layouts": 0,
"layoutDurationMs": 0,
"taskDurationMs": 1464.7140000000002,
"heapDeltaBytes": 10834636,
"heapUsedBytes": 95293264,
"domNodes": 10,
"jsHeapTotalBytes": 8581120,
"scriptDurationMs": 462.512,
"eventListeners": 186,
"totalBlockingTimeMs": 0,
"frameDurationMs": 16.66333333333335,
"p95FrameDurationMs": 16.700000000000728
},
{
"name": "legacy-node-drag",
"durationMs": 2694.541999999956,
"styleRecalcs": 46,
"styleRecalcDurationMs": 10.495999999999999,
"layouts": 0,
"layoutDurationMs": 0,
"taskDurationMs": 1611.746,
"heapDeltaBytes": -16281632,
"heapUsedBytes": 69484156,
"domNodes": 12,
"jsHeapTotalBytes": 12095488,
"scriptDurationMs": 507.67799999999994,
"eventListeners": 186,
"totalBlockingTimeMs": 0,
"frameDurationMs": 16.66333333333335,
"p95FrameDurationMs": 16.799999999999272
},
{
"name": "minimap-idle",
"durationMs": 2041.2299999999846,
"styleRecalcs": 6,
"styleRecalcDurationMs": 5.530999999999998,
"layouts": 0,
"layoutDurationMs": 0,
"taskDurationMs": 672.612,
"heapDeltaBytes": -13724144,
"heapUsedBytes": 62579588,
"domNodes": -282,
"jsHeapTotalBytes": 3403776,
"scriptDurationMs": 17.265000000000004,
"eventListeners": -179,
"totalBlockingTimeMs": 0,
"frameDurationMs": 16.666666666666668,
"p95FrameDurationMs": 16.800000000000182
},
{
"name": "minimap-idle",
"durationMs": 2097.3599999999806,
"styleRecalcs": 7,
"styleRecalcDurationMs": 7.717000000000001,
"layouts": 0,
"layoutDurationMs": 0,
"taskDurationMs": 839.4699999999999,
"heapDeltaBytes": -9456580,
"heapUsedBytes": 72795976,
"domNodes": -282,
"jsHeapTotalBytes": 2093056,
"scriptDurationMs": 20.501,
"eventListeners": -149,
"totalBlockingTimeMs": 0,
"frameDurationMs": 16.66333333333332,
"p95FrameDurationMs": 16.800000000000182
},
{
"name": "subgraph-dom-widget-clipping",
"durationMs": 587.8819999999791,
"styleRecalcs": 44,
"styleRecalcDurationMs": 8.698,
"layouts": 0,
"layoutDurationMs": 0,
"taskDurationMs": 401.701,
"heapDeltaBytes": 11846224,
"heapUsedBytes": 73897396,
"domNodes": 14,
"jsHeapTotalBytes": 5767168,
"scriptDurationMs": 120.96799999999999,
"eventListeners": 8,
"totalBlockingTimeMs": 0,
"frameDurationMs": 16.66333333333332,
"p95FrameDurationMs": 16.800000000000182
},
{
"name": "subgraph-dom-widget-clipping",
"durationMs": 634.6579999999449,
"styleRecalcs": 43,
"styleRecalcDurationMs": 8.052,
"layouts": 0,
"layoutDurationMs": 0,
"taskDurationMs": 416.10400000000004,
"heapDeltaBytes": 11059968,
"heapUsedBytes": 72556728,
"domNodes": 12,
"jsHeapTotalBytes": 4194304,
"scriptDurationMs": 123.135,
"eventListeners": 8,
"totalBlockingTimeMs": 0,
"frameDurationMs": 16.66333333333332,
"p95FrameDurationMs": 16.700000000000728
},
{
"name": "subgraph-idle",
"durationMs": 2012.6920000000155,
"styleRecalcs": 9,
"styleRecalcDurationMs": 7.746000000000001,
"layouts": 0,
"layoutDurationMs": 0,
"taskDurationMs": 500.081,
"heapDeltaBytes": -6641760,
"heapUsedBytes": 54848224,
"domNodes": -281,
"jsHeapTotalBytes": 4186112,
"scriptDurationMs": 7.665,
"eventListeners": -151,
"totalBlockingTimeMs": 0,
"frameDurationMs": 16.666666666666668,
"p95FrameDurationMs": 16.700000000000728
},
{
"name": "subgraph-idle",
"durationMs": 2020.6249999999955,
"styleRecalcs": 9,
"styleRecalcDurationMs": 9.716,
"layouts": 0,
"layoutDurationMs": 0,
"taskDurationMs": 642.824,
"heapDeltaBytes": 141760,
"heapUsedBytes": 61489476,
"domNodes": -281,
"jsHeapTotalBytes": 4710400,
"scriptDurationMs": 10.860999999999999,
"eventListeners": -181,
"totalBlockingTimeMs": 0,
"frameDurationMs": 16.666666666666668,
"p95FrameDurationMs": 16.800000000000182
},
{
"name": "subgraph-mouse-sweep",
"durationMs": 1753.2979999999725,
"styleRecalcs": 75,
"styleRecalcDurationMs": 40.10900000000001,
"layouts": 16,
"layoutDurationMs": 4.937,
"taskDurationMs": 842.147,
"heapDeltaBytes": 4243164,
"heapUsedBytes": 65894160,
"domNodes": -281,
"jsHeapTotalBytes": 4710400,
"scriptDurationMs": 88.15500000000002,
"eventListeners": -183,
"totalBlockingTimeMs": 0,
"frameDurationMs": 16.666666666666668,
"p95FrameDurationMs": 16.700000000000728
},
{
"name": "subgraph-mouse-sweep",
"durationMs": 1836.5629999999555,
"styleRecalcs": 75,
"styleRecalcDurationMs": 43.692,
"layouts": 16,
"layoutDurationMs": 5.133,
"taskDurationMs": 953.4220000000001,
"heapDeltaBytes": 18518420,
"heapUsedBytes": 79814772,
"domNodes": -284,
"jsHeapTotalBytes": 4972544,
"scriptDurationMs": 100.21199999999999,
"eventListeners": -151,
"totalBlockingTimeMs": 0,
"frameDurationMs": 16.666666666666668,
"p95FrameDurationMs": 16.700000000000728
},
{
"name": "subgraph-transition-enter",
"durationMs": 1459.6070000000054,
"styleRecalcs": 18,
"styleRecalcDurationMs": 33.013,
"layouts": 13,
"layoutDurationMs": 13.871000000000002,
"taskDurationMs": 1081.519,
"heapDeltaBytes": -9724168,
"heapUsedBytes": 84396076,
"domNodes": 13673,
"jsHeapTotalBytes": 13369344,
"scriptDurationMs": 21.11500000000001,
"eventListeners": 2375,
"totalBlockingTimeMs": 146,
"frameDurationMs": 16.66333333333338,
"p95FrameDurationMs": 16.700000000000728
},
{
"name": "viewport-pan-sweep",
"durationMs": 8314.604999999972,
"styleRecalcs": 249,
"styleRecalcDurationMs": 45.681000000000004,
"layouts": 0,
"layoutDurationMs": 0,
"taskDurationMs": 4376.907,
"heapDeltaBytes": 847308,
"heapUsedBytes": 76848452,
"domNodes": -279,
"jsHeapTotalBytes": 483328,
"scriptDurationMs": 1000.915,
"eventListeners": -135,
"totalBlockingTimeMs": 0,
"frameDurationMs": 16.666666666666668,
"p95FrameDurationMs": 16.80000000000109
},
{
"name": "viewport-pan-sweep",
"durationMs": 8767.253999999979,
"styleRecalcs": 251,
"styleRecalcDurationMs": 50.777,
"layouts": 0,
"layoutDurationMs": 0,
"taskDurationMs": 4718.383999999999,
"heapDeltaBytes": 3484912,
"heapUsedBytes": 79178332,
"domNodes": -273,
"jsHeapTotalBytes": -40960,
"scriptDurationMs": 1050.9170000000001,
"eventListeners": -131,
"totalBlockingTimeMs": 0,
"frameDurationMs": 16.666666666666668,
"p95FrameDurationMs": 16.80000000000109
},
{
"name": "vue-large-graph-idle",
"durationMs": 18492.771000000004,
"styleRecalcs": 0,
"styleRecalcDurationMs": 0,
"layouts": 0,
"layoutDurationMs": 0,
"taskDurationMs": 17714.609,
"heapDeltaBytes": -65651376,
"heapUsedBytes": 161279096,
"domNodes": -8312,
"jsHeapTotalBytes": -14880768,
"scriptDurationMs": 139.44500000000002,
"eventListeners": -16387,
"totalBlockingTimeMs": 0,
"frameDurationMs": 17.773333333333238,
"p95FrameDurationMs": 16.80000000000291
},
{
"name": "vue-large-graph-idle",
"durationMs": 18882.084999999963,
"styleRecalcs": 0,
"styleRecalcDurationMs": 0,
"layouts": 0,
"layoutDurationMs": 0,
"taskDurationMs": 18204.160000000003,
"heapDeltaBytes": -59062692,
"heapUsedBytes": 163433520,
"domNodes": -8312,
"jsHeapTotalBytes": -10162176,
"scriptDurationMs": 140.331,
"eventListeners": -16385,
"totalBlockingTimeMs": 0,
"frameDurationMs": 18.886666666666738,
"p95FrameDurationMs": 16.799999999999272
},
{
"name": "vue-large-graph-pan",
"durationMs": 23287.308999999994,
"styleRecalcs": 177,
"styleRecalcDurationMs": 26.98600000000001,
"layouts": 0,
"layoutDurationMs": 0,
"taskDurationMs": 22865.278,
"heapDeltaBytes": -41692044,
"heapUsedBytes": 194321820,
"domNodes": -8312,
"jsHeapTotalBytes": -14917632,
"scriptDurationMs": 447.159,
"eventListeners": -16381,
"totalBlockingTimeMs": 280,
"frameDurationMs": 17.776666666666763,
"p95FrameDurationMs": 16.799999999999272
},
{
"name": "vue-large-graph-pan",
"durationMs": 23529.508000000078,
"styleRecalcs": 178,
"styleRecalcDurationMs": 27.817000000000036,
"layouts": 0,
"layoutDurationMs": 0,
"taskDurationMs": 22961.705,
"heapDeltaBytes": -17952216,
"heapUsedBytes": 191418596,
"domNodes": -8312,
"jsHeapTotalBytes": -14163968,
"scriptDurationMs": 507.524,
"eventListeners": -16379,
"totalBlockingTimeMs": 221,
"frameDurationMs": 18.333333333333453,
"p95FrameDurationMs": 16.80000000000291
},
{
"name": "workflow-execution",
"durationMs": 143.59999999999218,
"styleRecalcs": 8,
"styleRecalcDurationMs": 18.804000000000002,
"layouts": 8,
"layoutDurationMs": 2.5709999999999997,
"taskDurationMs": 110.71000000000001,
"heapDeltaBytes": 3134256,
"heapUsedBytes": 64202728,
"domNodes": 133,
"jsHeapTotalBytes": 0,
"scriptDurationMs": 10.624000000000002,
"eventListeners": 25,
"totalBlockingTimeMs": 0,
"frameDurationMs": 16.666666666666668,
"p95FrameDurationMs": 16.800000000000182
},
{
"name": "workflow-execution",
"durationMs": 486.0760000000255,
"styleRecalcs": 11,
"styleRecalcDurationMs": 21.116,
"layouts": 3,
"layoutDurationMs": 0.7229999999999999,
"taskDurationMs": 125.254,
"heapDeltaBytes": 4930096,
"heapUsedBytes": 66148424,
"domNodes": 119,
"jsHeapTotalBytes": 0,
"scriptDurationMs": 8.937000000000003,
"eventListeners": 97,
"totalBlockingTimeMs": 0,
"frameDurationMs": 16.666666666666668,
"p95FrameDurationMs": 16.800000000000182
}
]
} |
This comment has been minimized.
This comment has been minimized.
There was a problem hiding this comment.
🔍 Cursor Review — Consolidated panel
Triggered by @mattmillerai.
Found 6 finding(s).
| Severity | Count |
|---|---|
| 🟡 Medium | 2 |
| 🟢 Low | 4 |
Panel: 8/8 reviewers contributed findings.
Codecov Report✅ All modified and coverable lines are covered by tests. @@ Coverage Diff @@
## main #15541 +/- ##
==========================================
+ Coverage 79.80% 82.07% +2.27%
==========================================
Files 2214 1887 -327
Lines 127824 122906 -4918
Branches 40831 40120 -711
==========================================
- Hits 102004 100879 -1125
+ Misses 25216 21522 -3694
+ Partials 604 505 -99
Flags with carried forward coverage won't be shown. Click here to find out more.
... and 340 files with indirect coverage changes 🚀 New features to boost your workflow:
|
- Bump NATIVE_CONTROLS_STRIP_PX to 64 (Chromium's actual strip height);
48 under-covered Chromium and let modifier-clicks on its control bar
still bubble to card selection, the bug this PR fixes.
- Bound isOverNativeControls on both ends and guard non-positive
height so a zero-height element can never match.
- Replace fireEvent.click(video, {...}) in tests with
user.pointer()/user.keyboard() to fix the lint-and-format CI
failure (testing-library/prefer-user-event).
|
🤖 The reviews loop filed Linear follow-up ticket(s) for review thread(s) deferred as out of scope for this PR:
The following carry
|
ELI-5
When a video card is playing and you hover it, the browser draws its own play/scrub bar over the bottom of the card. Clicking that bar was also being counted as clicking the card, so a Cmd-click on the play button could quietly toggle the card's selection at the same time. Now a click that lands on the control bar stays with the control bar; clicking anywhere else on the video still selects the card as before.
Description
onVideoClickalready returned early while native controls were showing, but an earlyreturndoes not stop propagation, and #14765 removed the@click.stopthat used to contain it. The click continued toMediaAssetCard's@click.stop="handlePreviewClick", which treats a modifier-click on a video as a selection gesture — so one click both actuated the control and mutated selection, with the selection change hidden under the control bar.The fix stops the event only when the pointer is over the control strip. Every other click keeps bubbling, so the modifier-select behaviour #14765 / FE-1512 added on the video card body is untouched.
Native controls live in user-agent shadow DOM, and I confirmed there is no DOM-level signal to key off: for a control-bar click and a body click, WebKit reports the identical
target(VIDEO), the identicalcomposedPath()(length 6, no shadow nodes), andvideo.shadowRoot === null. Position is the only available discriminator, hence the pixel constant. It is clamped to half the video height so it cannot swallow a small card whole.How has this been tested?
Unit (
vitest run src/platform/assets/components/MediaVideoTop.test.ts): 10 passed, 0 failed. Two new cases; verified red-then-green — with the component change stashed the strip case fails (1 failed / 9 passed), with it applied all 10 pass.Because happy-dom has no native-controls shadow DOM, I also measured the real behaviour with Playwright's bundled engines (headed, a
<video controls>inside a click-listening wrapper, sweeping click Y from the element's bottom edge upward). Results:So the reported defect reproduces in WebKit/Safari, and does not reproduce in Chromium or Firefox. That is worth stating plainly because it changes the risk calculus for the fix: the ticket's suggested one-liner (
if (shouldShowControls.value) return event.stopPropagation()) would have been inert against the actual bug in Chromium while regressing Chromium's working Cmd-click-to-select on the video body — the exact regression the ticket warns against. Stopping only over the strip is inert in Chromium and Firefox (no event arrives from that band in either) and is the whole fix in WebKit.I did not do the manual grid-mode pass the ticket asks for — no ComfyUI backend was available in this environment to populate the asset browser with a playing video — so the two manual assertions are covered by the engine measurements plus the unit tests rather than by driving the real card.
grid-smallneeds no check: it passesshow-native-video-controls=false, soshouldShowControlsis never true there and the new branch cannot run.Not run:
pnpm typecheckandpnpm lintrepo-wide (multi-minute on this repo; the checkout borrowednode_modules, whichAGENTS.mdnotes makesvue-tscunreliable). CI covers both.pnpm format(oxfmt) was run on both changed files.Judgment calls and residuals
<video controls>) and toggles card selection — measured,pausedAfterflips on the same click that selects. That is also "two unrelated effects from one click", it lives in the same component, and this PR deliberately does not touch it because suppressing it is precisely the modifier-select regression fix(assets): correct video asset interactions #14765 fixed. It needs a product decision, not a propagation tweak, so the tracking issue stays open rather than being auto-closed by this PR.Refs FE-1711 (intentionally not a closing keyword: see the unfixed Chromium body-click case above).
Provenance