chrome-devtools-frontend 1.0.1367881 → 1.0.1380117

package/front_end/panels/layer_viewer/PaintProfilerView.ts

@@ -217,11 +217,11 @@ export class PaintProfilerView extends Common.ObjectWrapper.eventMixin<EventType
     if (!snapshot) {
       this.update();
       this.populatePieChart(0, []);
-      this.selectionWindowInternal.setEnabled(false);
+      this.selectionWindowInternal.setResizeEnabled(false);
       return;
     }
 
-    this.selectionWindowInternal.setEnabled(true);
+    this.selectionWindowInternal.setResizeEnabled(true);
     this.progressBanner.classList.remove('hidden');
     this.updateImage();
 
@@ -370,8 +370,8 @@ export class PaintProfilerView extends Common.ObjectWrapper.eventMixin<EventType
       return null;
     }
 
-    const screenLeft = (this.selectionWindowInternal.windowLeft || 0) * this.canvas.width;
-    const screenRight = (this.selectionWindowInternal.windowRight || 0) * this.canvas.width;
+    const screenLeft = (this.selectionWindowInternal.windowLeftRatio || 0) * this.canvas.width;
+    const screenRight = (this.selectionWindowInternal.windowRightRatio || 0) * this.canvas.width;
     const barLeft = Math.floor(screenLeft / this.outerBarWidth);
     const barRight = Math.floor((screenRight + this.innerBarWidth - this.barPaddingWidth / 2) / this.outerBarWidth);
     const stepLeft = Platform.NumberUtilities.clamp(barLeft * this.samplesPerBar, 0, this.log.length - 1);
@@ -409,7 +409,7 @@ export class PaintProfilerView extends Common.ObjectWrapper.eventMixin<EventType
     this.snapshot = null;
     this.profiles = null;
     this.selectionWindowInternal.reset();
-    this.selectionWindowInternal.setEnabled(false);
+    this.selectionWindowInternal.setResizeEnabled(false);
   }
   override wasShown(): void {
     super.wasShown();

package/front_end/panels/lighthouse/LighthouseReportRenderer.ts

@@ -11,6 +11,7 @@ import * as LighthouseReport from '../../third_party/lighthouse/report/report.js
 import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as ThemeSupport from '../../ui/legacy/theme_support/theme_support.js';
+import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import type {
   NodeDetailsJSON, ReportJSON, RunnerResultArtifacts, SourceLocationDetailsJSON} from './LighthouseReporterTypes.js';
@@ -92,6 +93,10 @@ export class LighthouseReportRenderer {
     // @ts-ignore Expose Artifacts on DOM for e2e tests
     reportEl._lighthouseArtifactsForTesting = artifacts;
 
+    // This should block the report rendering as we need visual logging ready
+    // before the user starts interacting with the report.
+    LighthouseReportRenderer.installVisualLogging(reportEl);
+
     // Linkifying requires the target be loaded. Do not block the report
     // from rendering, as this is just an embellishment and the main target
     // could take awhile to load.
@@ -177,4 +182,45 @@ export class LighthouseReportRenderer {
       origHTMLElement.appendChild(element);
     }
   }
+
+  static installVisualLogging(el: Element): void {
+    for (const auditEl of el.getElementsByClassName('lh-audit')) {
+      const summaryEl = auditEl.querySelector('summary');
+      if (!summaryEl) {
+        continue;
+      }
+
+      const id = auditEl.id;
+      if (!id) {
+        continue;
+      }
+
+      auditEl.setAttribute('jslog', `${VisualLogging.item(`lighthouse.audit.${id}`)}`);
+
+      let state: string|undefined;
+      for (const className of auditEl.classList) {
+        switch (className) {
+          case 'lh-audit--pass':
+            state = 'pass';
+            break;
+          case 'lh-audit--average':
+            state = 'average';
+            break;
+          case 'lh-audit--fail':
+            state = 'fail';
+            break;
+          case 'lh-audit--informative':
+            state = 'informative';
+            break;
+        }
+      }
+
+      if (!state) {
+        continue;
+      }
+
+      summaryEl.setAttribute(
+          'jslog', `${VisualLogging.expand(`lighthouse.audit-summary.${state}`).track({click: true})}`);
+    }
+  }
 }

package/front_end/panels/lighthouse/LighthouseStartView.ts

@@ -63,7 +63,7 @@ export class StartView extends UI.Widget.Widget {
   changeFormMode?: (mode: string) => void;
 
   constructor(controller: LighthouseController, panel: LighthousePanel) {
-    super();
+    super(true /* useShadowDom */);
 
     this.controller = controller;
     this.panel = panel;

package/front_end/panels/linear_memory_inspector/LinearMemoryInspectorController.ts

@@ -20,7 +20,7 @@ const UIStrings = {
   /**
    *@description A context menu item in the Scope View of the Sources Panel
    */
-  revealInMemoryInspectorPanel: 'Reveal in Memory inspector panel',
+  openInMemoryInspectorPanel: 'Open in Memory inspector panel',
 };
 const str_ =
     i18n.i18n.registerUIStrings('panels/linear_memory_inspector/LinearMemoryInspectorController.ts', UIStrings);
@@ -329,7 +329,7 @@ export class LinearMemoryInspectorController extends SDK.TargetManager.SDKModelO
       const expression = target.path();
       const object = target.property.value;
       contextMenu.debugSection().appendItem(
-          i18nString(UIStrings.revealInMemoryInspectorPanel),
+          i18nString(UIStrings.openInMemoryInspectorPanel),
           this.reveal.bind(this, new SDK.RemoteObject.LinearMemoryInspectable(object, expression)),
           {jslogContext: 'reveal-in-memory-inspector'});
     }

package/front_end/panels/linear_memory_inspector/components/LinearMemoryHighlightChipList.ts

@@ -5,7 +5,6 @@
 import '../../../ui/components/icon_button/icon_button.js';
 
 import * as i18n from '../../../core/i18n/i18n.js';
-import type * as IconButton from '../../../ui/components/icon_button/icon_button.js';
 import * as LitHtml from '../../../ui/lit-html/lit-html.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 
@@ -113,7 +112,7 @@ export class LinearMemoryHighlightChipList extends HTMLElement {
               iconName: 'cross',
               color: 'var(--icon-default-hover)',
               width: '16px',
-              } as IconButton.Icon.IconData}>
+              }}>
             </devtools-icon>
           </button>
         </div>

package/front_end/panels/linear_memory_inspector/components/LinearMemoryInspector.ts

@@ -15,22 +15,17 @@ import {
   Navigation,
   type AddressInputChangedEvent,
   type HistoryNavigationEvent,
-  type LinearMemoryNavigatorData,
   type PageNavigationEvent,
 } from './LinearMemoryNavigator.js';
 
-import type {
-  EndiannessChangedEvent, LinearMemoryValueInterpreterData, ValueTypeToggledEvent} from
-  './LinearMemoryValueInterpreter.js';
 import './LinearMemoryValueInterpreter.js';
+import type {EndiannessChangedEvent, ValueTypeToggledEvent} from './LinearMemoryValueInterpreter.js';
 
-import type {
-  DeleteMemoryHighlightEvent, JumpToHighlightedMemoryEvent, LinearMemoryHighlightChipListData} from
-  './LinearMemoryHighlightChipList.js';
 import './LinearMemoryHighlightChipList.js';
+import type {DeleteMemoryHighlightEvent, JumpToHighlightedMemoryEvent} from './LinearMemoryHighlightChipList.js';
 import {formatAddress, parseAddress} from './LinearMemoryInspectorUtils.js';
-import type {ByteSelectedEvent, LinearMemoryViewerData, ResizeEvent} from './LinearMemoryViewer.js';
 import './LinearMemoryViewer.js';
+import type {ByteSelectedEvent, ResizeEvent} from './LinearMemoryViewer.js';
 import type {HighlightInfo} from './LinearMemoryViewerUtils.js';
 import type {JumpToPointerAddressEvent, ValueTypeModeChangedEvent} from './ValueInterpreterDisplay.js';
 import {
@@ -204,13 +199,13 @@ export class LinearMemoryInspector extends HTMLElement {
     render(html`
       <div class="view">
         <devtools-linear-memory-inspector-navigator
-          .data=${{address: navigatorAddressToShow, valid: navigatorAddressIsValid, mode: this.#currentNavigatorMode, error: errorMsg, canGoBackInHistory, canGoForwardInHistory} as LinearMemoryNavigatorData}
+          .data=${{address: navigatorAddressToShow, valid: navigatorAddressIsValid, mode: this.#currentNavigatorMode, error: errorMsg, canGoBackInHistory, canGoForwardInHistory}}
           @refreshrequested=${this.#onRefreshRequest}
           @addressinputchanged=${this.#onAddressChange}
           @pagenavigation=${this.#navigatePage}
           @historynavigation=${this.#navigateHistory}></devtools-linear-memory-inspector-navigator>
           <devtools-linear-memory-highlight-chip-list
-          .data=${{highlightInfos: highlightedMemoryAreas, focusedMemoryHighlight } as LinearMemoryHighlightChipListData}
+          .data=${{highlightInfos: highlightedMemoryAreas, focusedMemoryHighlight }}
           @jumptohighlightedmemory=${this.#onJumpToAddress}>
           </devtools-linear-memory-highlight-chip-list>
         <devtools-linear-memory-inspector-viewer
@@ -220,7 +215,7 @@ export class LinearMemoryInspector extends HTMLElement {
             address: this.#address, memoryOffset: start,
             focus: this.#currentNavigatorMode === Mode.SUBMITTED,
             highlightInfo: this.#highlightInfo,
-            focusedMemoryHighlight } as LinearMemoryViewerData}
+            focusedMemoryHighlight }}
           @byteselected=${this.#onByteSelected}
           @resize=${this.#resize}>
         </devtools-linear-memory-inspector-viewer>
@@ -233,7 +228,7 @@ export class LinearMemoryInspector extends HTMLElement {
             valueTypes: this.#valueTypes,
             valueTypeModes: this.#valueTypeModes,
             endianness: this.#endianness,
-            memoryLength: this.#outerMemoryLength } as LinearMemoryValueInterpreterData}
+            memoryLength: this.#outerMemoryLength }}
           @valuetypetoggled=${this.#onValueTypeToggled}
           @valuetypemodechanged=${this.#onValueTypeModeChanged}
           @endiannesschanged=${this.#onEndiannessChanged}

package/front_end/panels/linear_memory_inspector/components/LinearMemoryValueInterpreter.ts

@@ -12,9 +12,8 @@ import * as LitHtml from '../../../ui/lit-html/lit-html.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 
 import linearMemoryValueInterpreterStyles from './linearMemoryValueInterpreter.css.js';
-import type {ValueDisplayData} from './ValueInterpreterDisplay.js';
 import {Endianness, type ValueType, type ValueTypeMode} from './ValueInterpreterDisplayUtils.js';
-import type {TypeToggleEvent, ValueInterpreterSettingsData} from './ValueInterpreterSettings.js';
+import type {TypeToggleEvent} from './ValueInterpreterSettings.js';
 
 const UIStrings = {
   /**
@@ -101,7 +100,7 @@ export class LinearMemoryValueInterpreter extends HTMLElement {
           ${this.#showSettings ?
             html`
               <devtools-linear-memory-inspector-interpreter-settings
-                .data=${{ valueTypes: this.#valueTypes } as ValueInterpreterSettingsData}
+                .data=${{ valueTypes: this.#valueTypes }}
                 @typetoggle=${this.#onTypeToggle}>
               </devtools-linear-memory-inspector-interpreter-settings>` :
             html`
@@ -112,7 +111,7 @@ export class LinearMemoryValueInterpreter extends HTMLElement {
                   endianness: this.#endianness,
                   valueTypeModes: this.#valueTypeModeConfig,
                   memoryLength: this.#memoryLength,
-                } as ValueDisplayData}>
+                }}>
               </devtools-linear-memory-inspector-interpreter-display>`}
         </div>
       </div>

package/front_end/panels/linear_memory_inspector/components/ValueInterpreterDisplay.ts

@@ -5,7 +5,6 @@
 import '../../../ui/components/icon_button/icon_button.js';
 
 import * as i18n from '../../../core/i18n/i18n.js';
-import type * as IconButton from '../../../ui/components/icon_button/icon_button.js';
 // eslint-disable-next-line rulesdir/es_modules_import
 import inspectorCommonStyles from '../../../ui/legacy/inspectorCommon.css.js';
 import * as LitHtml from '../../../ui/lit-html/lit-html.js';
@@ -166,7 +165,7 @@ export class ValueInterpreterDisplay extends HTMLElement {
                 jslog=${VisualLogging.action('linear-memory-inspector.jump-to-address').track({click: true})}
                 @click=${this.#onJumpToAddressClicked.bind(this, Number(address))}>
                 <devtools-icon .data=${
-                  {iconName: 'open-externally', color: iconColor, width: '16px'} as IconButton.Icon.IconWithName}>
+                  {iconName: 'open-externally', color: iconColor, width: '16px'}}>
                 </devtools-icon>
               </button>`}
         </div>

package/front_end/panels/mobile_throttling/ThrottlingSettingsTab.ts

@@ -5,6 +5,8 @@
 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 * as Buttons from '../../ui/components/buttons/buttons.js';
+import * as Cards from '../../ui/components/cards/cards.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
@@ -14,11 +16,11 @@ const UIStrings = {
   /**
    *@description Text in Throttling Settings Tab of the Network panel
    */
-  networkThrottlingProfiles: 'Network Throttling Profiles',
+  networkThrottlingProfiles: 'Network throttling profiles',
   /**
    *@description Text of add conditions button in Throttling Settings Tab of the Network panel
    */
-  addCustomProfile: 'Add custom profile...',
+  addCustomProfile: 'Add profile',
   /**
    *@description A value in milliseconds
    *@example {3} PH1
@@ -129,26 +131,33 @@ export class ThrottlingSettingsTab extends UI.Widget.VBox implements
 
     this.element.setAttribute('jslog', `${VisualLogging.pane('throttling-conditions')}`);
 
-    const header = this.contentElement.createChild('div', 'header');
-    header.textContent = i18nString(UIStrings.networkThrottlingProfiles);
-    UI.ARIAUtils.markAsHeading(header, 1);
-
-    const addButton =
-        UI.UIUtils.createTextButton(i18nString(UIStrings.addCustomProfile), this.addButtonClicked.bind(this), {
-          className: 'add-conditions-button',
-          jslogContext: 'network.add-conditions',
-        });
-    this.contentElement.appendChild(addButton);
-
+    const settingsContent =
+        this.contentElement.createChild('div', 'settings-card-container-wrapper').createChild('div');
+    settingsContent.classList.add('settings-card-container', 'ignore-list-settings');
+
+    const addButton = new Buttons.Button.Button();
+    addButton.classList.add('add-conditions-button');
+    addButton.data = {
+      variant: Buttons.Button.Variant.OUTLINED,
+      iconName: 'plus',
+      jslogContext: 'network.add-conditions',
+    };
+    addButton.textContent = i18nString(UIStrings.addCustomProfile);
+    addButton.addEventListener('click', () => this.addButtonClicked());
+
+    const listContainer = settingsContent.createChild('div');
+    const card = new Cards.Card.Card();
+    settingsContent.appendChild(card);
+    card.data = {
+      heading: i18nString(UIStrings.networkThrottlingProfiles),
+      content: [listContainer, addButton],
+    };
     this.list = new UI.ListWidget.ListWidget(this);
     this.list.element.classList.add('conditions-list');
-
-    this.list.show(this.contentElement);
+    this.list.show(listContainer);
 
     this.customSetting = Common.Settings.Settings.instance().moduleSetting('custom-network-conditions');
     this.customSetting.addChangeListener(this.conditionsUpdated, this);
-
-    this.setDefaultFocusedElement(addButton);
   }
 
   override wasShown(): void {

package/front_end/panels/mobile_throttling/throttlingSettingsTab.css

@@ -4,27 +4,13 @@
  * found in the LICENSE file.
  */
 
-:host {
-  overflow: hidden;
-}
-
-.header {
-  padding: 0 0 6px;
-  border-bottom: 1px solid var(--sys-color-divider);
-  font-size: 18px;
-  font-weight: normal;
-  flex: none;
-}
-
 .add-conditions-button {
-  flex: none;
-  margin: 10px 5px;
-  min-width: 140px;
-  align-self: flex-start;
+  margin-bottom: var(--sys-size-5);
+  border: none;
 }
 
 .conditions-list {
-  min-width: 640px;
+  margin-top: var(--sys-size-3);
   flex: auto;
 }
 
@@ -38,7 +24,9 @@
 }
 
 .conditions-list-text {
-  flex: 0 0 80px;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  flex: 0 0 50px;
   user-select: none;
   color: var(--sys-color-on-surface);
   text-align: center;
@@ -57,12 +45,15 @@
 .conditions-list-title {
   text-align: start;
   display: flex;
-  flex: auto;
+  flex-grow: 1;
   align-items: flex-start;
 }
 
 .conditions-list-title-text {
   flex: auto;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
 }
 
 .conditions-list-separator {
@@ -110,3 +101,18 @@
 .editor-buttons {
   margin-top: 10px;
 }
+
+.settings-card-container-wrapper {
+  scrollbar-gutter: stable;
+  padding-bottom: var(--sys-size-8);
+  overflow: auto;
+  position: absolute;
+  inset: var(--sys-size-8) 0 0;
+}
+
+.settings-card-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--sys-size-9);
+}

package/front_end/panels/network/BinaryResourceView.ts

@@ -6,6 +6,7 @@ import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import type * as Platform from '../../core/platform/platform.js';
+import type * as TextUtils from '../../models/text_utils/text_utils.js';
 import * as SourceFrame from '../../ui/legacy/components/source_frame/source_frame.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
@@ -70,12 +71,12 @@ export class BinaryResourceView extends UI.Widget.VBox {
   private lastView: UI.Widget.Widget|null;
 
   constructor(
-      base64content: string, contentUrl: Platform.DevToolsPath.UrlString,
+      content: TextUtils.StreamingContentData.StreamingContentData, contentUrl: Platform.DevToolsPath.UrlString,
       resourceType: Common.ResourceType.ResourceType) {
     super();
 
     this.binaryResourceViewFactory =
-        new SourceFrame.BinaryResourceViewFactory.BinaryResourceViewFactory(base64content, contentUrl, resourceType);
+        new SourceFrame.BinaryResourceViewFactory.BinaryResourceViewFactory(content, contentUrl, resourceType);
 
     this.toolbar = new UI.Toolbar.Toolbar('binary-view-toolbar', this.element);
 
@@ -83,7 +84,7 @@ export class BinaryResourceView extends UI.Widget.VBox {
       new BinaryViewObject(
           'base64', i18n.i18n.lockedString('Base64'), i18nString(UIStrings.copiedAsBase),
           this.binaryResourceViewFactory.createBase64View.bind(this.binaryResourceViewFactory),
-          () => Promise.resolve(this.binaryResourceViewFactory.base64())),
+          this.binaryResourceViewFactory.base64.bind(this.binaryResourceViewFactory)),
       new BinaryViewObject(
           'hex', i18nString(UIStrings.hexViewer), i18nString(UIStrings.copiedAsHex),
           this.binaryResourceViewFactory.createHexView.bind(this.binaryResourceViewFactory),
@@ -104,7 +105,7 @@ export class BinaryResourceView extends UI.Widget.VBox {
 
     const copyButton = new UI.Toolbar.ToolbarButton(i18nString(UIStrings.copyToClipboard), 'copy');
     copyButton.addEventListener(UI.Toolbar.ToolbarButton.Events.CLICK, _event => {
-      void this.copySelectedViewToClipboard();
+      this.copySelectedViewToClipboard();
     }, this);
     this.toolbar.appendToolbarItem(copyButton);
 
@@ -128,12 +129,12 @@ export class BinaryResourceView extends UI.Widget.VBox {
     return binaryViewObject || null;
   }
 
-  private async copySelectedViewToClipboard(): Promise<void> {
+  private copySelectedViewToClipboard(): void {
     const viewObject = this.getCurrentViewObject();
     if (!viewObject) {
       return;
     }
-    Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(await viewObject.content());
+    Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(viewObject.content());
     this.copiedText.setText(viewObject.copiedMessage);
     this.copiedText.element.classList.remove('fadeout');
     function addFadeoutClass(this: BinaryResourceView): void {
@@ -207,13 +208,12 @@ export class BinaryViewObject {
   type: string;
   label: string;
   copiedMessage: string;
-  content: () => Promise<string>;
+  content: () => string;
   private createViewFn: () => UI.Widget.Widget;
   private view: UI.Widget.Widget|null;
 
   constructor(
-      type: string, label: string, copiedMessage: string, createViewFn: () => UI.Widget.Widget,
-      content: () => Promise<string>) {
+      type: string, label: string, copiedMessage: string, createViewFn: () => UI.Widget.Widget, content: () => string) {
     this.type = type;
     this.label = label;
     this.copiedMessage = copiedMessage;

package/front_end/panels/network/EventSourceMessagesView.ts

@@ -100,7 +100,7 @@ export class EventSourceMessagesView extends UI.Widget.VBox {
       refreshCallback: undefined,
     });
     this.dataGrid.setStriped(true);
-    this.dataGrid.setStickToBottom(true);
+    this.dataGrid.setEnableAutoScrollToBottom(true);
     this.dataGrid.setRowContextMenuCallback(this.onRowContextMenu.bind(this));
     this.dataGrid.markColumnAsSortedBy('time', DataGrid.DataGrid.Order.Ascending);
     this.sortItems();

package/front_end/panels/network/NetworkDataGridNode.test.ts

@@ -497,4 +497,33 @@ describeWithEnvironment('NetworkLogView', () => {
     const expected = 'Matched to ServiceWorker router#1, 2\xa0B transferred over network, resource size: 4\xa0B';
     assert.strictEqual(tooltip, expected);
   });
+
+  it('styles a prefetch network request error as a warning', async () => {
+    const request = SDK.NetworkRequest.NetworkRequest.create(
+        'requestId' as Protocol.Network.RequestId, 'https://www.example.com' as Platform.DevToolsPath.UrlString,
+        '' as Platform.DevToolsPath.UrlString, null, null, null);
+    request.failed = true;
+    request.statusCode = 404;
+    request.setResourceType(Common.ResourceType.resourceTypes.Prefetch);
+
+    const networkRequestNode = new Network.NetworkDataGridNode.NetworkRequestNode(
+        {} as Network.NetworkDataGridNode.NetworkLogViewInterface, request);
+    const el = document.createElement('div');
+    networkRequestNode.createCells(el);
+    const cell = el.appendChild(document.createElement('div'));
+    networkRequestNode.renderCell(cell, 'name');
+
+    // The row should have the warning-row class name.
+    assert.isTrue(el.classList.contains('network-warning-row'));
+    assert.isFalse(el.classList.contains('network-error-row'));
+
+    // The icon should be the warning icon.
+    const iconElement = el.querySelector('.icon') as HTMLElement;
+    const iconStyle = iconElement.style;
+    const indexOfIconImage = iconStyle.maskImage.indexOf('Images/') + 7;
+    const iconImage = iconStyle.maskImage.substring(indexOfIconImage);
+    assert.strictEqual('warning-filled.svg")', iconImage);
+    const backgroundColorOfIcon = iconStyle.backgroundColor.toString();
+    assert.strictEqual(backgroundColorOfIcon, 'var(--icon-warning)');
+  });
 });