From 577ea8f6a9cb3baa48bd631e31f38e558ba81cd3 Mon Sep 17 00:00:00 2001 From: Josh Hunt Date: Tue, 8 Apr 2025 11:58:19 +0100 Subject: [PATCH] GrafanaUI: Remove blurred background from overlay backdrops to improve performance (#103563) * default noBackdropBlur to enabled * move blur from hacks to theme.components, tweak backdrop colour * remove toggle completely * fix unused import --- .../src/themes/createComponents.ts | 5 ++++- .../src/types/featureToggles.gen.ts | 4 ---- .../src/components/Carousel/Carousel.tsx | 1 - .../src/components/Drawer/Drawer.tsx | 1 - .../src/components/Modal/getModalStyles.ts | 1 - .../src/themes/GlobalStyles/GlobalStyles.tsx | 5 ++--- .../src/themes/GlobalStyles/hacks.ts | 19 +++---------------- 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 +++++++++------ .../components/AppChrome/AppChromeMenu.tsx | 1 - .../ExtensionSidebar/GlobalStylesWrapper.tsx | 3 +-- .../commandPalette/CommandPalette.tsx | 1 - public/app/routes/RoutesWrapper.tsx | 3 +-- 15 files changed, 20 insertions(+), 53 deletions(-) diff --git a/packages/grafana-data/src/themes/createComponents.ts b/packages/grafana-data/src/themes/createComponents.ts index 6421229640b..8135940325e 100644 --- a/packages/grafana-data/src/themes/createComponents.ts +++ b/packages/grafana-data/src/themes/createComponents.ts @@ -31,6 +31,9 @@ export interface ThemeComponents { }; overlay: { background: string; + + /* pixel strength for backdrop blurs */ + blur?: number; }; dashboard: { background: string; @@ -88,7 +91,7 @@ export function createComponents(colors: ThemeColors, shadows: ThemeShadows): Th padding: 1, }, overlay: { - background: colors.mode === 'dark' ? 'rgba(63, 62, 62, 0.45)' : 'rgba(208, 209, 211, 0.24)', + background: colors.mode === 'dark' ? 'rgba(63, 62, 62, 0.5)' : 'rgba(208, 209, 211, 0.5)', }, sidemenu: { width: 57, diff --git a/packages/grafana-data/src/types/featureToggles.gen.ts b/packages/grafana-data/src/types/featureToggles.gen.ts index 2c806d13802..6d37f696ff4 100644 --- a/packages/grafana-data/src/types/featureToggles.gen.ts +++ b/packages/grafana-data/src/types/featureToggles.gen.ts @@ -1001,10 +1001,6 @@ export interface FeatureToggles { */ inviteUserExperimental?: boolean; /** - * Disables backdrop blur - */ - noBackdropBlur?: boolean; - /** * Enables the alerting migration UI, to migrate datasource-managed rules to Grafana-managed rules */ alertingMigrationUI?: boolean; diff --git a/packages/grafana-ui/src/components/Carousel/Carousel.tsx b/packages/grafana-ui/src/components/Carousel/Carousel.tsx index bbf7173d5bd..17cf1efbf09 100644 --- a/packages/grafana-ui/src/components/Carousel/Carousel.tsx +++ b/packages/grafana-ui/src/components/Carousel/Carousel.tsx @@ -178,7 +178,6 @@ const getStyles = () => (theme: GrafanaTheme2) => ({ bottom: 0, left: 0, backgroundColor: theme.components.overlay.background, - backdropFilter: 'blur(1px)', alignItems: 'center', justifyContent: 'center', display: 'flex', diff --git a/packages/grafana-ui/src/components/Drawer/Drawer.tsx b/packages/grafana-ui/src/components/Drawer/Drawer.tsx index 3e9afa787bf..b68115dd756 100644 --- a/packages/grafana-ui/src/components/Drawer/Drawer.tsx +++ b/packages/grafana-ui/src/components/Drawer/Drawer.tsx @@ -292,7 +292,6 @@ const getStyles = (theme: GrafanaTheme2) => { '&:before': { backgroundColor: `${theme.components.overlay.background} !important`, - backdropFilter: 'blur(1px)', bottom: 0, content: '""', left: 0, diff --git a/packages/grafana-ui/src/components/Modal/getModalStyles.ts b/packages/grafana-ui/src/components/Modal/getModalStyles.ts index ede316fbd32..9f0aa34f0ac 100644 --- a/packages/grafana-ui/src/components/Modal/getModalStyles.ts +++ b/packages/grafana-ui/src/components/Modal/getModalStyles.ts @@ -34,7 +34,6 @@ export const getModalStyles = (theme: GrafanaTheme2) => { bottom: 0, left: 0, backgroundColor: theme.components.overlay.background, - backdropFilter: 'blur(1px)', }), modalHeader: css({ label: 'modalHeader', diff --git a/packages/grafana-ui/src/themes/GlobalStyles/GlobalStyles.tsx b/packages/grafana-ui/src/themes/GlobalStyles/GlobalStyles.tsx index f0952c4ccaf..ad4be373aca 100644 --- a/packages/grafana-ui/src/themes/GlobalStyles/GlobalStyles.tsx +++ b/packages/grafana-ui/src/themes/GlobalStyles/GlobalStyles.tsx @@ -25,14 +25,13 @@ import { getUplotStyles } from './uPlot'; import { getUtilityClassStyles } from './utilityClasses'; interface GlobalStylesProps { - hackNoBackdropBlur?: boolean; isExtensionSidebarOpen?: boolean; } /** @internal */ export function GlobalStyles(props: GlobalStylesProps) { const theme = useTheme2(); - const { hackNoBackdropBlur, isExtensionSidebarOpen } = props; + const { isExtensionSidebarOpen } = props; return ( ); diff --git a/packages/grafana-ui/src/themes/GlobalStyles/hacks.ts b/packages/grafana-ui/src/themes/GlobalStyles/hacks.ts index 1e4fea76a6f..2576fe84697 100644 --- a/packages/grafana-ui/src/themes/GlobalStyles/hacks.ts +++ b/packages/grafana-ui/src/themes/GlobalStyles/hacks.ts @@ -1,21 +1,8 @@ import { css } from '@emotion/react'; -export interface Hacks { - hackNoBackdropBlur?: boolean; -} +export interface Hacks {} 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', - }, - }, - ]); + // No hacks for now! Look how good we are! + return css([]); } diff --git a/pkg/services/featuremgmt/registry.go b/pkg/services/featuremgmt/registry.go index 140e758fe68..527c8e69ec5 100644 --- a/pkg/services/featuremgmt/registry.go +++ b/pkg/services/featuremgmt/registry.go @@ -1712,15 +1712,6 @@ var ( HideFromDocs: true, FrontendOnly: true, }, - { - Name: "noBackdropBlur", - Description: "Disables backdrop blur", - Stage: FeatureStageExperimental, - Owner: grafanaFrontendPlatformSquad, - HideFromAdminPage: true, - HideFromDocs: true, - FrontendOnly: true, - }, { Name: "alertingMigrationUI", Description: "Enables the alerting migration UI, to migrate datasource-managed rules to Grafana-managed rules", diff --git a/pkg/services/featuremgmt/toggles_gen.csv b/pkg/services/featuremgmt/toggles_gen.csv index a8f471f7422..da3238069fb 100644 --- a/pkg/services/featuremgmt/toggles_gen.csv +++ b/pkg/services/featuremgmt/toggles_gen.csv @@ -225,7 +225,6 @@ alertRuleRestore,preview,@grafana/alerting-squad,false,false,false grafanaManagedRecordingRulesDatasources,experimental,@grafana/alerting-squad,false,false,false infinityRunQueriesInParallel,privatePreview,@grafana/oss-big-tent,false,false,false inviteUserExperimental,experimental,@grafana/sharing-squad,false,false,true -noBackdropBlur,experimental,@grafana/grafana-frontend-platform,false,false,true alertingMigrationUI,experimental,@grafana/alerting-squad,false,false,true unifiedStorageHistoryPruner,experimental,@grafana/search-and-storage,false,false,false azureMonitorLogsBuilderEditor,preview,@grafana/partner-datasources,false,false,false diff --git a/pkg/services/featuremgmt/toggles_gen.go b/pkg/services/featuremgmt/toggles_gen.go index 97cd485c30f..9a1a7fc945e 100644 --- a/pkg/services/featuremgmt/toggles_gen.go +++ b/pkg/services/featuremgmt/toggles_gen.go @@ -911,10 +911,6 @@ const ( // Renders invite user button along the app FlagInviteUserExperimental = "inviteUserExperimental" - // FlagNoBackdropBlur - // Disables backdrop blur - FlagNoBackdropBlur = "noBackdropBlur" - // FlagAlertingMigrationUI // Enables the alerting migration UI, to migrate datasource-managed rules to Grafana-managed rules FlagAlertingMigrationUI = "alertingMigrationUI" diff --git a/pkg/services/featuremgmt/toggles_gen.json b/pkg/services/featuremgmt/toggles_gen.json index a135cd05cfa..76c1e9604ab 100644 --- a/pkg/services/featuremgmt/toggles_gen.json +++ b/pkg/services/featuremgmt/toggles_gen.json @@ -2177,16 +2177,19 @@ { "metadata": { "name": "noBackdropBlur", - "resourceVersion": "1743693517832", - "creationTimestamp": "2025-04-03T15:18:37Z" + "resourceVersion": "1744057771109", + "creationTimestamp": "2025-04-03T15:18:37Z", + "deletionTimestamp": "2025-04-08T09:27:30Z", + "annotations": { + "grafana.app/updatedTimestamp": "2025-04-07 20:29:31.109804663 +0000 UTC" + } }, "spec": { - "description": "Disables backdrop blur", - "stage": "experimental", + "description": "Disables backdrop blur behind modals and drawers", + "stage": "GA", "codeowner": "@grafana/grafana-frontend-platform", "frontend": true, - "hideFromAdminPage": true, - "hideFromDocs": true + "expression": "true" } }, { diff --git a/public/app/core/components/AppChrome/AppChromeMenu.tsx b/public/app/core/components/AppChrome/AppChromeMenu.tsx index 560370f4c25..e22f53e851c 100644 --- a/public/app/core/components/AppChrome/AppChromeMenu.tsx +++ b/public/app/core/components/AppChrome/AppChromeMenu.tsx @@ -81,7 +81,6 @@ export function AppChromeMenu({}: Props) { const getStyles = (theme: GrafanaTheme2) => { return { backdrop: css({ - backdropFilter: 'blur(1px)', backgroundColor: theme.components.overlay.background, bottom: 0, left: 0, diff --git a/public/app/core/components/AppChrome/ExtensionSidebar/GlobalStylesWrapper.tsx b/public/app/core/components/AppChrome/ExtensionSidebar/GlobalStylesWrapper.tsx index dfc71acc4f3..ae2d8a24266 100644 --- a/public/app/core/components/AppChrome/ExtensionSidebar/GlobalStylesWrapper.tsx +++ b/public/app/core/components/AppChrome/ExtensionSidebar/GlobalStylesWrapper.tsx @@ -1,4 +1,3 @@ -import { config } from '@grafana/runtime'; import { GlobalStyles } from '@grafana/ui'; import { useExtensionSidebarContext } from './ExtensionSidebarProvider'; @@ -10,5 +9,5 @@ import { useExtensionSidebarContext } from './ExtensionSidebarProvider'; export const GlobalStylesWrapper = () => { const { isOpen } = useExtensionSidebarContext(); - return ; + return ; }; diff --git a/public/app/features/commandPalette/CommandPalette.tsx b/public/app/features/commandPalette/CommandPalette.tsx index 066694fa1ea..28419162be3 100644 --- a/public/app/features/commandPalette/CommandPalette.tsx +++ b/public/app/features/commandPalette/CommandPalette.tsx @@ -174,7 +174,6 @@ const getSearchStyles = (theme: GrafanaTheme2, lateralSpace: number) => { bottom: 0, left: 0, background: theme.components.overlay.background, - backdropFilter: 'blur(1px)', }, }), animator: css({ diff --git a/public/app/routes/RoutesWrapper.tsx b/public/app/routes/RoutesWrapper.tsx index 118340b4b27..44844ceb354 100644 --- a/public/app/routes/RoutesWrapper.tsx +++ b/public/app/routes/RoutesWrapper.tsx @@ -6,7 +6,6 @@ import { CompatRouter } from 'react-router-dom-v5-compat'; import { GrafanaTheme2 } from '@grafana/data'; import { - config, locationService, LocationServiceProvider, useChromeHeaderHeight, @@ -113,7 +112,7 @@ export function ExperimentalSplitPaneRouterWrapper(props: RouterWrapperProps) { - +