chrome-devtools-frontend 1.0.1040084 → 1.0.1040857

package/front_end/models/emulation/DeviceModeModel.ts

@@ -722,13 +722,23 @@ export class DeviceModeModel extends Common.ObjectWrapper.ObjectWrapper<EventTyp
       return null;
     }
 
+    let screenshotMode;
+    if (clip) {
+      screenshotMode = SDK.ScreenCaptureModel.ScreenshotMode.FROM_CLIP;
+    } else if (fullSize) {
+      screenshotMode = SDK.ScreenCaptureModel.ScreenshotMode.FULLPAGE;
+    } else {
+      screenshotMode = SDK.ScreenCaptureModel.ScreenshotMode.FROM_VIEWPORT;
+    }
+
     const overlayModel = this.#emulationModel ? this.#emulationModel.overlayModel() : null;
     if (overlayModel) {
       overlayModel.setShowViewportSizeOnResize(false);
     }
 
+    // TODO(crbug/1357584): Delete this after the upstream CDP change lands.
     // Define the right clipping area for fullsize screenshots.
-    if (fullSize) {
+    if (!clip) {
       const metrics = await screenCaptureModel.fetchLayoutMetrics();
       if (!metrics) {
         return null;
@@ -738,8 +748,10 @@ export class DeviceModeModel extends Common.ObjectWrapper.ObjectWrapper<EventTyp
       const contentHeight = Math.min((1 << 14), metrics.contentHeight);
       clip = {x: 0, y: 0, width: Math.floor(metrics.contentWidth), height: Math.floor(contentHeight), scale: 1};
     }
-    const screenshot =
-        await screenCaptureModel.captureScreenshot(Protocol.Page.CaptureScreenshotRequestFormat.Png, 100, clip);
+    // TODO(crbug/1357584): Delete till here.
+
+    const screenshot = await screenCaptureModel.captureScreenshot(
+        Protocol.Page.CaptureScreenshotRequestFormat.Png, 100, screenshotMode, clip);
 
     const deviceMetrics: Protocol.Page.SetDeviceMetricsOverrideRequest = {
       width: 0,

package/front_end/models/issues_manager/DeprecationIssue.ts

@@ -185,7 +185,7 @@ const UIStrings = {
    * @description Warning displayed to developers when `window.openDatabase` is used in non-secure contexts to notify that the API is deprecated and will be removed.
    */
   openWebDatabaseInsecureContext:
-      'WebSQL in non-secure contexts is deprecated and will be removed in M107. Please use Web Storage or Indexed Database.',
+      'WebSQL in non-secure contexts is deprecated and will be removed soon. Please use Web Storage or Indexed Database.',
   /**
    * @description Warning displayed to developers when persistent storage type is used to notify that storage type is deprecated.
    */

package/front_end/models/workspace/UISourceCode.ts

@@ -528,21 +528,27 @@ export class UILocation {
     this.columnNumber = columnNumber;
   }
 
-  linkText(skipTrim?: boolean, showColumnNumber?: boolean): string {
-    let linkText = this.uiSourceCode.displayName(skipTrim);
+  linkText(skipTrim: boolean = false, showColumnNumber: boolean = false): string {
+    const displayName = this.uiSourceCode.displayName(skipTrim);
+    const lineAndColumnText = this.lineAndColumnText(showColumnNumber);
+    return lineAndColumnText ? displayName + ':' + lineAndColumnText : displayName;
+  }
+
+  lineAndColumnText(showColumnNumber: boolean = false): string|undefined {
+    let lineAndColumnText;
     if (this.uiSourceCode.mimeType() === 'application/wasm') {
       // For WebAssembly locations, we follow the conventions described in
       // github.com/WebAssembly/design/blob/master/Web.md#developer-facing-display-conventions
       if (typeof this.columnNumber === 'number') {
-        linkText += `:0x${this.columnNumber.toString(16)}`;
+        lineAndColumnText = `0x${this.columnNumber.toString(16)}`;
       }
     } else {
-      linkText += ':' + (this.lineNumber + 1);
+      lineAndColumnText = `${this.lineNumber + 1}`;
       if (showColumnNumber && typeof this.columnNumber === 'number') {
-        linkText += ':' + (this.columnNumber + 1);
+        lineAndColumnText += ':' + (this.columnNumber + 1);
       }
     }
-    return linkText;
+    return lineAndColumnText;
   }
 
   id(): string {

package/front_end/panels/application/components/BackForwardCacheView.ts

@@ -280,11 +280,11 @@ export class BackForwardCacheView extends HTMLElement {
     // clang-format off
     return LitHtml.html`
       ${this.#renderBackForwardCacheStatus(this.#frame.backForwardCacheDetails.restoredFromCache)}
-      <div class='report-line'>
-        <div class='report-key'>
+      <div class="report-line">
+        <div class="report-key">
           ${i18nString(UIStrings.url)}
         </div>
-        <div class='report-value'>
+        <div class="report-value">
           ${this.#frame.url}
         </div>
       </div>
@@ -339,11 +339,11 @@ export class BackForwardCacheView extends HTMLElement {
       topFrameElement.setLeadingIcons([UI.Icon.Icon.create('mediumicon-frame')]);
     }
     return LitHtml.html`
-    <div class='report-line'>
-    <div class='report-key'>
+    <div class="report-line">
+    <div class="report-key">
       ${i18nString(UIStrings.framesTitle)}
     </div>
-    <div class='report-value'>
+    <div class="report-value">
       ${treeOutline.element}
     </div>
   </div>`;
@@ -395,7 +395,7 @@ export class BackForwardCacheView extends HTMLElement {
         // clang-format off
         return LitHtml.html`
           <${ReportView.ReportView.ReportSection.litTagName}>
-            <div class='status'>
+            <div class="status">
               <${IconButton.Icon.Icon.litTagName} class="inline-icon" .data=${{
                 iconName: 'ic_checkmark_16x16',
                 color: 'green',
@@ -412,7 +412,7 @@ export class BackForwardCacheView extends HTMLElement {
         // clang-format off
         return LitHtml.html`
           <${ReportView.ReportView.ReportSection.litTagName}>
-            <div class='status'>
+            <div class="status">
               <${IconButton.Icon.Icon.litTagName} class="inline-icon" .data=${{
                   iconName: 'circled_backslash_icon',
                   color: 'var(--color-text-secondary)',
@@ -496,7 +496,7 @@ export class BackForwardCacheView extends HTMLElement {
       ${explanations.length > 0 ? LitHtml.html`
         <${ReportView.ReportView.ReportSectionHeader.litTagName}>
           ${category}
-          <div class='help-outline-icon'>
+          <div class="help-outline-icon">
             <${IconButton.Icon.Icon.litTagName} class="inline-icon" .data=${{
               iconName: 'help_outline',
               color: 'var(--color-text-secondary)',
@@ -530,9 +530,9 @@ export class BackForwardCacheView extends HTMLElement {
       return LitHtml.nothing;
     }
     const rows = [LitHtml.html`<div>${i18nString(UIStrings.framesPerIssue, {n: frames.length})}</div>`];
-    rows.push(...frames.map(url => LitHtml.html`<div class='text-ellipsis' title=${url}>${url}</div>`));
+    rows.push(...frames.map(url => LitHtml.html`<div class="text-ellipsis" title=${url}>${url}</div>`));
     return LitHtml.html`
-      <div class='explanation-frames'>
+      <div class="explanation-frames">
         <${ExpandableList.ExpandableList.ExpandableList.litTagName} .data=${
         {rows} as
         ExpandableList.ExpandableList.ExpandableListData}></${ExpandableList.ExpandableList.ExpandableList.litTagName}>
@@ -558,7 +558,7 @@ export class BackForwardCacheView extends HTMLElement {
       <${ReportView.ReportView.ReportSection.litTagName}>
         ${(explanation.reason in NotRestoredReasonDescription) ?
           LitHtml.html`
-            <div class='circled-exclamation-icon'>
+            <div class="circled-exclamation-icon">
               <${IconButton.Icon.Icon.litTagName} class="inline-icon" .data=${{
                 iconName: 'circled_exclamation_icon',
                 color: 'orange',
@@ -574,7 +574,7 @@ export class BackForwardCacheView extends HTMLElement {
            </div>` :
             LitHtml.nothing}
       </${ReportView.ReportView.ReportSection.litTagName}>
-      <div class='gray-text'>
+      <div class="gray-text">
         ${explanation.reason}
       </div>
       ${this.#renderFramesPerReason(frames)}

package/front_end/panels/application/components/OriginTrialTreeView.ts

@@ -11,7 +11,6 @@ import * as LitHtml from '../../../ui/lit-html/lit-html.js';
 
 import badgeStyles from './badge.css.js';
 import originTrialTokenRowsStyles from './originTrialTokenRows.css.js';
-import originTrialTreeViewStyles from './originTrialTreeView.css.js';
 
 const UIStrings = {
   /**
@@ -323,10 +322,6 @@ export class OriginTrialTreeView extends HTMLElement {
     this.#render(data.trials);
   }
 
-  connectedCallback(): void {
-    this.#shadow.adoptedStyleSheets = [originTrialTreeViewStyles];
-  }
-
   #render(trials: Protocol.Page.OriginTrial[]): void {
     if (!trials.length) {
       return;

package/front_end/panels/sources/BreakpointsSidebarPane.ts

@@ -2,23 +2,20 @@
 // 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 Platform from '../../core/platform/platform.js';
+import * as SDK from '../../core/sdk/sdk.js';
+import * as Bindings from '../../models/bindings/bindings.js';
+import * as TextUtils from '../../models/text_utils/text_utils.js';
+import * as Workspace from '../../models/workspace/workspace.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_);
+import * as SourcesComponents from './components/components.js';
 
 let breakpointsSidebarPaneInstance: BreakpointsSidebarPane;
+let breakpointsViewControllerInstance: BreakpointsSidebarController;
 
 export class BreakpointsSidebarPane extends UI.ThrottledWidget.ThrottledWidget {
-  readonly #noBreakpointsView: HTMLElement;
+  readonly #breakpointsView: SourcesComponents.BreakpointsView.BreakpointsView;
 
   static instance(): BreakpointsSidebarPane {
     if (!breakpointsSidebarPaneInstance) {
@@ -30,8 +27,190 @@ export class BreakpointsSidebarPane extends UI.ThrottledWidget.ThrottledWidget {
   constructor() {
     super(true);
 
-    this.#noBreakpointsView = this.contentElement.createChild('div', 'gray-info-message');
-    this.#noBreakpointsView.textContent = i18nString(UIStrings.noBreakpoints);
-    this.#noBreakpointsView.tabIndex = -1;
+    this.#breakpointsView = new SourcesComponents.BreakpointsView.BreakpointsView();
+    this.contentElement.appendChild(this.#breakpointsView);
+    this.update();
+  }
+
+  async doUpdate(): Promise<void> {
+    await BreakpointsSidebarController.instance().update();
+  }
+
+  set data(data: SourcesComponents.BreakpointsView.BreakpointsViewData) {
+    this.#breakpointsView.data = data;
+  }
+}
+export class BreakpointsSidebarController implements UI.ContextFlavorListener.ContextFlavorListener {
+  readonly #breakpointManager: Bindings.BreakpointManager.BreakpointManager;
+
+  constructor() {
+    this.#breakpointManager = Bindings.BreakpointManager.BreakpointManager.instance();
+    this.#breakpointManager.addEventListener(Bindings.BreakpointManager.Events.BreakpointAdded, this.update, this);
+    this.#breakpointManager.addEventListener(Bindings.BreakpointManager.Events.BreakpointRemoved, this.update, this);
+  }
+
+  static instance(opts: {forceNew: boolean|null} = {forceNew: null}): BreakpointsSidebarController {
+    if (!breakpointsViewControllerInstance || opts.forceNew) {
+      breakpointsViewControllerInstance = new BreakpointsSidebarController();
+    }
+    return breakpointsViewControllerInstance;
+  }
+
+  flavorChanged(_object: Object|null): void {
+    void this.update();
+  }
+
+  async update(): Promise<void> {
+    const data = await this.getUpdatedBreakpointViewData();
+    BreakpointsSidebarPane.instance().data = data;
+  }
+
+  async getUpdatedBreakpointViewData(): Promise<SourcesComponents.BreakpointsView.BreakpointsViewData> {
+    const breakpointLocations = this.#getBreakpointLocations();
+    if (!breakpointLocations.length) {
+      return {groups: []};
+    }
+
+    const locationsGroupedById = this.#groupBreakpointLocationsById(breakpointLocations);
+    const locationIdsByLineId = this.#getLocationIdsByLineId(breakpointLocations);
+
+    const content = await this.#getContent(locationsGroupedById);
+    const selectedUILocation = await this.#getHitUILocation();
+
+    const urlToGroup = new Map<Platform.DevToolsPath.UrlString, SourcesComponents.BreakpointsView.BreakpointGroup>();
+
+    for (let idx = 0; idx < locationsGroupedById.length; idx++) {
+      const locations = locationsGroupedById[idx];
+      const fstLocation = locations[0];
+      const sourceURL = fstLocation.uiLocation.uiSourceCode.url();
+      const uiLocation = fstLocation.uiLocation;
+
+      const isHit = selectedUILocation !== null &&
+          locations.some(location => location.uiLocation.id() === selectedUILocation.id());
+
+      const numBreakpointsOnLine = locationIdsByLineId.get(uiLocation.lineId()).size;
+      const showColumn = numBreakpointsOnLine > 1;
+      const locationText = uiLocation.lineAndColumnText(showColumn);
+
+      const text = (content[idx] as TextUtils.Text.Text);
+      const codeSnippet = text.lineAt(uiLocation.lineNumber);
+
+      const status: SourcesComponents.BreakpointsView.BreakpointStatus = this.#getBreakpointState(locations);
+      const item = {location: locationText, codeSnippet, isHit, status} as
+          SourcesComponents.BreakpointsView.BreakpointItem;
+
+      let group = urlToGroup.get(sourceURL);
+      if (group) {
+        group.breakpointItems.push(item);
+      } else {
+        group =
+            {url: sourceURL, name: uiLocation.uiSourceCode.displayName(), expanded: true, breakpointItems: [item]} as
+            SourcesComponents.BreakpointsView.BreakpointGroup;
+        urlToGroup.set(sourceURL, group);
+      }
+    }
+    return {groups: Array.from(urlToGroup.values())};
+  }
+
+  async #getHitUILocation(): Promise<Workspace.UISourceCode.UILocation|null> {
+    const details = UI.Context.Context.instance().flavor(SDK.DebuggerModel.DebuggerPausedDetails);
+    if (details && details.callFrames.length) {
+      return await Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance().rawLocationToUILocation(
+          details.callFrames[0].location());
+    }
+    return null;
+  }
+
+  #getBreakpointLocations(): Bindings.BreakpointManager.BreakpointLocation[] {
+    const locations = this.#breakpointManager.allBreakpointLocations().filter(
+        breakpointLocation =>
+            breakpointLocation.uiLocation.uiSourceCode.project().type() !== Workspace.Workspace.projectTypes.Debugger);
+
+    locations.sort((item1, item2) => item1.uiLocation.compareTo(item2.uiLocation));
+
+    const result = [];
+    let lastBreakpoint: Bindings.BreakpointManager.Breakpoint|null = null;
+    let lastLocation: Workspace.UISourceCode.UILocation|null = null;
+    for (const location of locations) {
+      if (location.breakpoint !== lastBreakpoint || (lastLocation && location.uiLocation.compareTo(lastLocation))) {
+        result.push(location);
+        lastBreakpoint = location.breakpoint;
+        lastLocation = location.uiLocation;
+      }
+    }
+    return result;
+  }
+
+  #groupBreakpointLocationsById(breakpointLocations: Bindings.BreakpointManager.BreakpointLocation[]):
+      Bindings.BreakpointManager.BreakpointLocation[][] {
+    const map = new Platform.MapUtilities.Multimap<string, Bindings.BreakpointManager.BreakpointLocation>();
+    for (const breakpointLocation of breakpointLocations) {
+      const uiLocation = breakpointLocation.uiLocation;
+      map.set(uiLocation.id(), breakpointLocation);
+    }
+    const arr: Bindings.BreakpointManager.BreakpointLocation[][] = [];
+    for (const id of map.keysArray()) {
+      const locations = Array.from(map.get(id));
+      if (locations.length) {
+        arr.push(locations);
+      }
+    }
+    return arr;
+  }
+
+  #getLocationIdsByLineId(breakpointLocations: Bindings.BreakpointManager.BreakpointLocation[]):
+      Platform.MapUtilities.Multimap<string, string> {
+    const result = new Platform.MapUtilities.Multimap<string, string>();
+
+    for (const breakpointLocation of breakpointLocations) {
+      const uiLocation = breakpointLocation.uiLocation;
+      result.set(uiLocation.lineId(), uiLocation.id());
+    }
+
+    return result;
+  }
+
+  #getBreakpointState(locations: Bindings.BreakpointManager.BreakpointLocation[]):
+      SourcesComponents.BreakpointsView.BreakpointStatus {
+    const hasEnabled = locations.some(location => location.breakpoint.enabled());
+    const hasDisabled = locations.some(location => !location.breakpoint.enabled());
+    let status: SourcesComponents.BreakpointsView.BreakpointStatus;
+    if (hasEnabled) {
+      status = hasDisabled ? SourcesComponents.BreakpointsView.BreakpointStatus.INDETERMINATE :
+                             SourcesComponents.BreakpointsView.BreakpointStatus.ENABLED;
+    } else {
+      status = SourcesComponents.BreakpointsView.BreakpointStatus.DISABLED;
+    }
+    return status;
+  }
+
+  #getContent(locations: Bindings.BreakpointManager.BreakpointLocation[][]): Promise<TextUtils.Text.Text[]> {
+    // Use a cache to share the Text objects between all breakpoints. This way
+    // we share the cached line ending information that Text calculates. This
+    // was very slow to calculate with a lot of breakpoints in the same very
+    // large source file.
+    const contentToTextMap = new Map<string, TextUtils.Text.Text>();
+
+    return Promise.all(locations.map(async ([{uiLocation: {uiSourceCode}}]) => {
+      if (uiSourceCode.mimeType() === 'application/wasm') {
+        // We could mirror the logic from `SourceFrame._ensureContentLoaded()` here
+        // (and if so, ideally share that code somewhere), but that's quite heavy
+        // logic just to display a single Wasm instruction. Also not really clear
+        // how much value this would add. So let's keep it simple for now and don't
+        // display anything additional for Wasm breakpoints, and if there's demand
+        // to display some text preview, we could look into selectively disassemb-
+        // ling the part of the text that we need here.
+        // Relevant crbug: https://crbug.com/1090256
+        return new TextUtils.Text.Text('');
+      }
+      const {content} = await uiSourceCode.requestContent();
+      const contentText = content || '';
+      if (contentToTextMap.has(contentText)) {
+        return contentToTextMap.get(contentText) as TextUtils.Text.Text;
+      }
+      const text = new TextUtils.Text.Text(contentText);
+      contentToTextMap.set(contentText, text);
+      return text;
+    }));
   }
 }

package/front_end/panels/sources/components/breakpointsView.css

@@ -39,7 +39,7 @@ details > summary {
   height: 18px;
   list-style: none;
   display: flex;
-  padding: 4px 4px 4px 6px;
+  padding: 0 4px 0 6px;
   align-items: center;
 }
 

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

@@ -1730,7 +1730,7 @@ UI.Context.registerListener({
   },
   async loadListener() {
     const Sources = await loadSourcesModule();
-    return Sources.JavaScriptBreakpointsSidebarPane.JavaScriptBreakpointsSidebarPane.instance();
+    return Sources.BreakpointsSidebarPane.BreakpointsSidebarController.instance();
   },
 });
 

package/front_end/ui/legacy/SearchableView.ts

@@ -561,6 +561,10 @@ export class SearchableView extends VBox {
   }
 
   private onInput(_event: Event): void {
+    if (!Common.Settings.Settings.instance().moduleSetting('searchAsYouType').get()) {
+      return;
+    }
+
     if (this.valueChangedTimeoutId) {
       clearTimeout(this.valueChangedTimeoutId);
     }

package/package.json

@@ -56,5 +56,5 @@
     "unittest": "scripts/test/run_unittests.py --no-text-coverage",
     "watch": "vpython third_party/node/node.py --output scripts/watch_build.js"
   },
-  "version": "1.0.1040084"
+  "version": "1.0.1040857"
 }

package/front_end/panels/application/components/originTrialTreeView.css

@@ -1,9 +0,0 @@
-/*
- * Copyright (c) 2021 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.
- */
-
-:host {
-  --legacy-item-selection-bg-color: transparent;
-}