Fixes context menu hit test to deal with svg nodes.

packages/application/src/frontend.ts

@@ -105,8 +105,8 @@ export abstract class JupyterFrontEnd<
 
   /**
    * Walks up the DOM hierarchy of the target of the active `contextmenu`
-   * event, testing the nodes for a user-supplied funcion. This can
-   * be used to find a node on which to operate, given a context menu click.
+   * event, testing each HTMLElement ancestor for a user-supplied funcion. This can
+   * be used to find an HTMLElement on which to operate, given a context menu click.
    *
    * @param test - a function that takes an `HTMLElement` and returns a
    *   boolean for whether it is the element the requester is seeking.
@@ -118,16 +118,16 @@ export abstract class JupyterFrontEnd<
   ): HTMLElement | undefined {
     if (
       !this._contextMenuEvent ||
-      !(this._contextMenuEvent.target instanceof HTMLElement)
+      !(this._contextMenuEvent.target instanceof Node)
     ) {
       return undefined;
     }
-    let node = this._contextMenuEvent.target as HTMLElement;
+    let node = this._contextMenuEvent.target;
     do {
-      if (test(node)) {
+      if (node instanceof HTMLElement && test(node)) {
         return node;
       }
-      node = node.parentNode as HTMLElement;
+      node = node.parentNode;
     } while (node && node.parentNode && node !== node.parentNode);
     return undefined;
 

packages/ui-components/src/style/icon.ts

@@ -1,7 +1,7 @@
 // Copyright (c) Jupyter Development Team.
 // Distributed under the terms of the Modified BSD License.
 
-import { cssRule, style } from 'typestyle/lib';
+import { style } from 'typestyle/lib';
 import { NestedCSSProperties } from 'typestyle/lib/types';
 
 /**
@@ -66,14 +66,15 @@ const iconCSSBreadCrumb: NestedCSSProperties = {
   height: '16px',
   width: '16px',
   verticalAlign: 'middle',
+  // `&` will be substituted for the generated classname (interpolation)
   $nest: {
     '&:hover': {
       backgroundColor: 'var(--jp-layout-color2)'
     },
     '&:first-child': {
       marginLeft: '0px'
     },
-    ['.jp-mod-dropTarget']: {
+    ['.jp-mod-dropTarget&']: {
       backgroundColor: 'var(--jp-brand-color2)',
       opacity: 0.7
     }
@@ -175,7 +176,36 @@ const containerCSSSettingsEditor: NestedCSSProperties = {
 };
 
 const containerCSSSideBar: NestedCSSProperties = {
-  transform: 'rotate(90deg)'
+  // `&` will be substituted for the generated classname (interpolation)
+  $nest: {
+    // left sidebar tab divs
+    '.jp-SideBar.jp-mod-left .p-TabBar-tab &': {
+      transform: 'rotate(90deg)'
+    },
+    // left sidebar currently selected tab div
+    '.jp-SideBar.jp-mod-left .p-TabBar-tab.p-mod-current &': {
+      transform:
+        'rotate(90deg)\n' +
+        '    translate(\n' +
+        '      calc(-0.5 * var(--jp-border-width)),\n' +
+        '      calc(-0.5 * var(--jp-border-width))\n' +
+        '    )'
+    },
+
+    // right sidebar tab divs
+    '.jp-SideBar.jp-mod-right .p-TabBar-tab &': {
+      transform: 'rotate(-90deg)'
+    },
+    // right sidebar currently selected tab div
+    '.jp-SideBar.jp-mod-right .p-TabBar-tab.p-mod-current &': {
+      transform:
+        'rotate(-90deg)\n' +
+        '    translate(\n' +
+        '      calc(0.5 * var(--jp-border-width)),\n' +
+        '      calc(-0.5 * var(--jp-border-width))\n' +
+        '    )'
+    }
+  }
 };
 
 const containerCSSSplash: NestedCSSProperties = {
@@ -236,9 +266,12 @@ function containerCSS(props: IIconStyle): NestedCSSProperties {
  * for setting the style on the container of an svg node representing an icon
  */
 export const iconStyle = (props: IIconStyle): string => {
+  const conCSS = containerCSS(props);
+
   return style({
-    ...containerCSS(props),
+    ...conCSS,
     $nest: {
+      ...conCSS.$nest,
       ['svg']: iconCSS(props)
     }
   });
@@ -250,19 +283,3 @@ export const iconStyle = (props: IIconStyle): string => {
 export const iconStyleFlat = (props: IIconStyle): string => {
   return style(iconCSS(props));
 };
-
-// TODO: Figure out a better cludge for styling current sidebar tab selection
-cssRule(
-  `.p-TabBar-tab.p-mod-current .${iconStyle({
-    center: true,
-    kind: 'sideBar'
-  })}`,
-  {
-    transform:
-      'rotate(90deg)\n' +
-      '    translate(\n' +
-      '      calc(-0.5 * var(--jp-border-width)),\n' +
-      '      calc(-0.5 * var(--jp-border-width))\n' +
-      '    )'
-  }
-);