chrome-devtools-frontend 1.0.1690116 → 1.0.1695017

package/front_end/ui/legacy/components/data_grid/dataGrid.css

@@ -6,13 +6,13 @@
 
 .data-grid {
   position: relative;
-  border: 1px solid var(--sys-color-divider) !important; /* stylelint-disable-line declaration-no-important */
+  border: var(--sys-size-1) solid var(--sys-color-divider) !important; /* stylelint-disable-line declaration-no-important */
   /* See: crbug.com/1152736 for color variable migration. */
   line-height: 120%;
 
   :focus-visible {
-    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));
   }
 }
 
@@ -40,8 +40,8 @@
 }
 
 .data-grid .aria-live-label {
-  width: 1px;
-  height: 1px;
+  width: var(--sys-size-1);
+  height: var(--sys-size-1);
   overflow: hidden;
 }
 
@@ -50,7 +50,7 @@
 }
 
 .data-grid .corner {
-  width: 14px;
+  width: var(--sys-size-7);
   padding-right: 0;
   padding-left: 0;
   border-left: 0 none transparent !important; /* stylelint-disable-line declaration-no-important */
@@ -83,7 +83,7 @@
 
 .data-grid tbody tr {
   display: none;
-  height: 20px;
+  height: var(--sys-size-9);
 
   &:has(td.show-more) {
     height: var(--sys-size-13);
@@ -106,8 +106,8 @@
   overflow: hidden;
   line-height: 18px;
   height: 18px;
-  border-left: 1px solid var(--sys-color-divider);
-  padding: 1px 4px;
+  border-left: var(--sys-size-1) solid var(--sys-color-divider);
+  padding: var(--sys-size-1) var(--sys-size-3);
 }
 
 .data-grid.auto-row-height tbody tr {
@@ -134,7 +134,7 @@
 }
 
 .data-grid th {
-  border-bottom: 1px solid var(--sys-color-divider);
+  border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
   text-align: left;
   font-weight: normal;
   vertical-align: middle;
@@ -155,7 +155,7 @@
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
-  min-width: 8px;
+  min-width: var(--sys-size-5);
 }
 
 .data-grid td.editing > div {
@@ -177,18 +177,18 @@
 .data-grid th .sort-order-icon-container {
   min-width: 0;
   position: absolute;
-  top: 1px;
+  top: var(--sys-size-1);
   right: 0;
-  bottom: 1px;
+  bottom: var(--sys-size-1);
   display: flex;
   align-items: center;
 }
 
 .data-grid th .sort-order-icon {
-  margin-right: 4px;
-  margin-bottom: -2px;
-  width: 14px;
-  height: 14px;
+  margin-right: var(--sys-size-3);
+  margin-bottom: calc(-1 * var(--sys-size-2));
+  width: var(--sys-size-7);
+  height: var(--sys-size-7);
   display: none;
   background-color: var(--icon-default);
 }
@@ -205,7 +205,7 @@
 
 .data-grid th.sort-ascending,
 .data-grid th.sort-descending {
-  padding-right: 14px;
+  padding-right: var(--sys-size-7);
 }
 
 .data-grid th.sortable:hover,
@@ -227,9 +227,9 @@
   user-select: none;
   mask-image: var(--image-file-triangle-right);
   float: left;
-  width: 14px;
-  height: 14px;
-  margin-right: 2px;
+  width: var(--sys-size-7);
+  height: var(--sys-size-7);
+  margin-right: var(--sys-size-2);
   content: "";
   position: relative;
   top: 3px;
@@ -268,8 +268,8 @@
 }
 
 .data-grid.no-selection:focus-visible {
-  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));
 }
 
 .data-grid:focus tbody tr.selected {

package/front_end/ui/legacy/components/inline_editor/AnimationTimingModel.ts

@@ -27,4 +27,4 @@ export abstract class AnimationTimingModel {
   }
 }
 
-export const LINEAR_BEZIER = Geometry.LINEAR_BEZIER;
+export const LINEAR_BEZIER: Geometry.CubicBezier = Geometry.LINEAR_BEZIER;

package/front_end/ui/legacy/components/inline_editor/BezierEditor.ts

@@ -245,50 +245,54 @@ export interface EventTypes {
   [Events.BEZIER_CHANGED]: string;
 }
 
-export const Presets = [
-  [
-    {name: 'linear', value: 'linear'},
-    {
-      name: 'elastic',
-      value:
-          'linear(0 0%, 0.22 2.1%, 0.86 6.5%, 1.11 8.6%, 1.3 10.7%, 1.35 11.8%, 1.37 12.9%, 1.37 13.7%, 1.36 14.5%, 1.32 16.2%, 1.03 21.8%, 0.94 24%, 0.89 25.9%, 0.88 26.85%, 0.87 27.8%, 0.87 29.25%, 0.88 30.7%, 0.91 32.4%, 0.98 36.4%, 1.01 38.3%, 1.04 40.5%, 1.05 42.7%, 1.05 44.1%, 1.04 45.7%, 1 53.3%, 0.99 55.4%, 0.98 57.5%, 0.99 60.7%, 1 68.1%, 1.01 72.2%, 1 86.7%, 1 100%)',
-    },
-    {
-      name: 'bounce',
-      value:
-          'linear(0 0%, 0 2.27%, 0.02 4.53%, 0.04 6.8%, 0.06 9.07%, 0.1 11.33%, 0.14 13.6%, 0.25 18.15%, 0.39 22.7%, 0.56 27.25%, 0.77 31.8%, 1 36.35%, 0.89 40.9%, 0.85 43.18%, 0.81 45.45%, 0.79 47.72%, 0.77 50%, 0.75 52.27%, 0.75 54.55%, 0.75 56.82%, 0.77 59.1%, 0.79 61.38%, 0.81 63.65%, 0.85 65.93%, 0.89 68.2%, 1 72.7%, 0.97 74.98%, 0.95 77.25%, 0.94 79.53%, 0.94 81.8%, 0.94 84.08%, 0.95 86.35%, 0.97 88.63%, 1 90.9%, 0.99 93.18%, 0.98 95.45%, 0.99 97.73%, 1 100%)',
-    },
-    {
-      name: 'emphasized',
-      value:
-          'linear(0 0%, 0 1.8%, 0.01 3.6%, 0.03 6.35%, 0.07 9.1%, 0.13 11.4%, 0.19 13.4%, 0.27 15%, 0.34 16.1%, 0.54 18.35%, 0.66 20.6%, 0.72 22.4%, 0.77 24.6%, 0.81 27.3%, 0.85 30.4%, 0.88 35.1%, 0.92 40.6%, 0.94 47.2%, 0.96 55%, 0.98 64%, 0.99 74.4%, 1 86.4%, 1 100%)',
-    },
-  ],
-  [
-    {name: 'ease-in-out', value: 'ease-in-out'},
-    {name: 'In Out · Sine', value: 'cubic-bezier(0.45, 0.05, 0.55, 0.95)'},
-    {name: 'In Out · Quadratic', value: 'cubic-bezier(0.46, 0.03, 0.52, 0.96)'},
-    {name: 'In Out · Cubic', value: 'cubic-bezier(0.65, 0.05, 0.36, 1)'},
-    {name: 'Fast Out, Slow In', value: 'cubic-bezier(0.4, 0, 0.2, 1)'},
-    {name: 'In Out · Back', value: 'cubic-bezier(0.68, -0.55, 0.27, 1.55)'},
-  ],
-  [
-    {name: 'Fast Out, Linear In', value: 'cubic-bezier(0.4, 0, 1, 1)'},
-    {name: 'ease-in', value: 'ease-in'},
-    {name: 'In · Sine', value: 'cubic-bezier(0.47, 0, 0.75, 0.72)'},
-    {name: 'In · Quadratic', value: 'cubic-bezier(0.55, 0.09, 0.68, 0.53)'},
-    {name: 'In · Cubic', value: 'cubic-bezier(0.55, 0.06, 0.68, 0.19)'},
-    {name: 'In · Back', value: 'cubic-bezier(0.6, -0.28, 0.74, 0.05)'},
-  ],
-  [
-    {name: 'ease-out', value: 'ease-out'},
-    {name: 'Out · Sine', value: 'cubic-bezier(0.39, 0.58, 0.57, 1)'},
-    {name: 'Out · Quadratic', value: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)'},
-    {name: 'Out · Cubic', value: 'cubic-bezier(0.22, 0.61, 0.36, 1)'},
-    {name: 'Linear Out, Slow In', value: 'cubic-bezier(0, 0, 0.2, 1)'},
-    {name: 'Out · Back', value: 'cubic-bezier(0.18, 0.89, 0.32, 1.28)'},
-  ],
-];
+export const Presets: Array<Array<{
+  name: string,
+  value: string,
+}>> =
+    [
+      [
+        {name: 'linear', value: 'linear'},
+        {
+          name: 'elastic',
+          value:
+              'linear(0 0%, 0.22 2.1%, 0.86 6.5%, 1.11 8.6%, 1.3 10.7%, 1.35 11.8%, 1.37 12.9%, 1.37 13.7%, 1.36 14.5%, 1.32 16.2%, 1.03 21.8%, 0.94 24%, 0.89 25.9%, 0.88 26.85%, 0.87 27.8%, 0.87 29.25%, 0.88 30.7%, 0.91 32.4%, 0.98 36.4%, 1.01 38.3%, 1.04 40.5%, 1.05 42.7%, 1.05 44.1%, 1.04 45.7%, 1 53.3%, 0.99 55.4%, 0.98 57.5%, 0.99 60.7%, 1 68.1%, 1.01 72.2%, 1 86.7%, 1 100%)',
+        },
+        {
+          name: 'bounce',
+          value:
+              'linear(0 0%, 0 2.27%, 0.02 4.53%, 0.04 6.8%, 0.06 9.07%, 0.1 11.33%, 0.14 13.6%, 0.25 18.15%, 0.39 22.7%, 0.56 27.25%, 0.77 31.8%, 1 36.35%, 0.89 40.9%, 0.85 43.18%, 0.81 45.45%, 0.79 47.72%, 0.77 50%, 0.75 52.27%, 0.75 54.55%, 0.75 56.82%, 0.77 59.1%, 0.79 61.38%, 0.81 63.65%, 0.85 65.93%, 0.89 68.2%, 1 72.7%, 0.97 74.98%, 0.95 77.25%, 0.94 79.53%, 0.94 81.8%, 0.94 84.08%, 0.95 86.35%, 0.97 88.63%, 1 90.9%, 0.99 93.18%, 0.98 95.45%, 0.99 97.73%, 1 100%)',
+        },
+        {
+          name: 'emphasized',
+          value:
+              'linear(0 0%, 0 1.8%, 0.01 3.6%, 0.03 6.35%, 0.07 9.1%, 0.13 11.4%, 0.19 13.4%, 0.27 15%, 0.34 16.1%, 0.54 18.35%, 0.66 20.6%, 0.72 22.4%, 0.77 24.6%, 0.81 27.3%, 0.85 30.4%, 0.88 35.1%, 0.92 40.6%, 0.94 47.2%, 0.96 55%, 0.98 64%, 0.99 74.4%, 1 86.4%, 1 100%)',
+        },
+      ],
+      [
+        {name: 'ease-in-out', value: 'ease-in-out'},
+        {name: 'In Out · Sine', value: 'cubic-bezier(0.45, 0.05, 0.55, 0.95)'},
+        {name: 'In Out · Quadratic', value: 'cubic-bezier(0.46, 0.03, 0.52, 0.96)'},
+        {name: 'In Out · Cubic', value: 'cubic-bezier(0.65, 0.05, 0.36, 1)'},
+        {name: 'Fast Out, Slow In', value: 'cubic-bezier(0.4, 0, 0.2, 1)'},
+        {name: 'In Out · Back', value: 'cubic-bezier(0.68, -0.55, 0.27, 1.55)'},
+      ],
+      [
+        {name: 'Fast Out, Linear In', value: 'cubic-bezier(0.4, 0, 1, 1)'},
+        {name: 'ease-in', value: 'ease-in'},
+        {name: 'In · Sine', value: 'cubic-bezier(0.47, 0, 0.75, 0.72)'},
+        {name: 'In · Quadratic', value: 'cubic-bezier(0.55, 0.09, 0.68, 0.53)'},
+        {name: 'In · Cubic', value: 'cubic-bezier(0.55, 0.06, 0.68, 0.19)'},
+        {name: 'In · Back', value: 'cubic-bezier(0.6, -0.28, 0.74, 0.05)'},
+      ],
+      [
+        {name: 'ease-out', value: 'ease-out'},
+        {name: 'Out · Sine', value: 'cubic-bezier(0.39, 0.58, 0.57, 1)'},
+        {name: 'Out · Quadratic', value: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)'},
+        {name: 'Out · Cubic', value: 'cubic-bezier(0.22, 0.61, 0.36, 1)'},
+        {name: 'Linear Out, Slow In', value: 'cubic-bezier(0, 0, 0.2, 1)'},
+        {name: 'Out · Back', value: 'cubic-bezier(0.18, 0.89, 0.32, 1.28)'},
+      ],
+    ];
 export interface PresetCategory {
   presets: Array<{
     name: string,

package/front_end/ui/legacy/components/inline_editor/CSSAngleUtils.ts

@@ -6,7 +6,7 @@ import * as Platform from '../../../../core/platform/platform.js';
 import * as Geometry from '../../../../models/geometry/geometry.js';
 import * as UI from '../../legacy.js';
 
-export const CSSAngleRegex = /(?<value>[+-]?\d*\.?\d+)(?<unit>deg|grad|rad|turn)/;
+const CSSAngleRegex = /(?<value>[+-]?\d*\.?\d+)(?<unit>deg|grad|rad|turn)/;
 
 export const enum AngleUnit {
   DEG = 'deg',

package/front_end/ui/legacy/components/inline_editor/PositionAreaEditor.docs.ts

@@ -0,0 +1,83 @@
+// Copyright 2026 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import * as Lit from '../../../../ui/lit/lit.js';
+import * as UI from '../../legacy.js';
+
+import * as InlineEditor from './inline_editor.js';
+
+const {html} = Lit;
+let text = 'top span-left';
+
+export function render(container: HTMLElement): void {
+  const area = InlineEditor.PositionAreaEditor.parsePositionArea(text) ?? undefined;
+
+  function onPositionAreaChanged(event: CustomEvent<InlineEditor.PositionAreaEditor.Area>): void {
+    text = InlineEditor.PositionAreaEditor.stringifyPositionArea(event.detail);
+    render(container);
+  }
+
+  function onInput(event: Event): void {
+    const input = event.target as HTMLInputElement;
+    text = input.value;
+    render(container);
+  }
+
+  Lit.render(html`
+        <style>
+          .wrapper {
+            display: flex;
+            flex-direction: column;
+            align-items: flex-start;
+            gap: var(--sys-size-5);
+            padding: var(--sys-size-8);
+          }
+
+          .input-container {
+            display: flex;
+            align-items: center;
+            gap: var(--sys-size-3);
+          }
+
+          .input-label {
+            font-family: var(--source-code-font-family);
+            font-size: var(--sys-typescale-body4-size);
+            color: var(--sys-color-token-property-special);
+          }
+
+          .property-input {
+            font-family: var(--source-code-font-family);
+            font-size: var(--sys-typescale-body4-size);
+            padding: var(--sys-size-2) var(--sys-size-3);
+            width: 200px;
+          }
+
+          .editor-container {
+            border: 1px solid var(--sys-color-neutral-outline);
+            border-radius: var(--sys-shape-corner-small);
+            overflow: hidden;
+            width: fit-content;
+          }
+        </style>
+        <div class="wrapper">
+          <div class="input-container">
+            <label class="input-label" for="position-area-input">position-area:</label>
+            <input
+              id="position-area-input"
+              class="property-input"
+              type="text"
+              .value=${text}
+              @input=${onInput}
+            />
+          </div>
+          <div class="editor-container">
+            <devtools-widget
+              ${UI.Widget.widget(InlineEditor.PositionAreaEditor.PositionAreaEditor, {area})}
+              @positionAreaChanged=${onPositionAreaChanged}>
+            </devtools-widget>
+          </div>
+        </div>
+      `,
+             container);
+}