chrome-devtools-frontend 1.0.1550444 → 1.0.1555174

package/front_end/panels/recorder/components/TimelineSection.ts

@@ -1,20 +1,14 @@
 // Copyright 2023 The Chromium Authors
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
-/* eslint-disable @devtools/no-lit-render-outside-of-view */
 
+import * as UI from '../../../ui/legacy/legacy.js';
 import * as Lit from '../../../ui/lit/lit.js';
 
 import timelineSectionStyles from './timelineSection.css.js';
 
 const {html} = Lit;
 
-declare global {
-  interface HTMLElementTagNameMap {
-    'devtools-timeline-section': TimelineSection;
-  }
-}
-
 export interface TimelineSectionData {
   isFirstSection: boolean;
   isLastSection: boolean;
@@ -23,59 +17,86 @@ export interface TimelineSectionData {
   isSelected: boolean;
 }
 
-export class TimelineSection extends HTMLElement {
+export type ViewInput = TimelineSectionData;
+export type ViewOutput = unknown;
+
+export const DEFAULT_VIEW = (input: ViewInput, _output: ViewOutput, target: HTMLElement): void => {
+  const classes = {
+    'timeline-section': true,
+    'is-end-of-group': input.isEndOfGroup,
+    'is-start-of-group': input.isStartOfGroup,
+    'is-first-section': input.isFirstSection,
+    'is-last-section': input.isLastSection,
+    'is-selected': input.isSelected,
+  };
+
+  // clang-format off
+  Lit.render(
+    html`
+    <style>${timelineSectionStyles}</style>
+    <div class=${Lit.Directives.classMap(classes)}>
+      <div class="overlay"></div>
+      <div class="icon"><slot name="icon"></slot></div>
+      <svg width="24" height="100%" class="bar">
+        <rect class="line" x="7" y="0" width="2" height="100%" />
+      </svg>
+      <slot></slot>
+    </div>
+  `,
+    target,
+  );
+  // clang-format on
+};
+
+export class TimelineSection extends UI.Widget.Widget {
   #isEndOfGroup = false;
   #isStartOfGroup = false;
   #isFirstSection = false;
   #isLastSection = false;
   #isSelected = false;
-  readonly #shadowRoot = this.attachShadow({mode: 'open'});
+  #view: typeof DEFAULT_VIEW;
 
-  set data(data: TimelineSectionData) {
-    this.#isFirstSection = data.isFirstSection;
-    this.#isLastSection = data.isLastSection;
-    this.#isEndOfGroup = data.isEndOfGroup;
-    this.#isStartOfGroup = data.isStartOfGroup;
-    this.#isSelected = data.isSelected;
+  constructor(element?: HTMLElement, view = DEFAULT_VIEW) {
+    super(element, {useShadowDom: true});
+    this.#view = view;
+  }
 
-    this.#render();
+  set isEndOfGroup(value: boolean) {
+    this.#isEndOfGroup = value;
+    this.requestUpdate();
   }
 
-  connectedCallback(): void {
-    this.#render();
+  set isStartOfGroup(value: boolean) {
+    this.#isStartOfGroup = value;
+    this.requestUpdate();
   }
 
-  #render(): void {
-    const classes = {
-      'timeline-section': true,
-      'is-end-of-group': this.#isEndOfGroup,
-      'is-start-of-group': this.#isStartOfGroup,
-      'is-first-section': this.#isFirstSection,
-      'is-last-section': this.#isLastSection,
-      'is-selected': this.#isSelected,
-    };
+  set isFirstSection(value: boolean) {
+    this.#isFirstSection = value;
+    this.requestUpdate();
+  }
+
+  set isLastSection(value: boolean) {
+    this.#isLastSection = value;
+    this.requestUpdate();
+  }
 
-    // clang-format off
-    Lit.render(
-      html`
-      <style>${timelineSectionStyles}</style>
-      <div class=${Lit.Directives.classMap(classes)}>
-        <div class="overlay"></div>
-        <div class="icon"><slot name="icon"></slot></div>
-        <svg width="24" height="100%" class="bar">
-          <rect class="line" x="7" y="0" width="2" height="100%" />
-        </svg>
-        <slot></slot>
-      </div>
-    `,
-      this.#shadowRoot,
-      { host: this },
+  set isSelected(value: boolean) {
+    this.#isSelected = value;
+    this.requestUpdate();
+  }
+
+  override performUpdate(): void {
+    this.#view(
+        {
+          isEndOfGroup: this.#isEndOfGroup,
+          isStartOfGroup: this.#isStartOfGroup,
+          isFirstSection: this.#isFirstSection,
+          isLastSection: this.#isLastSection,
+          isSelected: this.#isSelected,
+        },
+        {},
+        this.contentElement,
     );
-    // clang-format on
   }
 }
-
-customElements.define(
-    'devtools-timeline-section',
-    TimelineSection,
-);

package/front_end/panels/recorder/components/components.ts

@@ -7,7 +7,7 @@ import * as CreateRecordingView from './CreateRecordingView.js';
 import * as RecordingListView from './RecordingListView.js';
 import * as RecordingView from './RecordingView.js';
 import * as ReplaySection from './ReplaySection.js';
-import * as SelectButton from './SelectButton.js';
+import * as SelectorPicker from './SelectorPicker.js';
 import * as StepEditor from './StepEditor.js';
 import * as StepView from './StepView.js';
 import * as TimelineSection from './TimelineSection.js';
@@ -18,7 +18,7 @@ export {
   RecordingListView,
   RecordingView,
   ReplaySection,
-  SelectButton,
+  SelectorPicker,
   StepEditor,
   StepView,
   TimelineSection,

package/front_end/panels/recorder/components/selectorPicker.css

@@ -0,0 +1,14 @@
+/*
+ * Copyright 2025 The Chromium Authors
+ * Use of this source code is governed by a BSD-style license that can be
+ * found in the LICENSE file.
+ */
+
+:host {
+  display: inline-block;
+}
+
+.selector-picker {
+  width: 18px;
+  height: 18px;
+}

package/front_end/panels/recorder/components/stepEditor.css

@@ -44,11 +44,6 @@
   margin-left: 4em;
 }
 
-.selector-picker {
-  width: 18px;
-  height: 18px;
-}
-
 .inline-button {
   width: 18px;
   height: 18px;

package/front_end/panels/recorder/components/stepView.css

@@ -3,247 +3,245 @@
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file.
  */
-@scope to (devtools-widget > *) {
-  * {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-    font-size: inherit;
-  }
-
-  .title-container {
-    /* Vertically center items with min-width: 0; */
-    min-width: 0;
-    font-size: 13px;
-    line-height: 16px;
-    letter-spacing: 0.03em;
-    display: flex;
-    flex-direction: row;
-    gap: 3px;
-    outline-offset: 3px;
-  }
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-size: inherit;
+}
 
-  .action {
-    display: flex;
-    align-items: flex-start;
-  }
+.title-container {
+  /* Vertically center items with min-width: 0; */
+  min-width: 0;
+  font-size: 13px;
+  line-height: 16px;
+  letter-spacing: 0.03em;
+  display: flex;
+  flex-direction: row;
+  gap: 3px;
+  outline-offset: 3px;
+}
 
-  .title {
-    flex: 1;
-    min-width: 0;
-  }
+.action {
+  display: flex;
+  align-items: flex-start;
+}
 
-  .is-start-of-group .title {
-    font-weight: bold;
-  }
+.title {
+  flex: 1;
+  min-width: 0;
+}
 
-  .error-icon {
-    display: none;
-  }
+.is-start-of-group .title {
+  font-weight: bold;
+}
 
-  .breakpoint-icon {
-    visibility: hidden;
-    cursor: pointer;
-    opacity: 0%;
-    fill: var(--sys-color-primary);
-    stroke: #1a73e8; /* stylelint-disable-line plugin/use_theme_colors */
-    transform: translate(-1.92px, -3px);
-  }
+.error-icon {
+  display: none;
+}
 
-  .circle-icon {
-    fill: var(--sys-color-primary);
-    stroke: var(--sys-color-cdt-base-container);
-    stroke-width: 4px;
-    r: 5px;
-    cx: 8px;
-    cy: 8px;
-  }
+.breakpoint-icon {
+  visibility: hidden;
+  cursor: pointer;
+  opacity: 0%;
+  fill: var(--sys-color-primary);
+  stroke: #1a73e8; /* stylelint-disable-line plugin/use_theme_colors */
+  transform: translate(-1.92px, -3px);
+}
 
-  .is-start-of-group .circle-icon {
-    r: 7px;
-    fill: var(--sys-color-cdt-base-container);
-    stroke: var(--sys-color-primary);
-    stroke-width: 2px;
-  }
+.circle-icon {
+  fill: var(--sys-color-primary);
+  stroke: var(--sys-color-cdt-base-container);
+  stroke-width: 4px;
+  r: 5px;
+  cx: 8px;
+  cy: 8px;
+}
 
-  .step.is-success .circle-icon {
-    fill: var(--sys-color-primary);
-    stroke: var(--sys-color-primary);
-  }
+.is-start-of-group .circle-icon {
+  r: 7px;
+  fill: var(--sys-color-cdt-base-container);
+  stroke: var(--sys-color-primary);
+  stroke-width: 2px;
+}
 
-  .step.is-current .circle-icon {
-    stroke-dasharray: 24 10;
-    animation: rotate 1s linear infinite;
-    fill: var(--sys-color-cdt-base-container);
-    stroke: var(--sys-color-primary);
-    stroke-width: 2px;
-  }
+.step.is-success .circle-icon {
+  fill: var(--sys-color-primary);
+  stroke: var(--sys-color-primary);
+}
 
-  .error {
-    margin: 16px 0 0;
-    padding: 8px;
-    background: var(--sys-color-error-container);
-    color: var(--sys-color-error);
-    position: relative;
-  }
+.step.is-current .circle-icon {
+  stroke-dasharray: 24 10;
+  animation: rotate 1s linear infinite;
+  fill: var(--sys-color-cdt-base-container);
+  stroke: var(--sys-color-primary);
+  stroke-width: 2px;
+}
 
-  @keyframes rotate {
-    0% {
-      transform: translate(8px, 8px) rotate(0) translate(-8px, -8px);
-    }
+.error {
+  margin: 16px 0 0;
+  padding: 8px;
+  background: var(--sys-color-error-container);
+  color: var(--sys-color-error);
+  position: relative;
+}
 
-    100% {
-      transform: translate(8px, 8px) rotate(360deg) translate(-8px, -8px);
-    }
+@keyframes rotate {
+  0% {
+    transform: translate(8px, 8px) rotate(0) translate(-8px, -8px);
   }
 
-  .step.is-error .circle-icon {
-    fill: var(--sys-color-error);
-    stroke: var(--sys-color-error);
+  100% {
+    transform: translate(8px, 8px) rotate(360deg) translate(-8px, -8px);
   }
+}
 
-  .step.is-error .error-icon {
-    display: block;
-    transform: translate(4px, 4px);
-  }
+.step.is-error .circle-icon {
+  fill: var(--sys-color-error);
+  stroke: var(--sys-color-error);
+}
 
-  :host-context(.was-successful) .circle-icon {
-    animation: flash-circle 2s;
-  }
+.step.is-error .error-icon {
+  display: block;
+  transform: translate(4px, 4px);
+}
 
-  :host-context(.was-successful) .breakpoint-icon {
-    animation: flash-breakpoint-icon 2s;
-  }
+:host-context(.was-successful) .circle-icon {
+  animation: flash-circle 2s;
+}
 
-  @keyframes flash-circle {
-    25% {
-      fill: var(--override-color-recording-successful-text);
-      stroke: var(--override-color-recording-successful-text);
-    }
+:host-context(.was-successful) .breakpoint-icon {
+  animation: flash-breakpoint-icon 2s;
+}
 
-    75% {
-      fill: var(--override-color-recording-successful-text);
-      stroke: var(--override-color-recording-successful-text);
-    }
+@keyframes flash-circle {
+  25% {
+    fill: var(--override-color-recording-successful-text);
+    stroke: var(--override-color-recording-successful-text);
   }
 
-  @keyframes flash-breakpoint-icon {
-    25% {
-      fill: var(--override-color-recording-successful-text);
-      stroke: var(--override-color-recording-successful-text);
-    }
-
-    75% {
-      fill: var(--override-color-recording-successful-text);
-      stroke: var(--override-color-recording-successful-text);
-    }
+  75% {
+    fill: var(--override-color-recording-successful-text);
+    stroke: var(--override-color-recording-successful-text);
   }
+}
 
-  .chevron {
-    width: 14px;
-    height: 14px;
-    transition: 200ms;
-    position: absolute;
-    top: 18px;
-    left: 24px;
-    transform: rotate(-90deg);
-    color: var(--sys-color-on-surface);
+@keyframes flash-breakpoint-icon {
+  25% {
+    fill: var(--override-color-recording-successful-text);
+    stroke: var(--override-color-recording-successful-text);
   }
 
-  .expanded .chevron {
-    transform: rotate(0deg);
+  75% {
+    fill: var(--override-color-recording-successful-text);
+    stroke: var(--override-color-recording-successful-text);
   }
+}
 
-  .is-start-of-group .chevron {
-    top: 34px;
-  }
+.chevron {
+  width: 14px;
+  height: 14px;
+  transition: 200ms;
+  position: absolute;
+  top: 18px;
+  left: 24px;
+  transform: rotate(-90deg);
+  color: var(--sys-color-on-surface);
+}
 
-  .details {
-    display: none;
-    margin-top: 8px;
-    position: relative;
-  }
+.expanded .chevron {
+  transform: rotate(0deg);
+}
 
-  .expanded .details {
-    display: block;
-  }
+.is-start-of-group .chevron {
+  top: 34px;
+}
 
-  .step-details {
-    overflow: auto;
-  }
+.details {
+  display: none;
+  margin-top: 8px;
+  position: relative;
+}
 
-  devtools-recorder-step-editor {
-    border: 1px solid var(--sys-color-neutral-outline);
-    padding: 3px 6px 6px;
-    margin-left: -6px;
-    border-radius: 3px;
-  }
+.expanded .details {
+  display: block;
+}
 
-  devtools-recorder-step-editor:hover {
-    border: 1px solid var(--sys-color-neutral-outline);
-  }
+.step-details {
+  overflow: auto;
+}
 
-  devtools-recorder-step-editor.is-selected {
-    background-color: color-mix(in srgb, var(--sys-color-tonal-container), var(--sys-color-cdt-base-container) 50%);
-    border: 1px solid var(--sys-color-tonal-outline);
-  }
+devtools-recorder-step-editor {
+  border: 1px solid var(--sys-color-neutral-outline);
+  padding: 3px 6px 6px;
+  margin-left: -6px;
+  border-radius: 3px;
+}
 
-  .summary {
-    display: flex;
-    flex-flow: row nowrap;
-  }
+devtools-recorder-step-editor:hover {
+  border: 1px solid var(--sys-color-neutral-outline);
+}
 
-  .filler {
-    flex-grow: 1;
-  }
+devtools-recorder-step-editor.is-selected {
+  background-color: color-mix(in srgb, var(--sys-color-tonal-container), var(--sys-color-cdt-base-container) 50%);
+  border: 1px solid var(--sys-color-tonal-outline);
+}
 
-  .subtitle {
-    font-weight: normal;
-    color: var(--sys-color-on-surface-subtle);
-    word-break: break-all;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
+.summary {
+  display: flex;
+  flex-flow: row nowrap;
+}
 
-  .main-title {
-    word-break: break-all;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
+.filler {
+  flex-grow: 1;
+}
 
-  .step-actions {
-    border: none;
-    border-radius: 0;
-    height: 24px;
+.subtitle {
+  font-weight: normal;
+  color: var(--sys-color-on-surface-subtle);
+  word-break: break-all;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
 
-    --override-select-menu-show-button-border-radius: 0;
-    --override-select-menu-show-button-outline: none;
-    --override-select-menu-show-button-padding: 0;
-  }
+.main-title {
+  word-break: break-all;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
 
-  .step.has-breakpoint .circle-icon {
-    visibility: hidden;
-  }
+.step-actions {
+  border: none;
+  border-radius: 0;
+  height: 24px;
 
-  .step:not(.is-start-of-group).has-breakpoint .breakpoint-icon {
-    visibility: visible;
-    opacity: 100%;
-  }
+  --override-select-menu-show-button-border-radius: 0;
+  --override-select-menu-show-button-outline: none;
+  --override-select-menu-show-button-padding: 0;
+}
 
-  .step:not(.is-start-of-group, .has-breakpoint) .icon:hover .circle-icon {
-    transition: opacity 0.2s;
-    opacity: 0%;
-  }
+.step.has-breakpoint .circle-icon {
+  visibility: hidden;
+}
 
-  .step:not(.is-start-of-group, .has-breakpoint) .icon:hover .error-icon {
-    visibility: hidden;
-  }
+.step:not(.is-start-of-group).has-breakpoint .breakpoint-icon {
+  visibility: visible;
+  opacity: 100%;
+}
 
-  .step:not(.is-start-of-group, .has-breakpoint) .icon:hover .breakpoint-icon {
-    transition: opacity 0.2s;
-    visibility: visible;
-    opacity: 50%;
-  }
+.step:not(.is-start-of-group, .has-breakpoint) .icon:hover .circle-icon {
+  transition: opacity 0.2s;
+  opacity: 0%;
+}
+
+.step:not(.is-start-of-group, .has-breakpoint) .icon:hover .error-icon {
+  visibility: hidden;
+}
+
+.step:not(.is-start-of-group, .has-breakpoint) .icon:hover .breakpoint-icon {
+  transition: opacity 0.2s;
+  visibility: visible;
+  opacity: 50%;
 }