chrome-devtools-frontend 1.0.1577886 → 1.0.1578729

package/front_end/panels/application/DeviceBoundSessionsView.ts

@@ -582,25 +582,27 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: ViewOutput, target: HTML
         <devtools-report>
           <devtools-report-section-header role="heading" aria-level="2">${
         i18nString(UIStrings.sessionConfig)}</devtools-report-section-header>
-          <devtools-report-key>${i18nString(UIStrings.keySite)}</devtools-report-key>
-          <devtools-report-value>${key.site}</devtools-report-value>
-          <devtools-report-key>${i18nString(UIStrings.keyId)}</devtools-report-key>
-          <devtools-report-value>${key.id}</devtools-report-value>
-          <devtools-report-key>${i18nString(UIStrings.refreshUrl)}</devtools-report-key>
-          <devtools-report-value>${sessionAndEvents.session.refreshUrl}</devtools-report-value>
-          <devtools-report-key>${i18nString(UIStrings.expiryDate)}</devtools-report-key>
-          <devtools-report-value>${
-        new Date(sessionAndEvents.session.expiryDate * 1000).toLocaleString()}</devtools-report-value>
-          <devtools-report-key>${i18nString(UIStrings.cachedChallenge)}</devtools-report-key>
-          <devtools-report-value>${sessionAndEvents.session.cachedChallenge || ''}</devtools-report-value>
-          <devtools-report-key>${i18nString(UIStrings.allowedRefreshInitiators)}</devtools-report-key>
-          <devtools-report-value>${sessionAndEvents.session.allowedRefreshInitiators.join(', ')}</devtools-report-value>
+          ${renderKeyValue(i18nString(UIStrings.keySite), key.site, 'dbsc-site')}
+          ${renderKeyValue(i18nString(UIStrings.keyId), key.id, 'dbsc-id')}
+          ${renderKeyValue(i18nString(UIStrings.refreshUrl), sessionAndEvents.session.refreshUrl, 'dbsc-refresh-url')}
+          ${
+        renderKeyValue(
+            i18nString(UIStrings.expiryDate), new Date(sessionAndEvents.session.expiryDate * 1000).toLocaleString(),
+            'dbsc-expiry-date')}
+          ${
+        renderKeyValue(
+            i18nString(UIStrings.cachedChallenge), sessionAndEvents.session.cachedChallenge || '',
+            'dbsc-cached-challenge')}
+          ${
+        renderKeyValue(
+            i18nString(UIStrings.allowedRefreshInitiators),
+            sessionAndEvents.session.allowedRefreshInitiators.join(', '), 'dbsc-allowed-refresh-initiators')}
           <devtools-report-section-header role="heading" aria-level="2">${
         i18nString(UIStrings.scope)}</devtools-report-section-header>
-          <devtools-report-key>${i18nString(UIStrings.origin)}</devtools-report-key>
-          <devtools-report-value>${inclusionRules.origin}</devtools-report-value>
-          <devtools-report-key>${i18nString(UIStrings.includeSite)}</devtools-report-key>
-          <devtools-report-value>${boolToString(inclusionRules.includeSite)}</devtools-report-value>
+          ${renderKeyValue(i18nString(UIStrings.origin), inclusionRules.origin, 'dbsc-origin')}
+          ${
+        renderKeyValue(
+            i18nString(UIStrings.includeSite), boolToString(inclusionRules.includeSite), 'dbsc-include-site')}
         </devtools-report>
         ${
         inclusionRules.urlRules.length > 0 ? html`
@@ -708,62 +710,78 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: ViewOutput, target: HTML
   const creationEventDetails =
       selectedEvent?.creationEventDetails &&
       html`
-          <devtools-report-key>${i18nString(UIStrings.fetchResult)}</devtools-report-key>
-          <devtools-report-value>${
-          fetchResultToString(selectedEvent.creationEventDetails.fetchResult)}</devtools-report-value>
-            ${selectedEvent.creationEventDetails.newSession && html`
-              <devtools-report-key>${i18nString(UIStrings.updatedSessionConfig)}</devtools-report-key>
-              <devtools-report-value>${i18nString(UIStrings.yes)}</devtools-report-value>
+            ${
+          renderKeyValue(
+              i18nString(UIStrings.fetchResult), fetchResultToString(selectedEvent.creationEventDetails.fetchResult),
+              'dbsc-creation-fetch-result')}
+            ${
+          selectedEvent.creationEventDetails.newSession &&
+          html`
+             ${
+              renderKeyValue(
+                  i18nString(UIStrings.updatedSessionConfig), i18nString(UIStrings.yes),
+                  'dbsc-creation-updated-session-config')}
             `}
           `;
   const refreshEventDetails =
       selectedEvent?.refreshEventDetails &&
       html`
-          <devtools-report-key>${i18nString(UIStrings.refreshResult)}</devtools-report-key>
-          <devtools-report-value>${
-          refreshResultToString(selectedEvent.refreshEventDetails.refreshResult)}</devtools-report-value>
-          <devtools-report-key>${i18nString(UIStrings.causedAnyRequestDeferrals)}</devtools-report-key>
-          <devtools-report-value>${
-          boolToString(!selectedEvent.refreshEventDetails.wasFullyProactiveRefresh)}</devtools-report-value>
+          ${
+          renderKeyValue(
+              i18nString(UIStrings.refreshResult),
+              refreshResultToString(selectedEvent.refreshEventDetails.refreshResult), 'dbsc-refresh-result')}
+          ${
+          renderKeyValue(
+              i18nString(UIStrings.causedAnyRequestDeferrals),
+              boolToString(!selectedEvent.refreshEventDetails.wasFullyProactiveRefresh),
+              'dbsc-refresh-was-fully-proactive-refresh')}
             ${
           selectedEvent.refreshEventDetails.fetchResult &&
           html`
-              <devtools-report-key>${i18nString(UIStrings.fetchResult)}</devtools-report-key>
-              <devtools-report-value>${
-              fetchResultToString(selectedEvent.refreshEventDetails.fetchResult)}</devtools-report-value>
+              ${
+              renderKeyValue(
+                  i18nString(UIStrings.fetchResult), fetchResultToString(selectedEvent.refreshEventDetails.fetchResult),
+                  'dbsc-refresh-fetch-result')}
             `}
-            ${selectedEvent.refreshEventDetails.newSession && html`
-              <devtools-report-key>${i18nString(UIStrings.updatedSessionConfig)}</devtools-report-key>
-              <devtools-report-value>${i18nString(UIStrings.yes)}</devtools-report-value>
+            ${
+          selectedEvent.refreshEventDetails.newSession &&
+          html`
+              ${
+              renderKeyValue(
+                  i18nString(UIStrings.updatedSessionConfig), i18nString(UIStrings.yes),
+                  'dbsc-refresh-updated-session-config')}
             `}
           `;
   const challengeEventDetails =
       selectedEvent?.challengeEventDetails &&
       html`
-          <devtools-report-key>${i18nString(UIStrings.challengeResult)}</devtools-report-key>
-          <devtools-report-value>${
-          challengeResultToString(selectedEvent.challengeEventDetails.challengeResult)}</devtools-report-value>
-          <devtools-report-key>${i18nString(UIStrings.challenge)}</devtools-report-key>
-          <devtools-report-value>${selectedEvent.challengeEventDetails.challenge}</devtools-report-value>
+          ${
+          renderKeyValue(
+              i18nString(UIStrings.challengeResult),
+              challengeResultToString(selectedEvent.challengeEventDetails.challengeResult), 'dbsc-challenge-result')}
+          ${
+          renderKeyValue(
+              i18nString(UIStrings.challenge), selectedEvent.challengeEventDetails.challenge, 'dbsc-challenge')}
           `;
   const terminationEventDetails =
       selectedEvent?.terminationEventDetails &&
       html`
-          <devtools-report-key>${i18nString(UIStrings.deletionReason)}</devtools-report-key>
-          <devtools-report-value>${
-          deletionReasonToString(selectedEvent.terminationEventDetails.deletionReason)}</devtools-report-value>
+          ${
+          renderKeyValue(
+              i18nString(UIStrings.deletionReason),
+              deletionReasonToString(selectedEvent.terminationEventDetails.deletionReason), 'dbsc-termination-reason')}
           `;
   const eventDetailsContentHtml = selectedEvent ?
       html`
         <devtools-report>
-          <devtools-report-key>${i18nString(UIStrings.keySite)}</devtools-report-key>
-          <devtools-report-value>${selectedEvent.site}</devtools-report-value>
-          <devtools-report-key>${i18nString(UIStrings.sessionId)}</devtools-report-key>
-          <devtools-report-value>${selectedEvent.sessionId}</devtools-report-value>
-          <devtools-report-key>${i18nString(UIStrings.type)}</devtools-report-key>
-          <devtools-report-value>${getEventTypeString(selectedEvent)}</devtools-report-value>
-          <devtools-report-key>${i18nString(UIStrings.eventResult)}</devtools-report-key>
-          <devtools-report-value>${succeededToString(selectedEvent.succeeded)}</devtools-report-value>
+          ${renderKeyValue(i18nString(UIStrings.keySite), selectedEvent.site, 'dbsc-event-site')}
+          ${
+          selectedEvent.sessionId &&
+          renderKeyValue(i18nString(UIStrings.sessionId), selectedEvent.sessionId, 'dbsc-event-session-id')}
+          ${renderKeyValue(i18nString(UIStrings.type), getEventTypeString(selectedEvent), 'dbsc-event-type')}
+          ${
+          renderKeyValue(
+              i18nString(UIStrings.eventResult), succeededToString(selectedEvent.succeeded), 'dbsc-event-result')}
           ${creationEventDetails}
           ${refreshEventDetails}
           ${challengeEventDetails}
@@ -870,6 +888,13 @@ export class DeviceBoundSessionsView extends UI.Widget.VBox {
   }
 }
 
+function renderKeyValue(key: string, value: string, id: string): TemplateResult {
+  return html`
+    <devtools-report-key id=${id}>${key}</devtools-report-key>
+    <devtools-report-value role="text" aria-describedby=${id}>${value}</devtools-report-value>
+  `;
+}
+
 function ruleTypeToString(ruleType: Protocol.Network.DeviceBoundSessionUrlRuleRuleType): string {
   switch (ruleType) {
     case Protocol.Network.DeviceBoundSessionUrlRuleRuleType.Exclude:

package/front_end/panels/application/preloading/components/RuleSetDetailsView.css

@@ -4,11 +4,6 @@
  * found in the LICENSE file.
  */
 
-:host {
-  display: block;
-  height: 100%;
-}
-
 .placeholder {
   display: flex;
   height: 100%;

package/front_end/panels/console/ConsoleViewMessage.ts

@@ -38,7 +38,6 @@ import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
-import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Protocol from '../../generated/protocol.js';
 import * as AiAssistanceModel from '../../models/ai_assistance/ai_assistance.js';
@@ -47,7 +46,6 @@ import type * as IssuesManager from '../../models/issues_manager/issues_manager.
 import * as Logs from '../../models/logs/logs.js';
 import * as TextUtils from '../../models/text_utils/text_utils.js';
 import * as Workspace from '../../models/workspace/workspace.js';
-import * as Buttons from '../../ui/components/buttons/buttons.js';
 import * as CodeHighlighter from '../../ui/components/code_highlighter/code_highlighter.js';
 import * as Highlighting from '../../ui/components/highlighting/highlighting.js';
 import * as IssueCounter from '../../ui/components/issue_counter/issue_counter.js';
@@ -61,7 +59,6 @@ import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import {render} from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
-import * as Security from '../security/security.js';
 
 import {format, updateStyle} from './ConsoleFormat.js';
 import {ConsoleInsightTeaser} from './ConsoleInsightTeaser.js';
@@ -220,10 +217,6 @@ const UIStrings = {
    * @description Message to offer insights for a console message
    */
   explainThisMessageWithAI: 'Understand this message. Powered by AI',
-  /**
-   * @description Tooltip shown when user hovers over the cookie icon to explain that the button will bring the user to the cookie report
-   */
-  SeeIssueInCookieReport: 'Click to open privacy and security panel and show third-party cookie report',
   /**
    * @description Element text content in Object Properties Section
    */
@@ -574,23 +567,6 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
     return elements;
   }
 
-  #appendCookieReportButtonToElem(elem: HTMLElement): void {
-    const button = new Buttons.Button.Button();
-    button.data = {
-      size: Buttons.Button.Size.SMALL,
-      variant: Buttons.Button.Variant.ICON,
-      iconName: 'cookie',
-      jslogContext: 'privacy',
-      title: i18nString(UIStrings.SeeIssueInCookieReport)
-    };
-
-    button.addEventListener('click', () => {
-      void Common.Revealer.reveal(new Security.CookieReportView.CookieReportView());
-    });
-
-    elem.appendChild(button);
-  }
-
   #getLinkifierMetric(): Host.UserMetrics.Action|undefined {
     const request = Logs.NetworkLog.NetworkLog.requestForConsoleMessage(this.message);
     if (request?.resourceType().isStyleSheet()) {
@@ -631,14 +607,6 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
       return null;
     };
 
-    if (this.message.isCookieReportIssue && Root.Runtime.hostConfig.devToolsPrivacyUI?.enabled) {
-      const anchorWrapperElement = document.createElement('span');
-      anchorWrapperElement.classList.add('console-message-anchor', 'cookie-report-anchor');
-      this.#appendCookieReportButtonToElem(anchorWrapperElement);
-      UI.UIUtils.createTextChild(anchorWrapperElement, ' ');
-      return anchorWrapperElement;
-    }
-
     const anchorElement = linkify(this.message);
     // Append a space to prevent the anchor text from being glued to the console message when the user selects and copies the console messages.
     if (anchorElement) {

package/front_end/panels/console/consoleView.css

@@ -486,11 +486,6 @@
   margin-left: 4px;
 }
 
-.cookie-report-anchor {
-  margin-top: -3px;
-  margin-bottom: -5px;
-}
-
 .console-message-nowrap-below,
 .console-message-nowrap-below div,
 .console-message-nowrap-below span {

package/front_end/panels/media/PlayerListView.ts

@@ -5,6 +5,7 @@
 import '../../ui/kit/kit.js';
 
 import * as i18n from '../../core/i18n/i18n.js';
+import * as Platform from '../../core/platform/platform.js';
 import type * as Protocol from '../../generated/protocol.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import {Directives, html, render} from '../../ui/lit/lit.js';
@@ -61,7 +62,8 @@ const DEFAULT_VIEW: View = (input, _output, target) => {
   render(
     html`
       <style>${playerListViewStyles}</style>
-      <div class="player-entry-header">${i18nString(UIStrings.players)}</div>
+      <div class="player-entry-header" id="players-header">${i18nString(UIStrings.players)}</div>
+      <div role="listbox" aria-labelledby="players-header">
       ${input.players.map(player => {
         const isSelected = player.playerID === input.selectedPlayerID;
         return html`
@@ -71,8 +73,17 @@ const DEFAULT_VIEW: View = (input, _output, target) => {
             selected: isSelected,
             'force-white-icons': isSelected,
           })}
+               tabindex="0"
                @click=${() => input.onPlayerClick(player.playerID)}
+               @keydown=${(e: KeyboardEvent) => {
+                 if (Platform.KeyboardUtilities.isEnterOrSpaceKey(e)) {
+                   e.preventDefault();
+                   input.onPlayerClick(player.playerID);
+                 }
+               }}
                @contextmenu=${(e: Event) => input.onPlayerContextMenu(player.playerID, e)}
+               role="option"
+               aria-selected=${isSelected}
                jslog=${VisualLogging.item('player').track({click: true})}>
             <div class="player-entry-status-icon vbox">
               <div class="player-entry-status-icon-centering">
@@ -84,6 +95,7 @@ const DEFAULT_VIEW: View = (input, _output, target) => {
           </div>
         `;
       })}
+      </div>
     `,
     target
   );

package/front_end/panels/media/playerListView.css

@@ -34,6 +34,11 @@ li.storage-group-list-item::before {
     background: var(--sys-color-state-hover-on-subtle);
   }
 
+  &:focus-visible {
+    outline: var(--sys-size-2) solid var(--sys-color-state-focus-ring);
+    outline-offset: calc(var(--sys-size-2) * -1);
+  }
+
   &.selected {
     background: var(--sys-color-tonal-container);
     color: var(--sys-color-on-tonal-container);

package/front_end/panels/network/NetworkItemView.ts

@@ -345,7 +345,8 @@ export class NetworkItemView extends UI.TabbedPane.TabbedPane {
       return;
     }
     if (this.#request.queryParameters || await this.#request.requestFormData()) {
-      this.#payloadView = new RequestPayloadView(this.#request);
+      this.#payloadView = new RequestPayloadView();
+      this.#payloadView.request = this.#request;
       this.appendTab(
           NetworkForward.UIRequestLocation.UIRequestTabs.PAYLOAD, i18nString(UIStrings.payload), this.#payloadView,
           i18nString(UIStrings.payload), /* userGesture=*/ void 0,

package/front_end/panels/network/NetworkLogViewColumns.ts

@@ -6,6 +6,7 @@
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import type * as NetworkTimeCalculator from '../../models/network_time_calculator/network_time_calculator.js';
+import * as StackTrace from '../../models/stack_trace/stack_trace.js';
 import {Icon} from '../../ui/kit/kit.js';
 import * as DataGrid from '../../ui/legacy/components/data_grid/data_grid.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
@@ -880,20 +881,30 @@ export class NetworkLogViewColumns {
     if (!request) {
       return null;
     }
+    let descriptor: Common.EventTarget.EventDescriptor|undefined = undefined;
     return {
       box: anchor.boxInWindow(),
       show: async (popover: UI.GlassPane.GlassPane) => {
-        this.popupLinkifier.addEventListener(Components.Linkifier.Events.LIVE_LOCATION_UPDATED, () => {
-          popover.setSizeBehavior(UI.GlassPane.SizeBehavior.MEASURE_CONTENT);
-        });
-        const content = RequestInitiatorView.createStackTracePreview((request), this.popupLinkifier, false);
+        const content = await RequestInitiatorView.createStackTracePreview((request), this.popupLinkifier, false);
         if (!content) {
           return false;
         }
-        content.show(popover.contentElement);
+        descriptor = content.stackTrace?.addEventListener(StackTrace.StackTrace.Events.UPDATED, async () => {
+          await content.preview.updateComplete;
+          popover.setSizeBehavior(UI.GlassPane.SizeBehavior.MEASURE_CONTENT);
+        });
+        content.preview.show(popover.contentElement);
+        await content.preview.updateComplete.then(() => {
+          popover.setSizeBehavior(UI.GlassPane.SizeBehavior.MEASURE_CONTENT);
+        });
         return true;
       },
-      hide: this.popupLinkifier.reset.bind(this.popupLinkifier),
+      hide: () => {
+        this.popupLinkifier.reset();
+        if (descriptor) {
+          Common.EventTarget.removeEventListeners([descriptor]);
+        }
+      },
     };
   }
 

package/front_end/panels/network/RequestInitiatorView.ts

@@ -5,7 +5,9 @@
 
 import * as i18n from '../../core/i18n/i18n.js';
 import * as SDK from '../../core/sdk/sdk.js';
+import * as Bindings from '../../models/bindings/bindings.js';
 import * as Logs from '../../models/logs/logs.js';
+import type * as StackTrace from '../../models/stack_trace/stack_trace.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as Lit from '../../ui/lit/lit.js';
@@ -172,17 +174,31 @@ export class RequestInitiatorView extends UI.Widget.VBox {
     this.#view = view;
   }
 
-  static createStackTracePreview(
+  static async createStackTracePreview(
       request: SDK.NetworkRequest.NetworkRequest, linkifier: Components.Linkifier.Linkifier,
-      focusableLink?: boolean): Components.JSPresentationUtils.StackTracePreviewContent|null {
+      focusableLink?: boolean): Promise<{
+    preview: Components.JSPresentationUtils.StackTracePreviewContent,
+    stackTrace: StackTrace.StackTrace.StackTrace|null,
+  }|null> {
     const initiator = request.initiator();
     if (!initiator?.stack) {
       return null;
     }
     const networkManager = SDK.NetworkManager.NetworkManager.forRequest(request);
     const target = networkManager ? networkManager.target() : undefined;
-    return new Components.JSPresentationUtils.StackTracePreviewContent(
-        undefined, target, linkifier, {runtimeStackTrace: initiator.stack, tabStops: focusableLink});
+    if (target) {
+      const stackTrace = await Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance()
+                             .createStackTraceFromProtocolRuntime(initiator.stack, target);
+      const preview = new Components.JSPresentationUtils.StackTracePreviewContent(
+          undefined, target, linkifier, {tabStops: focusableLink});
+      preview.stackTrace = stackTrace;
+      return {preview, stackTrace};
+    }
+    return {
+      preview: new Components.JSPresentationUtils.StackTracePreviewContent(
+          undefined, target, linkifier, {runtimeStackTrace: initiator.stack, tabStops: focusableLink}),
+      stackTrace: null
+    };
   }
 
   override performUpdate(): void {