chrome-devtools-frontend 1.0.1698733 → 1.0.1699061

package/front_end/panels/common/CommentThreadWidget.ts

@@ -16,10 +16,6 @@ import commentThreadWidgetStyles from './commentThreadWidget.css.js';
 const {html, render, Directives: {createRef, ref}} = Lit;
 
 const UIStrings = {
-  /**
-   * @description Link text in the info tooltip for learning more about comments sent to the agent.
-   */
-  learnMore: 'Learn more',
   /**
    * @description Text next to the checkmark in the comment thread header indicating that comments have been sent to
    * the agent.
@@ -49,7 +45,7 @@ const UIStringsNotTranslate = {
    * @description Disclaimer text in the comment thread info tooltip.
    */
   inputDisclaimer:
-      'Comment strings, DOM hierarchy snippets, tracked CSS and DOM changes, Visual Element (VE) paths and signatures, and tracked presenter changes are sent to the connected third-party agent to assist with debugging and code updates.',
+      'Comment strings, DOM hierarchy snippets, tracked CSS and DOM changes, Visual Element (VE) paths and signatures, and tracked presenter changes are sent to the connected third-party agent to assist with debugging and code updates',
 } as const;
 
 const str_ = i18n.i18n.registerUIStrings('panels/common/CommentThreadWidget.ts', UIStrings);
@@ -61,7 +57,6 @@ export interface ViewInput {
   comments: CommentManager.CommentManager.Comment[];
   commentText: string;
   textAreaRef: Lit.Directives.Ref<HTMLTextAreaElement>;
-  onLearnMoreClick: () => void;
   onAddComment: (text: string) => void;
   onCommentTextChange: (event: Event) => void;
 }
@@ -139,11 +134,6 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: ViewOutput, target: HTML
           >
             <div class="info-tooltip-container">
               ${lockedString(UIStringsNotTranslate.inputDisclaimer)}
-              <button
-                class="tooltip-link"
-                role="link"
-                @click=${input.onLearnMoreClick}
-              >${i18nString(UIStrings.learnMore)}</button>
             </div>
           </devtools-tooltip>
           <devtools-button
@@ -187,10 +177,6 @@ export class CommentThreadWidget extends UI.Widget.Widget {
     this.requestUpdate();
   }
 
-  #handleLearnMoreClick = (): void => {
-    // TODO: wire up the learn more click
-  };
-
   #handleAddComment = (text: string): void => {
     const commentText = text.trim();
     if (commentText && this.onAddComment) {
@@ -212,7 +198,6 @@ export class CommentThreadWidget extends UI.Widget.Widget {
       comments: this.#comments,
       commentText: this.#commentText,
       textAreaRef: this.#textAreaRef,
-      onLearnMoreClick: this.#handleLearnMoreClick,
       onAddComment: this.#handleAddComment,
       onCommentTextChange: this.#handleCommentTextChange,
     };

package/front_end/panels/common/commentThreadWidget.css

@@ -153,18 +153,6 @@
     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-text {
     overflow: hidden;
     white-space: nowrap;

package/front_end/panels/elements/CSSRuleValidator.ts

@@ -72,7 +72,7 @@ const UIStrings = {
    * @example {Arial} PH5
    */
   fontVariationSettingsWarning:
-      'Value for setting "{PH1}" {PH2} is outside the supported range [{PH3}, {PH4}] for font-family "{PH5}"',
+      'Value for setting "{PH1}" {PH2} is outside the supported range [{PH3}, {PH4}] for font-family "{PH5}".',
   /**
    * @description The message shown in the Styles tab when the user hovers over a property declaration that has no effect on flex or grid child items.
    * @example {flex} CONTAINER_DISPLAY_NAME

package/front_end/panels/elements/ElementsPanel.ts

@@ -868,7 +868,8 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
 
         // If any of these properties are undefined or reset to an invalid value,
         // this means the search/highlight request is outdated.
-        const highlightRequestValid = this.searchConfig && this.searchResults && (this.currentSearchResultIndex !== -1);
+        const highlightRequestValid =
+            this.searchConfig && this.searchResults && (this.currentSearchResultIndex === index);
         if (highlightRequestValid) {
           this.highlightCurrentSearchResult();
         }
@@ -877,12 +878,11 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
     }
 
     void searchResult.node.scrollIntoView();
-    if (searchResult.node) {
-      this.#domTreeWidget.highlightMatch(searchResult.node, this.searchConfig?.query);
-    }
+    this.#domTreeWidget.highlightMatch(searchResult.node, this.searchConfig?.query);
   }
 
   private hideSearchHighlights(): void {
+    SDK.OverlayModel.OverlayModel.hideDOMNodeHighlight(this.#targetManager);
     if (!this.searchResults?.length || this.currentSearchResultIndex === -1) {
       return;
     }

package/front_end/panels/elements/ElementsTreeElement.ts

@@ -1821,11 +1821,16 @@ export class ElementsTreeWidget extends UI.Widget.Widget {
     }
   }
 
-  hideSearchHighlights(): void {
+  #clearHighlights(): void {
     Highlighting.HighlightManager.HighlightManager.instance().removeHighlights(this.#highlights);
     this.#highlights = [];
   }
 
+  hideSearchHighlights(): void {
+    this.#searchQuery = null;
+    this.#clearHighlights();
+  }
+
   setInClipboard(inClipboard: boolean): void {
     if (this.inClipboard === inClipboard) {
       return;
@@ -2949,7 +2954,7 @@ export class ElementsTreeWidget extends UI.Widget.Widget {
   }
 
   #highlightSearchResults(): void {
-    this.hideSearchHighlights();
+    this.#clearHighlights();
 
     if (!this.searchQuery) {
       return;

package/front_end/panels/elements/ElementsTreeOutline.ts

@@ -919,6 +919,7 @@ export const DECLARATIVE_VIEW: View = (input: ViewInput, _output: ViewOutput, ta
     // clang-format off
     return html`
       <li role="treeitem"
+          selectable=${input.selectEnabled ? 'true' : 'false'}
           ?selected=${isSelected && !input.selectedClosingTag}
           class=${classes}
           style=${styleMap({'--indent': `${computeLeftIndent(depth, isExpandable)}px`})}
@@ -933,8 +934,7 @@ export const DECLARATIVE_VIEW: View = (input: ViewInput, _output: ViewOutput, ta
           @dragleave=${on(onDragLeave)}
           @drop=${on(onDrop)}
           @dragend=${on(onDragEnd)}
-          jslog=${treeItemJslog(undefined, true)}>
-        ${UI.Widget.widget(ElementsTreeWidget, {
+          jslog=${treeItemJslog(undefined, true)}>${UI.Widget.widget(ElementsTreeWidget, {
           node,
           isClosingTag: false,
           renderSelection: false,
@@ -976,32 +976,28 @@ export const DECLARATIVE_VIEW: View = (input: ViewInput, _output: ViewOutput, ta
             }
           },
           updateRecord: input.updateRecordForNode?.(node) ?? null,
-        })}
-        ${hasChildren ? html`
-          <ul role="group">
+        })}${hasChildren ? html`<ul role="group">
             ${UI.TreeOutline.ifExpanded(html`
               ${node.adoptedStyleSheetsForNode.length > 0 ? renderAdoptedStyleSheets(node, depth + 1) : nothing}
               ${repeat(children, child => child.id, child => renderNode(child, depth + 1))}
               ${remainingChildrenCount > 0 ? html`
                 <li role="treeitem"
+                    selectable="false"
                     class="elements-tree-expand-all"
                     style=${styleMap({'--indent': `${computeLeftIndent(depth + 1, false)}px`})}
-                    jslog=${treeItemJslog('show-all-nodes')}>
-                  <devtools-button
+                    jslog=${treeItemJslog('show-all-nodes')}><devtools-button
                       .variant=${Buttons.Button.Variant.OUTLINED}
                       title=${i18nString(UIStrings.showAllNodesDMore, {PH1: remainingChildrenCount})}
                       @click=${on((event: Event) => {
                         event.stopPropagation();
                         input.onExpandAllChildren?.(node);
-                      })}>
-                    ${i18nString(UIStrings.showAllNodesDMore, {PH1: remainingChildrenCount})}
-                  </devtools-button>
-                </li>
+                      })}>${i18nString(UIStrings.showAllNodesDMore, {PH1: remainingChildrenCount})}</devtools-button></li>
               ` : nothing}
               ${node.isInsertionPoint() ? node.distributedNodes().map(distributedNode => renderShortcut(distributedNode, depth + 1)) : nothing}
               ${node instanceof SDK.DOMModel.DOMDocument ? renderTopLayerContainer(node, depth + 1) : nothing}
               ${needsClosingTag ? html`
                 <li role="treeitem"
+                    selectable=${input.selectEnabled ? 'true' : 'false'}
                     ?selected=${isSelected && Boolean(input.selectedClosingTag)}
                     class=${classMap({
                       selected: isSelected && Boolean(input.selectedClosingTag),
@@ -1018,8 +1014,7 @@ export const DECLARATIVE_VIEW: View = (input: ViewInput, _output: ViewOutput, ta
                     @dragover=${on(onClosingTagDragOver)}
                     @dragleave=${on(onDragLeave)}
                     @drop=${on(onClosingTagDrop)}
-                    @dragend=${on(onDragEnd)}>
-                  ${UI.Widget.widget(ElementsTreeWidget, {
+                    @dragend=${on(onDragEnd)}>${UI.Widget.widget(ElementsTreeWidget, {
                     node,
                     isClosingTag: true,
                     renderSelection: false,
@@ -1037,13 +1032,10 @@ export const DECLARATIVE_VIEW: View = (input: ViewInput, _output: ViewOutput, ta
                       }
                     },
                     updateRecord: input.updateRecordForNode?.(node) ?? null,
-                  })}
-                </li>
+                  })}</li>
               ` : nothing}
             `)}
-          </ul>
-        ` : nothing}
-      </li>
+          </ul>` : nothing}</li>
     `;
     // clang-format on
   };
@@ -1096,19 +1088,16 @@ export const DECLARATIVE_VIEW: View = (input: ViewInput, _output: ViewOutput, ta
               const root = input.rootDOMNode;
               return html`
                 <li role="treeitem"
+                    selectable="false"
                     class="elements-tree-expand-all"
                     style=${styleMap({'--indent': `${computeLeftIndent(0, false)}px`})}
-                    jslog=${treeItemJslog('show-all-nodes')}>
-                  <devtools-button
+                    jslog=${treeItemJslog('show-all-nodes')}><devtools-button
                     .variant=${Buttons.Button.Variant.OUTLINED}
                     title=${i18nString(UIStrings.showAllNodesDMore, {PH1: remaining})}
                     @click=${on((event: Event) => {
                       event.stopPropagation();
                       input.onExpandAllChildren?.(root);
-                    })}>
-                    ${i18nString(UIStrings.showAllNodesDMore, {PH1: remaining})}
-                  </devtools-button>
-                </li>
+                    })}>${i18nString(UIStrings.showAllNodesDMore, {PH1: remaining})}</devtools-button></li>
               `;
             })() : nothing}
             ${input.omitRootDOMNode && input.rootDOMNode instanceof SDK.DOMModel.DOMDocument ? renderTopLayerContainer(input.rootDOMNode, 0) : nothing}
@@ -2326,9 +2315,8 @@ export class DOMTreeWidget extends UI.Widget.Widget {
     this.#searchMatchQuery = query ?? null;
     if (this.selectedDOMNode() !== node) {
       this.selectDOMNode(node, /* focus= */ false);
-    } else {
-      this.performUpdate();
     }
+    this.performUpdate();
   }
 
   hideMatchHighlights(node: SDK.DOMModel.DOMNode): void {

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));
@@ -629,7 +633,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/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/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/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.

package/front_end/panels/sources/DebuggerPlugin.ts

@@ -138,7 +138,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 Error message that is displayed when no debug info could be loaded.
    * @example {app.wasm} PH1

package/front_end/panels/timeline/components/DetailsView.ts

@@ -25,7 +25,7 @@ const UIStrings = {
    * @description Warning message indicating that an event is likely a performance bottleneck in the Performance panel.
    * @example {Forced reflow} PH1
    */
-  sIsALikelyPerformanceBottleneck: '{PH1} is a likely performance bottleneck.',
+  sIsALikelyPerformanceBottleneck: '{PH1} is a likely performance bottleneck',
   /**
    * @description Warning message in the Performance panel for an idle callback function that took longer to execute than its predefined deadline.
    * @example {10ms} PH1
@@ -36,7 +36,7 @@ const UIStrings = {
    * @example {Task} PH1
    * @example {10ms} PH2
    */
-  sTookS: '{PH1} took {PH2}.',
+  sTookS: '{PH1} took {PH2}',
   /**
    * @description Label in the Performance panel for a task that took a long time.
    */
@@ -49,7 +49,7 @@ const UIStrings = {
    * @description Warning message in the Performance panel indicating that an interaction caused poor responsiveness.
    * @example {Long interaction} PH1
    */
-  sIsLikelyPoorPageResponsiveness: '{PH1} indicates poor page responsiveness.',
+  sIsLikelyPoorPageResponsiveness: '{PH1} indicates poor page responsiveness',
   /**
    * @description Label for the WebSocket sub-protocol in the event details view of the Performance panel.
    */

package/front_end/panels/timeline/components/OriginMap.ts

@@ -115,7 +115,7 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
   }
   // clang-format off
   Lit.render(html`
-    <devtools-data-grid striped inline
+    <devtools-data-grid striped inline deletable
         @click=${(e: Event) => { e.stopPropagation(); }}
         @create=${input.onCreate}>
       <table>

package/front_end/panels/timeline/components/insights/BaseInsightComponent.ts

@@ -57,7 +57,7 @@ const UIStrings = {
    * @description Accessible label for the button to expand an insight to view details in the Performance panel sidebar.
    * @example {LCP breakdown} PH1
    */
-  viewDetails: 'View details for {PH1} insight.',
+  viewDetails: 'View details for {PH1} insight',
 } as const;
 
 const str_ = i18n.i18n.registerUIStrings('panels/timeline/components/insights/BaseInsightComponent.ts', UIStrings);
@@ -108,8 +108,7 @@ const DEFAULT_VIEW: View = (input, _output, target) => {
 
   let ariaLabel = `${i18nString(UIStrings.viewDetails, {PH1: model.title})}`;
   if (estimatedSavingsAriaLabel) {
-    // space prefix is deliberate to add a gap after the view details text
-    ariaLabel += ` ${estimatedSavingsAriaLabel}`;
+    ariaLabel += `. ${estimatedSavingsAriaLabel}`;
   }
 
   function renderInsightContent(): Lit.LitTemplate {

package/front_end/third_party/chromium/README.chromium

@@ -1,7 +1,7 @@
 Name: Dependencies sourced from the upstream `chromium` repository
 URL: Internal
 Version: N/A
-Revision: 87625275b7c30150efc10c7dbf7c86982459704f
+Revision: 02dcd5e6b2a012fb40e5273996867ae1a87574d0
 Update Mechanism: Manual (https://crbug.com/428069060)
 License: BSD-3-Clause
 License File: LICENSE

package/front_end/ui/components/buttons/Button.ts

@@ -48,6 +48,7 @@ interface ButtonState {
   variant: Variant;
   size?: Size;
   reducedFocusRing?: boolean;
+  buttonTitle?: string;
   disabled: boolean;
   toggled?: boolean;
   toggleOnClick?: boolean;
@@ -80,7 +81,14 @@ interface CommonButtonData {
   spinner?: boolean;
   type?: ButtonType;
   value?: string;
+  /**
+   * Sets title on the host and, unless buttonTitle is provided, the internal <button> element.
+   */
   title?: string;
+  /**
+   * Sets title on the internal <button> element, taking precedence over title.
+   */
+  buttonTitle?: string;
   jslogContext?: string;
   longClickable?: boolean;
   inverseColorTheme?: boolean;
@@ -166,6 +174,7 @@ export class Button extends HTMLElement {
     if (data.title) {
       this.title = data.title;
     }
+    this.#props.buttonTitle = data.buttonTitle;
 
     if (data.accessibleLabel) {
       this.accessibleLabel = data.accessibleLabel;
@@ -245,6 +254,15 @@ export class Button extends HTMLElement {
     this.#render();
   }
 
+  get buttonTitle(): string|undefined {
+    return this.#props.buttonTitle;
+  }
+
+  set buttonTitle(buttonTitle: string|undefined) {
+    this.#props.buttonTitle = buttonTitle;
+    this.#render();
+  }
+
   get disabled(): boolean {
     return this.#props.disabled;
   }
@@ -396,7 +414,7 @@ export class Button extends HTMLElement {
     Lit.render(
       html`
         <style>${buttonStyles}</style>
-        <button title=${ifDefined(this.title || undefined)}
+        <button title=${ifDefined(this.buttonTitle || this.title || undefined)}
                 ?disabled=${this.#props.disabled}
                 class=${classMap(classes)}
                 aria-pressed=${ifDefined(this.#props.toggled)}

package/front_end/ui/legacy/ContextMenu.ts

@@ -989,6 +989,7 @@ export class ContextMenu extends SubMenu {
  * @property keepOpen -Reflects the `"keep-open"` attribute.
  * @property iconName - Reflects the `"icon-name"` attribute.
  * @property disabled - Reflects the `"disabled"` attribute.
+ * @property accessibleLabel - Sets the accessible name and tooltip on the internal button.
  * @attribute soft-menu - Whether to use the soft menu implementation.
  * @attribute keep-open - Whether the menu should stay open after an item is clicked.
  * @attribute icon-name - Name of the icon to display on the button.
@@ -1001,6 +1002,7 @@ export class MenuButton extends HTMLElement {
   readonly #shadow = this.attachShadow({mode: 'open'});
   #triggerTimeoutId?: number;
   #populateMenuCall?: (arg0: ContextMenu) => void;
+  #accessibleLabel?: string;
 
   /**
    * Sets the callback function used to populate the context menu when the button is clicked.
@@ -1010,6 +1012,17 @@ export class MenuButton extends HTMLElement {
     this.#populateMenuCall = populateCall;
   }
 
+  set accessibleLabel(accessibleLabel: string|undefined) {
+    this.#accessibleLabel = accessibleLabel;
+    if (this.iconName) {
+      this.#render();
+    }
+  }
+
+  get accessibleLabel(): string|undefined {
+    return this.#accessibleLabel;
+  }
+
   /**
    * Reflects the `soft-menu` attribute. If true, uses the `SoftContextMenu` implementation.
    * @default false
@@ -1120,13 +1133,15 @@ export class MenuButton extends HTMLElement {
     if (!this.iconName) {
       throw new Error('<devtools-menu-button> expects an icon.');
     }
+    const accessibleLabel = this.accessibleLabel ?? this.title;
 
     // clang-format off
     render(html`
         <devtools-button .disabled=${this.disabled}
                          .iconName=${this.iconName}
                          .variant=${Buttons.Button.Variant.ICON}
-                         .title=${this.title}
+                         .accessibleLabel=${accessibleLabel}
+                         .buttonTitle=${accessibleLabel}
                          aria-haspopup='menu'
                          @click=${this.#triggerContextMenu}>
         </devtools-button>`,

package/front_end/ui/legacy/PlusButton.ts

@@ -233,19 +233,18 @@ interface PlusButtonViewInput {
  */
 export const PLUS_BUTTON_VIEW =
     (input: PlusButtonViewInput, output: {button?: MenuButton}, target: HTMLElement): void => {
-      render(
-          html`
+      render(html`
         <devtools-menu-button
             ${Directives.ref(el => {
-            output.button = el as MenuButton | undefined;
-          })}
+               output.button = el as MenuButton | undefined;
+             })}
             slot="trailing-button"
             .iconName=${'plus'}
-            .title=${input.title}
+            .accessibleLabel=${input.title}
             .jslogContext=${input.jslogContext}
             .populateMenuCall=${input.populateMenuCall}>
         </devtools-menu-button>`,
-          target);
+             target);
     };
 
 /**

package/front_end/ui/legacy/Treeoutline.ts

@@ -1678,6 +1678,8 @@ class TreeViewTreeElement extends TreeElement {
       this.#clonedClasses.add(className);
     }
     this.hidden = hasBooleanAttribute(this.configElement, 'hidden');
+    this.selectable =
+        !this.configElement.hasAttribute('selectable') || hasBooleanAttribute(this.configElement, 'selectable');
     this.updateExpansionFromAttribute();
   }