chrome-devtools-frontend 1.0.1031822 → 1.0.1032471

package/front_end/panels/network/components/RequestHeadersView.ts

@@ -12,6 +12,7 @@ import * as Protocol from '../../../generated/protocol.js';
 import * as IssuesManager from '../../../models/issues_manager/issues_manager.js';
 import * as Persistence from '../../../models/persistence/persistence.js';
 import * as Workspace from '../../../models/workspace/workspace.js';
+import * as NetworkForward from '../../../panels/network/forward/forward.js';
 import * as ClientVariations from '../../../third_party/chromium/client-variations/client-variations.js';
 import * as Buttons from '../../../ui/components/buttons/buttons.js';
 import * as ComponentHelpers from '../../../ui/components/helpers/helpers.js';
@@ -199,10 +200,18 @@ export class RequestHeadersView extends UI.Widget.VBox {
       request: this.#request,
     };
   }
+
+  revealHeader(section: NetworkForward.UIRequestLocation.UIHeaderSection, header?: string): void {
+    this.#headersView.data = {
+      request: this.#request,
+      toReveal: {section, header: header},
+    };
+  }
 }
 
 export interface RequestHeadersComponentData {
   request: SDK.NetworkRequest.NetworkRequest;
+  toReveal?: {section: NetworkForward.UIRequestLocation.UIHeaderSection, header?: string};
 }
 
 export class RequestHeadersComponent extends HTMLElement {
@@ -213,10 +222,12 @@ export class RequestHeadersComponent extends HTMLElement {
   #showRequestHeadersText = false;
   #showResponseHeadersTextFull = false;
   #showRequestHeadersTextFull = false;
+  #toReveal?: {section: NetworkForward.UIRequestLocation.UIHeaderSection, header?: string} = undefined;
   readonly #workspace = Workspace.Workspace.WorkspaceImpl.instance();
 
   set data(data: RequestHeadersComponentData) {
     this.#request = data.request;
+    this.#toReveal = data.toReveal;
     this.#render();
   }
 
@@ -326,12 +337,13 @@ export class RequestHeadersComponent extends HTMLElement {
           headerCount: this.#request.sortedResponseHeaders.length,
           checked: this.#request.responseHeadersText ? this.#showResponseHeadersText : undefined,
           additionalContent: this.#renderHeaderOverridesLink(),
+          forceOpen: this.#toReveal?.section === NetworkForward.UIRequestLocation.UIHeaderSection.Response,
         } as CategoryData}
         aria-label=${i18nString(UIStrings.responseHeaders)}
       >
         ${this.#showResponseHeadersText ?
             this.#renderRawHeaders(this.#request.responseHeadersText, true) : html`
-          ${mergedHeaders.map(header => this.#renderHeader(header))}
+          ${mergedHeaders.map(header => this.#renderHeader(header, NetworkForward.UIRequestLocation.UIHeaderSection.Response))}
         `}
       </${Category.litTagName}>
     `;
@@ -418,13 +430,14 @@ export class RequestHeadersComponent extends HTMLElement {
           title: i18nString(UIStrings.requestHeaders),
           headerCount: this.#request.requestHeaders().length,
           checked: requestHeadersText? this.#showRequestHeadersText : undefined,
+          forceOpen: this.#toReveal?.section === NetworkForward.UIRequestLocation.UIHeaderSection.Request,
         } as CategoryData}
         aria-label=${i18nString(UIStrings.requestHeaders)}
       >
         ${(this.#showRequestHeadersText && requestHeadersText) ?
             this.#renderRawHeaders(requestHeadersText, false) : html`
           ${this.#maybeRenderProvisionalHeadersWarning()}
-          ${headers.map(header => this.#renderHeader({...header, headerNotSet: false}))}
+          ${headers.map(header => this.#renderHeader({...header, headerNotSet: false}, NetworkForward.UIRequestLocation.UIHeaderSection.Request))}
         `}
       </${Category.litTagName}>
     `;
@@ -464,11 +477,14 @@ export class RequestHeadersComponent extends HTMLElement {
     // clang-format on
   }
 
-  #renderHeader(header: HeaderDescriptor): LitHtml.TemplateResult {
+  #renderHeader(header: HeaderDescriptor, section: NetworkForward.UIRequestLocation.UIHeaderSection):
+      LitHtml.TemplateResult {
+    const isHighlighted =
+        section === this.#toReveal?.section && header.name.toUpperCase() === this.#toReveal?.header?.toUpperCase();
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
     return html`
-      <div class="row">
+      <div class="row ${isHighlighted ? 'header-highlight' : ''}">
         <div class="header-name">
           ${header.headerNotSet ?
             html`<div class="header-badge header-badge-text">${i18n.i18n.lockedString('not-set')}</div>` :
@@ -637,87 +653,70 @@ export class RequestHeadersComponent extends HTMLElement {
       return LitHtml.nothing;
     }
 
-    let coloredCircleClassName = 'red-circle';
+    const statusClasses = [];
     if (this.#request.statusCode < 300 || this.#request.statusCode === 304) {
-      coloredCircleClassName = 'green-circle';
+      statusClasses.push('green-circle');
     } else if (this.#request.statusCode < 400) {
-      coloredCircleClassName = 'yellow-circle';
+      statusClasses.push('yellow-circle');
+    } else {
+      statusClasses.push('red-circle');
     }
 
     let statusText = this.#request.statusCode + ' ' + this.#request.statusText;
-    let statusTextHasComment = false;
     if (this.#request.cachedInMemory()) {
       statusText += ' ' + i18nString(UIStrings.fromMemoryCache);
-      statusTextHasComment = true;
+      statusClasses.push('status-with-comment');
     } else if (this.#request.fetchedViaServiceWorker) {
       statusText += ' ' + i18nString(UIStrings.fromServiceWorker);
-      statusTextHasComment = true;
+      statusClasses.push('status-with-comment');
     } else if (this.#request.redirectSourceSignedExchangeInfoHasNoErrors()) {
       statusText += ' ' + i18nString(UIStrings.fromSignedexchange);
-      statusTextHasComment = true;
+      statusClasses.push('status-with-comment');
     } else if (this.#request.webBundleInnerRequestInfo()) {
       statusText += ' ' + i18nString(UIStrings.fromWebBundle);
-      statusTextHasComment = true;
+      statusClasses.push('status-with-comment');
     } else if (this.#request.fromPrefetchCache()) {
       statusText += ' ' + i18nString(UIStrings.fromPrefetchCache);
-      statusTextHasComment = true;
+      statusClasses.push('status-with-comment');
     } else if (this.#request.cached()) {
       statusText += ' ' + i18nString(UIStrings.fromDiskCache);
-      statusTextHasComment = true;
+      statusClasses.push('status-with-comment');
     }
 
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
     return html`
       <${Category.litTagName}
-        .data=${{name: 'general', title: i18nString(UIStrings.general)} as CategoryData}
+        .data=${{
+          name: 'general',
+          title: i18nString(UIStrings.general),
+          forceOpen: this.#toReveal?.section === NetworkForward.UIRequestLocation.UIHeaderSection.General,
+        } as CategoryData}
         aria-label=${i18nString(UIStrings.general)}
       >
-        <div class="row">
-          <div class="header-name">${i18nString(UIStrings.requestUrl)}:</div>
-          <div
-            class="header-value"
-            @copy=${():void => Host.userMetrics.actionTaken(Host.UserMetrics.Action.NetworkPanelCopyValue)}
-          >${this.#request.url()}</div>
-        </div>
-        ${this.#request.statusCode? html`
-          <div class="row">
-            <div class="header-name">${i18nString(UIStrings.requestMethod)}:</div>
-            <div
-              class="header-value"
-              @copy=${():void => Host.userMetrics.actionTaken(Host.UserMetrics.Action.NetworkPanelCopyValue)}
-            >${this.#request.requestMethod}</div>
-          </div>
-          <div class="row">
-            <div class="header-name">${i18nString(UIStrings.statusCode)}:</div>
-            <div
-              class="header-value ${coloredCircleClassName} ${statusTextHasComment ? 'status-with-comment' : ''}"
-              @copy=${():void => Host.userMetrics.actionTaken(Host.UserMetrics.Action.NetworkPanelCopyValue)}
-            >${statusText}</div>
-          </div>
-        ` : ''}
-        ${this.#request.remoteAddress()? html`
-          <div class="row">
-            <div class="header-name">${i18nString(UIStrings.remoteAddress)}:</div>
-            <div
-              class="header-value"
-              @copy=${():void => Host.userMetrics.actionTaken(Host.UserMetrics.Action.NetworkPanelCopyValue)}
-            >${this.#request.remoteAddress()}</div>
-          </div>
-        ` : ''}
-        ${this.#request.referrerPolicy()? html`
-          <div class="row">
-            <div class="header-name">${i18nString(UIStrings.referrerPolicy)}:</div>
-            <div
-              class="header-value"
-              @copy=${():void => Host.userMetrics.actionTaken(Host.UserMetrics.Action.NetworkPanelCopyValue)}
-            >${this.#request.referrerPolicy()}</div>
-          </div>
-        ` : ''}
+        ${this.#renderGeneralRow(i18nString(UIStrings.requestUrl), this.#request.url())}
+        ${this.#request.statusCode? this.#renderGeneralRow(i18nString(UIStrings.requestMethod), this.#request.requestMethod) : LitHtml.nothing}
+        ${this.#request.statusCode? this.#renderGeneralRow(i18nString(UIStrings.statusCode), statusText, statusClasses) : LitHtml.nothing}
+        ${this.#request.remoteAddress()? this.#renderGeneralRow(i18nString(UIStrings.remoteAddress), this.#request.remoteAddress()) : LitHtml.nothing}
+        ${this.#request.referrerPolicy()? this.#renderGeneralRow(i18nString(UIStrings.referrerPolicy), String(this.#request.referrerPolicy())) : LitHtml.nothing}
       </${Category.litTagName}>
     `;
     // clang-format on
   }
+
+  #renderGeneralRow(name: Common.UIString.LocalizedString, value: string, classNames?: string[]): LitHtml.LitTemplate {
+    const isHighlighted = this.#toReveal?.section === NetworkForward.UIRequestLocation.UIHeaderSection.General &&
+        name.toUpperCase() === this.#toReveal?.header?.toUpperCase();
+    return html`
+      <div class="row ${isHighlighted ? 'header-highlight' : ''}">
+        <div class="header-name">${name}:</div>
+        <div
+          class="header-value ${classNames?.join(' ')}"
+          @copy=${(): void => Host.userMetrics.actionTaken(Host.UserMetrics.Action.NetworkPanelCopyValue)}
+        >${value}</div>
+      </div>
+    `;
+  }
 }
 
 export class ToggleRawHeadersEvent extends Event {
@@ -734,6 +733,7 @@ export interface CategoryData {
   headerCount?: number;
   checked?: boolean;
   additionalContent?: LitHtml.LitTemplate;
+  forceOpen?: boolean;
 }
 
 export class Category extends HTMLElement {
@@ -744,6 +744,7 @@ export class Category extends HTMLElement {
   #headerCount?: number = undefined;
   #checked: boolean|undefined = undefined;
   #additionalContent: LitHtml.LitTemplate|undefined = undefined;
+  #forceOpen: boolean|undefined = undefined;
 
   connectedCallback(): void {
     this.#shadow.adoptedStyleSheets = [requestHeadersViewStyles, Input.checkboxStyles];
@@ -756,6 +757,7 @@ export class Category extends HTMLElement {
     this.#headerCount = data.headerCount;
     this.#checked = data.checked;
     this.#additionalContent = data.additionalContent;
+    this.#forceOpen = data.forceOpen;
     this.#render();
   }
 
@@ -764,7 +766,7 @@ export class Category extends HTMLElement {
   }
 
   #render(): void {
-    const isOpen = this.#expandedSetting ? this.#expandedSetting.get() : true;
+    const isOpen = (this.#expandedSetting ? this.#expandedSetting.get() : true) || this.#forceOpen;
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
     render(html`

package/front_end/panels/sources/BreakpointsSidebarPane.ts

@@ -0,0 +1,37 @@
+// Copyright (c) 2022 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import * as i18n from '../../core/i18n/i18n.js';
+import * as UI from '../../ui/legacy/legacy.js';
+
+const UIStrings = {
+  /**
+  *@description Text to indicate that there are no breakpoints
+  */
+  noBreakpoints: 'No breakpoints',
+};
+
+const str_ = i18n.i18n.registerUIStrings('panels/sources/BreakpointsSidebarPane.ts', UIStrings);
+const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+
+let breakpointsSidebarPaneInstance: BreakpointsSidebarPane;
+
+export class BreakpointsSidebarPane extends UI.ThrottledWidget.ThrottledWidget {
+  readonly #noBreakpointsView: HTMLElement;
+
+  static instance(): BreakpointsSidebarPane {
+    if (!breakpointsSidebarPaneInstance) {
+      breakpointsSidebarPaneInstance = new BreakpointsSidebarPane();
+    }
+    return breakpointsSidebarPaneInstance;
+  }
+
+  constructor() {
+    super(true);
+
+    this.#noBreakpointsView = this.contentElement.createChild('div', 'gray-info-message');
+    this.#noBreakpointsView.textContent = i18nString(UIStrings.noBreakpoints);
+    this.#noBreakpointsView.tabIndex = -1;
+  }
+}

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

@@ -512,6 +512,9 @@ UI.ViewManager.registerViewExtension({
   persistence: UI.ViewManager.ViewPersistence.PERMANENT,
   async loadView() {
     const Sources = await loadSourcesModule();
+    if (Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.BREAKPOINT_VIEW)) {
+      return Sources.BreakpointsSidebarPane.BreakpointsSidebarPane.instance();
+    }
     return Sources.JavaScriptBreakpointsSidebarPane.JavaScriptBreakpointsSidebarPane.instance();
   },
 });

package/front_end/panels/sources/sources.ts

@@ -4,6 +4,7 @@
 
 import * as AddSourceMapURLDialog from './AddSourceMapURLDialog.js';
 import * as BreakpointEditDialog from './BreakpointEditDialog.js';
+import * as BreakpointsSidebarPane from './BreakpointsSidebarPane.js';
 import * as CallStackSidebarPane from './CallStackSidebarPane.js';
 import * as CoveragePlugin from './CoveragePlugin.js';
 import * as DebuggerPausedMessage from './DebuggerPausedMessage.js';
@@ -36,6 +37,7 @@ import * as WatchExpressionsSidebarPane from './WatchExpressionsSidebarPane.js';
 export {
   AddSourceMapURLDialog,
   BreakpointEditDialog,
+  BreakpointsSidebarPane,
   CallStackSidebarPane,
   CoveragePlugin,
   DebuggerPausedMessage,

package/front_end/panels/timeline/TimelineFlameChartDataProvider.ts

@@ -58,6 +58,10 @@ const UIStrings = {
   */
   animation: 'Animation',
   /**
+  *@description Text that refers to the interactions on the page shown in the timeline
+  */
+  userInteractions: 'Interactions',
+  /**
   *@description Text in Timeline Flame Chart Data Provider of the Performance panel
   */
   timings: 'Timings',
@@ -175,6 +179,7 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
   private readonly timingsHeader: PerfUI.FlameChart.GroupStyle;
   private readonly screenshotsHeader: PerfUI.FlameChart.GroupStyle;
   private readonly animationsHeader: PerfUI.FlameChart.GroupStyle;
+  private readonly userInteractionsHeader: PerfUI.FlameChart.GroupStyle;
   private readonly experienceHeader: PerfUI.FlameChart.GroupStyle;
   private readonly flowEventIndexById: Map<string, number>;
   private entryData!: TimelineFlameChartEntry[];
@@ -235,6 +240,8 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
     this.screenshotsHeader =
         this.buildGroupStyle({useFirstLineForOverview: true, nestingLevel: 1, collapsible: false, itemsHeight: 150});
     this.animationsHeader = this.buildGroupStyle({useFirstLineForOverview: false});
+    this.userInteractionsHeader =
+        this.buildGroupStyle({shareHeaderLine: false, useFirstLineForOverview: true, collapsible: false});
     this.experienceHeader = this.buildGroupStyle({collapsible: false});
 
     ThemeSupport.ThemeSupport.instance().addEventListener(ThemeSupport.ThemeChangeEvent.eventName, () => {
@@ -247,6 +254,7 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
         this.timingsHeader,
         this.screenshotsHeader,
         this.animationsHeader,
+        this.userInteractionsHeader,
         this.experienceHeader,
       ];
       for (const header of headers) {
@@ -417,11 +425,13 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
 
     const eventEntryType = EntryType.Event;
 
-    const weight = (track: TimelineModel.TimelineModel.Track): 1|2|3|4|5|6|7|8|9|10|- 1 => {
+    const weight = (track: TimelineModel.TimelineModel.Track): 0|1|2|3|4|5|6|7|8|9|10|- 1 => {
       switch (track.type) {
         case TimelineModel.TimelineModel.TrackType.Animation:
-          return 1;
+          return 0;
         case TimelineModel.TimelineModel.TrackType.Timings:
+          return 1;
+        case TimelineModel.TimelineModel.TrackType.UserInteractions:
           return 2;
         case TimelineModel.TimelineModel.TrackType.Console:
           return 3;
@@ -451,6 +461,12 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
     let rasterCount = 0;
     for (const track of tracks) {
       switch (track.type) {
+        case TimelineModel.TimelineModel.TrackType.UserInteractions: {
+          this.appendAsyncEventsGroup(
+              track, i18nString(UIStrings.userInteractions), track.asyncEvents, this.userInteractionsHeader,
+              eventEntryType, false);
+          break;
+        }
         case TimelineModel.TimelineModel.TrackType.Animation: {
           this.appendAsyncEventsGroup(
               track, i18nString(UIStrings.animation), track.asyncEvents, this.animationsHeader, eventEntryType,
@@ -1048,6 +1064,9 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
       if (!SDK.TracingModel.TracingModel.isAsyncPhase(event.phase) && this.colorForEvent) {
         return this.colorForEvent(event);
       }
+      if (this.model.isEventTimingInteractionEvent(event)) {
+        return this.consoleColorGenerator.colorForID(event.args.data.type + ':' + event.args.data.interactionId);
+      }
       if (event.hasCategory(TimelineModel.TimelineModel.TimelineModelImpl.Category.Console) ||
           event.hasCategory(TimelineModel.TimelineModel.TimelineModelImpl.Category.UserTiming)) {
         return this.consoleColorGenerator.colorForID(event.name);

package/front_end/panels/timeline/TimelineUIUtils.ts

@@ -467,6 +467,10 @@ const UIStrings = {
   */
   layoutShift: 'Layout Shift',
   /**
+  *@description Text in Timeline for an Event Timing record
+  */
+  eventTiming: 'Event Timing',
+  /**
   *@description Text in Timeline UIUtils of the Performance panel
   */
   keyCharacter: 'Key — Character',
@@ -579,6 +583,12 @@ const UIStrings = {
   */
   parse: 'Parse',
   /**
+  *@description Text shown when rendering an interaction/
+  *@example {click} PH1
+  *@example {1200} PH2
+  */
+  interactionEvent: 'Interaction type:{PH1} id:{PH2}',
+  /**
   *@description Text with two placeholders separated by a colon
   *@example {Node removed} PH1
   *@example {div#id1} PH2
@@ -1382,6 +1392,8 @@ export class TimelineUIUtils {
 
     eventStyles[type.LayoutShift] = new TimelineRecordStyle(i18nString(UIStrings.layoutShift), experience);
 
+    eventStyles[type.EventTiming] = new TimelineRecordStyle(UIStrings.eventTiming, experience);
+
     eventStylesMap = eventStyles;
     return eventStyles;
   }
@@ -1561,6 +1573,10 @@ export class TimelineUIUtils {
     if (event.name === recordType.JSFrame) {
       return TimelineUIUtils.frameDisplayName(eventData);
     }
+
+    if (event.name === 'EventTiming' && event.args.data && event.args.data.interactionId) {
+      return i18nString(UIStrings.interactionEvent, {PH1: event.args.data.type, PH2: event.args.data.interactionId});
+    }
     const title = TimelineUIUtils.eventStyle(event).title;
     if (event.hasCategory(TimelineModel.TimelineModel.TimelineModelImpl.Category.Console)) {
       return title;

package/front_end/third_party/codemirror.next/bundle.ts

@@ -78,7 +78,7 @@ export async function shell() {
   return StreamLanguage.define((await import('@codemirror/legacy-modes/mode/shell')).shell);
 }
 export async function cssStreamParser() {
-  return (await import('@codemirror/legacy-modes/mode/css') as any).css;
+  return (await import('@codemirror/legacy-modes/mode/css') as any).sCSS;
 }
 export function wast() {
   return import('@codemirror/lang-wast');