GrafanaUI: Add noBackdropBlur feature toggle (#102128)

* Create new noBackdropBlur feature toggle

* Disable backdrop blur with feature toggle

packages/grafana-data/src/types/featureToggles.gen.ts

@@ -258,4 +258,5 @@ export interface FeatureToggles {
   infinityRunQueriesInParallel?: boolean;
   inviteUserExperimental?: boolean;
   extraLanguages?: boolean;
+  noBackdropBlur?: boolean;
 }

packages/grafana-ui/src/themes/GlobalStyles/GlobalStyles.tsx

@@ -14,6 +14,7 @@ import { getExtraStyles } from './extra';
 import { getFilterTableStyles } from './filterTable';
 import { getFontStyles } from './fonts';
 import { getFormElementStyles } from './forms';
+import { getHacksStyles } from './hacks';
 import { getJsonFormatterStyles } from './jsonFormatter';
 import { getLegacySelectStyles } from './legacySelect';
 import { getMarkdownStyles } from './markdownStyles';
@@ -24,9 +25,14 @@ import { getSlateStyles } from './slate';
 import { getUplotStyles } from './uPlot';
 import { getUtilityClassStyles } from './utilityClasses';
 
+interface GlobalStylesProps {
+  hackNoBackdropBlur?: boolean;
+}
+
 /** @internal */
-export function GlobalStyles() {
+export function GlobalStyles(props: GlobalStylesProps) {
   const theme = useTheme2();
+  const { hackNoBackdropBlur } = props;
 
   return (
     <Global
@@ -52,6 +58,7 @@ export function GlobalStyles() {
         getUplotStyles(theme),
         getUtilityClassStyles(theme),
         getLegacySelectStyles(theme),
+        getHacksStyles({ hackNoBackdropBlur }),
       ]}
     />
   );

packages/grafana-ui/src/themes/GlobalStyles/hacks.ts

@@ -0,0 +1,21 @@
+import { css } from '@emotion/react';
+
+export interface Hacks {
+  hackNoBackdropBlur?: boolean;
+}
+
+export function getHacksStyles(hacks: Hacks) {
+  return css([
+    /**
+     * Disables all backdrop blur effects to improve performance on extremely
+     * resource constrained devices.
+     *
+     * Controlled via the `noBackdropBlur` feature toggle in Grafana
+     */
+    hacks.hackNoBackdropBlur && {
+      '*, *:before, *:after': {
+        backdropFilter: 'none !important',
+      },
+    },
+  ]);
+}