chrome-devtools-frontend 1.0.1522585 → 1.0.1525561

package/front_end/panels/network/NetworkLogView.ts

@@ -2512,10 +2512,12 @@ export class NetworkLogView extends Common.ObjectWrapper.eventMixin<EventTypes,
           str.replace(/[`\$"]/g, '`$&').replace(/[^\x20-\x7E]/g, char => '$([char]' + char.charCodeAt(0) + ')') + '"';
     }
 
-    // Generate a WebRequestSession object with the UserAgent and Cookie header values.
-    // This is used to pass the user-agent and cookie headers to Invoke-WebRequest because the Invoke-WebRequest
-    // command does not allow setting these headers through the -Headers parameter. See docs at:
-    // https://docs.microsoft.com/en-us/powershell/module/microsoft.powershell.utility/invoke-webrequest?view=powershell-7.1#parameters
+    /**
+     * Generate a WebRequestSession object with the UserAgent and Cookie header values.
+     * This is used to pass the user-agent and cookie headers to Invoke-WebRequest because the Invoke-WebRequest
+     * command does not allow setting these headers through the -Headers parameter. See docs at:
+     * https://docs.microsoft.com/en-us/powershell/module/microsoft.powershell.utility/invoke-webrequest?view=powershell-7.1#parameters
+     **/
     function generatePowerShellSession(request: SDK.NetworkRequest.NetworkRequest): string|null {
       const requestHeaders = request.requestHeaders();
       const props = [];

package/front_end/panels/network/RequestPreviewView.ts

@@ -8,12 +8,10 @@ import '../../ui/legacy/legacy.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import type * as SDK from '../../core/sdk/sdk.js';
 import * as TextUtils from '../../models/text_utils/text_utils.js';
-import * as LegacyWrapper from '../../ui/components/legacy_wrapper/legacy_wrapper.js';
 import * as SourceFrame from '../../ui/legacy/components/source_frame/source_frame.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
-import * as NetworkComponents from './components/components.js';
 import {RequestHTMLView} from './RequestHTMLView.js';
 import {SignedExchangeInfoView} from './SignedExchangeInfoView.js';
 
@@ -90,11 +88,6 @@ export class RequestPreviewView extends UI.Widget.VBox {
       return new SignedExchangeInfoView(this.request);
     }
 
-    if (this.request.webBundleInfo()) {
-      return LegacyWrapper.LegacyWrapper.legacyWrapper(
-          UI.Widget.VBox, new NetworkComponents.WebBundleInfoView.WebBundleInfoView(this.request));
-    }
-
     const htmlErrorPreview = await this.htmlPreview();
     if (htmlErrorPreview) {
       return htmlErrorPreview;

package/front_end/panels/network/components/RequestHeadersView.ts

@@ -58,10 +58,6 @@ const UIStrings = {
    * @description Text in Request Headers View of the Network panel
    */
   fromSignedexchange: '(from signed-exchange)',
-  /**
-   * @description Text in Request Headers View of the Network panel
-   */
-  fromWebBundle: '(from Web Bundle)',
   /**
    * @description Section header for a list of the main aspects of a http request
    */
@@ -450,8 +446,6 @@ export class RequestHeadersView extends LegacyWrapper.LegacyWrapper.WrappableCom
       comment = i18nString(UIStrings.fromServiceWorker);
     } else if (this.#request.redirectSourceSignedExchangeInfoHasNoErrors()) {
       comment = i18nString(UIStrings.fromSignedexchange);
-    } else if (this.#request.webBundleInnerRequestInfo()) {
-      comment = i18nString(UIStrings.fromWebBundle);
     } else if (this.#request.fromPrefetchCache()) {
       comment = i18nString(UIStrings.fromPrefetchCache);
     } else if (this.#request.cached()) {

package/front_end/panels/network/components/components.ts

@@ -9,7 +9,6 @@ import * as RequestHeaderSection from './RequestHeaderSection.js';
 import * as RequestHeadersView from './RequestHeadersView.js';
 import * as RequestTrustTokensView from './RequestTrustTokensView.js';
 import * as ResponseHeaderSection from './ResponseHeaderSection.js';
-import * as WebBundleInfoView from './WebBundleInfoView.js';
 
 export {
   DirectSocketConnectionView,
@@ -19,5 +18,4 @@ export {
   RequestHeadersView,
   RequestTrustTokensView,
   ResponseHeaderSection,
-  WebBundleInfoView,
 };

package/front_end/panels/profiler/HeapSnapshotDataGrids.ts

@@ -734,7 +734,7 @@ export class HeapSnapshotRetainmentDataGrid extends HeapSnapshotContainmentDataG
   }
 }
 
-// TODO(crbug.com/1228674): Remove this enum, it is only used in web tests.
+/** TODO(crbug.com/1228674): Remove this enum, it is only used in web tests. **/
 export enum HeapSnapshotRetainmentDataGridEvents {
   /* eslint-disable @typescript-eslint/naming-convention -- Used by web_tests. */
   ExpandRetainersComplete = 'ExpandRetainersComplete',

package/front_end/panels/profiler/HeapSnapshotGridNodes.ts

@@ -1084,6 +1084,8 @@ export class HeapSnapshotConstructorNode extends HeapSnapshotGridNode {
   readonly retainedSize: number;
   readonly classKey: string;
 
+  #numberFormatter = new Intl.NumberFormat(i18n.DevToolsLocale.DevToolsLocale.instance().locale);
+
   constructor(
       dataGrid: HeapSnapshotConstructorsDataGrid, classKey: string,
       aggregate: HeapSnapshotModel.HeapSnapshotModel.Aggregate,
@@ -1102,7 +1104,7 @@ export class HeapSnapshotConstructorNode extends HeapSnapshotGridNode {
     const shallowSizePercent = this.shallowSize / snapshot.totalSize * 100.0;
     this.data = {
       object: this.nameInternal,
-      count: Platform.NumberUtilities.withThousandsSeparator(this.count),
+      count: this.#numberFormatter.format(this.count),
       distance: this.toUIDistance(this.distance),
       shallowSize: i18n.ByteUtilities.formatBytesToKb(this.shallowSize),
       retainedSize: i18n.ByteUtilities.formatBytesToKb(this.retainedSize),
@@ -1143,7 +1145,7 @@ export class HeapSnapshotConstructorNode extends HeapSnapshotGridNode {
   override createCell(columnId: string): HTMLElement {
     const cell = columnId === 'object' ? super.createCell(columnId) : this.createValueCell(columnId);
     if (columnId === 'object' && this.count > 1) {
-      cell.appendChild(UI.Fragment.html`<span class="objects-count">×${this.count}</span>`);
+      cell.appendChild(UI.Fragment.html`<span class="objects-count">×${this.data.count}</span>`);
     }
     return cell;
   }

package/front_end/panels/protocol_monitor/ProtocolMonitor.ts

@@ -177,8 +177,8 @@ export interface ViewInput {
   onClear: () => void;
   onSave: () => void;
   onSplitChange: (onlyMain: boolean) => void;
-  onSelect: (e: CustomEvent<HTMLElement|null>) => void;
-  onContextMenu: (e: CustomEvent<{menu: UI.ContextMenu.ContextMenu, element: HTMLElement}>) => void;
+  onSelect: (e: Message|undefined) => void;
+  onContextMenu: (message: Message, menu: UI.ContextMenu.ContextMenu) => void;
   onFilterChanged: (filter: string) => void;
   onCommandChange: (command: string) => void;
   onCommandSubmitted: (input: string) => void;
@@ -230,7 +230,7 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
                                       list="filter-suggestions"
                                       style="flex-grow: 1"
                                       value=${input.filter}
-                                      @change=${(e: Event) => input.onFilterChanged((e.target as HTMLInputElement).value)}>
+                                      @change=${(e: CustomEvent<string>) => input.onFilterChanged(e.detail)}>
                 <datalist id="filter-suggestions">
                   ${input.filterKeys.map(key => html`
                         <option value=${key + ':'}></option>
@@ -243,8 +243,6 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
               <devtools-data-grid
                   striped
                   slot="main"
-                  @select=${input.onSelect}
-                  @contextmenu=${input.onContextMenu}
                   .filters=${input.parseFilter(input.filter)}>
                 <table>
                     <tr>
@@ -275,8 +273,9 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
                     </tr>
                     ${
             input.messages.map(
-                (message, index) => html`
-                      <tr data-index=${index}
+                message => html`
+                      <tr @select=${() => input.onSelect(message)}
+                          @contextmenu=${(e: CustomEvent<UI.ContextMenu.ContextMenu>) => input.onContextMenu(message, e.detail)}
                           style="--override-data-grid-row-background-color: var(--sys-color-surface3)">
                         ${'id' in message ? html`
                           <td title="sent">
@@ -331,8 +330,8 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
                                       list="command-input-suggestions"
                                       placeholder=${i18nString(UIStrings.sendRawCDPCommand)}
                                       title=${i18nString(UIStrings.sendRawCDPCommandExplanation)}
-                                      @change=${(e: Event) => input.onCommandChange((e.target as HTMLInputElement).value)}
-                                      @submit=${(e: Event) => input.onCommandSubmitted((e.target as HTMLInputElement).value)}>
+                                      @change=${(e: CustomEvent<string>) => input.onCommandChange(e.detail)}
+                                      @submit=${(e: CustomEvent<string>) => input.onCommandSubmitted(e.detail)}>
                 <datalist id="command-input-suggestions">
                   ${input.commandSuggestions.map(c => html`<option value=${c}></option>`)}
                 </datalist>
@@ -439,17 +438,11 @@ export class ProtocolMonitorImpl extends UI.Panel.Panel {
       onSave: () => {
         void this.saveAsFile();
       },
-      onSelect: (e: CustomEvent<HTMLElement|null>) => {
-        const index = parseInt(e.detail?.dataset?.index ?? '', 10);
-        this.#selectedMessage = !isNaN(index) ? this.#messages[index] : undefined;
+      onSelect: (message: Message|undefined) => {
+        this.#selectedMessage = message;
         this.requestUpdate();
       },
-      onContextMenu: (e: CustomEvent<{menu: UI.ContextMenu.ContextMenu, element: HTMLElement}>) => {
-        const message = this.#messages[parseInt(e.detail?.element?.dataset?.index || '', 10)];
-        if (message) {
-          this.#populateContextMenu(e.detail.menu, message);
-        }
-      },
+      onContextMenu: this.#populateContextMenu.bind(this),
       onCommandChange: (command: string) => {
         this.#command = command;
       },
@@ -481,7 +474,7 @@ export class ProtocolMonitorImpl extends UI.Panel.Panel {
     this.#view(viewInput, viewOutput, this.contentElement);
   }
 
-  #populateContextMenu(menu: UI.ContextMenu.ContextMenu, message: Message): void {
+  #populateContextMenu(message: Message, menu: UI.ContextMenu.ContextMenu): void {
     /**
      * You can click the "Edit and resend" item in the context menu to be
      * taken to the CDP editor with the filled with the selected command.

package/front_end/panels/search/SearchResultsPane.ts

@@ -107,8 +107,6 @@ const renderSearchMatches =
   return html`
       ${visibleMatches.map(({lineContent, matchRanges, resultLabel}, i) => html`
         <li role="treeitem" class="search-match" @click=${() => onSelectMatch(searchResult, i)}
-          ${UI.TreeOutline.TreeSearch.highlight(matchRanges.map(range =>
-            ({offset: range.offset + `${resultLabel}`.length, length: range.length})), undefined)}
           @keydown=${(event: KeyboardEvent) => {
             if (event.key === 'Enter') {
               onSelectMatch(searchResult, i);
@@ -123,7 +121,8 @@ const renderSearchMatches =
                                 ? i18nString(UIStrings.lineS, {PH1: resultLabel}) : resultLabel}>
               ${resultLabel}
             </span>
-            <span class="search-match-content" aria-label="${lineContent} line">
+            <span class="search-match-content" aria-label="${lineContent} line"
+                  ${UI.TreeOutline.TreeSearch.highlight(matchRanges, undefined)}>
               ${lineContent}
             </span>
           </button>

package/front_end/panels/security/IPProtectionView.ts

@@ -122,7 +122,7 @@ const allStatusStrings = [
 const INCOGNITO_EXPLANATION_URL = 'https://support.google.com/chrome/answer/95464?hl=en&co=GENIE.Platform%3DDesktop' as
     Platform.DevToolsPath.UrlString;
 
-// A simplified representation of a network request for mock data.
+/** A simplified representation of a network request for mock data. **/
 interface MockNetworkRequest {
   requestId: string;
   url: string;

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

@@ -86,6 +86,10 @@ hr.section-separator {
   height: 18px;
 }
 
+.input-field::placeholder {
+    color: var(--sys-color-on-surface-subtle);
+}
+
 .input-field:focus {
   border: 1px solid var(--sys-color-state-focus-ring);
   outline-width: 0;

package/front_end/panels/settings/emulation/utils/StructuredHeaders.ts

@@ -65,8 +65,10 @@ export interface Boolean {
   value: boolean;
 }
 
-//  bare-item = sf-integer / sf-decimal / sf-string / sf-token
-//              / sf-binary / sf-boolean
+/**
+ * bare-item = sf-integer / sf-decimal / sf-string / sf-token
+ * / sf-binary / sf-boolean
+ **/
 export type BareItem = Integer|Decimal|String|Token|Binary|Boolean;
 
 export interface ParamName {
@@ -74,39 +76,43 @@ export interface ParamName {
   value: string;
 }
 
-// parameter     = param-name [ "=" param-value ]
-// param-value   = bare-item
+/**
+ * parameter     = param-name [ "=" param-value ]
+ * param-value   = bare-item
+ **/
 export interface Parameter {
   kind: ResultKind.PARAMETER;
   name: ParamName;
   value: BareItem;
 }
 
-// parameters  = *( ";" *SP parameter )
+/** parameters  = *( ";" *SP parameter ) **/
 export interface Parameters {
   kind: ResultKind.PARAMETERS;
   items: Parameter[];
 }
 
-// sf-item   = bare-item parameters
+/** sf-item   = bare-item parameters **/
 export interface Item {
   kind: ResultKind.ITEM;
   value: BareItem;
   parameters: Parameters;
 }
 
-// inner-list    = "(" *SP [ sf-item *( 1*SP sf-item ) *SP ] ")"
-//                   parameters
+/**
+ * inner-list    = "(" *SP [ sf-item *( 1*SP sf-item ) *SP ] ")"
+ * parameters
+ **/
 export interface InnerList {
   kind: ResultKind.INNER_LIST;
   items: Item[];
   parameters: Parameters;
 }
 
-// list-member = sf-item / inner-list
+/** list-member = sf-item / inner-list **/
 export type ListMember = Item|InnerList;
 
-// sf-list = list-member *( OWS "," OWS list-member )
+/** sf-list = list-member *( OWS "," OWS list-member ) **/
 export interface List {
   kind: ResultKind.LIST;
   items: ListMember[];
@@ -149,9 +155,11 @@ const CHAR_TILDE: number = '~'.charCodeAt(0);
 const CHAR_MIN_ASCII_PRINTABLE = 0x20;
 const CHAR_MAX_ASCII_PRINTABLE = 0x7e;
 
-// Note: structured headers operates over ASCII, not unicode, so these are
-// all indeed supposed to return false on things outside 32-127 range regardless
-// of them being other kinds of digits or letters.
+/**
+ * Note: structured headers operates over ASCII, not unicode, so these are
+ * all indeed supposed to return false on things outside 32-127 range regardless
+ * of them being other kinds of digits or letters.
+ **/
 function isDigit(charCode: number|undefined): boolean {
   // DIGIT = %x30-39 ; 0-9 (from RFC 5234)
   if (charCode === undefined) {
@@ -262,7 +270,7 @@ function makeError(): Error {
   return {kind: ResultKind.ERROR};
 }
 
-// 4.2.1. Parsing a list
+/** 4.2.1. Parsing a list **/
 function parseListInternal(input: Input): List|Error {
   const result: List = {kind: ResultKind.LIST, items: []};
 
@@ -291,7 +299,7 @@ function parseListInternal(input: Input): List|Error {
   return result;  // this case corresponds to an empty list.
 }
 
-// 4.2.1.1.  Parsing an Item or Inner List
+/** 4.2.1.1.  Parsing an Item or Inner List **/
 function parseItemOrInnerList(input: Input): ListMember|Error {
   if (input.peek() === '(') {
     return parseInnerList(input);
@@ -299,7 +307,7 @@ function parseItemOrInnerList(input: Input): ListMember|Error {
   return parseItemInternal(input);
 }
 
-// 4.2.1.2.  Parsing an Inner List
+/** 4.2.1.2.  Parsing an Inner List **/
 function parseInnerList(input: Input): InnerList|Error {
   if (input.peek() !== '(') {
     return makeError();
@@ -335,7 +343,7 @@ function parseInnerList(input: Input): InnerList|Error {
   return makeError();
 }
 
-// 4.2.3.  Parsing an Item
+/** 4.2.3.  Parsing an Item **/
 function parseItemInternal(input: Input): Item|Error {
   const bareItem: BareItem|Error = parseBareItem(input);
   if (bareItem.kind === ResultKind.ERROR) {
@@ -348,7 +356,7 @@ function parseItemInternal(input: Input): Item|Error {
   return {kind: ResultKind.ITEM, value: bareItem, parameters: params};
 }
 
-// 4.2.3.1.  Parsing a Bare Item
+/** 4.2.3.1.  Parsing a Bare Item **/
 function parseBareItem(input: Input): BareItem|Error {
   const upcoming = input.peekCharCode();
   if (upcoming === CHAR_MINUS || isDigit(upcoming)) {
@@ -369,7 +377,7 @@ function parseBareItem(input: Input): BareItem|Error {
   return makeError();
 }
 
-// 4.2.3.2.  Parsing Parameters
+/** 4.2.3.2.  Parsing Parameters **/
 function parseParameters(input: Input): Parameters|Error {
   // The main noteworthy thing here is handling of duplicates and ordering:
   //
@@ -413,7 +421,7 @@ function parseParameters(input: Input): Parameters|Error {
   return {kind: ResultKind.PARAMETERS, items: [...items.values()]};
 }
 
-// 4.2.3.3.  Parsing a Key
+/** 4.2.3.3.  Parsing a Key **/
 function parseKey(input: Input): ParamName|Error {
   let outputString = '';
   const first = input.peekCharCode();
@@ -434,7 +442,7 @@ function parseKey(input: Input): ParamName|Error {
   return {kind: ResultKind.PARAM_NAME, value: outputString};
 }
 
-// 4.2.4.  Parsing an Integer or Decimal
+/** 4.2.4.  Parsing an Integer or Decimal **/
 function parseIntegerOrDecimal(input: Input): Integer|Decimal|Error {
   let resultKind = ResultKind.INTEGER;
   let sign = 1;
@@ -486,7 +494,7 @@ function parseIntegerOrDecimal(input: Input): Integer|Decimal|Error {
   return {kind: ResultKind.DECIMAL, value: sign * Number.parseFloat(inputNumber)};
 }
 
-// 4.2.5.  Parsing a String
+/** 4.2.5.  Parsing a String **/
 function parseString(input: Input): String|Error {
   let outputString = '';
   if (input.peek() !== '"') {
@@ -524,7 +532,7 @@ function parseString(input: Input): String|Error {
   return makeError();
 }
 
-// 4.2.6.  Parsing a Token
+/** 4.2.6.  Parsing a Token **/
 function parseToken(input: Input): Token|Error {
   const first = input.peekCharCode();
   if (first !== CHAR_STAR && !isAlpha(first)) {
@@ -542,7 +550,7 @@ function parseToken(input: Input): Token|Error {
   return {kind: ResultKind.TOKEN, value: outputString};
 }
 
-// 4.2.7.  Parsing a Byte Sequence
+/** 4.2.7.  Parsing a Byte Sequence **/
 function parseByteSequence(input: Input): Binary|Error {
   let outputString = '';
   if (input.peek() !== ':') {
@@ -571,7 +579,7 @@ function parseByteSequence(input: Input): Binary|Error {
   return makeError();
 }
 
-// 4.2.8.  Parsing a Boolean
+/** 4.2.8.  Parsing a Boolean **/
 function parseBoolean(input: Input): Boolean|Error {
   if (input.peek() !== '?') {
     return makeError();
@@ -602,7 +610,7 @@ export function parseList(input: string): List|Error {
   return parseListInternal(new Input(input));
 }
 
-// 4.1.3.  Serializing an Item
+/** 4.1.3.  Serializing an Item **/
 export function serializeItem(input: Item): SerializationResult|Error {
   const bareItemVal = serializeBareItem(input.value);
   if (bareItemVal.kind === ResultKind.ERROR) {
@@ -615,7 +623,7 @@ export function serializeItem(input: Item): SerializationResult|Error {
   return {kind: ResultKind.SERIALIZATION_RESULT, value: bareItemVal.value + paramVal.value};
 }
 
-// 4.1.1.  Serializing a List
+/** 4.1.1.  Serializing a List **/
 export function serializeList(input: List): SerializationResult|Error {
   const outputPieces: string[] = [];
   for (let i = 0; i < input.items.length; ++i) {
@@ -638,7 +646,7 @@ export function serializeList(input: List): SerializationResult|Error {
   return {kind: ResultKind.SERIALIZATION_RESULT, value: output};
 }
 
-// 4.1.1.1.  Serializing an Inner List
+/** 4.1.1.1.  Serializing an Inner List **/
 function serializeInnerList(input: InnerList): SerializationResult|Error {
   const outputPieces: string[] = [];
   for (let i = 0; i < input.items.length; ++i) {
@@ -657,7 +665,7 @@ function serializeInnerList(input: InnerList): SerializationResult|Error {
   return {kind: ResultKind.SERIALIZATION_RESULT, value: output};
 }
 
-// 4.1.1.2.  Serializing Parameters
+/** 4.1.1.2.  Serializing Parameters **/
 function serializeParameters(input: Parameters): SerializationResult|Error {
   let output = '';
   for (const item of input.items) {
@@ -680,7 +688,7 @@ function serializeParameters(input: Parameters): SerializationResult|Error {
   return {kind: ResultKind.SERIALIZATION_RESULT, value: output};
 }
 
-// 4.1.1.3.  Serializing a Key
+/** 4.1.1.3.  Serializing a Key **/
 function serializeKey(input: ParamName): SerializationResult|Error {
   if (input.value.length === 0) {
     return makeError();
@@ -701,7 +709,7 @@ function serializeKey(input: ParamName): SerializationResult|Error {
   return {kind: ResultKind.SERIALIZATION_RESULT, value: input.value};
 }
 
-// 4.1.3.1.  Serializing a Bare Item
+/** 4.1.3.1.  Serializing a Bare Item **/
 function serializeBareItem(input: BareItem): SerializationResult|Error {
   if (input.kind === ResultKind.INTEGER) {
     return serializeInteger(input);
@@ -724,7 +732,7 @@ function serializeBareItem(input: BareItem): SerializationResult|Error {
   return makeError();
 }
 
-// 4.1.4.  Serializing an Integer
+/** 4.1.4.  Serializing an Integer **/
 function serializeInteger(input: Integer): SerializationResult|Error {
   if (input.value < -999999999999999 || input.value > 999999999999999 || !Number.isInteger(input.value)) {
     return makeError();
@@ -732,12 +740,12 @@ function serializeInteger(input: Integer): SerializationResult|Error {
   return {kind: ResultKind.SERIALIZATION_RESULT, value: input.value.toString(10)};
 }
 
-// 4.1.5.  Serializing a Decimal
+/** 4.1.5.  Serializing a Decimal **/
 function serializeDecimal(_input: Decimal): SerializationResult|Error {
   throw new Error('Unimplemented');
 }
 
-// 4.1.6.  Serializing a String
+/** 4.1.6.  Serializing a String **/
 function serializeString(input: String): SerializationResult|Error {
   // Only printable ASCII strings are supported by the spec.
   for (let i = 0; i < input.value.length; ++i) {
@@ -759,7 +767,7 @@ function serializeString(input: String): SerializationResult|Error {
   return {kind: ResultKind.SERIALIZATION_RESULT, value: output};
 }
 
-// 4.1.7.  Serializing a Token
+/** 4.1.7.  Serializing a Token **/
 function serializeToken(input: Token): SerializationResult|Error {
   if (input.value.length === 0) {
     return makeError();
@@ -779,12 +787,12 @@ function serializeToken(input: Token): SerializationResult|Error {
   return {kind: ResultKind.SERIALIZATION_RESULT, value: input.value};
 }
 
-// 4.1.8.  Serializing a Byte Sequence
+/** 4.1.8.  Serializing a Byte Sequence **/
 function serializeByteSequence(_input: Binary): SerializationResult|Error {
   throw new Error('Unimplemented');
 }
 
-// 4.1.9.  Serializing a Boolean
+/** 4.1.9.  Serializing a Boolean **/
 function serializeBoolean(input: Boolean): SerializationResult|Error {
   return {kind: ResultKind.SERIALIZATION_RESULT, value: input.value ? '?1' : '?0'};
 }

package/front_end/panels/sources/BreakpointsViewUtils.ts

@@ -234,15 +234,17 @@ function findDifferentiatingPath(url: string[], allUrls: string[][], startIndex:
   return differentiatingPath;
 }
 
-// This function tries to find a subpath (if available) that we can use to differentiate
-// urls that have the same file name.
-// It does so by 1. removing common suffixes, 2. taking segments of the path (from right to left) until the path is
-// unique.
-//
-// Example:
-//
-//     Paths:  'http://www.google.com/src/a/index.js', 'http://www.google.com/src2/a/index.js'
-//     Output: 'src/…/', 'src2/…/'
+/**
+ * This function tries to find a subpath (if available) that we can use to differentiate
+ * urls that have the same file name.
+ * It does so by 1. removing common suffixes, 2. taking segments of the path (from right to left) until the path is
+ * unique.
+ *
+ * Example:
+ *
+ * Paths:  'http://www.google.com/src/a/index.js', 'http://www.google.com/src2/a/index.js'
+ * Output: 'src/…/', 'src2/…/'
+ **/
 function populateDifferentiatingPathMap(
     urls: Platform.DevToolsPath.UrlString[], urlToDifferentiator: Map<Platform.DevToolsPath.UrlString, string>): void {
   const splitReversedUrls = urls.map(url => {

package/front_end/panels/sources/DebuggerPlugin.ts

@@ -1765,8 +1765,10 @@ export class BreakpointLocationRevealer implements
   }
 }
 
-// Enumerate non-breakable lines (lines without a known corresponding
-// position in the UISource).
+/**
+ * Enumerate non-breakable lines (lines without a known corresponding
+ * position in the UISource).
+ **/
 async function computeNonBreakableLines(
     state: CodeMirror.EditorState, transformer: SourceFrame.SourceFrame.Transformer,
     sourceCode: Workspace.UISourceCode.UISourceCode): Promise<readonly number[]> {
@@ -2043,8 +2045,10 @@ export function getVariableNamesByLine(
   toPos = editorState.doc.lineAt(toPos).from;
   const tree = CodeMirror.syntaxTree(editorState);
 
-  // Sibling scope is a scope that does not contain the current position.
-  // We will exclude variables that are defined (and used in those scopes (since we are currently outside of their lifetime).
+  /**
+   * Sibling scope is a scope that does not contain the current position.
+   * We will exclude variables that are defined (and used in those scopes (since we are currently outside of their lifetime).
+   **/
   function isSiblingScopeNode(node: {name: string, from: number, to: number}): boolean {
     return isScopeNode(node.name) && (node.to < currentPos || currentPos < node.from);
   }

package/front_end/panels/sources/SourcesPanel.ts

@@ -632,7 +632,7 @@ export class SourcesPanel extends UI.Panel.Panel implements
 
   private addExperimentMenuItem(
       menuSection: UI.ContextMenu.Section, experiment: string, menuItem: Common.UIString.LocalizedString): void {
-    // menu handler
+    /** menu handler **/
     function toggleExperiment(): void {
       const checked = Root.Runtime.experiments.isEnabled(experiment);
       Root.Runtime.experiments.setEnabled(experiment, !checked);

package/front_end/panels/sources/UISourceCodeFrame.ts

@@ -663,7 +663,7 @@ const setRowMessages = CodeMirror.StateEffect.define<RowMessages>();
 
 const underlineMark = CodeMirror.Decoration.mark({class: 'cm-waveUnderline'});
 
-// The widget shown at the end of a message annotation.
+/** The widget shown at the end of a message annotation. **/
 class MessageWidget extends CodeMirror.WidgetType {
   constructor(readonly messages: RowMessage[]) {
     super();

package/front_end/panels/timeline/CompatibilityTracksAppender.ts

@@ -150,8 +150,10 @@ export const TrackNames = [
   'Extension',
   'ServerTimings',
 ] as const;
-// Network track will use TrackAppender interface, but it won't be shown in Main flamechart.
-// So manually add it to TrackAppenderName.
+/**
+ * Network track will use TrackAppender interface, but it won't be shown in Main flamechart.
+ * So manually add it to TrackAppenderName.
+ **/
 export type TrackAppenderName = typeof TrackNames[number]|'Network';
 
 export type DrawOverride = PerfUI.FlameChart.DrawOverride;