chrome-devtools-frontend 1.0.1537268 → 1.0.1538310

package/front_end/ui/legacy/UIUtils.ts

@@ -36,7 +36,7 @@
 
 import './Toolbar.js';
 
-import type * as Common from '../../core/common/common.js';
+import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
@@ -1480,6 +1480,7 @@ export class DevToolsIconLabel extends HTMLElement {
   }
 }
 
+// eslint-disable-next-line @devtools/enforce-custom-element-prefix
 customElements.define('dt-icon-label', DevToolsIconLabel);
 
 export class DevToolsSmallBubble extends HTMLElement {
@@ -1498,6 +1499,7 @@ export class DevToolsSmallBubble extends HTMLElement {
   }
 }
 
+// eslint-disable-next-line @devtools/enforce-custom-element-prefix
 customElements.define('dt-small-bubble', DevToolsSmallBubble);
 
 export class DevToolsCloseButton extends HTMLElement {
@@ -1536,6 +1538,7 @@ export class DevToolsCloseButton extends HTMLElement {
   }
 }
 
+// eslint-disable-next-line @devtools/enforce-custom-element-prefix
 customElements.define('dt-close-button', DevToolsCloseButton);
 
 export function bindInput(
@@ -2353,3 +2356,116 @@ export function copyTextToClipboard(text: string, alert?: string): void {
 export function getDevToolsBoundingElement(): HTMLElement {
   return InspectorView.maybeGetInspectorViewInstance()?.element || document.body;
 }
+
+/**
+ * @deprecated Prefer {@link bindToSetting} as this function leaks the checkbox via the setting listener.
+ */
+export const bindCheckbox = function(
+    input: CheckboxLabel, setting: Common.Settings.Setting<boolean>, metric?: UserMetricOptions): void {
+  const setValue = bindCheckboxImpl(input, setting.set.bind(setting), metric);
+  setting.addChangeListener(event => setValue(event.data));
+  setValue(setting.get());
+};
+
+export const bindCheckboxImpl = function(
+    input: CheckboxLabel, apply: (value: boolean) => void, metric?: UserMetricOptions): (value: boolean) => void {
+  input.addEventListener('change', onInputChanged, false);
+
+  function onInputChanged(): void {
+    apply(input.checked);
+
+    if (input.checked && metric?.enable) {
+      Host.userMetrics.actionTaken(metric.enable);
+    }
+
+    if (!input.checked && metric?.disable) {
+      Host.userMetrics.actionTaken(metric.disable);
+    }
+
+    if (metric?.toggle) {
+      Host.userMetrics.actionTaken(metric.toggle);
+    }
+  }
+
+  return function setValue(value: boolean): void {
+    if (value !== input.checked) {
+      input.checked = value;
+    }
+  };
+};
+
+export const bindToSetting =
+    (settingOrName: string|Common.Settings.Setting<boolean|string>|Common.Settings.RegExpSetting,
+     stringValidator?: (newSettingValue: string) => boolean): ReturnType<typeof Directives.ref> => {
+      const setting = typeof settingOrName === 'string' ?
+          Common.Settings.Settings.instance().moduleSetting(settingOrName) :
+          settingOrName;
+
+      // We can't use `setValue` as the change listener directly, otherwise we won't
+      // be able to remove it again.
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      let setValue: (value: any) => void;
+      function settingChanged(): void {
+        setValue(setting.get());
+      }
+
+      if (setting.type() === Common.Settings.SettingType.BOOLEAN || typeof setting.defaultValue === 'boolean') {
+        return Directives.ref(e => {
+          if (e === undefined) {
+            setting.removeChangeListener(settingChanged);
+            return;
+          }
+
+          setting.addChangeListener(settingChanged);
+          setValue =
+              bindCheckboxImpl(e as CheckboxLabel, (setting as Common.Settings.Setting<boolean>).set.bind(setting));
+          setValue(setting.get());
+        });
+      }
+
+      if (setting.type() === Common.Settings.SettingType.REGEX || setting instanceof Common.Settings.RegExpSetting) {
+        return Directives.ref(e => {
+          if (e === undefined) {
+            setting.removeChangeListener(settingChanged);
+            return;
+          }
+
+          setting.addChangeListener(settingChanged);
+          setValue = bindInput(e as HTMLInputElement, setting.set.bind(setting), (value: string) => {
+            try {
+              new RegExp(value);
+              return true;
+            } catch {
+              return false;
+            }
+          }, /* numeric */ false);
+          setValue(setting.get());
+        });
+      }
+
+      if (typeof setting.defaultValue === 'string') {
+        return Directives.ref(e => {
+          if (e === undefined) {
+            setting.removeChangeListener(settingChanged);
+            return;
+          }
+
+          setting.addChangeListener(settingChanged);
+          setValue = bindInput(
+              e as HTMLInputElement, setting.set.bind(setting), stringValidator ?? (() => true), /* numeric */ false);
+          setValue(setting.get());
+        });
+      }
+
+      throw new Error(`Cannot infer type for setting  '${setting.name}'`);
+    };
+
+/**
+ * Track toggle action as a whole or
+ * track on and off action separately.
+ */
+export interface UserMetricOptions {
+  toggle?: Host.UserMetrics.Action;
+  enable?: Host.UserMetrics.Action;
+  disable?: Host.UserMetrics.Action;
+}

package/front_end/ui/legacy/Widget.ts

@@ -35,7 +35,7 @@ import * as Platform from '../../core/platform/platform.js';
 import * as Geometry from '../../models/geometry/geometry.js';
 import * as Lit from '../../ui/lit/lit.js';
 
-import {createShadowRootWithCoreStyles} from './UIUtils.js';
+import {cloneCustomElement, createShadowRootWithCoreStyles} from './UIUtils.js';
 
 // Remember the original DOM mutation methods here, since we
 // will override them below to sanity check the Widget system.
@@ -68,6 +68,64 @@ export function widgetConfig<F extends WidgetFactory<Widget>, ParamKeys extends
   return new WidgetConfig(widgetClass, widgetParams);
 }
 
+let currentUpdateQueue: Map<Widget, PromiseWithResolvers<void>>|null = null;
+const currentlyProcessed = new Set<Widget>();
+let nextUpdateQueue = new Map<Widget, PromiseWithResolvers<void>>();
+let pendingAnimationFrame: number|null = null;
+
+function enqueueIntoNextUpdateQueue(widget: Widget): Promise<void> {
+  const scheduledUpdate = nextUpdateQueue.get(widget) ?? Promise.withResolvers<void>();
+  nextUpdateQueue.delete(widget);
+  nextUpdateQueue.set(widget, scheduledUpdate);
+  if (pendingAnimationFrame === null) {
+    pendingAnimationFrame = requestAnimationFrame(runNextUpdate);
+  }
+  return scheduledUpdate.promise;
+}
+
+function enqueueWidgetUpdate(widget: Widget): Promise<void> {
+  if (currentUpdateQueue) {
+    if (currentlyProcessed.has(widget)) {
+      return enqueueIntoNextUpdateQueue(widget);
+    }
+    const scheduledUpdate = currentUpdateQueue.get(widget) ?? Promise.withResolvers<void>();
+    currentUpdateQueue.delete(widget);
+    currentUpdateQueue.set(widget, scheduledUpdate);
+    return scheduledUpdate.promise;
+  }
+  return enqueueIntoNextUpdateQueue(widget);
+}
+
+function cancelUpdate(widget: Widget): void {
+  if (currentUpdateQueue) {
+    const scheduledUpdate = currentUpdateQueue.get(widget);
+    if (scheduledUpdate) {
+      scheduledUpdate.resolve();
+      currentUpdateQueue.delete(widget);
+    }
+  }
+  const scheduledUpdate = nextUpdateQueue.get(widget);
+  if (scheduledUpdate) {
+    scheduledUpdate.resolve();
+    nextUpdateQueue.delete(widget);
+  }
+}
+
+function runNextUpdate(): void {
+  pendingAnimationFrame = null;
+  currentUpdateQueue = nextUpdateQueue;
+  nextUpdateQueue = new Map();
+  for (const [widget, {resolve}] of currentUpdateQueue) {
+    currentlyProcessed.add(widget);
+    void (async () => {
+      await widget.performUpdate();
+      resolve();
+    })();
+  }
+  currentUpdateQueue = null;
+  currentlyProcessed.clear();
+}
+
 export class WidgetElement<WidgetT extends Widget> extends HTMLElement {
   #widgetClass?: WidgetFactory<WidgetT>;
   #widgetParams?: Partial<WidgetT>;
@@ -169,12 +227,14 @@ export class WidgetElement<WidgetT extends Widget> extends HTMLElement {
   }
 
   override cloneNode(deep: boolean): Node {
-    const clone = super.cloneNode(deep) as WidgetElement<WidgetT>;
+    const clone = cloneCustomElement(this, deep);
     if (!this.#widgetClass) {
       throw new Error('No widgetClass defined');
     }
-    clone.#widgetClass = this.#widgetClass;
-    clone.#widgetParams = this.#widgetParams;
+    clone.widgetConfig = {
+      widgetClass: this.#widgetClass,
+      widgetParams: this.#widgetParams,
+    };
     return clone;
   }
 }
@@ -218,8 +278,7 @@ function decrementWidgetCounter(parentElement: Element, childElement: Element):
 // The resolved `updateComplete` promise, which is used as a marker for the
 // Widget's `#updateComplete` private property to indicate that there's no
 // pending update.
-const UPDATE_COMPLETE = Promise.resolve(true);
-const UPDATE_COMPLETE_RESOLVE = (_result: boolean): void => {};
+const UPDATE_COMPLETE = Promise.resolve();
 
 /**
  * Additional options passed to the `Widget` constructor to configure the
@@ -277,8 +336,6 @@ export class Widget {
   #invalidationsRequested?: boolean;
   #externallyManaged?: boolean;
   #updateComplete = UPDATE_COMPLETE;
-  #updateCompleteResolve = UPDATE_COMPLETE_RESOLVE;
-  #updateRequestID = 0;
 
   /**
    * Constructs a new `Widget` with the given `options`.
@@ -617,14 +674,7 @@ export class Widget {
       return;
     }
 
-    // Cancel any pending update.
-    if (this.#updateRequestID !== 0) {
-      cancelAnimationFrame(this.#updateRequestID);
-      this.#updateCompleteResolve(true);
-      this.#updateCompleteResolve = UPDATE_COMPLETE_RESOLVE;
-      this.#updateComplete = UPDATE_COMPLETE;
-      this.#updateRequestID = 0;
-    }
+    cancelUpdate(this);
 
     // hideOnDetach means that we should never remove element from dom - content
     // has iframes and detaching it will hurt.
@@ -876,21 +926,6 @@ export class Widget {
   performUpdate(): Promise<void>|void {
   }
 
-  async #performUpdateCallback(): Promise<boolean> {
-    // Mark this update cycle as complete by assigning
-    // the marker sentinel.
-    this.#updateComplete = UPDATE_COMPLETE;
-    this.#updateCompleteResolve = UPDATE_COMPLETE_RESOLVE;
-    this.#updateRequestID = 0;
-
-    // Run the actual update logic.
-    await this.performUpdate();
-
-    // Resolve the `updateComplete` with `true` if no
-    // new update was triggered during this cycle.
-    return this.#updateComplete === UPDATE_COMPLETE;
-  }
-
   /**
    * Schedules an asynchronous update for this widget.
    *
@@ -898,12 +933,7 @@ export class Widget {
    * frame.
    */
   requestUpdate(): void {
-    if (this.#updateComplete === UPDATE_COMPLETE) {
-      this.#updateComplete = new Promise((resolve, reject) => {
-        this.#updateCompleteResolve = resolve;
-        this.#updateRequestID = requestAnimationFrame(() => this.#performUpdateCallback().then(resolve, reject));
-      });
-    }
+    this.#updateComplete = enqueueWidgetUpdate(this);
   }
 
   /**
@@ -931,7 +961,7 @@ export class Widget {
    *          updating, the value is `true` if there are no more pending updates,
    *          and `false` if the update cycle triggered another update.
    */
-  get updateComplete(): Promise<boolean> {
+  get updateComplete(): Promise<void> {
     return this.#updateComplete;
   }
 }

package/front_end/ui/legacy/XLink.ts

@@ -153,4 +153,5 @@ export class ContextMenuProvider implements Provider<Node> {
   }
 }
 
+// eslint-disable-next-line @devtools/enforce-custom-element-prefix
 customElements.define('x-link', XLink);

package/front_end/ui/legacy/components/inline_editor/Swatches.ts

@@ -38,6 +38,7 @@ export class CSSShadowSwatch extends HTMLElement {
   }
 }
 
+// eslint-disable-next-line @devtools/enforce-custom-element-prefix
 customElements.define('css-shadow-swatch', CSSShadowSwatch);
 
 declare global {

package/front_end/ui/legacy/components/perf_ui/BrickBreaker.ts

@@ -602,4 +602,5 @@ declare global {
   }
 }
 
+// eslint-disable-next-line @devtools/enforce-custom-element-prefix
 customElements.define('brick-breaker', BrickBreaker);

package/front_end/ui/legacy/components/settings_ui/SettingsUI.ts

@@ -0,0 +1,125 @@
+// Copyright 2014 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+/* eslint-disable @devtools/no-imperative-dom-api */
+
+import * as Common from '../../../../core/common/common.js';
+import * as i18n from '../../../../core/i18n/i18n.js';
+import * as Platform from '../../../../core/platform/platform.js';
+import * as Settings from '../../../components/settings/settings.js';
+import * as VisualLogging from '../../../visual_logging/visual_logging.js';
+import * as UI from '../../legacy.js';
+
+const UIStrings = {
+  /**
+   * @description Note when a setting change will require the user to reload DevTools
+   */
+  srequiresReload: '*Requires reload',
+  /**
+   * @description Message to display if a setting change requires a reload of DevTools
+   */
+  oneOrMoreSettingsHaveChanged: 'One or more settings have changed which requires a reload to take effect',
+} as const;
+const str_ = i18n.i18n.registerUIStrings('ui/legacy/components/settings_ui/SettingsUI.ts', UIStrings);
+const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+
+export function createSettingCheckbox(
+    name: Common.UIString.LocalizedString, setting: Common.Settings.Setting<boolean>,
+    tooltip?: string): UI.UIUtils.CheckboxLabel {
+  const label = UI.UIUtils.CheckboxLabel.create(name, undefined, undefined, setting.name);
+  label.name = name;
+  UI.UIUtils.bindCheckbox(label, setting);
+  if (tooltip) {
+    UI.Tooltip.Tooltip.install(label, tooltip);
+  }
+  return label;
+}
+
+const createSettingSelect = function(
+    name: string, options: Common.Settings.SimpleSettingOption[], requiresReload: boolean|null,
+    setting: Common.Settings.Setting<unknown>, subtitle?: string): HTMLElement {
+  const container = document.createElement('div');
+  const settingSelectElement = container.createChild('p');
+  settingSelectElement.classList.add('settings-select');
+  const label = settingSelectElement.createChild('label');
+  const select = settingSelectElement.createChild('select');
+  label.textContent = name;
+  if (subtitle) {
+    container.classList.add('chrome-select-label');
+    label.createChild('p').textContent = subtitle;
+  }
+  select.setAttribute('jslog', `${VisualLogging.dropDown().track({change: true}).context(setting.name)}`);
+  UI.ARIAUtils.bindLabelToControl(label, select);
+
+  for (const option of options) {
+    if (option.text && typeof option.value === 'string') {
+      select.add(
+          UI.UIUtils.createOption(option.text, option.value, Platform.StringUtilities.toKebabCase(option.value)));
+    }
+  }
+
+  let reloadWarning: HTMLElement|(Element | null) = (null as Element | null);
+  if (requiresReload) {
+    reloadWarning = container.createChild('p', 'reload-warning hidden');
+    reloadWarning.textContent = i18nString(UIStrings.srequiresReload);
+    UI.ARIAUtils.markAsAlert(reloadWarning);
+  }
+
+  const {deprecation} = setting;
+  if (deprecation) {
+    const warning = new Settings.SettingDeprecationWarning.SettingDeprecationWarning();
+    warning.data = deprecation;
+    label.appendChild(warning);
+  }
+
+  setting.addChangeListener(settingChanged);
+  settingChanged();
+  select.addEventListener('change', selectChanged, false);
+  return container;
+
+  function settingChanged(): void {
+    const newValue = setting.get();
+    for (let i = 0; i < options.length; i++) {
+      if (options[i].value === newValue) {
+        select.selectedIndex = i;
+      }
+    }
+    select.disabled = setting.disabled();
+  }
+
+  function selectChanged(): void {
+    // Don't use event.target.value to avoid conversion of the value to string.
+    setting.set(options[select.selectedIndex].value);
+    if (reloadWarning) {
+      reloadWarning.classList.remove('hidden');
+      UI.InspectorView.InspectorView.instance().displayReloadRequiredWarning(
+          i18nString(UIStrings.oneOrMoreSettingsHaveChanged));
+    }
+  }
+};
+
+export const createControlForSetting = function(
+    setting: Common.Settings.Setting<unknown>, subtitle?: string): HTMLElement|null {
+  const uiTitle = setting.title();
+  switch (setting.type()) {
+    case Common.Settings.SettingType.BOOLEAN: {
+      const component = new Settings.SettingCheckbox.SettingCheckbox();
+      component.data = {
+        setting: setting as Common.Settings.Setting<boolean>,
+      };
+      component.onchange = () => {
+        if (setting.reloadRequired()) {
+          UI.InspectorView.InspectorView.instance().displayReloadRequiredWarning(
+              i18nString(UIStrings.oneOrMoreSettingsHaveChanged));
+        }
+      };
+      return component;
+    }
+    case Common.Settings.SettingType.ENUM:
+      return createSettingSelect(uiTitle, setting.options(), setting.reloadRequired(), setting, subtitle);
+    default:
+      console.error('Invalid setting type: ' + setting.type());
+      return null;
+  }
+};

package/front_end/ui/legacy/components/settings_ui/settings_ui.ts

@@ -0,0 +1,8 @@
+
+// Copyright 2025 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import * as SettingsUI from './SettingsUI.js';
+
+export {SettingsUI};

package/front_end/ui/legacy/legacy.ts

@@ -33,7 +33,6 @@ import * as ReportView from './ReportView.js';
 import * as ResizerWidget from './ResizerWidget.js';
 import * as RootView from './RootView.js';
 import * as SearchableView from './SearchableView.js';
-import * as SettingsUI from './SettingsUI.js';
 import * as ShortcutRegistry from './ShortcutRegistry.js';
 import * as SoftContextMenu from './SoftContextMenu.js';
 import * as SoftDropDown from './SoftDropDown.js';
@@ -85,7 +84,6 @@ export {
   ResizerWidget,
   RootView,
   SearchableView,
-  SettingsUI,
   ShortcutRegistry,
   SoftContextMenu,
   SoftDropDown,

package/front_end/ui/legacy/popover.css

@@ -3,17 +3,18 @@
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file.
  */
-
-.widget {
-  display: flex;
-  font: var(--sys-typescale-body4-regular);
-  box-shadow: var(--sys-elevation-level2);
-  color: var(--sys-color-on-surface);
-  background-color: var(--sys-color-base-container-elevated);
-  border-radius: var(--sys-shape-corner-small);
-  padding: var(--sys-size-4);
-  user-select: text;
-  overflow: auto;
+@scope to (.widget > *) {
+  .widget {
+    display: flex;
+    font: var(--sys-typescale-body4-regular);
+    box-shadow: var(--sys-elevation-level2);
+    color: var(--sys-color-on-surface);
+    background-color: var(--sys-color-base-container-elevated);
+    border-radius: var(--sys-shape-corner-small);
+    padding: var(--sys-size-4);
+    user-select: text;
+    overflow: auto;
+  }
 }
 
 .squiggles-content {

package/front_end/ui/visual_logging/KnownContextValues.ts

@@ -681,6 +681,7 @@ export const knownContextValues = new Set([
   'ca',
   'cache-control',
   'cache-disabled',
+  'cache-disabled-documentation',
   'cache-disabled-true',
   'cache-storage',
   'cache-storage-data',
@@ -2647,6 +2648,7 @@ export const knownContextValues = new Set([
   'network.clear',
   'network.config',
   'network.enable-remote-file-loading',
+  'network.enable-remote-file-loading-documentation',
   'network.enable-request-blocking',
   'network.group-by-frame',
   'network.group-by-frame-false',
@@ -4128,6 +4130,7 @@ export const knownContextValues = new Set([
   'warning',
   'wasm',
   'wasm-auto-stepping',
+  'wasm-auto-stepping-documentation',
   'wasm-auto-stepping-false',
   'watch',
   'watch-test-expression',

package/package.json

@@ -102,5 +102,5 @@
       "flat-cache": "6.1.12"
     }
   },
-  "version": "1.0.1537268"
+  "version": "1.0.1538310"
 }

package/front_end/models/trace/lantern/testing/MetricTestUtils.ts

@@ -1,62 +0,0 @@
-// Copyright 2024 The Chromium Authors
-// Use of this source code is governed by a BSD-style license that can be
-// found in the LICENSE file.
-
-// Unsure why this lint is failing, given `lantern/metrics/SpeedIndex.test.ts` does the same
-// and is fine. Maybe `*.test.*` files are excluded from this rule?
-// eslint-disable-next-line @devtools/es-modules-import
-import * as TraceLoader from '../../../../testing/TraceLoader.js';
-import * as Trace from '../../trace.js';
-import * as Lantern from '../lantern.js';
-
-function toLanternTrace(traceEvents: readonly Trace.Types.Events.Event[]): Lantern.Types.Trace {
-  return {
-    traceEvents: traceEvents as unknown as Lantern.Types.TraceEvent[],
-  };
-}
-
-async function runTraceProcessor(context: Mocha.Suite|Mocha.Context, trace: Lantern.Types.Trace) {
-  TraceLoader.TraceLoader.setTestTimeout(context);
-
-  const processor = Trace.Processor.TraceProcessor.createWithAllHandlers();
-  await processor.parse(trace.traceEvents as Trace.Types.Events.Event[], {isCPUProfile: false, isFreshRecording: true});
-  if (!processor.data) {
-    throw new Error('No data');
-  }
-  return processor.data;
-}
-
-async function getComputationDataFromFixture(context: Mocha.Suite|Mocha.Context, {trace, settings, url}: {
-  trace: Lantern.Types.Trace,
-  settings?: Lantern.Types.Simulation.Settings,
-  url?: Lantern.Types.Simulation.URL,
-}) {
-  settings = settings ?? {} as Lantern.Types.Simulation.Settings;
-  if (!settings.throttlingMethod) {
-    settings.throttlingMethod = 'simulate';
-  }
-  const data = await runTraceProcessor(context, trace);
-  const requests = Trace.LanternComputationData.createNetworkRequests(trace, data);
-  const networkAnalysis = Lantern.Core.NetworkAnalyzer.analyze(requests);
-  if (!networkAnalysis) {
-    throw new Error('no networkAnalysis');
-  }
-
-  const frameId = data.Meta.mainFrameId;
-  const navigationId = data.Meta.mainFrameNavigations[0].args.data?.navigationId;
-  if (!navigationId) {
-    throw new Error('no navigation id found');
-  }
-
-  return {
-    simulator: Lantern.Simulation.Simulator.createSimulator({...settings, networkAnalysis}),
-    graph: Trace.LanternComputationData.createGraph(requests, trace, data, url),
-    processedNavigation: Trace.LanternComputationData.createProcessedNavigation(data, frameId, navigationId),
-  };
-}
-
-export {
-  getComputationDataFromFixture,
-  runTraceProcessor as runTrace,
-  toLanternTrace,
-};

package/front_end/models/trace/lantern/testing/testing.ts

@@ -1,5 +0,0 @@
-// Copyright 2024 The Chromium Authors
-// Use of this source code is governed by a BSD-style license that can be
-// found in the LICENSE file.
-
-export * from './MetricTestUtils.js';

package/front_end/panels/application/components/badge.css

@@ -1,25 +0,0 @@
-/*
- * Copyright 2021 The Chromium Authors
- * Use of this source code is governed by a BSD-style license that can be
- * found in the LICENSE file.
- */
-
-:host .badge-error {
-  --override-adorner-text-color: var(--sys-color-error-bright);
-  --override-adorner-border-color: var(--sys-color-error-bright);
-}
-
-:host .badge-success {
-  --override-adorner-text-color: var(--sys-color-tertiary);
-  --override-adorner-border-color: var(--sys-color-tertiary);
-}
-
-:host .badge-secondary {
-  --override-adorner-text-color: var(--sys-color-token-subtle);
-  --override-adorner-border-color: var(--sys-color-token-subtle);
-}
-
-/* Use mono-space source code font to assist reading of adorner content */
-:host devtools-adorner {
-  font-family: var(--source-code-font-family);
-}