chrome-devtools-frontend 1.0.1683520 → 1.0.1689415

package/front_end/panels/issues/issuesTree.css

@@ -13,7 +13,7 @@
 }
 
 .issues {
-  --issue-indent: 8px;
+  --issue-indent: var(--sys-size-5);
 }
 
 /* The top most parents need to be larger, as they may include an unhide button. */
@@ -43,18 +43,18 @@
 .issue-category,
 .issue-kind,
 .issue {
-  padding: 0 8px;
+  padding: 0 var(--sys-size-5);
   padding-left: var(--issue-indent);
   overflow: hidden;
   flex: none;
   transition: background-color 200ms;
-  border: 1px solid var(--sys-color-divider);
-  border-width: 0 0 1px;
+  border: var(--sys-size-1) solid var(--sys-color-divider);
+  border-width: 0 0 var(--sys-size-1);
 }
 
 .issue-category.hidden-issues.parent.expanded,
 .issue-kind.parent.expanded {
-  border-width: 0 0 1px;
+  border-width: 0 0 var(--sys-size-1);
   background-color: var(--sys-color-surface2);
 }
 
@@ -93,7 +93,7 @@
 }
 
 p {
-  margin-block: 2px;
+  margin-block: var(--sys-size-2);
 }
 
 /* Override selected tree item styles for issues to avoid changing width. */
@@ -101,14 +101,14 @@ p {
 .tree-outline-disclosure:not(.tree-outline-disclosure-hide-overflow) .tree-outline.hide-selection-when-blurred .issue-kind.selected:focus-visible,
 .tree-outline-disclosure:not(.tree-outline-disclosure-hide-overflow) .tree-outline.hide-selection-when-blurred .issue.selected:focus-visible {
   width: auto;
-  padding-right: 8px;
+  padding-right: var(--sys-size-5);
 }
 
 .header {
   display: flex;
   flex-direction: row;
   align-items: flex-start;
-  padding: 4px 0;
+  padding: var(--sys-size-3) 0;
   cursor: pointer;
   width: 100%;
 
@@ -128,11 +128,11 @@ p {
 
 .title {
   flex: 1;
-  font-size: 12px;
+  font-size: var(--sys-typescale-body4-size);
   color: var(--sys-color-on-surface);
   font-weight: normal;
   user-select: text;
-  padding-top: 2px;
+  padding-top: var(--sys-size-2);
 }
 
 .issue.expanded .title {
@@ -140,17 +140,17 @@ p {
 }
 
 .issue-body.children {
-  border-bottom: 1px solid var(--sys-color-divider);
-  padding: 6px 0;
+  border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
+  padding: var(--sys-size-4) 0;
   position: relative;
   padding-left: calc(var(--issue-indent) + 43px);
   padding-bottom: 26px;
-  padding-right: 8px;
+  padding-right: var(--sys-size-5);
 }
 
 .issue-category + .children,
 .issue-kind + .children {
-  --issue-indent: 24px;
+  --issue-indent: var(--sys-size-11);
 
   padding-left: 0;
 }
@@ -162,20 +162,20 @@ p {
   position: absolute;
   left: calc(var(--issue-indent) + 23px);
   top: 0;
-  bottom: 20px;
-  width: 2px;
+  bottom: var(--sys-size-9);
+  width: var(--sys-size-2);
 }
 
 .issue-kind-breaking-change.issue-body::before {
-  border-left: 2px solid var(--issue-color-yellow);
+  border-left: var(--sys-size-2) solid var(--issue-color-yellow);
 }
 
 .issue-kind-page-error.issue-body::before {
-  border-left: 2px solid var(--issue-color-red);
+  border-left: var(--sys-size-2) solid var(--issue-color-red);
 }
 
 .issue-kind-improvement.issue-body::before {
-  border-left: 2px solid var(--issue-color-blue);
+  border-left: var(--sys-size-2) solid var(--issue-color-blue);
 }
 
 .tree-outline .issue-body li:hover:not(:has(devtools-checkbox)) .selection {
@@ -183,29 +183,29 @@ p {
 }
 
 devtools-icon.leading-issue-icon {
-  margin: 1px 0 -1px 7px;
+  margin: var(--sys-size-1) 0 calc(-1 * var(--sys-size-1)) 7px;
 }
 
 .message {
   line-height: 18px;
-  font-size: 12px;
+  font-size: var(--sys-typescale-body4-size);
   color: var(--sys-color-token-subtle);
-  margin-bottom: 4px;
+  margin-bottom: var(--sys-size-3);
   user-select: text;
 }
 
 .message p {
-  margin-bottom: 16px;
+  margin-bottom: var(--sys-size-8);
 }
 
 .message li {
-  margin-top: 8px;
+  margin-top: var(--sys-size-5);
 }
 
 .message code {
   color: var(--sys-color-on-surface);
-  padding: 0 2px;
-  font-size: 12px;
+  padding: 0 var(--sys-size-2);
+  font-size: var(--sys-typescale-body4-size);
   user-select: text;
   cursor: text;
   background: var(--sys-color-surface2);
@@ -218,7 +218,7 @@ devtools-icon.leading-issue-icon {
 }
 
 .link {
-  font-size: 12px;
+  font-size: var(--sys-typescale-body4-size);
   color: var(--sys-color-primary);
 }
 
@@ -261,7 +261,7 @@ devtools-icon.leading-issue-icon {
   mask-image: none;
   padding-right: 5px;
   position: relative;
-  top: -1px;
+  top: calc(-1 * var(--sys-size-1));
 }
 
 .resolutions-list li {
@@ -288,7 +288,7 @@ ul > li.plain-enum::before {
 }
 
 .affected-resource-label {
-  font-size: 12px;
+  font-size: var(--sys-typescale-body4-size);
   line-height: 18px;
   color: var(--sys-color-on-surface);
   position: relative;
@@ -296,14 +296,14 @@ ul > li.plain-enum::before {
 }
 
 .affected-resource-cookie {
-  font-size: 12px;
+  font-size: var(--sys-typescale-body4-size);
   line-height: 18px;
   border: 0;
   border-collapse: collapse;
 }
 
 .affected-resource-element {
-  font-size: 12px;
+  font-size: var(--sys-typescale-body4-size);
   line-height: 18px;
   color: var(--sys-color-primary);
   border: 0;
@@ -311,7 +311,7 @@ ul > li.plain-enum::before {
 }
 
 .affected-resource-row {
-  font-size: 12px;
+  font-size: var(--sys-typescale-body4-size);
   line-height: 18px;
   border: 0;
   border-collapse: collapse;
@@ -319,28 +319,28 @@ ul > li.plain-enum::before {
 }
 
 .affected-resource-mixed-content {
-  font-size: 12px;
+  font-size: var(--sys-typescale-body4-size);
   line-height: 18px;
   border: 0;
   border-collapse: collapse;
 }
 
 .affected-resource-heavy-ad {
-  font-size: 12px;
+  font-size: var(--sys-typescale-body4-size);
   line-height: 18px;
   border: 0;
   border-collapse: collapse;
 }
 
 .affected-resource-request {
-  font-size: 12px;
+  font-size: var(--sys-typescale-body4-size);
   line-height: 18px;
   border: 0;
   border-collapse: collapse;
 }
 
 .affected-resource-source {
-  font-size: 12px;
+  font-size: var(--sys-typescale-body4-size);
   line-height: 18px;
   color: var(--sys-color-primary);
   border: 0;
@@ -349,13 +349,13 @@ ul > li.plain-enum::before {
 
 .affected-resource-list {
   border-spacing: 10px 0;
-  margin-left: -12px;
+  margin-left: calc(-1 * var(--sys-size-6));
 }
 
 .affected-resource-header {
-  font-size: 12px;
+  font-size: var(--sys-typescale-body4-size);
   color: var(--sys-color-on-surface);
-  padding-left: 2px;
+  padding-left: var(--sys-size-2);
 }
 
 .code-example {
@@ -373,7 +373,7 @@ ul > li.plain-enum::before {
 
 .affected-resource-cookie-info {
   color: var(--sys-color-token-subtle);
-  padding: 2px;
+  padding: var(--sys-size-2);
   text-align: right;
 }
 
@@ -383,24 +383,24 @@ ul > li.plain-enum::before {
 
 .affected-resource-mixed-content-info {
   color: var(--sys-color-token-subtle);
-  padding: 2px;
+  padding: var(--sys-size-2);
 }
 
 .affected-resource-heavy-ad-info {
   color: var(--sys-color-token-subtle);
-  padding: 2px;
+  padding: var(--sys-size-2);
 }
 
 .affected-resource-heavy-ad-info-frame {
   display: flex;
   align-items: center;
   color: var(--sys-color-token-subtle);
-  padding: 2px;
+  padding: var(--sys-size-2);
 }
 
 .affected-resource-cell {
   color: var(--sys-color-token-subtle);
-  padding: 2px;
+  padding: var(--sys-size-2);
 }
 
 .affected-resource-cell.link {
@@ -414,7 +414,7 @@ ul > li.plain-enum::before {
 
 .affected-resources > .parent {
   margin-top: 0;
-  padding: 2px 5px 0;
+  padding: var(--sys-size-2) 5px 0;
 }
 
 .affected-resources > .parent.expanded {
@@ -423,7 +423,7 @@ ul > li.plain-enum::before {
 
 .affected-resources > .children.expanded {
   background: var(--sys-color-cdt-base-container);
-  padding: 6px 0 9px 5px;
+  padding: var(--sys-size-4) 0 9px 5px;
 }
 
 .aggregated-issues-count {
@@ -435,7 +435,7 @@ ul > li.plain-enum::before {
 }
 
 .affected-resource-directive {
-  font-size: 12px;
+  font-size: var(--sys-typescale-body4-size);
   line-height: 18px;
   border: 0;
   border-collapse: collapse;
@@ -443,12 +443,12 @@ ul > li.plain-enum::before {
 
 .affected-resource-directive-info {
   color: var(--sys-color-token-subtle);
-  padding: 2px;
+  padding: var(--sys-size-2);
   text-align: left;
 }
 
 .devtools-link {
-  padding-top: 4px;
+  padding-top: var(--sys-size-3);
 }
 
 devtools-icon.link-icon {
@@ -460,7 +460,7 @@ devtools-icon.elements-panel,
 devtools-icon.network-panel {
   margin-right: 0.5ex;
   vertical-align: baseline;
-  height: 14px;
+  height: var(--sys-size-7);
 }
 
 @media (forced-colors: active) {

package/front_end/panels/layer_viewer/Layers3DView.ts

@@ -103,18 +103,17 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
       header: i18nString(UIStrings.noLayerInformation),
       text: i18nString(UIStrings.layerExplanation),
     })}</div>` : Lit.nothing}
-    ${input.error === 'webgl-disabled' ? html`<div>${widget(UI.EmptyWidget.EmptyWidget, {
+    ${input.error === 'webgl-disabled' ? html`<div><devtools-widget ${widget(UI.EmptyWidget.EmptyWidget, {
       header: i18nString(UIStrings.cantDisplayLayers),
       text: i18nString(UIStrings.webglSupportIsDisabledInYour),
-      extraElements: [
-        uiI18n.getFormatLocalizedString(
-          str_, UIStrings.checkSForPossibleReasons,
-          {
-            PH1: Link.create('chrome://gpu', undefined, undefined, 'about-gpu', 0, true),
-          },
-        ),
-      ],
-    })}</div>` : Lit.nothing}
+    })}>
+      ${uiI18n.getFormatLocalizedString(
+        str_, UIStrings.checkSForPossibleReasons,
+        {
+          PH1: Link.create('chrome://gpu', undefined, undefined, 'about-gpu', 0, true),
+        },
+      )}
+    </devtools-widget></div>` : Lit.nothing}
     <canvas
       tabindex="0"
       jslog=${VisualLogging.canvas('layers').track({

package/front_end/panels/layer_viewer/layerDetailsView.css

@@ -37,6 +37,6 @@ ul {
 }
 
 .devtools-link.link-margin, .devtools-link.link-margin:hover {
-  margin: 8px;
+  margin: var(--sys-size-5);
   display: inline-block;
 }

package/front_end/panels/layer_viewer/layerTreeOutline.css

@@ -6,9 +6,9 @@
 
 @scope to (devtools-widget > *) {
   .layer-summary {
-    border-top: 1px solid var(--sys-color-divider);
+    border-top: var(--sys-size-1) solid var(--sys-color-divider);
     justify-content: space-between;
-    padding: 4px 10px;
+    padding: var(--sys-size-3) 10px;
     flex-shrink: 0;
   }
 

package/front_end/panels/layer_viewer/layers3DView.css

@@ -17,7 +17,7 @@
 
 devtools-toolbar {
   background-color: var(--sys-color-cdt-base-container);
-  border-bottom: 1px solid var(--sys-color-divider);
+  border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
 }
 
 canvas {

package/front_end/panels/layer_viewer/paintProfiler.css

@@ -19,7 +19,7 @@
   .paint-profiler-pie-chart {
     width: 60px !important; /* stylelint-disable-line declaration-no-important */
     height: 60px !important; /* stylelint-disable-line declaration-no-important */
-    padding: 2px;
+    padding: var(--sys-size-2);
     overflow: hidden;
     font-size: 10px;
   }

package/front_end/panels/lighthouse/LighthouseReportSelector.ts

@@ -40,7 +40,7 @@ export class ReportSelector {
 
     this.#comboBox.setEnabled(false);
     this.newLighthouseItem = document.createElement('option');
-    this.newLighthouseItem.label = i18nString(UIStrings.newReport);
+    this.newLighthouseItem.textContent = i18nString(UIStrings.newReport);
     this.#comboBox.addOption(this.newLighthouseItem);
     this.#comboBox.select(this.newLighthouseItem);
   }
@@ -127,7 +127,7 @@ export class Item {
     const url = new Common.ParsedURL.ParsedURL(finalDisplayedUrl);
     const timestamp = lighthouseResult.fetchTime;
     this.element = document.createElement('option');
-    this.element.label = `${new Date(timestamp).toLocaleTimeString()} - ${url.domain()}`;
+    this.element.textContent = `${new Date(timestamp).toLocaleTimeString()} - ${url.domain()}`;
   }
 
   select(): void {

package/front_end/panels/media/playerListView.css

@@ -10,11 +10,11 @@
 }
 
 li.storage-group-list-item {
-  padding: 10px 8px 6px;
+  padding: 10px var(--sys-size-5) var(--sys-size-4);
 }
 
 li.storage-group-list-item:not(:first-child) {
-  border-top: 1px solid var(--sys-color-divider);
+  border-top: var(--sys-size-1) solid var(--sys-color-divider);
 }
 
 li.storage-group-list-item::before {
@@ -50,16 +50,16 @@ li.storage-group-list-item::before {
   display: inherit;
 
   & > devtools-icon {
-    height: 16px;
-    width: 16px;
+    height: var(--sys-size-8);
+    width: var(--sys-size-8);
   }
 }
 
 .player-entry-status-icon {
-  width: 28px;
-  min-width: 28px;
+  width: var(--sys-size-12);
+  min-width: var(--sys-size-12);
   height: 26px;
-  border-right: 1px solid var(--sys-color-divider);
+  border-right: var(--sys-size-1) solid var(--sys-color-divider);
   overflow: hidden;
 }
 
@@ -69,7 +69,7 @@ li.storage-group-list-item::before {
   min-width: 125px;
   text-overflow: ellipsis;
   padding: 0 10px;
-  border-right: 1px solid var(--sys-color-divider);
+  border-right: var(--sys-size-1) solid var(--sys-color-divider);
   overflow: hidden;
 }
 
@@ -84,5 +84,5 @@ li.storage-group-list-item::before {
   line-height: 27px;
   min-height: 27px;
   padding-left: 10px;
-  border-bottom: 1px solid var(--sys-color-divider);
+  border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
 }

package/front_end/panels/media/playerMessagesView.css

@@ -5,7 +5,7 @@
  */
 .media-messages-header {
   background-color: var(--sys-color-cdt-base-container);
-  border-bottom: 1px solid var(--sys-color-divider);
+  border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
   min-height: 26px;
 }
 
@@ -26,19 +26,19 @@
   float: left;
   width: 18px;
   height: 100%;
-  padding-left: 2px;
+  padding-left: var(--sys-size-2);
 }
 
 .media-messages-message-container {
-  margin: 4px;
-  font-size: 14px;
+  margin: var(--sys-size-3);
+  font-size: var(--sys-typescale-body2-size);
   line-height: 18px;
-  padding: 4px;
+  padding: var(--sys-size-3);
   user-select: text;
 }
 
 .media-messages-message-container + .media-messages-message-container {
-  border-top: 1px solid var(--sys-color-divider);
+  border-top: var(--sys-size-1) solid var(--sys-color-divider);
 
   &.media-message-warning,
   &.media-message-error {
@@ -68,9 +68,9 @@
 
 .status-error-box {
   font-family: var(--monospace-font-family);
-  border: 1px solid var(--sys-color-error-outline);
+  border: var(--sys-size-1) solid var(--sys-color-error-outline);
   border-radius: 5px;
-  padding: 4px;
+  padding: var(--sys-size-3);
 }
 
 .status-error-field-label {

package/front_end/panels/media/playerPropertiesView.css

@@ -5,13 +5,13 @@
  */
 
 .media-attributes-view {
-  border-bottom: 1px solid var(--sys-color-divider);
+  border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
 }
 
 .media-property-renderer {
-  line-height: 20px;
-  min-height: 28px;
-  padding: 4px 10px;
+  line-height: var(--sys-size-9);
+  min-height: var(--sys-size-12);
+  padding: var(--sys-size-3) 10px;
   display: block;
   overflow: hidden;
 
@@ -29,7 +29,7 @@
 }
 
 .media-property-renderer:has(.json-view > .expanded) {
-  padding-bottom: 4px;
+  padding-bottom: var(--sys-size-3);
 }
 
 .media-property-renderer-hidden {
@@ -37,7 +37,7 @@
 }
 
 .media-property-renderer-title {
-  font-size: 12px;
+  font-size: var(--sys-typescale-body4-size);
   float: left;
   width: 150px;
 }

package/front_end/panels/mobile_throttling/NetworkPanelIndicator.ts

@@ -19,7 +19,7 @@ const UIStrings = {
   /**
    * @description Icon title for warning indicator in the Network panel title.
    */
-  requestsMayBeBlocked: 'Requests may be blocked. See the Network request blocking panel',
+  requestsMayBeBlocked: 'Requests may be blocked. See the Request conditions panel',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/mobile_throttling/NetworkPanelIndicator.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);

package/front_end/panels/mobile_throttling/throttlingSettingsTab.css

@@ -28,7 +28,7 @@
 }
 
 .settings-container::-webkit-scrollbar-thumb {
-  border-radius: var( --sys-size-3);
+  border-radius: var(--sys-shape-corner-extra-small);
   background-color: var(--sys-color-primary);
 }
 
@@ -37,8 +37,8 @@
   flex-direction: column;
   justify-content: space-between;
   align-items: flex-start;
-  gap: var( --sys-size-3);
-  padding: var( --sys-size-4);
+  gap: var(--sys-size-3);
+  padding: var(--sys-size-4);
   flex-shrink: 0;
   width: 74px;
 }
@@ -60,7 +60,7 @@
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
-  flex-basis: var( --sys-size-24);
+  flex-basis: var(--sys-size-24);
   user-select: none;
   color: var(--sys-color-on-surface);
   text-align: center;
@@ -91,10 +91,10 @@
 }
 
 .conditions-list-separator {
-  flex: 0 0 1px;
+  flex: 0 0 var(--sys-size-1);
   background-color: var(--sys-color-divider);
   height: 30px;
-  margin: 0 4px;
+  margin: 0 var(--sys-size-3);
 }
 
 .conditions-list-separator-invisible {
@@ -118,7 +118,7 @@
 }
 
 .cpu-preset-section {
-  padding: 14px;
+  padding: var(--sys-size-7);
   display: flex;
   justify-content: space-between;
 }
@@ -129,7 +129,7 @@
 
 .cpu-preset-calibrate {
   flex-direction: column;
-  gap: 14px;
+  gap: var(--sys-size-7);
 }
 
 .cpu-preset-calibrate .button-container {
@@ -151,5 +151,5 @@
 
 .conditions-list-header {
   font-weight: bold;
-  border-bottom: 1px solid var(--sys-color-divider);
+  border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
 }

package/front_end/panels/network/NetworkDataGridNode.ts

@@ -1171,6 +1171,7 @@ export class NetworkRequestNode extends NetworkNode {
   override createCells(trElement: HTMLElement): void {
     this.initiatorCell = null;
 
+    trElement.setAttribute('data-network-request-id', this.requestInternal.requestId());
     trElement.classList.toggle('network-throttled-row', Boolean(this.throttlingConditions()?.urlPattern));
     trElement.classList.toggle('network-warning-row', this.isWarning());
     trElement.classList.toggle('network-error-row', this.isError());

package/front_end/panels/network/NetworkPanel.ts

@@ -417,10 +417,9 @@ export class NetworkPanel extends UI.Panel.Panel implements
     return this.throttlingSelect;
   }
 
-  private onWindowChanged(
-      event: Common.EventTarget.EventTargetEvent<PerfUI.TimelineOverviewPane.OverviewPaneWindowChangedEvent>): void {
-    const startTime = Math.max(this.calculator.minimumBoundary(), event.data.startTime / 1000);
-    const endTime = Math.min(this.calculator.maximumBoundary(), event.data.endTime / 1000);
+  private updateNetworkLogWindow(startTimeMs: number, endTimeMs: number): void {
+    const startTime = Math.max(this.calculator.minimumBoundary(), startTimeMs / 1000);
+    const endTime = Math.min(this.calculator.maximumBoundary(), endTimeMs / 1000);
     if (startTime === this.calculator.minimumBoundary() && endTime === this.calculator.maximumBoundary()) {
       // Reset the filters for NetworkLogView when the window is reset
       // to its boundaries. This clears the filters and allows the users
@@ -432,6 +431,11 @@ export class NetworkPanel extends UI.Panel.Panel implements
     }
   }
 
+  private onWindowChanged(
+      event: Common.EventTarget.EventTargetEvent<PerfUI.TimelineOverviewPane.OverviewPaneWindowChangedEvent>): void {
+    this.updateNetworkLogWindow(event.data.startTime, event.data.endTime);
+  }
+
   private async searchToggleClick(): Promise<void> {
     const action = UI.ActionRegistry.ActionRegistry.instance().getAction('network.search');
     await action.execute();
@@ -831,6 +835,7 @@ export class NetworkPanel extends UI.Panel.Panel implements
   private onFilmFrameSelected(event: Common.EventTarget.EventTargetEvent<number>): void {
     const timestamp = event.data;
     this.overviewPane.setWindowTimes(Trace.Types.Timing.Milli(0), Trace.Types.Timing.Milli(timestamp));
+    this.updateNetworkLogWindow(0, timestamp);
   }
 
   private onFilmFrameEnter(event: Common.EventTarget.EventTargetEvent<number>): void {