Add CSS performance controls.

src/card.ts

@@ -102,7 +102,7 @@ import { View } from './view.js';
 import pkg from '../package.json';
 import { ViewContext } from 'view';
 import { DataManager } from './utils/data-manager.js';
-import { setLowPerformanceProfile } from './performance.js';
+import { setLowPerformanceProfile, setPerformanceCSSStyles } from './performance.js';
 
 /** A note on media callbacks:
  *
@@ -1097,6 +1097,10 @@ export class FrigateCard extends LitElement {
     if (this._cameras && (changedProps.has('_config') || changedProps.has('_cameras'))) {
       this._dataManager = new DataManager(this._cameras);
     }
+
+    if (changedProps.has('_cardWideConfig')) {
+      setPerformanceCSSStyles(this, this._cardWideConfig?.performance);
+    }
   }
 
   /**

src/const.ts

@@ -206,6 +206,8 @@ export const CONF_OVERRIDES = 'overrides' as const;
 
 export const CONF_PERFORMANCE = 'performance' as const;
 export const CONF_PERFORMANCE_FEATURES_ANIMATED_PROGRESS_INDICATOR = `${CONF_PERFORMANCE}.features.animated_progress_indicator`;
+export const CONF_PERFORMANCE_STYLE_BOX_SHADOW = `${CONF_PERFORMANCE}.style.box_shadow`;
+export const CONF_PERFORMANCE_STYLE_BORDER_RADIUS = `${CONF_PERFORMANCE}.style.border_radius`;
 
 // Taken from https://github.dev/home-assistant/frontend/blob/b5861869e39290fd2e15737e89571dfc543b3ad3/src/data/media-player.ts#L93
 export const MEDIA_PLAYER_SUPPORT_BROWSE_MEDIA = 131072;

src/performance.ts

@@ -1,12 +1,13 @@
 // TODO: Change defaults themselves?
-// TODO: CSS
 // TODO: Don't pump out conditionStates based on state?
+// TODO: view history
 
 import { deepRemoveDefaults } from './utils/zod.js';
 import {
   frigateCardConfigSchema,
   FrigateCardConfig,
   RawFrigateCardConfig,
+  PerformanceConfig,
 } from './types';
 import { getArrayConfigPath, getConfigValue, setConfigValue } from './config-mgmt.js';
 import {
@@ -42,6 +43,8 @@ import {
   CONF_MENU_BUTTONS_TIMELINE,
   CONF_MENU_STYLE,
   CONF_PERFORMANCE_FEATURES_ANIMATED_PROGRESS_INDICATOR,
+  CONF_PERFORMANCE_STYLE_BORDER_RADIUS,
+  CONF_PERFORMANCE_STYLE_BOX_SHADOW,
   CONF_TIMELINE_CONTROLS_THUMBNAILS_MODE,
   CONF_TIMELINE_CONTROLS_THUMBNAILS_SHOW_DETAILS,
   CONF_TIMELINE_CONTROLS_THUMBNAILS_SHOW_FAVORITE_CONTROL,
@@ -114,6 +117,10 @@ const LOW_PROFILE_DEFAULTS = {
 
   // Disable all optional performance related features.
   [CONF_PERFORMANCE_FEATURES_ANIMATED_PROGRESS_INDICATOR]: false,
+
+  // Disable all expensive CSS features.
+  [CONF_PERFORMANCE_STYLE_BORDER_RADIUS]: false,
+  [CONF_PERFORMANCE_STYLE_BOX_SHADOW]: false,
 };
 
 const LOW_PROFILE_CAMERA_DEFAULTS = {
@@ -163,3 +170,28 @@ export const setLowPerformanceProfile = (
   }
   return parsedConfig;
 };
+
+const STYLE_DISABLE_MAP = {
+  box_shadow: 'none',
+  border_radius: '0px',
+};
+
+/**
+ * Set card-wide CSS variables for performance.
+ * @param element The element to set the variables on.
+ * @param performance The performance configuration.
+ */
+export const setPerformanceCSSStyles = (
+  element: HTMLElement,
+  performance?: PerformanceConfig,
+): void => {
+  const styles = performance?.style ?? {};
+  for (const configKey of Object.keys(styles)) {
+    const CSSKey = `--frigate-card-css-${configKey.replaceAll('_', '-')}`;
+    if (styles[configKey] === false) {
+      element.style.setProperty(CSSKey, STYLE_DISABLE_MAP[configKey]);
+    } else {
+      element.style.removeProperty(CSSKey);
+    }
+  }
+};

src/scss/drawer-inject.scss

@@ -27,16 +27,16 @@
   max-width: 90%;
 }
 
-:host([location=right]) #d {
+:host([location='right']) #d {
   // Position to the right.
   left: unset;
   right: 0;
   transform: translateX(100%);
 }
 
-:host([location=right][open]) #d {
+:host([location='right'][open]) #d {
   transform: none;
-  box-shadow: 0px 0px 25px 0px black;
+  box-shadow: var(--frigate-card-css-box-shadow, 0px 0px 25px 0px black);
 }
 
 #ifs {

src/scss/gallery.scss

@@ -31,7 +31,7 @@
   text-align: center;
   color: var(--primary-text-color, white);
   border: 1px solid var(--primary-color);
-  border-radius: var(--ha-card-border-radius, 4px);
+  border-radius: var(--frigate-card-css-border-radius, var(--ha-card-border-radius, 4px));
 
   // Folder background color should match the thumbnail element background
   // color.

src/scss/next-previous-control.scss

@@ -29,7 +29,7 @@
   border-radius: 50%;
   height: var(--frigate-card-next-prev-size);
   top: calc(50% - (var(--frigate-card-next-prev-size) / 2));
-  box-shadow: 0px 0px 20px 5px black;
+  box-shadow: var(--frigate-card-css-box-shadow, 0px 0px 20px 5px black);
   transition: all 0.2s ease-out;
   opacity: 0.8;
   aspect-ratio: 1 / 1;

src/scss/thumbnail-feature-event.scss

@@ -12,7 +12,7 @@ ha-icon {
   // Safari will occasionally not load thumbnails correctly with display block.
   display: inline-block;
 
-  border-radius: var(--ha-card-border-radius, 4px);
+  border-radius: var(--frigate-card-css-border-radius, var(--ha-card-border-radius, 4px));
 
   max-width: var(--frigate-card-thumbnail-size);
   max-height: 100%;

src/scss/thumbnail-feature-recording.scss

@@ -12,7 +12,7 @@
 
   border: 1px solid var(--secondary-color);
   background-color: var(--secondary-background-color);
-  border-radius: var(--ha-card-border-radius, 4px);
+  border-radius: var(--frigate-card-css-border-radius, var(--ha-card-border-radius, 4px));
   box-sizing: border-box;
 
   color: var(--primary-text-color);

src/scss/thumbnail.scss

@@ -16,7 +16,7 @@
 
 :host([details]) {
   border: 1px solid var(--primary-color);
-  border-radius: var(--ha-card-border-radius, 4px);
+  border-radius: var(--frigate-card-css-border-radius, var(--ha-card-border-radius, 4px));
   padding: 2px;
 
   // When details are enabled, use a background color so that the details have

src/scss/timeline-core.scss

@@ -49,7 +49,7 @@ div.timeline {
 .vis-item.vis-selected {
   border-color: var(--accent-color);
   background-color: var(--accent-color);
-  box-shadow: 0px 0px 5px 1px var(--primary-color);
+  box-shadow: var(--frigate-card-css-box-shadow, 0px 0px 5px 1px var(--primary-color));
 }
 .vis-item.vis-background {
   background-color: var(--primary-color);
@@ -88,7 +88,10 @@ div.timeline {
   border-style: dotted;
   color: var(--primary-text-color);
   background-color: var(--primary-background-color);
-  box-shadow: 0px 0px 5px 1px var(--primary-color);
+  box-shadow: var(--frigate-card-css-box-shadow, 0px 0px 5px 1px var(--primary-color));
+}
+.vis-item.vis-range {
+  border-radius: var(--frigate-card-css-border-radius, unset);
 }
 
 .vis-time-axis .vis-grid.vis-minor {
@@ -127,7 +130,7 @@ div.vis-tooltip {
 .target_bar {
   border-left: 2px solid var(--primary-color);
   opacity: 0.7;
-  box-shadow: 0px 0px 3px 1px var(--primary-color);
+  box-shadow: var(--frigate-card-css-box-shadow, 0px 0px 3px 1px var(--primary-color));
 
   // Prevent the mouse interacting with the custom time.
   pointer-events: none;

src/types.ts

@@ -1211,6 +1211,10 @@ const performanceConfigDefault = {
   features: {
     animated_progress_indicator: true,
   },
+  style: {
+    border_radius: false,
+    box_shadow: true,
+  },
 };
 
 const performanceConfigSchema = z
@@ -1223,6 +1227,12 @@ const performanceConfigSchema = z
           .default(performanceConfigDefault.features.animated_progress_indicator),
       })
       .default(performanceConfigDefault.features),
+    style: z
+      .object({
+        border_radius: z.boolean().default(performanceConfigDefault.style.border_radius),
+        box_shadow: z.boolean().default(performanceConfigDefault.style.box_shadow),
+      })
+      .default(performanceConfigDefault.style),
   })
   .default(performanceConfigDefault);
 export type PerformanceConfig = z.infer<typeof performanceConfigSchema>;

tsconfig.json

@@ -1,9 +1,9 @@
 {
   "compilerOptions": {
-    "target": "es2017",
+    "target": "es2021",
     "module": "es2020",
     "moduleResolution": "node",
-    "lib": ["es2017", "dom", "dom.iterable"],
+    "lib": ["es2021", "dom", "dom.iterable"],
     "noEmit": true,
     "noUnusedParameters": true,
     "noImplicitReturns": true,