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',
+      },
+    },
+  ]);
+}

pkg/services/featuremgmt/registry.go

@@ -1811,6 +1811,15 @@ var (
 			Owner:        grafanaFrontendPlatformSquad,
 			FrontendOnly: true,
 		},
+		{
+			Name:              "noBackdropBlur",
+			Description:       "Disables backdrop blur",
+			Stage:             FeatureStageExperimental,
+			Owner:             grafanaFrontendPlatformSquad,
+			HideFromAdminPage: true,
+			HideFromDocs:      true,
+			FrontendOnly:      true,
+		},
 	}
 )
 

pkg/services/featuremgmt/toggles_gen.csv

@@ -239,3 +239,4 @@ grafanaManagedRecordingRulesDatasources,experimental,@grafana/alerting-squad,fal
 infinityRunQueriesInParallel,privatePreview,@grafana/oss-big-tent,false,false,false
 inviteUserExperimental,experimental,@grafana/sharing-squad,false,false,true
 extraLanguages,experimental,@grafana/grafana-frontend-platform,false,false,true
+noBackdropBlur,experimental,@grafana/grafana-frontend-platform,false,false,true

pkg/services/featuremgmt/toggles_gen.go

@@ -966,4 +966,8 @@ const (
 	// FlagExtraLanguages
 	// Enables additional languages
 	FlagExtraLanguages = "extraLanguages"
+
+	// FlagNoBackdropBlur
+	// Disables backdrop blur
+	FlagNoBackdropBlur = "noBackdropBlur"
 )

pkg/services/featuremgmt/toggles_gen.json

@@ -2913,6 +2913,21 @@
         "hideFromDocs": true
       }
     },
+    {
+      "metadata": {
+        "name": "noBackdropBlur",
+        "resourceVersion": "1741879106163",
+        "creationTimestamp": "2025-03-13T15:18:26Z"
+      },
+      "spec": {
+        "description": "Disables backdrop blur",
+        "stage": "experimental",
+        "codeowner": "@grafana/grafana-frontend-platform",
+        "frontend": true,
+        "hideFromAdminPage": true,
+        "hideFromDocs": true
+      }
+    },
     {
       "metadata": {
         "name": "nodeGraphDotLayout",

public/app/AppWrapper.tsx

@@ -121,7 +121,7 @@ export class AppWrapper extends Component<AppWrapperProps, AppWrapperState> {
                   actions={[]}
                   options={{ enableHistory: true, callbacks: { onSelectAction: commandPaletteActionSelected } }}
                 >
-                  <GlobalStyles />
+                  <GlobalStyles hackNoBackdropBlur={config.featureToggles.noBackdropBlur} />
                   <MaybeTimeRangeProvider>
                     <SidecarContext_EXPERIMENTAL.Provider value={sidecarServiceSingleton_EXPERIMENTAL}>
                       <ScopesContextProvider>

public/app/routes/RoutesWrapper.tsx

@@ -6,6 +6,7 @@ import { CompatRouter } from 'react-router-dom-v5-compat';
 
 import { GrafanaTheme2 } from '@grafana/data/';
 import {
+  config,
   locationService,
   LocationServiceProvider,
   useChromeHeaderHeight,
@@ -114,7 +115,7 @@ export function ExperimentalSplitPaneRouterWrapper(props: RouterWrapperProps) {
             <Router history={locationService.getHistory()}>
               <LocationServiceProvider service={locationService}>
                 <CompatRouter>
-                  <GlobalStyles />
+                  <GlobalStyles hackNoBackdropBlur={config.featureToggles.noBackdropBlur} />
                   <div className={styles.secondAppChrome}>
                     <div className={styles.secondAppToolbar}>
                       <IconButton