chrome-devtools-frontend 1.0.1699061 → 1.0.1700561

package/front_end/panels/common/commentThreadWidget.css

@@ -27,6 +27,7 @@
     width: 100%;
     justify-content: space-between;
     align-items: center;
+    gap: var(--sys-size-4);
   }
 
   .sent-status {
@@ -35,6 +36,7 @@
     gap: var(--sys-size-2);
     font-size: var(--sys-typescale-body5-size);
     color: var(--sys-color-on-surface-subtle);
+    flex-shrink: 0;
   }
 
   .check-icon {
@@ -153,7 +155,23 @@
     padding: var(--sys-size-4) var(--sys-size-5);
   }
 
+  .tooltip-link {
+    display: block;
+    margin-top: var(--sys-size-4);
+    color: var(--sys-color-primary);
+    padding-left: 0;
+    background: none;
+    border: none;
+    font: inherit;
+    text-decoration: underline;
+    cursor: pointer;
+  }
+
+  .selected-item devtools-widget,
   .selected-item-text {
+    display: block;
+    flex: 0 1 auto;
+    min-width: 0;
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;

package/front_end/panels/common/common-meta.ts

@@ -65,7 +65,10 @@ UI.ActionRegistration.registerActionExtension({
 });
 
 UI.Toolbar.registerToolbarItem({
-  actionId: 'comments.toggle-comment-mode',
+  async loadItem() {
+    const Common = await loadCommonModule();
+    return new Common.CommentsOverlayWidget.ButtonProvider();
+  },
   location: UI.Toolbar.ToolbarItemLocation.MAIN_TOOLBAR_LEFT,
   order: 1,
   condition: isCommentsEnabled,

package/front_end/panels/elements/ElementsTreeElement.ts

@@ -3178,6 +3178,8 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
           drag: true,
           click: true,
         })}`);
+    this.listItemElement.setAttribute('data-backend-node-id', String(node.backendNodeId()));
+    this.listItemElement.setAttribute('data-target-id', node.domModel().target().id());
 
     this.widgetWrapper = document.createElement('div');
     this.widgetWrapper.style.display = 'contents';

package/front_end/panels/elements/ElementsTreeOutline.ts

@@ -977,7 +977,7 @@ export const DECLARATIVE_VIEW: View = (input: ViewInput, _output: ViewOutput, ta
           },
           updateRecord: input.updateRecordForNode?.(node) ?? null,
         })}${hasChildren ? html`<ul role="group">
-            ${UI.TreeOutline.ifExpanded(html`
+            ${isExpanded && !isEditingAsHTML ? html`
               ${node.adoptedStyleSheetsForNode.length > 0 ? renderAdoptedStyleSheets(node, depth + 1) : nothing}
               ${repeat(children, child => child.id, child => renderNode(child, depth + 1))}
               ${remainingChildrenCount > 0 ? html`
@@ -1034,7 +1034,7 @@ export const DECLARATIVE_VIEW: View = (input: ViewInput, _output: ViewOutput, ta
                     updateRecord: input.updateRecordForNode?.(node) ?? null,
                   })}</li>
               ` : nothing}
-            `)}
+            ` : nothing}
           </ul>` : nothing}</li>
     `;
     // clang-format on
@@ -1062,7 +1062,7 @@ export const DECLARATIVE_VIEW: View = (input: ViewInput, _output: ViewOutput, ta
     <style>${CodeHighlighter.codeHighlighterStyles}</style>
     <div class=${disclosureClasses} style=${disclosureStyles}>
       <devtools-tree
-        class="elements-tree-outline source-code ${input.wrap ? '' : 'elements-tree-nowrap'} ${input.hideGutter ? 'elements-hide-gutter' : ''} ${isSingleNode ? 'single-node' : ''}"
+        class="elements-tree-outline ${input.wrap ? '' : 'elements-tree-nowrap'} ${input.hideGutter ? 'elements-hide-gutter' : ''} ${isSingleNode ? 'single-node' : ''}"
         disclosure-class="elements-disclosure ${isSingleNode ? 'single-node' : ''} ${input.maxRowsShown ? 'elements-tree-truncated' : ''}"
         jslog=${VisualLogging.tree('elements')}
         ?show-selection-on-keyboard-focus=${input.showSelectionOnKeyboardFocus}
@@ -1464,7 +1464,6 @@ export class DOMTreeWidget extends UI.Widget.Widget {
     if (domModel.existingDocument()) {
       this.rootDOMNode = domModel.existingDocument();
     }
-    this.onDocumentUpdated(domModel);
   }
 
   #updateModifiedNodesTimeout?: number;
@@ -1518,12 +1517,12 @@ export class DOMTreeWidget extends UI.Widget.Widget {
       event: Common.EventTarget.EventTargetEvent<{node: SDK.DOMModel.DOMNode, parent: SDK.DOMModel.DOMNode}>): void {
     const {node, parent} = event.data;
     this.resetClipboardIfNeeded(node);
-    if (this.#selectedDOMNode && (this.#selectedDOMNode === node || node.isAncestor(this.#selectedDOMNode))) {
-      this.selectDOMNode(this.#findNextNodeOnRemoval(node, parent), true);
-    }
     if (parent) {
       this.#addUpdateRecord(parent).nodeRemoved(node);
     }
+    if (this.#selectedDOMNode && (this.#selectedDOMNode === node || node.isAncestor(this.#selectedDOMNode))) {
+      this.selectDOMNode(this.#findNextNodeOnRemoval(node, parent), true);
+    }
     this.#updateModifiedNodesSoon();
   }
 
@@ -1671,6 +1670,11 @@ export class DOMTreeWidget extends UI.Widget.Widget {
     }
     this.#selectedAdoptedStyleSheet = null;
     if (this.#view === DECLARATIVE_VIEW) {
+      if (node?.nodeType() === Node.TEXT_NODE && node.parentNode &&
+          (!nodeHasVisibleChildren(node.parentNode, this.rootDOMNode, this.maxTreeDepth, this.omitRootDOMNode) ||
+           !getVisibleChildren(node.parentNode, this.#showComments).includes(node))) {
+        node = node.parentNode;
+      }
       const isSameNode = this.#selectedDOMNode === node && this.#selectedClosingTag === Boolean(isClosingTag);
       this.#selectedDOMNode = node;
       this.#selectedClosingTag = Boolean(isClosingTag);

package/front_end/panels/elements/elementsTreeOutline.css

@@ -486,6 +486,10 @@ li.hovered:not(.always-parent) + ol.children:not(.shadow-root) {
   margin-left: -12px;
 }
 
+.tree-outline-disclosure > ol > li.parent:only-of-type:not(.expanded) {
+  margin-top: 2px;
+}
+
 .tree-outline-disclosure li.parent:not(.always-parent)::before {
   box-sizing: border-box;
   user-select: none;

package/front_end/panels/event_listeners/EventListenersView.ts

@@ -236,12 +236,16 @@ export class EventListenersView extends UI.Widget.VBox {
   }
 
   override async performUpdate(): Promise<void> {
-    if (!this.#listeners && this.#objects) {
-      this.#listeners =
-          await EventListenersView.#loadListeners(this.#objects.filter((o): o is NonNullable<typeof o> => !!o));
+    let listeners = this.#listeners;
+    if (!listeners && this.#objects) {
+      const objects = this.#objects;
+      listeners = await EventListenersView.#loadListeners(objects.filter((o): o is NonNullable<typeof o> => !!o));
+      if (this.#objects === objects) {
+        this.#listeners = listeners;
+      }
     }
     const input: ViewInput = {
-      listeners: this.#listeners ?? new Map(),
+      listeners: listeners ?? new Map(),
       filter: this.#filter,
       togglePassiveListener: (listener: SDK.DOMDebuggerModel.EventListener) => {
         void listener.togglePassive().then(() => {
@@ -276,6 +280,7 @@ export class EventListenersView extends UI.Widget.VBox {
       },
       linkifier: this.#linkifier,
     };
+    this.#linkifier.reset();
     this.#view(input, {}, this.contentElement);
     this.eventListenersArrivedForTest();
   }

package/front_end/panels/issues/IssuesPane.ts

@@ -183,7 +183,7 @@ export class IssuesPane extends UI.Widget.VBox {
   #noIssuesMessageDiv: UI.EmptyWidget.EmptyWidget;
   #issuesManager: IssuesManager.IssuesManager.IssuesManager;
   #aggregator: IssuesManager.IssueAggregator.IssueAggregator;
-  #issueViewUpdatePromise: Promise<void> = Promise.resolve();
+  #dirtyIssues = new Set<IssuesManager.IssueAggregator.AggregatedIssue>();
 
   constructor() {
     super({
@@ -217,14 +217,16 @@ export class IssuesPane extends UI.Widget.VBox {
 
     this.#issuesManager = IssuesManager.IssuesManager.IssuesManager.instance();
     this.#aggregator = new IssuesManager.IssueAggregator.IssueAggregator(this.#issuesManager);
-    this.#aggregator.addEventListener(
-        IssuesManager.IssueAggregator.Events.AGGREGATED_ISSUE_UPDATED, this.#issueUpdated, this);
+    this.#aggregator.addEventListener(IssuesManager.IssueAggregator.Events.AGGREGATED_ISSUE_UPDATED, event => {
+      this.#dirtyIssues.add(event.data);
+      this.requestUpdate();
+    });
     this.#aggregator.addEventListener(
         IssuesManager.IssueAggregator.Events.FULL_UPDATE_REQUIRED, this.#onFullUpdate, this);
     this.#hiddenIssuesRow.hidden = this.#issuesManager.numberOfHiddenIssues() === 0;
     this.#onFullUpdate();
-    this.#issuesManager.addEventListener(
-        IssuesManager.IssuesManager.Events.ISSUES_COUNT_UPDATED, this.#updateCounts, this);
+    this.#issuesManager.addEventListener(IssuesManager.IssuesManager.Events.ISSUES_COUNT_UPDATED, this.requestUpdate,
+                                         this);
   }
 
   override elementsToRestoreScrollPositionsFor(): Element[] {
@@ -289,15 +291,15 @@ export class IssuesPane extends UI.Widget.VBox {
     return {toolbarContainer};
   }
 
-  #issueUpdated(event: Common.EventTarget.EventTargetEvent<IssuesManager.IssueAggregator.AggregatedIssue>): void {
-    this.#scheduleIssueViewUpdate(event.data);
-  }
-
-  #scheduleIssueViewUpdate(issue: IssuesManager.IssueAggregator.AggregatedIssue): void {
-    this.#issueViewUpdatePromise = this.#issueViewUpdatePromise.then(() => this.#updateIssueView(issue));
+  override async performUpdate(): Promise<void> {
+    // Snapshot and clear so new arrivals during `await` schedule a fresh update
+    const issuesToUpdate = [...this.#dirtyIssues];
+    this.#dirtyIssues.clear();
+    await Promise.allSettled(issuesToUpdate.map(issue => this.#updateIssueView(issue)));
+    this.#updateCounts();
   }
 
-  /** Don't call directly. Use `scheduleIssueViewUpdate` instead. */
+  /** Don't call directly. Use `requestUpdate` instead. */
   async #updateIssueView(issue: IssuesManager.IssueAggregator.AggregatedIssue): Promise<void> {
     let issueView = this.#issueViews.get(issue.aggregationKey());
     if (!issueView) {
@@ -306,12 +308,22 @@ export class IssuesPane extends UI.Widget.VBox {
         console.warn('Could not find description for issue code:', issue.code());
         return;
       }
-      const markdownDescription =
-          await IssuesManager.MarkdownIssueDescription.createIssueDescriptionFromMarkdown(description);
-      issueView = new IssueView(issue, markdownDescription);
-      this.#issueViews.set(issue.aggregationKey(), issueView);
-      const parent = this.#getIssueViewParent(issue);
-      this.appendIssueViewToParent(issueView, parent);
+      try {
+        const markdownDescription =
+            await IssuesManager.MarkdownIssueDescription.createIssueDescriptionFromMarkdown(description);
+        issueView = new IssueView(issue, markdownDescription);
+        const parent = this.#getIssueViewParent(issue);
+        // `appendIssueViewToParent` attaches `issueView` to the tree and synchronously invokes
+        // `IssueView.onattach()`, which renders `MarkdownView` tokens and can throw if an unsupported
+        // token or missing link key is encountered. Since `TreeElement.insertChild()` attaches the
+        // child before calling `onattach()`, we must detach `issueView` if `onattach()` fails.
+        this.appendIssueViewToParent(issueView, parent);
+        this.#issueViews.set(issue.aggregationKey(), issueView);
+      } catch (err) {
+        console.error(err);
+        issueView?.parent?.removeChild(issueView);
+        return;
+      }
     } else {
       issueView.setIssue(issue);
       const newParent = this.#getIssueViewParent(issue);
@@ -322,7 +334,6 @@ export class IssuesPane extends UI.Widget.VBox {
       }
     }
     issueView.update();
-    this.#updateCounts();
   }
 
   appendIssueViewToParent(issueView: IssueView, parent: UI.TreeOutline.TreeOutline|UI.TreeOutline.TreeElement): void {
@@ -415,15 +426,16 @@ export class IssuesPane extends UI.Widget.VBox {
   }
 
   #fullUpdate(force: boolean): void {
+    this.#dirtyIssues.clear();
     this.#clearViews(this.#categoryViews, force ? undefined : this.#aggregator.aggregatedIssueCategories());
     this.#clearViews(this.#kindViews, force ? undefined : this.#aggregator.aggregatedIssueKinds());
     this.#clearViews(this.#issueViews, force ? undefined : this.#aggregator.aggregatedIssueCodes());
     if (this.#aggregator) {
       for (const issue of this.#aggregator.aggregatedIssues()) {
-        this.#scheduleIssueViewUpdate(issue);
+        this.#dirtyIssues.add(issue);
       }
     }
-    this.#updateCounts();
+    this.requestUpdate();
   }
 
   #updateIssueKindViewsCount(): void {
@@ -465,7 +477,7 @@ export class IssuesPane extends UI.Widget.VBox {
   }
 
   async reveal(issue: IssuesManager.Issue.Issue): Promise<void> {
-    await this.#issueViewUpdatePromise;
+    await this.updateComplete;
     const key = this.#aggregator.keyForIssue(issue);
     const issueView = this.#issueViews.get(key);
     if (issueView) {

package/front_end/panels/network/RequestPayloadView.ts

@@ -471,21 +471,23 @@ export class RequestPayloadView extends UI.Widget.VBox {
         ObjectUI.ObjectPropertiesSection.populateObjectTreeContextMenu(
             contextMenu,
             objectTree,
-            async () => {
-              await objectTree.expandRecursively(ObjectUI.ObjectPropertiesSection.EXPANDABLE_MAX_DEPTH);
-              this.requestUpdate();
-            },
-            () => {
-              objectTree.collapseRecursively();
-              this.requestUpdate();
-            },
-            () => {
-              objectTree.sortPropertiesAlphabetically = !objectTree.sortPropertiesAlphabetically;
-              this.requestUpdate();
-            },
-            () => {
-              objectTree.includeNullOrUndefinedValues = !objectTree.includeNullOrUndefinedValues;
-              this.requestUpdate();
+            {
+              expandRecursively: async () => {
+                await objectTree.expandRecursively(ObjectUI.ObjectPropertiesSection.EXPANDABLE_MAX_DEPTH);
+                this.requestUpdate();
+              },
+              collapseChildren: () => {
+                objectTree.collapseRecursively();
+                this.requestUpdate();
+              },
+              sortPropertiesAlphabetically: () => {
+                objectTree.sortPropertiesAlphabetically = !objectTree.sortPropertiesAlphabetically;
+                this.requestUpdate();
+              },
+              onShowAllToggled: () => {
+                objectTree.includeNullOrUndefinedValues = !objectTree.includeNullOrUndefinedValues;
+                this.requestUpdate();
+              },
             },
         );
       },

package/front_end/panels/recorder/RecordingView.ts

@@ -13,9 +13,7 @@ import * as CodeMirror from '../../third_party/codemirror.next/codemirror.next.j
 import type * as PuppeteerReplay from '../../third_party/puppeteer-replay/puppeteer-replay.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
 import * as CodeHighlighter from '../../ui/components/code_highlighter/code_highlighter.js';
-import * as Dialogs from '../../ui/components/dialogs/dialogs.js';
 import * as Input from '../../ui/components/input/input.js';
-import type * as Menus from '../../ui/components/menus/menus.js';
 import * as TextEditor from '../../ui/components/text_editor/text_editor.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as Lit from '../../ui/lit/lit.js';
@@ -148,6 +146,10 @@ const UIStrings = {
    * @description The announcement when the code sidebar is closed.
    */
   codeSidebarClosed: 'Code sidebar closed',
+  /**
+   * @description Label for the select that changes the code format in the Recorder panel.
+   */
+  codeFormat: 'Code format',
 } as const;
 const str_ = i18n.i18n.registerUIStrings(
     'panels/recorder/RecordingView.ts',
@@ -182,7 +184,6 @@ const networkConditionPresets = [
 function renderSettings({
   settings,
   replaySettingsExpanded,
-  onSelectMenuLabelClick,
   onNetworkConditionsChange,
   onTimeoutInput,
   isRecording,
@@ -277,7 +278,7 @@ function renderSettings({
     }
 
     replaySettingsFragments.push(html`<div class="editable-setting">
-      <label class="wrapping-label" @click=${onSelectMenuLabelClick}>
+      <label class="wrapping-label">
         ${i18nString(UIStrings.network)}
         <select
             title=${menuButtonTitle}
@@ -380,7 +381,7 @@ function renderTimelineArea(input: ViewInput, output: ViewOutput): Lit.LitTempla
     // clang-format on
   }
   // clang-format off
-    /* eslint-disable @devtools/no-deprecated-component-usages */
+
     return html`
         <devtools-split-view
           direction="auto"
@@ -394,35 +395,33 @@ function renderTimelineArea(input: ViewInput, output: ViewOutput): Lit.LitTempla
           <div slot="sidebar" jslog=${VisualLogging.pane('source-code').track({resize: true})}>
             ${input.showCodeView ? html`
             <div class="section-toolbar" jslog=${VisualLogging.toolbar()}>
-              <devtools-select-menu
-                @selectmenuselected=${input.onCodeFormatChange}
-                .showDivider=${true}
-                .showArrow=${true}
-                .sideButton=${false}
-                .showSelectedItem=${true}
-                .position=${Dialogs.Dialog.DialogVerticalPosition.BOTTOM}
-                .buttonTitle=${input.converterName || ''}
-                .jslogContext=${'code-format'}
-              >
+              <label class="code-format-label">
+                ${i18nString(UIStrings.codeFormat)}
+                <select
+                  @change=${(event: Event) => {
+                    if (event.target instanceof HTMLSelectElement) {
+                      input.onCodeFormatChange(event.target.value);
+                    }
+                  }}
+                  jslog=${VisualLogging.dropDown('code-format').track({change: true})}>
                 ${input.builtInConverters.map(converter => {
-                  return html`<devtools-menu-item
-                    .value=${converter.getId()}
-                    .selected=${input.converterId === converter.getId()}
-                    jslog=${VisualLogging.action().track({click: true}).context(`converter-${Platform.StringUtilities.toKebabCase(converter.getId())}`)}
-                  >
+                  return html`<option
+                    value=${converter.getId()}
+                    ?selected=${input.converterId === converter.getId()}
+                    jslog=${VisualLogging.item(`converter-${Platform.StringUtilities.toKebabCase(converter.getId())}`)}>
                     ${converter.getFormatName()}
-                  </devtools-menu-item>`;
+                  </option>`;
                 })}
                 ${input.extensionConverters.map(converter => {
-                  return html`<devtools-menu-item
-                    .value=${converter.getId()}
-                    .selected=${input.converterId === converter.getId()}
-                    jslog=${VisualLogging.action().track({click: true}).context('converter-extension')}
-                  >
+                  return html`<option
+                    value=${converter.getId()}
+                    ?selected=${input.converterId === converter.getId()}
+                    jslog=${VisualLogging.item('converter-extension')}>
                     ${converter.getFormatName()}
-                  </devtools-menu-item>`;
+                  </option>`;
                 })}
-              </devtools-select-menu>
+                </select>
+              </label>
               <devtools-button
                 title=${Models.Tooltip.getTooltipForActions(
                   i18nString(UIStrings.hideCode),
@@ -444,7 +443,7 @@ function renderTimelineArea(input: ViewInput, output: ViewOutput): Lit.LitTempla
           </div>
         </devtools-split-view>
       `;
-    /* eslint-enable @devtools/no-deprecated-component-usages */
+
   // clang-format on
 }
 
@@ -735,7 +734,6 @@ interface ViewInput {
   breakpointIndexes: Set<number>;
   builtInConverters: readonly Converters.Converter.Converter[];
   converterId: string;
-  converterName: string|null;
   currentError: Error|null;
   currentStep: Models.Schema.Step|null;
   editorState: CodeMirror.EditorState|null;
@@ -766,14 +764,11 @@ interface ViewInput {
       speed: Models.RecordingPlayer.PlayRecordingSpeed,
       extension?: Extensions.ExtensionManager.Extension,
       ) => void;
-  onCodeFormatChange: (
-      event: Menus.SelectMenu.SelectMenuItemSelectedEvent,
-      ) => void;
+  onCodeFormatChange: (codeFormat: string) => void;
   onCopyStep: (step: Models.Schema.Step) => void;
   onEditTitleButtonClick: (event: Event) => void;
   onNetworkConditionsChange: (event: Event) => void;
   onReplaySettingsKeydown: (event: Event) => void;
-  onSelectMenuLabelClick: (event: Event) => void;
   onStepClick: (step: Models.Schema.Step|Models.Section.Section) => void;
   onStepHover: (step: Models.Schema.Step|Models.Section.Section) => void;
   onTimeoutInput: (event: Event) => void;
@@ -932,19 +927,11 @@ export class RecordingView extends UI.Widget.Widget {
   }
 
   override performUpdate(): void {
-    const converter =
-        [
-          ...(this.builtInConverters || []),
-          ...(this.extensionConverters || []),
-        ].find(converter => converter.getId() === this.#converterId) ??
-        this.builtInConverters[0];
-
     this.#view(
         {
           breakpointIndexes: this.breakpointIndexes,
           builtInConverters: this.builtInConverters,
           converterId: this.#converterId,
-          converterName: converter?.getFormatName(),
           currentError: this.currentError ?? null,
           currentStep: this.currentStep ?? null,
           editorState: this.#editorState ?? null,
@@ -998,7 +985,6 @@ export class RecordingView extends UI.Widget.Widget {
           onEditTitleButtonClick: this.#onEditTitleButtonClick.bind(this),
           onNetworkConditionsChange: this.#onNetworkConditionsChange.bind(this),
           onReplaySettingsKeydown: this.#onReplaySettingsKeydown.bind(this),
-          onSelectMenuLabelClick: this.#onSelectMenuLabelClick.bind(this),
           onStepClick: this.#onStepClick.bind(this),
           onStepHover: this.#onStepHover.bind(this),
           onTimeoutInput: this.#onTimeoutInput.bind(this),
@@ -1175,13 +1161,6 @@ export class RecordingView extends UI.Widget.Widget {
     input.focus();
   };
 
-  #onSelectMenuLabelClick = (event: Event): void => {
-    const target = event.target as HTMLElement;
-    if (target.matches('.wrapping-label')) {
-      target.querySelector('devtools-select-menu')?.click();
-    }
-  };
-
   async #copyCurrentSelection(step?: Models.Schema.Step|null): Promise<void> {
     let converter =
         [
@@ -1294,10 +1273,10 @@ export class RecordingView extends UI.Widget.Widget {
     this.#viewOutput.highlightLinesInEditor?.(line, length, scroll);
   };
 
-  #onCodeFormatChange = (event: Menus.SelectMenu.SelectMenuItemSelectedEvent): void => {
-    this.#converterId = event.itemValue as string;
+  #onCodeFormatChange = (codeFormat: string): void => {
+    this.#converterId = codeFormat;
     if (this.recorderSettings) {
-      this.recorderSettings.preferredCopyFormat = event.itemValue as string;
+      this.recorderSettings.preferredCopyFormat = codeFormat;
     }
 
     void this.#convertToCode();

package/front_end/panels/recorder/controlButton.css

@@ -14,11 +14,17 @@
 .control {
   background: none;
   border: none;
+  border-radius: var(--sys-shape-corner-small);
   display: flex;
   flex-direction: column;
   align-items: center;
 }
 
+.control:focus-visible {
+  outline: var(--sys-size-2) solid var(--sys-color-state-focus-ring);
+  outline-offset: var(--sys-size-2);
+}
+
 .control[disabled] {
   filter: grayscale(100%);
   cursor: auto;

package/front_end/panels/recorder/recordingView.css

@@ -326,9 +326,18 @@
     gap: 3px;
   }
 
-  .section-toolbar > devtools-select-menu {
+  .code-format-label {
+    display: flex;
+    align-items: center;
+    flex: 1;
+    gap: var(--sys-size-3);
+    min-width: 0;
+    white-space: nowrap;
+  }
+
+  .code-format-label > select {
     height: var(--sys-size-11);
-    min-width: 50px;
+    min-width: 0;
   }
 
   .sections .section-toolbar {