From bf172dfd296d15c02473904646c19d2bb663cc3f Mon Sep 17 00:00:00 2001 From: Josh Hunt Date: Fri, 14 Mar 2025 15:21:35 +0000 Subject: [PATCH] GrafanaUI: Add noBackdropBlur feature toggle (#102128) * Create new noBackdropBlur feature toggle * Disable backdrop blur with feature toggle --- .../src/types/featureToggles.gen.ts | 1 + .../src/themes/GlobalStyles/GlobalStyles.tsx | 9 +++++++- .../src/themes/GlobalStyles/hacks.ts | 21 +++++++++++++++++++ pkg/services/featuremgmt/registry.go | 9 ++++++++ pkg/services/featuremgmt/toggles_gen.csv | 1 + pkg/services/featuremgmt/toggles_gen.go | 4 ++++ pkg/services/featuremgmt/toggles_gen.json | 15 +++++++++++++ public/app/AppWrapper.tsx | 2 +- public/app/routes/RoutesWrapper.tsx | 3 ++- 9 files changed, 62 insertions(+), 3 deletions(-) create mode 100644 packages/grafana-ui/src/themes/GlobalStyles/hacks.ts diff --git a/packages/grafana-data/src/types/featureToggles.gen.ts b/packages/grafana-data/src/types/featureToggles.gen.ts index 5e008a732e7..cee459b0eab 100644 --- a/packages/grafana-data/src/types/featureToggles.gen.ts +++ b/packages/grafana-data/src/types/featureToggles.gen.ts @@ -258,4 +258,5 @@ export interface FeatureToggles { infinityRunQueriesInParallel?: boolean; inviteUserExperimental?: boolean; extraLanguages?: boolean; + noBackdropBlur?: boolean; } diff --git a/packages/grafana-ui/src/themes/GlobalStyles/GlobalStyles.tsx b/packages/grafana-ui/src/themes/GlobalStyles/GlobalStyles.tsx index 12e094433d2..b8f4800fbae 100644 --- a/packages/grafana-ui/src/themes/GlobalStyles/GlobalStyles.tsx +++ b/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 ( ); diff --git a/packages/grafana-ui/src/themes/GlobalStyles/hacks.ts b/packages/grafana-ui/src/themes/GlobalStyles/hacks.ts new file mode 100644 index 00000000000..1e4fea76a6f --- /dev/null +++ b/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', + }, + }, + ]); +} diff --git a/pkg/services/featuremgmt/registry.go b/pkg/services/featuremgmt/registry.go index d9053899ef8..f92929fceaf 100644 --- a/pkg/services/featuremgmt/registry.go +++ b/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, + }, } ) diff --git a/pkg/services/featuremgmt/toggles_gen.csv b/pkg/services/featuremgmt/toggles_gen.csv index 4d6d6ca54bc..d54698fe6e6 100644 --- a/pkg/services/featuremgmt/toggles_gen.csv +++ b/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 diff --git a/pkg/services/featuremgmt/toggles_gen.go b/pkg/services/featuremgmt/toggles_gen.go index 55b65a745c2..4d2ff0b954a 100644 --- a/pkg/services/featuremgmt/toggles_gen.go +++ b/pkg/services/featuremgmt/toggles_gen.go @@ -966,4 +966,8 @@ const ( // FlagExtraLanguages // Enables additional languages FlagExtraLanguages = "extraLanguages" + + // FlagNoBackdropBlur + // Disables backdrop blur + FlagNoBackdropBlur = "noBackdropBlur" ) diff --git a/pkg/services/featuremgmt/toggles_gen.json b/pkg/services/featuremgmt/toggles_gen.json index 89f92814f9f..12c658a56d5 100644 --- a/pkg/services/featuremgmt/toggles_gen.json +++ b/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", diff --git a/public/app/AppWrapper.tsx b/public/app/AppWrapper.tsx index fdbf6bf3b2d..fb241de0224 100644 --- a/public/app/AppWrapper.tsx +++ b/public/app/AppWrapper.tsx @@ -121,7 +121,7 @@ export class AppWrapper extends Component { actions={[]} options={{ enableHistory: true, callbacks: { onSelectAction: commandPaletteActionSelected } }} > - + diff --git a/public/app/routes/RoutesWrapper.tsx b/public/app/routes/RoutesWrapper.tsx index 8a897553c7c..7e4701f040e 100644 --- a/public/app/routes/RoutesWrapper.tsx +++ b/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) { - +