chrome-devtools-frontend 1.0.1012587 → 1.0.1013237

package/config/gni/devtools_grd_files.gni

@@ -847,6 +847,7 @@ grd_files_debug_sources = [
   "front_end/panels/application/components/InterestGroupAccessGrid.js",
   "front_end/panels/application/components/OriginTrialTreeView.js",
   "front_end/panels/application/components/PermissionsPolicySection.js",
+  "front_end/panels/application/components/ProtocolHandlersView.js",
   "front_end/panels/application/components/ReportsGrid.js",
   "front_end/panels/application/components/StackTrace.js",
   "front_end/panels/application/components/TrustTokensView.js",
@@ -857,6 +858,7 @@ grd_files_debug_sources = [
   "front_end/panels/application/components/originTrialTokenRows.css.js",
   "front_end/panels/application/components/originTrialTreeView.css.js",
   "front_end/panels/application/components/permissionsPolicySection.css.js",
+  "front_end/panels/application/components/protocolHandlersView.css.js",
   "front_end/panels/application/components/reportingApiGrid.css.js",
   "front_end/panels/application/components/stackTraceLinkButton.css.js",
   "front_end/panels/application/components/stackTraceRow.css.js",

package/front_end/core/host/UserMetrics.ts

@@ -345,7 +345,8 @@ export enum Action {
   PerfPanelTraceImported = 54,
   PerfPanelTraceExported = 55,
   StackFrameRestarted = 56,
-  MaxValue = 57,
+  CaptureTestProtocolClicked = 57,
+  MaxValue = 58,
 }
 
 /* eslint-disable @typescript-eslint/naming-convention */

package/front_end/core/i18n/locales/en-US.json

@@ -2426,6 +2426,9 @@
   "panels/application/AppManifestView.ts | primaryManifestIconFromS": {
     "message": "Primary manifest icon from {PH1}"
   },
+  "panels/application/AppManifestView.ts | protocolHandlers": {
+    "message": "Protocol Handlers"
+  },
   "panels/application/AppManifestView.ts | screenshot": {
     "message": "Screenshot"
   },
@@ -3197,6 +3200,24 @@
   "panels/application/components/PermissionsPolicySection.ts | showDetails": {
     "message": "Show details"
   },
+  "panels/application/components/ProtocolHandlersView.ts | manifest": {
+    "message": "manifest"
+  },
+  "panels/application/components/ProtocolHandlersView.ts | needHelpReadOur": {
+    "message": "Need help? Read {PH1}."
+  },
+  "panels/application/components/ProtocolHandlersView.ts | protocolDetected": {
+    "message": "Found valid protocol handler registration in the {PH1}. With the app installed, test the registered protocols."
+  },
+  "panels/application/components/ProtocolHandlersView.ts | protocolHandlerRegistrations": {
+    "message": "URL protocol handler registration for PWAs"
+  },
+  "panels/application/components/ProtocolHandlersView.ts | protocolNotDetected": {
+    "message": "Define protocol handlers in the {PH1} to register your app as a handler for custom protocols when your app is installed."
+  },
+  "panels/application/components/ProtocolHandlersView.ts | testProtocol": {
+    "message": "Test protocol"
+  },
   "panels/application/components/ReportsGrid.ts | destination": {
     "message": "Destination"
   },

package/front_end/core/i18n/locales/en-XL.json

@@ -2426,6 +2426,9 @@
   "panels/application/AppManifestView.ts | primaryManifestIconFromS": {
     "message": "P̂ŕîḿâŕŷ ḿâńîf́êśt̂ íĉón̂ f́r̂óm̂ {PH1}"
   },
+  "panels/application/AppManifestView.ts | protocolHandlers": {
+    "message": "P̂ŕôt́ôćôĺ Ĥán̂d́l̂ér̂ś"
+  },
   "panels/application/AppManifestView.ts | screenshot": {
     "message": "Ŝćr̂éêńŝh́ôt́"
   },
@@ -3197,6 +3200,24 @@
   "panels/application/components/PermissionsPolicySection.ts | showDetails": {
     "message": "Ŝh́ôẃ d̂ét̂áîĺŝ"
   },
+  "panels/application/components/ProtocolHandlersView.ts | manifest": {
+    "message": "m̂án̂íf̂éŝt́"
+  },
+  "panels/application/components/ProtocolHandlersView.ts | needHelpReadOur": {
+    "message": "N̂éêd́ ĥél̂ṕ? R̂éâd́ {PH1}."
+  },
+  "panels/application/components/ProtocolHandlersView.ts | protocolDetected": {
+    "message": "F̂óûńd̂ v́âĺîd́ p̂ŕôt́ôćôĺ ĥán̂d́l̂ér̂ ŕêǵîśt̂ŕât́îón̂ ín̂ t́ĥé {PH1}. Ŵít̂h́ t̂h́ê áp̂ṕ îńŝt́âĺl̂éd̂, t́êśt̂ t́ĥé r̂éĝíŝt́êŕêd́ p̂ŕôt́ôćôĺŝ."
+  },
+  "panels/application/components/ProtocolHandlersView.ts | protocolHandlerRegistrations": {
+    "message": "ÛŔL̂ ṕr̂ót̂óĉól̂ h́âńd̂ĺêŕ r̂éĝíŝt́r̂át̂íôń f̂ór̂ ṔŴÁŝ"
+  },
+  "panels/application/components/ProtocolHandlersView.ts | protocolNotDetected": {
+    "message": "D̂éf̂ín̂é p̂ŕôt́ôćôĺ ĥán̂d́l̂ér̂ś îń t̂h́ê {PH1} t́ô ŕêǵîśt̂ér̂ ýôúr̂ áp̂ṕ âś â h́âńd̂ĺêŕ f̂ór̂ ćûśt̂óm̂ ṕr̂ót̂óĉól̂ś ŵh́êń ŷóûŕ âṕp̂ íŝ ín̂śt̂ál̂ĺêd́."
+  },
+  "panels/application/components/ProtocolHandlersView.ts | testProtocol": {
+    "message": "T̂éŝt́ p̂ŕôt́ôćôĺ"
+  },
   "panels/application/components/ReportsGrid.ts | destination": {
     "message": "D̂éŝt́îńât́îón̂"
   },

package/front_end/core/sdk/CSSFontFace.ts

@@ -10,12 +10,14 @@ export class CSSFontFace {
   readonly #fontVariationAxes: Protocol.CSS.FontVariationAxis[];
   readonly #fontVariationAxesByTag: Map<string, Protocol.CSS.FontVariationAxis>;
   readonly #src: Platform.DevToolsPath.UrlString;
+  readonly #fontDisplay: string;
 
   constructor(payload: Protocol.CSS.FontFace) {
     this.#fontFamily = payload.fontFamily;
     this.#fontVariationAxes = payload.fontVariationAxes || [];
     this.#fontVariationAxesByTag = new Map();
     this.#src = payload.src as Platform.DevToolsPath.UrlString;
+    this.#fontDisplay = payload.fontDisplay;
     for (const axis of this.#fontVariationAxes) {
       this.#fontVariationAxesByTag.set(axis.tag, axis);
     }
@@ -29,6 +31,10 @@ export class CSSFontFace {
     return this.#src;
   }
 
+  getFontDisplay(): string {
+    return this.#fontDisplay;
+  }
+
   getVariationAxisByTag(tag: string): Protocol.CSS.FontVariationAxis|undefined {
     return this.#fontVariationAxesByTag.get(tag);
   }

package/front_end/generated/InspectorBackendCommands.js

@@ -287,6 +287,7 @@ export function registerCommands(inspectorBackend) {
     GeolocationInsecureOriginDeprecatedNotRemoved: 'GeolocationInsecureOriginDeprecatedNotRemoved',
     GetUserMediaInsecureOrigin: 'GetUserMediaInsecureOrigin',
     HostCandidateAttributeGetter: 'HostCandidateAttributeGetter',
+    IdentityInCanMakePaymentEvent: 'IdentityInCanMakePaymentEvent',
     InsecurePrivateNetworkSubresourceRequest: 'InsecurePrivateNetworkSubresourceRequest',
     LegacyConstraintGoogIPv6: 'LegacyConstraintGoogIPv6',
     LocalCSSFileExtensionRejected: 'LocalCSSFileExtensionRejected',
@@ -296,6 +297,7 @@ export function registerCommands(inspectorBackend) {
     NotificationInsecureOrigin: 'NotificationInsecureOrigin',
     NotificationPermissionRequestedIframe: 'NotificationPermissionRequestedIframe',
     ObsoleteWebRtcCipherSuite: 'ObsoleteWebRtcCipherSuite',
+    OpenWebDatabaseInsecureContext: 'OpenWebDatabaseInsecureContext',
     PictureSourceSrc: 'PictureSourceSrc',
     PrefixedCancelAnimationFrame: 'PrefixedCancelAnimationFrame',
     PrefixedRequestAnimationFrame: 'PrefixedRequestAnimationFrame',

package/front_end/generated/protocol.ts

@@ -1034,6 +1034,7 @@ export namespace Audits {
     GeolocationInsecureOriginDeprecatedNotRemoved = 'GeolocationInsecureOriginDeprecatedNotRemoved',
     GetUserMediaInsecureOrigin = 'GetUserMediaInsecureOrigin',
     HostCandidateAttributeGetter = 'HostCandidateAttributeGetter',
+    IdentityInCanMakePaymentEvent = 'IdentityInCanMakePaymentEvent',
     InsecurePrivateNetworkSubresourceRequest = 'InsecurePrivateNetworkSubresourceRequest',
     LegacyConstraintGoogIPv6 = 'LegacyConstraintGoogIPv6',
     LocalCSSFileExtensionRejected = 'LocalCSSFileExtensionRejected',
@@ -1043,6 +1044,7 @@ export namespace Audits {
     NotificationInsecureOrigin = 'NotificationInsecureOrigin',
     NotificationPermissionRequestedIframe = 'NotificationPermissionRequestedIframe',
     ObsoleteWebRtcCipherSuite = 'ObsoleteWebRtcCipherSuite',
+    OpenWebDatabaseInsecureContext = 'OpenWebDatabaseInsecureContext',
     PictureSourceSrc = 'PictureSourceSrc',
     PrefixedCancelAnimationFrame = 'PrefixedCancelAnimationFrame',
     PrefixedRequestAnimationFrame = 'PrefixedRequestAnimationFrame',
@@ -1785,6 +1787,10 @@ export namespace CSS {
      * Pseudo element type.
      */
     pseudoType: DOM.PseudoType;
+    /**
+     * Pseudo element custom ident.
+     */
+    pseudoIdentifier?: string;
     /**
      * Matches of CSS rules applicable to the pseudo style.
      */
@@ -3172,6 +3178,11 @@ export namespace DOM {
      * Pseudo element type for this node.
      */
     pseudoType?: PseudoType;
+    /**
+     * Pseudo element identifier for this node. Only present if there is a
+     * valid pseudoType.
+     */
+    pseudoIdentifier?: string;
     /**
      * Shadow root type.
      */
@@ -4760,6 +4771,11 @@ export namespace DOMSnapshot {
      * Type of a pseudo element node.
      */
     pseudoType?: RareStringData;
+    /**
+     * Pseudo element identifier for this node. Only present if there is a
+     * valid pseudoType.
+     */
+    pseudoIdentifier?: RareStringData;
     /**
      * Whether this DOM node responds to mouse clicks. This includes nodes that have had click
      * event listeners attached via JavaScript as well as anchor tags that naturally navigate when

package/front_end/panels/application/AppManifestView.ts

@@ -15,6 +15,7 @@ import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import type * as Protocol from '../../generated/protocol.js';
 import * as IconButton from '../../ui/components/icon_button/icon_button.js';
+import * as ApplicationComponents from './components/components.js';
 
 const UIStrings = {
   /**
@@ -44,6 +45,10 @@ const UIStrings = {
   /**
   *@description Text in App Manifest View of the Application panel
   */
+  protocolHandlers: 'Protocol Handlers',
+  /**
+  *@description Text in App Manifest View of the Application panel
+  */
   icons: 'Icons',
   /**
   *@description Text for the name of something
@@ -423,6 +428,7 @@ export class AppManifestView extends UI.Widget.VBox implements SDK.TargetManager
   private target?: SDK.Target.Target;
   private resourceTreeModel?: SDK.ResourceTreeModel.ResourceTreeModel|null;
   private serviceWorkerManager?: SDK.ServiceWorkerManager.ServiceWorkerManager|null;
+  private protocolHandlersView: ApplicationComponents.ProtocolHandlersView.ProtocolHandlersView;
   constructor() {
     super(true);
 
@@ -448,8 +454,10 @@ export class AppManifestView extends UI.Widget.VBox implements SDK.TargetManager
     this.errorsSection = this.reportView.appendSection(i18nString(UIStrings.errorsAndWarnings));
     this.installabilitySection = this.reportView.appendSection(i18nString(UIStrings.installability));
     this.identitySection = this.reportView.appendSection(i18nString(UIStrings.identity));
-
     this.presentationSection = this.reportView.appendSection(i18nString(UIStrings.presentation));
+    const protocolHandlersSection = this.reportView.appendSection(i18nString(UIStrings.protocolHandlers));
+    this.protocolHandlersView = new ApplicationComponents.ProtocolHandlersView.ProtocolHandlersView();
+    protocolHandlersSection.contentElement.append(this.protocolHandlersView);
     this.iconsSection = this.reportView.appendSection(i18nString(UIStrings.icons), 'report-section-icons');
     this.shortcutSections = [];
     this.screenshotsSections = [];
@@ -701,6 +709,9 @@ export class AppManifestView extends UI.Widget.VBox implements SDK.TargetManager
       this.newNoteUrlField.appendChild(link);
     }
 
+    const protocolHandlers = parsedManifest['protocol_handlers'] || [];
+    this.protocolHandlersView.data = {protocolHandlers, manifestLink: url};
+
     const icons = parsedManifest['icons'] || [];
     this.iconsSection.clearContent();
 

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

@@ -0,0 +1,182 @@
+// Copyright 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 Host from '../../../core/host/host.js';
+import * as i18n from '../../../core/i18n/i18n.js';
+import * as Platform from '../../../core/platform/platform.js';
+import * as Buttons from '../../../ui/components/buttons/buttons.js';
+import * as ComponentHelpers from '../../../ui/components/helpers/helpers.js';
+import * as IconButton from '../../../ui/components/icon_button/icon_button.js';
+import * as Input from '../../../ui/components/input/input.js';
+// inspectorCommonStyles is imported for the chrome-select class that is used for the dropdown
+// eslint-disable-next-line rulesdir/es_modules_import
+import inspectorCommonStyles from '../../../ui/legacy/inspectorCommon.css.js';
+import * as UI from '../../../ui/legacy/legacy.js';
+import * as LitHtml from '../../../ui/lit-html/lit-html.js';
+
+import protocolHandlersViewStyles from './protocolHandlersView.css.js';
+
+const PROTOCOL_DOCUMENT_URL = 'https://web.dev/url-protocol-handler/';
+const UIStrings = {
+  /**
+ *@description Status message for when protocol handlers are detected in the manifest
+ *@example {protocolhandler/manifest.json} PH1
+ */
+  protocolDetected:
+      'Found valid protocol handler registration in the {PH1}. With the app installed, test the registered protocols.',
+  /**
+ *@description Status message for when protocol handlers are not detected in the manifest
+ *@example {protocolhandler/manifest.json} PH1
+ */
+  protocolNotDetected:
+      'Define protocol handlers in the {PH1} to register your app as a handler for custom protocols when your app is installed.',
+  /**
+ *@description Text wrapping a link pointing to more information on handling protocol handlers
+ *@example {https://example.com/} PH1
+ */
+  needHelpReadOur: 'Need help? Read {PH1}.',
+  /**
+ *@description Link text for more information on URL protocol handler registrations for PWAs
+ */
+  protocolHandlerRegistrations: 'URL protocol handler registration for PWAs',
+  /**
+ *@description In text hyperlink to the PWA manifest
+ */
+  manifest: 'manifest',
+  /**
+ *@description Text for test protocol button
+ */
+  testProtocol: 'Test protocol',
+};
+
+const str_ = i18n.i18n.registerUIStrings('panels/application/components/ProtocolHandlersView.ts', UIStrings);
+const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+
+interface HTMLSelectElementEvent extends Event {
+  target: HTMLSelectElement;
+}
+
+interface HTMLInputElementEvent extends Event {
+  target: HTMLInputElement;
+}
+
+export interface ProtocolHandler {
+  protocol: string;
+  url: string;
+}
+
+export interface ProtocolHandlersData {
+  protocolHandlers: ProtocolHandler[];
+  manifestLink: Platform.DevToolsPath.UrlString;
+}
+
+export class ProtocolHandlersView extends HTMLElement {
+  static readonly litTagName = LitHtml.literal`devtools-protocol-handlers-view`;
+  readonly #shadow = this.attachShadow({mode: 'open'});
+  #protocolHandlers: ProtocolHandler[] = [];
+  #manifestLink: Platform.DevToolsPath.UrlString = Platform.DevToolsPath.EmptyUrlString;
+  #selectedProtocolState: string = '';
+  #queryInputState: string = '';
+
+  set data(data: ProtocolHandlersData) {
+    const isNewManifest = this.#manifestLink !== data.manifestLink;
+    this.#protocolHandlers = data.protocolHandlers;
+    this.#manifestLink = data.manifestLink;
+    if (isNewManifest) {
+      this.#update();
+    }
+  }
+
+  #update(): void {
+    this.#queryInputState = '';
+    this.#selectedProtocolState = this.#protocolHandlers[0]?.protocol ?? '';
+    this.#render();
+  }
+
+  #renderStatusMessage(): LitHtml.TemplateResult {
+    const manifestInTextLink = UI.XLink.XLink.create(this.#manifestLink, i18nString(UIStrings.manifest));
+    const statusString = this.#protocolHandlers.length > 0 ? UIStrings.protocolDetected : UIStrings.protocolNotDetected;
+    const iconData: IconButton.Icon.IconData = {
+      iconName: this.#protocolHandlers.length > 0 ? 'ic_checkmark_16x16' : 'ic_info_black_18dp',
+      color: this.#protocolHandlers.length > 0 ? 'var( --color-ic-file-image)' : 'var(--color-link)',
+      width: '16px',
+    };
+    return LitHtml.html`
+    <div class="protocol-handlers-row status">
+            <${IconButton.Icon.Icon.litTagName} class="inline-icon" .data=${iconData as IconButton.Icon.IconData}>
+            </${IconButton.Icon.Icon.litTagName}>
+            ${i18n.i18n.getFormatLocalizedString(str_, statusString, {
+      PH1: manifestInTextLink,
+    })}
+    </div>
+    `;
+  }
+
+  #renderProtocolTest(): LitHtml.LitTemplate {
+    if (this.#protocolHandlers.length === 0) {
+      return LitHtml.nothing;
+    }
+    const protocolOptions = this.#protocolHandlers.filter(p => p.protocol)
+                                .map(p => LitHtml.html`<option value=${p.protocol}>${p.protocol}://</option>`);
+    return LitHtml.html`
+       <div class="protocol-handlers-row">
+        <select class="chrome-select protocol-select" @change=${this.#handleProtocolSelect}>
+           ${protocolOptions}
+        </select>
+        <input .value=${this.#queryInputState} class="devtools-text-input" type="text" @change=${
+        this.#handleQueryInputChange}/>
+        <${Buttons.Button.Button.litTagName} .variant=${Buttons.Button.Variant.PRIMARY} @click=${
+        this.#handleTestProtocolClick}>
+            ${i18nString(UIStrings.testProtocol)}
+        </${Buttons.Button.Button.litTagName}>
+        </div>
+      `;
+  }
+
+  #handleProtocolSelect = (evt: HTMLSelectElementEvent): void => {
+    this.#selectedProtocolState = evt.target.value;
+  };
+
+  #handleQueryInputChange = (evt: HTMLInputElementEvent): void => {
+    this.#queryInputState = evt.target.value;
+    this.#render();
+  };
+
+  #handleTestProtocolClick = (): void => {
+    const protocolURL = `${this.#selectedProtocolState}://${this.#queryInputState}` as Platform.DevToolsPath.UrlString;
+    Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab(protocolURL);
+    Host.userMetrics.actionTaken(Host.UserMetrics.Action.CaptureTestProtocolClicked);
+  };
+
+  connectedCallback(): void {
+    this.#shadow.adoptedStyleSheets = [
+      protocolHandlersViewStyles,
+      inspectorCommonStyles,
+      Input.textInputStyles,
+    ];
+  }
+
+  #render(): void {
+    const protocolDocLink =
+        UI.XLink.XLink.create(PROTOCOL_DOCUMENT_URL, i18nString(UIStrings.protocolHandlerRegistrations));
+    // clang-format off
+    LitHtml.render(LitHtml.html`
+      ${this.#renderStatusMessage()}
+      <div class="protocol-handlers-row">
+          ${i18n.i18n.getFormatLocalizedString(str_, UIStrings.needHelpReadOur, {PH1: protocolDocLink})}
+      </div>
+      ${this.#renderProtocolTest()}
+    `, this.#shadow, {host: this});
+    // clang-format on
+  }
+}
+
+ComponentHelpers.CustomElements.defineComponent('devtools-protocol-handlers-view', ProtocolHandlersView);
+
+declare global {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  interface HTMLElementTagNameMap {
+    'devtools-protocol-handlers-view': ProtocolHandlersView;
+  }
+}

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

@@ -7,6 +7,7 @@ import * as EndpointsGrid from './EndpointsGrid.js';
 import * as FrameDetailsView from './FrameDetailsView.js';
 import * as InterestGroupAccessGrid from './InterestGroupAccessGrid.js';
 import * as OriginTrialTreeView from './OriginTrialTreeView.js';
+import * as ProtocolHandlersView from './ProtocolHandlersView.js';
 import * as ReportsGrid from './ReportsGrid.js';
 import * as StackTrace from './StackTrace.js';
 import * as TrustTokensView from './TrustTokensView.js';
@@ -17,6 +18,7 @@ export {
   FrameDetailsView,
   InterestGroupAccessGrid,
   OriginTrialTreeView,
+  ProtocolHandlersView,
   ReportsGrid,
   StackTrace,
   TrustTokensView,

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

@@ -0,0 +1,39 @@
+/*
+ * 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.
+ */
+
+.devtools-link {
+  color: var(--color-link);
+  text-decoration: underline;
+  cursor: pointer;
+  padding: 2px 0; /* adjust focus ring size */
+}
+
+input.devtools-text-input[type="text"] {
+  padding: 3px 6px;
+  margin-left: 4px;
+  margin-right: 4px;
+  width: 250px;
+  height: 25px;
+}
+
+.protocol-handlers-row {
+  margin: 10px 0 2px 18px;
+}
+
+.inline-icon {
+  vertical-align: text-bottom;
+}
+
+@media (forced-colors: active) {
+  .devtools-link:not(.devtools-link-prevent-click) {
+    color: linktext;
+  }
+
+  .devtools-link:focus-visible {
+    background: Highlight;
+    color: HighlightText;
+  }
+}