chrome-devtools-frontend 1.0.967728 → 1.0.969882

package/front_end/panels/timeline/TimelineFlameChartDataProvider.ts

@@ -144,6 +144,10 @@ const UIStrings = {
   */
   droppedFrame: 'Dropped Frame',
   /**
+  *@description Text in Timeline Frame Chart Data Provider of the Performance panel
+  */
+  partiallyPresentedFrame: 'Partially Presented Frame',
+  /**
   *@description Text for a rendering frame
   */
   frame: 'Frame',
@@ -164,6 +168,8 @@ const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectWrapper<EventTypes> implements
     PerfUI.FlameChart.FlameChartDataProvider {
   private readonly font: string;
+  private droppedFramePatternCanvas: HTMLCanvasElement;
+  private partialFramePatternCanvas: HTMLCanvasElement;
   private timelineDataInternal: PerfUI.FlameChart.TimelineData|null;
   private currentLevel: number;
   private performanceModel: PerformanceModel|null;
@@ -206,6 +212,9 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
     super();
     this.reset();
     this.font = '11px ' + Host.Platform.fontFamily();
+    this.droppedFramePatternCanvas = document.createElement('canvas');
+    this.partialFramePatternCanvas = document.createElement('canvas');
+    this.preparePatternCanvas();
     this.timelineDataInternal = null;
     this.currentLevel = 0;
     this.performanceModel = null;
@@ -1002,7 +1011,11 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
       if (frame.idle) {
         title = i18nString(UIStrings.idleFrame);
       } else if (frame.dropped) {
-        title = i18nString(UIStrings.droppedFrame);
+        if (frame.isPartial) {
+          title = i18nString(UIStrings.partiallyPresentedFrame);
+        } else {
+          title = i18nString(UIStrings.droppedFrame);
+        }
         nameSpanTimelineInfoTime = 'timeline-info-warning';
       } else {
         title = i18nString(UIStrings.frame);
@@ -1093,6 +1106,42 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
     return key ? `hsl(${Platform.StringUtilities.hashCode(key) % 300 + 30}, 40%, 70%)` : '#ccc';
   }
 
+  private preparePatternCanvas(): void {
+    // Set the candy stripe pattern to 17px so it repeats well.
+    const size = 17;
+    this.droppedFramePatternCanvas.width = size;
+    this.droppedFramePatternCanvas.height = size;
+
+    this.partialFramePatternCanvas.width = size;
+    this.partialFramePatternCanvas.height = size;
+
+    const ctx = this.droppedFramePatternCanvas.getContext('2d');
+    if (ctx) {
+      // Make a dense solid-line pattern.
+      ctx.translate(size * 0.5, size * 0.5);
+      ctx.rotate(Math.PI * 0.25);
+      ctx.translate(-size * 0.5, -size * 0.5);
+
+      ctx.fillStyle = 'rgb(255, 255, 255)';
+      for (let x = -size; x < size * 2; x += 3) {
+        ctx.fillRect(x, -size, 1, size * 3);
+      }
+    }
+
+    const ctx2 = this.partialFramePatternCanvas.getContext('2d');
+    if (ctx2) {
+      // Make a sparse dashed-line pattern.
+      ctx2.strokeStyle = 'rgb(255, 255, 255)';
+      ctx2.lineWidth = 2;
+      ctx2.beginPath();
+      ctx2.moveTo(17, 0);
+      ctx2.lineTo(10, 7);
+      ctx2.moveTo(8, 9);
+      ctx2.lineTo(2, 15);
+      ctx2.stroke();
+    }
+  }
+
   private drawFrame(
       entryIndex: number, context: CanvasRenderingContext2D, text: string|null, barX: number, barY: number,
       barWidth: number, barHeight: number): void {
@@ -1100,8 +1149,31 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
     const frame = (this.entryData[entryIndex] as TimelineModel.TimelineFrameModel.TimelineFrame);
     barX += hPadding;
     barWidth -= 2 * hPadding;
-    context.fillStyle =
-        frame.idle ? 'white' : frame.dropped ? '#f0b7b1' : (frame.hasWarnings() ? '#fad1d1' : '#d7f0d1');
+    if (frame.idle) {
+      context.fillStyle = 'white';
+    } else if (frame.dropped) {
+      if (frame.isPartial) {
+        // For partially presented frame boxes, paint a yellow background with
+        // a sparse white dashed-line pattern overlay.
+        context.fillStyle = '#f0e442';
+        context.fillRect(barX, barY, barWidth, barHeight);
+
+        const overlay = context.createPattern(this.partialFramePatternCanvas, 'repeat');
+        context.fillStyle = overlay || context.fillStyle;
+      } else {
+        // For dropped frame boxes, paint a red background with a dense white
+        // solid-line pattern overlay.
+        context.fillStyle = '#f08080';
+        context.fillRect(barX, barY, barWidth, barHeight);
+
+        const overlay = context.createPattern(this.droppedFramePatternCanvas, 'repeat');
+        context.fillStyle = overlay || context.fillStyle;
+      }
+    } else if (frame.hasWarnings()) {
+      context.fillStyle = '#fad1d1';
+    } else {
+      context.fillStyle = '#d7f0d1';
+    }
     context.fillRect(barX, barY, barWidth, barHeight);
 
     const frameDurationText = i18n.TimeUtilities.preciseMillisToString(frame.duration, 1);

package/front_end/services/puppeteer/PuppeteerConnection.ts

@@ -0,0 +1,107 @@
+// 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 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 {
+  #connection: SDK.Connections.ParallelConnectionInterface;
+  #knownIds = new Set<number>();
+
+  constructor(connection: SDK.Connections.ParallelConnectionInterface) {
+    this.#connection = connection;
+  }
+
+  send(message: string): void {
+    const data = JSON.parse(message);
+    this.#knownIds.add(data.id);
+    this.#connection.sendRawMessage(JSON.stringify(data));
+  }
+
+  close(): void {
+    void this.#connection.disconnect();
+  }
+
+  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;
+      }
+      this.#knownIds.delete(data.id);
+      if (!data.sessionId) {
+        return;
+      }
+      return cb(JSON.stringify({
+        ...data,
+        // Puppeteer is expecting to use the default session, but we give it a non-default session in #connection.
+        // Replace that sessionId with undefined so Puppeteer treats it as default.
+        sessionId: data.sessionId === this.#connection.getSessionId() ? undefined : data.sessionId,
+      }));
+    });
+  }
+
+  set onclose(cb: () => void) {
+    const prev = this.#connection.getOnDisconnect();
+    this.#connection.setOnDisconnect(reason => {
+      if (prev) {
+        prev(reason);
+      }
+      if (cb) {
+        cb();
+      }
+    });
+  }
+}
+
+export class PuppeteerConnection extends puppeteer.Connection {
+  // Overriding Puppeteer's API here.
+  // eslint-disable-next-line rulesdir/no_underscored_properties
+  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)) {
+      return;
+    }
+    void super._onMessage(message);
+  }
+}
+
+export async function getPuppeteerConnection(
+    rawConnection: SDK.Connections.ParallelConnectionInterface,
+    mainFrameId: string,
+    mainTargetId: string,
+    ): Promise<{page: puppeteer.Page | null, browser: puppeteer.Browser}> {
+  const transport = new Transport(rawConnection);
+
+  // 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);
+
+  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 browser = await puppeteer.Browser.create(
+      connection,
+      [] /* contextIds */,
+      false /* ignoreHTTPSErrors */,
+      undefined /* defaultViewport */,
+      undefined /* process */,
+      undefined /* closeCallback */,
+      targetFilterCallback,
+  );
+
+  const pages = await browser.pages();
+  const page = pages.find(p => p.mainFrame()._id === mainFrameId) || null;
+
+  return {page, browser};
+}

package/front_end/services/puppeteer/puppeteer.ts

@@ -0,0 +1,9 @@
+// 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 PuppeteerConnection from './PuppeteerConnection.js';
+
+export {
+  PuppeteerConnection,
+};

package/front_end/third_party/codemirror.next/README.chromium

@@ -16,3 +16,13 @@ To update this package, adjust the version ranges in package.json if necessary,
 ```
 
 It will use npm to locally install the necessary packages and their dependencies, and bundle them into a single file (codemirror.js and codemirror.d.ts) with rollup.
+
+If you want to easily obtain all the latest versions of the packages, run the following:
+
+```
+npm i
+npm outdated
+```
+
+This will show you a table with all the latest versions of each package.
+You will need to manually update the versions in the `package.json` file.