chrome-devtools-frontend 1.0.1550444 → 1.0.1555174

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

@@ -2,51 +2,85 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import * as UI from '../../../ui/legacy/legacy.js';
 import * as Lit from '../../../ui/lit/lit.js';
 
 import controlButtonStyles from './controlButton.css.js';
 
-const {html, Decorators, LitElement} = Lit;
-const {customElement, property} = Decorators;
+const {html} = Lit;
 
-declare global {
-  interface HTMLElementTagNameMap {
-    'devtools-control-button': ControlButton;
-  }
+export interface ViewInput {
+  label: string;
+  shape: string;
+  disabled: boolean;
+  onClick: (event: Event) => void;
 }
 
-@customElement('devtools-control-button')
-export class ControlButton extends LitElement {
-  @property() declare label: string;
-  @property() declare shape: string;
-  @property({type: Boolean}) declare disabled: boolean;
-
-  constructor() {
-    super();
-    this.label = '';
-    this.shape = 'square';
-    this.disabled = false;
-  }
-
-  #handleClickEvent = (event: Event): void => {
-    if (this.disabled) {
+export const DEFAULT_VIEW = (input: ViewInput, _output: unknown, target: HTMLElement): void => {
+  const {label, shape, disabled, onClick} = input;
+  const handleClickEvent = (event: Event): void => {
+    if (disabled) {
       event.stopPropagation();
       event.preventDefault();
+    } else {
+      onClick(event);
     }
   };
+  // clang-format off
+  Lit.render(html`
+    <style>${controlButtonStyles}</style>
+    <button
+        @click=${handleClickEvent}
+        .disabled=${disabled}
+        class="control">
+      <div class="icon ${shape}"></div>
+      <div class="label">${label}</div>
+    </button>
+  `, target);
+  // clang-format on
+};
+
+export class ControlButton extends UI.Widget.Widget {
+  #label = '';
+  #shape = 'square';
+  #disabled = false;
+  #onClick: (event: Event) => void = () => {};
+
+  #view: typeof DEFAULT_VIEW;
+
+  constructor(element?: HTMLElement, view?: typeof DEFAULT_VIEW) {
+    super(element, {useShadowDom: true, classes: ['flex-none']});
+    this.#view = view || DEFAULT_VIEW;
+  }
+
+  set label(label: string) {
+    this.#label = label;
+    this.requestUpdate();
+  }
+
+  set shape(shape: string) {
+    this.#shape = shape;
+    this.requestUpdate();
+  }
+
+  set disabled(disabled: boolean) {
+    this.#disabled = disabled;
+    this.requestUpdate();
+  }
+
+  set onClick(onClick: (event: Event) => void) {
+    this.#onClick = onClick;
+    this.requestUpdate();
+  }
 
-  protected override render(): unknown {
-    // clang-format off
-    return html`
-            <style>${controlButtonStyles}</style>
-            <button
-                @click=${this.#handleClickEvent}
-                .disabled=${this.disabled}
-                class="control">
-              <div class="icon ${this.shape}"></div>
-              <div class="label">${this.label}</div>
-            </button>
-        `;
-    // clang-format on
+  override performUpdate(): void {
+    this.#view(
+        {
+          label: this.#label,
+          shape: this.#shape,
+          disabled: this.#disabled,
+          onClick: this.#onClick,
+        },
+        {}, this.contentElement);
   }
 }

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

@@ -3,7 +3,6 @@
 // found in the LICENSE file.
 
 import '../../../ui/kit/kit.js';
-import './ControlButton.js';
 
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as Badges from '../../../models/badges/badges.js';
@@ -15,6 +14,7 @@ import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 import * as Models from '../models/models.js';
 import * as Actions from '../recorder-actions/recorder-actions.js';
 
+import {ControlButton} from './ControlButton.js';
 import createRecordingViewStyles from './createRecordingView.css.js';
 
 const {html, Directives: {ref, createRef, repeat}} = Lit;
@@ -267,16 +267,19 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
       </div>
       <div class="footer">
         <div class="controls">
-          <devtools-control-button
-            @click=${onRecordingStarted}
-            .label=${i18nString(UIStrings.startRecording)}
-            .shape=${'circle'}
+          <devtools-widget
+            class="control-button"
+            .widgetConfig=${UI.Widget.widgetConfig(ControlButton, {
+              label: i18nString(UIStrings.startRecording),
+              shape: 'circle',
+              onClick: onRecordingStarted,
+            })}
             jslog=${VisualLogging.action(Actions.RecorderActions.START_RECORDING).track({click: true})}
             title=${Models.Tooltip.getTooltipForActions(
               i18nString(UIStrings.startRecording),
               Actions.RecorderActions.START_RECORDING,
             )}
-          ></devtools-control-button>
+          ></devtools-widget>
         </div>
       </div>
     `,

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

@@ -4,8 +4,6 @@
 
 import '../../../ui/kit/kit.js';
 import './ExtensionView.js';
-import './ControlButton.js';
-import './ReplaySection.js';
 
 import * as Host from '../../../core/host/host.js';
 import * as i18n from '../../../core/i18n/i18n.js';
@@ -29,14 +27,15 @@ import * as Models from '../models/models.js';
 import {PlayRecordingSpeed} from '../models/RecordingPlayer.js';
 import * as Actions from '../recorder-actions/recorder-actions.js';
 
+import {ControlButton} from './ControlButton.js';
 import recordingViewStyles from './recordingView.css.js';
-import type {ReplaySectionData, StartReplayEvent} from './ReplaySection.js';
+import {ReplaySection} from './ReplaySection.js';
 import {
   type CopyStepEvent,
   State,
-  type StepView,
-  type StepViewData,
+  StepView,
 } from './StepView.js';
+
 const {html} = Lit;
 
 const UIStrings = {
@@ -549,17 +548,15 @@ function renderReplayOrAbortButton(input: ViewInput): Lit.LitTemplate {
   }
 
   // clang-format off
-    return html`<devtools-replay-section
-        .data=${
-          {
-            settings: input.recorderSettings,
-            replayExtensions: input.replayExtensions,
-          } as ReplaySectionData
-        }
-        .disabled=${input.replayState.isPlaying}
-        @startreplay=${input.onTogglePlaying}
+    return html`<devtools-widget
+        .widgetConfig=${UI.Widget.widgetConfig(ReplaySection, {
+          settings: input.recorderSettings,
+          replayExtensions: input.replayExtensions,
+          onStartReplay: input.onTogglePlaying,
+          disabled: input.replayState.isPlaying,
+        })}
         >
-      </devtools-replay-section>`;
+      </devtools-widget>`;
   // clang-format on
 }
 
@@ -597,65 +594,61 @@ function renderSections(input: ViewInput): Lit.LitTemplate {
               </div>
               <div class="content">
                 <div class="steps">
-                  <devtools-step-view
-                    @click=${input.onStepClick}
-                    @mouseover=${input.onStepHover}
-                    .data=${
-                      {
-                        section,
-                        state: input.getSectionState(section),
-                        isStartOfGroup: true,
-                        isEndOfGroup: section.steps.length === 0,
-                        isFirstSection: i === 0,
-                        isLastSection:
-                          i === input.sections.length - 1 &&
-                          section.steps.length === 0,
-                        isSelected:
-                          input.selectedStep === (section.causingStep || null),
-                        sectionIndex: i,
-                        isRecording: input.isRecording,
-                        isPlaying: input.replayState.isPlaying,
-                        error:
-                          input.getSectionState(section) === State.ERROR
-                            ? input.currentError
-                            : undefined,
-                        hasBreakpoint: false,
-                        removable: input.recording.steps.length > 1 && section.causingStep,
-                      } as StepViewData
-                    }
+                  <devtools-widget
+                    .widgetConfig=${UI.Widget.widgetConfig(StepView, {
+                      section,
+                      state: input.getSectionState(section),
+                      isStartOfGroup: true,
+                      isEndOfGroup: section.steps.length === 0,
+                      isFirstSection: i === 0,
+                      isLastSection:
+                        i === input.sections.length - 1 &&
+                        section.steps.length === 0,
+                      isSelected:
+                        input.selectedStep === (section.causingStep || null),
+                      sectionIndex: i,
+                      isRecording: input.isRecording,
+                      isPlaying: input.replayState.isPlaying,
+                      error:
+                        input.getSectionState(section) === State.ERROR
+                          ? (input.currentError ?? undefined)
+                          : undefined,
+                      hasBreakpoint: false,
+                      removable: input.recording.steps.length > 1 && Boolean(section.causingStep),
+                      onStepClick: input.onStepClick,
+                      onStepHover: input.onStepHover,
+                    })}
                   >
-                  </devtools-step-view>
+                  </devtools-widget>
                   ${section.steps.map(step => {
                     const stepIndex = input.recording.steps.indexOf(step);
                     return html`
-                      <devtools-step-view
-                      @click=${input.onStepClick}
-                      @mouseover=${input.onStepHover}
+                      <devtools-widget
                       @copystep=${input.onCopyStep}
-                      .data=${
-                        {
-                          step,
-                          state: input.getStepState(step),
-                          error: input.currentStep === step ? input.currentError : undefined,
-                          isFirstSection: false,
-                          isLastSection:
-                            i === input.sections.length - 1 && input.recording.steps[input.recording.steps.length - 1] === step,
-                          isStartOfGroup: false,
-                          isEndOfGroup: section.steps[section.steps.length - 1] === step,
-                          stepIndex,
-                          hasBreakpoint: input.breakpointIndexes.has(stepIndex),
-                          sectionIndex: -1,
-                          isRecording: input.isRecording,
-                          isPlaying: input.replayState.isPlaying,
-                          removable: input.recording.steps.length > 1,
-                          builtInConverters: input.builtInConverters,
-                          extensionConverters: input.extensionConverters,
-                          isSelected: input.selectedStep === step,
-                          recorderSettings: input.recorderSettings,
-                        } as StepViewData
-                      }
+                      .widgetConfig=${UI.Widget.widgetConfig(StepView, {
+                        step,
+                        state: input.getStepState(step),
+                        error: input.currentStep === step ? (input.currentError ?? undefined) : undefined,
+                        isFirstSection: false,
+                        isLastSection:
+                          i === input.sections.length - 1 && input.recording.steps[input.recording.steps.length - 1] === step,
+                        isStartOfGroup: false,
+                        isEndOfGroup: section.steps[section.steps.length - 1] === step,
+                        stepIndex,
+                        hasBreakpoint: input.breakpointIndexes.has(stepIndex),
+                        sectionIndex: -1,
+                        isRecording: input.isRecording,
+                        isPlaying: input.replayState.isPlaying,
+                        removable: input.recording.steps.length > 1,
+                        builtInConverters: input.builtInConverters as Converters.Converter.Converter[],
+                        extensionConverters: input.extensionConverters as Converters.Converter.Converter[],
+                        isSelected: input.selectedStep === step,
+                        recorderSettings: input.recorderSettings ?? undefined,
+                        onStepClick: input.onStepClick,
+                        onStepHover: input.onStepHover,
+                      })}
                       jslog=${VisualLogging.section('step').track({click: true})}
-                      ></devtools-step-view>
+                      ></devtools-widget>
                     `;
                   })}
                   ${!input.recordingTogglingInProgress && input.isRecording && i === input.sections.length - 1 ? html`<devtools-button
@@ -683,7 +676,7 @@ function renderSections(input: ViewInput): Lit.LitTemplate {
       )}
       </div>
     `;
-        // clang-format on
+    // clang-format on
 }
 
 function renderHeader(input: ViewInput): Lit.LitTemplate {
@@ -790,15 +783,15 @@ interface ViewInput {
   getStepState: (step: Models.Schema.Step) => State;
   onAbortReplay: () => void;
   onMeasurePerformanceClick: (event: Event) => void;
-  onTogglePlaying: (event: StartReplayEvent) => void;
+  onTogglePlaying: (speed: PlayRecordingSpeed, extension?: Extensions.ExtensionManager.Extension) => void;
   onCodeFormatChange: (event: Menus.SelectMenu.SelectMenuItemSelectedEvent) => void;
   onCopyStep: (event: CopyStepEvent) => void;
   onEditTitleButtonClick: (event: Event) => void;
   onNetworkConditionsChange: (event: Event) => void;
   onReplaySettingsKeydown: (event: Event) => void;
   onSelectMenuLabelClick: (event: Event) => void;
-  onStepClick: (event: Event) => void;
-  onStepHover: (event: MouseEvent) => void;
+  onStepClick: (step: Models.Schema.Step|Models.Section.Section) => void;
+  onStepHover: (step: Models.Schema.Step|Models.Section.Section) => void;
   onTimeoutInput: (event: Event) => void;
   onTitleBlur: (event: Event) => void;
   onTitleInputKeyDown: (event: KeyboardEvent) => void;
@@ -844,18 +837,21 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
         `}
         ${input.isRecording ? html`<div class="footer">
           <div class="controls">
-            <devtools-control-button
+            <devtools-widget
+              class="control-button"
+              .widgetConfig=${UI.Widget.widgetConfig(ControlButton, {
+                label: footerButtonTitle,
+                shape: 'square',
+                disabled: input.recordingTogglingInProgress,
+                onClick: input.onRecordingFinished,
+              })}
               jslog=${VisualLogging.toggle('toggle-recording').track({click: true})}
-              @click=${input.onRecordingFinished}
-              .disabled=${input.recordingTogglingInProgress}
-              .shape=${'square'}
-              .label=${footerButtonTitle}
               title=${Models.Tooltip.getTooltipForActions(
                 footerButtonTitle,
                 Actions.RecorderActions.START_RECORDING,
               )}
             >
-            </devtools-control-button>
+            </devtools-widget>
           </div>
         </div>`: Lit.nothing}
       </div>
@@ -977,11 +973,11 @@ export class RecordingView extends UI.Widget.Widget {
             this.abortReplay?.();
           },
           onMeasurePerformanceClick: this.#handleMeasurePerformanceClickEvent.bind(this),
-          onTogglePlaying: (event: StartReplayEvent) => {
+          onTogglePlaying: (speed: PlayRecordingSpeed, extension?: Extensions.ExtensionManager.Extension) => {
             this.playRecording?.({
               targetPanel: TargetPanel.DEFAULT,
-              speed: event.speed,
-              extension: event.extension,
+              speed,
+              extension,
             });
           },
           onCodeFormatChange: this.#onCodeFormatChange.bind(this),
@@ -1073,19 +1069,16 @@ export class RecordingView extends UI.Widget.Widget {
     return index >= ownIndex ? State.SUCCESS : State.OUTSTANDING;
   }
 
-  #onStepHover = (event: MouseEvent): void => {
-    const stepView = event.target as StepView;
-    const step = stepView.step || stepView.section?.causingStep;
+  #onStepHover = (stepOrSection: Models.Schema.Step|Models.Section.Section): void => {
+    const step = 'type' in stepOrSection ? stepOrSection : stepOrSection.causingStep;
     if (!step || this.#selectedStep) {
       return;
     }
     this.#highlightCodeForStep(step);
   };
 
-  #onStepClick(event: Event): void {
-    event.stopPropagation();
-    const stepView = event.target as StepView;
-    const selectedStep = stepView.step || stepView.section?.causingStep || null;
+  #onStepClick(stepOrSection: Models.Schema.Step|Models.Section.Section): void {
+    const selectedStep = 'type' in stepOrSection ? stepOrSection : stepOrSection.causingStep || null;
     if (this.#selectedStep === selectedStep) {
       return;
     }