chrome-devtools-frontend 1.0.1684555 → 1.0.1689415

package/front_end/ui/legacy/components/perf_ui/ChartViewport.ts

@@ -504,31 +504,48 @@ export class ChartViewport extends UI.Widget.VBox {
     // that if the view is restored, the time shown is correct.
     if (this.cancelWindowTimesAnimation) {
       this.cancelWindowTimesAnimation();
+      this.cancelWindowTimesAnimation = null;
       this.setWindowTimes(this.targetLeftTime, this.targetRightTime, false);
     }
   }
 
   setWindowTimes(startTime: number, endTime: number, animate?: boolean): void {
-    if (startTime === this.targetLeftTime && endTime === this.targetRightTime) {
+    // If already animating to the requested target, let the active animation continue.
+    if (animate && this.cancelWindowTimesAnimation && this.targetLeftTime === startTime &&
+        this.targetRightTime === endTime) {
       return;
     }
-    if (!animate || this.visibleLeftTime === 0 || this.visibleRightTime === Infinity ||
-        (startTime === 0 && endTime === Infinity) || (startTime === Infinity && endTime === Infinity)) {
-      // Skip animation, move instantly.
-      this.targetLeftTime = startTime;
-      this.targetRightTime = endTime;
-      this.visibleLeftTime = startTime;
-      this.visibleRightTime = endTime;
-      this.scheduleUpdate();
+
+    // If already at rest at the target window with no active animation, nothing to do.
+    if (!this.cancelWindowTimesAnimation && this.visibleLeftTime === startTime && this.visibleRightTime === endTime) {
       return;
     }
+
+    // Cancel any in-flight animation before starting a new transition or snapping.
     if (this.cancelWindowTimesAnimation) {
       this.cancelWindowTimesAnimation();
-      this.visibleLeftTime = this.targetLeftTime;
-      this.visibleRightTime = this.targetRightTime;
+      this.cancelWindowTimesAnimation = null;
     }
+
     this.targetLeftTime = startTime;
     this.targetRightTime = endTime;
+
+    // Only animate if requested and both current and target bounds are finite, valid ranges.
+    // Initial loads (where visibleLeftTime/RightTime are 0 or uninitialized) and sentinel
+    // ranges (like Infinity) snap instantly to prevent animation glitches or NaN calculations.
+    const hasInitialWindow = Number.isFinite(this.visibleLeftTime) && Number.isFinite(this.visibleRightTime) &&
+        this.visibleRightTime > this.visibleLeftTime;
+    const isFiniteTarget = Number.isFinite(startTime) && Number.isFinite(endTime) && endTime > startTime;
+    const canAnimate = Boolean(animate) && hasInitialWindow && isFiniteTarget;
+
+    if (!canAnimate) {
+      // Snap instantly.
+      this.visibleLeftTime = startTime;
+      this.visibleRightTime = endTime;
+      this.scheduleUpdate();
+      return;
+    }
+
     this.cancelWindowTimesAnimation = UI.UIUtils.animateFunction(
         this.element.window(), animateWindowTimes.bind(this),
         [{from: this.visibleLeftTime, to: startTime}, {from: this.visibleRightTime, to: endTime}], 100, () => {

package/front_end/ui/legacy/components/perf_ui/TimelineOverviewPane.ts

@@ -311,10 +311,6 @@ export class TimelineOverviewPane extends Common.ObjectWrapper.eventMixin<EventT
     this.windowStartTime = startTime;
     this.windowEndTime = endTime;
     this.updateWindow();
-    this.dispatchEventToListeners(Events.OVERVIEW_PANE_WINDOW_CHANGED, {
-      startTime: Trace.Types.Timing.Milli(startTime),
-      endTime: Trace.Types.Timing.Milli(endTime),
-    });
   }
 
   private updateWindow(): void {

package/front_end/ui/legacy/components/perf_ui/chartViewport.css

@@ -11,7 +11,7 @@
   bottom: 0;
   overflow-x: hidden;
   z-index: 200;
-  padding-left: 1px;
+  padding-left: var(--sys-size-1);
 }
 
 .chart-viewport-v-scroll.always-show-scrollbar {
@@ -20,13 +20,13 @@
 /* force non overlay scrollbars for Mac */
 
 :host-context(.platform-mac) .chart-viewport-v-scroll {
-  right: 2px;
+  right: var(--sys-size-2);
   top: 3px;
   bottom: 3px;
 }
 
 :host-context(.platform-mac) ::-webkit-scrollbar {
-  width: 8px;
+  width: var(--sys-size-5);
 }
 
 :host-context(.platform-mac) ::-webkit-scrollbar-thumb {
@@ -56,7 +56,7 @@
   z-index: 100;
   background-color: var(--sys-color-state-ripple-primary);
   border-color: var(--sys-color-primary);
-  border-width: 0 1px;
+  border-width: 0 var(--sys-size-1);
   border-style: solid;
   pointer-events: none;
   top: 0;

package/front_end/ui/legacy/components/perf_ui/filmStripView.css

@@ -12,7 +12,7 @@
 
 .film-strip-view .frame .time {
   font-size: 10px;
-  margin-top: 2px;
+  margin-top: var(--sys-size-2);
 }
 
 .film-strip-view .gray-info-message {
@@ -25,19 +25,19 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  padding: 4px;
+  padding: var(--sys-size-3);
   flex: none;
   cursor: pointer;
 }
 
 .film-strip-view .frame .thumbnail {
-  min-width: 24px;
+  min-width: var(--sys-size-11);
   display: flex;
   flex-direction: row;
   align-items: center;
   pointer-events: none;
-  margin: 4px 0 2px;
-  border: 2px solid transparent;
+  margin: var(--sys-size-3) 0 var(--sys-size-2);
+  border: var(--sys-size-2) solid transparent;
 }
 
 .film-strip-view .frame:hover .thumbnail,
@@ -48,7 +48,7 @@
 .film-strip-view .frame .thumbnail img {
   height: auto;
   width: auto;
-  max-width: 80px;
+  max-width: var(--sys-size-19);
   max-height: 50px;
   pointer-events: none;
   box-shadow: 0 0 3px var(--box-shadow-outline-color);

package/front_end/ui/legacy/components/perf_ui/flameChart.css

@@ -16,17 +16,17 @@
 
 .flame-chart-marker-highlight-element {
   position: absolute;
-  top: 1px;
+  top: var(--sys-size-1);
   height: 18px;
-  width: 6px;
+  width: var(--sys-size-4);
   margin: 0 -3px;
   content: "";
   display: block;
 }
 
 .flame-chart-canvas:focus-visible {
-  border-top: 1px solid var(--sys-color-state-focus-ring);
-  border-bottom: 1px solid var(--sys-color-state-focus-ring);
+  border-top: var(--sys-size-1) solid var(--sys-color-state-focus-ring);
+  border-bottom: var(--sys-size-1) solid var(--sys-color-state-focus-ring);
 }
 
 .flame-chart-highlight-element {
@@ -44,7 +44,7 @@
 .flame-chart-selected-element {
   position: absolute;
   pointer-events: none;
-  outline: 2px solid var(--sys-color-primary);
+  outline: var(--sys-size-2) solid var(--sys-color-primary);
   background-color: var(--sys-color-state-ripple-primary);
 }
 
@@ -53,7 +53,7 @@
   top: 0;
   bottom: 0;
   z-index: 100;
-  width: 2px;
+  width: var(--sys-size-2);
   background-color: var(--ref-palette-pink50);
   pointer-events: none;
 }
@@ -64,7 +64,7 @@
   contain: content;
   background-color: var(--sys-color-cdt-base-container);
   pointer-events: none;
-  padding: 4px 8px;
+  padding: var(--sys-size-3) var(--sys-size-5);
   white-space: nowrap;
   max-width: 80%;
   box-shadow: var(--drop-shadow);

package/front_end/ui/legacy/components/perf_ui/overviewGrid.css

@@ -20,7 +20,7 @@
   width: 10px;
   margin-left: -5px; /* half width (incl the border) */
   background-color: var(--sys-color-tonal-container);
-  border: 1px solid var(--sys-color-tonal-outline);
+  border: var(--sys-size-1) solid var(--sys-color-tonal-outline);
   z-index: 500;
   border-radius: 3px;
 }
@@ -29,13 +29,13 @@
 .overview-grid-window-resizer::before,
 .overview-grid-window-resizer::after {
   content: "";
-  width: 1px;
+  width: var(--sys-size-1);
   background: var(--sys-color-primary);
   height: 7px;
   position: absolute;
-  left: 2px;
+  left: var(--sys-size-2);
   top: 5px;
-  border-radius: 1px;
+  border-radius: var(--sys-size-1);
 }
 
 .overview-grid-window-resizer::after {
@@ -48,7 +48,7 @@
 
 .overview-grid-cursor-area {
   position: absolute;
-  inset: 20px 0 0;
+  inset: var(--sys-size-9) 0 0;
   z-index: 500;
   cursor: text;
 }
@@ -57,7 +57,7 @@
   position: absolute;
   top: 0;
   bottom: 0;
-  width: 2px;
+  width: var(--sys-size-2);
   background-color: var(--sys-color-primary);
   z-index: 500;
   pointer-events: none;
@@ -73,7 +73,7 @@
   height: 100%;
   z-index: 300;
   pointer-events: none;
-  border: 2px none var(--sys-color-tonal-outline);
+  border: var(--sys-size-2) none var(--sys-color-tonal-outline);
 }
 
 .window-curtain-left {
@@ -107,7 +107,7 @@
 .create-breadcrumb-button-container.with-screenshots {
   /* We have more room when screenshots are enabled,
    * so push the button down slightly */
-  top: 20px;
+  top: var(--sys-size-9);
 }
 
 .create-breadcrumb-button {
@@ -116,9 +116,9 @@
   align-items: center;
   background: var(--sys-color-cdt-base-container);
   box-shadow: var(--drop-shadow-depth-3);
-  border-radius: 50px;
-  padding: 1px 6px;
-  gap: 2px;
+  border-radius: var(--sys-shape-corner-full);
+  padding: var(--sys-size-1) var(--sys-size-4);
+  gap: var(--sys-size-2);
 }
 
 .create-breadcrumb-button:active {

package/front_end/ui/legacy/components/perf_ui/pieChart.css

@@ -28,7 +28,7 @@
 
 .pie-chart-total {
   margin: auto;
-  padding: 2px 5px;
+  padding: var(--sys-size-2) 5px;
   pointer-events: auto;
 }
 
@@ -53,7 +53,7 @@
 }
 
 .pie-chart-legend-row {
-  margin: 5px 2px 5px auto;
+  margin: 5px var(--sys-size-2) 5px auto;
   padding-right: 25px;
 }
 
@@ -62,17 +62,17 @@
 }
 
 .pie-chart-legend-row:focus-visible {
-  box-shadow: 0 0 0 2px var(--sys-color-state-focus-ring) !important; /* stylelint-disable-line declaration-no-important */
+  box-shadow: 0 0 0 var(--sys-size-2) var(--sys-color-state-focus-ring) !important; /* stylelint-disable-line declaration-no-important */
 }
 
 .pie-chart-swatch {
   display: inline-block;
   width: 11px;
   height: 11px;
-  margin: 0 6px;
-  top: 1px;
+  margin: 0 var(--sys-size-4);
+  top: var(--sys-size-1);
   position: relative;
-  border: 1px solid var(--sys-color-neutral-outline);
+  border: var(--sys-size-1) solid var(--sys-color-neutral-outline);
 }
 
 .pie-chart-name {

package/front_end/ui/legacy/components/perf_ui/timelineGrid.css

@@ -26,7 +26,7 @@
   left: 0;
   right: 0;
   background-clip: padding-box;
-  height: 20px;
+  height: var(--sys-size-9);
   z-index: 200;
   pointer-events: none;
   overflow: hidden;
@@ -34,7 +34,7 @@
 
 .resources-divider {
   position: absolute;
-  width: 1px;
+  width: var(--sys-size-1);
   top: 0;
   bottom: 0;
   background-color: var(--sys-color-divider);
@@ -42,7 +42,7 @@
 
 .resources-event-divider {
   position: absolute;
-  width: 1px;
+  width: var(--sys-size-1);
   top: 0;
   bottom: 0;
   z-index: 300;
@@ -50,7 +50,7 @@
 
 .resources-divider-label {
   position: absolute;
-  top: 4px;
+  top: var(--sys-size-3);
   right: 3px;
   font-size: 80%;
   white-space: nowrap;
@@ -58,6 +58,6 @@
 }
 
 .timeline-grid-header {
-  height: 20px;
+  height: var(--sys-size-9);
   pointer-events: none;
 }

package/front_end/ui/legacy/components/quick_open/filteredListWidget.css

@@ -8,7 +8,7 @@
   display: flex;
   flex-direction: column;
   flex: auto;
-  border: 1px solid transparent;
+  border: var(--sys-size-1) solid transparent;
 }
 
 .hbox {
@@ -110,14 +110,14 @@ devtools-text-prompt {
 }
 
 .filtered-list-widget-item .deprecated-tag {
-  font-size: 11px;
+  font-size: var(--sys-typescale-body5-size);
   color: var(--sys-color-token-subtle);
 }
 
 .not-found-text {
   height: 34px;
   line-height: 34px;
-  padding-left: 8px;
+  padding-left: var(--sys-size-5);
   font-style: italic;
   color: var(--sys-color-state-disabled);
   background: var(--sys-color-state-disabled-container);

package/front_end/ui/legacy/components/source_frame/ResourceSourceFrame.ts

@@ -37,7 +37,7 @@ import '../../legacy.js';
 import * as Common from '../../../../core/common/common.js';
 import * as i18n from '../../../../core/i18n/i18n.js';
 import * as TextUtils from '../../../../core/text_utils/text_utils.js';
-import * as FormatterActions from '../../../../entrypoints/formatter_worker/FormatterActions.js';  // eslint-disable-line @devtools/es-modules-import
+import * as FormatterActions from '../../../../entrypoints/formatter_actions/formatter_actions.js';
 import {render} from '../../../../ui/lit/lit.js';
 import * as UI from '../../legacy.js';
 

package/front_end/ui/legacy/components/source_frame/imageView.css

@@ -9,7 +9,7 @@
 }
 
 .image-view > .image {
-  padding: 20px 20px 10px;
+  padding: var(--sys-size-9) var(--sys-size-9) 10px;
   text-align: center;
 }
 

package/front_end/ui/legacy/components/source_frame/jsonView.css

@@ -5,7 +5,7 @@
  */
 
 .json-view {
-  padding: 2px 6px;
+  padding: var(--sys-size-2) var(--sys-size-4);
   overflow: auto;
 }
 

package/front_end/ui/legacy/components/source_frame/resourceSourceFrame.css

@@ -10,5 +10,5 @@
 
 devtools-toolbar {
   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);
 }

package/front_end/ui/legacy/components/source_frame/xmlTree.css

@@ -9,7 +9,7 @@
   list-style: none;
   padding: 0;
   margin: 0;
-  padding-inline-start: 16px;
+  padding-inline-start: var(--sys-size-8);
 }
 
 ol.tree-outline {
@@ -17,11 +17,11 @@ ol.tree-outline {
 }
 
 .tree-outline li {
-  min-height: 12px;
+  min-height: var(--sys-size-6);
 }
 
 ::part(shadow-xml-view-close-tag) {
-  margin-left: -16px;
+  margin-left: calc(-1 * var(--sys-size-8));
 }
 
 ::part(shadow-xml-view-close-tag),::part(shadow-xml-view-tag) {

package/front_end/ui/legacy/components/utils/imagePreview.css

@@ -11,7 +11,7 @@
 }
 
 .image-preview-container img {
-  margin: 6px 0;
+  margin: var(--sys-size-4) 0;
   width: auto;
   max-height: 100px;
   background-image: var(--image-file-checker);

package/front_end/ui/legacy/components/utils/jsUtils.css

@@ -5,7 +5,7 @@
  */
 
 .stack-preview-async-description {
-  padding: 3px 0 1px;
+  padding: 3px 0 var(--sys-size-1);
   font-weight: bold;
 }
 
@@ -25,8 +25,8 @@
     display: var(--override-display-stack-preview-tbody, table-row-group);
 
     & > tr {
-      height: 16px;
-      line-height: 16px;
+      height: var(--sys-size-8);
+      line-height: var(--sys-size-8);
 
       &:has(td.link > .ignore-list-link) {
         opacity: 60%;
@@ -59,7 +59,7 @@
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-    padding-inline: 2px;
+    padding-inline: var(--sys-size-2);
 
     &.link {
       overflow: visible;
@@ -96,20 +96,20 @@
 
   .arrow-icon-button {
     cursor: pointer;
-    padding: 1px 0;
+    padding: var(--sys-size-1) 0;
     border: none;
     background: none;
-    margin-left: -4px;
-    margin-right: -2px;
+    margin-left: calc(-1 * var(--sys-size-3));
+    margin-right: calc(-1 * var(--sys-size-2));
   }
 
   .arrow-icon {
     display: inline-block;
     mask-image: var(--image-file-triangle-right);
     background-color: var(--icon-default);
-    margin-top: 2px;
-    height: 14px;
-    width: 14px;
+    margin-top: var(--sys-size-2);
+    height: var(--sys-size-7);
+    width: var(--sys-size-7);
     transition: transform 200ms;
   }
 

package/front_end/ui/legacy/dropTarget.css

@@ -19,7 +19,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  margin: 20px;
-  border: 4px dashed var(--sys-color-neutral-outline);
+  margin: var(--sys-size-9);
+  border: var(--sys-size-3) dashed var(--sys-color-neutral-outline);
   pointer-events: none;
 }

package/front_end/ui/legacy/emptyWidget.css

@@ -4,6 +4,12 @@
  * found in the LICENSE file.
  */
 
+:host {
+  display: flex;
+  flex-direction: column;
+  flex: auto;
+}
+
 .empty-view-scroller {
   overflow: auto;
 }

package/front_end/ui/legacy/filter.css

@@ -10,7 +10,7 @@
   flex: none;
   flex-wrap: wrap;
   align-items: center;
-  border-bottom: 1px solid var(--sys-color-divider);
+  border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
   color: var(--sys-color-on-surface-subtle);
 }
 
@@ -21,7 +21,7 @@
 }
 
 .filter-bitset-filter {
-  padding: 2px;
+  padding: var(--sys-size-2);
   display: inline-flex;
   overflow: hidden;
   min-height: var(--sys-size-11);
@@ -34,19 +34,19 @@
 
 .filter-bitset-filter span {
   color: var(--sys-color-on-surface);
-  outline: 1px solid var(--sys-color-neutral-outline);
-  outline-offset: -1px;
+  outline: var(--sys-size-1) solid var(--sys-color-neutral-outline);
+  outline-offset: calc(-1 * var(--sys-size-1));
   box-sizing: border-box;
   display: inline-block;
   flex: none;
-  margin: auto 2px;
-  padding: 3px 6px;
+  margin: auto var(--sys-size-2);
+  padding: 3px var(--sys-size-4);
   background: transparent;
-  border-radius: 6px;
+  border-radius: var(--sys-size-4);
   overflow: hidden;
   cursor: pointer;
   font-weight: 500;
-  font-size: 11px;
+  font-size: var(--sys-typescale-body5-size);
 }
 
 .filter-bitset-filter span:focus-visible {
@@ -74,21 +74,21 @@
 
 .filter-bitset-filter-divider {
   background-color: var(--sys-color-divider);
-  height: 16px;
-  width: 1px;
-  margin: auto 2px;
+  height: var(--sys-size-8);
+  width: var(--sys-size-1);
+  margin: auto var(--sys-size-2);
   display: inline-block;
 }
 
 .filter-checkbox-filter {
-  padding-left: 1px;
+  padding-left: var(--sys-size-1);
   padding-right: 7px;
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
   display: inline-flex;
   vertical-align: middle;
-  height: 24px;
+  height: var(--sys-size-11);
   position: relative;
 }
 
@@ -103,15 +103,15 @@
 
 .filter-divider {
   background-color: var(--sys-color-divider);
-  width: 1px;
-  margin: 5px 4px;
-  height: 16px;
+  width: var(--sys-size-1);
+  margin: 5px var(--sys-size-3);
+  height: var(--sys-size-8);
 }
 
 .toolbar-button {
   white-space: nowrap;
   overflow: hidden;
-  min-width: 28px;
+  min-width: var(--sys-size-12);
   background: transparent;
   border-radius: 0;
 }
@@ -128,7 +128,7 @@
 }
 
 .toolbar-text {
-  margin: 0 4px 0 0;
+  margin: 0 var(--sys-size-3) 0 0;
   text-overflow: ellipsis;
   flex: auto;
   overflow: hidden;
@@ -165,7 +165,7 @@
   }
 
   &:focus-visible {
-    outline: 2px solid var(--sys-color-state-focus-ring);
+    outline: var(--sys-size-2) solid var(--sys-color-state-focus-ring);
   }
 }
 

package/front_end/ui/legacy/infobar.css

@@ -43,8 +43,8 @@
 }
 
 .infobar:focus {
-  outline: 2px solid var(--sys-color-state-focus-ring);
-  outline-offset: -2px;
+  outline: var(--sys-size-2) solid var(--sys-color-state-focus-ring);
+  outline-offset: calc(-1 * var(--sys-size-2));
 }
 
 .infobar-warning {