chrome-devtools-frontend 1.0.960864 → 1.0.961109

package/.vscode/devtools-workspace-launch.json

@@ -0,0 +1,29 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "type": "pwa-chrome",
+      "request": "launch",
+      "name": "Run unit tests in VS Code debugger",
+      "preLaunchTask": "1-build_Debug",
+      "runtimeExecutable": "/usr/bin/npm",
+      "runtimeArgs": ["run", "unittest"],
+      "port": 9222,
+      "timeout": 30000,
+      "browserLaunchLocation": "workspace",
+      "outputCapture": "std",
+      "trace": true,
+      "env" : {
+        "KARMA_TIMEOUT": "3600000"
+      }
+    },
+    {
+      "type": "pwa-node",
+      "request": "launch",
+      "name": "Run end-to-end tests in VS Code debugger",
+      "preLaunchTask": "1-build_Debug",
+      "runtimeExecutable": "/usr/bin/npm",
+      "runtimeArgs": ["run", "e2etest"]
+    }
+  ]
+}

package/.vscode/devtools-workspace-settings.json

@@ -1,4 +1,9 @@
 {
   "eslint.runtime": "third_party/node/node.py",
-  "typescript.tsdk": "node_modules/typescript/lib"
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "debug.javascript.terminalOptions": {
+    "skipFiles": [
+      "node_modules/typescript/**"
+    ]
+  }
 }

package/.vscode/devtools-workspace-tasks.json

@@ -0,0 +1,28 @@
+{
+  "version": "2.0.0",
+  "runner": "terminal",
+  "tasks": [
+    {
+      "label": "1-build_Debug",
+      "type": "shell",
+      "command": "npm run build",
+      "group": {"kind": "build", "isDefault": true},
+      "presentation": {
+        "echo": true,
+        "reveal": "always"
+      },
+      "problemMatcher": [
+        {
+          "owner": "typescript",
+          "fileLocation": ["relative", "${workspaceRoot}/out/Default"],
+          "pattern": {
+            "regexp": "^([^\\s].*)\\((\\d+,\\d+)\\):\\s*(.*)$",
+            "file": 1,
+            "location": 2,
+            "message": 3
+          }
+        }
+      ]
+    }
+  ]
+}

package/front_end/core/i18n/locales/en-US.json

@@ -3806,6 +3806,12 @@
   "panels/console/ConsoleView.ts | consoleSettings": {
     "message": "Console settings"
   },
+  "panels/console/ConsoleView.ts | consoleSidebarHidden": {
+    "message": "Console sidebar hidden"
+  },
+  "panels/console/ConsoleView.ts | consoleSidebarShown": {
+    "message": "Console sidebar shown"
+  },
   "panels/console/ConsoleView.ts | copyVisibleStyledSelection": {
     "message": "Copy visible styled selection"
   },
@@ -4499,6 +4505,12 @@
   "panels/elements/ElementsPanel.ts | computed": {
     "message": "Computed"
   },
+  "panels/elements/ElementsPanel.ts | computedStylesHidden": {
+    "message": "Computed Styles sidebar hidden"
+  },
+  "panels/elements/ElementsPanel.ts | computedStylesShown": {
+    "message": "Computed Styles sidebar shown"
+  },
   "panels/elements/ElementsPanel.ts | domTreeExplorer": {
     "message": "DOM tree explorer"
   },
@@ -9794,6 +9806,12 @@
   "panels/sources/SourcesPanel.ts | copyStringContents": {
     "message": "Copy string contents"
   },
+  "panels/sources/SourcesPanel.ts | debuggerHidden": {
+    "message": "Debugger sidebar hidden"
+  },
+  "panels/sources/SourcesPanel.ts | debuggerShown": {
+    "message": "Debugger sidebar shown"
+  },
   "panels/sources/SourcesPanel.ts | dontPauseOnExceptions": {
     "message": "Don't pause on exceptions"
   },
@@ -9812,6 +9830,12 @@
   "panels/sources/SourcesPanel.ts | moreOptions": {
     "message": "More options"
   },
+  "panels/sources/SourcesPanel.ts | navigatorHidden": {
+    "message": "Navigator sidebar hidden"
+  },
+  "panels/sources/SourcesPanel.ts | navigatorShown": {
+    "message": "Navigator sidebar shown"
+  },
   "panels/sources/SourcesPanel.ts | openInSourcesPanel": {
     "message": "Open in Sources panel"
   },
@@ -10346,6 +10370,12 @@
   "panels/timeline/TimelineTreeView.ts | heaviestStack": {
     "message": "Heaviest stack"
   },
+  "panels/timeline/TimelineTreeView.ts | heaviestStackHidden": {
+    "message": "Heaviest stack sidebar hidden"
+  },
+  "panels/timeline/TimelineTreeView.ts | heaviestStackShown": {
+    "message": "Heaviest stack sidebar shown"
+  },
   "panels/timeline/TimelineTreeView.ts | hideHeaviestStack": {
     "message": "Hide Heaviest stack"
   },

package/front_end/core/i18n/locales/en-XL.json

@@ -3806,6 +3806,12 @@
   "panels/console/ConsoleView.ts | consoleSettings": {
     "message": "Ĉón̂śôĺê śêt́t̂ín̂ǵŝ"
   },
+  "panels/console/ConsoleView.ts | consoleSidebarHidden": {
+    "message": "Ĉón̂śôĺê śîd́êb́âŕ ĥíd̂d́êń"
+  },
+  "panels/console/ConsoleView.ts | consoleSidebarShown": {
+    "message": "Ĉón̂śôĺê śîd́êb́âŕ ŝh́ôẃn̂"
+  },
   "panels/console/ConsoleView.ts | copyVisibleStyledSelection": {
     "message": "Ĉóp̂ý v̂íŝíb̂ĺê śt̂ýl̂éd̂ śêĺêćt̂íôń"
   },
@@ -4499,6 +4505,12 @@
   "panels/elements/ElementsPanel.ts | computed": {
     "message": "Ĉóm̂ṕût́êd́"
   },
+  "panels/elements/ElementsPanel.ts | computedStylesHidden": {
+    "message": "Ĉóm̂ṕût́êd́ Ŝt́ŷĺêś ŝíd̂éb̂ár̂ h́îd́d̂én̂"
+  },
+  "panels/elements/ElementsPanel.ts | computedStylesShown": {
+    "message": "Ĉóm̂ṕût́êd́ Ŝt́ŷĺêś ŝíd̂éb̂ár̂ śĥóŵń"
+  },
   "panels/elements/ElementsPanel.ts | domTreeExplorer": {
     "message": "D̂ÓM̂ t́r̂éê éx̂ṕl̂ór̂ér̂"
   },
@@ -9794,6 +9806,12 @@
   "panels/sources/SourcesPanel.ts | copyStringContents": {
     "message": "Ĉóp̂ý ŝt́r̂ín̂ǵ ĉón̂t́êńt̂ś"
   },
+  "panels/sources/SourcesPanel.ts | debuggerHidden": {
+    "message": "D̂éb̂úĝǵêŕ ŝíd̂éb̂ár̂ h́îd́d̂én̂"
+  },
+  "panels/sources/SourcesPanel.ts | debuggerShown": {
+    "message": "D̂éb̂úĝǵêŕ ŝíd̂éb̂ár̂ śĥóŵń"
+  },
   "panels/sources/SourcesPanel.ts | dontPauseOnExceptions": {
     "message": "D̂ón̂'t́ p̂áûśê ón̂ éx̂ćêṕt̂íôńŝ"
   },
@@ -9812,6 +9830,12 @@
   "panels/sources/SourcesPanel.ts | moreOptions": {
     "message": "M̂ór̂é ôṕt̂íôńŝ"
   },
+  "panels/sources/SourcesPanel.ts | navigatorHidden": {
+    "message": "N̂áv̂íĝát̂ór̂ śîd́êb́âŕ ĥíd̂d́êń"
+  },
+  "panels/sources/SourcesPanel.ts | navigatorShown": {
+    "message": "N̂áv̂íĝát̂ór̂ śîd́êb́âŕ ŝh́ôẃn̂"
+  },
   "panels/sources/SourcesPanel.ts | openInSourcesPanel": {
     "message": "Ôṕêń îń Ŝóûŕĉéŝ ṕâńêĺ"
   },
@@ -10346,6 +10370,12 @@
   "panels/timeline/TimelineTreeView.ts | heaviestStack": {
     "message": "Ĥéâv́îéŝt́ ŝt́âćk̂"
   },
+  "panels/timeline/TimelineTreeView.ts | heaviestStackHidden": {
+    "message": "Ĥéâv́îéŝt́ ŝt́âćk̂ śîd́êb́âŕ ĥíd̂d́êń"
+  },
+  "panels/timeline/TimelineTreeView.ts | heaviestStackShown": {
+    "message": "Ĥéâv́îéŝt́ ŝt́âćk̂ śîd́êb́âŕ ŝh́ôẃn̂"
+  },
   "panels/timeline/TimelineTreeView.ts | hideHeaviestStack": {
     "message": "Ĥíd̂é Ĥéâv́îéŝt́ ŝt́âćk̂"
   },

package/front_end/core/sdk/DebuggerModel.ts

@@ -548,6 +548,10 @@ export class DebuggerModel extends SDKModel<EventTypes> {
     return this.#scriptsInternal.get(scriptId) || null;
   }
 
+  /**
+   * Returns all `Script` objects with the same provided `sourceURL`. The
+   * resulting array is sorted by time with the newest `Script` in the front.
+   */
   scriptsForSourceURL(sourceURL: string|null): Script[] {
     if (!sourceURL) {
       return [];
@@ -770,7 +774,10 @@ export class DebuggerModel extends SDKModel<EventTypes> {
       scripts = [];
       this.#scriptsBySourceURL.set(script.sourceURL, scripts);
     }
-    scripts.push(script);
+    // Newer scripts with the same URL should be preferred so we put them in
+    // the front. Consuming code usually will iterate over the array and pick
+    // the first script that works.
+    scripts.unshift(script);
   }
 
   private unregisterScript(script: Script): void {

package/front_end/core/sdk/ServiceWorkerCacheModel.ts

@@ -250,6 +250,9 @@ export class ServiceWorkerCacheModel extends SDKModel<EventTypes> implements Pro
   indexedDBContentUpdated(_event: Protocol.Storage.IndexedDBContentUpdatedEvent): void {
   }
 
+  interestGroupAccessed(_event: Protocol.Storage.InterestGroupAccessedEvent): void {
+  }
+
   setThrottlerSchedulesAsSoonAsPossibleForTest(): void {
     this.#scheduleAsSoonAsPossible = true;
   }

package/front_end/generated/InspectorBackendCommands.js

@@ -2048,7 +2048,8 @@ export function registerCommands(inspectorBackend) {
     XrSpatialTracking: 'xr-spatial-tracking'
   });
   inspectorBackend.registerEnum(
-      'Page.PermissionsPolicyBlockReason', {Header: 'Header', IframeAttribute: 'IframeAttribute'});
+      'Page.PermissionsPolicyBlockReason',
+      {Header: 'Header', IframeAttribute: 'IframeAttribute', InFencedFrameTree: 'InFencedFrameTree'});
   inspectorBackend.registerEnum('Page.OriginTrialTokenStatus', {
     Success: 'Success',
     NotSupported: 'NotSupported',
@@ -2430,7 +2431,12 @@ export function registerCommands(inspectorBackend) {
       ],
       []);
   inspectorBackend.registerCommand(
-      'Page.setFontFamilies', [{'name': 'fontFamilies', 'type': 'object', 'optional': false}], []);
+      'Page.setFontFamilies',
+      [
+        {'name': 'fontFamilies', 'type': 'object', 'optional': false},
+        {'name': 'forScripts', 'type': 'object', 'optional': true}
+      ],
+      []);
   inspectorBackend.registerCommand(
       'Page.setFontSizes', [{'name': 'fontSizes', 'type': 'object', 'optional': false}], []);
   inspectorBackend.registerCommand(
@@ -2621,13 +2627,17 @@ export function registerCommands(inspectorBackend) {
     Websql: 'websql',
     Service_workers: 'service_workers',
     Cache_storage: 'cache_storage',
+    Interest_groups: 'interest_groups',
     All: 'all',
     Other: 'other'
   });
+  inspectorBackend.registerEnum(
+      'Storage.InterestGroupAccessType', {Join: 'join', Leave: 'leave', Update: 'update', Bid: 'bid', Win: 'win'});
   inspectorBackend.registerEvent('Storage.cacheStorageContentUpdated', ['origin', 'cacheName']);
   inspectorBackend.registerEvent('Storage.cacheStorageListUpdated', ['origin']);
   inspectorBackend.registerEvent('Storage.indexedDBContentUpdated', ['origin', 'databaseName', 'objectStoreName']);
   inspectorBackend.registerEvent('Storage.indexedDBListUpdated', ['origin']);
+  inspectorBackend.registerEvent('Storage.interestGroupAccessed', ['type', 'ownerOrigin', 'name']);
   inspectorBackend.registerCommand(
       'Storage.clearDataForOrigin',
       [
@@ -2667,6 +2677,15 @@ export function registerCommands(inspectorBackend) {
   inspectorBackend.registerCommand('Storage.getTrustTokens', [], ['tokens']);
   inspectorBackend.registerCommand(
       'Storage.clearTrustTokens', [{'name': 'issuerOrigin', 'type': 'string', 'optional': false}], ['didDeleteTokens']);
+  inspectorBackend.registerCommand(
+      'Storage.getInterestGroupDetails',
+      [
+        {'name': 'ownerOrigin', 'type': 'string', 'optional': false},
+        {'name': 'name', 'type': 'string', 'optional': false}
+      ],
+      ['details']);
+  inspectorBackend.registerCommand(
+      'Storage.setInterestGroupTracking', [{'name': 'enable', 'type': 'boolean', 'optional': false}], []);
 
   // SystemInfo.
   inspectorBackend.registerEnum('SystemInfo.SubsamplingFormat', {Yuv420: 'yuv420', Yuv422: 'yuv422', Yuv444: 'yuv444'});

package/front_end/generated/SupportedCSSProperties.js

@@ -302,7 +302,7 @@ export const generatedProperties = [
   {'name': 'clip', 'keywords': ['auto']},
   {'name': 'clip-path', 'keywords': ['none']},
   {'name': 'clip-rule', 'inherited': true, 'keywords': ['nonzero', 'evenodd']},
-  {'name': 'color', 'inherited': true, 'keywords': ['currentcolor']},
+  {'name': 'color', 'keywords': ['currentcolor'], 'inherited': true},
   {'name': 'color-interpolation', 'inherited': true, 'keywords': ['auto', 'srgb', 'linearrgb']},
   {'name': 'color-interpolation-filters', 'inherited': true, 'keywords': ['auto', 'srgb', 'linearrgb']},
   {'name': 'color-rendering', 'inherited': true, 'keywords': ['auto', 'optimizespeed', 'optimizequality']},
@@ -419,6 +419,7 @@ export const generatedProperties = [
   {'name': 'font-feature-settings', 'inherited': true, 'keywords': ['normal']},
   {'name': 'font-kerning', 'inherited': true, 'keywords': ['auto', 'normal', 'none']},
   {'name': 'font-optical-sizing', 'inherited': true, 'keywords': ['auto', 'none']},
+  {'inherited': true, 'keywords': ['normal', 'light', 'dark'], 'name': 'font-palette'},
   {
     'name': 'font-size',
     'inherited': true,
@@ -1000,6 +1001,7 @@ export const generatedPropertyValues = {
   'font-feature-settings': {'values': ['normal']},
   'font-kerning': {'values': ['auto', 'normal', 'none']},
   'font-optical-sizing': {'values': ['auto', 'none']},
+  'font-palette': {'values': ['normal', 'light', 'dark']},
   'font-size': {
     'values': [
       'xx-small', 'x-small', 'small', 'medium', 'large', 'x-large', 'xx-large', 'xxx-large', 'larger', 'smaller',

package/front_end/generated/protocol-mapping.d.ts

@@ -470,6 +470,10 @@ export namespace ProtocolMapping {
      * The origin's IndexedDB database list has been modified.
      */
     'Storage.indexedDBListUpdated': [Protocol.Storage.IndexedDBListUpdatedEvent];
+    /**
+     * One of the interest groups was accessed by the associated page.
+     */
+    'Storage.interestGroupAccessed': [Protocol.Storage.InterestGroupAccessedEvent];
     /**
      * Issued when attached to target because of auto-attach or `attachToTarget` command.
      */
@@ -2096,7 +2100,7 @@ export namespace ProtocolMapping {
     'Overlay.setShowScrollBottleneckRects':
         {paramsType: [Protocol.Overlay.SetShowScrollBottleneckRectsRequest]; returnType: void;};
     /**
-     * Requests that backend shows hit-test borders on layers
+     * Deprecated, no longer has any effect.
      */
     'Overlay.setShowHitTestBorders': {paramsType: [Protocol.Overlay.SetShowHitTestBordersRequest]; returnType: void;};
     /**
@@ -2501,6 +2505,18 @@ export namespace ProtocolMapping {
     'Storage.clearTrustTokens': {
       paramsType: [Protocol.Storage.ClearTrustTokensRequest]; returnType: Protocol.Storage.ClearTrustTokensResponse;
     };
+    /**
+     * Gets details for a named interest group.
+     */
+    'Storage.getInterestGroupDetails': {
+      paramsType: [Protocol.Storage.GetInterestGroupDetailsRequest];
+      returnType: Protocol.Storage.GetInterestGroupDetailsResponse;
+    };
+    /**
+     * Enables/Disables issuing of interestGroupAccessed events.
+     */
+    'Storage.setInterestGroupTracking':
+        {paramsType: [Protocol.Storage.SetInterestGroupTrackingRequest]; returnType: void;};
     /**
      * Returns information about the system.
      */

package/front_end/generated/protocol-proxy-api.d.ts

@@ -2318,7 +2318,7 @@ declare namespace ProtocolProxyApi {
         Promise<Protocol.ProtocolResponseWithError>;
 
     /**
-     * Requests that backend shows hit-test borders on layers
+     * Deprecated, no longer has any effect.
      */
     invoke_setShowHitTestBorders(params: Protocol.Overlay.SetShowHitTestBordersRequest):
         Promise<Protocol.ProtocolResponseWithError>;
@@ -3035,6 +3035,18 @@ declare namespace ProtocolProxyApi {
      */
     invoke_clearTrustTokens(params: Protocol.Storage.ClearTrustTokensRequest):
         Promise<Protocol.Storage.ClearTrustTokensResponse>;
+
+    /**
+     * Gets details for a named interest group.
+     */
+    invoke_getInterestGroupDetails(params: Protocol.Storage.GetInterestGroupDetailsRequest):
+        Promise<Protocol.Storage.GetInterestGroupDetailsResponse>;
+
+    /**
+     * Enables/Disables issuing of interestGroupAccessed events.
+     */
+    invoke_setInterestGroupTracking(params: Protocol.Storage.SetInterestGroupTrackingRequest):
+        Promise<Protocol.ProtocolResponseWithError>;
   }
   export interface StorageDispatcher {
     /**
@@ -3056,6 +3068,11 @@ declare namespace ProtocolProxyApi {
      * The origin's IndexedDB database list has been modified.
      */
     indexedDBListUpdated(params: Protocol.Storage.IndexedDBListUpdatedEvent): void;
+
+    /**
+     * One of the interest groups was accessed by the associated page.
+     */
+    interestGroupAccessed(params: Protocol.Storage.InterestGroupAccessedEvent): void;
   }
 
   export interface SystemInfoApi {

package/front_end/generated/protocol.d.ts

@@ -10031,6 +10031,7 @@ declare namespace Protocol {
     export const enum PermissionsPolicyBlockReason {
       Header = 'Header',
       IframeAttribute = 'IframeAttribute',
+      InFencedFrameTree = 'InFencedFrameTree',
     }
 
     export interface PermissionsPolicyBlockLocator {
@@ -10480,6 +10481,20 @@ declare namespace Protocol {
       pictograph?: string;
     }
 
+    /**
+     * Font families collection for a script.
+     */
+    export interface ScriptFontFamilies {
+      /**
+       * Name of the script which these font families are defined for.
+       */
+      script: string;
+      /**
+       * Generic font families collection for the script.
+       */
+      fontFamilies: FontFamilies;
+    }
+
     /**
      * Default font sizes.
      */
@@ -11286,6 +11301,10 @@ declare namespace Protocol {
        * Specifies font families to set. If a font family is not specified, it won't be changed.
        */
       fontFamilies: FontFamilies;
+      /**
+       * Specifies font families to set for individual scripts.
+       */
+      forScripts?: ScriptFontFamilies[];
     }
 
     export interface SetFontSizesRequest {
@@ -12416,6 +12435,7 @@ declare namespace Protocol {
       Websql = 'websql',
       Service_workers = 'service_workers',
       Cache_storage = 'cache_storage',
+      Interest_groups = 'interest_groups',
       All = 'all',
       Other = 'other',
     }
@@ -12443,6 +12463,43 @@ declare namespace Protocol {
       count: number;
     }
 
+    /**
+     * Enum of interest group access types.
+     */
+    export const enum InterestGroupAccessType {
+      Join = 'join',
+      Leave = 'leave',
+      Update = 'update',
+      Bid = 'bid',
+      Win = 'win',
+    }
+
+    /**
+     * Ad advertising element inside an interest group.
+     */
+    export interface InterestGroupAd {
+      renderUrl: string;
+      metadata?: string;
+    }
+
+    /**
+     * The full details of an interest group.
+     */
+    export interface InterestGroupDetails {
+      ownerOrigin: string;
+      name: string;
+      expirationTime: number;
+      joiningOrigin: string;
+      biddingUrl?: string;
+      biddingWasmHelperUrl?: string;
+      updateUrl?: string;
+      trustedBiddingSignalsUrl?: string;
+      trustedBiddingSignalsKeys: string[];
+      userBiddingSignals?: string;
+      ads: InterestGroupAd[];
+      adComponents: InterestGroupAd[];
+    }
+
     export interface ClearDataForOriginRequest {
       /**
        * Security origin.
@@ -12572,6 +12629,19 @@ declare namespace Protocol {
       didDeleteTokens: boolean;
     }
 
+    export interface GetInterestGroupDetailsRequest {
+      ownerOrigin: string;
+      name: string;
+    }
+
+    export interface GetInterestGroupDetailsResponse extends ProtocolResponseWithError {
+      details: InterestGroupDetails;
+    }
+
+    export interface SetInterestGroupTrackingRequest {
+      enable: boolean;
+    }
+
     /**
      * A cache's contents have been modified.
      */
@@ -12623,6 +12693,15 @@ declare namespace Protocol {
        */
       origin: string;
     }
+
+    /**
+     * One of the interest groups was accessed by the associated page.
+     */
+    export interface InterestGroupAccessedEvent {
+      type: InterestGroupAccessType;
+      ownerOrigin: string;
+      name: string;
+    }
   }
 
   /**

package/front_end/panels/application/IndexedDBModel.ts

@@ -410,6 +410,9 @@ export class IndexedDBModel extends SDK.SDKModel.SDKModel<EventTypes> implements
 
   cacheStorageContentUpdated(_event: Protocol.Storage.CacheStorageContentUpdatedEvent): void {
   }
+
+  interestGroupAccessed(_event: Protocol.Storage.InterestGroupAccessedEvent): void {
+  }
 }
 
 SDK.SDKModel.SDKModel.register(IndexedDBModel, {capabilities: SDK.Target.Capability.Storage, autostart: false});

package/front_end/panels/console/ConsoleView.ts

@@ -107,6 +107,14 @@ const UIStrings = {
   * open/show the sidebar.
   */
   hideConsoleSidebar: 'Hide console sidebar',
+  /**
+   * @description Screen reader announcement when the sidebar is shown in the Console panel.
+   */
+  consoleSidebarShown: 'Console sidebar shown',
+  /**
+   * @description Screen reader announcement when the sidebar is hidden in the Console panel.
+   */
+  consoleSidebarHidden: 'Console sidebar hidden',
   /**
   *@description Tooltip text that appears on the setting to preserve log when hovering over the item
   */
@@ -382,7 +390,8 @@ export class ConsoleView extends UI.Widget.VBox implements UI.SearchableView.Sea
     toolbar.makeWrappable(true);
     const rightToolbar = new UI.Toolbar.Toolbar('', this.consoleToolbarContainer);
     toolbar.appendToolbarItem(this.splitWidget.createShowHideSidebarButton(
-        i18nString(UIStrings.showConsoleSidebar), i18nString(UIStrings.hideConsoleSidebar)));
+        i18nString(UIStrings.showConsoleSidebar), i18nString(UIStrings.hideConsoleSidebar),
+        i18nString(UIStrings.consoleSidebarShown), i18nString(UIStrings.consoleSidebarHidden)));
     toolbar.appendToolbarItem(UI.Toolbar.Toolbar.createActionButton(
         (UI.ActionRegistry.ActionRegistry.instance().action('console.clear') as UI.ActionRegistration.Action)));
     toolbar.appendSeparator();

package/front_end/panels/elements/ElementsPanel.ts

@@ -88,6 +88,14 @@ const UIStrings = {
   * close/hide the sidebar.
   */
   hideComputedStylesSidebar: 'Hide Computed Styles sidebar',
+  /**
+   * @description Screen reader announcement when the computed styles sidebar is shown in the Elements panel.
+   */
+  computedStylesShown: 'Computed Styles sidebar shown',
+  /**
+   * @description Screen reader announcement when the computed styles sidebar is hidden in the Elements panel.
+   */
+  computedStylesHidden: 'Computed Styles sidebar hidden',
   /**
   * @description Title of a pane in the Elements panel that shows computed styles for the selected
   * HTML element. Computed styles are the final, actual styles of the element, including all
@@ -962,7 +970,8 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
     });
     this.stylesWidget.addEventListener(StylesSidebarPaneEvents.InitialUpdateCompleted, () => {
       this.stylesWidget.appendToolbarItem(stylesSplitWidget.createShowHideSidebarButton(
-          i18nString(UIStrings.showComputedStylesSidebar), i18nString(UIStrings.hideComputedStylesSidebar)));
+          i18nString(UIStrings.showComputedStylesSidebar), i18nString(UIStrings.hideComputedStylesSidebar),
+          i18nString(UIStrings.computedStylesShown), i18nString(UIStrings.computedStylesHidden)));
     });
 
     const showMetricsWidgetInComputedPane = (): void => {

package/front_end/panels/sources/SourcesPanel.ts

@@ -69,6 +69,22 @@ const UIStrings = {
   * the sidebar containing the navigator tool.
   */
   hideNavigator: 'Hide navigator',
+  /**
+   * @description Screen reader announcement when the navigator sidebar is shown in the Sources panel.
+   */
+  navigatorShown: 'Navigator sidebar shown',
+  /**
+   * @description Screen reader announcement when the navigator sidebar is hidden in the Sources panel.
+   */
+  navigatorHidden: 'Navigator sidebar hidden',
+  /**
+   * @description Screen reader announcement when the navigator sidebar is shown in the Sources panel.
+   */
+  debuggerShown: 'Debugger sidebar shown',
+  /**
+   * @description Screen reader announcement when the navigator sidebar is hidden in the Sources panel.
+   */
+  debuggerHidden: 'Debugger sidebar hidden',
   /**
   * @description Tooltip for the the debugger toggle in the Sources panel. Command to open/show the
   * sidebar containing the debugger tool.
@@ -252,9 +268,11 @@ export class SourcesPanel extends UI.Panel.Panel implements UI.ContextMenu.Provi
     this.sourcesViewInternal.addEventListener(Events.EditorSelected, this.editorSelected.bind(this));
 
     this.toggleNavigatorSidebarButton = this.editorView.createShowHideSidebarButton(
-        i18nString(UIStrings.showNavigator), i18nString(UIStrings.hideNavigator));
+        i18nString(UIStrings.showNavigator), i18nString(UIStrings.hideNavigator), i18nString(UIStrings.navigatorShown),
+        i18nString(UIStrings.navigatorHidden));
     this.toggleDebuggerSidebarButton = this.splitWidget.createShowHideSidebarButton(
-        i18nString(UIStrings.showDebugger), i18nString(UIStrings.hideDebugger));
+        i18nString(UIStrings.showDebugger), i18nString(UIStrings.hideDebugger), i18nString(UIStrings.debuggerShown),
+        i18nString(UIStrings.debuggerHidden));
     this.editorView.setMainWidget(this.sourcesViewInternal);
 
     this.threadsSidebarPane = null;

package/front_end/panels/timeline/TimelineTreeView.ts

@@ -137,6 +137,14 @@ const UIStrings = {
   * Performance panel. Command to close/hide the sidebar.
   */
   hideHeaviestStack: 'Hide Heaviest stack',
+  /**
+   * @description Screen reader announcement when the heaviest stack sidebar is shown in the Performance panel.
+   */
+  heaviestStackShown: 'Heaviest stack sidebar shown',
+  /**
+   * @description Screen reader announcement when the heaviest stack sidebar is hidden in the Performance panel.
+   */
+  heaviestStackHidden: 'Heaviest stack sidebar hidden',
   /**
   *@description Data grid name for Timeline Stack data grids
   */
@@ -832,7 +840,8 @@ export class AggregatedTimelineTreeView extends TimelineTreeView {
         new UI.Toolbar.ToolbarSettingComboBox(options, this.groupBySetting, i18nString(UIStrings.groupBy)));
     toolbar.appendSpacer();
     toolbar.appendToolbarItem(this.splitWidget.createShowHideSidebarButton(
-        i18nString(UIStrings.showHeaviestStack), i18nString(UIStrings.hideHeaviestStack)));
+        i18nString(UIStrings.showHeaviestStack), i18nString(UIStrings.hideHeaviestStack),
+        i18nString(UIStrings.heaviestStackShown), i18nString(UIStrings.heaviestStackHidden)));
   }
 
   private buildHeaviestStack(treeNode: TimelineModel.TimelineProfileTree.Node):

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

@@ -128,6 +128,11 @@ export class Button extends HTMLElement {
     void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#boundRender);
   }
 
+  set title(title: string) {
+    this.#props.title = title;
+    void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#boundRender);
+  }
+
   set disabled(disabled: boolean) {
     this.#setDisabledProperty(disabled);
     void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#boundRender);
@@ -212,7 +217,7 @@ export class Button extends HTMLElement {
     // clang-format off
     LitHtml.render(
       LitHtml.html`
-        <button .title=${this.#props.title} .disabled=${this.#props.disabled} class=${LitHtml.Directives.classMap(classes)}>
+        <button title=${LitHtml.Directives.ifDefined(this.#props.title)} .disabled=${this.#props.disabled} class=${LitHtml.Directives.classMap(classes)}>
           ${this.#props.iconUrl ? LitHtml.html`<${IconButton.Icon.Icon.litTagName}
             .data=${{
               iconPath: this.#props.iconUrl,

package/front_end/ui/components/docs/button/basic.ts

@@ -29,6 +29,7 @@ primaryButton.data = {
   variant: Buttons.Button.Variant.PRIMARY,
 };
 primaryButton.innerText = 'Click me';
+primaryButton.title = 'Custom title';
 primaryButton.onclick = () => alert('clicked');
 appendButton(primaryButton);
 

package/front_end/ui/legacy/SplitWidget.ts

@@ -31,6 +31,7 @@
 import * as Common from '../../core/common/common.js';
 import * as Platform from '../../core/platform/platform.js';
 
+import * as ARIAUtils from './ARIAUtils.js';
 import {Constraints} from './Geometry.js';
 import type {ResizeUpdatePositionEvent} from './ResizerWidget.js';
 import {Events as ResizerWidgetEvents, SimpleResizerWidget} from './ResizerWidget.js';
@@ -815,8 +816,9 @@ export class SplitWidget extends Common.ObjectWrapper.eventMixin<EventTypes, typ
     this.forceUpdateLayout();
   }
 
-  createShowHideSidebarButton(showTitle: Common.UIString.LocalizedString, hideTitle: Common.UIString.LocalizedString):
-      ToolbarButton {
+  createShowHideSidebarButton(
+      showTitle: Common.UIString.LocalizedString, hideTitle: Common.UIString.LocalizedString,
+      shownString: Common.UIString.LocalizedString, hiddenString: Common.UIString.LocalizedString): ToolbarButton {
     this.showSidebarButtonTitle = showTitle;
     this.hideSidebarButtonTitle = hideTitle;
     this.showHideSidebarButton = new ToolbarButton('', '');
@@ -826,8 +828,10 @@ export class SplitWidget extends Common.ObjectWrapper.eventMixin<EventTypes, typ
     function buttonClicked(this: SplitWidget): void {
       if (this.showModeInternal !== ShowMode.Both) {
         this.showBoth(true);
+        ARIAUtils.alert(shownString);
       } else {
         this.hideSidebar(true);
+        ARIAUtils.alert(hiddenString);
       }
     }
 

package/package.json

@@ -53,5 +53,5 @@
     "unittest": "scripts/test/run_unittests.py --no-text-coverage",
     "watch": "third_party/node/node.py --output scripts/watch_build.js"
   },
-  "version": "1.0.960864"
+  "version": "1.0.961109"
 }