chrome-devtools-frontend 1.0.1683520 → 1.0.1689415

package/front_end/panels/application/IndexedDBModel.ts

@@ -423,13 +423,6 @@ export class IndexedDBModel extends SDK.SDKModel.SDKModel<EventTypes> implements
   cacheStorageContentUpdated(_event: Protocol.Storage.CacheStorageContentUpdatedEvent): void {
   }
 
-  sharedStorageAccessed(_event: Protocol.Storage.SharedStorageAccessedEvent): void {
-  }
-
-  sharedStorageWorkletOperationExecutionFinished(
-      _event: Protocol.Storage.SharedStorageWorkletOperationExecutionFinishedEvent): void {
-  }
-
   storageBucketCreatedOrUpdated(_event: Protocol.Storage.StorageBucketCreatedOrUpdatedEvent): void {
   }
 

package/front_end/panels/application/WebMCPView.ts

@@ -463,13 +463,14 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
   render(html`
     <style>${webMCPViewStyles}</style>
     <style>${UI.FilterBar.filterStyles}</style>
-    <devtools-split-view class="webmcp-view" direction="row" sidebar-position="second" name="webmcp-split-view">
-      <div slot="main" class="call-log">
+    <devtools-split-view class="webmcp-view" direction="row" sidebar-position="second" name="webmcp-split-view" jslog=${VisualLogging.pane('webmcp-view')}>
+      <div slot="main" class="call-log" jslog=${VisualLogging.section('call-log')}>
         <div class="webmcp-toolbar-container" role="toolbar" jslog=${VisualLogging.toolbar()}>
           <devtools-toolbar class="webmcp-toolbar" role="presentation" wrappable>
             <devtools-button title=${i18nString(UIStrings.clearLog)}
                              .iconName=${'clear'}
                              .variant=${Buttons.Button.Variant.TOOLBAR}
+                             .jslogContext=${'clear'}
                              @click=${input.onClearLogClick}></devtools-button>
             <div class="toolbar-divider"></div>
             <devtools-toolbar-input type="filter"
@@ -486,6 +487,7 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
             <devtools-button title=${i18nString(UIStrings.clearFilters)}
                              .iconName=${'filter-clear'}
                              .variant=${Buttons.Button.Variant.TOOLBAR}
+                             .jslogContext=${'clear-filter'}
                              @click=${() => input.onFilterChange({text: ''})}
                              ?hidden=${!isFilterActive}></devtools-button>
           </devtools-toolbar>
@@ -515,7 +517,7 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
                       'status-error': call.result?.status === Protocol.WebMCP.InvocationStatus.Error,
                       'status-cancelled': call.result?.status === Protocol.WebMCP.InvocationStatus.Canceled,
                       selected: call === input.selectedCall,
-                    })} @click=${() => input.onCallSelect(call)}
+                    })} jslog=${VisualLogging.tableRow().track({click: true})} @click=${() => input.onCallSelect(call)}
                         @contextmenu=${(e: CustomEvent<UI.ContextMenu.ContextMenu>) => {
                           const contextMenu = e.detail;
                           const isUnregistered = !input.tools.includes(call.tool);
@@ -541,6 +543,7 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
                           <button class="run-tool-action-button"
                                   title=${i18nString(UIStrings.editAndRun)}
                                   aria-label=${i18nString(UIStrings.editAndRun)}
+                                  jslog=${VisualLogging.action('edit-and-run').track({click: true})}
                                   @click=${(e: Event) => {
                                     e.stopPropagation();
                                     const payload = parsePayload(call.input);
@@ -586,6 +589,7 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
                   .iconName=${'cross'}
                   .size=${Buttons.Button.Size.SMALL}
                   .variant=${Buttons.Button.Variant.ICON}
+                  .jslogContext=${'close'}
                   title=${i18nString(UIStrings.close)}
                   @click=${() => input.onCallSelect(null)}
                 ></devtools-button>
@@ -614,7 +618,7 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
               </devtools-tabbed-pane>
             </div>
           </devtools-split-view>
-          <div class="webmcp-toolbar-container" role="toolbar">
+          <div class="webmcp-toolbar-container" role="toolbar" jslog=${VisualLogging.toolbar('summary')}>
             <devtools-toolbar class="webmcp-toolbar" role="presentation" wrappable>
               <span class="toolbar-text">${i18nString(UIStrings.totalCalls, {PH1: input.toolCalls.length})}</span>
               <div class="toolbar-divider"></div>
@@ -640,7 +644,7 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
                            sidebar-position="second"
                            name="webmcp-details-split-view"
                            sidebar-visibility=${input.selectedTool ? 'show' : 'hidden'}>
-        <div slot="main" class="tool-list">
+        <div slot="main" class="tool-list" jslog=${VisualLogging.section('tool-list')}>
           <div class="section-title">${i18nString(UIStrings.toolRegistry)}</div>
           ${tools.length === 0 ? html`
           ${UI.Widget.widget(UI.EmptyWidget.EmptyWidget, {header: i18nString(UIStrings.noToolsPlaceholderTitle),
@@ -649,6 +653,7 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
             <devtools-list class="square-corners">
               ${tools.map(tool => html`
                     <div class=${Directives.classMap({'tool-item': true, selected: tool === input.selectedTool?.tool})}
+                         jslog=${VisualLogging.item().track({click: true}).context('tool')}
                          @click=${() => input.onToolSelect(tool)}
                          @contextmenu=${(e: Event) => onToolContextMenu(e, tool)}>
                     <div class="tool-name-container">
@@ -661,6 +666,7 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
                             compact: false,
                             clickHandler: () => onIconClick(tool.name, group.status),
                           } as IconButton.IconButton.IconButtonData}
+                          jslog=${VisualLogging.action('filter-by-status').track({click: true})}
                           @click=${(e: Event) => e.stopPropagation()}></icon-button>`)}
                     </div>
                     </div>
@@ -669,12 +675,13 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
             </devtools-list>
           `}
         </div>
-        <div slot="sidebar" class="tool-details">
+        <div slot="sidebar" class="tool-details" jslog=${VisualLogging.section('tool-details')}>
           <div class="section-title">
             <devtools-button
               .iconName=${'cross'}
               .size=${Buttons.Button.Size.SMALL}
               .variant=${Buttons.Button.Variant.ICON}
+              .jslogContext=${'close'}
               title=${i18nString(UIStrings.close)}
               @click=${() => input.onToolSelect(null)}
             ></devtools-button>
@@ -691,6 +698,7 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
                 .iconName=${'import'}
                 .size=${Buttons.Button.Size.SMALL}
                 .variant=${Buttons.Button.Variant.TEXT}
+                .jslogContext=${'paste'}
                 title=${i18nString(UIStrings.paste)}
                 @click=${input.onPaste}
               >${i18nString(UIStrings.paste)}</devtools-button>
@@ -714,7 +722,7 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
               class="webmcp-run-tool-button"
               .variant=${Buttons.Button.Variant.OUTLINED}
               .size=${Buttons.Button.Size.SMALL}
-              jslogContext="webmcp.run-tool"
+              .jslogContext=${'run-tool'}
               @click=${() => {
                 if (editorWidget && input.selectedTool) {
                   const params = editorWidget.getParameters();

package/front_end/panels/application/appManifestView.css

@@ -18,8 +18,8 @@
 }
 
 .inline-icon {
-  width: 16px;
-  height: 16px;
+  width: var(--sys-size-8);
+  height: var(--sys-size-8);
   margin-inline: var(--sys-size-3);
 
   &[name="check-circle"] {
@@ -33,7 +33,7 @@
 }
 
 select {
-  margin: 4px;
+  margin: var(--sys-size-3);
 }
 
 .inline-button {
@@ -59,7 +59,7 @@ devtools-report .report-section {
   grid-column: 1 / 3;
   grid-template-columns: subgrid;
   padding-bottom: var(--sys-size-5);
-  border-bottom: 1px solid var(--sys-color-divider);
+  border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
   margin-bottom: var(--sys-size-5);
 }
 
@@ -74,7 +74,7 @@ devtools-report .report-section {
 .image-wrapper {
   display: inline-block;
   height: fit-content;
-  margin-right: 8px;
+  margin-right: var(--sys-size-5);
 }
 
 .show-mask img {

package/front_end/panels/application/backgroundServiceView.css

@@ -4,6 +4,12 @@
  * found in the LICENSE file.
  */
 
+.background-service-view, .data-grid-container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
 .background-service-toolbar {
   background-color: var(--sys-color-cdt-base-container);
   border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
@@ -18,13 +24,19 @@
   overflow: auto;
 }
 
+.empty-state-container {
+  flex: auto;
+  display: flex;
+  flex-direction: column;
+}
+
 .background-service-preview {
   position: absolute;
   background-color: var(--sys-color-cdt-base-container);
   justify-content: center;
   align-items: center;
   overflow: auto;
-  font-size: 13px;
+  font-size: var(--sys-typescale-body3-size);
   color: var(--sys-color-on-surface-subtle);
 }
 
@@ -74,5 +86,9 @@
 }
 
 .background-service-record-inline-button {
-  margin-bottom: 6px;
+  margin-bottom: var(--sys-size-4);
+}
+
+.start-recording-button {
+  margin-top: var(--sys-size-7);
 }

package/front_end/panels/application/components/AdsView.ts

@@ -7,8 +7,10 @@ import '../../../ui/kit/kit.js';
 
 import * as Common from '../../../core/common/common.js';
 import * as i18n from '../../../core/i18n/i18n.js';
+import type * as Platform from '../../../core/platform/platform.js';
 import * as SDK from '../../../core/sdk/sdk.js';
 import type * as Protocol from '../../../generated/protocol.js';
+import * as Components from '../../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../../ui/legacy/legacy.js';
 import * as Lit from '../../../ui/lit/lit.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
@@ -16,6 +18,7 @@ import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 import adsViewStyles from './adsView.css.js';
 
 const {html} = Lit;
+const {repeat} = Lit.Directives;
 const {bindToSetting} = UI.UIUtils;
 
 const UIStrings = {
@@ -77,6 +80,19 @@ const UIStrings = {
    * @description Accessible name for the ad iframes table.
    */
   adIframes: 'Ad iframes',
+  /**
+   * @description Title for the ad scripts table.
+   * @example {3} PH1
+   */
+  adScriptsTitle: 'Ad scripts (total {PH1})',
+  /**
+   * @description Title for the URL column in the ad scripts table.
+   */
+  url: 'URL',
+  /**
+   * @description Accessible name for the ad scripts table.
+   */
+  adScripts: 'Ad scripts',
   /**
    * @description Title for the settings section.
    */
@@ -116,9 +132,14 @@ interface AdFrameNodeData {
   revealFrame: (e: Event) => void;
 }
 
+interface AdScriptNodeData {
+  url: Platform.DevToolsPath.UrlString;
+}
+
 export interface ViewInput {
   metrics: Protocol.Ads.AdMetrics;
   adFrames: AdFrameNodeData[];
+  adScripts: AdScriptNodeData[];
 }
 
 export type View = (input: ViewInput, output: undefined, target: HTMLElement|DocumentFragment) => void;
@@ -243,6 +264,24 @@ const DEFAULT_VIEW: View = (input, output, target) => {
         </devtools-data-grid>
       </div>
       <hr class="divider">
+      <div class="ad-scripts-title">${i18nString(UIStrings.adScriptsTitle, {PH1: input.adScripts.length})}</div>
+      <div class="ad-scripts-container">
+        <devtools-data-grid striped resize="last" class="ad-scripts-data-grid" name=${i18nString(UIStrings.adScripts)}>
+          <table>
+            <tr>
+              <th id="url" weight="1" sortable>${i18nString(UIStrings.url)}</th>
+            </tr>
+            ${repeat(input.adScripts, script => script.url, script => html`
+              <tr>
+                <td title=${script.url}>
+                  ${Components.Linkifier.Linkifier.renderLinkifiedUrl(script.url, {text: script.url})}
+                </td>
+              </tr>
+            `)}
+          </table>
+        </devtools-data-grid>
+      </div>
+      <hr class="divider">
       <div class="settings-title">${i18nString(UIStrings.settings)}</div>
       <devtools-checkbox class="setting-container small"
           ${bindToSetting(Common.Settings.Settings.instance().resolve(SDK.SDKSettings.showAdHighlightsSettingDescriptor))}>
@@ -278,6 +317,9 @@ export class AdsView extends UI.Widget.Widget {
   readonly #adFrames = new Map<Protocol.Page.FrameId, Protocol.Ads.AdFrameData>();
   readonly #adIframeElementIds = new Map<Protocol.Page.FrameId, string|null>();
   readonly #fetchingElementIds = new Set<Protocol.Page.FrameId>();
+  readonly #unresolvedScriptIds = new Set<Protocol.Runtime.ScriptId>();
+  readonly #adScriptNodeData: AdScriptNodeData[] = [];
+  readonly #seenUrls = new Set<string>();
 
   constructor(view: View = DEFAULT_VIEW) {
     super({useShadowDom: true});
@@ -336,13 +378,24 @@ export class AdsView extends UI.Widget.Widget {
     if (target) {
       const adsAgent = target.adsAgent();
       if (adsAgent) {
-        const response = await adsAgent.invoke_getAdMetrics();
+        const [metricsResponse, scriptsResponse] = await Promise.all([
+          adsAgent.invoke_getAdMetrics(),
+          adsAgent.invoke_getAdScripts(),
+        ]);
         if (!this.#isPolling || this.#pollSessionId !== sessionId) {
           return;
         }
-        if (!response.getError()) {
-          this.#currentMetrics = response.metrics;
-          this.#processAdFrames(response.metrics);
+        let needsUpdate = false;
+        if (!metricsResponse.getError()) {
+          this.#currentMetrics = metricsResponse.metrics;
+          this.#processAdFrames(metricsResponse.metrics);
+          needsUpdate = true;
+        }
+        if (!scriptsResponse.getError()) {
+          this.#processAdScripts(scriptsResponse.newScripts || []);
+          needsUpdate = true;
+        }
+        if (needsUpdate) {
           this.requestUpdate();
         }
       }
@@ -394,6 +447,12 @@ export class AdsView extends UI.Widget.Widget {
     }
   }
 
+  #processAdScripts(newScripts: Protocol.Ads.AdScript[]): void {
+    for (const script of newScripts) {
+      this.#unresolvedScriptIds.add(script.scriptId);
+    }
+  }
+
   async #fetchIframeElementId(frameId: Protocol.Page.FrameId): Promise<string|null|undefined> {
     const frame = SDK.FrameManager.FrameManager.instance().getFrame(frameId);
     if (!frame) {
@@ -421,10 +480,16 @@ export class AdsView extends UI.Widget.Widget {
     this.#adFrames.clear();
     this.#adIframeElementIds.clear();
     this.#fetchingElementIds.clear();
+    this.#unresolvedScriptIds.clear();
+    this.#adScriptNodeData.length = 0;
+    this.#seenUrls.clear();
     this.requestUpdate();
   }
 
   override performUpdate(): void {
+    const target = SDK.TargetManager.TargetManager.instance().primaryPageTarget();
+    const debuggerModel = target?.model(SDK.DebuggerModel.DebuggerModel);
+
     const adFramesArray: AdFrameNodeData[] = [];
     for (const [frameId, frame] of this.#adFrames) {
       // The table displays the resolved ID, or an <unnamed> placeholder if the
@@ -453,9 +518,40 @@ export class AdsView extends UI.Widget.Widget {
       });
     }
 
+    for (const scriptId of this.#unresolvedScriptIds) {
+      const sdkScript = debuggerModel?.scriptForId(scriptId);
+
+      // Filter out inline <script> tags and anonymous eval/dynamic scripts.
+      // We only want to display named external resources or explicitly named
+      // scripts to reduce noise in the UI.
+      if (!sdkScript) {
+        continue;
+      }
+      this.#unresolvedScriptIds.delete(scriptId);
+
+      if (sdkScript.isInlineScript() || sdkScript.isContentScript() || !sdkScript.sourceURL) {
+        continue;
+      }
+
+      const url = sdkScript.sourceURL;
+
+      // De-duplicate scripts by URL. V8 frequently generates multiple
+      // ScriptIds for the same URL (e.g., when the same external script
+      // is loaded into multiple iframes).
+      if (this.#seenUrls.has(url)) {
+        continue;
+      }
+      this.#seenUrls.add(url);
+
+      this.#adScriptNodeData.push({
+        url,
+      });
+    }
+
     const viewInput: ViewInput = {
       metrics: this.#currentMetrics,
       adFrames: adFramesArray,
+      adScripts: this.#adScriptNodeData,
     };
     this.#view(viewInput, undefined, this.contentElement);
   }

package/front_end/panels/application/components/adsView.css

@@ -20,7 +20,7 @@
 .metrics-container {
   flex: 0 0 auto;
   margin: 0;
-  border: 1px solid var(--sys-color-divider);
+  border: var(--sys-size-1) solid var(--sys-color-divider);
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: var(--sys-size-1);
@@ -61,6 +61,7 @@
 
 .metrics-title,
 .ad-frames-title,
+.ad-scripts-title,
 .settings-title {
   color: var(--sys-color-on-surface);
   flex: 0 0 auto;
@@ -68,12 +69,14 @@
   margin-bottom: var(--sys-size-5);
 }
 
-.ad-frames-data-grid {
+.ad-frames-data-grid,
+.ad-scripts-data-grid {
   flex: auto;
 }
 
-.ad-frames-container {
-  border: 1px solid var(--sys-color-divider);
+.ad-frames-container,
+.ad-scripts-container {
+  border: var(--sys-size-1) solid var(--sys-color-divider);
   display: flex;
   flex: 1; /* Takes up remaining space */
   flex-direction: column;
@@ -85,7 +88,7 @@
 
 .divider {
   border: none;
-  border-top: 1px solid var(--sys-color-divider);
+  border-top: var(--sys-size-1) solid var(--sys-color-divider);
   margin: var(--sys-size-8) 0 var(--sys-size-6);
 }
 

package/front_end/panels/application/components/backForwardCacheView.css

@@ -18,7 +18,7 @@ devtools-report-value {
 
 .gray-text {
   color: var(--sys-color-token-subtle);
-  margin: 0 0 5px 56px;
+  margin: 0 0 5px var(--sys-size-17);
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -29,12 +29,12 @@ devtools-report-value {
 }
 
 .details-list {
-  margin-left: 56px;
+  margin-left: var(--sys-size-17);
   grid-column-start: span 2;
 }
 
 .help-outline-icon {
-  margin: 0 2px;
+  margin: 0 var(--sys-size-2);
 }
 
 .circled-exclamation-icon {
@@ -63,7 +63,7 @@ devtools-report-value {
 }
 
 .report-value {
-  padding: 0 6px;
+  padding: 0 var(--sys-size-4);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -74,7 +74,7 @@ devtools-report-value {
   color: var(--sys-color-primary);
   text-decoration: underline;
   cursor: pointer;
-  outline-offset: 2px;
+  outline-offset: var(--sys-size-2);
 }
 
 devtools-report-value:has(devtools-tree-outline) {

package/front_end/panels/application/components/bounceTrackingMitigationsView.css

@@ -12,7 +12,7 @@ devtools-data-grid {
   color: var(--sys-color-primary);
   text-decoration: underline;
   cursor: pointer;
-  outline-offset: 2px;
+  outline-offset: var(--sys-size-2);
 }
 
 @media (forced-colors: active) {

package/front_end/panels/application/components/endpointsGrid.css

@@ -20,7 +20,7 @@
   .endpoints-header {
     font-size: 15px;
     background-color: var(--sys-color-surface2);
-    padding: 1px 4px;
+    padding: var(--sys-size-1) var(--sys-size-3);
     flex-shrink: 0;
   }
 

package/front_end/panels/application/components/permissionsPolicySection.css

@@ -20,7 +20,7 @@
     color: var(--sys-color-primary);
     text-decoration: underline;
     cursor: pointer;
-    outline-offset: 2px;
+    outline-offset: var(--sys-size-2);
   }
 
   button.link {

package/front_end/panels/application/components/protocolHandlersView.css

@@ -13,7 +13,7 @@
   color: var(--sys-color-primary);
   text-decoration: underline;
   cursor: pointer;
-  outline-offset: 2px;
+  outline-offset: var(--sys-size-2);
 }
 
 .devtools-link:focus-visible {
@@ -21,9 +21,9 @@
 }
 
 input.devtools-text-input[type="text"] {
-  padding: 3px 6px;
-  margin-left: 4px;
-  margin-right: 4px;
+  padding: 3px var(--sys-size-4);
+  margin-left: var(--sys-size-3);
+  margin-right: var(--sys-size-3);
   width: 250px;
   height: 25px;
 }
@@ -37,8 +37,8 @@ input.devtools-text-input[type="text"]::placeholder {
 }
 
 .inline-icon {
-  width: 16px;
-  height: 16px;
+  width: var(--sys-size-8);
+  height: var(--sys-size-8);
 
   &[name="check-circle"] {
     color: var(--icon-checkmark-green);

package/front_end/panels/application/components/reportsGrid.css

@@ -20,7 +20,7 @@
   .reporting-header {
     font-size: 15px;
     background-color: var(--sys-color-surface2);
-    padding: 1px 4px;
+    padding: var(--sys-size-1) var(--sys-size-3);
     flex-shrink: 0;
   }
 

package/front_end/panels/application/components/serviceWorkerRouterView.css

@@ -10,19 +10,19 @@
 }
 
 .router-rules {
-  border: 1px solid var(--sys-color-divider);
+  border: var(--sys-size-1) solid var(--sys-color-divider);
   border-spacing: 0;
   padding-left: 10px;
   padding-right: 10px;
   line-height: initial;
   margin-top: 0;
-  padding-bottom: 12px;
+  padding-bottom: var(--sys-size-6);
   text-wrap: balance;
 }
 
 .router-rule {
   display: flex;
-  margin-top: 12px;
+  margin-top: var(--sys-size-6);
   flex-direction: column;
 }
 
@@ -40,7 +40,7 @@
 .source {
   list-style: none;
   display: flex;
-  margin-top: 4px;
+  margin-top: var(--sys-size-3);
   flex-direction: row;
 }
 

package/front_end/panels/application/components/trustTokensView.css

@@ -5,7 +5,7 @@
  */
 
 :host {
-  padding: 20px;
+  padding: var(--sys-size-9);
   height: 100%;
   display: flex;
 }
@@ -15,19 +15,19 @@
 }
 
 devtools-data-grid {
-  margin-top: 20px;
+  margin-top: var(--sys-size-9);
 
   & devtools-button {
-    width: 14px;
-    height: 14px;
+    width: var(--sys-size-7);
+    height: var(--sys-size-7);
   }
 }
 
 devtools-icon {
-  width: 14px;
-  height: 14px;
+  width: var(--sys-size-7);
+  height: var(--sys-size-7);
 }
 
 .no-tt-message {
-  margin-top: 20px;
+  margin-top: var(--sys-size-9);
 }

package/front_end/panels/application/cookieItemsView.css

@@ -6,14 +6,14 @@
 
 @scope to (devtools-widget > *) {
   .cookie-preview-widget {
-    padding: 2px 6px;
+    padding: var(--sys-size-2) var(--sys-size-4);
   }
 
   .cookie-preview-widget-header {
     font-weight: bold;
     user-select: none;
     white-space: nowrap;
-    margin-bottom: 4px;
+    margin-bottom: var(--sys-size-3);
     flex: 0 0 18px;
     display: flex;
     align-items: center;
@@ -32,7 +32,7 @@
   }
 
   .cookie-preview-widget-toggle {
-    margin-left: 12px;
+    margin-left: var(--sys-size-6);
     font-weight: normal;
     flex-shrink: 1;
   }

package/front_end/panels/application/deviceBoundSessionsView.css

@@ -4,7 +4,7 @@
  * found in the LICENSE file.
  */
 .device-bound-session-grid-wrapper {
-  margin: 0 20px 5px;
+  margin: 0 var(--sys-size-9) 5px;
 }
 
 .device-bound-session-grid-wrapper devtools-data-grid {
@@ -14,11 +14,11 @@
 .device-bound-session-view-wrapper, .device-bound-session-sidebar {
   overflow-y: auto;
   scroll-behavior: smooth;
-  padding-bottom: 20px;
+  padding-bottom: var(--sys-size-9);
 }
 
 .device-bound-session-no-events-wrapper, .device-bound-session-no-event-details {
-  padding: 0 20px;
+  padding: 0 var(--sys-size-9);
 }
 
 .device-bound-sessions-toolbar {