Improve performance by removing shadow and rounding in preview, not a…

…s pretty but better for performance testing
glideapps · Mar 9, 2022 · e4f77e8 · e4f77e8
1 parent 543515e
commit e4f77e8
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 8 deletions.
diff --git a/packages/core/src/data-editor/data-editor-beautiful.stories.tsx b/packages/core/src/data-editor/data-editor-beautiful.stories.tsx
@@ -27,6 +27,7 @@ import { DataEditorRef } from "..";
 import range from "lodash/range";
 import isArray from "lodash/isArray";
 import { assertNever } from "../common/support";
+import { browserIsFirefox } from "../common/browser-detect";
 
 faker.seed(1337);
 
@@ -161,6 +162,15 @@ const BeautifulStyle = styled.div`
             height: 100%;
         }
     }
+
+    &.firefox .sizer {
+        border-radius: 0;
+        box-shadow: unset;
+
+        .sizer-clip {
+            border-radius: 0;
+        }
+    }
 `;
 
 const PropName = styled.span`
@@ -203,7 +213,7 @@ interface BeautifulProps {
 const BeautifulWrapper: React.FC<BeautifulProps> = p => {
     const { title, children, description, className } = p;
     return (
-        <BeautifulStyle className={className}>
+        <BeautifulStyle className={className + (browserIsFirefox ? " firefox" : "")}>
             <h1>{title}</h1>
             {description}
             <div className="sizer">

diff --git a/packages/core/src/data-grid/color-parser.ts b/packages/core/src/data-grid/color-parser.ts
@@ -53,3 +53,15 @@ export function withAlpha(color: string, alpha: number): string {
     const [r, g, b] = parseToRgba(color);
     return `rgba(${r}, ${g}, ${b}, ${alpha})`;
 }
+
+export function blend(color: string, background: string): string {
+    const [r, g, b, a] = parseToRgba(color);
+    if (a === 1) return color;
+    const [br, bg, bb, ba] = parseToRgba(background);
+    const ao = a + ba * (1 - a);
+    // (xaA + xaB·(1−aA))/aR
+    const ro = (a * r + ba * br * (1 - a)) / ao;
+    const go = (a * g + ba * bg * (1 - a)) / ao;
+    const bo = (a * b + ba * bb * (1 - a)) / ao;
+    return `rgba(${ro}, ${go}, ${bo}, ${ao})`;
+}
diff --git a/packages/core/src/data-grid/data-grid-render.tsx b/packages/core/src/data-grid/data-grid-render.tsx
@@ -26,7 +26,7 @@ import {
 } from "./data-grid-lib";
 import { SpriteManager, SpriteVariant } from "./data-grid-sprites";
 import { Theme } from "../common/styles";
-import { withAlpha } from "./color-parser";
+import { blend, withAlpha } from "./color-parser";
 import { CellRenderers } from "./cells";
 import { DeprepCallback } from "./cells/cell-types";
 
@@ -274,7 +274,6 @@ function blitLastFrame(
                 width: -deltaX,
                 height: height,
             });
-            ctx.beginPath();
         }
 
         ctx.setTransform(1, 0, 0, 1, 0, 0);
@@ -317,8 +316,8 @@ function drawGridLines(
         }
         ctx.clip("evenodd");
     }
-    const hColor = theme.horizontalBorderColor ?? theme.borderColor;
-    const vColor = theme.borderColor;
+    const hColor = blend(theme.horizontalBorderColor ?? theme.borderColor, theme.bgCell);
+    const vColor = blend(theme.borderColor, theme.bgCell);
     ctx.beginPath();
     // we need to under-draw the header background on its line to improve its contrast.
     ctx.moveTo(0, totalHeaderHeight + 0.5);

diff --git a/packages/core/src/data-grid/data-grid.tsx b/packages/core/src/data-grid/data-grid.tsx
@@ -115,7 +115,7 @@ export interface DataGridProps {
     readonly experimental?: {
         readonly paddingRight?: number;
         readonly paddingBottom?: number;
-        readonly disableFirefoxRescaling?: boolean;
+        readonly enableFirefoxRescaling?: boolean;
         readonly isSubGrid?: boolean;
         readonly strict?: boolean;
     };
@@ -207,9 +207,9 @@ const DataGrid: React.ForwardRefRenderFunction<DataGridRef, DataGridProps> = (p,
     const totalHeaderHeight = enableGroups ? groupHeaderHeight + headerHeight : headerHeight;
 
     const scrollingStopRef = React.useRef(-1);
-    const disableFirefoxRescaling = p.experimental?.disableFirefoxRescaling === true;
+    const disableFirefoxRescaling = p.experimental?.enableFirefoxRescaling !== true;
     React.useLayoutEffect(() => {
-        if (!browserIsFirefox || window.devicePixelRatio === 1 || disableFirefoxRescaling || 3 === 3) return;
+        if (!browserIsFirefox || window.devicePixelRatio === 1 || disableFirefoxRescaling) return;
         // We don't want to go into scroll mode for a single repaint
         if (scrollingStopRef.current !== -1) {
             setScrolling(true);