chrome-devtools-frontend 1.0.1522145 → 1.0.1524741

package/front_end/panels/timeline/TimelineSelection.ts

@@ -5,8 +5,10 @@
 import * as Platform from '../../core/platform/platform.js';
 import * as Trace from '../../models/trace/trace.js';
 
-// We could add a `type` field here to distinguish them, but it is not needed
-// as we use the existence of "event" or "bounds" to do that.
+/**
+ * We could add a `type` field here to distinguish them, but it is not needed
+ * as we use the existence of "event" or "bounds" to do that.
+ **/
 export interface EventSelection {
   event: Trace.Types.Events.Event;
 }

package/front_end/panels/timeline/TimelineUIUtils.ts

@@ -480,7 +480,7 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/timeline/TimelineUIUtils.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
-// Look for scheme:// plus text and exclude any punctuation at the end.
+/** Look for scheme:// plus text and exclude any punctuation at the end. **/
 export const URL_REGEX = /(?:[a-zA-Z][a-zA-Z0-9+.-]{2,}:\/\/)[^\s"]{2,}[^\s"'\)\}\],:;.!?]/u;
 
 let eventDispatchDesciptors: EventDispatchTypeDescriptor[];
@@ -967,7 +967,7 @@ export class TimelineUIUtils {
     const isMarker = parsedTrace && isMarkerEvent(parsedTrace, event);
     const color = isMarker ? TimelineUIUtils.markerStyleForEvent(event).color : defaultColorForEvent;
 
-    contentHelper.addSection(TimelineUIUtils.eventTitle(event), color);
+    contentHelper.addSection(TimelineUIUtils.eventTitle(event), color, event);
 
     // TODO: as part of the removal of the old engine, produce a typesafe way
     // to look up args and data for events.
@@ -1684,8 +1684,10 @@ export class TimelineUIUtils {
     elem.textContent = eventStr;
     // Highlighting is done async (shrug), but we'll return the container immediately.
     void CodeHighlighter.CodeHighlighter.highlightNode(elem, 'text/javascript').then(() => {
-      // Linkify any URLs within the text nodes.
-      // Use a TreeWalker to find all our text nodes
+      /**
+       * Linkify any URLs within the text nodes.
+       * Use a TreeWalker to find all our text nodes
+       **/
       function* iterateTreeWalker(walker: TreeWalker): IterableIterator<Node> {
         while (walker.nextNode()) {
           yield walker.currentNode;
@@ -2374,7 +2376,7 @@ export class TimelineDetailsContentHelper {
     this.fragment.appendChild(this.element);
   }
 
-  addSection(title: string, swatchColor?: string): void {
+  addSection(title: string, swatchColor?: string, event?: Trace.Types.Events.Event): void {
     if (!this.tableElement.hasChildNodes()) {
       this.element.removeChildren();
     } else {
@@ -2388,7 +2390,16 @@ export class TimelineDetailsContentHelper {
       if (swatchColor) {
         titleElement.createChild('div').style.backgroundColor = swatchColor;
       }
-      UI.UIUtils.createTextChild(titleElement, title);
+
+      const textChild = titleElement.createChild('span');
+      textChild.textContent = title;
+
+      if (event) {
+        textChild.classList.add('timeline-details-chip-title-reveal-entry');
+        textChild.addEventListener('click', function() {
+          TimelinePanel.instance().zoomEvent(event);
+        });
+      }
     }
 
     this.tableElement = this.element.createChild('div', 'vbox timeline-details-chip-body');

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

@@ -33,10 +33,12 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/timeline/components/BreadcrumbsUI.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
-// `initialBreadcrumb` is the first breadcrumb in the breadcrumbs linked list. Since
-// breadcrumbs are a linked list, the first breadcrumb is enought to be able to iterate through all of them.
-//
-// `activeBreadcrumb` is the currently active breadcrumb that the timeline is limited to.
+/**
+ * `initialBreadcrumb` is the first breadcrumb in the breadcrumbs linked list. Since
+ * breadcrumbs are a linked list, the first breadcrumb is enough to be able to iterate through all of them.
+ *
+ * `activeBreadcrumb` is the currently active breadcrumb that the timeline is limited to.
+ **/
 export interface BreadcrumbsUIData {
   initialBreadcrumb: Trace.Types.File.Breadcrumb;
   activeBreadcrumb: Trace.Types.File.Breadcrumb;

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

@@ -49,10 +49,6 @@ const UIStrings = {
    * @description Text for the save trace button
    */
   saveButtonTitle: 'Save',
-  /**
-   * @description Title for the information icon showing more information about an option
-   */
-  moreInfoTitle: 'More information',
   /**
    * @description Text shown in the information pop-up next to the "Include script content" option.
    */
@@ -60,7 +56,11 @@ const UIStrings = {
   /**
    * @description Text shown in the information pop-up next to the "Include script sourcemaps" option.
    */
-  sourceMapsContentPrivacyInfo: 'Includes available source maps, which may expose authored code.'
+  sourceMapsContentPrivacyInfo: 'Includes available source maps, which may expose authored code.',
+  /**
+   * @description Text used as the start of the accessible label for the information button which shows additional context when the user focuses / hovers.
+   */
+  moreInfoLabel: 'Additional information:',
 } as const;
 
 const str_ = i18n.i18n.registerUIStrings('panels/timeline/components/ExportTraceOptions.ts', UIStrings);
@@ -204,6 +204,17 @@ export class ExportTraceOptions extends HTMLElement {
     this.state = newState;
   }
 
+  #accessibleLabelForInfoCheckbox(checkboxId: CheckboxId): string {
+    if (checkboxId === 'script-source-maps') {
+      return i18nString(UIStrings.moreInfoLabel) + ' ' + i18nString(UIStrings.sourceMapsContentPrivacyInfo);
+    }
+
+    if (checkboxId === 'script-content') {
+      return i18nString(UIStrings.moreInfoLabel) + ' ' + i18nString(UIStrings.scriptContentPrivacyInfo);
+    }
+
+    return '';
+  }
   #renderCheckbox(
       checkboxId: CheckboxId, checkboxWithLabel: UI.UIUtils.CheckboxLabel, title: Common.UIString.LocalizedString,
       checked: boolean): Lit.TemplateResult {
@@ -224,8 +235,8 @@ export class ExportTraceOptions extends HTMLElement {
           ${checkboxesWithInfoDialog.has(checkboxId) ? html`
             <devtools-button
               aria-details=${`export-trace-tooltip-${checkboxId}`}
+              aria-label=${this.#accessibleLabelForInfoCheckbox(checkboxId)}
               class="pen-icon"
-              .title=${UIStrings.moreInfoTitle}
               .iconName=${'info'}
               .variant=${Buttons.Button.Variant.ICON}
               ></devtools-button>
@@ -275,8 +286,10 @@ export class ExportTraceOptions extends HTMLElement {
           closeButton: false,
           dialogTitle: i18nString(UIStrings.exportTraceOptionsDialogTitle),
           state: this.#state.dialogState,
+          closeOnESC: true,
         } as Dialogs.ButtonDialog.ButtonDialogData}>
         <div class='export-trace-options-content'>
+
           ${this.#state.displayAnnotationsCheckbox ? this.#renderCheckbox('annotations', this.#includeAnnotationsCheckbox,
             i18nString(UIStrings.includeAnnotations),
             this.#state.includeAnnotations): ''}
@@ -296,11 +309,10 @@ export class ExportTraceOptions extends HTMLElement {
                   } as Buttons.Button.ButtonData}
                 >${i18nString(UIStrings.saveButtonTitle)}</devtools-button>
                 </div>
+          ${this.#state.displayScriptContentCheckbox ? this.#renderInfoTooltip('script-content') : Lit.nothing}
+          ${this.#state.displayScriptContentCheckbox && this.#state.displaySourceMapsCheckbox ? this.#renderInfoTooltip('script-source-maps') : Lit.nothing}
         </div>
       </devtools-button-dialog>
-
-      ${this.#state.displayScriptContentCheckbox ? this.#renderInfoTooltip('script-content') : Lit.nothing}
-      ${this.#state.displayScriptContentCheckbox && this.#state.displaySourceMapsCheckbox ? this.#renderInfoTooltip('script-source-maps') : Lit.nothing}
     `;
     // clang-format on
     Lit.render(output, this.#shadow, {host: this});

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

@@ -119,7 +119,7 @@ export function colorForNetworkRequest(request: Trace.Types.Events.SyntheticNetw
 export type MetricRating = 'good'|'needs-improvement'|'poor';
 export type MetricThresholds = [number, number];
 
-// TODO: Consolidate our metric rating logic with the trace engine.
+/** TODO: Consolidate our metric rating logic with the trace engine. **/
 export const LCP_THRESHOLDS = [2500, 4000] as MetricThresholds;
 export const CLS_THRESHOLDS = [0.1, 0.25] as MetricThresholds;
 export const INP_THRESHOLDS = [200, 500] as MetricThresholds;

package/front_end/panels/timeline/overlays/OverlaysImpl.ts

@@ -209,9 +209,11 @@ export interface OverlayEntryQueries {
   firstVisibleParentForEntry: (entry: Trace.Types.Events.Event) => Trace.Types.Events.Event | null;
 }
 
-// An event dispatched when one of the Annotation Overlays (overlay created by the user,
-// ex. Trace.Types.Overlays.EntryLabel) is removed or updated. When one of the Annotation Overlays is removed or updated,
-// ModificationsManager listens to this event and updates the current annotations.
+/**
+ * An event dispatched when one of the Annotation Overlays (overlay created by the user,
+ * ex. Trace.Types.Overlays.EntryLabel) is removed or updated. When one of the Annotation Overlays is removed or updated,
+ * ModificationsManager listens to this event and updates the current annotations.
+ **/
 export type UpdateAction = 'Remove'|'Update';
 export class AnnotationOverlayActionEvent extends Event {
   static readonly eventName = 'annotationoverlayactionsevent';

package/front_end/panels/timeline/timelineDetailsView.css

@@ -47,6 +47,11 @@
     align-items: center;
   }
 
+  .timeline-details-chip-title-reveal-entry:hover {
+    background: var(--sys-color-state-hover-on-subtle);
+    cursor: pointer;
+  }
+
   .timeline-details-view-block:first-child > .timeline-details-chip-title {
     font-size: 13px;
   }

package/front_end/panels/timeline/utils/Helpers.ts

@@ -147,7 +147,7 @@ export function formatOriginWithEntity(
   return originWithEntity;
 }
 
-// Thin wrapper class to enable revealing an individual insight in Timeline panel.
+/** Thin wrapper class to enable revealing an individual insight in Timeline panel. **/
 export class RevealableInsight {
   constructor(public insight: Trace.Insights.Types.InsightModel) {
   }

package/front_end/panels/utils/utils.ts

@@ -40,7 +40,7 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/utils/utils.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
-// These utilities are packaged in a class to allow unittests to stub or spy the implementation.
+/** These utilities are packaged in a class to allow unittests to stub or spy the implementation. **/
 export class PanelUtils {
   static isFailedNetworkRequest(request: SDK.NetworkRequest.NetworkRequest|null): boolean {
     if (!request) {
@@ -56,9 +56,6 @@ export class PanelUtils {
     if (signedExchangeInfo !== null && Boolean(signedExchangeInfo.errors)) {
       return true;
     }
-    if (request.webBundleInfo()?.errorMessage || request.webBundleInnerRequestInfo()?.errorMessage) {
-      return true;
-    }
     if (request.corsErrorStatus()) {
       return true;
     }
@@ -186,9 +183,6 @@ export class PanelUtils {
     if (resourceType.name() === Common.ResourceType.resourceTypes.Media.name()) {
       return {iconName: 'file-media'};
     }
-    if (resourceType.isWebbundle()) {
-      return {iconName: 'bundle'};
-    }
 
     if (resourceType.name() === Common.ResourceType.resourceTypes.Fetch.name() ||
         resourceType.name() === Common.ResourceType.resourceTypes.XHR.name()) {

package/front_end/services/trace_bounds/TraceBounds.ts

@@ -19,8 +19,10 @@ export class StateChangedEvent extends Event {
   }
 }
 
-// Exposed as a shortcut to BoundsManager.instance().addEventListener, which
-// also takes care of type-casting the event to StateChangedEvent.
+/**
+ * Exposed as a shortcut to BoundsManager.instance().addEventListener, which
+ * also takes care of type-casting the event to StateChangedEvent.
+ **/
 export function onChange(cb: (event: StateChangedEvent) => void): void {
   BoundsManager.instance().addEventListener(
       StateChangedEvent.eventName,

package/front_end/services/tracing/PerformanceTracing.ts

@@ -82,7 +82,7 @@ interface Delegate {
   tracingComplete(events: Object[]): void;
 }
 
-// Used by an implementation of Common.Revealer to transfer data from the recorder to the performance panel.
+/** Used by an implementation of Common.Revealer to transfer data from the recorder to the performance panel. **/
 export class RawTraceEvents {
   constructor(private events: Object[]) {
   }

package/front_end/third_party/chromium/README.chromium

@@ -1,7 +1,7 @@
 Name: Dependencies sourced from the upstream `chromium` repository
 URL: https://source.chromium.org/chromium/chromium/src/+/main:components/variations/proto/devtools/
 Version: N/A
-Revision: e8bb55e7f56140e285b00abfd3811f1c3656ca4c
+Revision: a30399d46b7914d6e069850de11a91944acf37b1
 Update Mechanism: Manual (https://crbug.com/428069060)
 License: BSD-3-Clause
 License File: LICENSE