chrome-devtools-frontend 1.0.953776 → 1.0.954427

package/front_end/generated/protocol.d.ts

@@ -10719,6 +10719,21 @@ declare namespace Protocol {
       reason: BackForwardCacheNotRestoredReason;
     }
 
+    export interface BackForwardCacheNotRestoredExplanationTree {
+      /**
+       * URL of each frame
+       */
+      url: string;
+      /**
+       * Not restored reasons of each frame
+       */
+      explanations: BackForwardCacheNotRestoredExplanation[];
+      /**
+       * Array of children frame
+       */
+      children: BackForwardCacheNotRestoredExplanationTree[];
+    }
+
     export interface AddScriptToEvaluateOnLoadRequest {
       scriptSource: string;
     }
@@ -11708,6 +11723,10 @@ declare namespace Protocol {
        * Array of reasons why the page could not be cached. This must not be empty.
        */
       notRestoredExplanations: BackForwardCacheNotRestoredExplanation[];
+      /**
+       * Tree structure of reasons why the page could not be cached for each frame.
+       */
+      notRestoredExplanationsTree?: BackForwardCacheNotRestoredExplanationTree;
     }
 
     export interface LoadEventFiredEvent {

package/front_end/models/extensions/ExtensionServer.ts

@@ -1145,12 +1145,11 @@ export class ExtensionStatus {
   E_FAILED: (...args: unknown[]) => Record;
 
   constructor() {
-    function makeStatus(code: string, description: string): Record {
-      const details = Array.prototype.slice.call(arguments, 2);
+    function makeStatus(code: string, description: string, ...details: unknown[]): Record {
       const status: Record = {code, description, details};
       if (code !== 'OK') {
         status.isError = true;
-        console.error('Extension server error: ' + Platform.StringUtilities.vsprintf(description, details));
+        console.error('Extension server error: ' + Platform.StringUtilities.sprintf(description, ...details));
       }
       return status;
     }

package/front_end/panels/application/components/BackForwardCacheView.ts

@@ -238,7 +238,9 @@ export class BackForwardCacheView extends HTMLElement {
       `;
       // clang-format on
     }
-    const isDisabled = this.#screenStatus === ScreenStatusType.Running;
+    const isTestRunning = (this.#screenStatus === ScreenStatusType.Running);
+    // Prevent running BFCache test on the DevTools window itself via DevTools on DevTools
+    const isTestingForbidden = this.#frame.url.startsWith('devtools://');
     // clang-format off
     return LitHtml.html`
       ${this.#renderBackForwardCacheStatus(this.#frame.backForwardCacheDetails.restoredFromCache)}
@@ -252,11 +254,11 @@ export class BackForwardCacheView extends HTMLElement {
       </div>
       <${ReportView.ReportView.ReportSection.litTagName}>
         <${Buttons.Button.Button.litTagName}
-          .disabled=${isDisabled}
-          .spinner=${isDisabled}
+          .disabled=${isTestRunning || isTestingForbidden}
+          .spinner=${isTestRunning}
           .variant=${Buttons.Button.Variant.PRIMARY}
           @click=${this.#navigateAwayAndBack}>
-          ${isDisabled ? LitHtml.html`
+          ${isTestRunning ? LitHtml.html`
             ${i18nString(UIStrings.runningTest)}`:`
             ${i18nString(UIStrings.runTest)}
           `}

package/front_end/panels/application/storageView.css

@@ -30,7 +30,7 @@
 }
 
 .quota-override-notification-editor {
-  border: solid 1px var(--color-background-highlight);
+  border: solid 1px var(--color-details-hairline);
   display: flex;
   flex: auto;
   margin-right: 4px;

package/front_end/panels/console/ConsoleFormat.ts

@@ -0,0 +1,197 @@
+// Copyright 2021 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import type * as SDK from '../../core/sdk/sdk.js';
+
+// VGA color palette
+const ANSI_COLORS = ['#000000', '#AA0000', '#00AA00', '#AA5500', '#0000AA', '#AA00AA', '#00AAAA', '#AAAAAA'];
+const ANSI_BRIGHT_COLORS = ['#555555', '#FF5555', '#55FF55', '#FFFF55', '#5555FF', '#FF55FF', '#55FFFF', '#FFFFFF'];
+
+export type FormatToken = {
+  type: 'generic'|'optimal',
+  value: SDK.RemoteObject.RemoteObject,
+}|{
+  type: 'string' | 'style',
+  value: string,
+};
+
+/**
+ * This is the front-end part of the Formatter function specified in the
+ * Console Standard (https://console.spec.whatwg.org/#formatter). Here we
+ * assume that all type conversions have already happened in V8 before and
+ * are only concerned with performing the actual substitutions and dealing
+ * with generic and optimal object formatting as well as styling.
+ *
+ * @param fmt the format string.
+ * @param args the substitution arguments for `fmt`.
+ * @returns a list of `FormatToken`s as well as the unused arguments.
+ */
+export const format = (fmt: string, args: SDK.RemoteObject.RemoteObject[]): {
+  tokens: FormatToken[],
+  args: SDK.RemoteObject.RemoteObject[],
+} => {
+  const tokens: FormatToken[] = [];
+
+  // Current maintained style for ANSI color codes.
+  const currentStyle = new Map<string, string>();
+  function addTextDecoration(value: string): void {
+    const textDecoration = currentStyle.get('text-decoration') ?? '';
+    if (!textDecoration.includes(value)) {
+      currentStyle.set('text-decoration', `${textDecoration} ${value}`);
+    }
+  }
+  function removeTextDecoration(value: string): void {
+    const textDecoration = currentStyle.get('text-decoration')?.replace(` ${value}`, '');
+    if (textDecoration) {
+      currentStyle.set('text-decoration', textDecoration);
+    } else {
+      currentStyle.delete('text-decoration');
+    }
+  }
+
+  function addStringToken(value: string): void {
+    if (!value) {
+      return;
+    }
+    if (tokens.length && tokens[tokens.length - 1].type === 'string') {
+      tokens[tokens.length - 1].value += value;
+      return;
+    }
+    tokens.push({type: 'string', value});
+  }
+
+  let argIndex = 0;
+  const re = /%([%_Oocsdfi])|\x1B\[([\d;]*)m/;
+  for (let match = re.exec(fmt); match !== null; match = re.exec(fmt)) {
+    addStringToken(match.input.substring(0, match.index));
+    let substitution: number|string|undefined = undefined;
+    const specifier = match[1];
+    switch (specifier) {
+      case '%':
+        addStringToken('%');
+        substitution = '';
+        break;
+      case 's':
+        if (argIndex < args.length) {
+          const {description} = args[argIndex++];
+          substitution = description ?? '';
+        }
+        break;
+      case 'c':
+        if (argIndex < args.length) {
+          const type = 'style';
+          const value = args[argIndex++].description ?? '';
+          tokens.push({type, value});
+          substitution = '';
+        }
+        break;
+      case 'o':
+      case 'O':
+        if (argIndex < args.length) {
+          const type = specifier === 'O' ? 'generic' : 'optimal';
+          const value = args[argIndex++];
+          tokens.push({type, value});
+          substitution = '';
+        }
+        break;
+      case '_':
+        if (argIndex < args.length) {
+          argIndex++;
+          substitution = '';
+        }
+        break;
+      case 'd':
+      case 'f':
+      case 'i':
+        if (argIndex < args.length) {
+          const {value} = args[argIndex++];
+          substitution = typeof value !== 'number' ? NaN : value;
+          if (specifier !== 'f') {
+            substitution = Math.floor(substitution);
+          }
+        }
+        break;
+      case undefined: {
+        const codes = (match[2] || '0').split(';').map(code => code ? parseInt(code, 10) : 0);
+        while (codes.length) {
+          const code = codes.shift() as number;
+          switch (code) {
+            case 0:
+              currentStyle.clear();
+              break;
+            case 1:
+              currentStyle.set('font-weight', 'bold');
+              break;
+            case 2:
+              currentStyle.set('font-weight', 'lighter');
+              break;
+            case 3:
+              currentStyle.set('font-style', 'italic');
+              break;
+            case 4:
+              addTextDecoration('underline');
+              break;
+            case 9:
+              addTextDecoration('line-through');
+              break;
+            case 22:
+              currentStyle.delete('font-weight');
+              break;
+            case 23:
+              currentStyle.delete('font-style');
+              break;
+            case 24:
+              removeTextDecoration('underline');
+              break;
+            case 29:
+              removeTextDecoration('line-through');
+              break;
+            case 38:
+            case 48:
+              if (codes.shift() === 2) {
+                const r = codes.shift() ?? 0, g = codes.shift() ?? 0, b = codes.shift() ?? 0;
+                currentStyle.set(code === 38 ? 'color' : 'background', `rgb(${r},${g},${b})`);
+              }
+              break;
+            case 39:
+            case 49:
+              currentStyle.delete(code === 39 ? 'color' : 'background');
+              break;
+            case 53:
+              addTextDecoration('overline');
+              break;
+            case 55:
+              removeTextDecoration('overline');
+              break;
+            default: {
+              const color = ANSI_COLORS[code - 30] ?? ANSI_BRIGHT_COLORS[code - 90];
+              if (color !== undefined) {
+                currentStyle.set('color', color);
+              } else {
+                const background = ANSI_COLORS[code - 40] ?? ANSI_BRIGHT_COLORS[code - 100];
+                if (background !== undefined) {
+                  currentStyle.set('background', background);
+                }
+              }
+              break;
+            }
+          }
+        }
+        const value = [...currentStyle.entries()].map(([key, val]) => `${key}:${val.trimStart()}`).join(';');
+        const type = 'style';
+        tokens.push({type, value});
+        substitution = '';
+        break;
+      }
+    }
+    if (substitution === undefined) {
+      // If there's no substitution, emit the original specifier / sequence verbatim.
+      addStringToken(match[0]);
+      substitution = '';
+    }
+    fmt = substitution + match.input.substring(match.index + match[0].length);
+  }
+  addStringToken(fmt);
+  return {tokens, args: args.slice(argIndex)};
+};

package/front_end/panels/console/ConsoleViewMessage.ts

@@ -53,6 +53,7 @@ import * as UI from '../../ui/legacy/legacy.js';
 import objectValueStyles from '../../ui/legacy/components/object_ui/objectValue.css.js';
 import type {Chrome} from '../../../extension-api/ExtensionAPI.js'; // eslint-disable-line rulesdir/es_modules_import
 
+import {format} from './ConsoleFormat.js';
 import type {ConsoleViewportElement} from './ConsoleViewport.js';
 import consoleViewStyles from './consoleView.css.js';
 
@@ -586,9 +587,8 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
 
     // Multiple parameters with the first being a format string. Save unused substitutions.
     if (shouldFormatMessage) {
-      const result = this.formatWithSubstitutionString(
+      parameters = this.formatWithSubstitutionString(
           (parameters[0].description as string), parameters.slice(1), formattedResult);
-      parameters = Array.from(result.unusedSubstitutions || []);
       if (parameters.length) {
         UI.UIUtils.createTextChild(formattedResult, ' ');
       }
@@ -866,165 +866,64 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
   }
 
   private formatWithSubstitutionString(
-      format: string, parameters: SDK.RemoteObject.RemoteObject[], formattedResult: HTMLElement): {
-    formattedResult: Element,
-    unusedSubstitutions: ArrayLike<SDK.RemoteObject.RemoteObject>|null,
-  } {
-    function parameterFormatter(
-        this: ConsoleViewMessage, force: boolean, includePreview: boolean,
-        obj?: string|SDK.RemoteObject.RemoteObject): string|HTMLElement|undefined {
-      if (obj instanceof SDK.RemoteObject.RemoteObject) {
-        return this.formatParameter(obj, force, includePreview);
-      }
-      return stringFormatter(obj);
-    }
-
-    function stringFormatter(obj?: string|SDK.RemoteObject.RemoteObject): string|undefined {
-      if (obj === undefined) {
-        return undefined;
-      }
-      if (typeof obj === 'string') {
-        return obj;
-      }
-      return obj.description;
-    }
-
-    function floatFormatter(obj?: string|SDK.RemoteObject.RemoteObject): number|string|undefined {
-      if (obj instanceof SDK.RemoteObject.RemoteObject) {
-        if (typeof obj.value !== 'number') {
-          return 'NaN';
-        }
-        return obj.value;
-      }
-      return undefined;
-    }
-
-    function integerFormatter(obj?: string|SDK.RemoteObject.RemoteObject): string|number|undefined {
-      if (obj instanceof SDK.RemoteObject.RemoteObject) {
-        if (obj.type === 'bigint') {
-          return obj.description;
-        }
-        if (typeof obj.value !== 'number') {
-          return 'NaN';
+      formatString: string, parameters: SDK.RemoteObject.RemoteObject[],
+      formattedResult: HTMLElement): SDK.RemoteObject.RemoteObject[] {
+    const currentStyle = new Map();
+    const {tokens, args} = format(formatString, parameters);
+    for (const token of tokens) {
+      switch (token.type) {
+        case 'generic': {
+          formattedResult.append(this.formatParameter(token.value, true /* force */, false /* includePreview */));
+          break;
         }
-        return Math.floor(obj.value);
-      }
-      return undefined;
-    }
-
-    function bypassFormatter(obj?: string|SDK.RemoteObject.RemoteObject): Node|string {
-      return (obj instanceof Node) ? obj : '';
-    }
-
-    let currentStyle: Map<string, {value: string, priority: string}>|null = null;
-    function styleFormatter(obj?: string|SDK.RemoteObject.RemoteObject): void {
-      currentStyle = new Map();
-      const buffer = document.createElement('span');
-      if (obj === undefined) {
-        return;
-      }
-      if (typeof obj === 'string' || !obj.description) {
-        return;
-      }
-      buffer.setAttribute('style', obj.description);
-      for (const property of buffer.style) {
-        if (isAllowedProperty(property)) {
-          const info = {
-            value: buffer.style.getPropertyValue(property),
-            priority: buffer.style.getPropertyPriority(property),
-          };
-          currentStyle.set(property, info);
+        case 'optimal': {
+          formattedResult.append(this.formatParameter(token.value, false /* force */, true /* includePreview */));
+          break;
         }
-      }
-    }
-
-    function isAllowedProperty(property: string): boolean {
-      // Make sure that allowed properties do not interfere with link visibility.
-      const prefixes = [
-        'background',
-        'border',
-        'color',
-        'font',
-        'line',
-        'margin',
-        'padding',
-        'text',
-        '-webkit-background',
-        '-webkit-border',
-        '-webkit-font',
-        '-webkit-margin',
-        '-webkit-padding',
-        '-webkit-text',
-      ];
-      for (const prefix of prefixes) {
-        if (property.startsWith(prefix)) {
-          return true;
+        case 'string': {
+          if (currentStyle.size === 0) {
+            formattedResult.append(this.linkifyStringAsFragment(token.value));
+          } else {
+            const lines = token.value.split('\n');
+            for (let i = 0; i < lines.length; i++) {
+              if (i > 0) {
+                formattedResult.append(document.createElement('br'));
+              }
+              const wrapper = document.createElement('span');
+              wrapper.style.setProperty('contain', 'paint');
+              wrapper.style.setProperty('display', 'inline-block');
+              wrapper.style.setProperty('max-width', '100%');
+              wrapper.appendChild(this.linkifyStringAsFragment(lines[i]));
+              for (const [property, {value, priority}] of currentStyle) {
+                wrapper.style.setProperty(property, value, priority);
+              }
+              formattedResult.append(wrapper);
+            }
+          }
+          break;
         }
-      }
-      return false;
-    }
-
-    // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration)
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const formatters: Record<string, Platform.StringUtilities.FormatterFunction<any>> = {};
-    // Firebug uses %o for formatting objects.
-    formatters.o = parameterFormatter.bind(this, false /* force */, true /* includePreview */);
-    formatters.s = stringFormatter;
-    formatters.f = floatFormatter;
-    // Firebug allows both %i and %d for formatting integers.
-    formatters.i = integerFormatter;
-    formatters.d = integerFormatter;
-
-    // Firebug uses %c for styling the message.
-    formatters.c = styleFormatter;
-
-    // Support %O to force object formatting, instead of the type-based %o formatting.
-    formatters.O = parameterFormatter.bind(this, true /* force */, false /* includePreview */);
-
-    formatters._ = bypassFormatter;
-
-    function append(this: ConsoleViewMessage, a: HTMLElement, b?: string|Node): HTMLElement {
-      if (b instanceof Node) {
-        a.appendChild(b);
-        return a;
-      }
-      if (typeof b === 'undefined') {
-        return a;
-      }
-      if (!currentStyle) {
-        a.appendChild(this.linkifyStringAsFragment(String(b)));
-        return a;
-      }
-      const lines = String(b).split('\n');
-      for (let i = 0; i < lines.length; i++) {
-        const line = lines[i];
-        const lineFragment = this.linkifyStringAsFragment(line);
-        const wrapper = document.createElement('span');
-        wrapper.style.setProperty('contain', 'paint');
-        wrapper.style.setProperty('display', 'inline-block');
-        wrapper.style.setProperty('max-width', '100%');
-        wrapper.appendChild(lineFragment);
-        applyCurrentStyle(wrapper);
-
-        a.appendChild(wrapper);
-        if (i < lines.length - 1) {
-          a.appendChild(document.createElement('br'));
+        case 'style': {
+          // Make sure that allowed properties do not interfere with link visibility.
+          const ALLOWED_PROPERTY_PREFIXES =
+              ['background', 'border', 'color', 'font', 'line', 'margin', 'padding', 'text'];
+          currentStyle.clear();
+          const buffer = document.createElement('span');
+          buffer.setAttribute('style', token.value);
+          for (const property of buffer.style) {
+            if (!ALLOWED_PROPERTY_PREFIXES.some(
+                    prefix => property.startsWith(prefix) || property.startsWith(`-webkit-${prefix}`))) {
+              continue;
+            }
+            currentStyle.set(property, {
+              value: buffer.style.getPropertyValue(property),
+              priority: buffer.style.getPropertyPriority(property),
+            });
+          }
+          break;
         }
       }
-      return a;
     }
-
-    function applyCurrentStyle(element: HTMLElement): void {
-      if (!currentStyle) {
-        return;
-      }
-      for (const [property, {value, priority}] of currentStyle.entries()) {
-        element.style.setProperty((property as string), value, priority);
-      }
-    }
-
-    // Platform.StringUtilities.format does treat formattedResult like a Builder, result is an object.
-    return Platform.StringUtilities.format(format, parameters, formatters, formattedResult, append.bind(this));
+    return args;
   }
 
   matchesFilterRegex(regexObject: RegExp): boolean {

package/front_end/panels/console/console.ts

@@ -4,6 +4,7 @@
 
 import './ConsoleContextSelector.js';
 import './ConsoleFilter.js';
+import './ConsoleFormat.js';
 import './ConsolePinPane.js';
 import './ConsoleSidebar.js';
 import './ConsoleViewport.js';
@@ -14,6 +15,7 @@ import './ConsolePanel.js';
 
 import * as ConsoleContextSelector from './ConsoleContextSelector.js';
 import * as ConsoleFilter from './ConsoleFilter.js';
+import * as ConsoleFormat from './ConsoleFormat.js';
 import * as ConsolePanel from './ConsolePanel.js';
 import * as ConsolePinPane from './ConsolePinPane.js';
 import * as ConsolePrompt from './ConsolePrompt.js';
@@ -25,6 +27,7 @@ import * as ConsoleViewport from './ConsoleViewport.js';
 export {
   ConsoleContextSelector,
   ConsoleFilter,
+  ConsoleFormat,
   ConsolePanel,
   ConsolePinPane,
   ConsolePrompt,

package/front_end/panels/elements/components/AdornerSettingsPane.ts

@@ -4,6 +4,7 @@
 
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as ComponentHelpers from '../../../ui/components/helpers/helpers.js';
+import * as Input from '../../../ui/components/input/input.js';
 import * as LitHtml from '../../../ui/lit-html/lit-html.js';
 import adornerSettingsPaneStyles from './adornerSettingsPane.css.js';
 
@@ -48,7 +49,7 @@ export class AdornerSettingsPane extends HTMLElement {
   #settings: AdornerSettingsMap = new Map();
 
   connectedCallback(): void {
-    this.#shadow.adoptedStyleSheets = [adornerSettingsPaneStyles];
+    this.#shadow.adoptedStyleSheets = [Input.checkboxStyles, adornerSettingsPaneStyles];
   }
 
   set data(data: AdornerSettingsPaneData) {

package/front_end/panels/elements/components/LayoutPane.ts

@@ -13,6 +13,7 @@ import {LayoutElement} from './LayoutPaneUtils.js';
 import type {NodeTextData} from './NodeText.js';
 import {NodeText} from './NodeText.js';
 import layoutPaneStyles from '../layoutPane.css.js';
+import * as Input from '../../../ui/components/input/input.js';
 // eslint-disable-next-line rulesdir/es_modules_import
 import inspectorCommonStyles from '../../../ui/legacy/inspectorCommon.css.js';
 
@@ -103,6 +104,7 @@ export class LayoutPane extends HTMLElement {
   constructor() {
     super();
     this.#shadow.adoptedStyleSheets = [
+      Input.checkboxStyles,
       layoutPaneStyles,
       inspectorCommonStyles,
     ];

package/front_end/panels/elements/elementStatePaneWidget.css

@@ -8,7 +8,7 @@
   overflow: hidden;
   padding-left: 2px;
   background-color: var(--color-background-elevation-1);
-  border-bottom: 1px solid var(--color-background-highlight);
+  border-bottom: 1px solid var(--color-details-hairline);
   margin-top: 0;
   padding-bottom: 2px;
 }

package/front_end/panels/elements/layoutPane.css

@@ -181,7 +181,3 @@ that uses the dimensions to draw an outline around the element. */
 .node-text-container:hover {
   background-color: var(--item-hover-color);
 }
-
-:host-context(.-theme-with-dark-background) input[type="checkbox"] {
-  filter: invert(80%);
-}

package/front_end/panels/emulation/components/DeviceSizeInputElement.ts

@@ -104,13 +104,17 @@ export class SizeInputElement extends HTMLElement {
   }
 
   #handleModifierKeys(event: Event): void {
-    const modifiedValue = UILegacy.UIUtils.modifiedFloatNumber(getInputValue(event), event);
+    let modifiedValue = UILegacy.UIUtils.modifiedFloatNumber(getInputValue(event), event);
     if (modifiedValue === null) {
       return;
     }
 
+    modifiedValue = Math.min(modifiedValue, EmulationModel.DeviceModeModel.MaxDeviceSize);
+    modifiedValue = Math.max(modifiedValue, EmulationModel.DeviceModeModel.MinDeviceSize);
+
     event.preventDefault();
     (event.target as HTMLInputElement).value = String(modifiedValue);
+    this.dispatchEvent(new SizeChangedEvent(modifiedValue));
   }
 }
 

package/front_end/panels/settings/emulation/components/UserAgentClientHintsForm.ts

@@ -10,6 +10,7 @@ import * as LitHtml from '../../../../ui/lit-html/lit-html.js';
 import userAgentClientHintsFormStyles from './userAgentClientHintsForm.css.js';
 
 import type * as Protocol from '../../../../generated/protocol.js';
+import * as Input from '../../../../ui/components/input/input.js';
 import * as IconButton from '../../../../ui/components/icon_button/icon_button.js';
 import type * as UI from '../../../../ui/legacy/legacy.js';
 import * as EmulationUtils from '../utils/utils.js';
@@ -193,7 +194,7 @@ export class UserAgentClientHintsForm extends HTMLElement {
   #brandsModifiedAriaMessage: string = '';
 
   connectedCallback(): void {
-    this.#shadow.adoptedStyleSheets = [userAgentClientHintsFormStyles];
+    this.#shadow.adoptedStyleSheets = [Input.checkboxStyles, userAgentClientHintsFormStyles];
   }
 
   set value(data: UserAgentClientHintsFormData) {

package/front_end/panels/sources/SourcesPanel.ts

@@ -293,7 +293,7 @@ export class SourcesPanel extends UI.Panel.Panel implements UI.ContextMenu.Provi
     Extensions.ExtensionServer.ExtensionServer.instance().addEventListener(
         Extensions.ExtensionServer.Events.SidebarPaneAdded, this.extensionSidebarPaneAdded, this);
     SDK.TargetManager.TargetManager.instance().observeTargets(this);
-    this.lastModificationTime = window.performance.now();
+    this.lastModificationTime = -Infinity;
   }
 
   static instance(opts: {

package/front_end/panels/web_audio/webAudio.css

@@ -10,7 +10,7 @@
 
 .web-audio-toolbar-container {
   background-color: var(--color-background-elevation-1);
-  border-bottom: var(--color-background-highlight);
+  border-bottom: var(--color-details-hairline);
   min-height: fit-content;
 }