Bound nested context menu ancestry (#530)

Author: wieslawsoltes

experiments/WebScene.NativeEngine.Probe/native/webscene_v8_runtime_dom_core.inc

@@ -4821,6 +4821,7 @@
             return;
         }
         const auto compiled = self->cached_css_selector_list(selector);
+        auto* document_root = self->css_cascade_root_for_node(*node);
         for (auto* candidate = node; candidate != nullptr;
             candidate = self->document.dom_parent(*candidate)) {
             if (self->compiled_css_selector_list_matches(
@@ -4829,6 +4830,11 @@
                 info.GetReturnValue().Set(self->wrap_node(*candidate));
                 return;
             }
+            // Retained layout nests a child document below its iframe owner,
+            // but DOM ancestry APIs remain scoped to the node's Document.
+            // In particular, Code OSS repeatedly calls closest() while
+            // collecting data-vscode-context values for a webview menu.
+            if (candidate == document_root) break;
         }
         info.GetReturnValue().Set(v8::Null(info.GetIsolate()));
     }

experiments/WebScene.NativeEngine.Probe/native/webscene_v8_runtime_tasks.inc

@@ -2036,9 +2036,18 @@
             return read_event_boolean("__websceneImmediatePropagationStopped");
         };
 
+        auto* event_root = static_cast<dom_node*>(
+            local_context->GetAlignedPointerFromEmbedderData(
+                1,
+                v8::kEmbedderDataTypeTagDefault));
+        if (event_root == nullptr) event_root = &document.body();
         std::vector<dom_node*> ancestry;
         for (auto* node = &target; node != nullptr; node = document.event_parent(*node)) {
             ancestry.push_back(node);
+            // Iframe documents share the retained native layout tree with
+            // their owner, while DOM event paths terminate at the child
+            // Document/Window boundary.
+            if (node == event_root) break;
         }
 #if defined(WEBSCENE_NATIVE_ENGINE_CERTIFICATION)
         if (std::string_view(type) == "mousemove") {

experiments/WebScene.NativeEngine.Probe/tests/native_v8_runtime_resource_tests.inc

@@ -1132,6 +1132,140 @@ void test_nested_pointer_coordinate_projection() {
   webscene_engine_destroy(engine);
 }
 
+void test_nested_context_menu_handoff() {
+  constexpr std::string_view address{
+      "https://iframe-context-menu.test/index.html"};
+  resource_server server{
+      .content = {{std::string{address},
+                   "<!doctype html><title>frame context menu</title><body></body>"},
+                  {"https://iframe-context-menu.test/frame.html", R"HTML(
+<!doctype html><style>html,body{margin:0}#ancestor{position:absolute;left:10px;top:8px;width:40px;height:30px}#target{display:block;width:40px;height:30px}</style>
+<body data-vscode-context='{"scope":"body","shared":"body","bodyOnly":true}'>
+  <div id="ancestor" data-vscode-context='{"scope":"ancestor","shared":"ancestor","ancestorOnly":true}'>
+    <span id="target" data-vscode-context='{"shared":"target","targetOnly":true}'>target</span>
+  </div>
+  <script>
+    const state = parent.__nestedContextMenu;
+    const target = document.querySelector('#target');
+    target.addEventListener('contextmenu', event => event.preventDefault(), {once:true});
+    addEventListener('contextmenu', event => {
+      if (event.defaultPrevented) {
+        ++state.cancelled;
+        return;
+      }
+      event.preventDefault();
+      let context = {};
+      let element = event.target;
+      while (true) {
+        if (!element) break;
+        element = element.closest('[data-vscode-context]');
+        if (!element) break;
+        context = {...JSON.parse(element.dataset.vscodeContext), ...context};
+        element = element.parentElement;
+      }
+      state.pathCrossedDocument = event.composedPath().includes(frameElement);
+      parent.__receiveContextMenu({
+        clientX:event.clientX,
+        clientY:event.clientY,
+        context,
+        defaultPrevented:event.defaultPrevented
+      });
+    });
+    state.ready = true;
+  </script>
+</body>)HTML"}};
+  webscene_engine_options options{};
+  options.struct_size = sizeof(options);
+  options.resource_load_callback = load_test_resource;
+  options.resource_load_user_data = &server;
+  auto* engine = webscene_engine_create_with_options(&options);
+  require(engine != nullptr, "nested context menu engine creation failed");
+  require(webscene_engine_load_url(engine, address.data(), address.size()) != 0U,
+          "nested context menu outer document failed");
+  require(evaluate_until_equals(
+              engine, "location.href", "nested-context-menu-ready.js",
+              R"("https://iframe-context-menu.test/index.html")", 2'500)
+              == R"("https://iframe-context-menu.test/index.html")",
+          "nested context menu outer document did not become ready");
+
+  execute(engine, R"JS(
+      globalThis.__nestedContextMenu = {
+        ready:false, cancelled:0, requests:[], visibleDuringHandoff:false,
+        pathCrossedDocument:null
+      };
+      globalThis.__receiveContextMenu = data => {
+        __nestedContextMenu.requests.push(data);
+        const body = document.querySelector('#webview').contentDocument.body;
+        body.classList.toggle('vscode-context-menu-visible', true);
+        __nestedContextMenu.visibleDuringHandoff =
+          body.classList.contains('vscode-context-menu-visible');
+      };
+      document.body.style.margin = '0';
+      const frame = document.createElement('iframe');
+      frame.id = 'webview';
+      frame.dataset.vscodeContext = JSON.stringify({
+        scope:'outer', outerOnly:true
+      });
+      frame.setAttribute('sandbox', 'allow-same-origin allow-scripts');
+      frame.style.cssText =
+        'position:absolute;left:80px;top:60px;width:200px;height:120px;border:4px solid black';
+      frame.src = './frame.html';
+      document.body.appendChild(frame);
+    )JS", "nested-context-menu-setup.js");
+  require(evaluate_until_equals(
+              engine, "__nestedContextMenu.ready",
+              "nested-context-menu-frame-ready.js", "true", 3'000) == "true",
+          "nested context menu frame did not become ready: "
+              + evaluate(engine, "JSON.stringify(__nestedContextMenu)",
+                         "nested-context-menu-timeout.js"));
+
+  const auto secondary_click = [&](uint64_t sequence) {
+    const webscene_input_event down{
+        WEBSCENE_INPUT_POINTER_DOWN, 2U | (3U << 8U), sequence,
+        99, 77, 0, 0};
+    const webscene_input_event up{
+        WEBSCENE_INPUT_POINTER_UP, (3U << 8U), sequence + 1U,
+        99, 77, 0, 0};
+    const auto consumed_before = consumed_input_count(engine);
+    require(webscene_engine_enqueue(engine, &down) != 0,
+            "nested context menu pointer down was rejected");
+    require(webscene_engine_enqueue(engine, &up) != 0,
+            "nested context menu pointer up was rejected");
+    wait_for_consumed_inputs(
+        engine, consumed_before + 2U,
+        "nested context menu pointer inputs were not consumed");
+  };
+
+  secondary_click(9501U);
+  require(
+      evaluate(engine, R"JS(JSON.stringify({
+        cancelled:__nestedContextMenu.cancelled,
+        requestCount:__nestedContextMenu.requests.length,
+        visible:document.querySelector('#webview').contentDocument.body.classList
+          .contains('vscode-context-menu-visible')
+      }))JS", "nested-context-menu-cancelled.js")
+          == R"({"cancelled":1,"requestCount":0,"visible":false})",
+      "a child-cancelled context menu escaped to the Code-shaped handler");
+
+  secondary_click(9503U);
+  const auto result = evaluate(engine, R"JS(JSON.stringify({
+      request:__nestedContextMenu.requests[0],
+      visibleDuringHandoff:__nestedContextMenu.visibleDuringHandoff,
+      pathCrossedDocument:__nestedContextMenu.pathCrossedDocument
+    }))JS", "nested-context-menu-result.js");
+  require(
+      result == R"JSON({"request":{"clientX":15,"clientY":13,"context":{"scope":"ancestor","shared":"target","bodyOnly":true,"ancestorOnly":true,"targetOnly":true},"defaultPrevented":true},"visibleDuringHandoff":true,"pathCrossedDocument":false})JSON",
+      "nested Code-shaped context menu handoff diverged: " + result);
+
+  require(evaluate(engine, R"JS((() => {
+      const body=document.querySelector('#webview').contentDocument.body;
+      body.classList.toggle('vscode-context-menu-visible', false);
+      return !body.classList.contains('vscode-context-menu-visible');
+    })())JS", "nested-context-menu-hidden.js") == "true",
+          "context menu visibility did not clear in the child document");
+  webscene_engine_destroy(engine);
+}
+
 void test_nested_keyboard_handoff_and_focus_traversal() {
   constexpr std::string_view address{
       "https://iframe-keyboard.test/index.html"};

experiments/WebScene.NativeEngine.Probe/tests/native_v8_runtime_tests.cpp

@@ -194,6 +194,10 @@ int main()
           test_nested_pointer_coordinate_projection();
           return 0;
         }
+        if (selected == "nested-context-menu") {
+          test_nested_context_menu_handoff();
+          return 0;
+        }
         if (selected == "nested-keyboard-handoff") {
           test_nested_keyboard_handoff_and_focus_traversal();
           return 0;

tests/WebPlatformSubset/contracts/nested-context-menu-handoff.html

@@ -0,0 +1,113 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>Nested context menu handoff contract</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-actions.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+<style>
+  html, body { margin: 0; width: 800px; height: 600px; }
+  #webview {
+    position: absolute;
+    left: 80px;
+    top: 60px;
+    width: 200px;
+    height: 120px;
+    border: 4px solid black;
+  }
+</style>
+<iframe id="webview" data-vscode-context='{"scope":"outer","outerOnly":true}'></iframe>
+<script>
+  const frame = document.querySelector("#webview");
+  const childDocument = frame.contentDocument;
+  childDocument.body.style.margin = "0";
+  childDocument.body.dataset.vscodeContext = JSON.stringify({
+    scope: "body", shared: "body", bodyOnly: true
+  });
+  const ancestor = childDocument.createElement("div");
+  ancestor.dataset.vscodeContext = JSON.stringify({
+    scope: "ancestor", shared: "ancestor", ancestorOnly: true
+  });
+  ancestor.style.cssText = [
+    "position:absolute", "left:10px", "top:8px", "width:40px", "height:30px"
+  ].join(";");
+  const target = childDocument.createElement("button");
+  target.textContent = "target";
+  target.dataset.vscodeContext = JSON.stringify({
+    shared: "target", targetOnly: true
+  });
+  target.style.cssText = "width:40px;height:30px;padding:0;border:0";
+  ancestor.appendChild(target);
+  childDocument.body.appendChild(ancestor);
+
+  const state = {
+    cancelled: 0,
+    requests: [],
+    visibleDuringHandoff: false,
+    pathCrossedDocument: null
+  };
+  window.receiveContextMenu = data => {
+    state.requests.push(data);
+    childDocument.body.classList.toggle("vscode-context-menu-visible", true);
+    state.visibleDuringHandoff =
+      childDocument.body.classList.contains("vscode-context-menu-visible");
+  };
+  target.addEventListener("contextmenu", event => event.preventDefault(), {once: true});
+  frame.contentWindow.addEventListener("contextmenu", event => {
+    if (event.defaultPrevented) {
+      ++state.cancelled;
+      return;
+    }
+    event.preventDefault();
+    let context = {};
+    let element = event.target;
+    while (true) {
+      if (!element) break;
+      element = element.closest("[data-vscode-context]");
+      if (!element) break;
+      context = {...JSON.parse(element.dataset.vscodeContext), ...context};
+      element = element.parentElement;
+    }
+    state.pathCrossedDocument = event.composedPath().includes(frame);
+    receiveContextMenu({
+      clientX: event.clientX,
+      clientY: event.clientY,
+      context,
+      defaultPrevented: event.defaultPrevented
+    });
+  });
+
+  const secondaryClick = element => new test_driver.Actions()
+    .pointerMove(0, 0, {origin: element})
+    .pointerDown({button: 2})
+    .pointerUp({button: 2})
+    .send();
+
+  promise_test(async () => {
+    await secondaryClick(target);
+    assert_equals(state.cancelled, 1, "the inner cancellation reaches the host listener");
+    assert_equals(state.requests.length, 0, "a cancelled event does not request a menu");
+    assert_false(childDocument.body.classList.contains("vscode-context-menu-visible"));
+
+    await secondaryClick(target);
+    assert_equals(state.requests.length, 1, "the uncancelled event requests one menu");
+    const request = state.requests[0];
+    assert_equals(request.clientX, 30, "the handoff uses child viewport X");
+    assert_equals(request.clientY, 23, "the handoff uses child viewport Y");
+    assert_true(request.defaultPrevented, "the host handler suppresses the browser default");
+    assert_object_equals(request.context, {
+      scope: "ancestor",
+      shared: "target",
+      bodyOnly: true,
+      ancestorOnly: true,
+      targetOnly: true
+    }, "target-to-body context values merge without crossing the iframe boundary");
+    assert_false(state.pathCrossedDocument, "the child event path excludes its iframe owner");
+    assert_true(state.visibleDuringHandoff, "the visible-state class reaches the child body");
+
+    childDocument.body.classList.toggle("vscode-context-menu-visible", false);
+    assert_false(childDocument.body.classList.contains("vscode-context-menu-visible"),
+      "the visible-state class clears when the menu hides");
+  }, "nested context menus preserve cancellation, ancestry, visibility, and coordinates");
+</script>

tests/WebPlatformSubset/webscene-nested-context-menu-profile.json

@@ -0,0 +1,29 @@
+{
+  "profile": "webscene-nested-context-menu-1",
+  "wptRevision": "2c705104a295c48053eeddf7fe0170d790a4e853",
+  "runtime": "v8",
+  "viewport": {
+    "width": 800,
+    "height": 600,
+    "deviceScaleFactor": 1
+  },
+  "required": [
+    {
+      "path": "contracts/nested-context-menu-handoff.html",
+      "type": "contract",
+      "capabilities": [
+        "nested-context-menu-cancellation",
+        "document-bounded-context-ancestry",
+        "data-context-ancestor-merge",
+        "nested-context-menu-visibility",
+        "nested-context-menu-coordinate-handoff"
+      ],
+      "evidence": [
+        "code-oss-webview-context-menu"
+      ],
+      "reason": "Chrome/native oracle for the unchanged Code OSS webview context-menu listener: prior cancellation, target-to-body data context merging, child-document event paths, visibility class propagation, and child-local menu coordinates."
+    }
+  ],
+  "harnessBlocked": [],
+  "excluded": []
+}