chrome-devtools-frontend 1.0.1698733 → 1.0.1700561

package/front_end/panels/elements/elementsTreeOutline.css

@@ -88,6 +88,10 @@
   display: flex;
 }
 
+.elements-disclosure li .tree-element-title {
+  display: contents;
+}
+
 .elements-disclosure li.parent:not(.always-parent) {
   /** Keep it in sync with ElementsTreeElements.updateDecorations **/
   margin-left: calc(-1 * var(--sys-size-6));
@@ -482,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;
@@ -629,7 +637,3 @@ li.hovered:not(.always-parent) + ol.children:not(.shadow-root) {
 .tree-outline-disclosure li.in-clipboard .highlight {
   outline: 1px dotted var(--sys-color-divider);
 }
-
-.tree-outline-disclosure li.elements-tree-expand-all {
-  margin: var(--sys-size-2) 0;
-}

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/lighthouse/LighthouseController.ts

@@ -40,7 +40,7 @@ const UIStrings = {
   /**
    * @description Help text in the Lighthouse panel.
    */
-  atLeastOneCategoryMustBeSelected: 'At least one category must be selected.',
+  atLeastOneCategoryMustBeSelected: 'At least one category must be selected',
   /**
    * @description Text in sidebar of the Application panel.
    */

package/front_end/panels/mobile_throttling/NetworkPanelIndicator.ts

@@ -15,7 +15,7 @@ const UIStrings = {
   /**
    * @description Icon title for warning indicator in the Network panel title.
    */
-  requestsMayBeOverridden: 'Requests may be overridden locally. See the Sources panel',
+  requestsMayBeOverridden: 'Requests may be overridden locally. See the Sources panel.',
   /**
    * @description Icon title for warning indicator in the Network panel title.
    */

package/front_end/panels/mobile_throttling/ThrottlingManager.ts

@@ -42,7 +42,7 @@ const UIStrings = {
   /**
    * @description Tooltip text in throttling manager of the Performance panel.
    */
-  excessConcurrency: 'Exceeding the default value may degrade system performance.',
+  excessConcurrency: 'Exceeding the default value may degrade system performance',
   /**
    * @description Tooltip text in throttling manager of the Performance panel.
    */

package/front_end/panels/mobile_throttling/ThrottlingSettingsTab.ts

@@ -159,7 +159,7 @@ const UIStrings = {
    * @description Text to explain why the user should run the CPU calibration process.
    */
   calibrationCTA:
-      'To use the CPU throttling presets, run the calibration process to determine the ideal throttling rate for your device.',
+      'To use the CPU throttling presets, run the calibration process to determine the ideal throttling rate for your device',
   /**
    * @description Text to explain what CPU throttling presets are.
    */

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/StepView.ts

@@ -18,6 +18,7 @@ import stepViewStyles from './stepView.css.js';
 import {TimelineSection} from './TimelineSection.js';
 
 const {html} = Lit;
+const {ifDefined} = Lit.Directives;
 const {widget} = UI.Widget;
 
 const UIStrings = {
@@ -276,8 +277,7 @@ function renderStepActions(input: ViewInput): Lit.TemplateResult|null {
   return html`
     <devtools-menu-button
       class="step-actions"
-      title=${i18nString(UIStrings.openStepActions)}
-      aria-label=${i18nString(UIStrings.openStepActions)}
+      .accessibleLabel=${i18nString(UIStrings.openStepActions)}
       .populateMenuCall=${input.populateStepContextMenu}
       @keydown=${(event: Event) => {
         event.stopPropagation();
@@ -312,6 +312,8 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: ViewOutput, target: HTML
     section: input.section,
   });
   const subtitle = input.step ? getSelectorPreview(input.step) : getSectionPreview(input.section);
+  const breakpointTitle =
+      input.hasBreakpoint ? i18nString(UIStrings.removeBreakpoint) : i18nString(UIStrings.addBreakpoint);
 
   // clang-format off
   Lit.render(
@@ -347,13 +349,26 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: ViewOutput, target: HTML
           }
         }}
         class=${Lit.Directives.classMap(stepClasses)}>
-        <svg slot="icon" width="24" height="24" class="icon">
+        <svg slot="icon" width="24" height="24" class="icon"
+          role=${input.step ? 'button' : 'presentation'}
+          aria-label=${ifDefined(input.step ? breakpointTitle : undefined)}
+          aria-hidden=${ifDefined(input.step ? undefined : 'true')}
+          tabindex=${ifDefined(input.step ? 0 : undefined)}
+          @click=${input.step ? input.onBreakpointClick : undefined}
+          @keydown=${input.step ? (event: KeyboardEvent) => {
+            if (event.key === 'Enter' || event.key === ' ') {
+              input.onBreakpointClick();
+              event.preventDefault();
+              event.stopPropagation();
+            }
+          } : undefined}
+          jslog=${ifDefined(input.step ? VisualLogging.action('breakpoint').track({click: true}) : undefined)}>
           <circle class="circle-icon"/>
           <g class="error-icon">
             <path d="M1.5 1.5L6.5 6.5" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
             <path d="M1.5 6.5L6.5 1.5" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
           </g>
-          <path @click=${input.onBreakpointClick} jslog=${VisualLogging.action('breakpoint').track({click: true})} class="breakpoint-icon" d="M2.5 5.5H17.7098L21.4241 12L17.7098 18.5H2.5V5.5Z"/>
+          <path class="breakpoint-icon" d="M2.5 5.5H17.7098L21.4241 12L17.7098 18.5H2.5V5.5Z"/>
         </svg>
         <div class="summary">
           <div class="title-container ${isExpandable ? 'action' : ''}"

package/front_end/panels/recorder/TimelineSection.ts

@@ -37,7 +37,7 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: ViewOutput, target: HTML
     <div class=${Lit.Directives.classMap(classes)}>
       <div class="overlay"></div>
       <div class="icon"><slot name="icon"></slot></div>
-      <svg width="24" height="100%" class="bar">
+      <svg width="24" height="100%" class="bar" aria-hidden="true">
         <rect class="line" x="7" y="0" width="2" height="100%" />
       </svg>
       <slot></slot>

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 {

package/front_end/panels/settings/BackendLinkingSettingsTab.ts

@@ -93,7 +93,7 @@ const UIStrings = {
   /**
    * @description Warning message displayed below the backend linking rules table when one or more rules are invalid.
    */
-  invalidRulesWarning: 'Invalid rules will not be applied or saved.',
+  invalidRulesWarning: 'Invalid rules will not be applied or saved',
 } as const;
 
 const str_ = i18n.i18n.registerUIStrings('panels/settings/BackendLinkingSettingsTab.ts', UIStrings);
@@ -168,6 +168,7 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
               name=${i18nString(UIStrings.rulesSectionHeading)}
               striped
               inline
+              deletable
               @delete=${() => {}}
               @create=${onCreate}>
               <table>

package/front_end/panels/settings/EditFileSystemView.ts

@@ -78,7 +78,7 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
           @create=${input.onCreate}
           class="exclude-subfolders-table"
           parts="excluded-folder-row-with-error"
-          inline striped>
+          inline striped deletable>
           <table>
             <thead>
               <tr>

package/front_end/panels/sources/CallStackSidebarPane.ts

@@ -79,7 +79,7 @@ const UIStrings = {
    * @description Error message that is displayed in UI when a file needed for debugging information for a call frame is missing
    * @example {src/myapp.debug.wasm.dwp} PH1
    */
-  debugFileNotFound: 'Failed to load debug file "{PH1}".',
+  debugFileNotFound: 'Failed to load debug file "{PH1}"',
   /**
    * @description A context menu item in the call stack sidebar pane. "Restart" is a verb and
    * "frame" is a noun. "Frame" refers to an individual item in the call stack, i.e. a call frame.