chrome-devtools-frontend 1.0.968818 → 1.0.970391

package/front_end/panels/lighthouse/LighthouseController.ts

@@ -125,6 +125,14 @@ const UIStrings = {
   *@description Text of checkbox to reset storage features prior to running audits in Lighthouse
   */
   clearStorage: 'Clear storage',
+  /**
+   * @description Text of checkbox to use the legacy Lighthouse navigation mode
+   */
+  legacyNavigation: 'Legacy navigation',
+  /**
+   * @description Tooltip text that appears when hovering over the 'Legacy navigation' checkbox in the settings pane opened by clicking the setting cog in the start view of the audits panel
+   */
+  useLegacyNavigation: 'Audit the page using classic Lighthouse when in navigation mode.',
   /**
   * @description Tooltip text of checkbox to reset storage features prior to running audits in
   * Lighthouse. Resetting the storage clears/empties it to a neutral state.
@@ -277,7 +285,11 @@ export class LighthouseController extends Common.ObjectWrapper.ObjectWrapper<Eve
     return navigationEntry.url;
   }
 
-  getFlags(): {internalDisableDeviceScreenEmulation: boolean, emulatedFormFactor: (string|undefined)} {
+  getFlags(): {
+    internalDisableDeviceScreenEmulation: boolean,
+    emulatedFormFactor: (string|undefined),
+    legacyNavigation: boolean,
+  } {
     const flags = {
       // DevTools handles all the emulation. This tells Lighthouse to not bother with emulation.
       internalDisableDeviceScreenEmulation: true,
@@ -288,6 +300,7 @@ export class LighthouseController extends Common.ObjectWrapper.ObjectWrapper<Eve
     return flags as {
       internalDisableDeviceScreenEmulation: boolean,
       emulatedFormFactor: (string | undefined),
+      legacyNavigation: boolean,
     };
   }
 
@@ -433,6 +446,17 @@ export const RuntimeSettings: RuntimeSetting[] = [
     options: undefined,
     learnMore: undefined,
   },
+  {
+    setting: Common.Settings.Settings.instance().createSetting(
+        'lighthouse.legacy_navigation', true, Common.Settings.SettingStorageType.Synced),
+    title: i18nLazyString(UIStrings.legacyNavigation),
+    description: i18nLazyString(UIStrings.useLegacyNavigation),
+    setFlags: (flags: Flags, value: string|boolean): void => {
+      flags.legacyNavigation = value;
+    },
+    options: undefined,
+    learnMore: undefined,
+  },
 ];
 
 // TODO(crbug.com/1167717): Make this a const enum again

package/front_end/panels/lighthouse/LighthouseProtocolService.ts

@@ -11,6 +11,11 @@ import type * as ReportRenderer from './LighthouseReporterTypes.js';
 let lastId = 1;
 
 export class ProtocolService {
+  private targetInfo?: {
+    mainSessionId: string,
+    mainTargetId: string,
+    mainFrameId: string,
+  };
   private rawConnection?: ProtocolClient.InspectorBackend.Connection;
   private lighthouseWorkerPromise?: Promise<Worker>;
   private lighthouseMessageUpdateCallback?: ((arg0: string) => void);
@@ -19,26 +24,53 @@ export class ProtocolService {
     await SDK.TargetManager.TargetManager.instance().suspendAllTargets();
     const mainTarget = SDK.TargetManager.TargetManager.instance().mainTarget();
     if (!mainTarget) {
-      throw new Error('Unable to find main target required for LightHouse');
+      throw new Error('Unable to find main target required for Lighthouse');
     }
     const childTargetManager = mainTarget.model(SDK.ChildTargetManager.ChildTargetManager);
     if (!childTargetManager) {
-      throw new Error('Unable to find child target manager required for LightHouse');
+      throw new Error('Unable to find child target manager required for Lighthouse');
     }
-    this.rawConnection = await childTargetManager.createParallelConnection(message => {
+    const resourceTreeModel = mainTarget.model(SDK.ResourceTreeModel.ResourceTreeModel);
+    if (!resourceTreeModel) {
+      throw new Error('Unable to find resource tree model required for Lighthouse');
+    }
+    const mainFrame = resourceTreeModel.mainFrame;
+    if (!mainFrame) {
+      throw new Error('Unable to find main frame required for Lighthouse');
+    }
+
+    const {connection, sessionId} = await childTargetManager.createParallelConnection(message => {
       if (typeof message === 'string') {
         message = JSON.parse(message);
       }
       this.dispatchProtocolMessage(message);
     });
+
+    this.rawConnection = connection;
+    this.targetInfo = {
+      mainTargetId: await childTargetManager.getParentTargetId(),
+      mainFrameId: mainFrame.id,
+      mainSessionId: sessionId,
+    };
   }
 
   getLocales(): readonly string[] {
     return [i18n.DevToolsLocale.DevToolsLocale.instance().locale];
   }
 
-  startLighthouse(auditURL: string, categoryIDs: string[], flags: Object): Promise<ReportRenderer.RunnerResult> {
-    return this.sendWithResponse('start', {url: auditURL, categoryIDs, flags, locales: this.getLocales()});
+  async startLighthouse(auditURL: string, categoryIDs: string[], flags: Record<string, Object|undefined>):
+      Promise<ReportRenderer.RunnerResult> {
+    if (!this.targetInfo) {
+      throw new Error('Unable to get target info required for Lighthouse');
+    }
+    const mode = flags.legacyNavigation ? 'start' : 'navigate';
+    return this.sendWithResponse(mode, {
+      url: auditURL,
+      categoryIDs,
+      flags,
+      locales: this.getLocales(),
+      target: this.targetInfo,
+    });
   }
 
   async detach(): Promise<void> {

package/front_end/panels/lighthouse/LighthouseStartView.ts

@@ -113,6 +113,7 @@ export class StartView extends UI.Widget.Widget {
   }
 
   private render(): void {
+    this.populateRuntimeSettingAsToolbarCheckbox('lighthouse.legacy_navigation', this.settingsToolbarInternal);
     this.populateRuntimeSettingAsToolbarCheckbox('lighthouse.clear_storage', this.settingsToolbarInternal);
     this.populateRuntimeSettingAsToolbarCheckbox('lighthouse.throttling', this.settingsToolbarInternal);
 

package/front_end/panels/lighthouse/LighthouseStatusView.ts

@@ -321,7 +321,7 @@ export class StatusView {
   }
 
   private getPhaseForMessage(message: string): StatusPhase|null {
-    return StatusPhases.find(phase => message.startsWith(phase.statusMessagePrefix)) || null;
+    return StatusPhases.find(phase => phase.statusMessageRegex.test(message)) || null;
   }
 
   private resetProgressBarClasses(): void {
@@ -457,7 +457,7 @@ export interface StatusPhase {
   id: string;
   progressBarClass: string;
   message: () => Common.UIString.LocalizedString;
-  statusMessagePrefix: string;
+  statusMessageRegex: RegExp;
 }
 
 export const StatusPhases: StatusPhase[] = [
@@ -465,19 +465,19 @@ export const StatusPhases: StatusPhase[] = [
     id: 'loading',
     progressBarClass: 'loading',
     message: i18nLazyString(UIStrings.lighthouseIsLoadingThePage),
-    statusMessagePrefix: 'Loading page',
+    statusMessageRegex: /^(Loading page|Navigating to)/,
   },
   {
     id: 'gathering',
     progressBarClass: 'gathering',
     message: i18nLazyString(UIStrings.lighthouseIsGatheringInformation),
-    statusMessagePrefix: 'Gathering',
+    statusMessageRegex: /^(Gathering|Computing artifact)/,
   },
   {
     id: 'auditing',
     progressBarClass: 'auditing',
     message: i18nLazyString(UIStrings.almostThereLighthouseIsNow),
-    statusMessagePrefix: 'Auditing',
+    statusMessageRegex: /^Auditing/,
   },
 ];
 

package/front_end/panels/media/playerListView.css

@@ -61,7 +61,6 @@ li.storage-group-list-item::before {
 }
 
 .player-entry-row:hover {
-  cursor: pointer;
   background: var(--color-background-hover-overlay);
 }
 

package/front_end/panels/network/networkLogView.css

@@ -124,10 +124,6 @@
   color: inherit;
 }
 
-.network-log-grid.data-grid .name-column {
-  cursor: pointer;
-}
-
 .network-log-grid.data-grid .waterfall-column {
   padding: 1px 0;
 }

package/front_end/panels/network/requestPayloadTree.css

@@ -71,7 +71,6 @@
 
 .tree-outline li .header-toggle:hover {
   color: var(--color-text-secondary);
-  cursor: pointer;
 }
 
 .tree-outline .payload-name {
@@ -105,7 +104,6 @@
   display: inline-block;
   font-size: 12px;
   font-family: sans-serif;
-  cursor: pointer;
   margin: 0 4px;
   padding: 2px 4px;
 }

package/front_end/panels/network/signedExchangeInfoTree.css

@@ -69,7 +69,6 @@
   --override-header-hover-color: rgb(20% 20% 45%);
 
   color: var(--override-header-hover-color);
-  cursor: pointer;
 }
 
 .-theme-with-dark-background .tree-outline .header-toggle:hover,

package/front_end/panels/settings/emulation/components/userAgentClientHintsForm.css

@@ -75,10 +75,6 @@
   margin-right: 5px;
 }
 
-.delete-icon {
-  cursor: pointer;
-}
-
 .brand-row {
   display: flex;
   align-items: center;

package/front_end/panels/settings/emulation/devicesSettingsTab.css

@@ -34,7 +34,6 @@
   display: flex;
   align-items: center;
   flex: auto 1 1;
-  cursor: pointer;
   overflow: hidden;
   color: var(--color-text-primary);
   user-select: none;

package/front_end/panels/sources/CSSPlugin.ts

@@ -238,12 +238,14 @@ function createCSSTooltip(active: ActiveTooltip): CodeMirror.Tooltip {
             changes: text === active.text ? undefined :
                                             {from: active.pos, to: active.pos + text.length, insert: active.text},
           });
+          widget.hideWidget();
           view.focus();
         }
       });
       widget.element.addEventListener('focusout', event => {
         if (event.relatedTarget && !widget.element.contains(event.relatedTarget as Node)) {
           view.dispatch({effects: setTooltip.of(null)});
+          widget.hideWidget();
         }
       }, false);
       widget.element.addEventListener('mousedown', event => event.consume());

package/front_end/panels/sources/watchExpressionsSidebarPane.css

@@ -7,7 +7,6 @@
 .watch-expression-delete-button {
   position: absolute;
   top: 5px;
-  cursor: pointer;
   opacity: 0%;
 }
 

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/panels/webauthn/webauthnPane.css

@@ -120,18 +120,6 @@
   padding: 5px 10px 0 0;
 }
 
-.text-button {
-  float: right;
-  white-space: nowrap;
-  overflow: hidden;
-  min-width: 28px;
-  background: transparent;
-  border: none;
-  color: var(--color-link);
-  text-decoration: underline;
-  cursor: pointer;
-}
-
 td .text-button {
   min-width: 20px;
   margin: auto;

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/package/addon/fold/foldgutter.css

@@ -3,15 +3,11 @@
   text-shadow: #b9f 1px 1px 2px, #b9f -1px -1px 2px, #b9f 1px -1px 2px, #b9f -1px 1px 2px;
   font-family: arial;
   line-height: .3;
-  cursor: pointer;
 }
 .CodeMirror-foldgutter {
   width: .7em;
 }
-.CodeMirror-foldgutter-open,
-.CodeMirror-foldgutter-folded {
-  cursor: pointer;
-}
+
 .CodeMirror-foldgutter-open:after {
   content: "\25BE";
 }

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.