refactor: Use toggleAttribute natively where possible (#2494)

src/components-lib/key-assigner-controller.ts

@@ -1,7 +1,6 @@
 import { LitElement, ReactiveController } from 'lit';
 import { isEqual } from 'lodash-es';
 import { KeyboardShortcut } from '../config/schema/view';
-import { setOrRemoveAttribute } from '../utils/basic';
 
 export class KeyAssignerController implements ReactiveController {
   private _host: LitElement;
@@ -42,7 +41,7 @@ export class KeyAssignerController implements ReactiveController {
   }
   private _setAssigning(assigning: boolean): void {
     this._assigning = assigning;
-    setOrRemoveAttribute(this._host, this._assigning, 'assigning');
+    this._host.toggleAttribute('assigning', this._assigning);
 
     if (this._assigning) {
       this._host.addEventListener('keydown', this._keydownEventHandler);

src/components-lib/media-dimensions-container-controller.ts

@@ -2,11 +2,7 @@ import { ReactiveController, ReactiveControllerHost } from 'lit';
 import { debounce } from 'lodash-es';
 import { CameraDimensionsConfig } from '../config/schema/cameras';
 import { MediaLoadedInfoEventDetail } from '../types';
-import {
-  aspectRatioToString,
-  setOrRemoveAttribute,
-  setOrRemoveStyleProperty,
-} from '../utils/basic';
+import { aspectRatioToString, setOrRemoveStyleProperty } from '../utils/basic';
 import { updateElementStyleFromMediaLayoutConfig } from '../utils/media-layout';
 
 const ROTATED_ATTRIBUTE = 'rotated';
@@ -215,7 +211,7 @@ export class MediaDimensionsContainerController implements ReactiveController {
   }
 
   private _setRotation(element: HTMLElement, rotate: boolean): void {
-    setOrRemoveAttribute(element, rotate, ROTATED_ATTRIBUTE);
+    element.toggleAttribute(ROTATED_ATTRIBUTE, rotate);
   }
 
   private _resize(): void {

src/components-lib/media-grid-controller.ts

@@ -4,7 +4,6 @@ import { ViewDisplayConfig } from '../config/schema/common/display';
 import {
   forceReflow,
   getChildrenFromElement,
-  setOrRemoveAttribute,
   setOrRemoveStyleProperty,
 } from '../utils/basic';
 import { fireAdvancedCameraCardEvent } from '../utils/fire-advanced-camera-card-event';
@@ -322,12 +321,12 @@ export class MediaGridController {
 
   private _updateSelectedStylesOnElements(): void {
     for (const [id, element] of this._gridContents.entries()) {
-      setOrRemoveAttribute(element, id === this._selected, 'selected');
+      element.toggleAttribute('selected', id === this._selected);
 
       // Explicitly use an 'unselected' attribute vs a :not(selected) such that
       // a carousel with neither selected nor unselected will behave normally.
       // This matches a css selector in viewer-carousel.scss .
-      setOrRemoveAttribute(element, id !== this._selected, 'unselected');
+      element.toggleAttribute('unselected', id !== this._selected);
     }
   }
 

src/components-lib/menu-controller.ts

@@ -9,7 +9,7 @@ import type { MenuItem } from '../config/schema/elements/custom/menu/types.js';
 import type { MenuConfig } from '../config/schema/menu.js';
 import type { Interaction } from '../types.js';
 import { getActionConfigGivenAction } from '../utils/action';
-import { arrayify, isTruthy, setOrRemoveAttribute } from '../utils/basic.js';
+import { arrayify, isTruthy } from '../utils/basic.js';
 import { AutoHideState, isAutoHidden as evaluateAutoHidden } from './auto-hide.js';
 
 export class MenuController {
@@ -126,7 +126,7 @@ export class MenuController {
 
   public setExpanded(expanded: boolean): void {
     this._expanded = expanded;
-    setOrRemoveAttribute(this._host, expanded, 'expanded');
+    this._host.toggleAttribute('expanded', expanded);
     this._host.requestUpdate();
   }
 

src/components-lib/status-bar-controller.ts

@@ -5,7 +5,7 @@ import { ActionsConfig, StatusBarItem } from '../config/schema/actions/types';
 import { STATUS_BAR_PRIORITY_DEFAULT } from '../config/schema/common/const';
 import { StatusBarConfig } from '../config/schema/status-bar';
 import { getActionConfigGivenAction } from '../utils/action';
-import { arrayify, setOrRemoveAttribute } from '../utils/basic';
+import { arrayify } from '../utils/basic';
 import { Timer } from '../utils/timer';
 import { AutoHideState, isAutoHidden as evaluateAutoHidden } from './auto-hide';
 
@@ -144,10 +144,10 @@ export class StatusBarController {
   }
 
   private _show(): void {
-    setOrRemoveAttribute(this._host, false, 'hide');
+    this._host.toggleAttribute('hide', false);
   }
 
   private _hide(): void {
-    setOrRemoveAttribute(this._host, true, 'hide');
+    this._host.toggleAttribute('hide', true);
   }
 }

src/components-lib/timeline/controller.ts

@@ -30,12 +30,7 @@ import {
 import { configDefaults } from '../../config/schema/types';
 import { HomeAssistant } from '../../ha/types';
 import { stopEventFromActivatingCardWideActions } from '../../utils/action';
-import {
-  formatDateAndTime,
-  isHoverableDevice,
-  isTruthy,
-  setOrRemoveAttribute,
-} from '../../utils/basic';
+import { formatDateAndTime, isHoverableDevice, isTruthy } from '../../utils/basic';
 import { findBestMediaTimeIndex } from '../../utils/find-best-media-time-index';
 import { fireAdvancedCameraCardEvent } from '../../utils/fire-advanced-camera-card-event';
 import { ViewMedia } from '../../view/item';
@@ -195,17 +190,9 @@ export class TimelineController {
     if (this._timelineConfig !== (options.timelineConfig ?? null)) {
       this._timelineConfig = options?.timelineConfig ?? null;
 
-      setOrRemoveAttribute(
-        this._host,
-        !!this._timelineConfig?.show_recordings,
-        'recordings',
-      );
-      setOrRemoveAttribute(
-        this._host,
-        this._timelineConfig?.style === 'ribbon',
-        'ribbon',
-      );
-      setOrRemoveAttribute(this._host, this._timelineConfig?.style === 'stack', 'stack');
+      this._host.toggleAttribute('recordings', !!this._timelineConfig?.show_recordings);
+      this._host.toggleAttribute('ribbon', this._timelineConfig?.style === 'ribbon');
+      this._host.toggleAttribute('stack', this._timelineConfig?.style === 'stack');
     }
 
     this._thumbnailConfig = options?.thumbnailConfig ?? null;
@@ -215,7 +202,7 @@ export class TimelineController {
     this._timelineConfig = options?.timelineConfig ?? null;
     this._mini = options?.mini ?? false;
 
-    setOrRemoveAttribute(this._host, this._shouldShowGroups(), 'groups');
+    this._host.toggleAttribute('groups', this._shouldShowGroups());
   }
 
   public async setView(viewManagerEpoch: ViewManagerEpoch | null): Promise<void> {