Simplify application context menu cache, rename to be clearer.

[ian-r-rose]

This function is still a bit of a hack, but a useful one at times. This tries to simplify it and make it a bit clearer.

[jasongrout]

@ian-r-rose - it seems that composedPath is now pretty well supported. What do you think about using it? https://developer.mozilla.org/en-US/docs/Web/API/Event/composedPath

[ian-r-rose]

I haven't really looked into it. Does it return all the DOM nodes in the hierarchy, or just ones for which an event handler is registered?

[ian-r-rose]

(I also don't view this PR as critical, just wanted to sneak it in since it's API breaking)

[jasongrout]

From the examples, it appears to return all elements on which listeners could be invoked, i.e., all, not just ones that have listeners actually listening.

[ian-r-rose]

Sure, I'll try that.

[jasongrout]

diff --git a/packages/application/src/frontend.ts b/packages/application/src/frontend.ts
index c9bd3196c..637bab0f4 100644
--- a/packages/application/src/frontend.ts
+++ b/packages/application/src/frontend.ts
@@ -115,17 +115,7 @@ export abstract class JupyterFrontEnd<
     ) {
       return undefined;
     }
-    // This one-liner doesn't work, but should at some point in the future
-    // `return this._contextMenuEvent.composedPath() as HTMLElement[];`
-    // cf. (https://developer.mozilla.org/en-US/docs/Web/API/Event)
-    let node = this._contextMenuEvent.target as HTMLElement;
-    do {
-      if (test(node)) {
-        return node;
-      }
-      node = node.parentNode as HTMLElement;
-    } while (node.parentNode && node !== node.parentNode);
-    return undefined;
+    return this._contextMenuEvent.composedPath().find(test);
   }
 
   /**

[jasongrout]

Or maybe even simpler:

diff --git a/packages/application/src/frontend.ts b/packages/application/src/frontend.ts
index c9bd3196c..dda4d7aea 100644
--- a/packages/application/src/frontend.ts
+++ b/packages/application/src/frontend.ts
@@ -109,22 +109,9 @@ export abstract class JupyterFrontEnd<
   contextMenuHitTest(
     test: (node: HTMLElement) => boolean
   ): HTMLElement | undefined {
-    if (
-      !this._contextMenuEvent ||
-      !(this._contextMenuEvent.target instanceof HTMLElement)
-    ) {
-      return undefined;
+    if (this._contextMenuEvent) {
+      return this._contextMenuEvent.composedPath().find(test);
     }
-    // This one-liner doesn't work, but should at some point in the future
-    // `return this._contextMenuEvent.composedPath() as HTMLElement[];`
-    // cf. (https://developer.mozilla.org/en-US/docs/Web/API/Event)
-    let node = this._contextMenuEvent.target as HTMLElement;
-    do {
-      if (test(node)) {
-        return node;
-      }
-      node = node.parentNode as HTMLElement;
-    } while (node.parentNode && node !== node.parentNode);
     return undefined;
   }

[jasongrout]

Or perhaps we want to filter event targets to be just html elements? return this._contextMenuEvent.composedPath().filter(x => x instanceof HTMLElement).find(test); or something...

[ian-r-rose]

Yeah, I think we should filter.

[jasongrout]

Okay. I'm afk for a bit, but I'll check here when I'm back.

[ian-r-rose]

Okay, updated.

[jasongrout]

Nice! Does it actually work too? (I didn't test it...)

[ian-r-rose]

Hmm, it seems to have some problems.

[ian-r-rose]

composedPath() is returning an empty array some of the time, for reasons I don't know. I may back out that last commit, as nice as it looks.

[jasongrout]

Okay, that's fine. Your version was pretty nice too. I liked the way you simplified it down to a do-while.

[jasongrout]

I updated the comment to be more accurate in the context of this new code.

[ian-r-rose]

Sounds good, thanks @jasongrout