fix(plugin-chart-table): decouple sticky-header scrollbar measurement from the shared getScrollBarSize util

rusackas pointed out that getScrollBarSize() is also used by TableChart.tsx's
resize-twitch guard, which doesn't render the custom scrollbar styling, so
making the shared measurement return the custom 8px width could throw off
that unrelated threshold. Split it: getScrollBarSize() goes back to
measuring the plain native scrollbar, and a new getCustomScrollBarSize()
(used only by useSticky.tsx) measures with the custom ::-webkit-scrollbar
styling applied.

Author: sadpandajoe

superset-frontend/plugins/plugin-chart-table/src/DataTable/hooks/useSticky.tsx

@@ -31,8 +31,9 @@ import {
 } from 'react';
 import { TableInstance, Hooks } from 'react-table';
 import { useTheme, css } from '@apache-superset/core/theme';
-import getScrollBarSize, {
+import {
   CUSTOM_SCROLLBAR_SIZE,
+  getCustomScrollBarSize,
 } from '../utils/getScrollBarSize';
 import needScrollBar from '../utils/needScrollBar';
 import useMountedMemo from '../utils/useMountedMemo';
@@ -167,7 +168,7 @@ function StickyWrap({
   const scrollFooterRef = useRef<HTMLDivElement>(null); // fixed footer
   const scrollBodyRef = useRef<HTMLDivElement>(null); // main body
 
-  const scrollBarSize = getScrollBarSize();
+  const scrollBarSize = getCustomScrollBarSize();
   const { bodyHeight, columnWidths, hasVerticalScroll } = sticky;
   const needSizer =
     !columnWidths ||

superset-frontend/plugins/plugin-chart-table/src/DataTable/utils/getScrollBarSize.ts

@@ -17,45 +17,69 @@
  * under the License.
  */
 // Width/height of the custom `::-webkit-scrollbar` applied to the sticky
-// body and header sizer in useSticky.tsx. Shared here so the measured
-// scrollbar size always matches what actually renders.
+// body and header sizer in useSticky.tsx.
 export const CUSTOM_SCROLLBAR_SIZE = 8;
 
 let cached: number | undefined;
+let cachedCustom: number | undefined;
 
 const css = (x: TemplateStringsArray) => x.join('\n');
 
+function measureScrollBarSize(probeClassName?: string) {
+  const inner = document.createElement('div');
+  const outer = document.createElement('div');
+  // Custom scrollbars are only styleable via a stylesheet rule, since
+  // inline styles can't express `::-webkit-scrollbar` pseudo-elements.
+  const style = probeClassName ? document.createElement('style') : undefined;
+  if (style && probeClassName) {
+    style.textContent = `.${probeClassName}::-webkit-scrollbar { width: ${CUSTOM_SCROLLBAR_SIZE}px; height: ${CUSTOM_SCROLLBAR_SIZE}px; }`;
+    inner.className = probeClassName;
+    document.head.append(style);
+  }
+  inner.style.cssText = css`
+    width: auto;
+    height: 100%;
+    overflow: scroll;
+  `;
+  outer.style.cssText = css`
+    position: absolute;
+    visibility: hidden;
+    overflow: hidden;
+    width: 100px;
+    height: 50px;
+  `;
+  outer.append(inner);
+  document.body.append(outer);
+  const size = outer.clientWidth - inner.clientWidth;
+  outer.remove();
+  style?.remove();
+  return size;
+}
+
+// Measures the browser/OS native scrollbar width. Used anywhere an
+// un-styled scrollable region's real footprint matters (e.g. the chart's
+// outer resize-twitch guard in TableChart.tsx).
 export default function getScrollBarSize(forceRefresh = false) {
   if (typeof document === 'undefined') {
     return 0;
   }
   if (cached === undefined || forceRefresh) {
-    const probeClassName = 'superset-scrollbar-size-probe';
-    const inner = document.createElement('div');
-    const outer = document.createElement('div');
-    const style = document.createElement('style');
-    // Custom scrollbars are only styleable via a stylesheet rule, since
-    // inline styles can't express `::-webkit-scrollbar` pseudo-elements.
-    style.textContent = `.${probeClassName}::-webkit-scrollbar { width: ${CUSTOM_SCROLLBAR_SIZE}px; height: ${CUSTOM_SCROLLBAR_SIZE}px; }`;
-    inner.className = probeClassName;
-    inner.style.cssText = css`
-      width: auto;
-      height: 100%;
-      overflow: scroll;
-    `;
-    outer.style.cssText = css`
-      position: absolute;
-      visibility: hidden;
-      overflow: hidden;
-      width: 100px;
-      height: 50px;
-    `;
-    outer.append(inner);
-    document.head.append(style);
-    document.body.append(outer);
-    cached = outer.clientWidth - inner.clientWidth;
-    outer.remove();
-    style.remove();
+    cached = measureScrollBarSize();
   }
   return cached;
 }
+
+// Measures the scrollbar width as it actually renders with the custom
+// `::-webkit-scrollbar` styling applied (see scrollBarStyles in
+// useSticky.tsx). On browsers that don't support `::-webkit-scrollbar`
+// (e.g. Firefox) this equals the native scrollbar width. Only use this for
+// elements that carry that same custom styling.
+export function getCustomScrollBarSize(forceRefresh = false) {
+  if (typeof document === 'undefined') {
+    return 0;
+  }
+  if (cachedCustom === undefined || forceRefresh) {
+    cachedCustom = measureScrollBarSize('superset-scrollbar-size-probe');
+  }
+  return cachedCustom;
+}

superset-frontend/plugins/plugin-chart-table/test/DataTable/utils/getScrollBarSize.test.ts

@@ -18,13 +18,24 @@
  */
 import getScrollBarSize, {
   CUSTOM_SCROLLBAR_SIZE,
+  getCustomScrollBarSize,
 } from '../../../src/DataTable/utils/getScrollBarSize';
 
-test('measures the scrollbar probe using the shared custom scrollbar size', () => {
+test('getScrollBarSize measures the native scrollbar without any custom styling probe', () => {
   const appendSpy = jest.spyOn(document.head, 'append');
 
   getScrollBarSize(true);
 
+  expect(appendSpy).not.toHaveBeenCalled();
+
+  appendSpy.mockRestore();
+});
+
+test('getCustomScrollBarSize measures the probe using the shared custom scrollbar size', () => {
+  const appendSpy = jest.spyOn(document.head, 'append');
+
+  getCustomScrollBarSize(true);
+
   const styleEl = appendSpy.mock.calls
     .map(args => args[0])
     .find((node): node is HTMLStyleElement => node instanceof HTMLStyleElement);