chrome-devtools-frontend 1.0.995629 → 1.0.997048

package/front_end/panels/lighthouse/LighthouseStartViewFR.ts

@@ -10,20 +10,32 @@ import {StartView} from './LighthouseStartView.js';
 import {Events} from './LighthouseController.js';
 
 const UIStrings = {
+  /**
+   * @description Text displayed as the title of a panel that can be used to audit a web page with Lighthouse.
+   */
+  generateLighthouseReport: 'Generate a Lighthouse report',
   /**
    * @description Text that refers to the Lighthouse mode
    */
   mode: 'Mode',
+  /**
+   * @description Title in the Lighthouse Start View for list of categories to run during audit
+   */
+  categories: 'Categories',
+  /**
+   * @description Title in the Lighthouse Start View for list of available start plugins
+   */
+  plugins: 'Plugins',
   /**
    * @description Label for a button to start analyzing a page navigation with Lighthouse
    */
-  analyzeNavigation: 'Analyze navigation',
+  analyzeNavigation: 'Analyze page load',
   /**
    * @description Label for a button to start analyzing the current page state with Lighthouse
    */
-  analyzeSnapshot: 'Analyze snapshot',
+  analyzeSnapshot: 'Analyze page state',
   /**
-   * @description Label for a button that ends a Lighthouse timespan
+   * @description Label for a button that starts a Lighthouse mode that analyzes user interactions over a period of time.
    */
   startTimespan: 'Start timespan',
 };
@@ -35,31 +47,75 @@ export class StartViewFR extends StartView {
   protected render(): void {
     super.render();
     const fragment = UI.Fragment.Fragment.build`
-  <div class="lighthouse-form-section">
-  <div class="lighthouse-form-section-label">
-  ${i18nString(UIStrings.mode)}
-  </div>
-  <div class="lighthouse-form-elements" $="mode-form-elements"></div>
+<form class="lighthouse-start-view-fr">
+  <header class="hbox">
+    <div class="lighthouse-logo"></div>
+    <div class="lighthouse-title">${i18nString(UIStrings.generateLighthouseReport)}</div>
+    <div class="lighthouse-start-button-container">${this.startButton}</div>
+  </header>
+  <div $="help-text" class="lighthouse-help-text hidden"></div>
+  <div class="lighthouse-options hbox">
+    <div class="lighthouse-form-section">
+      <div class="lighthouse-form-elements" $="mode-form-elements"></div>
+    </div>
+    <div class="lighthouse-form-section">
+      <div class="lighthouse-form-elements" $="device-type-form-elements"></div>
+    </div>
+    <div class="lighthouse-form-categories">
+      <div class="lighthouse-form-section">
+        <div class="lighthouse-form-section-label">${i18nString(UIStrings.categories)}</div>
+        <div class="lighthouse-form-elements" $="categories-form-elements"></div>
+      </div>
+      <div class="lighthouse-form-section">
+        <div class="lighthouse-form-section-label">
+          <div class="lighthouse-icon-label">${i18nString(UIStrings.plugins)}</div>
+        </div>
+        <div class="lighthouse-form-elements" $="plugins-form-elements"></div>
+      </div>
+    </div>
   </div>
+  <div $="warning-text" class="lighthouse-warning-text hidden"></div>
+</form>
     `;
 
+    this.helpText = fragment.$('help-text');
+    this.warningText = fragment.$('warning-text');
+
+    // The previous radios are removed later and don't exist on the new fragment yet.
+    this.populateFormControls(fragment);
+
     // Populate the Lighthouse mode
     const modeFormElements = fragment.$('mode-form-elements');
     this.populateRuntimeSettingAsRadio('lighthouse.mode', i18nString(UIStrings.mode), modeFormElements);
 
-    const form = this.contentElement.querySelector('form');
-    form?.appendChild(fragment.element());
-    this.updateStartButton();
+    this.contentElement.textContent = '';
+    this.contentElement.append(fragment.element());
+    this.updateMode();
+  }
+
+  onResize(): void {
+    const useNarrowLayout = this.contentElement.offsetWidth < 500;
+    const useWideLayout = this.contentElement.offsetWidth > 800;
+    const headerEl = this.contentElement.querySelector('.lighthouse-start-view-fr header');
+    const optionsEl = this.contentElement.querySelector('.lighthouse-options');
+    if (headerEl) {
+      headerEl.classList.toggle('hbox', !useNarrowLayout);
+      headerEl.classList.toggle('vbox', useNarrowLayout);
+    }
+    if (optionsEl) {
+      optionsEl.classList.toggle('wide', useWideLayout);
+      optionsEl.classList.toggle('narrow', useNarrowLayout);
+    }
   }
 
-  updateStartButton(): void {
+  updateMode(): void {
     const {mode} = this.controller.getFlags();
 
-    let label: Platform.UIString.LocalizedString;
+    let buttonLabel: Platform.UIString.LocalizedString;
     let callback: () => void;
 
     if (mode === 'timespan') {
-      label = i18nString(UIStrings.startTimespan);
+      buttonLabel = i18nString(UIStrings.startTimespan);
       callback = (): void => {
         this.controller.dispatchEventToListeners(
             Events.RequestLighthouseTimespanStart,
@@ -67,7 +123,7 @@ export class StartViewFR extends StartView {
         );
       };
     } else if (mode === 'snapshot') {
-      label = i18nString(UIStrings.analyzeSnapshot);
+      buttonLabel = i18nString(UIStrings.analyzeSnapshot);
       callback = (): void => {
         this.controller.dispatchEventToListeners(
             Events.RequestLighthouseStart,
@@ -75,7 +131,7 @@ export class StartViewFR extends StartView {
         );
       };
     } else {
-      label = i18nString(UIStrings.analyzeNavigation);
+      buttonLabel = i18nString(UIStrings.analyzeNavigation);
       callback = (): void => {
         this.controller.dispatchEventToListeners(
             Events.RequestLighthouseStart,
@@ -85,16 +141,16 @@ export class StartViewFR extends StartView {
     }
 
     this.startButton = UI.UIUtils.createTextButton(
-        label,
+        buttonLabel,
         callback,
         /* className */ '',
         /* primary */ true,
     );
 
-    const startButtonContainer = this.contentElement.querySelector('.lighthouse-start-button-container');
-    if (startButtonContainer) {
-      startButtonContainer.textContent = '';
-      startButtonContainer.appendChild(this.startButton);
+    const startButtonContainerEl = this.contentElement.querySelector('.lighthouse-start-button-container');
+    if (startButtonContainerEl) {
+      startButtonContainerEl.textContent = '';
+      startButtonContainerEl.appendChild(this.startButton);
     }
   }
 }

package/front_end/panels/lighthouse/RadioSetting.ts

@@ -5,16 +5,20 @@
 import type * as Common from '../../core/common/common.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
+interface RadioOption {
+  value: string;
+  label: () => Common.UIString.LocalizedString;
+  tooltip?: () => Common.UIString.LocalizedString;
+}
+
 export class RadioSetting {
   private readonly setting: Common.Settings.Setting<string>;
-  private options: {value: string, label: () => Common.UIString.LocalizedString}[];
+  private options: RadioOption[];
   element: HTMLDivElement;
   private radioElements: HTMLInputElement[];
   private ignoreChangeEvents: boolean;
   private selectedIndex: number;
-  constructor(
-      options: {value: string, label: () => Common.UIString.LocalizedString}[],
-      setting: Common.Settings.Setting<string>, description: string) {
+  constructor(options: RadioOption[], setting: Common.Settings.Setting<string>, description: string) {
     this.setting = setting;
     this.options = options;
 
@@ -32,9 +36,11 @@ export class RadioSetting {
   `;
 
       this.element.appendChild(fragment.element());
+
+      const tooltip = option.tooltip?.() || description;
       if (description) {
-        UI.Tooltip.Tooltip.install(fragment.$('input') as HTMLElement, description);
-        UI.Tooltip.Tooltip.install(fragment.$('span') as HTMLElement, description);
+        UI.Tooltip.Tooltip.install(fragment.$('input') as HTMLElement, tooltip);
+        UI.Tooltip.Tooltip.install(fragment.$('span') as HTMLElement, tooltip);
       }
       const radioElement = fragment.$('input') as HTMLInputElement;
       radioElement.addEventListener('change', this.valueChanged.bind(this));

package/front_end/panels/lighthouse/lighthouseStartView.css

@@ -5,7 +5,8 @@
  */
 /* <3 */
 
-.lighthouse-start-view {
+.lighthouse-start-view,
+.lighthouse-start-view-fr {
   font-family: Roboto, sans-serif;
   font-size: var(--font-size);
   line-height: 18px;
@@ -16,6 +17,10 @@
   --report-font-family: roboto, helvetica, arial, sans-serif;
 }
 
+.lighthouse-start-view-fr {
+  margin: 24px;
+}
+
 .lighthouse-start-view header {
   flex: 2 1;
   padding: 16px;
@@ -23,6 +28,15 @@
   justify-items: center;
 }
 
+.lighthouse-start-view-fr header {
+  display: flex;
+  font-size: 18px;
+  flex-direction: row;
+  align-items: center;
+  column-gap: 16px;
+  margin-bottom: 16px;
+}
+
 .lighthouse-logo {
   width: 75px;
   height: 75px;
@@ -32,6 +46,11 @@
   background-image: var(--image-file-lighthouse_logo);
 }
 
+.lighthouse-start-view-fr .lighthouse-logo {
+  width: 45px;
+  height: 45px;
+}
+
 .lighthouse-start-view-text {
   margin: 0 40px;
   text-align: center;
@@ -65,6 +84,10 @@
   top: -4px;
 }
 
+.lighthouse-form-section-label .lighthouse-learn-more {
+  padding: 20px;
+}
+
 .lighthouse-radio {
   display: flex;
   align-items: center;
@@ -86,8 +109,16 @@ input[type="radio"]:focus {
   align-items: center;
 }
 
+.lighthouse-start-view-fr header.hbox .lighthouse-start-button-container {
+  margin-left: auto;
+}
+
+.lighthouse-start-view-fr header.vbox .lighthouse-title {
+  text-align: center;
+}
+
 .lighthouse-start-button-container button {
-  margin: 8px auto;
+  margin: 16px auto;
   font-family: var(--report-font-family);
   font-weight: 500;
   font-size: var(--font-size);
@@ -136,3 +167,19 @@ input[type="radio"]:focus {
   content: "⚠";
   margin-right: 10px;
 }
+
+.lighthouse-options {
+  display: grid;
+  grid-template-columns: auto auto;
+  grid-template-rows: auto auto;
+}
+
+.lighthouse-options.narrow {
+  grid-template-columns: auto;
+  grid-template-rows: auto auto auto;
+}
+
+.lighthouse-options.wide {
+  grid-template-columns: auto auto auto;
+  grid-template-rows: auto;
+}

package/front_end/panels/profiler/HeapSnapshotGridNodes.ts

@@ -572,6 +572,7 @@ export abstract class HeapSnapshotGenericObjectNode extends HeapSnapshotGridNode
         valueStyle = 'number';
         break;
       case 'hidden':
+      case 'object shape':
         valueStyle = 'null';
         break;
       case 'array':

package/front_end/panels/security/SecurityPanel.ts

@@ -111,7 +111,7 @@ const UIStrings = {
   *@description Second part of the body of message to display in devtools security tab when you are viewing a page that triggered a safety tip.
   */
   ifYouBelieveThisIsShownIn:
-      'If you believe this is shown in error please visit https://bugs.chromium.org/p/chromium/issues/entry?template=Safety+Tips+Appeals.',
+      'If you believe this is shown in error please visit https://g.co/chrome/lookalike-warnings.',
   /**
   *@description Summary of a warning when the user visits a page that triggered a Safety Tip because the domain looked like another domain.
   */
@@ -126,7 +126,7 @@ const UIStrings = {
   *@description second part of body of a warning when the user visits a page that triggered a Safety Tip because the domain looked like another domain.
   */
   ifYouBelieveThisIsShownInErrorSafety:
-      'If you believe this is shown in error please visit https://bugs.chromium.org/p/chromium/issues/entry?template=Safety+Tips+Appeals.',
+      'If you believe this is shown in error please visit https://g.co/chrome/lookalike-warnings.',
   /**
   *@description Title of the devtools security tab when the page you are on triggered a safety tip.
   */

package/front_end/panels/sources/DebuggerPlugin.ts

@@ -536,6 +536,10 @@ export class DebuggerPlugin extends Plugin {
     return true;
   }
 
+  private isVariableIdentifier(tokenType: string): boolean {
+    return tokenType === 'VariableName' || tokenType === 'VariableDefinition';
+  }
+
   private isIdentifier(tokenType: string): boolean {
     return tokenType === 'VariableName' || tokenType === 'VariableDefinition' || tokenType === 'PropertyName' ||
         tokenType === 'PropertyDefinition';
@@ -962,8 +966,8 @@ export class DebuggerPlugin extends Plugin {
     tree.iterate({
       from: fromPos,
       to: toPos,
-      enter(node): void {
-        const varName = node.name === 'VariableName' && editorState.sliceDoc(node.from, node.to);
+      enter: node => {
+        const varName = this.isVariableIdentifier(node.name) && editorState.sliceDoc(node.from, node.to);
         if (varName && variableMap.has(varName)) {
           if (node.from > curLine.to) {
             curLine = editorState.doc.lineAt(node.from);

package/front_end/panels/sources/SourcesPanel.ts

@@ -439,6 +439,14 @@ export class SourcesPanel extends UI.Panel.Panel implements UI.ContextMenu.Provi
     return this.sourcesViewInternal.searchableView();
   }
 
+  toggleNavigatorSidebar(): void {
+    this.editorView.toggleSidebar();
+  }
+
+  toggleDebuggerSidebar(): void {
+    this.splitWidget.toggleSidebar();
+  }
+
   private debuggerPaused(event: Common.EventTarget.EventTargetEvent<SDK.DebuggerModel.DebuggerModel>): void {
     const debuggerModel = event.data;
     const details = debuggerModel.debuggerPausedDetails();
@@ -1285,18 +1293,18 @@ export class RevealingActionDelegate implements UI.ActionRegistration.ActionDele
   }
 }
 
-let debuggingActionDelegateInstance: DebuggingActionDelegate;
+let actionDelegateInstance: ActionDelegate;
 
-export class DebuggingActionDelegate implements UI.ActionRegistration.ActionDelegate {
+export class ActionDelegate implements UI.ActionRegistration.ActionDelegate {
   static instance(opts: {
     forceNew: boolean|null,
-  } = {forceNew: null}): DebuggingActionDelegate {
+  } = {forceNew: null}): ActionDelegate {
     const {forceNew} = opts;
-    if (!debuggingActionDelegateInstance || forceNew) {
-      debuggingActionDelegateInstance = new DebuggingActionDelegate();
+    if (!actionDelegateInstance || forceNew) {
+      actionDelegateInstance = new ActionDelegate();
     }
 
-    return debuggingActionDelegateInstance;
+    return actionDelegateInstance;
   }
   handleAction(context: UI.Context.Context, actionId: string): boolean {
     const panel = SourcesPanel.instance();
@@ -1340,6 +1348,14 @@ export class DebuggingActionDelegate implements UI.ActionRegistration.ActionDele
         }
         return true;
       }
+      case 'sources.toggle-navigator-sidebar': {
+        panel.toggleNavigatorSidebar();
+        return true;
+      }
+      case 'sources.toggle-debugger-sidebar': {
+        panel.toggleDebuggerSidebar();
+        return true;
+      }
     }
     return false;
   }

package/front_end/panels/sources/sources-legacy.ts

@@ -189,7 +189,7 @@ Sources.SourcesPanel.DebuggerPausedDetailsRevealer = SourcesModule.SourcesPanel.
 Sources.SourcesPanel.RevealingActionDelegate = SourcesModule.SourcesPanel.RevealingActionDelegate;
 
 /** @constructor */
-Sources.SourcesPanel.DebuggingActionDelegate = SourcesModule.SourcesPanel.DebuggingActionDelegate;
+Sources.SourcesPanel.ActionDelegate = SourcesModule.SourcesPanel.ActionDelegate;
 
 /** @constructor */
 Sources.SourcesPanel.WrapperView = SourcesModule.SourcesPanel.WrapperView;

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

@@ -378,6 +378,14 @@ const UIStrings = {
   * comes to a halt.
   */
   enableAutoFocusOnDebuggerPaused: 'Focus Sources panel when triggering a breakpoint',
+  /**
+  * @description Text for command of toggling navigator sidebar in Sources panel
+  */
+  toggleNavigatorSidebar: 'Toggle navigator sidebar',
+  /**
+  * @description Text for command of toggling debugger sidebar in Sources panel
+  */
+  toggleDebuggerSidebar: 'Toggle debugger sidebar',
 
 };
 const str_ = i18n.i18n.registerUIStrings('panels/sources/sources-meta.ts', UIStrings);
@@ -567,7 +575,7 @@ UI.ActionRegistration.registerActionExtension({
   actionId: 'debugger.step-over',
   async loadActionDelegate() {
     const Sources = await loadSourcesModule();
-    return Sources.SourcesPanel.DebuggingActionDelegate.instance();
+    return Sources.SourcesPanel.ActionDelegate.instance();
   },
 
   title: i18nLazyString(UIStrings.stepOverNextFunctionCall),
@@ -599,7 +607,7 @@ UI.ActionRegistration.registerActionExtension({
   actionId: 'debugger.step-into',
   async loadActionDelegate() {
     const Sources = await loadSourcesModule();
-    return Sources.SourcesPanel.DebuggingActionDelegate.instance();
+    return Sources.SourcesPanel.ActionDelegate.instance();
   },
   title: i18nLazyString(UIStrings.stepIntoNextFunctionCall),
   iconClass: UI.ActionRegistration.IconClass.LARGE_ICON_STEP_INTO,
@@ -630,7 +638,7 @@ UI.ActionRegistration.registerActionExtension({
   actionId: 'debugger.step',
   async loadActionDelegate() {
     const Sources = await loadSourcesModule();
-    return Sources.SourcesPanel.DebuggingActionDelegate.instance();
+    return Sources.SourcesPanel.ActionDelegate.instance();
   },
   title: i18nLazyString(UIStrings.step),
   iconClass: UI.ActionRegistration.IconClass.LARGE_ICON_STEP,
@@ -652,7 +660,7 @@ UI.ActionRegistration.registerActionExtension({
   actionId: 'debugger.step-out',
   async loadActionDelegate() {
     const Sources = await loadSourcesModule();
-    return Sources.SourcesPanel.DebuggingActionDelegate.instance();
+    return Sources.SourcesPanel.ActionDelegate.instance();
   },
   title: i18nLazyString(UIStrings.stepOutOfCurrentFunction),
   iconClass: UI.ActionRegistration.IconClass.LARGE_ICON_STEP_OUT,
@@ -683,7 +691,7 @@ UI.ActionRegistration.registerActionExtension({
   category: UI.ActionRegistration.ActionCategory.DEBUGGER,
   async loadActionDelegate() {
     const Sources = await loadSourcesModule();
-    return Sources.SourcesPanel.DebuggingActionDelegate.instance();
+    return Sources.SourcesPanel.ActionDelegate.instance();
   },
   title: i18nLazyString(UIStrings.runSnippet),
   iconClass: UI.ActionRegistration.IconClass.LARGEICON_PLAY,
@@ -709,7 +717,7 @@ UI.ActionRegistration.registerActionExtension({
   toggleable: true,
   async loadActionDelegate() {
     const Sources = await loadSourcesModule();
-    return Sources.SourcesPanel.DebuggingActionDelegate.instance();
+    return Sources.SourcesPanel.ActionDelegate.instance();
   },
   contextTypes() {
     return maybeRetrieveContextTypes(Sources => [Sources.SourcesView.SourcesView]);
@@ -764,7 +772,7 @@ UI.ActionRegistration.registerActionExtension({
   category: UI.ActionRegistration.ActionCategory.DEBUGGER,
   async loadActionDelegate() {
     const Sources = await loadSourcesModule();
-    return Sources.SourcesPanel.DebuggingActionDelegate.instance();
+    return Sources.SourcesPanel.ActionDelegate.instance();
   },
   title: i18nLazyString(UIStrings.evaluateSelectedTextInConsole),
   contextTypes() {
@@ -1240,6 +1248,52 @@ UI.ActionRegistration.registerActionExtension({
   ],
 });
 
+UI.ActionRegistration.registerActionExtension({
+  actionId: 'sources.toggle-navigator-sidebar',
+  category: UI.ActionRegistration.ActionCategory.SOURCES,
+  title: i18nLazyString(UIStrings.toggleNavigatorSidebar),
+  async loadActionDelegate() {
+    const Sources = await loadSourcesModule();
+    return Sources.SourcesPanel.ActionDelegate.instance();
+  },
+  contextTypes() {
+    return maybeRetrieveContextTypes(Sources => [Sources.SourcesView.SourcesView]);
+  },
+  bindings: [
+    {
+      platform: UI.ActionRegistration.Platforms.WindowsLinux,
+      shortcut: 'Ctrl+Shift+y',
+    },
+    {
+      platform: UI.ActionRegistration.Platforms.Mac,
+      shortcut: 'Meta+Shift+y',
+    },
+  ],
+});
+
+UI.ActionRegistration.registerActionExtension({
+  actionId: 'sources.toggle-debugger-sidebar',
+  category: UI.ActionRegistration.ActionCategory.SOURCES,
+  title: i18nLazyString(UIStrings.toggleDebuggerSidebar),
+  async loadActionDelegate() {
+    const Sources = await loadSourcesModule();
+    return Sources.SourcesPanel.ActionDelegate.instance();
+  },
+  contextTypes() {
+    return maybeRetrieveContextTypes(Sources => [Sources.SourcesView.SourcesView]);
+  },
+  bindings: [
+    {
+      platform: UI.ActionRegistration.Platforms.WindowsLinux,
+      shortcut: 'Ctrl+Shift+h',
+    },
+    {
+      platform: UI.ActionRegistration.Platforms.Mac,
+      shortcut: 'Meta+Shift+h',
+    },
+  ],
+});
+
 Common.Settings.registerSettingExtension({
   settingName: 'navigatorGroupByFolder',
   settingType: Common.Settings.SettingType.BOOLEAN,

package/front_end/ui/components/diff_view/diffView.css

@@ -11,12 +11,14 @@
   font-size: var(--source-code-font-size);
   white-space: pre;
   line-height: 1.2em;
+  user-select: text;
 }
 
 .diff-line-number {
   color: var(--color-line-number);
   padding: 0 3px 0 9px;
   text-align: right;
+  user-select: none;
 }
 
 .diff-line-marker {

package/front_end/ui/components/tree_outline/TreeOutline.ts

@@ -255,25 +255,36 @@ export class TreeOutline<TreeNodeDataType> extends HTMLElement {
     return this.#selectedTreeNode;
   }
 
-  async #fetchNodeChildren(node: TreeNodeWithChildren<TreeNodeDataType>): Promise<TreeNode<TreeNodeDataType>[]> {
+  async #flattenSubtree(node: TreeNodeWithChildren<TreeNodeDataType>, filter: (node: TreeNodeDataType) => FilterOption):
+      Promise<TreeNode<TreeNodeDataType>[]> {
     const children = await getNodeChildren(node);
-    if (!this.#nodeFilter) {
-      return children;
-    }
     const filteredChildren = [];
     for (const child of children) {
-      const filtering = this.#nodeFilter(child.treeNodeData);
+      const filtering = filter(child.treeNodeData);
       // We always include the selected node in the tree, regardless of its filtering status.
-      if (filtering === FilterOption.SHOW || this.#isSelectedNode(child) || child.id === this.#nodeIdPendingFocus) {
+      const toBeSelected = this.#isSelectedNode(child) || child.id === this.#nodeIdPendingFocus;
+      // If a node is already expanded we should not flatten it away.
+      const expanded = this.#nodeExpandedMap.get(child.id);
+      if (filtering === FilterOption.SHOW || toBeSelected || expanded) {
         filteredChildren.push(child);
       } else if (filtering === FilterOption.FLATTEN && isExpandableNode(child)) {
-        const grandChildren = await this.#fetchNodeChildren(child);
+        const grandChildren = await this.#flattenSubtree(child, filter);
         filteredChildren.push(...grandChildren);
       }
     }
     return filteredChildren;
   }
 
+  async #fetchNodeChildren(node: TreeNodeWithChildren<TreeNodeDataType>): Promise<TreeNode<TreeNodeDataType>[]> {
+    const children = await getNodeChildren(node);
+    const filter = this.#nodeFilter;
+    if (!filter) {
+      return children;
+    }
+    const filteredDescendants = await this.#flattenSubtree(node, filter);
+    return filteredDescendants.length ? filteredDescendants : children;
+  }
+
   #setNodeExpandedState(node: TreeNode<TreeNodeDataType>, newExpandedState: boolean): void {
     this.#nodeExpandedMap.set(node.id, newExpandedState);
   }

package/front_end/ui/legacy/SplitWidget.ts

@@ -61,6 +61,8 @@ export class SplitWidget extends Common.ObjectWrapper.eventMixin<EventTypes, typ
   private animationCallback: (() => void)|null;
   private showSidebarButtonTitle: Common.UIString.LocalizedString;
   private hideSidebarButtonTitle: Common.UIString.LocalizedString;
+  private shownSidebarString: Common.UIString.LocalizedString;
+  private hiddenSidebarString: Common.UIString.LocalizedString;
   private showHideSidebarButton: ToolbarButton|null;
   private isVerticalInternal: boolean;
   private sidebarMinimized: boolean;
@@ -111,6 +113,8 @@ export class SplitWidget extends Common.ObjectWrapper.eventMixin<EventTypes, typ
     this.animationCallback = null;
     this.showSidebarButtonTitle = Common.UIString.LocalizedEmptyString;
     this.hideSidebarButtonTitle = Common.UIString.LocalizedEmptyString;
+    this.shownSidebarString = Common.UIString.LocalizedEmptyString;
+    this.hiddenSidebarString = Common.UIString.LocalizedEmptyString;
     this.showHideSidebarButton = null;
     this.isVerticalInternal = false;
     this.sidebarMinimized = false;
@@ -821,23 +825,29 @@ export class SplitWidget extends Common.ObjectWrapper.eventMixin<EventTypes, typ
       shownString: Common.UIString.LocalizedString, hiddenString: Common.UIString.LocalizedString): ToolbarButton {
     this.showSidebarButtonTitle = showTitle;
     this.hideSidebarButtonTitle = hideTitle;
+    this.shownSidebarString = shownString;
+    this.hiddenSidebarString = hiddenString;
     this.showHideSidebarButton = new ToolbarButton('', '');
     this.showHideSidebarButton.addEventListener(ToolbarButton.Events.Click, buttonClicked, this);
     this.updateShowHideSidebarButton();
 
     function buttonClicked(this: SplitWidget): void {
-      if (this.showModeInternal !== ShowMode.Both) {
-        this.showBoth(true);
-        ARIAUtils.alert(shownString);
-      } else {
-        this.hideSidebar(true);
-        ARIAUtils.alert(hiddenString);
-      }
+      this.toggleSidebar();
     }
 
     return this.showHideSidebarButton;
   }
 
+  toggleSidebar(): void {
+    if (this.showModeInternal !== ShowMode.Both) {
+      this.showBoth(true);
+      ARIAUtils.alert(this.shownSidebarString);
+    } else {
+      this.hideSidebar(true);
+      ARIAUtils.alert(this.hiddenSidebarString);
+    }
+  }
+
   private updateShowHideSidebarButton(): void {
     if (!this.showHideSidebarButton) {
       return;

package/front_end/ui/legacy/Toolbar.ts

@@ -57,6 +57,10 @@ const UIStrings = {
   *@description Announced screen reader message for ToolbarSettingToggle when the setting is toggled off.
   */
   notPressed: 'not pressed',
+  /**
+  *@description Tooltip shown when the user hovers over the clear icon to empty the text input.
+  */
+  clearInput: 'Clear input',
 };
 const str_ = i18n.i18n.registerUIStrings('ui/legacy/Toolbar.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -701,6 +705,7 @@ export class ToolbarInput extends ToolbarItem<ToolbarInput.EventTypes> {
     }
 
     const clearButton = this.element.createChild('div', 'toolbar-input-clear-button');
+    clearButton.title = UIStrings.clearInput;
     clearButton.appendChild(Icon.create('mediumicon-gray-cross-active', 'search-cancel-button'));
     clearButton.addEventListener('click', () => {
       this.setValue('', true);