chrome-devtools-frontend 1.0.1362775 → 1.0.1367881

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

@@ -2,12 +2,15 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import '../../../ui/components/data_grid/data_grid.js';
+import '../../../ui/components/icon_button/icon_button.js';
+
 import * as Common from '../../../core/common/common.js';
 import * as i18n from '../../../core/i18n/i18n.js';
 import type * as SDK from '../../../core/sdk/sdk.js';
 import {PanelUtils} from '../../../panels/utils/utils.js';
-import * as DataGrid from '../../../ui/components/data_grid/data_grid.js';
-import * as IconButton from '../../../ui/components/icon_button/icon_button.js';
+import type * as DataGrid from '../../../ui/components/data_grid/data_grid.js';
+import type * as IconButton from '../../../ui/components/icon_button/icon_button.js';
 import * as LegacyWrapper from '../../../ui/components/legacy_wrapper/legacy_wrapper.js';
 import * as LitHtml from '../../../ui/lit-html/lit-html.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
@@ -26,7 +29,6 @@ const str_ = i18n.i18n.registerUIStrings('panels/network/components/WebBundleInf
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 export class WebBundleInfoView extends LegacyWrapper.LegacyWrapper.WrappableComponent {
-  static readonly litTagName = LitHtml.literal`devtools-web-bundle-info`;
   readonly #shadow = this.attachShadow({mode: 'open'});
   #webBundleInfo: Readonly<SDK.NetworkRequest.WebBundleInfo>;
   #webBundleName: Readonly<string>;
@@ -60,9 +62,9 @@ export class WebBundleInfoView extends LegacyWrapper.LegacyWrapper.WrappableComp
             renderer(): LitHtml.TemplateResult {
               return html`
                 <div style="display: flex;">
-                  <${IconButton.Icon.Icon.litTagName} class="icon"
+                  <devtools-icon class="icon"
                     .data=${{...iconData, width: '20px'} as IconButton.Icon.IconData}>
-                  </${IconButton.Icon.Icon.litTagName}>
+                  </devtools-icon>
                   <span>${url}</span>
                 </div>`;
             },
@@ -73,21 +75,21 @@ export class WebBundleInfoView extends LegacyWrapper.LegacyWrapper.WrappableComp
     render(
         html`
       <div class="header">
-        <${IconButton.Icon.Icon.litTagName} class="icon"
+        <devtools-icon class="icon"
           .data=${{color: 'var(--icon-default)', iconName: 'bundle', width: '20px'} as IconButton.Icon.IconData}>
-        </${IconButton.Icon.Icon.litTagName}>
+        </devtools-icon>
         <span>${this.#webBundleName}</span>
         <x-link href="https://web.dev/web-bundles/#explaining-web-bundles"
           jslog=${VisualLogging.link('webbundle-explainer').track({
           click: true,
         })}>
-          <${IconButton.Icon.Icon.litTagName} class="icon"
+          <devtools-icon class="icon"
             .data=${{color: 'var(--icon-default)', iconName: 'help', width: '16px'} as IconButton.Icon.IconData}>
-          </${IconButton.Icon.Icon.litTagName}>
+          </devtools-icon>
         </x-link>
       </div>
       <div>
-        <${DataGrid.DataGrid.DataGrid.litTagName}
+        <devtools-data-grid
           .data=${{
           columns: [
             {
@@ -101,7 +103,7 @@ export class WebBundleInfoView extends LegacyWrapper.LegacyWrapper.WrappableComp
           rows,
           activeSort: null,
         } as DataGrid.DataGrid.DataGridData}>
-        </${DataGrid.DataGrid.DataGrid.litTagName}>
+        </devtools-data-grid>
       </div>`,
         this.#shadow, {host: this});
   }

package/front_end/panels/network/network.ts

@@ -41,6 +41,7 @@ import * as NetworkPanel from './NetworkPanel.js';
 import * as NetworkSearchScope from './NetworkSearchScope.js';
 import * as NetworkTimeCalculator from './NetworkTimeCalculator.js';
 import * as NetworkWaterfallColumn from './NetworkWaterfallColumn.js';
+import * as RequestBinaryResponseView from './RequestBinaryResponseView.js';
 import * as RequestCookiesView from './RequestCookiesView.js';
 import * as RequestHTMLView from './RequestHTMLView.js';
 import * as RequestInitiatorView from './RequestInitiatorView.js';
@@ -67,6 +68,7 @@ export {
   NetworkSearchScope,
   NetworkTimeCalculator,
   NetworkWaterfallColumn,
+  RequestBinaryResponseView,
   RequestCookiesView,
   RequestHTMLView,
   RequestInitiatorView,

package/front_end/panels/network/networkConfigView.css

@@ -85,6 +85,10 @@
 .network-config-ua .chrome-select {
   width: calc(100% - 20px);
   max-width: 250px;
+
+  &:disabled {
+    opacity: unset;
+  }
 }
 
 .network-config-ua span[is="dt-radio"] {
@@ -92,15 +96,18 @@
 }
 
 .network-config-ua-custom {
-  opacity: 50%;
   padding-bottom: 8px;
-}
+  opacity: 38%;
+  pointer-events: none;
 
-.network-config-ua-custom.checked {
-  opacity: 100%;
+  &.checked {
+    opacity: revert;
+    pointer-events: revert;
+  }
 }
 
-.client-hints-form {
+devtools-user-agent-client-hints-form {
+  display: block;
   margin-top: 14px;
   width: min(100%, 400px);
 }

package/front_end/panels/network/networkLogView.css

@@ -165,10 +165,6 @@
   color: var(--sys-color-error);
 }
 
-/* We are using a multitude of different selector specificity rules here, which
-   is incompatible with what stylelint requires as ordering of the rules. */
-/* stylelint-disable no-descending-specificity */
-
 .network-log-grid.data-grid tr.selected,
 .network-log-grid.data-grid tr.selected .network-cell-subtitle,
 .network-log-grid.data-grid tr.selected .network-dim-cell {
@@ -198,8 +194,6 @@
 .network-log-grid tr.highlighted-row {
   animation: network-row-highlight-fadeout 2s 0s;
 }
-/* See comment above why the rules were disabled */
-/* stylelint-enable no-descending-specificity */
 
 @keyframes network-row-highlight-fadeout {
   from {
@@ -212,8 +206,8 @@
 }
 
 /* Resource preview icons */
-/* These rules are grouped by type and therefore do not adhere to the ordering of stylelint */
-/* stylelint-disable no-descending-specificity, no-duplicate-selectors */
+/* These rules are grouped by type */
+/* stylelint-disable no-duplicate-selectors */
 
 .network-log-grid.data-grid .icon.image {
   position: relative;
@@ -271,10 +265,9 @@
 .network-log-grid.data-grid .trailing-link-icon {
   padding-left: 0.5ex;
 }
-/* stylelint-enable no-descending-specificity, no-duplicate-selectors */
+/* stylelint-enable no-duplicate-selectors */
 /* This is part of the large color block declared above, but should not be
    extracted out. */
-/* stylelint-disable-next-line no-descending-specificity */
 .network-dim-cell {
   color: var(--sys-color-token-subtle);
 }
@@ -356,8 +349,8 @@
   font-weight: normal;
   padding: 0 4px;
 }
+
 /* All network-waterfall-header rules are defined here instead of above */
-/* stylelint-disable-next-line no-descending-specificity */
 .network-waterfall-header .sort-order-icon-container {
   position: absolute;
   top: 1px;
@@ -410,9 +403,6 @@
     color: linktext;
   }
 
-  /* This is part of the large color block declared above, but should not be
-   extracted out. */
-  /* stylelint-disable no-descending-specificity */
   .network-log-grid.data-grid tbody tr.revealed.selected,
   .network-log-grid.data-grid:focus-within tbody tr.revealed.selected,
   .network-log-grid.data-grid:focus-within tr.selected .network-dim-cell,
@@ -422,7 +412,6 @@
   .network-waterfall-header:hover * {
     color: HighlightText;
   }
-  /* stylelint-enable no-descending-specificity */
 
   .network-log-grid {
     --color-grid-default: canvas;

package/front_end/panels/network/requestHTMLView.css

@@ -8,6 +8,7 @@
   box-shadow: var(--drop-shadow);
   /* We always want a white background, even in dark mode */
   background: var(--ref-palette-neutral100);
+  color-scheme: light;
   flex-grow: 1;
   margin: 20px;
 }

package/front_end/panels/profiler/BottomUpProfileDataGrid.ts

@@ -33,11 +33,11 @@
 // because a root node can represent itself AND an ancestor.
 
 import * as Platform from '../../core/platform/platform.js';
+import type * as CPUProfile from '../../models/cpu_profile/cpu_profile.js';
 import type * as UI from '../../ui/legacy/legacy.js';
 
-import {ProfileDataGridNode, ProfileDataGridTree, type Formatter} from './ProfileDataGrid.js';
-import {type TopDownProfileDataGridTree} from './TopDownProfileDataGrid.js';
-import type * as CPUProfile from '../../models/cpu_profile/cpu_profile.js';
+import {type Formatter, ProfileDataGridNode, ProfileDataGridTree} from './ProfileDataGrid.js';
+import type {TopDownProfileDataGridTree} from './TopDownProfileDataGrid.js';
 
 export interface NodeInfo {
   ancestor: CPUProfile.ProfileTreeModel.ProfileNode;

package/front_end/panels/profiler/HeapProfileView.ts

@@ -14,7 +14,7 @@ import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
 import {Events, HeapTimelineOverview, type IdsRangeChangedEvent, type Samples} from './HeapTimelineOverview.js';
-import {type Formatter, type ProfileDataGridNode} from './ProfileDataGrid.js';
+import type {Formatter, ProfileDataGridNode} from './ProfileDataGrid.js';
 import {ProfileFlameChartDataProvider} from './ProfileFlameChartDataProvider.js';
 import {ProfileEvents, type ProfileHeader, ProfileType} from './ProfileHeader.js';
 import {ProfileView, WritableProfileHeader} from './ProfileView.js';

package/front_end/panels/profiler/HeapProfilerPanel.ts

@@ -7,8 +7,8 @@ import * as i18n from '../../core/i18n/i18n.js';
 import type * as SDK from '../../core/sdk/sdk.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
-import {type HeapSnapshotView} from './HeapSnapshotView.js';
-import {type ProfileType} from './ProfileHeader.js';
+import type {HeapSnapshotView} from './HeapSnapshotView.js';
+import type {ProfileType} from './ProfileHeader.js';
 import {ProfilesPanel} from './ProfilesPanel.js';
 import {instance} from './ProfileTypeRegistry.js';
 

package/front_end/panels/profiler/HeapSnapshotDataGrids.ts

@@ -45,9 +45,9 @@ import {
   HeapSnapshotObjectNode,
   HeapSnapshotRetainingObjectNode,
 } from './HeapSnapshotGridNodes.js';
-import {type HeapSnapshotProxy} from './HeapSnapshotProxy.js';
-import {type HeapProfileHeader} from './HeapSnapshotView.js';
-import {type DataDisplayDelegate} from './ProfileHeader.js';
+import type {HeapSnapshotProxy} from './HeapSnapshotProxy.js';
+import type {HeapProfileHeader} from './HeapSnapshotView.js';
+import type {DataDisplayDelegate} from './ProfileHeader.js';
 
 const UIStrings = {
   /**

package/front_end/panels/profiler/HeapSnapshotGridNodes.ts

@@ -39,7 +39,7 @@ import * as DataGrid from '../../ui/legacy/components/data_grid/data_grid.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
-import {type ChildrenProvider} from './ChildrenProvider.js';
+import type {ChildrenProvider} from './ChildrenProvider.js';
 import {
   type AllocationDataGrid,
   type HeapSnapshotConstructorsDataGrid,
@@ -47,8 +47,8 @@ import {
   type HeapSnapshotSortableDataGrid,
   HeapSnapshotSortableDataGridEvents,
 } from './HeapSnapshotDataGrids.js';
-import {type HeapSnapshotProviderProxy, type HeapSnapshotProxy} from './HeapSnapshotProxy.js';
-import {type DataDisplayDelegate} from './ProfileHeader.js';
+import type {HeapSnapshotProviderProxy, HeapSnapshotProxy} from './HeapSnapshotProxy.js';
+import type {DataDisplayDelegate} from './ProfileHeader.js';
 
 const UIStrings = {
   /**

package/front_end/panels/profiler/HeapSnapshotProxy.ts

@@ -32,7 +32,7 @@ import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import type * as HeapSnapshotModel from '../../models/heap_snapshot_model/heap_snapshot_model.js';
 
-import {type ChildrenProvider} from './ChildrenProvider.js';
+import type {ChildrenProvider} from './ChildrenProvider.js';
 
 const UIStrings = {
   /**

package/front_end/panels/profiler/ProfileLauncherView.ts

@@ -34,9 +34,9 @@ import * as Buttons from '../../ui/components/buttons/buttons.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
 import {IsolateSelector} from './IsolateSelector.js';
-import {type ProfileType} from './ProfileHeader.js';
+import type {ProfileType} from './ProfileHeader.js';
 import profileLauncherViewStyles from './profileLauncherView.css.js';
-import {type ProfilesPanel} from './ProfilesPanel.js';
+import type {ProfilesPanel} from './ProfilesPanel.js';
 
 const UIStrings = {
   /**
@@ -195,7 +195,7 @@ export class ProfileLauncherView extends Common.ObjectWrapper.eventMixin<EventTy
   restoreSelectedProfileType(): void {
     let typeId = this.selectedProfileTypeSetting.get();
     if (!this.typeIdToOptionElementAndProfileType.has(typeId)) {
-      typeId = this.typeIdToOptionElementAndProfileType.keys().next().value;
+      typeId = this.typeIdToOptionElementAndProfileType.keys().next().value as string;
       this.selectedProfileTypeSetting.set(typeId);
     }
 

package/front_end/panels/protocol_monitor/ProtocolMonitor.ts

@@ -19,6 +19,8 @@ import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 import * as Components from './components/components.js';
 import protocolMonitorStyles from './protocolMonitor.css.js';
 
+const {html} = LitHtml;
+
 const UIStrings = {
   /**
    *@description Text for one or a group of functions
@@ -125,7 +127,7 @@ const str_ = i18n.i18n.registerUIStrings('panels/protocol_monitor/ProtocolMonito
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 const timeRenderer = (value: DataGrid.DataGridUtils.CellValue): LitHtml.TemplateResult => {
-  return LitHtml.html`${i18nString(UIStrings.sMs, {PH1: String(value)})}`;
+  return html`${i18nString(UIStrings.sMs, {PH1: String(value)})}`;
 };
 
 export const buildProtocolMetadata = (domains: Iterable<ProtocolDomain>):
@@ -714,7 +716,7 @@ export class CommandAutocompleteSuggestionProvider {
     }
     this.#commandHistory.add(value);
     if (this.#commandHistory.size > this.#maxHistorySize) {
-      const earliestEntry = this.#commandHistory.values().next().value;
+      const earliestEntry = this.#commandHistory.values().next().value as string;
       this.#commandHistory.delete(earliestEntry);
     }
   }

package/front_end/panels/protocol_monitor/components/JSONEditor.ts

@@ -1,13 +1,17 @@
 // Copyright 2023 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 './Toolbar.js';
+import '../../../ui/components/icon_button/icon_button.js';
+import '../../../ui/components/menus/menus.js';
+
 import * as Host from '../../../core/host/host.js';
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as SDK from '../../../core/sdk/sdk.js';
 import * as Buttons from '../../../ui/components/buttons/buttons.js';
 import * as Dialogs from '../../../ui/components/dialogs/dialogs.js';
-import * as IconButton from '../../../ui/components/icon_button/icon_button.js';
-import * as Menus from '../../../ui/components/menus/menus.js';
+import type * as IconButton from '../../../ui/components/icon_button/icon_button.js';
+import type * as Menus from '../../../ui/components/menus/menus.js';
 import * as SuggestionInput from '../../../ui/components/suggestion_input/suggestion_input.js';
 import * as UI from '../../../ui/legacy/legacy.js';
 import * as LitHtml from '../../../ui/lit-html/lit-html.js';
@@ -140,10 +144,10 @@ export function suggestionFilter(option: string, query: string): boolean {
 @customElement('devtools-json-editor')
 export class JSONEditor extends LitElement {
   static override styles = [editorWidgetStyles];
-  @property()
+  @property({attribute: false})
   declare metadataByCommand: Map<string, {parameters: Parameter[], description: string, replyArgs: string[]}>;
-  @property() declare typesByName: Map<string, Parameter[]>;
-  @property() declare enumsByName: Map<string, Record<string, string>>;
+  @property({attribute: false}) declare typesByName: Map<string, Parameter[]>;
+  @property({attribute: false}) declare enumsByName: Map<string, Record<string, string>>;
   @state() declare parameters: Parameter[];
   @state() declare targets: SDK.Target.Target[];
   @state() command: string = '';
@@ -624,9 +628,9 @@ export class JSONEditor extends LitElement {
     this.populateParametersForCommandWithDefaultValues();
   };
 
-  #computeTargetLabel(target: SDK.Target.Target): string|void {
+  #computeTargetLabel(target: SDK.Target.Target): string|undefined {
     if (!target) {
-      return;
+      return undefined;
     }
     return `${target.name()} (${target.inspectedURL()})`;
   }
@@ -817,7 +821,7 @@ export class JSONEditor extends LitElement {
     return html`
     <div class="row attribute padded">
       <div>target<span class="separator">:</span></div>
-      <${Menus.SelectMenu.SelectMenu.litTagName}
+      <devtools-select-menu
             class="target-select-menu"
             @selectmenuselected=${this.#onTargetSelected}
             .showDivider=${true}
@@ -826,19 +830,19 @@ export class JSONEditor extends LitElement {
             .showSelectedItem=${true}
             .showConnector=${false}
             .position=${Dialogs.Dialog.DialogVerticalPosition.BOTTOM}
-            .buttonTitle=${targetLabel}
+            .buttonTitle=${targetLabel || ''}
             jslog=${VisualLogging.dropDown('targets').track({click: true})}
           >
           ${repeat(this.targets, target => {
-          return LitHtml.html`
-                <${Menus.Menu.MenuItem.litTagName}
+          return html`
+                <devtools-menu-item
                   .value=${target.id()}>
                     ${this.#computeTargetLabel(target)}
-                </${Menus.Menu.MenuItem.litTagName}>
+                </devtools-menu-item>
               `;
         },
     )}
-          </${Menus.SelectMenu.SelectMenu.litTagName}>
+          </devtools-select-menu>
     </div>
   `;
     // clang-format on
@@ -882,7 +886,7 @@ export class JSONEditor extends LitElement {
   }
 
   #renderWarningIcon(): LitHtml.TemplateResult|undefined {
-    return LitHtml.html`<${IconButton.Icon.Icon.litTagName}
+    return html`<devtools-icon
     .data=${{
       iconName: 'warning-filled',
       color: 'var(--icon-warning)',
@@ -893,7 +897,7 @@ export class JSONEditor extends LitElement {
       'warning-icon': true,
     })}
   >
-  </${IconButton.Icon.Icon.litTagName}>`;
+  </devtools-icon>`;
   }
 
   /**
@@ -1012,6 +1016,7 @@ export class JSONEditor extends LitElement {
                   <div class="row-icons">
                       <!-- If an object has no predefined keys, show an input to enter the value, and a delete icon to delete the whole key/value pair -->
                       ${hasNoKeys && isParentObject ?  html`
+                      <!-- @ts-ignore -->
                       <devtools-suggestion-input
                           data-paramId=${parameterId}
                           .isCorrectInput=${live(parameter.isCorrectType)}
@@ -1036,6 +1041,7 @@ export class JSONEditor extends LitElement {
                     <!-- In case  the parameter is not optional or its value is not undefined render the input -->
                     ${isPrimitive && !hasNoKeys && (!isParamValueUndefined || !isParamOptional) && (!isParentArray) ?
                       html`
+                        <!-- @ts-ignore -->
                         <devtools-suggestion-input
                           data-paramId=${parameterId}
                           .strikethrough=${live(parameter.isCorrectType)}
@@ -1074,6 +1080,7 @@ export class JSONEditor extends LitElement {
                     ${isParentArray ? html`
                     <!-- If the parameter is an object we don't want to display the input field we just want the delete button-->
                     ${!isObject ? html`
+                    <!-- @ts-ignore -->
                     <devtools-suggestion-input
                       data-paramId=${parameterId}
                       .options=${hasOptions ? this.#computeDropdownValues(parameter) : []}

package/front_end/panels/protocol_monitor/components/Toolbar.ts

@@ -68,22 +68,22 @@ export class Toolbar extends LitElement {
     // clang-format off
     return html`
         <div class="toolbar">
-          <${Buttons.Button.Button.litTagName}
+          <devtools-button
           title=${i18nString(UIStrings.copyCommand)}
           .size=${Buttons.Button.Size.SMALL}
           .iconUrl=${copyIconUrl}
           .variant=${Buttons.Button.Variant.TOOLBAR}
           @click=${this.#handleCopy}
           jslog=${VisualLogging.action('protocol-monitor.copy-command').track({click: true})}
-        ></${Buttons.Button.Button.litTagName}>
-        <${Buttons.Button.Button.litTagName}
+        ></devtools-button>
+        <devtools-button
           .size=${Buttons.Button.Size.REGULAR}
           title=${Host.Platform.isMac() ? i18nString(UIStrings.sendCommandCmdEnter) : i18nString(UIStrings.sendCommandCtrlEnter)}
           .iconUrl=${sendIconUrl}
           .variant=${Buttons.Button.Variant.PRIMARY_TOOLBAR}
           @click=${this.#handleSend}
           jslog=${VisualLogging.action('protocol-monitor.send-command').track({click: true})}
-        ></${Buttons.Button.Button.litTagName}>
+        ></devtools-button>
       </div>
     `;
     // clang-format on