chrome-devtools-frontend 1.0.1684555 → 1.0.1689415

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 {

package/front_end/panels/network/RequestConditionsDrawer.ts

@@ -26,42 +26,42 @@ const {widget} = UI.Widget;
 
 const UIStrings = {
   /**
-   * @description Text to enable blocking of network requests
+   * @description Text to enable blocking and throttling of network requests
    */
   enableBlockingAndThrottling: 'Enable blocking and throttling',
   /**
-   * @description Tooltip text for add button in request blocking tool of the Network panel.
+   * @description Tooltip text for add button in request conditions tool of the Network panel.
    */
   addRule: 'Add rule',
   /**
-   * @description Accessible label for the button to add request blocking patterns in the network request blocking tool.
+   * @description Accessible label for the button to add request blocking patterns in the request conditions tool.
    */
   addPatternLabel: 'Add network request throttling or blocking pattern',
   /**
-   * @description Text that shows in the network request blocking panel if no pattern has yet been added.
+   * @description Text that shows in the request conditions panel if no pattern has yet been added.
    */
   noPattern: 'Nothing throttled or blocked',
   /**
-   * @description Text that shows in the network request blocking panel if no pattern has yet been added.
+   * @description Text that shows in the request conditions panel if no pattern has yet been added.
    * @example {Learn more} PH1
    */
   noThrottlingOrBlockingPattern:
       `To throttle or block a network request, add a rule here manually or via the Network panel’s context menu. {PH1}`,
   /**
-   * @description Text in request blocking tool of the Network panel.
+   * @description Text in request conditions tool of the Network panel.
    * @example {4} PH1
    */
   dAffected: '{PH1} affected',
   /**
-   * @description Tooltip text for pattern input in request blocking tool of the Network panel.
+   * @description Tooltip text for pattern input in request conditions tool of the Network panel.
    */
   textEditPattern: 'Text pattern to block or throttle matching requests; use URL Pattern syntax.',
   /**
-   * @description Error text for empty list widget input in Request Blocking tool
+   * @description Error text for empty list widget input in Request Conditions tool
    */
   patternInputCannotBeEmpty: 'Pattern input cannot be empty.',
   /**
-   * @description Error text for duplicate list widget input in Request Blocking tool
+   * @description Error text for duplicate list widget input in Request Conditions tool
    */
   patternAlreadyExists: 'Pattern already exists.',
   /**
@@ -116,8 +116,8 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/network/RequestConditionsDrawer.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
-const NETWORK_REQUEST_BLOCKING_EXPLANATION_URL =
-    'https://developer.chrome.com/docs/devtools/network-request-blocking' as Platform.DevToolsPath.UrlString;
+const REQUEST_CONDITIONS_EXPLANATION_URL =
+    'https://developer.chrome.com/docs/devtools/request-conditions' as Platform.DevToolsPath.UrlString;
 
 const {bindToAction} = UI.UIUtils;
 
@@ -443,7 +443,7 @@ export class AffectedCountWidget extends UI.Widget.Widget {
 
 function learnMore(): LitTemplate {
   return html`<devtools-link
-        href=${NETWORK_REQUEST_BLOCKING_EXPLANATION_URL}
+        href=${REQUEST_CONDITIONS_EXPLANATION_URL}
         tabindex=0
         class=devtools-link
         .jslogContext=${'learn-more'}>

package/front_end/panels/network/RequestPayloadView.ts

@@ -108,7 +108,7 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/network/RequestPayloadView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
-interface ViewInput {
+export interface ViewInput {
   decodeQueryParameters: boolean;
   setDecodeQueryParameters(value: boolean): void;
   decodeFormParameters: boolean;
@@ -125,13 +125,16 @@ interface ViewInput {
   formParameters: SDK.NetworkRequest.NameValue[]|undefined;
   queryString: string|null;
   queryParameters: SDK.NetworkRequest.NameValue[]|null;
+  objectTree: ObjectUI.ObjectPropertiesSection.ObjectTree|null;
+  onPayloadContextMenu(contextMenu: UI.ContextMenu.ContextMenu): void;
+  onPayloadToggle(expanded: boolean): void;
 
   /** Raw binary content data for the request body (when base64-encoded by backend). */
   binaryPayloadContentData: TextUtils.ContentData.ContentData|null;
   requestUrl: Platform.DevToolsPath.UrlString;
 }
 
-type View = (input: ViewInput, output: object, target: HTMLElement) => void;
+export type View = (input: ViewInput, output: object, target: HTMLElement) => void;
 export const DEFAULT_VIEW: View = (input, output, target) => {
   const createViewSourceToggle = (viewSource: boolean, callback: (value: boolean) => void): LitTemplate =>
       html`<devtools-button
@@ -182,30 +185,22 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
     // clang-format on
   });
 
-  const parsedFormData = (() => {
-    if (input.formData && !input.formParameters) {
-      try {
-        return JSON.parse(input.formData);
-      } catch {
-      }
-    }
-    return undefined;
-  })();
+  const createPayload = (objectTree: ObjectUI.ObjectPropertiesSection.ObjectTree): LitTemplate => {
+    const onPayloadContextMenu = (event: Event): void => {
+      event.consume(true);
+      const contextMenu = new UI.ContextMenu.ContextMenu(event);
+      input.onPayloadContextMenu(contextMenu);
+      void contextMenu.show();
+    };
 
-  const createPayload = (parsedFormData: unknown): LitTemplate => {
-    if (!parsedFormData) {
-      return nothing;
-    }
-    const object = new SDK.RemoteObject.LocalJSONObject(parsedFormData);
-    const objectTree = new ObjectUI.ObjectPropertiesSection.ObjectTree(object, {
-      readOnly: true,
-      propertiesMode: ObjectUI.ObjectPropertiesSection.ObjectPropertiesMode.OWN_AND_INTERNAL_AND_INHERITED,
-    });
-    objectTree.expanded = true;
     return html`
-      <li role=treeitem class="source-code object-properties-section-root-element object-properties-section" toggle-on-click open>
-        ${object.description}
-        ${object.hasChildren ? ObjectUI.ObjectPropertiesSection.renderObjectTree(objectTree) : nothing}
+      <li role=treeitem class="source-code object-properties-section-root-element object-properties-section"
+          toggle-on-click
+          ?open=${objectTree.expanded}
+          @expand=${(e: UI.TreeOutline.TreeViewElement.ExpandEvent) => input.onPayloadToggle(e.detail.expanded)}
+          @contextmenu=${onPayloadContextMenu}>
+        ${objectTree.object.description}
+        ${objectTree.object.hasChildren ? ObjectUI.ObjectPropertiesSection.renderObjectTree(objectTree) : nothing}
       </li>
     `;
   };
@@ -327,8 +322,8 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
         <div class="selection fill"></div>${i18nString(UIStrings.requestPayload)}${
             createViewSourceToggle(input.viewJSONPayloadSource, input.setViewJSONPayloadSource)}
         <ul role=group>
-          ${ifExpanded(!parsedFormData || input.viewJSONPayloadSource ? createSourceText(input.formData ?? '')
-                                                                      : createPayload(parsedFormData))}
+          ${ifExpanded(!input.objectTree || input.viewJSONPayloadSource ? createSourceText(input.formData ?? '')
+                                                                        : createPayload(input.objectTree))}
         </ul>
       </li>
      </ul>
@@ -362,6 +357,7 @@ export class RequestPayloadView extends UI.Widget.VBox {
   #decodeFormParameters = true;
   #formData?: string;
   #formParameters?: SDK.NetworkRequest.NameValue[];
+  #objectTree: ObjectUI.ObjectPropertiesSection.ObjectTree|null = null;
   #binaryPayloadContentData: TextUtils.ContentData.ContentData|null = null;
   #view: View;
   #viewJSONPayloadSource = false;
@@ -468,6 +464,38 @@ export class RequestPayloadView extends UI.Widget.VBox {
         Host.userMetrics.actionTaken(Host.UserMetrics.Action.NetworkPanelCopyValue);
         Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(value);
       },
+      objectTree: this.#objectTree,
+      onPayloadContextMenu: (contextMenu: UI.ContextMenu.ContextMenu): void => {
+        if (!this.#objectTree) {
+          return;
+        }
+        const objectTree = this.#objectTree;
+        ObjectUI.ObjectPropertiesSection.populateObjectTreeContextMenu(
+            contextMenu,
+            objectTree,
+            async () => {
+              await objectTree.expandRecursively(ObjectUI.ObjectPropertiesSection.EXPANDABLE_MAX_DEPTH);
+              this.requestUpdate();
+            },
+            () => {
+              objectTree.collapseRecursively();
+              this.requestUpdate();
+            },
+            () => {
+              objectTree.sortPropertiesAlphabetically = !objectTree.sortPropertiesAlphabetically;
+              this.requestUpdate();
+            },
+            () => {
+              objectTree.includeNullOrUndefinedValues = !objectTree.includeNullOrUndefinedValues;
+              this.requestUpdate();
+            },
+        );
+      },
+      onPayloadToggle: (expanded: boolean): void => {
+        if (this.#objectTree) {
+          this.#objectTree.expanded = expanded;
+        }
+      },
       binaryPayloadContentData: this.#binaryPayloadContentData,
       requestUrl: this.request?.url() ?? Platform.DevToolsPath.EmptyUrlString,
     };
@@ -484,6 +512,30 @@ export class RequestPayloadView extends UI.Widget.VBox {
       this.#formParameters = await this.request?.formParameters() ?? undefined;
     }
 
+    if (this.#objectTree) {
+      this.#objectTree.removeEventListener(ObjectUI.ObjectPropertiesSection.ObjectTreeNodeBase.Events.CHILDREN_CHANGED,
+                                           this.requestUpdate, this);
+      this.#objectTree.removeEventListener(ObjectUI.ObjectPropertiesSection.ObjectTreeNodeBase.Events.EXPANDED_CHANGED,
+                                           this.requestUpdate, this);
+      this.#objectTree = null;
+    }
+    if (this.#formData && !this.#formParameters) {
+      try {
+        const parsedFormData = JSON.parse(this.#formData);
+        const object = new SDK.RemoteObject.LocalJSONObject(parsedFormData);
+        this.#objectTree = new ObjectUI.ObjectPropertiesSection.ObjectTree(object, {
+          readOnly: true,
+          propertiesMode: ObjectUI.ObjectPropertiesSection.ObjectPropertiesMode.OWN_AND_INTERNAL_AND_INHERITED,
+        });
+        this.#objectTree.expanded = true;
+        this.#objectTree.addEventListener(ObjectUI.ObjectPropertiesSection.ObjectTreeNodeBase.Events.CHILDREN_CHANGED,
+                                          this.requestUpdate, this);
+        this.#objectTree.addEventListener(ObjectUI.ObjectPropertiesSection.ObjectTreeNodeBase.Events.EXPANDED_CHANGED,
+                                          this.requestUpdate, this);
+      } catch {
+      }
+    }
+
     // Fetch raw binary content data for the request body when the backend
     // returns base64-encoded data. This enables the binary viewer (hex,
     // base64, utf-8) in the Payload tab for compressed/binary bodies.

package/front_end/panels/network/binaryResourceView.css

@@ -6,7 +6,7 @@
 
 @scope to (devtools-widget > *) {
   .panel.network devtools-toolbar.binary-view-toolbar {
-    border-top: 1px solid var(--sys-color-divider);
+    border-top: var(--sys-size-1) solid var(--sys-color-divider);
     border-bottom: 0;
     padding-left: 5px;
     flex: none;

package/front_end/panels/network/components/EditableSpan.css

@@ -16,18 +16,18 @@
   min-width: 0.5em;
   background: transparent;
   border: none;
-  border-radius: 4px;
+  border-radius: var(--sys-shape-corner-extra-small);
   outline: none;
   display: inline-block;
   font-family: var(--monospace-font-family);
   font-size: var(--monospace-font-size);
 
   &:hover {
-    border: 1px solid var(--sys-color-neutral-outline);
+    border: var(--sys-size-1) solid var(--sys-color-neutral-outline);
   }
 
   &:focus {
-    border: 1px solid var(--sys-color-state-focus-ring);
+    border: var(--sys-size-1) solid var(--sys-color-state-focus-ring);
   }
 }
 

package/front_end/panels/network/components/HeaderSectionRow.css

@@ -11,7 +11,7 @@
 .row {
   display: flex;
   line-height: 18px;
-  padding-left: 8px;
+  padding-left: var(--sys-size-5);
   gap: var(--sys-size-6);
   user-select: text;
   margin: var(--sys-size-3) 0;
@@ -25,8 +25,8 @@
   font: var(--sys-typescale-body5-medium);
   color: var(--sys-color-on-surface-subtle);
   width: 30%;
-  min-width: 160px;
-  max-width: 240px;
+  min-width: var(--sys-size-23);
+  max-width: var(--sys-size-28);
   flex-shrink: 0;
   text-transform: capitalize;
   overflow-wrap: break-word;
@@ -55,7 +55,7 @@
 .header-value {
   display: flex;
   overflow-wrap: anywhere;
-  margin-inline-end: 14px;
+  margin-inline-end: var(--sys-size-7);
   font-family: var(--monospace-font-family);
   font-size: var(--monospace-font-size);
 }
@@ -73,25 +73,25 @@
   background-color: var(--sys-color-error);
   color: var(--sys-color-on-error);
   border-radius: 100vh;
-  padding-left: 6px;
-  padding-right: 6px;
+  padding-left: var(--sys-size-4);
+  padding-right: var(--sys-size-4);
 }
 
 .call-to-action {
   background-color: var(--sys-color-neutral-container);
-  padding: 8px;
+  padding: var(--sys-size-5);
   border-radius: 5px;
-  margin: 4px;
+  margin: var(--sys-size-3);
 }
 
 .call-to-action-body {
   display: flex;
   gap: var(--sys-size-4);
-  padding: 6px 0;
+  padding: var(--sys-size-4) 0;
   margin-left: var(--sys-size-1);
-  border-left: 2px solid var(--issue-color-yellow);
+  border-left: var(--sys-size-2) solid var(--issue-color-yellow);
   padding-left: 11px;
-  line-height: 20px;
+  line-height: var(--sys-typescale-body3-line-height);
 }
 
 .call-to-action .explanation {
@@ -111,7 +111,7 @@
   color: var(--sys-color-primary);
   text-decoration: underline;
   cursor: pointer;
-  outline-offset: 2px;
+  outline-offset: var(--sys-size-2);
 }
 
 .explanation .link {
@@ -123,7 +123,7 @@
 }
 
 .row-flex-icon {
-  margin: 2px 5px 0;
+  margin: var(--sys-size-2) 5px 0;
 }
 
 .header-value code {
@@ -172,7 +172,7 @@ devtools-link .inline-icon {
   opacity: 0%;
   visibility: hidden;
   transition: opacity 200ms;
-  padding-left: 2px;
+  padding-left: var(--sys-size-2);
 }
 
 .row.header-overridden:focus-within .inline-button,

package/front_end/panels/network/components/RequestHeaderSection.css

@@ -13,24 +13,24 @@
   }
 
   devtools-header-section-row:first-of-type {
-    margin-top: 2px;
+    margin-top: var(--sys-size-2);
   }
 
   .call-to-action {
     background-color: var(--sys-color-neutral-container);
-    padding: 8px;
+    padding: var(--sys-size-5);
     border-radius: 5px;
-    margin: 4px;
+    margin: var(--sys-size-3);
   }
 
   .call-to-action-body {
     display: flex;
     gap: var(--sys-size-4);
-    padding: 6px 0;
+    padding: var(--sys-size-4) 0;
     margin-left: var(--sys-size-1);
-    border-left: 2px solid var(--issue-color-yellow);
+    border-left: var(--sys-size-2) solid var(--issue-color-yellow);
     padding-left: 11px;
-    line-height: 20px;
+    line-height: var(--sys-size-9);
   }
 
   .call-to-action .explanation {
@@ -50,7 +50,7 @@
     color: var(--sys-color-primary);
     text-decoration: underline;
     cursor: pointer;
-    outline-offset: 2px;
+    outline-offset: var(--sys-size-2);
   }
 
   .explanation .link {