chrome-devtools-frontend 1.0.1684555 → 1.0.1689415

package/front_end/panels/sources/callStackSidebarPane.css

@@ -7,13 +7,13 @@
 .call-frame-warnings-message {
   text-align: center;
   font-style: italic;
-  padding: 4px;
+  padding: var(--sys-size-3);
   color: var(--sys-color-on-surface-yellow);
   background-color: var(--sys-color-surface-yellow);
 }
 
 .ignore-listed-message {
-  padding: 1px;
+  padding: var(--sys-size-1);
 }
 
 .ignore-listed-message-label {
@@ -29,12 +29,12 @@
 .show-more-message {
   text-align: center;
   font-style: italic;
-  padding: 4px;
-  border-top: 1px solid var(--sys-color-divider);
+  padding: var(--sys-size-3);
+  border-top: var(--sys-size-1) solid var(--sys-color-divider);
 }
 
 .call-frame-item {
-  padding: 3px 8px 3px 20px;
+  padding: 3px var(--sys-size-5) 3px var(--sys-size-9);
   position: relative;
   min-height: 18px;
   line-height: 15px;
@@ -52,7 +52,7 @@
 }
 
 .call-frame-item:not(.async-header) {
-  border-top: 1px solid var(--sys-color-divider);
+  border-top: var(--sys-size-1) solid var(--sys-color-divider);
 }
 
 .call-frame-item-title,
@@ -92,8 +92,8 @@
 .async-header::before {
   content: " ";
   width: 100%;
-  border-top: 1px solid var(--sys-color-divider);
-  margin-top: 8px;
+  border-top: var(--sys-size-1) solid var(--sys-color-divider);
+  margin-top: var(--sys-size-5);
   position: absolute;
   left: 0;
 }
@@ -107,7 +107,7 @@
   display: none;
   position: absolute;
   top: 3px;
-  left: 4px;
+  left: var(--sys-size-3);
 }
 
 .call-frame-item.selected .selected-call-frame-icon {
@@ -118,7 +118,7 @@
   display: block;
   position: absolute;
   top: 3px;
-  right: 4px;
+  right: var(--sys-size-3);
 }
 
 @media (forced-colors: active) {

package/front_end/panels/sources/components/HeadersView.css

@@ -6,7 +6,7 @@
 
 :host {
   flex-grow: 1;
-  padding: 6px;
+  padding: var(--sys-size-4);
 }
 
 .row {
@@ -16,7 +16,7 @@
   font-family: var(--monospace-font-family);
   font-size: var(--monospace-font-size);
   align-items: center;
-  line-height: 24px;
+  line-height: var(--sys-typescale-body1-line-height);
 }
 
 .row devtools-button {
@@ -56,8 +56,8 @@
 
 .editable:hover,
 .editable:focus {
-  border: 1px solid var(--sys-color-neutral-outline);
-  border-radius: 2px;
+  border: var(--sys-size-1) solid var(--sys-color-neutral-outline);
+  border-radius: var(--sys-size-2);
 }
 
 .row .inline-button {
@@ -108,10 +108,10 @@
   color: var(--sys-color-primary);
   text-decoration: underline;
   cursor: pointer;
-  outline-offset: 2px;
+  outline-offset: var(--sys-size-2);
   padding: 0;
 }
 
 .learn-more-row {
-  line-height: 24px;
+  line-height: var(--sys-typescale-body1-line-height);
 }

package/front_end/panels/sources/debuggerPausedMessage.css

@@ -5,8 +5,8 @@
  */
 
 .paused-status {
-  margin: 6px;
-  padding: 4px 10px;
+  margin: var(--sys-size-4);
+  padding: var(--sys-size-3) 10px;
   border-radius: 10px;
   background-color: var(--sys-color-yellow-container);
   color: var(--sys-color-on-yellow-container);
@@ -38,8 +38,8 @@
 
 devtools-icon {
   position: absolute;
-  left: -1px;
-  top: -1px;
+  left: calc(-1 * var(--sys-size-1));
+  top: calc(-1 * var(--sys-size-1));
 }
 
 devtools-icon[name="info"] {

package/front_end/panels/sources/dialog.css

@@ -17,7 +17,7 @@ label {
 }
 
 input[type="text"].add-source-map {
-  box-shadow: 0 0 0 1px var(--box-shadow-outline-color);
+  box-shadow: 0 0 0 var(--sys-size-1) var(--box-shadow-outline-color);
   font-size: inherit;
-  margin: 0 8px 0 5px;
+  margin: 0 var(--sys-size-5) 0 5px;
 }

package/front_end/panels/sources/navigatorTree.css

@@ -35,7 +35,7 @@
 }
 
 .tree-outline li {
-  min-height: 20px;
+  min-height: var(--sys-size-9);
 }
 
 .tree-outline li:hover:not(.selected) .selection {
@@ -76,7 +76,7 @@
 .navigator-file-tree-item devtools-icon.dot::before {
   width: 7px;
   height: 7px;
-  top: 12px;
+  top: var(--sys-size-6);
   left: 11px;
 }
 

package/front_end/panels/sources/navigatorView.css

@@ -5,6 +5,6 @@
  */
 
 .navigator-toolbar {
-  border-bottom: 1px solid var(--sys-color-divider);
-  padding-left: 8px;
+  border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
+  padding-left: var(--sys-size-5);
 }

package/front_end/panels/sources/scopeChainSidebarPane.css

@@ -36,6 +36,6 @@
 }
 
 .scope-chain-sidebar-pane-section {
-  padding: 2px 4px;
+  padding: var(--sys-size-2) var(--sys-size-3);
   flex: none;
 }

package/front_end/panels/sources/sourcesNavigator.css

@@ -5,7 +5,7 @@
  */
 
 .border-container {
-  border-bottom: 1px solid var(--sys-color-divider);
+  border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
   flex-shrink: 0;
 }
 

package/front_end/panels/sources/sourcesPanel.css

@@ -37,7 +37,7 @@
   top: 0;
   width: 100%;
   background-color: var(--app-color-toolbar-background);
-  border-bottom: 1px solid var(--sys-color-divider);
+  border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
   overflow: hidden;
   z-index: 1;
 }
@@ -59,7 +59,7 @@
 .scripts-debug-toolbar-drawer > devtools-checkbox {
   display: none;
   padding-left: 3px;
-  height: 28px;
+  height: var(--sys-size-12);
 }
 
 .scripts-debug-toolbar-drawer.expanded > devtools-checkbox {

package/front_end/panels/sources/sourcesView.css

@@ -17,7 +17,7 @@
   flex: 0 0 auto;
   min-height: 27px;
   background-color: var(--sys-color-cdt-base-container);
-  border-top: 1px solid var(--sys-color-divider);
+  border-top: var(--sys-size-1) solid var(--sys-color-divider);
   overflow: hidden;
   z-index: 0;
   align-items: flex-end;

package/front_end/panels/sources/threadsSidebarPane.css

@@ -5,7 +5,7 @@
  */
 
 .thread-item {
-  padding: 3px 8px 3px 20px;
+  padding: 3px var(--sys-size-5) 3px var(--sys-size-9);
   position: relative;
   min-height: 18px;
   line-height: 15px;
@@ -18,7 +18,7 @@
 }
 
 .thread-item + .thread-item {
-  border-top: 1px solid var(--sys-color-divider);
+  border-top: var(--sys-size-1) solid var(--sys-color-divider);
 }
 
 .thread-item:hover {
@@ -45,9 +45,9 @@
 .selected-thread-icon {
   position: absolute;
   top: 3px;
-  left: 4px;
-  width: 16px;
-  height: 16px;
+  left: var(--sys-size-3);
+  width: var(--sys-size-8);
+  height: var(--sys-size-8);
 }
 
 @media (forced-colors: active) {

package/front_end/panels/sources/watchExpressionsSidebarPane.css

@@ -38,7 +38,7 @@
 
 .watch-expression-title {
   white-space: nowrap;
-  line-height: 20px;
+  line-height: var(--sys-typescale-body3-line-height);
   display: flex;
 }
 
@@ -53,13 +53,13 @@ li.watch-expression-tree-item > span.tree-element-title {
 }
 
 .watch-expression-object-header .watch-expression-title {
-  margin-left: 1px;
+  margin-left: var(--sys-size-1);
 }
 
 .watch-expression {
   position: relative;
   flex: auto;
-  min-height: 20px;
+  min-height: var(--sys-size-9);
   display: block;
   width: 100%;
 }
@@ -86,7 +86,7 @@ li.watch-expression-tree-item > span.tree-element-title {
   white-space: nowrap;
   display: inline;
   overflow: hidden;
-  padding-left: 4px;
+  padding-left: var(--sys-size-3);
   text-overflow: ellipsis;
   flex-shrink: 1;
 }
@@ -95,27 +95,27 @@ li.watch-expression-tree-item > span.tree-element-title {
   text-overflow: clip;
   overflow: hidden;
   white-space: nowrap;
-  padding-left: 4px;
+  padding-left: var(--sys-size-3);
   min-height: 18px;
   line-height: 18px;
   user-select: text;
 }
 
 .watch-expression-text-prompt-proxy {
-  margin: 2px 12px 2px -4px;
+  margin: var(--sys-size-2) var(--sys-size-6) var(--sys-size-2) calc(-1 * var(--sys-size-3));
   padding-bottom: 3px;
 }
 
 .watch-expression-header {
   flex: auto;
-  margin-left: -16px;
+  margin-left: calc(-1 * var(--sys-size-8));
   padding-left: 15px;
 }
 
 li.watch-expression-tree-item {
   container-type: inline-size;
   container-name: watch-expression;
-  padding-left: 4px;
+  padding-left: var(--sys-size-3);
 
   --watch-expression-delete-button-background-color: var(--sys-color-cdt-base);
 }

package/front_end/panels/timeline/TimelineDetailsView.ts

@@ -86,7 +86,8 @@ export class TimelineDetailsPane extends
   private lazyLayersView?: TimelineLayersView|null;
   private preferredTabId?: string;
   private selection?: TimelineSelection|null;
-  private updateContentsScheduled: boolean;
+  #debouncedUpdateContentsFromWindow: (() => void)&
+      {cancel: () => void} = Common.Debouncer.debounce(() => this.updateContentsFromWindow(), 100);
   private lazySelectorStatsView: TimelineSelectorStatsView|null;
   #parsedTrace: Trace.TraceModel.ParsedTrace|null = null;
   #eventToRelatedInsightsMap: TimelineComponents.RelatedInsightChips.EventToRelatedInsightsMap|null = null;
@@ -147,7 +148,6 @@ export class TimelineDetailsPane extends
     this.setPreferredTab(Tab.Details);
 
     this.rangeDetailViews = new Map();
-    this.updateContentsScheduled = false;
 
     const bottomUpView = new BottomUpTimelineTreeView();
     this.appendTab(Tab.BottomUp, i18nString(UIStrings.bottomup), bottomUpView);
@@ -384,13 +384,11 @@ export class TimelineDetailsPane extends
   }
 
   /**
-   * This forces a recalculation and rerendering of the timings
-   * breakdown of a track.
-   * User actions like zooming or scrolling can trigger many updates in
-   * short time windows, so we debounce the calls in those cases. Single
-   * sporadic calls (like selecting a new track) don't need to be
-   * debounced. The forceImmediateUpdate param configures the debouncing
-   * behaviour.
+   * Recalculates and renders the timing breakdown for the active details tab.
+   * Panning or zooming triggers rapid bounds updates, so we debounce this call
+   * using a trailing debounce. This ensures expensive tree recalculations in
+   * detailed views (e.g. Call Tree, Bottom-Up) only run once after user
+   * interaction finishes, preventing main-thread CPU spikes mid-gesture.
    */
   private scheduleUpdateContentsFromWindow(forceImmediateUpdate = false): void {
     if (!this.#parsedTrace) {
@@ -402,17 +400,7 @@ export class TimelineDetailsPane extends
       return;
     }
 
-    // Debounce this update as it's not critical.
-    if (!this.updateContentsScheduled) {
-      this.updateContentsScheduled = true;
-      setTimeout(() => {
-        if (!this.updateContentsScheduled) {
-          return;
-        }
-        this.updateContentsScheduled = false;
-        this.updateContentsFromWindow();
-      }, 100);
-    }
+    this.#debouncedUpdateContentsFromWindow();
   }
 
   private updateContentsFromWindow(): void {
@@ -468,7 +456,7 @@ export class TimelineDetailsPane extends
 
     if (selectionIsEvent(selection)) {
       // Cancel any pending debounced range stats update
-      this.updateContentsScheduled = false;
+      this.#debouncedUpdateContentsFromWindow.cancel();
 
       if (Trace.Types.Events.isLegacyTimelineFrame(selection.event)) {
         this.#addLayerTreeForSelectedFrame(selection.event);

package/front_end/panels/timeline/TimelineFlameChartView.ts

@@ -139,6 +139,8 @@ export class TimelineFlameChartView extends Common.ObjectWrapper.eventMixin<Even
   #eventToRelatedInsightsMap: TimelineComponents.RelatedInsightChips.EventToRelatedInsightsMap|null = null;
   #selectedGroupName: string|null = null;
   #onTraceBoundsChangeBound = this.#onTraceBoundsChange.bind(this);
+  #debouncedUpdateSearchResults: () => void = Common.Debouncer.debounce(() => this.updateSearchResults(false, false),
+                                                                        100);
   #gameKeyMatches = 0;
   #gameTimeout = setTimeout(() => ({}), 0);
 
@@ -1146,11 +1148,7 @@ export class TimelineFlameChartView extends Common.ObjectWrapper.eventMixin<Even
     this.mainFlameChart.setWindowTimes(visibleWindow.min, visibleWindow.max, shouldAnimate);
     this.networkDataProvider.setWindowTimes(visibleWindow.min, visibleWindow.max);
     this.networkFlameChart.setWindowTimes(visibleWindow.min, visibleWindow.max, shouldAnimate);
-    // Updating search results can be very expensive. Debounce to avoid over-calling it.
-    const debouncedUpdate = Common.Debouncer.debounce(() => {
-      this.updateSearchResults(false, false);
-    }, 100);
-    debouncedUpdate();
+    this.#debouncedUpdateSearchResults();
   }
 
   getLinkSelectionAnnotation(): Trace.Types.File.EntriesLinkAnnotation|null {

package/front_end/panels/timeline/TimelineMiniMap.ts

@@ -108,9 +108,9 @@ export class TimelineMiniMap extends
       return;
     }
 
-    const left = (event.data.startTime > 0) ? event.data.startTime : traceBoundsState.milli.entireTraceBounds.min;
+    const left = (event.data.startTime > 0) ? event.data.startTime : traceBoundsState.milli.minimapTraceBounds.min;
     const right =
-        Number.isFinite(event.data.endTime) ? event.data.endTime : traceBoundsState.milli.entireTraceBounds.max;
+        Number.isFinite(event.data.endTime) ? event.data.endTime : traceBoundsState.milli.minimapTraceBounds.max;
 
     TraceBounds.TraceBounds.BoundsManager.instance().setTimelineVisibleWindow(
         Trace.Helpers.Timing.traceWindowFromMilliSeconds(
@@ -118,7 +118,7 @@ export class TimelineMiniMap extends
             Trace.Types.Timing.Milli(right),
             ),
         {
-          shouldAnimate: true,
+          shouldAnimate: false,
         },
     );
   }

package/front_end/panels/timeline/components/LiveMetricsView.ts

@@ -569,7 +569,7 @@ function renderClsCard(input: ViewInput): Lit.LitTemplate {
 function renderInpCard(input: ViewInput): Lit.LitTemplate {
   const fieldData = input.cruxManager.getSelectedFieldMetricData('interaction_to_next_paint');
   const subparts = input.inpValue?.subparts;
-  const interaction = input.inpValue && input.interactions.get(input.inpValue.interactionId);
+  const interaction = input.inpValue?.interactionId ? input.interactions.get(input.inpValue.interactionId) : undefined;
 
   // clang-format off
   return html`

package/front_end/panels/timeline/components/breadcrumbsUI.css

@@ -17,8 +17,8 @@
 }
 
 .breadcrumb {
-  padding: 2px 6px;
-  border-radius: 4px;
+  padding: var(--sys-size-2) var(--sys-size-4);
+  border-radius: var(--sys-shape-corner-extra-small);
 }
 
 .breadcrumb:hover {
@@ -26,7 +26,7 @@
 }
 
 .range {
-  font-size: 12px;
+  font-size: var(--sys-typescale-body4-size);
   white-space: nowrap;
 }
 

package/front_end/panels/timeline/components/exportTraceOptions.css

@@ -16,7 +16,7 @@
   }
 
   devtools-button {
-    height: 24px;
+    height: var(--sys-size-11);
   }
 
   .export-trace-explanation {

package/front_end/panels/timeline/components/fieldSettingsDialog.css

@@ -24,11 +24,11 @@ devtools-dialog {
 }
 
 .privacy-disclosure {
-  margin: 8px 0;
+  margin: var(--sys-size-5) 0;
 }
 
 .url-override {
-  margin: 8px 0;
+  margin: var(--sys-size-5) 0;
   display: flex;
   align-items: center;
   overflow: hidden;
@@ -53,12 +53,12 @@ details > summary {
 }
 
 .origin-mapping-grid {
-  border: 1px solid var(--sys-color-divider);
-  margin-top: 8px;
+  border: var(--sys-size-1) solid var(--sys-color-divider);
+  margin-top: var(--sys-size-5);
 }
 
 .origin-mapping-description {
-  margin-bottom: 8px;
+  margin-bottom: var(--sys-size-5);
 }
 
 .origin-mapping-button-section {
@@ -73,7 +73,7 @@ details > summary {
 }
 
 .advanced-section-contents {
-  margin: 4px 0 14px;
+  margin: var(--sys-size-3) 0 var(--sys-size-7);
 }
 
 .buttons-section {
@@ -88,11 +88,11 @@ details > summary {
 }
 
 input[type="checkbox"] {
-  height: 12px;
-  width: 12px;
-  min-height: 12px;
-  min-width: 12px;
-  margin: 6px;
+  height: var(--sys-size-6);
+  width: var(--sys-size-6);
+  min-height: var(--sys-size-6);
+  min-width: var(--sys-size-6);
+  margin: var(--sys-size-4);
 }
 
 input[type="text"][disabled] {
@@ -100,7 +100,7 @@ input[type="text"][disabled] {
 }
 
 .warning {
-  margin: 2px 8px;
+  margin: var(--sys-size-2) var(--sys-size-5);
   color: var(--color-error-text);
 }
 
@@ -112,5 +112,5 @@ devtools-link {
 .divider {
   margin: 10px 0;
   border: none;
-  border-top: 1px solid var(--sys-color-divider);
+  border-top: var(--sys-size-1) solid var(--sys-color-divider);
 }

package/front_end/panels/timeline/components/ignoreListSetting.css

@@ -20,7 +20,7 @@
   }
 
   devtools-button {
-    height: 24px;
+    height: var(--sys-size-11);
   }
 
   &:not(:hover) devtools-button {
@@ -38,8 +38,8 @@
   .harmony-input[type="text"] {
     /* padding: 3px 6px; */
     /* height: 24px; */
-    border: 1px solid var(--sys-color-neutral-outline);
-    border-radius: 4px;
+    border: var(--sys-size-1) solid var(--sys-color-neutral-outline);
+    border-radius: var(--sys-shape-corner-extra-small);
     outline: none;
 
     &.error-input,