npm - chrome-devtools-frontend - Versions diffs - 1.0.1012379 → 1.0.1013298 - Mend

chrome-devtools-frontend 1.0.1012379 → 1.0.1013298

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (35) hide show

package/config/gni/devtools_grd_files.gni CHANGED Viewed

@@ -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",
@@ -1252,6 +1254,7 @@ grd_files_debug_sources = [
   "front_end/panels/sources/navigatorTree.css.js",
   "front_end/panels/sources/navigatorView.css.js",
   "front_end/panels/sources/scopeChainSidebarPane.css.js",
+  "front_end/panels/sources/sourcesNavigator.css.js",
   "front_end/panels/sources/sourcesPanel.css.js",
   "front_end/panels/sources/sourcesView.css.js",
   "front_end/panels/sources/threadsSidebarPane.css.js",

package/front_end/core/host/UserMetrics.ts CHANGED Viewed

@@ -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 */
@@ -627,8 +628,9 @@ export enum DevtoolsExperiments {
   'eyedropperColorPicker' = 60,
   'instrumentationBreakpoints' = 61,
   'cssAuthoringHints' = 62,
+  'authoredDeployedGrouping' = 63,
   // Increment this when new experiments are added.
-  'MaxValue' = 63,
+  'MaxValue' = 64,
 }
 /* eslint-enable @typescript-eslint/naming-convention */

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

@@ -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"
   },
@@ -3291,7 +3312,7 @@
     "message": "DOM Storage Items"
   },
   "panels/application/DOMStorageItemsView.ts | domStorageItemsCleared": {
-    "message": "{PH1} cleared"
+    "message": "DOM Storage Items cleared"
   },
   "panels/application/DOMStorageItemsView.ts | domStorageNumberEntries": {
     "message": "Number of entries shown in table: {PH1}"
@@ -9794,6 +9815,9 @@
   "panels/sources/NavigatorView.ts | authored": {
     "message": "Authored"
   },
+  "panels/sources/NavigatorView.ts | authoredTooltip": {
+    "message": "Contains original sources"
+  },
   "panels/sources/NavigatorView.ts | delete": {
     "message": "Delete"
   },
@@ -9803,6 +9827,9 @@
   "panels/sources/NavigatorView.ts | deployed": {
     "message": "Deployed"
   },
+  "panels/sources/NavigatorView.ts | deployedTooltip": {
+    "message": "Contains final sources the browser sees"
+  },
   "panels/sources/NavigatorView.ts | excludeFolder": {
     "message": "Exclude folder"
   },
@@ -10163,6 +10190,9 @@
   "panels/sources/sources-meta.ts | watch": {
     "message": "Watch"
   },
+  "panels/sources/SourcesNavigator.ts | authoredDescription": {
+    "message": "Group files by Authored/Deployed"
+  },
   "panels/sources/SourcesNavigator.ts | clearConfiguration": {
     "message": "Clear configuration"
   },
@@ -10233,7 +10263,7 @@
     "message": "Drop workspace folder here"
   },
   "panels/sources/SourcesPanel.ts | groupByAuthored": {
-    "message": "Group by Authored/Deployed (experimental)"
+    "message": "Group by Authored/Deployed"
   },
   "panels/sources/SourcesPanel.ts | groupByFolder": {
     "message": "Group by folder"
@@ -11906,9 +11936,15 @@
   "ui/components/panel_feedback/PanelFeedback.ts | videoAndDocumentation": {
     "message": "Video and documentation"
   },
+  "ui/components/panel_feedback/PreviewToggle.ts | learnMoreLink": {
+    "message": "Learn More"
+  },
   "ui/components/panel_feedback/PreviewToggle.ts | previewTextFeedbackLink": {
     "message": "Send us your feedback."
   },
+  "ui/components/panel_feedback/PreviewToggle.ts | shortFeedbackLink": {
+    "message": "Send feedback"
+  },
   "ui/components/request_link_icon/RequestLinkIcon.ts | clickToShowRequestInTheNetwork": {
     "message": "Click to open the network panel and show request for URL: {url}"
   },

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

@@ -2426,6 +2426,9 @@
   "panels/application/AppManifestView.ts | primaryManifestIconFromS": {
     "message": "P̂ŕîḿâŕŷ ḿâńîf́êśt̂ íĉón̂ f́r̂óm̂ {PH1}"
   },
+  "panels/application/AppManifestView.ts | protocolHandlers": {
+    "message": "P̂ŕôt́ôćôĺ Ĥán̂d́l̂ér̂ś"
+  },
   "panels/application/AppManifestView.ts | screenshot": {
     "message": "Ŝćr̂éêńŝh́ôt́"
   },
@@ -3197,6 +3200,24 @@
   "panels/application/components/PermissionsPolicySection.ts | showDetails": {
     "message": "Ŝh́ôẃ d̂ét̂áîĺŝ"
   },
+  "panels/application/components/ProtocolHandlersView.ts | manifest": {
+    "message": "m̂án̂íf̂éŝt́"
+  },
+  "panels/application/components/ProtocolHandlersView.ts | needHelpReadOur": {
+    "message": "N̂éêd́ ĥél̂ṕ? R̂éâd́ {PH1}."
+  },
+  "panels/application/components/ProtocolHandlersView.ts | protocolDetected": {
+    "message": "F̂óûńd̂ v́âĺîd́ p̂ŕôt́ôćôĺ ĥán̂d́l̂ér̂ ŕêǵîśt̂ŕât́îón̂ ín̂ t́ĥé {PH1}. Ŵít̂h́ t̂h́ê áp̂ṕ îńŝt́âĺl̂éd̂, t́êśt̂ t́ĥé r̂éĝíŝt́êŕêd́ p̂ŕôt́ôćôĺŝ."
+  },
+  "panels/application/components/ProtocolHandlersView.ts | protocolHandlerRegistrations": {
+    "message": "ÛŔL̂ ṕr̂ót̂óĉól̂ h́âńd̂ĺêŕ r̂éĝíŝt́r̂át̂íôń f̂ór̂ ṔŴÁŝ"
+  },
+  "panels/application/components/ProtocolHandlersView.ts | protocolNotDetected": {
+    "message": "D̂éf̂ín̂é p̂ŕôt́ôćôĺ ĥán̂d́l̂ér̂ś îń t̂h́ê {PH1} t́ô ŕêǵîśt̂ér̂ ýôúr̂ áp̂ṕ âś â h́âńd̂ĺêŕ f̂ór̂ ćûśt̂óm̂ ṕr̂ót̂óĉól̂ś ŵh́êń ŷóûŕ âṕp̂ íŝ ín̂śt̂ál̂ĺêd́."
+  },
+  "panels/application/components/ProtocolHandlersView.ts | testProtocol": {
+    "message": "T̂éŝt́ p̂ŕôt́ôćôĺ"
+  },
   "panels/application/components/ReportsGrid.ts | destination": {
     "message": "D̂éŝt́îńât́îón̂"
   },
@@ -3291,7 +3312,7 @@
     "message": "D̂ÓM̂ Śt̂ór̂áĝé Ît́êḿŝ"
   },
   "panels/application/DOMStorageItemsView.ts | domStorageItemsCleared": {
-    "message": "{PH1} ĉĺêár̂éd̂"
+    "message": "D̂ÓM̂ Śt̂ór̂áĝé Ît́êḿŝ ćl̂éâŕêd́"
   },
   "panels/application/DOMStorageItemsView.ts | domStorageNumberEntries": {
     "message": "N̂úm̂b́êŕ ôf́ êńt̂ŕîéŝ śĥóŵń îń t̂áb̂ĺê: {PH1}"
@@ -9794,6 +9815,9 @@
   "panels/sources/NavigatorView.ts | authored": {
     "message": "Âút̂h́ôŕêd́"
   },
+  "panels/sources/NavigatorView.ts | authoredTooltip": {
+    "message": "Ĉón̂t́âín̂ś ôŕîǵîńâĺ ŝóûŕĉéŝ"
+  },
   "panels/sources/NavigatorView.ts | delete": {
     "message": "D̂él̂ét̂é"
   },
@@ -9803,6 +9827,9 @@
   "panels/sources/NavigatorView.ts | deployed": {
     "message": "D̂ép̂ĺôýêd́"
   },
+  "panels/sources/NavigatorView.ts | deployedTooltip": {
+    "message": "Ĉón̂t́âín̂ś f̂ín̂ál̂ śôúr̂ćêś t̂h́ê b́r̂óŵśêŕ ŝéêś"
+  },
   "panels/sources/NavigatorView.ts | excludeFolder": {
     "message": "Êx́ĉĺûd́ê f́ôĺd̂ér̂"
   },
@@ -10163,6 +10190,9 @@
   "panels/sources/sources-meta.ts | watch": {
     "message": "Ŵát̂ćĥ"
   },
+  "panels/sources/SourcesNavigator.ts | authoredDescription": {
+    "message": "Ĝŕôúp̂ f́îĺêś b̂ý Âút̂h́ôŕêd́/D̂ép̂ĺôýêd́"
+  },
   "panels/sources/SourcesNavigator.ts | clearConfiguration": {
     "message": "Ĉĺêár̂ ćôńf̂íĝúr̂át̂íôń"
   },
@@ -10233,7 +10263,7 @@
     "message": "D̂ŕôṕ ŵór̂ḱŝṕâćê f́ôĺd̂ér̂ h́êŕê"
   },
   "panels/sources/SourcesPanel.ts | groupByAuthored": {
-    "message": "Ĝŕôúp̂ b́ŷ Áût́ĥór̂éd̂/D́êṕl̂óŷéd̂ (éx̂ṕêŕîḿêńt̂ál̂)"
+    "message": "Ĝŕôúp̂ b́ŷ Áût́ĥór̂éd̂/D́êṕl̂óŷéd̂"
   },
   "panels/sources/SourcesPanel.ts | groupByFolder": {
     "message": "Ĝŕôúp̂ b́ŷ f́ôĺd̂ér̂"
@@ -11906,9 +11936,15 @@
   "ui/components/panel_feedback/PanelFeedback.ts | videoAndDocumentation": {
     "message": "V̂íd̂éô án̂d́ d̂óĉúm̂én̂t́ât́îón̂"
   },
+  "ui/components/panel_feedback/PreviewToggle.ts | learnMoreLink": {
+    "message": "L̂éâŕn̂ Ḿôŕê"
+  },
   "ui/components/panel_feedback/PreviewToggle.ts | previewTextFeedbackLink": {
     "message": "Ŝén̂d́ ûś ŷóûŕ f̂éêd́b̂áĉḱ."
   },
+  "ui/components/panel_feedback/PreviewToggle.ts | shortFeedbackLink": {
+    "message": "Ŝén̂d́ f̂éêd́b̂áĉḱ"
+  },
   "ui/components/request_link_icon/RequestLinkIcon.ts | clickToShowRequestInTheNetwork": {
     "message": "Ĉĺîćk̂ t́ô óp̂én̂ t́ĥé n̂ét̂ẃôŕk̂ ṕâńêĺ âńd̂ śĥóŵ ŕêq́ûéŝt́ f̂ór̂ ÚR̂Ĺ: {url}"
   },

package/front_end/core/root/Runtime.ts CHANGED Viewed

@@ -292,6 +292,7 @@ export enum ExperimentName {
   EYEDROPPER_COLOR_PICKER = 'eyedropperColorPicker',
   INSTRUMENTATION_BREAKPOINTS = 'instrumentationBreakpoints',
   CSS_AUTHORING_HINTS = 'cssAuthoringHints',
+  AUTHORED_DEPLOYED_GROUPING = 'authoredDeployedGrouping',
 }
 // TODO(crbug.com/1167717): Make this a const enum again

package/front_end/core/sdk/CSSFontFace.ts CHANGED Viewed

@@ -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/entrypoints/main/MainImpl.ts CHANGED Viewed

@@ -402,6 +402,10 @@ export class MainImpl {
     Root.Runtime.experiments.register(
         Root.Runtime.ExperimentName.EYEDROPPER_COLOR_PICKER, 'Enable color picking outside the browser window');
+    // Change grouping of sources panel to use Authored/Deployed trees
+    Root.Runtime.experiments.register(
+        Root.Runtime.ExperimentName.AUTHORED_DEPLOYED_GROUPING, 'Group sources into Authored and Deployed trees');
     Root.Runtime.experiments.enableExperimentsByDefault([
       'sourceOrderViewer',
       'hideIssuesFeature',

package/front_end/generated/InspectorBackendCommands.js CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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/DOMStorageItemsView.ts CHANGED Viewed

@@ -53,14 +53,14 @@ const UIStrings = {
   */
   value: 'Value',
   /**
-  *@description Data grid name for DOM Storage Items data grids
+  *@description Name for the "DOM Storage Items" table that shows the content of the DOM Storage.
   */
   domStorageItems: 'DOM Storage Items',
   /**
-   *@description Text for announcing number of entries after filtering
-   *@example {'DOM Storage Items'} PH1
+   *@description Text for announcing that the "DOM Storage Items" table was cleared, that is, all
+   * entries were deleted.
    */
-  domStorageItemsCleared: '{PH1} cleared',
+  domStorageItemsCleared: 'DOM Storage Items cleared',
   /**
   *@description Text in DOMStorage Items View of the Application panel
   */
@@ -154,7 +154,7 @@ export class DOMStorageItemsView extends StorageItemsView {
     this.dataGrid.rootNode().removeChildren();
     this.dataGrid.addCreationNode(false);
-    UI.ARIAUtils.alert(i18nString(UIStrings.domStorageItemsCleared, {PH1: this.dataGrid.displayName}));
+    UI.ARIAUtils.alert(i18nString(UIStrings.domStorageItemsCleared));
     this.setCanDeleteSelected(false);
   }

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

@@ -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 CHANGED Viewed

@@ -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,