chrome-devtools-frontend 1.0.1040337 → 1.0.1070764

package/front_end/panels/timeline/TimelineUIUtils.ts

@@ -473,110 +473,6 @@ const UIStrings = {
   /**
   *@description Text in Timeline UIUtils of the Performance panel
   */
-  keyCharacter: 'Key — Character',
-  /**
-  *@description Text in Timeline UIUtils of the Performance panel
-  */
-  keyDown: 'Key Down',
-  /**
-  *@description Noun for the end keyboard key event in the Performance panel. 'Up' refers to the keyboard key bouncing back up after being pushed down.
-  */
-  keyUp: 'Key Up',
-  /**
-  *@description Noun for a mouse click event in the Performance panel.
-  */
-  click: 'Click',
-  /**
-  *@description Text in Timeline UIUtils of the Performance panel
-  */
-  contextMenu: 'Context Menu',
-  /**
-  *@description Noun for the start of a mouse event in the Performance panel. Down refers to the button on the mouse being pressed down.
-  */
-  mouseDown: 'Mouse Down',
-  /**
-  *@description Noun for a mouse move event in the Performance panel.
-  */
-  mouseMove: 'Mouse Move',
-  /**
-  *@description Noun for the end of a mouse event in the Performance panel. Up refers to the button on the mouse being released.
-  */
-  mouseUp: 'Mouse Up',
-  /**
-  *@description Text in Timeline UIUtils of the Performance panel
-  */
-  mouseWheel: 'Mouse Wheel',
-  /**
-  *@description Noun for the beginning of a mouse scroll wheel event in the Performance panel.
-  */
-  scrollBegin: 'Scroll Begin',
-  /**
-  *@description Text in Timeline UIUtils of the Performance panel
-  */
-  scrollEnd: 'Scroll End',
-  /**
-  *@description Noun for an update of a mouse scroll wheel event in the Performance panel.
-  */
-  scrollUpdate: 'Scroll Update',
-  /**
-  *@description Noun for the beginning of a fling gesture event in the Performance panel.
-  */
-  flingStart: 'Fling Start',
-  /**
-  *@description Noun for the end of a fling gesture event in the Performance panel.
-  */
-  flingHalt: 'Fling Halt',
-  /**
-  *@description Noun for a tap event (tap on a touch screen device) in the Performance panel.
-  */
-  tap: 'Tap',
-  /**
-  *@description Noun for the end of a tap event (tap on a touch screen device) in the Performance panel.
-  */
-  tapHalt: 'Tap Halt',
-  /**
-  *@description Noun for the start of a tap event (tap on a touch screen device) in the Performance panel.
-  */
-  tapBegin: 'Tap Begin',
-  /**
-  *@description Noun for the beginning of a tap gesture event in the Performance
-  *panel. 'Down' refers to the start (downward tap direction), as opposed to up
-  *(finger leaving the touch surface).
-  */
-  tapDown: 'Tap Down',
-  /**
-   * @description Noun for the cancelation of an input touch event in the Performance panel.
-   * For example this can happen when the user touches the surface with too many fingers.
-   * This is opposed to a "Touch End" event, where the user lifts the finger from the surface.
-   */
-  touchCancel: 'Touch Cancel',
-  /**
-  *@description Noun for the end of an input touch event in the Performance panel.
-  */
-  touchEnd: 'Touch End',
-  /**
-  *@description Noun for an input touch event in the Performance panel.
-  */
-  touchMove: 'Touch Move',
-  /**
-  *@description Noun for the start of an input touch event in the Performance panel.
-  */
-  touchStart: 'Touch Start',
-  /**
-  *@description Noun for the beginning of a pinch gesture event in the Performance panel.
-  */
-  pinchBegin: 'Pinch Begin',
-  /**
-  *@description Text in Timeline UIUtils of the Performance panel
-  */
-  pinchEnd: 'Pinch End',
-  /**
-  *@description Text in Timeline UIUtils of the Performance panel
-  */
-  pinchUpdate: 'Pinch Update',
-  /**
-  *@description Text in Timeline UIUtils of the Performance panel
-  */
   compile: 'Compile',
   /**
   *@description Text to parse something
@@ -595,23 +491,6 @@ const UIStrings = {
   */
   sS: '{PH1}: {PH2}',
   /**
-  *@description Label of a field in a timeline. A Network response refers to the act of acknowledging a
-  network request. Should not be confused with answer.
-  */
-  response: 'Response',
-  /**
-  *@description Text in Timeline UIUtils of the Performance panel
-  */
-  fling: 'Fling',
-  /**
-  *@description Text in Timeline UIUtils of the Performance panel
-  */
-  drag: 'Drag',
-  /**
-  *@description Text in Timeline UIUtils of the Performance panel
-  */
-  uncategorized: 'Uncategorized',
-  /**
   *@description Details text in Timeline UIUtils of the Performance panel
   *@example {30 MB} PH1
   */
@@ -1233,13 +1112,6 @@ const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 let eventStylesMap: EventStylesMap;
 
-let inputEventToDisplayName: Map<TimelineModel.TimelineIRModel.InputEvents, string>;
-
-let interactionPhaseStylesMap: Map<TimelineModel.TimelineIRModel.Phases, {
-  color: string,
-  label: string,
-}>;
-
 let categories: {
   [x: string]: TimelineCategory,
 };
@@ -1404,42 +1276,6 @@ export class TimelineUIUtils {
     eventStylesMap = eventStyles;
   }
 
-  static inputEventDisplayName(inputEventType: TimelineModel.TimelineIRModel.InputEvents): string|null {
-    if (!inputEventToDisplayName) {
-      const inputEvent = TimelineModel.TimelineIRModel.InputEvents;
-
-      inputEventToDisplayName = new Map([
-        [inputEvent.Char, i18nString(UIStrings.keyCharacter)],
-        [inputEvent.KeyDown, i18nString(UIStrings.keyDown)],
-        [inputEvent.KeyDownRaw, i18nString(UIStrings.keyDown)],
-        [inputEvent.KeyUp, i18nString(UIStrings.keyUp)],
-        [inputEvent.Click, i18nString(UIStrings.click)],
-        [inputEvent.ContextMenu, i18nString(UIStrings.contextMenu)],
-        [inputEvent.MouseDown, i18nString(UIStrings.mouseDown)],
-        [inputEvent.MouseMove, i18nString(UIStrings.mouseMove)],
-        [inputEvent.MouseUp, i18nString(UIStrings.mouseUp)],
-        [inputEvent.MouseWheel, i18nString(UIStrings.mouseWheel)],
-        [inputEvent.ScrollBegin, i18nString(UIStrings.scrollBegin)],
-        [inputEvent.ScrollEnd, i18nString(UIStrings.scrollEnd)],
-        [inputEvent.ScrollUpdate, i18nString(UIStrings.scrollUpdate)],
-        [inputEvent.FlingStart, i18nString(UIStrings.flingStart)],
-        [inputEvent.FlingCancel, i18nString(UIStrings.flingHalt)],
-        [inputEvent.Tap, i18nString(UIStrings.tap)],
-        [inputEvent.TapCancel, i18nString(UIStrings.tapHalt)],
-        [inputEvent.ShowPress, i18nString(UIStrings.tapBegin)],
-        [inputEvent.TapDown, i18nString(UIStrings.tapDown)],
-        [inputEvent.TouchCancel, i18nString(UIStrings.touchCancel)],
-        [inputEvent.TouchEnd, i18nString(UIStrings.touchEnd)],
-        [inputEvent.TouchMove, i18nString(UIStrings.touchMove)],
-        [inputEvent.TouchStart, i18nString(UIStrings.touchStart)],
-        [inputEvent.PinchBegin, i18nString(UIStrings.pinchBegin)],
-        [inputEvent.PinchEnd, i18nString(UIStrings.pinchEnd)],
-        [inputEvent.PinchUpdate, i18nString(UIStrings.pinchUpdate)],
-      ]);
-    }
-    return inputEventToDisplayName.get(inputEventType) || null;
-  }
-
   static frameDisplayName(frame: Protocol.Runtime.CallFrame): string {
     if (!TimelineModel.TimelineJSProfile.TimelineJSProfileProcessor.isNativeRuntimeFrame(frame)) {
       return UI.UIUtils.beautifyFunctionName(frame.functionName);
@@ -1504,14 +1340,6 @@ export class TimelineUIUtils {
       return new TimelineRecordStyle(event.name, TimelineUIUtils.categories()['scripting']);
     }
 
-    if (event.hasCategory(TimelineModel.TimelineModel.TimelineModelImpl.Category.LatencyInfo)) {
-      /** @const */
-      const prefix = 'InputLatency::';
-      const inputEventType = event.name.startsWith(prefix) ? event.name.substr(prefix.length) : event.name;
-      const displayName =
-          TimelineUIUtils.inputEventDisplayName((inputEventType as TimelineModel.TimelineIRModel.InputEvents));
-      return new TimelineRecordStyle(displayName || inputEventType, TimelineUIUtils.categories()['scripting']);
-    }
     let result: TimelineRecordStyle = eventStyles[event.name];
     if (!result) {
       result = new TimelineRecordStyle(event.name, TimelineUIUtils.categories()['other'], true);
@@ -1542,31 +1370,6 @@ export class TimelineUIUtils {
     return color;
   }
 
-  static eventColorByProduct(
-      model: TimelineModel.TimelineModel.TimelineModelImpl, urlToColorCache: Map<string, string>,
-      event: SDK.TracingModel.Event): string {
-    const url = TimelineUIUtils.eventURL(event) || Platform.DevToolsPath.EmptyUrlString;
-    let color = urlToColorCache.get(url);
-    if (color) {
-      return color;
-    }
-    const defaultColor = '#f2ecdc';
-    const parsedURL = Common.ParsedURL.ParsedURL.fromString(url);
-    if (!parsedURL) {
-      return defaultColor;
-    }
-    const name = parsedURL.host;
-    const rootFrames = model.rootFrames();
-    if (rootFrames.some(pageFrame => new Common.ParsedURL.ParsedURL(pageFrame.url).host === name)) {
-      color = defaultColor;
-    }
-    if (!color) {
-      color = defaultColor;
-    }
-    urlToColorCache.set(url, color);
-    return color;
-  }
-
   static eventTitle(event: SDK.TracingModel.Event): string {
     const recordType = TimelineModel.TimelineModel.RecordType;
     const eventData = event.args['data'];
@@ -1593,60 +1396,6 @@ export class TimelineUIUtils {
     return title;
   }
 
-  private static interactionPhaseStyles(): Map<TimelineModel.TimelineIRModel.Phases, {
-    color: string,
-    label: string,
-  }> {
-    let map: Map<TimelineModel.TimelineIRModel.Phases, {
-      color: string,
-      label: string,
-    }>|Map<TimelineModel.TimelineIRModel.Phases, {
-      color: string,
-      label: string,
-    }> = interactionPhaseStylesMap;
-    if (!map) {
-      map = new Map([
-        [TimelineModel.TimelineIRModel.Phases.Idle, {color: 'white', label: 'Idle'}],
-        [
-          TimelineModel.TimelineIRModel.Phases.Response,
-          {color: 'hsl(43, 83%, 64%)', label: i18nString(UIStrings.response)},
-        ],
-        [
-          TimelineModel.TimelineIRModel.Phases.Scroll,
-          {color: 'hsl(256, 67%, 70%)', label: i18nString(UIStrings.scroll)},
-        ],
-        [TimelineModel.TimelineIRModel.Phases.Fling, {color: 'hsl(256, 67%, 70%)', label: i18nString(UIStrings.fling)}],
-        [TimelineModel.TimelineIRModel.Phases.Drag, {color: 'hsl(256, 67%, 70%)', label: i18nString(UIStrings.drag)}],
-        [
-          TimelineModel.TimelineIRModel.Phases.Animation,
-          {color: 'hsl(256, 67%, 70%)', label: i18nString(UIStrings.animation)},
-        ],
-        [
-          TimelineModel.TimelineIRModel.Phases.Uncategorized,
-          {color: 'hsl(0, 0%, 87%)', label: i18nString(UIStrings.uncategorized)},
-        ],
-      ]);
-      interactionPhaseStylesMap = map;
-    }
-    return map;
-  }
-
-  static interactionPhaseColor(phase: TimelineModel.TimelineIRModel.Phases): string {
-    const interactionPhase = TimelineUIUtils.interactionPhaseStyles().get(phase);
-    if (!interactionPhase) {
-      throw new Error(`Unknown phase ${phase}`);
-    }
-    return interactionPhase.color;
-  }
-
-  static interactionPhaseLabel(phase: TimelineModel.TimelineIRModel.Phases): string {
-    const interactionPhase = TimelineUIUtils.interactionPhaseStyles().get(phase);
-    if (!interactionPhase) {
-      throw new Error(`Unknown phase ${phase}`);
-    }
-    return interactionPhase.label;
-  }
-
   static isUserFrame(frame: Protocol.Runtime.CallFrame): boolean {
     return frame.scriptId !== '0' && !(frame.url && frame.url.startsWith('native '));
   }
@@ -3263,17 +3012,6 @@ export class TimelineUIUtils {
     };
   }
 
-  static markerStyleForFrame(): TimelineMarkerStyle {
-    return {
-      title: i18nString(UIStrings.frame),
-      color: 'rgba(100, 100, 100, 0.4)',
-      lineWidth: 3,
-      dashStyle: [3],
-      tall: true,
-      lowPriority: true,
-    };
-  }
-
   static colorForId(id: string): string {
     if (!colorGenerator) {
       colorGenerator =
@@ -3325,7 +3063,7 @@ export class TimelineUIUtils {
 
       case warnings.LongTask: {
         const longTaskLink =
-            UI.XLink.XLink.create('https://web.dev/rail/#goals-and-guidelines', i18nString(UIStrings.longTask));
+            UI.XLink.XLink.create('https://web.dev/optimize-long-tasks/', i18nString(UIStrings.longTask));
         span.appendChild(i18n.i18n.getFormatLocalizedString(
             str_, UIStrings.sTookS,
             {PH1: longTaskLink, PH2: i18n.TimeUtilities.millisToString((event.duration || 0), true)}));

package/front_end/panels/webauthn/WebauthnPane.ts

@@ -284,13 +284,13 @@ export class WebauthnPaneImpl extends UI.Widget.VBox implements
   }
 
   modelAdded(model: SDK.WebAuthnModel.WebAuthnModel): void {
-    if (model.target() === SDK.TargetManager.TargetManager.instance().mainTarget()) {
+    if (model.target() === SDK.TargetManager.TargetManager.instance().mainFrameTarget()) {
       this.#model = model;
     }
   }
 
   modelRemoved(model: SDK.WebAuthnModel.WebAuthnModel): void {
-    if (model.target() === SDK.TargetManager.TargetManager.instance().mainTarget()) {
+    if (model.target() === SDK.TargetManager.TargetManager.instance().mainFrameTarget()) {
       this.#model = undefined;
     }
   }

package/front_end/panels/webauthn/webauthnPane.css

@@ -169,6 +169,7 @@ td .text-button {
   align-items: center;
   height: 100%;
   text-align: center;
+  overflow: hidden;
 }
 
 .webauthn-pane.enabled .learn-more {

package/front_end/services/puppeteer/PuppeteerConnection.ts

@@ -6,7 +6,7 @@ import * as puppeteer from '../../third_party/puppeteer/puppeteer.js';
 import type * as Protocol from '../../generated/protocol.js';
 import type * as SDK from '../../core/sdk/sdk.js';
 
-export class Transport implements puppeteer.ConnectionTransport {
+class Transport implements puppeteer.ConnectionTransport {
   #connection: SDK.Connections.ParallelConnectionInterface;
   #knownIds = new Set<number>();
 
@@ -14,10 +14,10 @@ export class Transport implements puppeteer.ConnectionTransport {
     this.#connection = connection;
   }
 
-  send(message: string): void {
-    const data = JSON.parse(message);
-    this.#knownIds.add(data.id);
-    this.#connection.sendRawMessage(JSON.stringify(data));
+  send(data: string): void {
+    const message = JSON.parse(data);
+    this.#knownIds.add(message.id);
+    this.#connection.sendRawMessage(data);
   }
 
   close(): void {
@@ -26,9 +26,6 @@ export class Transport implements puppeteer.ConnectionTransport {
 
   set onmessage(cb: (message: string) => void) {
     this.#connection.setOnMessage((message: Object) => {
-      if (!cb) {
-        return;
-      }
       const data = (message) as {id: number, method: string, params: unknown, sessionId?: string};
       if (data.id && !this.#knownIds.has(data.id)) {
         return;
@@ -59,7 +56,7 @@ export class Transport implements puppeteer.ConnectionTransport {
   }
 }
 
-export class PuppeteerConnection extends puppeteer.Connection {
+class PuppeteerConnection extends puppeteer.Connection {
   override async onMessage(message: string): Promise<void> {
     const msgObj = JSON.parse(message) as {id: number, method: string, params: unknown, sessionId?: string};
     if (msgObj.sessionId && !this._sessions.has(msgObj.sessionId)) {
@@ -69,43 +66,55 @@ export class PuppeteerConnection extends puppeteer.Connection {
   }
 }
 
-export async function getPuppeteerConnection(
-    rawConnection: SDK.Connections.ParallelConnectionInterface,
+export class PuppeteerConnectionHelper {
+  static async connectPuppeteerToConnection(options: {
+    connection: SDK.Connections.ParallelConnectionInterface,
     mainFrameId: string,
-    mainTargetId: string,
-    ): Promise<{page: puppeteer.Page | null, browser: puppeteer.Browser}> {
-  const transport = new Transport(rawConnection);
+    targetInfos: Protocol.Target.TargetInfo[],
+    targetFilterCallback: (targetInfo: Protocol.Target.TargetInfo) => boolean,
+    isPageTargetCallback: (targetInfo: Protocol.Target.TargetInfo) => boolean,
+  }): Promise<{
+    page: puppeteer.Page | null,
+    browser: puppeteer.Browser,
+    puppeteerConnection: puppeteer.Connection,
+  }> {
+    const {connection, mainFrameId, targetInfos, targetFilterCallback, isPageTargetCallback} = options;
+    // Pass an empty message handler because it will be overwritten by puppeteer anyways.
+    const transport = new Transport(connection);
 
-  // url is an empty string in this case parallel to:
-  // https://github.com/puppeteer/puppeteer/blob/f63a123ecef86693e6457b07437a96f108f3e3c5/src/common/BrowserConnector.ts#L72
-  const connection = new PuppeteerConnection('', transport);
+    // url is an empty string in this case parallel to:
+    // https://github.com/puppeteer/puppeteer/blob/f63a123ecef86693e6457b07437a96f108f3e3c5/src/common/BrowserConnector.ts#L72
+    const puppeteerConnection = new PuppeteerConnection('', transport);
+    const targetIdsForAutoAttachEmulation = targetInfos.filter(targetFilterCallback).map(t => t.targetId);
 
-  const targetFilterCallback = (targetInfo: Protocol.Target.TargetInfo): boolean => {
-    if (targetInfo.type !== 'page' && targetInfo.type !== 'iframe') {
-      return false;
-    }
-    // TODO only connect to iframes that are related to the main target. This requires refactoring in Puppeteer: https://github.com/puppeteer/puppeteer/issues/3667.
-    return targetInfo.targetId === mainTargetId || targetInfo.openerId === mainTargetId || targetInfo.type === 'iframe';
-  };
+    const browserPromise = puppeteer.Browser._create(
+        'chrome',
+        puppeteerConnection,
+        [] /* contextIds */,
+        false /* ignoreHTTPSErrors */,
+        undefined /* defaultViewport */,
+        undefined /* process */,
+        undefined /* closeCallback */,
+        targetFilterCallback,
+        isPageTargetCallback,
+    );
 
-  const browserPromise = puppeteer.Browser._create(
-      'chrome',
-      connection,
-      [] /* contextIds */,
-      false /* ignoreHTTPSErrors */,
-      undefined /* defaultViewport */,
-      undefined /* process */,
-      undefined /* closeCallback */,
-      targetFilterCallback,
-  );
+    const [, browser] = await Promise.all([
+      Promise.all(targetIdsForAutoAttachEmulation.map(
+          targetId => puppeteerConnection._createSession({targetId}, /* emulateAutoAttach= */ true))),
+      browserPromise,
+    ]);
 
-  const [, browser] = await Promise.all([
-    connection._createSession({targetId: mainTargetId}, /* emulateAutoAttach=*/ true),
-    browserPromise,
-  ]);
+    // TODO: replace this with browser.pages() once the Puppeteer version is rolled.
+    const pages =
+        await Promise.all(browser.browserContexts()
+                              .map(ctx => ctx.targets())
+                              .flat()
+                              .filter(target => target.type() === 'page' || target.url().startsWith('devtools://'))
+                              .map(target => target.page()));
+    const page =
+        pages.filter((p): p is puppeteer.Page => p !== null).find(p => p.mainFrame()._id === mainFrameId) || null;
 
-  const pages = await browser.pages();
-  const page = pages.find(p => p.mainFrame()._id === mainFrameId) || null;
-
-  return {page, browser};
+    return {page, browser, puppeteerConnection};
+  }
 }

package/front_end/third_party/additional_readme_paths.json

@@ -1,6 +1,5 @@
 [
   "acorn",
-  "acorn-loose",
   "codemirror",
   "codemirror.next",
   "chromium",

package/front_end/third_party/chromium/client-variations/ClientVariations.js

@@ -1,5 +1,5 @@
 /* eslint-disable */
-// Copyright 2020 The Chromium Authors. All rights reserved.
+// Copyright 2020 The Chromium Authors
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 

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

@@ -10,7 +10,7 @@ export {
   acceptCompletion, autocompletion, closeBrackets, closeBracketsKeymap
 , closeCompletion, completeAnyWord,
   Completion, CompletionContext, CompletionResult, CompletionSource, currentCompletions,
-  ifNotIn, selectedCompletion, startCompletion} from '@codemirror/autocomplete';
+  ifNotIn, moveCompletionSelection, selectedCompletion, startCompletion} from '@codemirror/autocomplete';
 export {
   cursorMatchingBracket, cursorSubwordBackward, cursorSubwordForward,
   history, historyKeymap,