chrome-devtools-frontend 1.0.943182 → 1.0.944903

package/front_end/panels/application/BackForwardCacheView.ts

@@ -17,67 +17,67 @@ import backForwardCacheViewStyles from './backForwardCacheView.css.js';
 
 const UIStrings = {
   /**
-   * @description Title text in Back-Forward Cache view of the Application panel
+   * @description Title text in back/forward cache view of the Application panel
    */
   mainFrame: 'Main Frame',
   /**
-   * @description Title text in Back-Forward Cache view of the Application panel
+   * @description Title text in back/forward cache view of the Application panel
    */
-  backForwardCacheTitle: 'Back-Forward Cache',
+  backForwardCacheTitle: 'Back/forward cache',
   /**
    * @description Status text for the status of the main frame
    */
   unavailable: 'unavailable',
   /**
-   * @description Entry name text in the Back-Forward Cache view of the Application panel
+   * @description Entry name text in the back/forward cache view of the Application panel
    */
   url: 'URL',
   /**
-   * @description Entry name text in the Back-Forward Cache view of the Application panel
+   * @description Entry name text in the back/forward cache view of the Application panel
    */
-  bfcacheStatus: 'Back-Forward Cache Status',
+  bfcacheStatus: 'Back/forward cache Status',
   /**
-   * @description Status text for the status of the Back-Forward Cache status
+   * @description Status text for the status of the back/forward cache status
    */
   unknown: 'unknown',
   /**
-   * @description Status text for the status of the Back-Forward Cache status indicating that
-   * the Back-Forward Cache was not used and a normal navigation occured instead.
+   * @description Status text for the status of the back/forward cache status indicating that
+   * the back/forward cache was not used and a normal navigation occured instead.
    */
-  normalNavigation: 'Normal navigation (Not restored from Back-Forward Cache)',
+  normalNavigation: 'Normal navigation (Not restored from back/forward cache)',
   /**
-   * @description Status text for the status of the Back-Forward Cache status indicating that
-   * the Back-Forward Cache was used to restore the page instead of reloading it.
+   * @description Status text for the status of the back/forward cache status indicating that
+   * the back/forward cache was used to restore the page instead of reloading it.
    */
-  restoredFromBFCache: 'Restored from Back-Forward Cache',
+  restoredFromBFCache: 'Restored from back/forward cache',
   /**
    * @description Label for a list of reasons which prevent the page from being eligible for
-   * Back-Forward Cache. These reasons are actionable i.e. they can be cleaned up to make the
-   * page eligible for Back-Forward Cache.
+   * back/forward cache. These reasons are actionable i.e. they can be cleaned up to make the
+   * page eligible for back/forward cache.
    */
   pageSupportNeeded: 'Actionable',
   /**
    * @description Explanation for actionable items which prevent the page from being eligible
-   * for Back-Forward Cache.
+   * for back/forward cache.
    */
   pageSupportNeededExplanation:
-      'These reasons are actionable i.e. they can be cleaned up to make the page eligible for Back-Forward Cache.',
+      'These reasons are actionable i.e. they can be cleaned up to make the page eligible for back/forward cache.',
   /**
    * @description Label for a list of reasons which prevent the page from being eligible for
-   * Back-Forward Cache. These reasons are circumstantial / not actionable i.e. they cannot be
-   * cleaned up by developers to make the page eligible for Back-Forward Cache.
+   * back/forward cache. These reasons are circumstantial / not actionable i.e. they cannot be
+   * cleaned up by developers to make the page eligible for back/forward cache.
    */
   circumstantial: 'Not Actionable',
   /**
    * @description Explanation for circumstantial/non-actionable items which prevent the page from being eligible
-   * for Back-Forward Cache.
+   * for back/forward cache.
    */
   circumstantialExplanation:
       'These reasons are not actionable i.e. caching was prevented by something outside of the direct control of the page.',
   /**
    * @description Label for a list of reasons which prevent the page from being eligible for
-   * Back-Forward Cache. These reasons are pending support by chrome i.e. in a future version
-   * of chrome they will not prevent Back-Forward Cache usage anymore.
+   * back/forward cache. These reasons are pending support by chrome i.e. in a future version
+   * of chrome they will not prevent back/forward cache usage anymore.
    */
   supportPending: 'Pending Support',
   /**
@@ -86,10 +86,10 @@ const UIStrings = {
   runTest: 'Run Test',
   /**
    * @description Explanation for 'pending support' items which prevent the page from being eligible
-   * for Back-Forward Cache.
+   * for back/forward cache.
    */
   supportPendingExplanation:
-      'Chrome support for these reasons is pending i.e. they will not prevent the page from being eligible for Back-Forward Cache in a future version of Chrome.',
+      'Chrome support for these reasons is pending i.e. they will not prevent the page from being eligible for back/forward cache in a future version of Chrome.',
 };
 const str_ = i18n.i18n.registerUIStrings('panels/application/BackForwardCacheView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -168,9 +168,9 @@ export class BackForwardCacheView extends UI.ThrottledWidget.ThrottledWidget {
 
       // We can know whether the current page can use BFCache
       // as the browser navigates to another unrelated page and goes back to the current page.
-      // We chose "chrome://version" because it must be cross-site.
+      // We chose "chrome://terms" because it must be cross-site.
       // Ideally, We want to have our own testing page like "chrome: //bfcache-test".
-      resourceTreeModel.navigate('chrome://version/');
+      resourceTreeModel.navigate('chrome://terms');
     }
   }
 

package/front_end/panels/application/ReportingApiView.ts

@@ -5,22 +5,36 @@
 import * as SDK from '../../core/sdk/sdk.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as ApplicationComponents from './components/components.js';
+import type * as Protocol from '../../generated/protocol.js';
 
 import {ReportingApiReportsView} from './ReportingApiReportsView.js';
 
 export class ReportingApiView extends UI.SplitWidget.SplitWidget {
+  private readonly endpointsGrid = new ApplicationComponents.EndpointsGrid.EndpointsGrid();
+  private endpoints: Map<string, Protocol.Network.ReportingApiEndpoint[]>;
+
   constructor() {
     super(/* isVertical: */ false, /* secondIsSidebar: */ true);
+    this.endpoints = new Map();
     const mainTarget = SDK.TargetManager.TargetManager.instance().mainTarget();
     const networkManager = mainTarget && mainTarget.model(SDK.NetworkManager.NetworkManager);
     if (networkManager) {
+      networkManager.addEventListener(
+          SDK.NetworkManager.Events.ReportingApiEndpointsChangedForOrigin,
+          event => this.onEndpointsChangedForOrigin(event.data), this);
+
       const reportingApiReportsView = new ReportingApiReportsView(networkManager);
       const reportingApiEndpointsView = new UI.Widget.VBox();
       reportingApiEndpointsView.setMinimumSize(0, 40);
-      reportingApiEndpointsView.contentElement.appendChild(new ApplicationComponents.EndpointsGrid.EndpointsGrid());
+      reportingApiEndpointsView.contentElement.appendChild(this.endpointsGrid);
       this.setMainWidget(reportingApiReportsView);
       this.setSidebarWidget(reportingApiEndpointsView);
       networkManager.enableReportingApi();
     }
   }
+
+  private onEndpointsChangedForOrigin(data: Protocol.Network.ReportingApiEndpointsChangedForOriginEvent): void {
+    this.endpoints.set(data.origin, data.endpoints);
+    this.endpointsGrid.data = {endpoints: this.endpoints};
+  }
 }

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

@@ -3,9 +3,12 @@
 // found in the LICENSE file.
 
 import * as i18n from '../../../core/i18n/i18n.js';
+import * as DataGrid from '../../../ui/components/data_grid/data_grid.js';
 import * as ComponentHelpers from '../../../ui/components/helpers/helpers.js';
 import * as LitHtml from '../../../ui/lit-html/lit-html.js';
 
+import type * as Protocol from '../../../generated/protocol.js';
+
 import reportingApiGridStyles from './reportingApiGrid.css.js';
 
 const UIStrings = {
@@ -20,30 +23,86 @@ export const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 const {render, html} = LitHtml;
 
+export interface EndpointsGridData {
+  endpoints: Map<string, Protocol.Network.ReportingApiEndpoint[]>;
+}
+
 export class EndpointsGrid extends HTMLElement {
   static readonly litTagName = LitHtml.literal`devtools-resources-endpoints-grid`;
 
   private readonly shadow = this.attachShadow({mode: 'open'});
+  private endpoints: Map<string, Protocol.Network.ReportingApiEndpoint[]> = new Map();
 
   connectedCallback(): void {
     this.shadow.adoptedStyleSheets = [reportingApiGridStyles];
     this.render();
   }
 
-  // TODO(crbug.com/1200732): Display info about currently configured endpoints
+  set data(data: EndpointsGridData) {
+    this.endpoints = data.endpoints;
+    this.render();
+  }
+
   private render(): void {
+    const endpointsGridData: DataGrid.DataGridController.DataGridControllerData = {
+      columns: [
+        {
+          id: 'origin',
+          title: i18n.i18n.lockedString('Origin'),
+          widthWeighting: 30,
+          hideable: false,
+          visible: true,
+        },
+        {
+          id: 'name',
+          title: i18n.i18n.lockedString('Name'),
+          widthWeighting: 20,
+          hideable: false,
+          visible: true,
+        },
+        {
+          id: 'url',
+          title: i18n.i18n.lockedString('URL'),
+          widthWeighting: 30,
+          hideable: false,
+          visible: true,
+        },
+      ],
+      rows: this.buildReportRows(),
+    };
+
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
     render(html`
       <div class="reporting-container">
         <div class="reporting-header">${i18n.i18n.lockedString('Endpoints')}</div>
-        <div class="reporting-placeholder">
-          <div>${i18nString(UIStrings.noEndpointsToDisplay)}</div>
-        </div>
+        ${this.endpoints.size > 0 ? html`
+          <${DataGrid.DataGridController.DataGridController.litTagName} .data=${
+              endpointsGridData as DataGrid.DataGridController.DataGridControllerData}>
+          </${DataGrid.DataGridController.DataGridController.litTagName}>
+        ` : html`
+          <div class="reporting-placeholder">
+            <div>${i18nString(UIStrings.noEndpointsToDisplay)}</div>
+          </div>
+        `}
       </div>
     `, this.shadow);
     // clang-format on
   }
+
+  private buildReportRows(): DataGrid.DataGridUtils.Row[] {
+    return Array.from(this.endpoints)
+        .map(([origin, endpointArray]) => endpointArray.map(endpoint => {
+          return {
+            cells: [
+              {columnId: 'origin', value: origin},
+              {columnId: 'name', value: endpoint.groupName},
+              {columnId: 'url', value: endpoint.url},
+            ],
+          };
+        }))
+        .flat();
+  }
 }
 
 ComponentHelpers.CustomElements.defineComponent('devtools-resources-endpoints-grid', EndpointsGrid);

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

@@ -47,10 +47,6 @@ const UIStrings = {
   */
   document: 'Document',
   /**
-  *@description Text for web URLs
-  */
-  url: 'URL',
-  /**
   *@description Title for a link to the Sources panel
   */
   clickToRevealInSourcesPanel: 'Click to reveal in Sources panel',
@@ -67,10 +63,6 @@ const UIStrings = {
   */
   clickToRevealInNetworkPanelMight: 'Click to reveal in Network panel (might require page reload)',
   /**
-  *@description Text for the origin of something
-  */
-  origin: 'Origin',
-  /**
   *@description Related node label in Timeline UIUtils of the Performance panel
   */
   ownerElement: 'Owner Element',
@@ -117,11 +109,11 @@ const UIStrings = {
   /**
   *@description Row title for in the Frame Details view
   */
-  crossoriginIsolated: 'Cross-Origin Isolated',
+  crossoriginIsolated: '`Cross-Origin` Isolated',
   /**
   *@description Explanatory text in the Frame Details view
   */
-  localhostIsAlwaysASecureContext: 'Localhost is always a secure context',
+  localhostIsAlwaysASecureContext: '`Localhost` is always a secure context',
   /**
   *@description Explanatory text in the Frame Details view
   */
@@ -131,14 +123,6 @@ const UIStrings = {
   */
   theFramesSchemeIsInsecure: 'The frame\'s scheme is insecure',
   /**
-  *@description Row title in the Frame Details view
-  */
-  crossoriginEmbedderPolicy: 'Cross-Origin Embedder Policy',
-  /**
-  *@description Row title in the Frame Details view
-  */
-  crossoriginOpenerPolicy: 'Cross-Origin Opener Policy',
-  /**
   *@description This label specifies the server endpoints to which the server is reporting errors
   *and warnings through the Report-to API. Following this label will be the URL of the server.
   */
@@ -150,7 +134,8 @@ const UIStrings = {
   /**
   *@description Explanatory text in the Frame Details view for the API availability section
   */
-  availabilityOfCertainApisDepends: 'Availability of certain APIs depends on the document being cross-origin isolated.',
+  availabilityOfCertainApisDepends:
+      'Availability of certain APIs depends on the document being `cross-origin` isolated.',
   /**
   *@description Description of the SharedArrayBuffer status
   */
@@ -167,20 +152,20 @@ const UIStrings = {
   *@description Tooltip for the SharedArrayBuffer availability status
   */
   sharedarraybufferConstructorIs:
-      'SharedArrayBuffer constructor is available and SABs can be transferred via postMessage',
+      '`SharedArrayBuffer` constructor is available and `SABs` can be transferred via `postMessage`',
   /**
   *@description Tooltip for the SharedArrayBuffer availability status
   */
   sharedarraybufferConstructorIsAvailable:
-      'SharedArrayBuffer constructor is available but SABs cannot be transferred via postMessage',
+      '`SharedArrayBuffer` constructor is available but `SABs` cannot be transferred via `postMessage`',
   /**
   *@description Explanation for the SharedArrayBuffer availability status
   */
-  willRequireCrossoriginIsolated: '⚠️ will require cross-origin isolated context in the future',
+  willRequireCrossoriginIsolated: '⚠️ will require `cross-origin` isolated context in the future',
   /**
   *@description Explanation for the SharedArrayBuffer availability status
   */
-  requiresCrossoriginIsolated: 'requires cross-origin isolated context',
+  requiresCrossoriginIsolated: 'requires `cross-origin` isolated context',
   /**
    *@description Explanation for the SharedArrayBuffer availability status in case the transfer of a SAB requires the
    * permission policy `cross-origin-isolated` to be enabled (e.g. because the message refers to the situation in an iframe).
@@ -194,11 +179,12 @@ const UIStrings = {
   /**
   *@description Tooltip for the Measure Memory availability status
   */
-  thePerformanceAPI: 'The performance.measureUserAgentSpecificMemory() API is available',
+  thePerformanceAPI: 'The `performance.measureUserAgentSpecificMemory()` API is available',
   /**
   *@description Tooltip for the Measure Memory availability status
   */
-  thePerformancemeasureuseragentspecificmemory: 'The performance.measureUserAgentSpecificMemory() API is not available',
+  thePerformancemeasureuseragentspecificmemory:
+      'The `performance.measureUserAgentSpecificMemory()` API is not available',
   /**
   *@description Entry in the API availability section of the frame details view
   */
@@ -211,12 +197,13 @@ const UIStrings = {
   *@description Label for a stack trace. If a frame is created programmatically (i.e. via JavaScript), there is a
   * stack trace for the line of code which caused the creation of the iframe. This is the stack trace we are showing here.
   */
-  creationStackTrace: 'Frame Creation Stack Trace',
+  creationStackTrace: 'Frame Creation `Stack Trace`',
   /**
   *@description Tooltip for 'Frame Creation Stack Trace' explaining that the stack
   *trace shows where in the code the frame has been created programmatically
   */
-  creationStackTraceExplanation: 'This frame was created programmatically. The stack trace shows where this happened.',
+  creationStackTraceExplanation:
+      'This frame was created programmatically. The `stack trace` shows where this happened.',
   /**
   *@description Text descripting why a frame has been indentified as an advertisement.
   */
@@ -230,11 +217,11 @@ const UIStrings = {
   *@description Text descripting why a frame has been indentified as an advertisement.
   */
   createdByAdScriptExplanation:
-      'There was an ad script in the (async) stack when this frame was created. Examining the creation stack trace of this frame might provide more insight.',
+      'There was an ad script in the `(async) stack` when this frame was created. Examining the creation `stack trace` of this frame might provide more insight.',
   /**
    *@description Label for a list of origin trials that associated with at least one token.
    */
-  originTrials: 'Origin Trials',
+  // originTrials: 'Origin Trials',
 };
 const str_ = i18n.i18n.registerUIStrings('panels/application/components/FrameDetailsView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -330,7 +317,7 @@ export class FrameDetailsReportView extends HTMLElement {
 
     return LitHtml.html`
     <${ReportView.ReportView.ReportSectionHeader.litTagName}>
-      ${i18nString(UIStrings.originTrials)}
+      ${i18n.i18n.lockedString('Origin Trials')}
       <${IconButton.IconButton.IconButton.litTagName} class="inline-button" .data="${{
       clickHandler: refreshOriginTrials,
       groups: [
@@ -356,7 +343,7 @@ export class FrameDetailsReportView extends HTMLElement {
     return LitHtml.html`
       <${ReportView.ReportView.ReportSectionHeader.litTagName}>${i18nString(UIStrings.document)}</${
         ReportView.ReportView.ReportSectionHeader.litTagName}>
-      <${ReportView.ReportView.ReportKey.litTagName}>${i18nString(UIStrings.url)}</${
+      <${ReportView.ReportView.ReportKey.litTagName}>${i18n.i18n.lockedString('URL')}</${
         ReportView.ReportView.ReportKey.litTagName}>
       <${ReportView.ReportView.ReportValue.litTagName}>
         <div class="inline-items">
@@ -462,7 +449,7 @@ export class FrameDetailsReportView extends HTMLElement {
   private maybeRenderOrigin(): LitHtml.TemplateResult|{} {
     if (this.frame && this.frame.securityOrigin && this.frame.securityOrigin !== '://') {
       return LitHtml.html`
-        <${ReportView.ReportView.ReportKey.litTagName}>${i18nString(UIStrings.origin)}</${
+        <${ReportView.ReportView.ReportKey.litTagName}>${i18n.i18n.lockedString('Origin')}</${
           ReportView.ReportView.ReportKey.litTagName}>
         <${ReportView.ReportView.ReportValue.litTagName}>
           <div class="text-ellipsis" title=${this.frame.securityOrigin}>${this.frame.securityOrigin}</div>
@@ -622,11 +609,11 @@ export class FrameDetailsReportView extends HTMLElement {
         return LitHtml.html`
           ${
             this.maybeRenderCrossOriginStatus(
-                info.coep, i18nString(UIStrings.crossoriginEmbedderPolicy),
+                info.coep, i18n.i18n.lockedString('Cross-Origin Embedder Policy (COEP)'),
                 Protocol.Network.CrossOriginEmbedderPolicyValue.None)}
           ${
             this.maybeRenderCrossOriginStatus(
-                info.coop, i18nString(UIStrings.crossoriginOpenerPolicy),
+                info.coop, i18n.i18n.lockedString('Cross-Origin Opener Policy (COOP)'),
                 Protocol.Network.CrossOriginOpenerPolicyValue.UnsafeNone)}
         `;
       }

package/front_end/panels/console/ConsolePinPane.ts

@@ -255,6 +255,7 @@ export class ConsolePin {
         ]),
         CodeMirror.EditorView.domEventHandlers({blur: (_e, view) => this.onBlur(view)}),
         TextEditor.Config.baseConfiguration(expression),
+        TextEditor.Config.closeBrackets,
         TextEditor.Config.autocompletion,
       ],
     }));